Merge remote-tracking branch 'upstream/main'

2026-08-26 09:31:34 +08:00
parent 9b8c4bfab6
commit 394eb0285d
34137 changed files with 3589424 additions and 0 deletions
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ImgPlaceholder'
+};
+</script>
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <template v-if="uiLoading">
+      <div :class="['el-skeleton', animated ? 'is-animated' : '', ]" v-bind="$attrs">
+        <template v-for="i in count">
+          <slot v-if="loading" name="template">
+            <el-skeleton-item
+              v-for="item in rows"
+              :key="`${i}-${item}`"
+              :class="{
+                'el-skeleton__paragraph': item !== 1,
+                'is-first': item === 1,
+                'is-last': item === rows && rows > 1,
+              }"
+              variant="p"
+            />
+          </slot>
+        </template>
+      </div>
+    </template>
+    <template v-else>
+      <slot v-bind="$attrs"></slot>
+    </template>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ElSkeleton',
+  props: {
+    animated: {
+      type: Boolean,
+      default: false
+    },
+    count: {
+      type: Number,
+      default: 1
+    },
+    rows: {
+      type: Number,
+      default: 4
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    },
+    throttle: {
+      type: Number,
+      default: 0
+    }
+  },
+  watch: {
+    loading: {
+      handler(loading) {
+        if (this.throttle <= 0) {
+          this.uiLoading = loading;
+          return;
+        }
+        if (loading) {
+          clearTimeout(this.timeoutHandle);
+          this.timeoutHandle = setTimeout(() => {
+            this.uiLoading = this.loading;
+          }, this.throttle);
+        } else {
+          this.uiLoading = loading;
+        }
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      uiLoading: this.throttle <= 0 ? this.loading : false
+    };
+  }
+};
+</script>
@@ -0,0 +1,22 @@
+<template>
+  <div :class="['el-skeleton__item', `el-skeleton__${variant}`]">
+    <img-placeholder v-if="variant === 'image'" />
+  </div>
+</template>
+
+<script>
+  import ImgPlaceholder from './img-placeholder';
+
+  export default {
+    name: 'ElSkeletonItem',
+    props: {
+      variant: {
+        type: String,
+        default: 'text'
+      }
+    },
+    components: {
+      [ImgPlaceholder.name]: ImgPlaceholder
+    }
+  };
+</script>