diff --git a/SQL平台评估与优化/SQL平台全面评估与UIUX优化方案.docx b/SQL平台评估与优化/SQL平台全面评估与UIUX优化方案.docx deleted file mode 100644 index d2598eb..0000000 Binary files a/SQL平台评估与优化/SQL平台全面评估与UIUX优化方案.docx and /dev/null differ diff --git a/SQL平台评估与优化/plan.md b/SQL平台评估与优化/plan.md deleted file mode 100644 index 71c92da..0000000 --- a/SQL平台评估与优化/plan.md +++ /dev/null @@ -1,23 +0,0 @@ -# SQL Platform 全面评估与优化方案 - 执行计划 - -## 阶段 1: 代码库克隆与结构分析 -- 克隆代码库 `https://gitee.com/attacker/sql-platform.git` -- 分析项目结构（前后端技术栈、目录组织） -- 阅读 docs 目录下所有文档 - -## 阶段 2: 前端代码深入分析 -- 分析5个登录页面的实现和现有设计 -- 分析登录后页面主题系统 -- 分析菜单结构和路由配置 -- 重点分析核心功能：审批变更、查询数据、系统设置的实现 - -## 阶段 3: 问题评估与方案设计 -- 加载 deep-research-swarm 技能，进行UI/UX最佳实践调研 -- 加载 report-writing 技能，撰写评估报告 -- 设计5个专业登录页风格方案 -- 设计5个登录后主题风格方案 -- 设计核心功能页面优化方案 - -## 阶段 4: 输出优化方案文档 -- 输出完整的评估报告（.docx格式） -- 包含：现状分析、问题清单、5套登录页设计方案、5套主题设计方案、核心功能优化方案、实施路线图 diff --git a/SQL平台评估与优化/sql_platform_optimization.agent.final.md b/SQL平台评估与优化/sql_platform_optimization.agent.final.md deleted file mode 100644 index 22e1cf6..0000000 --- a/SQL平台评估与优化/sql_platform_optimization.agent.final.md +++ /dev/null @@ -1,3420 +0,0 @@ -# 1. 项目概况与技术架构评估 - -## 1.1 项目定位与核心功能 - -### 1.1.1 平台定位 - -SQL-Platform 是一款面向企业内部数据操作的**自助查询与数据变更审批流平台**，其核心定位是为开发、运维、数据分析等角色提供安全可控的数据库操作入口。平台覆盖 MySQL、PostgreSQL、Redis、MongoDB 四种主流数据库类型，通过工单驱动的审批机制，在操作便捷性与数据安全性之间建立平衡。 - -该平台在生态位上直接对标 **Yearning**（Go + Vue 技术栈，侧重 MySQL 审计）与 **Archery**（Python + Vue 技术栈，支持多数据库），同时吸收了 **Bytebase** 在工单审批流程设计上的先进理念。相较于竞品，本项目采用 React 19 + Go/Gin 的现代化全栈组合，在前后端解耦程度、UI 可定制性以及开发者体验（DX）方面具备差异化竞争力。 - -### 1.1.2 核心功能模块 - -平台功能围绕"**数据操作全生命周期管理**"展开，可划分为五大核心域： - -| 功能域 | 核心能力 | 对应菜单 | -|--------|----------|----------| -| 数据操作 | SQL 自助查询（支持 CodeMirror 6 编辑器）、数据变更提交 | 查询数据、数据变更 | -| 审批工作流 | 工单创建 → 审批节点流转 → 执行/驳回 → 归档 | 工单管理 | -| 数据源治理 | 多类型数据库实例注册、连接池管理、Schema 浏览 | 数据源管理 | -| 权限管控 | RBAC 角色权限模型、权限组划分、用户生命周期管理 | 权限组、角色权限、用户管理 | -| 审计与合规 | 操作日志全量记录、审批流程自定义、自动任务调度 | 审计日志、审批流程、自动任务 | - -### 1.1.3 对标产品分析 - -| 维度 | SQL-Platform | Yearning | Archery | Bytebase | -|------|-------------|----------|---------|----------| -| 后端技术 | Go/Gin | Go/Beego | Python/Django | Go | -| 前端技术 | React 19 + TS | Vue 2 | Vue 2 | Vue 3 | -| 支持数据库 | MySQL/PgSQL/Redis/MongoDB | MySQL | 多数据库 | 全品类 | -| UI 组件体系 | shadcn/ui + Tailwind | Element UI | Element UI | 自研组件 | -| 编辑器 | CodeMirror 6 | ACE Editor | ACE Editor | 自研 Monaco | -| 代码开源度 | 全开源 | 开源核心 | 全开源 | 开源核心 | - -相较 Yearning，本项目在多数据库支持广度与前端技术栈现代化程度上具有明显优势；相较 Archery，Go 后端的性能表现与部署便捷性更为突出。当前主要差距集中在**工单审批流程的可视化设计**与**数据库变更的 Schema 版本管理（VCS 集成）**方面，这两项可作为后续版本的重点演进方向。 - ---- - -## 1.2 技术栈分析 - -### 1.2.1 前后端技术选型评估 - -**后端架构** - -后端采用 **Go 1.26 + Gin v1.10.1** 的组合，Gin 作为目前 Go 生态中 Stars 数最高（>80k）的 Web 框架，其高性能路由与极简的 Middleware 设计非常适合 API 密集型企业应用。ORM 层选用 **GORM v1.26.0**，借助其 AutoMigrate、关联预加载与插件扩展能力，可显著降低数据库操作层的样板代码量。元数据库采用 **SQLite**（通过 `gorm.io/driver/sqlite` 驱动），这一设计决策使得平台在部署时**零依赖外部数据库**，极大降低了私有化部署的门槛——这对于中小团队或对运维复杂度敏感的企业极具吸引力。 - -认证层采用 **JWT HS256 + bcrypt** 方案，Token 默认 24h 过期，在安全性与用户体验之间取得合理平衡。RBAC 权限中间件的独立设计体现了安全架构的前置思维，建议后续版本考虑引入 Refresh Token 机制以降低长期会话的泄露风险。 - -**前端架构** - -前端基于 **React 19 + TypeScript**，构建工具采用 **Vite 7**，这一组合代表了 2024-2025 年 React 生态的技术前沿。React 19 的 Server Components 支持（尽管当前项目以 CSR 为主）、Compiler 自动优化以及改进的 Suspense 边界处理，为后续性能演进预留了充足空间。Vite 7 相较于 Webpack 在冷启动速度（提升约 10-20 倍）与 HMR 响应速度上具备代际优势，显著改善开发体验。 - -UI 层采用 **shadcn/ui + Tailwind CSS 4 + Radix UI** 的三层架构：Radix UI 提供无样式、无障碍（A11y）完备的底层原语；Tailwind CSS 4 提供原子化样式能力；shadcn/ui 则在此基础上封装了一套设计一致、可高度定制的高阶组件。这种"无头组件 + 原子样式 + 组件封装"的分层模式，是当前前端 UI 架构的最佳实践之一。 - -代码编辑器选用 **CodeMirror 6**（`@codemirror/lang-sql` 语言包），相较于 Monaco Editor，CodeMirror 6 在包体积（Tree-shakeable 后约 100KB vs Monaco 的 1MB+）、移动端适配以及主题定制灵活性上表现更优，非常适合本项目这种以 SQL 编辑为核心但非纯 IDE 场景的应用。 - -图表层采用 **Recharts**，作为 React 生态中最成熟的 D3 封装库，其与 React 组件模型的深度整合使得在仪表盘页面中构建数据可视化变得直观高效。 - -### 1.2.2 技术栈优势分析 - -1. **部署零依赖**：SQLite 作为元数据库 + Go 单二进制部署，使得整个平台可以编译为单一可执行文件分发，运维成本极低。 -2. **类型安全贯穿全栈**：TypeScript（前端）+ Go（后端）的双重静态类型保障，配合 GORM 的模型定义与前端接口类型的共享（可通过 OpenAPI/Swagger 代码生成进一步强化），可显著降低因类型不匹配导致的运行时错误。 -3. **组件体系可扩展性强**：shadcn/ui 的组件代码直接存在于项目源码中（非 npm 黑盒），团队可根据业务需求任意修改组件内部实现而不受上游版本锁定。 -4. **性能基线优秀**：Go 的 goroutine 并发模型 + Gin 的高性能路由 + Vite 的快速构建 + React.lazy 代码分割，从后端到前端形成了一条完整的性能优化链路。 - -### 1.2.3 潜在技术债务 - -| 风险点 | 影响等级 | 说明与建议 | -|--------|----------|-----------| -| GORM v1.26.0 版本锁定 | 中 | GORM v2 与 v1 存在 API 不兼容变更，长期停留在 v1 会阻碍安全补丁获取。建议规划迁移至 GORM v2。 | -| SQLite 并发写入瓶颈 | 中 | SQLite 在 WAL 模式下可支持多读单写，但在高并发工单场景下可能成为瓶颈。建议评估是否需要支持 PostgreSQL/MySQL 作为可选元数据库。 | -| React 19 生态适配 | 低-中 | React 19 尚属较新版本，部分第三方库可能存在兼容性问题。建议建立依赖版本锁定策略，并持续跟踪关键依赖的 React 19 适配进度。 | -| JWT 无 Refresh Token | 中 | 24h 固定过期时间导致用户需要频繁重新登录，影响体验。建议引入 Refresh Token + Access Token 双 Token 机制。 | -| 缺少 API 文档自动化 | 低 | 后端 120+ 路由缺乏自动化文档输出。建议集成 Swagger/OpenAPI 自动生成，降低前后端协作成本。 | - ---- - -## 1.3 前端架构现状评估 - -### 1.3.1 页面结构与路由设计 - -项目当前包含 **24+ 页面**，覆盖平台五大功能域，页面层级设计遵循"功能域 → 功能页 → 操作面板"的三层信息架构原则： - -``` -概览 -└── 仪表盘（Dashboard）— 运营指标总览 - -数据源 -└── 数据源管理（Instances）— CRUD + 连接测试 - -工单管理 -├── 数据变更（Tickets/Change）— 变更工单列表 + 审批流 -└── 查询数据（Tickets/Query）— 查询工单列表 + SQL 执行 - -权限管理 -├── 权限组（PermissionGroups）— 权限集合管理 -├── 角色权限（Roles）— RBAC 角色定义 -└── 用户管理（Users）— 用户生命周期管理 - -系统配置 -├── 审计日志（AuditLogs）— 操作记录检索 -├── 审批流程（ApprovalFlows）— 审批节点自定义 -└── 自动任务（ScheduledTasks）— 定时任务管理 - -配置平台 -└── 系统设置（Settings）— 全局参数配置 -``` - -路由设计层面，项目已采用 **React.lazy 进行代码分割**，这是一个重要的性能优化信号——通过将各功能域拆分为独立的异步 Chunk，可显著降低首屏加载时间。建议进一步结合 React Router v6 的 `loader` 与 `action` API 实现路由级的数据预取，减少页面切换时的感知延迟。 - -平台提供 **5 种登录页主题**（SplitView / CenteredCard / SidePanel / FullImage / MinimalDark），这一设计体现了对部署场景多样性的考虑——不同企业可根据自身品牌调性选择最适合的登录体验。从维护性角度，建议将这 5 种主题抽象为统一的 "LoginLayout" 组件，通过配置对象驱动渲染，减少重复逻辑。 - -### 1.3.2 组件化程度分析 - -项目组件体系可分为三个层级，整体呈现良好的分层架构： - -| 层级 | 组件数量 | 代表组件 | 职责说明 | -|------|----------|----------|----------| -| 基础组件 | 50+ | Button, Input, Dialog, Table, Dropdown | shadcn/ui 封装，平台无关，可复用性最高 | -| 业务组件 | 9 | Layout, SqlEditor, SchemaSidebar, EditInstanceDialog | 领域特定，封装业务逻辑与交互模式 | -| 页面组件 | 24+ | Dashboard, Instances, Tickets, Settings | 路由级入口，组合业务组件完成特定功能 | - -**值得肯定的方面**： -- 自定义组件的命名遵循 PascalCase + 语义化约定（如 `SchemaSidebar`、`EditInstanceDialog`），可读性良好。 -- `SqlEditor` 组件作为核心交互组件被独立封装，基于 CodeMirror 6 提供了 SQL 语法高亮、关键词补全等能力，是可复用性最高的业务资产之一。 -- `Layout` 组件的统一设计确保了全站导航结构的一致性。 - -**建议改进的方向**： -- 业务组件层当前仅有 9 个，相对于 24+ 页面的规模略显单薄，存在页面间逻辑重复的可能性。建议对高频交互模式（如表单创建/编辑、列表筛选/分页、审批操作确认等）进行进一步抽象。 -- 建议建立组件文档体系（如 Storybook），记录各组件的 Props 接口、使用示例与视觉规格，降低团队协作成本。 - -### 1.3.3 状态管理方案 - -基于代码架构分析，项目当前的状态管理呈现 **"React 内置状态 + 局部上下文"** 的轻量级模式。对于 SQL-Platform 这类以表单操作和列表管理为核心的应用，这种状态管理策略是合理且务实的： - -- **服务端状态**（工单列表、实例配置、用户数据等）：通过 API 调用获取，建议引入 **TanStack Query (React Query)** 进行封装，可自动处理缓存、去重、重试、乐观更新等复杂逻辑。 -- **客户端状态**（UI 展开/折叠、编辑器内容、筛选条件）：以 `useState` / `useReducer` 管理，复杂度可控。 -- **全局共享状态**（用户认证信息、主题偏好、权限节点）：当前可能通过 React Context 或 Props Drilling 传递，建议评估是否需要引入轻量级全局状态库（如 **Zustand**）以避免深层嵌套组件的 Props 传递开销。 - -### 1.3.4 性能优化措施 - -目前已实施的优化措施： - -| 优化手段 | 实施状态 | 效果评估 | -|----------|----------|----------| -| React.lazy 代码分割 | 已实施 | 降低首屏 JS 体积，提升 FCP/LCP | -| Vite 7 快速构建 | 已实施 | 开发阶段 HMR < 50ms，构建产出高效 | -| Tailwind CSS 原子样式 | 已实施 | 无运行时开销，产物体积小 | - -建议补充的优化方向： - -1. **虚拟列表**：工单列表与审计日志在数据量较大时可能出现渲染性能瓶颈，建议对长列表引入 `@tanstack/react-virtual` 或类似方案。 -2. **编辑器按需加载**：CodeMirror 6 及其语言包体积不可忽视，建议确保编辑器组件仅在 SQL 相关路由中被异步加载。 -3. **Tree Shaking 审查**：定期使用 `rollup-plugin-visualizer` 或类似工具分析产物体积，剔除未使用的依赖代码。 -4. **图片资源优化**：如有图表截图、操作指南配图等静态资源，建议采用 WebP/AVIF 格式并配置懒加载。 - ---- - -## 1.4 现有 UI 设计体系梳理 - -### 1.4.1 CSS 变量体系评估 - -项目已建立一套以 `--dg-*` 为前缀的 **CSS 自定义属性体系**，覆盖了 Dark / Light 两种主题模式以及共享的渐变色系统。这一设计决策体现了良好的工程化思维——通过将颜色值抽象为语义化变量，可实现全站一键换肤并降低维护成本。 - -**Dark 主题色板**： - -| 变量名 | 色值 | 语义角色 | 评估 | -|--------|------|----------|------| -| `--dg-bg-primary` | `#0d1117` | 页面主背景 | GitHub Dark 同款基底，视觉深邃，适合长时间操作 | -| `--dg-bg-secondary` | `#161b22` | 卡片/面板背景 | 与主背景形成 7% 亮度差，层级感清晰 | -| `--dg-bg-tertiary` | `#21262d` | 输入框/悬停态背景 | 足够的对比度确保交互反馈可感知 | - -**Light 主题色板**： - -| 变量名 | 色值 | 语义角色 | 评估 | -|--------|------|----------|------| -| `--dg-bg-primary` | `#ffffff` | 页面主背景 | 纯白基底，经典稳妥 | -| `--dg-bg-secondary` | `#f8f9fb` | 卡片/面板背景 | 微冷灰调，避免纯白页面的单调感 | - -**共享渐变系统**： - -| 变量名 | 色值 | 使用场景 | -|--------|------|----------| -| `--dg-gradient-start` | `#2563eb`（蓝色） | 品牌主色 → 用于 Logo、主按钮、活跃状态 | -| `--dg-gradient-end` | `#9333ea`（紫色） | 品牌辅色 → 用于渐变过渡、装饰性元素 | - -蓝紫渐变在视觉上传递了**科技感与专业性**，与数据库管理工具的定位高度契合。该渐变目前被封装为 `.dg-gradient-text` 与 `.dg-gradient-bg` 两个工具类，使用便捷。 - -**语义化工具类**： - -项目还定义了 `.dg-card`、`.dg-input` 等高级工具类，将颜色变量、圆角、阴影、边框等属性聚合为语义化的样式单元。这种"变量 + 工具类"的双层体系兼顾了灵活性与开发效率，是可维护性设计的体现。 - -### 1.4.2 shadcn/ui 组件库使用情况 - -项目使用了 **50+ shadcn/ui 基础组件**，覆盖了表单控件（Input、Select、Checkbox、Radio）、数据展示（Table、Card、Badge、Tooltip）、反馈（Dialog、Toast、Alert、Skeleton）、导航（Tabs、Breadcrumb、Sidebar）等完整类别。 - -shadcn/ui 的核心优势在于**源码级可定制性**——组件代码直接存在于项目的 `components/ui/` 目录中，团队可以： -- 自由修改组件的默认样式、动画参数、无障碍属性 -- 根据品牌规范调整颜色、圆角、间距等设计 Token -- 添加业务特有的 Props 扩展（如在 Button 上增加 `isLoading` 的统一处理） - -当前需要关注的点：50+ 组件的规模意味着维护成本不可忽视，建议在升级 shadcn/ui 版本时建立变更日志审查机制，确保上游的 Bug 修复与安全更新能够及时同步。 - -### 1.4.3 主题系统设计 - -平台当前的主题系统具备以下特征： - -1. **双主题覆盖**：Dark / Light 两种模式，通过 CSS 变量切换实现，切换成本极低（仅需切换顶层 class）。 -2. **渐变色作为品牌标识**：蓝紫渐变（`#2563eb` → `#9333ea`）贯穿两种主题，形成了强烈的品牌视觉记忆点。 -3. **CSS 变量驱动**：所有主题相关属性均通过 `--dg-*` 变量管理，无硬编码色值散落在组件代码中。 - -**建议完善的方面**： -- 当前主题切换可能依赖 CSS 的 `prefers-color-scheme` 媒体查询或手动切换按钮，建议增加**主题偏好持久化**（localStorage）与**系统主题自动跟随**的双重机制。 -- 建议补充 **High Contrast（高对比度）** 模式，满足无障碍合规要求（WCAG 2.1 AA 级）。 -- 考虑引入 **主题 Token 文档**，明确定义每种语义色值的使用场景（如 `--dg-bg-primary` 仅用于页面级背景，不可用于卡片），防止变量滥用导致视觉不一致。 - -### 1.4.4 当前设计体系的优势与不足 - -**优势**： - -| 维度 | 表现 | -|------|------| -| 工程化成熟度 | CSS 变量 + 工具类的双层体系，shadcn/ui 的源码级可控性 | -| 品牌一致性 | 蓝紫渐变标识贯穿全站，Dark/Light 双主题覆盖完整 | -| 开发效率 | Tailwind 原子类 + 语义化工具类，编写样式快速直观 | -| 扩展能力 | 新增主题仅需定义一组 CSS 变量，无需修改组件代码 | - -**不足**： - -| 维度 | 问题描述 | 改进优先级 | -|------|----------|-----------| -| 设计 Token 粒度 | 当前变量主要集中在颜色维度，缺少间距、字体、阴影、动效的 Token 化定义 | 高 | -| 动效体系缺失 | 页面转场、组件出现/消失、状态切换等交互缺乏统一的动效规范 | 高 | -| 无障碍支持 | 缺少 ARIA 属性系统化检查、键盘导航测试、色彩对比度合规验证 | 中 | -| 响应式设计 | 平台以桌面端操作为主，但缺少不同分辨率下的布局适配策略 | 中 | -| 图标体系 | 未明确图标库选型（如 Lucide、Radix Icons）与使用规范 | 低 | - -综上，SQL-Platform 的 UI 设计体系已具备良好的基础骨架，特别是在 CSS 变量体系与组件化封装方面展现了专业水准。后续优化的核心方向应聚焦于**设计 Token 的维度扩展**（补充间距、动效、阴影 Token）、**交互动效体系的建立**以及**无障碍合规性的系统性提升**，这些内容将在后续章节中展开详细方案。 -## 2. 现状问题诊断 - -经过对 SQL-Platform 前端代码库的全面审阅与走查，我们共识别出 5 大维度、23 项具体问题。这些问题贯穿登录认证、主题系统、核心功能页面、菜单导航以及整体设计体系，严重程度从"视觉瑕疵"到"架构性债务"不等。以下按模块逐项展开诊断。 - ---- - -### 2.1 登录页面五大问题分析 - -平台提供了 5 种登录页面布局（`SplitView`、`CenteredCard`、`SidePanel`、`FullImage`、`MinimalDark`），位于 `/frontend/src/components/login/` 目录下。尽管数量丰富，但 5 个组件共享大量共性问题，且各布局存在特有的设计缺陷。以下从视觉层次、交互体验、品牌感知、组件化程度和动效反馈五个维度进行诊断。 - -#### 2.1.1 视觉层次薄弱 - -**共性问题**：5 个登录页均缺乏清晰的视觉焦点层级，背景、装饰元素与核心表单区域之间的对比关系处理随意。 - -| 布局组件 | 具体视觉问题 | 严重程度 | -|---|---|---| -| `SplitView.tsx` | 左侧特性列表采用简单 icon+文字网格排列，无卡片包裹、无分割线，各 feature 项视觉权重完全一致，用户难以快速扫描核心卖点 | 中 | -| `CenteredCard.tsx` | 渐变背景仅为单色线性过渡，无纹理或光晕层次；卡片阴影硬编码为 `0 8px 32px rgba(0,0,0,0.3)`，缺乏环境光感，呈现"浮空贴图"效果 | 中 | -| `SidePanel.tsx` | 装饰性圆圈使用 `borderRadius: 50%` 的 div 硬编码，无渐变填充、无模糊处理，视觉上如同"开发占位符"；品牌区域仅放置 `Database` 图标，无品牌图形标识 | 高 | -| `FullImage.tsx` | 电路板网格背景使用 CSS `repeating-linear-gradient` 实现，线条粗细一致、无辉光效果，整体呈现"半成品 sketch"观感；毛玻璃效果 `backdrop-filter: blur(16px)` 未配合饱和度降低（` saturate`）与边缘高光，通透感不足 | 高 | -| `MinimalDark.tsx` | 几乎无任何装饰性设计元素，纯黑背景+白字表单的极简走向极端，缺乏辅助视觉引导线或光晕点缀，整体显得空旷冷清 | 中 | - -**根因分析**：各登录页的开发重心放在"布局差异化"上，却忽视了"视觉深度营造"。装饰元素的实现手段停留在 CSS 基础属性层面，未利用渐变、噪点纹理、多层阴影、边缘发光等现代视觉技法来建立前景/中景/背景的三层空间关系。 - -#### 2.1.2 交互体验不足 - -登录作为用户进入平台的第一触点，其交互体验直接影响用户对平台专业度的初始判断。当前 5 个登录组件在表单交互方面存在系统性缺陷： - -1. **表单验证视觉反馈缺失**：全部使用原生 `` 元素，未采用 shadcn/ui 的 `` 组件。输入框在 focus、error、success 三种状态下均无边框颜色变化、无图标提示、无 shake 动画。用户提交错误表单后，仅能看到简单的红色文字提示，错误字段本身没有任何视觉变化。 - -2. **"记住我"功能缺位**：5 个登录页均未提供"记住账号/保持登录"选项。对于企业级工具而言，频繁的会话过期与重复登录是显著的效率损耗点。 - -3. **"忘记密码"入口缺失**：没有提供密码找回或重置的链接入口，用户一旦遗忘密码将无从操作。 - -4. **安全提示文字缺失**：未展示"建议使用强密码"、"登录即表示同意服务条款"等合规性文案，降低了平台的安全可信度。 - -5. **版本号显示缺失**：登录页未展示当前平台版本号（如 `v2.4.1`），不利于运维排查与用户反馈时的版本确认。 - -#### 2.1.3 品牌感缺失 - -品牌名在所有 5 个登录页中统一硬编码为"SQL审核平台"，名称过于直白、缺乏品牌辨识度与情感连接。对比业界标杆产品（如 Bytebase 的科技感命名、Archery 的品牌化 Logo），当前的命名策略停留在"功能描述"层面，未形成品牌记忆点。 - -更关键的是，5 个登录页均**未展示品牌标识**（Logo、品牌图形、吉祥物或标志性配色）。`SidePanel` 仅用 `Database` 通用图标代替品牌图形，`CenteredCard` 完全没有任何品牌标识。登录页作为品牌视觉锤的核心触点，未能承担品牌认知建设的职责。 - -#### 2.1.4 组件化程度低 - -从代码实现层面审视，5 个登录组件存在显著的工程化债务： - -- **未使用 shadcn/ui `` 组件**：全部直接使用原生 ``，导致表单样式无法继承主题系统的 CSS 变量，切换主题时可能出现颜色断层。 -- **内联样式泛滥**：表单样式大量使用内联 `style` 属性（如 `style={{ padding: '24px', borderRadius: '8px' }}`），而非 Tailwind CSS 工具类。这破坏了项目的样式一致性，也增加了主题切换的维护成本。 -- **按钮样式不统一**：有的登录按钮使用渐变背景，有的使用纯色，有的使用 outline 样式，5 个组件之间没有共享按钮规范。 -- **登录按钮 loading 状态简陋**：loading 状态仅通过文字变化（如"登录中..."）体现，无 spinner 图标、无按钮宽度保持、无禁用状态视觉变化，用户可能因按钮"变形"而产生疑惑。 - -**改进方向**：应将登录表单抽象为可复用的 `` 组件，统一使用 shadcn/ui 的 `Input`、`Button`、`Checkbox`、`Label` 等原子组件，并通过 Tailwind class 管理所有样式。 - -#### 2.1.5 动效与反馈匮乏 - -当前登录页的动效设计几乎处于空白状态： - -| 交互场景 | 当前表现 | 期望表现 | -|---|---|---| -| 登录成功 | 直接跳转，无过渡动画 | 显示成功 checkmark 动画，延迟 400ms 后优雅跳转 | -| 登录失败 | 简单红色文字提示 | 表单 shake 动画 + 错误字段高亮 + 带图标的错误消息 | -| 输入框 focus | 无特殊效果 | 边框颜色过渡 + 柔和外发光（`ring`） | -| 按钮 hover/click | 无反馈或仅有透明度变化 | 微缩放 + 阴影加深 + 涟漪效果 | -| 页面加载 | 静态呈现 | 表单区域的 fade-in + translateY 入场动画 | - -**根因分析**：开发过程中未引入动画库（如 `framer-motion`），所有交互反馈停留在浏览器默认行为层面。登录页作为情感化设计的最佳载体，动效的缺失使得整体体验显得"机械"与"冰冷"。 - ---- - -### 2.2 主题系统局限性 - -当前主题系统仅支持 `dark` 与 `light` 两种模式，通过 `data-theme` HTML 属性进行切换，主题选择入口位于 `AppearanceSettings` 页面，以简单的按钮组形式呈现。 - -**核心局限点**： - -1. **色彩方案单一**：缺乏紫色系、绿色系、暖色系、高对比度等多元色彩方案。现代 SaaS 平台（如 Vercel、Notion、Linear）通常提供 4-8 种预设主题，以满足不同用户的审美偏好与无障碍需求。 - -2. **主题预览简陋**：预览区域仅以 4:3 比例的缩略图展示，用户无法直观感受主题在真实数据密度下的表现。建议提供可交互的实时预览（如展示表格、按钮、标签等组件的组合效果）。 - -3. **主题切换过渡生硬**：切换主题时无过渡动画，页面瞬间"闪切"，视觉体验断裂。应加入 200-300ms 的颜色过渡动画（`transition: color, background-color`）。 - -4. **自定义能力缺失**：高级用户无法调整主色调、圆角大小、字体密度等参数。建议提供"自定义主题"模式，允许用户通过色盘选择器定义个性化的品牌色。 - -5. **CSS 变量覆盖范围不足**：部分组件仍使用硬编码颜色值，未完全纳入 CSS 变量体系，导致主题切换时存在"漏色"现象。 - ---- - -### 2.3 核心功能页面问题 - -#### 2.3.1 审批变更工单系统 - -工单系统包含 3 个核心页面，总计 2742 行代码，存在显著的 UX 债务： - -**审批变更页（`TicketsPage.tsx`，742 行）**： -- 表格使用原生 `` 元素，未使用 shadcn/ui 的 `Table` 组件，导致列头排序、列宽调整、行悬停效果等功能全部缺失。 -- 状态标签样式极其简单（如 `bg-blue-500/15 text-blue-400`），仅为色块+文字，无圆角规范、无图标辅助、无二态（solid/soft）区分。 -- 操作按钮采用简单文字链接形式（"查看""编辑""删除"），无图标按钮、无操作菜单（dropdown menu），在窄屏下易折行。 -- **缺少批量操作功能**：用户无法对多条工单进行批量审批或批量关闭，效率低下。 -- 搜索框为原生 ``，无搜索图标、无清除按钮、无搜索建议。 -- 分页组件为手写实现，未使用 shadcn/ui `Pagination`，样式与平台其他分页区域不统一。 - -**工单创建页（`TicketCreatePage.tsx`，1192 行）**： -- 布局采用上下堆叠的线性结构，左侧 SQL 编辑器与右侧库表浏览面板的空间配比固定，未利用响应式网格最大化编辑区域。 -- SQL 编辑器下方的信息条（行数、字符数、语法状态）样式过于简单，无图标、无色彩状态区分。 -- 审核结果展示为扁平列表，缺乏视觉层次：通过/失败的规则未使用不同颜色或图标区分，高亮行与错误行的视觉权重相近。 -- 库表浏览面板的 tab 切换样式为基础样式，无活跃 tab 的指示器动画。 -- **无自动保存草稿功能**：用户误刷新页面后，已编写的 SQL 将全部丢失，这是企业级工具的高风险体验缺口。 - -**工单详情页（`TicketDetailPage.tsx`，808 行）**： -- 审批流程可视化使用简单圆形+直线实现，无节点状态图标（如 `Check`、`Clock`、`X`）、无连线动画、无进度百分比指示。 -- 信息网格采用 2 列 flex 布局直接裸露呈现，无卡片包裹、无分割线、无标签-值的对齐规范。 -- 执行结果直接展示原始 JSON 字符串，无格式化、无语法高亮、无可折叠区域，运维人员阅读极为困难。 -- 关联工单区域仅为简单的工单编号链接列表，无状态徽章、无优先级标识。 - -#### 2.3.2 查询数据页面 - -`QueriesPage.tsx`（896 行）作为数据查询的核心工作区，存在以下 UX 问题： - -- 查询结果表格同样使用原生 `
`，列宽不可调整（无拖拽调整功能），对于宽表（20+ 列）的浏览体验极差。 -- **缺少查询收藏夹功能**：用户无法保存常用的查询语句，每次需重新输入或从历史中翻找。 -- 历史记录面板为简单的文字列表，无查询耗时显示、无行数结果、无收藏/删除操作。 -- SQL 编辑器与结果表格之间的区域无明确的分割线或可调整拖拽条（resizer），用户无法按需求分配编辑区与结果区的屏幕空间。 - -#### 2.3.3 系统设置页面 - -`SettingsPage.tsx`（56 行）作为设置入口，问题尤为突出： - -- **Tab 图标使用 Emoji**（`🎨` 外观、`⚙️` 平台、`🛡️` 安全、`🔔` 通知、`🔐` 密码），与平台其他页面统一使用的 `lucide-react` 图标体系严重冲突，视觉风格割裂。Emoji 在不同操作系统下的渲染差异也会导致界面不统一。 -- Tab 切换无动画过渡，内容区域的切换为瞬间跳转，体验生硬。 -- 各设置子页面的表单设计不一致：有的使用 shadcn/ui 组件，有的（如 `PlatformConfigPage`）直接使用原生 ``，标签对齐方式、间距、按钮位置均不统一。 -- **缺少设置变更确认/撤销机制**：用户在修改敏感配置（如数据库连接参数）后，没有二次确认对话框；也没有"重置为默认值"或"撤销本次更改"的功能，误操作风险高。 - ---- - -### 2.4 菜单体系问题 - -平台的侧边栏导航菜单存在以下结构性问题： - -1. **图标体系不统一**：`Settings` 页面使用 Emoji 图标，而其他所有页面使用 `lucide-react` 图标库。这种混用破坏了导航的视觉一致性，也降低了专业感。 - -2. **菜单分组合理性不足**：当前菜单分为 6 个 section，但部分分类逻辑存在问题。例如"自动任务"被归类在"系统配置"分组下，而从用户心智模型来看，自动任务属于"运维操作"范畴，与"系统配置"（偏静态参数）的认知类别不同。建议重新审视信息架构，采用"按用户角色分组"或"按操作频率分组"的策略。 - -3. **面包屑导航缺失**：页面层级超过 2 层后（如 设置 > 平台配置 > 数据库参数），用户无法通过面包屑快速定位当前位置或返回上级，只能依赖浏览器后退按钮。 - -4. **Hover/Active 状态过渡动画缺失**：菜单项的悬停和激活状态切换为瞬间变化，无 150-200ms 的颜色/背景过渡动画，整体感觉"卡顿"而非"响应"。 - -5. **当前页面指示不够醒目**：激活菜单项仅通过轻微的颜色变化区分，缺乏左侧边框高亮（`border-left` accent）或背景色块等强指示手段。 - ---- - -### 2.5 设计体系不一致性 - -从代码层面审视，平台在整体 design system 的贯彻执行上存在严重的碎片化现象： - -**卡片组件混用**：部分页面使用 shadcn/ui 的 `` 组件（如 Dashboard），部分页面使用 `
` 手写卡片样式（如工单详情页的信息网格）。手写卡片的圆角、阴影、边框、背景色与 shadcn/ui Card 的默认参数存在细微差异，积累后形成显著的视觉噪音。 - -**按钮样式分裂**：平台内同时存在 3 种按钮风格——渐变按钮（部分登录页）、纯色填充按钮（shadcn/ui 默认）、outline 描边按钮（部分操作栏）。三种风格的使用没有明确的场景规范，同一页面内也可能混用，破坏了操作隐喻的一致性。 - -**表单输入框样式差异**：有的页面使用 shadcn/ui ``（带统一的 focus ring、圆角、高度），有的页面使用原生 ``（样式依赖浏览器默认），有的页面使用内联样式自定义的输入框。三种实现的视觉高度、边框粗细、焦点反馈均不相同。 - -**颜色管理混乱**：部分组件使用硬编码颜色值（如 `rgba(0,0,0,0.3)`、`#3b82f6`），部分组件使用 CSS 变量（如 `hsl(var(--primary))`），部分组件使用 Tailwind 的语义化 class（如 `bg-primary`）。当主题切换或品牌色调整时，硬编码的颜色值不会跟随变化，导致"漏色"与视觉断层。 - -**间距系统缺失**：各页面的 `padding` 和 `margin` 取值随意，无统一的 spacing scale。例如有的卡片内边距为 `16px`，有的为 `20px`，有的为 `24px`；页面级的外边距也无统一规范（`pagePadding` token 缺失）。这种不一致使得页面之间的"呼吸感"差异明显，整体缺乏精致感。 - -**根因总结**：以上不一致性的根本原因在于缺乏一个被严格执行的 Design Token 体系与组件使用规范。开发人员在实现新页面时，没有明确的"应该使用哪个组件、哪个 token"的指引，导致各页面"各自为政"。建议引入一套完整的 Design Token（颜色、间距、字体、阴影、圆角）并配合 ESLint 规则强制在组件层面统一规范。 - ---- - -> **本章小结**：SQL-Platform 的现状问题可归纳为"功能可用但体验粗糙"。登录页面作为品牌门面，在视觉层次、交互反馈、品牌感知上均有显著短板；核心功能页面（工单系统、查询页面、设置页面）在组件选型、布局效率、信息架构上存在系统性债务；主题系统与菜单体系的局限性则反映了设计体系在规划层面的不足。这些问题并非孤立存在，而是相互交织：设计体系的碎片化导致了各页面实现的不一致，组件化程度低导致了交互体验的简陋，主题系统的局限又加剧了视觉风格的单一。后续章节将针对这些问题提出具体的优化方案。 -## 3. 五套专业登录页设计方案 - -针对现有五个登录页组件（`SplitView.tsx`、`CenteredCard.tsx`、`SidePanel.tsx`、`FullImage.tsx`、`MinimalDark.tsx`）"不专业、太 low"的用户反馈，本章提供五套完整的专业级登录页重设计方案。每套方案均基于 React 19 + TypeScript + Tailwind CSS 4 + shadcn/ui + Lucide Icons 技术栈，保留现有的 `useLogin` 与 `useTheme` hook 架构，在视觉表现、交互体验与动效层次上实现全面升级。 - -五套方案分别对应五种截然不同的企业气质：科技互联、金融安全、云端 SaaS、极客代码、创意自然。设计方案遵循"一次一屏"（Single Screen）原则，确保登录流程简洁高效，同时在第一眼传递出强烈的品牌专业感。 - ---- - -### 3.1 方案一「极光科技」— 动态粒子科技风 - -#### 设计概念与灵感来源 - -「极光科技」方案的灵感源自现代科技公司的数据可视化美学——深空般的背景中，粒子如数据节点般流动、连接，暗示着数据库节点之间的网络拓扑关系。设计参考了 Vercel、PlanetScale 等现代 DevTools 产品的暗黑登录页风格，将"数据流动"这一抽象概念转化为可感知的视觉语言。深色背景配合冷色调粒子动画，营造出深邃、专注、充满科技张力的第一印象。 - -#### 适用场景 - -适合科技互联网公司、数据库工具产品、DevOps 平台、技术驱动型 SaaS 企业。这类企业的用户群体（开发者、DBA、技术人员）对科技感视觉有天然的好感度与信任预期。 - -#### 视觉规范 - -| 元素 | 规范值 | 说明 | -|------|--------|------| -| 背景渐变 | `#0a0e27` → `#1a1f4b` | 深邃的深蓝到暗蓝，比纯黑更有空间感 | -| 粒子数量 | 80 个 | 足够形成视觉密度，不过度抢占注意力 | -| 粒子颜色 | `#3b82f680`（半透蓝） | 与品牌蓝色系一致，带透明度避免喧宾夺主 | -| 连线距离 | 120px | 控制连线密度，确保画面不过于繁杂 | -| 卡片背景 | `rgba(255,255,255,0.03)` | 极微弱的白色，配合毛玻璃效果 | -| 卡片毛玻璃 | `backdrop-blur: 20px` | iOS 风格毛玻璃，现代感强烈 | -| 卡片边框 | `1px solid rgba(255,255,255,0.08)` | 微妙的发光边框勾勒卡片轮廓 | -| 卡片圆角 | `16px` | 现代感的较大圆角 | -| 卡片内边距 | `40px 32px` | 宽裕的内部空间 | -| Logo 底圆 | `56px`，渐变 `from #2563eb to #9333ea` | 渐变圆形底托提升品牌质感 | -| Logo 图标 | `Shield`（Lucide），白色，`24px` | 安全感的盾形图标 | -| 品牌名 | "DataGuard"，`20px`，白色，字重 600 | 清晰的品牌露出 | -| 输入框高度 | `44px` | 符合现代表单的最佳点击高度 | -| 输入框圆角 | `10px` | 与卡片圆角协调 | -| 输入框聚焦 | 边框 `#3b82f6`，外发光 `0 0 0 3px rgba(59,130,246,0.15)` | 蓝色光晕聚焦指示 | -| 按钮渐变 | `from #2563eb to #7c3aed` | 蓝紫渐变，与现有品牌渐变一致 | -| 按钮高度 | `44px` | 与输入框等高，视觉对齐 | -| 按钮圆角 | `10px` | 与输入框统一 | -| 辅助链接色 | `#8b949e`，hover `#58a6ff` | GitHub 风格的灰色链接 | - -#### 动效规范 - -**粒子系统动画**：使用 Canvas 2D 实现 60fps 粒子系统。每个粒子以随机速度在画布内移动（速度范围 0.3~0.8px/frame），碰到边界反弹。当两个粒子距离小于 120px 时，绘制连线（线条透明度随距离衰减：`opacity = 1 - distance/120 * 0.7`）。鼠标位置额外产生一个"引力点"，靠近鼠标的粒子连线距离阈值提升至 180px，形成交互反馈。 - -**卡片入场动画**： -```css -@keyframes cardEnter { - from { opacity: 0; transform: translateY(20px); } - to { opacity: 1; transform: translateY(0); } -} -/* duration: 600ms, easing: cubic-bezier(0.16, 1, 0.3, 1) */ -``` -使用 `cubic-bezier(0.16, 1, 0.3, 1)` 缓动函数——初始阶段快速响应，结尾柔和减速，营造"丝滑吸附"的质感。 - -**输入框聚焦**：边框颜色过渡 `200ms ease`，外发光同步渐显，给用户明确的焦点反馈。 - -**按钮 Hover**：`transform: translateY(-1px)` 微上移，`box-shadow` 从 `0 4px 12px rgba(37,99,235,0.25)` 增强为 `0 8px 24px rgba(37,99,235,0.35)`，过渡 `200ms ease`。 - -**错误状态 Shake 动画**： -```css -@keyframes shake { - 0%, 100% { transform: translateX(0); } - 25% { transform: translateX(-5px); } - 50% { transform: translateX(5px); } - 75% { transform: translateX(-5px); } -} -/* duration: 300ms, 执行 1 次，同时边框变为 #ef4444 */ -``` - -#### 代码实现要点 - -1. **粒子系统**：使用 `useRef` 获取 Canvas 上下文，在 `useEffect` 中初始化粒子数组并启动 `requestAnimationFrame` 动画循环。粒子系统封装为独立的 `ParticleBackground.tsx` 组件，通过 props 接收 `particleCount`、`connectionDistance`、`color` 等参数。 - -2. **卡片结构**：使用 `Card`（shadcn/ui）作为容器，外层包裹 `div` 设置 `backdrop-blur-xl bg-white/[0.03] border border-white/[0.08]` 实现毛玻璃效果。 - -3. **表单组件**：`Input` 和 `Button` 直接使用 shadcn/ui 组件，通过 Tailwind 的 `className` 覆盖默认样式。输入框聚焦外发光使用 `focus:ring-[3px] focus:ring-blue-500/15 focus:border-blue-500`。 - -4. **状态管理**：继续使用现有的 `useLogin` hook（`username` / `password` / `loading` / `error`），错误触发时通过条件类名绑定 shake 动画。 - ---- - -### 3.2 方案二「企业金融」— 银行级安全可信风 - -#### 设计概念与灵感来源 - -金融类产品的登录页第一要务是传递"安全感"。「企业金融」方案借鉴了招商银行企业网银、Stripe Dashboard 以及 Bloomberg Terminal 的视觉语言——通过深沉的蓝色调、严谨的版式分割、明确的信任标识，在瞬间建立起用户对系统的信任。左右分屏的布局本身就是一种力量感的表达：左侧沉稳的品牌展示，右侧聚焦的表单操作，信息层级清晰，符合金融用户"高效、安全、专业"的心理预期。 - -#### 适用场景 - -金融、银行、保险、证券、支付等强监管行业企业。用户群体包括金融从业者、企业财务人员、风控人员，他们对安全标识（SSL、加密、审计）高度敏感。 - -#### 视觉规范 - -| 元素 | 规范值 | 说明 | -|------|--------|------| -| 左侧背景 | `#0c1a3c` → `#1a365d` | 深蓝渐变，传递权威与稳重 | -| 左侧宽度 | 60% | 大面积品牌展示区 | -| 右侧背景 | `#f8fafc` | 极浅灰白，与左侧形成清晰分割 | -| 右侧宽度 | 40% | 聚焦的表单操作区 | -| 品牌 Logo | 白色 Shield 图标 + "DataGuard" | 居中偏上布局 | -| Slogan | "安全的数据库变更管理"，`18px`，`#94a3b8` | 简洁定位标语 | -| 信任指标 | 3 个：SSL 加密、权限隔离、审计追踪 | 带 CheckCircle 图标的列表 | -| 信任指标图标 | `CheckCircle2`（Lucide），`#22c55e` | 绿色对勾传递"已验证" | -| 信任指标文字 | `#cbd5e1`，`14px` | 柔和的说明文字 | -| 右侧卡片 | 白色背景，圆角 `16px` | 干净的表单容器 | -| 卡片阴影 | `0 4px 24px rgba(0,0,0,0.08)` | 微妙的浮起感 | -| 卡片内边距 | `48px 40px` | 金融级宽裕间距 | -| 登录标题 | "欢迎回来"，`24px`，`#0f172a`，字重 700 | 亲切的问候 | -| 输入框样式 | 底部边框（Underline Input）| 类似 Material Design 的底线输入 | -| 输入框高度 | `48px` | 稍大以凸显重要感 | -| 输入框边框 | 默认 `border-b-2 border-slate-200`，聚焦 `border-[#1a365d]` | 底线聚焦变深蓝 | -| 按钮背景 | `#1a365d` | 沉稳深蓝，呼应左侧 | -| 按钮高度 | `48px` | 与输入框等高 | -| 按钮圆角 | `8px` | 相对克制的圆角，体现严谨 | -| 安全提示 | "🔒 您的连接已加密保护"，`12px`，`#64748b` | 明确的安全信号 | - -#### 动效规范 - -**左右面板载入**：页面加载时，左侧面板从左侧滑入（`translateX(-40px) → 0`，`400ms ease-out`），右侧面板从右侧同步滑入（`translateX(40px) → 0`，`400ms ease-out`，延迟 `50ms`）。两侧同时汇聚中间，隐喻"安全通道的建立"。 - -**信任指标依次淡入**：3 个信任指标在左侧面板就位后依次显示，每个间隔 `150ms`： -```css -.trust-item:nth-child(1) { animation-delay: 200ms; } -.trust-item:nth-child(2) { animation-delay: 350ms; } -.trust-item:nth-child(3) { animation-delay: 500ms; } -/* 统一动画: opacity 0→1, translateX(-10px)→0, 300ms ease-out */ -``` - -**按钮 Hover**：背景色从 `#1a365d` 平滑过渡为 `#122a4a`（加深 10%），同时增加 `box-shadow: 0 4px 16px rgba(12,26,60,0.2)`，过渡 `200ms ease`。 - -**输入框聚焦**：底部边框从 `#e2e8f0` 变为 `#1a365d`，宽度有微妙的"延展"效果（使用 `scaleX` 从 0→1 配合 `transform-origin: left`），`200ms ease`。 - -#### 代码实现要点 - -1. **分屏布局**：使用 CSS Grid `grid-cols-[60%_40%]` 或 Flex `flex-[60]` / `flex-[40]` 实现左右分割。移动端（`< 1024px`）切换为上下布局，左侧折叠为顶部横幅。 - -2. **底线输入框**：不使用 shadcn/ui 默认的边框输入框，而是自定义 `div` 包裹 ``，通过 `border-b-2` + `bg-transparent` 实现底线样式，聚焦时切换 `border-color`。 - -3. **信任指标列表**：封装为 `TrustIndicators` 子组件，接收指标数组渲染，配合 `setTimeout` 或 CSS `animation-delay` 实现依次淡入。 - -4. **安全提示**：底部固定位置，使用 `flex items-center gap-2` 布局，锁图标使用 Lucide `Lock` 组件。 - ---- - -### 3.3 方案三「云端数据」— 云计算 SaaS 风 - -#### 设计概念与灵感来源 - -云计算和 SaaS 产品的登录页追求的是"轻盈、开放、无门槛"。「云端数据」方案汲取了 Snowflake、Figma、Notion 等现代 SaaS 产品的登录体验——明亮的浅色调、友好的圆角语言、丰富的 SSO 集成选项，向用户传递"即开即用"的产品气质。右上角的装饰性云朵图案是对"云端"概念的直接呼应，但处理为低对比度的纹理，避免过度具象化。 - -#### 适用场景 - -云服务商、SaaS 产品、互联网协作工具、中台系统、B2B 软件公司。用户群体包括产品经理、技术团队、普通企业用户，他们期望登录流程简单快捷，SSO 支持是加分项。 - -#### 视觉规范 - -| 元素 | 规范值 | 说明 | -|------|--------|------| -| 背景渐变 | `#f0f4f8` → `#e2e8f0` | 柔和的天空感浅灰蓝渐变 | -| 装饰云朵 | SVG 路径，右上角，`opacity: 0.3` | 微妙的云端意象，不干扰主体 | -| 卡片背景 | `#ffffff` 纯白 | 干净、明亮的中心焦点 | -| 卡片圆角 | `20px` | SaaS 产品偏爱的友好大圆角 | -| 卡片阴影 | `0 8px 32px rgba(148,163,184,0.15)` | 柔和的悬浮阴影 | -| 卡片宽度 | `420px` | 适中宽度，聚焦表单 | -| 卡片内边距 | `48px 40px` | 宽裕的内部空间 | -| 顶部品牌区 | `40px` 圆角矩形图标 + "SQL-Platform" | 清晰的身份标识 | -| 品牌图标背景 | `from #0ea5e9 to #2563eb` | 天蓝到蓝的渐变，呼应云端主题 | -| 副标题 | "数据库变更管理平台"，`14px`，`#64748b` | 产品定位说明 | -| 输入框背景 | `#f8fafc` | 极浅灰底，区别于卡片白 | -| 输入框圆角 | `12px` | 圆角输入，友好感 | -| 输入框边框 | 默认无边框，聚焦 `1px solid #3b82f6` | 最小化视觉噪音 | -| 输入框高度 | `46px` | 略大于标准，易于点击 | -| 按钮渐变 | `from #0ea5e9 to #2563eb` | 天空蓝到标准蓝 | -| 按钮圆角 | `12px` | 与输入框统一 | -| 按钮高度 | `46px` | 与输入框等高对齐 | -| 分隔线 | "或使用以下方式登录"，`13px`，`#94a3b8` | 经典的 SSO 分隔 | -| SSO 图标 | 企业微信/钉钉/飞书，`40px` 圆形按钮 | 图标化登录选项 | -| SSO 按钮背景 | `#f1f5f9`，hover `#e2e8f0` | 灰色底，不与主按钮竞争 | - -#### 动效规范 - -**卡片入场**：从上方轻柔落下，同时伴随微妙的缩放——`opacity 0→1`、`translateY(-16px)→0`、`scale(0.98)→1`，`500ms cubic-bezier(0.34, 1.56, 0.64, 1)`。使用弹性缓动函数（overshoot easing），营造 SaaS 产品特有的"活泼弹动感"。 - -**输入框聚焦**：无边框输入框在聚焦时，背景色从 `#f8fafc` 微妙提亮至 `#ffffff`，同时蓝色边框从 `opacity 0` 渐显至 `opacity 1`，过渡 `150ms ease`。 - -**按钮 Hover**：`translateY(-2px)` 上浮，`box-shadow` 增强，同时渐变产生微妙的位置偏移（使用 `background-position` 动画），`200ms ease`。 - -**SSO 图标 Hover**：圆形背景从 `#f1f5f9` 变为 `#e2e8f0`，图标 `scale(1.1)`，`150ms ease`。 - -**装饰云朵**：缓慢的水平飘移动画（`translateX(0) → translateX(20px) → translateX(0)`，`20s ease-in-out infinite`），赋予页面呼吸感。 - -#### 代码实现要点 - -1. **卡片弹性动画**：使用 Tailwind 的 `animate-in` 配合自定义 CSS keyframe 实现弹性入场。或使用 Framer Motion（如项目已引入）的 `initial/animate` props 配合 `type: "spring", stiffness: 200, damping: 15` 实现物理弹性效果。 - -2. **无边框输入框**：shadcn/ui 的 `Input` 组件默认有边框，需通过 `border-0 bg-slate-50 focus:bg-white focus:ring-1 focus:ring-blue-500` 覆盖样式。 - -3. **SSO 按钮组**：使用 Flex 布局 `flex gap-3 justify-center`，每个 SSO 按钮为 `button` 元素包裹品牌 SVG 图标。考虑到不同企业的 SSO 需求，SSO 区域应封装为 `SSOProviders` 组件，通过配置数组动态渲染。 - -4. **云朵装饰**：将云朵 SVG 设为 `position: absolute; top: -50px; right: -30px; pointer-events: none;`，确保不影响交互。 - ---- - -### 3.4 方案四「极简矩阵」— 开发者极客风 - -#### 设计概念与灵感来源 - -对于面向开发者的工具平台，过于" polished "的设计反而可能显得不够硬核。「极简矩阵」方案致敬了《黑客帝国》的数字雨（Matrix Rain）以及终端命令行的纯粹美学，将登录页转化为一个"进入系统"的仪式。纯黑背景上绿色字符如雨般落下，输入框如同终端命令行，每一个交互细节都在告诉用户："这是一个为技术人员打造的严肃工具。" - -#### 适用场景 - -技术团队、开发者工具、DevOps 平台、开源项目、CLI/GUI 混合产品。用户群体是开发者、SRE、运维工程师，他们对终端界面有亲切感，极客风格的 UI 反而能唤起"同道中人"的认同感。 - -#### 视觉规范 - -| 元素 | 规范值 | 说明 | -|------|--------|------| -| 背景色 | `#000000` 纯黑 | 终端/命令行的经典底色 | -| 字符雨颜色 | `#22c55e`（绿色），`#16a34a`（深绿） | 双色调绿色增加层次 | -| 字符集 | 大小写字母 + 数字 + 日文片假名 | Matrix 经典字符集 | -| 字符密度 | 比原版 Matrix 减少 40% | 不过度干扰登录表单的可读性 | -| 字符下落速度 | 2~6 px/frame 随机 | 自然的不规则雨效 | -| 卡片背景 | `rgba(0,0,0,0.85)` | 高透明度黑底，字符隐约可见 | -| 卡片边框 | `1px solid rgba(34,197,94,0.3)` | 绿色发光边框，终端窗口感 | -| 卡片圆角 | `4px` | 极小圆角，锐利的技术感 | -| 标题字体 | `JetBrains Mono`，`22px`，`#22c55e` | 等宽字体是终端的灵魂 | -| 标题文字 | `> sql-platform login` | 命令行风格的标题 | -| 副标题 | "请输入您的凭据以继续"，`13px`，`#4ade80` | 浅绿说明文字 | -| 输入框背景 | `#0a0a0a` | 深黑，区别于卡片 | -| 输入框边框 | `1px solid rgba(34,197,94,0.25)` | 微弱绿边 | -| 输入框圆角 | `4px` | 锐利 | -| 输入框字体 | `JetBrains Mono`，`14px` | 打字机般的输入体验 | -| 输入框文字色 | `#22c55e` | 绿色输入文字 | -| Placeholder | `#374151`（深灰）| 低调提示 | -| 输入框聚焦 | 边框变为 `rgba(34,197,94,0.6)` | 明亮的绿色边框 | -| 按钮背景 | `#22c55e` | 醒目绿色 | -| 按钮文字 | `#000000`，`JetBrains Mono`，字重 600 | 黑底绿字，高对比 | -| 按钮圆角 | `4px` | 锐利风格统一 | -| 光标 | 自定义绿色闪烁光标 | `2px` 宽竖线，每 `530ms` 闪烁 | -| 底部版本号 | "v2.4.1 — build 20240815"，`11px`，`#374151` | 开发者熟悉的版本信息 | - -#### 动效规范 - -**字符雨动画**：使用 Canvas 2D 实现。初始化多列字符，每列以随机速度向下滚动。每个字符有随机的生命周期——新字符高亮（`#4ade80`），旧字符渐暗（`#15803d` → `#166534`），超出画布底部后重置到顶部。字符雨在登录卡片后方运行，使用 `z-index` 分层。 - -**卡片入场**：模拟终端启动——先显示 `> sql-platform login_`（带闪烁光标），停顿 `300ms` 后表单元素逐行"打印"出现。每个元素使用 `opacity 0→1`，间隔 `80ms`，模拟打字机效果。 - -**输入框聚焦**：边框绿色亮度提升（`opacity 0.25 → 0.6`），同时产生微弱的绿色外发光 `0 0 8px rgba(34,197,94,0.15)`，`150ms ease`。 - -**按钮 Hover**：背景色从 `#22c55e` 变为 `#4ade80`（更亮），同时按钮产生 `box-shadow: 0 0 16px rgba(34,197,94,0.3)` 绿光晕染，`150ms ease`。 - -**光标闪烁**： -```css -@keyframes blink { - 0%, 49% { opacity: 1; } - 50%, 100% { opacity: 0; } -} -/* animation: blink 1.06s step-end infinite */ -``` -使用 `step-end` 时序函数实现硬切闪烁，更接近真实终端光标。 - -**错误状态**：终端风格的错误提示——输入框边框变为 `#ef4444`，下方显示红色文字 `[ERROR] 用户名或密码不正确`，字体 `JetBrains Mono`，`12px`。无 shake 动画，用冷静的错误信息替代。 - -#### 代码实现要点 - -1. **字符雨 Canvas**：独立的 `MatrixRain.tsx` 组件。核心逻辑：创建 `columns` 数组，每列跟踪当前字符和 y 坐标。在 `requestAnimationFrame` 循环中，以半透明黑色 (`rgba(0,0,0,0.05)`) 覆盖画布而非完全清除，形成字符拖尾效果。字符从预定义字符集中随机选取。 - -2. **等宽字体**：通过 Google Fonts 或本地引入 JetBrains Mono。Tailwind 配置中添加 `fontFamily: { mono: ['JetBrains Mono', 'monospace'] }`。 - -3. **打字机入场**：使用自定义 hook `useTypewriterEffect`，控制子元素依次显示。或直接使用 `setTimeout` 链实现简单的延迟序列。 - -4. **终端光标**：使用一个 `span` 元素（`w-[2px] h-[1.2em] bg-green-500 inline-block`）配合 CSS 动画实现闪烁。可封装为 `TerminalCursor` 小组件。 - -5. **密码输入**：密码框仍使用 `type="password"`，但自定义样式使圆点/星号也呈现绿色（通过 `color: #22c55e` 和 `caret-color: #22c55e`）。 - ---- - -### 3.5 方案五「自然流动」— 有机渐变自然风 - -#### 设计概念与灵感来源 - -并非所有企业都喜欢冷峻的科技风。「自然流动」方案面向创意公司、设计团队和文化企业，从自然界的极光、晨曦、水波中汲取配色灵感。三个巨大的模糊色块在背景中缓慢漂移、交叠，产生不断变化的有机渐变——这种"活着的"背景打破了登录页的单调，将等待时间转化为一种视觉享受。设计参考了 Linear、Arc Browser 等产品的有机渐变美学，以及 Blobs 设计趋势。 - -#### 适用场景 - -创意设计公司、数字营销机构、文化传媒企业、生活方式品牌、内部创意工具。用户群体包括设计师、创意总监、市场人员，他们对视觉美感有较高要求，偏好温暖、有情感的界面。 - -#### 视觉规范 - -| 元素 | 规范值 | 说明 | -|------|--------|------| -| 背景底色 | `#0f0e1a` | 深紫黑，衬托前景彩色光晕 | -| 渐变圆 1 | `#f472b6`（粉色），直径 `600px`，blur `120px` | 左上区域 | -| 渐变圆 2 | `#a78bfa`（紫色），直径 `500px`，blur `120px` | 右侧中部 | -| 渐变圆 3 | `#60a5fa`（蓝色），直径 `550px`，blur `120px` | 底部中央 | -| 模糊方式 | CSS `filter: blur(120px)` 或 SVG `feGaussianBlur` | 产生柔和的色块融合 | -| 卡片背景 | `rgba(255,255,255,0.1)` | 半透明白 | -| 卡片毛玻璃 | `backdrop-blur: 24px` | 更强的模糊，突出背后的色彩流动 | -| 卡片圆角 | `24px` | 有机的大圆角 | -| 卡片边框 | `1px solid rgba(255,255,255,0.15)` | 半透明白色边框 | -| 卡片内边距 | `48px 40px` | 宽裕的空间 | -| 品牌图标 | `64px` 大圆角矩形，`border-radius: 20px` | 渐变背景 `from #f472b6 to #a78bfa` | -| 品牌名 | "DataGuard"，`22px`，白色，字重 600 | 居中展示 | -| 品牌标语 | "数据之美，流动不息"，`14px`，`rgba(255,255,255,0.6)` | 诗意化标语 | -| 输入框背景 | `rgba(255,255,255,0.08)` | 毛玻璃输入 | -| 输入框边框 | `1px solid rgba(255,255,255,0.12)` | 微妙的边框 | -| 输入框圆角 | `14px` | 圆润 | -| 输入框高度 | `46px` | 舒适点击高度 | -| 输入框文字 | 白色，`rgba(255,255,255,0.9)` | 高对比度 | -| 输入框聚焦 | 边框变为 `rgba(255,255,255,0.4)` | 白色高亮 | -| 按钮背景 | `#ffffff` | 白色主按钮 | -| 按钮文字 | `#0f0e1a`，字重 600 | 深色文字 | -| 按钮圆角 | `12px` | 现代圆角 | -| 按钮高度 | `46px` | 与输入框等高 | -| 卡片外光晕 | `box-shadow: 0 0 80px rgba(167,139,250,0.15)` | 微妙的紫色光晕包裹卡片 | - -#### 动效规范 - -**渐变圆漂移**：三个彩色模糊圆以不同的速度和轨迹缓慢移动，形成不断变化的背景： -- 粉圆：`translate` 在 `(0,0) → (30px,-20px) → (-20px,30px) → (0,0)` 之间循环，`15s ease-in-out infinite` -- 紫圆：`translate` 在 `(0,0) → (-25px,25px) → (20px,-15px) → (0,0)`，`18s ease-in-out infinite` -- 蓝圆：`translate` 在 `(0,0) → (20px,20px) → (-30px,-10px) → (0,0)`，`12s ease-in-out infinite` - -三个圆的运动周期互质（15s/18s/12s），确保组合图案永不重复。 - -**卡片入场**：`opacity 0→1`、`translateY(24px)→0`、`scale(0.96)→1`，`700ms cubic-bezier(0.22, 1, 0.36, 1)`。较长的时间和柔和的缓动，配合背景的流动感，营造"浮出水面"的诗意体验。 - -**输入框聚焦**：边框透明度提升，同时产生微弱的白色外发光 `0 0 0 3px rgba(255,255,255,0.08)`，`200ms ease`。 - -**按钮 Hover**：`scale(1.02)` 微放大（而非上移，更柔和），`box-shadow` 增强为 `0 8px 24px rgba(255,255,255,0.2)`，过渡 `200ms ease`。白色按钮在暗色背景下产生"发光"效果。 - -**光晕脉动**：卡片外层的紫色光晕以 `4s ease-in-out infinite` 的节奏在 `opacity 0.1 ↔ 0.2` 之间呼吸，赋予页面生命力。 - -#### 代码实现要点 - -1. **SVG 渐变网格**：使用绝对定位的 `div` 元素包裹三个 `div`（每个设置 `border-radius: 50%`、`filter: blur(120px)`、对应背景色），通过 CSS `@keyframes` 分别控制 `transform` 动画。或使用 SVG `` 配合 `` 实现同样的模糊色块效果。 - -2. **强毛玻璃卡片**：`backdrop-blur-2xl bg-white/10 border border-white/15 rounded-3xl shadow-[0_0_80px_rgba(167,139,250,0.15)]`。注意 `backdrop-blur` 需要浏览器支持，可考虑添加 `-webkit-backdrop-blur` 前缀。 - -3. **白色主按钮**：在深色背景下，白色按钮天然具有高对比度。Hover 效果避免使用 `translateY`（上移动效偏科技感），改用 `scale(1.02)`（更柔和、有机）。 - -4. **性能优化**：`blur(120px)` 大模糊是 GPU 密集型操作。建议使用 `will-change: transform` 提示浏览器优化，同时确保动画元素使用 `transform` 而非 `top/left` 属性。在低性能设备上可通过 `@media (prefers-reduced-motion: reduce)` 关闭背景动画。 - ---- - -### 3.6 各方案组件设计要点（对比表） - -| 设计维度 | 方案一「极光科技」 | 方案二「企业金融」 | 方案三「云端数据」 | 方案四「极简矩阵」 | 方案五「自然流动」 | -|:---------|:------------------|:------------------|:------------------|:------------------|:------------------| -| **布局结构** | 居中卡片 + 全屏粒子背景 | 左右分屏 60:40 | 居中卡片 + 浅色背景 | 居中卡片 + 全屏字符雨 | 居中卡片 + 动态渐变背景 | -| **背景实现** | Canvas 2D 粒子系统 | CSS 渐变 + 纯色分割 | CSS 渐变 + SVG 装饰 | Canvas 2D Matrix Rain | SVG/CSS 模糊渐变圆 | -| **卡片材质** | 毛玻璃 `backdrop-blur: 20px` | 纯白实色 | 纯白实色 | 半透明黑 `rgba(0,0,0,0.85)` | 强毛玻璃 `backdrop-blur: 24px` | -| **卡片圆角** | `16px` | `16px` | `20px` | `4px`（锐利） | `24px`（最大） | -| **卡片边框** | `1px solid rgba(255,255,255,0.08)` | 无 | 无 | `1px solid rgba(34,197,94,0.3)` | `1px solid rgba(255,255,255,0.15)` | -| **主色调** | 蓝 `#2563eb` + 紫 `#7c3aed` | 深蓝 `#1a365d` | 天蓝 `#0ea5e9` | 绿 `#22c55e` | 粉 `#f472b6` + 紫 `#a78bfa` + 蓝 `#60a5fa` | -| **背景色** | `#0a0e27` → `#1a1f4b` | 左 `#0c1a3c` 右 `#f8fafc` | `#f0f4f8` → `#e2e8f0` | `#000000` | `#0f0e1a` | -| **输入框样式** | 标准边框式 | 底部底线式 | 无边框 + 灰底 | 等宽字体 + 绿边框 | 毛玻璃半透明 | -| **按钮样式** | 渐变蓝紫 | 纯色深蓝 | 渐变天蓝 | 纯色绿 | 纯白 | -| **按钮圆角** | `10px` | `8px` | `12px` | `4px` | `12px` | -| **字体选择** | 系统默认 sans-serif | 系统默认 sans-serif | 系统默认 sans-serif | JetBrains Mono 等宽 | 系统默认 sans-serif | -| **SSO 支持** | 无 | 无 | 有（企业微信/钉钉/飞书） | 无 | 无 | -| **安全标识** | Shield 图标暗示 | SSL/权限/审计 明确列出 | 无 | 版本号信息 | 无 | -| **品牌展示** | 渐变圆 + Shield 图标 | 左侧大面积品牌区 | 顶部品牌图标 | 终端命令行风格 | 大圆角渐变图标 | -| **移动端适配** | 卡片全宽 + 边距 | 上下布局折叠 | 卡片全宽 | 卡片全宽 | 卡片全宽 | - -### 3.7 各方案动效设计规范（汇总表） - -| 动效维度 | 方案一「极光科技」 | 方案二「企业金融」 | 方案三「云端数据」 | 方案四「极简矩阵」 | 方案五「自然流动」 | -|:---------|:------------------|:------------------|:------------------|:------------------|:------------------| -| **背景动画** | 粒子连线 60fps | 无 | 云朵缓慢水平漂移 | 字符雨下落 | 三圆渐变漂移 | -| **入场动画** | 卡片淡入+上移 `600ms` | 左右滑入 `400ms` | 弹性下落 `500ms` | 打字机逐行 `80ms/行` | 柔和浮现 `700ms` | -| **入场缓动** | `cubic-bezier(0.16,1,0.3,1)` | `ease-out` | `cubic-bezier(0.34,1.56,0.64,1)` | `step-end` 风格 | `cubic-bezier(0.22,1,0.36,1)` | -| **输入框聚焦** | 蓝边框+光晕 `200ms` | 底线延展 `200ms` | 背景提亮+边框渐显 `150ms` | 绿边框亮度提升 `150ms` | 白边框透明度提升 `200ms` | -| **按钮 Hover** | 上移 `1px` + 阴影增强 | 背景加深 + 阴影 | 上移 `2px` + 渐变偏移 | 绿光晕染 + 背景变亮 | 缩放 `1.02` + 白影 | -| **错误反馈** | Shake 抖动 `300ms` | 边框变红 + 提示文字 | 边框变红 + 弹性抖动 | 红色终端错误信息 | 边框变红 + 光晕转红 | -| **特殊交互** | 鼠标粒子引力 | 信任指标依次淡入 | SSO 图标放大 | 光标闪烁 | 光晕呼吸脉动 | -| **动画性能** | `requestAnimationFrame` | CSS 过渡 | CSS 过渡/Framer Motion | `requestAnimationFrame` | CSS `transform` + `will-change` | -| **减弱动效** | 保留静态粒子 | 无需处理 | 保留静态布局 | 保留静态字符背景 | 保留静态模糊色块 | - ---- - -#### 方案选型建议 - -五套方案并非"五选一"的关系，而是为不同的部署场景提供针对性选择： - -- **对外技术产品**（如数据库管理工具、开发者平台）→ 方案一「极光科技」或方案四「极简矩阵」 -- **金融/政企客户私有化部署** → 方案二「企业金融」 -- **SaaS 订阅产品/云端服务** → 方案三「云端数据」 -- **创意团队/设计公司内部系统** → 方案五「自然流动」 - -建议在系统设置中提供登录页主题切换功能，允许管理员根据企业 VI 选择合适的方案，或在不同的子域名/入口自动匹配不同风格（如 `dev.dataguard.com` 使用极客风，`finance.dataguard.com` 使用金融风）。所有方案共享 `useLogin` 和 `useTheme` hook，切换主题仅涉及 UI 层组件的替换，业务逻辑零改动。 -## 4. 五套登录后主题设计方案 - -为满足不同用户群体在不同使用场景下的视觉偏好，本章为 SQL-Platform 设计五套完整的登录后主题方案。每套主题均包含完整的 CSS 变量规范、色彩心理学依据及典型应用场景说明。五套主题涵盖从专业沉稳到活力温暖的全方位视觉谱系，确保平台在各类企业环境中都能提供最佳的用户体验。 - ---- - -### 4.1 主题一「深蓝专业」— 默认深色增强版 - -**设计定位**：深蓝专业主题是在现有深色主题基础上的全面增强版本，定位为平台的默认主题。设计目标是在保持深色模式优势（降低眼部疲劳、突出内容）的同时，通过更纯正深邃的蓝色调提升整体品质感，并强化视觉层次与可读性。 - -**色彩设计理念**：该主题摒弃了原主题中偏灰的杂色倾向，将背景色收敛到更纯正的深蓝谱系。主背景色 `#070d19` 接近纯黑但带有微弱的蓝色相，营造出深邃而稳定的基底。次背景色 `#0f172a` 参考了 Slate 色板中最深沉的蓝色调，既保证了与主背景的层次区分，又维持了蓝色谱系的纯粹性。文字色彩采用 `#f8fafc`（极亮蓝白）作为主文字色，相比纯白色更具温润感，长时间阅读不易产生刺眼感。次文字色 `#94a3b8` 提供了充分的对比度，确保辅助信息的可读性。 - -**强调色体系**：蓝色系强调色选用 `#3b82f6`（Tailwind Blue 500），这是一个饱和度适中、辨识度高的蓝色，在深色背景上呈现明亮但不刺眼的视觉效果。状态色（成功、错误、警告）均经过深色背景适配，确保各色彩在深蓝底上都有足够的明度对比。 - -**适用场景**：作为默认主题，适用于绝大多数使用场景，特别适合技术团队日常操作、数据库管理、权限配置等需要长时间专注的工作界面。 - -```css -/* === 主题一：深蓝专业 ocean-deep === */ -[data-theme="ocean-deep"] { - /* shadcn/ui 基础变量 */ - --background: 222 47% 4%; - --foreground: 210 40% 98%; - --card: 222 47% 7%; - --card-foreground: 210 40% 98%; - --popover: 222 47% 7%; - --popover-foreground: 210 40% 98%; - --primary: 217 91% 60%; - --primary-foreground: 0 0% 100%; - --secondary: 217 33% 17%; - --secondary-foreground: 210 40% 98%; - --muted: 217 33% 17%; - --muted-foreground: 215 20% 65%; - --accent: 217 33% 17%; - --accent-foreground: 210 40% 98%; - --destructive: 0 84% 60%; - --destructive-foreground: 0 0% 100%; - --border: 217 33% 17%; - --input: 217 33% 17%; - --ring: 217 91% 60%; - --radius: 0.5rem; - - /* DataGuard 自定义变量 */ - --dg-bg-primary: #070d19; - --dg-bg-secondary: #0f172a; - --dg-bg-tertiary: #172033; - --dg-bg-hover: #233049; - --dg-border: #1e293b; - --dg-border-light: #172033; - --dg-text-primary: #f8fafc; - --dg-text-secondary: #94a3b8; - --dg-text-muted: #64748b; - --dg-blue: #3b82f6; - --dg-green: #22c55e; - --dg-red: #ef4444; - --dg-orange: #f97316; - --dg-purple: #8b5cf6; - --dg-cyan: #06b6d4; - --dg-yellow: #eab308; - --dg-gradient-start: #3b82f6; - --dg-gradient-end: #2563eb; -} -``` - ---- - -### 4.2 主题二「浅色商务」— 企业办公风 - -**设计定位**：浅色商务主题面向白天办公环境优化，采用温暖的灰白色调替代常见的冷白背景，营造舒适、专业且不刺眼的工作界面。该主题适合不习惯深色模式的用户，或在明亮办公室环境中使用。 - -**色彩设计理念**：背景色摒弃了纯白的冷峻感，主背景色 `#fafaf9` 选用带有微弱暖色相的" zinc white"，在显示器上呈现柔和的纸质感。次背景色 `#f5f5f4` 和三级背景色 `#e7e5e4` 构成自然的层次递进，避免了传统浅色主题中背景层次过于平淡的问题。边框色 `#d6d3d1` 同样带有暖色调，使界面分割更加自然和谐。文字色彩方面，主文字色 `#1c1917` 是带有微弱棕色相的深黑色，相比纯黑在暖白背景上对比度更舒适，避免了"黑字白纸"的刺眼感。 - -**强调色体系**：强调色选用稳重的 `#2563eb`（Tailwind Blue 600），这是一个偏深的标准蓝色，传达专业、可信赖的企业形象。状态色均调整为适合浅色背景的版本，成功绿 `#16a34a`、错误红 `#dc2626`、警告橙 `#ca8a04` 在浅色背景上均保持良好的可读性。 - -**适用场景**：适合白天办公环境、管理人员日常审批查看、客户演示投屏等场景。浅色界面在投影设备上的显示效果通常优于深色界面，因此该主题也是会议室演示的首选。 - -```css -/* === 主题二：浅色商务 light-professional === */ -[data-theme="light-professional"] { - /* shadcn/ui 基础变量 */ - --background: 40 9% 98%; - --foreground: 24 10% 10%; - --card: 40 9% 96%; - --card-foreground: 24 10% 10%; - --popover: 40 9% 96%; - --popover-foreground: 24 10% 10%; - --primary: 221 83% 53%; - --primary-foreground: 0 0% 100%; - --secondary: 40 6% 90%; - --secondary-foreground: 24 10% 10%; - --muted: 40 6% 90%; - --muted-foreground: 25 5% 45%; - --accent: 40 6% 90%; - --accent-foreground: 24 10% 10%; - --destructive: 0 72% 51%; - --destructive-foreground: 0 0% 100%; - --border: 24 6% 83%; - --input: 24 6% 83%; - --ring: 221 83% 53%; - --radius: 0.5rem; - - /* DataGuard 自定义变量 */ - --dg-bg-primary: #fafaf9; - --dg-bg-secondary: #f5f5f4; - --dg-bg-tertiary: #e7e5e4; - --dg-bg-hover: #d6d3d1; - --dg-border: #d6d3d1; - --dg-border-light: #e7e5e4; - --dg-text-primary: #1c1917; - --dg-text-secondary: #78716c; - --dg-text-muted: #a8a29e; - --dg-blue: #2563eb; - --dg-green: #16a34a; - --dg-red: #dc2626; - --dg-orange: #ea580c; - --dg-purple: #7c3aed; - --dg-cyan: #0891b2; - --dg-yellow: #ca8a04; - --dg-gradient-start: #2563eb; - --dg-gradient-end: #4f46e5; -} -``` - ---- - -### 4.3 主题三「午夜紫韵」— 高端紫色调 - -**设计定位**：午夜紫韵主题以深紫黑色为基底，搭配明亮的紫色渐变强调色，营造高端、神秘且富有科技感的视觉氛围。该主题适合作为给客户演示时的展示主题，能够传达产品的技术领先性和品质感。 - -**色彩设计理念**：主背景色 `#0a0612` 是带有明显紫色相的极深色，接近"午夜黑"的概念，为整个界面奠定了神秘而高贵的基调。次背景色 `#130c21` 和三级背景色 `#1c1330` 沿紫色谱系逐步提亮，形成清晰的层次结构。悬停背景色 `#2d1f4a` 是一个中等深度的紫色，在交互时能够产生明显的视觉反馈，同时保持整体色调的一致性。文字色彩方面，主文字色 `#faf5ff` 带有微弱的紫色调，使文字在深色背景上更加柔和雅致。 - -**强调色体系**：该主题的核心亮点在于紫色渐变强调体系。渐变起点 `#9333ea`（Tailwind Purple 600）到渐变终点 `#c084fc`（Tailwind Purple 400）构成了一段明亮且富有活力的紫色渐变，用于品牌标识、主要按钮和重要数据高亮。蓝色调整为偏紫的靛蓝色 `#818cf8`，绿色调整为翠绿色 `#34d399`，红色调整为玫红色 `#fb7185`，所有状态色都经过紫色调环境的协调适配。 - -**适用场景**：产品发布会演示、客户汇报展示、高端企业部署、技术峰会展台等需要彰显产品品质的正式场合。 - -```css -/* === 主题三：午夜紫韵 midnight-purple === */ -[data-theme="midnight-purple"] { - /* shadcn/ui 基础变量 */ - --background: 264 56% 4%; - --foreground: 280 100% 98%; - --card: 264 48% 8%; - --card-foreground: 280 100% 98%; - --popover: 264 48% 8%; - --popover-foreground: 280 100% 98%; - --primary: 270 91% 65%; - --primary-foreground: 0 0% 100%; - --secondary: 264 40% 20%; - --secondary-foreground: 280 100% 98%; - --muted: 264 40% 20%; - --muted-foreground: 280 30% 60%; - --accent: 264 40% 20%; - --accent-foreground: 280 100% 98%; - --destructive: 348 100% 72%; - --destructive-foreground: 264 56% 4%; - --border: 264 40% 20%; - --input: 264 40% 20%; - --ring: 270 91% 65%; - --radius: 0.5rem; - - /* DataGuard 自定义变量 */ - --dg-bg-primary: #0a0612; - --dg-bg-secondary: #130c21; - --dg-bg-tertiary: #1c1330; - --dg-bg-hover: #2d1f4a; - --dg-border: #2d1f4a; - --dg-border-light: #1c1330; - --dg-text-primary: #faf5ff; - --dg-text-secondary: #b794c7; - --dg-text-muted: #7c5a8a; - --dg-blue: #818cf8; - --dg-green: #34d399; - --dg-red: #fb7185; - --dg-orange: #fb923c; - --dg-purple: #c084fc; - --dg-cyan: #22d3ee; - --dg-yellow: #facc15; - --dg-gradient-start: #9333ea; - --dg-gradient-end: #c084fc; -} -``` - ---- - -### 4.4 主题四「松绿自然」— 护眼绿调 - -**设计定位**：松绿自然主题面向长时间使用平台的开发团队设计，以墨绿色为基调，利用绿色光谱对人眼最为友好的特性，最大程度降低长时间注视屏幕带来的视觉疲劳。 - -**色彩设计理念**：该主题的核心设计原则是"护眼优先"。主背景色 `#0a1210` 是带有明显绿色相的极深色，类似深夜松林深处的颜色，极低明度确保了基础视觉负荷的最小化。次背景色 `#111f1a`（深墨绿）和三级背景色 `#192c24`（墨绿灰）沿绿色谱系递进，在保持低明度的同时构建清晰的视觉层次。悬停背景色 `#253d32` 选用了中等深度的松绿色，交互时呈现自然、柔和的状态变化。边框色 `#253d32` 与悬停色共用，确保交互反馈与界面分割的视觉统一。主文字色 `#f0fdf4` 是极淡的薄荷白，在墨绿背景上明亮而不刺眼，具有极佳的阅读舒适度。 - -**强调色体系**：绿色系强调色选用 `#4ade80`（Tailwind Green 400），这是一个明亮、清新的绿色，在墨绿暗底上如同松针上的晨露般醒目。信息色 `#2dd4bf` 偏向青绿色，与主色调完美协调。蓝色调整为天蓝色 `#38bdf8`，在绿调环境中起到色彩平衡的作用，避免界面过于单调。 - -**适用场景**：开发团队日常长时间使用、DBA 持续监控数据库状态、运维人员驻屏值班等需要长时间面对屏幕的工作场景。 - -```css -/* === 主题四：松绿自然 pine-green === */ -[data-theme="pine-green"] { - /* shadcn/ui 基础变量 */ - --background: 150 25% 5%; - --foreground: 140 60% 97%; - --card: 150 25% 9%; - --card-foreground: 140 60% 97%; - --popover: 150 25% 9%; - --popover-foreground: 140 60% 97%; - --primary: 142 71% 45%; - --primary-foreground: 150 25% 5%; - --secondary: 150 20% 18%; - --secondary-foreground: 140 60% 97%; - --muted: 150 20% 18%; - --muted-foreground: 150 20% 55%; - --accent: 150 20% 18%; - --accent-foreground: 140 60% 97%; - --destructive: 0 90% 72%; - --destructive-foreground: 150 25% 5%; - --border: 150 20% 18%; - --input: 150 20% 18%; - --ring: 142 71% 45%; - --radius: 0.5rem; - - /* DataGuard 自定义变量 */ - --dg-bg-primary: #0a1210; - --dg-bg-secondary: #111f1a; - --dg-bg-tertiary: #192c24; - --dg-bg-hover: #253d32; - --dg-border: #253d32; - --dg-border-light: #192c24; - --dg-text-primary: #f0fdf4; - --dg-text-secondary: #86b8a0; - --dg-text-muted: #5a7c6b; - --dg-blue: #38bdf8; - --dg-green: #4ade80; - --dg-red: #f87171; - --dg-orange: #fb923c; - --dg-purple: #c084fc; - --dg-cyan: #2dd4bf; - --dg-yellow: #facc15; - --dg-gradient-start: #059669; - --dg-gradient-end: #10b981; -} -``` - ---- - -### 4.5 主题五「橙光活力」— 活力暖色调 - -**设计定位**：橙光活力主题以深棕暗橙为基底，搭配明亮的橙色渐变，传递温暖、积极、富有活力的品牌情绪。该主题面向年轻化团队和创新型企业，打破传统数据安全平台冰冷刻板的印象。 - -**色彩设计理念**：主背景色 `#110d08` 是带有明显棕色相的极深色，类似深烘焙咖啡豆的颜色，温暖而沉稳。次背景色 `#1d1610` 和三级背景色 `#2b1f16` 沿棕色谱系递进，营造出如同暖色调咖啡馆般的舒适感。悬停背景色 `#3d2d20` 是一个中等深度的暖棕色，交互反馈如同木材被温暖光线照亮。文字色彩方面，主文字色 `#fef7ed` 是极淡的暖白色，如同烛光下的纸张，在暗棕底上既明亮又温暖。 - -**强调色体系**：核心渐变从 `#ea580c`（Tailwind Orange 600）到 `#f59e0b`（Tailwind Amber 500），这是一段充满能量感的橙黄渐变，用于重要按钮、品牌标识和数据高亮时极具视觉冲击力。蓝色调整为柔和的 `#60a5fa`，在暖色调环境中起到中和平衡的作用。紫色调整为偏暖的 `#a78bfa`，与整体暖调和谐共存。 - -**适用场景**：互联网创业公司、年轻化的技术团队、创意型企业、产品内部分享会等追求活力与创新氛围的使用场景。 - -```css -/* === 主题五：橙光活力 orange-vitality === */ -[data-theme="orange-vitality"] { - /* shadcn/ui 基础变量 */ - --background: 30 35% 5%; - --foreground: 30 100% 97%; - --card: 30 30% 9%; - --card-foreground: 30 100% 97%; - --popover: 30 30% 9%; - --popover-foreground: 30 100% 97%; - --primary: 25 95% 53%; - --primary-foreground: 0 0% 100%; - --secondary: 30 25% 18%; - --secondary-foreground: 30 100% 97%; - --muted: 30 25% 18%; - --muted-foreground: 30 25% 55%; - --accent: 30 25% 18%; - --accent-foreground: 30 100% 97%; - --destructive: 0 80% 70%; - --destructive-foreground: 30 35% 5%; - --border: 30 25% 18%; - --input: 30 25% 18%; - --ring: 25 95% 53%; - --radius: 0.5rem; - - /* DataGuard 自定义变量 */ - --dg-bg-primary: #110d08; - --dg-bg-secondary: #1d1610; - --dg-bg-tertiary: #2b1f16; - --dg-bg-hover: #3d2d20; - --dg-border: #3d2d20; - --dg-border-light: #2b1f16; - --dg-text-primary: #fef7ed; - --dg-text-secondary: #d4a574; - --dg-text-muted: #9c7a54; - --dg-blue: #60a5fa; - --dg-green: #4ade80; - --dg-red: #f87171; - --dg-orange: #fb923c; - --dg-purple: #a78bfa; - --dg-cyan: #2dd4bf; - --dg-yellow: #fcd34d; - --dg-gradient-start: #ea580c; - --dg-gradient-end: #f59e0b; -} -``` - ---- - -### 4.6 各主题 CSS 变量规范对比表 - -下表汇总了五套主题的全部 DataGuard 自定义 CSS 变量值，便于开发实现时快速查阅与对比。 - -| CSS 变量 | 深蓝专业 | 浅色商务 | 午夜紫韵 | 松绿自然 | 橙光活力 | -|:---|:---|:---|:---|:---|:---| -| `--dg-bg-primary` | `#070d19` | `#fafaf9` | `#0a0612` | `#0a1210` | `#110d08` | -| `--dg-bg-secondary` | `#0f172a` | `#f5f5f4` | `#130c21` | `#111f1a` | `#1d1610` | -| `--dg-bg-tertiary` | `#172033` | `#e7e5e4` | `#1c1330` | `#192c24` | `#2b1f16` | -| `--dg-bg-hover` | `#233049` | `#d6d3d1` | `#2d1f4a` | `#253d32` | `#3d2d20` | -| `--dg-border` | `#1e293b` | `#d6d3d1` | `#2d1f4a` | `#253d32` | `#3d2d20` | -| `--dg-border-light` | `#172033` | `#e7e5e4` | `#1c1330` | `#192c24` | `#2b1f16` | -| `--dg-text-primary` | `#f8fafc` | `#1c1917` | `#faf5ff` | `#f0fdf4` | `#fef7ed` | -| `--dg-text-secondary` | `#94a3b8` | `#78716c` | `#b794c7` | `#86b8a0` | `#d4a574` | -| `--dg-text-muted` | `#64748b` | `#a8a29e` | `#7c5a8a` | `#5a7c6b` | `#9c7a54` | -| `--dg-blue` | `#3b82f6` | `#2563eb` | `#818cf8` | `#38bdf8` | `#60a5fa` | -| `--dg-green` | `#22c55e` | `#16a34a` | `#34d399` | `#4ade80` | `#4ade80` | -| `--dg-red` | `#ef4444` | `#dc2626` | `#fb7185` | `#f87171` | `#f87171` | -| `--dg-orange` | `#f97316` | `#ea580c` | `#fb923c` | `#fb923c` | `#fb923c` | -| `--dg-purple` | `#8b5cf6` | `#7c3aed` | `#c084fc` | `#c084fc` | `#a78bfa` | -| `--dg-cyan` | `#06b6d4` | `#0891b2` | `#22d3ee` | `#2dd4bf` | `#2dd4bf` | -| `--dg-yellow` | `#eab308` | `#ca8a04` | `#facc15` | `#facc15` | `#fcd34d` | -| `--dg-gradient-start` | `#3b82f6` | `#2563eb` | `#9333ea` | `#059669` | `#ea580c` | -| `--dg-gradient-end` | `#2563eb` | `#4f46e5` | `#c084fc` | `#10b981` | `#f59e0b` | - -**shadcn/ui 基础变量对比表** - -| HSL 变量 | 深蓝专业 | 浅色商务 | 午夜紫韵 | 松绿自然 | 橙光活力 | -|:---|:---|:---|:---|:---|:---| -| `--background` | `222 47% 4%` | `40 9% 98%` | `264 56% 4%` | `150 25% 5%` | `30 35% 5%` | -| `--foreground` | `210 40% 98%` | `24 10% 10%` | `280 100% 98%` | `140 60% 97%` | `30 100% 97%` | -| `--card` | `222 47% 7%` | `40 9% 96%` | `264 48% 8%` | `150 25% 9%` | `30 30% 9%` | -| `--primary` | `217 91% 60%` | `221 83% 53%` | `270 91% 65%` | `142 71% 45%` | `25 95% 53%` | -| `--secondary` | `217 33% 17%` | `40 6% 90%` | `264 40% 20%` | `150 20% 18%` | `30 25% 18%` | -| `--muted` | `217 33% 17%` | `40 6% 90%` | `264 40% 20%` | `150 20% 18%` | `30 25% 18%` | -| `--muted-foreground` | `215 20% 65%` | `25 5% 45%` | `280 30% 60%` | `150 20% 55%` | `30 25% 55%` | -| `--destructive` | `0 84% 60%` | `0 72% 51%` | `348 100% 72%` | `0 90% 72%` | `0 80% 70%` | -| `--border` | `217 33% 17%` | `24 6% 83%` | `264 40% 20%` | `150 20% 18%` | `30 25% 18%` | -| `--ring` | `217 91% 60%` | `221 83% 53%` | `270 91% 65%` | `142 71% 45%` | `25 95% 53%` | - ---- - -### 4.7 主题切换实现方案 - -#### 4.7.1 CSS 变量组织方式 - -五套主题的 CSS 变量采用 **"分散定义、统一命名空间"** 的组织策略。每套主题的所有变量定义在一个独立的 `data-theme` 属性选择器下，避免变量冲突和覆盖混乱。 - -**文件结构建议**： - -``` -frontend/src/styles/ -├── themes/ -│ ├── index.css /* 主题入口文件，导入所有主题 */ -│ ├── ocean-deep.css /* 主题一：深蓝专业 */ -│ ├── light-professional.css /* 主题二：浅色商务 */ -│ ├── midnight-purple.css /* 主题三：午夜紫韵 */ -│ ├── pine-green.css /* 主题四：松绿自然 */ -│ └── orange-vitality.css /* 主题五：橙光活力 */ -└── index.css /* 现有主样式文件 */ -``` - -**入口文件 `themes/index.css` 内容**： - -```css -/* ===== SQL-Platform 主题系统入口 ===== */ -/* 按加载顺序：默认主题（深蓝专业）无需 data-theme 属性 */ - -@import "./ocean-deep.css"; -@import "./light-professional.css"; -@import "./midnight-purple.css"; -@import "./pine-green.css"; -@import "./orange-vitality.css"; -``` - -> **实现说明**：`ocean-deep.css` 同时提供 `:root` 级别的默认变量（确保无 `data-theme` 属性时回退到默认主题）和 `[data-theme="ocean-deep"]` 选择器下的显式定义，保证其他主题切换回来时变量能正确覆盖。 - -#### 4.7.2 useTheme Hook 增强实现 - -现有的 `useTheme` hook 需要从双值切换（dark/light）扩展为多主题选择。以下是增强后的实现方案： - -```typescript -// frontend/src/hooks/useTheme.ts -import { useState, useEffect, useCallback } from 'react'; - -/** 支持的主题标识列表 */ -export const THEMES = [ - { id: 'ocean-deep', label: '深蓝专业', description: '默认深色增强版' }, - { id: 'light-professional', label: '浅色商务', description: '企业办公风' }, - { id: 'midnight-purple', label: '午夜紫韵', description: '高端紫色调' }, - { id: 'pine-green', label: '松绿自然', description: '护眼绿调' }, - { id: 'orange-vitality', label: '橙光活力', description: '活力暖色调' }, -] as const; - -export type ThemeId = typeof THEMES[number]['id']; - -const STORAGE_KEY = 'sqlp-theme-id'; -const DEFAULT_THEME: ThemeId = 'ocean-deep'; - -/** - * 从 localStorage 读取保存的主题 - */ -function getSavedTheme(): ThemeId { - try { - const saved = localStorage.getItem(STORAGE_KEY); - if (saved && THEMES.some(t => t.id === saved)) { - return saved as ThemeId; - } - } catch { - // localStorage 不可用时忽略 - } - return DEFAULT_THEME; -} - -/** - * 检测系统色彩偏好 - */ -function getSystemPreference(): 'dark' | 'light' { - return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; -} - -/** - * 根据系统偏好映射默认主题 - */ -function getDefaultBySystem(): ThemeId { - return getSystemPreference() === 'dark' ? 'ocean-deep' : 'light-professional'; -} - -export function useTheme() { - const [theme, setThemeState] = useState(() => { - const saved = getSavedTheme(); - return saved || getDefaultBySystem(); - }); - - /** - * 切换主题的核心方法 - */ - const setTheme = useCallback((newTheme: ThemeId) => { - setThemeState(newTheme); - document.documentElement.setAttribute('data-theme', newTheme); - try { - localStorage.setItem(STORAGE_KEY, newTheme); - } catch { - // localStorage 不可用时静默处理 - } - }, []); - - /** - * 初始化主题：首次加载时应用 - */ - useEffect(() => { - const saved = getSavedTheme(); - const initial = saved || getDefaultBySystem(); - document.documentElement.setAttribute('data-theme', initial); - setThemeState(initial); - }, []); - - /** - * 监听系统主题变化，仅在用户未手动选择主题时自动切换 - */ - useEffect(() => { - const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); - const handler = (e: MediaQueryListEvent) => { - // 检查用户是否已手动设置过主题 - const hasUserPreference = localStorage.getItem(STORAGE_KEY) !== null; - if (!hasUserPreference) { - const newTheme = e.matches ? 'ocean-deep' : 'light-professional'; - setTheme(newTheme); - } - }; - mediaQuery.addEventListener('change', handler); - return () => mediaQuery.removeEventListener('change', handler); - }, [setTheme]); - - return { theme, setTheme, themes: THEMES }; -} -``` - -#### 4.7.3 主题预览组件设计 - -AppearanceSettings 页面需新增主题选择区域，包含五张主题预览卡片。每张卡片展示主题的核心色彩样本和简要描述。 - -```typescript -// frontend/src/components/settings/ThemePreviewCard.tsx -import { Check } from 'lucide-react'; -import { cn } from '@/lib/utils'; -import type { ThemeId } from '@/hooks/useTheme'; - -interface ThemePreviewCardProps { - themeId: ThemeId; - label: string; - description: string; - colors: { - bg: string; - secondary: string; - accent: string; - text: string; - }; - isActive: boolean; - onClick: () => void; -} - -export function ThemePreviewCard({ - label, - description, - colors, - isActive, - onClick, -}: ThemePreviewCardProps) { - return ( - - ); -} -``` - -**AppearanceSettings 页面中的主题选择区域布局**： - -```tsx -// 在 AppearanceSettings 页面中使用 -import { useTheme, THEMES } from '@/hooks/useTheme'; -import { ThemePreviewCard } from '@/components/settings/ThemePreviewCard'; - -// 各主题预览色值配置 -const THEME_PREVIEW_COLORS: Record = { - 'ocean-deep': { bg: '#070d19', secondary: '#0f172a', accent: '#3b82f6', text: '#f8fafc' }, - 'light-professional': { bg: '#fafaf9', secondary: '#f5f5f4', accent: '#2563eb', text: '#1c1917' }, - 'midnight-purple': { bg: '#0a0612', secondary: '#130c21', accent: '#c084fc', text: '#faf5ff' }, - 'pine-green': { bg: '#0a1210', secondary: '#111f1a', accent: '#4ade80', text: '#f0fdf4' }, - 'orange-vitality': { bg: '#110d08', secondary: '#1d1610', accent: '#fb923c', text: '#fef7ed' }, -}; - -function ThemeSelector() { - const { theme: activeTheme, setTheme } = useTheme(); - - return ( -
-

