RowActions 组件 + 全站 CSS 规则、改造文章列表与未发布稿工作台两页的行操作与列宽,并配套规则文档与只读 e2e 断言;附带修复 spec 30 的既有测试假红。codescan.issues_diff 真实数据):修复 1 条 / 新增 3 条,全部为 Low/Medium 的可维护性与耦合类,无 Critical / High / Security 新增。scroll.x ≥ 各列宽度之和 成立。| 项 | 值 |
|---|---|
| 项目 | dzs/dzs-admin |
| 分支 | v1.0.102 |
| base(上一版本) | 26e67b981232d5bd454b2b0b4133ee17acb2e77b(对应已发 v1.0.101) |
| head(本次) | fb3d3f411b585cbd9f325cfdde8c73523cc1b651 |
变更文件清单(10 个)
| 文件 | 类型 | 说明 |
|---|---|---|
src/components/common/RowActions.tsx | 新增 | 行操作按钮组唯一入口(Space.Compact + className="row-actions") |
src/app/globals.css | 修改 | 新增 .row-actions .ant-btn { gap: 2px }(图标↔文字间距,仅作用于行操作组) |
src/app/admin/articles/page.tsx | 修改 | 行操作改 RowActions、按钮 link→default;操作列 320→290、scroll.x 1630→1600 |
src/app/admin/articles/new/page.tsx | 修改 | 同上;操作列 260→280、scroll.x 1760 不变 |
e2e/fixtures/row-actions.ts | 新增 | 只读几何测量器 measureRowActions / assertRowActionsLayout |
codescan.issues_diff 真实数据)| 严重度 | 类型 | 位置 | 说明 | 建议 |
|---|---|---|---|---|
| Low | Maintainability | e2e/specs/30-subpage-title-back.spec.ts:54 | 重复代码块(4 行 ×2) | 抽取为共享函数 |
该修复即本批的 spec 30 假红治理:把重复的路径处理逻辑抽为
liveE2ePath(),将e2ePath中写死的[id](如/admin/articles/1/edit,而库内最小 id 为 577,物理不存在 → 编辑页取数失败router.push回列表 → 顶条标题退化为菜单名)替换为「当前真实存在的一篇」,消除时序性偶发假红。
codescan.issues_diff 真实数据)| 严重度 | 类型 | 位置 | 说明 | 建议 |
|---|---|---|---|---|
| Medium | Dependency | e2e/fixtures/row-actions.ts:33 | measureRowActions 直接依赖 17 个函数(阈值 10),高耦合 | 该函数的耦合来自单个 page.evaluate 回调内密集的 DOM API 调用;测试测量器可接受,如需降号可将取数逻辑拆为多个 evaluate 片段 |
| Low | Maintainability | e2e/specs/30-subpage-title-back.spec.ts:77 | 重复代码块(4 行 ×2) | 两条遍历用例的 try/catch + expect.soft(false, …) 异常兜底模式可抽为共享 helper |
| Low | Maintainability | e2e/specs/53-unpublished-workbench.spec.ts:82 | 重复代码块(4 行 ×2) | 新布局用例复用了「点 Tab → 定位首行 → 空则 skip」模板,可与既有用例共用 helper |
三条新增项均为测试代码的可维护性/耦合类问题,不影响产品运行时;无 Critical / High / Security 新增。
RowActions.tsx:封装 Space.Compact size="small" className="row-actions",作为表格行操作的统一入口;文件头写明宽度实测口径(带图标按钮 60px = 1 边框 + 7 内边距 + 14 图标 + 2px 图标↔文字 + 文字 28px + 7 内边距 + 1 边框;相邻按钮边框重叠 −1px)。globals.css:.row-actions .ant-btn { gap: 2px },专门把行操作按钮的图标↔文字间距从 antd 默认 8px 收到 2px;选择器限定在 .row-actions 下,不影响全站其他按钮。两个类的选择器(0,2,0)优先级高于 antd 的 :where(.css-hash).ant-btn(0,1,0),可稳定覆盖。type="link"→"default"(link 边框透明,连起来看不到分隔线)、外层 Space→RowActions;操作列与 scroll.x 同步收缩。e2e/fixtures/row-actions.ts(只读):量取「按钮最多」行的操作列几何,断言四类回归:①命中 .row-actions 紧凑容器;②相邻按钮间隙 ≤ 0.5;③按钮 column-gap === '2px';④内容不溢出(scrollWidth ≤ clientWidth + 1)且末按钮在表格右边界内。定位上兼容 antd 6(.ant-drawer-section 等类名变化)。52-* / 53-*:各新增一条 1820 宽下的布局断言,覆盖文章列表与工作台。rules/frontend.md:更新「表格列宽纪律」(按钮宽度按实测口径算),「文章列表操作列宽度」补重算,新增「行操作紧凑相连按钮组」章节(强制口径 + 按钮宽度实测表 + 禁止事项 + 适用范围)。复核以
git diff与 head 源码为准。注意:子任务的file_research读取返回了旧版本内容(操作列仍为 320/260),与 head diff(290/280)不符,故下表以直接源码核对为准。
| 页面 | 各列声明宽度之和 | scroll.x | 是否满足 scroll.x ≥ 列宽和 | 操作列声明 | 最宽场景(按钮合计 + 32px 内边距) | 是否溢出 |
|---|---|---|---|---|---|---|
| 文章列表 | 250+130+120+200+200+140+170+100+290 = 1600 | 1600 | ✅ 相等 | 290 | draft 态 4 按钮:60+60+72+60−3 = 249 +32 = 281 ≤ 290 | ✅ 不溢出 |
| 工作台 | 非 QA Tab:320+120+130+200+130+160+160+280 = 1500;加「质检评语」260 = 1760 | 1760 | ✅ 1760 ≥ 1760 | 280 | 4 个带图标 4×60−3 = 237 +32 = 269 ≤ 280 | ✅ 不溢出 |
「单行最多按钮数」核对(结合 canDeleteArticle:删除仅 draft/qa_failed(未发布)或 offline 可显):
| status | 查看 | 编辑 | 下架 | 撤回 | 定时发布 | 删除 | 上限 |
|---|---|---|---|---|---|---|---|
| draft | ✔ | ✔ | ✘ | ✘ | ✔ | ✔ | 4 |
| published | ✔ | ✔ | ✔ | ✔ | ✘ | ✘ | 4 |
| scheduled / qa_failed / offline | ✔ | ✔ | ✘ | 部分 | ✘ | 部分 | 3 |
published、删除需 offline,互斥)。head 已把旧注释「最多 5 个」更正为「最多 4 个」,正确。type="link" 平铺,规则要求「由各自批次推进」,届时需同步该页按钮宽度、操作列宽度与 scroll.x。RowActions.tsx JSDoc 写「无图标按钮…2 个汉字 44px」,而 rules/frontend.md 与实施报告已按实测订正为 ≈48px(47.8px);组件注释未同步。articles/page.tsx 旧注释把「撤回」列为「带图标」按钮,实际「撤回」无图标(2 汉字 ≈48px)。45-* 布局断言属自建/清理夹具的写库用例,日常只读回归可不跑;新增 3 条低级别可维护性问题可在后续测试重构时一并收敛。总体评价:本次为一次低风险的表层 UI 紧凑化 + 文档/e2e 配套变更,产品逻辑无改动,列宽与按钮数经独立复核自洽,防回归断言到位;质检对比仅引入 1 条 Medium、2 条 Low 的测试代码可维护性项,无阻断性风险,可随版本发布。
e2e/specs/52-article-entry-and-image.spec.ts | 修改 | 新增 1820 宽布局断言(文章列表) |
e2e/specs/53-unpublished-workbench.spec.ts | 修改 | 新增 1820 宽布局断言(工作台) |
e2e/specs/30-subpage-title-back.spec.ts | 修改 | 修复既有假红:[id] 文章路径解析为真实存在 id |
rules/frontend.md | 修改 | 更新「表格列宽纪律」与「文章列表操作列宽度」,新增「行操作紧凑相连按钮组」章节 |
plans/specs/.reports/2026-10-13-*.md | 文档 | 2 份实施/发布报告 |