Merge branch 'dev-frontend-optimization'

openspec/config.yaml

@@ -8,7 +8,7 @@ context: |
   - 新增代码优先复用已有组件、工具、依赖库，不引入新依赖
   - 新增的逻辑必须编写完善的测试，并保证测试的正确性，不允许跳过任何测试
   - backend是使用go开发的后端，阅读backend/README.md了解项目架构，优先使用公共组件实现功能逻辑（优先级：官方库>主流三方库>项目公共工具>自行实现）
-  - frontend是基于bun+vite+typescript开发的前端，严禁使用pnpm、npm
+  - frontend是基于bun+vite+typescript开发的前端，使用bun作为唯一包管理器，严禁使用pnpm、npm
   - Git提交: 仅中文; 格式"类型: 简短描述", 类型: feat/fix/refactor/docs/style/test/chore; 多行描述空行后写详细说明
   - 禁止创建git操作task
   - 积极使用subagents精心设计并行任务，节省上下文空间，加速任务执行

openspec/specs/frontend/spec.md

@@ -15,7 +15,7 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
 - **WHEN** 加载供应商管理页面
 - **THEN** 前端 SHALL 使用 TDesign Table 显示所有已配置供应商
 - **THEN** 每个供应商 SHALL 显示 name、base_url 和 enabled 状态（使用 Tag 组件）
-- **THEN** API Key SHALL 被脱敏显示（掩码处理）
+- **THEN** API Key SHALL 显示完整值（不进行掩码处理）
 - **THEN** 表格 SHALL 支持展开行以显示关联模型
 
 #### Scenario: 表格列宽约束
@@ -23,7 +23,7 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
 - **WHEN** 渲染供应商表格
 - **THEN** 名称列 SHALL 固定宽度 180px 并启用 ellipsis（超长文本显示省略号，hover 显示 Tooltip）
 - **THEN** Base URL 列 SHALL 不设固定宽度（浮动填充剩余空间）并启用 ellipsis + Tooltip
-- **THEN** API Key 列 SHALL 固定宽度 120px 并启用 ellipsis
+- **THEN** API Key 列 SHALL 不设固定宽度（浮动填充剩余空间）并启用 ellipsis + Tooltip
 - **THEN** 状态列 SHALL 固定宽度 80px
 - **THEN** 操作列 SHALL 固定宽度 160px
 
@@ -37,18 +37,28 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
 - **WHEN** 用户点击"添加供应商"按钮
 - **THEN** 前端 SHALL 使用 TDesign Dialog + Form 显示输入表单
 - **THEN** 表单 SHALL 包含 id、name、api_key、base_url 字段，带校验规则
+- **THEN** Dialog SHALL 禁用蒙版点击关闭（closeOnOverlayClick={false}）
+- **THEN** Dialog SHALL 禁用 ESC 键关闭（closeOnEscKeydown={false}）
+- **THEN** Dialog SHALL 设置 lazy={false} 禁用懒加载
 - **WHEN** 用户提交包含有效数据的表单
-- **THEN** 前端 SHALL 通过 useMutation 调用创建 API
+- **THEN** 前端 SHALL 通过 mutateAsync 调用创建 API
 - **THEN** 成功后 SHALL 关闭 Dialog 并刷新供应商列表
-- **THEN** 失败 SHALL 显示错误提示
+- **THEN** 失败 SHALL 保持 Dialog 打开并显示错误提示（MessagePlugin.error）
 
 #### Scenario: 编辑现有供应商
 
 - **WHEN** 用户点击供应商的"编辑"按钮
 - **THEN** 前端 SHALL 使用 TDesign Dialog + Form 显示预填充数据的表单
+- **THEN** API Key SHALL 回显当前值（完整值）
+- **THEN** API Key 输入框 SHALL 为普通文本输入（不使用 password 类型）
+- **THEN** API Key 字段 SHALL 始终为必填
+- **THEN** Dialog SHALL 禁用蒙版点击关闭（closeOnOverlayClick={false}）
+- **THEN** Dialog SHALL 禁用 ESC 键关闭（closeOnEscKeydown={false}）
+- **THEN** Dialog SHALL 设置 lazy={false} 禁用懒加载
 - **WHEN** 用户提交包含更新数据的表单
