yinjianm
16203b14f6
扩展管理端侧边栏与路由，新增系统配置真实页面、订阅套餐 管理页、节点管理页及多个结构化占位页 补齐前端 API、类型与工具层，并增强仪表盘刷新、趋势切换、 失败作业详情与流量排行 limit 联动能力 同步后端 traffic rank limit 支持与知识库归档、设计约束、 验证配置及视觉验收产物
5.3 KiB
5.3 KiB
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/。