✨ Feature(custom): optimize upload modal ui

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