# 标准资源表单布局优化操作日志

操作时间：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 和树形资源页面保持原状。