ccdi/docs/plans/frontend/2026-03-16-param-save-bar-fixed-bottom-frontend-implementation.md

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: 记录验证结果

在交付说明中明确区分已执行的构建验证与建议的页面人工回归项。