diff --git a/client/src/views/practice/EssayView.vue b/client/src/views/practice/EssayView.vue
index 8e07b19..53beb82 100644
--- a/client/src/views/practice/EssayView.vue
+++ b/client/src/views/practice/EssayView.vue
@@ -22,10 +22,10 @@ const QUESTION_TYPES = [
         备考通当前聚焦行测闭环，申论功能正在规划中。
       </p>
       <div class="essay__types">
-        <div v-for="t in QUESTION_TYPES" :key="t.name" class="essay__type">
+        <AppStack direction="row" gap="space-3" class="essay__type" v-for="t in QUESTION_TYPES" :key="t.name">
           <AppBadge variant="primary">{{ t.name }}</AppBadge>
           <span class="essay__type-desc">{{ t.desc }}</span>
-        </div>
+        </AppStack>
       </div>
     </AppCard>
 
@@ -49,10 +49,10 @@ const QUESTION_TYPES = [
 
     <!-- 说明提示 -->
     <AppCard :padded="true">
-      <div class="essay__notice">
+      <AppStack direction="row" gap="space-3" class="essay__notice">
         <AppIcon name="alert" :size="18" />
         <p>当前为占位页面，不保存任何写作内容。建议先完成行测「刷题 → 错题复习 → 模考分析」闭环。</p>
-      </div>
+      </AppStack>
     </AppCard>
   </AppStack>
 </template>
@@ -70,9 +70,7 @@ const QUESTION_TYPES = [
   gap: var(--space-3);
 }
 .essay__type {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
+  --stack-align: center;
   padding: var(--space-3);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
@@ -104,9 +102,7 @@ const QUESTION_TYPES = [
   flex: none;
 }
 .essay__notice {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-3);
+  --stack-align: flex-start;
 }
 .essay__notice svg {
   color: var(--warning);