---
description: "Vue 组件编码规范。Use when: 编写 Vue 单文件组件、创建页面、修改模板、处理组件逻辑。"
applyTo: "**/*.vue"
---

# Vue 组件编码规范

## 脚本

- 使用 `<script setup lang="ts">`，禁止 Options API
- 路径别名使用 `#/`（如 `import { xxx } from '#/api/core/xxx'`）
- 类型导入使用 `import type`
- Props 使用 `defineProps<T>()` 泛型语法
- Emits 使用 `defineEmits<T>()`

## 表格

- 使用 `useVbenVxeGrid` hook 创建表格，类型为 `VxeGridProps`
- 分页配置使用 `pagerConfig: {}`
- 数据代理使用 `proxyConfig.ajax.query`，返回 `{ items, total }` 结构
- 复用已有渲染器：`CellImage`（图片列）、`CellLink`（链接列）

## 表单

- 使用 `useVbenForm` hook，schema 驱动
- 验证规则使用 zod

## 弹窗

- 使用 `useVbenModal` hook 管理弹窗状态

## 模板

- UI 文本使用中文
- 合理使用 Ant Design Vue 组件（`a-button`, `a-tag`, `a-card` 等）

## 图标

- 使用 `VbenIcon` 组件，从 `@vben/common-ui` 导入
- 图标来源为 [Iconify](https://icon-sets.iconify.design/)，通过 `icon` prop 传入图标名称
- 常用图标集：`mdi:`、`solar:`、`material-symbols:`、`system-uicons:`、`svg-spinners:`
- 示例：
  ```vue
  import { VbenIcon } from '@vben/common-ui';
  <VbenIcon icon="mdi:account" />
  <VbenIcon icon="solar:question-circle-bold" class="ml-2" />
  ```