refactor: 错题详情操作区/自评按钮行由页面传direction做响应式

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>