yg-yygl 0.0.1

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

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// 加载状态
+const loading = ref(true);
+
+const toggleLoading = () => {
+  loading.value = !loading.value;
+};
+
+// 模拟数据加载
+const cardLoading = ref(true);
+
+// 列表骨架屏
+const listLoading = 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))]">
+        Skeleton 骨架屏
+      </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="flex gap-6 flex-wrap items-center">
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">默认</h4>
+          <ElSkeleton :rows="5" animated />
+        </div>
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">动态效果</h4>
+          <ElSkeleton :rows="5" animated :loading="loading" />
+        </div>
+      </div>
+      <div class="mt-4">
+        <ElButton @click="toggleLoading">
+          {{ loading ? '停止' : '开始' }}加载
+        </ElButton>
+      </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="space-y-4">
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">3 行</h4>
+          <ElSkeleton :rows="3" animated />
+        </div>
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">带动画</h4>
+          <ElSkeleton :rows="4" animated :throttle="500" />
+        </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>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        加载完成后显示实际内容
+      </p>
+      <ElSkeleton :loading="cardLoading" animated>
+        <template #template>
+          <ElSkeletonItem variant="image" style="width: 240px; height: 160px" />
+          <div class="mt-4 space-y-2">
+            <ElSkeletonItem variant="h3" style="width: 50%" />
+            <ElSkeletonItem variant="text" />
+            <ElSkeletonItem variant="text" style="width: 70%" />
+          </div>
+        </template>
+        <template #default>
+          <div class="flex gap-6">
+            <img
+              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+              alt="示例图片"
+              class="w-60 h-40 object-cover rounded"
+            />
+            <div>
+              <h4 class="m-0 mb-2 text-lg font-semibold">翼构统一开发平台</h4>
+              <p class="m-0 text-sm text-gray-600">
+                这是一个统一的前端开发平台，提供完整的开发工具链和组件库。
+              </p>
+              <div class="mt-3">
+                <ElButton type="primary" size="small">查看详情</ElButton>
+                <ElButton size="small" @click="cardLoading = true">重新加载</ElButton>
+              </div>
+            </div>
+          </div>
+        </template>
+      </ElSkeleton>
+    </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))]">
+        使用不同的骨架屏变体
+      </p>
+      <div class="space-y-4">
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">文本</h4>
+          <ElSkeleton animated>
+            <template #template>
+              <ElSkeletonItem variant="text" style="width: 100%" />
+              <ElSkeletonItem variant="text" style="width: 80%" />
+              <ElSkeletonItem variant="text" style="width: 60%" />
+            </template>
+          </ElSkeleton>
+        </div>
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">标题</h4>
+          <ElSkeleton animated>
+            <template #template>
+              <ElSkeletonItem variant="h1" style="width: 40%" />
+              <ElSkeletonItem variant="p" style="width: 100%; margin-top: 10px" />
+              <ElSkeletonItem variant="p" style="width: 70%" />
+            </template>
+          </ElSkeleton>
+        </div>
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">图片</h4>
+          <ElSkeleton animated>
+            <template #template>
+              <ElSkeletonItem variant="image" style="width: 200px; height: 150px" />
+            </template>
+          </ElSkeleton>
+        </div>
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">按钮</h4>
+          <ElSkeleton animated>
+            <template #template>
+              <ElSkeletonItem variant="button" style="width: 100px; height: 32px" />
+              <ElSkeletonItem variant="button" style="width: 100px; height: 32px; margin-left: 10px" />
+            </template>
+          </ElSkeleton>
+        </div>
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">输入框</h4>
+          <ElSkeleton animated>
+            <template #template>
+              <ElSkeletonItem variant="text" style="width: 100px" />
+              <ElSkeletonItem variant="rect" style="width: 300px; height: 32px; margin-top: 10px" />
+            </template>
+          </ElSkeleton>
+        </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>
+      <ElSkeleton :loading="listLoading" animated :count="3">
+        <template #template>
+          <div v-for="i in 3" :key="i" class="flex gap-4 mb-4">
+            <ElSkeletonItem variant="circle" style="width: 50px; height: 50px" />
+            <div class="flex-1">
+              <ElSkeletonItem variant="h3" style="width: 30%" />
+              <ElSkeletonItem variant="text" style="width: 80%; margin-top: 8px" />
+              <ElSkeletonItem variant="text" style="width: 60%; margin-top: 8px" />
+            </div>
+          </div>
+        </template>
+        <template #default>
+          <div v-for="i in 3" :key="i" class="flex gap-4 mb-4 pb-4 border-b">
+            <ElAvatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
+            <div class="flex-1">
+              <h4 class="m-0 mb-1 font-semibold">用户 {{ i }}</h4>
+              <p class="m-0 text-sm text-gray-600">这是用户的简介信息，描述了用户的基本情况。</p>
+              <p class="m-0 text-xs text-gray-400 mt-1">2024-01-{{ 10 + i }}</p>
+            </div>
+          </div>
+          <ElButton size="small" @click="listLoading = true">重新加载</ElButton>
+        </template>
+      </ElSkeleton>
+    </div>
+  </div>
+</template>

