Dedsi-Vue-UI 组件库 SKILL 文档

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

目录

• [概述](#概述)
• [安装使用](#安装使用)
• [基础组件](#基础组件)
• [布局组件](#布局组件)
• [导航组件](#导航组件)
• [数据展示组件](#数据展示组件)
• [反馈组件](#反馈组件)
• [其他组件](#其他组件)

概述

Dedsi-Vue-UI 是一个基于 Vue 3 的组件库，提供了丰富的 UI 组件。所有组件都使用 Dedsi 前缀命名。

核心特性

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

组件命名规则

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

组件使用规范

重要：在模板中使用组件时，必须使用 components 数组中注册的 name 值（kebab-case 格式），而不是 PascalCase 的组件类名。

使用示例：

<template>
  <!-- ✅ 正确：使用 kebab-case 的 name 值 -->
  <dedsi-button>点击</dedsi-button>
  <dedsi-table :data="data" :columns="columns" />
  <dedsi-alert type="success" title="成功" />

  <!-- ❌ 错误：不要使用 PascalCase -->
  <DedsiButton>点击</DedsiButton>
  <DedsiTable :data="data" :columns="columns" />
</template>

<script setup lang="ts">
// ✅ 导入时使用 PascalCase
import { DedsiButton, DedsiTable, DedsiAlert } from 'dedsi-vue-ui'
</script>

Props 定义规范

• 使用 Vue 3 Composition API 的 defineProps
• 支持类型推断和默认值
• 必需参数明确标注（required: true 或无默认值）
• 类型注解使用 TypeScript 联合类型：type: 'primary' | 'success' | 'warning'

事件命名规范

• 使用 Vue 3 标准事件：update:propName 用于双向绑定
• 事件名使用 kebab-case：@page-change、@update:visible
• 事件回调参数类型明确：(page: number) => void

插槽使用规范

• 插槽名使用 kebab-case
• 支持默认插槽和具名插槽
• 作用域插槽提供参数：{ row, value }

安装使用

npm install dedsi-vue-ui

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

app.use(DedsiAlert)
app.use(DedsiButton)

基础组件

DedsiAlert - 警告提示

功能：展现需要关注的信息，支持多种类型和关闭操作 Props：

Events：

Slots：

使用示例：

<!-- 基础用法 -->
<DedsiAlert type="success" title="成功提示" description="操作已完成" />

<!-- 可关闭 -->
<DedsiAlert
  type="warning"
  title="警告"
  description="请注意查看"
  :closable="true"
  @close="handleClose"
/>

<!-- 自定义内容 -->
<DedsiAlert type="error">
  <template #title>错误</template>
  <p>发生错误，请重试</p>
</DedsiAlert>

DedsiAvatar - 头像

功能：用来代表用户或事物，支持图片、图标或字符 Props：

Events：

Slots：

使用示例：

<!-- 图片头像 -->
<DedsiAvatar src="https://example.com/avatar.png" size="large" />

<!-- 文字头像 -->
<DedsiAvatar shape="square">User</DedsiAvatar>

<!-- 图标头像 -->
<DedsiAvatar>
  <template #icon><UserIcon /></template>
</DedsiAvatar>

DedsiBadge - 徽标数

功能：用于展示通知数量或状态标记 Props：

使用示例：

<!-- 数字徽标 -->
<DedsiBadge :value="5">
  <DedsiButton>消息</DedsiButton>
</DedsiBadge>

<!-- 最大值 -->
<DedsiBadge :value="100" :max="99">
  <DedsiButton>通知</DedsiButton>
</DedsiBadge>

<!-- 小圆点 -->
<DedsiBadge isDot>
  <DedsiButton>状态</DedsiButton>
</DedsiBadge>

DedsiBreadcrumb - 面包屑

功能：显示当前页面在系统层级结构中的位置 DedsiBreadcrumb Props：

DedsiBreadcrumbItem Props：

Slots：

使用示例：

<DedsiBreadcrumb separator=">">
  <DedsiBreadcrumbItem to="/">首页</DedsiBreadcrumbItem>
  <DedsiBreadcrumbItem to="/components">组件</DedsiBreadcrumbItem>
  <DedsiBreadcrumbItem>面包屑</DedsiBreadcrumbItem>
</DedsiBreadcrumb>

DedsiCard - 卡片

功能：通用卡片容器，可包含标题、额外操作、内容和底部 Props：

Slots：

使用示例：

<!-- 基础卡片 -->
<DedsiCard title="卡片标题">
  <p>卡片内容</p>
</DedsiCard>

<!-- 带额外操作 -->
<DedsiCard>
  <template #title>
    <span>标题</span>
  </template>
  <template #extra>
    <DedsiButton>更多</DedsiButton>
  </template>
  <p>内容</p>
</DedsiCard>

DedsiDivider - 分割线

功能：区隔内容的分割线，可包含文字 Props：

使用示例：

<!-- 水平分割线 -->
<DedsiDivider>文本</DedsiDivider>

<!-- 虚线 -->
<DedsiDivider dashed />

<!-- 垂直分割线 -->
<DedsiSpace>
  <span>文本1</span>
  <DedsiDivider direction="vertical" />
  <span>文本2</span>
</DedsiSpace>

DedsiEmpty - 空状态

功能：空状态时的占位展示 Props：

Slots：

使用示例：

<!-- 基础用法 -->
<DedsiEmpty description="暂无数据" />

<!-- 自定义内容 -->
<DedsiEmpty>
  <DedsiButton>创建</DedsiButton>
</DedsiEmpty>

DedsiTag - 标签

功能：进行标记和分类 Props：

Events：

使用示例：

<!-- 基础标签 -->
<DedsiTag type="success">成功</DedsiTag>

<!-- 可关闭 -->
<DedsiTag closable @close="handleClose">可关闭</DedsiTag>

<!-- 自定义颜色 -->
<DedsiTag color="#f50" backgroundColor="#fff1f0">自定义</DedsiTag>

DedsiSpace - 间距

功能：设置组件之间的间距 Props：

使用示例：

<!-- 水平间距 -->
<DedsiSpace :size="middle">
  <DedsiButton>按钮1</DedsiButton>
  <DedsiButton>按钮2</DedsiButton>
</DedsiSpace>

<!-- 垂直间距 -->
<DedsiSpace direction="vertical" :size="20">
  <div>内容1</div>
  <div>内容2</div>
</DedsiSpace>

DedsiSplit - 分割布局

功能：左右分割的布局容器 Props：

Slots：

使用示例：

<DedsiSplit :gap="20">
  <template #left>
    <p>左侧内容</p>
  </template>
  <template #right>
    <p>右侧内容</p>
  </template>
</DedsiSplit>

布局组件

DedsiRow / DedsiCol - 栅格布局

功能：24 栅格响应式布局系统 DedsiRow Props：

DedsiCol Props：

响应式对象格式：

{
  span: number,    // 栅格占位格数
  offset: number   // 栅格左侧间隔格数
}

使用示例：

<!-- 基础用法 -->
<DedsiRow :gutter="16">
  <DedsiCol :span="12">col-12</DedsiCol>
  <DedsiCol :span="12">col-12</DedsiCol>
</DedsiRow>

<!-- 偏移 -->
<DedsiRow>
  <DedsiCol :span="8" :offset="8">col-8 offset-8</DedsiCol>
</DedsiRow>

<!-- 响应式 -->
<DedsiRow>
  <DedsiCol :xs="24" :sm="12" :md="8">响应式</DedsiCol>
  <DedsiCol :xs="24" :sm="12" :md="8">响应式</DedsiCol>
  <DedsiCol :xs="24" :sm="12" :md="8">响应式</DedsiCol>
</DedsiRow>

DedsiScrollbar - 滚动条

功能：自定义滚动条样式 Props：

暴露方法（通过 ref）：

使用示例：

<template>
  <DedsiScrollbar ref="scrollbar" height="400px">
    <div v-for="i in 100" :key="i">内容 {{ i }}</div>
  </DedsiScrollbar>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const scrollbar = ref()

// 滚动到顶部
const scrollToTop = () => {
  scrollbar.value?.setScrollTop(0)
}
</script>

DedsiSkeleton - 骨架屏

功能：在数据加载时展示占位效果 Props：

Slots：

使用示例：

<!-- 基础用法 -->
<DedsiSkeleton :loading="loading">
  <div>实际内容</div>
</DedsiSkeleton>

<!-- 复杂配置 -->
<DedsiSkeleton
  :loading="loading"
  :avatar="true"
  avatarSize="large"
  :paragraph="{ rows: 4 }"
>
  <UserProfile />
</DedsiSkeleton>

导航组件

DedsiMenu - 导航菜单

功能：导航菜单，支持多级嵌套和折叠 DedsiMenu Props：

MenuItem 接口：

interface MenuItem {
  key: string              // 唯一标识
  label: string            // 菜单项标题
  icon?: any              // 图标组件
  disabled?: boolean      // 是否禁用
  children?: MenuItem[]   // 子菜单项
}

Events：

使用示例：

<template>
  <DedsiMenu
    :items="menuItems"
    v-model:selectedKeys="selectedKeys"
    v-model:openKeys="openKeys"
    mode="inline"
    theme="dark"
    @click="handleMenuClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const selectedKeys = ref(['home'])
const openKeys = ref([])

const menuItems = [
  {
    key: 'home',
    label: '首页',
    icon: HomeIcon
  },
  {
    key: 'components',
    label: '组件',
    icon: ComponentIcon,
    children: [
      { key: 'basic', label: '基础组件' },
      { key: 'layout', label: '布局组件' }
    ]
  }
]

const handleMenuClick = (item: any) => {
  console.log('点击菜单', item)
}
</script>

DedsiTabs - 标签页

功能：选项卡切换组件 DedsiTabs Props：

DedsiTabPane Props：

Events：

Slots：

使用示例：

<!-- 基础用法 -->
<DedsiTabs v-model:activeKey="activeKey">
  <DedsiTabPane name="1" label="标签1">内容1</DedsiTabPane>
  <DedsiTabPane name="2" label="标签2">内容2</DedsiTabPane>
</DedsiTabs>

<!-- 卡片类型 -->
<DedsiTabs type="card">
  <DedsiTabPane name="1" label="标签1">内容1</DedsiTabPane>
</DedsiTabs>

<!-- 可编辑 -->
<DedsiTabs v-model:activeKey="activeKey" type="editable-card" @edit="handleEdit">
  <DedsiTabPane v-for="tab in tabs" :key="tab.key" :name="tab.key" :label="tab.label">
    {{ tab.content }}
  </DedsiTabPane>
</DedsiTabs>

DedsiDropdown - 下拉菜单

功能：下拉菜单，支持点击和悬停触发 Props：

DropdownMenuItem 接口：

interface DropdownMenuItem {
  key: string | number     // 唯一标识
  label?: string           // 菜单项文本
  icon?: any              // 图标组件
  disabled?: boolean      // 是否禁用
  danger?: boolean        // 是否危险操作（红色）
  type?: 'item' | 'divider'  // 类型：菜单项或分割线
}

Events：

使用示例：

<template>
  <DedsiDropdown :menu="menuItems" @select="handleSelect">
    <DedsiButton>下拉菜单</DedsiButton>
  </DedsiDropdown>
</template>

<script setup lang="ts">
const menuItems = [
  { key: '1', label: '菜单项1', icon: EditIcon },
  { key: '2', label: '菜单项2', icon: DeleteIcon, danger: true },
  { type: 'divider' },
  { key: '3', label: '菜单项3', disabled: true }
]

const handleSelect = (key: string | number) => {
  console.log('选择了', key)
}
</script>

数据展示组件

DedsiStatistic - 统计数值

功能：展示统计数值，支持数字动画 Props：

Slots：

使用示例：

<!-- 基础用法 -->
<DedsiStatistic title="总用户数" :value="12345" />

<!-- 带前后缀 -->
<DedsiStatistic title="账户余额" :value="1234.56" prefix="¥" :precision="2" />

<!-- 自定义样式 -->
<DedsiStatistic
  title="成交量"
  :value="12345"
  :contentStyle="{ color: '#3f8600', fontSize: '24px' }"
/>

DedsiNumberConverter - 数字转换

功能：将数字转换为万/千万/亿单位显示 Props：

使用示例：

<!-- 自动转换 -->
<DedsiNumberConverter :value="12345" />
<!-- 显示：1.23万 -->

<!-- 指定单位 -->
<DedsiNumberConverter :value="12345" targetUnit="wan" suffix="元" />
<!-- 显示：1.23万元 -->

<!-- 千万级别 -->
<DedsiNumberConverter :value="12345678" targetUnit="qianwan" />
<!-- 显示：1234.57千万 -->

DedsiCountdown - 倒计时

功能：实时倒计时展示 Props：

Events：

Slots：

使用示例：

<!-- 基础用法 -->
<DedsiCountdown :value="Date.now() + 10000000" />

<!-- 自定义格式 -->
<DedsiCountdown
  title="活动倒计时"
  :value="targetTime"
  format="DD天 HH:mm:ss"
  suffix="后结束"
  @finish="handleFinish"
/>

DedsiTable - 表格

功能：表格展示，支持分页和自定义列渲染 Props：

Column 接口：

interface Column {
  key: string                        // 列的唯一标识，用于插槽匹配
  title: string                      // 列标题
  width?: string                     // 列宽度（CSS 值）
  align?: 'left' | 'center' | 'right'  // 对齐方式
}

Events：

Slots：

使用示例：

<template>
  <DedsiTable
    :data="tableData"
    :columns="columns"
    :total="total"
    :pageSize="20"
    :showIndex="true"
    @page-change="handlePageChange"
  >
    <!-- 自定义操作列 -->
    <template #actions="{ row }">
      <DedsiButton @click="edit(row)">编辑</DedsiButton>
      <DedsiButton @click="del(row)">删除</DedsiButton>
    </template>

    <!-- 自定义状态列 -->
    <template #status="{ value }">
      <DedsiTag :type="value === 1 ? 'success' : 'danger'">
        {{ value === 1 ? '启用' : '禁用' }}
      </DedsiTag>
    </template>
  </DedsiTable>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tableData = ref([
  { name: '张三', age: 25, status: 1 },
  { name: '李四', age: 30, status: 0 }
])

const total = ref(100)

const columns = [
  { key: 'name', title: '姓名', width: '200px' },
  { key: 'age', title: '年龄', align: 'center' },
  { key: 'status', title: '状态', align: 'center' },
  { key: 'actions', title: '操作', width: '200px' }
]

const handlePageChange = (page: number) => {
  console.log('当前页', page)
}
</script>

DedsiTypography - 排版

功能：文本排版组件，支持复制、编辑、省略等功能 Props：

Events：

使用示例：

<!-- 基础文本 -->
<DedsiTypography>普通文本</DedsiTypography>

<!-- 次要文本 -->
<DedsiTypography type="secondary">次要文本</DedsiTypography>

<!-- 可复制 -->
<DedsiTypography copyable>这段文字可以复制</DedsiTypography>

<!-- 可编辑 -->
<DedsiTypography editable v-model="text">{{ text }}</DedsiTypography>

<!-- 省略 -->
<DedsiTypography :ellipsis="{ rows: 2 }">
  这是一段很长的文字内容，超过两行后会显示省略号...
</DedsiTypography>

<!-- 组合使用 -->
<DedsiTypography strong underline>
  <DedsiTypography code>重要</DedsiTypography>
  提示
</DedsiTypography>

DedsiImage - 图片

功能：图片预览，支持缩放、旋转、多图切换 Props：

使用示例：

<!-- 基础用法 -->
<DedsiImage
  src="https://example.com/image.jpg"
  width="200px"
  height="200px"
/>

<!-- 多图预览 -->
<DedsiImage
  :src="currentImage"
  :previewSrcList="imageList"
  fit="cover"
/>

DedsiQRCode - 二维码

功能：生成二维码 Props：

Slots：

使用示例：

<!-- 基础用法 -->
<DedsiQRCode value="https://example.com" />

<!-- 自定义样式 -->
<DedsiQRCode
  value="https://example.com"
  :size="200"
  color="#1890ff"
  backgroundColor="#f0f0f0"
  errorCorrectionLevel="H"
/>

反馈组件

DedsiDialog - 对话框

功能：模态对话框，带有确认/取消按钮 Props：

Events：

Slots：

使用示例：

<template>
  <DedsiDialog
    v-model:visible="visible"
    title="对话框"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p>对话框内容</p>
  </DedsiDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
const loading = ref(false)

const handleOk = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    visible.value = false
  }, 1000)
}

const handleCancel = () => {
  visible.value = false
}
</script>

DedsiModal - 模态框

功能：基础模态框 Props：

Events：

Slots：

DedsiDrawer - 抽屉

功能：从屏幕边缘滑出的浮层面板 Props：

Events：

Slots：

使用示例：

<template>
  <DedsiDrawer
    v-model:visible="visible"
    title="抽屉标题"
    placement="right"
    :width="600"
  >
    <p>抽屉内容</p>
    <template #footer>
      <DedsiButton @click="visible = false">关闭</DedsiButton>
    </template>
  </DedsiDrawer>
</template>

DedsiMessage - 全局提示

功能：全局提示消息，通常命令式调用 Props：

暴露方法：

使用示例：

<!-- 声明式使用 -->
<DedsiMessage content="这是一条消息" type="success" :duration="2000" />

<!-- 命令式使用（推荐） -->
<script setup lang="ts">
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()

// 显示不同类型的消息
const showMessage = () => {
  instance?.proxy?.$message.info('普通消息')
  instance?.proxy?.$message.success('成功消息')
  instance?.proxy?.$message.warning('警告消息')
  instance?.proxy?.$message.error('错误消息')
  instance?.proxy?.$message.loading('加载中...')

  // 手动关闭
  const msg = instance?.proxy?.$message.info('不会自动关闭', 0)
  setTimeout(() => {
    msg?.close()
  }, 5000)
}
</script>

DedsiPopconfirm - 气泡确认框

功能：点击元素触发气泡确认框 Props：

Events：

使用示例：

<DedsiPopconfirm
  title="确定要删除吗？"
  @confirm="handleDelete"
  @cancel="handleCancel"
>
  <DedsiButton danger>删除</DedsiButton>
</DedsiPopconfirm>

DedsiPopover - 气泡卡片

功能：点击或悬停时显示气泡卡片 Props：

Slots：

使用示例：

<!-- 基础用法 -->
<DedsiPopover content="这是内容" title="标题">
  <DedsiButton>悬停显示</DedsiButton>
</DedsiPopover>

<!-- 自定义内容 -->
<DedsiPopover>
  <template #content>
    <div>自定义内容</div>
    <DedsiButton>操作</DedsiButton>
  </template>
  <DedsiButton>点击显示</DedsiButton>
</DedsiPopover>

DedsiTooltip - 文字提示

功能：简单的文字提示气泡 Props：

使用示例：

<DedsiTooltip content="这是提示文字">
  <DedsiButton>悬停查看提示</DedsiButton>
</DedsiTooltip>

DedsiResult - 结果

功能：反馈各类操作结果 Props：

Slots：

使用示例：

<!-- 成功结果 -->
<DedsiResult status="success" title="操作成功" subTitle="预计2小时内到达">
  <template #extra>
    <DedsiButton type="primary">返回首页</DedsiButton>
  </template>
</DedsiResult>

<!-- 404 页面 -->
<DedsiResult status="404" title="404" subTitle="抱歉，您访问的页面不存在">
  <template #extra>
    <DedsiButton type="primary">返回首页</DedsiButton>
  </template>
</DedsiResult>

DedsiPopper - 基础气泡

功能：基础气泡组件，用于构建其他气泡类组件 Props：

Events：

暴露方法：

Slots：

其他组件

DedsiSegmented - 分段器

功能：分段控制器，用于切换显示不同内容 Props：

SegmentedOption 接口：

interface SegmentedOption {
  label: string           // 选项文本
  value: string | number  // 选项值
  icon?: any             // 图标
  disabled?: boolean     // 是否禁用
}

Events：

使用示例：

<template>
  <DedsiSegmented
    v-model="value"
    :options="options"
    @change="handleChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('day')

const options = [
  { label: '日', value: 'day' },
  { label: '周', value: 'week' },
  { label: '月', value: 'month' },
  { label: '年', value: 'year' }
]

const handleChange = (val: string | number) => {
  console.log('切换到', val)
}
</script>

DedsiMarquee - 跑马灯

功能：文字/内容滚动展示 Props：

使用示例：

<DedsiMarquee :speed="100" direction="ltr">
  <span>这是一条滚动的公告信息</span>
</DedsiMarquee>

未实现组件

以下组件的目录存在但尚未实现（没有对应的 .vue 文件）：

表单组件

• 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 - 上传

最佳实践

1. 组件导入

推荐使用按需导入以减小打包体积：

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

app.use(DedsiAlert)
app.use(DedsiButton)
app.use(DedsiTable)

避免全量导入（除非确实需要全部组件）：

// ❌ 不推荐：会导入所有组件
import DedsiVueUI from 'dedsi-vue-ui'
app.use(DedsiVueUI)

2. 事件处理

所有组件的事件都使用 Vue 3 标准事件命名：

<!-- ✅ 推荐：使用 kebab-case 事件名 -->
<DedsiDialog @update:visible="handleVisibleChange" />
<DedsiTable @page-change="handlePageChange" />
<DedsiTabs @update:activeKey="handleTabChange" />

<!-- ❌ 避免：使用 camelCase -->
<DedsiDialog @visibleChange="..." />
<DedsiDialog @onVisibleChange="..." />

事件回调类型定义：

const handleVisibleChange = (visible: boolean) => {
  console.log('对话框显示状态:', visible)
}

const handlePageChange = (page: number) => {
  console.log('当前页码:', page)
}

3. 双向绑定

使用 v-model 进行双向绑定，遵循 Vue 3 规范：

<!-- 带参数的 v-model（推荐） -->
<DedsiTabs v-model:activeKey="activeKey" />
<DedsiMenu v-model:selectedKeys="selectedKeys" />
<DedsiMenu v-model:openKeys="openKeys" />

<!-- 不带参数的 v-model（默认 modelValue） -->
<DedsiSegmented v-model="value" />
<DedsiInput v-model="inputValue" />

<!-- 完整等价形式 -->
<DedsiTabs
  :activeKey="activeKey"
  @update:activeKey="val => activeKey = val"
/>

4. 类型安全

推荐使用 TypeScript 以获得完整的类型提示和检查：

// 导入类型定义
import type {
  MenuItem,
  Column,
  DropdownMenuItem,
  SegmentedOption
} from 'dedsi-vue-ui'

// 使用类型定义
const menuItems: MenuItem[] = [
  { key: 'home', label: '首页', icon: HomeIcon }
]

const columns: Column[] = [
  { key: 'name', title: '姓名', width: '200px' }
]

5. 插槽使用

具名插槽：

<DedsiCard>
  <template #title>
    <span>自定义标题</span>
  </template>
  <template #extra>
    <DedsiButton>更多</DedsiButton>
  </template>
  <p>卡片内容</p>
</DedsiCard>

作用域插槽：

<DedsiTable :data="data" :columns="columns">
  <template #name="{ row, value }">
    <a @click="handleClick(row)">{{ value }}</a>
  </template>
</DedsiTable>

6. 样式定制

通过 props 修改样式：

<!-- 使用组件提供的样式 props -->
<DedsiCard :bodyStyle="{ padding: '20px' }" />
<DedsiStatistic :contentStyle="{ color: '#3f8600' }" />

通过 CSS 覆盖（谨慎使用）：

<style scoped>
/* 使用深度选择器覆盖组件内部样式 */
.custom-card :deep(.dedsi-card-body) {
  padding: 30px;
}
</style>

7. 性能优化

合理使用 v-once：

<!-- 静态内容使用 v-once 避免不必要的更新 -->
<DedsiCard v-once>
  <h1>静态标题</h1>
</DedsiCard>

避免不必要的响应式：

// ✅ 使用 shallowRef 对于大型对象
const largeData = shallowRef<DataType[]>(...)

// ✅ 使用 markRaw 跳过组件的响应式转换
import { markRaw } from 'vue'
const iconComponent = markRaw(CustomIcon)

8. 常见问题

Q: 组件样式不生效？ A: 检查是否正确导入了组件样式文件，确保 CSS 已被加载。

Q: TypeScript 报错找不到模块？ A: 确保安装了类型定义，并在 tsconfig.json 中正确配置：

{
  "compilerOptions": {
    "types": ["dedsi-vue-ui"]
  }
}

Q: 组件无法按需导入？ A: 检查是否配置了正确的构建工具（如 Vite、Webpack）以支持按需导入。

Q: 如何自定义主题？ A: 参考 CSS 变量文档，通过覆盖 CSS 变量来定制主题：

:root {
  --dedsi-primary-color: #1890ff;
  --dedsi-border-radius: 4px;
}

组件分类索引

基础组件 (10)

• DedsiAlert - 警告提示
• DedsiAvatar - 头像
• DedsiBadge - 徽标数
• DedsiBreadcrumb - 面包屑
• DedsiCard - 卡片
• DedsiDivider - 分割线
• DedsiEmpty - 空状态
• DedsiTag - 标签
• DedsiSpace - 间距
• DedsiSplit - 分割布局

布局组件 (3)

• DedsiRow/DedsiCol - 栅格布局
• DedsiScrollbar - 滚动条
• DedsiSkeleton - 骨架屏

导航组件 (3)

• DedsiMenu - 导航菜单
• DedsiTabs - 标签页
• DedsiDropdown - 下拉菜单

数据展示组件 (7)

• DedsiStatistic - 统计数值
• DedsiNumberConverter - 数字转换
• DedsiCountdown - 倒计时
• DedsiTable - 表格
• DedsiTypography - 排版
• DedsiImage - 图片
• DedsiQRCode - 二维码

反馈组件 (9)

• DedsiDialog - 对话框
• DedsiModal - 模态框
• DedsiDrawer - 抽屉
• DedsiMessage - 全局提示
• DedsiPopconfirm - 气泡确认框
• DedsiPopover - 气泡卡片
• DedsiTooltip - 文字提示
• DedsiResult - 结果
• DedsiPopper - 基础气泡

其他组件 (2)

• DedsiSegmented - 分段器
• DedsiMarquee - 跑马灯

统计信息

• 已实现组件：37 个
• 未实现组件：23 个
• 总计：60 个

附录

TypeScript 类型定义速查

常用接口类型

// 菜单项类型（DedsiMenu, DedsiDropdown）
interface MenuItem {
  key: string
  label: string
  icon?: any
  disabled?: boolean
  children?: MenuItem[]
}

// 表格列类型（DedsiTable）
interface Column {
  key: string
  title: string
  width?: string
  align?: 'left' | 'center' | 'right'
}

// 下拉菜单项类型（DedsiDropdown）
interface DropdownMenuItem {
  key: string | number
  label?: string
  icon?: any
  disabled?: boolean
  danger?: boolean
  type?: 'item' | 'divider'
}

// 分段器选项类型（DedsiSegmented）
interface SegmentedOption {
  label: string
  value: string | number
  icon?: any
  disabled?: boolean
}

// 面包屑路由类型（DedsiBreadcrumbItem）
type RouteLocationRaw = string | {
  path?: string
  name?: string
  params?: Record<string, any>
  query?: Record<string, any>
}

Props 类型联合值速查

// Alert 类型
type AlertType = 'success' | 'info' | 'warning' | 'error'

// Avatar 尺寸
type AvatarSize = 'large' | 'default' | 'small' | number

// Avatar 形状
type AvatarShape = 'circle' | 'square'

// Badge 类型
type BadgeType = 'primary' | 'success' | 'warning' | 'danger'

// Button 尺寸
type ButtonSize = 'large' | 'default' | 'small'

// Card 阴影
type CardShadow = 'always' | 'hover' | 'never'

// Divider 方向
type DividerDirection = 'horizontal' | 'vertical'

// Menu 模式
type MenuMode = 'vertical' | 'horizontal' | 'inline'

// Menu 主题
type MenuTheme = 'light' | 'dark'

// Space 方向
type SpaceDirection = 'horizontal' | 'vertical'

// Space 尺寸
type SpaceSize = 'small' | 'middle' | 'large' | number | [number, number]

// Tabs 类型
type TabsType = 'line' | 'card' | 'editable-card'

// Tag 类型
type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger'

// Tooltip/Popover 放置位置
type Placement =
  | 'top' | 'topLeft' | 'topRight' | 'topCenter'
  | 'bottom' | 'bottomLeft' | 'bottomRight' | 'bottomCenter'
  | 'left' | 'leftTop' | 'leftBottom'
  | 'right' | 'rightTop' | 'rightBottom'

// Result 状态
type ResultStatus = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500'

// NumberConverter 单位
type NumberConverterUnit = 'none' | 'wan' | 'qianwan' | 'yi' | 'auto'

// Drawer 位置
type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom'

// QRCode 容错级别
type QRCodeErrorLevel = 'L' | 'M' | 'Q' | 'H'

文档元数据：