✨ Feature(custom): optimize upload modal ui

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>

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"

src/renderer/components/ToolboxHandler.vue

@@ -20,11 +20,13 @@ interface IProps {
 
 const props = defineProps<IProps>()
 </script>
+
 <script lang="ts">
 export default {
   name: 'ToolboxHandler'
 }
 </script>
+
 <style lang="stylus">
 .toolbox-handler {
   margin-top: 0.75rem;

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",

src/renderer/i18n/locales/zh-CN.json

@@ -615,6 +615,7 @@
         "prepareDownload": "准备下载中，点击取消",
         "keepDirStructure": "保持目录结构",
         "noKeepDirStructure": "不保持目录结构",
+        "uploadFile": "上传文件",
         "dragUpload": "拖拽上传 支持目录",
         "clickUpload": "或: 点击选择文件",
         "readingDir": "读取中，请稍候",

src/renderer/i18n/locales/zh-TW.json

@@ -615,6 +615,7 @@
         "prepareDownload": "正在準備下載，點擊取消",
         "keepDirStructure": "保持目錄結構",
         "noKeepDirStructure": "不保持目錄結構",
+        "uploadFile": "上傳檔案",
         "dragUpload": "拖曳上傳 支援目錄",
         "clickUpload": "或: 點擊選擇檔案",
         "readingDir": "讀取中，請稍候",

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">

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%;