platforms/docs/操作日志_标准资源表单布局优化_20260811.md

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

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