rlwj-lab/opsxsql
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e6b421574df51f465c9762768f25bca88e86493e
opsxsql/SQL平台评估与优化/sql_platform_optimization_sec05.md
T
logan 746a000e8a feat: 全面UI优化 — 5套主题系统 + 设计体系 + 菜单重组 + 页面优化 
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
2026-05-27 01:59:08 +08:00

534 lines
31 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
## 5. 核心功能页面优化方案
本章针对 SQL-Platform 三个核心功能模块——审批变更（工单系统）、查询数据、系统设置——进行逐页拆解分析，提出可落地的 UI/UX 优化方案。每个方案均包含具体的组件选型、布局参数、交互细节与视觉规范，确保开发团队能够直接转化为实现任务。
---
### 5.1 审批变更工单系统优化
审批变更是平台的核心业务流，涉及工单列表、工单创建、工单详情三个主要页面。当前实现存在布局松散、信息层级不清、操作流程割裂等问题。以下按页面逐一给出优化方案。
#### 5.1.1 工单列表页优化
**组件选型与布局重构**
将原生 `<table>` 全面替换为 `@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 卡片默认展开，其他折叠。
- **变更原因输入**：将 `<textarea>` 替换为轻量级 Markdown 编辑器（`react-simplemde-editor` 或自定义实现），支持粗体、斜体、代码块、列表快捷按钮。高度 `min-h-[120px]`，占位符文本"请描述本次变更的业务原因和影响范围..."
- **工单预览**：在提交按钮左侧增加"预览"按钮，点击弹出 `Dialog`（宽 `max-w-3xl`），展示完整工单信息的只读视图，包括 SQL 摘要、变更原因、元数据。
- **自动保存草稿**：每 30 秒将表单状态序列化到 `localStorage`，键名为 `ticket_draft_${userId}`。页面加载时检测草稿，若有则提示"检测到未提交的草稿，是否恢复？"（`Toast` + 操作按钮）。提交成功后清除草稿。
---
#### 5.1.3 工单详情页优化
**头部 Hero Section**
将原头部改为 Hero Section 风格：
- 背景：`bg-gradient-to-r from-primary/5 via-primary/3 to-transparent`，底部边框 `border-b border-border/60`。
- 标题：`text-3xl font-bold tracking-tight`，状态 badge 紧跟标题右侧，badge 尺寸加大（`text-sm px-3 py-1`）。
- 元信息行：`flex gap-6 text-sm text-muted-foreground`，包含提交人（Avatar + 用户名）、提交时间（`Calendar` 图标）、实例名（`Database` 图标）、数据库（`Table` 图标）。
- 操作按钮组：头部右侧放置主操作按钮，审批通过用 `variant="default"`（`CheckCircle` 图标），拒绝用 `variant="destructive"`（`XCircle` 图标），执行用 `variant="outline"`（`Play` 图标）。操作按钮根据当前状态条件渲染（如已完成的工单不显示"通过"按钮）。
**审批流程 Timeline**
将原圆形+连线流程改为横向 Timeline：
```
[创建]──→[待审批]──→[已通过]──→[执行中]──→[已完成]
张三 李四 王五 系统 系统
10:23 14:05 16:30 16:31 16:33
```
- 节点形状：操作步骤使用圆形（`w-10 h-10 rounded-full`），判断步骤（如"审核通过？"）使用菱形（CSS `rotate(45deg)` 实现，内部图标反向旋转）。
- 当前节点：`ring-4 ring-primary/30 bg-primary text-white`，带脉冲动画（`animate-pulse` 或自定义 CSS keyframes `scale 1→1.05→1`）。
- 已完成连线：`h-0.5 bg-primary`。
- 未完成连线：`h-0.5 bg-border border-dashed`。
- 鼠标悬停节点时，弹出 `Tooltip` 显示步骤详情（操作人、时间、备注）。
**内容区域**
- **SQL 内容区**：只读编辑器上方增加工具栏，包含"复制"（`Copy` 图标，点击后图标变为 `Check` 持续 2 秒）、"下载 SQL"（`Download` 图标）、"全屏查看"（`Maximize` 图标）。
- **执行结果 Dashboard**：将原本平铺的执行结果改为 Dashboard 风格，使用 `grid grid-cols-4 gap-4` 布局：
- 执行状态：大图标 + 状态文字，成功 `text-green-600`、失败 `text-red-600`。
- 影响行数：`text-3xl font-bold` + "行" 单位。
- 执行耗时：`text-3xl font-bold` + "秒" 单位。
- 警告数：如有则显示 badge，无则显示 "-" 并置灰。
- **回滚 SQL**：使用 `Accordion` 包裹，默认折叠，类型为 `type="single" collapsible`。展开后显示只读编辑器 + 复制按钮。
- **审批意见输入**：在审批流程下方新增意见输入区，使用 `Textarea` + 提交按钮。支持 `@` 提及功能（输入 `@` 后弹出用户列表 `Popover`，使用 `Command` 组件筛选）。已提交的审批意见以评论卡片形式展示，包含 Avatar、用户名、时间、意见内容。
- **关联工单 Carousel**：将关联工单列表改为横向滚动卡片组，每张卡片显示工单标题、状态 badge、最后更新时间。使用 `scroll-snap-type: x mandatory` 实现平滑滚动，左右箭头按钮控制滚动。
- **操作日志时间轴**：左侧竖线 `w-px bg-border absolute left-4 top-0 bottom-0`，每个日志节点包含：圆点（操作类型颜色编码）、时间（`text-xs text-muted-foreground`）、操作描述、操作人 Avatar。
---
#### 5.1.4 审批流程可视化优化
**流程图实现方案**
推荐采用自定义 SVG 方案（相比 Mermaid.js 更轻量、更易定制样式）。流程图容器使用 `aspect-[16/9] max-h-[360px]`，SVG 内部使用 `<defs>` 定义箭头标记和渐变色。
**节点设计**
| 节点类型 | 形状 | 尺寸 | 颜色 |
|---------|------|------|------|
| 开始/结束 | 圆角矩形（rx=20） | 100×48px | `fill: hsl(var(--primary))` |
| 操作步骤 | 圆角矩形（rx=8） | 140×56px | `fill: hsl(var(--card)), stroke: hsl(var(--border))` |
| 判断节点 | 菱形（polygon） | 112×80px | `fill: hsl(var(--amber-50)), stroke: hsl(var(--amber-400))` |
| 当前步骤 | 任意形状 + 脉冲 | 基础尺寸 | `ring` + `animate-pulse` |
节点文本居中显示，使用 `text-sm font-medium fill-foreground`。当前步骤节点的边框使用 `stroke: hsl(var(--primary))`，线宽 `stroke-width: 2.5`，并附加 SVG `<animate>` 脉冲效果（`opacity 0.6→1→0.6`，周期 2s）。
**连线设计**
- 正常路径：`stroke: hsl(var(--primary))`，`stroke-width: 2`，带箭头标记。
- 回退路径（如"拒绝"分支）：`stroke: hsl(var(--destructive))`，`stroke-width: 2`，`stroke-dasharray: 6 3`，箭头标记颜色同步。
- 条件分支标签：连线中点放置文本标签，如"通过"/"拒绝"，使用 `text-xs fill-muted-foreground`，背景白色矩形 `fill: hsl(var(--background))` 防止线穿过文字。
- 鼠标悬停连线时，线宽动画增至 `stroke-width: 3`，同时显示 `Tooltip` 说明该路径的触发条件。
**交互增强**
- 点击任意节点，右侧（或下方）弹出详情面板，显示该步骤的完整信息（操作人、操作时间、耗时、备注、相关规则）。
- 流程图支持缩放（鼠标滚轮，范围 0.5x-2x）和平移（拖拽），使用 `transform` 属性实现。
- 提供"重置视图"按钮，点击后平滑动画回归初始缩放和位置。
- 当前正在进行的步骤，节点右上角显示旋转的 `Loader2` 图标（`animate-spin`）。
---
### 5.2 查询数据页面优化
查询数据页面（QueriesPage.tsx，896 行）是开发人员最高频使用的功能模块。当前页面在编辑器体验、结果展示、导航效率方面均有较大提升空间。
#### 5.2.1 SQL 编辑器优化
**主题同步**
CodeMirror 6 编辑器主题通过 `Compartment` 动态切换，监听 `theme` 状态变化：
```typescript
const themeCompartment = new Compartment();
// 深色主题使用 oneDark，浅色使用 lightTheme
const themeExtension = theme === 'dark' ? oneDark : lightTheme;
view.dispatch({ effects: themeCompartment.reconfigure(themeExtension) });
```
编辑器背景色使用 `bg-card`，确保与页面主题无缝融合。光标颜色使用 `caret-color: hsl(var(--primary))`。
**全屏编辑模式**
监听 `F11` 按键（`preventDefault` 阻止浏览器默认全屏），触发自定义全屏：编辑器容器使用 `fixed inset-0 z-50 bg-background` 定位，动画 `animate-in zoom-in-95 duration-200`。全屏模式下隐藏侧边栏，工具栏收缩为单行。退出方式：再次按 `F11` 或点击右上角 `Minimize` 图标按钮。使用 `useHotkeys` hook 管理快捷键。
**代码折叠**
启用 CodeMirror 6 内置的 `@codemirror/language foldGutter` 扩展，折叠指示器使用 `&bull;` 或自定义图标（`ChevronDown`/`ChevronRight`）。折叠区域背景色使用 `bg-muted/30` 以视觉区分。
**多标签页支持**
在编辑器顶部增加标签页栏，高度 `h-10`，样式类似 VS Code：
- 活动标签：`bg-card border-t-2 border-primary text-foreground`。
- 非活动标签：`bg-muted/50 border-t-2 border-transparent text-muted-foreground hover:bg-muted`。
- 标签内容：查询前 20 个字符 + 未保存指示点（`bg-primary rounded-full w-2 h-2`）。
- 关闭按钮：标签 hover 时显示 `X` 图标，`size="sm" variant="ghost"`。
- 新建标签：右侧 `+` 按钮，点击后创建空查询标签。
- 标签状态存储在 `zustand` store 中，切换标签时通过 `editor.dispatch` 替换文档内容。
**查询参数化**
支持 `:paramName` 语法，编辑器通过自定义 `MatchDecorator` 高亮参数（`background: hsl(var(--primary)/0.15), border-radius: 3px`）。编辑器下方增加参数输入区：自动解析 SQL 中的参数，为每个参数生成 `Input` 字段（标签 = 参数名，占位符 = 数据类型推断）。参数值随查询一起提交到后端。
---
#### 5.2.2 结果展示优化
**DataTable 替换**
将原生结果表格替换为 `shadcn/ui DataTable`（`@tanstack/react-table`）。关键配置：
- `enableColumnResizing: true`：列宽可拖拽调整，拖拽手柄在列头右侧边缘，hover 时显示 `w-1 h-full bg-primary/30`。
- `enableSorting: true`：点击列头排序，排序状态循环：无 → 升序 → 降序 → 无。排序图标使用 `ArrowUpDown`，激活时根据方向切换为 `ArrowUp` 或 `ArrowDown`。
- `enableRowSelection: true`：支持行选择，批量导出。
**列头固定（Sticky Header）**
结果表格容器设置 `max-h-[480px] overflow-auto`，表头使用 `sticky top-0 z-10 bg-card border-b` 固定，确保纵向滚动时列头始终可见。
**大数据量虚拟滚动**
当结果行数超过 1000 行时，启用 `@tanstack/react-virtual` 虚拟滚动。虚拟滚动配置：
- `estimateSize: () => 40`：每行预估高度 40px。
- `overscan: 10`：上下各预渲染 10 行。
- 行元素使用绝对定位 `position: absolute; top: 0; transform: translateY(${virtualRow.start}px)`。
**单元格内容预览**
- 文本/数字列：超出列宽时显示 `truncate`，hover 时弹出 `Popover` 展示完整内容，Popover 最大宽度 `max-w-sm`，支持文本选择。
- JSON 列：使用 `lucide-react` 的 `Braces` 图标标识，内容折叠显示 `{...}` 或 `[...]`（包含元素个数 badge）。点击展开后使用 `react-json-view` 或自定义树形组件格式化展示，支持层级折叠。
- NULL 值：特殊样式 `text-muted-foreground italic` 显示 "NULL"。
**结果导出**
工具栏增加导出 `DropdownMenu`，包含：
| 格式 | 说明 |
|------|------|
| CSV | 逗号分隔，包含 BOM 解决中文乱码 |
| JSON | 对象数组格式，字段名作为 key |
| Excel | 通过 `xlsx` 库生成 `.xlsx` 文件 |
导出范围支持：当前页 / 全部结果 / 选中行。大数据量导出（>10,000 行）时显示进度条 `Dialog`。
**结果图表视图**
在结果表格上方增加视图切换 `ToggleGroup`：`Table` / `BarChart` / `LineChart`。
- 柱状图：使用 `recharts` 的 `<BarChart>`，选择两列（X 轴 + Y 轴）后渲染。X 轴标签旋转 45° 防止重叠。
- 折线图：使用 `<LineChart>`，适合时间序列数据。支持多系列（选择多个数值列）。
- 图表容器高度 `h-[360px]`，空状态显示 `BarChart3` 图标 + "请选择数据列生成图表" 提示。
- 图表配置面板：X 轴选择、Y 轴选择（可多选）、图表标题输入。
---
#### 5.2.3 侧边栏导航优化
**Schema 树搜索过滤**
Schema 侧边栏顶部增加搜索输入框（`Input size="sm"` + `Search` 图标），实时过滤数据库/表/字段名。过滤逻辑：
- 匹配数据库名：展示该数据库下所有表。
- 匹配表名：展示该表及其所在数据库（其他数据库折叠）。
- 匹配字段名：展示该字段及其所属表和数据库。
使用 `fuse.js` 实现模糊搜索，配置 `threshold: 0.3, keys: ['name']`。
**表节点增强**
每个表节点左侧显示 `Table2` 图标（`w-4 h-4 text-muted-foreground`），右侧显示行数 badge（`rounded-full bg-muted px-1.5 py-0 text-[10px] text-muted-foreground`）。行数从 `INFORMATION_SCHEMA` 或后端缓存获取，显示 "~" 前缀表示近似值。
**收藏表功能**
表节点 hover 时显示星标按钮（`Star` 图标，`size="sm" variant="ghost"`），点击切换收藏状态。已收藏的表显示实心 `Star` 图标（`fill: hsl(var(--amber-400))`）。收藏表固定在侧边栏顶部"收藏"分组下，分组标题使用 `text-xs font-semibold text-muted-foreground uppercase tracking-wider`。
**最近访问表**
在"收藏"分组下方增加"最近访问"分组，最多展示 10 个最近点击过的表，按访问时间倒序。每个表项显示访问时间相对文本（`2分钟前`）。使用 `lru-cache` 或简单的 `Map` 实现客户端缓存，持久化到 `localStorage`。
**拖拽插入 SQL**
实现从 Schema 树拖拽表名/字段名到编辑器：
- 拖拽开始：设置 `dataTransfer.setData('text/plain', tableName)`，拖拽图像为半透明标签显示表名。
- 拖拽经过编辑器：显示插入位置指示线。
- 拖拽释放：根据拖拽对象类型插入不同内容：
- 表名：插入 `` `tableName` ``
- 字段名：插入 `` `tableName`.`columnName` ``
- 数据库名：插入 `` `databaseName` ``
使用 CodeMirror 6 的 `dropCursor` 扩展显示插入位置。
---
#### 5.2.4 历史记录优化
**分类标签页**
将历史记录抽屉中的列表改为 `shadcn/ui Tabs` 分类：
- 全部（`History` 图标）：所有查询记录。
- 成功（`CheckCircle` 图标，绿色）：执行成功的查询。
- 失败（`XCircle` 图标，红色）：执行失败的查询。
- 收藏（`Star` 图标，琥珀色）：用户收藏的查询。
每个标签显示记录数量 badge。标签切换使用 `AnimatePresence` 实现内容淡入淡出。
**记录项增强**
每条历史记录显示：
- 左侧：状态圆点（成功 `bg-green-500`、失败 `bg-red-500`），直径 8px。
- 标题行：查询前 40 个字符 + 执行时间 badge（`rounded-md bg-muted px-1.5 py-0.5 text-xs`，如 "23ms"、"1.2s"）。
- 展开/折叠：点击记录行展开 SQL 预览（`ChevronDown` / `ChevronRight` 图标指示），展开的 SQL 使用只读 CodeMirror 实例（高度 `max-h-[120px]`）或 `<pre>` 标签 + 语法高亮。
- 操作按钮组（hover 显示）："运行"（`Play` 图标，将 SQL 插入编辑器并执行）、"插入"（`CornerDownLeft` 图标，仅插入编辑器）、"收藏"（`Star` 图标）、"删除"（`Trash2` 图标，`variant="ghost"` 且 hover 变红）。
**一键对比功能**
在历史记录操作菜单中增加"对比"选项。选择两条记录后，弹出对比 `Dialog`（宽 `max-w-5xl`），使用左右分栏展示两条 SQL 的差异。差异高亮使用 `diff-match-patch` 库或自定义实现：
- 相同行：正常显示。
- 删除行：背景 `bg-red-50`，左侧红色竖线标记。
- 新增行：背景 `bg-green-50`，左侧绿色竖线标记。
- 修改行：字符级差异高亮，删除字符 `bg-red-200 line-through`，新增字符 `bg-green-200`。
**文件夹/标签组织**
允许用户创建自定义文件夹（"日常巡检"、"业务报表"等）来组织历史查询。文件夹使用侧边栏树形结构展示，支持：
- 新建文件夹：输入名称，使用 `Dialog` + `Input`。
- 拖拽排序：文件夹和历史记录均支持拖拽重新排序。
- 颜色标签：每个文件夹可选颜色标签（8 种预设色），用于快速视觉识别。
- 搜索：文件夹和历史记录支持全文搜索（SQL 内容 + 备注）。
---
### 5.3 系统设置页面优化
当前设置页面（SettingsPage.tsx 仅 56 行）结构过于简单，PlatformConfigPage.tsx 和 AppearanceSettings.tsx 也存在分类不清晰、交互不一致的问题。
#### 5.3.1 设置分类重组
**新分类结构**
将原有分类重新组织为 7 个一级分类，每个分类分配独立路由（`/settings/:category`）：
| 分类 | 路由 | 包含内容 | 图标 |
|------|------|----------|------|
| 外观设置 | `/settings/appearance` | 主题/语言/密度/字体/圆角/自定义CSS | `Palette` |
| 安全设置 | `/settings/security` | 密码策略/登录限制/2FA/IP白名单 | `Shield` |
| 通知设置 | `/settings/notifications` | 渠道配置/模板管理/订阅规则 | `Bell` |
| 执行设置 | `/settings/execution` | 超时/LIMIT/并发/执行器配置 | `PlayCircle` |
| 审计设置 | `/settings/audit` | 保留策略/敏感词/审计级别 | `ClipboardList` |
| 集成设置 | `/settings/integrations` | LDAP/Webhook/API密钥 | `Plug` |
| 高级设置 | `/settings/advanced` | 清理/备份/日志/导入导出 | `Cog` |
**导航布局**
设置页面采用左右布局：左侧导航栏宽 `w-64`（固定），右侧内容区 `flex-1`。左侧导航使用 `shadcn/ui` 的 `ScrollArea` 包裹，每个导航项包含图标（`w-4 h-4`）+ 分类名 + 设置项数量 badge（如"12 项"）。当前激活项使用 `bg-primary/10 text-primary border-r-2 border-primary`。
导航栏底部放置"危险区域"入口（`AlertTriangle` 图标，红色文字），包含恢复默认设置、清除所有数据等操作。
---
#### 5.3.2 表单交互优化
**统一表单架构**
所有设置表单统一使用 `shadcn/ui Form` + `react-hook-form` + `zod` 验证。每个设置项包裹在卡片组件中：
```
┌─────────────────────────────────────┐
│ 设置项标题 │ ← text-base font-medium
│ 设置项描述，说明此配置的作用和影响范围 │ ← text-sm text-muted-foreground
│ │
│ [输入控件] [重置] │ ← 控件右对齐，重置按钮变灰
└─────────────────────────────────────┘
```
卡片样式：`rounded-xl border border-border/60 bg-card p-5 shadow-sm`，hover 时 `shadow-md transition-shadow duration-200`。卡片间距 `space-y-4`。
**设置项搜索**
页面顶部增加全局搜索栏（`Input` + `Search` 图标 + `Command+K` 快捷键），支持跨分类搜索设置项。搜索范围包括：设置项标题、描述、关键词标签。搜索结果按分类分组展示，点击后滚动定位到对应设置项并高亮（`bg-primary/10` 闪烁 2 秒后消退）。使用 `fuse.js` 实现，`threshold: 0.25`。
**变更指示与保存**
- 变更指示：每个设置卡片在值发生变化时，底部显示 "已修改" 文字（`text-xs text-amber-600`）+ "撤销" 链接，同时卡片顶部边框变为 `border-t-2 border-amber-400`。
- 保存策略：每个分类页右下角固定悬浮保存栏（`sticky bottom-6`），包含"保存更改"（`variant="default"`）和"重置"（`variant="outline"`）按钮。保存栏使用 `bg-card border shadow-lg rounded-xl px-6 py-3`。
- 自动保存：可选开启，每 5 秒自动保存已变更的设置（防抖处理）。
- 保存成功：顶部显示 `Toast`（"设置已保存"，`CheckCircle` 图标），保存按钮短暂变为成功状态（文字 "已保存" + `Check` 图标，2 秒后恢复）。
**变更历史**
在设置页面右上角增加"变更历史"按钮（`History` 图标），点击后弹出 `Sheet`（右侧滑出，宽 `w-[480px]`）。历史记录展示最近 50 条设置变更，每条包含：
- 时间（相对格式，如"3 分钟前"）
- 分类名
- 设置项标题
- 旧值 → 新值（差异高亮）
- 操作人 Avatar + 用户名
历史记录数据由后端提供，前端使用 `useSWR` 轮询获取（间隔 30 秒）。
**危险设置二次确认**
对于高风险设置项（如"允许删除生产环境数据"、"关闭审计日志"），使用以下交互设计：
- 卡片边框：`border-red-200`。
- 卡片顶部：`bg-red-50 px-5 py-2 -mx-5 -mt-5 mb-3 rounded-t-xl border-b border-red-100`，内含 `AlertTriangle` 图标 + "危险设置" 警告文字。
- 开关/输入控件旁增加确认 `Dialog`，用户点击变更时弹出，要求输入操作密码或二次确认文字（如"请输入 DELETE 确认"）。
**设置导入/导出**
在高级设置分类中增加导入/导出功能：
- 导出：将所有设置序列化为 JSON 文件下载，包含元数据（导出时间、版本、操作人）。
- 导入：拖拽或选择 JSON 文件，预览变更内容（使用 diff 视图展示与当前设置的差异），确认后应用。导入前自动创建备份点。
---
#### 5.3.3 安全设置增强
**密码策略配置**
新增密码策略卡片，包含以下设置项：
| 设置项 | 控件 | 默认值 | 验证规则 |
|--------|------|--------|----------|
| 最小密码长度 | `Slider` (6-32) + `Input` | 8 | zod `min(6).max(32)` |
| 必须包含大写字母 | `Switch` | true | — |
| 必须包含小写字母 | `Switch` | true | — |
| 必须包含数字 | `Switch` | true | — |
| 必须包含特殊字符 | `Switch` | false | — |
| 密码过期时间(天) | `Input` (数字) | 90 | `min(1).max(365)` |
| 历史密码禁止 reuse 次数 | `Slider` (0-10) | 3 | `min(0).max(10)` |
密码强度实时预览：下方显示密码示例框，输入测试密码后动态显示强度条（红/黄/绿三段）和文字评价（"弱"/"中"/"强"）。
**登录失败锁定策略**
- 启用开关：`Switch`，默认开启。
- 最大尝试次数：`Slider` (3-10)，默认 5 次。
- 锁定时间：`Select`（5分钟/15分钟/30分钟/1小时/手动解锁），默认 15 分钟。
- 通知管理员：`Switch`，锁定事件发生时通知管理员。
**IP 白名单配置**
使用 `Textarea` 输入，每行一个 IP 或 CIDR 段（如 `192.168.1.0/24`）。实时验证输入格式，非法格式行显示红色下划线 + `Tooltip` 说明错误原因。支持从文件导入（`.txt` 或 `.csv` 格式）。
白名单列表以标签云形式展示，每个 IP 标签可单独删除（`X` 图标）。空状态时显示 `Globe` 图标 + "未配置 IP 白名单，允许所有 IP 访问" 提示。
**Session 超时设置**
- 超时时间：`Select`（15分钟/30分钟/1小时/2小时/4小时/8小时/永不），默认 30 分钟。
- 超时前警告：`Switch`，在超时前 2 分钟弹出警告 `Dialog`，提供"保持登录"按钮。
- 多设备登录限制：`Select`（不限制/1台/2台/3台），默认不限制。
**操作审计级别配置**
使用 `RadioGroup` 三选一：
- 基础：仅记录登录/登出和审批操作。
- 标准（默认）：额外记录查询执行和设置变更。
- 完整：记录所有操作包括 Schema 浏览和导出行为。
每个级别旁显示预估日志存储量（基于当前使用量计算）。
---
#### 5.3.4 外观设置增强
**主题实时预览**
主题模式切换（深色/浅色/跟随系统）改为实时预览：用户点击选项后立即应用主题（`document.documentElement.classList`），但此时不保存到后端。页面显示"主题已临时切换，保存以永久生效"的提示条（`bg-primary/10 border border-primary/20 rounded-lg px-4 py-2 mb-4`），包含"保存"和"恢复"按钮。用户刷新页面后未保存的主题恢复为已保存值。
**界面密度选择**
新增三档密度选择，使用 `ToggleGroup` 展示：
| 密度 | 效果 | 适用场景 |
|------|------|----------|
| 紧凑 (`compact`) | 表格行高 32px，卡片内边距 16px，字体 13px | 数据密集型用户 |
| 默认 (`default`) | 表格行高 40px，卡片内边距 20px，字体 14px | 平衡 |
| 舒适 (`comfortable`) | 表格行高 48px，卡片内边距 24px，字体 14px | 触控设备或视力辅助 |
选择后立即生效，通过 CSS 变量控制：`--density-factor: 0.8 | 1.0 | 1.2`，各组件使用 `calc()` 基于该变量计算尺寸。
**侧边栏宽度可调**
在"布局"子分类中增加侧边栏宽度设置：
- 控件：`Slider` (200px-400px)，默认 280px。
- 实时预览：拖动滑块时侧边栏宽度实时变化。
- 重置按钮：点击恢复默认 280px。
**字体大小设置**
- 基础字体大小：`Select`（12px/13px/14px/15px/16px），默认 14px。
- 代码字体大小：`Select`（12px/13px/14px/15px/16px），默认 14px。
- 代码字体族：`Select`（'JetBrains Mono', 'Fira Code', 'Source Code Pro', 'monospace'），默认 'JetBrains Mono'。
字体族选择时，预览文字实时展示该字体的渲染效果。
**圆角风格设置**
使用三个可视化选项卡片：
| 风格 | CSS 变量 | 视觉描述 |
|------|----------|----------|
| 锐利 (`sharp`) | `--radius: 0px` | 直角，无圆角 |
| 默认 (`default`) | `--radius: 0.5rem` | 中等圆角，卡片 8px |
| 圆润 (`rounded`) | `--radius: 0.75rem` | 大圆角，卡片 12px |
每个选项卡片展示缩略图：一个矩形 + 一个按钮 + 一个 badge，使用对应圆角值渲染。选中状态 `ring-2 ring-primary`。
**自定义 CSS（高级用户）**
在"高级"子分类中增加自定义 CSS 输入区：
- 使用 CodeMirror 6 编辑器（只开启基础高亮，无语法检查），高度 `min-h-[200px]`。
- 占位符："/* 在此输入自定义 CSS，将覆盖默认样式 */\n\n.custom-sidebar {\n /* your styles */\n}"。
- 实时预览开关：`Switch`，开启时 CSS 立即应用到页面。
- 安全提示：输入区上方显示 `Info` 图标 + "自定义 CSS 仅影响当前用户，错误样式可能导致页面显示异常" 警告。
- CSS 作用域：通过 Shadow DOM 或 `style` 标签 + 特定 class 前缀隔离，避免影响全局样式。
**登录页风格选择**
将原有的 5 个缩略图卡片优化为：
- 卡片尺寸：`aspect-[16/10] rounded-lg overflow-hidden border-2`。
- 选中状态：`border-primary ring-2 ring-primary/20`。
- 缩略图内容：使用实际登录页的静态截图或实时 iframe 预览。
- 卡片底部：风格名称 + 简短描述。
- 新增"上传自定义背景"按钮：支持上传图片（JPG/PNG，最大 5MB），上传后显示预览和"删除"按钮。
---
以上优化方案覆盖了审批变更、查询数据、系统设置三大核心模块的全部关键页面。每个方案均提供了具体的组件选型、布局参数、交互细节和视觉规范，可直接转化为前端开发任务。建议按照"查询数据（高频使用）→ 审批变更（核心流程）→ 系统设置（低频但影响全局）"的优先级顺序逐步实施。
Reference in new issue View Git Blame Copy Permalink