-- **THEN** 前端 SHALL 通过 useMutation 调用更新 API
+- **THEN** 前端 SHALL 通过 mutateAsync 调用更新 API
 - **THEN** 成功后 SHALL 关闭 Dialog 并刷新供应商列表
+- **THEN** 失败 SHALL 保持 Dialog 打开并显示错误提示（MessagePlugin.error）
 
 #### Scenario: 删除供应商
 
@@ -81,19 +91,25 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
 - **THEN** provider_id SHALL 自动关联当前供应商
 - **THEN** 供应商选择 SHALL 使用 `options` 属性
 - **THEN** 创建表单 SHALL NOT 包含 ID 输入框（后端自动生成 UUID）
+- **THEN** Dialog SHALL 禁用蒙版点击关闭（closeOnOverlayClick={false}）
+- **THEN** Dialog SHALL 禁用 ESC 键关闭（closeOnEscKeydown={false}）
 - **WHEN** 用户提交表单
-- **THEN** 前端 SHALL 通过 useMutation 调用创建 API
-- **THEN** 成功后 SHALL 刷新模型列表
+- **THEN** 前端 SHALL 通过 mutateAsync 调用创建 API
+- **THEN** 成功后 SHALL 关闭 Dialog 并刷新模型列表
+- **THEN** 失败 SHALL 保持 Dialog 打开并显示错误提示（MessagePlugin.error）
 
 #### Scenario: 编辑模型
 
 - **WHEN** 用户点击模型的"编辑"
 - **THEN** 前端 SHALL 显示编辑表单
-- **THEN** 编辑表单 SHALL 显示统一模型 ID（只读）
-- **THEN** ID 字段 SHALL 为禁用状态
+- **THEN** 编辑表单 SHALL NOT 包含统一模型 ID 字段
+- **THEN** Dialog SHALL 禁用蒙版点击关闭（closeOnOverlayClick={false}）
+- **THEN** Dialog SHALL 禁用 ESC 键关闭（closeOnEscKeydown={false}）
+- **THEN** Dialog SHALL 设置 lazy={false} 禁用懒加载
 - **WHEN** 用户提交表单
-- **THEN** 前端 SHALL 通过 useMutation 调用更新 API
-- **THEN** 成功后 SHALL 刷新模型列表
+- **THEN** 前端 SHALL 通过 mutateAsync 调用更新 API
+- **THEN** 成功后 SHALL 关闭 Dialog 并刷新模型列表
+- **THEN** 失败 SHALL 保持 Dialog 打开并显示错误提示（MessagePlugin.error）
 
 #### Scenario: 删除模型
 
@@ -124,24 +140,17 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
 
 ### Requirement: 显示统一模型 ID
 
-前端 SHALL 在所有显示模型的地方使用统一模型 ID。
+            前端 SHALL 在所有显示模型的地方使用统一模型 ID。
 
-#### Scenario: 模型表格显示统一 ID 列
+            #### Scenario: 模型表格显示统一 ID 列
 
-- **WHEN** 渲染模型表格
-- **THEN** 表格 SHALL 包含统一模型 ID 列
-- **THEN** 统一模型 ID 列 SHALL 显示 `provider_id/model_name` 格式
-- **THEN** 统一模型 ID 列 SHALL 启用 ellipsis（超长文本显示省略号，hover 显示 Tooltip）
-- **THEN** 统一模型 ID 列 SHALL 固定宽度 250px
+            - **WHEN** 渲染模型表格
+            - **THEN** 表格 SHALL 包含统一模型 ID 列
+            - **THEN** 统一模型 ID 列 SHALL 显示 `provider_id/model_name` 格式
+            - **THEN** 统一模型 ID 列 SHALL 启用 ellipsis（超长文本显示省略号，hover 显示 Tooltip）
+            - **THEN** 统一模型 ID 列 SHALL 固定宽度 250px
 