package/dist/views/demo-case/skeleton/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/slider/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/slider/index.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const value1 = ref(0);
+const value2 = ref(0);
+const value3 = ref(0);
+const value4 = ref(0);
+const value5 = ref([30, 60]);
+const value6 = ref([30, 60]);
+const value7 = ref(0);
+const value8 = ref(0);
+const value9 = ref(0);
+const value10 = ref(0);
+
+const formatTooltip = (val: number) => {
+  return val / 100;
+};
+</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))]">
+        Slider 滑块 (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="flex flex-col gap-6">
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-12">默认</span>
+          <UdpSlider v-model="value1" class="flex-1" />
+        </div>
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-12">自定义初始值</span>
+          <UdpSlider v-model="value2" class="flex-1" />
+        </div>
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-12">隐藏 Tooltip</span>
+          <UdpSlider v-model="value3" :show-tooltip="false" class="flex-1" />
+        </div>
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-12">格式化 Tooltip</span>
+          <UdpSlider v-model="value4" :format-tooltip="formatTooltip" class="flex-1" />
+        </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-secondary))]">选项可以是离散的。</p>
+      <div class="flex flex-col gap-6">
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-12">不显示间断点</span>
+          <UdpSlider v-model="value5" :step="10" class="flex-1" />
+        </div>
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-12">显示间断点</span>
+          <UdpSlider v-model="value6" :step="10" show-stops class="flex-1" />
+        </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>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">通过输入框可以精确控制数值。</p>
+      <div class="flex flex-col gap-4">
+        <UdpSlider v-model="value7" show-input />
+        <UdpSlider v-model="value8" show-input :min="0" :max="100" />
+      </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))]">支持选择某一数值范围。</p>
+      <div class="flex flex-col gap-6">
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-12">默认</span>
+          <UdpSlider v-model="value5" range class="flex-1" />
+        </div>
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-12">显示间断点</span>
+          <UdpSlider v-model="value6" range :step="10" show-stops class="flex-1" />
+        </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-primary pl-3">
+        竖向模式
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">只需要添加 height 属性即可。</p>
+      <div class="flex gap-12 h-48">
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-sm">默认</span>
+          <UdpSlider v-model="value7" vertical height="200px" />
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-sm">显示间断点</span>
+          <UdpSlider v-model="value8" vertical height="200px" :step="10" show-stops />
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-sm">范围选择</span>
+          <UdpSlider v-model="value5" range vertical height="200px" />
+        </div>
+      </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-primary pl-3">
+        带有图标
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">可以在滑块两侧添加图标。</p>
+      <div class="flex items-center gap-4">
+        <span>0</span>
+        <UdpSlider v-model="value9" class="flex-1" />
+        <span>100</span>
+      </div>
+    </div>
+
+    <!-- 区域7：限制范围 -->
+    <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))]">可以通过 min 和 max 属性限制滑块的范围。</p>
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-24">0-100 (默认)</span>
+          <UdpSlider v-model="value7" class="flex-1" />
+        </div>
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-24">50-500</span>
+          <UdpSlider v-model="value8" :min="50" :max="500" class="flex-1" />
+        </div>
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-24">0-1 (0.1步长)</span>
+          <UdpSlider v-model="value10" :min="0" :max="1" :step="0.1" class="flex-1" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域8：禁用状态 -->
+    <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>
+      <UdpSlider v-model="value9" disabled class="w-full" />
+    </div>
+  </div>
+</template>

