vgs_test_suites/trae/tasks/task01.md

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 已集成，组件可用