Skip to content

[UI] 优化比较架构指定表选择区域布局 #6969

Description

@0verme

数据库类型和版本

通用

支持信息

DBX 版本: 当前开发版本
运行环境: 桌面端
操作系统: Windows
系统架构: x86_64

当前痛点

#6533 已为“比较架构”增加指定表比较能力,并抽取了公共的 TableMultiSelect,目前“比较数据”和“比较架构”已经复用同一套表多选组件。

不过在“比较架构”页面中,指定表选择区域目前放在 Source 一侧。

当开启指定表过滤后,Source 一栏会明显比 Target 一栏更高,左右布局失去对称,视觉上比较突兀。

这个问题并不是表多选组件本身缺失,而更偏向 Schema Diff 页面布局组织方式的问题。

期望方案

保持现有功能语义不变:

  • Source 侧选择需要比较的表
  • Target 侧继续按同名表进行匹配
  • 不增加第二套 Target 表选择器
  • 不改变现有 regex include / exclude filter 行为
  • 不改变 Schema Diff 的实际比较逻辑

希望将“指定表 / 比较范围”从 Source 单侧布局中独立出来。

建议页面结构调整为:

┌──────── Source ────────┐     ⇄     ┌──────── Target ────────┐
│ Connection             │           │ Connection             │
│ Database               │           │ Database               │
│ Schema                 │           │ Schema                 │
└────────────────────────┘           └────────────────────────┘

┌──────────────── 比较范围 / 指定表 ────────────────┐
│ 搜索                      已选 3 / 100             │
│ [全选 / 取消全选]                                  │
│ ☑ table_a                                         │
│ ☑ table_b                                         │
│ ☐ table_c                                         │
│                                                   │
│ Target:3 个同名表匹配 / 1 个表不存在              │
└───────────────────────────────────────────────────┘

这样:

  1. Source / Target 两侧重新保持视觉对称
  2. “指定表”更明确地表达为整个比较任务的“比较范围”
  3. 不需要为了视觉对称,在 Target 侧再复制一套表选择 UI
  4. 可以继续复用现有 TableMultiSelect.vue
  5. Data Compare / Schema Diff 的表选择交互仍保持一致

实现边界

优先复用现有:

apps/desktop/src/components/diff/TableMultiSelect.vue

本 Issue 不希望:

  • 新建第二套表多选组件
  • 为 Target 增加独立可编辑的表多选
  • 重写 Schema Diff 比较逻辑
  • 改变指定表与 regex filter 的现有语义
  • 做大范围页面重构

如果 TableMultiSelect 本身存在一些公共的 spacing / header / search / select-all 样式问题,可以在不影响 Data Compare 的前提下一并做轻量调整。

验收标准

  • Source / Target 主配置区域视觉上保持对称
  • 指定表区域不再只占用 Source 一侧高度
  • 指定表功能行为与 [Feature] 比较架构功能支持指定表对比 #6533 保持兼容
  • Target 继续通过同名表自动匹配
  • 继续复用 TableMultiSelect
  • Data Compare 的表多选交互不产生回归
  • 未启用指定表时,现有 Schema Diff 行为保持不变

优先级(是否紧急)

🟢 P3 优化 · 可按排期处理

补充信息

该问题主要是 #6533 功能落地后的 UI 收口,不涉及新的 Schema Diff 能力。

Metadata

Metadata

Assignees

Labels

Projects

Status
Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions