@coze-arch/cli 0.0.1-alpha.912cd5 → 0.0.1-alpha.9f719c
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.
- package/lib/__templates__/expo/.coze +5 -0
- package/lib/__templates__/expo/.cozeproj/scripts/deploy_build.sh +25 -25
- package/lib/__templates__/expo/.cozeproj/scripts/deploy_run.sh +31 -56
- package/lib/__templates__/expo/.cozeproj/scripts/prod_build.sh +47 -0
- package/lib/__templates__/expo/.cozeproj/scripts/prod_run.sh +35 -0
- package/lib/__templates__/expo/_npmrc +1 -1
- package/lib/__templates__/expo/babel.config.js +10 -0
- package/lib/__templates__/expo/client/constants/theme.ts +10 -0
- package/lib/__templates__/expo/client/contexts/AuthContext.tsx +14 -107
- package/lib/__templates__/expo/client/hooks/useTheme.ts +1 -1
- package/lib/__templates__/expo/client/screens/home/index.tsx +1 -4
- package/lib/__templates__/expo/client/screens/home/styles.ts +1 -273
- package/lib/__templates__/expo/client/utils/index.ts +1 -2
- package/lib/__templates__/expo/metro.config.js +3 -5
- package/lib/__templates__/expo/package.json +8 -2
- package/lib/__templates__/expo/pnpm-lock.yaml +87 -5
- package/lib/__templates__/expo/src/index.ts +2 -2
- package/lib/__templates__/expo/template.config.js +1 -1
- package/lib/__templates__/nextjs/.coze +3 -3
- package/lib/__templates__/nextjs/_npmrc +1 -1
- package/lib/__templates__/nextjs/package.json +9 -3
- package/lib/__templates__/nextjs/pnpm-lock.yaml +2501 -1120
- package/lib/__templates__/nextjs/scripts/dev.sh +8 -27
- package/lib/__templates__/nextjs/src/app/layout.tsx +18 -22
- package/lib/__templates__/nextjs/template.config.js +1 -1
- package/lib/__templates__/templates.json +7 -0
- package/lib/__templates__/vite/.coze +3 -3
- package/lib/__templates__/vite/README.md +204 -26
- package/lib/__templates__/vite/_npmrc +1 -1
- package/lib/__templates__/vite/package.json +1 -1
- package/lib/__templates__/vite/pnpm-lock.yaml +120 -120
- package/lib/__templates__/vite/scripts/dev.sh +7 -26
- package/lib/__templates__/vite/template.config.js +10 -1
- package/lib/__templates__/vite/vite.config.ts +3 -3
- package/lib/cli.js +408 -248
- package/package.json +3 -2
- package/lib/__templates__/nextjs/.babelrc +0 -15
- package/lib/__templates__/nextjs/server.mjs +0 -50
|
@@ -4,44 +4,25 @@ set -Eeuo pipefail
|
|
|
4
4
|
PORT=<%= port %>
|
|
5
5
|
COZE_WORKSPACE_PATH="${COZE_WORKSPACE_PATH:-$(pwd)}"
|
|
6
6
|
NODE_ENV=development
|
|
7
|
+
DEPLOY_RUN_PORT=<%= port %>
|
|
7
8
|
|
|
8
9
|
cd "${COZE_WORKSPACE_PATH}"
|
|
9
10
|
|
|
10
11
|
kill_port_if_listening() {
|
|
11
12
|
local pids
|
|
12
|
-
|
|
13
|
-
# Check if lsof is available (macOS/BSD) or ss (Linux)
|
|
14
|
-
if command -v lsof >/dev/null 2>&1; then
|
|
15
|
-
# macOS/BSD using lsof
|
|
16
|
-
pids=$(lsof -ti:${PORT} 2>/dev/null || true)
|
|
17
|
-
elif command -v ss >/dev/null 2>&1; then
|
|
18
|
-
# Linux using ss
|
|
19
|
-
pids=$(ss -H -lntp 2>/dev/null | awk -v port="${PORT}" '$4 ~ ":"port"$"' | grep -o 'pid=[0-9]*' | cut -d= -f2 | paste -sd' ' - || true)
|
|
20
|
-
else
|
|
21
|
-
echo "Warning: neither lsof nor ss found, cannot check port ${PORT}"
|
|
22
|
-
return
|
|
23
|
-
fi
|
|
24
|
-
|
|
13
|
+
pids=$(ss -H -lntp 2>/dev/null | awk -v port="${DEPLOY_RUN_PORT}" '$4 ~ ":"port"$"' | grep -o 'pid=[0-9]*' | cut -d= -f2 | paste -sd' ' - || true)
|
|
25
14
|
if [[ -z "${pids}" ]]; then
|
|
26
|
-
echo "Port ${
|
|
15
|
+
echo "Port ${DEPLOY_RUN_PORT} is free."
|
|
27
16
|
return
|
|
28
17
|
fi
|
|
29
|
-
|
|
30
|
-
echo "Port ${PORT} in use by PIDs: ${pids} (SIGKILL)"
|
|
18
|
+
echo "Port ${DEPLOY_RUN_PORT} in use by PIDs: ${pids} (SIGKILL)"
|
|
31
19
|
echo "${pids}" | xargs -I {} kill -9 {}
|
|
32
20
|
sleep 1
|
|
33
|
-
|
|
34
|
-
# Verify port is cleared
|
|
35
|
-
if command -v lsof >/dev/null 2>&1; then
|
|
36
|
-
pids=$(lsof -ti:${PORT} 2>/dev/null || true)
|
|
37
|
-
elif command -v ss >/dev/null 2>&1; then
|
|
38
|
-
pids=$(ss -H -lntp 2>/dev/null | awk -v port="${PORT}" '$4 ~ ":"port"$"' | grep -o 'pid=[0-9]*' | cut -d= -f2 | paste -sd' ' - || true)
|
|
39
|
-
fi
|
|
40
|
-
|
|
21
|
+
pids=$(ss -H -lntp 2>/dev/null | awk -v port="${DEPLOY_RUN_PORT}" '$4 ~ ":"port"$"' | grep -o 'pid=[0-9]*' | cut -d= -f2 | paste -sd' ' - || true)
|
|
41
22
|
if [[ -n "${pids}" ]]; then
|
|
42
|
-
echo "Warning: port ${
|
|
23
|
+
echo "Warning: port ${DEPLOY_RUN_PORT} still busy after SIGKILL, PIDs: ${pids}"
|
|
43
24
|
else
|
|
44
|
-
echo "Port ${
|
|
25
|
+
echo "Port ${DEPLOY_RUN_PORT} cleared."
|
|
45
26
|
fi
|
|
46
27
|
}
|
|
47
28
|
|
|
@@ -49,4 +30,4 @@ echo "Clearing port ${PORT} before start."
|
|
|
49
30
|
kill_port_if_listening
|
|
50
31
|
echo "Starting HTTP service on port ${PORT} for dev..."
|
|
51
32
|
|
|
52
|
-
|
|
33
|
+
npx next dev --webpack --port $PORT
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import type { Metadata } from 'next';
|
|
2
2
|
import { Geist, Geist_Mono } from 'next/font/google';
|
|
3
|
-
import { Inspector } from 'react-dev-inspector';
|
|
4
3
|
import './globals.css';
|
|
5
4
|
|
|
6
5
|
const geistSans = Geist({
|
|
@@ -34,9 +33,9 @@ export const metadata: Metadata = {
|
|
|
34
33
|
],
|
|
35
34
|
authors: [{ name: 'Coze Code Team', url: 'https://code.coze.cn' }],
|
|
36
35
|
generator: 'Coze Code',
|
|
37
|
-
icons: {
|
|
38
|
-
|
|
39
|
-
},
|
|
36
|
+
// icons: {
|
|
37
|
+
// icon: '',
|
|
38
|
+
// },
|
|
40
39
|
openGraph: {
|
|
41
40
|
title: '扣子编程 | 你的 AI 工程师已就位',
|
|
42
41
|
description:
|
|
@@ -45,22 +44,22 @@ export const metadata: Metadata = {
|
|
|
45
44
|
siteName: '扣子编程',
|
|
46
45
|
locale: 'zh_CN',
|
|
47
46
|
type: 'website',
|
|
48
|
-
images: [
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
],
|
|
56
|
-
},
|
|
57
|
-
twitter: {
|
|
58
|
-
card: 'summary_large_image',
|
|
59
|
-
title: 'Coze Code | Your AI Engineer is Here',
|
|
60
|
-
description:
|
|
61
|
-
'Build and deploy full-stack applications through AI conversation. No env setup, just flow.',
|
|
62
|
-
images: [''],
|
|
47
|
+
// images: [
|
|
48
|
+
// {
|
|
49
|
+
// url: '',
|
|
50
|
+
// width: 1200,
|
|
51
|
+
// height: 630,
|
|
52
|
+
// alt: '扣子编程 - 你的 AI 工程师',
|
|
53
|
+
// },
|
|
54
|
+
// ],
|
|
63
55
|
},
|
|
56
|
+
// twitter: {
|
|
57
|
+
// card: 'summary_large_image',
|
|
58
|
+
// title: 'Coze Code | Your AI Engineer is Here',
|
|
59
|
+
// description:
|
|
60
|
+
// 'Build and deploy full-stack applications through AI conversation. No env setup, just flow.',
|
|
61
|
+
// // images: [''],
|
|
62
|
+
// },
|
|
64
63
|
robots: {
|
|
65
64
|
index: true,
|
|
66
65
|
follow: true,
|
|
@@ -72,14 +71,11 @@ export default function RootLayout({
|
|
|
72
71
|
}: Readonly<{
|
|
73
72
|
children: React.ReactNode;
|
|
74
73
|
}>) {
|
|
75
|
-
const isDev = process.env.NODE_ENV === 'development';
|
|
76
|
-
|
|
77
74
|
return (
|
|
78
75
|
<html lang="en">
|
|
79
76
|
<body
|
|
80
77
|
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
|
81
78
|
>
|
|
82
|
-
{isDev && <Inspector />}
|
|
83
79
|
{children}
|
|
84
80
|
</body>
|
|
85
81
|
</html>
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
requires = ["nodejs-24"]
|
|
3
3
|
|
|
4
4
|
[dev]
|
|
5
|
-
run = ["
|
|
5
|
+
run = ["bash", "./scripts/dev.sh"]
|
|
6
6
|
deps = ["git"] # -> apt install git
|
|
7
7
|
|
|
8
8
|
[deploy]
|
|
9
|
-
build = ["
|
|
10
|
-
run = ["
|
|
9
|
+
build = ["bash","./scripts/build.sh"]
|
|
10
|
+
run = ["bash","./scripts/start.sh"]
|
|
11
11
|
deps = ["git"] # -> apt install git
|
|
@@ -1,61 +1,239 @@
|
|
|
1
1
|
# <%= appName %>
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
这是一个基于 TypeScript + Vite + Tailwind CSS 的轻量级 Web 应用项目,由扣子编程 CLI 创建。
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 快速开始
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
### 启动开发服务器
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
|
-
|
|
10
|
+
coze dev
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
启动后,在浏览器中打开 [http://localhost:<%= port %>](http://localhost:<%= port %>) 查看应用。
|
|
14
|
+
|
|
15
|
+
开发服务器支持热更新(HMR),修改代码后页面会自动刷新。
|
|
16
|
+
|
|
17
|
+
### 构建生产版本
|
|
14
18
|
|
|
15
19
|
```bash
|
|
16
|
-
|
|
20
|
+
coze build
|
|
17
21
|
```
|
|
18
22
|
|
|
19
|
-
|
|
23
|
+
构建产物位于 `dist/` 目录,可直接部署到静态托管服务。
|
|
24
|
+
|
|
25
|
+
### 预览生产版本
|
|
20
26
|
|
|
21
27
|
```bash
|
|
22
|
-
coze
|
|
28
|
+
coze start
|
|
23
29
|
```
|
|
24
30
|
|
|
25
|
-
|
|
31
|
+
在本地启动一个静态服务器,预览生产构建的效果。
|
|
26
32
|
|
|
27
|
-
|
|
33
|
+
## 项目结构
|
|
28
34
|
|
|
29
|
-
```
|
|
30
|
-
|
|
35
|
+
```
|
|
36
|
+
├── index.html # HTML 入口文件
|
|
37
|
+
├── src/
|
|
38
|
+
│ ├── index.ts # 应用入口(初始化)
|
|
39
|
+
│ ├── main.ts # 主逻辑文件
|
|
40
|
+
│ └── index.css # 全局样式(包含 Tailwind 指令)
|
|
41
|
+
├── vite.config.ts # Vite 配置
|
|
42
|
+
├── tailwind.config.ts # Tailwind CSS 配置
|
|
43
|
+
└── tsconfig.json # TypeScript 配置
|
|
31
44
|
```
|
|
32
45
|
|
|
33
|
-
|
|
46
|
+
## 核心开发规范
|
|
34
47
|
|
|
35
|
-
|
|
36
|
-
|
|
48
|
+
### 1. 样式开发
|
|
49
|
+
|
|
50
|
+
**使用 Tailwind CSS**
|
|
51
|
+
|
|
52
|
+
本项目使用 Tailwind CSS 进行样式开发,支持亮色/暗色模式自动切换。
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
// 使用 Tailwind 工具类
|
|
56
|
+
app.innerHTML = `
|
|
57
|
+
<div class="flex items-center justify-center min-h-screen bg-white dark:bg-black">
|
|
58
|
+
<h1 class="text-4xl font-bold text-black dark:text-white">
|
|
59
|
+
Hello World
|
|
60
|
+
</h1>
|
|
61
|
+
</div>
|
|
62
|
+
`;
|
|
37
63
|
```
|
|
38
64
|
|
|
39
|
-
|
|
65
|
+
**主题变量**
|
|
66
|
+
|
|
67
|
+
主题变量定义在 `src/index.css` 中,支持自动适配系统主题:
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
:root {
|
|
71
|
+
--background: #ffffff;
|
|
72
|
+
--foreground: #171717;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@media (prefers-color-scheme: dark) {
|
|
76
|
+
:root {
|
|
77
|
+
--background: #0a0a0a;
|
|
78
|
+
--foreground: #ededed;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
```
|
|
40
82
|
|
|
41
|
-
|
|
83
|
+
**常用 Tailwind 类名**
|
|
84
|
+
|
|
85
|
+
- 布局:`flex`, `grid`, `container`, `mx-auto`
|
|
86
|
+
- 间距:`p-4`, `m-4`, `gap-4`, `space-x-4`
|
|
87
|
+
- 颜色:`bg-white`, `text-black`, `dark:bg-black`, `dark:text-white`
|
|
88
|
+
- 排版:`text-lg`, `font-bold`, `leading-8`, `tracking-tight`
|
|
89
|
+
- 响应式:`sm:`, `md:`, `lg:`, `xl:`
|
|
90
|
+
|
|
91
|
+
### 2. 依赖管理
|
|
92
|
+
|
|
93
|
+
**必须使用 pnpm 管理依赖**
|
|
42
94
|
|
|
43
95
|
```bash
|
|
44
|
-
|
|
96
|
+
# ✅ 安装依赖
|
|
97
|
+
pnpm install
|
|
98
|
+
|
|
99
|
+
# ✅ 添加新依赖
|
|
100
|
+
pnpm add package-name
|
|
101
|
+
|
|
102
|
+
# ✅ 添加开发依赖
|
|
103
|
+
pnpm add -D package-name
|
|
104
|
+
|
|
105
|
+
# ❌ 禁止使用 npm 或 yarn
|
|
106
|
+
# npm install # 错误!
|
|
107
|
+
# yarn add # 错误!
|
|
45
108
|
```
|
|
46
109
|
|
|
47
|
-
|
|
110
|
+
项目已配置 `preinstall` 脚本,使用其他包管理器会报错。
|
|
111
|
+
|
|
112
|
+
### 3. TypeScript 开发
|
|
113
|
+
|
|
114
|
+
**类型安全**
|
|
115
|
+
|
|
116
|
+
充分利用 TypeScript 的类型系统,确保代码质量:
|
|
117
|
+
|
|
118
|
+
```typescript
|
|
119
|
+
// 定义接口
|
|
120
|
+
interface User {
|
|
121
|
+
id: number;
|
|
122
|
+
name: string;
|
|
123
|
+
email: string;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// 使用类型
|
|
127
|
+
function createUser(data: User): void {
|
|
128
|
+
console.log(`Creating user: ${data.name}`);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// DOM 操作类型推断
|
|
132
|
+
const button = document.querySelector<HTMLButtonElement>('#my-button');
|
|
133
|
+
if (button) {
|
|
134
|
+
button.addEventListener('click', () => {
|
|
135
|
+
console.log('Button clicked');
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
**避免 any 类型**
|
|
141
|
+
|
|
142
|
+
尽量避免使用 `any`,使用 `unknown` 或具体类型:
|
|
143
|
+
|
|
144
|
+
```typescript
|
|
145
|
+
// ❌ 不推荐
|
|
146
|
+
function process(data: any) { }
|
|
147
|
+
|
|
148
|
+
// ✅ 推荐
|
|
149
|
+
function process(data: unknown) {
|
|
150
|
+
if (typeof data === 'string') {
|
|
151
|
+
console.log(data.toUpperCase());
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
## 常见开发场景
|
|
157
|
+
|
|
158
|
+
### 添加新页面
|
|
159
|
+
|
|
160
|
+
本项目是单页应用(SPA),如需多页面:
|
|
161
|
+
|
|
162
|
+
1. 在 `src/` 下创建新的 `.ts` 文件
|
|
163
|
+
2. 在 `vite.config.ts` 中配置多入口
|
|
164
|
+
3. 创建对应的 `.html` 文件
|
|
165
|
+
|
|
166
|
+
### DOM 操作
|
|
167
|
+
|
|
168
|
+
```typescript
|
|
169
|
+
// 获取元素
|
|
170
|
+
const app = document.getElementById('app');
|
|
171
|
+
const button = document.querySelector<HTMLButtonElement>('.my-button');
|
|
172
|
+
|
|
173
|
+
// 动态创建元素
|
|
174
|
+
const div = document.createElement('div');
|
|
175
|
+
div.className = 'flex items-center gap-4';
|
|
176
|
+
div.textContent = 'Hello World';
|
|
177
|
+
app?.appendChild(div);
|
|
178
|
+
|
|
179
|
+
// 事件监听
|
|
180
|
+
button?.addEventListener('click', (e) => {
|
|
181
|
+
console.log('Clicked', e);
|
|
182
|
+
});
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
### 数据获取
|
|
186
|
+
|
|
187
|
+
```typescript
|
|
188
|
+
// Fetch API
|
|
189
|
+
async function fetchData() {
|
|
190
|
+
try {
|
|
191
|
+
const response = await fetch('https://api.example.com/data');
|
|
192
|
+
const data = await response.json();
|
|
193
|
+
return data;
|
|
194
|
+
} catch (error) {
|
|
195
|
+
console.error('Failed to fetch data:', error);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
// 使用数据
|
|
200
|
+
fetchData().then(data => {
|
|
201
|
+
console.log(data);
|
|
202
|
+
});
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
### 环境变量
|
|
206
|
+
|
|
207
|
+
在 `.env` 文件中定义环境变量(需以 `VITE_` 开头):
|
|
48
208
|
|
|
49
209
|
```bash
|
|
50
|
-
|
|
210
|
+
VITE_API_URL=https://api.example.com
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
在代码中使用:
|
|
214
|
+
|
|
215
|
+
```typescript
|
|
216
|
+
const apiUrl = import.meta.env.VITE_API_URL;
|
|
217
|
+
console.log(apiUrl); // https://api.example.com
|
|
51
218
|
```
|
|
52
219
|
|
|
53
|
-
##
|
|
220
|
+
## 技术栈
|
|
221
|
+
|
|
222
|
+
- **构建工具**: Vite 6.x
|
|
223
|
+
- **语言**: TypeScript 5.x
|
|
224
|
+
- **样式**: Tailwind CSS 3.x
|
|
225
|
+
- **包管理器**: pnpm 9+
|
|
226
|
+
|
|
227
|
+
## 参考文档
|
|
54
228
|
|
|
55
|
-
-
|
|
229
|
+
- [Vite 官方文档](https://cn.vitejs.dev/)
|
|
230
|
+
- [TypeScript 官方文档](https://www.typescriptlang.org/zh/docs/)
|
|
231
|
+
- [Tailwind CSS 文档](https://tailwindcss.com/docs)
|
|
56
232
|
|
|
57
|
-
##
|
|
233
|
+
## 重要提示
|
|
58
234
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
235
|
+
1. **必须使用 pnpm** 作为包管理器
|
|
236
|
+
2. **使用 TypeScript** 进行类型安全开发,避免使用 `any`
|
|
237
|
+
3. **使用 Tailwind CSS** 进行样式开发,支持响应式和暗色模式
|
|
238
|
+
4. **环境变量必须以 `VITE_` 开头** 才能在客户端代码中访问
|
|
239
|
+
5. **开发时使用 `coze dev`**,支持热更新和快速刷新
|