Feature: App Creation & Editing Flow (Airtable Designer UX, spec-compliant)

[hotlong]

Overview

Design and implement a complete App Creation & Editing Flow in ObjectUI, following spec协议要求，并对标 Airtable Interface Designer 的用户体验，覆盖 app/schema 创建、导航、页面、Dashboard 等全流程。

---

1. App Creation Wizard

• 多步表单（对标 Airtable，新建Interface Wizard）
• 步骤：
  1. App基础信息（名称、icon、描述、模板）
  2. 选择/新建业务对象（Object list，选中即自动生成侧边导航条）
  3. 拓扑导航树Builder（支持拖拽、无限递归分组）
  4. Branding（Logo、主题色、Favicon，可预览）
• 使用 spec 的 AppSchema ���准字段（强校验——name必须snake_case，传入DefineApp）

2. Navigation Designer

• 拖拽式组件树（递归 NavigationItemSchema）
• 快速添加（Object Page、Dashboard、Report、Group、外链URL）
• 所见即所得，左侧导航可实时预览

3. Page/Canvas Editor

• WYSIWYG 画布，支持单页/多页（PageSchema、DashboardSchema 全覆盖）
• 拖拽添加组件（Grid, Kanban, Gallery, Calendar, Dashboard集成Chart）
• 属性面板（各组件props、数据源、过滤、动作、外观配置）
• 支持与导航同步（新建页面→立即加到导航树）

4. Dashboard Editor

• 支持DashboardSchema，网格布局，拖拽排序
• Widget类型齐全（KPI卡片、表格、各类图表）
• Widget属性编辑（数据源、过滤、聚合，布局，样式）

5. Object View Configurator

• 映射 ListViewSchema/FormViewSchema
• 支持多视图切换、列显示控制、快速筛选器等
• 各种记录增删改（inline/new record/dialog/form）

6. 快捷交互与底层特性

• 实时预览/编辑模式切换（Edit/Preview/Code）
• Wizard 状态管理 & draft/undo/redo
• JSON Schema/TypeScript Code 双向预览
• 支持移动端（mobileNavigation配置项）
• 完全无后端依赖的mock/preview模式
• 完整的 i18n 支持

---

交付要求

• 前端页面设计稿（含设计系统）
• React 组件实现（Tailwind + cva + @object-ui/types协议驱动）
• 完善 Vitest + RTL 测试用例
• Demo/Storybook 场景及开发文档
• 保证协议兼容 objectstack-ai/spec 的 App/Page/View/Dashboard/NavigationItem Schema
• 提交前必须 pnpm test 通过并更新 roadmap/issue

---

相关参考

https://github.com/objectstack-ai/objectui/wiki/%E5%BA%94%E7%94%A8%E5%88%9B%E5%BB%BA-&-%E7%BC%96%E8%BE%91%E6%B5%81%E7%A8%8B%E8%AE%BE%E8%AE%A1%E6%96%B9%E6%A1%88

• spec repo: AppSchema/Nav/Page/Dashboard/View
• Airtable Interface Designer UX
• [Notion page builder]

---

（如需子任务，请拆分 navigation、dashboard、canvas/page editor 等为多issue，或指定子模块 owner）