修正多处问题，添加骨架屏

2026-06-29 16:41:36 +08:00
parent e85f39ab83
commit 13b99428de
124 changed files with 929 additions and 147 deletions
@@ -0,0 +1,169 @@
+<!-- components/Skeleton/ListSkeleton.vue -->
+<template>
+  <SkeletonBase>
+    <!-- Tab区域 -->
+    <view v-if="showTabs" class="skeleton-tabs">
+      <view v-for="i in tabCount" :key="i" class="skeleton-tab skeleton-shimmer"></view>
+    </view>
+    <!-- 列表项 -->
+    <view class="skeleton-list" :style="{ padding: listPadding }">
+      <view v-for="i in count" :key="i" class="skeleton-item">
+        <!-- 卡片式布局（默认） -->
+        <template v-if="layout === 'card'">
+          <view class="skeleton-card-item">
+            <view class="skeleton-card-icon skeleton-shimmer"></view>
+            <view class="skeleton-card-body">
+              <view class="skeleton-card-title skeleton-shimmer"></view>
+              <view class="skeleton-card-desc skeleton-shimmer"></view>
+              <view class="skeleton-card-footer">
+                <view class="skeleton-card-tag skeleton-shimmer"></view>
+                <view class="skeleton-card-time skeleton-shimmer"></view>
+              </view>
+            </view>
+          </view>
+        </template>
+        <!-- 简洁列表布局 -->
+        <template v-else-if="layout === 'simple'">
+          <view class="skeleton-simple-item">
+            <view class="skeleton-simple-title skeleton-shimmer"></view>
+            <view class="skeleton-simple-meta">
+              <view class="skeleton-simple-line skeleton-shimmer"></view>
+              <view class="skeleton-simple-line skeleton-shimmer short"></view>
+            </view>
+          </view>
+        </template>
+      </view>
+    </view>
+  </SkeletonBase>
+</template>
+
+<script setup>
+import SkeletonBase from './SkeletonBase.vue'
+
+defineProps({
+  count: { type: Number, default: 6 },
+  layout: { type: String, default: 'card' },
+  showTabs: { type: Boolean, default: false },
+  tabCount: { type: Number, default: 3 },
+  listPadding: { type: String, default: '0 24rpx' }
+})
+</script>
+
+<style lang="scss" scoped>
+.skeleton-tabs {
+  display: flex;
+  gap: 16rpx;
+  padding: 20rpx 24rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.skeleton-tab {
+  height: 60rpx;
+  width: 140rpx;
+  border-radius: 12rpx;
+}
+
+.skeleton-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+  padding-top: 16rpx;
+}
+
+/* 卡片式 */
+.skeleton-card-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 20rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  gap: 20rpx;
+}
+
+.skeleton-card-icon {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 16rpx;
+  flex-shrink: 0;
+}
+
+.skeleton-card-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+  min-width: 0;
+}
+
+.skeleton-card-title {
+  height: 32rpx;
+  width: 60%;
+  border-radius: 8rpx;
+}
+
+.skeleton-card-desc {
+  height: 28rpx;
+  width: 80%;
+  border-radius: 8rpx;
+}
+
+.skeleton-card-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 4rpx;
+}
+
+.skeleton-card-tag {
+  height: 24rpx;
+  width: 80rpx;
+  border-radius: 6rpx;
+}
+
+.skeleton-card-time {
+  height: 24rpx;
+  width: 120rpx;
+  border-radius: 6rpx;
+}
+
+/* 简洁式 */
+.skeleton-simple-item {
+  padding: 28rpx 24rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.skeleton-simple-title {
+  height: 34rpx;
+  width: 55%;
+  border-radius: 8rpx;
+}
+
+.skeleton-simple-meta {
+  display: flex;
+  gap: 24rpx;
+}
+
+.skeleton-simple-line {
+  height: 26rpx;
+  width: 180rpx;
+  border-radius: 6rpx;
+
+  &.short {
+    width: 100rpx;
+  }
+}
+
+:deep(.skeleton-shimmer) {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+</style>