opsxsql/SQL平台评估与优化/sql_platform_optimization_sec07_08.md

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配置扩展

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

@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小时内可回退至原版本。