Skip to content

Commit 3d19b17

Browse files
Copilothotlong
andcommitted
Restructure evaluation to clarify dual component system architecture
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent 7ce8547 commit 3d19b17

1 file changed

Lines changed: 183 additions & 37 deletions

File tree

docs/OBJECTSTACK_COMPONENT_EVALUATION.md

Lines changed: 183 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,31 @@
1212

1313
### 关键发现
1414

15-
-**已实现76个渲染器组件**,涵盖8大类别
15+
-**平台基础组件**: 已实现76个渲染器,涵盖8大类别(通用UI组件)
16+
- 📝 **对象组件**: 规划10个核心组件(Q2 2026),基于Object定义自动生成UI
1617
-**集成60个Shadcn UI基础组件**作为底层原语
17-
- 🚧 **协议支持程度**: View (100%), Form (100%), CRUD (80%), Object (规划中)
18-
- 📊 **组件覆盖率**: 基础功能100%,高级功能85%
18+
- 🚧 **协议支持程度**: View (100%), Form (100%), Object (0%, Q2规划)
19+
- 📊 **组件覆盖率**: 平台基础组件100%,对象组件0%
1920
- 🎯 **代码质量**: 平均每个渲染器80-150行,保持精简
2021

22+
### 双组件系统架构
23+
24+
ObjectUI采用**两套独立但互补的组件系统**
25+
26+
#### 1. 平台基础组件(Platform Basic Components)
27+
- **定位**: 通用UI组件,适合灵活自定义场景
28+
- **数据源**: 任意API、静态数据、手动定义Schema
29+
- **优势**: 高度灵活、完全可控、学习成本低
30+
- **示例**: `data-table`, `form`, `list`, `card`
31+
- **当前状态**: 76个组件 ✅
32+
33+
#### 2. 对象组件(Object Components)
34+
- **定位**: 基于ObjectStack Object定义自动生成UI
35+
- **数据源**: Object定义(.object.yml文件)驱动
36+
- **优势**: 零配置CRUD、自动关系处理、类型安全、维护性强
37+
- **示例**: `object-table`, `object-form`, `object-list`
38+
- **当前状态**: 0个组件,Q2 2026规划 📝
39+
2140
---
2241

2342
## 1. 组件架构概览
@@ -60,11 +79,70 @@ ObjectUI采用清晰的三层组件架构:
6079
- **Shadcn组件** = 纯UI展示,接受props控制
6180
- **ObjectUI渲染器** = Schema解释器,连接数据源,处理业务逻辑
6281

82+
### 1.3 双组件系统架构
83+
84+
**重要**: ObjectUI包含**两套独立但互补的组件系统**
85+
86+
#### 系统A: 平台基础组件(76个,已实现)
87+
88+
**特征**:
89+
- 通用UI组件,不依赖Object定义
90+
- Schema手动定义(columns, fields等)
91+
- 高度灵活,适合自定义场景
92+
- 数据源:任意API、静态数据
93+
94+
**示例**:
95+
```json
96+
{
97+
"type": "data-table",
98+
"api": "/api/users",
99+
"columns": [
100+
{ "name": "id", "label": "ID" },
101+
{ "name": "name", "label": "姓名" },
102+
{ "name": "email", "label": "邮箱" }
103+
]
104+
}
105+
```
106+
107+
**组件列表**: `data-table`, `form`, `list`, `card`, `button`等(本文档第2章详述)
108+
109+
#### 系统B: 对象组件(10个,Q2 2026规划)
110+
111+
**特征**:
112+
- 基于ObjectStack Object定义自动生成UI
113+
- 零配置CRUD(从Object.fields自动生成)
114+
- 智能处理关系字段(lookup/master-detail)
115+
- 数据源:Object定义 + ObjectQL
116+
117+
**示例**:
118+
```json
119+
{
120+
"type": "object-table",
121+
"object": "user"
122+
// 自动从user.object.yml生成所有列、验证、关系字段处理
123+
}
124+
```
125+
126+
**组件列表**: `object-table`, `object-form`, `object-list`等(本文档第5.2章详述)
127+
128+
#### 对比总结
129+
130+
| 维度 | 平台基础组件 | 对象组件 |
131+
|------|------------|---------|
132+
| **数据源** | 任意API/数据 | Object定义 |
133+
| **Schema** | 手动定义 | 自动生成 |
134+
| **灵活性** | 高(完全自定义) | 中(约束于Object) |
135+
| **开发速度** | 中(需手动配置) | 快(零配置) |
136+
| **维护性** | Schema需同步维护 | Object改变UI自动更新 |
137+
| **适用场景** | 自定义仪表盘、复杂交互 | 标准CRUD、快速原型 |
138+
63139
---
64140

