## 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），上传后显示预览和"删除"按钮。

---

以上优化方案覆盖了审批变更、查询数据、系统设置三大核心模块的全部关键页面。每个方案均提供了具体的组件选型、布局参数、交互细节和视觉规范，可直接转化为前端开发任务。建议按照"查询数据（高频使用）→ 审批变更（核心流程）→ 系统设置（低频但影响全局）"的优先级顺序逐步实施。