yg-yygl 0.0.1

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

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ChatDotRound, ChatLineRound, ChatRound } from '@element-plus/icons-vue'
+import { UdpRate } from '@udp/ui';
+
+const value1 = ref(0);
+const value2 = ref(0);
+const value3 = ref(0);
+const value4 = ref(0);
+const value5 = ref(0);
+const value6 = ref(0);
+const value7 = ref(0);
+const value8 = ref(0);
+const value9 = ref(0);
+const value10 = ref(0);
+const value11 = ref(0);
+const colors = ref(['#F7BA2A', '#F7BA2A', '#F7BA2A']);
+
+const texts = ref(['极差', '失望', '一般', '满意', '惊喜']);
+
+const customColors = ref([
+  { color: '#f56c6c', percent: 20 },
+  { color: '#e6a23c', percent: 40 },
+  { color: '#f7ba2a', percent: 60 },
+  { color: '#1989fa', percent: 80 },
+  { color: '#5cb87a', percent: 100 },
+]);
+
+let lastValue = 0;
+const mouseoverValue = ref(0);
+
+const onMouseover = (value: number) => {
+  mouseoverValue.value = value;
+};
+
+const onMouseleave = () => {
+  mouseoverValue.value = 0;
+};
+
+const rateValue = ref(0);
+const allowHalf = ref(true);
+const lowThreshold = ref(2);
+const highThreshold = ref(4);
+const max = ref(5);
+</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))]">
+        Rate 评分 (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-20">默认不区分颜色</span>
+          <UdpRate v-model="value1" />
+          <span class="text-sm text-gray-500">{{ value1 }}</span>
+        </div>
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-20">区分颜色</span>
+          <UdpRate v-model="value2" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" />
+          <span class="text-sm text-gray-500">{{ value2 }}</span>
+        </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">
+          <UdpRate v-model="value3" disabled />
+          <span class="text-sm text-gray-500">{{ value3 }}</span>
+        </div>
+        <div class="flex items-center gap-4">
+          <UdpRate v-model="value4" disabled show-score text-color="#ff9900" score-template="{value} 分" />
+        </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-6">
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-20">默认</span>
+          <UdpRate v-model="value5" :texts="['极差', '失望', '一般', '满意', '惊喜']" show-text />
+          <span class="text-sm text-gray-500">{{ texts[value5 - 1] }}</span>
+        </div>
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-20">自定义颜色</span>
+          <UdpRate
+            v-model="value6"
+            :texts="['极差', '失望', '一般', '满意', '惊喜']"
+            show-text
+            :colors="['#f56c6c', '#e6a23c', '#f7ba2a', '#1989fa', '#5cb87a']"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域4：其他 icon -->
+    <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">
+        其他 icon
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">当有多层评价时，可以使用不同类型的 icon 区分评分层级。</p>
+      <div class="flex flex-col gap-6">
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-20">默认</span>
+          <UdpRate v-model="value7" />
+        </div>
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-20">使用图标</span>
+          <UdpRate
+            v-model="value8"
+            :icons="[ChatRound, ChatLineRound, ChatDotRound]"
+            :void-icon="ChatRound"
+            :colors="['#F7BA2A', '#F7BA2A', '#F7BA2A']"
+          />
+        </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))]">你可以在评分中增加半星的选择。</p>
+      <div class="flex flex-col gap-6">
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-20">默认</span>
+          <UdpRate v-model="value9" allow-half />
+          <span class="text-sm text-gray-500">{{ value9 }}</span>
+        </div>
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-20">显示分数</span>
+          <UdpRate v-model="value9" allow-half show-score score-template="{value} 分" />
+        </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))]">你可以通过 low-threshold 和 high-threshold 来设置颜色变化的分段阈值。</p>
+      <div class="flex flex-col gap-6">
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-20">low-threshold: 2</span>
+          <UdpRate
+            v-model="rateValue"
+            :low-threshold="lowThreshold"
+            :high-threshold="highThreshold"
+            :max="max"
+            :colors="['#F7BAba', '#f36b6d', '#ed181a']"
+          />
+          <span class="text-sm text-gray-500">{{ rateValue }}</span>
+        </div>
+      </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))]">你可以通过 max 属性来设置最大评分值。</p>
+      <div class="flex flex-col gap-6">
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-20">max: 10</span>
+          <UdpRate v-model="value9" :max="10" />
+          <span class="text-sm text-gray-500">{{ value9 }}</span>
+        </div>
+        <div class="flex items-center gap-4">
+          <span class="text-sm w-20">max: 3</span>
+          <UdpRate v-model="value10" :max="3" />
+          <span class="text-sm text-gray-500">{{ value10 }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 成功状态
+const successTitle = ref('提交成功');
+const successSubTitle = ref('您的数据已成功提交，请等待审核');
+
+// 警告状态
+const warningTitle = ref('操作警告');
+const warningSubTitle = ref('此操作可能会影响其他功能，请谨慎操作');
+
+// 错误状态
+const errorTitle = ref('提交失败');
+const errorSubTitle = ref('请检查网络连接或稍后重试');
+
+// 信息状态
+const infoTitle = ref('系统通知');
+const infoSubTitle = ref('您有一条新的系统消息');
+
+// 自定义内容
+const customData = ref({
+  amount: '¥1,234.56',
+  orderNo: '20260320123456',
+  time: '2026-03-20 15:30:00'
+});
+
+// 操作按钮事件
+const handleBack = () => {
+  ElMessage.info('返回上一页');
+};
+
+const handleRetry = () => {
+  ElMessage.success('重试操作');
+};
+
+const handleViewDetail = () => {
+  ElMessage.info('查看详情');
+};
+
+const handleGoHome = () => {
+  ElMessage.info('返回首页');
+};
+</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="space-y-4">
+        <el-result
+          icon="success"
+          title="操作成功"
+          sub-title="您的操作已成功完成"
+        >
+          <template #extra>
+            <ElButton type="primary" @click="handleBack">返回</ElButton>
+            <ElButton @click="handleViewDetail">查看详情</ElButton>
+          </template>
+        </el-result>
+      </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="space-y-4">
+        <el-result
+          icon="warning"
+          title="操作警告"
+          sub-title="此操作可能会产生不可逆的影响，请确认后继续"
+        >
+          <template #extra>
+            <ElButton type="warning" @click="handleRetry">继续操作</ElButton>
+            <ElButton @click="handleBack">取消</ElButton>
+          </template>
+        </el-result>
+      </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="space-y-4">
+        <el-result
+          icon="error"
+          title="操作失败"
+          sub-title="系统繁忙，请稍后重试"
+        >
+          <template #extra>
+            <ElButton type="primary" @click="handleRetry">重试</ElButton>
+            <ElButton @click="handleGoHome">返回首页</ElButton>
+          </template>
+        </el-result>
+      </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="space-y-4">
+        <el-result
+          icon="info"
+          title="系统维护"
+          sub-title="系统正在进行维护，预计维护时间为 2 小时"
+        >
+          <template #extra>
+            <ElButton type="primary" @click="handleBack">知道了</ElButton>
+          </template>
+        </el-result>
+      </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="space-y-4">
+        <el-result icon="success" title="支付成功">
+          <template #sub-title>
+            <div class="text-center">
+              <p class="mb-4">您的订单已成功支付</p>
+            </div>
+          </template>
+          <template #extra>
+            <div class="bg-gray-50 rounded-lg p-6 mb-4">
+              <div class="space-y-3">
+                <div class="flex justify-between">
+                  <span class="text-gray-600">支付金额</span>
+                  <span class="text-2xl font-bold text-green-600">{{ customData.amount }}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-gray-600">订单编号</span>
+                  <span class="text-gray-800">{{ customData.orderNo }}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-gray-600">支付时间</span>
+                  <span class="text-gray-800">{{ customData.time }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="space-x-2">
+              <ElButton type="primary" @click="handleViewDetail">查看订单</ElButton>
+              <ElButton @click="handleGoHome">返回首页</ElButton>
+            </div>
+          </template>
+        </el-result>
+      </div>
+    </div>
+
+    <!-- 区域6：404 页面 -->
+    <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">
+        404 页面
+      </h3>
+      <div class="space-y-4">
+        <el-result
+          icon="warning"
+          title="404"
+          sub-title="抱歉，您访问的页面不存在"
+        >
+          <template #extra>
+            <ElButton type="primary" @click="handleGoHome">返回首页</ElButton>
+          </template>
+        </el-result>
+      </div>
+    </div>
+
+    <!-- 区域7：500 页面 -->
+    <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">
+        500 页面
+      </h3>
+      <div class="space-y-4">
+        <el-result
+          icon="error"
+          title="500"
+          sub-title="抱歉，服务器出了点问题"
+        >
+          <template #extra>
+            <ElButton type="primary" @click="handleRetry">重试</ElButton>
+            <ElButton @click="handleBack">返回上一页</ElButton>
+          </template>
+        </el-result>
+      </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">
+        403 无权限
+      </h3>
+      <div class="space-y-4">
+        <el-result
+          icon="warning"
+          title="403"
+          sub-title="抱歉，您没有权限访问此页面"
+        >
+          <template #extra>
+            <ElButton type="primary" @click="handleGoHome">返回首页</ElButton>
+            <ElButton @click="handleBack">返回上一页</ElButton>
+          </template>
+        </el-result>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { UdpScrollbar } from '@udp/ui';
+
+// 垂直滚动数据
+const verticalItems = ref(Array.from({ length: 15 }, (_, i) => i + 1));
+
+// 横向滚动数据
+const horizontalItems = ref(Array.from({ length: 20 }, (_, i) => i + 1));
+</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))]">
+        Scrollbar 滚动条 (UDP UI)
+      </h2>
+      <p class="m-0 text-sm text-[hsl(var(--foreground-regular))]">
+        用于控制页面或容器内容的滚动
+      </p>
+    </div>
+
+    <!-- 区域1：基础用法 -->
+    <div class="bg-background 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="mb-4 text-sm text-[hsl(var(--foreground-regular))]">
+        使用 UdpScrollbar 组件包裹内容，设置高度实现垂直滚动
+      </p>
+      <UdpScrollbar height="200px">
+        <div class="bg-primary-50 p-2">
+          <div v-for="item in verticalItems" :key="item" class="p-3 m-2 bg-background rounded text-center text-sm text-[hsl(var(--foreground))]">
+            列表项 {{ item }}
+          </div>
+        </div>
+      </UdpScrollbar>
+    </div>
+
+    <!-- 区域2：横向滚动 -->
+    <div class="bg-background 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="mb-4 text-sm text-[hsl(var(--foreground-regular))]">
+        当容器宽度小于内容宽度时，实现水平方向的滚动效果
+      </p>
+      <div class="w-[600px]">
+        <UdpScrollbar>
+          <div class="bg-red-50 py-4 px-2 w-fit flex gap-3">
+            <div v-for="item in horizontalItems" :key="item" class="inline-flex items-center justify-center w-[60px] h-[40px] bg-background rounded text-sm text-[hsl(var(--foreground))]">
+              {{ item }}
+            </div>
+          </div>
+        </UdpScrollbar>
+      </div>
+    </div>
+
+    <!-- 区域4：最大高度 -->
+    <div class="bg-background 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="mb-4 text-sm text-[hsl(var(--foreground-regular))]">
+        使用 max-height 设置最大高度，内容较少时自动收缩
+      </p>
+      <UdpScrollbar max-height="200px">
+        <div class="bg-primary-50 p-2">
+          <div v-for="item in 10" :key="item" class="p-3 m-2 bg-background rounded text-center text-sm text-[hsl(var(--foreground))]">
+            内容项 {{ item }}
+          </div>
+        </div>
+      </UdpScrollbar>
+    </div>
+
+    <!-- 区域5：使用说明 -->
+    <div class="bg-background 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>
+      <div class="text-sm text-[hsl(var(--foreground-regular))] space-y-2">
+        <p>• 使用 <code class="px-1 py-0.5 bg-gray-100 rounded text-xs">&lt;UdpScrollbar&gt;</code> 组件包裹需要滚动的内容</p>
+        <p>• 垂直滚动：设置 <code class="px-1 py-0.5 bg-gray-100 rounded text-xs">height</code> 或 <code class="px-1 py-0.5 bg-gray-100 rounded text-xs">max-height</code> 属性</p>
+        <p>• 横向滚动：内容宽度超过容器宽度时自动显示</p>
+        <p>• 可通过 <code class="px-1 py-0.5 bg-gray-100 rounded text-xs">always</code> 属性控制滚动条始终显示</p>
+        <p>• 支持暗色模式，自动适配主题样式</p>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/views/demo-case/scrollbar/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/seal-usage/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;