dedsi-vue3-coding

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Dedsi Vue3 Coding

Dedsi Vue3 Coding Guidelines

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

Vue 3 + TypeScript Project Development Guidelines using Dedsi UI Component Library.

何时使用

When to Use

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

Create new Vue 3 page components
Implement CRUD (Create, Read, Update, Delete) functionality
Define API service layers
Use Dedsi UI components
Handle form and table data
Follow project coding standards

能力规则

Capability Rules

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

Without these rules, AI cannot solve problems or generate code that runs correctly.

API 服务层

API Service Layer

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

Rule	Impact	Description
api-service-patterns.md	HIGH	API service class definitions and standard methods

View 组件

View Components

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

Rule	Impact	Description
view-component-patterns.md	HIGH	Page component structure and state management
component-mapping.md	HIGH	Dedsi UI component mapping
icon-usage.md	MEDIUM	Icon usage guidelines

数据处理

Data Handling

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

Rule	Impact	Description
table-data-handling.md	HIGH	Table data loading and pagination
form-handling.md	HIGH	Form state and submission handling
form-validation.md	HIGH	Form validation rules
delete-operations.md	MEDIUM	Delete operations and confirmation
view-detail-modal.md	MEDIUM	Detail view modal

效率规则

Efficiency Rules

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

These rules help AI solve problems more efficiently and consistently.

代码模板

Code Templates

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

Rule	Impact	Description
code-templates.md	MEDIUM	Standard API Service and View component templates

技术栈

Technology Stack

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

Framework: Vue 3 (Composition API)
Language: TypeScript
UI Component Library: Dedsi UI
- Prefix:
```
dedsi-
```
  (e.g.,
```
dedsi-button
```
  ,
```
dedsi-table
```
  )
Icons:
```
@ant-design/icons-vue
```
Date Handling:
```
dayjs
```
HTTP Client: Custom
```
AxiosRequest
```
wrapper

项目结构

Project Structure

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

src/
├── apiServices/          # API Service Layer
│   ├── identitys/        # Identity Authentication Service
│   │   ├── userService.ts
│   │   ├── types.ts
│   │   └── index.ts
│   └── index.ts          # Unified Export
├── components/           # Reusable Components
├── configs/             # Configuration Files
├── layouts/             # Layout Components
├── router/              # Router Configuration
├── stores/              # Pinia State Management
├── utils/               # Utility Functions
├── views/               # Page Views
└── App.vue

开发规范

Development Guidelines

核心原则

Core Principles

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

Component-First: Prioritize using Dedsi UI components with the
```
dedsi-
```
prefix
Composition API: All components use
```
<script setup lang="ts">
```
Type Safety: Strictly use TypeScript type definitions
Error Handling: Uniformly use try-catch and
```
DedsiMessage
```

API 服务层

API Service Layer

位置:

src/apiServices/{module}/

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

Location:

src/apiServices/{module}/

Define services using
```
class
```
Export service instances (singleton pattern)
DTO type definitions are in
```
types.ts
```
Implement standard methods:
```
pagedQuery
```
,
```
get
```
,
```
create
```
,
```
update
```
,
```
delete
```

View 组件

View Components

使用 Composition API:

vue

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

标准页面结构:

搜索卡片 (
```
dedsi-card
```
+
```
dedsi-form
```
)
表格卡片 (
```
dedsi-card
```
+
```
dedsi-table
```
)
弹窗表单 (
```
dedsi-modal
```
+
```
dedsi-form
```
)

Use Composition API:

vue

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

Standard Page Structure:

Search card (
```
dedsi-card
```
+
```
dedsi-form
```
)
Table card (
```
dedsi-card
```
+
```
dedsi-table
```
)
Modal form (
```
dedsi-modal
```
+
```
dedsi-form
```
)

核心状态

Core State

typescript

// 表格数据
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>({ ... })

typescript

// Table Data
const tableLoading = ref(false)
const tableData = ref<Dto[]>()

// Pagination Configuration
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
})

// Query Parameters
const queryParam = reactive<Partial<InputDto>>({ ... })

// Modal Form
const modalVisible = ref(false)
const formState = reactive<any>({ ... })

最佳实践

Best Practices

1. Table 列定义

1. Table Column Definitions

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

Prioritize using
```
slot
```
to define columns for easy custom rendering
Format date fields using
```
dayjs
```
Use
```
template #actions
```
slot for operation columns

2. 数据加载

2. Data Loading

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

Uniformly encapsulate the
```
fetchData
```
method
Wrap API requests with
```
try-catch
```
Reset
```
tableLoading.value = false
```
in
```
finally
```

3. 表单处理

3. Form Handling

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

Use
```
Object.assign(formState, detail)
```
to populate data when editing
Reset
```
formState
```
when creating new entries
Determine whether to Create or Update based on the presence of
```
id
```
when submitting
Use
```
formRef
```
for form validation

4. 表单验证

4. Form Validation

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

Define validation rules using
```
:rules
```
Manually call
```
formRef.value?.validate()
```
for validation
Call
```
formRef.value?.clearValidate()
```
to clear validation when closing the modal

5. 图标使用

5. Icon Usage

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

Import icons from
```
@ant-design/icons-vue
```
Use
```
<template #icon>
```
slot to add icons to buttons

6. 删除操作

6. Delete Operations

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

Wrap delete buttons with
```
dedsi-popconfirm
```
Prevent accidental operations

7. 查看详情

7. View Details

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

Provide independent detail view modals
Use
```
dedsi-typography:copyable
```
for key fields to enable copying

参考

References

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

Dedsi Vue-UI - Dedsi UI Component Library Documentation
Vue 3 Documentation - Vue 3 Official Documentation
TypeScript Documentation - TypeScript Official Documentation