yg-yygl 0.0.1

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

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { UdpDatePicker } from '@udp/ui'
+
+// ========== 模块1: 选择某一天 ==========
+const defaultDate = ref('');
+const shortcutDate = ref('');
+const shortcuts1 = [
+  { text: '今天', value: new Date() },
+  {
+    text: '昨天',
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24);
+      return date;
+    },
+  },
+  {
+    text: '一周前',
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+      return date;
+    },
+  },
+];
+
+// ========== 模块2: 其他日期单位 ==========
+const weekDate = ref('');
+const yearDate = ref('');
+const monthDate = ref('');
+
+// ========== 模块3: 选择一段时间 ==========
+const dateRange1 = ref<[Date, Date]>();
+const dateRange2 = ref<[Date, Date]>();
+const shortcuts3 = [
+  { text: '最近一周', value: () => {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+    return [start, end];
+  }},
+  { text: '最近一个月', value: () => {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+    return [start, end];
+  }},
+  { text: '最近三个月', value: () => {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+    return [start, end];
+  }},
+];
+
+// ========== 模块4: 选择月份范围 ==========
+const monthRange1 = ref<[Date, Date]>();
+const monthRange2 = ref<[Date, Date]>();
+const shortcuts4 = [
+  { text: '本月', value: () => {
+    const start = new Date();
+    start.setDate(1);
+    const end = new Date(start.getFullYear(), start.getMonth() + 1, 0);
+    return [start, end];
+  }},
+  { text: '本年', value: () => {
+    const start = new Date(new Date().getFullYear(), 0, 1);
+    const end = new Date(new Date().getFullYear(), 11, 31);
+    return [start, end];
+  }},
+  { text: '上半年', value: () => {
+    const start = new Date(new Date().getFullYear(), 0, 1);
+    const end = new Date(new Date().getFullYear(), 5, 30);
+    return [start, end];
+  }},
+];
+
+// ========== 模块5: 选择年份范围 ==========
+const yearRange1 = ref<[Date, Date]>();
+const yearRange2 = ref<[Date, Date]>();
+const shortcuts5 = [
+  { text: '当年', value: () => {
+    const start = new Date(new Date().getFullYear(), 0, 1);
+    const end = new Date(new Date().getFullYear(), 11, 31);
+    return [start, end];
+  }},
+  { text: '前10年', value: () => {
+    const year = new Date().getFullYear();
+    const start = new Date(year - 10, 0, 1);
+    const end = new Date(year - 1, 11, 31);
+    return [start, end];
+  }},
+  { text: '后50年', value: () => {
+    const year = new Date().getFullYear();
+    const start = new Date(year + 1, 0, 1);
+    const end = new Date(year + 50, 11, 31);
+    return [start, end];
+  }},
+];
+</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))]">
+        DatePicker 日期选择器
+      </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-2 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        选择某一天
+      </h3>
+      <p class="m-0 mb-6 text-sm text-[hsl(var(--foreground-secondary))]">
+        以"日"为基本单位，基础的日期选择控件。
+      </p>
+      <div class="flex gap-6 flex-wrap">
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">默认</span>
+          <UdpDatePicker v-model="defaultDate" type="date" placeholder="请选择日期" style="width: 240px" />
+        </div>
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">带快捷选项</span>
+          <UdpDatePicker v-model="shortcutDate" type="date" placeholder="请选择日期" :shortcuts="shortcuts1" style="width: 240px" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 模块2: 其他日期单位 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-2 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        其他日期单位
+      </h3>
+      <p class="m-0 mb-6 text-sm text-[hsl(var(--foreground-secondary))]">
+        通过扩展基础的日期选择，可以选择周、月、年或多个日期。
+      </p>
+      <div class="flex gap-6 flex-wrap">
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">周</span>
+          <UdpDatePicker v-model="weekDate" type="week" placeholder="选择周" format="[第] ww 周" style="width: 240px" />
+        </div>
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">年</span>
+          <UdpDatePicker v-model="yearDate" type="year" placeholder="选择年" style="width: 240px" />
+        </div>
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">月</span>
+          <UdpDatePicker v-model="monthDate" type="month" placeholder="选择月" style="width: 240px" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 模块3: 选择一段时间 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-2 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        选择一段时间
+      </h3>
+      <p class="m-0 mb-6 text-sm text-[hsl(var(--foreground-secondary))]">
+        通过扩展基础的日期选择，可以选择日期范围。
+      </p>
+      <div class="flex gap-6 flex-wrap">
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">默认状态</span>
+          <UdpDatePicker v-model="dateRange1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 400px" />
+        </div>
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">带快捷选项</span>
+          <UdpDatePicker v-model="dateRange2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts3" style="width: 400px" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 模块4: 选择月份范围 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-2 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        选择月份范围
+      </h3>
+      <p class="m-0 mb-6 text-sm text-[hsl(var(--foreground-secondary))]">
+        通过扩展基础的日期选择，可以选择月份范围。
+      </p>
+      <div class="flex gap-6 flex-wrap">
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">默认状态</span>
+          <UdpDatePicker v-model="monthRange1" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" style="width: 400px" />
+        </div>
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">带快捷选项</span>
+          <UdpDatePicker v-model="monthRange2" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :shortcuts="shortcuts4" style="width: 400px" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 模块5: 选择年份范围 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-2 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        选择年份范围
+      </h3>
+      <p class="m-0 mb-6 text-sm text-[hsl(var(--foreground-secondary))]">
+        通过扩展基础的日期选择，可以选择年份范围。
+      </p>
+      <div class="flex gap-6 flex-wrap">
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">默认状态</span>
+          <UdpDatePicker v-model="yearRange1" type="year" range-separator="至" start-placeholder="开始年份" end-placeholder="结束年份" style="width: 400px" />
+        </div>
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">带快捷选项</span>
+          <UdpDatePicker v-model="yearRange2" type="year" range-separator="至" start-placeholder="开始年份" end-placeholder="结束年份" :shortcuts="shortcuts5" style="width: 400px" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { UdpDatePicker } from '@udp/ui';
+
+// ========== 模块1: 日期和时间点 ==========
+const defaultDateTime = ref('');
+const shortcutDateTime = ref('');
+const shortcuts1 = [
+  { text: '今天', value: new Date() },
+  {
+    text: '昨天',
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24);
+      return date;
+    },
+  },
+  {
+    text: '一周前',
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+      return date;
+    },
+  },
+];
+
+// ========== 模块2: 日期和时间范围 ==========
+const defaultDateTimeRange = ref<[Date, Date]>();
+const shortcutDateTimeRange = ref<[Date, Date]>();
+const shortcuts2 = [
+  { text: '最近一周', value: () => {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+    return [start, end];
+  }},
+  { text: '最近一个月', value: () => {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+    return [start, end];
+  }},
+  { text: '最近三个月', value: () => {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+    return [start, end];
+  }},
+];
+</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))]">
+        DateTimePicker 日期时间选择器
+      </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-6 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        日期和时间点
+      </h3>
+      <div class="flex gap-6 flex-wrap">
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">默认</span>
+          <UdpDatePicker v-model="defaultDateTime" type="datetime" placeholder="请选择日期时间" style="width: 240px" />
+        </div>
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">带快捷选项</span>
+          <UdpDatePicker v-model="shortcutDateTime" type="datetime" placeholder="请选择日期时间" :shortcuts="shortcuts1" style="width: 240px" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 模块2: 日期和时间范围 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-6 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        日期和时间范围
+      </h3>
+      <div class="flex gap-6 flex-wrap">
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">默认状态</span>
+          <UdpDatePicker v-model="defaultDateTimeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期时间" end-placeholder="结束日期时间" style="width: 440px" />
+        </div>
+        <div class="flex flex-col gap-3">
+          <span class="text-sm text-[#666]">带快捷选项</span>
+          <UdpDatePicker v-model="shortcutDateTimeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期时间" end-placeholder="结束日期时间" :shortcuts="shortcuts2" style="width: 440px" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// 用户信息
+const userInfo = ref({
+  name: '张三',
+  age: 28,
+  department: '研发部',
+  position: '前端开发工程师',
+  email: 'zhangsan@example.com',
+  phone: '13800138000',
+  address: '北京市朝阳区',
+  joinDate: '2020-01-15',
+  status: '在职',
+});
+
+// 项目信息
+const projectInfo = ref({
+  name: '翼构统一开发平台',
+  version: 'v2.0.0',
+  leader: '李四',
+  members: '张三、王五、赵六',
+  startDate: '2024-01-01',
+  endDate: '2024-12-31',
+  progress: '70%',
+  status: '进行中',
+  description: '这是一个统一的前端开发平台项目',
+});
+
+// 尺寸
+const sizeOptions = ['large', 'default', 'small'] as const;
+const currentSize = ref<typeof sizeOptions[number]>('default');
+</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))]">
+        Descriptions 描述列表
+      </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>
+      <ElDescriptions title="用户信息" :column="2" border>
+        <ElDescriptionsItem label="用户名">{{ userInfo.name }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="年龄">{{ userInfo.age }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="部门">{{ userInfo.department }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="职位">{{ userInfo.position }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="邮箱">{{ userInfo.email }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="手机号">{{ userInfo.phone }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="地址" :span="2">{{ userInfo.address }}</ElDescriptionsItem>
+      </ElDescriptions>
+    </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))]">
+        使用 size 属性设置不同尺寸
+      </p>
+      <div class="space-y-4">
+        <ElRadioGroup v-model="currentSize">
+          <ElRadio label="large">大号</ElRadio>
+          <ElRadio label="default">默认</ElRadio>
+          <ElRadio label="small">小号</ElRadio>
+        </ElRadioGroup>
+
+        <ElDescriptions title="用户信息" :size="currentSize" border>
+          <ElDescriptionsItem label="用户名">{{ userInfo.name }}</ElDescriptionsItem>
+          <ElDescriptionsItem label="年龄">{{ userInfo.age }}</ElDescriptionsItem>
+          <ElDescriptionsItem label="部门">{{ userInfo.department }}</ElDescriptionsItem>
+          <ElDescriptionsItem label="职位">{{ userInfo.position }}</ElDescriptionsItem>
+        </ElDescriptions>
+      </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))]">
+        使用 layout="vertical" 设置垂直布局
+      </p>
+      <ElDescriptions title="项目信息" :column="1" border layout="vertical">
+        <ElDescriptionsItem label="项目名称">{{ projectInfo.name }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="项目版本">{{ projectInfo.version }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="项目负责人">{{ projectInfo.leader }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="项目成员">{{ projectInfo.members }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="开始时间">{{ projectInfo.startDate }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="结束时间">{{ projectInfo.endDate }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="项目进度">{{ projectInfo.progress }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="项目状态">
+          <ElTag type="primary">{{ projectInfo.status }}</ElTag>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </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>
+      <ElDescriptions :column="2" border>
+        <ElDescriptionsItem label="用户名" label-class-name="custom-label">
+          <span class="text-primary font-bold">{{ userInfo.name }}</span>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="状态">
+          <ElTag type="success">{{ userInfo.status }}</ElTag>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="入职时间">{{ userInfo.joinDate }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="邮箱">
+          <ElTag type="info">{{ userInfo.email }}</ElTag>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </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>
+      <ElDescriptions :column="3" border>
+        <ElDescriptionsItem label="用户名">{{ userInfo.name }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="年龄">{{ userInfo.age }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="部门">{{ userInfo.department }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="职位">{{ userInfo.position }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="邮箱">{{ userInfo.email }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="手机号">{{ userInfo.phone }}</ElDescriptionsItem>
+      </ElDescriptions>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.custom-label) {
+  font-weight: bold;
+  color: #409eff;
+}
+</style>

package/dist/views/demo-case/descriptions/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/dialog/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;