58 lines
1.7 KiB
Plaintext
58 lines
1.7 KiB
Plaintext
---
|
||
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 完全一致的视觉风格。**
|