@coze-arch/cli 0.0.1-alpha.f5dbe4 → 0.0.1-alpha.f678c7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Expo App + Express.js
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## 目录结构规范
|
|
4
4
|
|
|
5
5
|
当前仓库是一个 monorepo（基于 pnpm 的 workspace）
|
|
6
6
|
|
|
@@ -16,11 +16,10 @@
|
|
|
16
16
|
├── client/ # React Native 前端代码
|
|
17
17
|
│ ├── app/ # Expo Router 路由目录（仅路由配置）
|
|
18
18
|
│ │ ├── _layout.tsx # 根布局文件（必需，务必阅读）
|
|
19
|
-
│ │
|
|
20
|
-
│ │ └── index.tsx # re-export home.tsx
|
|
19
|
+
│ │ └── index.tsx # 首页
|
|
21
20
|
│ ├── screens/ # 页面实现目录（与 app/ 路由对应）
|
|
22
|
-
│ │ └── demo/
|
|
23
|
-
│ │ └── index.tsx #
|
|
21
|
+
│ │ └── demo/
|
|
22
|
+
│ │ └── index.tsx # demo 示例页面（默认首页，不需要可以删除，记得同时更新路由文件）
|
|
24
23
|
│ ├── components/ # 可复用组件
|
|
25
24
|
│ │ └── Screen.tsx # 页面容器组件（必用）
|
|
26
25
|
│ ├── hooks/ # 自定义 Hooks
|
|
@@ -32,9 +31,14 @@
|
|
|
32
31
|
├── .cozeproj # 预置脚手架脚本（禁止修改）
|
|
33
32
|
└── .coze # 配置文件（禁止修改）
|
|
34
33
|
|
|
35
|
-
##
|
|
34
|
+
## 技术选型（严格遵循）
|
|
36
35
|
|
|
37
|
-
|
|
36
|
+
- 前端：Expo + React Native + TailwindCSS
|
|
37
|
+
- 后端：Express.js
|
|
38
|
+
|
|
39
|
+
本项目通过 uniwind 实现了 react-native 对 TailwindCSS v4 的支持，在编写样式时应使用 TailwindCSS 写法
|
|
40
|
+
|
|
41
|
+
在开始开发前，先查看 client/global.css 了解必要的信息
|
|
38
42
|
|
|
39
43
|
## 安装依赖
|
|
40
44
|
|
|
@@ -44,15 +48,6 @@
|
|
|
44
48
|
pnpm i
|
|
45
49
|
```
|
|
46
50
|
|
|
47
|
-
### 新增依赖约束
|
|
48
|
-
|
|
49
|
-
如果需要新增依赖，需在 client 和 server 各自的目录添加（原因：隔离前后端的依赖），禁止在根目录直接安装依赖
|
|
50
|
-
|
|
51
|
-
### 新增依赖标准流程
|
|
52
|
-
|
|
53
|
-
- 编辑 `client/package.json` 或 `server/package.json`
|
|
54
|
-
- 在根目录执行 `pnpm i`
|
|
55
|
-
|
|
56
51
|
## Expo 开发规范
|
|
57
52
|
|
|
58
53
|
### 路径别名
|
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
@theme {
|
|
2
|
+
/* Primitive Colors (Do not change between light and dark) */
|
|
3
|
+
--white: oklch(100% 0 0);
|
|
4
|
+
--black: oklch(0% 0 0);
|
|
5
|
+
--snow: oklch(0.9911 0 0);
|
|
6
|
+
--eclipse: oklch(0.2103 0.0059 285.89);
|
|
7
|
+
|
|
8
|
+
/* Border */
|
|
9
|
+
--border-width: 1px;
|
|
10
|
+
--field-border-width: 0px;
|
|
11
|
+
|
|
12
|
+
/* Base radius */
|
|
13
|
+
--radius: 0.5rem;
|
|
14
|
+
--field-radius: calc(var(--radius) * 1.5);
|
|
15
|
+
|
|
16
|
+
/* Opacity */
|
|
17
|
+
--opacity-disabled: 0.5;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@layer theme {
|
|
21
|
+
:root {
|
|
22
|
+
@variant light {
|
|
23
|
+
/* Base Colors */
|
|
24
|
+
--background: oklch(0.9702 0 0);
|
|
25
|
+
--foreground: var(--eclipse);
|
|
26
|
+
|
|
27
|
+
/* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
|
|
28
|
+
--surface: var(--white);
|
|
29
|
+
--surface-foreground: var(--foreground);
|
|
30
|
+
|
|
31
|
+
/* Overlay: Used for floating/overlay components (dialogs, popovers, modals, menus) */
|
|
32
|
+
--overlay: var(--white);
|
|
33
|
+
--overlay-foreground: var(--foreground);
|
|
34
|
+
|
|
35
|
+
--muted: oklch(0.5517 0.0138 285.94);
|
|
36
|
+
|
|
37
|
+
--default: oklch(94% 0.001 286.375);
|
|
38
|
+
--default-foreground: var(--eclipse);
|
|
39
|
+
|
|
40
|
+
--accent: oklch(0.6204 0.195 253.83);
|
|
41
|
+
--accent-foreground: var(--snow);
|
|
42
|
+
|
|
43
|
+
/* Form Fields */
|
|
44
|
+
--field-background: var(--white);
|
|
45
|
+
--field-foreground: oklch(0.2103 0.0059 285.89);
|
|
46
|
+
--field-placeholder: var(--muted);
|
|
47
|
+
--field-border: transparent; /* no border by default on form fields */
|
|
48
|
+
|
|
49
|
+
/* Status Colors */
|
|
50
|
+
--success: oklch(0.7329 0.1935 150.81);
|
|
51
|
+
--success-foreground: var(--eclipse);
|
|
52
|
+
|
|
53
|
+
--warning: oklch(0.7819 0.1585 72.33);
|
|
54
|
+
--warning-foreground: var(--eclipse);
|
|
55
|
+
|
|
56
|
+
--danger: oklch(0.6532 0.2328 25.74);
|
|
57
|
+
--danger-foreground: var(--snow);
|
|
58
|
+
|
|
59
|
+
/* Component Colors */
|
|
60
|
+
--segment: var(--white);
|
|
61
|
+
--segment-foreground: var(--eclipse);
|
|
62
|
+
|
|
63
|
+
/* Misc Colors */
|
|
64
|
+
--border: oklch(90% 0.004 286.32);
|
|
65
|
+
--separator: oklch(74% 0.004 286.32);
|
|
66
|
+
--focus: var(--accent);
|
|
67
|
+
--link: var(--foreground);
|
|
68
|
+
|
|
69
|
+
/* Shadows */
|
|
70
|
+
--surface-shadow:
|
|
71
|
+
0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
|
|
72
|
+
0 0 1px 0 rgba(0, 0, 0, 0.06);
|
|
73
|
+
--overlay-shadow:
|
|
74
|
+
0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 -6px 12px 0 rgba(0, 0, 0, 0.02),
|
|
75
|
+
0 14px 28px 0 rgba(0, 0, 0, 0.06);
|
|
76
|
+
--field-shadow:
|
|
77
|
+
0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
|
|
78
|
+
0 0 1px 0 rgba(0, 0, 0, 0.06);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@variant dark {
|
|
82
|
+
/* Base Colors */
|
|
83
|
+
--background: oklch(12% 0.005 285.823);
|
|
84
|
+
--foreground: var(--snow);
|
|
85
|
+
|
|
86
|
+
/* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
|
|
87
|
+
--surface: oklch(0.2103 0.0059 285.89);
|
|
88
|
+
--surface-foreground: var(--foreground);
|
|
89
|
+
|
|
90
|
+
/* Overlay: Used for floating/overlay components (dialogs, popovers, modals, menus) - lighter for contrast */
|
|
91
|
+
--overlay: oklch(0.2103 0.0059 285.89);
|
|
92
|
+
--overlay-foreground: var(--foreground);
|
|
93
|
+
|
|
94
|
+
--muted: oklch(70.5% 0.015 286.067);
|
|
95
|
+
|
|
96
|
+
--default: oklch(27.4% 0.006 286.033);
|
|
97
|
+
--default-foreground: var(--snow);
|
|
98
|
+
|
|
99
|
+
--accent: oklch(0.6204 0.195 253.83);
|
|
100
|
+
--accent-foreground: var(--snow);
|
|
101
|
+
|
|
102
|
+
/* Form Field Defaults - Colors (only the ones that are different from light theme) */
|
|
103
|
+
--field-background: oklch(0.2103 0.0059 285.89);
|
|
104
|
+
--field-foreground: var(--foreground);
|
|
105
|
+
--field-placeholder: var(--muted);
|
|
106
|
+
--field-border: transparent; /* no border by default on form fields */
|
|
107
|
+
|
|
108
|
+
/* Status Colors */
|
|
109
|
+
--success: oklch(0.7329 0.1935 150.81);
|
|
110
|
+
--success-foreground: var(--eclipse);
|
|
111
|
+
|
|
112
|
+
--warning: oklch(0.8203 0.1388 76.34);
|
|
113
|
+
--warning-foreground: var(--eclipse);
|
|
114
|
+
|
|
115
|
+
--danger: oklch(0.594 0.1967 24.63);
|
|
116
|
+
--danger-foreground: var(--snow);
|
|
117
|
+
|
|
118
|
+
/* Component Colors */
|
|
119
|
+
--segment: oklch(0.3964 0.01 285.93);
|
|
120
|
+
--segment-foreground: var(--foreground);
|
|
121
|
+
|
|
122
|
+
/* Misc Colors */
|
|
123
|
+
--border: oklch(28% 0.006 286.033);
|
|
124
|
+
--separator: oklch(40% 0.006 286.033);
|
|
125
|
+
--focus: var(--accent);
|
|
126
|
+
--link: var(--foreground);
|
|
127
|
+
|
|
128
|
+
/* Shadows */
|
|
129
|
+
--surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
|
|
130
|
+
--overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.2) inset;
|
|
131
|
+
--field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@theme inline static {
|
|
137
|
+
--color-background: var(--background);
|
|
138
|
+
--color-foreground: var(--foreground);
|
|
139
|
+
|
|
140
|
+
--color-surface: var(--surface);
|
|
141
|
+
--color-surface-foreground: var(--surface-foreground);
|
|
142
|
+
--color-surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
|
|
143
|
+
|
|
144
|
+
--color-overlay: var(--overlay);
|
|
145
|
+
--color-overlay-foreground: var(--overlay-foreground);
|
|
146
|
+
|
|
147
|
+
--color-muted: var(--muted);
|
|
148
|
+
|
|
149
|
+
--color-accent: var(--accent);
|
|
150
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
151
|
+
|
|
152
|
+
--color-segment: var(--segment);
|
|
153
|
+
--color-segment-foreground: var(--segment-foreground);
|
|
154
|
+
|
|
155
|
+
--color-border: var(--border);
|
|
156
|
+
--color-separator: var(--separator);
|
|
157
|
+
--color-focus: var(--focus);
|
|
158
|
+
--color-link: var(--link);
|
|
159
|
+
|
|
160
|
+
--color-default: var(--default);
|
|
161
|
+
--color-default-foreground: var(--default-foreground);
|
|
162
|
+
|
|
163
|
+
--color-success: var(--success);
|
|
164
|
+
--color-success-foreground: var(--success-foreground);
|
|
165
|
+
|
|
166
|
+
--color-warning: var(--warning);
|
|
167
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
168
|
+
|
|
169
|
+
--color-danger: var(--danger);
|
|
170
|
+
--color-danger-foreground: var(--danger-foreground);
|
|
171
|
+
|
|
172
|
+
/* Form Field Tokens */
|
|
173
|
+
--color-field: var(--field-background, var(--default));
|
|
174
|
+
--color-field-foreground: var(--field-foreground, var(--foreground));
|
|
175
|
+
--color-field-placeholder: var(--field-placeholder, var(--muted));
|
|
176
|
+
--color-field-border: var(--field-border, var(--border));
|
|
177
|
+
--radius-field: var(--field-radius, var(--radius-xl));
|
|
178
|
+
--border-width-field: var(--field-border-width, var(--border-width));
|
|
179
|
+
|
|
180
|
+
--shadow-surface: var(--surface-shadow);
|
|
181
|
+
--shadow-overlay: var(--overlay-shadow);
|
|
182
|
+
--shadow-field: var(--field-shadow);
|
|
183
|
+
|
|
184
|
+
/* Calculated Variables */
|
|
185
|
+
|
|
186
|
+
/* Colors */
|
|
187
|
+
|
|
188
|
+
/* --- background shades --- */
|
|
189
|
+
--color-background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
|
|
190
|
+
--color-background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
|
|
191
|
+
--color-background-inverse: var(--foreground);
|
|
192
|
+
|
|
193
|
+
/* ------------------------- */
|
|
194
|
+
--color-default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
|
|
195
|
+
--color-accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
|
|
196
|
+
--color-success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
|
|
197
|
+
--color-warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
|
|
198
|
+
--color-danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
|
|
199
|
+
|
|
200
|
+
/* Form Field Colors */
|
|
201
|
+
--color-field-hover: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%);
|
|
202
|
+
--color-field-focus: var(--field-background, var(--default));
|
|
203
|
+
--color-field-border-hover: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%);
|
|
204
|
+
--color-field-border-focus: color-mix(in oklab, var(--field-border, var(--border)) 74%, var(--field-foreground, var(--foreground)) 22%);
|
|
205
|
+
|
|
206
|
+
/* Soft Colors */
|
|
207
|
+
--color-accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
|
|
208
|
+
--color-accent-soft-foreground: var(--accent);
|
|
209
|
+
--color-accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
|
|
210
|
+
|
|
211
|
+
--color-danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
|
|
212
|
+
--color-danger-soft-foreground: var(--danger);
|
|
213
|
+
--color-danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
|
|
214
|
+
|
|
215
|
+
--color-warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
|
|
216
|
+
--color-warning-soft-foreground: var(--warning);
|
|
217
|
+
--color-warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
|
|
218
|
+
|
|
219
|
+
--color-success-soft: color-mix(in oklab, var(--success) 15%, transparent);
|
|
220
|
+
--color-success-soft-foreground: var(--success);
|
|
221
|
+
--color-success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
|
|
222
|
+
|
|
223
|
+
/* Surface Levels - progressively darker/lighter shades for layering */
|
|
224
|
+
--color-surface-secondary: color-mix(in oklab, var(--surface) 94%, var(--surface-foreground) 6%);
|
|
225
|
+
--color-surface-tertiary: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
|
|
226
|
+
|
|
227
|
+
/* On Surface Colors */
|
|
228
|
+
--color-on-surface: color-mix(in oklab, var(--surface) 93%, var(--surface-foreground) 7%);
|
|
229
|
+
--color-on-surface-foreground: var(--surface-foreground);
|
|
230
|
+
--color-on-surface-hover: color-mix(in oklab, var(--surface) 91%, var(--surface-foreground) 9%);
|
|
231
|
+
--color-on-surface-focus: color-mix(in oklab, var(--surface) 93%, var(--surface-foreground) 7%);
|
|
232
|
+
|
|
233
|
+
/* On Surface Colors - Secondary (on secondary surface) */
|
|
234
|
+
--color-on-surface-secondary: color-mix(in oklab, var(--surface) 87%, var(--surface-foreground) 13%);
|
|
235
|
+
--color-on-surface-secondary-foreground: var(--surface-foreground);
|
|
236
|
+
--color-on-surface-secondary-hover: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
|
|
237
|
+
--color-on-surface-secondary-focus: color-mix(in oklab, var(--surface) 87%, var(--surface-foreground) 13%);
|
|
238
|
+
|
|
239
|
+
/* On Surface Colors - Tertiary (on tertiary surface) */
|
|
240
|
+
--color-on-surface-tertiary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
|
|
241
|
+
--color-on-surface-tertiary-foreground: var(--surface-foreground);
|
|
242
|
+
--color-on-surface-tertiary-hover: color-mix(in oklab, var(--surface) 84%, var(--surface-foreground) 16%);
|
|
243
|
+
--color-on-surface-tertiary-focus: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
|
|
244
|
+
|
|
245
|
+
/* Separator Colors - Levels */
|
|
246
|
+
--color-separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
|
|
247
|
+
--color-separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
|
|
248
|
+
|
|
249
|
+
/* Border Colors - Levels (progressive contrast: default → secondary → tertiary) */
|
|
250
|
+
/* Light mode: lighter → darker | Dark mode: darker → lighter */
|
|
251
|
+
--color-border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
|
|
252
|
+
--color-border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
|
|
253
|
+
|
|
254
|
+
/* Radius and default sizes - defaults can change by just changing the --radius */
|
|
255
|
+
--radius-xs: calc(var(--radius) * 0.25); /* 0.125rem (2px) */
|
|
256
|
+
--radius-sm: calc(var(--radius) * 0.5); /* 0.25rem (4px) */
|
|
257
|
+
--radius-md: calc(var(--radius) * 0.75); /* 0.375rem (6px) */
|
|
258
|
+
--radius-lg: calc(var(--radius) * 1); /* 0.5rem (8px) */
|
|
259
|
+
--radius-xl: calc(var(--radius) * 1.5); /* 0.75rem (12px) */
|
|
260
|
+
--radius-2xl: calc(var(--radius) * 2); /* 1rem (16px) */
|
|
261
|
+
--radius-3xl: calc(var(--radius) * 3); /* 1.5rem (24px) */
|
|
262
|
+
--radius-4xl: calc(var(--radius) * 4); /* 2rem (32px) */
|
|
263
|
+
}
|
package/lib/cli.js
CHANGED