admin_web/apps/web-antd/.github/instructions/vue-component.instructions.md

description	applyTo
Vue 组件编码规范。Use when: 编写 Vue 单文件组件、创建页面、修改模板、处理组件逻辑。	**/*.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，通过 icon prop 传入图标名称
• 常用图标集：mdi:、solar:、material-symbols:、system-uicons:、svg-spinners:
• 示例：

  import { VbenIcon } from '@vben/common-ui';
  <VbenIcon icon="mdi:account" />
  <VbenIcon icon="solar:question-circle-bold" class="ml-2" />