feat(mcp): 设置 → MCP 子页 + 策略 API + 官网/文档接入

借鉴 DBX：安装检测（Node/npm/包/Go 二进制）、只读与 allow_dangerous、
连接白名单、多客户端配置片段；GET/PUT /api/ai/mcp-policy、/mcp-install；
文档 /docs/mcp 与落地页 AI/MCP 块；对照 docs/16 勾选设置项、列仍未完清单。

src/SettingsModal.tsx

@@ -1,20 +1,44 @@
 import { useEffect, useState } from "react";
+import {
+  ExternalLink,
+  Info,
+  Keyboard,
+  Monitor,
+  Puzzle,
+  Server,
+  Shield,
+  Sparkles,
+  Table,
+  Zap,
+  type LucideIcon,
+} from "lucide-react";
 import { driverStatus, health, type DriverStatusItem } from "./api";
 import { OpsModal } from "./OpsModal";
+import { AiSettings } from "./AiPanel";
+import { McpSettings } from "./McpSettings";
+import { DriverManager } from "./DriverManager";
+import appPackage from "../package.json";
 import { useWorkspaceStore } from "./store";
+import { openExternal } from "./openExternal";
 
 const IS_MAC = typeof navigator !== "undefined" && /Mac/i.test(navigator.platform);
 const MOD = IS_MAC ? "⌘" : "Ctrl";
 
-type TabId = "general" | "execution" | "results" | "drivers" | "shortcuts" | "about";
+const WECHAT_GROUP_URL = "https://docs.qq.com/doc/DTFpxcndud0xPd1hX";
+const DRIVER_STORE_URL = "https://gitee.com/attacker/opsxdb-driver";
 
