mirror of
https://github.com/jason5ng32/MyIP.git
synced 2026-11-04 08:55:47 +00:00
jason5ng32andClaude Opus 4.6
0a5b0c1914
Set up Tailwind v4 + shadcn-vue infrastructure and replace the first Bootstrap component (Toast) as a vertical slice that proves the approach. Infrastructure (refactor/01 phase A): - Add tailwindcss + @tailwindcss/vite (devDependencies) and wire the plugin in vite.config.js - Add shadcn-vue runtime deps: reka-ui, class-variance-authority, clsx, tailwind-merge, lucide-vue-next - Add components.json and frontend/lib/utils.js (cn helper) - Define design tokens via shadcn CSS variables (oklch, neutral baseColor) in frontend/style/style.css - Wire dark mode: store.setDarkMode now toggles <html>.dark for the Tailwind dark: variant - Coexist with Bootstrap (no removal yet) Toast → vue-sonner (refactor/01 phase B item 1): - Replace internals of widgets/Toast.vue (Bootstrap Toast → vue-sonner) - Keep store.setAlert() public API unchanged so all 5 call sites stay put - Map alertStyle text-success/warning/danger/info to sonner severities Refactor planning: - Add AGENTS.md so future AI sessions know the project layout, JS-only preference, and where to find refactor progress - Add refactor/ with a 4-task plan, completion discipline, and per-task review checklists Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
重构计划索引
本目录管理 MyIP 当前阶段的重构任务。每个文件对应一个独立子项目。
启动日期：2026-04-15
子任务总览
| # | 文件 | 主题 | 状态 |
|---|---|---|---|
| 01 | 01-bootstrap-to-tailwind.md | Bootstrap → Tailwind + shadcn-vue（彻底替换） | 🟢 进行中（阶段 A 完成） |
| 02 | 02-app-vue-split.md | App.vue 上帝组件拆分 | 🟡 未开始 |
| 03 | 03-add-tests.md | 增加单元测试（Node node --test） |
🟢 进行中（基建+部分用例已完成于 dev） |
| 04 | 04-store-hardcoded.md | store.js 硬编码数据治理 | 🟡 未开始 |
状态图例：🟡 未开始 / 🟢 进行中 / ✅ 已完成 / ⚪ 已取消
推荐顺序
虽然顺序不强制，但建议这样推进，理由是后一项依赖前一项的成果：
- 先 01（Bootstrap → Tailwind）的基础设施部分（装 Tailwind / shadcn-vue / Sheet 替换 Offcanvas），因为 02（App.vue 拆分）会动到大量模板和命令式 Bootstrap 调用，先有新 UI 基建可以避免做两次。
- 同时启动 03（测试基建）——给 utils/ 加 Vitest，这是后续重构的安全网。
- 04（store 硬编码） 可以独立穿插进行，影响面小。
- 02（App.vue 拆分） 放到 01 推进过半再做，拆出的 composables 会更干净。
完成纪律（重要）
每次将子任务从 [ ] 改成 [x] 之前，必须执行以下检查：
- 全局搜索回扫：用 grep / Glob 搜索该子任务相关的关键词（如某个被替换的 Bootstrap class、被移除的 import、被抽离的函数名），确认全仓库没有遗漏的引用。
- 同类场景扫描：思考"这个改动是否还有类似场景没处理"。比如替换了一个 Modal，确认其它 Modal 是否同样需要替换；抽出一个 composable，确认是否还有重复逻辑可以合并。
- 运行时验证：能跑就跑（
npm run dev/npm run build/npm test），看构建/测试是否仍通过。 - 更新本 README 的总览表：状态从 🟡 / 🟢 改为 ✅。
- 如果发现遗漏：不要勾选，回到计划文件补充新子项后再继续。
每个计划文件末尾都有一个"完成前回顾清单"小节，列出该任务特定的检查点。
范围约束
当前阶段只做这 4 件事。其它建议（TypeScript 化、Biome 接入、依赖瘦身、circle-progress 替换、firebase 动态加载、vue-router 版本核对等）暂不进入计划，避免范围蔓延。
完成 4 项后再评估下一阶段做什么。