DBX MCP 管理布局重设计：以“接入方式 / 权限管理“双工作区重构设置页

• 数据库客户端
• 数据库
• 桌面应用
• CLI
• 后端
• MCP 服务
• AI 应用

导读

本文完整呈现 DBX（轻量级跨平台数据库客户端）MCP 管理设置页的信息架构重设计方案：将原先混合了接入状态、安装命令、HTTP 监听与权限策略的单条长页面，重组为"接入方式"与"权限管理"两个职责清晰的一级工作区，同时明确本轮只做布局调整、不改任何权限判定与存储行为。读完本文，你将掌握该设计的页面骨架、两级 Tab 结构、stdio/HTTP 两种接入方式的配置顺序、权限四步模型的归属、三档响应式规格与设计令牌约束，并结合 apps/desktop/src/components/editor/EditorSettingsDialog.vue 与 apps/desktop/src/components/settings/McpAuthorizationStepper.vue 的源码，理解其在现有代码上的落点与迁移方案。

设计背景与目标

DBX 的 MCP 设置此前是一个混合长页面：MCP Server 的安装/更新命令、本地 stdio 运行状态、HTTP 服务监听与 Token、客户端 JSON 配置，以及连接/数据库/操作权限策略全部堆在同一处。用户既难以快速区分"怎么连进来"，也容易把权限控件误当成接入配置。

本次重设计的目标，是把 MCP 设置重组为两个清晰的工作区：

1. 接入方式：回答"怎么连"——如何让外部 MCP 客户端（Claude、Cursor、VS Code 等）接入 DBX。
2. 权限管理：回答"能做什么"——接入后可以看到什么、可以执行什么。

本轮只调整信息架构、页面层级和视觉布局，不改变权限判定、安装、HTTP 配置、客户端配置或存储字段（见下文"不改变的内容"一节）。

设计原则

• 接入方式回答"怎么连"：只放运行状态、安装/更新、监听配置、端点、Token 和客户端配置。
• 权限管理回答"能做什么"：只放连接、数据库、操作权限和工具策略。
• 一级 Tab 只保留两个，不增加"概览"Tab。状态摘要放在 Tab 上方，避免再制造一个混合入口。
• stdio与HTTP是接入方式的二级 Tab，不是权限策略的分支。
• 权限管理中的所有配置继续沿用现有四步模型，但从接入页面完全移出。
• 页面使用 DBX 现有中性设计令牌、低圆角、低阴影和边框分层，不引入新的品牌色或装饰性卡片。

页面骨架总览

原文档给出了完整的页面骨架，它也是实现与验收的共同基准：

MCP 管理 [配置状态] [重新检查] 选择 MCP 的接入方式，或管理 MCP 可以访问的资源与操作权限。 [ 接入方式 ] [ 权限管理 ] ──────────────────────────────────────────────────────────── 接入方式 Tab： [ 本地 stdio ] [ HTTP 服务 ] 当前方式的状态与说明 ┌────────────────────────────────────────────────────────┐ │ 方式状态 / 地址或运行环境 / 当前版本 / 最近检查 │ └────────────────────────────────────────────────────────┘ 方式专属配置 ┌────────────────────────────────────────────────────────┐ │ stdio：安装、更新、命令、运行环境 │ │ HTTP ：启停、监听、远程访问、Host/Origin、端点与 Token │ └────────────────────────────────────────────────────────┘ 客户端配置（复用现有客户端 Tab） [Claude] [Cursor] [VS Code] ... ┌────────────────────────────────────────────────────────┐ │ 配置预览 [复制] │ └────────────────────────────────────────────────────────┘ 权限管理 Tab： 当前策略摘要：9 个连接 · 3 条数据库限制 · 默认只读 · 14/17 工具 [连接范围] [数据库范围] [操作权限] [工具与确认] ┌────────────────────────────────────────────────────────┐ │ 当前权限步骤内容 │ └────────────────────────────────────────────────────────┘

骨架的核心特征有三：其一，一级页头只出现一次且不绑定具体传输方式；其二，接入方式内用二级 Tab 切换 stdio/HTTP，客户端配置作为第三个横向维度复用；其三，权限管理顶部是只读摘要，真正的编辑全部收敛到四步区域。

