adjust ui

This commit is contained in:
Julian Freeman
2026-03-03 15:58:36 -04:00
parent 616483b2a8
commit f9eb191bb6
2 changed files with 43 additions and 22 deletions

View File

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

View File

@@ -304,8 +304,10 @@ function splitSize(sizeStr: string | number) {
<!-- 1. 快速清理页面 -->
<section v-if="activeTab === 'clean-c-fast'" class="page-container">
<div class="page-header">
<h1>快速清理系统盘</h1>
<p>一键释放 C 盘空间不影响系统运行</p>
<div class="header-info">
<h1>快速清理系统盘</h1>
<p>一键释放 C 盘空间不影响系统运行</p>
</div>
</div>
<div class="main-action">
@@ -404,8 +406,10 @@ function splitSize(sizeStr: string | number) {
<!-- 2. 高级模式页面 -->
<section v-else-if="activeTab === 'clean-c-advanced'" class="page-container">
<div class="page-header">
<h1>高级清理工具</h1>
<p>执行深层系统优化释放更多被占用的磁盘空间</p>
<div class="header-info">
<h1>高级清理工具</h1>
<p>执行深层系统优化释放更多磁盘空间</p>
</div>
</div>
<div class="adv-card-list">
@@ -492,14 +496,15 @@ function splitSize(sizeStr: string | number) {
<!-- 3. 深度分析页面 -->
<section v-else-if="activeTab === 'clean-c-deep'" class="page-container full-width">
<div class="page-header">
<h1>查找大目录</h1>
<p>层级化查看 C 盘占用锁定空间大户</p>
</div>
<div class="advanced-actions">
<button class="btn-primary" @click="startFullDiskScan" :disabled="isFullScanning">
{{ isFullScanning ? '正在建立全盘索引...' : '开始深度分析' }}
</button>
<div class="header-info">
<h1>查找大目录</h1>
<p>层级化查看 C 盘占用锁定空间大户</p>
</div>
<div class="header-actions">
<button class="btn-primary btn-sm" @click="startFullDiskScan" :disabled="isFullScanning">
{{ isFullScanning ? '正在扫描...' : '开始深度分析' }}
</button>
</div>
</div>
<div class="tree-table-container shadow-card" v-if="treeData.length > 0 || isFullScanning">
@@ -715,25 +720,40 @@ body {
/* --- 内容区 --- */
.content {
flex: 1;
padding: 48px 60px;
padding: 40px 60px;
overflow-y: auto;
height: 100%;
}
/* 当处于全屏模式(深度分析)时,内容区本身不滚动,让内部树形滚动 */
.content:has(.page-container.full-width) {
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 {
max-width: 1400px;
height: calc(100vh - 96px);
height: calc(100vh - 64px); /* 相应调整高度计算 */
display: flex;
flex-direction: column;
}
.page-header { margin-bottom: 40px; text-align: center; flex-shrink: 0; }
.page-header h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; color: var(--text-main); }
.page-header p { color: var(--text-sec); font-size: 15px; }
.page-header {
display: flex;
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 {
@@ -749,6 +769,7 @@ body {
box-shadow: var(--btn-shadow);
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:active { transform: translateY(0); }
.btn-primary:disabled { background-color: #D1D1D6; box-shadow: none; cursor: not-allowed; transform: none; }
@@ -915,12 +936,12 @@ body {
.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 {
background: #fff;
border-radius: 24px;
overflow: hidden;
margin-top: 32px;
margin-top: 8px;
flex: 1;
display: flex;
flex-direction: column;