dsh-mcp-plus 0.1.0

package/src/client.ts

@@ -0,0 +1,482 @@
+// client.ts —— 浏览器侧 client 半入口
+// P6 版:表格化的服务器管理 UI
+//
+// 三种状态(在同一个页内切换,不是 Tab):
+//   列表(默认) — 表格行 + 「修改配置」按钮 + 顶部「+ 添加」+ 底部固定保存
+//   JSON      — 顶部「关闭编辑」+ 大 JSON 文本域 + 底部固定保存
+//   添加      — 弹出一个表单,简化字段(serverName/command/args/env/cwd)
+//
+// 数据模型:服务器列表存在于 UI 内存中,servers.json 是「持久化 + 真实状态」;
+// 任何修改(开关/添加/编辑/JSON)先改 UI 内存,点底部「保存」才写盘 + 重连。
+
+declare global {
+  interface Window {
+    __ModuleLoader__: {
+      load(info: {
+        id: string
+        factory: (
+          require: (mod: string) => unknown,
+        ) => {
+          name: string
+          inject: string[]
+          apply: (ctx: unknown) => void
+        }
+      }): void
+    }
+  }
+}
+
+/** 单台服务器的 UI 内部模型(status 来自 host 半:connecting / connected / disconnected / disabled) */
+interface ServerRow {
+  serverName: string
+  command: string
+  args: string[]
+  env: Record<string, string>
+  cwd: string
+  enabled: boolean
+  status: 'connecting' | 'connected' | 'disconnected' | 'disabled'
+}
+
+function makeFactory(): (require: (mod: string) => unknown) => unknown {
+  return (require) => {
+    const React = require('react') as {
+      useState: <T>(init: T) => [T, (v: T | ((p: T) => T)) => void]
+      useEffect: (fn: () => void | (() => void), deps?: unknown[]) => void
+    }
+    const { jsx: h } = require('react/jsx-runtime') as {
+      jsx: (type: string, props: Record<string, unknown>, key?: string) => unknown
+    }
+
+    const name = 'dsh-mcp-plus'
+    const inject: string[] = ['slots']
+
+    /** 共享样式 —— 用 DSH 语义 token,暗色主题自动适配 */
+    const styles = {
+      section: { padding: '16px 24px 80px', maxWidth: '720px', margin: '0 auto', position: 'relative' as const }, // 底部留位给 sticky 保存栏
+      desc: { fontSize: '13px', color: 'var(--dsw-alias-label-tertiary)', margin: '0 0 16px' },
+      btn: { padding: '8px 16px', cursor: 'pointer', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2)', background: 'transparent', color: 'var(--dsw-alias-label-primary)' },
+      btnPrimary: { padding: '8px 20px', cursor: 'pointer', borderRadius: '6px', border: '1px solid var(--dsw-alias-state-business-primary)', background: 'var(--dsw-alias-state-business-primary)', color: 'var(--dsw-alias-label-primary)', fontWeight: 600 as const },
+      row: {
+        display: 'flex', alignItems: 'center', gap: '12px',
+        padding: '10px 12px', marginBottom: '6px',
+        borderRadius: '8px', border: '1px solid var(--dsw-alias-border-l2)',
+        // 透明底:融入页面底色,只用边框分区(与官方设置页一致)
+        background: 'transparent',
+      },
+      rowCellName: { flex: '0 0 180px', fontWeight: 600 as const, fontSize: '13px', color: 'var(--dsw-alias-label-primary)', overflow: 'hidden' as const, textOverflow: 'ellipsis' as const, whiteSpace: 'nowrap' as const },
+      rowCellCmd: { flex: 1, fontSize: '12px', color: 'var(--dsw-alias-label-tertiary)', fontFamily: 'monospace', overflow: 'hidden' as const, textOverflow: 'ellipsis' as const, whiteSpace: 'nowrap' as const },
+      rowActions: { display: 'flex', gap: '4px' },
+      iconBtn: { padding: '4px 8px', cursor: 'pointer', fontSize: '12px', borderRadius: '4px', border: 'none', background: 'transparent', color: 'var(--dsw-alias-label-tertiary)' },
+      stickyBar: {
+        position: 'sticky' as const,
+        bottom: 0,
+        padding: '12px 20px',
+        // 透明底与页面一致;sticky 悬浮时内容会从底下滚过,
+        // 用 backdrop-filter 模糊垫底保证可读性(现代浏览器均支持)
+        background: 'transparent',
+        backdropFilter: 'blur(8px)',
+        WebkitBackdropFilter: 'blur(8px)',
+        borderTop: '1px solid var(--dsw-alias-border-l2)',
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px',
+        // 居中容器内的整条栏:宽度 = 内容容器(maxWidth 720 - 左右 padding 48 = 672)
+        width: 'calc(100% - 48px)',
+        maxWidth: '672px',
+        margin: '24px auto 0',
+        borderRadius: '10px',
+        border: '1px solid var(--dsw-alias-border-l2)',
+        boxShadow: '0 2px 12px var(--dsw-alias-bg-mask-1, rgba(0,0,0,0.12))',
+      },
+      stickySummary: { display: 'flex', flexDirection: 'column' as const, gap: '2px', minWidth: 0 },
+      stickyCount: { fontSize: '13px', color: 'var(--dsw-alias-label-primary)', fontWeight: 600 as const },
+      stickyHint: { fontSize: '11px', color: 'var(--dsw-alias-label-tertiary)' },
+      msgErr: { fontSize: '13px', color: 'var(--dsw-alias-state-error-primary)' },
+      textarea: {
+        width: '100%', boxSizing: 'border-box' as const,
+        padding: '10px 12px', borderRadius: '8px',
+        border: '1px solid var(--dsw-alias-border-l2)',
+        background: 'transparent', color: 'var(--dsw-alias-label-primary)',
+        fontFamily: 'monospace', fontSize: '13px', lineHeight: '1.5',
+        // 高度:空配置时也有可用的编辑区;配置多时可拉到视口 60%
+        minHeight: '320px', maxHeight: '60vh',
+        resize: 'vertical' as const,
+      },
+      modalBackdrop: {
+        position: 'fixed' as const, top: 0, left: 0, right: 0, bottom: 0,
+        background: 'rgba(0,0,0,0.5)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        zIndex: 1000,
+      },
+      modalCard: {
+        background: 'var(--dsw-alias-bg-layer-1)', borderRadius: '12px', padding: '24px',
+        maxWidth: '480px', width: '90%', maxHeight: '80vh', overflowY: 'auto' as const,
+        border: '1px solid var(--dsw-alias-border-l2)',
+      },
+    }
+
+    /** 复选框风格 */
+    function Checkbox(props: { checked: boolean; onChange: (v: boolean) => void }) {
+      return h('input', {
+        type: 'checkbox',
+        checked: props.checked,
+        onChange: (e: { target: { checked: boolean } }) => props.onChange(e.target.checked),
+        style: { width: '16px', height: '16px', cursor: 'pointer' },
+      })
+    }
+
+    /** 简短字段组件 */
+    function Field(props: { label: string; value: string; onChange: (v: string) => void; placeholder?: string; textarea?: boolean }) {
+      return h('label', { style: { display: 'block', marginBottom: '12px' }, children: [
+        h('div', { style: { fontSize: '12px', marginBottom: '4px', color: 'var(--dsw-alias-label-secondary)' }, children: props.label }),
+        props.textarea
+          ? h('textarea', { style: { ...styles.textarea, minHeight: '60px' }, value: props.value, placeholder: props.placeholder, onChange: (e: { target: { value: string } }) => props.onChange(e.target.value) })
+          : h('input', {
+              style: { width: '100%', boxSizing: 'border-box' as const, padding: '6px 10px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2)', background: 'transparent', color: 'var(--dsw-alias-label-primary)', fontFamily: 'monospace', fontSize: '13px' },
+              value: props.value, placeholder: props.placeholder,
+              onChange: (e: { target: { value: string } }) => props.onChange(e.target.value),
+            }),
+      ] })
+    }
+
+    /** 「添加服务器」弹窗表单(简化字段,高级用法去 JSON 编辑器) */
+    function AddServerModal(props: { onClose: () => void; onAdd: (row: ServerRow) => void }) {
+      const [serverName, setServerName] = React.useState('')
+      const [command, setCommand] = React.useState('')
+      const [args, setArgs] = React.useState('')
+      const [env, setEnv] = React.useState('')
+      const [cwd, setCwd] = React.useState('')
+      const [err, setErr] = React.useState('')
+
+      const submit = () => {
+        // 简单校验:serverName(必填,合法字符) + command(必填)
+        if (!serverName.trim()) return setErr('请填写 serverName')
+        if (!/^[A-Za-z0-9_-]{1,32}$/.test(serverName.trim())) return setErr('serverName 只能是字母数字下划线连字符,1-32 字符')
+        if (!command.trim()) return setErr('请填写启动命令')
+
+        // 解析 env(每行 KEY=VALUE)和 args(空格分隔)
+        const envObj: Record<string, string> = {}
+        for (const line of env.split(/\r?\n/)) {
+          const t = line.trim()
+          if (!t) continue
+          const eq = t.indexOf('=')
+          if (eq > 0) envObj[t.slice(0, eq)] = t.slice(eq + 1)
+        }
+        props.onAdd({
+          serverName: serverName.trim(),
+          command: command.trim(),
+          args: args.split(/\s+/).filter(Boolean),
+          env: envObj,
+          cwd: cwd.trim(),
+          enabled: true,
+        })
+      }
+
+      return h('div', { style: styles.modalBackdrop, onClick: (e: { target: unknown; currentTarget: unknown }) => { if (e.target === e.currentTarget) props.onClose() }, children:
+        h('div', { style: styles.modalCard, children: [
+          h('h3', { style: { margin: '0 0 16px' }, children: '添加 MCP 服务器' }),
+          err && h('p', { style: { color: 'var(--dsw-alias-state-error-primary)', fontSize: '13px', margin: '0 0 12px' }, children: err }),
+          h(Field, { label: '服务器名(唯一标识)', value: serverName, placeholder: 'my-server', onChange: setServerName }),
+          h(Field, { label: '启动命令', value: command, placeholder: 'C:/Program Files/nodejs/node.exe', onChange: setCommand }),
+          h(Field, { label: '参数(空格分隔)', value: args, placeholder: 'path/to/server.js stdio', onChange: setArgs }),
+          h(Field, { label: '环境变量(每行 KEY=VALUE)', value: env, placeholder: 'API_KEY=xxx', onChange: setEnv, textarea: true }),
+          h(Field, { label: '工作目录(可选)', value: cwd, placeholder: '', onChange: setCwd }),
+          h('div', { style: { display: 'flex', gap: '8px', marginTop: '12px', justifyContent: 'flex-end' }, children: [
+            h('button', { style: styles.btn, onClick: props.onClose, children: '取消' }),
+            h('button', { style: styles.btnPrimary, onClick: submit, children: '添加' }),
+          ] }),
+        ] }),
+      })
+    }
+
+    /** 把 ServerRow 数组转为 JSON 字符串(给文本域预填) */
+    function rowsToJsonText(rows: ServerRow[]): string {
+      // 用对象映射形式(Claude Desktop 友好),key 就是 serverName
+      const map: Record<string, Record<string, unknown>> = {}
+      for (const r of rows) {
+        const { serverName, ...cfg } = r
+        map[serverName] = cfg
+      }
+      return JSON.stringify(map, null, 2)
+    }
+
+    /** 把任意 JSON 文本解析为 ServerRow 数组(宽容:支持四种形态) */
+    function parseJsonText(text: string): ServerRow[] {
+      const parsed = JSON.parse(text) as unknown
+      // mcpServers 包裹 → 解包
+      const root = (parsed && typeof parsed === 'object' && 'mcpServers' in (parsed as Record<string, unknown>)
+        ? (parsed as Record<string, unknown>).mcpServers : parsed) as unknown
+      // 对象映射
+      if (root && typeof root === 'object' && !Array.isArray(root) && !('servers' in (root as Record<string, unknown>))) {
+        return Object.entries(root as Record<string, Record<string, unknown>>).map(([serverName, cfg]) => ({
+          serverName,
+          command: typeof cfg.command === 'string' ? cfg.command : '',
+          args: Array.isArray(cfg.args) ? cfg.args : [],
+          env: (cfg.env && typeof cfg.env === 'object') ? cfg.env as Record<string, string> : {},
+          cwd: typeof cfg.cwd === 'string' ? cfg.cwd : '',
+          enabled: cfg.enabled !== false, // 缺省 true
+        }))
+      }
+      // 数组
+      if (Array.isArray(parsed)) {
+        return parsed.map(raw => {
+          const cfg = (raw && typeof raw === 'object') ? raw as Record<string, unknown> : {}
+          return {
+            serverName: typeof cfg.serverName === 'string' ? cfg.serverName : '',
+            command: typeof cfg.command === 'string' ? cfg.command : '',
+            args: Array.isArray(cfg.args) ? cfg.args : [],
+            env: (cfg.env && typeof cfg.env === 'object') ? cfg.env as Record<string, string> : {},
+            cwd: typeof cfg.cwd === 'string' ? cfg.cwd : '',
+            enabled: cfg.enabled !== false,
+          }
+        })
+      }
+      // { servers: [...] }
+      if (root && typeof root === 'object' && 'servers' in (root as Record<string, unknown>)) {
+        return parseJsonText(JSON.stringify((root as { servers: unknown[] }).servers))
+      }
+      throw new Error('JSON 顶层必须是对象映射或数组')
+    }
+
+    /** 主组件 */
+    function McpServersSection() {
+      // 服务器列表(null = 加载中)
+      const [rows, setRows] = React.useState<ServerRow[] | null>(null)
+      // 视图模式
+      const [mode, setMode] = React.useState<'list' | 'json'>('list')
+      // JSON 文本域(切到 json 模式时预填)
+      const [jsonText, setJsonText] = React.useState('')
+      // 添加服务器弹窗(暂留,目前列表模式不显示入口)
+      const [adding, setAdding] = React.useState(false)
+      const [busy, setBusy] = React.useState(false)
+      // 未保存修改标记:只驱动保存按钮的强调态
+      const [dirty, setDirty] = React.useState(false)
+
+      // 首次加载
+      React.useEffect(() => {
+        refresh()
+          .catch(() => { setRows([]); setJsonText('{}'); alert('加载失败:无法连接 host 端点') })
+      }, [])
+
+      /** 从 host 拉取服务器列表(含状态)并更新 UI */
+      const refresh = () => fetch('/dsh-mcp-plus/servers')
+        .then(r => r.json())
+        .then((d: { servers?: unknown[] }) => {
+          const reloaded = (d.servers ?? []).map(raw => {
+            const s = raw as Record<string, unknown>
+            const status = (s.status === 'connecting' || s.status === 'connected' || s.status === 'disconnected' || s.status === 'disabled')
+              ? s.status : 'connecting'
+            return {
+              serverName: typeof s.serverName === 'string' ? s.serverName : '',
+              command: typeof s.command === 'string' ? s.command : '',
+              args: Array.isArray(s.args) ? s.args : [],
+              env: (s.env && typeof s.env === 'object') ? s.env as Record<string, string> : {},
+              cwd: typeof s.cwd === 'string' ? s.cwd : '',
+              enabled: s.enabled !== false,
+              status,
+            }
+          })
+          setRows(reloaded)
+          setJsonText(rowsToJsonText(reloaded))
+          return reloaded
+        })
+
+      /** 保存:只写盘,立即完成;重连由 host 异步做,状态经轮询圆点展示 */
+      const save = (payload: ServerRow[]) => {
+        setBusy(true)
+        // 写入前剥离 status 运行时字段(只保留配置字段)
+      const clean = payload.map(({ serverName, command, args, env, cwd, enabled }) => ({
+        transport: 'stdio' as const,
+        serverName, command, args, env, cwd,
+        ...(enabled !== undefined ? { enabled } : {}),
+      }))
+      fetch('/dsh-mcp-plus/servers', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ servers: clean }),
+        })
+          .then(r => r.json())
+          .then((data: { ok?: boolean; error?: string; count?: number }) => {
+            if (data.ok) {
+              // 立即刷新一次(此刻启用台应已标 connecting,圆点变黄)
+              void refresh()
+              // 轮询:最多 90 次(约 90 秒,npx 冷启动可能很慢),直到没有 connecting 状态
+              let polls = 0
+              const timer = setInterval(() => {
+                polls += 1
+                void refresh().then(list => {
+                  if (!list.some(r => r.status === 'connecting') || polls >= 90) clearInterval(timer)
+                }).catch(() => clearInterval(timer))
+              }, 1000)
+            } else {
+              alert('保存失败:' + (data.error ?? '未知错误'))
+            }
+          })
+          .catch(err => { alert('保存失败:' + String(err)) })
+          .finally(() => setBusy(false))
+      }
+
+      if (rows === null) {
+        return h('div', { style: { ...styles.section, color: 'var(--muted-foreground, #888)' }, children: '加载中…' })
+      }
+
+      // ---- 顶部条:模式切换 ----
+      const toggleButton = mode === 'list'
+        ? h('button', { style: styles.btn, onClick: () => { setMode('json'); setJsonText(rowsToJsonText(rows)) }, children: '修改配置(JSON)' })
+        : h('button', { style: styles.btn, onClick: () => { setMode('list') }, children: '关闭编辑' })
+      const topbar = h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }, children: [
+        h('div', { children: [
+          h('h2', { style: { margin: '0 0 4px' }, children: 'MCP 服务器' }),
+          h('p', { style: styles.desc, children: `共 ${rows.length} 台服务器，${rows.filter(r => r.enabled).length} 台启用中。` }),
+        ] }),
+        toggleButton,
+      ]})
+
+      // ---- 列表视图 ----
+      const listView = h('div', { children: [
+        rows.length === 0
+          ? h('p', { style: styles.desc, children: '暂无服务器。点击右上角「修改配置(JSON)」添加。' })
+          : h('div', {
+              style: { marginBottom: '16px' },
+              children: rows.map((row, i) => {
+                const cmd = [row.command, ...row.args].filter(Boolean).join(' ')
+                // 禁用行:名字 + 命令都用更弱的灰色 token(替代 opacity 叠加,暗色下更明显)
+                const dimName = row.enabled ? styles.rowCellName : { ...styles.rowCellName, color: 'var(--dsw-alias-label-tertiary)', fontWeight: 400 as const }
+                const dimCmd = row.enabled ? styles.rowCellCmd : { ...styles.rowCellCmd, color: 'var(--dsw-alias-label-tertiary)' }
+                // 状态圆点三态:connected=绿 / connecting=黄(闪烁动画) / 其他=灰
+                const dotColor = row.status === 'connected'
+                  ? 'var(--dsw-alias-state-success-primary)'
+                  : row.status === 'connecting'
+                    ? 'var(--dsw-alias-state-warn-primary)'
+                    : 'var(--dsw-alias-label-tertiary)'
+                const statusLabel = row.status === 'connected' ? '已连接'
+                  : row.status === 'connecting' ? '连接中…'
+                  : row.status === 'disabled' ? '已禁用' : '未连接'
+                return h('div', { key: row.serverName || String(i), style: styles.row, children: [
+                  h(Checkbox, { checked: row.enabled, onChange: v => { setRows(rows.map((r, j) => j === i ? { ...r, enabled: v } : r)); setDirty(true) } }),
+                  h('div', { style: { ...dimName, display: 'flex', alignItems: 'center', gap: '8px' }, children: [
+                    h('span', {
+                      title: statusLabel,
+                      'data-status': row.status,
+                      style: {
+                        width: '10px', height: '10px',
+                        borderRadius: '50%',
+                        background: dotColor,
+                        display: 'inline-block',
+                        flex: '0 0 auto',
+                        boxShadow: row.status === 'connected' ? `0 0 4px ${dotColor}` : 'none',
+                        // 连接中:1 秒周期的呼吸闪烁(CSS 动画注入见下方 style 标签)
+                        animation: row.status === 'connecting' ? 'dshMcpPlusPulse 1s ease-in-out infinite' : undefined,
+                      },
+                    }),
+                    row.serverName || '(未命名)',
+                  ] }),
+                  h('div', { style: dimCmd, title: cmd, children: cmd }),
+                ] })
+              }),
+            }),
+        h('p', { style: styles.desc, children: '通过「修改配置(JSON)」增删服务器。' }),
+      ] })
+
+      // ---- JSON 编辑视图 ----
+      const jsonView = h('div', { children: [
+        h('p', { style: styles.desc, children: '直接编辑 JSON(支持对象映射 { 名字: { command, args, env, cwd, enabled } } 或数组)。' }),
+        h('textarea', { style: styles.textarea, value: jsonText, spellCheck: false,
+          // Ctrl+Enter 快捷保存(JSON 编辑的通用习惯)
+          onKeyDown: (e: { key: string; ctrlKey: boolean; preventDefault: () => void }) => {
+            if (e.ctrlKey && e.key === 'Enter') { e.preventDefault(); saveDirtyJson() }
+          },
+          onChange: (e: { target: { value: string } }) => { setJsonText(e.target.value); setDirty(true) } }),
+      ] })
+
+      // ---- 底部操作台:统计摘要 + 取消/保存 ----
+      // dirty 只驱动保存按钮的强调态(不再显示文字提示)
+      const enabledCount = rows.filter(r => r.enabled).length
+      const disabledCount = rows.length - enabledCount
+
+      /** JSON 模式保存:先解析预检,成功才发请求(Ctrl+Enter 和按钮共用) */
+      const saveDirtyJson = () => {
+        try {
+          save(parseJsonText(jsonText))
+        } catch (err) {
+          alert('JSON 解析失败:' + (err instanceof Error ? err.message : String(err)))
+        }
+      }
+
+      const sticky = h('div', { style: styles.stickyBar, children: [
+        // 左侧:统计摘要 + 行为提示
+        h('div', { style: styles.stickySummary, children: [
+          h('div', { style: styles.stickyCount, children: `${enabledCount} 台启用中${disabledCount > 0 ? `，${disabledCount} 台已禁用` : ''}` }),
+          h('div', { style: styles.stickyHint, children: dirty ? '有未保存的修改' : '保存后将自动重连' }),
+        ] }),
+        // 右侧:取消 + 保存
+        h('div', { style: { display: 'flex', gap: '8px' }, children: [
+          h('button', {
+            style: styles.btn,
+            onClick: () => {
+              // 取消:丢弃本地修改,重新从 host 拉取(两种模式都可用)
+              fetch('/dsh-mcp-plus/servers').then(r => r.json()).then((d: { servers?: unknown[] }) => {
+                const reloaded = (d.servers ?? []).map(raw => {
+                  const s = raw as Record<string, unknown>
+                  const status = (s.status === 'connected' || s.status === 'disconnected' || s.status === 'disabled')
+                    ? s.status : 'disconnected'
+                  return {
+                    serverName: typeof s.serverName === 'string' ? s.serverName : '',
+                    command: typeof s.command === 'string' ? s.command : '',
+                    args: Array.isArray(s.args) ? s.args : [],
+                    env: (s.env && typeof s.env === 'object') ? s.env as Record<string, string> : {},
+                    cwd: typeof s.cwd === 'string' ? s.cwd : '',
+                    enabled: s.enabled !== false,
+                    status,
+                  }
+                })
+                setRows(reloaded)
+                setJsonText(rowsToJsonText(reloaded))
+                setMode('list')
+                setDirty(false)
+              }).catch(() => alert('取消失败:无法从 host 重新加载'))
+            },
+            children: '取消',
+          }),
+          h('button', {
+            style: { ...styles.btnPrimary, opacity: busy ? 0.5 : 1, outline: dirty ? '2px solid var(--dsw-alias-state-business-primary)' : 'none', outlineOffset: '2px' },
+            disabled: busy,
+            onClick: () => {
+              if (mode === 'list') { save(rows); return }
+              saveDirtyJson()
+            },
+            children: busy ? '保存中…' : '保存',
+          }),
+        ] }),
+      ] })
+
+      return h('div', { style: styles.section, children: [
+        topbar,
+        mode === 'list' ? listView : jsonView,
+        sticky,
+      ] })
+    }
+
+    function apply(ctx: unknown): void {
+      const c = ctx as any
+      // 注入连接中状态的闪烁动画(一次性,幂等)
+      if (typeof document !== 'undefined' && !document.getElementById('dsh-mcp-plus-styles')) {
+        const style = document.createElement('style')
+        style.id = 'dsh-mcp-plus-styles'
+        style.textContent = '@keyframes dshMcpPlusPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }'
+        document.head.appendChild(style)
+      }
+      c.slots.inject('settings.section', function* () {
+        yield c.slots.register(
+          { name: 'settings.section', id: 'mcp-servers', order: 40, label: () => 'MCP 服务器', inject: () => ({}) },
+          McpServersSection,
+        )
+      })
+    }
+
+    return { name, inject, apply }
+  }
+}
+
+window.__ModuleLoader__.load({
+  id: 'dsh-mcp-plus',
+  factory: makeFactory(),
+})

package/src/config.ts

@@ -0,0 +1,108 @@
+// config.ts —— 服务器列表的「形状」定义
+// 这里只回答一个问题:一台 MCP 服务器、一个服务器列表,长什么样?
+// 类型(interface)给 TypeScript 用,schema 给运行时校验用。
+import z from '@deepseek-ai/schemastery'
+
+/** 一台 stdio MCP 服务器的配置(字段名与官方 dsh-mcp-client 保持一致) */
+export interface ServerConfig {
+  transport: 'stdio'
+  /** 这台服务器的名字:用作工具名命名空间(mcp__<serverName>__<tool>) */
+  serverName: string
+  /** 启动服务器的可执行文件 */
+  command: string
+  /** 传给可执行文件的参数 */
+  args: string[]
+  /** 额外的环境变量 */
+  env: Record<string, string>
+  /** 子进程工作目录 */
+  cwd: string
+  /** 是否启用(可选,默认 true)。禁用时 host 半跳过连接 */
+  enabled?: boolean
+}
+
+/** 服务器列表:配置文件(servers.json)的顶层形状 */
+export interface Config {
+  servers: ServerConfig[]
+}
+
+/** 运行时校验器:required() 必填、default() 可选带默认值 */
+export const ServerSchema = z.object({
+  transport: z.const('stdio'),
+  serverName: z.string().required().pattern(/^[A-Za-z0-9_-]{1,32}$/),
+  command: z.string().required(),
+  args: z.array(String).default([]),
+  env: z.dict(String).default({}),
+  cwd: z.string().default(''),
+})
+
+/** 服务器列表 schema:同时是 cordis 的 Config(如果将来 cordis.yml 传 config 也用得上) */
+export const Config = z.object({
+  servers: z.array(ServerSchema).default([]),
+}) as unknown as z<Config>
+
+/**
+ * 把用户输入规范化为 { servers: [...] }:
+ * 支持四种顶层形态(统一转成 schema 认识的形状)——
+ *   ① { servers: [...] }          —— 原生格式(servers.json 的存储格式)
+ *   ② [ {...}, ... ]              —— 裸数组
+ *   ③ { "名字": {command,...}}    —— 对象映射,key 即 serverName
+ *   ④ { mcpServers: { 形态③ } }  —— Claude Desktop 完整格式(mcpServers 包裹)
+ *
+ * 另外对每个条目做宽容处理:
+ *   - 缺 transport 字段 → 自动补 'stdio'
+ *   - 忽略未知字段(enabled 等)
+ */
+function normalizeInput(input: unknown): unknown {
+  // 形态④:mcpServers 包裹 → 解包后按形态③处理
+  const root = input as Record<string, unknown> | null
+  if (typeof root === 'object' && root !== null && !Array.isArray(root)
+    && typeof root.mcpServers === 'object' && root.mcpServers !== null) {
+    return normalizeInput(root.mcpServers)
+  }
+
+  // 形态③:对象映射(无 servers / mcpServers key)
+  if (typeof root === 'object' && root !== null && !Array.isArray(root)
+    && !('servers' in root)) {
+    return {
+      servers: Object.entries(root).map(([serverName, raw]) => {
+        const cfg = (typeof raw === 'object' && raw !== null ? raw : {}) as Record<string, unknown>
+        return {
+          // 缺 transport 补 stdio;已有则保留(宽容未知形态)
+          transport: (typeof cfg.transport === 'string' ? cfg.transport : 'stdio'),
+          serverName,
+          command: cfg.command ?? '',
+          args: Array.isArray(cfg.args) ? cfg.args : [],
+          env: (typeof cfg.env === 'object' && cfg.env !== null) ? cfg.env : {},
+          cwd: typeof cfg.cwd === 'string' ? cfg.cwd : '',
+        }
+      }),
+    }
+  }
+  // 形态②:裸数组(条目内同样补 transport)
+  if (Array.isArray(input)) {
+    return {
+      servers: input.map((raw) => {
+        const cfg = (typeof raw === 'object' && raw !== null ? raw : {}) as Record<string, unknown>
+        return { transport: (typeof cfg.transport === 'string' ? cfg.transport : 'stdio'), ...cfg }
+      }),
+    }
+  }
+  // 形态①:原样
+  return input
+}
+
+/**
+ * 校验一段未知数据(比如从 servers.json 读出来的 JSON)是不是合法的服务器列表。
+ * schemastery 是 standard-schema 实现,校验入口是 ['~standard'].validate(input),
+ * 返回 { value }(成功)或 { issues }(失败),不会静默填默认值。
+ * @returns 校验通过后的服务器列表
+ * @throws 校验失败时抛错(带 issues 详情)
+ */
+export function validateServers(input: unknown): ServerConfig[] {
+  const std = (Config as unknown as { ['~standard']: { validate(x: unknown): { value?: unknown; issues?: unknown } } })['~standard']
+  const result = std.validate(normalizeInput(input))
+  if (result.issues) {
+    throw new Error('服务器配置校验失败: ' + JSON.stringify(result.issues))
+  }
+  return (result.value as Config).servers
+}