226 lines
6.3 KiB
Markdown
226 lines
6.3 KiB
Markdown
[![GitHub][opengraph-image]][opengraph-image-url]
|
|
|
|
# shadcn/ui and tailwindcss v4 monorepo template
|
|
|
|
This template is for creating a monorepo with Turborepo, shadcn/ui, tailwindcss v4, and react v19.
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
├── apps/
|
|
│ ├── backend/ # Hono 后端应用
|
|
│ └── web/ # Next.js 前端应用
|
|
├── packages/
|
|
│ ├── db/ # Prisma 数据库包
|
|
│ ├── storage/ # 存储解决方案包
|
|
│ ├── tus/ # TUS 上传协议包
|
|
│ └── ui/ # UI 组件包
|
|
└── docs/ # 文档
|
|
```
|
|
|
|
## 特性
|
|
|
|
- 🚀 **现代技术栈**: Next.js 15, React 19, Hono, Prisma
|
|
- 📦 **Monorepo**: 使用 Turborepo 管理多包项目
|
|
- 🎨 **UI 组件**: shadcn/ui + TailwindCSS v4
|
|
- 📤 **文件上传**: 支持 TUS 协议的可恢复上传
|
|
- 💾 **多存储支持**: 本地存储 + S3 兼容存储
|
|
- 🗄️ **数据库**: PostgreSQL + Prisma ORM
|
|
- 🔄 **实时通信**: WebSocket 支持
|
|
|
|
## 快速开始
|
|
|
|
### 1. 安装依赖
|
|
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
### 2. 环境变量配置
|
|
|
|
复制环境变量模板并配置：
|
|
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
|
|
#### 存储配置
|
|
|
|
**本地存储（开发环境推荐）:**
|
|
|
|
```bash
|
|
STORAGE_TYPE=local
|
|
UPLOAD_DIR=./uploads
|
|
```
|
|
|
|
**S3 存储（生产环境推荐）:**
|
|
|
|
```bash
|
|
STORAGE_TYPE=s3
|
|
S3_BUCKET=your-bucket-name
|
|
S3_REGION=us-east-1
|
|
S3_ACCESS_KEY_ID=your-access-key
|
|
S3_SECRET_ACCESS_KEY=your-secret-key
|
|
```
|
|
|
|
**MinIO 本地开发:**
|
|
|
|
```bash
|
|
STORAGE_TYPE=s3
|
|
S3_BUCKET=uploads
|
|
S3_ENDPOINT=http://localhost:9000
|
|
S3_ACCESS_KEY_ID=minioadmin
|
|
S3_SECRET_ACCESS_KEY=minioadmin
|
|
S3_FORCE_PATH_STYLE=true
|
|
```
|
|
|
|
详细的环境变量配置请参考：[环境变量配置指南](./docs/ENVIRONMENT.md)
|
|
|
|
### 3. 数据库设置
|
|
|
|
```bash
|
|
# 生成 Prisma 客户端
|
|
pnpm db:generate
|
|
|
|
# 运行数据库迁移
|
|
pnpm db:migrate
|
|
|
|
# 填充种子数据（可选）
|
|
pnpm db:seed
|
|
```
|
|
|
|
### 4. 启动开发服务器
|
|
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
这将启动：
|
|
|
|
- 前端应用: http://localhost:3001
|
|
- 后端 API: http://localhost:3000
|
|
- 文件上传: http://localhost:3000/upload
|
|
- 存储管理 API: http://localhost:3000/api/storage
|
|
|
|
## 存储包 (@repo/storage)
|
|
|
|
项目包含一个功能完整的存储解决方案包，支持：
|
|
|
|
### 核心功能
|
|
|
|
- 🗂️ **多存储后端**: 本地文件系统、AWS S3、MinIO、阿里云 OSS、腾讯云 COS
|
|
- 📤 **TUS 上传**: 支持可恢复的大文件上传
|
|
- 🔧 **Hono 集成**: 提供即插即用的中间件
|
|
- 📊 **文件管理**: 完整的文件生命周期管理
|
|
- ⏰ **自动清理**: 过期文件自动清理机制
|
|
- 🔄 **存储迁移**: 支持不同存储类型间的数据迁移
|
|
|
|
### API 端点
|
|
|
|
```bash
|
|
# 文件资源管理
|
|
GET /api/storage/resources # 获取所有资源
|
|
GET /api/storage/resource/:fileId # 获取文件信息
|
|
DELETE /api/storage/resource/:id # 删除资源
|
|
|
|
# 文件访问和下载
|
|
GET /download/:fileId # 文件下载和访问（支持所有存储类型）
|
|
|
|
# 统计和管理
|
|
GET /api/storage/stats # 获取统计信息
|
|
POST /api/storage/cleanup # 清理过期文件
|
|
POST /api/storage/migrate-storage # 迁移存储类型
|
|
|
|
# 文件上传 (TUS 协议)
|
|
POST /upload # 开始上传
|
|
PATCH /upload/:id # 续传文件
|
|
HEAD /upload/:id # 获取上传状态
|
|
```
|
|
|
|
### 使用示例
|
|
|
|
```typescript
|
|
import { createStorageApp, startCleanupScheduler } from '@repo/storage';
|
|
|
|
// 创建存储应用
|
|
const storageApp = createStorageApp({
|
|
apiBasePath: '/api/storage',
|
|
uploadPath: '/upload',
|
|
});
|
|
|
|
// 挂载到主应用
|
|
app.route('/', storageApp);
|
|
|
|
// 启动清理调度器
|
|
startCleanupScheduler();
|
|
```
|
|
|
|
## One-click Deploy
|
|
|
|
You can deploy this template to Vercel with the button below:
|
|
|
|
[](https://vercel.com/new/clone?build-command=cd+..%2F..%2F+%26%26+pnpm+turbo+build+--filter%3Dweb...&demo-description=This+is+a+template+Turborepo+with+ShadcnUI+tailwindv4&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F2JxNyYATuuV7WPuJ31kF9Q%2F433990aa4c8e7524a9095682fb08f0b1%2FBasic.png&demo-title=Turborepo+%26+Next.js+Starter&demo-url=https%3A%2F%2Fexamples-basic-web.vercel.sh%2F&from=templates&project-name=Turborepo+%26+Next.js+Starter&repository-name=turborepo-shadcn-tailwind&repository-url=https%3A%2F%2Flinkb15%2Fturborepo-shadcn-ui-tailwind-4&root-directory=apps%2Fweb&skippable-integrations=1)
|
|
|
|
## 添加 UI 组件
|
|
|
|
To add components to your app, run the following command at the root of your `web` app:
|
|
|
|
```bash
|
|
pnpm dlx shadcn@latest add button -c apps/web
|
|
```
|
|
|
|
This will place the ui components in the `packages/ui/src/components` directory.
|
|
|
|
## Tailwind
|
|
|
|
Your `globals.css` are already set up to use the components from the `ui` package which is imported in the `web` app.
|
|
|
|
## 使用组件
|
|
|
|
To use the components in your app, import them from the `ui` package.
|
|
|
|
```tsx
|
|
import { Button } from '@repo/ui/components/ui/button';
|
|
```
|
|
|
|
## 脚本命令
|
|
|
|
```bash
|
|
# 开发
|
|
pnpm dev # 启动所有应用
|
|
pnpm dev:web # 只启动前端
|
|
pnpm dev:backend # 只启动后端
|
|
|
|
# 构建
|
|
pnpm build # 构建所有包
|
|
pnpm build:web # 构建前端
|
|
pnpm build:backend # 构建后端
|
|
|
|
# 数据库
|
|
pnpm db:generate # 运行数据库迁移
|
|
pnpm db:seed # 填充种子数据
|
|
pnpm db:studio # 打开 Prisma Studio
|
|
|
|
# 代码质量
|
|
pnpm lint # 代码检查
|
|
pnpm type-check # 类型检查
|
|
pnpm format # 代码格式化
|
|
```
|
|
|
|
## 文档
|
|
|
|
- [环境变量配置指南](./docs/ENVIRONMENT.md)
|
|
- [存储包文档](./packages/storage/README.md)
|
|
- [文件访问使用指南](./docs/STATIC_FILES.md)
|
|
|
|
## More Resources
|
|
|
|
- [shadcn/ui - Monorepo](https://ui.shadcn.com/docs/monorepo)
|
|
- [Turborepo - shadcn/ui](https://turbo.build/repo/docs/guides/tools/shadcn-ui)
|
|
- [TailwindCSS v4 - Explicitly Registering Sources](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources)
|
|
- [Hono Documentation](https://hono.dev/)
|
|
- [TUS Protocol](https://tus.io/)
|
|
|
|
[opengraph-image]: https://turborepo-shadcn-tailwind.vercel.app/opengraph-image.png
|
|
[opengraph-image-url]: https://turborepo-shadcn-tailwind.vercel.app/
|