Dedsi-Vue-UI 组件库 SKILL 文档

帮助 AI 理解和使用 Dedsi-Vue-UI 组件库的详细指南。

何时使用

使用 Dedsi Vue UI 组件库开发 Vue 3 + TypeScript 项目
需要查询组件的 Props、Events、Slots 和使用方法
解决组件使用中的常见问题
遵循 Dedsi UI 组件的开发和使用规范

能力规则

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

核心规范

规则	影响	描述
component-naming.md	HIGH	组件命名规范和使用格式
component-table.md	HIGH	表格组件的完整使用指南
component-menu.md	HIGH	导航菜单的使用方法

基础组件

规则	影响	描述
component-alert.md	MEDIUM	警告提示组件
component-avatar.md	MEDIUM	头像组件
component-badge.md	MEDIUM	徽标数组件
component-breadcrumb.md	MEDIUM	面包屑导航
component-card.md	MEDIUM	卡片容器
component-divider.md	MEDIUM	分割线
component-empty.md	MEDIUM	空状态占位
component-tag.md	MEDIUM	标签组件
component-space.md	MEDIUM	间距布局
component-split.md	MEDIUM	分割布局
component-typography.md	MEDIUM	排版组件

布局组件

规则	影响	描述
component-grid.md	MEDIUM	栅格布局系统
component-scrollbar.md	MEDIUM	自定义滚动条
component-skeleton.md	MEDIUM	骨架屏

导航组件

规则	影响	描述
component-menu.md	HIGH	导航菜单
component-tabs.md	MEDIUM	标签页切换
component-dropdown.md	MEDIUM	下拉菜单

数据展示组件

规则	影响	描述
component-table.md	HIGH	数据表格
component-statistic.md	MEDIUM	统计数值
component-number-converter.md	MEDIUM	数字转换
component-countdown.md	MEDIUM	倒计时
component-image.md	MEDIUM	图片预览
component-qrcode.md	MEDIUM	二维码生成

反馈组件

规则	影响	描述
component-dialog.md	HIGH	对话框
component-modal.md	MEDIUM	模态框
component-drawer.md	MEDIUM	抽屉
component-message.md	HIGH	全局提示
component-popconfirm.md	MEDIUM	气泡确认框
component-popover.md	MEDIUM	气泡卡片
component-tooltip.md	MEDIUM	文字提示
component-result.md	MEDIUM	结果反馈
component-popper.md	MEDIUM	基础气泡

其他组件

规则	影响	描述
component-segmented.md	MEDIUM	分段器
component-marquee.md	MEDIUM	跑马灯

效率规则

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

最佳实践

规则	影响	描述
best-practices.md	HIGH	组件使用最佳实践

安装使用

npm install dedsi-vue-ui

import { createApp } from 'vue'
import { DedsiAlert, DedsiButton, DedsiTable } from 'dedsi-vue-ui'

const app = createApp(App)
app.use(DedsiAlert)
app.use(DedsiButton)
app.use(DedsiTable)

组件统计

已实现组件 (37个)

基础组件 (10个):

DedsiAlert, DedsiAvatar, DedsiBadge, DedsiBreadcrumb, DedsiCard
DedsiDivider, DedsiEmpty, DedsiTag, DedsiSpace, DedsiSplit

布局组件 (3个):

DedsiRow/DedsiCol, DedsiScrollbar, DedsiSkeleton

导航组件 (3个):

DedsiMenu, DedsiTabs, DedsiDropdown

数据展示组件 (7个):

DedsiTable, DedsiStatistic, DedsiNumberConverter, DedsiCountdown
DedsiImage, DedsiQRCode, DedsiTypography

反馈组件 (9个):

DedsiDialog, DedsiModal, DedsiDrawer, DedsiMessage
DedsiPopconfirm, DedsiPopover, DedsiTooltip, DedsiResult, DedsiPopper

其他组件 (5个):

DedsiSegmented, DedsiMarquee, DedsiCountdown, DedsiEmpty, DedsiResult

未实现组件 (23个)

表单组件:

DedsiButton, DedsiForm/DedsiFormItem, DedsiInput/DedsiInputNumber/DedsiInputPassword
DedsiTextarea, DedsiCheckbox/DedsiCheckboxGroup, DedsiRadio/DedsiRadioGroup
DedsiSelect, DedsiSwitch, DedsiSlider, DedsiRate

数据选择组件:

DedsiAutoComplete, DedsiCascader, DedsiDatePicker/DedsiMonthPicker/DedsiRangePicker
DedsiTimePicker/DedsiTimeRangePicker, DedsiTreeSelect, DedsiTransfer, DedsiMentions

其他:

DedsiUpload

核心特性

Vue 3 Composition API: 充分利用 Vue 3 的新特性
TypeScript 支持: 完整的类型定义和类型推断
组件化设计: 高复用性和可组合性
响应式布局: 支持多种屏幕尺寸
主题定制: 支持自定义主题和样式

组件命名规则

单文件组件: Dedsi + 功能名称（如 DedsiAlert、DedsiButton）
组合组件: 主组件 + 子组件（如 DedsiMenu + DedsiMenuItem）

重要: 在模板中使用组件时，必须使用 kebab-case 格式的 name 值（如 dedsi-alert），而不是 PascalCase（如 DedsiAlert）。

统计信息

指标	数值
总组件数	60
已实现	37
未实现	23
组件类别	6

技术栈

框架: Vue 3.5.26 (Composition API)
语言: TypeScript 5.9.3
构建工具: Vite
图标: @ant-design/icons-vue
日期处理: dayjs

参考

Vue 3 Documentation - Vue 3 官方文档
TypeScript Documentation - TypeScript 官方文档

dedsi-vue-ui