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

add visual hints on advanced

Browse Source
This commit is contained in:
Julian Freeman
2026-03-13 17:07:19 -04:00
parent 14b9acafdf
commit 26ca5273d2
1 changed files with 41 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/App.vue
View File

@@ -614,7 +614,7 @@ watch(activeTab, (newTab) => {
<div class="page-header">
<div class="header-info">
<h1>高级清理工具</h1>
<p>执行深层系统优化，释放更多磁盘空间。</p>
<p>针对特定系统区域执行清理，但都有注意事项和副作用，在不理解的情况下慎点。</p>
</div>
</div>
@@ -625,14 +625,19 @@ watch(activeTab, (newTab) => {
<div class="adv-card-info">
<span class="adv-card-icon">⚙️</span>
<div class="adv-card-text">
<h3>系统组件清理</h3>
<h3>系统组件清理 <small class="detail-hint">(点击查看详情)</small></h3>
<p>通过 DISM 命令移除不再需要的系统冗余组件。</p>
</div>
</div>
<div class="adv-card-right">
<span class="expand-icon" :class="{ rotated: expandedAdvanced === 'dism' }">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
</span>
<button class="btn-action" @click.stop="runAdvancedTask('dism')" :disabled="advLoading['dism']">
{{ advLoading['dism'] ? '执行中...' : '执行' }}
</button>
</div>
</div>
<div class="adv-card-detail" v-show="expandedAdvanced === 'dism'">
<div class="detail-content">
<h4>详细信息：</h4>
@@ -653,12 +658,17 @@ watch(activeTab, (newTab) => {
<div class="adv-card-info">
<span class="adv-card-icon">🖼️</span>
<div class="adv-card-text">
<h3>清理缩略图缓存</h3>
<h3>清理缩略图缓存 <small class="detail-hint">(点击查看详情)</small></h3>
<p>重置文件夹预览缩略图数据库以释放空间。</p>
</div>
</div>
<div class="adv-card-right">
<span class="expand-icon" :class="{ rotated: expandedAdvanced === 'thumb' }">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
</span>
<button class="btn-action" @click.stop="runAdvancedTask('thumb')" :disabled="advLoading['thumb']">执行</button>
</div>
</div>
<div class="adv-card-detail" v-show="expandedAdvanced === 'thumb'">
<div class="detail-content">
<h4>详细信息：</h4>
@@ -678,12 +688,17 @@ watch(activeTab, (newTab) => {
<div class="adv-card-info">
<span class="adv-card-icon">🌙</span>
<div class="adv-card-text">
<h3>关闭休眠文件</h3>
<h3>关闭休眠文件 <small class="detail-hint">(点击查看详情)</small></h3>
<p>永久删除 hiberfil.sys 文件（大小等同于内存）。</p>
</div>
</div>
<div class="adv-card-right">
<span class="expand-icon" :class="{ rotated: expandedAdvanced === 'hiber' }">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
</span>
<button class="btn-action" @click.stop="runAdvancedTask('hiber')" :disabled="advLoading['hiber']">执行</button>
</div>
</div>
<div class="adv-card-detail" v-show="expandedAdvanced === 'hiber'">
<div class="detail-content">
<h4>详细信息：</h4>
@@ -691,6 +706,7 @@ watch(activeTab, (newTab) => {
<h4 class="warning-title">注意事项：</h4>
<ul>
<li>关闭后将无法使用“休眠”功能及“快速启动”技术。</li>
<li>只需执行一次。</li>
<li>需要管理员权限。</li>
</ul>
</div>
@@ -1363,9 +1379,24 @@ body {
.adv-card-info { display: flex; align-items: center; gap: 24px; }
.adv-card-icon { font-size: 32px; }
.adv-card-text h3 { font-size: 18px; margin-bottom: 4px; font-weight: 700; color: var(--text-main); }
.adv-card-text h3 { font-size: 18px; margin-bottom: 4px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.adv-card-text p { color: var(--text-sec); font-size: 14px; }
.detail-hint { font-size: 12px; color: var(--text-sec); font-weight: 400; opacity: 0.7; }
.adv-card-right { display: flex; align-items: center; gap: 16px; }
.expand-icon {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
color: #C1C1C1;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 50%;
background: #F8F9FA;
}
.expand-icon svg { width: 18px; height: 18px; }
.expand-icon.rotated { transform: rotate(180deg); background: #EBF4FF; color: var(--primary-color); }
.btn-action {
background-color: #F2F2F7;
color: var(--primary-color);