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

chore: 静默 favicon 404 控制台噪音
refactor: AppStack推广到全部页面根（方向/间距由页面传入）
2026-09-03 17:07:35 +08:00 · 2026-09-03 16:16:17 +08:00 · 2026-09-03 15:58:47 +08:00 · 2026-09-03 14:44:40 +08:00
17 changed files with 81 additions and 189 deletions
--- a/client/index.html
+++ b/client/index.html
@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="zh-CN"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>备考通</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body></html>
+<html lang="zh-CN"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>备考通</title><link rel="icon" href="data:,"/></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body></html>
--- a/client/src/components/base/AppStack.vue
+++ b/client/src/components/base/AppStack.vue
@ -3,27 +3,17 @@ import { computed } from 'vue'

 const props = withDefaults(
  defineProps<{
-    /** 主轴方向；默认纵向 */
+    /** 单行横向 / 单列纵向；默认纵向。响应式由使用处自行决定传 row 还是 column */
    direction?: 'row' | 'column'
    /**
-     * 子项间距。兼容三种写法：
-     * - token 名：space-3 / space-4 / space-5 …
-     * - 纯数字字符串：'12' → 12px
-     * - 其它 CSS 值：'12px 16px'、'var(--space-3)' 等原样透传
-     * 缺省：纵向 space-5（20px），横向 space-4（16px）
+     * 子项间距：token 名（space-3…）或纯数字字符串（'12' → 12px）。
+     * 缺省：纵向 space-5（20px）、横向 space-4（16px）。
     */
    gap?: string
-    /** 交叉轴对齐 */
-    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
-    /** 主轴对齐 */
-    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
-    /** 是否允许换行（横向时使用） */
-    wrap?: boolean
  }>(),
-  { direction: 'column', gap: '', align: 'stretch', justify: 'start', wrap: false }
+  { direction: 'column', gap: '' }
 )

