重构代码，优化组件加载和样式，移除不必要的依赖，增强首屏渲染性能

2026-03-03 21:16:32 +08:00
parent 97c70f6706
commit cf3412db6a
16 changed files with 424 additions and 302 deletions
@@ -0,0 +1,71 @@
+<template>
+  <!-- 纯 CSS 骨架屏，避免使用 VSkeletonLoader 引起的渲染冲突 -->
+  <v-container class="main-window" fluid>
+    <div class="skeleton-grid">
+      <div
+        v-for="n in cardCount"
+        :key="n"
+        class="skeleton-card"
+      >
+        <div class="skeleton-heading skeleton-pulse" />
+        <div class="skeleton-line skeleton-pulse" />
+        <div class="skeleton-line skeleton-line--short skeleton-pulse" />
+      </div>
+    </div>
+    <div class="d-flex justify-center mt-6 ga-3">
+      <div class="skeleton-btn skeleton-pulse" />
+      <div class="skeleton-btn skeleton-pulse" />
+    </div>
+  </v-container>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useDisplay } from 'vuetify'
+
+const { mobile } = useDisplay()
+const cardCount = computed(() => mobile.value ? 3 : 6)
+</script>
+
+<style scoped>
+.skeleton-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+.skeleton-card {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity, 0.12));
+  border-radius: 12px;
+  padding: 16px;
+}
+.skeleton-heading {
+  height: 24px;
+  width: 60%;
+  background: rgba(var(--v-theme-on-surface), 0.08);
+  border-radius: 4px;
+  margin-bottom: 12px;
+}
+.skeleton-line {
+  height: 14px;
+  width: 100%;
+  background: rgba(var(--v-theme-on-surface), 0.08);
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+.skeleton-line--short {
+  width: 40%;
+}
+.skeleton-btn {
+  height: 36px;
+  width: 100px;
+  background: rgba(var(--v-theme-on-surface), 0.08);
+  border-radius: 8px;
+}
+.skeleton-pulse {
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+@keyframes skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+</style>