agent-Specialization/doc/frontend/phase1_setup.md

前端组件化 Phase 1 – 脚手架搭建

交付内容

1. 构建工具接入

   • 根目录新增 package.json + package-lock.json，安装 Vite + Vue 3 + Pinia + TypeScript + ESLint + Prettier。
   • vite.config.ts 输出到 static/dist/，并通过 Bundler module resolution 支持 .vue/ESM。
   • 配套 tsconfig.json、tsconfig.node.json、.eslintrc.cjs、.prettierrc、.prettierignore 约束代码质量。

2. 基础源码结构

   • static/src/ 下建立 main.ts、App.vue、stores/ui.ts、styles/base.css、env.d.ts，演示 Pinia 注册与 SFC 文件布局。
   • 目前 App.vue 仅渲染“实验模式”占位内容，后续阶段会逐步替换 legacy UI。

3. 入口加载策略

   • static/index.html 新增模块化 Loader：若 localStorage.useNewFrontend === '1' 或 window.__USE_NEW_FRONTEND__ === true，则加载 /static/dist/assets/main.js；否则回退到旧版 /static/app.js。
   • 通过 npm run build 生成的 bundle 文件固定位于 static/dist/assets/（无 hash），便于 Flask 模板引用。

4. 忽略项

   • .gitignore 添加 node_modules/ 和 static/dist/，避免构建产物/依赖入库。

使用方式

npm install          # 首次安装依赖
npm run dev          # 监听式构建（watch）
npm run build        # 生成 production bundle 到 static/dist
npm run lint         # ESLint
npm run format       # Prettier

启用实验前端：打开浏览器控制台执行 localStorage.setItem('useNewFrontend', '1')（或在全局脚本设置 window.__USE_NEW_FRONTEND__ = true;），刷新页面即可加载新的 Vite 入口；如需回退，执行 localStorage.removeItem('useNewFrontend') 或将变量设为 false。

更多组件拆分计划请阅读 doc/frontend/component_plan.md。