# 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/`。