Skip to content

Console 集成 App Creation Wizard — 完整功能可用 #760

@hotlong

Description

@hotlong

背景

AppCreationWizard 组件(#743)已在 @object-ui/plugin-designer 中完成开发(PR #739, #745 已合并),包括:

  • 4步向导(基本信息 → 对象选择 → 导航构建 → 品牌个性化)
  • 完整 i18n(94 keys × 10 locales)
  • 取消确认 / 保存草稿 / 步骤校验
  • 165 个单元测试全部通过
  • 已注册到 ComponentRegistryapp-creation-wizard

但该组件尚未集成到 Console 应用(apps/console)中,用户无法在实际界面中使用「新建应用」功能。

开发内容

1. Console 路由与页面

  • apps/console/src/App.tsx 添加新建应用路由(如 /create-app 或全局入口)
  • 创建 apps/console/src/pages/CreateAppPage.tsx 页面,渲染 AppCreationWizard
  • useMetadata() 获取 objects 列表,传入 availableObjects prop
  • 处理 onComplete 回调 — 调用 wizardDraftToAppSchema() 转换后通过 API 创建应用(或 mock 模式下写入 metadata)
  • 处理 onCancel 回调 — 返回上一页/首页
  • 处理 onSaveDraft 回调 — 保存草稿到 localStorage 或 API
  • 创建成功后导航到新应用首页 /apps/:newAppName

2. 入口触达

  • AppSidebar 侧边栏 App Switcher 中添加「+ 新建应用」按钮
  • 在首页/无应用时(No Apps Configured 空状态)添加「创建第一个应用」CTA
  • CommandPalette(⌘+K)中添加「Create New App」命令

3. 编辑已有应用

  • AppSidebar 或应用设置中添加「编辑应用」入口
  • 复用 AppCreationWizardinitialDraft prop 加载已有应用配置
  • 编辑模式下更新而非新建

4. DefineApp API 集成

  • 对接 @objectstack/client 的 DefineApp API 或 kernel AppPlugin
  • MSW mock handler 支持应用 CRUD(创建/更新/删除)
  • 创建成功后刷新 metadata(useMetadata().refresh()
  • 错误处理与 toast 通知

5. NavigationDesigner 独立集成

  • 在应用设置页面中集成 NavigationDesigner 组件
  • 支持在已有应用上修改导航结构并保存

6. 测试

  • Console 集成测试:从入口 → 完成4步向导 → 创建成功 → 跳转
  • Console 集成测试:编辑已有应用
  • Console 集成测试:取消/保存草稿流程
  • Console 集成测试:CommandPalette 触发创建应用
  • pnpm test 全量通过

7. 文档与 Roadmap

  • 更新 Console 文档(content/docs/guide/console.mdconsole-architecture.md),补充 Create App 路由与页面说明
  • 更新 ROADMAP.md,在 P1.11 下增加 Console 集成子项
  • 补充 Storybook story(如有独立的 Console-level story)

关键引用

  • 组件实现:packages/plugin-designer/src/AppCreationWizard.tsx
  • 类型定义:packages/types/src/app.tsAppWizardDraft, wizardDraftToAppSchema
  • ComponentRegistry 注册:packages/plugin-designer/src/index.tsx
  • Console 主路由:apps/console/src/App.tsx
  • Console 侧边栏:apps/console/src/components/AppSidebar.tsx
  • Console CommandPalette:apps/console/src/components/CommandPalette.tsx
  • 关联 Issue:App Creation Wizard(多步应用向导) #743

交付要求

  • Console 中可完整走通「新建应用」全流程
  • 可从 Sidebar、CommandPalette、空状态页三个入口触达
  • 支持编辑已有应用配置
  • pnpm test 必须全量通过
  • 更新 Roadmap 和开发文档

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions