2.8 KiB
2.8 KiB
模型参数页底部保存栏悬浮设计
背景
当前“模型参数修改”相关页面中的“保存所有修改”按钮位于普通文档流末尾。参数卡片较多时，用户需要滚动到页面底部才能看到保存入口，保存操作不够直观，也容易在编辑过程中误以为没有统一保存入口。
目标
将“保存所有修改”区域调整为在页面滚动过程中始终保持可见的底部操作栏，覆盖以下页面：
- 项目详情中的参数配置页
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 个参数”文案不重叠。
- 验证未修改参数、已修改参数、保存中三种状态下按钮区表现正常。