adjust ui
This commit is contained in:
@@ -13,8 +13,8 @@
|
||||
"windows": [
|
||||
{
|
||||
"title": "Windows 清理工具",
|
||||
"width": 1400,
|
||||
"height": 900
|
||||
"width": 1150,
|
||||
"height": 750
|
||||
}
|
||||
],
|
||||
"security": {
|
||||
|
||||
61
src/App.vue
61
src/App.vue
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user