85 lines
2.7 KiB
Markdown
85 lines
2.7 KiB
Markdown
|
# Param Save Bar Fixed Bottom Frontend Implementation Plan
|
||
|
|
|
||
|
|
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||
|
|
|
||
|
|
**Goal:** 将模型参数页的“保存所有修改”区域调整为滚动时始终可见的底部吸附操作栏，并统一项目详情页与全局模型参数页的展示效果。
|
||
|
|
|
||
|
|
**Architecture:** 在两个现有 Vue 页面中复用同一套样式策略：保留现有保存逻辑，仅通过 `position: sticky; bottom: 0` 将按钮区吸附到滚动容器底部，同时补充页面底部留白和移动端布局适配。这样可以与若依当前的 `AppMain` 滚动容器兼容，避免 `fixed` 带来的侧边栏遮挡问题。
|
||
|
|
|
||
|
|
**Tech Stack:** Vue 2, Element UI, SCSS, 若依前端布局
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Task 1: 为项目详情参数页补充底部吸附样式
|
||
|
|
|
||
|
|
**Files:**
|
||
|
|
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`
|
||
|
|
|
||
|
|
**Step 1: 写出预期行为检查点**
|
||
|
|
|
||
|
|
确认以下目标行为：
|
||
|
|
|
||
|
|
- 页面滚动时“保存所有修改”始终可见
|
||
|
|
- 最后一张模型卡片不会被保存栏遮挡
|
||
|
|
- 已修改计数文案继续正常展示
|
||
|
|
|
||
|
|
**Step 2: 调整保存栏结构样式**
|
||
|
|
|
||
|
|
将 `button-section` 改为底部吸附操作栏，补充：
|
||
|
|
|
||
|
|
- `position: sticky`
|
||
|
|
- `bottom: 0`
|
||
|
|
- `z-index`
|
||
|
|
- 顶部边框与阴影
|
||
|
|
- 桌面端横向排列
|
||
|
|
|
||
|
|
**Step 3: 补充容器底部留白**
|
||
|
|
|
||
|
|
在页面主容器增加足够的 `padding-bottom`，避免内容被悬浮栏遮挡。
|
||
|
|
|
||
|
|
**Step 4: 增加移动端适配**
|
||
|
|
|
||
|
|
在媒体查询中让保存栏换行显示，并让按钮在窄屏下占满宽度。
|
||
|
|
|
||
|
|
### Task 2: 为全局模型参数页应用同样的吸附方案
|
||
|
|
|
||
|
|
**Files:**
|
||
|
|
- Modify: `ruoyi-ui/src/views/ccdi/modelParam/index.vue`
|
||
|
|
|
||
|
|
**Step 1: 复用项目详情页的布局样式策略**
|
||
|
|
|
||
|
|
保持保存栏的结构与交互一致，避免两个模型参数页体验不一致。
|
||
|
|
|
||
|
|
**Step 2: 校正全局页容器留白**
|
||
|
|
|
||
|
|
结合页面标题区和卡片区，补足底部滚动空间，确保最后一组参数完整可见。
|
||
|
|
|
||
|
|
**Step 3: 保持空状态不显示保存栏**
|
||
|
|
|
||
|
|
确认 `modelGroups.length === 0` 时仍仅展示空状态，不渲染底部操作栏。
|
||
|
|
|
||
|
|
### Task 3: 进行前端回归验证
|
||
|
|
|
||
|
|
**Files:**
|
||
|
|
- Review: `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`
|
||
|
|
- Review: `ruoyi-ui/src/views/ccdi/modelParam/index.vue`
|
||
|
|
|
||
|
|
**Step 1: 执行构建验证**
|
||
|
|
|
||
|
|
Run: `npm run build:prod`
|
||
|
|
|
||
|
|
Expected: 前端生产构建成功，样式改动未引入编译错误。
|
||
|
|
|
||
|
|
**Step 2: 手工检查两个页面**
|
||
|
|
|
||
|
|
验证点：
|
||
|
|
|
||
|
|
- 滚动时保存栏持续可见
|
||
|
|
- 修改参数后计数正常变化
|
||
|
|
- 点击保存后逻辑不受影响
|
||
|
|
- 窄屏下按钮区不重叠、不溢出
|
||
|
|
|
||
|
|
**Step 3: 记录验证结果**
|
||
|
|
|
||
|
|
在交付说明中明确区分已执行的构建验证与建议的页面人工回归项。
|