一级 Tab：接入方式与权限管理

接入方式

Tab 图标使用PlugZap或Cable，说明文本保持简短：

配置 MCP 客户端连接 DBX 的方式。

进入后默认显示本地stdio，因为它是桌面端最低配置成本的方式。当前选择的子 Tab 应在设置窗口打开期间保留，不改变已有配置。

权限管理

Tab 图标使用ShieldCheck，说明文本保持简短：

管理 MCP 可见资源、数据库范围、操作权限和工具。

进入时在顶部显示只读摘要，不在摘要中提供第二套编辑控件。编辑仍通过下方四步区域完成。

源码落点：页面级 Tab 状态

当前代码中，一级 Tab 的状态与结构已经就位：EditorSettingsDialog.vue 在第 3107 行定义了页面级 Tab 类型，并在第 3115 行初始化：

type McpManagementTab = "access" | "permissions"; const mcpManagementTab = ref<McpManagementTab>("access");

模板在第 9276～9280 行用Tabs+TabsList（两列等宽grid-cols-2、高h-9）渲染这两个一级 Tab，文案来自 i18n 的settings.mcpManagementAccess与settings.mcpManagementPermissions。这说明重设计建议中"只保留两个一级 Tab、不增加概览"的原则与现有代码结构完全一致，落地时只需继续沿用该状态即可。

接入方式 Tab

二级 Tab：本地 stdio / HTTP 服务

二级 Tab 使用紧凑的横向 Tab strip，而不是大型卡片按钮：

• 高度32px，可横向滚动。
• 活动态使用主色文字和2px底部指示线。
• 不使用大面积阴影或高饱和背景。
• Tab 切换只切换接入内容，不影响权限策略。

源码中已有对应实现：第 3106 行定义type McpTransportTab = "stdio" | "http"，第 9289～9293 行渲染variant="line"的横向 Tab strip（h-8、border-b、bg-transparent，与"32px、底部指示线、无高饱和背景"的规格吻合）。文档特别强调：stdio 与 HTTP 是接入方式的二级 Tab，不是权限策略的分支，切换它们绝不能改写任何权限配置。

公共状态头

一级页面头只出现一次，包含：

• MCP 管理标题和一句说明。
• 一个不绑定具体传输方式的聚合状态：未配置、部分可用或已配置。
• 重新检查作为主要状态动作；其他动作放入溢出菜单。

当前传输方式的详细状态必须放在二级 Tab 面板内：stdio 展示安装/运行环境健康，HTTP 展示服务运行状态、端点和最近错误。不要在 HTTP 面板激活时继续显示 npm/stdio 状态——这是"避免多个互相竞争的状态徽章"的直接体现。

现有代码中，状态徽章已按此思路收敛：第 9262～9272 行的Badge只在!isWeb && mcpManagementTab === 'access' && mcpTransportTab === 'stdio'时出现，状态色调由mcpStatusTone（ok/warning 等）驱动，加载中显示Loader2、正常显示CheckCircle2、告警显示AlertTriangle，与设计令牌中指定的 Lucide 图标一致。迁移时需把它改为"不绑定传输方式的聚合状态"，把 stdio/HTTP 各自详细状态随面板移动。

本地 stdio 内容顺序

1. 运行环境状态：当前版本、最新版本、Node.js、npm、二进制路径。
2. 安装与更新：命令、复制、安装/更新、卸载。
3. 客户端配置：沿用现有客户端 Tab 和配置预览。
4. 运行参数：放置不属于权限分配的 MCP 运行级设置，例如查询超时。

安装命令是该页面最重要的动作，应靠近运行环境状态；卸载放在危险操作区域或溢出菜单中，避免与安装形成同等视觉权重。

源码佐证（EditorSettingsDialog.vue 第 9470～9552 行）：stdio 面板以两列网格展示mcpStatus.current_version/latest_version/node_version/npm_available，随后是二进制路径bin_path，接着是安装/更新命令区（含复制按钮、installMcp与uninstallMcp，卸载按钮使用Trash2图标且样式为text-destructive——正是"危险操作弱化视觉权重"的做法），最后才是mcpConfigTab客户端配置 Tab。这套顺序与文档给出的 1→4 完全一致，实现阶段主要工作是把它从当前长页面中"原样搬入"二级 Tab 面板并补上运行参数区。

