Commit f0802827 authored by Data Governance Dev's avatar Data Governance Dev

feat(web): 自定义规则卡加「开始分析」按钮(与配置卡互为冗余入口)

需求:分析配置卡折叠时不必再点开它启动分析 → 自定义规则卡也加一个同样的按钮。

实现(web/static/index.html 卡 2.5):
- 复用 startJob(),disabled/loading 逻辑与配置卡完全一致
- 按钮放在 <div v-show="!customConfigCollapsed"> 外面 → 卡片折叠时按钮也可见
- 同时附「取消任务」按钮(运行中显示)

CSS(web/static/style.css):
- 新增 .card-footer-action(margin-top: 18px, flex row, gap 8px)
  视觉对齐配置卡里 <el-form-item> 的默认间距
parent 1398b020
...@@ -5247,3 +5247,33 @@ Total: 28 steps # 4 基础 + 24 indicator checkbox ...@@ -5247,3 +5247,33 @@ Total: 28 steps # 4 基础 + 24 indicator checkbox
- 不要用 `display:none` 隐藏滚动容器(el-table 用 `el-scrollbar__wrap` 的 `overflow:auto`) - 不要用 `display:none` 隐藏滚动容器(el-table 用 `el-scrollbar__wrap` 的 `overflow:auto`)
- `passive: true` 必须加(避免浏览器警告 + 提升滚动性能) - `passive: true` 必须加(避免浏览器警告 + 提升滚动性能)
- `__dictScrollHandler` 用 DOM 属性而不是 WeakSet:DOM 节点被替换时旧的自然 GC,新的 wrap 是新对象 → 无需手动清理 - `__dictScrollHandler` 用 DOM 属性而不是 WeakSet:DOM 节点被替换时旧的自然 GC,新的 wrap 是新对象 → 无需手动清理
---
## 2026-08-13 · 自定义规则卡加「开始分析」按钮
### 需求
- 分析配置卡折叠时,要启动分析必须先点开 → 麻烦
- 自定义规则卡也加一个同样的「开始分析」按钮,互为冗余入口
### 实现(`web/static/index.html` 卡 2.5)
- 位置:自定义规则卡 `</el-card>` 前;**放在 `<div v-show="!customConfigCollapsed">` 外面**
→ 卡片折叠时按钮也可见
- 复用 `startJob()`,disabled/loading 逻辑与原按钮完全一致:
```html
<el-button type="success" @click="startJob"
:disabled="!connected || form.tables.length === 0"
:loading="submitting">
<el-icon><VideoPlay /></el-icon>开始分析({{ form.tables.length }} 张表 / {{ form.steps.length }} 项检查)
</el-button>
<el-button v-if="currentJob && jobStatus.status === 'running'"
@click="cancelJob" type="danger" plain>...</el-button>
```
### CSS(`web/static/style.css`)
- 新增 `.card-footer-action { margin-top: 18px; display: flex; gap: 8px; align-items: center; }`
→ 与分析配置卡的 `<el-form-item>` 视觉对齐(上间距 18px,左对齐)
### 踩坑
- 按钮要放在 v-show div 外面,折叠时也要可见;不能简单复制 el-form-item 结构(自定义规则卡没用 el-form)
- 直接用 `display: flex` 替代 el-form-item 的默认间距
...@@ -658,6 +658,17 @@ ...@@ -658,6 +658,17 @@
在条件组里可点「+ 子条件」加叶子、「+ 嵌套组」加括号层(OR/AND 切换连接方式)。 在条件组里可点「+ 子条件」加叶子、「+ 嵌套组」加括号层(OR/AND 切换连接方式)。
</div> </div>
</div> </div>
<!-- 2026-08-13:自定义规则卡也加一个「开始分析」按钮
放在 v-show 外面 → 卡片折叠时也能看到,点开就能直接启动
(分析配置卡折叠时不必再点开它启动) -->
<div class="card-footer-action">
<el-button type="success" @click="startJob" :disabled="!connected || form.tables.length === 0" :loading="submitting">
<el-icon><VideoPlay /></el-icon>开始分析({{ form.tables.length }} 张表 / {{ form.steps.length }} 项检查)
</el-button>
<el-button v-if="currentJob && jobStatus.status === 'running'" @click="cancelJob" type="danger" plain>
<el-icon><Close /></el-icon>取消任务
</el-button>
</div>
</el-card> </el-card>
<!-- 卡片 3:数据字典浏览器(连接成功后才有数据) --> <!-- 卡片 3:数据字典浏览器(连接成功后才有数据) -->
......
...@@ -164,6 +164,14 @@ body { ...@@ -164,6 +164,14 @@ body {
.card-title { .card-title {
flex: 1; flex: 1;
} }
/* 2026-08-13:自定义规则卡片左下角「开始分析」按钮的容器
视觉与 el-form-item 一致:上 18px margin、左对齐 */
.card-footer-action {
margin-top: 18px;
display: flex;
gap: 8px;
align-items: center;
}
.form-hint { .form-hint {
color: #909399; color: #909399;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment