liyy/gwy-exam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 作答页/结果页纯div行收敛到AppStack

Browse Source
This commit is contained in:
liyy 2026-09-03 17:53:50 +08:00
parent cf3e877347
commit e4a890d9a1
1 changed files with 9 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/views/practice/AnswerView.vue
View File

@ -164,7 +164,7 @@ const finishAccuracy = computed(() => finishResult.value?.accuracy ?? 0)
<p>本卷共 {{ finishResult.total }} 题 · 作答 {{ finishResult.answered }} 题</p> <p>本卷共 {{ finishResult.total }} 题 · 作答 {{ finishResult.answered }} 题</p>
</header> </header>
<div class="result__hero"> <AppStack direction="row" gap="space-6" class="result__hero">
<div class="result__score"> <div class="result__score">
<strong class="num">{{ finishResult.correctCount }}<em>/{{ finishResult.total }}</em></strong> <strong class="num">{{ finishResult.correctCount }}<em>/{{ finishResult.total }}</em></strong>
<span>答对题数</span> <span>答对题数</span>
@ -178,18 +178,18 @@ const finishAccuracy = computed(() => finishResult.value?.accuracy ?? 0)
<strong class="num">{{ formatDuration(finishResult.durationSeconds) }}</strong> <strong class="num">{{ formatDuration(finishResult.durationSeconds) }}</strong>
<span>用时</span> <span>用时</span>
</div> </div>
</div> </AppStack>
<AppCard v-if="wrongItems.length > 0" title="错题回顾" icon="alert"> <AppCard v-if="wrongItems.length > 0" title="错题回顾" icon="alert">
<div class="wrong-list"> <div class="wrong-list">
<div v-for="(q, i) in wrongItems" :key="q.questionId" class="wrong-list__item"> <div v-for="(q, i) in wrongItems" :key="q.questionId" class="wrong-list__item">
<span class="wrong-list__idx">{{ i + 1 }}</span> <span class="wrong-list__idx">{{ i + 1 }}</span>
<div class="wrong-list__body"> <div class="wrong-list__body">
<div class="wrong-list__ans"> <AppStack direction="row" gap="space-2" class="wrong-list__ans">
<span>你的答案 <b class="is-wrong">{{ q.userAnswer }}</b></span> <span>你的答案 <b class="is-wrong">{{ q.userAnswer }}</b></span>
<span class="wrong-list__arrow"><AppIcon name="chevron-right" :size="14" /></span> <span class="wrong-list__arrow"><AppIcon name="chevron-right" :size="14" /></span>
<span>正确答案 <b class="is-right">{{ q.correctAnswer }}</b></span> <span>正确答案 <b class="is-right">{{ q.correctAnswer }}</b></span>
</div> </AppStack>
<p class="wrong-list__analysis">{{ q.analysis }}</p> <p class="wrong-list__analysis">{{ q.analysis }}</p>
<AppButton <AppButton
variant="ghost" variant="ghost"
@ -267,7 +267,7 @@ const finishAccuracy = computed(() => finishResult.value?.accuracy ?? 0)
<!-- ===== 单题结果态 ===== --> <!-- ===== 单题结果态 ===== -->
<div v-if="answered && result" class="single-result"> <div v-if="answered && result" class="single-result">
<div class="single-result__banner" :class="result.correct ? 'is-correct' : 'is-wrong'"> <AppStack direction="row" gap="space-3" class="single-result__banner" :class="result.correct ? 'is-correct' : 'is-wrong'">
<span class="single-result__icon"> <span class="single-result__icon">
<AppIcon :name="result.correct ? 'check' : 'close'" :size="18" /> <AppIcon :name="result.correct ? 'check' : 'close'" :size="18" />
</span> </span>
@ -276,7 +276,7 @@ const finishAccuracy = computed(() => finishResult.value?.accuracy ?? 0)
<span v-if="!result.correct">正确答案是 {{ result.correctAnswer }} · 本题已自动收录到错题本</span> <span v-if="!result.correct">正确答案是 {{ result.correctAnswer }} · 本题已自动收录到错题本</span>
<span v-else>回答正确，继续加油</span> <span v-else>回答正确，继续加油</span>
</div> </div>
</div> </AppStack>
<AppCard v-if="result.analysis" title="解析" icon="book-open"> <AppCard v-if="result.analysis" title="解析" icon="book-open">
<p class="single-result__analysis">{{ result.analysis }}</p> <p class="single-result__analysis">{{ result.analysis }}</p>
@ -465,9 +465,7 @@ const finishAccuracy = computed(() => finishResult.value?.accuracy ?? 0)
gap: var(--space-4); gap: var(--space-4);
} }
.single-result__banner { .single-result__banner {
display: flex; --stack-align: center;
align-items: center;
gap: var(--space-3);
padding: var(--space-4); padding: var(--space-4);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
color: var(--on-accent); color: var(--on-accent);
@ -553,9 +551,7 @@ const finishAccuracy = computed(() => finishResult.value?.accuracy ?? 0)
color: var(--text-secondary); color: var(--text-secondary);
} }
.result__hero { .result__hero {
display: flex; --stack-align: center;
align-items: center;
gap: var(--space-6);
padding: var(--card-padding-desktop); padding: var(--card-padding-desktop);
background: var(--bg-card); background: var(--bg-card);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
@ -623,9 +619,7 @@ const finishAccuracy = computed(() => finishResult.value?.accuracy ?? 0)
flex: 1; flex: 1;
} }
.wrong-list__ans { .wrong-list__ans {
display: flex; --stack-align: center;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-subtitle); font-size: var(--fs-subtitle);
} }
.wrong-list__ans .is-wrong { .wrong-list__ans .is-wrong {