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