65-
## 2. 已实现组件清单
141+
## 2. 平台基础组件清单(已实现)
142+
143+
**说明**: 以下76个组件为通用UI组件,不依赖Object定义,适合灵活自定义场景。
66144

67-
### 2.1 按类别分类 (76个渲染器)
145+
### 2.1 按类别分类 (76个)
68146

69147
#### 📦 基础组件 (Basic) - 10个
70148
基础HTML元素的Schema包装。
@@ -467,18 +545,67 @@ export function InputRenderer({ schema }: RendererProps<InputSchema>) {
467545
| **Affix** | 🟢 低 | 固定定位 | 1天 |
468546
| **BackTop** | 🟢 低 | 回到顶部 | 0.5天 |
469547

470-
### 5.2 ObjectStack特有组件需求
548+
### 5.2 对象组件需求(Q2 2026新增)
471549

472-
基于ObjectStack协议,需新增:
550+
**说明**: 对象组件是全新的组件系统,基于ObjectStack Object协议,从Object定义自动生成UI。
551+
552+
#### 核心对象组件(6个)
553+
554+
| 组件名 | Schema type | 说明 | 对应平台组件 |
555+
|--------|------------|------|--------------|
556+
| **ObjectTable** | `object-table` | 从Object定义自动生成数据表 | `data-table` |
557+
| **ObjectForm** | `object-form` | 从Object定义自动生成表单 | `form` |
558+
| **ObjectDetail** | `object-detail` | 从Object定义自动生成详情页 | `page` + `form` (readonly) |
559+
| **ObjectList** | `object-list` | 从Object定义自动生成列表 | `list` |
560+
| **ObjectCard** | `object-card` | 从Object定义自动生成卡片 | `card` |
561+
| **ObjectView** | `object-view` | 通用Object视图容器 | - |
562+
563+
**工作量**: 6个组件 × 3周 = 18周(Q2 2026)
564+
565+
#### 辅助对象组件(4个)
566+
567+
| 组件名 | Schema type | 说明 |
568+
|--------|------------|------|
569+
| **ObjectField** | `object-field` | 字段渲染器(根据Object字段类型自动选择组件) |
570+
| **ObjectRelationship** | `object-relationship` | 关系字段选择器(lookup/master-detail智能处理) |
571+
| **ObjectActions** | `object-actions` | 对象操作按钮组(基于Object.actions生成) |
572+
| **ObjectFilter** | `object-filter` | 对象筛选器(基于Object.fields生成) |
573+
574+
**工作量**: 4个组件 × 2周 = 8周(Q2 2026)
575+
576+
#### 对象组件 vs 平台组件示例
577+
578+
**场景**: 显示用户列表
579+
580+
```json
581+
// 方式1:平台基础组件(灵活但需手动配置)
582+
{
583+
"type": "data-table",
584+
"api": "/api/users",
585+
"columns": [
586+
{ "name": "id", "label": "ID", "type": "text" },
587+
{ "name": "name", "label": "姓名", "type": "text", "sortable": true },
588+
{ "name": "email", "label": "邮箱", "type": "text" },
589+
{ "name": "department_id", "label": "部门ID", "type": "text" }
590+
]
591+
}
592+
593+
// 方式2:对象组件(自动但需Object定义)
594+
{
595+
"type": "object-table",
596+
"object": "user"
597+
// 自动从user.object.yml生成:
598+
// - 所有字段列
599+
// - lookup字段显示关联对象的displayField(如department.name而不是ID)
600+
// - 字段验证规则
601+
// - 字段级权限控制
602+
}
603+
```
604+
605+
#### 其他ObjectStack协议组件
473606

474607
| 组件 | 协议 | 优先级 | 说明 |
475608
|------|------|--------|------|
476-
| **ObjectForm** | Object | 🔴 高 | 基于Object定义自动生成表单 |
477-
| **ObjectList** | Object | 🔴 高 | 基于Object定义自动生成列表 |
478-
| **ObjectField** | Object | 🔴 高 | 根据字段类型动态渲染 |
479-
| **ObjectRelationship** | Object | 🟡 中 | 关系字段选择器 (lookup/master-detail) |
480-
| **RecordLink** | Object | 🟡 中 | 记录链接/导航 |
481-
| **RecordHistory** | Object | 🟢 低 | 变更历史时间线 |
482609
| **AppLauncher** | App | 🟡 中 | 应用启动器 |
483610
| **GlobalSearch** | App | 🔴 高 | 全局搜索 |
484611
| **ReportViewer** | Report | 🟢 低 | 报表查看器 |
@@ -518,22 +645,34 @@ export function InputRenderer({ schema }: RendererProps<InputSchema>) {
518645

519646
### 6.2 Q2 2026 (4-6月) - Object协议实现
520647

521-
**目标**: 实现ObjectStack Object协议核心组件
648+
**目标**: 实现ObjectStack Object协议核心组件(对象组件系统)
522649

523-
| 任务 | 时间 | 依赖 |
524-
|------|------|------|
525-
| Object Schema解析器 | 2周 | @object-ui/core |
526-
| ObjectForm自动生成 | 3周 | Object Schema |
527-
| ObjectList自动生成 | 3周 | Object Schema |
528-
| ObjectField动态渲染 | 2周 | Object Schema |
529-
| ObjectRelationship | 2周 | Object Schema |
530-
| 代码编辑器集成 | 1周 | - |
531-
| 导入向导 | 2周 | - |
650+
| 任务 | 时间 | 类型 | 依赖 |
651+
|------|------|------|------|
652+
| Object Schema解析器 | 2周 | 基础设施 | @object-ui/core |
653+
| **ObjectTable** | 3周 | 对象组件 | Object Schema |
654+
| **ObjectForm** | 3周 | 对象组件 | Object Schema |
655+
| **ObjectDetail** | 2周 | 对象组件 | Object Schema |
656+
| **ObjectList** | 2周 | 对象组件 | Object Schema |
657+
| **ObjectCard** | 2周 | 对象组件 | Object Schema |
658+
| **ObjectView** | 2周 | 对象组件 | Object Schema |
659+
| **ObjectField** | 2周 | 对象组件 | Object Schema |
660+
| **ObjectRelationship** | 2周 | 对象组件 | Object Schema |
661+
| **ObjectActions** | 1周 | 对象组件 | Object Schema |
662+
| **ObjectFilter** | 1周 | 对象组件 | Object Schema |
663+
| 平台组件补齐 | 4周 | 平台组件 | - |
532664

533665
**里程碑**:
534-
- ✅ 支持从Object定义自动生成UI
535-
- ✅ 支持lookup和master-detail关系
666+
- ✅ 对象组件系统:10个核心组件
667+
- ✅ 支持从Object定义自动生成UI(零配置CRUD)
668+
- ✅ 支持lookup和master-detail关系字段
536669
- ✅ 支持所有ObjectQL字段类型
670+
- ✅ 平台基础组件:84个(+8个补齐)
671+
672+
**组件数量**:
673+
- 平台基础组件:76 → 84个
674+
- 对象组件:0 → 10个
675+
- **总计:76 → 94个**
537676

538677
### 6.3 Q3 2026 (7-9月) - 高级特性
539678

@@ -552,13 +691,18 @@ export function InputRenderer({ schema }: RendererProps<InputSchema>) {
552691

553692
**目标**: 完善开发工具和插件系统
554693

555-
| 任务 | 时间 |
556-
|------|------|
557-
| VSCode扩展增强 | 4周 |
558-
| Schema可视化设计器 | 6周 |
559-
| 主题编辑器 | 2周 |
560-
| 组件市场 | 4周 |
561-
| AI Schema生成 | 持续 |
694+
| 任务 | 时间 | 说明 |
695+
|------|------|------|
696+
| VSCode扩展增强 | 4周 | 对象组件智能提示 |
697+
| Schema可视化设计器 | 6周 | 支持平台组件+对象组件 |
698+
| 主题编辑器 | 2周 | 统一主题系统 |
699+
| 组件市场 | 4周 | 社区组件分享 |
700+
| AI Schema生成 | 持续 | AI辅助生成Schema和Object |
701+
702+
**组件数量**:
703+
- 平台基础组件:~100个
704+
- 对象组件:~20个
705+
- **总计:~120个**
562706

563707
---
564708

@@ -691,14 +835,16 @@ export function InputRenderer({ schema }: RendererProps<InputSchema>) {
691835
### 9.4 成功指标
692836

693837
**Q2 2026目标**:
694-
- ✅ 组件数量达到90+
695-
- ✅ Object协议实现度100%
696-
- ✅ 性能基准: data-table 1000行 < 200ms
697-
- ✅ 测试覆盖率 > 85%
838+
- ✅ 平台基础组件: 84个
839+
- ✅ 对象组件: 10个(**总计94个**
840+
- ✅ Object协议实现度80%
841+
- ✅ 性能基准: data-table 1000行 < 500ms
842+
- ✅ 测试覆盖率 > 75%
698843
- ✅ NPM周下载量 > 1000
699844

700845
**Q4 2026目标**:
701-
- ✅ 组件数量达到120+
846+
- ✅ 平台基础组件: ~100个
847+
- ✅ 对象组件: ~20个(**总计~120个**
702848
- ✅ 所有核心协议100%实现
703849
- ✅ 移动端组件套件完整
704850
- ✅ VSCode扩展DAU > 500

0 commit comments

Comments
 (0)