-const TABS: Array<{ id: TabId; icon: string; label: string; desc: string }> = [
-  { id: "general", icon: "🎨", label: "常规", desc: "主题与界面" },
-  { id: "execution", icon: "⚡", label: "执行", desc: "超时与多语句" },
-  { id: "results", icon: "📊", label: "结果", desc: "面板与分页" },
-  { id: "drivers", icon: "🧩", label: "驱动", desc: "agent 驱动状态" },
-  { id: "shortcuts", icon: "⌨️", label: "快捷键", desc: "键盘操作一览" },
-  { id: "about", icon: "ℹ️", label: "关于", desc: "版本与数据目录" },
+type TabId = "general" | "execution" | "results" | "ai" | "mcp" | "security" | "drivers" | "shortcuts" | "about";
+
+const TABS: Array<{ id: TabId; icon: LucideIcon; label: string; desc: string }> = [
+  { id: "general", icon: Monitor, label: "常规", desc: "主题与界面" },
+  { id: "execution", icon: Zap, label: "执行", desc: "超时与多语句" },
+  { id: "results", icon: Table, label: "结果", desc: "面板与分页" },
+  { id: "ai", icon: Sparkles, label: "AI 助手", desc: "模型、API Key 与连接测试" },
+  { id: "mcp", icon: Server, label: "MCP", desc: "安装检测、只读与客户端配置" },
+  { id: "security", icon: Shield, label: "安全与数据", desc: "本机存储与执行保护" },
+  { id: "drivers", icon: Puzzle, label: "驱动", desc: "agent 驱动状态" },
+  { id: "shortcuts", icon: Keyboard, label: "快捷键", desc: "键盘操作一览" },
+  { id: "about", icon: Info, label: "关于", desc: "版本与资源" },
 ];
 
 function Row({ label, children, hint }: { label: string; children: React.ReactNode; hint?: string }) {
@@ -69,6 +93,22 @@ function Seg<T extends string | number>({ value, options, onChange }: { value: T
   );
 }
 
+function AboutLink({ label, description, onClick }: { label: string; description: string; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors hover:bg-[color-mix(in_srgb,var(--ops-accent)_8%,transparent)]"
+    >
+      <div className="min-w-0 flex-1">
+        <div className="text-[12.5px] font-medium" style={{ color: "var(--ops-text)" }}>{label}</div>
+        <div className="mt-0.5 text-[11px] leading-relaxed" style={{ color: "var(--ops-muted)" }}>{description}</div>
+      </div>
+      <ExternalLink className="h-3.5 w-3.5 shrink-0" style={{ color: "var(--ops-muted)" }} aria-hidden strokeWidth={1.5} />
+    </button>
+  );
+}
+
 /** 设置弹框：左分类导航 + 右面板（对标 opsxshell / DBeaver Preferences） */
 export function SettingsModal({ onClose }: { onClose: () => void }) {
   const [tab, setTab] = useState<TabId>("general");
@@ -79,14 +119,20 @@ export function SettingsModal({ onClose }: { onClose: () => void }) {
   const resultRatio = useWorkspaceStore((s) => s.resultRatio);
   const set = useWorkspaceStore((s) => s.set);
   const notify = useWorkspaceStore((s) => s.notify);
-  const openConnectionList = useWorkspaceStore((s) => s.openConnectionList);
+  const [showDriverManager, setShowDriverManager] = useState(false);
+  const [driverError, setDriverError] = useState("");
 
   const [drivers, setDrivers] = useState<DriverStatusItem[] | null>(null);
   const [navSearch, setNavSearch] = useState("");
   const [version, setVersion] = useState<string>("");
 
+  const reloadDrivers = () => {
+    setDriverError("");
+    setDrivers(null);
+    void driverStatus().then(setDrivers).catch(() => setDriverError("驱动状态加载失败，请确认本机服务已启动。"));
+  };
   useEffect(() => {
-    void driverStatus().then(setDrivers).catch(() => setDrivers([]));
+    reloadDrivers();
     void health().then((h) => setVersion(String((h as { version?: string }).version ?? ""))).catch(() => {});
   }, []);
 
@@ -97,59 +143,74 @@ export function SettingsModal({ onClose }: { onClose: () => void }) {
     notify({ kind: "success", title: "已重置", message: "面板布局恢复默认", mode: "toast", durationMs: 1400 });
   };
 
+  const visibleTabs = TABS.filter((t) => (t.label + t.desc + (t.id === "general" ? "主题 深色 浅色 布局" : "") + (t.id === "mcp" ? "mcp cursor claude npm 只读 白名单" : "") + (t.id === "ai" ? "deepseek 模型 agent" : "")).toLowerCase().includes(navSearch.trim().toLowerCase()));
+  const activeTab = visibleTabs.find((t) => t.id === tab) ?? visibleTabs[0];
+  const active = activeTab?.id;
+
   return (
-    <OpsModal variant="info" title="设置" onOk={onClose}>
-      <div className="flex" style={{ minWidth: 560, minHeight: 340 }}>
-        {/* 左导航:搜索 + 图标主标题 + 副文案(对齐 opsxshell 质感) */}
-        <nav className="w-52 shrink-0 border-r pr-1" style={{ borderColor: "var(--ops-border-soft)" }}>
+    <>
+    <OpsModal wide variant="info" title="设置" okLabel="完成" onOk={onClose}>
+      <div className="flex" style={{ height: "min(520px, 65vh)", minHeight: 260 }}>
+        {/* 左导航:搜索 + 线框图标 + 主标题/副文案（对齐 opsxshell） */}
+        <nav aria-label="设置分类" className="w-44 shrink-0 overflow-y-auto border-r pr-3" style={{ borderColor: "var(--ops-border-soft)" }}>
           <input
             className="ops-input mb-2 h-7 w-full text-[12px]"
             placeholder="搜索设置…"
+            aria-label="搜索设置"
             value={navSearch}
             onChange={(e) => setNavSearch(e.target.value)}
           />
-          {TABS.filter((t) => {
-            const q = navSearch.trim().toLowerCase();
-            if (!q) return true;
-            return (t.label + t.desc).toLowerCase().includes(q);
-          }).map((t) => (
-            <button
-              key={t.id}
-              type="button"
-              className={`flex w-full items-center gap-2 rounded px-2 py-2 text-left transition ${
-                tab === t.id
-                  ? "bg-[color-mix(in_srgb,var(--ops-accent)_12%,transparent)]"
-                  : "opacity-75 hover:opacity-100"
-              }`}
-              style={tab === t.id ? { boxShadow: "inset 2px 0 0 var(--ops-accent)" } : undefined}
-              onClick={() => setTab(t.id)}
-            >
-              <span className="w-4 text-center text-[13px]" style={tab === t.id ? { color: "var(--ops-accent)" } : { color: "var(--ops-muted)" }}>
-                {t.icon}
-              </span>
-              <span className="min-w-0 flex-1">
-                <span className="block text-[12px] font-medium">{t.label}</span>
-                <span className="block text-[10px]" style={{ color: "var(--ops-muted)" }}>{t.desc}</span>
-              </span>
-            </button>
-          ))}
+          {visibleTabs.map((t) => {
+            const Icon = t.icon;
+            const selected = active === t.id;
+            return (
+              <button
+                key={t.id}
+                type="button"
+                className={`flex w-full items-center gap-2 rounded px-2 py-2 text-left transition ${
+                  selected
+                    ? "bg-[color-mix(in_srgb,var(--ops-accent)_12%,transparent)]"
+                    : "opacity-75 hover:opacity-100"
+                }`}
+                style={selected ? { boxShadow: "inset 2px 0 0 var(--ops-accent)" } : undefined}
+                aria-current={selected ? "page" : undefined}
+                onClick={() => setTab(t.id)}
+              >
+                <span className="grid h-4 w-4 shrink-0 place-items-center" style={{ color: selected ? "var(--ops-accent)" : "var(--ops-muted)" }}>
+                  <Icon className="h-4 w-4" strokeWidth={1.5} aria-hidden />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block text-[12px] font-medium">{t.label}</span>
+                  <span className="block text-[10px]" style={{ color: "var(--ops-muted)" }}>{t.desc}</span>
+                </span>
+              </button>
+            );
+          })}
         </nav>
 
         {/* 右面板 */}
-        <div className="min-w-0 flex-1 space-y-4 pl-4">
-          {tab === "general" && (
+        <div className="min-w-0 flex-1 space-y-4 overflow-y-auto pl-4 pr-1">
+          {activeTab ? <div className="border-b pb-3" style={{ borderColor: "var(--ops-border-soft)" }}><h2 className="text-base font-semibold">{activeTab.label}</h2></div> : <div className="py-12 text-center"><p>没有匹配的设置</p><button className="ops-btn-secondary mt-3" onClick={() => setNavSearch("")}>清空搜索</button></div>}
+          {active === "ai" && <AiSettings onClose={() => setTab("general")} />}
+          {active === "mcp" && <McpSettings />}
+          {active === "security" && <div className="space-y-4 text-xs leading-relaxed"><Row label="危险语句确认" hint="DROP、TRUNCATE 和无 WHERE 删除等操作，执行前需确认。"><span>始终开启</span></Row><Row label="连接与查询" hint="连接信息、查询标签与界面偏好保存在本机。连接密码目前仅作混淆保存，并非系统钥匙串加密。"><span>本机存储</span></Row><Row label="AI 数据" hint="使用 AI 时，输入的问题与选取的结构上下文会发送至所配置的 AI 服务。API Key 保存后不回显明文。"><span>按需发送</span></Row></div>}
+          {active === "general" && (
             <>
               <Row label="主题">
                 <Seg
                   value={theme}
-                  options={[{ v: "dark" as const, label: "深色" }, { v: "light" as const, label: "浅色" }]}
+                  options={[
+                    { v: "dark" as const, label: "深色" },
+                    { v: "light" as const, label: "浅色" },
+                    { v: "system" as const, label: "随系统" },
+                  ]}
                   onChange={(v) => set("theme", v)}
                 />
               </Row>
-              <Row label="显示 AI 面板" hint="工作台右侧的 AI 助手面板">
+              <Row label="显示 AI 面板">
                 <Toggle checked={showAi} onChange={(v) => set("showAi", v)} />
               </Row>
-              <Row label="面板布局" hint="侧栏宽度、AI 面板宽度、结果面板占比">
+              <Row label="面板布局">
                 <button type="button" className="ops-btn-secondary h-6 px-2 text-[11px]" onClick={resetLayout}>
                   恢复默认
                 </button>
@@ -157,7 +218,7 @@ export function SettingsModal({ onClose }: { onClose: () => void }) {
             </>
           )}
 
-          {tab === "execution" && (
+          {active === "execution" && (
             <>
               <Row label="默认执行超时" hint="单语句执行上限，超时由服务端强制中断">
                 <Seg
@@ -172,7 +233,7 @@ export function SettingsModal({ onClose }: { onClose: () => void }) {
                   onChange={(v) => set("execTimeoutMs", v)}
                 />
               </Row>
-              <Row label="多语句遇错即停" hint="一次执行多条时，某条失败即停止后续">
+              <Row label="多语句遇错即停">
                 <Toggle checked={stopOnError} onChange={(v) => set("stopOnError", v)} />
               </Row>
               <Row label="危险语句确认" hint="DROP/TRUNCATE/无 WHERE 删除等由服务端权威拦截，执行前需二次确认（不可关闭）">
@@ -181,9 +242,9 @@ export function SettingsModal({ onClose }: { onClose: () => void }) {
             </>
           )}
 
-          {tab === "results" && (
+          {active === "results" && (
             <>
-              <Row label={`结果面板占比 ${Math.round(resultRatio * 100)}%`} hint="编辑器与结果面板的高度分配">
+              <Row label={`结果面板占比 ${Math.round(resultRatio * 100)}%`}>
                 <input
                   type="range"
                   min={25}
@@ -199,10 +260,12 @@ export function SettingsModal({ onClose }: { onClose: () => void }) {
             </>
           )}
 
-          {tab === "drivers" && (
+          {active === "drivers" && (
             <>
               <div className="space-y-1.5">
-                {drivers === null && <div className="text-[11px]" style={{ color: "var(--ops-muted)" }}>加载中…</div>}
+                {driverError && <div role="alert" className="text-xs">{driverError}<button className="ops-btn-secondary ml-2" onClick={reloadDrivers}>重试</button></div>}
+                {drivers?.length === 0 && <p className="text-xs">暂无需要管理的驱动。</p>}
+                {!driverError && drivers === null && <div className="text-[11px]" style={{ color: "var(--ops-muted)" }}>加载中…</div>}
                 {drivers?.map((d) => (
                   <div key={d.id} className="flex items-center justify-between rounded border px-2 py-1.5 text-[11.5px]" style={{ borderColor: "var(--ops-border-soft)" }}>
                     <span>{d.id}</span>
@@ -212,15 +275,11 @@ export function SettingsModal({ onClose }: { onClose: () => void }) {
                   </div>
                 ))}
               </div>
-              <Row label="驱动管理" hint="预装下载、离线包导入、JDK 检测">
+              <Row label="驱动管理">
                 <button
                   type="button"
                   className="ops-btn-secondary h-6 px-2 text-[11px]"
-                  onClick={() => {
-                    onClose();
-                    openConnectionList();
-                    notify({ kind: "info", title: "驱动管理", message: "连接列表页右上角 ⚙ 打开驱动管理", mode: "toast", durationMs: 2600 });
-                  }}
+                  onClick={() => setShowDriverManager(true)}
                 >
                   去管理
                 </button>
@@ -228,7 +287,7 @@ export function SettingsModal({ onClose }: { onClose: () => void }) {
             </>
           )}
 
-          {tab === "shortcuts" && (
+          {active === "shortcuts" && (
             <div className="space-y-1.5">
               {[
                 [`${MOD} + Enter`, "执行当前语句或选区"],
@@ -238,7 +297,8 @@ export function SettingsModal({ onClose }: { onClose: () => void }) {
                 ["Ctrl + Tab", "循环切换查询"],
                 [`${MOD} + ⇧ + F`, "聚焦对象树过滤框"],
                 [`${MOD} + B`, "显示/隐藏 AI"],
-                [`${MOD} + /`, "快捷键帮助"],
+                [`${MOD} + /`, "注释 / 取消注释"],
+                [`${MOD} + ⇧ + /`, "快捷键帮助"],
                 ["双击表名", "打开前 100 行"],
                 ["双击单元格", "进入行编辑"],
               ].map(([k, v]) => (
@@ -250,30 +310,28 @@ export function SettingsModal({ onClose }: { onClose: () => void }) {
             </div>
           )}
 
-          {tab === "about" && (
-            <div className="space-y-2 text-[12px]" style={{ color: "var(--ops-text)" }}>
-              <div className="flex justify-between"><span style={{ color: "var(--ops-muted)" }}>版本</span><span className="font-mono">{version || "—"}</span></div>
-              <div className="flex justify-between"><span style={{ color: "var(--ops-muted)" }}>形态</span><span>桌面客户端（Tauri 2）</span></div>
-              <div className="flex justify-between gap-4">
-                <span style={{ color: "var(--ops-muted)" }}>驱动目录</span>
-                <span className="truncate font-mono" title="~/.opsxdb/drivers">~/.opsxdb/drivers</span>
-              </div>
-              <div className="flex justify-between gap-4">
-                <span style={{ color: "var(--ops-muted)" }}>驱动商店</span>
-                <a
-                  className="hover:underline"
-                  style={{ color: "var(--ops-accent)" }}
-                  href="https://gitee.com/attacker/opsxdb-driver"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  gitee.com/attacker/opsxdb-driver
-                </a>
+          {active === "about" && (
+            <div className="max-w-xl space-y-5 text-[12px]" style={{ color: "var(--ops-text)" }}>
+              <p className="px-1 text-[11px]" style={{ color: "var(--ops-muted)" }}>
+                <span className="font-mono">OpsxDB {appPackage.version}</span>
+                <span aria-hidden="true"> · </span>
+                桌面客户端
+                <span aria-hidden="true"> · </span>
+                本机服务 {version || "未连接"}
+              </p>
+              <div>
+                <div className="mb-2 px-1 text-[11px] font-medium" style={{ color: "var(--ops-muted)" }}>资源</div>
+                <div className="divide-y divide-[color:var(--ops-border-soft)] overflow-hidden rounded-lg border" style={{ borderColor: "var(--ops-border-soft)" }}>
+                  <AboutLink label="交流群" description="问题反馈与版本动态" onClick={() => void openExternal(WECHAT_GROUP_URL)} />
+                  <AboutLink label="驱动商店" description="查看可用驱动与安装说明" onClick={() => void openExternal(DRIVER_STORE_URL)} />
+                </div>
               </div>
             </div>
           )}
         </div>
       </div>
     </OpsModal>
+    {showDriverManager && <DriverManager onClose={() => { setShowDriverManager(false); reloadDrivers(); }} />}
+    </>
   );
 }