# Task01：项目初始化与 UI 库集成

## 目标
- 使用 Vite + React + TypeScript 创建项目骨架
- 集成 TailwindCSS 与 shadcn/ui，准备基础组件（Card/Badge/Button/Alert/Accordion/Separator）

## 步骤（计划）
1) 初始化 Vite 项目（在 `g:\work\projects\ai-stuff\test_webcodecs` 目录内）：
   - `npm create vite@latest . -- --template react-ts`
   - `npm install`
2) 安装并配置 TailwindCSS：
   - `npm install -D tailwindcss postcss autoprefixer`
   - `npx tailwindcss init -p`
   - Tailwind 配置：`content` 指向 `./index.html` 与 `./src/**/*.{ts,tsx}`
   - 在 `src/index.css` 添加：`@tailwind base; @tailwind components; @tailwind utilities;`
3) 初始化 shadcn/ui：
   - `npx shadcn-ui@latest init`
   - 选择 Vite + React + TypeScript 模板，路径默认 `./src/components/ui`
   - 添加组件：
     - `npx shadcn-ui@latest add button card badge alert accordion separator`
4) 建立基础目录：
   - `src/components/DetectorCard.tsx`（空组件占位）
   - `src/utils/codecs/`（空目录占位）

## 验收标准
- `npm run dev` 能启动并渲染示例页面
- Tailwind 与 shadcn/ui 样式正常（按钮与卡片能显示）
- 存在 `src/utils/codecs` 目录为后续实现准备

## 产出
- Vite + React + TS 基础工程
- Tailwind 与 shadcn/ui 已集成，组件可用