# 模型参数页底部保存栏悬浮设计

**背景**

当前“模型参数修改”相关页面中的“保存所有修改”按钮位于普通文档流末尾。参数卡片较多时，用户需要滚动到页面底部才能看到保存入口，保存操作不够直观，也容易在编辑过程中误以为没有统一保存入口。

**目标**

将“保存所有修改”区域调整为在页面滚动过程中始终保持可见的底部操作栏，覆盖以下页面：

- 项目详情中的参数配置页 `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`
- 全局模型参数管理页 `ruoyi-ui/src/views/ccdi/modelParam/index.vue`

**约束**

- 不修改参数加载、修改标记、批量保存等现有业务逻辑。
- 保持两个页面交互一致，避免同类页面体验割裂。
- 适配当前若依布局中 `AppMain` 作为滚动容器的结构。
- 兼顾桌面端与移动端显示，避免按钮区压住主要内容。

**方案选择**

## 方案一：使用 `position: sticky; bottom: 0`

将保存栏保留在页面内容流中，但通过 `sticky` 吸附在滚动容器底部。

优点：

- 与当前若依布局兼容性最好。
- 不需要手动计算侧边栏宽度、主内容区宽度和响应式偏移。
- 实际用户体验上可达到“滚动时始终可见”的效果。

缺点：

- 严格意义上是吸附在内容滚动容器底部，而不是直接固定到 `window`。

## 方案二：使用 `position: fixed`

将保存栏直接固定到浏览器视口底部。

优点：

- 语义上最接近“固定在浏览器底部”。

缺点：

- 需要额外处理左侧菜单宽度、固定头部、移动端安全区域和页面宽度同步。
- 在若依当前布局下更容易出现遮挡或错位。

**结论**

采用方案一。对于当前项目的页面结构，这种实现可以稳定地实现底部悬浮效果，同时将实现复杂度和回归风险控制在最低。

**界面设计**

- 保留“保存所有修改”按钮和“已修改 X 个参数”文案。
- 将按钮区改造成统一的底部操作栏。
- 操作栏使用白底、顶部边框和轻阴影，与卡片区分层。
- 桌面端使用左右分布或同一行布局。
- 移动端允许换行，确保按钮点击区域充足。

**内容区域处理**

- 页面主体增加底部留白，避免最后一张模型卡片或表格内容在滚动时被吸附栏遮挡。
- 空状态页面不显示底部保存栏。

**测试与验证**

- 验证项目详情参数配置页在多组参数卡片下滚动时保存栏持续可见。
- 验证全局模型参数页在多组参数卡片下滚动时保存栏持续可见。
- 验证移动端宽度下保存按钮与“已修改 X 个参数”文案不重叠。
- 验证未修改参数、已修改参数、保存中三种状态下按钮区表现正常。