界面主题

-
- {THEMES.map((t) => ( - setTheme(t.id)} - /> - ))} -
-
- ); -} -``` - -#### 4.7.4 localStorage 持久化方案 - -主题持久化遵循以下策略： - -| 策略项 | 说明 | -|:---|:---| -| **存储键名** | `sqlp-theme-id`，与现有 `theme` 键分离，避免升级冲突 | -| **存储值** | 主题标识字符串，如 `ocean-deep`、`light-professional` | -| **回退逻辑** | 读取不到有效值时，检测 `prefers-color-scheme` 系统偏好，暗色默认 `ocean-deep`，亮色默认 `light-professional` | -| **版本兼容** | 首次升级时，若检测到旧版 `theme: "dark"` 键，自动迁移至 `ocean-deep`；`theme: "light"` 迁移至 `light-professional`，随后删除旧键 | -| **异常处理** | localStorage 不可用时（隐私模式、存储已满），降级为仅内存状态，不抛出错误 | -| **跨设备同步** | 通过 `storage` 事件监听同源其他标签页的主题变更，实现多标签页同步： | - -```typescript -/** - * 跨标签页主题同步 - */ -useEffect(() => { - const handler = (e: StorageEvent) => { - if (e.key === STORAGE_KEY && e.newValue) { - const newTheme = e.newValue as ThemeId; - if (THEMES.some(t => t.id === newTheme)) { - setThemeState(newTheme); - document.documentElement.setAttribute('data-theme', newTheme); - } - } - }; - window.addEventListener('storage', handler); - return () => window.removeEventListener('storage', handler); -}, []); -``` - -#### 4.7.5 系统主题偏好检测 - -平台需响应操作系统的 `prefers-color-scheme` 媒体查询，提供智能化的默认主题推荐。 - -**检测逻辑**： - -```typescript -// 检测系统暗色/浅色偏好 -const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; -const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches; -``` - -**偏好映射规则**： - -| 系统偏好 | 默认推荐主题 | 推荐逻辑 | -|:---|:---|:---| -| `prefers-color-scheme: dark` | **深蓝专业** (`ocean-deep`) | 暗色系统偏好用户通常偏好深色界面 | -| `prefers-color-scheme: light` | **浅色商务** (`light-professional`) | 亮色系统偏好用户通常偏好浅色界面 | -| 未指定（no-preference） | **深蓝专业** (`ocean-deep`) | 默认采用平台默认主题 | - -**动态响应机制**： - -```typescript -/** - * 系统主题偏好动态响应 - * 仅在用户未手动设置主题时自动跟随系统 - */ -useEffect(() => { - const darkQuery = window.matchMedia('(prefers-color-scheme: dark)'); - const lightQuery = window.matchMedia('(prefers-color-scheme: light)'); - - const handleChange = () => { - const hasUserPreference = localStorage.getItem(STORAGE_KEY) !== null; - if (hasUserPreference) return; // 用户已手动选择，不自动切换 - - if (darkQuery.matches) { - setTheme('ocean-deep'); - } else if (lightQuery.matches) { - setTheme('light-professional'); - } - }; - - darkQuery.addEventListener('change', handleChange); - lightQuery.addEventListener('change', handleChange); - - return () => { - darkQuery.removeEventListener('change', handleChange); - lightQuery.removeEventListener('change', handleChange); - }; -}, [setTheme]); -``` - -**重要原则**：系统偏好仅影响**首次访问**或**清除 localStorage 后**的默认主题选择。一旦用户手动选择了主题，该选择将被持久化并优先于系统偏好，避免在用户主动选择后因系统时间变化（如 macOS 自动切换暗色模式）导致界面意外变更。 - -#### 4.7.6 切换过渡动效 - -主题切换时应提供平滑的视觉过渡，避免色彩突变带来的不适感。 - -```css -/* 全局主题过渡效果 —— 添加到 index.css */ -html { - /* 对所有 CSS 变量变化应用 200ms 缓动过渡 */ - transition: background-color 200ms ease, color 200ms ease; -} - -html *, html *::before, html *::after { - /* 谨慎使用：仅对关键属性过渡，避免性能问题 */ - transition: background-color 200ms ease, - border-color 200ms ease, - color 150ms ease; -} - -/* 可选：切换瞬间的淡入效果 */ -[data-theme] { - animation: themeFadeIn 200ms ease; -} - -@keyframes themeFadeIn { - from { opacity: 0.92; } - to { opacity: 1; } -} -``` - -**性能优化建议**：全局 `*` 过渡规则可能影响大型列表渲染性能。生产环境中建议仅对需要过渡的元素添加过渡规则，或通过 JavaScript 在切换主题时临时添加过渡 class，切换完成后再移除： - -```typescript -/** - * 带过渡动画的主题切换 - */ -const setThemeWithTransition = useCallback((newTheme: ThemeId) => { - const root = document.documentElement; - root.classList.add('theme-transitioning'); - setTheme(newTheme); - // 300ms 后移除过渡 class - setTimeout(() => { - root.classList.remove('theme-transitioning'); - }, 300); -}, [setTheme]); -``` - -```css -/* 仅在切换时启用过渡 */ -html.theme-transitioning, -html.theme-transitioning * { - transition: background-color 200ms ease, - border-color 200ms ease, - color 150ms ease !important; -} -``` - -以上实现方案确保五套主题能够稳定、高效、优雅地在平台中运行，为用户提供丰富的个性化选择。 -## 5. 核心功能页面优化方案 - -本章针对 SQL-Platform 三个核心功能模块——审批变更（工单系统）、查询数据、系统设置——进行逐页拆解分析，提出可落地的 UI/UX 优化方案。每个方案均包含具体的组件选型、布局参数、交互细节与视觉规范，确保开发团队能够直接转化为实现任务。 - ---- - -### 5.1 审批变更工单系统优化 - -审批变更是平台的核心业务流，涉及工单列表、工单创建、工单详情三个主要页面。当前实现存在布局松散、信息层级不清、操作流程割裂等问题。以下按页面逐一给出优化方案。 - -#### 5.1.1 工单列表页优化 - -**组件选型与布局重构** - -将原生 `
` 全面替换为 `@tanstack/react-table` + `shadcn/ui DataTable` 组合。DataTable 内置列排序、列过滤、行选择、分页等能力，可显著减少 742 行中的手写逻辑。表格容器采用 `rounded-xl border border-border/60 bg-card` 样式，阴影参数为 `shadow-sm`。 - -**状态卡片升级** - -原状态卡片（全部/待审批/执行中/完成/失败）改为 Stats Cards。每张卡片包含：状态图标（`Lucide`）、工单数量（`text-2xl font-bold`）、环比趋势箭头（绿色上升/红色下降）、环比百分比（`text-xs text-muted-foreground`）。卡片使用 `cn()` 动态绑定激活状态的边框色——激活时边框为 `ring-2 ring-primary/40 border-primary`，未激活为 `border-transparent hover:border-border/80`。卡片网格采用 `grid grid-cols-5 gap-4`，在 < 1024px 下退化为 `grid-cols-3` + `grid-cols-2`。 - -**高级筛选栏** - -在状态卡片下方新增折叠式筛选栏，包含以下控件： - -| 筛选项 | 组件 | 说明 | -|---------|------|------| -| 实例 | `Select`（多选） | 从实例列表异步加载 | -| 数据库类型 | `Select`（多选） | MySQL/PostgreSQL/MongoDB 等 | -| 提交人 | `Input` + `Avatar` | 支持用户名/邮箱搜索 | -| 时间范围 | `DateRangePicker` | shadcn/ui 官方组件 | -| 优先级 | `ToggleGroup` | 高/中/低三态切换 | - -筛选栏默认折叠，点击"高级筛选"按钮展开，展开高度动画 `duration-300 ease-in-out`。所有筛选条件通过 URL query params 同步，支持刷新后状态保持。 - -**表格交互增强** - -- **优先级标识**：每行左侧增加 4px 宽色条，高=`bg-red-500`、中=`bg-amber-500`、低=`bg-slate-400`，使用绝对定位贴左边框。 -- **行 Hover 效果**：`hover:bg-muted/60`，同时左侧出现 `border-l-2 border-primary` 指示条，过渡 `transition-colors duration-150`。 -- **操作列优化**：将分散的查看/通过/拒绝/执行/撤销按钮收缩为图标按钮组（`Eye`, `CheckCircle`, `XCircle`, `Play`, `RotateCcw`）。当操作超过 3 个时，溢出部分收入 `DropdownMenu`。按钮使用 `variant="ghost" size="icon"`。 -- **批量操作**：顶部新增批量操作栏，选中行后出现（`AnimatePresence` 滑入），包含"批量审批"、"批量拒绝"、"导出选中"三个主操作，危险操作使用 `variant="destructive"`。 -- **列自定义**：列头右键菜单支持"隐藏此列"、"重置列宽"，列宽拖拽使用 `react-resizable` 实现，拖拽手柄 4px 宽，hover 时显示 `bg-primary/30`。 - -**搜索与分页** - -搜索框使用 `Input` + `Search` 图标，支持 `Cmd+K` 快捷键聚焦。分页组件采用 `shadcn/ui Pagination`，页码按钮尺寸 `h-9 w-9`，当前页 `bg-primary text-primary-foreground`。每页条数可选 10/25/50/100。 - ---- - -#### 5.1.2 工单创建页优化 - -**布局重构：左右分栏** - -将当前 1192 行的单栏布局改为左右分栏：左侧编辑器区占 `w-3/5`（60%），右侧辅助信息面板占 `w-2/5`（40%），中间分隔线 `border-r border-border/60`。两栏均独立滚动，避免编辑器滚动时右侧信息丢失。分栏在 < 1280px 下退化为上下堆叠布局。 - -**步骤指示器（Step Indicator）** - -在分栏顶部增加横向步骤条，共三步： - -``` -① 填写信息 ──→ ② SQL 审核 ──→ ③ 提交审批 -``` - -步骤条使用 `shadcn/ui` 风格的自定义组件。已完成步骤圆圈 `bg-primary text-primary-foreground`，当前步骤 `bg-primary ring-4 ring-primary/20`，未到达步骤 `bg-muted text-muted-foreground`。连线使用 `h-0.5 w-16`，已完成段 `bg-primary`，未完成段 `bg-border`。步骤切换允许回退（已填写内容保留），但前进需通过当前步骤的验证（如 SQL 审核必须通过才能到第三步）。 - -**左侧编辑器区** - -- **顶部工具栏**：实例选择 + 数据库选择使用 `Popover` + `Command` 组合（支持搜索筛选），定时执行使用 `Switch` + `DateTimePicker`，格式化按钮（`AlignLeft` 图标）使用 `variant="outline" size="sm"`。工具栏使用 `flex items-center gap-3 p-3 border-b border-border/60 bg-muted/30`。 -- **SQL 编辑器**：保留 CodeMirror 6，新增配置：行号显示（`lineNumbers()`）、迷你地图（`@codemirror/view showMinimap` 或自定义 SVG 缩略图）、当前行高亮（`highlightActiveLineGutter()`）。编辑器高度 `h-[480px]`，边框 `border-0`（融入容器）。 -- **SQL 模板快捷插入**：编辑器左下角增加"模板"按钮，点击弹出 `Popover`，内含分类模板列表（DDL/DML/查询），点击后 `editor.dispatch()` 插入模板 SQL。 - -**右侧辅助面板** - -- **审核结果卡片**：使用三个独立卡片分别展示 Error（`bg-red-50 border-red-200`）、Warning（`bg-amber-50 border-amber-200`）、Info（`bg-blue-50 border-blue-200`）。每张卡片包含：数量 badge（`rounded-full px-2 py-0.5 text-xs font-medium`）、发现项列表（每项包含行号、规则名、描述）、展开/折叠按钮。Error 卡片默认展开，其他折叠。 -- **变更原因输入**：将 `