-#### Scenario: 编辑模型显示统一 ID
-
-- **WHEN** 编辑模型表单
-- **THEN** 表单 SHALL 显示统一模型 ID 字段
-- **THEN** 统一模型 ID 字段 SHALL 为只读（disabled）
-- **THEN** 统一模型 ID 字段 SHALL 显示格式说明 "格式：provider_id/model_name"
-
-#### Scenario: 统一模型 ID 降级显示
+            #### Scenario: 统一模型 ID 降级显示
 
 - **WHEN** 后端未返回 unified_id 字段
 - **THEN** 前端 SHALL 拼接 providerId 和 modelName 显示
@@ -333,6 +342,23 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
 - **WHEN** 用户使用浏览器后退按钮
 - **THEN** 前端 SHALL 正确导航到上一个页面
 
+### Requirement: React 19 适配器
+
+前端 SHALL 导入 TDesign react-19-adapter 以支持 React 19。
+
+#### Scenario: 导入适配器
+
+- **WHEN** 应用启动
+- **THEN** main.tsx SHALL 导入 'tdesign-react/es/_util/react-19-adapter'
+- **THEN** MessagePlugin、DialogPlugin 等插件式调用 SHALL 正常工作
+
+#### Scenario: 错误提示显示
+
+- **WHEN** API 请求失败
+- **THEN** MessagePlugin.error SHALL 正确渲染错误提示
+- **THEN** 错误提示 SHALL 显示在页面顶部（placement: top）
+- **THEN** 错误提示 SHALL 在 3 秒后自动消失
+
 ### Requirement: 使用 React 和 TypeScript
 
 前端 SHALL 使用 React 和 TypeScript 实现，遵循 strict 模式。

openspec/specs/provider-management/spec.md

@@ -37,7 +37,7 @@
 
 - **WHEN** 向 `/api/providers` 发送 POST 请求，携带有效的供应商数据（id, name, api_key, base_url, protocol）
 - **THEN** 网关 SHALL 在数据库中创建新的供应商记录
-- **THEN** 网关 SHALL 返回创建的供应商，状态码为 201
+- **THEN** 网关 SHALL 返回创建的供应商（api_key 为完整值），状态码为 201
 - **THEN** 供应商 SHALL 默认启用
 - **THEN** protocol 字段 SHALL 为必填项，值为 "openai" 或 "anthropic"
 
@@ -99,8 +99,8 @@
 
 - **WHEN** 向 `/api/providers` 发送 GET 请求
 - **THEN** 网关 SHALL 返回所有供应商的列表
-- **THEN** 每个供应商 SHALL 包含 id, name, api_key（已掩码）, base_url, protocol, enabled, created_at, updated_at
-- **THEN** api_key SHALL 被掩码（仅显示最后 4 个字符）
+- **THEN** 每个供应商 SHALL 包含 id, name, api_key（完整值）, base_url, protocol, enabled, created_at, updated_at
+- **THEN** api_key SHALL 返回完整值（不进行掩码处理）
 
 **变更说明：** 数据访问从 config 包迁移到 ProviderRepository。API 接口保持不变。
 
@@ -113,7 +113,7 @@
 - **WHEN** 向 `/api/providers/:id` 发送 GET 请求，携带有效的供应商 ID
 - **THEN** 网关 SHALL 返回供应商详情
 - **THEN** SHALL 包含 protocol 字段
-- **THEN** api_key SHALL 被掩码
+- **THEN** api_key SHALL 返回完整值（不进行掩码处理）
 
 #### Scenario: 获取不存在的供应商
 
@@ -130,7 +130,7 @@
 
 - **WHEN** 向 `/api/providers/:id` 发送 PUT 请求，携带有效的供应商数据
 - **THEN** 网关 SHALL 更新数据库中的供应商记录
-- **THEN** 网关 SHALL 返回更新后的供应商
+- **THEN** 网关 SHALL 返回更新后的供应商（api_key 为完整值）
 - **THEN** 更新 SHALL 支持修改 protocol 字段
 
 **变更说明：** 通过 ProviderService 和 ProviderRepository 实现。API 接口保持不变。