feat(frontend): unify ui with slate control center
add shared page and auth shells to standardize the main application layout and authentication entry experience refresh dashboard, settings, login, setup, notifications, proxies, and audit logs with a consistent Element Plus based control-center presentation modernize workspace side panels and status monitor while keeping the three-column layout, and fix the terminal hover cursor to show a text caret
This commit is contained in:
yinjianm
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"status": "completed",
|
||||
"completed": 8,
|
||||
"failed": 0,
|
||||
"pending": 0,
|
||||
"total": 8,
|
||||
"done": 8,
|
||||
"percent": 100,
|
||||
"current": "已完成 Slate Control Center 全站前端重绘并通过 packages/frontend 构建验证",
|
||||
"updated_at": "2026-03-25 05:20:00"
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
# 变更提案: frontend-slate-control-center
|
||||
|
||||
## 元信息
|
||||
```yaml
|
||||
类型: 重构 / 优化
|
||||
方案类型: implementation
|
||||
优先级: P1
|
||||
状态: 草稿
|
||||
创建: 2026-03-25
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. 需求
|
||||
|
||||
### 背景
|
||||
当前 `packages/frontend` 已接入 `Element Plus`，但绝大多数主页面仍停留在早期 Tailwind 原子类和零散自定义变量的混合状态。页面之间的视觉语言不统一，导航壳层、卡片、表格、筛选区、登录/初始化页、工作区侧边工作台都缺少一套一致的“控制中心”设计表达。用户已确认对整个前端站点做统一视觉重做，并指定采用“方案 A: Slate Control Center”。
|
||||
|
||||
### 目标
|
||||
- 建立一套贯穿全站的 Slate Control Center 视觉语言，包括颜色、排版、圆角、阴影、边框、背景层次和状态语义。
|
||||
- 让顶部导航、主内容区、卡片容器、过滤操作区、表格、表单、标签和空状态统一使用更现代的 `Element Plus` 风格与封装。
|
||||
- 重做主要页面的壳层和关键交互，包括 `Dashboard`、`Workspace`、`Connections`、`Proxies`、`Notifications`、`Audit Logs`、`Settings`、`Login`、`Setup`。
|
||||
- 保持现有业务逻辑、Pinia store、路由和多语言能力不变，尽量将改动集中在壳层和组件表达层。
|
||||
|
||||
### 约束条件
|
||||
```yaml
|
||||
时间约束: 当前轮次内完成可运行的前端重构与构建验证
|
||||
性能约束: 不引入新的重量级 UI 框架，仅基于现有 Element Plus、Vue 3 和样式层重构
|
||||
兼容性约束: 保持现有路由、状态管理、组件接口和核心业务流程兼容
|
||||
业务约束: /workspace 的三栏工作台结构保持既有决策，仅升级视觉语言和容器表达
|
||||
```
|
||||
|
||||
### 验收标准
|
||||
- [ ] 全局样式令牌和 Element Plus 主题变量统一，顶层导航和页面容器具备一致的 Slate Control Center 风格。
|
||||
- [ ] `Dashboard`、`Connections`、`Settings`、`Login`、`Setup` 等主页面完成现代化重绘，优先采用 `Element Plus` 容器、表单、标签页、表格、统计卡片等组件。
|
||||
- [ ] `/workspace` 的 Workbench、终端主区和状态监控面板在视觉上完成统一升级，保留当前结构与主要交互。
|
||||
- [ ] `npm --workspace packages/frontend run build` 通过。
|
||||
|
||||
---
|
||||
|
||||
## 2. 方案
|
||||
|
||||
### 技术方案
|
||||
本次改造以“壳层统一 + 样式令牌统一 + 主页面容器重做 + 工作区局部深度优化”为主：
|
||||
|
||||
- 在全局样式层重建 `style.css`，统一品牌色、页面背景、面板层级、边框、阴影、字体和 `Element Plus` CSS 变量映射。
|
||||
- 在应用壳层引入统一页面容器、导航信息层、操作条和页面标题表达，逐步替换现有分散的 Tailwind 片段。
|
||||
- 对主页面优先使用 `Element Plus` 的 `ElContainer`、`ElCard`、`ElTabs`、`ElTable`、`ElForm`、`ElInput`、`ElButton`、`ElTag`、`ElEmpty`、`ElAlert`、`ElSegmented` 等组件表达。
|
||||
- 对 `/workspace` 保持布局树与会话逻辑不变，只重做 Workbench、状态监控、终端外围容器和工作区背景层次。
|
||||
- 尽量新增轻量公共组件，减少把整套视觉逻辑硬编码在每个 view 里。
|
||||
|
||||
### 影响范围
|
||||
```yaml
|
||||
涉及模块:
|
||||
- frontend: 全局样式令牌、应用壳层、主页面容器、工作区视觉重构
|
||||
- workspace-root: 仅同步上下文与变更记录，不改变后端/部署逻辑
|
||||
预计变更文件: 12-20
|
||||
```
|
||||
|
||||
### 风险评估
|
||||
| 风险 | 等级 | 应对 |
|
||||
|------|------|------|
|
||||
| 全局样式变量重写影响现有细节组件 | 中 | 保留核心语义变量名，优先在壳层和新公共组件内消费 |
|
||||
| 旧页面使用大量原子类，迁移后局部布局错位 | 中 | 先重做公共壳层与主页面，再做工作区和高复杂页面 |
|
||||
| Element Plus 引入更多容器后局部交互样式不一致 | 中 | 统一页面级卡片、表单、筛选条和表格封装 |
|
||||
| 工作区组件过多，若全量重写会超出单轮范围 | 低 | 聚焦外层容器、Workbench、状态监控与终端壳层，不动核心终端协议与会话逻辑 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 技术设计
|
||||
|
||||
### 架构设计
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[style.css 设计令牌] --> B[Element Plus 主题变量]
|
||||
B --> C[App 全局导航壳层]
|
||||
B --> D[页面级容器组件]
|
||||
D --> E[Dashboard / Connections / Settings / Notifications]
|
||||
D --> F[Login / Setup / Proxies / Audit Logs]
|
||||
B --> G[Workspace 容器与 Workbench / StatusMonitor]
|
||||
```
|
||||
|
||||
### 关键设计拆分
|
||||
- 建立全局设计令牌层：背景分层、标题字体、面板边框、状态颜色、交互高亮、玻璃化和工业控制台感阴影。
|
||||
- 构建公共页面壳层：统一页面标题、描述、右侧操作区、统计条和内容区卡片边界。
|
||||
- 重做主要页面表达：从“表单/列表堆叠”升级为“控制中心”型信息组织。
|
||||
- Workspace 采用“Slate 控制台”表达：左侧工作台像资源侧栏，中部终端维持主位，右侧状态监控更像运维仪表卡片。
|
||||
|
||||
---
|
||||
|
||||
## 4. 核心场景
|
||||
|
||||
### 场景: 主站点统一视觉语言
|
||||
**模块**: frontend
|
||||
**条件**: 用户进入 Dashboard、Connections、Settings 等主要页面
|
||||
**行为**: 页面统一使用 Slate Control Center 风格的壳层、卡片、筛选区和内容容器
|
||||
**结果**: 主站点视觉语言一致，Element Plus 使用比例显著提升
|
||||
|
||||
### 场景: 工作区现代化控制台
|
||||
**模块**: frontend
|
||||
**条件**: 用户进入 `/workspace`
|
||||
**行为**: 维持三栏结构不变，但重做背景层次、Workbench 容器、状态卡片和终端外围外观
|
||||
**结果**: 工作区看起来像现代控制中心，而非原始拆分面板
|
||||
|
||||
### 场景: 认证入口统一品牌化
|
||||
**模块**: frontend
|
||||
**条件**: 用户访问 `/login` 或 `/setup`
|
||||
**行为**: 登录与初始化页面共享统一品牌板式、表单容器和引导文案层次
|
||||
**结果**: 首次进入体验与主站点风格统一
|
||||
|
||||
---
|
||||
|
||||
## 5. 技术决策
|
||||
|
||||
### frontend-slate-control-center#D001: 以全局令牌 + 页面壳层重构替代逐页零散修补
|
||||
**日期**: 2026-03-25
|
||||
**状态**: 已采纳
|
||||
**背景**: 现有页面风格分散，若继续逐页修补会反复复制样式，且无法建立统一设计语言。
|
||||
**选项分析**:
|
||||
| 选项 | 优点 | 缺点 |
|
||||
|------|------|------|
|
||||
| A: 先重建全局令牌和壳层，再逐页替换 | 一致性强，后续页面改造成本更低 | 首次改动面更大 |
|
||||
| B: 逐页局部替换样式类 | 单页改动小 | 风格难统一，维护成本高 |
|
||||
**决策**: 选择方案 A
|
||||
**理由**: 用户明确要求“改整个前端站点，所有主要页面统一重做视觉语言和组件风格”，必须先建立统一底座。
|
||||
**影响**: `style.css`、`App.vue`、主要视图文件、部分工作区组件都会调整
|
||||
|
||||
### frontend-slate-control-center#D002: 主要页面优先采用 Element Plus 容器与表单表达
|
||||
**日期**: 2026-03-25
|
||||
**状态**: 已采纳
|
||||
**背景**: 仓库已引入 `Element Plus`，但当前使用率极低，无法体现组件库一致性。
|
||||
**选项分析**:
|
||||
| 选项 | 优点 | 缺点 |
|
||||
|------|------|------|
|
||||
| A: 以 Element Plus 为主，Tailwind 负责间距和局部布局 | 组件统一、主题变量统一、开发效率更高 | 需补主题映射 |
|
||||
| B: 继续主要依赖 Tailwind 原子类 | 灵活 | 风格容易继续碎片化 |
|
||||
**决策**: 选择方案 A
|
||||
**理由**: 与用户要求直接一致，并且 Element Plus 已在依赖和入口中可用。
|
||||
**影响**: 主页面会增加 `ElCard`、`ElInput`、`ElButton`、`ElTabs`、`ElTable` 等使用
|
||||
|
||||
---
|
||||
|
||||
## 6. 成果设计
|
||||
|
||||
### 设计方向
|
||||
- **美学基调**: Slate Control Center。整体是石板灰、雾面蓝灰、冷白高光的专业控制中心，不走炫技霓虹，也不回到传统后台白底表格。
|
||||
- **记忆点**: 顶层导航和各页面的“控制台头部条”，带有浅层玻璃感、信息徽标和有节奏的卡片层级，形成像现代运维控制中心的视觉记忆。
|
||||
- **参考**: xterminal 的控制台感布局重心 + Element Plus 的信息密度与组件一致性 + 工业面板式层级。
|
||||
|
||||
### 视觉要素
|
||||
- **配色**: 主背景使用深浅交叠的 slate 灰蓝体系，内容面板使用高亮浅灰卡片，强调色使用冷蓝与青绿色，危险态保留橙红。
|
||||
- **字体**: 标题使用更有控制台气质的窄体/几何感字体栈，正文使用清晰的中文优先无衬线；代码和状态数字保持等宽字体。
|
||||
- **布局**: 顶部导航更扁平且信息化；主页面采用“标题信息头 + 统计带 + 主内容卡片”的层次；Workspace 保持三栏但加重容器感与边界感。
|
||||
- **动效**: 页面头部、卡片和标签切换采用短促的位移与透明度过渡；悬停强调边框和阴影，不堆砌复杂动画。
|
||||
- **氛围**: 背景带有轻微径向渐变和柔和网格/噪点质感，卡片使用浅玻璃边缘和柔和阴影，突出现代专业控制中心质感。
|
||||
|
||||
### 技术约束
|
||||
- **可访问性**: 保持表单、按钮、标签页和表格的键盘可达性，确保浅色文本对比满足阅读要求。
|
||||
- **响应式**: 主站页面在桌面优先，保留既有移动端退化逻辑；Workspace 移动端不改变现有交互链路。
|
||||
@@ -0,0 +1,60 @@
|
||||
# 任务清单: frontend-slate-control-center
|
||||
|
||||
```yaml
|
||||
@feature: frontend-slate-control-center
|
||||
@created: 2026-03-25
|
||||
@status: completed
|
||||
@mode: R3
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 8 | 0 | 0 | 8 |
|
||||
|
||||
### LIVE_STATUS
|
||||
```yaml
|
||||
status: completed
|
||||
current: 已完成 Slate Control Center 全站前端重绘并通过 packages/frontend 构建验证
|
||||
completed: 8
|
||||
failed: 0
|
||||
pending: 0
|
||||
total: 8
|
||||
done: 8
|
||||
percent: 100
|
||||
updated_at: 2026-03-25 05:20:00
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 设计底座与公共壳层
|
||||
- [√] 1.1 在 `packages/frontend/src/style.css` 中重建 Slate Control Center 全局设计令牌与 Element Plus 主题变量桥接 | depends_on: []
|
||||
- [√] 1.2 在 `packages/frontend/src/App.vue` 中重做全局导航、页面背景和应用壳层表达 | depends_on: [1.1]
|
||||
- [√] 1.3 新增公共页面容器组件，用于统一主要页面标题、描述、操作区和内容卡片风格 | depends_on: [1.1]
|
||||
|
||||
### 2. 主要页面现代化
|
||||
- [√] 2.1 重做 `packages/frontend/src/views/DashboardView.vue`，将概览区升级为控制中心式信息卡片与操作面板 | depends_on: [1.1, 1.3]
|
||||
- [√] 2.2 重做 `packages/frontend/src/views/ConnectionsView.vue`、`packages/frontend/src/views/ProxiesView.vue`、`packages/frontend/src/views/AuditLogView.vue`、`packages/frontend/src/views/NotificationsView.vue` 的页面容器和主操作区，优先接入 Element Plus 组件 | depends_on: [1.1, 1.3]
|
||||
- [√] 2.3 重做 `packages/frontend/src/views/SettingsView.vue` 的设置导航和内容容器层次，使其符合统一控制中心风格 | depends_on: [1.1, 1.3]
|
||||
|
||||
### 3. 认证入口与工作区
|
||||
- [√] 3.1 重做 `packages/frontend/src/views/LoginView.vue` 与 `packages/frontend/src/views/SetupView.vue`，统一品牌入口视觉和表单表达 | depends_on: [1.1]
|
||||
- [√] 3.2 重做 `packages/frontend/src/components/WorkspaceWorkbench.vue`、`packages/frontend/src/components/StatusMonitor.vue`，并修复终端区域鼠标进入时的光标表现 | depends_on: [1.1, 1.2]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-03-25 04:19:00 | 创建设计方案包 | completed | `create_package.py` 因编码损坏不可用，已按规则手动降级创建 |
|
||||
| 2026-03-25 05:20:00 | 完成前端主页面与工作区视觉重绘 | completed | `npm --workspace packages/frontend run build` 通过 |
|
||||
|
||||
---
|
||||
|
||||
## 执行备注
|
||||
|
||||
> 本轮以前端视觉语言统一和页面容器重塑为主，不改动后端 API 协议与核心会话逻辑；`/workspace` 继续保持“左侧 Workbench + 中央终端 + 右侧状态监控”的主结构。
|
||||
Reference in New Issue
Block a user