From 8c80d51be038b7f165c4d9784c578081ce54e115 Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Fri, 15 Aug 2025 10:37:36 +0800
Subject: [PATCH] :sparkles: Feature(custom): optimize upload modal ui

---
 src/renderer/App.vue                         |   6 -
 src/renderer/components/NavigationPage.vue   |  13 +-
 src/renderer/components/ToolboxHandler.vue   | 120 ++++++++++---------
 src/renderer/i18n/locales/en.json            |   1 +
 src/renderer/i18n/locales/zh-CN.json         |   1 +
 src/renderer/i18n/locales/zh-TW.json         |   1 +
 src/renderer/manage/pages/BucketPage.vue     |   2 +-
 src/renderer/manage/pages/css/BucketPage.css |   4 +-
 src/renderer/utils/ipcListenerManager.ts     |   0
 9 files changed, 75 insertions(+), 73 deletions(-)
 delete mode 100644 src/renderer/utils/ipcListenerManager.ts

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 8ac71d7d..addb0f68 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -54,13 +54,7 @@ html
   padding 0
   margin 0
   height 100%
-  font-family "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
 #app
   height 100%
   user-select none
-  overflow hidden
-.el-button-group
-  width 100%
-  .el-button
-    width 50%
 </style>
diff --git a/src/renderer/components/NavigationPage.vue b/src/renderer/components/NavigationPage.vue
index 85fc01e7..12458e55 100644
--- a/src/renderer/components/NavigationPage.vue
+++ b/src/renderer/components/NavigationPage.vue
@@ -40,20 +40,22 @@
 
     <div class="nav-menu">
       <router-link
-        :to="navigationItems[0].path"
+        v-for="item in navigationItems.slice(0, 3)"
+        :key="item.path"
+        :to="item.path"
         class="nav-item"
-        :title="`${navigationItems[0].name}`"
+        :title="`${item.name}`"
       >
         <div class="nav-icon-container">
           <component
-            :is="navigationItems[0].icon"
+            :is="item.icon"
             :size="18"
           />
         </div>
         <span
           v-if="!isCollapsed"
           class="nav-label"
-        >{{ navigationItems[0].name }}</span>
+        >{{ item.name }}</span>
       </router-link>
 
       <Disclosure
@@ -88,6 +90,7 @@
         v-else
         class="nav-item collapsed-picbed"
         :title="t('navigation.picbed')"
+        @click="isCollapsed = !isCollapsed"
       >
         <div class="nav-icon-container">
           <DatabaseIcon :size="18" />
@@ -95,7 +98,7 @@
       </div>
 
       <router-link
-        v-for="item in navigationItems.slice(1)"
+        v-for="item in navigationItems.slice(3)"
         :key="item.path"
         :to="item.path"
         class="nav-item"
