# 前端开发规则

> 适用于 {root} 仓库下所有前端工程

## 技术栈

| 场景 | 框架 | UI 库 | CSS |
|------|------|------|-----|
| **管理后台 PC** | Vue 3 + TypeScript + Vite | Element Plus | UnoCSS |
| **移动端/小程序** | uniapp (Vue 3) + TypeScript | uView Plus | UnoCSS |
| **H5 官网** | Vue 3 + TypeScript + Vite | — | UnoCSS |

## 统一规范

### 必选

- **Vue 3** Composition API（`<script setup lang="ts">`）
- **TypeScript** 严格模式
- **UnoCSS** 原子化 CSS（替代 Tailwind / 手写 CSS）
- **pnpm** 包管理器
- **ESLint** + `@antfu/eslint-config`
- **Vite** 构建工具

### 推荐

- **Pinia** 状态管理
- **Vue Router** 路由
- **Axios** HTTP 请求（统一拦截器 + Token 刷新）
- **unplugin-auto-import** 自动导入 Vue/API
- **unplugin-vue-components** 自动导入组件
- **Vitest** 单元测试

### 禁止

- Vue 2 / Options API
- JavaScript（必须 TS）
- CSS 文件（使用 UnoCSS 原子类）
- npm/yarn（必须 pnpm）
- 多行 CSS 样式块（用 UnoCSS 属性化或原子类替代）

## 项目结构

```
admin-ui/（或 web-ui/）
├── package.json
├── vite.config.ts
├── uno.config.ts
├── tsconfig.json
├── index.html
├── src/
│   ├── App.vue
│   ├── main.ts
│   ├── router/
│   ├── stores/           # Pinia
│   ├── api/              # Axios 封装 + 接口
│   ├── views/            # 页面组件
│   ├── components/       # 公共组件
│   ├── composables/      # 组合函数
│   ├── utils/            # 工具函数
│   └── styles/           # 仅放 UnoCSS 快捷方式或极少全局样式
└── public/
```

## API 调用规范

```typescript
// api/user.ts
import { request } from '@/utils/request'

export interface UserInfo {
  id: number
  username: string
  nickname: string
}

export const userApi = {
  page: (params: any) => request.get<PageResult<UserInfo>>('/user/info/page', { params }),
  create: (data: UserInfo) => request.post('/user/info/create', data),
  update: (data: UserInfo) => request.put('/user/info/update', data),
  remove: (id: number) => request.delete(`/user/info/${id}`),
}
```

## UnoCSS 使用

```vue
<template>
  <!-- 原子类 -->
  <div class="flex items-center gap-4 p-4 bg-white rounded shadow">
    <span class="text-lg font-bold text-primary">标题</span>
    <el-button type="primary" class="ml-auto">
      操作
    </el-button>
  </div>
</template>

<style lang="scss" scoped>
// 仅极少情况下使用，优先用 UnoCSS 原子类或 shortcuts
</style>
```

## 命名规范

| 类型 | 规则 | 示例 |
|------|------|------|
| 文件名 | PascalCase | `UserList.vue`, `useTable.ts` |
| 目录名 | kebab-case | `user-info/`, `order-detail/` |
| 变量/函数 | camelCase | `userList`, `fetchData` |
| 组件 | PascalCase | `<UserCard />` |
| Pinia store | useXxxStore | `useUserStore` |
| 路径 | 小写短横线 | `/user/info`, `/order/detail` |