[Feature]: 根据协议开发组件

[hotlong]

根据 packages/spec/src/ui 目录下的 Zod 定义文件，你需要开发以下核心前端组件。我将它们按功能模块进行了分类：

1. 应用程序框架 (App Shell & Navigation)

基于 app.zod.ts 和 theme.zod.ts：

• AppLayout: 应用的主框架组件。
  • 需要消费 AppBrandingSchema 来应用 Logo、Favicon 和主色调。
  • 需要集成 ThemeProvider 来处理 theme.zod.ts 中定义的颜色和排版配置。
• NavigationSidebar:侧边导航栏。
  • 需要根据 NavigationItemSchema 递归渲染菜单树。
  • 支持 GroupNavItem (折叠/展开) 和不同类型的子菜单项 (object, dashboard, page, url)。

2. 视图组件 (Views)

基于 view.zod.ts，这是核心数据展示部分：

• ViewContainer: 视图容器，根据 type (grid, kanban, etc.) 动态加载对应的子视图组件。
• GridView (Data Table):
  • 最基础的列表视图。
  • 支持列配置 (columns)、排序 (sort)、筛选 (filter) 和分页。
• KanbanBoard:
  • 基于 KanbanConfigSchema。
  • 实现卡片拖拽、按字段分组 (groupByField) 和列汇总 (summarizeField)。
• CalendarView:
  • 基于 CalendarConfigSchema。
  • 在日历上展示记录，处理开始/结束时间 (startDateField, endDateField)。
• GanttChart:
  • 基于 GanttConfigSchema。
  • 展示任务进度和依赖关系。
• FilterBuilder:
  • 通用组件，用于构建复杂的筛选条件 (filter 属性)，支持 MongoDB 风格的查询构建。

3. 页面与布局 (Pages & Layout)

基于 page.zod.ts：

• PageRenderer:
  • 根据 PageSchema 渲染自定义页面。
  • 处理页面模板布局 (template)，如 "header-sidebar-main"。
• RegionContainer:
  • 渲染页面中的特定区域 (PageRegionSchema)。
• ComponentLoader:
  • 根据 PageComponentSchema 中的 type 动态加载和渲染具体的 UI 组件（如 "steedos-labs.related-list"）。

4. 仪表盘与图表 (Dashboards)

基于 dashboard.zod.ts：

• DashboardGrid:
  • 基于 react-grid-layout 或类似库，渲染网格布局 (layout 属性)。
• WidgetWrapper:
  • 通用小部件容器，处理标题、边框和通用操作。
• 核心图表组件库:
  • 需要开发或封装一组图表组件来支持 ChartType 枚举：
    • MetricWidget (指标卡)
    • BarChart, LineChart, PieChart, DonutChart, FunnelChart (通常基于 ECharts, Recharts 或 Chart.js 封装)
    • TableWidget (仪表盘专用的小型表格)

5. 报表 (Reports)

基于 report.zod.ts：

• ReportViewer:
  • 报表查看器。
• ReportTable:
  • 高级表格，支持分组 (ReportGroupingSchema) 和聚合计算 (aggregate)。
  • 需要支持 tabular (普通), summary (分组), matrix (二维矩阵) 三种模式的渲染。
• ReportChart:
  • 报表中嵌入的可视化图表。

6. 动作与交互 (Actions)

基于 action.zod.ts：

• ActionBar / Toolbar:
  • 在列表或记录详情页渲染按钮组。
• ActionModal:
  • 当动作配置了 params (参数) 时，弹出的表单对话框，用于在执行动作前收集用户输入。
• ActionExecutor:
  • (非纯 UI) 处理动作执行逻辑的 Hook 或服务，支持 script, url, api 等不同类型的动作。

7. 表单与字段 (Forms & Fields)

基于 widget.zod.ts 和 view.zod.ts 中的表单部分：

• FieldRenderer:
  • 根据字段类型选择并渲染对应的输入组件。
• 基础输入组件库:
  • 实现 FieldWidgetPropsSchema 接口的一系列组件：
  • TextInput, NumberInput, Select, DatePicker, BooleanSwitch 等。

建议优先级：

1. AppLayout & Navigation (应用骨架)
2. GridView & FormRenderer (最基础的数据增删改查)
3. PageRenderer (自定义页面能力)
4. Action System (业务逻辑触发)
5. Dashboard & Charts (数据可视化)
6. Kanban/Calendar/Gantt (高级视图)