pandax 0.0.1

package/skills/pandax-frontend-architecture/SKILL.md

@@ -0,0 +1,1239 @@
+---
+name: "pandax-frontend-architecture"
+category: "frontend"
+description: "设计前端项目架构与技术方案。Invoke when 新项目技术选型、划分业务模块、设计目录结构、制定前后端交互方案、或评估前端框架与工程化方案。"
+---
+
+# Pandax 前端架构设计
+
+本 skill 用于规范前端项目整体架构设计，包括技术选型、目录结构、模块划分、状态管理、路由设计、组件分层、性能与工程化策略。
+
+## 触发条件
+
+- 启动一个新前端项目，需要做技术选型
+- 需要划分业务模块或微前端边界
+- 需要设计或调整项目目录结构
+- 需要制定前后端数据交互方案
+- 需要评估是否引入新框架、新工具或重构现有架构
+- 项目规模扩大，现有架构出现明显瓶颈
+
+## 设计原则
+
+1. **单一职责**：每个模块、每个目录只做一类事
+2. **关注点分离**：UI、状态、数据、路由、样式分层清晰
+3. **可测试**：核心逻辑不依赖 UI，便于单元测试
+4. **可扩展**：新增功能对现有模块影响最小
+5. **可维护**：目录命名和文件组织一眼能看懂
+6. **性能优先**：首屏加载、代码分割、缓存策略提前考虑
+
+## 推荐技术栈
+
+本 skill 默认以 **Vue 3 最新版 + Vite 8 最新版** 为基础技术栈，如需 React 方案，需显式说明。
+
+| 层级 | 推荐方案 | 说明 |
+|------|---------|------|
+| 框架 | Vue 3（最新版） | Composition API + `<script setup>` |
+| 构建 | Vite 8（最新版） | 快速 HMR、原生 ESM |
+| 语言 | TypeScript 6.0（暂不升 7，详见 [工程规范配置](#工程规范配置)） | 强制类型，提升可维护性 |
+| 状态 | Pinia | Vue 官方推荐，类型友好 |
+| 路由 | Vue Router 4 | 按模块懒加载 |
+| 样式 | UnoCSS + SCSS | 原子化 CSS + 变量/模块化 |
+| 请求 | Axios + 统一封装 | 集中处理错误、loading、token |
+| 规范 | ESLint 9 + flat config + Prettier + commitlint + husky | 强制类型、代码风格、提交规范，详见 [工程规范配置](#工程规范配置) |
+| UI 库 | Element Plus | 后台管理系统首选 |
+
+## 项目骨架生成流程
+
+当用户要求"生成前端项目骨架"、"初始化项目"、"创建 Vue3 项目"时，按以下步骤执行：
+
+### 步骤 1：询问骨架类型
+
+必须向用户确认要创建哪种骨架，提供以下选项：
+
+| 选项 | 说明 |
+|------|------|
+| **A. 单应用骨架** | 一个独立的 Vue3 应用，适合中小型项目 |
+| **B. Monorepo + 微前端主应用 + 微前端应用** | 一主多从的完整微前端仓库 |
+| **C. 微前端主应用** | 只生成 wujie 基座主应用 |
+| **D. 微前端应用** | 只生成可被 wujie 加载的子应用 |
+
+如果用户未明确选择，默认推荐 **A. 单应用骨架**。
+
+### 步骤 2：确认技术栈
+
+默认技术栈为：Vue 3 最新版 + Vite 8 最新版 + TypeScript + Pinia + UnoCSS + SCSS + Axios + Element Plus。
+
+询问用户是否需要调整：
+- 是否需要 Element Plus？
+- 是否需要 vue-i18n 国际化？
+- 是否需要 wujie 微前端相关依赖？（B/C/D 必含）
+- **包名前缀**：packages 共享包与 apps 应用包名均不带 scope，默认前缀 `pandax-`（如 `pandax-core`、`pandax-base`）。用户可指定任意前缀（如 `myorg-`），生成时统一替换；目录扁平化放在 `packages/{core,components,hooks,styles}/`，不使用 `@scope/` 子目录
+
+### 步骤 3：读取 pandax-frontend-standards 规范
+
+在生成目录和文件之前，必须先读取 `.trae/skills/pandax-frontend-standards/SKILL.md`，确保生成的骨架符合 Pandax 前端规范：
+
+- 目录命名：是否使用 `views/`、`components/`、`services/`、`constants/`、`locales/` 等约定
+- 文件命名：组件目录是否全小写 + 短横线，文件是否 `index.vue`、`Prop.ts`、`Type.ts`、`index.module.scss`
+- 组件结构：是否使用 `<script setup lang="ts">`，是否按 region 组织代码
+- 页面组织：`views/{module}/pages/` 结构，新增/编辑是否默认抽屉
+- API 分层：`src/api/request.ts` + `src/services/` 两层结构
+- 样式规范：SCSS 变量、`index.module.scss`、UnoCSS 原子类
+- 国际化：`src/locales/` 目录
+- 常量：`src/constants/` 目录
+
+如果项目中已有 `docs/standards/` 文档，优先读取项目内文档；否则使用 `pandax-frontend-standards` 中的默认约定。
+
+### 步骤 4：按骨架类型和规范生成目录和文件
+
+生成完成后，给出：
+1. 目录结构
+2. 核心文件内容
+3. 安装依赖命令
+4. 启动命令
+5. 本次生成所依据的 Pandax 规范条目
+
+## 目录结构
+
+```text
+src/
+├── api/                  # 底层请求封装（axios 实例、拦截器）
+├── assets/               # 静态资源
+├── components/           # 通用业务组件
+├── composables/          # Vue 组合式函数 / React Hooks
+├── constants/            # 全局常量、枚举、配置项
+├── directives/           # 自定义指令
+├── layouts/              # 页面布局组件
+├── locales/              # 国际化资源文件
+├── router/               # 路由配置
+├── services/             # 业务 API 对接层，按模块拆分
+├── stores/               # 全局状态管理
+├── styles/               # 全局样式、变量、mixins
+├── types/                # 全局类型定义
+├── utils/                # 通用工具函数
+└── views/                # 页面级组件，按业务模块组织
+```
+
+### 关键目录说明
+
+| 目录 | 职责 | 示例 |
+|------|------|------|
+| `api/` | 底层请求封装 | `request.ts`（axios 实例、拦截器） |
+| `services/` | 业务 API 对接 | `user.ts`（用户相关接口调用） |
+| `constants/` | 常量、枚举、配置 | `enum.ts`、`config.ts` |
+| `locales/` | 国际化资源 | `zh-CN.json`、`en-US.json` |
+| `types/` | 全局 TypeScript 类型 | `global.d.ts`、`user.ts` |
+| `views/` | 页面组件 | `user/pages/list/index.vue` |
+
+## 模块划分策略
+
+### 按业务领域划分（推荐）
+
+页面按业务模块组织在 `views/` 下，每个模块包含自己的页面、私有组件和类型定义。
+
+```text
+src/views/
+├── user/                 # 用户模块
+│   ├── components/       # 模块私有组件
+│   ├── pages/            # 页面
+│   │   ├── list/
+│   │   ├── detail/
+│   │   └── form/
+│   └── Type.ts         # 模块类型
+├── order/                # 订单模块
+└── product/              # 产品模块
+```
+
+### 适用场景
+
+| 项目规模 | 推荐结构 |
+|---------|---------|
+| 小型项目（<10 页面） | `views/` 平铺，页面直接放 `views/` 下 |
+| 中型项目（10-50 页面） | `views/{module}/pages/` 按业务模块组织 |
+| 大型项目 / 多团队 | Monorepo + 微前端（wujie） |
+
+## A. 单应用骨架生成
+
+### 目录结构
+
+```text
+my-app/
+├── package.json
+├── vite.config.ts
+├── tsconfig.json
+├── tsconfig.node.json
+├── env.d.ts
+├── index.html
+├── eslint.config.js          # Vue 3 官方 ESLint 9 flat config
+├── .prettierrc.json
+├── .editorconfig
+├── commitlint.config.js       # Conventional Commits
+├── .gitignore
+├── .husky/                    # Git hooks
+│   ├── pre-commit             # 跑 lint-staged
+│   └── commit-msg             # 跑 commitlint
+└── src/
+    ├── api/
+    │   └── request.ts
+    ├── assets/
+    ├── components/
+    ├── composables/
+    ├── constants/
+    ├── directives/
+    ├── layouts/
+    │   └── default-layout/
+    │       ├── index.vue
+    │       └── index.module.scss
+    ├── locales/
+    │   └── zh-CN.json
+    ├── router/
+    │   └── index.ts
+    ├── services/
+    ├── stores/
+    │   └── index.ts
+    ├── styles/
+    │   ├── global.scss
+    │   └── variables.scss
+    ├── types/
+    │   └── global.d.ts
+    ├── utils/
+    ├── views/
+    │   └── home/
+    │       ├── index.vue
+    │       ├── Prop.ts
+    │       ├── Type.ts
+    │       └── index.module.scss
+    ├── App.vue
+    └── main.ts
+```
+
+### package.json
+
+```json
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"**/*.{ts,tsx,cts,mts,vue,js,jsx,cjs,mjs,json,scss,md,yml,yaml}\"",
+    "prepare": "husky",
+    "commit": "cz"
+  },
+  "dependencies": {
+    "vue": "^3.5.0",
+    "vue-router": "^4.5.0",
+    "pinia": "^2.3.0",
+    "axios": "^1.8.0",
+    "element-plus": "^2.9.0",
+    "@element-plus/icons-vue": "^2.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.0",
+    "vite": "^8.0.0",
+    "vue-tsc": "^3.3.11",
+    "typescript": "^6.0.3",
+    "eslint": "^9.18.0",
+    "eslint-plugin-vue": "^9.33.0",
+    "@vue/eslint-config-typescript": "^14.9.0",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "prettier": "^3.5.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.3.0",
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
+    "commitizen": "^4.3.1",
+    "cz-conventional-changelog": "^3.3.0",
+    "sass": "^1.86.0",
+    "unocss": "^66.0.0",
+    "@unocss/preset-uno": "^66.0.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,cts,mts,vue,js,jsx,cjs,mjs}": "eslint --fix",
+    "*.{ts,tsx,cts,mts,vue,js,jsx,cjs,mjs,json,scss,md,yml,yaml}": "prettier --write"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  }
+}
+```
+
+### vite.config.ts
+
+```ts
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+import UnoCSS from 'unocss/vite';
+
+export default defineConfig({
+  plugins: [vue(), UnoCSS()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "@/styles/variables.scss" as *;`,
+      },
+    },
+  },
+});
+```
+
+### main.ts
+
+```ts
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import 'virtual:uno.css';
+import './styles/global.scss';
+
+import App from './App.vue';
+import router from './router';
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+app.use(ElementPlus);
+
+app.mount('#app');
+```
+
+### 输出要求
+
+生成单应用骨架时，必须包含：
+1. `package.json` 使用 Vue 3 最新版、Vite 8 最新版
+2. `vite.config.ts` 配置 `@` 别名、UnoCSS、SCSS 全局变量
+3. `src/api/request.ts` 统一 axios 封装
+4. `src/router/index.ts` Vue Router 4 基础路由
+5. `src/stores/index.ts` Pinia Store 示例
+6. `src/styles/variables.scss` + `global.scss`
+7. `src/views/home/index.vue` 首页示例
+8. **工程规范配置**：按 [工程规范配置](#工程规范配置) 章节生成 `eslint.config.js`、`.prettierrc.json`、`.editorconfig`、`commitlint.config.js`、`.husky/`、`.gitignore`，`package.json` 包含 `prepare`/`commit`/`lint`/`lint:fix`/`format` 脚本与 `lint-staged`/`config.commitizen` 字段
+9. **规范依据说明**：列出本次生成遵循的 `pandax-frontend-standards` 条目，如目录结构、文件命名、组件结构、API 分层、ESLint 与 commit 规范等
+
+## B. Monorepo + 微前端主应用 + 微前端应用
+
+当项目包含多个子应用、组件库、工具库，且需要通过 wujie 聚合为统一平台时，使用 Monorepo + 微前端骨架。
+
+### 目录结构
+
+```text
+pandax-monorepo/
+├── package.json                      # 根 package.json，管理 workspace + 规范类依赖
+├── pnpm-workspace.yaml               # pnpm workspace 配置 + catalog 版本统一
+├── turbo.json                        # Turborepo 任务编排
+├── eslint.config.js                 # Vue 3 官方 ESLint 9 flat config（全仓库共用）
+├── .prettierrc.json
+├── .editorconfig
+├── commitlint.config.js              # Conventional Commits
+├── .gitignore
+├── .husky/                           # Git hooks（全仓库共用）
+│   ├── pre-commit                    # 跑 lint-staged
+│   └── commit-msg                    # 跑 commitlint
+├── apps/
+│   ├── main/                         # wujie 主应用（基座）
+│   └── base/                         # 子应用：基础应用（示例）
+└── packages/
+    ├── core/                 # 核心依赖：请求封装、类型定义、工具函数（包名 pandax-core）
+    ├── components/           # 通用组件库（包名 pandax-components）
+    ├── hooks/                # 通用 Hooks / Composables（包名 pandax-hooks）
+    └── styles/               # 主题、变量、全局样式（包名 pandax-styles）
+```
+
+### 根 package.json
+
+```json
+{
+  "name": "pandax-monorepo",
+  "version": "1.0.0",
+  "private": true,
+  "packageManager": "pnpm@10.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "turbo run dev --parallel",
+    "build": "turbo run build",
+    "build:main": "pnpm --filter pandax-main build",
+    "build:apps": "turbo run build --filter=!./apps/main",
+    "lint": "turbo run lint",
+    "lint:fix": "turbo run lint:fix",
+    "format": "prettier --write \"**/*.{ts,tsx,cts,mts,vue,js,jsx,cjs,mjs,json,scss,md,yml,yaml}\"",
+    "typecheck": "turbo run typecheck",
+    "clean": "pnpm -r exec rm -rf node_modules dist .turbo",
+    "prepare": "husky",
+    "commit": "cz"
+  },
+  "devDependencies": {
+    "turbo": "^2.4.0",
+    "eslint": "^9.18.0",
+    "eslint-plugin-vue": "^9.33.0",
+    "@vue/eslint-config-typescript": "^14.9.0",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "prettier": "^3.5.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.3.0",
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
+    "commitizen": "^4.3.1",
+    "cz-conventional-changelog": "^3.3.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,cts,mts,vue,js,jsx,cjs,mjs}": "eslint --fix",
+    "*.{ts,tsx,cts,mts,vue,js,jsx,cjs,mjs,json,scss,md,yml,yaml}": "prettier --write"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  }
+}
+```
+
+> 规范类工具统一在根安装，子包 `devDependencies` 只保留各自构建相关依赖（`vite`、`@vitejs/plugin-vue`、`vue-tsc`、`sass`、`unocss` 等），不再重复声明 `eslint` 系列。
+
+### pnpm-workspace.yaml
+
+```yaml
+packages:
+  - 'apps/*'
+  - 'packages/*'
+```
+
+### 依赖划分
+
+| 包名 | 职责 |
+|------|------|
+| `pandax-core` | axios 封装、全局类型、常量、通用 utils |
+| `pandax-components` | Button、Table、Form 等基础组件 |
+| `pandax-hooks` | useModal、usePermission、useTable 等 |
+| `pandax-styles` | UnoCSS 配置、SCSS 变量、主题 |
+
+### 主应用注册子应用
+
+```ts
+// apps/main/src/main.ts
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import { setupApp } from 'wujie';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import 'virtual:uno.css';
+
+import App from './App.vue';
+import router from './router';
+
+setupApp({
+  name: 'base',
+  url: '//localhost:7101',
+  exec: true,
+  props: {
+    token: localStorage.getItem('token') || '',
+  },
+});
+
+const app = createApp(App);
+app.use(createPinia());
+app.use(router);
+app.use(ElementPlus);
+app.mount('#app');
+```
+
+### 输出要求
+
+生成 B 骨架时，必须包含：
+1. 根 `package.json` + `pnpm-workspace.yaml`，使用 pnpm workspace
+2. `apps/main/` wujie 主应用，含 `main.ts` 注册子应用、`router/index.ts`、`layouts/MicroApp.vue`
+3. 至少 1 个示例子应用：`apps/base/`，独立的 Vue 3 + Vite 8 应用
+4. `packages/core/`、`packages/components/`、`packages/hooks/`、`packages/styles/` 四个共享包（目录扁平化，包名 `pandax-core` 等无 scope，便于 npx 初始化时按需重命名）
+5. 子应用入口 `main.ts` 必须支持 `window.__POWERED_BY_WUJIE__` 两种运行方式
+6. **工程规范配置**：按 [工程规范配置](#工程规范配置) 章节生成根 `eslint.config.js`、`.prettierrc.json`、`.editorconfig`、`commitlint.config.js`、`.husky/`、`.gitignore`，规范类依赖统一放根 `devDependencies`
+7. **规范依据说明**：列出 Monorepo 目录命名、子应用文件结构、ESLint 与 commit 规范遵循的 `pandax-frontend-standards` 条目
+
+## 工程规范配置
+
+本章节统一说明 **Vue 3 官方 ESLint 检查规范 + Conventional Commits 提交规范** 的配置方式，A/B/C/D 四种骨架生成时必须遵循。Monorepo（B）配置统一放在根目录，单应用（A/C/D）配置放在项目根目录。
+
+### 工具链一览
+
+| 工具 | 版本 | 职责 |
+|------|------|------|
+| `typescript` | ^6.0.3 | 类型检查（5.x → 7.0 官方过渡版本，详见下文「TypeScript 版本选择说明」） |
+| `vue-tsc` | ^3.3.11 | `.vue` 文件类型检查（基于 Volar，peer `typescript >=5.0.0`） |
+| `eslint` | ^9.18.0 | 代码静态检查（flat config） |
+| `eslint-plugin-vue` | ^9.33.0 | Vue 3 官方推荐规则（`flat/recommended`） |
+| `@vue/eslint-config-typescript` | ^14.9.0 | Vue + TS 集成规则（v14.9 起用 `withVueTs` + `vueTsConfigs` API） |
+| `@vue/eslint-config-prettier` | ^10.1.0 | 关闭与 Prettier 冲突的格式规则 |
+| `prettier` | ^3.5.0 | 代码格式化 |
+| `husky` | ^9.1.7 | Git hooks 框架 |
+| `lint-staged` | ^15.3.0 | 只对暂存区文件跑 lint/format |
+| `@commitlint/cli` | ^19.6.1 | 校验 commit message |
+| `@commitlint/config-conventional` | ^19.6.0 | Conventional Commits 默认规则 |
+| `commitizen` + `cz-conventional-changelog` | ^4.3.1 / ^3.3.0 | 交互式 commit 向导 |
+
+#### TypeScript 版本选择说明
+
+| 版本 | 状态 | 是否采用 |
+|------|------|---------|
+| TS 5.x | 已过时 | 否 |
+| **TS 6.0.3** | 最后一个 JS 编译器版本，官方推荐的 5.x → 7.0 过渡版本 | **是** |
+| TS 7.0.2 | Go 编译器，10x 提速，但**未提供稳定 programmatic API** | 否（暂不升） |
+
+**为什么暂不升 TS 7.0**：
+
+- TS 7.0 不再暴露稳定的 programmatic API，要等 7.1（约 2026-10）才补齐
+- vue-tsc / Volar 等 Vue 工具链依赖 TS 的 API 做 `.vue` 文件类型检查，直接升 7 会报 `ERR_PACKAGE_PATH_NOT_EXPORTED: Package subpath './lib/tsc' is not defined`（参考 [vuejs/language-tools#6124](https://github.com/vuejs/language-tools/issues/6124)）
+- 官方明确建议：Vue / Svelte / Astro / MDX 项目**停在 TS 6.0**，等 7.1
+- TS 6.0 把 7.0 即将变成 hard error 的用法以 deprecation 警告形式暴露，提前迁移可让未来升 7.0 几乎零成本
+
+**TS 7.1 发布后的升级路径**（约 2026-10）：
+
+1. 等 vue-tsc 发布支持 TS 7 的稳定版本（追踪 [PR #6123](https://github.com/vuejs/language-tools/pull/6123)）
+2. `pnpm-workspace.yaml` 把 `typescript: ^6.0.3` 改为 `^7.1.0`
+3. 检查 `tsconfig.json`：TS 7 默认 `strict: true`、`types: []`、`target: esnext`，移除 `target: es5`、`moduleResolution: node`、`baseUrl` 等 deprecated 选项
+4. 如工具链暂未跟进，可装 `@typescript/typescript6` 兼容包让 vue-tsc 走 `tsc6` 路径
+5. 跑 `pnpm typecheck && pnpm lint` 验证
+
+### 1. ESLint 9 flat config（`eslint.config.js`）
+
+Vue 3 官方推荐 ESLint 9 + flat config 形式，禁止再使用旧式 `.eslintrc.*` + `--ext`。使用 `@vue/eslint-config-typescript` v14.9+ 的 `withVueTs` + `vueTsConfigs` API。
+
+```javascript
+// eslint.config.js
+import pluginVue from 'eslint-plugin-vue';
+import { withVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
+
+export default withVueTs(
+  // 1. 待 lint 的文件范围
+  { name: 'app/files-to-lint', files: ['**/*.{ts,tsx,cts,mts,vue,js,jsx,cjs,mjs}'] },
+
+  // 2. Vue 3 官方推荐规则（含 vue 解析器）
+  pluginVue.configs['flat/recommended'],
+
+  // 3. TypeScript 推荐规则（不开 type-checked，类型检查交给 vue-tsc / tsc，保持 lint 速度）
+  // 如需深度类型感知 lint，可改为 vueTsConfigs.recommendedTypeChecked
+  vueTsConfigs.recommended,
+
+  // 4. 自定义规则（遵循 pandax-frontend-standards）
+  {
+    name: 'app/custom-rules',
+    rules: {
+      'vue/multi-word-component-names': 'off',
+      'vue/no-v-html': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+      'no-debugger': 'error',
+    },
+  },
+
+  // 5. 忽略目录
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**', '**/.turbo/**', '**/node_modules/**', '**/*.d.ts'],
+  },
+
+  // 6. 关闭与 Prettier 冲突的格式规则（必须放最后）
+  skipFormatting,
+);
+```
+
+子包 `lint` 脚本（ESLint 9 不再需要 `--ext`）：
+
+```json
+{
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  }
+}
+```
+
+> Monorepo 中子包无需各自写 `eslint.config.js`，ESLint 9 会向上查找根配置自动应用。
+
+### 2. Prettier（`.prettierrc.json`）
+
+```json
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "endOfLine": "lf",
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "overrides": [
+    { "files": ["*.json", "*.json5", "*.jsonc"], "options": { "trailingComma": "none" } },
+    { "files": ["*.md", "*.mdx"], "options": { "proseWrap": "preserve", "printWidth": 120 } },
+    { "files": ["*.yml", "*.yaml"], "options": { "singleQuote": false } }
+  ]
+}
+```
+
+### 3. EditorConfig（`.editorconfig`）
+
+与 Prettier 保持一致（`indent_size = 2`、`end_of_line = lf`、`charset = utf-8`）。
+
+### 4. commitlint（`commitlint.config.js`）
+
+```javascript
+// commitlint.config.js
+export default {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'header-max-length': [2, 'always', 100],
+    'type-enum': [
+      2,
+      'always',
+      ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'chore', 'revert', 'wip'],
+    ],
+    'type-empty': [2, 'never'],
+    'subject-empty': [2, 'never'],
+    'subject-full-stop': [2, 'never', '.'],
+    'subject-case': [0],
+  },
+};
+```
+
+### 5. Husky + lint-staged
+
+初始化：`pnpm dlx husky init`（或直接在根 `package.json` 配 `"prepare": "husky"`，运行 `pnpm install` 时自动安装 hooks）。
+
+`.husky/pre-commit`（提交前对暂存区跑 ESLint + Prettier）：
+
+```sh
+pnpm exec lint-staged
+```
+
+`.husky/commit-msg`（校验 commit message）：
+
+```sh
+pnpm exec commitlint --edit "$1"
+```
+
+`package.json` 中的 `lint-staged` 字段：
+
+```json
+{
+  "lint-staged": {
+    "*.{ts,tsx,cts,mts,vue,js,jsx,cjs,mjs}": "eslint --fix",
+    "*.{ts,tsx,cts,mts,vue,js,jsx,cjs,mjs,json,scss,md,yml,yaml}": "prettier --write"
+  }
+}
+```
+
+### 6. commitizen 交互式提交
+
+`package.json` 中配置 adapter：
+
+```json
+{
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  },
+  "scripts": {
+    "commit": "cz"
+  }
+}
+```
+
+使用 `pnpm commit` 代替 `git commit`，进入交互式向导选择 type / scope / subject / body / breaking change / footer。
+
+### 7. Conventional Commits 速查
+
+| type | 含义 | 示例 |
+|------|------|------|
+| `feat` | 新功能 | `feat: 新增用户列表筛选` |
+| `fix` | 修复 bug | `fix: 修复登录 token 失效` |
+| `docs` | 文档变更 | `docs: 补充 useModal 使用示例` |
+| `style` | 格式调整（不影响功能） | `style: 统一缩进为 2 空格` |
+| `refactor` | 重构 | `refactor: 抽离 request 拦截器` |
+| `perf` | 性能优化 | `perf: 列表使用虚拟滚动` |
+| `test` | 测试 | `test: 补充 useCounter 单测` |
+| `build` | 构建系统 / 外部依赖 | `build: 升级 vite 到 8.0` |
+| `ci` | CI 配置 | `ci: 配置 GitHub Actions` |
+| `chore` | 杂项 | `chore: 更新 .gitignore` |
+| `revert` | 回滚 | `revert: 撤销用户模块改动` |
+
+> 含 BREAKING CHANGE 的提交必须显式标注：`feat: 重构路由结构` + body 中 `BREAKING CHANGE: 路由配置字段从 routes 改为 children`，或用 `feat!: 重构路由结构` 简写。
+
+### 8. .gitignore 必备项
+
+```text
+node_modules/
+dist/
+dist-ssr/
+.turbo/
+coverage/
+*.log
+.husky/_
+```
+
+### 工程规范配置输出要求
+
+生成任意骨架（A/B/C/D）时，工程规范部分必须包含：
+1. `eslint.config.js` 使用 Vue 3 官方 flat config 形式（`pluginVue.configs['flat/recommended']` + `@vue/eslint-config-typescript` + `@vue/eslint-config-prettier`）
+2. `.prettierrc.json` + `.editorconfig` 与 Prettier 配置一致
+3. `commitlint.config.js` 继承 `@commitlint/config-conventional`，type 枚举完整
+4. `.husky/pre-commit` 跑 `lint-staged`，`.husky/commit-msg` 跑 `commitlint`
+5. `package.json` 包含 `prepare`、`commit`、`lint`、`lint:fix`、`format` 脚本，以及 `lint-staged`、`config.commitizen` 字段
+6. Monorepo（B）规范类依赖统一放根 `devDependencies`，子包 `devDependencies` 只保留构建相关依赖
+
+## C. 微前端主应用
+
+只生成 wujie 基座主应用，用于承载和调度子应用。
+
+### 目录结构
+
+```text
+apps/main/
+├── package.json
+├── vite.config.ts
+├── tsconfig.json
+├── tsconfig.node.json
+├── env.d.ts
+├── index.html
+└── src/
+    ├── api/
+    │   └── request.ts
+    ├── assets/
+    ├── components/
+    ├── composables/
+    ├── constants/
+    ├── layouts/
+    │   ├── default-layout/
+    │   │   ├── index.vue
+    │   │   └── index.module.scss
+    │   └── MicroApp.vue
+    ├── router/
+    │   └── index.ts
+    ├── services/
+    ├── stores/
+    │   └── index.ts
+    ├── styles/
+    │   ├── global.scss
+    │   └── variables.scss
+    ├── types/
+    │   └── global.d.ts
+    ├── utils/
+    ├── views/
+    │   └── home/
+    │       └── index.vue
+    ├── App.vue
+    └── main.ts
+```
+
+### package.json
+
+```json
+{
+  "name": "pandax-main",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 7000",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "vue": "^3.5.0",
+    "vue-router": "^4.5.0",
+    "pinia": "^2.3.0",
+    "wujie": "^1.0.25",
+    "wujie-vue3": "^1.0.25",
+    "axios": "^1.8.0",
+    "element-plus": "^2.9.0",
+    "@element-plus/icons-vue": "^2.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.0",
+    "vite": "^8.0.0",
+    "vue-tsc": "^3.3.11",
+    "typescript": "^6.0.3",
+    "eslint": "^8.57.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "eslint-plugin-vue": "^9.33.0",
+    "sass": "^1.86.0",
+    "unocss": "^66.0.0",
+    "@unocss/preset-uno": "^66.0.0"
+  }
+}
+```
+
+### main.ts
+
+```ts
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import { setupApp } from 'wujie';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import 'virtual:uno.css';
+import './styles/global.scss';
+
+import App from './App.vue';
+import router from './router';
+
+setupApp({
+  name: 'base',
+  url: '//localhost:7101',
+  exec: true,
+  props: { token: localStorage.getItem('token') || '' },
+});
+
+const app = createApp(App);
+app.use(createPinia());
+app.use(router);
+app.use(ElementPlus);
+app.mount('#app');
+```
+
+### 路由配置
+
+```ts
+// apps/main/src/router/index.ts
+import { createRouter, createWebHistory } from 'vue-router';
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('@/views/home/index.vue'),
+  },
+  {
+    path: '/base/:path(.*)',
+    component: () => import('@/layouts/MicroApp.vue'),
+    props: { name: 'base', url: '//localhost:7101' },
+  },
+];
+
+export default createRouter({
+  history: createWebHistory(),
+  routes,
+});
+```
+
+### MicroApp.vue 容器组件
+
+```vue
+<!-- apps/main/src/layouts/MicroApp.vue -->
+<script setup lang="ts">
+import WujieVue from 'wujie-vue3';
+
+interface Props {
+  name: string;
+  url: string;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="micro-app-container h-full w-full">
+    <WujieVue
+      :name="props.name"
+      :url="props.url"
+      :sync="true"
+      width="100%"
+      height="100%"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.micro-app-container {
+  position: relative;
+  overflow: hidden;
+}
+</style>
+```
+
+### 输出要求
+
+生成 C 骨架时，必须包含：
+1. `apps/main/package.json` 包含 `wujie`、`wujie-vue3` 依赖
+2. `apps/main/src/main.ts` 使用 `setupApp` 注册所有子应用
+3. `apps/main/src/router/index.ts` 配置子应用通配路由
+4. `apps/main/src/layouts/MicroApp.vue` 容器组件，使用 `wujie-vue3` 渲染子应用
+5. 基础单应用文件：`vite.config.ts`、Pinia Store、Axios 封装、首页示例
+6. **工程规范配置**：按 [工程规范配置](#工程规范配置) 章节生成 `eslint.config.js`、`.prettierrc.json`、`.editorconfig`、`commitlint.config.js`、`.husky/`、`.gitignore`，规范类依赖放 `devDependencies`，`package.json` 包含 `prepare`/`commit`/`lint`/`lint:fix`/`format` 脚本与 `lint-staged`/`config.commitizen` 字段
+7. **规范依据说明**：列出主应用目录结构、组件规范、ESLint 与 commit 规范遵循的 `pandax-frontend-standards` 条目
+
+## D. 微前端应用
+
+只生成可被 wujie 加载的子应用，每个子应用独立开发、独立部署。
+
+### 目录结构
+
+```text
+apps/base/
+├── package.json
+├── vite.config.ts
+├── tsconfig.json
+├── tsconfig.node.json
+├── env.d.ts
+├── index.html
+└── src/
+    ├── api/
+    │   └── request.ts
+    ├── assets/
+    ├── components/
+    ├── composables/
+    ├── constants/
+    ├── locales/
+    │   └── zh-CN.json
+    ├── router/
+    │   └── index.ts
+    ├── services/
+    ├── stores/
+    │   └── index.ts
+    ├── styles/
+    │   ├── global.scss
+    │   └── variables.scss
+    ├── types/
+    │   └── global.d.ts
+    ├── utils/
+    ├── views/
+    │   └── home/
+    │       ├── index.vue
+    │       ├── Prop.ts
+    │       ├── Type.ts
+    │       └── index.module.scss
+    ├── App.vue
+    └── main.ts
+```
+
+### package.json
+
+```json
+{
+  "name": "pandax-base",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 7101",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview --port 7101",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "vue": "^3.5.0",
+    "vue-router": "^4.5.0",
+    "pinia": "^2.3.0",
+    "axios": "^1.8.0",
+    "element-plus": "^2.9.0",
+    "@element-plus/icons-vue": "^2.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.0",
+    "vite": "^8.0.0",
+    "vue-tsc": "^3.3.11",
+    "typescript": "^6.0.3",
+    "eslint": "^8.57.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "eslint-plugin-vue": "^9.33.0",
+    "sass": "^1.86.0",
+    "unocss": "^66.0.0",
+    "@unocss/preset-uno": "^66.0.0"
+  }
+}
+```
+
+### wujie 类型补充
+
+```ts
+// apps/base/src/types/wujie.d.ts
+declare global {
+  interface Window {
+    __POWERED_BY_WUJIE__?: boolean;
+    __WUJIE_MOUNT?: () => void;
+    __WUJIE_UNMOUNT?: () => void;
+    $wujie?: {
+      props?: Record<string, any>;
+      bus: {
+        $emit: (event: string, ...args: any[]) => void;
+        $on: (event: string, callback: (...args: any[]) => void) => void;
+      };
+    };
+  }
+}
+
+export {};
+```
+
+### 子应用入口 main.ts
+
+```ts
+// apps/base/src/main.ts
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import 'virtual:uno.css';
+import './styles/global.scss';
+
+import App from './App.vue';
+import router from './router';
+
+let app: ReturnType<typeof createApp> | null = null;
+
+function mount() {
+  app = createApp(App);
+  app.use(createPinia());
+  app.use(router);
+  app.use(ElementPlus);
+  app.mount('#app');
+}
+
+function unmount() {
+  app?.unmount();
+  app = null;
+}
+
+// 被 wujie 加载时，暴露生命周期
+if (window.__POWERED_BY_WUJIE__) {
+  window.__WUJIE_MOUNT = mount;
+  window.__WUJIE_UNMOUNT = unmount;
+} else {
+  // 独立运行
+  mount();
+}
+```
+
+### 运行方式说明
+
+- **独立运行**：直接执行 `pnpm --filter pandax-base dev`，走 `else` 分支，作为普通 Vue 3 应用启动。
+- **被 wujie 加载**：wujie 注入 `window.__POWERED_BY_WUJIE__`，并自动调用 `window.__WUJIE_MOUNT` 和 `window.__WUJIE_UNMOUNT`。
+
+### 输出要求
+
+生成 D 骨架时，必须包含：
+1. `apps/base/package.json` 使用 Vue 3 最新版、Vite 8 最新版
+2. `apps/base/src/types/wujie.d.ts` 扩展 `Window` 类型
+3. `apps/base/src/main.ts` 同时支持 `window.__POWERED_BY_WUJIE__` 和独立运行
+4. `apps/base/vite.config.ts` 配置正确的 `base` 路径和 `@` 别名
+5. 基础单应用文件：router、Pinia Store、Axios 封装、页面示例
+6. **工程规范配置**：按 [工程规范配置](#工程规范配置) 章节生成 `eslint.config.js`、`.prettierrc.json`、`.editorconfig`、`commitlint.config.js`、`.husky/`、`.gitignore`，规范类依赖放 `devDependencies`，`package.json` 包含 `prepare`/`commit`/`lint`/`lint:fix`/`format` 脚本与 `lint-staged`/`config.commitizen` 字段
+7. **规范依据说明**：列出子应用目录结构、组件规范、ESLint 与 commit 规范遵循的 `pandax-frontend-standards` 条目
+
+### 选型建议
+
+| 场景 | 推荐方案 |
+|------|---------|
+| 单应用、小团队 | A. 单应用骨架 |
+| 多应用、统一技术栈、统一构建 | B. Monorepo + 微前端主应用 + 微前端应用 |
+| 只需要聚合已有子应用 | C. 微前端主应用 |
+| 已有主应用，需新增子应用 | D. 微前端应用 |
+
+## 状态管理
+
+- **组件级状态**：使用 `ref` / `reactive` / `useState`
+- **跨组件状态**：使用 `provide/inject` 或 Context
+- **模块级状态**：使用 Pinia Store / Zustand，按模块拆分
+- **服务端状态**：优先使用 TanStack Query / SWR，避免手动维护
+
+## 路由设计
+
+- 按模块组织路由文件
+- 路由懒加载，减少首屏体积
+- 统一处理 404、权限、白名单
+- 面包屑和菜单从路由配置派生
+
+```ts
+// src/router/modules/user.ts
+export default {
+  path: '/user',
+  component: () => import('@/layouts/default-layout/index.vue'),
+  children: [
+    { path: 'list', component: () => import('@/views/user/pages/list/index.vue') },
+    { path: 'detail/:id', component: () => import('@/views/user/pages/detail/index.vue') },
+  ],
+};
+```
+
+## 组件分层
+
+| 层级 | 职责 | 示例 |
+|------|------|------|
+| 基础组件 | 无业务逻辑，纯 UI | Button、Input、Modal |
+| 业务组件 | 封装业务逻辑 | UserForm、OrderTable |
+| 页面组件 | 组合业务组件，对接路由 | UserListPage |
+| 布局组件 | 页面框架 | DefaultLayout |
+
+## API 层设计
+
+采用两层结构：`api/` 负责底层请求封装，`services/` 负责业务 API 对接。
+
+```text
+src/
+├── api/
+│   └── request.ts        # axios 实例、拦截器、统一错误处理
+├── services/
+│   ├── user.ts           # 用户相关 API
+│   └── order.ts          # 订单相关 API
+├── types/
+│   ├── user.ts           # 用户相关类型
+│   └── order.ts          # 订单相关类型
+└── constants/
+    └── api.ts            # API 常量、枚举
+```
+
+### 职责划分
+
+| 层级 | 目录 | 职责 |
+|------|------|------|
+| 底层请求 | `src/api/` | axios 实例、拦截器、错误处理、token 注入 |
+| 业务接口 | `src/services/` | 按模块封装业务 API，调用 `request.ts` |
+| 类型定义 | `src/types/` | 请求参数、响应数据、业务模型类型 |
+| 常量配置 | `src/constants/` | API 路径常量、状态码枚举、配置项 |
+
+### 示例
+
+```ts
+// src/api/request.ts
+import axios from 'axios';
+
+const request = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  timeout: 10000,
+});
+
+request.interceptors.request.use((config) => {
+  const token = localStorage.getItem('token');
+  if (token) config.headers.Authorization = `Bearer ${token}`;
+  return config;
+});
+
+request.interceptors.response.use(
+  (res) => res.data,
+  (err) => {
+    // 统一错误处理
+    return Promise.reject(err);
+  }
+);
+
+export default request;
+```
+
+```ts
+// src/services/user.ts
+import request from '@/api/request';
+import type { UserListParams, UserListResponse } from '@/types/user';
+
+export function getUserList(params: UserListParams) {
+  return request.get<UserListResponse>('/users', { params });
+}
+
+export function createUser(data: Partial<UserListResponse['list'][0]>) {
+  return request.post('/users', data);
+}
+```
+
+## 国际化（i18n）
+
+国际化资源统一放在 `src/locales/` 目录下。
+
+```text
+src/locales/
+├── zh-CN.json            # 简体中文
+├── en-US.json            # 英文
+├── ja-JP.json            # 日文
+└── index.ts              # i18n 初始化与加载
+```
+
+### 推荐方案
+
+| 框架 | 库 |
+|------|-----|
+| Vue 3 | vue-i18n |
+| React | react-i18next |
+
+### 资源文件格式
+
+```json
+{
+  "common": {
+    "save": "保存",
+    "cancel": "取消"
+  },
+  "user": {
+    "title": "用户管理",
+    "create": "新建用户"
+  }
+}
+```
+
+### 使用原则
+
+- 界面文案必须从 `locales` 取，禁止硬编码
+- 中文与其他语言共用同一套 key，避免中英文混用
+- 业务术语保持一致，如"用户"统一用 `user`，不要混用 `member`
+- 复数、日期、货币优先使用 i18n 库提供的格式化能力
+
+## 常量管理
+
+常量统一放在 `src/constants/` 目录下，禁止散落在业务代码中。
+
+```text
+src/constants/
+├── index.ts              # 统一导出
+├── api.ts                # API 相关常量、枚举
+├── status.ts             # 业务状态枚举
+├── storage.ts            # localStorage key
+└── config.ts             # 应用配置项
+```
+
+### 命名规范
+
+- 普通常量：`UPPER_SNAKE_CASE`
+- 枚举：`PascalCase`，成员 `UPPER_SNAKE_CASE`
+- 配置对象：`camelCase`
+
+```ts
+// src/constants/status.ts
+export enum OrderStatus {
+  PENDING = 'pending',
+  PAID = 'paid',
+  SHIPPED = 'shipped',
+  COMPLETED = 'completed',
+}
+
+export const ORDER_STATUS_OPTIONS = [
+  { label: '待支付', value: OrderStatus.PENDING },
+  { label: '已支付', value: OrderStatus.PAID },
+];
+```
+
+## 性能策略
+
+- 路由懒加载
+- 组件按需引入 UI 库
+- 图片、字体懒加载和压缩
+- 合理使用 `v-memo`、`computed`、`useMemo`
+- 大列表使用虚拟滚动
+
+## 输出要求
+
+1. 先明确项目规模和业务模块
+2. 给出推荐目录结构
+3. 说明每个模块的职责边界
+4. 给出状态管理、路由、API 层设计建议
+5. 最后给出 1-2 个关键技术决策的理由