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

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 状态变化：

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 扩展，折叠指示器使用 • 或自定义图标（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），上传后显示预览和"删除"按钮。

---

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