style(ui): 优化更新弹窗样式并替换应用图标资源
1. 将About页面的图标资源从svg替换为png格式 2. 重构更新弹窗布局，调整弹窗尺寸与滚动区域 3. 调整进度条与底部操作区的排版，优化按钮尺寸 4. 删除冗余的样式代码与废弃的svg图标文件
This commit is contained in:
Yuhang Wu
parent
d5cbd1e55c
commit
eb65b0d63d
115
app-icon.svg
115
app-icon.svg
|
|
@ -1,115 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
|
||||
<defs>
|
||||
<!-- Soft ambient glow behind the book -->
|
||||
<radialGradient id="ambient" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.08"/>
|
||||
<stop offset="70%" stop-color="#FFFFFF" stop-opacity="0.03"/>
|
||||
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Matte paper sheen for the open pages -->
|
||||
<linearGradient id="pageL" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#FDFDFD"/>
|
||||
<stop offset="55%" stop-color="#FFFFFF"/>
|
||||
<stop offset="100%" stop-color="#ECEDF0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="pageR" x1="100%" y1="0%" x2="0%" y2="0%">
|
||||
<stop offset="0%" stop-color="#FDFDFD"/>
|
||||
<stop offset="55%" stop-color="#FFFFFF"/>
|
||||
<stop offset="100%" stop-color="#ECEDF0"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Purple ghost mark -->
|
||||
<linearGradient id="ghost" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#667EEA" stop-opacity="0.55"/>
|
||||
<stop offset="100%" stop-color="#667EEA" stop-opacity="0.35"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Soft edge light around the book -->
|
||||
<filter id="softglow" x="-40%" y="-40%" width="180%" height="180%">
|
||||
<feGaussianBlur stdDeviation="14" result="blur"/>
|
||||
</filter>
|
||||
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="26" result="blur"/>
|
||||
</filter>
|
||||
|
||||
<!-- Clip to rounded square -->
|
||||
<clipPath id="tile">
|
||||
<rect x="0" y="0" width="1024" height="1024" rx="224"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
<!-- Pure black tile -->
|
||||
<g clip-path="url(#tile)">
|
||||
<rect x="0" y="0" width="1024" height="1024" fill="#000000"/>
|
||||
<rect x="0" y="0" width="1024" height="1024" fill="url(#ambient)"/>
|
||||
|
||||
<!-- Floor shadow -->
|
||||
<ellipse cx="512" cy="760" rx="300" ry="56" fill="#000000" opacity="0.9" filter="url(#shadow)"/>
|
||||
|
||||
<!-- ==== OPEN BOOK (centered ~70%) ==== -->
|
||||
<g>
|
||||
<!-- Book spine shadow -->
|
||||
<rect x="500" y="330" width="24" height="330" fill="#000000" opacity="0.06" filter="url(#softglow)"/>
|
||||
|
||||
<!-- Left cover / back board -->
|
||||
<path d="M512 340 C 400 312, 292 320, 232 348 L 232 672 C 292 644, 400 636, 512 664 Z"
|
||||
fill="#EFEFF2" filter="url(#softglow)"/>
|
||||
|
||||
<!-- Right cover / back board -->
|
||||
<path d="M512 340 C 624 312, 732 320, 792 348 L 792 672 C 732 644, 624 636, 512 664 Z"
|
||||
fill="#EFEFF2" filter="url(#softglow)"/>
|
||||
|
||||
<!-- Left page (curled up, reading posture) -->
|
||||
<path d="M512 322 C 408 298, 304 306, 246 334
|
||||
L 246 654 C 304 626, 408 618, 512 650 Z"
|
||||
fill="url(#pageL)"/>
|
||||
<!-- Left page top edge curl highlight -->
|
||||
<path d="M512 322 C 408 298, 304 306, 246 334"
|
||||
fill="none" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" opacity="0.9"/>
|
||||
|
||||
<!-- Right page (curled up, reading posture) -->
|
||||
<path d="M512 322 C 616 298, 720 306, 778 334
|
||||
L 778 654 C 720 626, 616 618, 512 650 Z"
|
||||
fill="url(#pageR)"/>
|
||||
<!-- Right page top edge curl highlight -->
|
||||
<path d="M512 322 C 616 298, 720 306, 778 334"
|
||||
fill="none" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" opacity="0.9"/>
|
||||
|
||||
<!-- Center crease -->
|
||||
<path d="M512 322 L 512 650"
|
||||
fill="none" stroke="#DCDDE0" stroke-width="4" opacity="0.7"/>
|
||||
|
||||
<!-- Page rim light (soft glow at edges) -->
|
||||
<path d="M246 334 L 246 654" stroke="#FFFFFF" stroke-width="2" opacity="0.8"/>
|
||||
<path d="M778 334 L 778 654" stroke="#FFFFFF" stroke-width="2" opacity="0.8"/>
|
||||
</g>
|
||||
|
||||
<!-- ==== GHOST MARK (translucent purple) ==== -->
|
||||
<g opacity="0.92">
|
||||
<!-- Ghost body -->
|
||||
<path d="M512 400
|
||||
C 552 400, 580 428, 580 468
|
||||
L 580 540
|
||||
C 580 548, 574 554, 566 554
|
||||
C 558 554, 552 548, 552 540
|
||||
L 552 546
|
||||
C 552 554, 546 560, 538 560
|
||||
C 530 560, 524 554, 524 546
|
||||
L 524 554
|
||||
C 524 562, 518 568, 510 568
|
||||
C 502 568, 496 562, 496 554
|
||||
L 496 540
|
||||
C 444 540, 444 462, 466 426
|
||||
C 484 402, 500 400, 512 400 Z"
|
||||
fill="url(#ghost)" filter="url(#softglow)"/>
|
||||
<!-- Ghost eyes -->
|
||||
<ellipse cx="486" cy="452" rx="9" ry="12" fill="#667EEA" opacity="0.6"/>
|
||||
<ellipse cx="538" cy="452" rx="9" ry="12" fill="#667EEA" opacity="0.6"/>
|
||||
</g>
|
||||
|
||||
<!-- Edge light wrap (elegant rim) -->
|
||||
<path d="M512 322 C 408 298, 304 306, 246 334"
|
||||
fill="none" stroke="#FFFFFF" stroke-width="1.5" opacity="0.35" filter="url(#softglow)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.7 KiB |
BIN
app-icon1.png
BIN
app-icon1.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 MiB |
|
|
@ -1,31 +1,29 @@
|
|||
<template>
|
||||
<n-modal :show="showUpdateModal" preset="card" :title="modalTitle" :bordered="false" :closable="!busy"
|
||||
:mask-closable="false" :close-on-esc="false" style="width: 430px" @close="cancelUpdate">
|
||||
:mask-closable="false" :close-on-esc="false" content-scrollable :segmented="{ content: true, footer: true }"
|
||||
:style="{ width: '60vw', height: '50vh' }" @close="cancelUpdate">
|
||||
<template #header-extra>
|
||||
<span v-if="updateInfo" class="update-current">当前 v{{ updateInfo.currentVersion }}</span>
|
||||
</template>
|
||||
|
||||
<div class="update-body">
|
||||
<n-scrollbar class="update-scroll">
|
||||
<div v-if="renderedBody" class="markdown-body" v-html="renderedBody" />
|
||||
<n-empty v-else description="暂无更新说明" />
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
|
||||
<div v-if="downloading || installing" class="update-progress">
|
||||
<n-progress type="line" :percentage="progress" :processing="downloading" indicator-placement="inside"
|
||||
:height="18" />
|
||||
<div class="progress-hint">{{ progressHint }}</div>
|
||||
</div>
|
||||
<div v-if="renderedBody" class="markdown-body" v-html="renderedBody" />
|
||||
<n-empty v-else description="暂无更新说明" />
|
||||
|
||||
<template #footer>
|
||||
<div class="update-footer">
|
||||
<n-button quaternary :disabled="busy" @click="skipVersion">跳过此版本</n-button>
|
||||
<div class="update-footer-right">
|
||||
<n-button v-if="!busy" @click="cancelUpdate">取消</n-button>
|
||||
<n-button type="primary" :loading="downloading" @click="startUpdate">
|
||||
{{ installing ? "安装中..." : downloading ? "下载中..." : "立即更新" }}
|
||||
</n-button>
|
||||
<div v-if="downloading || installing" class="update-progress">
|
||||
<n-progress type="line" :percentage="progress" :processing="downloading" indicator-placement="inside"
|
||||
:height="18" />
|
||||
<div class="progress-hint">{{ progressHint }}</div>
|
||||
</div>
|
||||
<div class="update-footer-actions">
|
||||
<n-button quaternary size="small" :disabled="busy" @click="skipVersion">跳过此版本</n-button>
|
||||
<div class="update-footer-right">
|
||||
<n-button size="small" v-if="!busy" @click="cancelUpdate">取消</n-button>
|
||||
<n-button size="small" type="primary" :loading="downloading" @click="startUpdate">
|
||||
{{ installing ? "安装中..." : downloading ? "下载中..." : "立即更新" }}
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -77,12 +75,6 @@ const progressHint = computed(() => {
|
|||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.update-body {
|
||||
.update-scroll {
|
||||
height: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
padding-right: 8px;
|
||||
font-size: 13px;
|
||||
|
|
@ -198,7 +190,7 @@ const progressHint = computed(() => {
|
|||
}
|
||||
|
||||
.update-progress {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-hint {
|
||||
|
|
@ -209,6 +201,13 @@ const progressHint = computed(() => {
|
|||
}
|
||||
|
||||
.update-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.update-footer-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ import {
|
|||
SyncOutlined,
|
||||
ThunderboltOutlined,
|
||||
} from "@vicons/antd"
|
||||
import appIcon from "../../../app-icon.svg"
|
||||
import appIcon from "../../../app-icon.png"
|
||||
import { checkAndPrompt } from "@/utils/updater"
|
||||
|
||||
const message = useMessage()
|
||||
|
|
|
|||
Loading…
Reference in New Issue