KimiCodeSwitch/docs/superpowers/specs/2026-07-08-kimicode-reload-hint-design.md

Kimi Code 选项卡 /reload 提示设计

背景

用户在 Kimi Code 选项卡下切换供应商后，Kimi Code CLI 需要执行 /reload 才能加载新的提供方配置。当前界面没有给出该提示，用户容易遗漏这一步。

目标

在 Kimi Code 选项卡下，给每个供应商的"切换使用"按钮旁边增加一个信息提示，告知用户切换供应商后需要执行 /reload。

设计

位置与交互

• 在 ProviderList 组件中，每个供应商卡片右侧的"切换使用"按钮旁边添加一个信息图标 ⓘ。
• 使用原生 title 属性展示 tooltip，鼠标悬停时显示提示文案。
• 仅在当前选中 agent === "kimi_code" 时显示该图标；Pi 选项卡下不显示。

文案

• 中文：切换供应商后，请在 Kimi Code 中执行 /reload 以生效。
• 英文：After switching providers, run /reload in Kimi Code to apply the change.

样式

• 图标大小约 14px，颜色为 text-gray-500，hover 时变为 text-gray-300。
• 图标与"切换使用"按钮间距约 8px（gap-2）。
• 不引入额外依赖或自定义 tooltip 组件。

组件与数据流

• src/components/ProviderList.tsx：
  • ProviderListProps 新增 agent: Agent 字段。
  • 根据 agent 决定是否渲染提示图标。
  • 图标 title 使用 t("switchReloadHint")。
• src/App.tsx：
  • 渲染 <ProviderList /> 时传入 agent={agent}。
• src/i18n/zh.ts 与 src/i18n/en.ts：
  • 新增键 switchReloadHint。

验收标准

• 切换到 Kimi Code 选项卡时，每个供应商的"切换使用"按钮旁出现 ⓘ 图标。
• 鼠标悬停在图标上时，显示正确语言版本的 /reload 提示。
• 切换到 Pi 选项卡时，该图标不显示。
• 不引入新的运行时依赖。
• TypeScript 编译与项目构建保持通过。