fix: remove expand/collapse for footer details, always show stats and endings
This commit is contained in:
@@ -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,8 +228,7 @@ const tree = computed(() => buildTreeForChapter(currentChapterId.value))
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Transition name="footer-expand">
|
||||
<div class="footer-details" v-if="showDetails">
|
||||
<div class="footer-details">
|
||||
<div class="footer-stat">
|
||||
<span class="stat-value">{{ progress.count }}</span>
|
||||
<span class="stat-unit">/{{ progress.total }} 场景</span>
|
||||
@@ -244,13 +242,9 @@ const tree = computed(() => buildTreeForChapter(currentChapterId.value))
|
||||
>{{ endingStatus(end.id) ? '✓' : '🔒' }} {{ t(end.labelKey || end.label) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</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;
|
||||
|
||||
Reference in New Issue
Block a user