wind_power_cal/.claude/skills/wind-frontend-conventions/SKILL.md

name, description

name	description
wind-frontend-conventions	wind_power_cal 前端 React+Vite 规范。用于前端页面/接口/路由开发时，遵循 api.js 信封封装、vite 代理与目录约定。

前端 React+Vite 规范

目录

frontend/web_app/src/：main.jsx（入口）→ App.jsx（react-router）→ pages/ + utils/api.js。

API 封装（必须遵守）

src/utils/api.js：BASE_URL='/api'，request() 统一处理信封：

• fetch('/api'+url, {cache:'no-store'}) → 读 text→JSON.parse
• status===0 返回 json.data；否则 throw new Error(json.msg)
• 新增接口在此导出：

  export function getXxx() { return request('/xxx'); }
  export function postXxx(payload) {
    return request('/xxx', { method: 'POST', body: JSON.stringify(payload) });
  }
  

路由 / 主题

• react-router-dom BrowserRouter，首页 pages/HomePage.jsx
• 暗色主题；样式用 plain CSS（index.css / App.css / *.module.css），非 Tailwind / 非 CSS-in-JS
• 后端经 /api 前缀；生产由后端托管 SPA（document_root ./web）

构建配置

vite.config.js：base='/'，dev server :5173，proxy /api → http://localhost:8080。

开发

cd frontend/web_app
npm install
npm run dev      # http://localhost:5173
npm run build    # → dist/，由 package.sh 同步到后端 web/
npm run lint

注意：若将来要把前端挂到子路径（如 nginx /wind），必须同步改 base、BrowserRouter basename、api.js BASE_URL 三处——单靠 nginx 无法搬移根路径 SPA（资源/路由是绝对/写死的）。