refactor: 错题详情与AI讲解页内纯div行收敛到AppStack

client/src/components/base/AppStack.vue

@@ -38,8 +38,9 @@ const gapStyle = computed(() => {
 .app-stack {
   display: flex;
   flex-direction: column;
-  align-items: stretch;
+  /* 默认 stretch/start；特殊行由使用页 class 设 --stack-align / --stack-justify 覆写 */
-  justify-content: flex-start;
+  align-items: var(--stack-align, stretch);
+  justify-content: var(--stack-justify, flex-start);
   gap: var(--stack-gap, var(--space-5));
   min-width: 0;
 }

client/src/views/practice/AiExplainView.vue

@@ -110,10 +110,10 @@ const mistakeText = computed(() => {
 
       <!-- 答案 -->
       <AppCard title="正确答案" icon="check">
-        <div class="ai-explain__answer">
+        <AppStack direction="row" gap="space-3" class="ai-explain__answer">
           <strong class="ai-explain__answer-key">{{ explain.answer }}</strong>
           <span class="ai-explain__answer-label">本题答案为 {{ explain.answer }}</span>
-        </div>
+        </AppStack>
       </AppCard>
 
       <AppButton v-if="!isMobile" variant="ghost" @click="back">
@@ -201,9 +201,7 @@ const mistakeText = computed(() => {
   background: var(--warning);
 }
 .ai-explain__answer {
-  display: flex;
+  --stack-align: center;
-  align-items: center;
-  gap: var(--space-3);
 }
 .ai-explain__answer-key {
   display: grid;

client/src/views/practice/WrongDetailView.vue

@@ -188,11 +188,11 @@ function goAiExplain() {
 
       <!-- 自评结果反馈 -->
       <section v-if="assessed && assessResult" class="wd__result">
-        <div class="wd__result-banner" :class="assessResult.correct ? 'is-correct' : 'is-wrong'">
+        <AppStack direction="row" gap="space-2" class="wd__result-banner" :class="assessResult.correct ? 'is-correct' : 'is-wrong'">
           <AppIcon :name="assessResult.correct ? 'check' : 'close'" :size="18" />
           <span>{{ assessResult.correct ? '已标记为记对' : '已标记为记错' }}</span>
-        </div>
+        </AppStack>
-        <div class="wd__result-meta">
+        <AppStack direction="row" gap="space-4" class="wd__result-meta">
           <div class="wd__result-stat">
             <strong>已复习 {{ assessResult.reviewCount }} 次</strong>
             <span>下次复习</span>
@@ -201,7 +201,7 @@ function goAiExplain() {
             <strong>{{ assessResult.status === 'mastered' ? '已掌握' : assessResult.nextReviewAt }}</strong>
             <span>{{ assessResult.status === 'mastered' ? '状态' : '下次复习' }}</span>
           </div>
-        </div>
+        </AppStack>
         <AppButton block size="lg" @click="backToList">返回错题本</AppButton>
       </section>
 
@@ -216,20 +216,20 @@ function goAiExplain() {
       <section v-if="detail.history.length > 0" class="wd__history">
         <h2 class="wd__history-title">作答历史</h2>
         <div class="wd__history-list">
-          <div v-for="(h, i) in detail.history" :key="i" class="wd__history-item">
+          <AppStack v-for="(h, i) in detail.history" :key="i" direction="row" gap="space-3" class="wd__history-item">
             <span class="wd__history-icon" :class="h.correct ? 'is-correct' : 'is-wrong'">
               <AppIcon :name="h.correct ? 'check' : 'close'" :size="14" />
             </span>
             <div class="wd__history-body">
-              <div class="wd__history-main">
+              <AppStack direction="row" gap="space-2" class="wd__history-main">
                 <span>{{ formatDateWeekday(h.date) }}</span>
                 <span class="wd__history-badge" :class="h.correct ? 'is-correct' : 'is-wrong'">
                   {{ h.correct ? '答对' : `答错（选了 ${h.userAnswer}）` }}
                 </span>
-              </div>
+              </AppStack>
               <div v-if="h.wrongReason" class="wd__history-reason">错因：{{ h.wrongReason }}</div>
             </div>
-          </div>
+          </AppStack>
         </div>
       </section>
     </template>
@@ -407,9 +407,7 @@ function goAiExplain() {
   padding: var(--card-padding-desktop);
 }
 .wd__result-banner {
-  display: flex;
+  --stack-align: center;
-  align-items: center;
-  gap: var(--space-2);
   padding: var(--space-3) var(--space-4);
   border-radius: var(--radius-md);
   color: var(--on-accent);
@@ -421,10 +419,6 @@ function goAiExplain() {
 .wd__result-banner.is-wrong {
   background: var(--danger);
 }
-.wd__result-meta {
-  display: flex;
-  gap: var(--space-4);
-}
 .wd__result-stat {
   display: flex;
   flex-direction: column;
@@ -464,9 +458,7 @@ function goAiExplain() {
   gap: var(--space-3);
 }
 .wd__history-item {
-  display: flex;
+  --stack-align: flex-start;
-  align-items: flex-start;
-  gap: var(--space-3);
 }
 .wd__history-icon {
   display: grid;
@@ -488,9 +480,7 @@ function goAiExplain() {
   flex: 1;
 }
 .wd__history-main {
-  display: flex;
+  --stack-align: center;
-  align-items: center;
-  gap: var(--space-2);
   font-size: var(--fs-subtitle);
   color: var(--text-primary);
 }