yg-yygl 0.0.1

package/src/views/demo-case/card/index.vue

@@ -0,0 +1,290 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Icon } from '@udp/component-ui';
+
+// 卡片数据
+const cardData = ref([
+  {
+    title: 'Vue3',
+    icon: 'mdi:vuejs',
+    color: '#42b883',
+    description: '渐进式 JavaScript 框架',
+    stats: '100k+',
+  },
+  {
+    title: 'React',
+    icon: 'mdi:react',
+    color: '#61dafb',
+    description: '用于构建用户界面的 JavaScript 库',
+    stats: '200k+',
+  },
+  {
+    title: 'Angular',
+    icon: 'mdi:angular',
+    color: '#dd1b16',
+    description: '现代 Web 应用平台',
+    stats: '80k+',
+  },
+]);
+
+// 是否始终显示阴影
+const alwaysShadow = ref(false);
+
+// 鼠标悬停时显示阴影
+const hoverShadow = ref(true);
+</script>
+
+<template>
+  <div class="p-6 bg-background w-full h-full overflow-auto rounded-md">
+    <!-- 标题区域 -->
+    <div class="mb-6">
+      <h2 class="m-0 mb-2 text-2xl font-semibold text-[hsl(var(--foreground))]">
+        Card 卡片 (UDP UI)
+      </h2>
+      <p class="m-0 text-sm text-[hsl(var(--foreground-secondary))]">
+        用于将信息聚合在卡片容器中展示
+      </p>
+    </div>
+
+    <!-- 区域1：基础用法 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        基础用法
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        基础的卡片展示，包含标题、内容和操作
+      </p>
+      <div class="grid grid-cols-3 gap-4">
+        <UdpCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <span>卡片名称</span>
+              <UdpButton class="button" text>操作按钮</UdpButton>
+            </div>
+          </template>
+          <p class="m-0 text-sm text-gray-600">
+            这是一段卡片内容，用于展示卡片的基本用法。卡片可以包含标题、内容和操作区域。
+          </p>
+        </UdpCard>
+
+        <UdpCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <span>项目信息</span>
+              <UdpButton class="button" text>更多</UdpButton>
+            </div>
+          </template>
+          <div class="space-y-2">
+            <p class="m-0 text-sm">项目名称：翼构统一开发平台</p>
+            <p class="m-0 text-sm">项目版本：v2.0.0</p>
+            <p class="m-0 text-sm">项目状态：进行中</p>
+          </div>
+        </UdpCard>
+
+        <UdpCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <span>用户统计</span>
+              <ElButton class="button" text>详情</ElButton>
+            </div>
+          </template>
+          <div class="text-center">
+            <div class="text-3xl font-bold text-primary mb-2">1,234</div>
+            <p class="m-0 text-sm text-gray-600">总用户数</p>
+          </div>
+        </UdpCard>
+      </div>
+    </div>
+
+    <!-- 区域2：简洁卡片 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        简洁卡片
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        只有内容区域的简洁卡片
+      </p>
+      <div class="grid grid-cols-3 gap-4">
+        <UdpCard>
+          <p class="m-0 text-sm text-gray-600">
+            简洁卡片没有头部和底部，只展示主要内容。
+          </p>
+        </UdpCard>
+
+        <UdpCard>
+          <div class="flex items-center gap-4">
+            <UdpAvatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
+            <div>
+              <h4 class="m-0 mb-1 font-semibold">张三</h4>
+              <p class="m-0 text-sm text-gray-600">前端开发工程师</p>
+            </div>
+          </div>
+        </UdpCard>
+
+        <UdpCard>
+          <div class="text-center">
+            <div class="text-2xl font-bold text-green-500 mb-1">+12.5%</div>
+            <p class="m-0 text-sm text-gray-600">同比增长</p>
+          </div>
+        </UdpCard>
+      </div>
+    </div>
+
+    <!-- 区域3：带图片的卡片 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        带图片的卡片
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        卡片中可以包含图片
+      </p>
+      <div class="grid grid-cols-3 gap-4">
+        <UdpCard :body-style="{ padding: '0px' }">
+          <img
+            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+            class="w-full h-40 object-cover"
+          />
+          <div class="p-4">
+            <h4 class="m-0 mb-2 font-semibold">漂亮的图片</h4>
+            <p class="m-0 text-sm text-gray-600">这是一段图片描述文字。</p>
+          </div>
+        </UdpCard>
+
+        <ElCard :body-style="{ padding: '0px' }">
+          <img
+            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
+            class="w-full h-40 object-cover"
+          />
+          <div class="p-4">
+            <h4 class="m-0 mb-2 font-semibold">翼构平台</h4>
+            <p class="m-0 text-sm text-gray-600">统一的前端开发平台。</p>
+          </div>
+        </ElCard>
+
+        <ElCard :body-style="{ padding: '0px' }">
+          <img
+            src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
+            class="w-full h-40 object-cover"
+          />
+          <div class="p-4">
+            <h4 class="m-0 mb-2 font-semibold">开发工具</h4>
+            <p class="m-0 text-sm text-gray-600">高效的开发工具链。</p>
+          </div>
+        </ElCard>
+      </div>
+    </div>
+
+    <!-- 区域4：带阴影的卡片 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        带阴影的卡片
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        使用 shadow 属性控制卡片的阴影显示
+      </p>
+      <div class="space-y-4">
+        <div class="flex items-center gap-4 mb-4">
+          <UdpCheckbox v-model="alwaysShadow">始终显示阴影</UdpCheckbox>
+          <UdpCheckbox v-model="hoverShadow">鼠标悬停时显示阴影</UdpCheckbox>
+        </div>
+
+        <div class="grid grid-cols-3 gap-4">
+          <ElCard :shadow="alwaysShadow ? 'always' : hoverShadow ? 'hover' : 'never'">
+            <template #header>
+              <span>卡片 1</span>
+            </template>
+            <p class="m-0 text-sm text-gray-600">阴影效果卡片</p>
+          </ElCard>
+
+          <ElCard shadow="hover">
+            <template #header>
+              <span>卡片 2</span>
+            </template>
+            <p class="m-0 text-sm text-gray-600">悬停显示阴影</p>
+          </ElCard>
+
+          <ElCard shadow="always">
+            <template #header>
+              <span>卡片 3</span>
+            </template>
+            <p class="m-0 text-sm text-gray-600">始终显示阴影</p>
+          </ElCard>
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域5：卡片插槽 -->
+    <div class="bg-white rounded-[var(--radius)] p-6">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        卡片插槽
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        使用自定义插槽丰富卡片内容
+      </p>
+      <div class="grid grid-cols-3 gap-4">
+        <UdpCard>
+          <template #header>
+            <div class="flex items-center gap-2">
+              <Icon name="mdi:code-tags" class="text-primary" />
+              <span>前端框架</span>
+            </div>
+          </template>
+          <div class="space-y-3">
+            <div
+              v-for="item in cardData"
+              :key="item.title"
+              class="flex items-center gap-3 p-2 rounded hover:bg-gray-50"
+            >
+              <Icon :name="item.icon" :size="24" :style="{ color: item.color }" />
+              <div class="flex-1">
+                <div class="font-medium">{{ item.title }}</div>
+                <div class="text-xs text-gray-500">{{ item.stats }}</div>
+              </div>
+            </div>
+          </div>
+          <template #footer>
+            <UdpButton type="primary" text>查看更多</UdpButton>
+          </template>
+        </UdpCard>
+
+        <UdpCard>
+          <div class="flex flex-col items-center text-center">
+            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-3">
+              <Icon name="mdi:rocket-launch" class="text-primary text-2xl" />
+            </div>
+            <h4 class="m-0 mb-2 font-semibold">快速开始</h4>
+            <p class="m-0 text-sm text-gray-600 mb-4">
+              选择一个框架开始您的项目
+            </p>
+            <UdpButton type="primary" size="small">立即开始</UdpButton>
+          </div>
+        </UdpCard>
+
+        <UdpCard>
+          <div class="space-y-4">
+            <div>
+              <h4 class="m-0 mb-2 font-semibold">统计信息</h4>
+              <div class="grid grid-cols-2 gap-2">
+                <div class="text-center p-2 bg-gray-50 rounded">
+                  <div class="text-xl font-bold text-primary">100</div>
+                  <div class="text-xs text-gray-500">项目数</div>
+                </div>
+                <div class="text-center p-2 bg-gray-50 rounded">
+                  <div class="text-xl font-bold text-green-500">50</div>
+                  <div class="text-xs text-gray-500">已完成</div>
+                </div>
+              </div>
+            </div>
+            <div>
+              <h4 class="m-0 mb-2 font-semibold">快捷操作</h4>
+              <div class="flex gap-2">
+                <UdpButton size="small" type="primary">新建</UdpButton>
+                <UdpButton size="small">导入</UdpButton>
+              </div>
+            </div>
+          </div>
+        </UdpCard>
+      </div>
+    </div>
+  </div>
+</template>

