90 lines
7.7 KiB
Markdown
90 lines
7.7 KiB
Markdown
## 项目说明
|
||
本项目模板（Hair Keeper v1.0.0）是一个高度集成、深度定制、约定优于配置的全栈Web应用模板，旨在保持灵活性的同时提供一套基于成熟架构的开发底座，自带身份认证、权限控制、丰富前端组件、文件上传、后台任务、智能体开发等丰富功能，提供AI开发辅助，免于纠结功能如何实现，可快速上手专注于业务逻辑。
|
||
|
||
Hair Keeper是个诙谐有趣的名称，和项目内容毫无关系。
|
||
|
||
开发者直接在本项目模板的基础上进行开发，本项目源代码完全对开发者可见并可以随时修改、扩展功能、增加新的组件和模块，开发者尽量遵从如下文表述的约定和项目文件组织规则。
|
||
|
||
## 主要依赖库
|
||
- 基础：next + react + trpc + prisma
|
||
- UI基础框架：tailwindcss + radix-ui(基于shadcn/ui库添加组件) + lucide-react + sonner(toast)
|
||
- 图表等高级UI：recharts(图表) + xyflow/react(节点图 dagre自动布局) + embla-carousel-react + dnd-kit/sortable
|
||
- 用户交互增强：motion(动画) + framer-motion(动画) + use-gesture/react(手势)
|
||
- Headless UI：react-hook-form + tanstack/react-table + headless-tree/react
|
||
- 数据和存储：pg(PostgreSQL) + ioredis + minio
|
||
- 后台任务及消息队列：bullmq
|
||
- AI大模型交互: ai + ai-sdk/react + ai-elements(基于shadcn/ui库添加组件)
|
||
- 辅助性库：lodash + zod + date-fns + nanoid + zustand + p-limit
|
||
- 其他：next-auth + bcryptjs + nuqs + superjson(前后端序列化类型安全) + copy-to-clipboard
|
||
|
||
## 项目约定
|
||
### 前端
|
||
- 可使用`pnpx shadcn@latest add`添加UI控件（会添加到components/ui中）
|
||
- 表单输入组件提供value、onChange和disabled三种属性的支持，可方便的集成到react-hook-form中
|
||
- z-index约定：常规对话框及其遮罩z-50，表单控件的Popover为z-60，全屏预览及遮罩z-70
|
||
- tailwindcss v4支持直接编写如 w-[10px] 这样的任意值，非必要不写style，支持样式类合并`import { cn } from "@/lib/utils"`
|
||
- 用`import { useCallbackRef } from "@/hooks/use-callback-ref"`这个钩子构建引用不变但逻辑总是最新的函数，解决闭包陷阱
|
||
|
||
### 后端
|
||
- tRPC接口报错时可使用TRPCError，例如throw new TRPCError({ code: 'NOT_FOUND', message: '' })
|
||
- server/trpc.ts中导出了createTRPCRouter（本质是t.router）用来创建路由，预定义了publicProcedure用于创建无权限限制、也不需要登录的api
|
||
- server/trpc.ts中预定义了permissionRequiredProcedure，用来创建限制特定权限访问的api，例如permissionRequiredProcedure(Permissions.USER_MANAGE)；空字符串表示无权限要求，但是需要用户登录；约定用permissionRequiredProcedure('SUPER_ADMIN_ONLY')限制超级管理员才能访问，该权限不在Permissions中定义，只有超级管理员才能绕过授权限制访问所有接口，因此SUPER_ADMIN_ONLY这个字符串只是一个通用的约定。
|
||
- 数据库批次操作时，使用`const dbParallelLimit = pLimit(parseInt(process.env.DB_PARALLEL_LIMIT || '16', 10))`控制最大并发数
|
||
|
||
### 数据和存储
|
||
- Prisma 生成的客户端输出为默认路径，导入时使用`@prisma/client`，可以从中导入定义的数据表的ts类型，例如`import type { User } from '@prisma/client'`
|
||
- 数据库连接使用 `server/db.ts` 中的全局单例 `db`，不要直接实例化 PrismaClient
|
||
- 时间字段统一使用 `@db.Timestamptz` 类型
|
||
- 前后端参数传递尽量使用扁平结构而非嵌套结构
|
||
- 文件的上传和下载采用“客户端直传”架构（基于MinIO），服务器端只负责授权和生成预签名URL
|
||
|
||
### 开发模式
|
||
为了方便开发，本项目模板内置了在开发模式下可用的大量页面和功能
|
||
- 仅在开发阶段使用的页面、布局、api等会被NextJS识别并处理的文件，以dev.tsx、dev.ts、dev.jsx、dev.js为后缀，不会被打包到生产环境
|
||
- 仅在开发阶段使用的数据模型以Dev开头，对应的数据表以dev_开头
|
||
|
||
## 重要目录和文件
|
||
### 前端
|
||
- `components/common/`：进一步封装的高级通用控件，例如下拉菜单、对话框表单、响应式tabs等控件
|
||
- `components/features/`：进一步封装的控件，通常更重或者与业务关联强需要在不同的页面中复用
|
||
- `components/ai-elements/`：ai对话相关的组件
|
||
- `components/data-details/`：专注于数据展示的可复用控件，例如detail-badge-list、detail-copyable、detail-list、detail-timeline等控件
|
||
- `components/data-table/`：专注于数据表格的可复用控件，本项目模板自带了基础的data-table、过滤器、排序、分页、列可见性切换等功能
|
||
- `components/icons/`：项目的自定义图标可以写在这个文件夹
|
||
- `components/layout/`：应用的完整布局框架和导航系统以及可复用的布局容器
|
||
- `components/ui/`：高度可定制可复用的基础UI组件，通常源自第三方库
|
||
- `app/(main)/`：开发者在这里自行实现的所有业务的页面
|
||
- `app/(main)/dev/`：辅助开发的页面，本项目模板在其中实现了许多功能，代码在实现业务时也可以借鉴参考
|
||
- `app/(main)/settings/`：全局设置，由开发者根据业务需求进行补充和实现
|
||
- `app/(main)/users/`：用户管理模块，提供用户CRUD、角色管理、批量授权等完整的用户管理功能的页面和组件实现
|
||
- `hooks/`：可复用React Hooks库，部分复杂的组件也通过hook实现Headless UI逻辑与样式分离，组件中可复用的逻辑都可以放在这
|
||
- `lib/trpc.ts`：创建并导出tRPC React客户端实例，用于前端与后端API通信
|
||
- `lib/stores/`：通过zustand管理的全局的状态
|
||
|
||
### 后端
|
||
- `server/routers/`：项目trpc api定义文件，开发者主要在这里定义和实现业务的后端API
|
||
- `server/routers/_app.ts`：`appRouter`根路由定义，需要添加子路由时在此处注册
|
||
- `server/routers/common.ts`：定义需要在多个模块中复用的通用业务接口路由
|
||
- `server/routers/jobs.ts`：tRPC任务进度订阅路由
|
||
- `server/routers/selection.ts`：用于记录用户选择的选项或者输入的内容，优化用户的输入体验
|
||
- `server/routers/global.ts`：系统全局和特定业务关联不大的一些api
|
||
- `server/routers/dev/`：开发模式下的辅助功能需要的trpc api
|
||
- `server/queues/`：消息队列和worker，通过其中的index.ts统一导出，任务状态更新采用trpc SSE subscription，接口定义在`server/routers/jobs.ts`中
|
||
- `server/agents`：LLM的对接和使用
|
||
- `server/service/`：服务层模块集合，封装后端业务逻辑和系统服务
|
||
- `server/service/dev/`：开发模式下的辅助功能需要的后台服务
|
||
- `server/utils/`：服务端专用工具函数库，为后端业务逻辑提供基础设施支持
|
||
- `api/dev/`：开发模式下的辅助功能需要的api
|
||
|
||
### 其他
|
||
- `constants/`：项目全局常量管理
|
||
- `constants/permissions.ts`：权限定义，支持前后端一致的权限控制，支持解析复杂的权限表达式（如"A&B|(C&D)"）
|
||
- `lib/schema/`：集中管理数据验证schema，定义前后端统一的数据结构和验证规则，前端对默认值等其他要求写在表单组件中，后端对默认值等其他要求写在接口文件中，使用z.input而不是z.infer来获取Schema的输入类型
|
||
- `lib/algorithom.ts`：通用计算机算法实现，例如拓扑排序
|
||
- `lib/format.ts`：数据格式化工具函数库
|
||
|
||
## 非标准命令
|
||
- `pnpm run dev:attach`：这会使用tmux在名为nextdev的session中启动pnpm run dev，便于在开发页面或其他地方与开发服务器交互
|
||
- `pnpm run db:seed`：数据库种子数据，`prisma/init_data/`存放种子初始化数据
|
||
- `pnpm run build:analyze`：打包项目并使用next/bundle-analyzer进行分析
|