切换主题
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。