From 8bd323cc73ac7823d8c44eca59479c11d90bb2a5 Mon Sep 17 00:00:00 2001
From: "Logan.Li" <admin@attacker.club>
Date: Tue, 27 Oct 2026 14:33:21 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=B3=BB=E7=BB=9F=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E6=8B=86=E5=88=86=E9=A1=B6=E9=83=A8=20Tab=20=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/frontend/src/pages/SystemSettings.tsx b/frontend/src/pages/SystemSettings.tsx
index c49b0fa..4a6f40c 100644
--- a/frontend/src/pages/SystemSettings.tsx
+++ b/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,21 +288,44 @@ export default function SystemSettings() {
             </span>
           )}
         </div>
-        <div className="flex items-center 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" />恢复默认
+      </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>
-          <button onClick={() => saveMutation.mutate()} disabled={saveMutation.isPending}
-            className="flex items-center gap-1 px-3 py-[5px] text-[12px] font-medium rounded-md text-white disabled:opacity-60" style={{ background: 'var(--accent-blue)' }}>
-            {saveMutation.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
-            {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">
+          {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>
+            <button onClick={() => saveMutation.mutate()} disabled={saveMutation.isPending}
+              className="flex items-center gap-1 px-3 py-[5px] text-[12px] font-medium rounded-md text-white disabled:opacity-60" style={{ background: 'var(--accent-blue)' }}>
+              {saveMutation.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
+              {saveMutation.isPending ? '保存中...' : '保存设置'}
+            </button>
+          </div>
           {/* 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>
   );