跳转正文

Editor Task ​

适用范围:Legacy Admin Kit / Schema(@yoyoboot/yoyo-admin-kit、旧 admin-vue)。新 admin-nuxtui 使用 Nuxt UI;本页不是新宿主的必经开发路线。

Editor Task 是 Create/Edit、权限配置、恢复和 feature 配置等有明确提交边界的共享任务 composition。标准入口是 YEditorPanel + YTaskActions + YModal/YDrawer。

单组件 props 见 YEditorPanel、YModal 与 YDrawer。

Surface 选择 ​

场景选择原因
聚焦、字段适中、需阻断背景操作Dialog默认编辑任务
长表单、树、详情上下文或需要更大纵向空间Drawer保留列表上下文并提供稳定滚动区
多阶段业务、独立 URL、需要大面积比较Page使用 Page Frame,不强塞 overlay

声明的 Dialog/Drawer 不会仅因 viewport 宽度被悄悄换成另一种业务 surface;各 surface 自己负责响应式呈现。

Shared anatomy ​

  • surface title/description、focus trap 与 focus restore;
  • loading/error/retry/empty;
  • dirty close confirmation、submitting close lock;
  • desktop footer 与 mobile 稳定 action area/safe area;
  • cancel/submit 顺序与触达面积;
  • 可选 sm | md | lg 几何、header actions 与显式全屏/还原;
  • 编辑任务可显式 opt-in “保存后继续编辑”,但仍只保留一个主提交动作;
  • nested confirm 等 overlay stack。

Feature 不应再次实现 task footer、discard confirm 或通用 loading/error/empty anatomy。

State owner ​

  • TanStack Form/feature:字段、validation、draft、dirty 的权威值。
  • Data Workbench:editor/row overlay 的 open、load、reload、commands 与 task coordination。
  • Permission/business feature:权限树、mutation 与 error delivery。
  • YEditorPanel:根据显式 props 呈现共享 View,并发出 submit/retry/close 意图。

dirty/busy 可以通过 Data Workbench setTaskState 投影到 composition,但不能在 shared component 中复制业务草稿。

保存后继续编辑 ​

默认保存合同不变:Create/Edit 成功后关闭。只有 consumer 明确声明能力且当前是既有记录 Edit 时,footer 才显示“保存后继续编辑”checkbox;checkbox 不触发提交,只把唯一主按钮从“保存”切换为“保存并继续”,Enter/native form submit 读取同一选择。

继续编辑链路为:写入成功 → getForEdit 权威回读 → 重建 clean baseline/并发令牌 → 保持同一任务打开 → 刷新列表。写入失败、写成功但回读失败、列表刷新失败必须是三个可区分状态;回读失败的重试禁止重复写入。

真实 consumer ​

  • Data Workbench editor host — packages/yoyo-admin/admin-kit/src/kit/data/LegacyYDataTable.vue
  • Edition Feature — src/app/administration/edition-management/EditionFeatureEditor.vue
  • Tenant Feature — src/app/administration/tenant-management/tenants/TenantFeaturesOverlay.vue
  • Tenant Admin Recovery — src/app/administration/tenant-management/tenants/TenantAdminRecoveryOverlay.vue
  • Role Permission — src/app/administration/identity/roles/RolePermissionEditor.vue
  • Identity Users profile edit — 显式启用保存后继续、lg 与 fullscreen;只保存资料字段
  • 可重复 fixture:/frontend-module-demo/list-demo/products

验收重点 ​

  • 最后字段可完整滚到 sticky footer 上方,mobile safe area 不遮挡内容。
  • submitting 期间不能关闭并重复提交。
  • dirty close 明确确认,保存/取消后 focus 恢复到触发点。
  • loading/error/empty 不与表单正文同时争夺 task body。

YoyoBoot · 从真实项目走向可复用能力