yg-yygl 0.0.1

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

@@ -0,0 +1,371 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// 进度条数值
+const percentage = ref(70);
+const customColor = ref('#409eff');
+
+// 动态进度
+const dynamicPercentage = ref(0);
+const isAnimating = ref(false);
+
+const startAnimation = () => {
+  if (isAnimating.value) return;
+  isAnimating.value = true;
+  dynamicPercentage.value = 0;
+
+  const timer = setInterval(() => {
+    dynamicPercentage.value += 1;
+    if (dynamicPercentage.value >= 100) {
+      clearInterval(timer);
+      isAnimating.value = false;
+    }
+  }, 50);
+};
+
+// 自定义颜色
+const customColors = [
+  { color: '#f56c6c', percentage: 20 },
+  { color: '#e6a23c', percentage: 40 },
+  { color: '#409eff', percentage: 60 },
+  { color: '#67c23a', percentage: 80 },
+];
+
+const getColor = (percentage: number) => {
+  for (const item of customColors) {
+    if (percentage <= item.percentage) {
+      return item.color;
+    }
+  }
+  return '#67c23a';
+};
+
+// 环形进度条数据
+const circlePercentage = ref([
+  { percentage: 80, color: '#409eff', status: '' },
+  { percentage: 100, color: '#67c23a', status: 'success' },
+  { percentage: 60, color: '#e6a23c', status: 'warning' },
+  { percentage: 40, color: '#f56c6c', status: 'exception' },
+]);
+
+// 仪表盘进度
+const dashboardPercentage = ref(75);
+</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))]">
+        Progress 进度条 (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="space-y-4">
+        <UdpProgress :percentage="0" />
+        <UdpProgress :percentage="30" />
+        <UdpProgress :percentage="50" />
+        <UdpProgress :percentage="70" />
+        <UdpProgress :percentage="100" />
+      </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="space-y-4">
+        <UdpProgress :percentage="50" :format="() => '50%'" />
+        <UdpProgress :percentage="100" :format="() => '完成'" />
+        <UdpProgress :percentage="75" :format="(percentage: number) => `${percentage} 天`" />
+      </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="space-y-4">
+        <UdpProgress :percentage="50" status="success">
+          <template #default="{ percentage }">
+            <span class="text-green-600">成功：{{ percentage }}%</span>
+          </template>
+        </UdpProgress>
+        <UdpProgress :percentage="60" status="warning" />
+        <UdpProgress :percentage="40" status="exception" />
+      </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))]">
+        使用 color 属性自定义进度条颜色
+      </p>
+      <div class="space-y-4">
+        <UdpProgress :percentage="percentage" color="#409eff" />
+        <UdpProgress :percentage="percentage" color="#67c23a" />
+        <UdpProgress :percentage="percentage" color="#e6a23c" />
+        <UdpProgress :percentage="percentage" color="#f56c6c" />
+        <UdpProgress :percentage="percentage" color="#8284FD" />
+        <UdpProgress :percentage="percentage" color="#F467C5" />
+      </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))]">
+        根据百分比动态变化颜色
+      </p>
+      <div class="space-y-4">
+        <UdpProgress
+          :percentage="percentage"
+          :color="customColors"
+        />
+        <UdpProgress
+          :percentage="30"
+          :color="[
+            { color: '#f56c6c', percentage: 20 },
+            { color: '#e6a23c', percentage: 40 },
+            { color: '#409eff', percentage: 60 },
+            { color: '#67c23a', percentage: 80 },
+          ]"
+        />
+      </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))]">
+        使用 type="circle" 属性展示环形进度条
+      </p>
+      <div class="flex gap-8 flex-wrap items-center">
+        <div class="text-center">
+          <UdpProgress type="circle" :percentage="0" />
+          <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">0%</p>
+        </div>
+        <div class="text-center">
+          <UdpProgress type="circle" :percentage="30" />
+          <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">30%</p>
+        </div>
+        <div class="text-center">
+          <UdpProgress type="circle" :percentage="70" />
+          <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">70%</p>
+        </div>
+        <div class="text-center">
+          <UdpProgress type="circle" :percentage="100" />
+          <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">100%</p>
+        </div>
+        <div class="text-center">
+          <UdpProgress type="circle" :percentage="70" status="success" />
+          <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">成功</p>
+        </div>
+        <div class="text-center">
+          <UdpProgress type="circle" :percentage="60" status="warning" />
+          <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">警告</p>
+        </div>
+        <div class="text-center">
+          <UdpProgress type="circle" :percentage="40" status="exception" />
+          <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">异常</p>
+        </div>
+      </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))]">
+        使用 type="dashboard" 属性展示仪表盘进度条
+      </p>
+      <div class="flex gap-8 flex-wrap items-center">
+        <div class="text-center">
+          <UdpProgress type="dashboard" :percentage="dashboardPercentage" />
+          <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">75%</p>
+        </div>
+        <div class="text-center">
+          <UdpProgress type="dashboard" :percentage="80" status="success" />
+          <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">成功</p>
+        </div>
+        <div class="text-center">
+          <UdpProgress type="dashboard" :percentage="60" status="warning" />
+          <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">警告</p>
+        </div>
+        <div class="text-center">
+          <UdpProgress type="dashboard" :percentage="40" status="exception" />
+          <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">异常</p>
+        </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))]">
+        使用 stroke-width 属性调整进度条粗细
+      </p>
+      <div class="space-y-4">
+        <div class="flex flex-col gap-2">
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">线性进度条粗细</h4>
+          <UdpProgress :percentage="50" :stroke-width="6" />
+          <UdpProgress :percentage="50" :stroke-width="12" />
+          <UdpProgress :percentage="50" :stroke-width="18" />
+          <UdpProgress :percentage="50" :stroke-width="24" />
+        </div>
+        <div class="flex gap-6 flex-wrap items-center mt-6">
+          <div class="text-center">
+            <UdpProgress type="circle" :percentage="50" :width="60" />
+            <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">60px</p>
+          </div>
+          <div class="text-center">
+            <UdpProgress type="circle" :percentage="50" :width="80" />
+            <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">80px</p>
+          </div>
+          <div class="text-center">
+            <UdpProgress type="circle" :percentage="50" :width="100" />
+            <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">100px</p>
+          </div>
+          <div class="text-center">
+            <UdpProgress type="circle" :percentage="50" :width="120" />
+            <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">120px</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域9：动态进度条 -->
+    <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>
+          <UdpButton type="primary" @click="startAnimation" :loading="isAnimating">
+            开始动画
+          </UdpButton>
+        </div>
+        <UdpProgress :percentage="dynamicPercentage" :color="getColor(dynamicPercentage)" />
+      </div>
+    </div>
+
+    <!-- 区域10：无文字提示 -->
+    <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))]">
+        使用 :show-text="false" 隐藏进度条文字
+      </p>
+      <div class="space-y-4">
+        <UdpProgress :percentage="50" :show-text="false" />
+        <UdpProgress :percentage="70" type="circle" :show-text="false" :width="80" />
+        <UdpProgress :percentage="60" type="dashboard" :show-text="false" :width="100" />
+      </div>
+    </div>
+
+    <!-- 区域11：实际应用场景 -->
+    <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="mb-6">
+        <h4 class="m-0 mb-3 text-sm font-medium text-[hsl(var(--foreground))]">文件上传</h4>
+        <div class="border rounded-lg p-4">
+          <div class="flex items-center gap-3 mb-2">
+            <span class="text-[hsl(var(--foreground))]">文件名.pdf</span>
+            <UdpTag size="small" type="primary">上传中</UdpTag>
+          </div>
+          <UdpProgress :percentage="65" :stroke-width="8" />
+        </div>
+      </div>
+
+      <!-- 任务完成度 -->
+      <div class="mb-6">
+        <h4 class="m-0 mb-3 text-sm font-medium text-[hsl(var(--foreground))]">任务完成度</h4>
+        <div class="flex gap-4 flex-wrap">
+          <div class="flex-1 min-w-[150px]">
+            <p class="text-sm text-[hsl(var(--foreground-secondary))] mb-2">设计阶段</p>
+            <UdpProgress :percentage="100" status="success" :stroke-width="10" />
+          </div>
+          <div class="flex-1 min-w-[150px]">
+            <p class="text-sm text-[hsl(var(--foreground-secondary))] mb-2">开发阶段</p>
+            <UdpProgress :percentage="75" :stroke-width="10" />
+          </div>
+          <div class="flex-1 min-w-[150px]">
+            <p class="text-sm text-[hsl(var(--foreground-secondary))] mb-2">测试阶段</p>
+            <UdpProgress :percentage="30" status="warning" :stroke-width="10" />
+          </div>
+        </div>
+      </div>
+
+      <!-- 数据统计 -->
+      <div>
+        <h4 class="m-0 mb-3 text-sm font-medium text-[hsl(var(--foreground))]">数据统计</h4>
+        <div class="flex gap-6 flex-wrap items-center">
+          <div class="text-center">
+            <UdpProgress type="circle" :percentage="85" :width="100">
+              <template #default="{ percentage }">
+                <span class="text-lg font-bold">{{ percentage }}%</span>
+              </template>
+            </UdpProgress>
+            <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">销售目标</p>
+          </div>
+          <div class="text-center">
+            <UdpProgress type="circle" :percentage="92" :width="100" color="#67c23a">
+              <template #default="{ percentage }">
+                <span class="text-lg font-bold">{{ percentage }}%</span>
+              </template>
+            </UdpProgress>
+            <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">客户满意度</p>
+          </div>
+          <div class="text-center">
+            <UdpProgress type="circle" :percentage="68" :width="100" color="#e6a23c">
+              <template #default="{ percentage }">
+                <span class="text-lg font-bold">{{ percentage }}%</span>
+              </template>
+            </UdpProgress>
+            <p class="mt-2 text-sm text-[hsl(var(--foreground-secondary))]">项目进度</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { UdpRadio, UdpRadioGroup, UdpRadioButton } from '@udp/ui';
+
+defineOptions({ name: 'RadioDemo' });
+
+// ========== 模块1: 基础单选 ==========
+const basicValue = ref('2');
+
+// ========== 模块2: 禁用状态 ==========
+const disabledValue = ref('1');
+
+// ========== 模块3: 带边框单选 ==========
+const borderedLargeValue = ref('2');
+const borderedDefaultValue = ref('2');
+const borderedSmallValue = ref('1');
+const borderedMiniValue = ref('2');
+
+// ========== 模块4: 单选按钮 ==========
+const buttonLargeValue = ref('1');
+const buttonDefaultValue = ref('1');
+const buttonSmallValue = ref('1');
+const buttonMiniValue = ref('');
+</script>
+
+<template>
+  <div class="bg-background h-full w-full overflow-auto rounded-md p-6">
+    <!-- 标题 -->
+    <div class="mb-6">
+      <h2 class="m-0 mb-2 text-2xl font-semibold text-[hsl(var(--foreground))]">
+        Radio 单选框
+      </h2>
+      <p class="m-0 text-sm text-[#666]">在一组备选项中进行单选。</p>
+    </div>
+
+    <!-- 模块1: 基础单选 -->
+    <div class="mb-6">
+      <h3 class="m-0 mb-2 text-lg font-semibold text-[#1a1a1a]">基础单选</h3>
+      <p class="m-0 mb-4 text-sm text-[#999]">
+        由于选项默认可见，不宜过多，若选项过多，建议使用选择器。
+      </p>
+      <UdpRadioGroup v-model="basicValue">
+        <UdpRadio value="1">选项001</UdpRadio>
+        <UdpRadio value="2">选项002</UdpRadio>
+        <UdpRadio value="3">选项003</UdpRadio>
+      </UdpRadioGroup>
+    </div>
+
+    <!-- 模块2: 禁用状态 -->
+    <div class="mb-6">
+      <h3 class="m-0 mb-2 text-lg font-semibold text-[#1a1a1a]">禁用状态</h3>
+      <p class="m-0 mb-4 text-sm text-[#999]">单选框不可用的状态。</p>
+      <UdpRadioGroup v-model="disabledValue">
+        <UdpRadio value="1" disabled>选项001</UdpRadio>
+        <UdpRadio value="2">选项002</UdpRadio>
+        <UdpRadio value="3">选项003</UdpRadio>
+      </UdpRadioGroup>
+    </div>
+
+    <!-- 模块3: 带边框单选 -->
+    <div class="mb-6">
+      <h3 class="m-0 mb-2 text-lg font-semibold text-[#1a1a1a]">带边框单选</h3>
+      <p class="m-0 mb-4 text-sm text-[#999]">一般选项较多、较复杂时使用。</p>
+
+      <div class="flex flex-col gap-4">
+        <!-- Large -->
+        <UdpRadioGroup v-model="borderedLargeValue" size="large">
+          <UdpRadio value="1" border>选项001</UdpRadio>
+          <UdpRadio value="2" border>选项002</UdpRadio>
+          <UdpRadio value="3" border>选项003</UdpRadio>
+        </UdpRadioGroup>
+
+        <!-- Default -->
+        <UdpRadioGroup v-model="borderedDefaultValue">
+          <UdpRadio value="1" border>选项001</UdpRadio>
+          <UdpRadio value="2" border>选项002</UdpRadio>
+          <UdpRadio value="3" border>选项003</UdpRadio>
+        </UdpRadioGroup>
+
+        <!-- Small -->
+        <UdpRadioGroup v-model="borderedSmallValue" size="small">
+          <UdpRadio value="1" border>选项001</UdpRadio>
+          <UdpRadio value="2" border>选项002</UdpRadio>
+          <UdpRadio value="3" border>选项003</UdpRadio>
+        </UdpRadioGroup>
+
+        <!-- Disabled (small + small size styling) -->
+        <UdpRadioGroup v-model="borderedMiniValue" size="small" disabled>
+          <UdpRadio value="1" border>选项001</UdpRadio>
+          <UdpRadio value="2" border>选项002</UdpRadio>
+          <UdpRadio value="3" border>选项003</UdpRadio>
+        </UdpRadioGroup>
+      </div>
+    </div>
+
+    <!-- 模块4: 单选按钮 -->
+    <div class="mb-6">
+      <h3 class="m-0 mb-2 text-lg font-semibold text-[#1a1a1a]">单选按钮</h3>
+      <p class="m-0 mb-4 text-sm text-[#999]">带有按钮组视觉效果的单选框。</p>
+
+      <div class="flex flex-col gap-4">
+        <!-- Large -->
+        <UdpRadioGroup v-model="buttonLargeValue" size="large">
+          <UdpRadioButton value="1" border>上海</UdpRadioButton>
+          <UdpRadioButton value="2" border>北京</UdpRadioButton>
+          <UdpRadioButton value="3" border>广州</UdpRadioButton>
+          <UdpRadioButton value="4" border>深圳</UdpRadioButton>
+        </UdpRadioGroup>
+
+        <!-- Default -->
+        <UdpRadioGroup v-model="buttonDefaultValue">
+          <UdpRadioButton value="1" border>上海</UdpRadioButton>
+          <UdpRadioButton value="2" border>北京</UdpRadioButton>
+          <UdpRadioButton value="3" border>广州</UdpRadioButton>
+          <UdpRadioButton value="4" border>深圳</UdpRadioButton>
+        </UdpRadioGroup>
+
+        <!-- Small -->
+        <UdpRadioGroup v-model="buttonSmallValue" size="small">
+          <UdpRadioButton value="1" border>上海</UdpRadioButton>
+          <UdpRadioButton value="2" border>北京</UdpRadioButton>
+          <UdpRadioButton value="3" border>广州</UdpRadioButton>
+          <UdpRadioButton value="4" border>深圳</UdpRadioButton>
+        </UdpRadioGroup>
+
+        <!-- Mini -->
+        <UdpRadioGroup v-model="buttonMiniValue" size="small">
+          <UdpRadioButton value="1" border>上海</UdpRadioButton>
+          <UdpRadioButton value="2" border>北京</UdpRadioButton>
+          <UdpRadioButton value="3" border>广州</UdpRadioButton>
+          <UdpRadioButton value="4" border>深圳</UdpRadioButton>
+        </UdpRadioGroup>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/views/demo-case/radio/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/rate/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;