From b63135a0e08ae444c15b9bf5ec0d3f9df11df0ca Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Tue, 3 Mar 2026 09:59:28 -0400
Subject: [PATCH] fix size result

---
 src/App.vue | 57 ++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 06be5e1..25e606c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -149,6 +149,15 @@ function formatItemSize(bytes: number): string {
   const i = Math.floor(Math.log(bytes) / Math.log(k));
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 }
+
+function splitSize(sizeStr: string | number) {
+  const str = String(sizeStr);
+  const parts = str.split(' ');
+  if (parts.length === 2) {
+    return { value: parts[0], unit: parts[1] };
+  }
+  return { value: str, unit: '' };
+}
 </script>
 
 <template>
@@ -244,7 +253,10 @@ function formatItemSize(bytes: number): string {
             </div>
             <div class="result-stats">
               <div class="stat-item">
-                <span class="stat-value">{{ fastScanResult.total_size }}</span>
+                <span class="stat-value">
+                  {{ splitSize(fastScanResult.total_size).value }}
+                  <span class="unit">{{ splitSize(fastScanResult.total_size).unit }}</span>
+                </span>
                 <span class="stat-label">预计释放</span>
               </div>
               <div class="stat-divider"></div>
@@ -268,7 +280,10 @@ function formatItemSize(bytes: number): string {
             
             <div class="result-stats">
               <div class="stat-item">
-                <span class="stat-value">{{ cleanResult.total_freed }}</span>
+                <span class="stat-value">
+                  {{ splitSize(cleanResult.total_freed).value }}
+                  <span class="unit">{{ splitSize(cleanResult.total_freed).unit }}</span>
+                </span>
                 <span class="stat-label">释放空间</span>
               </div>
               <div class="stat-divider"></div>
@@ -634,28 +649,46 @@ body {
 .result-stats { 
   display: flex; 
   justify-content: center; 
-  align-items: baseline; 
+  align-items: center; 
   margin-bottom: 40px; 
 }
 
-.stat-item { flex: 1; }
+.stat-item { 
+  flex: 1; 
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .stat-value { 
-  display: block; 
-  font-size: 48px; 
+  display: flex; 
+  align-items: baseline;
+  justify-content: center;
+  font-size: 44px; 
   font-weight: 800; 
   color: var(--primary-color); 
-  letter-spacing: -1px;
-  line-height: 1.1;
+  letter-spacing: -1.5px;
+  line-height: 1;
   margin-bottom: 8px;
+  white-space: nowrap;
 }
-.stat-label { font-size: 15px; color: var(--text-sec); font-weight: 500; }
+
+.stat-value .unit {
+  font-size: 16px;
+  font-weight: 700;
+  margin-left: 4px;
+  letter-spacing: 0;
+  opacity: 0.9;
+}
+
+.stat-label { font-size: 14px; color: var(--text-sec); font-weight: 500; }
 
 .stat-divider { 
   width: 1px; 
-  height: 60px; 
+  height: 48px; 
   background-color: #F2F2F7; 
-  margin: 0 40px; 
-  align-self: center;
+  margin: 0 20px; 
+  flex-shrink: 0;
 }
 
 .main-btn { width: 220px; }