nprasad2077/MyIP

0 Fork 0

mirror of https://github.com/jason5ng32/MyIP.git synced 2026-11-04 08:55:47 +00:00

Files

T

jason5ng32andClaude Opus 4.6 0a5b0c1914 refactor: bootstrap → tailwind/shadcn-vue infra + sonner toast

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>

2026-04-15 02:37:58 +08:00

5.3 KiB

Raw Blame History

AGENTS.md

本文件给 AI 协作者（Claude / Codex 等）阅读。说明项目结构、约定、当前重构状态。

项目简介

MyIP (IPCheck.ing) 是一个开源 IP 工具箱，提供 IP 查询、连通性测试、WebRTC 检测、DNS 泄漏检测、网速测试、Whois、MTR、安全检查等功能。前后端同仓，前端 SPA + Node 后端 API。

技术栈

层	技术
前端框架	Vue 3 (Composition API, `<script setup>`)
状态管理	Pinia
路由	vue-router (hash mode)
国际化	vue-i18n（en / zh / fr / tr）
构建	Vite
UI（重构中）	Bootstrap 5 + bootstrap-icons → 正在迁移到 Tailwind + shadcn-vue
后端	Express 5
Auth	Firebase Auth（可选，按环境变量启用）
PWA	Serwist
测试	Node 内置 test runner（`node --test`，无第三方测试框架）
其它	chart.js / svgmap / @cloudflare/speedtest / maxmind / whoiser

语言与代码风格约定

必须使用 JavaScript，不要主动引入 TypeScript。
- 新文件用 .js / .vue，<script setup> 不带 lang="ts"
- 不要把 jsconfig.json 改成 tsconfig.json
- 用户明确要求 TS 时才使用
Vue 组件统一 <script setup> 写法
路径别名 @ → frontend/（见 jsconfig.json 与 vite.config.js）
注释可以写中文，提交信息按现有风格

目录结构

.
├── AGENTS.md                  ← 本文件
├── refactor/                  ← ⚠️ 重构进行中，所有 AI 改动前先看这里
│   ├── README.md              ← 重构索引与总进度
│   ├── 01-bootstrap-to-tailwind.md
│   ├── 02-app-vue-split.md
│   ├── 03-add-tests.md
│   └── 04-store-hardcoded.md
│
├── index.html
├── vite.config.js
├── jsconfig.json
├── package.json
│
├── frontend/                  ← 前端源码（Vite root 的别名 @）
│   ├── App.vue                ← 当前是上帝组件，待拆分（见 refactor/02）
│   ├── main.js                ← 入口、Pinia/i18n/router 装载、全局 tooltip 指令
│   ├── store.js               ← Pinia 主 store，含硬编码 achievements（见 refactor/04）
│   ├── firebase-init.js
│   ├── sw.js                  ← Service Worker 源文件（Serwist）
│   ├── router/                ← 路由（与 Bootstrap Offcanvas 强耦合，见 refactor/01）
│   ├── locales/               ← i18n 文案 + security-checklist 数据
│   ├── style/style.css        ← 全局样式（含 bootstrap import）
│   ├── utils/                 ← 工具函数（valid-ip / transform-ip-data / 快捷键 / 分析等）
│   │   └── getips/            ← 各家 IP 查询源的客户端封装
│   └── components/
│       ├── *.vue              ← 顶层功能区组件（IpInfos / SpeedTest / Advanced 等）
│       ├── ip-infos/          ← IP 卡片相关子组件
│       ├── advanced-tools/    ← MTR / Ping / Whois / Mac / 安全清单 等高级工具
│       ├── widgets/           ← Modal / Toast / Preferences / Help 等通用小部件
│       └── svgicons/          ← 内联 SVG 图标
│
├── api/                       ← 后端 API handlers（被 backend-server.js 装载）
├── common/                    ← 前后端共享：valid-ip、maxmind 服务、referer-check 等
├── public/                    ← 静态资源（logos / achievements 图）
├── tests/                     ← Node test runner 测试（已含 valid-ip / api-smoke）
├── backend-server.js          ← Express API 服务（默认端口 11966）
└── frontend-server.js         ← 仅用于 npm start 的静态文件服务

重构进行中 ⚠️

项目正在分阶段重构。任何代码改动前，请先阅读 refactor/README.md，确认改动是否落在某个进行中的重构子任务里、有没有冲突、有没有约定的迁移路径。

当前 4 个重构子项目（顺序非强制，但建议从 1 开始）：

refactor/01-bootstrap-to-tailwind.md — Bootstrap → Tailwind + shadcn-vue
refactor/02-app-vue-split.md — App.vue 上帝组件拆分
refactor/03-add-tests.md — 增加单元测试
refactor/04-store-hardcoded.md — store.js 硬编码治理

勾选完成项前的纪律： 每个子任务标记 [x] 之前，必须重新扫一遍当前计划文件相关代码，确认没有遗漏的引用、未迁移的同类调用、漏掉的边界场景。详见 refactor/README.md 里的"完成纪律"一节。

开发命令

npm run dev          # 同时启动 Vite + 后端（nodemon）
npm run build        # 前端构建
npm run preview      # Vite 预览构建产物
npm run start        # 启动构建后的前端 + 后端
npm test             # 跑 tests/*.test.js（Node 内置 test runner）
npm run check        # test + build，提交前自检

不要做的事

不要主动引入 TypeScript
不要在不属于当前 4 个重构子任务范围的代码上做"顺手优化"
不要在没看 refactor/ 的情况下批量修改组件样式或 store 结构
不要改 jsconfig.json 的语言模式

5.3 KiB Raw Blame History Unescape Escape