Compare commits
2 Commits
9a3b697072
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| e146af1af6 | |||
| 1e514e6631 |
@@ -45,6 +45,7 @@ RUN apt-get update && apt-get install -y \
|
||||
telnet \
|
||||
redis-tools \
|
||||
iputils-ping \
|
||||
dnsutils \
|
||||
potrace \
|
||||
imagemagick \
|
||||
zsh \
|
||||
@@ -95,10 +96,12 @@ RUN curl -fsSL https://code-server.dev/install.sh | sh -s -- --version=${CODE_SE
|
||||
|
||||
# 安装 npm 全局包
|
||||
RUN npm install -g \
|
||||
@anthropic-ai/claude-code \
|
||||
@musistudio/claude-code-router \
|
||||
pm2
|
||||
|
||||
# 安装 claude code
|
||||
RUN curl -fsSL https://claude.ai/install.sh | bash
|
||||
|
||||
# 创建工作目录
|
||||
RUN mkdir -p /workspace /root/.local/share/code-server/User
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## 项目说明
|
||||
本项目模板(Hair Keeper v1.1.0)是一个高度集成、深度定制、约定优于配置的全栈Web应用模板,旨在保持灵活性的同时提供一套基于成熟架构的开发底座,自带身份认证、权限控制、丰富前端组件、文件上传、后台任务、智能体开发等丰富功能,提供AI开发辅助,免于纠结功能如何实现,可快速上手专注于业务逻辑。
|
||||
本项目模板(Hair Keeper v1.2.0)是一个高度集成、深度定制、约定优于配置的全栈Web应用模板,旨在保持灵活性的同时提供一套基于成熟架构的开发底座,自带身份认证、权限控制、丰富前端组件、文件上传、后台任务、智能体开发等丰富功能,提供AI开发辅助,免于纠结功能如何实现,可快速上手专注于业务逻辑。
|
||||
|
||||
Hair Keeper是个诙谐有趣的名称,和项目内容毫无关系。
|
||||
|
||||
|
||||
70
README.md
70
README.md
@@ -1,11 +1,12 @@
|
||||
## 项目说明
|
||||
本项目模板(Hair Keeper v1.1.0)是一个高度集成、深度定制、约定优于配置的全栈Web应用模板,旨在保持灵活性的同时提供一套基于成熟架构的开发底座,自带身份认证、权限控制、丰富前端组件、文件上传、后台任务、智能体开发等丰富功能,提供AI开发辅助,免于纠结功能如何实现,可快速上手专注于业务逻辑。
|
||||
本项目模板(Hair Keeper v1.2.0)是一个高度集成、深度定制、约定优于配置的全栈Web应用模板,旨在保持灵活性的同时提供一套基于成熟架构的开发底座,自带身份认证、权限控制、丰富前端组件、文件上传、后台任务、智能体开发等丰富功能,提供AI开发辅助,免于纠结功能如何实现,可快速上手专注于业务逻辑。
|
||||
|
||||
Hair Keeper是个诙谐有趣的名称,和项目内容毫无关系。
|
||||
|
||||
开发者直接在本项目模板的基础上进行开发,本项目源代码完全对开发者可见并可以随时修改、扩展功能、增加新的组件和模块,开发者尽量遵从如下文表述的约定和项目文件组织规则。
|
||||
|
||||
## 主要依赖库
|
||||
本项目使用pnpm作为包管理器
|
||||
- 基础: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
|
||||
@@ -45,44 +46,43 @@ Hair Keeper是个诙谐有趣的名称,和项目内容毫无关系。
|
||||
|
||||
## 重要目录和文件
|
||||
### 前端
|
||||
- `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管理的全局的状态
|
||||
- `src/components/common/`:进一步封装的高级通用控件,例如下拉菜单、对话框表单、响应式tabs等控件
|
||||
- `src/components/features/`:进一步封装的控件,通常更重或者与业务关联强需要在不同的页面中复用
|
||||
- `src/components/ai-elements/`:ai对话相关的组件
|
||||
- `src/components/data-details/`:专注于数据展示的可复用控件,例如detail-badge-list、detail-copyable、detail-list、detail-timeline等控件
|
||||
- `src/components/data-table/`:专注于数据表格的可复用控件,本项目模板自带了基础的data-table、过滤器、排序、分页、列可见性切换等功能
|
||||
- `src/components/icons/`:项目的自定义图标可以写在这个文件夹
|
||||
- `src/components/layout/`:应用的完整布局框架和导航系统以及可复用的布局容器
|
||||
- `src/components/ui/`:高度可定制可复用的基础UI组件,通常源自第三方库
|
||||
- `src/app/(main)/`:开发者在这里自行实现的所有业务的页面
|
||||
- `src/app/(main)/dev/`:辅助开发的页面,本项目模板在其中实现了许多功能,代码在实现业务时也可以借鉴参考
|
||||
- `src/app/(main)/settings/`:全局设置,由开发者根据业务需求进行补充和实现
|
||||
- `src/app/(main)/users/`:用户管理模块,提供用户CRUD、角色管理、批量授权等完整的用户管理功能的页面和组件实现
|
||||
- `src/hooks/`:可复用React Hooks库,部分复杂的组件也通过hook实现Headless UI逻辑与样式分离,组件中可复用的逻辑都可以放在这
|
||||
- `src/lib/trpc.ts`:创建并导出tRPC React客户端实例,用于前端与后端API通信
|
||||
- `src/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
|
||||
- `src/server/routers/`:项目trpc api定义文件,开发者主要在这里定义和实现业务的后端API
|
||||
- `src/server/routers/_app.ts`:`appRouter`根路由定义,需要添加子路由时在此处注册
|
||||
- `src/server/routers/common.ts`:定义需要在多个模块中复用的通用业务接口路由
|
||||
- `src/server/routers/jobs.ts`:tRPC任务进度订阅路由
|
||||
- `src/server/routers/selection.ts`:用于记录用户选择的选项或者输入的内容,优化用户的输入体验
|
||||
- `src/server/routers/global.ts`:系统全局和特定业务关联不大的一些api
|
||||
- `src/server/routers/dev/`:开发模式下的辅助功能需要的trpc api
|
||||
- `src/server/queues/`:消息队列和worker,通过其中的index.ts统一导出,任务状态更新采用trpc SSE subscription,接口定义在`server/routers/jobs.ts`中
|
||||
- `src/server/agents`:LLM的对接和使用
|
||||
- `src/server/service/`:服务层模块集合,封装后端业务逻辑和系统服务
|
||||
- `src/server/service/dev/`:开发模式下的辅助功能需要的后台服务
|
||||
- `src/server/utils/`:服务端专用工具函数库,为后端业务逻辑提供基础设施支持
|
||||
- `src/api/dev/`:开发模式下的辅助功能需要的api
|
||||
|
||||
### 其他
|
||||
- `constants/`:项目全局常量管理
|
||||
- `constants/permissions.ts`:权限定义,支持前后端一致的权限控制,支持解析复杂的权限表达式(如"A&B|(C&D)")
|
||||
- `constants/menu.ts`: 菜单管理工具库,提供菜单项定义、查询、权限过滤等功能
|
||||
- `lib/schema/`:集中管理数据验证schema,定义前后端统一的数据结构和验证规则,前端对默认值等其他要求写在表单组件中,后端对默认值等其他要求写在接口文件中,使用z.input而不是z.infer来获取Schema的输入类型
|
||||
- `lib/algorithom.ts`:通用计算机算法实现,例如拓扑排序
|
||||
- `lib/format.ts`:数据格式化工具函数库
|
||||
- `src/constants/`:项目全局常量管理
|
||||
- `src/constants/permissions.ts`:权限定义,支持前后端一致的权限控制,支持解析复杂的权限表达式(如"A&B|(C&D)")
|
||||
- `src/lib/schema/`:集中管理数据验证schema,定义前后端统一的数据结构和验证规则,前端对默认值等其他要求写在表单组件中,后端对默认值等其他要求写在接口文件中,使用z.input而不是z.infer来获取Schema的输入类型
|
||||
- `src/lib/algorithom.ts`:通用计算机算法实现,例如拓扑排序
|
||||
- `src/lib/format.ts`:数据格式化工具函数库
|
||||
|
||||
## 非标准命令
|
||||
- `pnpm run dev:attach`:这会使用tmux在名为nextdev的session中启动pnpm run dev,便于在开发页面或其他地方与开发服务器交互
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hair-keeper",
|
||||
"version": "1.1.0",
|
||||
"version": "1.2.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev -p 3000 --turbo",
|
||||
|
||||
@@ -1,4 +1,44 @@
|
||||
## Claude Code编程工具常见用法
|
||||
常见指令和操作:
|
||||
- `/ide`:与当前终端所在的ide集成,比如说与code server集成,那么claude code会在code server中展示要修改的文件内容,你在code server中选中的代码也会自动发送给claude code
|
||||
- 按`Tab`键来切换思考模式,默认是打开的,但是一般复杂任务才打开思考模式,所以请关闭思考模式,关闭的时候终端右下角会有提示`Thinking off (tab to toggle)`
|
||||
# Hair Keeper开发容器使用帮助
|
||||
## AI编程代理用法
|
||||
命令行中:
|
||||
|
||||
* `ccr code` 打开一个新对话
|
||||
* `ccr code --resume` 回到之前某个对话
|
||||
|
||||
对话中:
|
||||
|
||||
* `ESC` 连按2次可以查看和回溯到之前的某一轮对话
|
||||
* `alt+tab` 切换模型是否打开思维链,默认是开启的,请关闭,因为思考模式很慢,只在极度复杂的任务时才打开
|
||||
* `\` 如果您的提示词过长,一行输入不下,可以在行末输入这个字符来换行
|
||||
* `@` 如果您需要引用项目中的文件,可以用这个符号
|
||||
* `/ide` 输入这个命令,AI会和您的IDE进行联动,这样您在IDE中选中的代码会被自动发送给AI,AI在修改代码时也会在IDE中打开代码预览。
|
||||
|
||||
其他:
|
||||
|
||||
* `CLAUDE.md` 文件中的内容每次对话都会发送给AI,如果您有什么要强调的,可以写在这里面,您也可以输入`/init` 让AI自动扫描项目并编写CLAUDE.md,一般这里面写的都是项目的约定、编码习惯和开发目标。
|
||||
|
||||
## 项目与开发环境
|
||||
##### 常见命令:
|
||||
* `pnpm run dev` 打开开发服务器
|
||||
* `pnpm run lint` 检查代码中是否存在明显错误,建议每次AI进行了一次大修改,先用这个命令排查错误,有错误就粘贴给AI让它解决
|
||||
* `pnpm run build` 构建和打包项目,耗时很长,如果AI尝试执行这个命令,阻止它并告诉它只需要执行`pnpm run lint` 排查错误
|
||||
* `pnpm prisma migrate dev --name add_some_tables` 如果您对`schema.prisma` 进行了修改并希望修改能同步到数据库,执行这条命令,`add_some_tables` 请替换成能够描述您实际修改的标识符
|
||||
|
||||
##### 访问容器内部服务(SSH转发):
|
||||
如果您是通过浏览器访问云开发容器,有时候可能需要访问云开发容器内部的本地服务,您可以通过SSH转发来实现。
|
||||
|
||||
例如我们可以通过这种方法来使用Prisma Studio(prisma提供的数据库管理工具):
|
||||
|
||||
```bash
|
||||
pnpm prisma studio --port 5555 # 在容器中执行
|
||||
ssh -N -L 5555:127.0.0.1:5555 root@cloud.liuyh.com -p <Hair Keeper容器的SSH服务映射的外部端口> # 在本地主机中执行,然后输入您开发环节的密码
|
||||
```
|
||||
然后您可以在本地输入 [http://localhost:5555/](http://localhost:5555/) 访问容器内部运行的Prisma Studio。
|
||||
|
||||
虽然您访问的是本地地址,但是Prisma Studio服务是运行在远程服务器的容器中的,SSH则是连接两者的桥梁。
|
||||
|
||||
## 代码仓库快速入门
|
||||
* `git push origin main` 推送本地代码到远程仓库,推送完成后您可以访问这个链接查看您的代码,也就是说您的代码在服务器上有了个备份,避免意外删除或丢失,通过远程仓库,您还可以与其他人合作开发一个项目,git能够解决代码的版本问题和不同成员修改的合并问题。
|
||||
|
||||
* `git add -A && git commit -m "修改了xxx文件、新增了xxx功能"` 在您对代码进行了一定的修改后,可以执行这条命令,相当于一个存档点,也便于您后续查看开发历史。在您进行了几次修改,准备结束今天的工作时,您可以执行`git push origin main` 将代码同步到远程仓库,避免代码丢失。
|
||||
|
||||
|
||||
@@ -346,6 +346,7 @@ EOF
|
||||
"api_base_url": "${PKUAI_API_BASE}api/anthropic/v1/messages",
|
||||
"api_key": "${PKUAI_API_KEY}",
|
||||
"models": [
|
||||
"claude-opus-4-6",
|
||||
"claude-sonnet-4-5-20250929",
|
||||
"claude-opus-4-5-20251101",
|
||||
"claude-haiku-4-5-20251001"
|
||||
@@ -368,13 +369,13 @@ EOF
|
||||
}
|
||||
},
|
||||
"Router": {
|
||||
"default": "pku-anthropic,claude-opus-4-5-20251101",
|
||||
"default": "pku-anthropic,claude-opus-4-6",
|
||||
"background": "pku-anthropic,claude-haiku-4-5-20251001",
|
||||
"think": "pku-anthropic,claude-opus-4-5-20251101",
|
||||
"longContext": "pku-anthropic,claude-opus-4-5-20251101",
|
||||
"think": "pku-anthropic,claude-opus-4-6",
|
||||
"longContext": "pku-anthropic,claude-opus-4-6",
|
||||
"longContextThreshold": 80000,
|
||||
"webSearch": "",
|
||||
"image": "pku-anthropic,claude-opus-4-5-20251101"
|
||||
"image": "pku-anthropic,claude-opus-4-6"
|
||||
},
|
||||
"CUSTOM_ROUTER_PATH": ""
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ TEMP_DIR=$(mktemp -d)
|
||||
trap "rm -rf $TEMP_DIR" EXIT
|
||||
|
||||
# 复制必要文件
|
||||
cp -r .next $TEMP_DIR/
|
||||
cp -r .next-prod $TEMP_DIR/
|
||||
cp -r public $TEMP_DIR/
|
||||
cp -r prisma $TEMP_DIR/
|
||||
cp package.json $TEMP_DIR/
|
||||
|
||||
@@ -3,4 +3,4 @@
|
||||
*/
|
||||
export const SITE_NAME = 'Hair Keeper'
|
||||
export const SITE_DESCRIPTION = '高度集成、深度定制、约定优于配置的全栈Web应用模板,旨在保持灵活性的同时提供一套基于成熟架构的开发底座,自带身份认证、权限控制、丰富前端组件、文件上传、后台任务、智能体开发等丰富功能,提供AI开发辅助,免于纠结功能如何实现,可快速上手专注于业务逻辑'
|
||||
export const SITE_VERSION = 'v1.1.0'
|
||||
export const SITE_VERSION = 'v1.2.0'
|
||||
Reference in New Issue
Block a user