lyf
8402f1bc2d
- 更新 README 文档，增加项目介绍和说明 - 优化 Vite 配置，支持多页面入口和路径别名 - 移除未使用的 MyProject.vue 组件 - 更新项目依赖包版本 - 添加 Tailwind CSS 相关配置 - 优化编辑器布局和样式 - 添加 UI 组件库支持 - 更新 Logo 和加载动画 - 修复国际化配置 Made-with: Cursor
93 lines
2.4 KiB
Markdown
93 lines
2.4 KiB
Markdown
# Astral3D UI Migration TODO - NaiveUI to Shadcn UI + Tailwind CSS
|
|
|
|
> **Project**: Astral3D Web 3D Editor
|
|
> **Goal**: Migrate from NaiveUI to Shadcn UI + Tailwind CSS
|
|
> **Style**: Minimalist Modern
|
|
> **Created**: 2026-03-12
|
|
|
|
---
|
|
|
|
## Progress Overview
|
|
|
|
| Phase | Status | Progress | Est. Time |
|
|
|-------|--------|----------|-----------|
|
|
| **Phase 1: Environment Setup** | Done | 100% | 2-4 hours |
|
|
| **Phase 2: Basic Components** | In Progress | ~30% | 6-8 hours |
|
|
| **Phase 3: Layout Components** | Pending | 0% | 4-6 hours |
|
|
| **Phase 4: Feedback Components** | Pending | 0% | 4-6 hours |
|
|
| **Phase 5: Data Components** | Pending | 0% | 4-6 hours |
|
|
| **Phase 6: Verification** | Pending | 0% | 4-8 hours |
|
|
| **Phase 7: Optimization** | Pending | 0% | 2-4 hours |
|
|
|
|
**Overall Progress: ~15%**
|
|
|
|
---
|
|
|
|
## Phase 1: Environment Setup (Complete)
|
|
|
|
### 1.1 Dependencies
|
|
|
|
- [x] Tailwind CSS v4 installed
|
|
- [x] @tailwindcss/postcss installed
|
|
- [x] Shadcn Vue dependencies (radix-vue, class-variance-authority, clsx, tailwind-merge)
|
|
- [x] Dark mode support (@vueuse/core)
|
|
|
|
### 1.2 Configuration Files
|
|
|
|
- [x] `tailwind.config.ts` created
|
|
- [x] `postcss.config.js` updated (using @tailwindcss/postcss)
|
|
- [x] `src/lib/utils.ts` (cn() utility function)
|
|
- [x] `src/assets/css/globals.css` with Tailwind v4 syntax and CSS variables
|
|
|
|
### 1.3 Theme Design System
|
|
|
|
- [x] Color system defined (matching NaiveUI theme)
|
|
- [x] Spacing system
|
|
- [x] Border radius system
|
|
|
|
---
|
|
|
|
## Phase 2: Basic Components Migration (In Progress)
|
|
|
|
### 2.1 Button
|
|
- [x] Component: `Button` created
|
|
- [x] Location: `src/components/ui/Button/Button.vue`
|
|
|
|
### 2.2 Input
|
|
- [x] Component: `Input` created
|
|
- [x] Location: `src/components/ui/Input/Input.vue`
|
|
|
|
### 2.3 Card
|
|
- [x] Components: Card, CardHeader, CardDescription, CardTitle, CardContent, CardFooter
|
|
- [x] Location: `src/components/ui/Card/`
|
|
|
|
### 2.4 Dialog
|
|
- [x] Components: Dialog, DialogHeader, DialogTitle, DialogDescription, DialogClose
|
|
- [x] Location: `src/components/ui/Dialog/`
|
|
|
|
### 2.5 Select
|
|
- [ ] Pending implementation
|
|
|
|
### 2.6 Checkbox / Radio
|
|
- [ ] Pending implementation
|
|
|
|
### 2.7 Switch
|
|
- [ ] Pending implementation
|
|
|
|
---
|
|
|
|
## Completed Components
|
|
|
|
```typescript
|
|
// Available from: src/components/ui/index.ts
|
|
import { Button, Input, Card, CardHeader, CardDescription, CardTitle, CardContent, CardFooter } from '@/components/ui'
|
|
```
|
|
|
|
---
|
|
|
|
## Build Status
|
|
|
|
- Project builds successfully with Vite
|
|
- Tailwind CSS v4 configured correctly
|
|
- PostCSS with @tailwindcss/postcss plugin working
|