From b886005aabfde5c79ab645026689598dd9829304 Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Sat, 3 Jan 2026 16:02:22 +0800
Subject: [PATCH] :sparkles: Feature(custom): optimize bucket page display

---
 src/renderer/manage/pages/BucketPage.vue     |  9 ++---
 src/renderer/manage/pages/css/BucketPage.css | 35 +++++++++++++++-----
 src/renderer/manage/pages/css/ManageMain.css |  5 ++-
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/renderer/manage/pages/BucketPage.vue b/src/renderer/manage/pages/BucketPage.vue
index d4268191..9113c296 100644
--- a/src/renderer/manage/pages/BucketPage.vue
+++ b/src/renderer/manage/pages/BucketPage.vue
@@ -160,11 +160,11 @@
         <div class="control-left">
           <!-- File Info -->
           <div class="file-info">
-            <div class="file-info-item">
+            <div class="file-info-box">
               <FileIcon class="action-icon" />
               <span>{{ `${t('pages.manage.bucket.fileNum', { num: currentPageFilesInfo.length })}` }}</span>
             </div>
-            <div class="file-info-item">
+            <div class="file-info-box">
               <HardDriveIcon class="action-icon" />
               <span>{{ `${t('pages.manage.bucket.pageFileSize', { size: calculateAllFileSize })}` }}</span>
             </div>
@@ -289,11 +289,11 @@
 
       <div class="fullscreen-header-center">
         <div class="file-info">
-          <div class="file-info-item">
+          <div class="file-info-box">
             <FileIcon class="action-icon" />
             <span>{{ `${t('pages.manage.bucket.fileNum', { num: currentPageFilesInfo.length })}` }}</span>
           </div>
-          <div class="file-info-item">
+          <div class="file-info-box">
             <span>{{ `${t('pages.manage.bucket.pageFileSize', { size: calculateAllFileSize })}` }}</span>
           </div>
         </div>
@@ -1235,6 +1235,7 @@ import {
   FolderPlusIcon,
   HardDriveIcon,
   HomeIcon,
+  ImageIcon,
   InfoIcon,
   LinkIcon,
   RefreshCwIcon,
diff --git a/src/renderer/manage/pages/css/BucketPage.css b/src/renderer/manage/pages/css/BucketPage.css
index d971d7fa..f4d2f2d3 100644
--- a/src/renderer/manage/pages/css/BucketPage.css
+++ b/src/renderer/manage/pages/css/BucketPage.css
@@ -4,15 +4,14 @@
   position: relative;
   display: flex;
   overflow: hidden;
-  padding: 1rem;
-  height: 100vh;
+  height: 100%;
+  padding: 0.25rem;
   flex-direction: column;
   gap: 1rem;
 }
 
 /* Header Card */
 .bucket-card {
-  overflow: hidden;
   border: 1px solid var(--color-border-secondary);
   border-radius: var(--radius-xl);
   background: var(--color-surface);
@@ -228,7 +227,7 @@
 .breadcrumb-container {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.2rem;
   padding: 0.75rem 1rem;
   flex-wrap: wrap;
 }
@@ -236,7 +235,7 @@
 .breadcrumb-item {
   display: flex;
   align-items: center;
-  border: 1px solid var(--color-border);
+  border: 0 solid var(--color-border);
   font-size: 0.875rem;
   color: var(--color-text-secondary);
   background: var(--color-surface-elevated);
@@ -256,7 +255,8 @@
 }
 
 .breadcrumb-separator {
-  margin: 0 0.125rem;
+  width: 16px;
+  height: 16px;
   color: var(--color-text-tertiary);
 }
 
@@ -269,7 +269,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 1rem;
   gap: 1rem;
   flex-wrap: wrap;
 }
@@ -289,6 +289,18 @@
   color: var(--color-text-secondary);
 }
 
+.file-info-box {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 0.25rem;
+  border: 0 solid var(--color-border-secondary);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+}
+
+
 .control-center {
   display: flex;
   align-items: center;
@@ -404,6 +416,13 @@
   flex-direction: column;
 }
 
+/* Keep overflow hidden for specific bucket cards that need it */
+.content-area,
+.breadcrumb-card,
+.control-panel-card {
+  overflow: hidden;
+}
+
 .content-area::-webkit-scrollbar {
   width: 8px;
 }
@@ -1257,7 +1276,7 @@ input:checked + .switch-slider::before {
 .fullscreen-breadcrumb {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.2rem;
   flex-wrap: wrap;
 }
 
diff --git a/src/renderer/manage/pages/css/ManageMain.css b/src/renderer/manage/pages/css/ManageMain.css
index 618fd959..ecfffb3e 100644
--- a/src/renderer/manage/pages/css/ManageMain.css
+++ b/src/renderer/manage/pages/css/ManageMain.css
@@ -6,8 +6,7 @@ html, body {
 
 .manage-container {
   display: flex;
-  padding: 0.75rem;
-  height: 97%;
+  height: calc(100vh - 32px);
   flex-direction: column;
 }
 
@@ -75,7 +74,7 @@ html, body {
 
 .main-layout {
   display: flex;
-  height:99%;
+  height:100%;
 }
 
 .sidebar {