create-next-imagicma 0.1.11 → 0.1.13
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/README.md +0 -2
- package/package.json +1 -1
- package/template-hono/AGENTS.md +53 -95
- package/template-hono/README.md +3 -31
- package/template-hono/client/public/imagicma-picker-bridge.js +6 -2
- package/template-hono/client/public/imagicma-preview-feedback.js +1 -0
- package/template-hono/client/src/lib/imagicma-preview-bridge.ts +1 -1
- package/template-hono/client/src/lib/imagicma-preview-picker.ts +130 -28
- package/template-hono/vite.config.ts +1 -1
- package/template/.env.example +0 -10
- package/template/AGENTS.md +0 -225
- package/template/README.md +0 -34
- package/template/app/_components/DevPreviewShield.tsx +0 -638
- package/template/app/api/greeting/route.ts +0 -27
- package/template/app/error.tsx +0 -93
- package/template/app/favicon.ico +0 -0
- package/template/app/globals.css +0 -767
- package/template/app/hello/_components/HelloClient.tsx +0 -94
- package/template/app/hello/page.tsx +0 -23
- package/template/app/layout.tsx +0 -32
- package/template/app/page.tsx +0 -27
- package/template/app/providers.tsx +0 -25
- package/template/components/ui/accordion.tsx +0 -58
- package/template/components/ui/alert-dialog.tsx +0 -141
- package/template/components/ui/alert.tsx +0 -61
- package/template/components/ui/aspect-ratio.tsx +0 -7
- package/template/components/ui/avatar.tsx +0 -51
- package/template/components/ui/badge.tsx +0 -40
- package/template/components/ui/breadcrumb.tsx +0 -117
- package/template/components/ui/button.tsx +0 -64
- package/template/components/ui/calendar.tsx +0 -72
- package/template/components/ui/card.tsx +0 -87
- package/template/components/ui/carousel.tsx +0 -262
- package/template/components/ui/chart.tsx +0 -365
- package/template/components/ui/checkbox.tsx +0 -30
- package/template/components/ui/collapsible.tsx +0 -11
- package/template/components/ui/command.tsx +0 -153
- package/template/components/ui/context-menu.tsx +0 -200
- package/template/components/ui/dialog.tsx +0 -122
- package/template/components/ui/drawer.tsx +0 -118
- package/template/components/ui/dropdown-menu.tsx +0 -200
- package/template/components/ui/form.tsx +0 -178
- package/template/components/ui/hover-card.tsx +0 -29
- package/template/components/ui/input-otp.tsx +0 -71
- package/template/components/ui/input.tsx +0 -25
- package/template/components/ui/label.tsx +0 -26
- package/template/components/ui/menubar.tsx +0 -256
- package/template/components/ui/navigation-menu.tsx +0 -130
- package/template/components/ui/pagination.tsx +0 -119
- package/template/components/ui/popover.tsx +0 -31
- package/template/components/ui/progress.tsx +0 -28
- package/template/components/ui/radio-group.tsx +0 -44
- package/template/components/ui/resizable.tsx +0 -45
- package/template/components/ui/scroll-area.tsx +0 -48
- package/template/components/ui/select.tsx +0 -160
- package/template/components/ui/separator.tsx +0 -31
- package/template/components/ui/sheet.tsx +0 -140
- package/template/components/ui/sidebar.tsx +0 -732
- package/template/components/ui/skeleton.tsx +0 -17
- package/template/components/ui/slider.tsx +0 -28
- package/template/components/ui/switch.tsx +0 -29
- package/template/components/ui/table.tsx +0 -119
- package/template/components/ui/tabs.tsx +0 -55
- package/template/components/ui/textarea.tsx +0 -24
- package/template/components/ui/toast.tsx +0 -129
- package/template/components/ui/toaster.tsx +0 -35
- package/template/components/ui/toggle-group.tsx +0 -61
- package/template/components/ui/toggle.tsx +0 -45
- package/template/components/ui/tooltip.tsx +0 -30
- package/template/drizzle.config.ts +0 -50
- package/template/eslint.config.mjs +0 -18
- package/template/gitignore +0 -46
- package/template/hooks/use-greeting.ts +0 -15
- package/template/hooks/use-mobile.ts +0 -21
- package/template/hooks/use-toast.ts +0 -194
- package/template/lib/queryClient.ts +0 -59
- package/template/lib/theme/default-theme.ts +0 -11
- package/template/lib/utils.ts +0 -6
- package/template/next.config.ts +0 -8
- package/template/package.json +0 -76
- package/template/pnpm-lock.yaml +0 -6937
- package/template/postcss.config.mjs +0 -7
- package/template/process-compose.yaml +0 -13
- package/template/public/file.svg +0 -1
- package/template/public/globe.svg +0 -1
- package/template/public/imagicma-picker-bridge.js +0 -374
- package/template/public/next.svg +0 -1
- package/template/public/vercel.svg +0 -1
- package/template/public/window.svg +0 -1
- package/template/server/db.ts +0 -24
- package/template/server/storage.ts +0 -41
- package/template/shared/routes.ts +0 -13
- package/template/shared/schema.ts +0 -17
- package/template/tailwind.config.mjs +0 -96
- package/template/tsconfig.json +0 -35
- package/template/types/pg.d.ts +0 -19
package/template/AGENTS.md
DELETED
|
@@ -1,225 +0,0 @@
|
|
|
1
|
-
# 项目 Agent 指南(Next.js + Tailwind v4 + shadcn/ui + React Query + Drizzle)
|
|
2
|
-
|
|
3
|
-
本文档用于指导(人类或 AI)在本仓库中进行一致、可维护的开发与迁移工作。**默认使用中文沟通与输出**(除非用户明确要求其他语言)。
|
|
4
|
-
|
|
5
|
-
## 1) 技术栈与约束
|
|
6
|
-
|
|
7
|
-
- **框架**:Next.js(App Router,目录为 `app/`)
|
|
8
|
-
- **语言**:TypeScript(`strict: true`,`noEmit: true`)
|
|
9
|
-
- **UI**:Tailwind CSS v4 + shadcn/ui(Radix UI 组件为基础)
|
|
10
|
-
- **主题**:`next-themes`,采用 `darkMode: ["class"]`
|
|
11
|
-
- **请求层**:`@tanstack/react-query` + `fetch` 封装
|
|
12
|
-
- **契约**:`zod`(对 API 返回做 schema 校验)
|
|
13
|
-
- **数据库**:Postgres + Drizzle ORM(`pg` + `drizzle-orm` + `drizzle-kit`)
|
|
14
|
-
|
|
15
|
-
### 运行环境提示(重要)
|
|
16
|
-
- `DATABASE_URL` 必须通过环境变量提供(建议放在 `.env.local`,不要提交到 Git)。
|
|
17
|
-
- `server/*` 代码属于 **Node.js runtime**(依赖 `pg`),Next route handlers 需要 `export const runtime = "nodejs"`。
|
|
18
|
-
|
|
19
|
-
## 2) 目录结构约定
|
|
20
|
-
|
|
21
|
-
- `app/`
|
|
22
|
-
- Next.js 路由与页面(Server Component 默认)
|
|
23
|
-
- `app/providers.tsx`:全局 Provider(Theme + React Query + Tooltip + Toaster)
|
|
24
|
-
- `app/api/*`:Route Handlers(替代传统 Express)
|
|
25
|
-
- `components/ui/`
|
|
26
|
-
- 从模板迁移的 shadcn/ui 组件(**统一为 Client Components**)
|
|
27
|
-
- 规则:文件顶部保持 `"use client";`,避免 RSC 边界问题
|
|
28
|
-
- `hooks/`
|
|
29
|
-
- 可复用 hooks(例如 toast、mobile、请求 hook)
|
|
30
|
-
- 规则:一般也视为客户端使用,文件顶部带 `"use client";`
|
|
31
|
-
- `lib/`
|
|
32
|
-
- 工具与客户端通用封装(例如 `lib/utils.ts` 的 `cn()`、`lib/queryClient.ts`)
|
|
33
|
-
- `shared/`
|
|
34
|
-
- 共享契约与 schema(例如 `shared/routes.ts`、`shared/schema.ts`)
|
|
35
|
-
- 这些文件应当 **不依赖 Next/React**,以便在 client/server 两端共同使用
|
|
36
|
-
- `server/`
|
|
37
|
-
- 服务端基础设施(例如 `server/db.ts`、`server/storage.ts`)
|
|
38
|
-
- 必须 `import "server-only";`,避免被客户端错误引用
|
|
39
|
-
- `types/`
|
|
40
|
-
- 本地类型补丁(当网络/依赖限制导致无法安装 `@types/*` 时使用)
|
|
41
|
-
|
|
42
|
-
## 3) 常用命令(pnpm)
|
|
43
|
-
|
|
44
|
-
本项目默认**优先使用 pnpm** 安装依赖;若环境受限可使用 npm 作为回退方案(见 `package.json` 的 `packageManager` / `engines`)。
|
|
45
|
-
|
|
46
|
-
以仓库根目录为工作目录:
|
|
47
|
-
|
|
48
|
-
- 开发:`pnpm dev`
|
|
49
|
-
- 构建:`pnpm build`(当前脚本使用 `next build --webpack`,避免 Turbopack 在部分受限环境下失败)
|
|
50
|
-
- Lint:`pnpm lint`
|
|
51
|
-
- 类型检查:`pnpm check`
|
|
52
|
-
- DB 同步:`pnpm db:push`
|
|
53
|
-
|
|
54
|
-
> 若安装依赖出现网络/代理问题,可临时在命令前清空代理环境变量:
|
|
55
|
-
> `HTTP_PROXY= HTTPS_PROXY= pnpm install`
|
|
56
|
-
|
|
57
|
-
## 4) 环境变量与数据库
|
|
58
|
-
|
|
59
|
-
### 必需环境变量
|
|
60
|
-
- `DATABASE_URL`:Postgres 连接串(例:`postgres://user:pass@host:5432/dbname`)
|
|
61
|
-
|
|
62
|
-
### Drizzle
|
|
63
|
-
- 配置:`drizzle.config.ts`
|
|
64
|
-
- Schema:`shared/schema.ts`
|
|
65
|
-
- 迁移输出目录(默认):`migrations/`
|
|
66
|
-
|
|
67
|
-
**开发流程建议**
|
|
68
|
-
1. 配置 `.env.local` 的 `DATABASE_URL`
|
|
69
|
-
2. 执行 `pnpm db:push` 初始化/同步表结构
|
|
70
|
-
3. 启动 `pnpm dev`
|
|
71
|
-
|
|
72
|
-
## 5) UI / Tailwind / 主题
|
|
73
|
-
|
|
74
|
-
### Tailwind v4
|
|
75
|
-
- 全局样式:`app/globals.css`(包含 shadcn 常用 CSS 变量)
|
|
76
|
-
- Tailwind 配置:`tailwind.config.mjs`(通过 `app/globals.css` 顶部的 `@config` 指令加载)
|
|
77
|
-
|
|
78
|
-
### 主题(dark mode)
|
|
79
|
-
- 通过 `next-themes` 在 `<html class="dark">` 上切换
|
|
80
|
-
- `app/layout.tsx` 中应包含 `suppressHydrationWarning` 以减少 hydration 警告
|
|
81
|
-
|
|
82
|
-
### shadcn/ui 迁移注意事项
|
|
83
|
-
- `components/ui/*` 大量依赖 Tailwind 主题 token(如 `bg-background`、`text-foreground` 等)
|
|
84
|
-
- 这些 token 由 `tailwind.config.mjs` 的颜色映射 + `app/globals.css` 的 CSS 变量共同提供
|
|
85
|
-
- 若新增组件:优先保持与现有 `components/ui` 同风格(使用 `cn()`、Radix、`cva()`)
|
|
86
|
-
|
|
87
|
-
## 6) 请求层(React Query)
|
|
88
|
-
|
|
89
|
-
- QueryClient 构建:`lib/queryClient.ts` 导出 `makeQueryClient()`
|
|
90
|
-
- 全局挂载:`app/providers.tsx` 使用 `useState(() => makeQueryClient())`,避免跨请求共享单例
|
|
91
|
-
- 推荐模式:
|
|
92
|
-
- 将 API 路径与响应 schema 放在 `shared/routes.ts`
|
|
93
|
-
- 客户端 hook(例如 `hooks/use-greeting.ts`)中调用 `fetch` 并用 Zod parse 校验返回
|
|
94
|
-
|
|
95
|
-
## 7) API 设计与契约(shared/routes)
|
|
96
|
-
|
|
97
|
-
- `shared/routes.ts` 是“唯一真相”(path/method/response schema)
|
|
98
|
-
- Route Handler(`app/api/**/route.ts`)建议:
|
|
99
|
-
1. 调用 server 层(`server/*`)获取数据
|
|
100
|
-
2. `api.xxx.responses[200].parse(body)` 校验输出
|
|
101
|
-
3. `NextResponse.json(body)`
|
|
102
|
-
|
|
103
|
-
## 8) 代码质量与规则
|
|
104
|
-
|
|
105
|
-
- TypeScript:保持 `strict`,不使用 `any`(如因外部依赖类型缺失,优先在 `types/` 提供最小可用声明)
|
|
106
|
-
- React:遵守 “components/hooks must be pure” 的 lint 规则(避免在 render 中调用 `Math.random()`、`Date.now()` 等)
|
|
107
|
-
- Server-only:凡是 DB/私密逻辑一律放 `server/`,并显式 `import "server-only"`
|
|
108
|
-
- 不提交敏感信息:不要提交 `.env.local`、密钥、数据库连接串
|
|
109
|
-
|
|
110
|
-
## 9) Git/分支约定(可选)
|
|
111
|
-
|
|
112
|
-
- 若需要新建分支,建议使用前缀:`codex/xxx`
|
|
113
|
-
|
|
114
|
-
## 10) 给 AI/自动化的“无交互启动”清单
|
|
115
|
-
|
|
116
|
-
当启动者不是开发者(例如 AI Agent、CI Runner、平台工作流)时,推荐按以下顺序执行:
|
|
117
|
-
|
|
118
|
-
1) 安装依赖
|
|
119
|
-
- `pnpm install`(有 `pnpm-lock.yaml` 时优先)
|
|
120
|
-
2) 准备环境变量(至少要有 `DATABASE_URL`)
|
|
121
|
-
- 方式 A:平台/Runner 注入 `DATABASE_URL`
|
|
122
|
-
- 方式 B:在仓库根目录写入 `.env.local`(不要提交)
|
|
123
|
-
3) 初始化数据库结构(只需首次或 schema 变更后)
|
|
124
|
-
- `pnpm db:push`
|
|
125
|
-
4) 启动
|
|
126
|
-
- 开发:`pnpm dev`
|
|
127
|
-
- 生产:`pnpm build` 然后 `pnpm start`
|
|
128
|
-
|
|
129
|
-
> 说明:`drizzle.config.ts` 会尝试读取 `.env.local` / `.env` 来获取 `DATABASE_URL`,避免自动化环境仅写文件但未显式 `export` 导致 CLI 取不到。
|
|
130
|
-
|
|
131
|
-
## 11) 迁移验证入口
|
|
132
|
-
|
|
133
|
-
- API:`GET /api/greeting`(文件:`app/api/greeting/route.ts`)
|
|
134
|
-
- Demo 页面:`/hello`(文件:`app/hello/page.tsx`)
|
|
135
|
-
|
|
136
|
-
## 12) 常见问题排障
|
|
137
|
-
|
|
138
|
-
- `DATABASE_URL 未设置`
|
|
139
|
-
- 确认 `.env.local` 里有 **未注释** 的 `DATABASE_URL="..."`,或 Runner 里已注入环境变量
|
|
140
|
-
- `关系 "messages" 不存在` / `table does not exist`
|
|
141
|
-
- 先执行 `pnpm db:push`
|
|
142
|
-
- UI 样式不生效 / 主题色不对
|
|
143
|
-
- 确认 `app/globals.css` 顶部包含 `@config "../tailwind.config.mjs";`
|
|
144
|
-
- 确认 `tailwind.config.mjs` 的 `content` 覆盖到了 `components/ui` 等目录
|
|
145
|
-
- 构建报 Turbopack/受限环境问题
|
|
146
|
-
- 当前 `pnpm build` 已固定使用 `next build --webpack`(见 `package.json`)
|
|
147
|
-
|
|
148
|
-
## 13) Docs-First 工作流(强约束,模板默认)
|
|
149
|
-
|
|
150
|
-
本模板默认与 `ibuild + idesigner + igen-*` agents 配合。以下规则是**必须执行**,不是建议。
|
|
151
|
-
|
|
152
|
-
- 状态真相源只有一个:`docs/project_state.json`。
|
|
153
|
-
- `docs/index.md` 仅作导航与摘要,允许滞后,不能作为阶段判定依据。
|
|
154
|
-
- 所有实现必须可回溯到 docs;禁止“先写代码、后补文档”的反向流程。
|
|
155
|
-
|
|
156
|
-
### 13.1 文档缺失处理(必须)
|
|
157
|
-
|
|
158
|
-
- 若用户请求“生成项目/落地开发”,但 `docs/` 不完整:
|
|
159
|
-
1. 先补齐 docs,再进入代码实现。
|
|
160
|
-
2. 补齐顺序固定:`igen-prd -> igen-persona -> igen-feature-modules -> igen-style-guide -> igen-db-schema`。
|
|
161
|
-
3. 完成后更新 `docs/project_state.json`(`docs_ready=true`)再进入实现。
|
|
162
|
-
|
|
163
|
-
### 13.2 实现前必读清单(按范围)
|
|
164
|
-
|
|
165
|
-
- 前端改动(页面/交互/样式)前,必须读取:
|
|
166
|
-
- `docs/prd/prd.md`
|
|
167
|
-
- `docs/feature_plan/feature_modules.md` + 对应 `feature_module_*.md`
|
|
168
|
-
- `docs/style_guide/*.style-guide.md`
|
|
169
|
-
- `docs/implementation/frontend_mock_scope.md`
|
|
170
|
-
- `docs/codegen_contract.md`
|
|
171
|
-
- 后端改动(API/DB/数据流)前,必须读取:
|
|
172
|
-
- `docs/prd/prd.md`
|
|
173
|
-
- `docs/feature_plan/feature_modules.md` + 对应 `feature_module_*.md`
|
|
174
|
-
- `docs/db/db_schema.md` + `docs/db/db_schema_core.md`
|
|
175
|
-
- `docs/db/mock_data_mapping.md`
|
|
176
|
-
- `docs/implementation/backend_core_scope.md`
|
|
177
|
-
- `docs/codegen_contract.md`
|
|
178
|
-
|
|
179
|
-
### 13.3 冲突处理规则(docs vs 当前代码/需求)
|
|
180
|
-
|
|
181
|
-
- 默认优先级:`docs/project_state.json` + docs 契约 > 现有实现细节 > 记忆/猜测。
|
|
182
|
-
- 若用户明确要求偏离 docs:先更新 docs,再改代码;禁止只改代码不更新 docs。
|
|
183
|
-
- 若 docs 内部自相矛盾:先修 docs 再实现;不能在矛盾状态下继续大规模开发。
|
|
184
|
-
|
|
185
|
-
### 13.4 阶段推进规则(禁止“建议即停止”)
|
|
186
|
-
|
|
187
|
-
- `docs_ready=true` 后,默认连续推进 Stage B -> Stage C。
|
|
188
|
-
- 仅在真实阻塞(密钥/权限/外部依赖缺失)时停止并向用户提问。
|
|
189
|
-
- 禁止以“立即启动开发/推荐阅读顺序/命令清单”替代实际执行。
|
|
190
|
-
- 若应用未运行,必须主动启动(优先 `restart_workflow(name="web")`),而不是让用户手动执行 `pnpm dev`。
|
|
191
|
-
|
|
192
|
-
## 14) 文档一致性门禁(完成前必须全部通过)
|
|
193
|
-
|
|
194
|
-
### 14.1 路由与模块一致性
|
|
195
|
-
|
|
196
|
-
- 页面路由需与 `docs/feature_plan/feature_module_*.md` 的页面清单一致。
|
|
197
|
-
- API 路径需与 docs 规划和 `shared/routes.ts` 契约一致。
|
|
198
|
-
- 禁止新增 docs 未定义的核心页面/API(除非先更新 docs)。
|
|
199
|
-
|
|
200
|
-
### 14.2 数据契约一致性
|
|
201
|
-
|
|
202
|
-
- Stage B Mock 字段必须与 `docs/db/mock_data_mapping.md` 对齐。
|
|
203
|
-
- Stage C API/DB 字段必须与 `docs/db/*.md` 对齐。
|
|
204
|
-
- 返回数据需按 `shared/routes.ts` 对应 zod schema 解析/校验。
|
|
205
|
-
|
|
206
|
-
### 14.3 运行与重定向安全
|
|
207
|
-
|
|
208
|
-
- 禁止自重定向或重定向环(例如 `/` -> `/`)。
|
|
209
|
-
- 验证关键路由时,重定向链长度必须有界(建议 <= 3)。
|
|
210
|
-
- `/`, `/spots`, `/catches`, `/community`, `/profile`, `/hello` 不得出现 500 或循环跳转。
|
|
211
|
-
|
|
212
|
-
### 14.4 质量门禁
|
|
213
|
-
|
|
214
|
-
- `pnpm check` 通过。
|
|
215
|
-
- `app/api` 与 `server` 不允许残留阻塞性占位实现(如 `TODO: Implement`)。
|
|
216
|
-
- 未通过门禁前,`docs/project_state.json` 不能标记对应阶段为 `completed`。
|
|
217
|
-
|
|
218
|
-
## 15) 交付与同步要求(模板仓库)
|
|
219
|
-
|
|
220
|
-
- 每次阶段状态变更后,同步更新:
|
|
221
|
-
- `docs/project_state.json`(真相源)
|
|
222
|
-
- `docs/index.md`(派生状态展示)
|
|
223
|
-
- 输出总结时必须给出“文档溯源”:
|
|
224
|
-
- 本次实现对应了哪些 docs 文件(至少列出路径)。
|
|
225
|
-
- 若有偏差,说明已更新的 docs 路径。
|
package/template/README.md
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
|
2
|
-
|
|
3
|
-
## Getting Started
|
|
4
|
-
|
|
5
|
-
First, run the development server:
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm run dev
|
|
9
|
-
# or
|
|
10
|
-
yarn dev
|
|
11
|
-
# or
|
|
12
|
-
pnpm dev
|
|
13
|
-
# or
|
|
14
|
-
bun dev
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
|
18
|
-
|
|
19
|
-
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
|
20
|
-
|
|
21
|
-
## Learn More
|
|
22
|
-
|
|
23
|
-
To learn more about Next.js, take a look at the following resources:
|
|
24
|
-
|
|
25
|
-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
|
26
|
-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
27
|
-
|
|
28
|
-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
|
29
|
-
|
|
30
|
-
## Deploy on Vercel
|
|
31
|
-
|
|
32
|
-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
|
33
|
-
|
|
34
|
-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|