projects
这是一个基于 React + Vite + shadcn/ui 的前端应用项目
快速开始
启动开发服务器
./scripts/start.sh
构建产物
./scripts/build.sh
提交更改
./scripts/commit.sh "commit message"
核心开发规范
1. 组件开发
优先使用 shadcn/ui 基础组件
本项目已预装完整的 shadcn/ui 组件库，位于 src/components/ui/ 目录。开发时应优先使用这些组件作为基础：
// ✅ 推荐：使用 shadcn 基础组件
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
export default function MyComponent() {
return (
<Card>
<CardHeader>标题</CardHeader>
<CardContent>
<Input placeholder="输入内容" />
<Button>提交</Button>
</CardContent>
</Card>
);
}
可用的 shadcn 组件清单
- 表单：
button,input,textarea,select,checkbox,radio-group,switch,slider - 布局：
card,separator,tabs,accordion,collapsible,scroll-area - 反馈：
alert,alert-dialog,dialog,toast,sonner,progress - 导航：
dropdown-menu,menubar,navigation-menu,context-menu - 数据展示：
table,avatar,badge,hover-card,tooltip,popover - 其他：
calendar,command,carousel,resizable,sidebar
详见 src/components/ui/ 目录下的具体组件实现。
2. 依赖管理
必须使用 pnpm 管理依赖
# ✅ 安装依赖
pnpm install
# ✅ 添加新依赖
pnpm add package-name
# ✅ 添加开发依赖
pnpm add -D package-name
# ❌ 禁止使用 npm 或 yarn
# npm install # 错误！
# yarn add # 错误！
项目已配置 preinstall 脚本，使用其他包管理器会报错。
4. 样式开发
使用 Tailwind CSS v4
本项目使用 Tailwind CSS v4 进行样式开发，并已配置 shadcn 主题变量。
// 使用 Tailwind 类名
<div className="flex items-center gap-4 p-4 rounded-lg bg-background">
<Button className="bg-primary text-primary-foreground">
主要按钮
</Button>
</div>
// 使用 cn() 工具函数合并类名
import { cn } from '@/lib/utils';
<div className={cn(
"base-class",
condition && "conditional-class",
className
)}>
内容
</div>
主题变量
主题变量定义在 src/app/globals.css 中，支持亮色/暗色模式：
--background,--foreground--primary,--primary-foreground--secondary,--secondary-foreground--muted,--muted-foreground--accent,--accent-foreground--destructive,--destructive-foreground--border,--input,--ring
重要提示
- 必须使用 pnpm 作为包管理器
- 优先使用 shadcn/ui 组件 而不是从零开发基础组件
- 使用 TypeScript 进行类型安全开发