logan
746a000e8a
1. 主题系统扩展 (5套主题) - ocean-deep(深海蓝) / light-professional(明亮白) / midnight-purple(午夜紫) - pine-green(松林绿) / orange-vitality(活力橙) - useTheme hook 重写支持5主题 + 向后兼容 - AppearanceSettings 5主题预览卡片 2. 设计体系 (index.css) - 按钮系统: dg-btn-primary/secondary/ghost/danger + 尺寸变体 - 徽章系统: dg-badge-* (8色) - 卡片/表格: dg-card-section, dg-table-row, dg-table-header - 状态点: dg-status-dot-* (4色) - 动效关键帧: slideInLeft, scaleIn 3. 菜单重组 (menu.ts) - 5分组: 概览/数据源/工单/权限/系统 - 6个图标更新: Code2/FileEdit/ShieldCheck/FolderLock/ScrollText/Timer - 新增 permission 权限码字段 4. Layout 侧边栏增强 - 左侧渐变指示条 + 发光效果 - hover 微动画 + 图标变色 - 面包屑导航头部 - 主题切换循环5主题 5. 核心页面优化 - TicketsPage: 设计系统类 + 颜色对齐 - QueriesPage: 去Card依赖 + dg-table/dg-btn统一 - Breadcrumb组件 + useBreadcrumb hook
210 lines
11 KiB
Markdown
210 lines
11 KiB
Markdown
## 7. 设计体系统一方案
|
||
|
||
### 7.1 色彩体系规范
|
||
|
||
**主色板定义**
|
||
|
||
| 角色 | 色值 | 用途 |
|
||
|------|------|------|
|
||
| Primary | `#58a6ff` (--dg-blue) | 主要操作、链接、高亮 |
|
||
| Secondary | `#8957e5` (--dg-purple) | 次级强调、标签、分类 |
|
||
| Accent | `#39c5cf` (--dg-cyan) | 提示点、新功能标记、数据高亮 |
|
||
|
||
**功能色定义**
|
||
|
||
| 角色 | 色值 | 使用场景 |
|
||
|------|------|----------|
|
||
| Success | `#3fb950` | 成功状态、通过标识、正向数据 |
|
||
| Warning | `#f0883e` | 警告提示、需谨慎操作 |
|
||
| Error | `#f85149` | 错误状态、删除操作、阻断性提示 |
|
||
| Info | `#58a6ff` | 信息提示、帮助引导 |
|
||
|
||
**中性色（Gray Scale）**
|
||
|
||
以现有变量为锚点扩展完整灰阶：`#f0f6fc` (50) → `#c9d1d9` (200) → `#8b949e` (400) → `#6e7681` (500) → `#484f58` (700) → `#30363d` (800) → `#21262d` (850) → `#161b22` (900) → `#0d1117` (950)。分别对应主文本、次级文本、弱化文本、悬浮背景、边框、深边框、卡片背景、次级背景、主背景。
|
||
|
||
**渐变规范**
|
||
|
||
- 品牌渐变（`.dg-gradient-bg`）：`linear-gradient(135deg, #2563eb, #9333ea)`，用于Hero区域、登录页背景、Banner
|
||
- 文字渐变（`.dg-gradient-text`）：`linear-gradient(90deg, #60a5fa, #c084fc)`，仅用于大标题强调
|
||
- 边框渐变（`.dg-gradient-br`）：`linear-gradient(135deg, #2563eb, #9333ea)` 作为 border-image，用于特色卡片边框
|
||
- 使用规则：同一页面渐变不超过2种，文字渐变仅限H1/H2级别
|
||
|
||
**Tailwind配置扩展**
|
||
|
||
```js
|
||
colors: {
|
||
dg: {
|
||
bg: { primary: '#0d1117', secondary: '#161b22', tertiary: '#21262d', hover: '#30363d' },
|
||
border: { DEFAULT: '#30363d', light: '#21262d' },
|
||
text: { primary: '#f0f6fc', secondary: '#8b949e', muted: '#6e7681' },
|
||
blue: '#58a6ff', green: '#3fb950', red: '#f85149',
|
||
orange: '#f0883e', purple: '#8957e5', cyan: '#39c5cf', yellow: '#d29922',
|
||
}
|
||
}
|
||
```
|
||
|
||
### 7.2 字体排版规范
|
||
|
||
**字体栈**：`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;` 系统字体优先，中文回退依次为Noto Sans SC、PingFang SC、Microsoft YaHei。
|
||
|
||
**字号Scale**（基于1.25倍率）：
|
||
|
||
| Token | 尺寸 | 行高 | 用途 |
|
||
|-------|------|------|------|
|
||
| text-xs | 12px | 18px | 辅助文字、时间戳、徽章内文字 |
|
||
| text-sm | 14px | 20px | 表单标签、表格内容、按钮文字 |
|
||
| text-base | 16px | 24px | 正文、菜单项、对话框内容 |
|
||
| text-lg | 18px | 28px | 卡片标题、区块小标题 |
|
||
| text-xl | 20px | 30px | 页面次级标题 |
|
||
| text-2xl | 24px | 32px | 页面标题 |
|
||
| text-3xl | 30px | 38px | 模块大标题 |
|
||
| text-4xl | 36px | 44px | Hero标题、登录页品牌名 |
|
||
|
||
**字重规范**：normal (400) 用于正文，medium (500) 用于菜单和按钮，semibold (600) 用于标题，bold (700) 用于强调数据。H1-H6统一semibold，避免过粗导致的中文笔画粘连。
|
||
|
||
**等宽字体**：代码块与数据展示使用 `font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;`，字号14px，行高1.6。
|
||
|
||
### 7.3 间距体系规范
|
||
|
||
**基于4px的Spacing Scale**：0(0px)、1(4px)、2(8px)、3(12px)、4(16px)、5(20px)、6(24px)、8(32px)、10(40px)、12(48px)、16(64px)、20(80px)、24(96px)。
|
||
|
||
**页面内边距**：内容区水平 `px-6`(24px)，最大宽度1440px居中；垂直方向页面级 `py-8`(32px)，模块级 `py-6`(24px)。
|
||
|
||
**卡片内边距**：标准卡片 `p-6`(24px)，紧凑卡片 `p-4`(16px)，数据卡片 `px-5 py-4`(20px/16px)。
|
||
|
||
**表单间距**：标签与输入框间距 `mb-1.5`(6px)，表单项之间 `mb-5`(20px)，表单组之间 `mb-8`(32px)。
|
||
|
||
**表格间距**：表头内边距 `px-4 py-3`(16px/12px)，行内边距 `px-4 py-3`(16px/12px)，行间距0（以边框分隔）。
|
||
|
||
**常见布局模板**：页面标题区（mb-8）→ 统计卡片区（grid gap-4, mb-8）→ 主内容卡片区（gap-6）。
|
||
|
||
### 7.4 组件交互规范
|
||
|
||
**按钮体系**
|
||
|
||
| 变体 | 背景 | 文字 | 圆角 | 内边距 | 使用场景 |
|
||
|------|------|------|------|--------|----------|
|
||
| Primary | `#58a6ff` | `#0d1117` | 6px | px-4 py-2 | 主要提交、确认操作 |
|
||
| Secondary | `#21262d` | `#f0f6fc` | 6px | px-4 py-2 | 取消、返回操作 |
|
||
| Ghost | transparent | `#8b949e` | 6px | px-4 py-2 | 次要操作、工具栏按钮 |
|
||
| Danger | `#f85149` | `#fff` | 6px | px-4 py-2 | 删除、阻断性操作 |
|
||
| Link | transparent | `#58a6ff` | 0 | px-2 py-1 | 导航跳转、文字链接 |
|
||
|
||
尺寸：sm (h-8, px-3, text-xs)，md (h-10, px-4, text-sm)，lg (h-12, px-6, text-base)。圆角统一6px，hover时亮度提升10%，transition 150ms。
|
||
|
||
**输入框体系**：默认边框`#30363d`，focus边框`#58a6ff`并附加`ring-2 ring-blue-500/20`，error边框`#f85149`带红色ring，disabled背景`#161b22`文字`#6e7681`。统一圆角6px，内边距px-3 py-2，高度40px。
|
||
|
||
**卡片体系**：默认卡片（bg `#161b22` border `#30363d` 圆角8px），可悬浮卡片（hover时border-color过渡为`#484f58`、translateY(-1px)、shadow-lg），可选中卡片（选中态border `#58a6ff`、bg `#58a6ff/5%`）。
|
||
|
||
**表格体系**：表头bg `#161b22` 文字`#8b949e` font-semibold，行hover bg `#21262d`，操作列按钮间距gap-2。边框1px `#21262d`。
|
||
|
||
**弹窗体系**：确认弹窗（宽400px），表单弹窗（宽560px），抽屉（宽480px/640px两档）。统一圆角12px，阴影`shadow-2xl`，入场动画scaleIn 200ms。
|
||
|
||
**徽章体系**：状态徽章（圆角全角，px-2 py-0.5，text-xs），标签徽章（圆角4px，带边框），计数徽章（圆形，min-w-5，h-5）。
|
||
|
||
### 7.5 动效体系规范
|
||
|
||
**缓动函数定义**
|
||
|
||
| 名称 | 值 | 用途 |
|
||
|------|-----|------|
|
||
| ease-default | cubic-bezier(0.4, 0, 0.2, 1) | 常规过渡 |
|
||
| ease-in | cubic-bezier(0.4, 0, 1, 1) | 元素退出 |
|
||
| ease-out | cubic-bezier(0, 0, 0.2, 1) | 元素入场 |
|
||
| ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1) | 弹性交互 |
|
||
|
||
**时长Scale**：fast 150ms（hover、focus环、颜色过渡），normal 250ms（弹窗、展开/收起），slow 350ms（页面转场、大型组件）。
|
||
|
||
**入场动画**：fadeIn（opacity 0→1, 200ms ease-out）、slideUp（translateY 8px→0 + opacity, 250ms ease-out）、scaleIn（scale 0.95→1 + opacity, 200ms ease-out）。弹窗统一scaleIn，列表项使用slideUp带stagger 30ms。
|
||
|
||
**交互动画**：hover过渡统一150ms，按钮active时scale 0.98，卡片hover时translateY(-1px) + border-color过渡，输入框focus时ring 150ms。所有交互元素必须有hover反馈。
|
||
|
||
**Loading动画**：旋转器（border-2 border-t-blue-500，animate-spin，20px），骨架屏（shimmer动画，bg-gradient横向扫光，1.5s linear infinite）。
|
||
|
||
**CSS Keyframes**
|
||
|
||
```css
|
||
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
|
||
@keyframes slideUp { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
|
||
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95) } to { opacity: 1; transform: scale(1) } }
|
||
```
|
||
|
||
---
|
||
|
||
## 8. 实施路线图
|
||
|
||
### 8.1 优先级划分
|
||
|
||
| 优先级 | 范围 | 目标 |
|
||
|--------|------|------|
|
||
| P0 关键 | 登录页改造、设计体系统一 | 解决当前最大用户体验短板，建立可复用的设计基础 |
|
||
| P1 重要 | 主题系统扩展、核心功能优化 | 提升产品专业感，优化高频使用路径 |
|
||
| P2 优化 | 菜单体系、动效体系 | 增强导航效率与交互质感 |
|
||
| P3 增强 | 高级功能 | 数据可视化、个性化等增值能力 |
|
||
|
||
### 8.2 阶段一：登录页改造（2周）
|
||
|
||
**Week 1：组件重构**
|
||
- Day 1-2：开发粒子动画背景组件（Canvas实现，可配置粒子密度与连线颜色）
|
||
- Day 3：品牌展示区（渐变文字、系统名称、副标题、版本号）
|
||
- Day 4：登录表单重构（统一输入框规范、密码可见性切换、记住登录态）
|
||
- Day 5：安全提示区块（SSL标识、多因子认证引导、安全公告轮播）
|
||
|
||
**Week 2：动效与联调**
|
||
- Day 1-2：入场动效串联（粒子→标题→表单依次fadeIn+slideUp，stagger 150ms）
|
||
- Day 3：表单验证增强（实时校验、错误动画抖动、聚焦引导）
|
||
- Day 4-5：联调测试、响应式适配、浏览器兼容性验证
|
||
|
||
交付物：全新登录页、可复用粒子背景组件、登录表单组件。验收标准：Lighthouse性能分≥90，首屏加载<1.5s，动画帧率≥55fps。
|
||
|
||
### 8.3 阶段二：主题系统扩展（1周）
|
||
|
||
- Day 1-2：CSS变量体系扩展（将7.1节色彩规范完整植入，新增主题变量层 `--theme-*`）
|
||
- Day 3-4：主题切换UI（设置面板主题选择器、实时预览、本地持久化）
|
||
- Day 5：测试优化（变量回退机制、主题切换无闪烁、50+ shadcn/ui组件全覆盖）
|
||
|
||
交付物：扩展后的CSS变量体系、主题切换组件、Light/Dark/High-Contrast三主题。验收标准：主题切换<100ms无闪烁，所有组件颜色100%变量驱动。
|
||
|
||
### 8.4 阶段三：核心功能优化（3周）
|
||
|
||
**Week 1：审批变更工单系统**
|
||
- 工单列表卡片化重构（统一.dg-card规范）
|
||
- 审批流可视化（状态徽章体系、进度条组件）
|
||
- 批量操作工具栏（按钮体系统一）
|
||
|
||
**Week 2：查询数据页面**
|
||
- SQL编辑器区域优化（等宽字体规范、行号样式）
|
||
- 结果表格重构（表格体系统一、列宽记忆）
|
||
- 查询历史面板（间距体系应用、空状态设计）
|
||
|
||
**Week 3：系统设置页面**
|
||
- 设置项卡片分组（间距模板应用）
|
||
- 表单交互优化（输入框规范、保存反馈动效）
|
||
- 权限矩阵表格重构（表格规范全面落地）
|
||
|
||
交付物：三个核心页面重构完成、对应组件更新。验收标准：无硬编码颜色，间距100%符合scale，交互动效完整。
|
||
|
||
### 8.5 阶段四：菜单与体系统一（1周）
|
||
|
||
- Day 1-2：菜单结构重组（按用户角色分组、图标体系统一、激活态样式）
|
||
- Day 3-4：全局设计体系统一（替换所有硬编码颜色为CSS变量，按钮/卡片/输入框标准化）
|
||
- Day 5：动效体系实现（全局加载动画、页面转场、交互反馈动效）
|
||
|
||
交付物：重组后的菜单组件、全局样式清理报告、动效配置文件。验收标准：代码库零硬编码色值（除渐变色定义外），全局交互动效一致性100%。
|
||
|
||
### 8.6 预期效果
|
||
|
||
**定性效果**：登录页从功能型升级为品牌展示窗口；核心操作流程视觉层级清晰，用户认知负担降低；全产品交互反馈一致，专业感显著提升。
|
||
|
||
**定量效果**：
|
||
|
||
| 指标 | 当前预估 | 目标 |
|
||
|------|----------|------|
|
||
| 首屏加载时间 | ~2.5s | <1.5s |
|
||
| Lighthouse性能分 | ~70 | ≥90 |
|
||
| 全局样式不一致点 | 35+处 | 0处 |
|
||
| CSS变量覆盖率 | ~60% | 100% |
|
||
|
||
**风险控制**：每阶段独立分支开发，P0/P1阶段完成后可独立上线；所有样式变更基于现有变量扩展，保持向后兼容；关键页面保留回滚开关，确保24小时内可回退至原版本。
|