---
description: Vue 3 组件开发规范（portal-ui 项目专用）
alwaysApply: true
---

# Vue组件开发规范（portal-ui）

## 1. 文件结构
所有 `.vue` 文件必须严格遵循以下结构：

```vue
<template>
  <!-- 模板部分 -->
</template>

<script setup lang="ts">
// 1. imports
// 2. props / emits
// 3. 响应式数据
// 4. computed / watch
// 5. 生命周期
// 6. 方法
</script>

<style scoped lang="less">
// 样式（必须与现有风格一致）
</style>
```

## 2. 命名规范
- 组件文件名和组件名：**PascalCase**（如 `AssetPreviewModal.vue`）
- 事件名：kebab-case（如 `update:visible`、`preview-open`）
- Props：camelCase 定义
- 组合式函数：`useXXX.ts`（如 `useAssetList.ts`）

## 3. 技术栈要求
- **优先使用** `<script setup lang="ts">`
- 使用 **Ant Design Vue** 组件（`a-table`、`a-modal`、`a-select` 等）
- 状态管理优先使用 `ref` / `reactive`，复杂状态可使用 Pinia
- API调用必须导入并使用统一封装的 `api` 实例
- 类型定义必须独立或放在 `types.ts` 中

## 4. 代码质量要求
- 组件单一职责，体积过大时进行拆分
- 复杂逻辑抽离到 `composables/` 目录
- 所有用户可见文字使用中文
- 重要操作添加 `loading` 状态和 `confirm` 确认
- 图片/视频预览必须复用现有 `.preview-content` 样式
- 必须添加必要的中文注释

## 5. 性能与最佳实践
- 列表渲染使用 `:key`
- 避免模板中复杂表达式，使用 `computed`
- 大量数据考虑虚拟滚动
- 弹窗使用 `visible` + `emit` 控制

**所有新Vue组件必须同时遵守 `vue-ui-style.mdc` 和本规则，保持与 GeneratedAssets.vue 完全一致的视觉风格。**