yg-yygl 0.0.1

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

@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Loading } from '@element-plus/icons-vue';
+
+// 图片列表
+const images = ref([
+  'https://picsum.photos/400/300?random=1',
+  'https://picsum.photos/400/300?random=2',
+  'https://picsum.photos/400/300?random=3',
+  'https://picsum.photos/400/300?random=4',
+  'https://picsum.photos/400/300?random=5',
+  'https://picsum.photos/400/300?random=6'
+]);
+
+// 预览图片列表
+const previewList = ref([
+  'https://picsum.photos/800/600?random=1',
+  'https://picsum.photos/800/600?random=2',
+  'https://picsum.photos/800/600?random=3',
+  'https://picsum.photos/800/600?random=4'
+]);
+
+const previewIndex = ref(0);
+
+// 错误图片（用于演示错误处理）
+const errorImageUrl = ref('https://invalid-url-that-will-fail.com/image.jpg');
+
+// 加载状态
+const loading = ref(true);
+
+// 预览事件
+const handlePreview: any = (index: number) => {
+  previewIndex.value = index;
+};
+
+// 加载完成
+const handleLoad = () => {
+  loading.value = false;
+  ElMessage.success('图片加载完成');
+};
+
+// 加载错误
+const handleError = () => {
+  ElMessage.error('图片加载失败');
+};
+</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="flex gap-4 flex-wrap items-center">
+        <el-image
+          src="https://picsum.photos/300/200?random=101"
+          fit="cover"
+          class="rounded-lg"
+          style="width: 300px; height: 200px"
+        />
+        <el-image
+          src="https://picsum.photos/200/300?random=102"
+          fit="contain"
+          class="rounded-lg border"
+          style="width: 200px; height: 300px"
+        />
+        <el-image
+          src="https://picsum.photos/250/250?random=103"
+          fit="fill"
+          class="rounded-lg"
+          style="width: 250px; height: 250px"
+        />
+      </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">
+        填充方式 (fit)
+      </h3>
+      <div class="flex gap-4 flex-wrap items-center">
+        <div class="text-center">
+          <el-image
+            src="https://picsum.photos/200/300?random=201"
+            fit="fill"
+            class="rounded-lg border"
+            style="width: 200px; height: 200px"
+          />
+          <p class="mt-2 text-sm text-gray-600">fill</p>
+        </div>
+        <div class="text-center">
+          <el-image
+            src="https://picsum.photos/200/300?random=202"
+            fit="contain"
+            class="rounded-lg border"
+            style="width: 200px; height: 200px"
+          />
+          <p class="mt-2 text-sm text-gray-600">contain</p>
+        </div>
+        <div class="text-center">
+          <el-image
+            src="https://picsum.photos/200/300?random=203"
+            fit="cover"
+            class="rounded-lg border"
+            style="width: 200px; height: 200px"
+          />
+          <p class="mt-2 text-sm text-gray-600">cover</p>
+        </div>
+        <div class="text-center">
+          <el-image
+            src="https://picsum.photos/200/300?random=204"
+            fit="none"
+            class="rounded-lg border"
+            style="width: 200px; height: 200px"
+          />
+          <p class="mt-2 text-sm text-gray-600">none</p>
+        </div>
+        <div class="text-center">
+          <el-image
+            src="https://picsum.photos/200/300?random=205"
+            fit="scale-down"
+            class="rounded-lg border"
+            style="width: 200px; height: 200px"
+          />
+          <p class="mt-2 text-sm text-gray-600">scale-down</p>
+        </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>
+      <div class="flex gap-4 flex-wrap items-center">
+        <el-image
+          v-for="(src, index) in images"
+          :key="index"
+          :src="src"
+          :lazy="true"
+          fit="cover"
+          class="rounded-lg shadow"
+          style="width: 200px; height: 150px"
+        >
+          <template #placeholder>
+            <div class="w-full h-full flex items-center justify-center bg-gray-100">
+              <span class="text-gray-400">加载中...</span>
+            </div>
+          </template>
+        </el-image>
+      </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="flex gap-4 flex-wrap items-center">
+        <el-image
+          v-for="(src, index) in previewList"
+          :key="index"
+          :src="src"
+          :preview-src-list="previewList"
+          :initial-index="index"
+          fit="cover"
+          class="rounded-lg shadow cursor-pointer hover:shadow-lg transition-shadow"
+          style="width: 180px; height: 120px"
+        />
+      </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="flex gap-4 flex-wrap items-center">
+        <el-image
+          src="https://picsum.photos/200/200?random=301"
+          fit="cover"
+          class="rounded-lg"
+          style="width: 200px; height: 200px"
+        >
+          <template #placeholder>
+            <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-100 to-purple-100">
+              <div class="text-center">
+                <div class="text-4xl mb-2">⏳</div>
+                <span class="text-gray-600">图片加载中...</span>
+              </div>
+            </div>
+          </template>
+          <template #error>
+            <div class="w-full h-full flex items-center justify-center bg-red-50">
+              <div class="text-center">
+                <div class="text-4xl mb-2">❌</div>
+                <span class="text-red-600">加载失败</span>
+              </div>
+            </div>
+          </template>
+        </el-image>
+
+        <el-image
+          src="https://picsum.photos/200/200?random=302"
+          fit="cover"
+          class="rounded-lg"
+          style="width: 200px; height: 200px"
+        >
+          <template #placeholder>
+            <div class="w-full h-full flex items-center justify-center bg-gray-200">
+              <el-icon class="is-loading text-4xl text-blue-500">
+                <Loading />
+              </el-icon>
+            </div>
+          </template>
+        </el-image>
+      </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>
+      <div class="flex gap-4 flex-wrap items-center">
+        <el-image
+          src="https://picsum.photos/200/200?random=401"
+          fit="cover"
+          class="rounded-none"
+          style="width: 200px; height: 200px"
+        />
+        <el-image
+          src="https://picsum.photos/200/200?random=402"
+          fit="cover"
+          class="rounded-lg"
+          style="width: 200px; height: 200px"
+        />
+        <el-image
+          src="https://picsum.photos/200/200?random=403"
+          fit="cover"
+          class="rounded-full"
+          style="width: 200px; height: 200px"
+        />
+        <el-image
+          src="https://picsum.photos/200/200?random=404"
+          fit="cover"
+          class="rounded-3xl shadow-2xl border-4 border-blue-500"
+          style="width: 200px; height: 200px"
+        />
+      </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>
+      <div class="flex gap-4 flex-wrap items-center">
+        <el-image
+          src="https://picsum.photos/300/200?random=501"
+          fit="cover"
+          class="rounded-lg shadow"
+          style="width: 300px; height: 200px"
+          @load="handleLoad"
+          @error="handleError"
+        />
+      </div>
+      <p class="mt-4 text-sm text-gray-600">打开控制台查看加载事件日志，加载成功会显示提示消息</p>
+    </div>
+  </div>
+</template>

