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

Compare commits

base: julian:616483b2a83df8773c67f73edf3b845cbf12100e
Branches Tags
julian:main
julian:v0.1.0
...
compare: julian:8efbb3ebc403140ae27cb890158f8d06b6d03b43
Branches Tags
julian:main
julian:v0.1.0

3 Commits
616483b2a8 ... 8efbb3ebc4

Author SHA1 Message Date
Julian Freeman
8efbb3ebc4 adjust sidebar ui 2026-03-03 16:12:56 -04:00
Julian Freeman
e7fe50946c adjust ui fast clean 2026-03-03 16:06:25 -04:00
Julian Freeman
f9eb191bb6 adjust ui 2026-03-03 15:58:36 -04:00
2 changed files with 80 additions and 58 deletions
Expand all files Collapse all files

4
src-tauri/tauri.conf.json
View File

@@ -13,8 +13,8 @@
"windows": [ "windows": [
{ {
"title": "Windows 清理工具", "title": "Windows 清理工具",
"width": 1400, "width": 1150,
"height": 900 "height": 750
} }
], ],
"security": { "security": {

134
src/App.vue
View File

@@ -304,8 +304,10 @@ function splitSize(sizeStr: string | number) {
<!-- 1. 快速清理页面 --> <!-- 1. 快速清理页面 -->
<section v-if="activeTab === 'clean-c-fast'" class="page-container"> <section v-if="activeTab === 'clean-c-fast'" class="page-container">
<div class="page-header"> <div class="page-header">
<h1>快速清理系统盘</h1> <div class="header-info">
<p>一键释放 C 盘空间，不影响系统运行。</p> <h1>快速清理系统盘</h1>
<p>一键释放 C 盘空间，不影响系统运行。</p>
</div>
</div> </div>
<div class="main-action"> <div class="main-action">
@@ -404,8 +406,10 @@ function splitSize(sizeStr: string | number) {
<!-- 2. 高级模式页面 --> <!-- 2. 高级模式页面 -->
<section v-else-if="activeTab === 'clean-c-advanced'" class="page-container"> <section v-else-if="activeTab === 'clean-c-advanced'" class="page-container">
<div class="page-header"> <div class="page-header">
<h1>高级清理工具</h1> <div class="header-info">
<p>执行深层系统优化，释放更多被占用的磁盘空间。</p> <h1>高级清理工具</h1>
<p>执行深层系统优化，释放更多磁盘空间。</p>
</div>
</div> </div>
<div class="adv-card-list"> <div class="adv-card-list">
@@ -492,14 +496,15 @@ function splitSize(sizeStr: string | number) {
<!-- 3. 深度分析页面 --> <!-- 3. 深度分析页面 -->
<section v-else-if="activeTab === 'clean-c-deep'" class="page-container full-width"> <section v-else-if="activeTab === 'clean-c-deep'" class="page-container full-width">
<div class="page-header"> <div class="page-header">
<h1>查找大目录</h1> <div class="header-info">
<p>层级化查看 C 盘占用，锁定空间大户。</p> <h1>查找大目录</h1>
</div> <p>层级化查看 C 盘占用，锁定空间大户。</p>
</div>
<div class="advanced-actions"> <div class="header-actions">
<button class="btn-primary" @click="startFullDiskScan" :disabled="isFullScanning"> <button class="btn-primary btn-sm" @click="startFullDiskScan" :disabled="isFullScanning">
{{ isFullScanning ? '正在建立全盘索引...' : '开始深度分析' }} {{ isFullScanning ? '正在扫描...' : '开始深度分析' }}
</button> </button>
</div>
</div> </div>
<div class="tree-table-container shadow-card" v-if="treeData.length > 0 || isFullScanning"> <div class="tree-table-container shadow-card" v-if="treeData.length > 0 || isFullScanning">
@@ -636,7 +641,7 @@ body {
border-right: 1px solid #E9EFF6; border-right: 1px solid #E9EFF6;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 40px 0 32px; padding: 40px 0 20px;
z-index: 10; z-index: 10;
} }
@@ -702,53 +707,70 @@ body {
} }
.sidebar-footer { .sidebar-footer {
padding: 20px 24px; padding: 0px 20px;
border-top: 1px solid #E9EFF6; text-align: center;
} }
.version { .version {
font-size: 11px; font-size: 12px;
color: #A0AEC0; color: #CBD5E0;
font-weight: 600; font-weight: 500;
letter-spacing: 0.5px; letter-spacing: 0.2px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
} }
/* --- 内容区 --- */ /* --- 内容区 --- */
.content { .content {
flex: 1; flex: 1;
padding: 48px 60px; padding: 40px 60px;
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
} }
/* 当处于全屏模式（深度分析）时，内容区本身不滚动，让内部树形滚动 */ /* 当处于全屏模式（深度分析）时，内容区本身不滚动，让内部树形滚动 */
.content:has(.page-container.full-width) { .content:has(.page-container.full-width) {
overflow-y: hidden; overflow-y: hidden;
padding-bottom: 24px; /* 调小全屏模式下的底部留白 */
} }
.page-container { max-width: 800px; margin: 0 auto; padding-bottom: 10px; transition: max-width 0.4s ease; } .page-container { max-width: 800px; margin: 0 auto; padding-bottom: 0px; transition: max-width 0.4s ease; }
.page-container.full-width { .page-container.full-width {
max-width: 1400px; max-width: 1400px;
height: calc(100vh - 96px); height: calc(100vh - 64px); /* 相应调整高度计算 */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.page-header { margin-bottom: 40px; text-align: center; flex-shrink: 0; } .page-header {
.page-header h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; color: var(--text-main); } display: flex;
.page-header p { color: var(--text-sec); font-size: 15px; } align-items: flex-end;
justify-content: space-between;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
}
.header-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-header h1 { font-size: 22px; font-weight: 700; margin-bottom: 0; color: var(--text-main); line-height: 1.2; }
.page-header p { color: var(--text-sec); font-size: 13px; margin-bottom: 0; line-height: 1.2; }
.header-actions { display: flex; align-items: center; }
/* --- 按钮样式重构 --- */ /* --- 按钮样式重构 --- */
.btn-primary { .btn-primary {
background-color: var(--primary-color); background-color: var(--primary-color);
color: white; color: white;
border: none; border: none;
padding: 14px 44px; padding: 12px 40px;
border-radius: 14px; border-radius: 12px;
font-size: 16px; font-size: 15px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--btn-shadow); box-shadow: var(--btn-shadow);
flex-shrink: 0; flex-shrink: 0;
} }
.btn-sm { padding: 8px 24px; font-size: 14px; border-radius: 10px; }
.btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-1.5px); box-shadow: 0 6px 16px rgba(0, 122, 255, 0.35); } .btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-1.5px); box-shadow: 0 6px 16px rgba(0, 122, 255, 0.35); }
.btn-primary:active { transform: translateY(0); } .btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { background-color: #D1D1D6; box-shadow: none; cursor: not-allowed; transform: none; } .btn-primary:disabled { background-color: #D1D1D6; box-shadow: none; cursor: not-allowed; transform: none; }
@@ -757,9 +779,9 @@ body {
background-color: white; background-color: white;
color: var(--text-main); color: var(--text-main);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
padding: 12px 32px; padding: 10px 28px;
border-radius: 12px; border-radius: 10px;
font-size: 15px; font-size: 14px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
@@ -767,27 +789,27 @@ body {
.btn-secondary:hover { background-color: #F5F5F7; } .btn-secondary:hover { background-color: #F5F5F7; }
/* --- 扫描结果卡片 (重点优化) --- */ /* --- 扫描结果卡片 (重点优化) --- */
.main-action { margin: 40px 0; display: flex; justify-content: center; } .main-action { margin: 24px 0; display: flex; justify-content: center; }
.result-card { .result-card {
background: white; background: white;
border-radius: 28px; border-radius: 24px;
padding: 48px; padding: 32px 40px;
width: 100%; width: 100%;
box-shadow: var(--card-shadow); box-shadow: var(--card-shadow);
text-align: center; text-align: center;
border: 1px solid rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.02);
} }
.result-header { margin-bottom: 32px; } .result-header { margin-bottom: 24px; }
.result-icon { font-size: 32px; display: block; margin-bottom: 12px; } .result-icon { font-size: 28px; display: block; margin-bottom: 8px; }
.result-header h2 { font-size: 24px; font-weight: 700; color: var(--text-main); } .result-header h2 { font-size: 20px; font-weight: 700; color: var(--text-main); }
.result-stats { .result-stats {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 40px; margin-bottom: 32px;
} }
.stat-item { .stat-item {
@@ -801,37 +823,37 @@ body {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
justify-content: center; justify-content: center;
font-size: 44px; font-size: 38px;
font-weight: 800; font-weight: 800;
color: var(--primary-color); color: var(--primary-color);
letter-spacing: -1.5px; letter-spacing: -1.2px;
line-height: 1; line-height: 1;
margin-bottom: 8px; margin-bottom: 6px;
white-space: nowrap; white-space: nowrap;
} }
.stat-value .unit { .stat-value .unit {
font-size: 16px; font-size: 14px;
font-weight: 700; font-weight: 700;
margin-left: 4px; margin-left: 3px;
letter-spacing: 0; letter-spacing: 0;
opacity: 0.9; opacity: 0.9;
} }
.stat-label { font-size: 14px; color: var(--text-sec); font-weight: 500; } .stat-label { font-size: 13px; color: var(--text-sec); font-weight: 500; }
.stat-divider { .stat-divider {
width: 1px; width: 1px;
height: 48px; height: 40px;
background-color: #F2F2F7; background-color: #F2F2F7;
margin: 0 20px; margin: 0 16px;
flex-shrink: 0; flex-shrink: 0;
} }
.main-btn { width: 220px; } .main-btn { width: 180px; }
/* --- 扫描中 UI --- */ /* --- 扫描中 UI --- */
.scan-circle-container { width: 240px; height: 240px; margin: 0 auto; } .scan-circle-container { width: 200px; height: 200px; margin: 0 auto; }
.scan-circle { .scan-circle {
width: 100%; height: 100%; border-radius: 50%; border: 2px solid #F2F2F7; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #F2F2F7;
display: flex; align-items: center; justify-content: center; position: relative; display: flex; align-items: center; justify-content: center; position: relative;
@@ -842,24 +864,24 @@ body {
position: absolute; position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px; top: -2px; left: -2px; right: -2px; bottom: -2px;
border-radius: 50%; border-radius: 50%;
border: 4px solid var(--primary-color); border: 3px solid var(--primary-color);
border-top-color: transparent; border-top-color: transparent;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
.scan-inner { .scan-inner {
width: 200px; height: 200px; border-radius: 50%; background: white; width: 168px; height: 168px; border-radius: 50%; background: white;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
cursor: pointer; box-shadow: 0 10px 25px rgba(0,0,0,0.05); transition: transform 0.2s ease; cursor: pointer; box-shadow: 0 10px 25px rgba(0,0,0,0.05); transition: transform 0.2s ease;
} }
.scan-inner:hover { transform: scale(1.03); } .scan-inner:hover { transform: scale(1.03); }
.scan-btn-text { font-size: 20px; font-weight: 700; color: var(--primary-color); } .scan-btn-text { font-size: 18px; font-weight: 700; color: var(--primary-color); }
.scan-percent { font-size: 40px; font-weight: 800; color: var(--primary-color); letter-spacing: -1px; } .scan-percent { font-size: 36px; font-weight: 800; color: var(--primary-color); letter-spacing: -1px; }
.stat-value.highlight-gray { color: #8E8E93; } .stat-value.highlight-gray { color: #8E8E93; }
.done-card { border: 2px solid #E8F5E9; } .done-card { border: 2px solid #E8F5E9; }
.result-icon.success { color: #34C759; font-size: 54px; margin-bottom: 16px; display: block; } .result-icon.success { color: #34C759; font-size: 48px; margin-bottom: 12px; display: block; }
.clean-summary { font-size: 20px; color: var(--text-main); font-weight: 700; margin-top: 12px; } .clean-summary { font-size: 18px; color: var(--text-main); font-weight: 700; margin-top: 10px; }
/* --- 高级模式卡片 --- */ /* --- 高级模式卡片 --- */
.adv-card-list { display: flex; flex-direction: column; gap: 20px; } .adv-card-list { display: flex; flex-direction: column; gap: 20px; }
@@ -915,12 +937,12 @@ body {
.detail-content li { margin-bottom: 8px; line-height: 1.4; } .detail-content li { margin-bottom: 8px; line-height: 1.4; }
/* --- 磁盘树样式 --- */ /* --- 磁盘树样式 --- */
.advanced-actions { display: flex; justify-content: center; margin-bottom: 32px; flex-shrink: 0; } /* .advanced-actions { display: flex; justify-content: center; margin-bottom: 32px; flex-shrink: 0; } */
.tree-table-container { .tree-table-container {
background: #fff; background: #fff;
border-radius: 24px; border-radius: 24px;
overflow: hidden; overflow: hidden;
margin-top: 32px; margin-top: 8px;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;