package/src/views/demo-case/carousel/index.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// 基础轮播
+const activeIndex = ref(0);
+const images = ref([
+  'https://picsum.photos/800/400?random=1',
+  'https://picsum.photos/800/400?random=2',
+  'https://picsum.photos/800/400?random=3'
+]);
+
+// 指示器位置
+const indicatorPositions = ['outside', 'none', 'inside'] as const;
+
+// 轮播方向
+const directions = ['horizontal', 'vertical'] as const;
+
+// 自动切换
+const autoplay = ref(true);
+
+// 循环
+const loop = ref(true);
+
+// 切换事件
+const handleChange = (index: number) => {
+  console.log('切换到:', index);
+};
+</script>
+
+<template>
+  <div class="p-6 bg-background w-full h-full overflow-auto rounded-md">
+    <!-- 标题区域 -->
+    <div class="mb-6">
+      <h2 class="m-0 mb-2 text-2xl font-semibold text-[hsl(var(--foreground))]">
+        走马灯组件
+      </h2>
+      <p class="m-0 text-sm text-[hsl(var(--foreground-secondary))]">
+        基于 Element Plus 的走马灯组件，展示基础轮播、指示器位置、切换方向等功能
+      </p>
+    </div>
+
+    <!-- 区域1：基础轮播 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        基础轮播
+      </h3>
+      <el-carousel v-model:active-index="activeIndex" height="300px" class="w-full" @change="handleChange">
+        <el-carousel-item v-for="(img, index) in images" :key="index">
+          <img :src="img" class="w-full h-full object-cover rounded-lg" alt="carousel" />
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+
+    <!-- 区域2：指示器位置 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        指示器位置
+      </h3>
+      <div class="flex gap-4 flex-wrap items-center">
+        <div class="w-80 flex-shrink-0">
+          <p class="text-sm mb-2">外部指示器</p>
+          <el-carousel indicator-position="outside" height="200px" class="w-full">
+            <el-carousel-item v-for="i in 3" :key="i">
+              <div class="w-full h-full bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center">
+                <span class="text-white text-2xl font-bold">{{ i }}</span>
+              </div>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+        <div class="w-80 flex-shrink-0">
+          <p class="text-sm mb-2">无指示器</p>
+          <el-carousel indicator-position="none" height="200px" class="w-full">
+            <el-carousel-item v-for="i in 3" :key="i">
+              <div class="w-full h-full bg-gradient-to-r from-green-400 to-green-600 flex items-center justify-center">
+                <span class="text-white text-2xl font-bold">{{ i }}</span>
+              </div>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+        <div class="w-80 flex-shrink-0">
+          <p class="text-sm mb-2">内部指示器</p>
+          <el-carousel indicator-position="inside" height="200px" class="w-full">
+            <el-carousel-item v-for="i in 3" :key="i">
+              <div class="w-full h-full bg-gradient-to-r from-purple-400 to-purple-600 flex items-center justify-center">
+                <span class="text-white text-2xl font-bold">{{ i }}</span>
+              </div>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域3：垂直方向 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        垂直方向
+      </h3>
+      <div class="flex gap-4 flex-wrap items-center">
+        <div class="w-full flex-shrink-0">
+          <el-carousel direction="vertical" height="320px" class="w-full">
+            <el-carousel-item v-for="i in 3" :key="i">
+              <div class="w-full h-full bg-gradient-to-b from-orange-400 to-red-500 flex items-center justify-center">
+                <span class="text-white text-2xl font-bold">{{ i }}</span>
+              </div>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域4：自定义切换箭头 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        自定义切换箭头
+      </h3>
+      <el-carousel height="200px" :autoplay="false" arrow="always" class="w-full">
+        <template #prev="{ onClick }">
+          <button @click="onClick" class="absolute left-2 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-2 shadow-lg">
+            ←
+          </button>
+        </template>
+        <template #next="{ onClick }">
+          <button @click="onClick" class="absolute right-2 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-2 shadow-lg">
+            →
+          </button>
+        </template>
+        <el-carousel-item v-for="i in 3" :key="i">
+          <div class="w-full h-full bg-gradient-to-r from-cyan-400 to-blue-500 flex items-center justify-center">
+            <span class="text-white text-2xl font-bold">{{ i }}</span>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+
+    <!-- 区域5：卡片模式 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        卡片模式
+      </h3>
+      <el-carousel :interval="4000" type="card" height="200px" class="w-full">
+        <el-carousel-item v-for="i in 6" :key="i">
+          <div class="w-full h-full bg-gradient-to-br from-pink-400 to-purple-600 flex items-center justify-center rounded-lg">
+            <span class="text-white text-3xl font-bold">{{ i }}</span>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+  </div>
+</template>

