From 56d715a7bd580129b9aec32df5b8f22384dcedc4 Mon Sep 17 00:00:00 2001
From: liyy <18435186204@163.com>
Date: Fri, 4 Sep 2026 17:40:54 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=95=B0=E6=8D=AE=E4=B8=AD?=
 =?UTF-8?q?=E6=9E=A2=E5=8E=BB=E9=99=A4=E5=86=97=E4=BD=99=E5=8C=85=E8=A3=B9?=
 =?UTF-8?q?=E5=B9=B6=E6=94=B6=E6=95=9B=E7=BA=AFdiv=E8=A1=8C=E5=88=B0AppSta?=
 =?UTF-8?q?ck?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/views/dashboard/DashboardView.vue | 55 +++++++-------------
 1 file changed, 19 insertions(+), 36 deletions(-)

diff --git a/client/src/views/dashboard/DashboardView.vue b/client/src/views/dashboard/DashboardView.vue
index 777a24c..d67e28d 100644
--- a/client/src/views/dashboard/DashboardView.vue
+++ b/client/src/views/dashboard/DashboardView.vue
@@ -92,7 +92,7 @@ const mockDelta = computed(() => {
     />
 
     <!-- ============ 移动端首页 ============ -->
-    <div v-else-if="isMobile && d" class="home">
+    <template v-else-if="isMobile && d">
       <header class="home__hello">
         <h1>{{ greeting }}</h1>
       </header>
@@ -114,10 +114,10 @@ const mockDelta = computed(() => {
 
       <!-- 今日学习 -->
       <AppCard class="home-study">
-        <div class="home-study__row">
+        <AppStack direction="row" class="home-study__row">
           <span class="home-study__label">今日学习</span>
           <strong class="home-study__value">{{ formatMinutes(d.todayMinutes) }}</strong>
-        </div>
+        </AppStack>
       </AppCard>
 
       <!-- 三指标 -->
@@ -144,7 +144,7 @@ const mockDelta = computed(() => {
 
       <!-- 待复习错题 -->
       <AppCard class="home-review">
-        <div class="home-review__row">
+        <AppStack direction="row" gap="space-3" class="home-review__row">
           <div class="home-review__info">
             <span class="home-review__icon"><AppIcon name="alert" :size="18" /></span>
             <div class="home-review__meta">
@@ -153,7 +153,7 @@ const mockDelta = computed(() => {
             </div>
           </div>
           <RouterLink class="home-review__more" to="/practice/wrong">去复习</RouterLink>
-        </div>
+        </AppStack>
       </AppCard>
 
       <!-- 本周薄弱考点 -->
@@ -163,25 +163,25 @@ const mockDelta = computed(() => {
       <AppCard title="最近模考" icon="chart">
         <AppEmpty v-if="!latestMock" icon="chart" title="暂无模考成绩" description="录入行测模考成绩后展示最近一次。" />
         <div v-else class="home-mock">
-          <div class="home-mock__head">
+          <AppStack direction="row" gap="space-3" class="home-mock__head">
             <span class="home-mock__name">{{ latestMock.name }}</span>
             <span class="home-mock__date">{{ formatDateShort(latestMock.date) }} · 行测</span>
-          </div>
-          <div class="home-mock__score">
+          </AppStack>
+          <AppStack direction="row" gap="space-3" class="home-mock__score">
             <strong class="num">{{ latestMock.total }}</strong>
             <span class="home-mock__delta" :class="mockDelta !== null && mockDelta >= 0 ? 'is-up' : 'is-down'">
               <template v-if="mockDelta !== null">较上次 {{ mockDelta >= 0 ? '+' : '' }}{{ mockDelta }}</template>
             </span>
-          </div>
+          </AppStack>
           <div class="home-mock__goal">
             距目标 {{ targetScore }} 分 · 还差 {{ Math.max(0, targetScore - latestMock.total) }} 分
           </div>
         </div>
       </AppCard>
-    </div>
+    </template>
 
     <!-- ============ 桌面端数据中枢 ============ -->
-    <div v-else-if="d" class="hub">
+    <template v-else-if="d">
       <AppPageHeader
         title="数据中枢"
         :subtitle="`备考第 ${d.studyDays} 天：距离国考还有 ${d.daysToExam} 天：已连续打卡 ${d.streakDays} 天`"
@@ -233,7 +233,7 @@ const mockDelta = computed(() => {
         <MasteryCard :mastery="masteryItems" />
         <WeakPointsCard :weak-points="weakItems" compact />
       </div>
-    </div>
+    </template>
   </AppStack>
 </template>
 
@@ -244,11 +244,6 @@ const mockDelta = computed(() => {
 }
 
 /* ---------- 桌面 ---------- */
-.hub {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-}
 .hub-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -270,11 +265,6 @@ const mockDelta = computed(() => {
 }
 
 /* ---------- 移动 ---------- */
-.home {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
 .home__hello h1 {
   margin: 0;
   font-size: 22px;
@@ -313,9 +303,8 @@ const mockDelta = computed(() => {
   background: rgba(255, 255, 255, 0.2);
 }
 .home-study__row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  --stack-align: center;
+  --stack-justify: space-between;
 }
 .home-study__label {
   font-size: var(--fs-subtitle);
@@ -383,10 +372,8 @@ const mockDelta = computed(() => {
   border: 1px solid var(--primary);
 }
 .home-review__row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
+  --stack-align: center;
+  --stack-justify: space-between;
 }
 .home-review__info {
   display: flex;
@@ -424,10 +411,8 @@ const mockDelta = computed(() => {
   flex: none;
 }
 .home-mock__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
+  --stack-align: center;
+  --stack-justify: space-between;
 }
 .home-mock__name {
   font-size: var(--fs-subtitle);
@@ -439,9 +424,7 @@ const mockDelta = computed(() => {
   color: var(--text-muted);
 }
 .home-mock__score {
-  display: flex;
-  align-items: baseline;
-  gap: var(--space-3);
+  --stack-align: baseline;
   margin-top: var(--space-2);
 }
 .home-mock__score .num {