Skip to content

V2.md

Latest commit

 

History

History
86 lines (69 loc) · 4.51 KB

V2.md

File metadata and controls

86 lines (69 loc) · 4.51 KB

StudyWithMiku v2 升级重构计划书

1. 技术栈选型 (推荐)

为了保持“静态部署”的特性，同时获得现代开发的便利性，推荐使用以下技术栈：

  • 核心框架: Vue 3 (使用 Composition API) + TypeScript
    • 理由: Vue 3 上手快，适合单页应用，Composition API 利于逻辑复用（比如计时器逻辑）。TS 提供类型安全，方便后期维护。
  • 构建工具: Vite
    • 理由: 极速启动和打包，开发体验远超传统 Webpack。
  • 状态管理: Pinia
    • 理由: 比 Vuex 更轻量、更直观，完美管理“播放状态”、“计时数据”、“用户设置”等全局数据。
  • 样式方案: Tailwind CSS (或 SCSS)
    • 理由: Tailwind 可以极快地构建 UI，且方便后期实现“UI 拼图化/主题化”。
  • PWA 支持: vite-plugin-pwa
    • 理由: 自动生成 Service Worker 和 Manifest，替代你目前手写的 sw.js，轻松实现离线访问。
  • 云端服务 (BaaS): Supabase 或 LeanCloud
    • 理由: 既然要“静态部署”又要“云端记录/排行榜”，我们需要一个后端即服务 (BaaS)。它们提供免费层，前端直接调用 API 即可存取数据，无需自己买服务器写后端。

2. 架构设计变化

模块 v1 (当前) v2 (目标)
项目结构 HTML + JS 散文件 组件化 (.vue 文件)
DOM 操作 jQuery 直接操作 ($('#id').fadeIn()) 数据驱动视图 (Vue 响应式变量)
播放器 APlayer + MetingJS (全局变量) 封装为 <MusicPlayer /> 组件
计时器 mikuplayer.js 中的 setInterval 封装为 useTimer (Composable) 或 Pinia Store
统计 Umami (HTML 引入) 封装为统计插件/Hook
部署 静态文件直传 构建 (npm run build) 后产出静态文件

3. 详细实施路线图 (Roadmap)

建议按照以下顺序一步步执行：

第一阶段：基础建设 (Infrastructure)

  1. 初始化项目: 使用 Vite 创建 Vue 3 + TS 项目。
  2. 配置环境: 安装 Pinia, Vue Router, Tailwind CSS, vite-plugin-pwa。
  3. 目录规划: 建立 src/components, src/stores, src/assets, src/hooks 等目录。
  4. 资源迁移: 将 assets 下的图片、视频、字体迁移到新项目。

第二阶段：核心功能复刻 (Migration)

  1. 背景层 (Background): 实现视频背景播放组件，处理加载状态。
  2. 播放器组件 (Player):
    • 集成 APlayer（或寻找 Vue 版本的替代品）。
    • 实现歌单 ID 的配置化。
  3. 计时器核心 (Timer Core):
    • 使用 Pinia 重写 valStore 中的计时逻辑。
    • 实现“学习中”、“休息中”的状态切换。
  4. 主界面 (Dashboard):
    • 复刻首页 UI，显示时间、一言、倒计时。
    • 实现“全屏”、“设置”等按钮功能。

第三阶段：新功能实现 (New Features)

  1. 番茄钟 (Pomodoro):
    • 基于计时器核心，增加“专注时长”和“休息时长”的设定。
    • 实现自动状态流转（专注 -> 休息 -> 专注）。
  2. UI 拼图化 (Draggable UI):
    • 引入拖拽库 (如 vue-draggable-plus)。
    • 让时钟、播放器、一言框变成可拖拽的卡片。
  3. 白噪音 (White Noise):
    • 添加一个新的音频控制面板，允许混合播放雨声、键盘声等。

第四阶段：云端集成 (Cloud Integration)

  1. 用户系统: 接入 Supabase Auth (支持 GitHub/Google 登录，或匿名登录)。
  2. 数据同步:
    • 设计数据库表结构 (study_logs, users)。
    • 实现学习时长上传。
  3. 排行榜: 读取云端数据并展示。

第五阶段：优化与发布 (Release)

  1. PWA 配置: 完善 manifest.json 和缓存策略，确保离线可用。
  2. SEO 优化: 确保 meta 标签正确。
  3. 部署: 配置 GitHub Actions 自动构建并推送到 gh-pages 分支。

4. 针对 TODO 列表的解决方案

  • [ ] 番茄钟: 在 Pinia Store 中增加 mode 状态 (normal | pomodoro)，复用底层计时逻辑。
  • [ ] 学习时长云端记录/排行榜: 使用 Supabase，前端直接写 SQL (通过 JS SDK) 查询 Top 10 数据。
  • [ ] 离线使用: vite-plugin-pwa 可以配置 GenerateSW 策略，自动缓存所有构建产物和静态资源。
  • [ ] UI 拼图化: 利用 Vue 的动态组件和 Grid 布局系统，配合拖拽库实现。