✨ 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

@@ -1,59 +1,61 @@
-<template>
+<template>
-  <div class="toolbox-handler">
+  <div class="toolbox-handler">
-    <button
+    <button
-      class="handler-button"
+      class="handler-button"
-      @click="() => props.handler(value)"
+      @click="() => props.handler(value)"
-    >
+    >
-      {{ props.handlerText }}
+      {{ props.handlerText }}
-    </button>
+    </button>
-  </div>
+  </div>
-</template>
+</template>
-
+
-<script lang="ts" setup>
+<script lang="ts" setup>
-
+
-interface IProps {
+interface IProps {
-  status: string
+  status: string
-  value: any
+  value: any
-  handlerText: string
+  handlerText: string
-  handler: (value: any) => void | Promise<void>
+  handler: (value: any) => void | Promise<void>
-}
+}
-
+
-const props = defineProps<IProps>()
+const props = defineProps<IProps>()
-</script>
+</script>
-<script lang="ts">
+
-export default {
+<script lang="ts">
-  name: 'ToolboxHandler'
+export default {
-}
+  name: 'ToolboxHandler'
-</script>
+}
-<style lang="stylus">
+</script>
-.toolbox-handler {
+
-  margin-top: 0.75rem;
+<style lang="stylus">
-}
+.toolbox-handler {
-
+  margin-top: 0.75rem;
-.handler-button {
+}
-  display: inline-flex;
+
-  align-items: center;
+.handler-button {
-  gap: 0.5rem;
+  display: inline-flex;
-  padding: 0.5rem 1rem;
+  align-items: center;
-  background: var(--color-accent);
+  gap: 0.5rem;
-  color: white;
+  padding: 0.5rem 1rem;
-  border: none;
+  background: var(--color-accent);
-  border-radius: var(--radius-md);
+  color: white;
-  font-size: 0.75rem;
+  border: none;
-  font-weight: 500;
+  border-radius: var(--radius-md);
-  cursor: pointer;
+  font-size: 0.75rem;
-  transition: var(--transition-fast);
+  font-weight: 500;
-  font-family: inherit;
+  cursor: pointer;
-  text-decoration: none;
+  transition: var(--transition-fast);
-}
+  font-family: inherit;
-
+  text-decoration: none;
-.handler-button:hover {
+}
-  background: var(--color-accent-hover);
+
-  transform: translateY(-1px);
+.handler-button:hover {
-  box-shadow: var(--shadow-sm);
+  background: var(--color-accent-hover);
-}
+  transform: translateY(-1px);
-
+  box-shadow: var(--shadow-sm);
-.handler-button:active {
+}
-  transform: translateY(0);
+
-}
+.handler-button:active {
-</style>
+  transform: translateY(0);
+}
+</style>

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