128 lines
2.9 KiB
Markdown
128 lines
2.9 KiB
Markdown
# projects
|
|
|
|
这是一个基于 React + Vite + [shadcn/ui](https://ui.shadcn.com) 的前端应用项目
|
|
|
|
## 快速开始
|
|
|
|
### 启动开发服务器
|
|
|
|
```bash
|
|
./scripts/start.sh
|
|
```
|
|
|
|
### 构建产物
|
|
|
|
```bash
|
|
./scripts/build.sh
|
|
```
|
|
|
|
### 提交更改
|
|
|
|
```bash
|
|
./scripts/commit.sh "commit message"
|
|
```
|
|
|
|
## 核心开发规范
|
|
|
|
### 1. 组件开发
|
|
|
|
**优先使用 shadcn/ui 基础组件**
|
|
|
|
本项目已预装完整的 shadcn/ui 组件库，位于 `src/components/ui/` 目录。开发时应优先使用这些组件作为基础：
|
|
|
|
```tsx
|
|
// ✅ 推荐：使用 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 管理依赖**
|
|
|
|
```bash
|
|
# ✅ 安装依赖
|
|
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 主题变量。
|
|
|
|
```tsx
|
|
// 使用 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`
|
|
|
|
## 重要提示
|
|
1. **必须使用 pnpm** 作为包管理器
|
|
2. **优先使用 shadcn/ui 组件** 而不是从零开发基础组件
|
|
3. **使用 TypeScript** 进行类型安全开发
|