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