Revert "feat(frontend): unify ui with slate control center"

This reverts commit 91aa6e83ca.
2026-03-25 05:21:34 +08:00
parent b9a4917467
commit d8a99e55b8
20 changed files with 1638 additions and 2733 deletions
@@ -1,11 +0,0 @@
-{
-  "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"
-}
@@ -1,159 +0,0 @@
-# 变更提案: 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 移动端不改变现有交互链路。
@@ -1,60 +0,0 @@
-# 任务清单: 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 + 中央终端 + 右侧状态监控”的主结构。