测试

frontend/src/components/LoadingSkeleton.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="loading-container">
+    <!-- 产品卡片骨架屏 -->
+    <div v-if="type === 'product-card'" class="product-card-skeleton">
+      <div class="skeleton-header">
+        <el-skeleton-item variant="image" class="skeleton-image" />
+        <div class="skeleton-title">
+          <el-skeleton-item variant="h3" style="width: 50%" />
+          <el-skeleton-item variant="text" style="width: 30%; margin-top: 10px" />
+        </div>
+      </div>
+      <div class="skeleton-content">
+        <el-skeleton-item variant="text" style="width: 80%" />
+        <el-skeleton-item variant="text" style="width: 60%" />
+        <el-skeleton-item variant="text" style="width: 40%" />
+      </div>
+      <div class="skeleton-footer">
+        <el-skeleton-item variant="button" style="width: 80px; height: 32px" />
+        <el-skeleton-item variant="button" style="width: 80px; height: 32px" />
+      </div>
+    </div>
+
+    <!-- 表格骨架屏 -->
+    <div v-else-if="type === 'table'" class="table-skeleton">
+      <el-skeleton :rows="rows" animated />
+    </div>
+
+    <!-- 图表骨架屏 -->
+    <div v-else-if="type === 'chart'" class="chart-skeleton">
+      <el-skeleton-item variant="h3" style="width: 30%; margin-bottom: 20px" />
+      <div class="chart-placeholder">
+        <el-skeleton-item variant="rect" style="width: 100%; height: 300px" />
+      </div>
+    </div>
+
+    <!-- 列表骨架屏 -->
+    <div v-else-if="type === 'list'" class="list-skeleton">
+      <div v-for="i in rows" :key="i" class="list-item">
+        <el-skeleton-item variant="circle" style="width: 40px; height: 40px" />
+        <div class="list-item-content">
+          <el-skeleton-item variant="h3" style="width: 60%" />
+          <el-skeleton-item variant="text" style="width: 80%" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 默认骨架屏 -->
+    <div v-else class="default-skeleton">
+      <el-skeleton :rows="rows" animated />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoadingSkeleton',
+  props: {
+    type: {
+      type: String,
+      default: 'default',
+      validator: (value) => [
+        'default', 'product-card', 'table', 'chart', 'list'
+      ].includes(value)
+    },
+    rows: {
+      type: Number,
+      default: 5
+    }
+  }
+}
+</script>
+
+<style scoped>
+.loading-container {
+  padding: 20px;
+}
+
+.product-card-skeleton {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.skeleton-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.skeleton-image {
+  width: 80px;
+  height: 80px;
+  margin-right: 16px;
+  border-radius: 4px;
+}
+
+.skeleton-title {
+  flex: 1;
+}
+
+.skeleton-content {
+  margin-bottom: 20px;
+}
+
+.skeleton-footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.chart-placeholder {
+  width: 100%;
+  height: 300px;
+}
+
+.list-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+}
+
+.list-item-content {
+  margin-left: 16px;
+  flex: 1;
+}
+</style>