| 1 | # ConfigManagerDialog |
| 2 | |
| 3 | 全局配置管理弹框，由 `src/app/layout/Providers.tsx` 挂载，通过 `src/store/configManagerDialog.ts` 控制开关。 |
| 4 | |
| 5 | ## 目录结构 |
| 6 | |
| 7 | | 目录/文件 | 说明 | |
| 8 | | ------------------------------ | ---------------------------------------------------------------------------------- | |
| 9 | | `index.tsx` | 弹框入口，负责服务切换、加载、校验、保存、重启和恢复检查流程。 | |
| 10 | | `components/ConfigSectionNav/` | 左侧配置分组目录，跟随右侧滚动高亮，点击触发锚点滚动。 | |
| 11 | | `components/ConfigFormPanel/` | 右侧配置表单滚动区域，每个分组作为锚点节点。 | |
| 12 | | `components/ConfigField/` | 可视化模式下的紧凑树形字段渲染，将对象、数组、字符串、数字、布尔值转换为表单控件。 | |
| 13 | | `components/ConfigJsonPanel/` | JSON 模式编辑区，在可编辑文本域上叠加字段定位按钮与行级高亮。 | |
| 14 | | `hooks/useConfigSectionSpy.ts` | 弹框内部滚动监听与分组高亮逻辑。 | |
| 15 | | `utils/configSections.ts` | 按服务类型维护配置分组定义、字段数量和修改数量统计。 | |
| 16 | | `utils/configFieldMeta.ts` | 字段标签、修改状态、敏感字段和叶子字段统计工具。 | |
| 17 | | `utils/configPath.ts` | 配置路径读写、稳定序列化和字段名格式化。 | |
| 18 | | `types/` | 弹框内部类型。 | |
| 19 | |
| 20 | ## 边界 |
| 21 | |
| 22 | - 只服务 layout 全局弹框，不被普通页面直接导入。 |
| 23 | - 外部触发必须通过 `useConfigManagerDialogStore`，不要直接依赖本目录组件。 |
| 24 | - 顶部主切换用于选择主服务或 AI 服务；未保存配置时禁用服务切换，避免丢失修改。 |
| 25 | - 默认使用可视化配置表单；需要排查复杂配置时，可通过右侧图标切换到 JSON 配置模式。 |
| 26 | - 可视化模式按服务类型拆分分组：Server 服务突出渠道平台配置，AI 服务突出模型服务商、模型目录、草稿生成和 Agent 配置。 |
| 27 | - Server 服务已配置 `Relay 中转` 时，`渠道平台` 分组会显示“不推荐”提示，引导用户优先通过 Relay 管理平台接入。 |
| 28 | - 右侧参数区不展示完整配置路径，避免路径文本淹没参数本身。 |
| 29 | - 右侧字段使用紧凑树形层级，一级、二级、三级通过背景、字重和缩进区分。 |
| 30 | - 右侧每个配置分组块顶部展示与左侧目录一致的标题和描述，帮助用户确认当前配置范围。 |
| 31 | - 数组字段按内容类型优化展示：对象数组使用可折叠 item 行展示名称与摘要，基础类型数组使用单行输入，减少重复层级。 |
| 32 | - 可视化字段与 JSON 字段支持双向定位：点击行内定位按钮会切换视图、滚动到对应字段并短暂高亮。 |
| 33 | - 左侧分组目录会跟随右侧当前分组自动滚动，使高亮项尽量保持在侧栏中部。 |
| 34 | - `apiKey`、`secret`、`password`、`token`、`accessKey` 等敏感字段默认使用普通文本输入配合遮蔽样式展示，保留显示/隐藏按钮，避免触发浏览器保存密码提示。 |
| 35 | - 如果后端配置文件缺少 `relay` 节点，前端会为当前服务补充可编辑占位；占位未修改时不会提交保存。 |
| 36 | - 后端返回格式只作为数据解析来源，用户界面不展示 `yaml/json` 文件徽标。 |
| 37 |