28 lines
2.9 KiB
Markdown
28 lines
2.9 KiB
Markdown
# SDD-008：管理端 UI 指南落地
|
||
|
||
| 字段 | 内容 |
|
||
|---|---|
|
||
| 级别 | S3（导航、会话错误处理与日志导出凭据传递方式） |
|
||
| 状态 | 本轮已实施，真实浏览器业务链路待联调 |
|
||
| 日期 | 2026-10-22 |
|
||
|
||
## 现状与目标
|
||
|
||
当前 Vue 3 / Element Plus 后台已有基本响应式布局与 CSS 变量，但菜单与路由双份维护、局部样式仍有散落数值，图表无数据时使用假的占位切片，部分请求失败只留下空白或抛出未处理错误。按 `~/Documents/WEB-UI-Development-Guide` 的 02/04/05/06/07/08 章，以现有 Vue 栈完善全站视觉和交互，不更换框架、不修改后台授权模型与业务 API。
|
||
|
||
## 设计与兼容
|
||
|
||
- 路由 meta 提供菜单分组、顺序、图标与子页父路径；布局按 meta 渲染。保留已有 URL、管理员显隐规则和路由守卫；不能把客户端导航权限误认为服务器授权。
|
||
- 统一品牌、表面、文本、边框、间距、侧栏和动效 CSS 变量，沿用 Element Plus；页面卡片统一描边。移动端侧栏覆盖主内容，表格保持横向滚动，表单弹窗不越界。
|
||
- 概览、专线列表、拨号用户、设备列表、在线会话和流量图明确首屏加载、空数据、请求失败与重试；轮询失败保留已有可信数据，禁止绘制虚构切片。统计卡片使用可键盘聚焦的导航链接，图表按需注册。
|
||
- 登录不预填账号或展示默认口令；仅真实会话失效时统一清除本地登录态并跳转，不把登录表单的 401 当作过期会话，更不从 401 处理器递归注销。
|
||
- 日志 CSV 使用现有 Axios Authorization 请求并从 Blob 下载；筛选参数与原请求保持一致，不把 token 放入 URL。失败时保留原日志并明确显示错误，下载完成后释放 Blob URL。后端现有导出接口不变。
|
||
|
||
## 风险与验收
|
||
|
||
风险：菜单 meta 遗漏导致入口消失；颜色对比、窄屏表格或图表实例切换出错；登录错误处理误跳转；大文件 CSV 进入浏览器内存。验收：所有原有入口均可从对应角色看到，子页可返回专线；中文/英文页面可构建；桌面与小屏下菜单和操作按钮可点；登录 401 留在登录表单，业务 401 只触发一次跳转；接口错误时有重试且不伪造数据；日志导出请求 URL 不含 token，HTTP Authorization 携带凭据并成功下载 CSV。旧版后端接口保持兼容。提交前执行前端构建与 `git diff --check`，生产发布需另行确认可访问性与当前在线 VPN 连接；回退只需切回上一版前端嵌入二进制。
|
||
|
||
## 后续拆分点
|
||
|
||
`Settings.vue`、`Tunnels.vue`、`VPNUsers.vue` 目前超过指南的 400 行视图上限。下一轮按业务边界分别将身份/网关设置、专线详情/日志、拨号用户的 MFA 弹层移至页面私有组件和 composable。避免本次视觉统一同时改变这些敏感业务表单的状态及 API 调用顺序。
|