package/dist/views/demo-case/slider/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/statistic/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/statistic/index.vue

@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { Edit, CaretTop, CaretBottom } from '@element-plus/icons-vue';
+
+// ============ 基础用法数据 ============
+const totalUsers = ref(268500);
+const totalRevenue = ref(138100);
+const totalTransaction = ref(172000);
+const newCount = ref(562);
+
+// ============ 倒计时数据 ============
+const startTime = ref(0); // 开始时间（秒）
+const remainingTime = ref(170795); // 剩余时间（秒）
+const endTimeDays = ref(21); // 剩余天数
+const endTimeHours = ref(6); // 剩余小时
+const endTimeMinutes = ref(41); // 剩余分钟
+const endTimeSeconds = ref(33); // 剩余秒
+
+let timerInterval: number | null = null;
+
+// 格式化时间为 HH:MM:SS
+const formatTime = (seconds: number) => {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = seconds % 60;
+  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+};
+
+// 计算显示的时间
+const displayStartTime = computed(() => formatTime(startTime.value));
+const displayRemainingTime = computed(() => formatTime(remainingTime.value));
+
+// 倒计时结束时间显示
+const displayEndTime = computed(() => {
+  return `${endTimeDays.value} Days ${String(endTimeHours.value).padStart(2, '0')}:${String(endTimeMinutes.value).padStart(2, '0')}:${String(endTimeSeconds.value).padStart(2, '0')}`;
+});
+
+// 启动倒计时
+const startCountdown = () => {
+  if (timerInterval) return;
+
+  timerInterval = setInterval(() => {
+    // 开始时间累加
+    startTime.value++;
+
+    // 剩余时间递减
+    if (remainingTime.value > 0) {
+      remainingTime.value--;
+    }
+
+    // 结束时间递减
+    if (endTimeSeconds.value > 0) {
+      endTimeSeconds.value--;
+    } else {
+      if (endTimeMinutes.value > 0) {
+        endTimeMinutes.value--;
+        endTimeSeconds.value = 59;
+      } else {
+        if (endTimeHours.value > 0) {
+          endTimeHours.value--;
+          endTimeMinutes.value = 59;
+          endTimeSeconds.value = 59;
+        } else {
+          if (endTimeDays.value > 0) {
+            endTimeDays.value--;
+            endTimeHours.value = 23;
+            endTimeMinutes.value = 59;
+            endTimeSeconds.value = 59;
+          }
+        }
+      }
+    }
+  }, 1000) as unknown as number;
+};
+
+// 重置倒计时
+const resetCountdown = () => {
+  startTime.value = 0;
+  remainingTime.value = 170795;
+  endTimeDays.value = 21;
+  endTimeHours.value = 6;
+  endTimeMinutes.value = 41;
+  endTimeSeconds.value = 33;
+};
+
+onMounted(() => {
+  startCountdown();
+});
+
+onUnmounted(() => {
+  if (timerInterval) {
+    clearInterval(timerInterval);
+  }
+});
+
+// ============ 统计卡片数据 ============
+const dailyActiveUsers = ref(98500);
+const weeklyActiveUsers = ref(693700);
+const todayNewOrders = ref(72000);
+
+// 趋势数据
+const dailyTrend = ref({ value: 12.5, isUp: true });
+const weeklyTrend = ref({ value: 8.3, isUp: false });
+const ordersTrend = ref({ value: 15.2, isUp: 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))]">
+        统计数值组件
+      </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>
+      <p class="m-0 mb-4 text-sm text-gray-500">
+        用不同类型卡片或基础组件，如统计标题、数值、趋势等，数据可配置前后可以加前缀、单位等元素。
+      </p>
+      <div class="grid grid-cols-4 gap-4">
+        <div class="p-4 border border-gray-200 rounded-lg bg-white">
+          <el-statistic title="总注册用户数" :value="totalUsers" />
+        </div>
+        <div class="p-4 border border-gray-200 rounded-lg bg-white">
+          <el-statistic title="累计收益" :value="138100" />
+        </div>
+        <div class="p-4 border border-gray-200 rounded-lg bg-white">
+          <el-statistic title="总交易额" :value="totalTransaction" />
+        </div>
+        <div class="p-4 border border-gray-200 rounded-lg bg-white">
+          <el-statistic title="新增数量" :value="newCount">
+            <template #suffix>
+              <el-icon class="ml-1"><Edit /></el-icon>
+            </template>
+          </el-statistic>
+        </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="m-0 mb-4 text-sm text-gray-500">
+        倒计时组件，支持配置倒计时组件类型。
+      </p>
+      <div class="grid grid-cols-3 gap-4 mb-6">
+        <div class="p-4 border border-gray-200 rounded-lg bg-white">
+          <div class="text-sm text-gray-500 mb-2">开始时间</div>
+          <div class="text-2xl font-semibold font-mono">{{ displayStartTime }}</div>
+        </div>
+        <div class="p-4 border border-gray-200 rounded-lg bg-white">
+          <div class="text-sm text-gray-500 mb-2">剩余时间</div>
+          <div class="text-2xl font-semibold font-mono">{{ displayRemainingTime }}</div>
+        </div>
+        <div class="p-4 border border-gray-200 rounded-lg bg-white">
+          <div class="text-sm text-gray-500 mb-2">距离结束</div>
+          <div class="text-xl font-semibold font-mono">{{ displayEndTime }}</div>
+        </div>
+      </div>
+      <div class="flex justify-center">
+        <el-button type="primary" @click="resetCountdown">重置</el-button>
+      </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="m-0 mb-4 text-sm text-gray-500">
+        卡片式展示数据，可配置趋势等
+      </p>
+      <div class="grid grid-cols-3 gap-4">
+        <!-- 日活跃用户数 -->
+        <div class="p-4 border border-gray-200 rounded-lg bg-white">
+          <el-statistic title="日活跃用户数" :value="dailyActiveUsers">
+            <template #suffix>
+              <div class="flex items-center ml-2">
+                <span class="text-xs mr-1">较昨天</span>
+                <span class="text-xs text-green-600">增长</span>
+                <el-icon class="text-green-600 ml-1"><CaretTop /></el-icon>
+              </div>
+            </template>
+          </el-statistic>
+        </div>
+
+        <!-- 周活跃用户 -->
+        <div class="p-4 border border-gray-200 rounded-lg bg-white">
+          <el-statistic title="周活跃用户" :value="weeklyActiveUsers">
+            <template #suffix>
+              <div class="flex items-center ml-2">
+                <span class="text-xs mr-1">较上周</span>
+                <span class="text-xs text-red-600">下降</span>
+                <el-icon class="text-red-600 ml-1"><CaretBottom /></el-icon>
+              </div>
+            </template>
+          </el-statistic>
+        </div>
+
+        <!-- 今日新增订单 -->
+        <div class="p-4 border border-gray-200 rounded-lg bg-white">
+          <el-statistic title="今日新增订单" :value="todayNewOrders">
+            <template #suffix>
+              <div class="flex items-center ml-2">
+                <span class="text-xs mr-1">较昨天</span>
+                <span class="text-xs text-green-600">增长</span>
+                <el-icon class="text-green-600 ml-1"><CaretTop /></el-icon>
+              </div>
+            </template>
+          </el-statistic>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 统计卡片样式优化 */
+:deep(.el-statistic) {
+  width: 100%;
+}
+
+:deep(.el-statistic__head) {
+  font-size: 14px;
+  color: #909399;
+  margin-bottom: 8px;
+}
+
+:deep(.el-statistic__content) {
+  font-size: 24px;
+  font-weight: 600;
+  color: #303133;
+}
+
+/* 倒计时数字等宽显示 */
+:deep(.el-statistic__content .el-statistic__number) {
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;
+}
+</style>

package/dist/views/demo-case/statistic/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/steps/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;