yg-yygl 0.0.1

package/dist/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>

package/dist/views/demo-case/cascader/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/demo-case/checkbox/index.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/demo-case/checkbox/index.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { UdpCheckbox, UdpCheckboxButton, UdpCheckboxGroup } from '@udp/ui';
+
+// 基础多选
+const baseOption1 = ref(false);
+const baseOption2 = ref(true);
+
+// 禁用状态
+const disabledUnchecked = ref(false);
+const disabledChecked = ref(true);
+
+// 多选框组
+const checkGroup = ref(['选项002', '选中且禁用']);
+
+// 包含全选 - 左侧（未全选状态）
+const selectAllOptions1 = ['选项001', '选项002', '选项003'];
+const selectedItems1 = ref<string[]>([]);
+const isSelectAll1 = computed({
+  get: () => selectedItems1.value.length === selectAllOptions1.length,
+  set: (val: boolean) => {
+    selectedItems1.value = val ? [...selectAllOptions1] : [];
+  },
+});
+const isIndeterminate1 = computed(() => {
+  const len = selectedItems1.value.length;
+  return len > 0 && len < selectAllOptions1.length;
+});
+
+// 包含全选 - 右侧（全选状态）
+const selectAllOptions2 = ['选项001', '选项002', '选项003'];
+const selectedItems2 = ref([...selectAllOptions2]);
+const isSelectAll2 = computed({
+  get: () => selectedItems2.value.length === selectAllOptions2.length,
+  set: (val: boolean) => {
+    selectedItems2.value = val ? [...selectAllOptions2] : [];
+  },
+});
+const isIndeterminate2 = computed(() => {
+  const len = selectedItems2.value.length;
+  return len > 0 && len < selectAllOptions2.length;
+});
+
+// 按钮样式多选 - 不同尺寸
+const buttonGroupLarge = ref(['上海']);
+const buttonGroupDefault = ref(['上海']);
+const buttonGroupSmall = ref(['上海']);
+const buttonGroupMini = ref([]);
+
+// 带边框多选 - 多组展示
+const borderedGroup1 = ref(['选项002']);
+const borderedGroup2 = ref(['选项002']);
+const borderedGroup3 = ref(['选项001']);
+const borderedGroup4 = ref([]);
+</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))]">
+        Checkbox 多选框
+      </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-[#2270EF] pl-3">
+        基础多选
+      </h3>
+      <p class="m-0 mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        单独使用可以表示两种状态之间的切换。
+      </p>
+      <div class="flex gap-5">
+        <UdpCheckbox v-model="baseOption1">选项001</UdpCheckbox>
+        <UdpCheckbox v-model="baseOption2">选项002</UdpCheckbox>
+      </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-[#2270EF] pl-3">
+        禁用状态
+      </h3>
+      <p class="m-0 mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        多选不可用状态。
+      </p>
+      <div class="flex gap-5">
+        <UdpCheckbox v-model="disabledUnchecked" disabled>选项001</UdpCheckbox>
+        <UdpCheckbox v-model="disabledChecked" disabled>选项002</UdpCheckbox>
+      </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-[#2270EF] pl-3">
+        多选框组
+      </h3>
+      <p class="m-0 mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
+      </p>
+      <UdpCheckboxGroup v-model="checkGroup">
+        <UdpCheckbox value="选项001" label="选项001" />
+        <UdpCheckbox value="选项002" label="选项002" />
+        <UdpCheckbox value="选项003" label="选项003" />
+        <UdpCheckbox value="禁用" label="禁用" disabled />
+        <UdpCheckbox value="选中且禁用" label="选中且禁用" disabled />
+      </UdpCheckboxGroup>
+    </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-[#2270EF] pl-3">
+        包含全选
+      </h3>
+      <p class="m-0 mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        点击全选选中所有选项。
+      </p>
+      <div class="flex gap-10">
+        <!-- 左侧：未全选状态 -->
+        <div class="flex flex-col gap-3">
+          <UdpCheckbox
+            v-model="isSelectAll1"
+            :indeterminate="isIndeterminate1"
+          >
+            全选
+          </UdpCheckbox>
+          <UdpCheckboxGroup v-model="selectedItems1">
+            <UdpCheckbox
+              v-for="item in selectAllOptions1"
+              :key="item"
+              :value="item"
+              :label="item"
+            />
+          </UdpCheckboxGroup>
+        </div>
+        <!-- 右侧：全选状态 -->
+        <div class="flex flex-col gap-3">
+          <UdpCheckbox
+            v-model="isSelectAll2"
+            :indeterminate="isIndeterminate2"
+          >
+            全选
+          </UdpCheckbox>
+          <UdpCheckboxGroup v-model="selectedItems2">
+            <UdpCheckbox
+              v-for="item in selectAllOptions2"
+              :key="item"
+              :value="item"
+              :label="item"
+            />
+          </UdpCheckboxGroup>
+        </div>
+      </div>
+    </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-[#2270EF] pl-3">
+        按钮样式多选
+      </h3>
+      <p class="m-0 mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        按钮样式的多选组合。
+      </p>
+      <div class="flex flex-col gap-3">
+        <!-- 大尺寸 -->
+        <UdpCheckboxGroup v-model="buttonGroupLarge" size="large">
+          <UdpCheckboxButton value="上海" label="上海" border />
+          <UdpCheckboxButton value="北京" label="北京" border />
+          <UdpCheckboxButton value="广州" label="广州" border />
+          <UdpCheckboxButton value="深圳" label="深圳" border />
+        </UdpCheckboxGroup>
+        <!-- 默认尺寸 -->
+        <UdpCheckboxGroup v-model="buttonGroupDefault">
+          <UdpCheckboxButton value="上海" label="上海" border />
+          <UdpCheckboxButton value="北京" label="北京" border />
+          <UdpCheckboxButton value="广州" label="广州" border />
+          <UdpCheckboxButton value="深圳" label="深圳" border />
+        </UdpCheckboxGroup>
+        <!-- 小尺寸 - 选中状态 -->
+        <UdpCheckboxGroup v-model="buttonGroupSmall" size="small">
+          <UdpCheckboxButton value="上海" label="上海" border />
+          <UdpCheckboxButton value="北京" label="北京" border />
+          <UdpCheckboxButton value="广州" label="广州" border />
+          <UdpCheckboxButton value="深圳" label="深圳" border />
+        </UdpCheckboxGroup>
+        <!-- 小尺寸 - 未选中状态 -->
+        <UdpCheckboxGroup v-model="buttonGroupMini" size="small" disabled>
+          <UdpCheckboxButton value="上海" label="上海" border />
+          <UdpCheckboxButton value="北京" label="北京" border />
+          <UdpCheckboxButton value="广州" label="广州" border />
+          <UdpCheckboxButton value="深圳" label="深圳" border />
+        </UdpCheckboxGroup>
+      </div>
+    </div>
+
+    <!-- 区块6：带边框多选 -->
+    <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-[#2270EF] pl-3">
+        带边框多选
+      </h3>
+      <p class="m-0 mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        一般选项较多、较复杂时使用。
+      </p>
+      <div class="flex flex-col gap-3">
+        <!-- 组1：大尺寸 -->
+        <UdpCheckboxGroup v-model="borderedGroup1" size="large">
+          <UdpCheckbox value="选项001" label="选项001" border />
+          <UdpCheckbox value="选项002" label="选项002" border />
+          <UdpCheckbox value="选项003" label="选项003" border />
+        </UdpCheckboxGroup>
+        <!-- 组2：默认尺寸 -->
+        <UdpCheckboxGroup v-model="borderedGroup2">
+          <UdpCheckbox value="选项001" label="选项001" border />
+          <UdpCheckbox value="选项002" label="选项002" border />
+          <UdpCheckbox value="选项003" label="选项003" border />
+        </UdpCheckboxGroup>
+        <!-- 组3：小尺寸 - 选中状态 -->
+        <UdpCheckboxGroup v-model="borderedGroup3" size="small">
+          <UdpCheckbox value="选项001" label="选项001" border />
+          <UdpCheckbox value="选项002" label="选项002" border />
+          <UdpCheckbox value="选项003" label="选项003" border />
+        </UdpCheckboxGroup>
+        <!-- 组4：小尺寸 - 未选中状态 -->
+        <UdpCheckboxGroup v-model="borderedGroup4" size="small" disabled>
+          <UdpCheckbox value="选项001" label="选项001" border />
+          <UdpCheckbox value="选项002" label="选项002" border />
+          <UdpCheckbox value="选项003" label="选项003" border />
+        </UdpCheckboxGroup>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/views/demo-case/checkbox/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/demo-case/collapse/index.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/demo-case/collapse/index.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 基础折叠面板
+const activeNames = ref(['1']);
+
+// 手风琴模式
+const activeName = ref('1');
+
+// 嵌套面板
+const outerActive = ref(['1']);
+const innerActive = ref(['1-1']);
+
+// 自定义标题
+const customActive = ref(['1']);
+
+const handleChange = (active: string | string[]) => {
+  console.log('当前激活:', active);
+};
+
+const handleItemClick = (name: string) => {
+  ElMessage.success(`点击了: ${name}`);
+};
+</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>
+      <div class="w-full">
+        <el-collapse v-model="activeNames" @change="handleChange">
+          <el-collapse-item title="一致性 Consistency" name="1">
+            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+          </el-collapse-item>
+          <el-collapse-item title="反馈 Feedback" name="2">
+            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+          </el-collapse-item>
+          <el-collapse-item title="效率 Efficiency" name="3">
+            <div>简化流程：设计简洁直观的操作流程；</div>
+            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+          </el-collapse-item>
+        </el-collapse>
+      </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>
+      <div class="w-full">
+        <el-collapse v-model="activeName" accordion>
+          <el-collapse-item title="Vue.js" name="1">
+            <div>Vue.js 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。</div>
+          </el-collapse-item>
+          <el-collapse-item title="Element Plus" name="2">
+            <div>Element Plus 是一套基于 Vue 3.0 的桌面端组件库，提供了丰富的组件和工具。</div>
+          </el-collapse-item>
+          <el-collapse-item title="TypeScript" name="3">
+            <div>TypeScript 是 JavaScript 的超集，添加了类型系统和其他特性，帮助开发者编写更安全、更可靠的代码。</div>
+          </el-collapse-item>
+        </el-collapse>
+      </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="w-full">
+        <el-collapse v-model="customActive">
+          <el-collapse-item name="1">
+            <template #title>
+              <div class="flex items-center gap-2">
+                <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
+                <span class="font-medium">自定义标题 1</span>
+              </div>
+            </template>
+            <div>这是一段自定义标题的内容，可以添加图标、徽章等元素。</div>
+          </el-collapse-item>
+          <el-collapse-item name="2">
+            <template #title>
+              <div class="flex items-center gap-2">
+                <span class="w-2 h-2 bg-green-500 rounded-full"></span>
+                <span class="font-medium">自定义标题 2</span>
+                <el-tag size="small" type="success">推荐</el-tag>
+              </div>
+            </template>
+            <div>标题中可以包含任何自定义内容，比如标签、图标等。</div>
+          </el-collapse-item>
+          <el-collapse-item name="3">
+            <template #title>
+              <div class="flex items-center gap-2">
+                <span class="w-2 h-2 bg-orange-500 rounded-full"></span>
+                <span class="font-medium">自定义标题 3</span>
+                <el-tag size="small" type="warning">热门</el-tag>
+              </div>
+            </template>
+            <div>使用插槽可以完全自定义标题的样式和内容。</div>
+          </el-collapse-item>
+        </el-collapse>
+      </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>
+      <div class="w-full">
+        <el-collapse v-model="outerActive">
+          <el-collapse-item title="外层面板 1" name="1">
+            <el-collapse v-model="innerActive">
+              <el-collapse-item title="内层面板 1-1" name="1-1">
+                <div>这是内层面板的内容 1-1</div>
+              </el-collapse-item>
+              <el-collapse-item title="内层面板 1-2" name="1-2">
+                <div>这是内层面板的内容 1-2</div>
+              </el-collapse-item>
+            </el-collapse>
+          </el-collapse-item>
+          <el-collapse-item title="外层面板 2" name="2">
+            <div>外层面板 2 的内容</div>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+    </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>
+      <div class="w-full">
+        <el-collapse v-model="activeNames" :hide-arrow="true">
+          <el-collapse-item title="可以通过点击整个标题区域来切换" name="2">
+            <div>适合需要自定义样式的场景</div>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/views/demo-case/collapse/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/demo-case/color/index.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;