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. 移除