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

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