lanyuanxiaoyao/nex
1
0
Fork 0
Code Activity
Files
8eea30ea11fbe318019d29dc49621ddf0c3f3a64
nex/openspec/changes/archive/2026-05-05-unify-branding-and-about-version/specs/frontend/spec.md
lanyuanxiaoyao 8eea30ea11 feat: 统一品牌标识、关于页面三卡片布局与版本诊断功能 
- 统一品牌为 Nex：侧边栏、托盘 tooltip、HTML 标题、favicon (PNG 替代 SVG)
- 重构关于页面为三卡片布局（品牌/版本/链接），版本状态 Tag 绝对定位右上角
- 新增 GET /api/version 后端接口，返回 version/commit/build_time
- 新增前端版本一致性诊断：匹配/不匹配/不可判断三种状态
- 同步 delta specs 到主 specs 并归档变更
2026-05-05 03:28:22 +08:00

5.0 KiB
Raw Blame History

MODIFIED Requirements

Requirement: 样式体系

前端样式 SHALL 优先使用 TDesign 组件 props，其次使用 TDesign tokens，最后在前两者无法表达所需效果时使用 SCSS 作为补充工具。

Scenario: TDesign 组件 Props 优先

  • WHEN 实现组件视觉效果
  • THEN 前端 SHALL 优先使用 TDesign 组件的视觉增强 Props（如 color、trend、hoverShadow、stripe、variant、shape、headerBordered、gutter 等）
  • THEN 前端 SHALL NOT 通过 CSS 类名覆盖组件内部样式

Scenario: TDesign Tokens 作为第二优先级

  • WHEN 组件 props 无法完整表达颜色、边框、背景、间距等视觉细节
  • THEN 前端 SHALL 使用 TDesign CSS Token 引用（var(--td-*)）表达样式
  • THEN 前端 SHALL NOT 在布局样式中硬编码 #fff、#e7e7e7、#999 等颜色值

Scenario: CSS Variables 主题微调

  • WHEN 需要调整全局视觉风格
  • THEN 前端 SHALL 通过 :root 中声明 TDesign CSS Variables（--td-*）进行覆盖
  • THEN 前端 SHALL NOT 使用 !important 或高优先级选择器覆盖组件样式

Scenario: SCSS 兜底使用

  • WHEN TDesign 组件 props 和 TDesign tokens 均无法满足布局、响应式或品牌视觉需求
  • THEN 前端 MAY 使用 SCSS 作为补充
  • THEN SCSS SHALL 只承载必要的补充样式
  • THEN 前端 SHALL NOT 使用纯 CSS 文件（*.css）

Requirement: 提供响应式布局

前端 SHALL 使用 TDesign Layout 提供侧边栏导航布局。

Scenario: 桌面布局

  • WHEN 在桌面屏幕上查看前端
  • THEN 布局 SHALL 使用 TDesign Layout.Aside + Menu
  • THEN 侧边栏 SHALL 显示导航菜单，包含图标和文字标签
  • THEN 侧边栏 SHALL 使用固定宽度 232px
  • THEN Menu 组件 SHALL 使用 logo prop 显示品牌标识
  • THEN Menu 组件 SHALL 使用 operations prop 在底部显示操作区域
  • THEN Menu 组件 SHALL 支持 collapsed 折叠功能

Scenario: 侧边栏折叠布局

  • WHEN 用户折叠侧边栏
  • THEN 侧边栏 SHALL 使用折叠宽度 64px
  • THEN Menu logo 区域 SHALL 保留应用图标
  • THEN Menu logo 区域 SHALL 隐藏应用名称文字
  • THEN Menu logo 区域 SHALL NOT 显示为空白

Scenario: 页面内容区域

  • WHEN 显示页面内容
  • THEN 内容区域 SHALL 在 Layout.Content 中渲染
  • THEN 页面之间 SHALL 通过 React Router Outlet 渲染

Scenario: Header 区域

  • WHEN 渲染页面 Header
  • THEN Header SHALL 仅显示当前页面标题
  • THEN Header SHALL 不包含导航菜单
  • THEN Header 背景色 SHALL 使用 var(--td-bg-color-container) Token
  • THEN Header 底部分割线 SHALL 使用 var(--td-component-stroke) Token

Requirement: 提供侧边栏导航

前端 SHALL 使用 TDesign Layout.Aside 提供侧边栏导航。

Scenario: 侧边栏内容

  • WHEN 渲染侧边栏
  • THEN 侧边栏顶部 SHALL 显示统一应用图标和应用名称 Nex
  • THEN 侧边栏 SHALL NOT 显示旧品牌文字 AI Gateway 作为应用名称
  • THEN 侧边栏 SHALL 包含导航菜单
  • THEN 导航菜单项 SHALL 包含：供应商管理（ServerIcon 图标）、用量统计（ChartLineIcon 图标）、设置（SettingIcon 图标）、关于（InfoCircleIcon 图标）

Scenario: 侧边栏折叠品牌显示

  • WHEN 侧边栏处于折叠状态
  • THEN 侧边栏顶部 SHALL 显示统一应用图标
  • THEN 侧边栏顶部 SHALL 隐藏 Nex 文案
  • THEN 侧边栏顶部 SHALL NOT 为空白

Scenario: 导航菜单交互

  • WHEN 用户点击导航中的"供应商管理"
  • THEN 前端 SHALL 导航到 /providers 并高亮当前菜单项
  • WHEN 用户点击导航中的"用量统计"
  • THEN 前端 SHALL 导航到 /stats 并高亮当前菜单项
  • WHEN 用户点击导航中的"设置"
  • THEN 前端 SHALL 导航到 /settings 并高亮当前菜单项
  • WHEN 用户点击导航中的"关于"
  • THEN 前端 SHALL 导航到 /about 并高亮当前菜单项

ADDED Requirements

Requirement: 统一 public 图标资源

前端 SHALL 使用仓库统一应用图标作为 public favicon 和品牌图标来源。

Scenario: 使用 PNG favicon

  • WHEN 前端页面加载 HTML 入口
  • THEN 页面 SHALL 使用 /icon.png 作为 PNG favicon 路径
  • THEN frontend/public/icon.png SHALL 来源于仓库根目录 assets/icon.png
  • THEN 页面 SHALL NOT 引用独立维护的 SVG favicon

Scenario: HTML 标题使用统一应用名称

  • WHEN 前端页面加载 HTML 入口
  • THEN 页面标题 SHALL 使用 Nex 作为应用名称
  • THEN 页面标题 SHALL NOT 使用旧应用名称 AI Gateway

Scenario: 清理未使用 public SVG 图标

  • WHEN public 目录中的 SVG 图标资源没有被前端代码、HTML 或 desktop 静态服务引用
  • THEN 前端 SHALL 删除该未使用 SVG 图标资源
  • THEN 前端 SHALL NOT 保留未使用的 frontend/public/icons.svg
View Git Blame Copy Permalink