HTTP 服务内容顺序

1. 服务状态：启用开关、运行中/待应用/已关闭、最近错误。
2. 监听配置：Host、Port、Path。
3. 远程访问控制：允许远程、Allowed Hosts、Allowed Origins。
4. 连接信息：Endpoint、Bearer Token、轮换 Token、客户端配置预览。
5. 诊断信息：最近日志折叠展示。

查询超时等运行级设置也放在"接入方式"下的"运行参数"区域；权限管理只负责资源范围、数据库范围、操作权限和工具可用性。

HTTP 的保存动作固定在配置内容底部，使用"保存并启动/保存并停止"；不要让每个字段单独触发保存。

源码中的 HTTP 草稿模型（第 3116～3124 行）给出了各字段的默认值与类型，可直接作为实现基准：

const mcpHttpSettings = ref<McpHttpServerSettings>({ enabled: false, host: "127.0.0.1", // 默认仅本机回环 port: 5225, path: "/mcp", allowRemote: false, // 默认不允许远程 allowedHosts: [], allowedOrigins: [], });

页面结构上：第 9330 行用Switch控制启用；第 9340～9353 行监听配置为 Host/Port 同行、Path 独占一行（与宽屏规格一致）；第 9362～9376 行远程访问控制在allowRemote打开后显示 Allowed Hosts / Allowed Origins 两个 textarea；第 9415～9466 行连接信息区展示 Endpoint、Bearer Token（带复制与rotateMcpHttpToken轮换按钮）、可折叠的客户端配置预览与最近日志recentLogs。底部保存区（第 9386～9409 行）正是统一的"保存并启动 / 保存并停止"按钮，未保存变更时会显示mcpHttpHasUnsavedChanges提示——验证了"单点保存、不逐字段触发"的交互约定。

客户端配置的归属

客户端配置属于"接入方式"，不属于权限管理。它只生成连接 DBX 的配置，不改变 DBX 的权限策略。

• stdio 选中时生成本地命令型配置。
• HTTP 选中时生成 URL + Authorization 配置。
• 保留现有客户端列表和mcpConfigTab状态。
• 客户端列表较长时横向滚动，不将每个客户端做成独立卡片。

现有代码中mcpConfigTab的类型（第 3104 行）即文档所指的"现有客户端列表"：

type McpConfigTab = "claude" | "cursor" | "codebuddy" | "zcode" | "trae" | "vscode" | "windsurf" | "codex" | "deepseek-harness" | "opencode" | "pi" | "cherry-studio" | "qoder" | "workbuddy";

默认选中claude（第 3113 行）。重设计只要求将该区域归入"接入方式"一级 Tab 之下（stdio 与 HTTP 面板共用），不改动其数据与生成逻辑。

权限管理 Tab

顶部策略摘要

在四步区域之前放一行紧凑摘要，只读展示：

访问范围 9 个连接 数据库范围 3 条限制 默认权限 只读 工具 14/17 已启用

摘要用于回答"当前策略大致是什么"，不替代实际编辑控件。每个摘要项可点击跳转到对应步骤，但不在摘要中直接切换权限。

权限四步

保留当前四步交互和已有数据映射，仅调整其容器归属：

1. 连接范围：哪些分组和连接对 MCP 可见。
2. 数据库范围：每个已授权连接可以访问哪些库。
3. 操作权限：全局默认、分组/连接/数据库例外。
4. 工具与确认：可调用工具和最终权限预览。

权限 Tab 内不出现安装命令、版本信息、HTTP Host/Port、Token、客户端 JSON 配置、查询超时或服务日志。

源码中的四步模型由 McpAuthorizationStepper.vue 承载（第 5、9～14 行），其步骤定义顺序与文档略有差异、语义一一对应：

type StepId = "capabilities" | "connections" | "databases" | "overrides"; // steps 实际定义顺序：overrides（操作权限/执行模式）、connections（连接范围）、 // databases（数据库范围）、capabilities（工具）

该组件通过四个具名插槽（overrides、connections、databases、capabilities，第 84～87 行）暴露内容区，并自带步骤导航、上一步/下一步与进度标签（第 89～98 行）。值得注意的两点实现细节：一是"每一步都可在导航中直达，且所有策略编辑即改即存，因此最后一步没有可前进的目标、也不需要确认按钮"（源码注释明确说明，故下一步按钮在最后一步以invisible保持占位以保证跨语言布局稳定）；二是切换步骤时会记录滚动容器的scrollTop并在nextTick后恢复（selectStep，第 32～42 行），避免步骤跳转造成页面跳动。

在 EditorSettingsDialog.vue 中，该组件已被整体放入"权限管理"一级 Tab 内容区（第 9558～9559 行TabsContent value="permissions"），并通过具名插槽注入三个子组件/区域：

• #connections：McpResourceScopePicker（连接/分组可见范围与执行模式，第 9569～9581 行）；
• #databases：McpDatabaseScopePicker（按连接设置可访问库，第 9585～9593 行）；
• #overrides：执行模式选择（只读 / 可写 / 危险写需确认等）与能力矩阵表（MCP_EXECUTION_MODE_COLUMNS×MCP_CAPABILITY_ROWS，第 9595～9639 行）。

所有编辑最终统一走saveMcpPolicy（第 3288 行），其入参类型完整覆盖了文档"不改变的内容"中列出的字段：readOnly、allowDangerousSql、allowedConnectionIds、allowedGroupIds、allowedToolNames、connectionPolicies（含databaseScope、allowedDatabases、databasePolicies）、groupPolicies与queryTimeoutSecs。这正是"权限管理继续沿用现有四步模型"的存储层依据——布局重组不触碰这些字段的任何语义。

权限页面视觉层级

• 一级 Tab 是页面导航，不做成内容卡片。
• 四步导航是权限工作流导航，使用轻量边框和活动底色。
• 当前步骤内容使用全宽 section；只有资源列表、配置预览、权限例外等重复项使用边框行。
• 不在四步外再包一层"授权设置"卡片，避免出现三层嵌套边框。

对照 McpAuthorizationStepper.vue 模板：外层 section 仅rounded-md border bg-background p-3 sm:p-4（第 56 行），步骤导航为rounded-md border bg-muted/50 p-1的轻量条（第 62 行），当前步骤内容直接全宽渲染插槽（第 84～87 行），与"轻量边框 + 活动底色 + 全宽 section"的层级约定一致。配合 McpAuthorizationStepper.spec.ts 中的测试，可验证步骤切换、插槽渲染与状态保持行为。

响应式规格

宽屏（>= 1024px）

• 内容最大宽度1200px，居中，左右内边距24px。
• 一级 Tab 保持单行。
• HTTP 监听配置可使用两列；Host/Port 同行，Path 独占一行。
• stdio 状态信息使用两列紧凑网格。

源码中 HTTP 监听区已采用sm:grid-cols-[minmax(0,1fr)_minmax(9rem,0.42fr)]两列、Pathsm:col-span-2独占一行的写法（第 9340～9353 行），stdio 状态网格为sm:grid-cols-2（第 9471 行），与宽屏规格一致。

中等窗口（768–1023px）

• 一级 Tab 保持单行，内容单列。
• 二级接入 Tab 和客户端 Tab 允许横向滚动。
• 所有状态/配置区块改为单列，避免压缩输入框。

窄窗口（< 768px）

• 顶部状态头允许标题、状态和动作分两行。
• 一级 Tab、二级接入 Tab、客户端 Tab各自独立横向滚动，不互相嵌套在同一滚动容器中。
• 权限四步导航改为单行横向滚动；当前步骤始终可见。
• HTTP Host、Port、Path 和远程访问配置全部单列。
• 配置预览保持水平滚动，复制按钮固定在可见区域。

设计令牌

采用Default Neutral Modern为基线，借鉴 Linear 的信息层级和 Cursor 的配置区排版：

• 背景、文字、边框全部复用现有--background、--foreground、--muted-foreground、--border。
• 4px 间距基数：控件间8px，区块内16px，区块间24px。
• 控件圆角沿用现有rounded-md；不新增更大的圆角。
• 默认无阴影，仅活动 Tab 和弹层使用现有阴影。
• 状态颜色只用于成功、警告、错误和检查中，不作为导航装饰色。
• 图标使用 Lucide：PlugZap、ShieldCheck、RefreshCw、Copy、TriangleAlert、CheckCircle2。

现有代码已大量对齐该基线：状态徽章使用border-green-500/40、border-amber-500/40等语义色（仅限状态），HTTP 服务运行点使用bg-green-500/bg-amber-500（第 9418 行），复制按钮反馈使用CheckCircle2（绿色成功态），错误区使用TriangleAlert/AlertTriangle与text-destructive。实现时应保持"状态色不做导航装饰"的红线。

不改变的内容

以下内容在本轮重设计中一律保持原样，这是"布局先行、行为冻结"的边界：

• MCP 策略判定与优先级。
• allowedGroupIds、allowedConnectionIds、数据库范围和工具权限字段。
• stdio 安装、更新、卸载行为。
• HTTP 服务保存、启动、停止、Token 轮换和 Host/Origin 校验。
• 客户端配置生成内容。
• Web 与 Desktop 两种运行环境的差异逻辑。

源码佐证：Web 环境下 HTTP 状态走webMcpHttpStatus（endpointPath+ 当前window.location.origin拼接端点，第 3286 行），Desktop 环境走mcpHttpStatus的endpoint/accessToken/recentLogs，两套展示并存且互不干扰——重设计只挪动容器，不动这条环境差异分支。

实现映射建议

下一轮实现只需要在 EditorSettingsDialog.vue 的 MCP 区域增加一个页面级 Tab 状态，并移动现有模板块：

• 现有mcpTransportTab继续作为"接入方式"的二级 Tab。
• 现有mcpConfigTab继续作为接入方式内的客户端配置 Tab。
• McpAuthorizationStepper整体移动到"权限管理"一级 Tab。
• 状态头保留在一级 Tab 之上，但只显示聚合状态；stdio/HTTP 详细状态随各自面板移动。
• 查询超时从权限步骤移到接入方式的运行参数区域。
• 不修改saveMcpPolicy、HTTP 保存方法、安装方法和任何后端接口。

从前文源码梳理可见，绝大部分状态与模板块已存在：mcpManagementTab、mcpTransportTab、mcpConfigTab三个状态（第 3113～3115 行）齐备，McpAuthorizationStepper已在permissions内容区（第 9559 行），HTTP/stdio 面板结构完整。剩余工作集中在：把mcpManagementTab之外散落在当前长页面里的 stdio/HTTP 内容按新顺序归位到二级 Tab 面板、新增运行参数区（承接queryTimeoutSecs）、把顶部徽章改为聚合状态，以及按响应式规格微调窄窗口布局。全流程不触碰任何后端接口与存储字段。

验收标准

布局改动完成后，应逐条核对以下标准：

• 用户打开 MCP 设置时，能立即区分"怎么接入"和"接入后能做什么"。
• 接入方式页不出现权限编辑控件；权限管理页不出现安装、Token 或监听配置。
• 接入方式页内只需一次二级 Tab 切换即可在 stdio/HTTP 间切换。
• 当前状态在滚动时仍可见，且不重复显示多个互相竞争的状态徽章。
• 客户端配置仍可复制，且不会被误解为权限配置。
• 宽屏、窄窗口和键盘 Tab 导航都能保持一级/二级层级关系。
• 本轮布局改动不会改变任何权限、接入或存储行为。

小结

这份重设计的关键不在于新增功能，而在于用"接入方式 / 权限管理"两个工作区把 MCP 设置的心智模型讲清楚：接入负责"连接通道"（stdio 安装运行、HTTP 监听与安全边界、客户端配置），权限负责"授权边界"（连接、数据库、操作、工具四步）。结合仓库现有代码可以确认，两个一级 Tab 的状态、二级传输 Tab、四步授权组件、HTTP 草稿字段乃至保存入口都已具备，实现上是一次"移动与重组"而非"重写"，这既控制了风险，也让验收标准——尤其是"不改变任何行为"这条底线——可以被逐项验证。

• 数据库客户端
• 数据库
• 桌面应用
• CLI
• 后端
• MCP 服务
• AI 应用