package/src/views/demo-case/cascader/index.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { UdpCascader } from '@udp/ui';
+
+// 级联选择器数据
+const cascaderOptions = [
+  {
+    value: 'guide',
+    label: '指南',
+    children: [
+      {
+        value: 'disciplines',
+        label: '学科',
+        children: [
+          { value: 'consistency', label: '一致性' },
+          { value: 'feedback', label: '反馈' },
+          { value: 'efficiency', label: '效率' },
+          { value: 'controllability', label: '可控性' },
+        ],
+      },
+      {
+        value: 'navigation',
+        label: '导航',
+        children: [
+          { value: 'side-nav', label: '侧边导航' },
+          { value: 'top-nav', label: '顶部导航' },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'component',
+    label: '组件',
+    children: [
+      {
+        value: 'basic',
+        label: '基础组件',
+        children: [
+          { value: 'layout', label: 'Layout 布局' },
+          { value: 'color', label: 'Color 色彩' },
+          { value: 'typography', label: 'Typography 字体' },
+          { value: 'border', label: 'Border 边框' },
+          { value: 'button', label: 'Button 按钮' },
+        ],
+      },
+      {
+        value: 'form',
+        label: '表单组件',
+        children: [
+          { value: 'radio', label: 'Radio 单选框' },
+          { value: 'checkbox', label: 'Checkbox 多选框' },
+          { value: 'input', label: 'Input 输入框' },
+          { value: 'select', label: 'Select 选择器' },
+          { value: 'cascader', label: 'Cascader 级联选择器' },
+        ],
+      },
+      {
+        value: 'data',
+        label: '数据展示',
+        children: [
+          { value: 'table', label: 'Table 表格' },
+          { value: 'tag', label: 'Tag 标签' },
+          { value: 'progress', label: 'Progress 进度条' },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'resource',
+    label: '资源',
+    children: [
+      { value: 'axure', label: 'Axure 组件' },
+      { value: 'sketch', label: 'Sketch 组件' },
+      { value: 'figma', label: 'Figma 组件' },
+    ],
+  },
+];
+
+// 区域1：基础用法 - 点击触发
+const clickValue = ref<string[]>([]);
+// 区域1：基础用法 - 悬浮触发
+const hoverValue = ref<string[]>([]);
+
+// 区域2：有禁用选项
+const disabledOptionValue = ref<string[]>([]);
+// 禁用部分选项的数据
+const optionsWithDisabled = [
+  {
+    value: 'guide',
+    label: '指南',
+    children: [
+      {
+        value: 'disciplines',
+        label: '学科',
+        disabled: true,
+        children: [
+          { value: 'consistency', label: '一致性' },
+          { value: 'feedback', label: '反馈' },
+        ],
+      },
+      {
+        value: 'navigation',
+        label: '导航',
+        children: [
+          { value: 'side-nav', label: '侧边导航' },
+          { value: 'top-nav', label: '顶部导航', disabled: true },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'component',
+    label: '组件',
+    disabled: true,
+    children: [
+      { value: 'basic', label: '基础组件' },
+      { value: 'form', label: '表单组件' },
+    ],
+  },
+  {
+    value: 'resource',
+    label: '资源',
+    children: [
+      { value: 'axure', label: 'Axure 组件' },
+      { value: 'sketch', label: 'Sketch 组件' },
+    ],
+  },
+];
+
+// 区域3：可清空
+const clearableValue = ref<string[]>(['guide', 'disciplines', 'consistency']);
+
+// 区域4：可多选
+const multipleValue = ref<string[][]>([]);
+</script>
+
+<template>
+  <div class="p-6 bg-background w-full h-full overflow-auto rounded-md">
+    <!-- 标题区域 -->
+    <div class="mb-6">
+      <h2 class="m-0 mb-2 text-2xl font-semibold text-[hsl(var(--foreground))]">
+        Cascader 级联选择器 (UDP UI)
+      </h2>
+      <p class="m-0 text-sm text-[hsl(var(--foreground-regular))]">
+        当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
+      </p>
+    </div>
+
+    <!-- 区域1：基础用法 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))]
+                 border-l-[3px] border-l-primary pl-3">
+        基础用法
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-regular))]">
+        有两种触发子菜单的方式，可通过点击或悬停来触发下一层级菜单
+      </p>
+      <div class="flex gap-6 flex-wrap items-center">
+        <div class="flex flex-col gap-2">
+          <span class="text-xs text-[hsl(var(--foreground-regular))]">点击触发：</span>
+          <UdpCascader
+            v-model="clickValue"
+            :options="cascaderOptions"
+            placeholder="请选择"
+            class="w-60"
+          />
+        </div>
+        <div class="flex flex-col gap-2">
+          <span class="text-xs text-[hsl(var(--foreground-regular))]">悬浮触发：</span>
+          <UdpCascader
+            v-model="hoverValue"
+            :options="cascaderOptions"
+            :props="{ expandTrigger: 'hover' }"
+            placeholder="请选择"
+            class="w-60"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域2：有禁用选项 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))]
+                 border-l-[3px] border-l-primary pl-3">
+        有禁用选项
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-regular))]">
+        存在部分选项不可选。
+      </p>
+      <div class="flex gap-6 flex-wrap items-center">
+        <UdpCascader
+          v-model="disabledOptionValue"
+          :options="optionsWithDisabled"
+          placeholder="请选择"
+          class="w-60"
+        />
+      </div>
+    </div>
+
+    <!-- 区域3：可清空 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))]
+                 border-l-[3px] border-l-primary pl-3">
+        可清空
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-regular))]">
+        选择完可通过删除按钮清空选项。
+      </p>
+      <div class="flex gap-6 flex-wrap items-center">
+        <UdpCascader
+          v-model="clearableValue"
+          :options="cascaderOptions"
+          placeholder="请选择"
+          clearable
+          class="w-60"
+        />
+      </div>
+    </div>
+
+    <!-- 区域4：可多选 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))]
+                 border-l-[3px] border-l-primary pl-3">
+        可多选
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-regular))]">
+        选择完可通过删除按钮清空选项。
+      </p>
+      <div class="flex gap-6 flex-wrap items-center">
+        <UdpCascader
+          v-model="multipleValue"
+          :options="cascaderOptions"
+          :props="{ multiple: true }"
+          placeholder="请选择"
+          clearable
+          collapse-tags
+          collapse-tags-tooltip
+          class="w-80"
+        />
+      </div>
+    </div>
+  </div>
+</template>