feat: 改进连接状态显示和模态框标题样式

- 在 MainContent 组件中重构连接状态显示，使用带有状态指示点和动态样式的 ConnectionStatus 子组件
- 更新 TopBar 组件中所有模态框的标题为居中对齐样式，并移除部分表单标签文本

frontend/react-template/src/components/MainContent/MainContent.module.css

@@ -26,10 +26,38 @@
 }
 
 .status {
-  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 200ms ease-in-out;
+}
+
+.statusDot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  transition: background-color 200ms ease-in-out;
+}
+
+.status.connected {
+  color: var(--color-success);
+}
+
+.status.connected .statusDot {
+  background-color: var(--color-success);
+  box-shadow: 0 0 8px var(--color-success);
+}
+
+.status.disconnected {
   color: var(--text-tertiary);
 }
 
+.status.disconnected .statusDot {
+  background-color: var(--border-medium);
+}
+
 .headerRight {
   display: flex;
   align-items: center;

frontend/react-template/src/components/MainContent/MainContent.tsx

@@ -18,6 +18,22 @@ interface MainContentProps {
   messageRefreshTrigger?: number;
 }
 
+interface ConnectionStatusProps {
+  isConnected: boolean;
+}
+
+const ConnectionStatus: FC<ConnectionStatusProps> = ({ isConnected }) => {
+  return (
+    <div
+      className={`${styles.status} ${isConnected ? styles.connected : styles.disconnected}`}
+      data-testid="connection-status"
+    >
+      <span className={styles.statusDot} />
+      <span>{isConnected ? "WebSocket 已连接" : "WebSocket 未连接"}</span>
+    </div>
+  );
+};
+
 export const MainContent: FC<MainContentProps> = ({
   traceId,
   onNodeClick,
@@ -83,7 +99,7 @@ export const MainContent: FC<MainContentProps> = ({
       <div className={styles.main}>
         <div className={styles.header}>
           <div className={styles.title}>暂无 Trace</div>
-          <div className={styles.status}>未连接</div>
+          <ConnectionStatus isConnected={connected} />
         </div>
         <div className={styles.content}>
           <div className={styles.empty}>暂无可展示的数据</div>
@@ -95,7 +111,7 @@ export const MainContent: FC<MainContentProps> = ({
   return (
     <div className={styles.main}>
       <div className={styles.header}>
-        <div className={styles.title}>{connected ? "WebSocket 已连接" : "WebSocket 未连接"}</div>
+        <ConnectionStatus isConnected={connected} />
         <div className={styles.headerRight}>
           <Select
             value={traceId}

frontend/react-template/src/components/TopBar/TopBar.tsx

@@ -261,7 +261,7 @@ export const TopBar: FC<TopBarProps> = ({
         </button>
       </div>
       <Modal
-        title="新建任务"
+        title={<div className="w-full text-center">新建任务</div>}
         visible={isModalVisible}
         onOk={handleConfirm}
         onCancel={() => setIsModalVisible(false)}
@@ -285,7 +285,7 @@ export const TopBar: FC<TopBarProps> = ({
         </Form>
       </Modal>
       <Modal
-        title="插入指令"
+        title={<div className="w-full text-center">插入指令</div>}
         visible={isInsertModalVisible}
         onOk={handleInsertConfirm}
         onCancel={() => setIsInsertModalVisible(false)}
@@ -296,14 +296,14 @@ export const TopBar: FC<TopBarProps> = ({
         <Form getFormApi={(api: any) => (insertFormApiRef.current = api)}>
           <Form.TextArea
             field="insert_prompt"
-            label="指令"
+            label=" "
             placeholder="请输入插入指令"
             autosize={{ minRows: 3, maxRows: 6 }}
           />
         </Form>
       </Modal>
       <Modal
-        title="反思"
+        title={<div className="w-full text-center">反思</div>}
         visible={isReflectModalVisible}
         onOk={handleReflectConfirm}
         onCancel={() => setIsReflectModalVisible(false)}
@@ -314,14 +314,14 @@ export const TopBar: FC<TopBarProps> = ({
         <Form getFormApi={(api: any) => (reflectFormApiRef.current = api)}>
           <Form.TextArea
             field="reflect_focus"
-            label="反思重点"
+            label=" "
             placeholder="请输入反思重点（可选）"
             autosize={{ minRows: 3, maxRows: 6 }}
           />
         </Form>
       </Modal>
       <Modal
-        title="经验列表"
+        title={<div className="w-full text-center">经验列表</div>}
         visible={isExperienceModalVisible}
         onCancel={() => setIsExperienceModalVisible(false)}
         footer={null}