Skip to content

Commit 0105d71

Browse files
Copilothotlong
andcommitted
Update Getting Started guides with comprehensive examples
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent 24ae995 commit 0105d71

2 files changed

Lines changed: 461 additions & 37 deletions

File tree

content/docs/guides/getting-started.cn.mdx

Lines changed: 233 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ title: 快速开始
33
description: 5 分钟内构建你的第一个 ObjectStack 应用程序
44
---
55

6-
ObjectStack 是一个协议,但 `@objectstack/spec` 是提供 Zod schemas 和严格类型的参考实现库,用于构建有效的元数据
6+
ObjectStack 是协议优先的平台。`@objectstack/spec` 包提供了 Zod 模式和严格的 TypeScript 类型来构建有效的元数据定义
77

88
<Steps>
99

1010
<Step>
11-
## 初始化你的项目
11+
## 初始化项目
1212

1313
你可以从头开始或将 ObjectStack 添加到现有的 TypeScript 项目中。
1414

@@ -22,44 +22,251 @@ npx tsc --init
2222
</Step>
2323

2424
<Step>
25-
## 定义你的第一个对象
25+
## 定义第一个对象
2626

27-
创建一个名为 `src/objects/contact.schema.ts` 的文件
28-
这就是 **Zod 优先定义** 的强大之处。你可以开箱即用地获得自动完成和验证
27+
创建文件 `src/domains/crm/contact.object.ts`
28+
这就是 **Zod 优先定义** 的强大之处。你可以获得开箱即用的自动完成和验证
2929

3030
```typescript
3131
import { ObjectSchema, Field } from '@objectstack/spec';
3232

3333
export const Contact = ObjectSchema.create({
3434
name: 'contact',
35-
label: 'Contact',
35+
label: '联系人',
36+
pluralLabel: '联系人',
37+
icon: 'user',
38+
description: '与账户关联的人员',
39+
nameField: 'full_name',
40+
3641
fields: {
37-
first_name: Field.text({ label: 'First Name', required: true }),
38-
last_name: Field.text({ label: 'Last Name', required: true }),
39-
email: Field.text({ format: 'email' }),
40-
type: Field.select(['Customer', 'Partner', 'Vendor']),
42+
// 基本信息
43+
first_name: Field.text({
44+
label: '',
45+
required: true,
46+
maxLength: 100,
47+
}),
48+
49+
last_name: Field.text({
50+
label: '',
51+
required: true,
52+
maxLength: 100,
53+
}),
54+
55+
// 公式字段 - 自动计算
56+
full_name: Field.formula({
57+
label: '全名',
58+
expression: 'CONCAT(first_name, " ", last_name)',
59+
}),
60+
61+
// 联系信息
62+
email: Field.email({
63+
label: '电子邮件',
64+
unique: true,
65+
}),
66+
67+
phone: Field.phone({
68+
label: '电话',
69+
}),
70+
71+
// 带预定义选项的选择字段
72+
type: Field.select({
73+
label: '联系人类型',
74+
options: [
75+
{ label: '客户', value: 'customer', default: true },
76+
{ label: '合作伙伴', value: 'partner' },
77+
{ label: '供应商', value: 'vendor' },
78+
],
79+
}),
80+
81+
// 与账户的关系
82+
account: Field.masterDetail('account', {
83+
label: '账户',
84+
required: true,
85+
deleteBehavior: 'cascade',
86+
}),
4187
},
88+
4289
enable: {
43-
api: true,
44-
audit: true
90+
apiEnabled: true,
91+
trackHistory: true,
4592
}
4693
});
4794
```
4895
</Step>
4996

97+
<Step>
98+
## 添加账户对象
99+
100+
创建 `src/domains/crm/account.object.ts` 作为父对象:
101+
102+
```typescript
103+
import { ObjectSchema, Field } from '@objectstack/spec';
104+
105+
export const Account = ObjectSchema.create({
106+
name: 'account',
107+
label: '账户',
108+
pluralLabel: '账户',
109+
icon: 'building',
110+
nameField: 'name',
111+
112+
fields: {
113+
// 自动编号字段
114+
account_number: Field.autonumber({
115+
label: '账户编号',
116+
format: 'ACC-{0000}',
117+
}),
118+
119+
name: Field.text({
120+
label: '账户名称',
121+
required: true,
122+
searchable: true,
123+
maxLength: 255,
124+
}),
125+
126+
// 货币字段
127+
annual_revenue: Field.currency({
128+
label: '年收入',
129+
min: 0,
130+
}),
131+
132+
// 带自定义颜色的选择字段(用于看板)
133+
type: Field.select({
134+
label: '账户类型',
135+
options: [
136+
{ label: '潜在客户', value: 'prospect', color: '#FFA500', default: true },
137+
{ label: '客户', value: 'customer', color: '#00AA00' },
138+
{ label: '合作伙伴', value: 'partner', color: '#0000FF' },
139+
],
140+
}),
141+
},
142+
143+
enable: {
144+
apiEnabled: true,
145+
trackHistory: true,
146+
}
147+
});
148+
```
149+
</Step>
150+
151+
<Step>
152+
## 创建应用程序清单
153+
154+
创建 `objectstack.config.ts` 将对象打包到应用中:
155+
156+
```typescript
157+
import { defineManifest } from '@objectstack/spec';
158+
import { Account } from './src/domains/crm/account.object';
159+
import { Contact } from './src/domains/crm/contact.object';
160+
161+
export default defineManifest({
162+
name: 'my_crm',
163+
label: '我的 CRM',
164+
version: '1.0.0',
165+
description: '简单的 CRM 应用程序',
166+
167+
objects: [Account, Contact],
168+
169+
navigation: {
170+
tabs: [
171+
{
172+
label: '销售',
173+
items: [
174+
{ type: 'object', object: 'account' },
175+
{ type: 'object', object: 'contact' },
176+
],
177+
},
178+
],
179+
},
180+
});
181+
```
182+
</Step>
183+
50184
<Step>
51185
## 验证协议
52186

