yinjianm
16203b14f6
扩展管理端侧边栏与路由，新增系统配置真实页面、订阅套餐 管理页、节点管理页及多个结构化占位页 补齐前端 API、类型与工具层，并增强仪表盘刷新、趋势切换、 失败作业详情与流量排行 limit 联动能力 同步后端 traffic rank limit 支持与知识库归档、设计约束、 验证配置及视觉验收产物
75 lines
5.3 KiB
Markdown
75 lines
5.3 KiB
Markdown
# Xboard-new 管理端设计系统
|
|
|
|
## 产品表面
|
|
- `admin-frontend` 是数据密集型管理后台，当前核心界面包括仪表盘、用户管理、工单管理、节点管理、系统管理，以及本轮新增的订阅管理。
|
|
- 侧边栏承担一级信息架构，页面主体承担筛选、批量判断和单行操作，不把复杂流程全部堆进列表页；新增业务域优先用独立分组承载。
|
|
- 节点管理属于“高密度运营页”：用户需要在一个视图里快速判断节点状态、倍率、权限组与在线人数，再决定是否继续深入编辑。
|
|
- 套餐管理属于“结构化配置页”：用户需要在一页内完成套餐开关、价格、分组、说明和排序维护，强调表格与抽屉之间的稳定切换。
|
|
|
|
## 美学方向
|
|
- 延续 `apple/DESIGN.md` 的 Apple 风格：纯色分区、系统字体、克制阴影、低噪音交互。
|
|
- 管理后台不追求营销式华丽，而是强调“黑白主场 + 蓝色交互 + 轻薄容器”的精密运营感。
|
|
- 新页面应与现有仪表盘 / 用户管理保持同一视觉家族，避免出现另一套后台皮肤。
|
|
|
|
## 设计 token
|
|
- 背景与表面继续复用 `admin-frontend/src/styles/index.scss` 中的 `--xboard-*` 变量。
|
|
- 主色固定为 `#0071e3`，仅用于激活态、主按钮、焦点和核心交互反馈。
|
|
- 文本层级固定为：`--xboard-text-strong` 主标题、`--xboard-text-secondary` 正文、`--xboard-text-muted` 辅助信息。
|
|
- 表格、筛选器、状态徽章允许新增页面级局部变量，但不得绕开全局 token 直接堆随机颜色。
|
|
|
|
## 布局策略
|
|
- 一级导航仍采用左侧固定侧边栏，节点相关入口归入独立的“节点管理”分组，不混入“用户管理”分组。
|
|
- 订阅相关入口归入独立的“订阅管理”分组；未实现的订单/优惠券/礼品卡入口允许先以禁用态占位。
|
|
- 系统相关能力归入独立的“系统管理”分组；长表单型配置页采用“左侧分组导航 + 右侧连续 section”的后台编辑结构。
|
|
- 页面头部保持“大标题 + 一句说明 + 右侧操作”的双栏结构，首屏先给运营者建立页面心智，再进入列表。
|
|
- 列表上方先放一层紧凑筛选工具条：搜索框、类型筛选、权限组筛选、主操作按钮，避免二次折叠菜单。
|
|
- 宽表格在桌面优先完整呈现；窄屏时允许信息折行，但不牺牲主列的可读性。
|
|
- 订阅页面优先采用“黑色首屏 + 白色工作台 + 右侧抽屉”的结构，让套餐列表、价格矩阵和说明编辑形成清晰主次。
|
|
|
|
## 组件与模式
|
|
- 侧边栏分组标题使用 `ElSubMenu`，子项必须与业务域一一对应。
|
|
- 列表页优先使用原生 `ElTable` + Apple 化外观，不重新发明表格基础能力。
|
|
- 配置页优先使用原生 `ElForm`、`ElInput`、`ElSwitch`、`ElSelect` 与 `ElInputNumber` 组合，不在后台长表单里引入花哨交互。
|
|
- 状态使用“圆点 + 文本/徽章”双信号表达，避免仅靠颜色辨识在线/离线。
|
|
- 危险操作收入口袋菜单，主列表行只露出最常用的显隐切换与查看信息。
|
|
- 未进入本轮范围的功能允许放入占位页，但要明确标注“下一阶段接入”，不能伪装成可用功能。
|
|
|
|
## 状态覆盖
|
|
- 加载态：列表区域显示骨架或表格 loading，不让整页空白。
|
|
- 空状态：给出“当前筛选条件下暂无节点”与一键清空筛选入口。
|
|
- 错误态：保留用户当前筛选条件，并允许重试，不把失败吞掉。
|
|
- 成功态：显隐切换、复制节点、删除节点等操作使用明确 toast 反馈。
|
|
- 禁用态：未实现或不可用的操作按钮必须有禁用样式和原因说明。
|
|
|
|
## 记忆点
|
|
- 让用户记住“黑色首屏 + 运营表格 + 左侧节点分组”这一套安静但高辨识度的 Apple 化后台结构。
|
|
|
|
## 动效策略
|
|
- 只保留必要动效：筛选 pill 激活、按钮 hover、表格操作反馈、占位页轻微过渡。
|
|
- 禁止厚重的卡片飞入、长时间遮罩和无意义动画；尊重 `prefers-reduced-motion`。
|
|
|
|
## 无障碍要求
|
|
- 所有按钮、开关、下拉菜单都保留可见焦点。
|
|
- 表格操作必须支持键盘聚焦，危险动作要有明确文案。
|
|
- 在线状态除颜色外还要搭配文字或点位说明。
|
|
|
|
## 内容语气
|
|
- 标题直接、运营化，不写营销语。
|
|
- 空状态和占位提示应明确告诉用户“现在能做什么 / 下一阶段会补什么”。
|
|
- 操作按钮统一使用动词短语，如“添加节点”“编辑排序”“复制节点”“删除节点”。
|
|
|
|
## 禁止事项
|
|
- 禁止回到紫色渐变、玻璃拟态大面积模糊、厚重卡片堆叠。
|
|
- 禁止把节点列表页做成营销落地页式大色块拼贴。
|
|
- 禁止使用 emoji、随机插画或与 Xboard 运营后台无关的装饰元素。
|
|
|
|
## 约束定义
|
|
- 主页面同时出现的主操作按钮不超过 2 个。
|
|
- 同一页面强调色不超过 1 个，语义色只用于状态。
|
|
- 列表工具条最多一行半，超过则折叠到二级策略，不无限横向增长。
|
|
|
|
## 实现备注
|
|
- 全局 token 继续落在 `admin-frontend/src/styles/index.scss`。
|
|
- 节点页相关的格式化与映射逻辑优先放到 `admin-frontend/src/utils/nodes.ts`。
|
|
- 节点管理分组路由位于 `admin-frontend/src/router/index.ts`，页面实现位于 `admin-frontend/src/views/nodes/`。
|