diff --git a/src/renderer/components/ToolboxHandler.vue b/src/renderer/components/ToolboxHandler.vue
index e2db4ab6..6571120d 100644
--- a/src/renderer/components/ToolboxHandler.vue
+++ b/src/renderer/components/ToolboxHandler.vue
@@ -1,59 +1,61 @@
-<template>
-  <div class="toolbox-handler">
-    <button
-      class="handler-button"
-      @click="() => props.handler(value)"
-    >
-      {{ props.handlerText }}
-    </button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-
-interface IProps {
-  status: string
-  value: any
-  handlerText: string
-  handler: (value: any) => void | Promise<void>
-}
-
-const props = defineProps<IProps>()
-</script>
-<script lang="ts">
-export default {
-  name: 'ToolboxHandler'
-}
-</script>
-<style lang="stylus">
-.toolbox-handler {
-  margin-top: 0.75rem;
-}
-
-.handler-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  background: var(--color-accent);
-  color: white;
-  border: none;
-  border-radius: var(--radius-md);
-  font-size: 0.75rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-family: inherit;
-  text-decoration: none;
-}
-
-.handler-button:hover {
-  background: var(--color-accent-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
-}
-
-.handler-button:active {
-  transform: translateY(0);
-}
-</style>
+<template>
+  <div class="toolbox-handler">
+    <button
+      class="handler-button"
+      @click="() => props.handler(value)"
+    >
+      {{ props.handlerText }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+interface IProps {
+  status: string
+  value: any
+  handlerText: string
+  handler: (value: any) => void | Promise<void>
+}
+
+const props = defineProps<IProps>()
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ToolboxHandler'
+}
+</script>
+
+<style lang="stylus">
+.toolbox-handler {
+  margin-top: 0.75rem;
+}
+
+.handler-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: var(--color-accent);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-family: inherit;
+  text-decoration: none;
+}
+
+.handler-button:hover {
+  background: var(--color-accent-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.handler-button:active {
+  transform: translateY(0);
+}
+</style>
diff --git a/src/renderer/i18n/locales/en.json b/src/renderer/i18n/locales/en.json
index b4f1f809..8b68504b 100644
--- a/src/renderer/i18n/locales/en.json
+++ b/src/renderer/i18n/locales/en.json
@@ -620,6 +620,7 @@
         "prepareDownload": "Preparing to download, click to cancel",
         "keepDirStructure": "Keep directory structure",
         "noKeepDirStructure": "Do not keep directory structure",
+        "uploadFile": "Upload File",
         "dragUpload": "Drag and drop upload supports directories",
         "clickUpload": "Or: Click to select files",
         "readingDir": "Reading, please wait",
diff --git a/src/renderer/i18n/locales/zh-CN.json b/src/renderer/i18n/locales/zh-CN.json
index 64f1f94f..d78137af 100644
--- a/src/renderer/i18n/locales/zh-CN.json
+++ b/src/renderer/i18n/locales/zh-CN.json
@@ -615,6 +615,7 @@
         "prepareDownload": "准备下载中，点击取消",
         "keepDirStructure": "保持目录结构",
         "noKeepDirStructure": "不保持目录结构",
+        "uploadFile": "上传文件",
         "dragUpload": "拖拽上传 支持目录",
         "clickUpload": "或: 点击选择文件",
         "readingDir": "读取中，请稍候",
diff --git a/src/renderer/i18n/locales/zh-TW.json b/src/renderer/i18n/locales/zh-TW.json
index 02062c59..fcf517c4 100644
--- a/src/renderer/i18n/locales/zh-TW.json
+++ b/src/renderer/i18n/locales/zh-TW.json
@@ -615,6 +615,7 @@
         "prepareDownload": "正在準備下載，點擊取消",
         "keepDirStructure": "保持目錄結構",
         "noKeepDirStructure": "不保持目錄結構",
+        "uploadFile": "上傳檔案",
         "dragUpload": "拖曳上傳 支援目錄",
         "clickUpload": "或: 點擊選擇檔案",
         "readingDir": "讀取中，請稍候",
diff --git a/src/renderer/manage/pages/BucketPage.vue b/src/renderer/manage/pages/BucketPage.vue
index 6ef378bc..aa147de0 100644
--- a/src/renderer/manage/pages/BucketPage.vue
+++ b/src/renderer/manage/pages/BucketPage.vue
@@ -956,7 +956,7 @@
       >
         <div class="drawer-header">
           <h3 class="drawer-title">
-            Upload Files
+            {{ t('pages.manage.bucket.uploadFile') }}
           </h3>
           <div class="switch-container">
             <label class="switch">
diff --git a/src/renderer/manage/pages/css/BucketPage.css b/src/renderer/manage/pages/css/BucketPage.css
index 8b9ce9c6..cb220d4b 100644
--- a/src/renderer/manage/pages/css/BucketPage.css
+++ b/src/renderer/manage/pages/css/BucketPage.css
@@ -862,7 +862,7 @@ input:checked + .switch-slider:before {
 /* Drawer */
 .drawer-overlay {
   position: fixed;
-  top: 0;
+  top: 32px;
   left: 0;
   right: 0;
   bottom: 0;
@@ -873,7 +873,7 @@ input:checked + .switch-slider:before {
 }
 
 .drawer-container {
-  background: var(--color-surface);
+  background: var(--color-background-secondary);
   width: 60%;
   max-width: 800px;
   height: 100%;
diff --git a/src/renderer/utils/ipcListenerManager.ts b/src/renderer/utils/ipcListenerManager.ts
deleted file mode 100644
index e69de29b..00000000