From fb1cbc5895e7227c9481878ce2056749d6d4ae50 Mon Sep 17 00:00:00 2001
From: liyy <18435186204@163.com>
Date: Fri, 4 Sep 2026 11:02:29 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=94=99=E9=A2=98=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E6=93=8D=E4=BD=9C=E5=8C=BA/=E8=87=AA=E8=AF=84?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E8=A1=8C=E7=94=B1=E9=A1=B5=E9=9D=A2=E4=BC=A0?=
 =?UTF-8?q?direction=E5=81=9A=E5=93=8D=E5=BA=94=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/views/practice/WrongDetailView.vue | 35 +++++--------------
 1 file changed, 8 insertions(+), 27 deletions(-)

diff --git a/client/src/views/practice/WrongDetailView.vue b/client/src/views/practice/WrongDetailView.vue
index 9c65b8e..98d1cd4 100644
--- a/client/src/views/practice/WrongDetailView.vue
+++ b/client/src/views/practice/WrongDetailView.vue
@@ -9,7 +9,8 @@ import AppPageHeader from '../../components/base/AppPageHeader.vue'
 import AppStack from '../../components/base/AppStack.vue'
 import AppLoading from '../../components/feedback/AppLoading.vue'
 import AppError from '../../components/feedback/AppError.vue'
-import { formatDateShort, formatDateWeekday } from '../../utils/format'
+import { formatDateWeekday } from '../../utils/format'
+import { useResponsive } from '../../composables/useResponsive'
 
 const route = useRoute()
 const router = useRouter()
@@ -19,6 +20,8 @@ const loading = ref(true)
 const error = ref('')
 const detail = ref<ReviewDetail | null>(null)
 
+const { isMobile } = useResponsive()
+
 // 自评结论
 const submitting = ref(false)
 const assessed = ref(false)
@@ -151,26 +154,26 @@ function goAiExplain() {
       </div>
 
       <!-- 操作区：重做此题 / AI 讲解 / 标记掌握 / 自评 -->
-      <div v-if="!assessed" class="wd__actions">
+      <AppStack v-if="!assessed" :direction="isMobile ? 'column' : 'row'" gap="var(--space-3)">
         <AppButton block size="lg" icon="refresh" @click="router.push(`/practice/session`)" disabled>
           重做此题
         </AppButton>
         <AppButton block size="lg" variant="secondary" icon="sparkles" @click="goAiExplain">
           AI 讲解
         </AppButton>
-      </div>
+      </AppStack>
 
       <!-- 自评区 -->
       <section v-if="!assessed && detail.status !== 'mastered'" class="wd__assess">
         <p class="wd__assess-title">这次复习结果如何？（用于安排下次复习）</p>
-        <div class="wd__assess-btns">
+        <AppStack :direction="isMobile ? 'column' : 'row'" gap="var(--space-3)" class="wd__assess-btns">
           <AppButton block size="lg" variant="secondary" :loading="submitting" @click="assess(true)">
             记对了
           </AppButton>
           <AppButton block size="lg" variant="danger" :loading="submitting" @click="assess(false)">
             记错了
           </AppButton>
-        </div>
+        </AppStack>
         <div v-if="chosenReason" class="wd__reason-hint">记错原因：{{ chosenReason }}</div>
         <div class="wd__reason-tags">
           <button
@@ -343,15 +346,6 @@ function goAiExplain() {
   color: var(--text-primary);
 }
 
-/* 操作区 */
-.wd__actions {
-  display: flex;
-  gap: var(--space-3);
-}
-.wd__actions .btn {
-  flex: 1;
-}
-
 /* 自评区 */
 .wd__assess {
   background: var(--bg-soft);
@@ -368,10 +362,6 @@ function goAiExplain() {
   font-weight: var(--fw-button);
   color: var(--text-primary);
 }
-.wd__assess-btns {
-  display: flex;
-  gap: var(--space-3);
-}
 .wd__reason-hint {
   font-size: var(--fs-label);
   color: var(--warning);
@@ -489,13 +479,4 @@ function goAiExplain() {
   color: var(--text-secondary);
   margin-left: auto;
 }
-
-@media (max-width: 767px) {
-  .wd__actions {
-    flex-direction: column;
-  }
-  .wd__assess-btns {
-    flex-direction: column;
-  }
-}
 </style>