e9d7f8832a
- Backend: FastAPI + SQLAlchemy + Celery (Python 3.11+) - Frontend: Vue 3 + TypeScript + Pinia + Tailwind - Admin Frontend: separate Vue 3 app for management - Docker Compose: 9 services orchestration - Specs: design prototypes, memory system PRD, product roadmap Cleanup performed: - Removed temporary debug scripts from backend root - Removed deprecated admin_app.py (embedded UI) - Removed duplicate docs from admin-frontend - Updated .gitignore for Vite cache and egg-info
304 lines
8.9 KiB
Markdown
304 lines
8.9 KiB
Markdown
DreamWeaver 前端 UI 重构任务列表
|
||
|
||
阶段一：基础设施（必须先完成）
|
||
|
||
TASK-001 [x]: 安装图标库
|
||
|
||
文件: frontend/package.json
|
||
操作: 安装 @heroicons/vue 图标库
|
||
命令: npm install @heroicons/vue
|
||
验收: 能在 Vue 组件中 import { SparklesIcon } from '@heroicons/vue/24/outline'
|
||
|
||
TASK-002 [x]: 扩展 Tailwind 配置
|
||
|
||
文件: frontend/tailwind.config.js
|
||
操作: 添加完整的设计系统配置
|
||
内容:
|
||
|
||
- 扩展 fontFamily 添加 sans: ['Noto Sans SC', ...]
|
||
- 扩展 borderRadius 添加 '2xl': '1rem', '3xl': '1.5rem'
|
||
- 扩展 boxShadow 添加 'glass': '0 8px 32px rgba(0,0,0,0.08)'
|
||
- 扩展 animation 添加 'float': 'float 3s ease-in-out infinite'
|
||
- 扩展 keyframes 添加 float 动画定义
|
||
验收: Tailwind 类 font-sans, rounded-3xl, shadow-glass, animate-float 可用
|
||
|
||
TASK-003 [x]: 精简全局样式
|
||
|
||
文件: frontend/src/style.css
|
||
操作:
|
||
|
||
1. 删除 .animate-float (移至 Tailwind)
|
||
2. 删除 .stars::before/after (移除 emoji 装饰)
|
||
3. 保留 .glass, .btn-magic, .input-magic, .card-hover, .gradient-text
|
||
4. 删除 --gradient-magic 变量（过于花哨）
|
||
验收: 文件行数减少约 30%，无 emoji 相关 CSS
|
||
|
||
---
|
||
|
||
阶段二：创建可复用组件
|
||
|
||
TASK-004 [x]: 创建 BaseButton 组件
|
||
|
||
文件: frontend/src/components/ui/BaseButton.vue
|
||
操作: 创建统一按钮组件
|
||
Props:
|
||
|
||
- variant: 'primary' | 'secondary' | 'danger' | 'ghost'
|
||
- size: 'sm' | 'md' | 'lg'
|
||
- loading: boolean
|
||
- disabled: boolean
|
||
- icon: Component (可选，Heroicon 组件)
|
||
样式规范:
|
||
- primary: 使用 .btn-magic 渐变
|
||
- secondary: bg-white border border-gray-200
|
||
- danger: bg-red-500 text-white
|
||
- ghost: bg-transparent hover:bg-gray-100
|
||
验收: 导出组件，支持 slot 内容和所有 props
|
||
|
||
TASK-005 [x]: 创建 BaseCard 组件
|
||
|
||
文件: frontend/src/components/ui/BaseCard.vue
|
||
操作: 创建统一卡片组件
|
||
Props:
|
||
|
||
- hover: boolean (是否启用悬浮效果)
|
||
- padding: 'none' | 'sm' | 'md' | 'lg'
|
||
样式: 使用 .glass + rounded-2xl + 可选 .card-hover
|
||
验收: 导出组件，支持默认 slot
|
||
|
||
TASK-006 [x]: 创建 BaseInput 组件
|
||
|
||
文件: frontend/src/components/ui/BaseInput.vue
|
||
操作: 创建统一输入框组件
|
||
Props:
|
||
|
||
- modelValue: string
|
||
- type: 'text' | 'password' | 'email' | 'number'
|
||
- placeholder: string
|
||
- label: string (可选)
|
||
- error: string (可选)
|
||
- disabled: boolean
|
||
样式: 使用 .input-magic + 错误状态红色边框
|
||
验收: 支持 v-model，显示 label 和 error
|
||
|
||
TASK-007 [x]: 创建 BaseSelect 组件
|
||
|
||
文件: frontend/src/components/ui/BaseSelect.vue
|
||
操作: 创建统一下拉选择组件
|
||
Props:
|
||
|
||
- modelValue: string | number
|
||
- options: Array<{ value: string | number, label: string }>
|
||
- label: string (可选)
|
||
- placeholder: string
|
||
- disabled: boolean
|
||
样式: 与 BaseInput 保持一致
|
||
验收: 支持 v-model，正确渲染 options
|
||
|
||
TASK-008 [x]: 创建 BaseTextarea 组件
|
||
|
||
文件: frontend/src/components/ui/BaseTextarea.vue
|
||
操作: 创建统一文本域组件
|
||
Props:
|
||
|
||
- modelValue: string
|
||
- placeholder: string
|
||
- rows: number
|
||
- maxLength: number (可选，显示字数统计)
|
||
- label: string (可选)
|
||
样式: 使用 .input-magic，右下角显示字数
|
||
验收: 支持 v-model，字数统计正确
|
||
|
||
TASK-009 [x]: 创建 LoadingSpinner 组件
|
||
|
||
文件: frontend/src/components/ui/LoadingSpinner.vue
|
||
操作: 创建统一加载动画组件
|
||
Props:
|
||
|
||
- size: 'sm' | 'md' | 'lg'
|
||
- text: string (可选，加载提示文字)
|
||
样式: 紫色渐变圆环旋转动画，无 emoji
|
||
验收: 三种尺寸正确渲染
|
||
|
||
TASK-010 [x]: 创建 EmptyState 组件
|
||
|
||
文件: frontend/src/components/ui/EmptyState.vue
|
||
操作: 创建统一空状态组件
|
||
Props:
|
||
|
||
- icon: Component (Heroicon)
|
||
- title: string
|
||
- description: string
|
||
- actionText: string (可选)
|
||
- actionTo: string (可选，路由路径)
|
||
样式: 居中布局，图标使用 Heroicon 而非 emoji
|
||
验收: 点击按钮正确跳转
|
||
|
||
TASK-011 [x]: 创建 ConfirmModal 组件
|
||
|
||
文件: frontend/src/components/ui/ConfirmModal.vue
|
||
操作: 创建统一确认弹窗组件
|
||
Props:
|
||
|
||
- show: boolean
|
||
- title: string
|
||
- message: string
|
||
- confirmText: string
|
||
- cancelText: string
|
||
- variant: 'danger' | 'warning' | 'info'
|
||
Emits: confirm, cancel
|
||
样式: 使用 .glass 背景，Transition 动画
|
||
验收: 显示/隐藏动画流畅，事件正确触发
|
||
|
||
TASK-012 [x]: 创建组件导出索引
|
||
|
||
文件: frontend/src/components/ui/index.ts
|
||
操作: 统一导出所有 UI 组件
|
||
内容:
|
||
export { default as BaseButton } from './BaseButton.vue'
|
||
export { default as BaseCard } from './BaseCard.vue'
|
||
// ... 其他组件
|
||
验收: 可以 import { BaseButton, BaseCard } from '@/components/ui'
|
||
|
||
---
|
||
|
||
阶段三：重构现有页面
|
||
|
||
TASK-013 [x]: 重构 NavBar 组件
|
||
|
||
文件: frontend/src/components/NavBar.vue
|
||
操作:
|
||
|
||
1. 将 emoji ✨🌟📚🛠️🚪 替换为 Heroicons (SparklesIcon, StarIcon, BookOpenIcon, Cog6ToothIcon, ArrowRightOnRectangleIcon)
|
||
2. 将 ?? 占位符替换为正确图标 (UserGroupIcon, GlobeAltIcon)
|
||
3. 使用 BaseButton 替换登录按钮
|
||
4. 移除 animate-float 和 animate-pulse 装饰动画
|
||
验收: 无 emoji，图标统一为 Heroicons，视觉更专业
|
||
|
||
TASK-014 [x]: 重构 Home.vue 页面
|
||
|
||
文件: frontend/src/views/Home.vue
|
||
操作:
|
||
|
||
1. 删除 Hero 区域的浮动 emoji 装饰 (🌙⭐✨🌟)
|
||
2. 将模式切换按钮的 emoji (✨📝) 替换为 Heroicons
|
||
3. 将教育主题按钮的 emoji 替换为 Heroicons 或移除
|
||
4. 使用 BaseButton 替换提交按钮
|
||
5. 使用 BaseTextarea 替换文本输入区
|
||
6. 使用 BaseSelect 替换档案/宇宙选择器
|
||
7. 将 Features 区域的 emoji (🎨🔊📚) 替换为 Heroicons
|
||
验收: 页面无 emoji，使用统一组件，视觉简洁专业
|
||
|
||
TASK-015 [x]: 重构 MyStories.vue 页面
|
||
|
||
文件: frontend/src/views/MyStories.vue
|
||
操作:
|
||
|
||
1. 使用 BaseButton 替换"创作新故事"按钮
|
||
2. 使用 LoadingSpinner 替换自定义加载动画
|
||
3. 使用 EmptyState 替换空状态区域（移除 📚✨🪄 emoji）
|
||
4. 将错误状态的 😢 替换为 Heroicon ExclamationCircleIcon
|
||
5. 将统计区域的 📖 替换为 Heroicon
|
||
6. 使用 BaseCard 包装故事卡片
|
||
验收: 页面无 emoji，组件统一
|
||
|
||
TASK-016 [x]: 重构 StoryDetail.vue 页面
|
||
|
||
文件: frontend/src/views/StoryDetail.vue
|
||
操作:
|
||
|
||
1. 使用 LoadingSpinner 替换加载动画
|
||
2. 将 🎨 替换为 Heroicon PhotoIcon
|
||
3. 将 🔊 替换为 Heroicon SpeakerWaveIcon
|
||
4. 将 ✨ 替换为 Heroicon SparklesIcon
|
||
5. 将 🗑️ 替换为 Heroicon TrashIcon
|
||
6. 将 ⚠️ 替换为 Heroicon ExclamationTriangleIcon
|
||
7. 使用 BaseButton 替换所有按钮
|
||
8. 使用 ConfirmModal 替换删除确认弹窗
|
||
验收: 页面无 emoji，弹窗使用统一组件
|
||
|
||
TASK-017 [x]: 重构 AdminProviders.vue 页面
|
||
|
||
文件: frontend/src/views/AdminProviders.vue
|
||
操作:
|
||
|
||
1. 移除 <style scoped> 中的所有自定义样式
|
||
2. 登录表单使用 BaseCard + BaseInput + BaseButton
|
||
3. Provider 表单使用 BaseCard + BaseInput + BaseSelect + BaseButton
|
||
4. 表格使用 Tailwind 样式：divide-y divide-gray-200，hover:bg-gray-50
|
||
5. 操作按钮使用 BaseButton variant="ghost"
|
||
6. 整体布局使用 .glass 背景
|
||
7. 添加页面标题使用 .gradient-text
|
||
验收: 与主应用风格一致，无原生 HTML 样式
|
||
|
||
TASK-018 [x]: 重构 ChildProfiles.vue 页面
|
||
|
||
文件: frontend/src/views/ChildProfiles.vue
|
||
操作:
|
||
|
||
1. 检查并替换所有 emoji 为 Heroicons
|
||
2. 使用 BaseButton, BaseCard, BaseInput 等统一组件
|
||
3. 使用 EmptyState 处理空状态
|
||
4. 使用 LoadingSpinner 处理加载状态
|
||
验收: 页面无 emoji，组件统一
|
||
|
||
TASK-019 [x]: 重构 ChildProfileDetail.vue 页面
|
||
|
||
文件: frontend/src/views/ChildProfileDetail.vue
|
||
操作: 同 TASK-018
|
||
验收: 页面无 emoji，组件统一
|
||
|
||
TASK-020 [x]: 重构 Universes.vue 页面
|
||
|
||
文件: frontend/src/views/Universes.vue
|
||
操作: 同 TASK-018
|
||
验收: 页面无 emoji，组件统一
|
||
|
||
TASK-021 [x]: 重构 UniverseDetail.vue 页面
|
||
|
||
文件: frontend/src/views/UniverseDetail.vue
|
||
操作: 同 TASK-018
|
||
验收: 页面无 emoji，组件统一
|
||
|
||
---
|
||
|
||
阶段四：优化与收尾
|
||
|
||
TASK-022 [x]: 添加深色模式支持（可选）
|
||
|
||
文件: frontend/tailwind.config.js, frontend/src/style.css
|
||
操作:
|
||
|
||
1. 在 tailwind.config.js 添加 darkMode: 'class'
|
||
2. 为 .glass, .btn-magic 等添加 dark: 变体
|
||
3. 在 NavBar 添加主题切换按钮
|
||
验收: 点击切换按钮，整体配色切换
|
||
|
||
TASK-023 [x]: 添加 prefers-reduced-motion 支持
|
||
|
||
文件: frontend/src/style.css
|
||
操作: 为所有动画添加媒体查询
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.animate-float, .card-hover, .btn-magic { animation: none; transition: none; }
|
||
}
|
||
验收: 系统设置"减少动态效果"时，动画停止
|
||
|
||
TASK-024 [x]: 性能优化 - 减少 backdrop-filter
|
||
|
||
文件: frontend/src/style.css
|
||
操作:
|
||
|
||
1. 将 .glass 的 backdrop-filter: blur(20px) 改为 blur(10px)
|
||
2. 移除嵌套 .glass 元素的 backdrop-filter
|
||
验收: 页面滚动更流畅，尤其在移动端
|
||
|
||
---
|
||
|
||
执行顺序建议
|
||
|
||
阶段一 (TASK-001 ~ 003) → 阶段二 (TASK-004 ~ 012) → 阶段三 (TASK-013 ~ 021) → 阶段四 (TASK-022 ~ 024)
|
||
|
||
每个任务完成后运行 npm run build 确保无类型错误。
|
||
|
||
|