# 项目指南

这是基于 **Vue Vben Admin** 的前端项目，使用 Vue 3 + TypeScript + Vite + Ant Design Vue。

## 技术栈

- **框架**: Vue 3.5 + TypeScript 6.0
- **构建工具**: Vite 8.0
- **UI 组件**: Ant Design Vue 4.2
- **状态管理**: Pinia 3.0 + persistedstate
- **路由**: Vue Router 5.1
- **表单验证**: VeeValidate + Zod
- **HTTP 客户端**: Axios
- **样式**: Tailwind CSS 4.3 + SCSS
- **图表**: ECharts 6.1
- **富文本编辑器**: TinyMCE 7.9, Tiptap 3.26
- **流程图**: BPMN.js 18.16

## 项目结构

```
src/
├── api/              # API 接口定义
├── components/       # 公共组件
├── composables/      # 组合式函数
├── layouts/          # 布局组件
├── locales/          # 国际化
├── router/           # 路由配置
├── stores/           # Pinia 状态管理
├── styles/           # 全局样式
├── utils/            # 工具函数
└── views/            # 页面组件
```

## 开发命令

```bash
# 开发
pnpm dev

# 构建
pnpm build

# 类型检查
pnpm typecheck

# 预览构建结果
pnpm preview
```

## 代码规范

### 组件命名

- 组件文件使用 PascalCase: `UserList.vue`
- 组件 name 使用 PascalCase: `defineOptions({ name: 'UserList' })`

### TypeScript

- 禁止使用 `any` 类型
- Props 和 Emits 必须定义 TypeScript 接口
- 使用 `import type` 导入类型

### Vue 组件

- 统一使用 `<script setup lang="ts">` 语法
- Props 使用 `withDefaults` + `defineProps<T>()`
- Emits 使用 `defineEmits<T>()`

### 样式

- 优先使用 Tailwind CSS 类
- 组件样式使用 `scoped`
- 颜色使用 CSS 变量

## 可用命令

- `/vue-component` - 创建新的 Vue 组件
- `/vue-page` - 创建新的页面
- `/api-service` - 创建 API 服务模块
- `/pinia-store` - 创建 Pinia 状态存储

## 可用技能

- `vue3-development` - Vue 3 开发规范
- `antd-vue-components` - Ant Design Vue 组件模式
- `frontend-code-review` - 前端代码审查指南

## 注意事项

1. 路径别名 `#/*` 指向 `./src/*`
2. 使用 VeeValidate + Zod 进行表单验证
3. 使用 `v-dompurify-html` 处理用户输入的 HTML
4. 敏感数据使用 `secure-ls` 加密存储

## MES 模块开发

> **重要**：开发 MES 模块前，必须先阅读 `MES_DEVELOPMENT.md`，该文件包含：
> - 页面文件结构规范（data.ts / index.vue / form.vue）
> - API 接口编写模板
> - 导入路径层级规则（index.vue 用 4 层 `..`，form.vue 用 5 层 `..`）
> - 字典/枚举注册位置
> - 路由规则（动态路由，无需手动配置）
> - Select/SelectDialog 组件模式
> - 开发检查清单