Página inicial Explorar Ajuda
Entrar
user5
/
forge_admin
1
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Tree: fbd181a51a
Branches Tags
forge_admin
/
code-copilot
/
changes
/
archive
/
table-scroll-sticky-header
/
execution-log.md

execution-log.md 6.2 KB
Histórico Raw

执行日志 — 表格横向拖拽与表头固定优化

2026-07-04

  • 创建变更记录：spec.md、tasks.md、test-spec.md、execution-log.md。
  • 已确认主改造点：AiTable.vue、全局指令、全局表格样式。

本轮实现

  • 新增 forge-admin-ui/src/directives/modules/tableScrollEnhance.js：封装 Naive UI 表格横向拖拽滚动，自动跳过按钮、链接、输入、选择器、分页、滚动条和表格筛选/缩放等交互区域。
  • 更新 forge-admin-ui/src/directives/index.js：注册 v-table-scroll-enhance，并通过 MutationObserver 自动增强直接使用的 .n-data-table。
  • 更新 forge-admin-ui/src/components/ai-form/AiTable.vue：表格模式默认启用拖拽滚动，新增 dragScroll prop 支持关闭。
  • 更新 forge-admin-ui/src/styles/theme.css：补充表头 sticky、固定列表头 z-index、拖拽光标状态和不透明表头背景。

验证记录

  • 读取测试标准：sed -n '1,260p' code-copilot/rules/automated-testing-standard.md，已确认本轮前端交互增强需执行前端构建，并尽量做交互验证。
  • 前端构建：source ~/.nvm/nvm.sh && nvm use v20.19.0 && NODE_OPTIONS=--max-old-space-size=8192 pnpm --dir forge-admin-ui build，结果通过。构建输出包含既有组件命名冲突、动态导入、CSS // 注释和 chunk size warning，未阻断。
  • 指令烟测：使用 node --input-type=module -e <jsdom smoke> 挂载真实 tableScrollEnhance.js 指令，模拟表格单元格横向拖动，验证 body/header scrollLeft 同步为 80；再模拟按钮区域拖动，验证滚动值保持 0。结果通过，输出 table-scroll-enhance smoke passed。
  • 空白检查：git diff --check -- forge-admin-ui/src/directives/modules/tableScrollEnhance.js forge-admin-ui/src/directives/index.js forge-admin-ui/src/components/ai-form/AiTable.vue forge-admin-ui/src/styles/theme.css code-copilot/changes/table-scroll-sticky-header/spec.md code-copilot/changes/table-scroll-sticky-header/tasks.md code-copilot/changes/table-scroll-sticky-header/test-spec.md code-copilot/changes/table-scroll-sticky-header/execution-log.md，结果通过。
  • 浏览器验证说明：项目未安装 Playwright；Node REPL 浏览器工具调用失败，错误为 codex/sandbox-state-meta: missing field sandboxPolicy。本轮未启动本地前端服务，使用 jsdom 烟测替代覆盖核心拖拽逻辑。
  • 本轮未启动需要保留或清理的服务。

反馈回归修复

  • 用户反馈：右侧操作列初始看不见，需要横向滑动后才出现；只有一条数据时也出现竖向滚动条。
  • 修复一：AiCrudPage 默认 maxHeight 改为少量数据不传入，避免 Naive DataTable 在单行/少量数据时进入分离表头和内部纵向滚动容器模式；超过 8 条数据时继续使用 calc(100vh - 280px) 限制表体高度。
  • 修复二：tableScrollEnhance 在挂载/更新后主动刷新表格滚动状态，派发一次 scroll 事件，促使 Naive 固定列状态初始化，右侧操作列不再依赖用户先横向滑动。
  • 修复三：tableScrollEnhance 根据表体 scrollHeight/clientHeight 标记 forge-table-no-y-overflow；theme.css 在该状态下隐藏 Naive 竖向 scrollbar rail。
  • 修复四：AiCrudPage 和 AiTable 对 action/actions/operation/operations 操作列增加默认 fixed: 'right'，避免业务页自定义操作列未显式固定时落到横向内容末尾。

回归验证记录

  • 指令回归烟测：source ~/.nvm/nvm.sh && nvm use v20.19.0 && node --input-type=module -e <jsdom regression smoke>，结果通过，输出 table-scroll-enhance regression smoke passed。覆盖横拖同步、行内按钮保护、无纵向溢出时添加 forge-table-no-y-overflow、纵向溢出时移除该 class。
  • 前端构建：source ~/.nvm/nvm.sh && nvm use v20.19.0 && NODE_OPTIONS=--max-old-space-size=8192 pnpm --dir forge-admin-ui build，结果通过。构建输出仍包含既有组件命名冲突、动态导入、CSS // 注释和 chunk size warning，未阻断。
  • 自定义操作列默认右固定补丁后复跑前端构建：source ~/.nvm/nvm.sh && nvm use v20.19.0 && NODE_OPTIONS=--max-old-space-size=8192 pnpm --dir forge-admin-ui build，结果通过。构建 warning 同上，未阻断。
  • 空白检查：git diff --check -- forge-admin-ui/src/components/ai-form/AiCrudPage.vue forge-admin-ui/src/directives/modules/tableScrollEnhance.js forge-admin-ui/src/styles/theme.css code-copilot/changes/table-scroll-sticky-header/spec.md code-copilot/changes/table-scroll-sticky-header/tasks.md code-copilot/changes/table-scroll-sticky-header/test-spec.md code-copilot/changes/table-scroll-sticky-header/execution-log.md，结果通过。
  • 本轮未启动需要保留或清理的服务。

表头操作列固定兜底

  • 用户截图确认：表体“编辑 / 查看详情 / 删除 / 更多”操作列已经浮在右侧，但表头没有同步出现固定的“操作”列。
  • 修复一：AiTable 归一化列配置时，识别标题为“操作”的列；没有标题时为操作列补默认标题“操作”；默认右固定的操作列额外补 forge-table-action-column 稳定 class。
  • 修复二：theme.css 针对 .n-data-table-th.forge-table-action-column 增加右固定兜底，即使 Naive 表头未生成 n-data-table-th--fixed-right 类，也能将操作列表头固定在右侧；表体操作列保留正文背景，避免被染成表头灰底。
  • 源码烟测：source ~/.nvm/nvm.sh && nvm use v20.19.0 >/dev/null && node --input-type=module - <<'NODE' ...，结果通过，输出 table operation header fixed-right smoke passed。覆盖操作列默认标题、默认 fixed: right、稳定 class 和 CSS 右固定兜底。
  • 前端构建：source ~/.nvm/nvm.sh && nvm use v20.19.0 && NODE_OPTIONS=--max-old-space-size=8192 pnpm --dir forge-admin-ui build，结果通过。构建输出仍包含既有组件命名冲突、动态导入、CSS // 注释和 chunk size warning，未阻断。
  • 空白检查：git diff --check -- forge-admin-ui/src/components/ai-form/AiTable.vue forge-admin-ui/src/styles/theme.css forge-admin-ui/src/components/ai-form/AiCrudPage.vue，结果通过。
  • 本轮未启动需要保留或清理的服务。