feat: optimize StoryGallery footer with progressive disclosure, gradient bars, backdrop blur

src/components/StoryGallery.vue

@@ -21,6 +21,7 @@ const emit = defineEmits<{
 }>()
 
 const showChapterPicker = ref(false)
+const showDetails = ref(false)
 
 function collectReachable(startId: string): Set<string> {
   const visited = new Set<string>()
@@ -212,23 +213,38 @@ const tree = computed(() => buildTreeForChapter(currentChapterId.value))
 
       <div class="story-footer">
         <div class="footer-left">
-          <div class="footer-stat">
+          <div class="footer-progress">
-            <span class="stat-value">{{ progress.count }}</span>
+            <div class="footer-bar">
-            <span class="stat-unit">/{{ progress.total }} 场景</span>
+              <div class="footer-fill" :style="{ width: progress.pct + '%' }"></div>
-          </div>
+            </div>
-          <div class="footer-endings" v-if="endings.length">
-            <span
-              v-for="end in endings"
-              :key="end.id"
-              class="ending-chip"
-              :class="{ unlocked: endingStatus(end.id) }"
-            >{{ endingStatus(end.id) ? '✓' : '🔒' }} {{ t(end.labelKey || end.label) }}</span>
           </div>
+
+          <Transition name="footer-expand">
+            <div class="footer-details" v-if="showDetails">
+              <div class="footer-stat">
+                <span class="stat-value">{{ progress.count }}</span>
+                <span class="stat-unit">/{{ progress.total }} 场景</span>
+              </div>
+              <div class="footer-endings" v-if="endings.length">
+                <span
+                  v-for="end in endings"
+                  :key="end.id"
+                  class="ending-chip"
+                  :class="{ unlocked: endingStatus(end.id) }"
+                >{{ endingStatus(end.id) ? '✓' : '🔒' }} {{ t(end.labelKey || end.label) }}</span>
+              </div>
+            </div>
+          </Transition>
         </div>
 
-        <button class="chapter-btn" @click="showChapterPicker = !showChapterPicker">
+        <div class="footer-right">
-          {{ t('ui.chapters') }}
+          <button class="footer-btn" @click="showDetails = !showDetails">
-        </button>
+            {{ showDetails ? '▲' : '▼' }}
+          </button>
+          <button class="chapter-btn" @click="showChapterPicker = !showChapterPicker">
+            {{ t('ui.chapters') }}
+          </button>
+        </div>
       </div>
 
       <Transition name="picker-fade">
@@ -268,7 +284,9 @@ const tree = computed(() => buildTreeForChapter(currentChapterId.value))
 .story-overlay {
   position: fixed;
   inset: 0;
-  background: #080604;
+  background: rgba(8,6,4,0.92);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   display: flex;
   align-items: stretch;
   justify-content: center;
@@ -288,8 +306,7 @@ const tree = computed(() => buildTreeForChapter(currentChapterId.value))
   align-items: center;
   padding: 16px 20px;
   flex-shrink: 0;
-  background: rgba(0,0,0,0.6);
+  background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
-  border-bottom: 1px solid rgba(255,255,255,0.05);
 }
 
 .back-btn {
@@ -316,6 +333,154 @@ const tree = computed(() => buildTreeForChapter(currentChapterId.value))
   margin-left: 16px;
 }
 
+.story-body {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.story-body :deep(.tree-flow) {
+  width: 100%;
+  height: 100%;
+  max-height: none;
+}
+
+.story-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #444;
+  font-size: 14px;
+}
+
+.story-footer {
+  display: flex;
+  align-items: flex-end;
+  padding: 12px 20px 16px;
+  flex-shrink: 0;
+  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
+}
+
+.footer-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.footer-progress {
+  width: 100%;
+  max-width: 400px;
+}
+
+.footer-bar {
+  height: 3px;
+  background: rgba(255,255,255,0.08);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.footer-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #8b6914, #c9a84c);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.footer-details {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.footer-stat {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.stat-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #c9a84c;
+}
+
+.stat-unit {
+  font-size: 11px;
+  color: #666;
+}
+
+.footer-endings {
+  display: flex;
+  gap: 6px;
+}
+
+.ending-chip {
+  padding: 3px 10px;
+  font-size: 11px;
+  color: #555;
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.06);
+  border-radius: 12px;
+}
+
+.ending-chip.unlocked {
+  color: #c9a84c;
+  border-color: rgba(201,168,76,0.25);
+  background: rgba(201,168,76,0.06);
+}
+
+.footer-right {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.footer-btn {
+  padding: 4px 10px;
+  font-size: 11px;
+  color: #666;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.footer-btn:hover {
+  color: #aaa;
+  border-color: rgba(255,255,255,0.15);
+}
+
+.chapter-btn {
+  padding: 6px 16px;
+  font-size: 12px;
+  color: #888;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.chapter-btn:hover {
+  color: #ccc;
+  background: rgba(255,255,255,0.08);
+}
+
+.footer-expand-enter-active,
+.footer-expand-leave-active {
+  transition: all 0.2s ease;
+}
+.footer-expand-enter-from,
+.footer-expand-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
 .picker-title {
   text-align: center;
   font-size: 20px;