feat: 统一品牌标识、关于页面三卡片布局与版本诊断功能
- 统一品牌为 Nex:侧边栏、托盘 tooltip、HTML 标题、favicon (PNG 替代 SVG) - 重构关于页面为三卡片布局(品牌/版本/链接),版本状态 Tag 绝对定位右上角 - 新增 GET /api/version 后端接口,返回 version/commit/build_time - 新增前端版本一致性诊断:匹配/不匹配/不可判断三种状态 - 同步 delta specs 到主 specs 并归档变更
This commit is contained in:
@@ -2,25 +2,83 @@
|
||||
|
||||
## Purpose
|
||||
|
||||
TBD - 提供关于页面展示项目品牌信息
|
||||
TBD - 提供关于页面展示项目品牌信息、版本信息和外部链接
|
||||
|
||||
## Requirements
|
||||
|
||||
### Requirement: 关于页面
|
||||
|
||||
前端 SHALL 提供关于页面,使用 TDesign Card 组件居中展示项目品牌信息(应用名称、描述、项目链接)。
|
||||
前端 SHALL 提供现代化关于页面,使用 TDesign 组件展示项目品牌信息、项目链接、前端版本、后端版本和版本匹配状态。
|
||||
|
||||
#### Scenario: 显示关于页面
|
||||
|
||||
- **WHEN** 用户访问 `/about` 路径
|
||||
- **THEN** 前端 SHALL 显示关于页面
|
||||
- **THEN** 页面 SHALL 展示应用名称"Nex"
|
||||
- **THEN** 页面 SHALL 展示应用描述"AI Gateway - 统一的大模型 API 网关"
|
||||
- **THEN** 页面 SHALL 展示项目链接"https://github.com/nex/gateway"
|
||||
- **THEN** 页面 SHALL 展示应用名称 `Nex`
|
||||
- **THEN** 页面 SHALL 展示应用描述 `AI Gateway - 统一的大模型 API 网关`
|
||||
- **THEN** 页面 SHALL 展示项目链接 `https://github.com/nex/gateway`
|
||||
|
||||
#### Scenario: 页面布局
|
||||
|
||||
- **WHEN** 渲染关于页面
|
||||
- **THEN** 页面 SHALL 使用 TDesign Card 组件作为容器
|
||||
- **THEN** Card SHALL 设置 `bordered={false}`
|
||||
- **THEN** 内容 SHALL 居中展示
|
||||
- **THEN** 页面 SHALL 使用三个独立 TDesign Card 组件分别承载品牌区、版本信息区和链接区
|
||||
- **THEN** 三个 Card SHALL 使用 grid 布局垂直排列
|
||||
- **THEN** 每个 Card SHALL 设置 `bordered={false}` 和 `hoverShadow`
|
||||
- **THEN** Card SHALL 使用 TDesign 组件 props 和 tokens 完成主要视觉效果
|
||||
|
||||
#### Scenario: 品牌卡片
|
||||
|
||||
- **WHEN** 渲染品牌卡片
|
||||
- **THEN** 卡片 SHALL 展示应用图标、应用名称 `Nex` 和产品描述
|
||||
|
||||
#### Scenario: 版本信息卡片
|
||||
|
||||
- **WHEN** 渲染版本信息卡片
|
||||
- **THEN** 版本状态 Tag SHALL 以绝对定位浮动在卡片右上角,不占据内容布局空间
|
||||
- **THEN** 版本状态 Tag SHALL 使用 TDesign Tag 的 `theme`、`variant`、`shape` props
|
||||
- **THEN** 卡片 SHALL 展示前端版本、后端版本、后端提交和后端构建时间
|
||||
|
||||
#### Scenario: 链接卡片
|
||||
|
||||
- **WHEN** 渲染链接卡片
|
||||
- **THEN** 卡片 SHALL 展示项目外部链接
|
||||
|
||||
#### Scenario: 展示前端版本
|
||||
|
||||
- **WHEN** 渲染关于页面
|
||||
- **THEN** 页面 SHALL 显示前端版本号
|
||||
- **THEN** 前端版本号 SHALL 来源于构建注入的 `VITE_APP_VERSION`
|
||||
- **THEN** 当前端版本号缺失时页面 SHALL 显示开发或未知版本状态
|
||||
|
||||
#### Scenario: 展示后端版本
|
||||
|
||||
- **WHEN** 渲染关于页面且后端版本接口请求成功
|
||||
- **THEN** 页面 SHALL 显示后端 `version`
|
||||
- **THEN** 页面 SHALL 显示后端 `commit`
|
||||
- **THEN** 页面 SHALL 显示后端 `build_time`
|
||||
|
||||
#### Scenario: 判断版本一致
|
||||
|
||||
- **WHEN** 前端版本号与后端版本号相同
|
||||
- **THEN** 页面 SHALL 显示版本一致状态
|
||||
- **THEN** 版本状态 SHALL 使用 TDesign Tag 展示成功语义
|
||||
|
||||
#### Scenario: 判断版本不一致
|
||||
|
||||
- **WHEN** 前端版本号与后端版本号不同且两者均为可判断的发布版本
|
||||
- **THEN** 页面 SHALL 显示版本不一致状态
|
||||
- **THEN** 页面 SHALL 展示提示信息说明该状态用于部署诊断
|
||||
- **THEN** 页面 SHALL NOT 阻断用户使用其他功能
|
||||
|
||||
#### Scenario: 后端版本无法判断
|
||||
|
||||
- **WHEN** 后端版本号为 `dev`、`unknown` 或空值
|
||||
- **THEN** 页面 SHALL 显示开发构建或无法判断状态
|
||||
- **THEN** 页面 SHALL NOT 将该状态显示为版本错误
|
||||
|
||||
#### Scenario: 后端版本获取失败
|
||||
|
||||
- **WHEN** 请求后端版本接口失败
|
||||
- **THEN** 页面 SHALL 显示无法获取后端版本的状态
|
||||
- **THEN** 页面 SHALL 保留前端版本信息
|
||||
- **THEN** 页面 SHALL NOT 因版本接口失败而崩溃
|
||||
|
||||
Reference in New Issue
Block a user