dreamweaver/.claude/ui-refactor-plan.md

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 确保无类型错误。