refactor: 数据中枢去除冗余包裹并收敛纯div行到AppStack

This commit is contained in:
liyy 2026-09-04 17:40:54 +08:00
parent 79bc0860cb
commit 56d715a7bd

View File

@ -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 {