refactor(UpdateModal): 调整下载进度和操作按钮的布局位置

This commit is contained in:
Yuhang Wu
2026-10-26 15:15:49 +08:00
parent 04f6d3f851
commit 8082c69d22
+23 -16
View File
@@ -27,25 +27,26 @@
<p v-else class="m-0 opacity-80">{{ t("update.emptyLog") }}</p> <p v-else class="m-0 opacity-80">{{ t("update.emptyLog") }}</p>
</div> </div>
<!-- 下载 / 安装进度 -->
<div v-if="store.installing" class="update-progress">
<a-progress :percent="store.progress" :stroke-color="'#6366f1'" />
<p class="m-0 text-xs opacity-60">{{ t("update.downloading") }}</p>
</div>
<!-- 底部操作:忽略该版本 / 取消 / 确认更新 --> <!-- 底部操作:忽略该版本 / 取消 / 确认更新 -->
<template #footer> <template #footer>
<div class="update-footer"> <div class="update-footer">
<a-button v-if="!store.installing" type="text" size="small" @click="onIgnore"> <!-- 下载进度固定在 footer 的按钮操作上方 -->
{{ t("update.ignore") }} <div v-if="store.installing" class="update-progress">
</a-button> <a-progress :percent="store.progress" :stroke-color="'#6366f1'" />
<div class="ml-auto flex items-center gap-2"> <p class="m-0 text-xs opacity-60">{{ t("update.downloading") }}</p>
<a-button :disabled="store.installing" @click="onCancel"> </div>
{{ t("common.cancel") }} <div class="update-footer-actions">
</a-button> <a-button v-if="!store.installing" type="text" size="small" @click="onIgnore">
<a-button type="primary" :loading="store.installing" @click="onConfirm"> {{ t("update.ignore") }}
{{ t("update.confirm") }}
</a-button> </a-button>
<div class="ml-auto flex items-center gap-2">
<a-button :disabled="store.installing" @click="onCancel">
{{ t("common.cancel") }}
</a-button>
<a-button type="primary" :loading="store.installing" @click="onConfirm">
{{ t("update.confirm") }}
</a-button>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -135,10 +136,16 @@ function onConfirm() {
} }
.update-progress { .update-progress {
margin-top: 14px; width: 100%;
} }
.update-footer { .update-footer {
display: flex;
flex-direction: column;
gap: 12px;
}
.update-footer-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;