fix: remove expand/collapse for footer details, always show stats and endings

This commit is contained in:
2026-06-12 13:11:27 +08:00
parent 5da5a79272
commit 41f929951d

View File

@@ -21,7 +21,6 @@ const emit = defineEmits<{
}>()
const showChapterPicker = ref(false)
const showDetails = ref(false)
function isOtherChapterStart(sceneId: string, ownChapterId: string): boolean {
return props.chapters.some(c => c.id !== ownChapterId && c.startScene === sceneId)
@@ -229,28 +228,23 @@ const tree = computed(() => buildTreeForChapter(currentChapterId.value))
</div>
</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 class="footer-details">
<div class="footer-stat">
<span class="stat-value">{{ progress.count }}</span>
<span class="stat-unit">/{{ progress.total }} 场景</span>
</div>
</Transition>
<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>
</div>
<div class="footer-right">
<button class="footer-btn" @click="showDetails = !showDetails">
{{ showDetails ? '' : '' }}
</button>
<button class="chapter-btn" @click="showChapterPicker = !showChapterPicker">
{{ t('ui.chapters') }}
</button>
@@ -373,7 +367,6 @@ const tree = computed(() => buildTreeForChapter(currentChapterId.value))
}
.footer-left {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
@@ -400,13 +393,9 @@ const tree = computed(() => buildTreeForChapter(currentChapterId.value))
}
.footer-details {
position: absolute;
bottom: 100%;
left: 20px;
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 8px;
}
.footer-stat {
@@ -453,22 +442,6 @@ const tree = computed(() => buildTreeForChapter(currentChapterId.value))
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;
@@ -485,16 +458,6 @@ const tree = computed(() => buildTreeForChapter(currentChapterId.value))
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);
}
.chapter-picker {
position: absolute;
inset: 0;