51 lines
3.3 KiB
Markdown
51 lines
3.3 KiB
Markdown
# 标准资源表单布局优化操作日志
|
||
|
||
操作时间：2026-08-11
|
||
操作类型：修改
|
||
影响模块：平台总后台标准资源新建、编辑页
|
||
|
||
## 操作前状态
|
||
|
||
- 新建和编辑页使用 `1080px` 最大宽度卡片，在宽屏主内容区两侧产生大面积灰色空白。
|
||
- 面包屑已经表达“资源列表 / 新建或编辑”，页头又重复展示操作大标题及说明文字，下方卡片仍有“基本信息”标题，形成三层重复信息。
|
||
- 页面根节点为网格布局但没有限制纵向内容对齐，在确定高度下可能拉伸自动行，造成顶部和底部空白。
|
||
- 表单只按浏览器视口宽度切换单双列，没有考虑左侧菜单占用后的真实内容宽度。
|
||
- 保存和取消按钮使用底部吸附定位，长表单可能出现覆盖或视觉脱节。
|
||
|
||
## 具体操作
|
||
|
||
- 修改 `frontend/platform_admin/src/views/resource/ResourceRecordPage.vue`：
|
||
- 仅为新建、编辑模式增加专用布局类。
|
||
- 增加共享 `form-shell` 内容容器，使卡片标题、字段和按钮使用同一基线。
|
||
- 新建、编辑模式隐藏重复的操作大标题和说明文字，详情模式继续保留原有标题区。
|
||
- 保留原字段组件、校验、保存和取消事件，不调整业务逻辑。
|
||
- 修改 `frontend/platform_admin/src/views/resource/ResourceRecordPage.less`：
|
||
- 表单卡片改为主内容区全宽，内部内容最大宽度为 `1440px`。
|
||
- 页面网格使用顶部自然对齐，并压缩新建、编辑页头间距。
|
||
- 桌面卡片内边距调整为横向 `32px`，小屏调整为 `16px`。
|
||
- 表单内容以 `900px` 容器宽度作为单双列切换阈值。
|
||
- 保存和取消按钮恢复普通文档流定位。
|
||
|
||
## 操作后状态
|
||
|
||
- 宽屏下白色表单卡片与主内容区对齐，截图标注的顶部及左右大面积灰色空白已消除。
|
||
- 新建、编辑页顶部仅保留面包屑和返回按钮，表单卡片继续显示“基本信息”，页面层级更简洁；详情页标题和编辑入口保持不变。
|
||
- 输入区仍由最大宽度限制控制可读性，不会在超宽屏无限拉长。
|
||
- 账户头像和身份摘要保持现有居中设计，详情页和业务操作弹窗不受影响。
|
||
- 地址、备注、条款等长字段继续独占整行；普通字段根据容器宽度自动切换双列或单列。
|
||
|
||
## 验证结果
|
||
|
||
- `npm.cmd run type:check`：通过。
|
||
- `npm.cmd run build`：通过，Vite 生产构建包含 `@container record-form` 响应式规则。
|
||
- `npm.cmd run resource-pages:check`：通过，详情 46 类、新建 25 类、编辑 23 类。
|
||
- `npm.cmd run contract:check`：通过，48 个资源契约一致。
|
||
- Biome 错误级检查：通过。
|
||
- 浏览器回归：气站、配送点新建页卡片全宽且顶部自然排列；工作人员新建页头像摘要未变化，表单同步采用全宽布局；配送点新建页和用户编辑页均不再显示重复操作标题，用户详情页标题、说明及编辑入口保持原状；控制台无警告或错误；未执行保存操作。
|
||
|
||
## 风险评估
|
||
|
||
- 本次仅修改平台总后台 5173 的共享新建、编辑布局，不改变字段、校验、接口、数据库或详情页。
|
||
- 容器查询依赖现代浏览器；当前项目运行环境和生产构建均支持该 CSS 能力。
|
||
- 气站后台 5175、配送点后台 5176 和树形资源页面保持原状。
|