Dedsi Vue3 Coding

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

何时使用

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

能力规则

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

API 服务层

View 组件

数据处理

效率规则

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

代码模板

技术栈

• 框架: 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 官方文档