Dedsi Vue3 Coding

Vue 3 + TypeScript 项目开发规范，使用 Dedsi UI 组件库。

何时使用

• 创建新的 Vue 3 页面组件
• 实现 CRUD（增删改查）功能
• 定义 API 服务层
• 使用 Dedsi UI 组件
• 处理表单和表格数据
• 遵循项目代码规范

---

能力规则

没有这些规则，AI 无法解决问题或生成的代码无法正确运行。

API 服务层

规则	影响	描述
api-service-patterns.md	HIGH	API 服务类定义和标准方法

View 组件

规则	影响	描述
view-component-patterns.md	HIGH	页面组件结构和状态管理
component-mapping.md	HIGH	Dedsi UI 组件映射
icon-usage.md	MEDIUM	图标使用规范

数据处理

规则	影响	描述
table-data-handling.md	HIGH	Table 数据加载和分页
form-handling.md	HIGH	表单状态和提交处理
form-validation.md	HIGH	表单验证规则
delete-operations.md	MEDIUM	删除操作和确认
view-detail-modal.md	MEDIUM	查看详情弹窗

---

效率规则

这些规则帮助 AI 更有效、更一致地解决问题。

代码模板

规则	影响	描述
code-templates.md	MEDIUM	标准 API Service 和 View 组件模板

---

技术栈

• 框架: Vue 3 (Composition API)
• 语言: TypeScript
• UI 组件库: Dedsi UI
  • 前缀: dedsi- (如 dedsi-button, dedsi-table)
• 图标: @ant-design/icons-vue
• 日期处理: dayjs
• HTTP 客户端: 自定义 AxiosRequest 封装

---

项目结构

src/
├── apiServices/          # API 服务层
│   ├── identitys/        # 身份认证服务
│   │   ├── userService.ts
│   │   ├── types.ts
│   │   └── index.ts
│   └── index.ts          # 统一导出
├── components/           # 可复用组件
├── configs/             # 配置文件
├── layouts/             # 布局组件
├── router/              # 路由配置
├── stores/              # Pinia 状态管理
├── utils/               # 工具函数
├── views/               # 页面视图
└── App.vue

---

开发规范

核心原则

• 组件优先: 优先使用 dedsi- 前缀的 Dedsi UI 组件
• Composition API: 所有组件使用 <script setup lang="ts">
• 类型安全: 严格使用 TypeScript 类型定义
• 错误处理: 统一使用 try-catch 和 DedsiMessage

API 服务层

位置: src/apiServices/{module}/

• 使用 class 定义服务
• 导出服务实例（单例模式）
• DTO 类型定义在 types.ts 中
• 实现标准方法：pagedQuery, get, create, update, delete

View 组件

使用 Composition API:

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
</script>

标准页面结构:

1. 搜索卡片 (dedsi-card + dedsi-form)
2. 表格卡片 (dedsi-card + dedsi-table)
3. 弹窗表单 (dedsi-modal + dedsi-form)

核心状态

// 表格数据
const tableLoading = ref(false)
const tableData = ref<Dto[]>()

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
})

// 查询参数
const queryParam = reactive<Partial<InputDto>>({ ... })

// 弹窗表单
const modalVisible = ref(false)
const formState = reactive<any>({ ... })

---

最佳实践

1. Table 列定义

• 优先使用 slot 方式定义列，便于自定义渲染
• 时间字段使用 dayjs 格式化
• 操作列使用 template #actions 插槽

2. 数据加载

• 统一封装 fetchData 方法
• try-catch 包裹 API 请求
• finally 中重置 tableLoading.value = false

3. 表单处理

• 编辑时使用 Object.assign(formState, detail) 回填数据
• 新增时需重置 formState
• 提交时根据是否有 id 判断是 Create 还是 Update
• 使用 formRef 进行表单验证

4. 表单验证

• 使用 :rules 定义验证规则
• 手动调用 formRef.value?.validate() 验证
• 关闭弹窗时调用 formRef.value?.clearValidate() 清除验证

5. 图标使用

• 从 @ant-design/icons-vue 导入图标
• 使用 <template #icon> 插槽添加图标到按钮

6. 删除操作

• 使用 dedsi-popconfirm 包裹删除按钮
• 防止误操作

7. 查看详情

• 提供独立的查看详情弹窗
• 对关键字段使用 dedsi-typography:copyable 支持复制

---

参考

• Dedsi Vue-UI - Dedsi UI 组件库文档
• Vue 3 Documentation - Vue 3 官方文档
• TypeScript Documentation - TypeScript 官方文档