feat: P15 ending gallery, chapter recap, visited tracking, save system v6

2026-06-09 17:49:07 +08:00
parent 47d6ce50fe
commit 9297117544
14 changed files with 517 additions and 48 deletions
--- a/src/components/EndingGallery.vue
+++ b/src/components/EndingGallery.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import type { EndingDef } from '@engine/types'
+
+defineProps<{
+  endings: EndingDef[]
+  visitedIds: Set<string>
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+function isUnlocked(ending: EndingDef, visitedIds: Set<string>): boolean {
+  return visitedIds.has(ending.sceneId)
+}
+</script>
+
+<template>
+  <div class="ending-overlay" @click.self="emit('close')" @keydown.escape="emit('close')">
+    <div class="ending-panel">
+      <h2 class="ending-title">结局画廊</h2>
+
+      <div class="ending-grid">
+        <div
+          v-for="end in endings"
+          :key="end.id"
+          class="ending-card"
+          :class="{ locked: !isUnlocked(end, visitedIds) }"
+        >
+          <div class="ending-thumb">
+            <img v-if="end.thumbnail" :src="end.thumbnail" class="thumb-img" />
+            <div v-else class="thumb-placeholder">?</div>
+          </div>
+          <div class="ending-label">{{ isUnlocked(end, visitedIds) ? end.label : '???' }}</div>
+          <div v-if="!isUnlocked(end, visitedIds)" class="lock-icon">🔒</div>
+        </div>
+      </div>
+
+      <button class="end-close" @click="emit('close')">关闭</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ending-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.88);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+
+.ending-panel {
+  background: #1a1a2e;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 10px;
+  padding: 36px 40px;
+  min-width: 400px;
+  max-width: 560px;
+}
+
+.ending-title {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 400;
+  color: #ddd;
+  letter-spacing: 3px;
+  margin-bottom: 28px;
+}
+
+.ending-grid {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.ending-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 140px;
+}
+
+.ending-card.locked {
+  opacity: 0.4;
+}
+
+.ending-thumb {
+  width: 120px;
+  height: 68px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 6px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumb-placeholder {
+  font-size: 28px;
+  color: #555;
+}
+
+.ending-label {
+  font-size: 13px;
+  color: #ccc;
+  text-align: center;
+}
+
+.lock-icon {
+  font-size: 14px;
+  margin-top: -6px;
+}
+
+.end-close {
+  display: block;
+  margin: 24px auto 0;
+  padding: 10px 36px;
+  font-size: 14px;
+  color: #888;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.end-close:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ccc;
+}
+</style>