Record page v4: the related column becomes a stack of same-shaped panels — chevron beside the title, hover-only handle and actions on the right (⋯ holds hide only), empty panels folded, the timeline as a panel that can be promoted to a column, one right-panel icon in the header, no crumb row, the drawer sized by its own width #27524

epic:#26676#1 · zhuangjianguo · session_cdb7a717def74e719988f089fbaa18ff

Part of the record-page epic #26676 — the v4 record page, final design (the maintainer, 2026-10-29: 「设计定稿：按画布 60 重写 #27524 / #27545 的 Target 并回队列」). Design boards: evidence branch claude/record-page-v2-evidence-20261027b @ a7825499aa, folder docs/design/record-page-v2-2026-10-27/v4/ — RecordPageV4Panels.dc.html (lead, 1440 page, arrived from the list ↗), RecordPageV4TwoCol.dc.html (lead, 1200), RecordPageV4Product.dc.html (product, no list trail), RecordPageV4Enlarged.dc.html (the 任务 tab active on the page), RecordDrawerV4Peek.dc.html (contact in the default split pane, 720), RecordDrawerV4Max.dc.html (the pane maximized), RecordDrawerV4Enlarged.dc.html (the 任务 tab active inside the pane), RecordMobile.dc.html (390), notes.md n41–n51 (n50 = the tab row, n51 = the HotCRM audit). Read with git show a7825499aa:<path>; never merge that branch. Sibling card #27545 owns the split / overlay / maximize mechanics; this card owns the page's anatomy. The boards were audited against HotCRM's declared metadata (highlightFields, inbound lookups, fieldGroups, page actions, view columns) — build to the metadata, the boards only illustrate it.

