refactor: 系统设置拆分顶部 Tab 分页

- 4 个 Tab：通用（外观主题+通知+语言区域）/ AI 助手 / 消息通知 /
  用户目录(LDAP)，复用编辑器 TopBar 下划线样式
- AI/消息通知/用户目录 Tab 标题带启用状态小圆点（绿=已启用）
- 原「保存设置/恢复默认」按钮移入通用 Tab（只作用于外观与通知）
- 内容区只渲染当前 Tab 卡片，纯布局重构，表单逻辑不变

frontend/src/pages/SystemSettings.tsx

@@ -261,6 +261,21 @@ export default function SystemSettings() {
     toast.info('已恢复默认设置', { description: '仅本地重置，点击「保存设置」后生效' });
   };
 
+  // 顶部 Tab 分页：通用 / AI 助手 / 消息通知 / 用户目录
+  type SettingsTab = 'general' | 'ai' | 'notify' | 'directory';
+  const [activeTab, setActiveTab] = useState<SettingsTab>('general');
+
+  const aiOn = !!settings?.llmEnabled && !!settings?.llmApiKeySet;
+  const larkOn = !!settings?.larkEnabled && !!settings?.larkWebhook;
+  const ldapOn = !!settings?.ldapEnabled && !!settings?.ldapHost && !!settings?.ldapBindDN && !!settings?.ldapBaseDN;
+
+  const tabs: { id: SettingsTab; label: string; dot?: boolean | null }[] = [
+    { id: 'general', label: '通用' },
+    { id: 'ai', label: 'AI 助手', dot: aiOn },
+    { id: 'notify', label: '消息通知', dot: larkOn },
+    { id: 'directory', label: '用户目录', dot: ldapOn },
+  ];
+
   return (
     <div className="h-full flex flex-col" style={{ background: 'var(--canvas-bg)' }}>
       {/* Header */}
@@ -273,7 +288,35 @@ export default function SystemSettings() {
             </span>
           )}
         </div>
-        <div className="flex items-center gap-2">
+      </div>
+
+      {/* Tab 栏（与流水线编辑器 TopBar 同款下划线样式） */}
+      <div className="px-5 border-b flex items-center gap-0 flex-shrink-0" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
+        {tabs.map((t) => (
+          <button
+            key={t.id}
+            onClick={() => setActiveTab(t.id)}
+            className="relative px-3 py-2 text-[12px] font-medium flex items-center gap-1.5"
+            style={{ color: activeTab === t.id ? 'var(--accent-blue)' : 'var(--text-secondary)' }}
+          >
+            {t.label}
+            {t.dot != null && (
+              <span className="w-1.5 h-1.5 rounded-full" style={{ background: t.dot ? '#1a7f37' : 'var(--text-tertiary)', opacity: t.dot ? 1 : 0.5 }} title={t.dot ? '已启用' : '未启用'} />
+            )}
+            {activeTab === t.id && (
+              <span className="absolute bottom-0 left-1 right-1 h-0.5 rounded-full" style={{ background: 'var(--accent-blue)' }} />
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto custom-scrollbar p-5">
+        <div className="max-w-3xl mx-auto space-y-4">
+          {activeTab === 'general' && (
+          <>
+          {/* 外观主题保存/恢复操作 */}
+          <div className="flex items-center justify-end gap-2">
             <button onClick={handleReset} className="flex items-center gap-1 px-3 py-[5px] text-[12px] font-medium rounded-md border" style={{ borderColor: 'var(--border-color-light)', color: 'var(--text-secondary)' }}>
               <RotateCcw className="w-3.5 h-3.5" />恢复默认
             </button>
@@ -283,11 +326,6 @@ export default function SystemSettings() {
               {saveMutation.isPending ? '保存中...' : '保存设置'}
             </button>
           </div>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto custom-scrollbar p-5">
-        <div className="max-w-3xl mx-auto space-y-4">
           {/* Appearance */}
           <div className="rounded-lg border overflow-hidden" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
             <div className="px-4 py-2.5 border-b flex items-center gap-2" style={{ borderColor: 'var(--border-color)', background: 'var(--panel-bg-secondary)' }}>
@@ -478,10 +516,13 @@ export default function SystemSettings() {
               <p className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>语言与时区暂未生效，仅作展示</p>
             </div>
           </div>
-        </div>
+          </>
+          )}
 
+          {activeTab === 'ai' && (
+          <>
         {/* AI 助手配置 */}
-        <div className="rounded-lg border overflow-hidden mt-4" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
+        <div className="rounded-lg border overflow-hidden" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
           <div className="px-5 py-3 border-b flex items-center justify-between" style={{ borderColor: 'var(--border-color)' }}>
             <div className="flex items-center gap-2">
               <span className="text-[13px] font-semibold" style={{ color: 'var(--text-primary)' }}>AI 助手（智能发布）</span>
@@ -555,9 +596,13 @@ export default function SystemSettings() {
             </div>
           </div>
         </div>
+          </>
+          )}
 
+          {activeTab === 'notify' && (
+          <>
         {/* 飞书 / Lark 通知 */}
-        <div className="rounded-lg border overflow-hidden mt-4" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
+        <div className="rounded-lg border overflow-hidden" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
           <div className="px-5 py-3 border-b flex items-center justify-between" style={{ borderColor: 'var(--border-color)' }}>
             <div className="flex items-center gap-2">
               <span className="text-[13px] font-semibold" style={{ color: 'var(--text-primary)' }}>飞书 / Lark 群通知</span>
@@ -593,9 +638,13 @@ export default function SystemSettings() {
             </div>
           </div>
         </div>
+          </>
+          )}
 
+          {activeTab === 'directory' && (
+          <>
         {/* LDAP 目录服务 */}
-        <div className="rounded-lg border overflow-hidden mt-4" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
+        <div className="rounded-lg border overflow-hidden" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
           <div className="px-5 py-3 border-b flex items-center justify-between" style={{ borderColor: 'var(--border-color)' }}>
             <div className="flex items-center gap-2">
               <span className="text-[13px] font-semibold" style={{ color: 'var(--text-primary)' }}>LDAP 目录服务</span>
@@ -693,6 +742,9 @@ export default function SystemSettings() {
             </div>
           )}
         </div>
+          </>
+          )}
+        </div>
       </div>
     </div>
   );