53-
创建一个构建脚本 `src/build.ts` 来验证你的定义是否符合 ObjectStack 协议。
187+
创建构建脚本 `src/build.ts` 来验证你的定义:
54188

55189
```typescript
56-
import { Contact } from './objects/contact.schema';
190+
import config from '../objectstack.config';
57191

58-
// 如果你的 schema 无效,这将抛出 ZodError
59-
const protocol = Contact.parse(Contact);
192+
// 如果模式无效,这将抛出 ZodError
193+
console.log(`✅ 应用 '${config.label}' 有效!`);
194+
console.log(`📦 对象: ${config.objects.map(o => o.name).join(', ')}`);
60195

61-
console.log(`✅ Object '${protocol.name}' is valid ObjectStack Metadata!`);
62-
console.log(JSON.stringify(protocol, null, 2));
196+
// 导出为 JSON 供运行时使用
197+
import fs from 'fs';
198+
fs.writeFileSync(
199+
'dist/manifest.json',
200+
JSON.stringify(config, null, 2)
201+
);
202+
```
203+
204+
运行它:
205+
206+
```bash
207+
npx tsx src/build.ts
208+
```
209+
</Step>
210+
211+
<Step>
212+
## 探索高级功能
213+
214+
现在你有了一个可工作的应用,探索高级功能:
215+
216+
### 1. 添加验证规则
217+
218+
```typescript
219+
validations: [
220+
{
221+
name: 'unique_email',
222+
type: 'unique',
223+
fields: ['email'],
224+
message: '电子邮件已存在',
225+
},
226+
{
227+
name: 'positive_revenue',
228+
type: 'script',
229+
expression: 'annual_revenue >= 0',
230+
message: '收入必须为正数',
231+
},
232+
]
233+
```
234+
235+
### 2. 添加工作流规则
236+
237+
```typescript
238+
workflows: [
239+
{
240+
name: 'update_last_activity',
241+
trigger: 'on_update',
242+
actions: [
243+
{
244+
type: 'field_update',
245+
field: 'last_activity_date',
246+
value: 'TODAY()',
247+
},
248+
],
249+
},
250+
]
251+
```
252+
253+
### 3. 配置视图
254+
255+
```typescript
256+
views: {
257+
list: {
258+
type: 'grid',
259+
columns: ['account_number', 'name', 'type', 'annual_revenue'],
260+
filters: [
261+
{ field: 'type', operator: '=', value: 'customer' }
262+
],
263+
},
264+
kanban: {
265+
type: 'kanban',
266+
groupBy: 'type',
267+
columns: ['name', 'annual_revenue'],
268+
},
269+
}
63270
```
64271
</Step>
65272

@@ -68,10 +275,15 @@ console.log(JSON.stringify(protocol, null, 2));
68275

69276
现在你有了有效的元数据,你可以:
70277

71-
1. **生成 SQL**:使用协议编译器(即将推出)生成 `CREATE TABLE` 语句。
72-
2. **生成 UI**:将 JSON 传入 `<ObjectForm />` React 组件。
73-
3. **部署**:将 JSON 推送到 ObjectOS 内核。
278+
1. **探索示例**:查看 [CRM 示例](/examples/crm) 了解完整功能实现
279+
2. **学习字段类型**:参见 [字段类型指南](/docs/guides/field-types) 了解所有 30+ 种字段类型
280+
3. **构建 UI**:使用 ObjectStack 运行时的元数据来生成界面
281+
4. **部署**:推送到 ObjectStack 内核用于生产环境
74282

283+
**其他资源:**
284+
- [对象模式参考](/docs/references/data/core/Object)
285+
- [验证规则](/docs/guides/validation-rules)
286+
- [工作流自动化](/docs/guides/workflows)
75287
</Step>
76288

77289
</Steps>

0 commit comments

Comments
 (0)