ccdi/docs/reports/implementation/2026-04-22-base-staff-asset-single-horizontal-scroll-implementation.md

员工信息维护资产表单单横向滚动实施记录

文档信息

• 保存路径：docs/reports/implementation/2026-04-22-base-staff-asset-single-horizontal-scroll-implementation.md
• 实施日期：2026-04-22
• 关联范围：员工信息维护前端页面

本次修改内容

1. 定位到员工信息维护页资产编辑表格存在双横向滚动条，原因是外层 assets-table-wrapper 与 el-table 内层同时承担横向滚动。
2. 移除外层容器的 overflow-x: auto，避免包裹层再次生成横向滚动条。
3. 将资产编辑表格根节点从强制 min-width 调整为 width: 100%，保持表格横向滚动由 el-table 自身管理。
4. 新增本次前端实施计划与实施记录，沉淀问题定位、改动范围与验证要求。

影响范围

• 前端：ruoyi-ui/src/views/ccdiBaseStaff/index.vue 资产信息编辑弹窗样式。
• 文档：新增前端实施计划与实施记录。

验证情况

1. 前端构建校验：
   • 执行命令：source ~/.nvm/nvm.sh && nvm use 14.21.3 && cd ruoyi-ui && npm run build:prod
   • 结果：构建成功；存在项目原有的 bundle size warnings，本次改动未引入构建失败。
2. Playwright 浏览器实测：
   • 执行方式：通过 nvm use 25.9.0 启动 playwright-cli，在浏览器中 mock 登录态与员工信息维护页最小依赖接口后打开 /maintain/baseStaff，进入“新增员工”弹窗并新增一条资产记录。
   • 结果：资产表单外层包装器 clientWidth=984、scrollWidth=984、overflowX=visible；el-table 内部滚动区 clientWidth=982、scrollWidth=1560、overflowX=auto。说明外层不再生成横向滚动条，仅保留表格内部一条横向滚动条。