julian/win-cleaner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix ui

Browse Source
This commit is contained in:
Julian Freeman
2026-03-03 22:20:02 -04:00
parent 92adfd7a2e
commit e7ac620302
1 changed files with 120 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/App.vue
View File

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