-/** token 名 / 纯数字 → 兼容的 CSS gap；其它原样透传 */
 const gapStyle = computed(() => {
  const raw = props.gap.trim()
  if (!raw) return props.direction === 'row' ? 'var(--space-4)' : 'var(--space-5)'
@ -36,12 +26,7 @@ const gapStyle = computed(() => {
 <template>
  <div
    class="app-stack"
-    :class="{
-      'app-stack--row': direction === 'row',
-      'app-stack--wrap': wrap,
-      [`app-stack--align-${align}`]: align !== 'stretch',
-      [`app-stack--justify-${justify}`]: justify !== 'start'
-    }"
+    :class="{ 'app-stack--row': direction === 'row' }"
    :style="{ '--stack-gap': gapStyle }"
  >
    <slot />
@ -49,45 +34,17 @@ const gapStyle = computed(() => {
 </template>

 <style scoped>
+/* 默认样式：纵向、stretch、start；特殊布局由使用页绑 class 覆盖 */
 .app-stack {
  display: flex;
  flex-direction: column;
-  align-items: stretch;
-  justify-content: flex-start;
+  /* 默认 stretch/start；特殊行由使用页 class 设 --stack-align / --stack-justify 覆写 */
+  align-items: var(--stack-align, stretch);
+  justify-content: var(--stack-justify, flex-start);
  gap: var(--stack-gap, var(--space-5));
  min-width: 0;
 }
 .app-stack--row {
  flex-direction: row;
 }
-.app-stack--wrap {
-  flex-wrap: wrap;
-}
-.app-stack--align-center {
-  align-items: center;
-}
-.app-stack--align-start {
-  align-items: flex-start;
-}
-.app-stack--align-end {
-  align-items: flex-end;
-}
-.app-stack--align-baseline {
-  align-items: baseline;
-}
-.app-stack--justify-center {
-  justify-content: center;
-}
-.app-stack--justify-end {
-  justify-content: flex-end;
-}
-.app-stack--justify-between {
-  justify-content: space-between;
-}
-.app-stack--justify-around {
-  justify-content: space-around;
-}
-.app-stack--justify-evenly {
-  justify-content: space-evenly;
-}
 </style>
--- a/client/src/views/dashboard/DashboardView.vue
+++ b/client/src/views/dashboard/DashboardView.vue
@ -7,6 +7,7 @@ import { useProfileStore } from '../../stores/profile'
 import { formatDateShort, formatMinutes, greetingByHour } from '../../utils/format'
 import AppCard from '../../components/base/AppCard.vue'
 import AppLoading from '../../components/feedback/AppLoading.vue'
+import AppStack from '../../components/base/AppStack.vue'
 import AppError from '../../components/feedback/AppError.vue'
 import AppEmpty from '../../components/feedback/AppEmpty.vue'
 import AppBadge from '../../components/base/AppBadge.vue'
@ -73,7 +74,7 @@ const mockDelta = computed(() => {
 </script>

 <template>
-  <div class="dashboard">
+  <AppStack class="dashboard">
    <!-- 加载 / 错误 / 全局空态 -->
    <AppLoading v-if="overview.loading.value" fullscreen />
    <AppError
@ -233,15 +234,10 @@ const mockDelta = computed(() => {
        <WeakPointsCard :weak-points="weakItems" compact />
      </div>
    </div>
-  </div>
+  </AppStack>
 </template>

 <style scoped>
-.dashboard {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-}
 .num {
  font-family: var(--font-num);
  font-weight: 700;
--- a/client/src/views/mock/MockFormView.vue
+++ b/client/src/views/mock/MockFormView.vue
@ -9,6 +9,7 @@ import AppButton from '../../components/base/AppButton.vue'
 import AppIcon from '../../components/base/AppIcon.vue'
 import AppPageHeader from '../../components/base/AppPageHeader.vue'
 import AppLoading from '../../components/feedback/AppLoading.vue'
+import AppStack from '../../components/base/AppStack.vue'
 import AppError from '../../components/feedback/AppError.vue'

 const route = useRoute()
@ -129,7 +130,7 @@ watch(
 </script>

 <template>
-  <div class="mock-form">
+  <AppStack class="mock-form">
    <AppPageHeader :title="title" subtitle="仅支持行测五个模块分数，总分自动汇总" sticky-mobile>
      <AppButton variant="ghost" @click="back">
        <AppIcon name="chevron-left" :size="16" />返回模考分析
@ -211,15 +212,10 @@ watch(
        </AppButton>
      </AppCard>
    </template>
-  </div>
+  </AppStack>
 </template>

 <style scoped>
-.mock-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-}
 .mock-form__card {
  max-width: 640px;
 }
--- a/client/src/views/mock/MockView.vue
+++ b/client/src/views/mock/MockView.vue
@ -120,7 +120,12 @@ async function confirmRemove() {

      <template v-else>
        <!-- 最近成绩 / 目标分差 / 较上次变化 -->
-        <section class="mock-page__stats">
+        <AppStack
+          class="mock-page__stats"
+          :class="{ 'is-col': isMobile }"
+          :direction="isMobile ? 'column' : 'row'"
+          gap="space-4"
+        >
          <StatCard
            label="最近成绩"
            :value="`${latest?.total ?? 0} 分`"
@ -143,7 +148,7 @@ async function confirmRemove() {
            :tone="deltaTone"
            :sub-tone="deltaTone"
          />
-        </section>
+        </AppStack>

        <!-- 成绩趋势 -->
        <AppCard title="行测成绩趋势" icon="chart">
@ -158,10 +163,10 @@ async function confirmRemove() {
        <AppCard title="模块均分对比" icon="chart">
          <ul class="mock-page__modules">
            <li v-for="m in moduleAverages" :key="m.module" class="mock-page__module">
-              <div class="mock-page__module-head">
+              <AppStack direction="row" class="mock-page__module-head">
                <span class="mock-page__module-name">{{ m.module }}</span>
                <strong class="mock-page__module-value">{{ m.average }}<small> 分</small></strong>
-              </div>
+              </AppStack>
              <div class="mock-page__module-track">
                <span class="mock-page__module-fill" :style="{ width: `${Math.min(100, m.average)}%` }" />
              </div>
@ -186,14 +191,14 @@ async function confirmRemove() {
                </div>
                <p v-if="r.note" class="mock-page__record-note">{{ r.note }}</p>
              </div>
-              <div class="mock-page__record-actions">
+              <AppStack direction="row" gap="space-1" class="mock-page__record-actions">
                <AppButton variant="ghost" size="md" @click="goEdit(r)">
                  <AppIcon name="pen" :size="15" />编辑
                </AppButton>
                <AppButton variant="ghost" size="md" class="is-danger" @click="removing = r">
                  <AppIcon name="close" :size="15" />删除
                </AppButton>
-              </div>
+              </AppStack>
            </li>
          </ul>
        </AppCard>
@ -206,22 +211,22 @@ async function confirmRemove() {
        确定要删除「{{ removing.name }}（{{ formatDateShort(removing.date) }}，{{ removing.total }} 分）」吗？删除后趋势与模块分析将同步更新，且不可恢复。
      </p>
      <template #footer>
-        <div class="mock-page__confirm-actions">
+        <AppStack direction="row" gap="space-3" class="mock-page__confirm-actions">
          <AppButton variant="ghost" @click="removing = null">取消</AppButton>
          <AppButton variant="danger" :loading="deleting" @click="confirmRemove">
            {{ deleting ? '删除中…' : '确认删除' }}
          </AppButton>
-        </div>
+        </AppStack>
      </template>
    </AppModal>
  </AppStack>
 </template>

 <style scoped>
-.mock-page__stats {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-4);
+/* PC 横向等宽（移动端 is-col 时自然撑满不限制高度） */
+.mock-page__stats:not(.is-col) > :deep(*) {
+  flex: 1 1 0;
+  min-width: 0;
 }
 .mock-page__sub {
  margin: 0 0 var(--space-3);
@ -245,7 +250,6 @@ async function confirmRemove() {
  gap: var(--space-4);
 }
 .mock-page__module-head {
-  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
@ -335,8 +339,6 @@ async function confirmRemove() {
  color: var(--text-muted);
 }
 .mock-page__record-actions {
-  display: flex;
-  gap: var(--space-1);
  flex: none;
 }
 .mock-page__record-actions .is-danger {
@ -349,15 +351,10 @@ async function confirmRemove() {
  color: var(--text-primary);
 }
 .mock-page__confirm-actions {
-  display: flex;
  justify-content: flex-end;
-  gap: var(--space-3);
 }

@media (max-width: 767px) {
-  .mock-page__stats {
-    grid-template-columns: 1fr;
-  }
  .mock-page__record {
    flex-direction: column;
  }
--- a/client/src/views/news/NewsDetailView.vue
+++ b/client/src/views/news/NewsDetailView.vue
@ -6,6 +6,7 @@ import { useRequest } from '../../composables/useRequest'
 import { renderMarkdown } from '../../utils/markdown'
 import { formatDateShort } from '../../utils/format'
 import AppLoading from '../../components/feedback/AppLoading.vue'
+import AppStack from '../../components/base/AppStack.vue'
 import AppError from '../../components/feedback/AppError.vue'
 import AppEmpty from '../../components/feedback/AppEmpty.vue'
 import AppPageHeader from '../../components/base/AppPageHeader.vue'
@ -19,7 +20,7 @@ const html = computed(() => renderMarkdown(detail.data.value?.content ?? ''))
 </script>

 <template>
-  <div class="news-detail">
+  <AppStack class="news-detail" gap="0">
    <AppLoading v-if="detail.loading.value" fullscreen />
    <AppError
      v-else-if="detail.error.value"
@ -49,14 +50,10 @@ const html = computed(() => renderMarkdown(detail.data.value?.content ?? ''))
    </template>

    <AppEmpty v-else icon="news" title="该要闻不存在" description="可能已被删除或链接有误。" />
-  </div>
+  </AppStack>
 </template>

 <style scoped>
-.news-detail {
-  display: flex;
-  flex-direction: column;
-}
 .news-detail__head {
  margin-bottom: var(--space-4);
 }
--- a/client/src/views/plan/PlanReviewView.vue
+++ b/client/src/views/plan/PlanReviewView.vue
@ -6,6 +6,7 @@ import { formatDateShort, formatMinutes, weekdayName } from '../../utils/format'
 import AppCard from '../../components/base/AppCard.vue'
 import AppPageHeader from '../../components/base/AppPageHeader.vue'
 import AppLoading from '../../components/feedback/AppLoading.vue'
+import AppStack from '../../components/base/AppStack.vue'
 import AppError from '../../components/feedback/AppError.vue'
 import AppEmpty from '../../components/feedback/AppEmpty.vue'

@ -31,7 +32,7 @@ const weakTone = ['danger', 'warning', 'primary']
 </script>

 <template>
-  <div class="review">
+  <AppStack class="review">
    <AppLoading v-if="review.loading.value" fullscreen />
    <AppError
      v-else-if="review.error.value"
@ -107,15 +108,10 @@ const weakTone = ['danger', 'warning', 'primary']
        </ul>
      </AppCard>
    </template>
-  </div>
+  </AppStack>
 </template>

 <style scoped>
-.review {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-}
 .review__title {
  margin: 0;
  font-size: var(--fs-h1);
--- a/client/src/views/plan/PlanView.vue
+++ b/client/src/views/plan/PlanView.vue
@ -12,6 +12,7 @@ import AppIcon from '../../components/base/AppIcon.vue'
 import AppModal from '../../components/base/AppModal.vue'
 import AppPageHeader from '../../components/base/AppPageHeader.vue'
 import AppLoading from '../../components/feedback/AppLoading.vue'
+import AppStack from '../../components/base/AppStack.vue'
 import AppError from '../../components/feedback/AppError.vue'
 import AppEmpty from '../../components/feedback/AppEmpty.vue'

@ -134,7 +135,7 @@ const profileDays = computed(() => (examProfile.data.value ? daysSince(examProfi
 </script>

 <template>
-  <div class="plan">
+  <AppStack class="plan">
    <AppLoading v-if="today.loading.value" fullscreen />
    <AppError
      v-else-if="today.error.value"
@ -359,15 +360,10 @@ const profileDays = computed(() => (examProfile.data.value ? daysSince(examProfi
        </AppButton>
      </template>
    </AppModal>
-  </div>
+  </AppStack>
 </template>

 <style scoped>
-.plan {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-}
 /* 指标卡 */
 .plan-metrics {
  display: grid;
--- a/client/src/views/practice/AiExplainView.vue
+++ b/client/src/views/practice/AiExplainView.vue
@ -9,6 +9,7 @@ import AppIcon from '../../components/base/AppIcon.vue'
 import AppBadge from '../../components/base/AppBadge.vue'
 import AppPageHeader from '../../components/base/AppPageHeader.vue'
 import AppLoading from '../../components/feedback/AppLoading.vue'
+import AppStack from '../../components/base/AppStack.vue'
 import AppError from '../../components/feedback/AppError.vue'

 const route = useRoute()
@ -63,7 +64,7 @@ const mistakeText = computed(() => {
 </script>

 <template>
-  <div class="ai-explain">
+  <AppStack class="ai-explain">
    <AppLoading v-if="loading" fullscreen text="正在生成讲解…" />
    <AppError v-else-if="error" fullscreen title="讲解加载失败" :message="error" retry @retry="load" />

@ -109,25 +110,20 @@ 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">
        <AppIcon name="chevron-left" :size="16" />返回
      </AppButton>
    </template>
-  </div>
+  </AppStack>
 </template>

 <style scoped>
-.ai-explain {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-}
 .ai-explain__summary {
  margin: 0;
  font-size: var(--fs-body);
@ -205,9 +201,7 @@ const mistakeText = computed(() => {
  background: var(--warning);
 }
 .ai-explain__answer {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
+  --stack-align: center;
 }
 .ai-explain__answer-key {
  display: grid;
--- a/client/src/views/practice/AnswerView.vue
+++ b/client/src/views/practice/AnswerView.vue
@ -8,6 +8,7 @@ import AppButton from '../../components/base/AppButton.vue'
 import AppBadge from '../../components/base/AppBadge.vue'
 import AppIcon from '../../components/base/AppIcon.vue'
 import AppLoading from '../../components/feedback/AppLoading.vue'
+import AppStack from '../../components/base/AppStack.vue'
 import AppError from '../../components/feedback/AppError.vue'
 import { formatDuration } from '../../utils/format'

@ -155,7 +156,7 @@ const finishAccuracy = computed(() => finishResult.value?.accuracy ?? 0)
 </script>

 <template>
-  <div class="answer">
+  <AppStack class="answer">
    <!-- ============ 整卷结果页 ============ -->
    <div v-if="finished && finishResult" class="result">
      <header class="result__head">
@ -316,15 +317,10 @@ const finishAccuracy = computed(() => finishResult.value?.accuracy ?? 0)
        </AppButton>
      </template>
    </div>
-  </div>
+  </AppStack>
 </template>

 <style scoped>
-.answer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-}

 /* 顶部栏 */
 .answer__top {
--- a/client/src/views/practice/CustomView.vue
+++ b/client/src/views/practice/CustomView.vue
@ -8,7 +8,9 @@ import AppPageHeader from '../../components/base/AppPageHeader.vue'
 import AppCard from '../../components/base/AppCard.vue'
 import AppButton from '../../components/base/AppButton.vue'
 import AppBadge from '../../components/base/AppBadge.vue'
+import AppIcon from '../../components/base/AppIcon.vue'
 import AppLoading from '../../components/feedback/AppLoading.vue'
+import AppStack from '../../components/base/AppStack.vue'
 import AppError from '../../components/feedback/AppError.vue'
 import AppEmpty from '../../components/feedback/AppEmpty.vue'
 import { useToast } from '../../composables/useToast'
@ -74,7 +76,7 @@ function back() {
 </script>

 <template>
-  <div class="custom">
+  <AppStack class="custom">
    <AppPageHeader title="自定义组卷" subtitle="从题库中勾选题目，组成一套专属练习">
      <AppButton variant="ghost" icon="chevron-left" @click="back">返回</AppButton>
    </AppPageHeader>
@ -123,15 +125,10 @@ function back() {
        </AppButton>
      </div>
    </template>
-  </div>
+  </AppStack>
 </template>

 <style scoped>
-.custom {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-}
 .custom__toolbar {
  display: flex;
  align-items: center;
--- a/client/src/views/practice/EssayView.vue
+++ b/client/src/views/practice/EssayView.vue
@ -2,6 +2,7 @@
 import AppCard from '../../components/base/AppCard.vue'
 import AppBadge from '../../components/base/AppBadge.vue'
 import AppIcon from '../../components/base/AppIcon.vue'
+import AppStack from '../../components/base/AppStack.vue'

 const QUESTION_TYPES = [
  { name: '归纳概括', desc: '概括给定资料的主要内容或问题' },
@ -13,7 +14,7 @@ const QUESTION_TYPES = [
 </script>

 <template>
-  <div class="essay">
+  <AppStack class="essay">
    <!-- 功能说明 -->
    <AppCard title="申论功能说明" icon="book-open">
      <p class="essay__intro">
@ -53,15 +54,10 @@ const QUESTION_TYPES = [
        <p>当前为占位页面，不保存任何写作内容。建议先完成行测「刷题 → 错题复习 → 模考分析」闭环。</p>
      </div>
    </AppCard>
-  </div>
+  </AppStack>
 </template>

 <style scoped>
-.essay {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-}
 .essay__intro {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-body);
--- a/client/src/views/practice/PracticeView.vue
+++ b/client/src/views/practice/PracticeView.vue
@ -12,6 +12,7 @@ import AppButton from '../../components/base/AppButton.vue'
 import AppBadge from '../../components/base/AppBadge.vue'
 import AppIcon from '../../components/base/AppIcon.vue'
 import AppLoading from '../../components/feedback/AppLoading.vue'
+import AppStack from '../../components/base/AppStack.vue'
 import AppError from '../../components/feedback/AppError.vue'
 import AppEmpty from '../../components/feedback/AppEmpty.vue'
 import EssayView from './EssayView.vue'
@ -160,7 +161,7 @@ const subtitle = computed(() => {
 </script>

 <template>
-  <div class="practice">
+  <AppStack class="practice">
    <AppPageHeader title="刷题中心" :subtitle="subtitle" :stack-mobile="true">
      <template v-if="tab === 'practice'">
        <AppButton variant="secondary" icon="plus" @click="goCustom">自定义组卷</AppButton>
@ -393,15 +394,10 @@ const subtitle = computed(() => {
    <template v-else>
      <EssayView />
    </template>
-  </div>
+  </AppStack>
 </template>

 <style scoped>
-.practice {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-}

 /* 子 tab */
 .practice-tabs {
--- a/client/src/views/practice/WrongDetailView.vue
+++ b/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>
-        <div class="wd__result-meta">
+        </AppStack>
+        <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;
-  align-items: center;
-  gap: var(--space-2);
+  --stack-align: center;
  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;
-  align-items: flex-start;
-  gap: var(--space-3);
+  --stack-align: flex-start;
 }
 .wd__history-icon {
  display: grid;
@ -488,9 +480,7 @@ function goAiExplain() {
  flex: 1;
 }
 .wd__history-main {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
+  --stack-align: center;
  font-size: var(--fs-subtitle);
  color: var(--text-primary);
 }
--- a/client/src/views/profile/ProfileView.vue
+++ b/client/src/views/profile/ProfileView.vue
@ -12,6 +12,7 @@ import AppButton from '../../components/base/AppButton.vue'
 import AppIcon from '../../components/base/AppIcon.vue'
 import AppPageHeader from '../../components/base/AppPageHeader.vue'
 import AppLoading from '../../components/feedback/AppLoading.vue'
+import AppStack from '../../components/base/AppStack.vue'
 import AppError from '../../components/feedback/AppError.vue'

 const { isMobile } = useResponsive()
@ -73,7 +74,7 @@ function editProfile() {
 </script>

 <template>
-  <div class="profile">
+  <AppStack class="profile">
    <AppLoading v-if="overview.loading.value" fullscreen />
    <AppError
      v-else-if="overview.error.value"
@ -243,15 +244,10 @@ function editProfile() {
        <RouterLink class="tip-banner__action" to="/plan/review">去加强</RouterLink>
      </div>
    </div>
-  </div>
+  </AppStack>
 </template>

 <style scoped>
-.profile {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-}

 /* 头像卡 */
 .me-card {
--- a/client/src/views/questions/QuestionsView.vue
+++ b/client/src/views/questions/QuestionsView.vue
@ -13,6 +13,7 @@ import AppModal from '../../components/base/AppModal.vue'
 import AppPageHeader from '../../components/base/AppPageHeader.vue'
 import AppBadge from '../../components/base/AppBadge.vue'
 import AppLoading from '../../components/feedback/AppLoading.vue'
+import AppStack from '../../components/base/AppStack.vue'
 import AppError from '../../components/feedback/AppError.vue'
 import AppEmpty from '../../components/feedback/AppEmpty.vue'

@ -323,7 +324,7 @@ function markAnswer(key: OptionKey) {
 </script>

 <template>
-  <div class="questions">
+  <AppStack class="questions" gap="space-4">
    <!-- ======================= 手动录入模式 ======================= -->
    <template v-if="mode === 'entry'">
      <AppPageHeader title="题库管理" subtitle="手动录入题目 · 支持逐题与批量 JSON 导入" sticky-mobile>
@ -627,15 +628,10 @@ function markAnswer(key: OptionKey) {
        </AppButton>
      </template>
    </AppModal>
-  </div>
+  </AppStack>
 </template>

 <style scoped>
-.questions {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}

 /* ---------- 录入模式 ---------- */
 .entry {
--- a/client/src/views/settings/SettingsView.vue
+++ b/client/src/views/settings/SettingsView.vue
@ -11,6 +11,7 @@ import AppBadge from '../../components/base/AppBadge.vue'
 import AppIcon from '../../components/base/AppIcon.vue'
 import AppPageHeader from '../../components/base/AppPageHeader.vue'
 import AppLoading from '../../components/feedback/AppLoading.vue'
+import AppStack from '../../components/base/AppStack.vue'
 import AppError from '../../components/feedback/AppError.vue'

 const { isMobile } = useResponsive()
@ -83,7 +84,7 @@ async function save() {
 </script>

 <template>
-  <div class="settings">
+  <AppStack class="settings">
    <AppLoading v-if="settings.loading.value" fullscreen />
    <AppError
      v-else-if="settings.error.value"
@ -199,15 +200,10 @@ async function save() {
        </div>
      </AppCard>
    </template>
-  </div>
+  </AppStack>
 </template>

 <style scoped>
-.settings {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-}

 .setting-row {
  display: flex;
Author	SHA1	Message	Date
liyy	cf3e877347	refactor: 错题详情与AI讲解页内纯div行收敛到AppStack	2026-09-03 17:07:35 +08:00
liyy	8d33e3e4eb	chore: 静默 favicon 404 控制台噪音	2026-09-03 16:16:17 +08:00
liyy	ee2991b4b7	refactor: AppStack推广到全部页面根（方向/间距由页面传入）	2026-09-03 15:58:47 +08:00
liyy	bf5e826bbe	refactor: AppStack极简化为direction+gap，响应式方向由使用页传入	2026-09-03 14:44:40 +08:00