From e7ac6203022ef38bc4fbc53c8cb6f611686ae855 Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Tue, 3 Mar 2026 22:20:02 -0400
Subject: [PATCH] fix ui

---
 src/App.vue | 206 ++++++++++++++++++++++++++++++----------------------
 1 file changed, 120 insertions(+), 86 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index de6b809..8a86ec1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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;
 }