package/dist/views/demo-case/image/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/infinite-scroll/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/infinite-scroll/index.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Loading } from '@element-plus/icons-vue';
+
+// 基础无限滚动
+const count = ref(0);
+const dataList = ref<Array<{ id: number; value: string }>>([]);
+const noData = ref(false);
+const loading = ref(false);
+
+const loadBasic = () => {
+  if (loading.value || noData.value) return;
+  loading.value = true;
+  setTimeout(() => {
+    const start = count.value;
+    const end = start + 10;
+    for (let i = start; i < end; i++) {
+      dataList.value.push({
+        id: i,
+        value: `项目 ${i + 1}`
+      });
+    }
+    count.value = end;
+    loading.value = false;
+    if (count.value >= 50) {
+      noData.value = true;
+      ElMessage.info('已加载全部数据');
+    }
+  }, 1000);
+};
+
+// 禁用状态
+const disabledData = ref<Array<{ id: number; value: string }>>(
+  Array.from({ length: 10 }, (_, i) => ({ id: i, value: `禁用滚动示例 ${i + 1}` }))
+);
+const disabled = ref(true);
+
+// 错误处理
+const errorData = ref<Array<{ id: number; value: string }>>([]);
+const errorCount = ref(0);
+const hasError = ref(false);
+
+const loadWithError = () => {
+  if (hasError.value) return;
+  setTimeout(() => {
+    if (errorCount.value === 0) {
+      // 第一次加载成功
+      for (let i = 0; i < 5; i++) {
+        errorData.value.push({ id: i, value: `数据项 ${i + 1}` });
+      }
+      errorCount.value = 5;
+    } else if (errorCount.value === 5) {
+      // 模拟错误
+      hasError.value = true;
+      ElMessage.error('加载失败，请刷新页面重试');
+    }
+  }, 1000);
+};
+
+// 自定义加载提示
+const customData = ref<Array<{ id: number; value: string }>>([]);
+const customCount = ref(0);
+const customLoading = ref(false);
+
+const loadCustom = () => {
+  if (customLoading.value) return;
+  customLoading.value = true;
+  setTimeout(() => {
+    const start = customCount.value;
+    const end = start + 5;
+    for (let i = start; i < end; i++) {
+      customData.value.push({
+        id: i,
+        value: `自定义加载 ${i + 1}`
+      });
+    }
+    customCount.value = end;
+    customLoading.value = false;
+  }, 1500);
+};
+
+// 重置函数
+const resetBasic = () => {
+  count.value = 0;
+  dataList.value = [];
+  noData.value = false;
+  loading.value = false;
+};
+</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">
+      <div class="flex justify-between items-center mb-4">
+        <h3 class="m-0 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+          基础无限滚动
+        </h3>
+        <ElButton size="small" @click="resetBasic">重置</ElButton>
+      </div>
+      <div class="border rounded-lg p-4" style="height: 400px; overflow: auto">
+        <ul v-infinite-scroll="loadBasic" :infinite-scroll-disabled="noData" class="list-none p-0 m-0">
+          <li
+            v-for="item in dataList"
+            :key="item.id"
+            class="p-3 mb-2 bg-gray-50 rounded border hover:bg-blue-50 transition-colors"
+          >
+            {{ item.value }}
+          </li>
+          <li v-if="loading" class="p-3 text-center text-gray-500">
+            <el-icon class="is-loading"><Loading /></el-icon>
+            加载中...
+          </li>
+          <li v-if="noData" class="p-3 text-center text-gray-500">
+            没有更多数据了
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- 区域2：禁用滚动 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <div class="flex justify-between items-center mb-4">
+        <h3 class="m-0 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+          禁用状态
+        </h3>
+        <el-switch v-model="disabled" active-text="启用" inactive-text="禁用" />
+      </div>
+      <div class="border rounded-lg p-4" style="height: 300px; overflow: auto">
+        <ul
+          v-infinite-scroll="() => {}"
+          :infinite-scroll-disabled="disabled"
+          class="list-none p-0 m-0"
+        >
+          <li
+            v-for="item in disabledData"
+            :key="item.id"
+            class="p-3 mb-2 bg-gray-50 rounded border"
+          >
+            {{ item.value }}
+          </li>
+          <li v-if="disabled" class="p-3 text-center text-gray-500">
+            无限滚动已禁用
+          </li>
+        </ul>
+      </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="flex gap-4">
+        <div class="flex-1 border rounded-lg p-4" style="height: 300px; overflow: auto">
+          <p class="text-sm text-gray-600 mb-3">距离底部 10px 时触发加载</p>
+          <ul
+            v-infinite-scroll="loadCustom"
+            :infinite-scroll-distance="10"
+            class="list-none p-0 m-0"
+          >
+            <li
+              v-for="item in customData"
+              :key="item.id"
+              class="p-3 mb-2 bg-blue-50 rounded border border-blue-200"
+            >
+              {{ item.value }}
+            </li>
+            <li v-if="customLoading" class="p-3 text-center text-blue-600">
+              <el-icon class="is-loading"><Loading /></el-icon>
+              正在加载...
+            </li>
+          </ul>
+        </div>
+      </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="border rounded-lg p-4" style="height: 400px; overflow: auto">
+        <div v-infinite-scroll="loadCustom" class="grid grid-cols-3 gap-4">
+          <div
+            v-for="item in customData"
+            :key="item.id"
+            class="p-4 bg-gradient-to-br from-purple-50 to-blue-50 rounded-lg border border-purple-200 hover:shadow-lg transition-shadow"
+          >
+            <div class="text-2xl mb-2">📦</div>
+            <div class="font-medium text-gray-800">{{ item.value }}</div>
+            <div class="text-xs text-gray-500 mt-1">ID: {{ item.id }}</div>
+          </div>
+          <div v-if="customLoading" class="col-span-3 text-center py-4 text-purple-600">
+            <el-icon class="is-loading text-2xl"><Loading /></el-icon>
+            <span class="ml-2">加载中...</span>
+          </div>
+        </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">
+        带延迟加载 (500ms)
+      </h3>
+      <div class="border rounded-lg p-4" style="height: 300px; overflow: auto">
+        <ul
+          v-infinite-scroll="loadCustom"
+          :infinite-scroll-delay="500"
+          class="list-none p-0 m-0"
+        >
+          <li
+            v-for="item in customData"
+            :key="item.id"
+            class="p-3 mb-2 bg-green-50 rounded border border-green-200"
+          >
+            {{ item.value }}
+          </li>
+          <li v-if="customLoading" class="p-3 text-center text-green-600">
+            延迟加载中...
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/views/demo-case/infinite-scroll/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/input/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;