Settings
设置概览
WinCode 设置抽屉的入口与各 Tab 功能总览
设置概览
WinCode 的设置面板通过右侧滑出的抽屉承载,点击顶栏的设置按钮或使用快捷键 Cmd/Ctrl + , 即可打开。抽屉由 SettingsDrawer 组件实现,宽度占屏幕的 2/3,左侧是导航栏,右侧是内容区。
抽屉结构
SettingsDrawer 组件位于 src/components/settings/SettingsDrawer.tsx,核心结构如下:
// SettingsDrawer.tsx
const TABS = [
{ id: "general", label: "通用设置", icon: SlidersHorizontal },
{ id: "api", label: "API 配置", icon: Key },
{ id: "tfs", label: "TFS 配置", icon: Server },
{ id: "skills", label: "技能管理", icon: ShieldCheck },
{ id: "mcp", label: "MCP 管理", icon: Server },
{ id: "plugins", label: "插件管理", icon: Puzzle },
{ id: "security",label: "安全", icon: Shield },
{ id: "keyboard",label: "快捷键", icon: Keyboard },
{ id: "about", label: "关于", icon: Info },
];- 导航栏(
w-[140px])显示所有 Tab 按钮,选中态使用--accent-light背景 - 内容区根据当前
activeTab动态渲染对应组件 - 打开时会通过
useKeyboardScope('modal', settingsOpen)激活modal键盘作用域 - 遮罩层覆盖 TitleBar 下方区域,点击空白处可关闭
各 Tab 功能索引
| Tab | 组件 | 主要职责 |
|---|---|---|
| 通用设置 | GeneralConfig | 主题切换、字体大小调整 |
| API 配置 | ApiConfig | 端点与模型管理、API Key 配置 |
| TFS 配置 | TfsConfig | TFS PAT、工作项查询设置 |
| 技能管理 | SkillManagement | 启用/禁用技能 |
| MCP 管理 | McpManagement | MCP 服务器配置与环境变量 |
| 插件管理 | PluginManagement | 插件开关与配置 |
| 安全 | SecuritySettings | 扩展边界、凭据遮蔽状态总览 |
| 快捷键 | KeyboardTab | 键盘绑定自定义 |
| 关于 | AboutTab | 版本信息、自动更新、旧版同步 |
状态管理
设置页的所有数据都通过 settingsStore(Zustand)管理,后端存储由 Rust 侧的 SQLite db.rs 统一提供。API 端点相关数据遵循"单一加载职责":只在 App.tsx 启动时调用一次 loadEndpoints(),其他组件从 store 读取。