fix ui
This commit is contained in:
Julian Freeman
206
src/App.vue
206
src/App.vue
@@ -920,7 +920,7 @@ watch(activeTab, (newTab) => {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 4. 内存清理页面 -->
|
<!-- 4. 内存清理页面 -->
|
||||||
<section v-else-if="activeTab === 'clean-memory'" class="page-container">
|
<section v-else-if="activeTab === 'clean-memory'" class="page-container memory-page-spread">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<div class="header-info">
|
<div class="header-info">
|
||||||
<h1>内存加速</h1>
|
<h1>内存加速</h1>
|
||||||
@@ -928,60 +928,67 @@ watch(activeTab, (newTab) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="main-action">
|
<div class="memory-layout-v2">
|
||||||
<div class="memory-dashboard">
|
<!-- 顶部：主展示区 -->
|
||||||
<div class="memory-gauge" :style="{ '--percent': memoryState.stats?.percent || 0 }">
|
<div class="memory-main-card shadow-card">
|
||||||
<svg viewBox="0 0 100 100">
|
<div class="gauge-section">
|
||||||
<circle class="gauge-bg" cx="50" cy="50" r="45"></circle>
|
<div class="memory-gauge" :style="{ '--percent': memoryState.stats?.percent || 0 }">
|
||||||
<circle class="gauge-fill" cx="50" cy="50" r="45" :style="{ strokeDashoffset: 283 - (283 * (memoryState.stats?.percent || 0)) / 100 }"></circle>
|
<svg viewBox="0 0 100 100">
|
||||||
</svg>
|
<circle class="gauge-bg" cx="50" cy="50" r="45"></circle>
|
||||||
<div class="gauge-content">
|
<circle class="gauge-fill" cx="50" cy="50" r="45" :style="{ strokeDashoffset: 283 - (283 * (memoryState.stats?.percent || 0)) / 100 }"></circle>
|
||||||
<span class="gauge-value">{{ Math.round(memoryState.stats?.percent || 0) }}<small>%</small></span>
|
</svg>
|
||||||
<span class="gauge-label">内存占用</span>
|
<div class="gauge-content">
|
||||||
|
<span class="gauge-value">{{ Math.round(memoryState.stats?.percent || 0) }}<small>%</small></span>
|
||||||
|
<span class="gauge-label">内存占用</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats-section">
|
||||||
|
<div class="stat-box-v2">
|
||||||
|
<span class="label">已用内存</span>
|
||||||
|
<span class="value">{{ formatItemSize(memoryState.stats?.used || 0) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-divider-h"></div>
|
||||||
|
<div class="stat-box-v2">
|
||||||
|
<span class="label">可用内存</span>
|
||||||
|
<span class="value">{{ formatItemSize(memoryState.stats?.free || 0) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-divider-h"></div>
|
||||||
|
<div class="stat-box-v2">
|
||||||
|
<span class="label">内存总量</span>
|
||||||
|
<span class="value">{{ formatItemSize(memoryState.stats?.total || 0) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="memory-stats-grid">
|
<!-- 底部：操作区 -->
|
||||||
<div class="stat-box shadow-card">
|
<div class="memory-actions-v2">
|
||||||
<span class="label">已用内存</span>
|
<div class="action-card shadow-card" :class="{ cleaning: memoryState.isCleaning }">
|
||||||
<span class="value">{{ formatItemSize(memoryState.stats?.used || 0) }}</span>
|
<div class="action-info">
|
||||||
</div>
|
<h3>普通加速</h3>
|
||||||
<div class="stat-box shadow-card">
|
<p>压缩所有进程的内存工作集，释放物理内存，不影响程序运行。</p>
|
||||||
<span class="label">可用内存</span>
|
</div>
|
||||||
<span class="value">{{ formatItemSize(memoryState.stats?.free || 0) }}</span>
|
<button class="btn-primary" @click="startMemoryClean(false)" :disabled="memoryState.isCleaning">
|
||||||
</div>
|
{{ memoryState.isCleaning ? '清理中...' : '立即加速' }}
|
||||||
<div class="stat-box shadow-card">
|
</button>
|
||||||
<span class="label">内存总量</span>
|
|
||||||
<span class="value">{{ formatItemSize(memoryState.stats?.total || 0) }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="memory-actions">
|
|
||||||
<div class="action-card shadow-card" :class="{ cleaning: memoryState.isCleaning }">
|
|
||||||
<div class="action-info">
|
|
||||||
<h3>普通加速</h3>
|
|
||||||
<p>压缩所有进程的内存占用，不影响程序运行。</p>
|
|
||||||
</div>
|
</div>
|
||||||
<button class="btn-primary btn-sm" @click="startMemoryClean(false)" :disabled="memoryState.isCleaning">
|
|
||||||
{{ memoryState.isCleaning ? '清理中...' : '立即加速' }}
|
<div class="action-card shadow-card secondary" :class="{ cleaning: memoryState.isCleaning }">
|
||||||
</button>
|
<div class="action-info">
|
||||||
</div>
|
<h3>深度加速</h3>
|
||||||
<div class="action-card shadow-card secondary" :class="{ cleaning: memoryState.isCleaning }">
|
<p>强制清空系统备用列表（待机列表），释放更多被缓存的物理空间。</p>
|
||||||
<div class="action-info">
|
</div>
|
||||||
<h3>深度加速</h3>
|
<button class="btn-secondary" @click="startMemoryClean(true)" :disabled="memoryState.isCleaning">
|
||||||
<p>清空系统备用列表（待机列表），释放更多物理空间。</p>
|
深度加速
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn-secondary btn-sm" @click="startMemoryClean(true)" :disabled="memoryState.isCleaning">
|
|
||||||
深度加速
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="clean-feedback" v-if="memoryState.isDone">
|
<div class="clean-feedback" v-if="memoryState.isDone">
|
||||||
<span class="success-icon">✨</span>
|
<span class="success-icon">✨</span>
|
||||||
已为您释放 <span class="freed-amount">{{ memoryState.lastFreed }}</span> 内存空间
|
优化完成！已为您释放 <span class="freed-amount">{{ memoryState.lastFreed }}</span> 内存空间
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -1218,7 +1225,7 @@ body {
|
|||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
padding: 10px 28px;
|
padding: 10px 28px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 14px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
@@ -1633,10 +1640,25 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* --- 内存清理特有样式 --- */
|
/* --- 内存清理特有样式 --- */
|
||||||
.memory-dashboard {
|
.memory-layout-v2 {
|
||||||
margin: 20px 0 40px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memory-main-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 32px;
|
||||||
|
padding: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 60px;
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gauge-section {
|
||||||
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.memory-gauge {
|
.memory-gauge {
|
||||||
@@ -1666,10 +1688,6 @@ body {
|
|||||||
transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s;
|
transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 根据百分比改变颜色 */
|
|
||||||
.memory-gauge[style*="--percent: 7"], .memory-gauge[style*="--percent: 8"] { --gauge-color: #FF9500; }
|
|
||||||
.memory-gauge[style*="--percent: 9"] { --gauge-color: #FF3B30; }
|
|
||||||
|
|
||||||
.gauge-content {
|
.gauge-content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%; left: 50%;
|
top: 50%; left: 50%;
|
||||||
@@ -1680,7 +1698,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gauge-value {
|
.gauge-value {
|
||||||
font-size: 56px;
|
font-size: 64px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@@ -1700,49 +1718,57 @@ body {
|
|||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.memory-stats-grid {
|
.stats-section {
|
||||||
display: grid;
|
flex: 1;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 20px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-box {
|
|
||||||
background: white;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 20px;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-box .label {
|
.stat-box-v2 {
|
||||||
font-size: 13px;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-box-v2 .label {
|
||||||
|
font-size: 15px;
|
||||||
color: var(--text-sec);
|
color: var(--text-sec);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-box .value {
|
.stat-box-v2 .value {
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
}
|
}
|
||||||
|
|
||||||
.memory-actions {
|
.stat-divider-h {
|
||||||
display: flex;
|
height: 1px;
|
||||||
flex-direction: column;
|
background: #F2F2F7;
|
||||||
gap: 16px;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memory-actions-v2 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-card {
|
.action-card {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 24px 32px;
|
padding: 32px;
|
||||||
border-radius: 24px;
|
border-radius: 28px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
gap: 24px;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 16px 40px rgba(0,0,0,0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-card.secondary {
|
.action-card.secondary {
|
||||||
@@ -1752,30 +1778,38 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.action-info h3 {
|
.action-info h3 {
|
||||||
font-size: 17px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 8px;
|
||||||
|
color: var(--text-main);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-info p {
|
.action-info p {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: var(--text-sec);
|
color: var(--text-sec);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-card .btn-primary,
|
||||||
|
.action-card .btn-secondary {
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clean-feedback {
|
.clean-feedback {
|
||||||
margin-top: 32px;
|
margin-top: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 16px;
|
padding: 20px;
|
||||||
background-color: #E8F5E9;
|
background-color: #E8F5E9;
|
||||||
color: #2E7D32;
|
color: #2E7D32;
|
||||||
border-radius: 16px;
|
border-radius: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 15px;
|
||||||
animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
}
|
}
|
||||||
|
|
||||||
.freed-amount {
|
.freed-amount {
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user