Skip to content

fix(app-shell): metadata 详情抽屉的 SchemaForm 按实例作用域取 id (#5092) - #5105

Merged
yinlianghui merged 1 commit into
mainfrom
claude/issue-5092-schemaform-instance-scope
Aug 18, 2026
Merged

fix(app-shell): metadata 详情抽屉的 SchemaForm 按实例作用域取 id (#5092)#5105
yinlianghui merged 1 commit into
mainfrom
claude/issue-5092-schemaform-instance-scope

Conversation

@yinlianghui

@yinlianghuiyinlianghui commented Aug 18, 2026

Copy link
Copy Markdown
Collaborator

Fixes#5092

按 PM 裁定评论 #5092 (comment) 取方向 3(= 方向 2「宿主显式传作用域」+ 开发期重复 id 断言)。方向 1(useId() 实例命名空间)是顶层 id 契约变更,属维护者题,裁定里留了否决窗 —— 本 PR 落的 3 对既有面是纯加法,不构成 1 的障碍。

基线 fc1511152(已含 PR #5096 的 idPath 贯穿,本卡直接复用)。

前提复测(在含 #5096 的新基线上逐条重测,卡面读数全部成立)

  1. 在途路径与卡面逐行一致、行号未漂移:ResourceEditPage.tsx 先渲染自己的 SchemaForm(第 2459 / 2482 行,两条互斥分支之一),再在第 2647 行渲染 MetadataDetailDrawer;后者是 Radix Sheet,打开时页面表单仍在 DOM 里,Sheet 内挂 MetadataResourceEditPage(embedded)或 EmbeddedItemEditor(第 221 行)。
  2. 实测形复现(真 SchemaForm 渲染,两实例同挂,字段 name / label):
ids: ["mdf-name","mdf-label","mdf-name","mdf-label"]
DUPLICATES: ["mdf-name","mdf-label"]
Name[0] host=page -> target in=page value=page
Name[1] host=drawer -> target in=page value=page <- 抽屉的标签,指向页面表单的控件
  1. idPath 贯穿(SchemaFormProps.idPath / joinIdPath / fieldHostId)已在基线到位,形状可直接复用。

补充读数(卡面未写,影响落点):PreviewComponent 由 !embedded && … 求值,embedded 下恒为 undefined,所以抽屉里只会走第 2482 行那条分支;第 2459 行那条恒属页面侧。两处仍统一传同一个 formIdPath(embedded 时才有值),这样即便将来该门放开,作用域也不会漏。

改动

  • 两个抽屉侧挂载点各传一个稳定作用域段作为其内部 SchemaForm 的 idPath:embedded 的 MetadataResourceEditPage 用 drawer-metadata,EmbeddedItemEditor 用 drawer-embedded-item。顶层 id 变 mdf-drawer-metadata.{字段名} / mdf-drawer-embedded-item.{字段名}。
  • 页面主表单不传,顶层 id mdf-{字段名} 一字不动([app-shell] metadata-admin FieldRow 的宿主 id 不带路径作用域(mdf-{字段名})—— 同名子字段产生重复 DOM id,第二个标签的 for 解析到第一个字段的控件 #5062 裁定的承诺),由钉子逐字锁住。
  • 语义未变:作用域段就是一个人工祖先段,idPath 仍是祖先路径。
  • 段的三条约束都有钉:两段互不相同;无空白(这些 id 会被当 aria-labelledby IDREF 消费,按空白切分);含 -,而 - 不在 metadata machine name 文法(^[a-z][a-z0-9_]*$)内、也不在这些 JSON-Schema 用的 camelCase 属性名内,因此 mdf-{段}.{字段} 不可能被任何真实字段路径拼出。
  • SchemaForm 增开发期重复 id 断言:检测同文档重复的 mdf- 宿主 id 并 console.error 响亮告警,消息点名冲突 id 与成因。生产构建零开销(NODE_ENV 门);只有子树最外层那个表单扫,嵌套的几十个不重复扫。这是把方向 2「漏传新并挂点就静默复发」变响亮的那一半。

测试

新增 SchemaForm.instanceIdScope.test.tsx(8 个)。复现钉走真实挂载点(MetadataDetailDrawer 盖在 MetadataResourceEditPage 上,两种抽屉体各一)而非手传 idPath —— 手传的话挂载点漏传时钉子照绿,就是个幻检查。

  • pnpm exec vitest run packages/app-shell/src/views/metadata-admin/ → 180 files / 1858 passed | 1 skipped
  • 四个红线文件计数逐一吻合:widgetLabelling 62、nonRegistryLabelling 40、nestedIdScope 7、gridCellNaming 5(合计 114 全绿)
  • 仓根 turbo run type-check → 81 successful, 81 total
  • eslint(4 个改动文件)→ 0 errors;新增代码块内 0 warning

反向验证(先书面预判,commit 后变异,git checkout -- 还原;四条方向全部与预判相符)

变异预判实测
(a) 摘掉 EmbeddedItemEditor 的作用域段仅 embedded-item 那条钉红,首失在 duplicates1 red:expected [ 'mdf-name', 'mdf-label' ] to deeply equal [],且 dev 断言把完整诊断打了出来;metadata 抽屉那条仍绿
(b) 作用域段改成含空格串只有段契约钉抓得住;两条 DOM 钉仍绿 —— getElementById / label[for] 都是整串精确匹配,happy-dom 不做 IDREF 切分1 red:expected 'drawer metadata' not to match /\s/,两条 DOM 钉果然全绿
(c) 页面主表单也传同一个段3 red(两条抽屉钉 + 顶层拼写钉);裸 SchemaForm 那条不过 ResourceEditPage,仍绿3 red,首失为 expected [ 'mdf-drawer-metadata.name', …(1) ] to deeply equal [] —— 全局共用一个段只是把碰撞挪了个位置,证实段必须按挂载点分
(d) 把 dev 断言改成 no-op仅「shouts…」红;另两条断言钉仍绿,因为它们断的是"不发生"1 red:expected 0 to be greater than 0,另两条如实绿

(b) 与 (d) 两条的方向值得写明:它们不是 before-green/after-red 的常规形。(b) 说明含空白的段在 DOM 侧不会自己报错,契约钉是唯一防线;(d) 说明三条断言钉里只有一条是正向守卫,另两条是条件钉 —— 如实记下,免得下一个人误读成三条都在守断言器。

界外

未发现新的半径外缺陷。另有几个 SchemaForm 挂载点(PackageFormDialog、ObjectHooksPanel、各 inspector)经核不与页面表单同文档并挂:inspector 那几处与第 2459/2482 行是互斥三元分支,同一时刻页面上只有一个表单。若将来真并挂,新加的开发期断言会当场响。

Generated by Claude Code

@claude
fix(app-shell): scope the metadata detail drawer's SchemaForm ids per…
e21d0dc
… instance (#5092)
MetadataDetailDrawer is a Radix Sheet, so opening it leaves the page's own
SchemaForm mounted underneath. Top-level field ids were spelled `mdf-{field}`
with no instance dimension, so every field name the two forms share (name,
label, description) appeared twice in one document — and a `label[for]`
resolves to the FIRST match in document order, i.e. the page form. The
drawer's labels focused, and assistive tech announced, the controls of the
form the drawer covers.
Both drawer-side mount points now pass an id scope segment as their form's
`idPath` (the ancestor path objectui#5062 already threads): the embedded
MetadataResourceEditPage and EmbeddedItemEditor. The page form passes nothing,
so its top-level ids are byte-for-byte unchanged — #5062's "top level does not
move" ruling is untouched.
Scoping per mount point relies on every host remembering to pass a segment, so
dev builds now report any duplicate `mdf-` host id in the document. A future
second-form mount point that forgets one fails loudly instead of silently
re-crossing the wires. Production is untouched: the check is behind a
NODE_ENV gate and the outermost form of a subtree runs it, not every nested one.
Co-authored-by: Claude <noreply@anthropic.com>
@yinlianghuiyinlianghui mentioned this pull request Aug 18, 2026
Closed
@github-actions

github-actionsBot commented Aug 18, 2026

Copy link
Copy Markdown
Contributor

✅ Console Performance Budget

MetricValueBudget
Main entry (gzip)25.3 KB350 KB
Entry fileindex-Cm3bb3eM.js—
StatusPASS—

📦 Bundle Size Report

PackageSizeGzipped
app-shell (index.js)9.56KB3.59KB
app-shell (runtime-config.js)7.42KB2.32KB
app-shell (types.js)0.01KB0.04KB
app-shell (urlParams.js)8.92KB3.41KB
auth (AuthContext.js)0.31KB0.24KB
auth (AuthGuard.js)1.17KB0.53KB
auth (AuthProvider.js)25.13KB5.40KB
auth (AuthShell.js)3.49KB1.40KB
auth (ForgotPasswordForm.js)12.21KB3.45KB
auth (LoginForm.js)18.13KB5.39KB
auth (PreviewBanner.js)0.90KB0.50KB
auth (RegisterForm.js)6.64KB2.21KB
auth (SocialSignInButtons.js)9.60KB3.89KB
auth (UserMenu.js)3.40KB1.22KB
auth (auth-gate-events.js)1.29KB0.66KB
auth (authStyles.js)5.04KB1.72KB
auth (createAuthClient.js)40.21KB10.79KB
auth (createAuthenticatedFetch.js)6.34KB2.43KB
auth (index.js)2.71KB1.22KB
auth (invitation-status.js)1.22KB0.70KB
auth (org-roles.js)6.66KB2.78KB
auth (phone-identifier.js)1.11KB0.66KB
auth (types.js)0.59KB0.35KB
auth (useAuth.js)5.02KB0.88KB
auth (useIsWorkspaceAdmin.js)1.61KB0.85KB
collaboration (CommentThread.js)26.07KB7.56KB
collaboration (LiveCursors.js)3.17KB1.27KB
collaboration (PresenceAvatars.js)6.49KB2.64KB
collaboration (PresenceProvider.js)2.79KB1.13KB
collaboration (index.js)1.65KB0.73KB
collaboration (useCollaborationTranslation.js)6.05KB2.52KB
collaboration (useCommentSearch.js)1.98KB0.88KB
collaboration (useConflictResolution.js)7.75KB1.86KB
collaboration (useMentionNotifications.js)1.81KB0.68KB
collaboration (usePresence.js)6.33KB1.84KB
collaboration (useRealtimeSubscription.js)7.91KB2.01KB
components (index.js)502.20KB112.21KB
core (index.js)4.11KB1.62KB
create-plugin (index.js)10.08KB3.26KB
data-objectstack (index.js)159.03KB44.08KB
fields (index.js)234.25KB58.48KB
i18n (LocalizationContext.js)1.76KB0.96KB
i18n (currency.js)1.22KB0.64KB
i18n (i18n.js)4.28KB1.75KB
i18n (index.js)3.35KB1.38KB
i18n (pickLocalized.js)3.69KB1.73KB
i18n (provider.js)23.12KB7.62KB
i18n (useDisplayLocale.js)2.84KB1.45KB
i18n (useObjectLabel.js)27.59KB6.63KB
i18n (useSafeTranslation.js)7.77KB3.13KB
layout (index.js)39.16KB10.97KB
mobile (MobileProvider.js)0.92KB0.49KB
mobile (ResponsiveContainer.js)0.94KB0.38KB
mobile (breakpoints.js)1.51KB0.70KB
mobile (createOfflineDataSource.js)5.61KB1.74KB
mobile (index.js)1.50KB0.62KB
mobile (offlineQueue.js)3.91KB1.35KB
mobile (pwa.js)0.97KB0.49KB
mobile (serviceWorker.js)1.48KB0.62KB
mobile (serviceWorkerSource.js)3.41KB1.48KB
mobile (useBreakpoint.js)1.54KB0.65KB
mobile (useGesture.js)6.96KB1.98KB
mobile (useOfflineSync.js)1.99KB0.72KB
mobile (usePullToRefresh.js)2.53KB0.85KB
mobile (useResponsive.js)0.71KB0.42KB
mobile (useResponsiveConfig.js)1.36KB0.63KB
mobile (useSpecGesture.js)4.32KB1.64KB
mobile (useTouchTarget.js)1.01KB0.54KB
permissions (MePermissionsProvider.js)9.35KB3.31KB
permissions (PermissionContext.js)0.31KB0.25KB
permissions (PermissionGuard.js)0.89KB0.45KB
permissions (PermissionProvider.js)4.42KB1.42KB
permissions (evaluator.js)5.12KB1.74KB
permissions (index.js)0.91KB0.41KB
permissions (store.js)0.91KB0.42KB
permissions (useFieldPermissions.js)1.28KB0.52KB
permissions (usePermissions.js)1.81KB0.83KB
plugin-ai (index.js)15.75KB3.80KB
plugin-calendar (index.js)46.62KB12.83KB
plugin-charts (index.js)64.75KB18.37KB
plugin-chatbot (index.js)181.21KB43.14KB
plugin-dashboard (index.js)127.85KB32.73KB
plugin-designer (index.js)212.39KB42.83KB
plugin-detail (index.js)241.12KB60.43KB
plugin-editor (index.js)2.46KB1.10KB
plugin-form (index.js)123.21KB29.85KB
plugin-gantt (index.js)164.10KB39.87KB
plugin-grid (index.js)197.61KB53.03KB
plugin-kanban (index.js)52.72KB14.54KB
plugin-list (index.js)111.17KB26.99KB
plugin-map (index.js)18.72KB6.09KB
plugin-markdown (index.js)13.72KB4.69KB
plugin-report (index.js)41.97KB11.33KB
plugin-timeline (index.js)26.68KB7.66KB
plugin-tree (index.js)8.50KB2.88KB
plugin-view (index.js)83.81KB20.49KB
providers (DataSourceProvider.js)0.75KB0.39KB
providers (MetadataProvider.js)1.37KB0.59KB
providers (ThemeProvider.js)1.90KB0.85KB
providers (UploadProvider.js)11.66KB3.50KB
providers (index.js)0.44KB0.22KB
providers (types.js)0.01KB0.04KB
react-runtime (index.js)5.62KB2.34KB
react (LazyPluginLoader.js)3.77KB1.33KB
react (SchemaRenderer.js)27.53KB9.41KB
react (data-invalidation.js)5.05KB2.08KB
react (index.js)1.28KB0.68KB
react (schema-input.js)1.45KB0.83KB
react (spec-input.js)0.20KB0.18KB
sdui-parser (codegen.js)5.41KB2.34KB
sdui-parser (index.js)4.77KB2.16KB
sdui-parser (input-type.js)2.84KB1.40KB
sdui-parser (parse.js)10.76KB3.17KB
sdui-parser (provenance.js)3.66KB1.82KB
sdui-parser (types.js)0.29KB0.24KB
sdui-parser (validate.js)6.92KB2.40KB
types (ai.js)0.20KB0.17KB
types (api-types.js)0.20KB0.18KB
types (app.js)2.87KB0.99KB
types (base.js)0.20KB0.18KB
types (blocks.js)0.20KB0.18KB
types (complex.js)0.20KB0.18KB
types (crud.js)0.20KB0.18KB
types (dashboard-filter-alias.js)6.23KB2.74KB
types (data-display.js)0.20KB0.18KB
types (data-protocol.js)0.20KB0.19KB
types (data.js)0.20KB0.18KB
types (designer.js)1.87KB0.85KB
types (disclosure.js)0.20KB0.18KB
types (error-code.js)1.54KB0.88KB
types (feedback.js)0.20KB0.18KB
types (field-types.js)0.20KB0.18KB
types (form.js)0.20KB0.18KB
types (http-retry.js)4.32KB2.02KB
types (index.js)3.05KB1.52KB
types (layout.js)0.20KB0.18KB
types (managed-by.js)0.19KB0.18KB
types (mobile.js)2.59KB1.31KB
types (navigation.js)0.20KB0.18KB
types (objectql.js)0.20KB0.18KB
types (overlay.js)0.20KB0.18KB
types (permissions.js)0.20KB0.18KB
types (plugin-scope.js)0.20KB0.18KB
types (record-components.js)0.20KB0.19KB
types (record-semantics.js)1.28KB0.67KB
types (registry.js)0.20KB0.18KB
types (reports.js)0.20KB0.18KB
types (spec-report.js)5.05KB1.93KB
types (system-fields.js)3.33KB1.54KB
types (theme.js)0.20KB0.18KB
types (ui-action.js)3.40KB1.71KB
types (views.js)0.20KB0.18KB
types (widget.js)0.20KB0.18KB

Size Limits

  • ✅ Core packages should be < 50KB gzipped
  • ✅ Component packages should be < 100KB gzipped
  • ⚠️ Plugin packages should be < 150KB gzipped

@yinlianghuiClaude

yinlianghui commented Aug 18, 2026

Copy link
Copy Markdown
CollaboratorAuthor

PM 验收:ACCEPT(session_01GTRjn8xBqp75dk7kFupVRt,objectui 分片)

实物核验:merge-base fc1511152 = 派发基线(含 PR #5096 的 idPath);head e21d0dc38;5 files, +459/−6;标识 grep msg/diff 双零,trailer 唯一正确;content/docs/releases/** 零触碰;fieldHostId/顶层拼写的 diff 面仅注释与断言器,mdf-{字段名} 逐字不变 ✅。

CI 亲读(jobs 端点,步级时间戳):19/20 终态全绿零失败(4 个 Test shard、Type Check、Lint、Live E2E、Bundle Analysis 等全 success,2 skipped 为 path-filter);唯一未终态是 Build & E2E,停在 Playwright 系统依赖安装步、无任何报错,且本单两次实证该端点有读数滞后(shards 实际 00:36-37 完成、端点报 in_progress 半小时)—— auto-merge 的语义即「绿才合、红不合」,把最后一格终态交给它,若意外转红 PM 下一跳处置。

验收要点:

  1. 方向 3 按裁定落地且工程判断到位:作用域段含 - 故 machine name 文法(^[a-z][a-z0-9_]*$)与 camelCase 属性名都拼不出它 —— 人工祖先段与真实字段路径结构上不可碰撞,这条约束进了契约钉;nesting context 让「最外层才扫」而页面表单与抽屉表单互为兄弟都算最外层 —— 恰是把两者区分开的机制。
  2. 四条变异全部预判相符,其中 (b) 最有分量:含空白的段在 DOM 侧不会自己报错(getElementById/label[for] 整串匹配、happy-dom 不切 IDREF),契约钉是唯一防线 —— 这一格不是 before-green/after-red 模板,是「无门可抓所以钉子必须存在」的实证;(c) 反证段必须按挂载点分;(d) 如实记录三条断言钉里只有一条是正向守卫。
  3. 复现钉走真实挂载点而非手传 idPath(手传则漏传时钉子照绿 = 幻检查),(a) 的红即该设计的自验 —— 这个形记入案头。
  4. 消费半径按「规则被谁消费」扫:全仓 11 处 SchemaForm 挂载点逐一判定并挂性(inspector 三元互斥、EmbeddedItemEditor 唯一调用方),将来真并挂时开发期断言当场响 —— 方向 3 的已知弱点(漏传静默复发)被双保险覆盖。
  5. 附加取证记录:pgrep -f 自匹配坑复现并按显式 PID 清理;jobs/check-runs 端点滞后的新数据点(shard 完成后 ~30 分钟假 in_progress)刷新了案头滞留上限认知。

三件套照常:本评论 → undraft → auto-merge(SQUASH)。#5091/#5097 家族裁定(是否走方向 1 的 useId 命名空间)不受本单阻塞,维护者可随时在 #5092 否决方向 3 —— 方向 1 覆盖方向 3,现落地不构成障碍。

Generated by Claude Code

@yinlianghui
yinlianghui marked this pull request as ready for review August 18, 2026 00:40
@yinlianghui
yinlianghui added this pull request to the merge queueAug 18, 2026
Merged via the queue into main with commit 3fd9f79Aug 18, 2026
20 of 21 checks passed
@yinlianghui
yinlianghui deleted the claude/issue-5092-schemaform-instance-scope branch August 18, 2026 00:40
This was referenced Aug 18, 2026
Merged
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

tests

Projects

None yet

Milestone

No milestone

2 participants

@yinlianghui@claude