Source (main 273137d227, after PR #27310 / #27473)

• Related cards carry a title, count, and three always-visible icon buttons (＋ ⤢ ⋯); collapse, hide and keyboard move live in the ⋯ menu; drag has no hover affordance. Ten cards on a HotCRM contact, four of them with 0 rows, each taking a full card.
• The header action row ends with a segmented 「时间线 | 关联」 text control; a crumb row above the header carries ‹ back and ↑ ↓.
• Three tiers: three columns (details | resident timeline | related) above 1120, two columns with a 「相关 N」 rail toggle above 760, a tabbed tier (详情 / 时间线 / 关联) below; the embedded record is always the tabbed tier.
• Enlarging a related list (?related=) replaces the page body; the timeline is a resident column for worked objects (recordTimelineDefaultReason, console: one workspace-preference module (record open mode, drawer width, timeline / related column toggles) read per user × object, with a shared panel-toggle toolbar on the record page — defaults derived from the object, never metadata #27052).

Target (maintainer rulings of 2026-10-29, verbatim where quoted; not re-decidable here)

1. Panel header. Title, then the count chip. Clicking the header row (or the chip) switches to that panel's tab (item 8); on hover the title end shows ›, the tooltip reads 「查看全部 N 条」. On hover the RIGHT end shows ⠿ (drag to reorder with a drop line; focused, ⌥↑ / ⌥↓), ＋ (new) and ⋯ holding 隐藏 only. No collapse chevron, no collapse, no ⤢ (「右侧关联区域的折叠也不需要了吧」— ruled yes; the tab is the enlarged face). Nothing is reserved on the left when not hovered.
2. Empty panels (0 rows) fold into one line 「还有 N 个空关联 · 名字 · … · 展开」; non-empty panels keep their order.
3. Column foot 「已隐藏 N 张 · 显示 · 恢复默认顺序」 (restores order and hidden).
4. The right-column switch ⊟ (「右栏」, ⌘⇧,) lives in the top bar (item 7), drawn only when the face's tier has a right column; the segmented text control goes.
5. 动态 (was 时间线): a panel and a tab, never a column. The merged stream (comments, activity, history — console record page v3: frameless detail sections, one merged timeline (discussion + activity + field changes), compact related cards, header 1 primary + 2 secondary + ⋯ — the synthesized default page, drawn from the object's roles; the dead BuildPageOptions hints go #27055's merger) is the FIRST panel of the right column: a one-line composer, the newest 3 entries (5 at ≥ 1120), 「查看全部 N 条 →」 which opens the 动态 tab. The 动态 tab is the full stream with the filter chips 全部 · 活动 · 讨论 · 变更 and paging, URL ?related=timeline. The resident timeline column, the ⊞ / ⊟ promotion and recordTimelineDefaultReason retire (「宽屏时间线放中间不需要了吧」— ruled yes). Naming: 「动态」 in zh, 「Activity」 in en, across the ten i18n packs; record.timeline.* keys keep their ids, their values change.
6. Tiers — one rule by the container's own width. ≥ 760 px: details | right column (320 px); ≥ 1120 px: the same, with the details field grid at 3 columns, the right column 380 px and the 动态 panel showing 5. < 760 px (split pane at 720, phone): ONE column — details sections, then the right column's panels in their order; no tab tier (「同意」 to the stack). The three-column tier, the tabbed tier and the 「相关 N」 rail retire. The embedded record (split pane, overlay drawer, maximized) and the phone use the same rule.
7. One top bar on every face (40 px, above the record header; frame controls only). Left: breadcrumb 「对象 › 记录名」 — clicking the object name returns to the list (in the drawer one level down: 「← 路径」 as console record drawer v2: the bar is ↑ ↓ · ⤢ · ✕ (no object name, no counter); a related row or a lookup opens its record in place with a trail, ← / Esc go back one level; ⤢ carries the trail into the page; on the record page a related row opens a drawer over the page #26679 drew). Right, fixed order, each drawn only when it applies: the counter 「3 / 21」 + ↓ ↑ (only with a list context — the pane always, the page only when it arrived with a ?from= list trail; the counter's tooltip names the scope: the view's name, or the group when the list was grouped / a kanban column); ⊟ (item 4); ⤢ / ⤡ (the pane's maximize / restore, Record drawer v4: a bounded peek over the list — md cap instead of the field-count bucket, no dim overlay, the list stays readable and clickable, ⤢ maximizes in place at the same URL; the full page is reached only from the row ↗ and the header ⋯ #27545; on the page ⤡ 「收为抽屉」 only for readers who arrived through the row ↗); ✕ (pane faces only; always closes the whole path; never on the page). The header action row holds business actions only (1 primary + 2 secondary + ⋯, in the page's declared order). The crumb row and the small ‹ line above the title go.
8. A persistent tab row at the bottom edge of the header block, on every face: 「概览」 then one tab per panel — 动态 first, then the related panels in the arrangement's order — each with its count. The visible count is COMPUTED from the row's container width (ResizeObserver; recomputed on resize, sidebar collapse, pane drag): as many as fit, the rest in a 「+N ▾」 dropdown that lists them with counts; the active tab is always visible (it swaps into the last visible slot); 概览 always visible plus at least one more. Hidden panels' tabs sit at the end of the dropdown. Order and visibility follow record.related.arrangement. (「关联多他不是也折叠到下拉了吗」; 「显示几个相关表 tab 应该根据实际的屏幕宽度计算吧」.)
9. The enlarged state is the active tab. Top bar and record header unchanged; below the tab row the full-width table (all columns, paging, sort, inline edit where the FK allows — the child object's list face) fills the remaining height; URL ?related=object.field; Esc or 概览 returns. Not a modal, not a drill-down level, no path in the top bar, no compacted header. Inside the pane it fills the pane body the same way; maximizing the pane widens it in place.
10. Stored arrangement record.related.arrangement = { v, order, hidden, basedOn, seen } — collapsed is removed with no compatibility read (startup posture: no staged retirement). No metadata key is added.
11. Compact row's first column skips the FK that points back at this record (a product's line items name the opportunity, not the product). Unchanged from the earlier ruling.
12. Highlights are the object's declared highlightFields minus the name field (the title), max 6 — the boards show HotCRM's declared sets (lead: 公司 · 邮箱 · 线索状态 · 线索负责人; contact: 邮箱 · 客户 · 电话; product: 产品编号 · 产品名称 · 类别 · 启用). The contact object has no status field; nothing invents one.

File surface

ui/packages/plugin-detail/src/RelatedCardStack.tsx, RecordPageColumns.tsx, synth/recordPageColumns.ts, synth/relatedArrangement.ts, useRelatedArrangement.ts, RelatedListEmptyFold.tsx, synth/recordTimelineStream.ts (the promotion retires), ArrangedRelatedTab.tsx (retires), a new tab-row component beside them, ui/packages/components/src/custom/panel-toggles.tsx (retires or reduces to the one ⊟ icon) + renderers/layout/containers.tsx (the top-bar slot), ui/packages/app-shell/src/views/RecordDetailView.tsx, ui/packages/app-shell/src/views/recordDrawerStack.tsx (tier by container width), i18n in all ten packs, tests beside, changeset; ⛔ packages/spec/**; ⛔ the split / overlay / maximize mechanics (#27545). Serial-after #27056 (ui seat 1, branch claude/project-thread-g0nswr): its file surface overlaps this one (RelatedCardStack, RecordPageColumns, synth/recordPageColumns, useRelatedArrangement, RelatedListEmptyFold, recordDrawerStack) — claim after its PR is merged, or branch from it and say so.

Acceptance

1. Tests per target item: header anatomy (no chevron, header click = tab, hover ⠿ ＋ ⋯); keyboard reorder on the handle; empty fold line; foot; ⊟ only when a right column exists; 动态 as panel + tab, no promotion; the tier rule at 1440 / 1200 / 720 / 390 (the stack has no tab tier); the top bar's left and right ends per face; the tab row's visible count at three widths with the active tab always visible; the enlarged state keeps the header; the arrangement shape without collapsed; the compact row's first column; highlights = declared fields minus the name.
2. Screenshots on HotCRM against the boards — lead at 1440 (from the list ↗, with the trail) and 1200; contact in the split pane at 720, maximized, and with the 任务 tab active in the pane and on the page; product at 1440; a 390 phone — on a never-merged evidence branch, linked from the PR body.
3. The epic seat verifies the PR in the console preview against the boards before ACCEPT (maintainer: 「车队开发完后你审核效果」).
4. console record page: one page at two widths — three resident columns (details | timeline | related) at 1280 px and up, two columns with a collapsible related rail from 1024 px, today's tabs below that and in the drawer #26678 / console: one workspace-preference module (record open mode, drawer width, timeline / related column toggles) read per user × object, with a shared panel-toggle toolbar on the record page — defaults derived from the object, never metadata #27052 / console record page v3: frameless detail sections, one merged timeline (discussion + activity + field changes), compact related cards, header 1 primary + 2 secondary + ⋯ — the synthesized default page, drawn from the object's roles; the dead BuildPageOptions hints go #27055 / fix(plugin-detail,app-shell,components): record page round 2 — related OFF draws no column or rail, one segmented panel control in the header row, three columns in a 1440 window with the sidebar #27473 / console record drawer v2: the bar is ↑ ↓ · ⤢ · ✕ (no object name, no counter); a related row or a lookup opens its record in place with a trail, ← / Esc go back one level; ⤢ carries the trail into the page; on the record page a related row opens a drawer over the page #26679 pins updated to the new anatomy, not deleted.

_{Rewritten by the epic PM session session_cdb7a717-def7-4e71-9988-f089fbaa18ff on 2026-10-29 after the maintainer's 定稿 on canvas version 60; the earlier Target of this card (v4 panels, 2026-10-29 morning) is superseded in full.}