From a56906867855d472188f6868814014636b0eccc7 Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Sat, 10 Jan 2026 10:10:00 +0800
Subject: [PATCH] :sparkles: Feature(custom): imporve page loading performance
 and remove duplicated init call

---
 src/main/events/remotes/menu.ts               |   4 +-
 src/main/utils/getPicBeds.ts                  |   9 +-
 src/renderer/App.vue                          |  14 +-
 .../components/ImageProcessSetting.vue        |  71 ++-
 src/renderer/components/NavigationPage.vue    | 544 +-----------------
 src/renderer/components/PerPicbedSetting.vue  |   5 +-
 src/renderer/components/UnifiedConfigForm.vue | 432 +-------------
 .../components/css/NavigationPage.css         | 518 +++++++++++++++++
 .../components/css/UnifiedConfigForm.css      | 381 ++++++++++++
 src/renderer/components/ui/TitleBar.vue       |   2 +-
 src/renderer/hooks/useGlobal.ts               |  44 ++
 src/renderer/hooks/useStore.ts                |   7 -
 src/renderer/i18n/locales/en.json             |   2 +
 src/renderer/i18n/locales/zh-CN.json          |   2 +
 src/renderer/i18n/locales/zh-TW.json          |   2 +
 src/renderer/pages/Gallery.vue                |   5 +-
 src/renderer/pages/MiniPage.vue               |   2 +-
 src/renderer/pages/PicGoSetting.vue           |  18 +-
 src/renderer/pages/Plugin.vue                 |   9 +-
 src/renderer/pages/Upload.vue                 |  66 +--
 src/renderer/pages/UploaderConfigPage.vue     |  13 +-
 src/renderer/utils/global.ts                  |  18 -
 22 files changed, 1092 insertions(+), 1076 deletions(-)
 create mode 100644 src/renderer/components/css/NavigationPage.css
 create mode 100644 src/renderer/components/css/UnifiedConfigForm.css
 create mode 100644 src/renderer/hooks/useGlobal.ts
 delete mode 100644 src/renderer/hooks/useStore.ts
 delete mode 100644 src/renderer/utils/global.ts

diff --git a/src/main/events/remotes/menu.ts b/src/main/events/remotes/menu.ts
index 9bb4548f..114bf0c7 100644
--- a/src/main/events/remotes/menu.ts
+++ b/src/main/events/remotes/menu.ts
@@ -136,7 +136,7 @@ const buildMainPageMenu = (win: BrowserWindow) => {
 }
 
 const buildSecondPicBedMenu = () => {
-  const picBeds = getPicBeds()
+  const picBeds = getPicBeds().picBeds
   const secondUploader = picgo.getConfig(configPaths.picBed.secondUploader)
   const defaultSecondUploaderId = picgo.getConfig(configPaths.picBed.secondUploaderId)
   const currentPicBedName = picBeds.find(item => item.type === secondUploader)?.name
@@ -189,7 +189,7 @@ const buildSecondPicBedMenu = () => {
 }
 
 const buildPicBedListMenu = () => {
-  const picBeds = getPicBeds()
+  const picBeds = getPicBeds().picBeds
   const currentPicBed = picgo.getConfig(configPaths.picBed.uploader)
   const currentPicBedName = picBeds.find(item => item.type === currentPicBed)?.name
   const picBedConfigList = picgo.getConfig<IUploaderConfig>('uploader')
diff --git a/src/main/utils/getPicBeds.ts b/src/main/utils/getPicBeds.ts
index 94b6a0e6..3a6fffb7 100644
--- a/src/main/utils/getPicBeds.ts
+++ b/src/main/utils/getPicBeds.ts
@@ -4,6 +4,13 @@ import { configPaths } from '~/utils/configPaths'
 
 const getPicBeds = () => {
   const picBedTypes = picgo.helper.uploader.getIdList()
+  const defaultPicBed =
+    picgo.getConfig<string>(configPaths.picBed.uploader) ||
+    picgo.getConfig<string>(configPaths.picBed.current) ||
+    'smms'
+  const defaultConfig = picgo.getConfig<IStringKeyMap>(`picBed.${defaultPicBed}`) || {}
+  const defaultId = defaultConfig._id || ''
+  const defaultConfigName = defaultConfig._configName || ''
   const picBedFromDB = picgo.getConfig<IPicBedType[]>(configPaths.picBed.list) || []
   const picBeds = picBedTypes
     .map((item: string) => {
@@ -20,7 +27,7 @@ const getPicBeds = () => {
       }
       return 0
     }) as IPicBedType[]
-  return picBeds
+  return { picBeds, defaultPicBed, defaultId, defaultConfigName }
 }
 
 export default getPicBeds
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 833990c7..28f11c03 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -6,26 +6,20 @@
 </template>
 
 <script lang="ts" setup>
-import type { IConfig } from 'piclist'
 import { onBeforeMount, onMounted } from 'vue'
 
 import UIServiceProvider from '@/components/ui/UIServiceProvider.vue'
 import { useAppStore } from '@/hooks/useAppStore'
 import { useATagClick } from '@/hooks/useATagClick'
-import { useStore } from '@/hooks/useStore'
-import { getConfig } from '@/utils/dataSender'
-import { pageReloadCount } from '@/utils/global'
+import { pageReloadCount, usePicBed } from '@/hooks/useGlobal'
 
 useATagClick()
 
-const store = useStore()
 const appStore = useAppStore()
+const { updatePicBeds } = usePicBed()
 
-onBeforeMount(async () => {
-  const config = await getConfig<IConfig>()
-  if (config) {
-    store?.setDefaultPicBed(config?.picBed?.uploader || config?.picBed?.current || 'smms')
-  }
+onBeforeMount(() => {
+  updatePicBeds()
 })
 
 onMounted(async () => {
diff --git a/src/renderer/components/ImageProcessSetting.vue b/src/renderer/components/ImageProcessSetting.vue
index 9849e507..8068e72b 100644
--- a/src/renderer/components/ImageProcessSetting.vue
+++ b/src/renderer/components/ImageProcessSetting.vue
@@ -21,26 +21,6 @@
       <transition name="fade-slide" mode="out-in">
         <!-- General Settings Tab -->
         <div v-if="activeTab === 'general'" key="general" class="tab-content">
-          <div class="settings-section">
-            <div class="section-header">
-              <div class="section-icon">
-                <FileText :size="20" />
-              </div>
-              <div class="section-title-group">
-                <h2>{{ $t('pages.imageProcess.general.skipProcessExtList') }}</h2>
-              </div>
-            </div>
-            <div class="form-group">
-              <textarea
-                v-model="skipProcessForm.skipProcessExtList"
-                class="form-textarea"
-                rows="3"
-                :placeholder="'zip,rar,7z,tar,gz'"
-              />
-              <small>{{ $t('pages.imageProcess.general.skipProcessExtListPlaceholder') }}</small>
-            </div>
-          </div>
-
           <div class="settings-section">
             <div class="section-header">
               <div class="section-icon">
@@ -62,6 +42,7 @@
                 </label>
 
                 <PerPicbedSetting
+                  v-if="!configId"
                   :map-field="compressForm.isRemoveExifMap"
                   :default-value="defaultCompressSetting.isRemoveExif"
                   field-name="isRemoveExif"
@@ -892,6 +873,29 @@
             </div>
           </div>
         </div>
+
+        <!-- Skip Process Tab -->
+        <div v-else-if="activeTab === 'skipProcess'" key="skipProcess" class="tab-content">
+          <div class="settings-section">
+            <div class="section-header">
+              <div class="section-icon">
+                <FileText :size="20" />
+              </div>
+              <div class="section-title-group">
+                <h2>{{ $t('pages.imageProcess.general.skipProcessExtList') }}</h2>
+              </div>
+            </div>
+            <div class="form-group">
+              <textarea
+                v-model="skipProcessForm.skipProcessExtList"
+                class="form-textarea"
+                rows="3"
+                :placeholder="'zip,rar,7z,tar,gz'"
+              />
+              <small>{{ $t('pages.imageProcess.general.skipProcessExtListPlaceholder') }}</small>
+            </div>
+          </div>
+        </div>
       </transition>
     </div>
   </div>
@@ -933,7 +937,6 @@ import { useI18n } from 'vue-i18n'
 
 import { configPaths } from '@/utils/configPaths'
 import { getConfig, saveConfig } from '@/utils/dataSender'
-import { updatePicBedGlobal } from '@/utils/global'
 
 import PerPicbedSetting from './PerPicbedSetting.vue'
 
@@ -944,6 +947,13 @@ const activeTab = ref('general')
 const tabRefs = useTemplateRef('tabRefs')
 const tabIndicatorStyle = ref<Record<string, string>>({})
 
+interface IProps {
+  // 传递配置ID以加载特定配置
+  configId: string
+}
+
+const { configId } = defineProps<IProps>()
+
 function updateTabIndicator() {
   if (!tabRefs.value || tabRefs.value.length === 0) return
   const activeIndex = tabs.value.findIndex(tab => tab.id === activeTab.value)
@@ -985,6 +995,16 @@ const tabs = computed(() => [
     label: t('pages.imageProcess.transformSettings'),
     icon: RotateCw,
   },
+  {
+    id: 'skipProcess',
+    label: t('pages.imageProcess.skipProcessSettings'),
+    icon: FileText,
+  },
+  {
+    id: 'rename',
+    label: t('pages.imageProcess.renameSettings'),
+    icon: Sliders,
+  },
 ])
 
 const waterMarkPositionMap = new Map([
@@ -1193,13 +1213,10 @@ function safeSetMapValue(form: any, fieldName: string, picbedType: string, value
   }
 }
 
-onBeforeMount(async () => {
-  await updatePicBedGlobal()
-  await initData()
-
-  setTimeout(() => {
+onBeforeMount(() => {
+  initData().then(() => {
     isInitialized.value = true
-  }, 100)
+  })
 })
 
 watch(
diff --git a/src/renderer/components/NavigationPage.vue b/src/renderer/components/NavigationPage.vue
index 837aee18..e99d46f9 100644
--- a/src/renderer/components/NavigationPage.vue
+++ b/src/renderer/components/NavigationPage.vue
@@ -120,7 +120,7 @@
                     >
                       <ListboxOptions class="listbox-options">
                         <ListboxOption
-                          v-for="picbed in picBedGlobal"
+                          v-for="picbed in picBedG"
                           :key="picbed.type"
                           v-slot="{ active, selected }"
                           :value="picbed.type"
@@ -173,6 +173,7 @@ import {
   TransitionChild,
   TransitionRoot,
 } from '@headlessui/vue'
+import { useStorage } from '@vueuse/core'
 import { pick } from 'lodash-es'
 import {
   BriefcaseBusiness,
@@ -194,21 +195,23 @@ import { computed, nextTick, onBeforeMount, onBeforeUnmount, reactive, Ref, ref,
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
+import { usePicBed } from '@/hooks/useGlobal'
 import useMessage from '@/hooks/useMessage'
 import * as config from '@/router/config'
 import { SHOW_MAIN_PAGE_QRCODE } from '@/utils/constant'
 import { getConfig } from '@/utils/dataSender'
 import { IRPCActionType } from '@/utils/enum'
-import { picBedGlobal, updatePicBedGlobal } from '@/utils/global'
 
 import ThemeSwitcher from './ui/ThemeSwitcher.vue'
 const version = ref(pkg.version)
-const isCollapsed = ref(false)
+const isCollapsed = useStorage('navigation-collapsed', false)
 
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 const message = useMessage()
+const { picBedG } = usePicBed()
+
 const routerConfig = reactive(config)
 const qrcodeVisible = ref(false)
 const choosedPicBedForQRCode: Ref<string[]> = ref([])
@@ -216,11 +219,6 @@ const picBedConfigString = ref('')
 
 let removeIpcListener: () => void = () => {}
 
-// Save collapsed state to localStorage when it changes
-watch(isCollapsed, newValue => {
-  localStorage.setItem('navigation-collapsed', JSON.stringify(newValue))
-})
-
 watch(
   () => choosedPicBedForQRCode,
   val => {
@@ -235,7 +233,7 @@ watch(
   { deep: true },
 )
 
-const visiblePicBeds = computed(() => picBedGlobal.value.filter(item => item.visible))
+const visiblePicBeds = computed(() => picBedG.value.filter(item => item.visible))
 
 const qrCodeHandler = () => {
   qrcodeVisible.value = true
@@ -279,13 +277,6 @@ function openGithubPage() {
 }
 
 onBeforeMount(() => {
-  // Load collapsed state from localStorage
-  const savedState = localStorage.getItem('navigation-collapsed')
-  if (savedState !== null) {
-    isCollapsed.value = JSON.parse(savedState)
-  }
-
-  updatePicBedGlobal()
   removeIpcListener = window.electron.ipcRendererOn(SHOW_MAIN_PAGE_QRCODE, qrCodeHandler)
 })
 
@@ -294,523 +285,4 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style scoped>
-.navigation {
-  display: flex;
-  overflow: hidden;
-  border-right: 1px solid rgb(229 231 235);
-  width: 150px;
-  height: 100vh;
-  background: var(--color-background-secondary);
-  transition: width 0.3s ease;
-  flex-direction: column;
-}
-
-.navigation.collapsed {
-  width: 60px;
-}
-
-:root.dark .navigation,
-:root.auto.dark .navigation {
-  border-right-color: var(--color-background-secondary);
-  background: var(--color-background-secondary);
-}
-
-.title-bar {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  padding: 1.25rem 1rem;
-  background: var(--color-background-secondary);
-}
-
-.navigation.collapsed .title-bar {
-  padding: 1rem 0.5rem;
-}
-
-.collapse-button {
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: 4px;
-  padding: 4px;
-  color: var(--color-text-primary);
-  background: transparent;
-  transition: all 0.2s ease;
-  transform: translateY(-50%);
-  cursor: pointer;
-}
-
-.collapse-button:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.navigation.collapsed .collapse-button {
-  position: static;
-  transform: none;
-}
-
-:root.dark .title-bar,
-:root.auto.dark .title-bar {
-  border-bottom-color: var(--color-border);
-  background: var(--color-background-secondary);
-}
-
-.app-title {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.app-text {
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--color-text-primary);
-  letter-spacing: -0.025em;
-}
-
-.app-text:hover {
-  cursor: pointer;
-  color: var(--color-blue-common);
-}
-
-.app-version {
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 3px 8px;
-  font-size: 10px;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  background: var(--color-surface-elevated);
-}
-
-.theme-section {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  padding: 0.75rem;
-}
-
-:root.dark .theme-section,
-:root.auto.dark .theme-section {
-  border-bottom-color: var(--color-border);
-}
-
-.nav-menu {
-  overflow-y: auto;
-  padding: 1rem 0;
-  min-height: 0;
-  flex: 1;
-}
-
-.nav-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-decoration: none;
-  color: rgb(75 85 99);
-  transition: all 0.2s ease;
-  gap: 0.75rem;
-  cursor: pointer;
-}
-
-.navigation.collapsed .nav-item {
-  justify-content: center;
-  padding: 0.75rem 0.5rem;
-  gap: 0;
-}
-
-.navigation.collapsed .nav-label {
-  display: none;
-}
-
-:root.dark .nav-item,
-:root.auto.dark .nav-item {
-  color: rgb(209 213 219);
-}
-
-.nav-item:hover {
-  color: rgb(17 24 39);
-  background: rgb(243 244 246);
-}
-
-:root.dark .nav-item:hover,
-:root.auto.dark .nav-item:hover {
-  color: rgb(243 244 246);
-  background: rgb(55 65 81);
-}
-
-.nav-item.router-link-active {
-  border-right: 3px solid rgb(99 102 241);
-  color: rgb(99 102 241);
-  background: rgb(239 246 255);
-}
-
-:root.dark .nav-item.router-link-active,
-:root.auto.dark .nav-item.router-link-active {
-  border-right-color: rgb(129 140 248);
-  color: rgb(129 140 248);
-  background: rgb(30 58 138 / 20%);
-}
-
-.nav-icon-container {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-}
-
-.sidebar-footer {
-  border-top: 1px solid var(--color-border);
-  padding: 12px;
-}
-
-.footer-button {
-  position: fixed;
-  bottom: 4px;
-  left: 4px;
-  border: none;
-  border-radius: 6px;
-  padding: 8px;
-  color: var(--color-text-secondary);
-  background: transparent;
-  cursor: pointer;
-}
-
-.footer-button:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.nav-submenu {
-  position: relative;
-  justify-content: center;
-  margin-top: 4px;
-}
-
-.submenu-trigger {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  padding: 0.75rem 1rem;
-  width: 100%;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-decoration: none;
-  color: rgb(75 85 99);
-  background: transparent;
-  transition: all 0.2s ease;
-  gap: 0.75rem;
-  cursor: pointer;
-}
-
-:root.dark .submenu-trigger,
-:root.auto.dark .submenu-trigger {
-  color: rgb(209 213 219);
-}
-
-.submenu-trigger:hover {
-  color: rgb(17 24 39);
-  background: rgb(243 244 246);
-}
-
-:root.dark .submenu-trigger:hover,
-:root.auto.dark .submenu-trigger:hover {
-  color: rgb(243 244 246);
-  background: rgb(55 65 81);
-}
-
-.submenu-trigger .nav-icon-container {
-  flex-shrink: 0;
-}
-
-.submenu-trigger span {
-  flex-shrink: 0;
-}
-
-.submenu-arrow {
-  position: absolute;
-  right: 1rem;
-  transition: transform 0.2s ease;
-  flex-shrink: 0;
-}
-
-.rotate-180 {
-  transform: rotate(180deg);
-}
-
-.submenu-panel {
-  display: flex;
-  margin-top: 2px;
-  padding-left: 2.75rem;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.submenu-item {
-  display: flex;
-  align-items: center;
-  border-radius: 6px;
-  padding: 0.5rem 1rem;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-decoration: none;
-  color: var(--color-text-secondary);
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.submenu-item:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.collapsed-picbed {
-  cursor: default;
-}
-
-.collapsed-picbed:hover {
-  color: rgb(17 24 39);
-  background: rgb(243 244 246);
-}
-
-:root.dark .collapsed-picbed:hover,
-:root.auto.dark .collapsed-picbed:hover {
-  color: rgb(243 244 246);
-  background: rgb(55 65 81);
-}
-
-.qr-dialog {
-  position: fixed;
-  z-index: 50;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow-y: auto;
-  inset: 0;
-}
-
-.dialog-container {
-  position: fixed;
-  z-index: 50;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow-y: auto;
-  padding: 16px;
-  min-height: 100vh;
-  inset: 0;
-}
-
-.dialog-panel {
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: 16px;
-  width: 100%;
-  max-width: 500px;
-  background: var(--color-background-primary);
-  box-shadow: var(--shadow-md);
-}
-
-.dialog-title {
-  margin: 0;
-  padding: 20px 24px 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.dialog-content {
-  padding: 20px 24px;
-}
-
-.form-group {
-  margin-bottom: 20px;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.listbox-container {
-  position: relative;
-}
-
-.listbox-button {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius);
-  padding: 12px 16px;
-  width: 100%;
-  font-size: 14px;
-  color: var(--color-text-primary);
-  background: var(--color-surface);
-  transition: var(--transition);
-  cursor: pointer;
-}
-
-.listbox-button:hover {
-  border-color: var(--color-accent);
-}
-
-.placeholder {
-  color: var(--color-text-secondary);
-}
-
-.selected-count {
-  color: var(--color-text-primary);
-}
-
-.listbox-arrow {
-  color: var(--color-text-secondary);
-}
-
-.listbox-options {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  left: 0;
-  z-index: 10;
-  overflow-y: auto;
-  margin-top: 4px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius);
-  max-height: 300px;
-  background: var(--color-background-primary);
-  box-shadow: var(--shadow-md);
-}
-
-.listbox-option {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  font-size: 14px;
-  color: var(--color-text-primary);
-  transition: var(--transition);
-  cursor: pointer;
-}
-
-.listbox-option.active {
-  background: var(--color-surface-elevated);
-}
-
-.listbox-option.selected {
-  color: white;
-  background: var(--color-accent);
-}
-
-.copy-button {
-  display: flex;
-  align-items: center;
-  margin-top: 12px;
-  border: none;
-  border-radius: var(--border-radius);
-  padding: 10px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  color: white;
-  background: var(--color-accent);
-  transition: var(--transition);
-  gap: 8px;
-  cursor: pointer;
-}
-
-.copy-button:hover {
-  background: var(--color-accent-hover);
-}
-
-.qr-container {
-  display: flex;
-  justify-content: center;
-  padding: 20px 0;
-}
-
-.qr-code {
-  overflow: hidden;
-  border-radius: var(--border-radius);
-  box-shadow: var(--shadow-sm);
-}
-
-.dialog-actions {
-  display: flex;
-  justify-content: flex-end;
-  padding: 0 24px 20px;
-  gap: 12px;
-}
-
-.cancel-button {
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius);
-  padding: 10px 20px;
-  font-size: 14px;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition);
-  cursor: pointer;
-}
-
-.cancel-button:hover {
-  background: var(--color-border);
-}
-
-/* Responsive Design */
-@media (width <= 768px) {
-  .navigation {
-    width: 60px;
-  }
-
-  .nav-label {
-    display: none;
-  }
-
-  .app-title {
-    display: none;
-  }
-
-  .collapse-button {
-    display: none;
-  }
-}
-
-/* Scrollbar Styling */
-::-webkit-scrollbar {
-  display: none;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 0;
-  background: var(--color-border);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-secondary);
-}
-</style>
+<style scoped src="./css/NavigationPage.css"></style>
diff --git a/src/renderer/components/PerPicbedSetting.vue b/src/renderer/components/PerPicbedSetting.vue
index 1d4da952..761eb4e7 100644
--- a/src/renderer/components/PerPicbedSetting.vue
+++ b/src/renderer/components/PerPicbedSetting.vue
@@ -112,9 +112,10 @@ import { Settings } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { picBedGlobal } from '@/utils/global'
+import { usePicBed } from '@/hooks/useGlobal'
 
 const { t } = useI18n()
+const { picBedG } = usePicBed()
 
 interface SelectOption {
   value: string | number
@@ -166,7 +167,7 @@ const emit = defineEmits<{
 const showSettings = ref(false)
 
 const availablePicbeds = computed(() => {
-  return picBedGlobal.value.map(picbed => ({
+  return picBedG.value.map(picbed => ({
     type: picbed.type,
     name: picbed.name,
   }))
diff --git a/src/renderer/components/UnifiedConfigForm.vue b/src/renderer/components/UnifiedConfigForm.vue
index 9743d5ab..51e7c0c5 100644
--- a/src/renderer/components/UnifiedConfigForm.vue
+++ b/src/renderer/components/UnifiedConfigForm.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div id="config-form" :class="[{ white: props.colorMode === 'white' }]">
+  <div id="config-form" :class="[{ white: colorMode === 'white' }]">
     <form class="config-form" @submit.prevent>
       <!-- Config Name Field -->
       <div class="form-group required">
@@ -125,14 +125,14 @@
 import { cloneDeep, union } from 'lodash-es'
 import { ChevronDownIcon, Info } from 'lucide-vue-next'
 import { marked } from 'marked'
-import { reactive, ref, toRefs, watch } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
 import { getConfig } from '@/utils/dataSender'
 
 interface IProps {
-  config: any[]
+  config: IPicGoPluginConfig[]
   type: 'uploader' | 'transformer' | 'plugin'
   id: string
   colorMode?: 'white' | 'dark'
@@ -140,11 +140,14 @@ interface IProps {
   showTooltips?: boolean
 }
 
-const props = withDefaults(defineProps<IProps>(), {
-  colorMode: undefined,
-  mode: 'picbed',
-  showTooltips: true,
-})
+const {
+  config: configProp,
+  type,
+  id,
+  colorMode = undefined,
+  mode = 'picbed',
+  showTooltips = true,
+} = defineProps<IProps>()
 
 const $route = useRoute()
 const { t } = useI18n()
@@ -156,9 +159,9 @@ const visibleTooltips = reactive<Record<string, boolean>>({})
 
 // Watch for config changes
 watch(
-  toRefs(props.config),
-  (val: IPicGoPluginConfig[]) => {
-    handleConfig(val)
+  () => configProp,
+  newVal => {
+    handleConfig(newVal)
   },
   {
     deep: true,
@@ -191,10 +194,7 @@ function validateForm(): boolean {
       errors[config.name] = error
     }
   })
-
-  Object.keys(validationErrors).forEach(key => {
-    delete validationErrors[key]
-  })
+  for (const key in validationErrors) delete validationErrors[key]
 
   Object.assign(validationErrors, errors)
 
@@ -256,15 +256,15 @@ function transformMarkdownToHTML(markdown: string) {
 }
 
 function getConfigType() {
-  switch (props.type) {
+  switch (type) {
     case 'plugin': {
-      return props.id
+      return id
     }
     case 'uploader': {
-      return `picBed.${props.id}`
+      return `picBed.${id}`
     }
     case 'transformer': {
-      return `transformer.${props.id}`
+      return `transformer.${id}`
     }
     default:
       return 'unknown'
@@ -273,14 +273,14 @@ function getConfigType() {
 
 async function handleConfig(val: IPicGoPluginConfig[]) {
   const config = await getCurConfigFormData()
-  const configId = props.mode === 'picbed' ? $route.params.configId : null
+  const configId = mode === 'picbed' ? $route.params.configId : null
 
   Object.assign(ruleForm, config)
 
   if (val.length > 0) {
     configList.value = cloneDeep(val).map(item => {
       // For plugin mode, don't check configId
-      if (props.mode === 'plugin' || !configId) {
+      if (mode === 'plugin' || !configId) {
         let defaultValue = item.default !== undefined ? item.default : item.type === 'checkbox' ? [] : null
 
         if (item.type === 'checkbox') {
@@ -314,11 +314,11 @@ async function handleConfig(val: IPicGoPluginConfig[]) {
 }
 
 async function getCurConfigFormData() {
-  if (props.mode === 'plugin') {
-    return (await getConfig<IStringKeyMap>(`${props.id}`)) || {}
+  if (mode === 'plugin') {
+    return (await getConfig<IStringKeyMap>(`${id}`)) || {}
   } else {
     const configId = $route.params.configId
-    const curTypeConfigList = (await getConfig<IStringKeyMap[]>(`uploader.${props.id}.configList`)) || []
+    const curTypeConfigList = (await getConfig<IStringKeyMap[]>(`uploader.${id}.configList`)) || []
     return curTypeConfigList.find(i => i._id === configId) || {}
   }
 }
@@ -339,386 +339,4 @@ defineExpose({
 })
 </script>
 
-<style scoped>
-#config-form {
-  width: 100%;
-}
-
-.config-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-/* Form Groups */
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.form-group.required .form-label::after {
-  content: ' *';
-  color: var(--color-error, #ef4444);
-}
-
-.form-label-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.form-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  line-height: 1.25;
-}
-
-.form-control {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-/* Tooltip Styles */
-.tooltip-wrapper {
-  position: relative;
-}
-
-.info-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  padding: 2px;
-  color: var(--color-text-secondary);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.info-icon:hover {
-  color: var(--color-accent);
-  background: rgb(0 122 255 / 10%);
-}
-
-.tooltip-content {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.75rem;
-  min-width: 200px;
-  max-width: 300px;
-  font-size: 0.75rem;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  box-shadow: var(--shadow-lg);
-  line-height: 1.4;
-}
-
-/* Input Styles */
-.form-input {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.75rem 1rem;
-  width: 100%;
-  font-size: 0.875rem;
-  font-family: inherit;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-}
-
-.form-input:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
-}
-
-.form-input::placeholder {
-  color: var(--color-text-secondary);
-}
-
-.form-input.error {
-  border-color: var(--color-error, #ef4444);
-}
-
-.form-input.error:focus {
-  box-shadow: 0 0 0 2px rgb(239 68 68 / 20%);
-}
-
-/* Select Styles */
-.select-wrapper {
-  position: relative;
-}
-
-.form-select {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.75rem 2.5rem 0.75rem 1rem;
-  width: 100%;
-  font-size: 0.875rem;
-  font-family: inherit;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-  appearance: none;
-  cursor: pointer;
-}
-
-.form-select:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
-}
-
-.form-select.error {
-  border-color: var(--color-error, #ef4444);
-}
-
-.form-select.error:focus {
-  box-shadow: 0 0 0 2px rgb(239 68 68 / 20%);
-}
-
-.select-arrow {
-  position: absolute;
-  top: 50%;
-  right: 1rem;
-  color: var(--color-text-secondary);
-  transition: var(--transition-fast);
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-
-.select-wrapper:hover .select-arrow,
-.form-select:focus + .select-arrow {
-  color: var(--color-accent);
-}
-
-/* Checkbox Group Styles */
-.checkbox-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 0.5rem 0;
-}
-
-.checkbox-item {
-  display: flex;
-  align-items: center;
-}
-
-.checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  transition: var(--transition-fast);
-}
-
-.checkbox-label:hover {
-  color: var(--color-accent);
-}
-
-.checkbox-input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.checkbox-custom {
-  position: relative;
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  width: 1.25rem;
-  height: 1.25rem;
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-  flex-shrink: 0;
-}
-
-.checkbox-custom::after {
-  position: absolute;
-  top: 0;
-  left: 3px;
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  width: 6px;
-  height: 10px;
-  opacity: 0;
-  transition: var(--transition-fast);
-  content: '';
-  transform: rotate(45deg);
-}
-
-.checkbox-input:checked + .checkbox-custom {
-  border-color: var(--color-accent);
-  background: var(--color-accent);
-}
-
-.checkbox-input:checked + .checkbox-custom::after {
-  opacity: 1;
-}
-
-.checkbox-input:focus + .checkbox-custom {
-  box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
-}
-
-.checkbox-text {
-  flex: 1;
-}
-
-/* Switch Styles */
-.switch-label {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-}
-
-.switch-input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.switch-slider {
-  position: relative;
-  border-radius: 0.75rem;
-  width: 3rem;
-  height: 1.5rem;
-  background: var(--color-border);
-  transition: var(--transition-fast);
-  flex-shrink: 0;
-}
-
-.switch-button {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  border-radius: 50%;
-  width: 1.25rem;
-  height: 1.25rem;
-  background: white;
-  box-shadow: var(--shadow-sm);
-  transition: var(--transition-fast);
-}
-
-.switch-input:checked + .switch-slider {
-  background: var(--color-accent);
-}
-
-.switch-input:checked + .switch-slider .switch-button {
-  transform: translateX(1.5rem);
-}
-
-.switch-input:focus + .switch-slider {
-  box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
-}
-
-.switch-text {
-  font-weight: 500;
-  color: var(--color-text-secondary);
-}
-
-.switch-input:checked ~ .switch-text {
-  color: var(--color-accent);
-}
-
-/* Error Message */
-.error-message {
-  margin-top: 0.25rem;
-  font-size: 0.75rem;
-  color: var(--color-error, #ef4444);
-}
-
-/* White theme adjustments */
-.white .form-input,
-.white .form-select {
-  border-color: #dddddd;
-  background: white;
-}
-
-.white .form-input:focus,
-.white .form-select:focus {
-  border-color: var(--color-accent);
-}
-
-.white .checkbox-custom {
-  border-color: #dddddd;
-  background: white;
-}
-
-.white .switch-slider {
-  background: #dddddd;
-}
-
-.white .tooltip-content {
-  border-color: #dddddd;
-  background: white;
-}
-
-/* Responsive Design */
-@media (width <= 768px) {
-  .config-form {
-    gap: 1.25rem;
-  }
-
-  .form-input,
-  .form-select {
-    padding: 0.625rem 0.875rem;
-  }
-
-  .form-select {
-    padding-right: 2.25rem;
-  }
-
-  .tooltip-content {
-    min-width: 150px;
-    max-width: 250px;
-  }
-}
-
-/* Dark mode adjustments */
-:root.dark .form-input,
-:root.auto.dark .form-input,
-:root.dark .form-select,
-:root.auto.dark .form-select {
-  border-color: var(--color-border);
-  background: var(--color-surface-elevated);
-}
-
-:root.dark .checkbox-custom,
-:root.auto.dark .checkbox-custom {
-  border-color: var(--color-border);
-  background: var(--color-surface-elevated);
-}
-
-:root.dark .switch-slider,
-:root.auto.dark .switch-slider {
-  background: var(--color-border);
-}
-
-:root.dark .tooltip-content,
-:root.auto.dark .tooltip-content {
-  border-color: var(--color-border);
-  background: var(--color-surface-elevated);
-}
-
-/* Focus styles for accessibility */
-.form-input:focus-visible,
-.form-select:focus-visible,
-.checkbox-input:focus-visible + .checkbox-custom,
-.switch-input:focus-visible + .switch-slider,
-.info-icon:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-</style>
+<style scoped src="./css/UnifiedConfigForm.css"></style>
diff --git a/src/renderer/components/css/NavigationPage.css b/src/renderer/components/css/NavigationPage.css
new file mode 100644
index 00000000..c283ec3a
--- /dev/null
+++ b/src/renderer/components/css/NavigationPage.css
@@ -0,0 +1,518 @@
+.navigation {
+  display: flex;
+  overflow: hidden;
+  border-right: 1px solid rgb(229 231 235);
+  width: 150px;
+  height: 100vh;
+  background: var(--color-background-secondary);
+  transition: width 0.3s ease;
+  flex-direction: column;
+}
+
+.navigation.collapsed {
+  width: 60px;
+}
+
+:root.dark .navigation,
+:root.auto.dark .navigation {
+  border-right-color: var(--color-background-secondary);
+  background: var(--color-background-secondary);
+}
+
+.title-bar {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  padding: 1.25rem 1rem;
+  background: var(--color-background-secondary);
+}
+
+.navigation.collapsed .title-bar {
+  padding: 1rem 0.5rem;
+}
+
+.collapse-button {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 4px;
+  padding: 4px;
+  color: var(--color-text-primary);
+  background: transparent;
+  transition: all 0.2s ease;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.collapse-button:hover {
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+}
+
+.navigation.collapsed .collapse-button {
+  position: static;
+  transform: none;
+}
+
+:root.dark .title-bar,
+:root.auto.dark .title-bar {
+  border-bottom-color: var(--color-border);
+  background: var(--color-background-secondary);
+}
+
+.app-title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.app-text {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  letter-spacing: -0.025em;
+}
+
+.app-text:hover {
+  cursor: pointer;
+  color: var(--color-blue-common);
+}
+
+.app-version {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 3px 8px;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  background: var(--color-surface-elevated);
+}
+
+.theme-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  padding: 0.75rem;
+}
+
+:root.dark .theme-section,
+:root.auto.dark .theme-section {
+  border-bottom-color: var(--color-border);
+}
+
+.nav-menu {
+  overflow-y: auto;
+  padding: 1rem 0;
+  min-height: 0;
+  flex: 1;
+}
+
+.nav-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  color: rgb(75 85 99);
+  transition: all 0.2s ease;
+  gap: 0.75rem;
+  cursor: pointer;
+}
+
+.navigation.collapsed .nav-item {
+  justify-content: center;
+  padding: 0.75rem 0.5rem;
+  gap: 0;
+}
+
+.navigation.collapsed .nav-label {
+  display: none;
+}
+
+:root.dark .nav-item,
+:root.auto.dark .nav-item {
+  color: rgb(209 213 219);
+}
+
+.nav-item:hover {
+  color: rgb(17 24 39);
+  background: rgb(243 244 246);
+}
+
+:root.dark .nav-item:hover,
+:root.auto.dark .nav-item:hover {
+  color: rgb(243 244 246);
+  background: rgb(55 65 81);
+}
+
+.nav-item.router-link-active {
+  border-right: 3px solid rgb(99 102 241);
+  color: rgb(99 102 241);
+  background: rgb(239 246 255);
+}
+
+:root.dark .nav-item.router-link-active,
+:root.auto.dark .nav-item.router-link-active {
+  border-right-color: rgb(129 140 248);
+  color: rgb(129 140 248);
+  background: rgb(30 58 138 / 20%);
+}
+
+.nav-icon-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.sidebar-footer {
+  border-top: 1px solid var(--color-border);
+  padding: 12px;
+}
+
+.footer-button {
+  position: fixed;
+  bottom: 4px;
+  left: 4px;
+  border: none;
+  border-radius: 6px;
+  padding: 8px;
+  color: var(--color-text-secondary);
+  background: transparent;
+  cursor: pointer;
+}
+
+.footer-button:hover {
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+}
+
+.nav-submenu {
+  position: relative;
+  justify-content: center;
+  margin-top: 4px;
+}
+
+.submenu-trigger {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  padding: 0.75rem 1rem;
+  width: 100%;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  color: rgb(75 85 99);
+  background: transparent;
+  transition: all 0.2s ease;
+  gap: 0.75rem;
+  cursor: pointer;
+}
+
+:root.dark .submenu-trigger,
+:root.auto.dark .submenu-trigger {
+  color: rgb(209 213 219);
+}
+
+.submenu-trigger:hover {
+  color: rgb(17 24 39);
+  background: rgb(243 244 246);
+}
+
+:root.dark .submenu-trigger:hover,
+:root.auto.dark .submenu-trigger:hover {
+  color: rgb(243 244 246);
+  background: rgb(55 65 81);
+}
+
+.submenu-trigger .nav-icon-container {
+  flex-shrink: 0;
+}
+
+.submenu-trigger span {
+  flex-shrink: 0;
+}
+
+.submenu-arrow {
+  position: absolute;
+  right: 1rem;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.rotate-180 {
+  transform: rotate(180deg);
+}
+
+.submenu-panel {
+  display: flex;
+  margin-top: 2px;
+  padding-left: 2.75rem;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.submenu-item {
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-decoration: none;
+  color: var(--color-text-secondary);
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.submenu-item:hover {
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+}
+
+.collapsed-picbed {
+  cursor: default;
+}
+
+.collapsed-picbed:hover {
+  color: rgb(17 24 39);
+  background: rgb(243 244 246);
+}
+
+:root.dark .collapsed-picbed:hover,
+:root.auto.dark .collapsed-picbed:hover {
+  color: rgb(243 244 246);
+  background: rgb(55 65 81);
+}
+
+.qr-dialog {
+  position: fixed;
+  z-index: 50;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow-y: auto;
+  inset: 0;
+}
+
+.dialog-container {
+  position: fixed;
+  z-index: 50;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow-y: auto;
+  padding: 16px;
+  min-height: 100vh;
+  inset: 0;
+}
+
+.dialog-panel {
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  width: 100%;
+  max-width: 500px;
+  background: var(--color-background-primary);
+  box-shadow: var(--shadow-md);
+}
+
+.dialog-title {
+  margin: 0;
+  padding: 20px 24px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.dialog-content {
+  padding: 20px 24px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.listbox-container {
+  position: relative;
+}
+
+.listbox-button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  padding: 12px 16px;
+  width: 100%;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  background: var(--color-surface);
+  transition: var(--transition);
+  cursor: pointer;
+}
+
+.listbox-button:hover {
+  border-color: var(--color-accent);
+}
+
+.placeholder {
+  color: var(--color-text-secondary);
+}
+
+.selected-count {
+  color: var(--color-text-primary);
+}
+
+.listbox-arrow {
+  color: var(--color-text-secondary);
+}
+
+.listbox-options {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  z-index: 10;
+  overflow-y: auto;
+  margin-top: 4px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  max-height: 300px;
+  background: var(--color-background-primary);
+  box-shadow: var(--shadow-md);
+}
+
+.listbox-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  transition: var(--transition);
+  cursor: pointer;
+}
+
+.listbox-option.active {
+  background: var(--color-surface-elevated);
+}
+
+.listbox-option.selected {
+  color: white;
+  background: var(--color-accent);
+}
+
+.copy-button {
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+  border: none;
+  border-radius: var(--border-radius);
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: white;
+  background: var(--color-accent);
+  transition: var(--transition);
+  gap: 8px;
+  cursor: pointer;
+}
+
+.copy-button:hover {
+  background: var(--color-accent-hover);
+}
+
+.qr-container {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
+}
+
+.qr-code {
+  overflow: hidden;
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow-sm);
+}
+
+.dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 24px 20px;
+  gap: 12px;
+}
+
+.cancel-button {
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  padding: 10px 20px;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition);
+  cursor: pointer;
+}
+
+.cancel-button:hover {
+  background: var(--color-border);
+}
+
+/* Responsive Design */
+@media (width <= 768px) {
+  .navigation {
+    width: 60px;
+  }
+
+  .nav-label {
+    display: none;
+  }
+
+  .app-title {
+    display: none;
+  }
+
+  .collapse-button {
+    display: none;
+  }
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  display: none;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background: var(--color-border);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-secondary);
+}
diff --git a/src/renderer/components/css/UnifiedConfigForm.css b/src/renderer/components/css/UnifiedConfigForm.css
new file mode 100644
index 00000000..c6c51a79
--- /dev/null
+++ b/src/renderer/components/css/UnifiedConfigForm.css
@@ -0,0 +1,381 @@
+#config-form {
+  width: 100%;
+}
+
+.config-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+/* Form Groups */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.form-group.required .form-label::after {
+  content: ' *';
+  color: var(--color-error, #ef4444);
+}
+
+.form-label-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.form-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  line-height: 1.25;
+}
+
+.form-control {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Tooltip Styles */
+.tooltip-wrapper {
+  position: relative;
+}
+
+.info-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  padding: 2px;
+  color: var(--color-text-secondary);
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.info-icon:hover {
+  color: var(--color-accent);
+  background: rgb(0 122 255 / 10%);
+}
+
+.tooltip-content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.75rem;
+  min-width: 200px;
+  max-width: 300px;
+  font-size: 0.75rem;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-lg);
+  line-height: 1.4;
+}
+
+/* Input Styles */
+.form-input {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.75rem 1rem;
+  width: 100%;
+  font-size: 0.875rem;
+  font-family: inherit;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+}
+
+.form-input:focus {
+  border-color: var(--color-accent);
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
+}
+
+.form-input::placeholder {
+  color: var(--color-text-secondary);
+}
+
+.form-input.error {
+  border-color: var(--color-error, #ef4444);
+}
+
+.form-input.error:focus {
+  box-shadow: 0 0 0 2px rgb(239 68 68 / 20%);
+}
+
+/* Select Styles */
+.select-wrapper {
+  position: relative;
+}
+
+.form-select {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.75rem 2.5rem 0.75rem 1rem;
+  width: 100%;
+  font-size: 0.875rem;
+  font-family: inherit;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+  appearance: none;
+  cursor: pointer;
+}
+
+.form-select:focus {
+  border-color: var(--color-accent);
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
+}
+
+.form-select.error {
+  border-color: var(--color-error, #ef4444);
+}
+
+.form-select.error:focus {
+  box-shadow: 0 0 0 2px rgb(239 68 68 / 20%);
+}
+
+.select-arrow {
+  position: absolute;
+  top: 50%;
+  right: 1rem;
+  color: var(--color-text-secondary);
+  transition: var(--transition-fast);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.select-wrapper:hover .select-arrow,
+.form-select:focus + .select-arrow {
+  color: var(--color-accent);
+}
+
+/* Checkbox Group Styles */
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  transition: var(--transition-fast);
+}
+
+.checkbox-label:hover {
+  color: var(--color-accent);
+}
+
+.checkbox-input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.checkbox-custom {
+  position: relative;
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  width: 1.25rem;
+  height: 1.25rem;
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.checkbox-custom::after {
+  position: absolute;
+  top: 0;
+  left: 3px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  width: 6px;
+  height: 10px;
+  opacity: 0;
+  transition: var(--transition-fast);
+  content: '';
+  transform: rotate(45deg);
+}
+
+.checkbox-input:checked + .checkbox-custom {
+  border-color: var(--color-accent);
+  background: var(--color-accent);
+}
+
+.checkbox-input:checked + .checkbox-custom::after {
+  opacity: 1;
+}
+
+.checkbox-input:focus + .checkbox-custom {
+  box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
+}
+
+.checkbox-text {
+  flex: 1;
+}
+
+/* Switch Styles */
+.switch-label {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+}
+
+.switch-input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.switch-slider {
+  position: relative;
+  border-radius: 0.75rem;
+  width: 3rem;
+  height: 1.5rem;
+  background: var(--color-border);
+  transition: var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.switch-button {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  border-radius: 50%;
+  width: 1.25rem;
+  height: 1.25rem;
+  background: white;
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-fast);
+}
+
+.switch-input:checked + .switch-slider {
+  background: var(--color-accent);
+}
+
+.switch-input:checked + .switch-slider .switch-button {
+  transform: translateX(1.5rem);
+}
+
+.switch-input:focus + .switch-slider {
+  box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
+}
+
+.switch-text {
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+.switch-input:checked ~ .switch-text {
+  color: var(--color-accent);
+}
+
+/* Error Message */
+.error-message {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--color-error, #ef4444);
+}
+
+/* White theme adjustments */
+.white .form-input,
+.white .form-select {
+  border-color: #dddddd;
+  background: white;
+}
+
+.white .form-input:focus,
+.white .form-select:focus {
+  border-color: var(--color-accent);
+}
+
+.white .checkbox-custom {
+  border-color: #dddddd;
+  background: white;
+}
+
+.white .switch-slider {
+  background: #dddddd;
+}
+
+.white .tooltip-content {
+  border-color: #dddddd;
+  background: white;
+}
+
+/* Responsive Design */
+@media (width <= 768px) {
+  .config-form {
+    gap: 1.25rem;
+  }
+
+  .form-input,
+  .form-select {
+    padding: 0.625rem 0.875rem;
+  }
+
+  .form-select {
+    padding-right: 2.25rem;
+  }
+
+  .tooltip-content {
+    min-width: 150px;
+    max-width: 250px;
+  }
+}
+
+/* Dark mode adjustments */
+:root.dark .form-input,
+:root.auto.dark .form-input,
+:root.dark .form-select,
+:root.auto.dark .form-select {
+  border-color: var(--color-border);
+  background: var(--color-surface-elevated);
+}
+
+:root.dark .checkbox-custom,
+:root.auto.dark .checkbox-custom {
+  border-color: var(--color-border);
+  background: var(--color-surface-elevated);
+}
+
+:root.dark .switch-slider,
+:root.auto.dark .switch-slider {
+  background: var(--color-border);
+}
+
+:root.dark .tooltip-content,
+:root.auto.dark .tooltip-content {
+  border-color: var(--color-border);
+  background: var(--color-surface-elevated);
+}
+
+/* Focus styles for accessibility */
+.form-input:focus-visible,
+.form-select:focus-visible,
+.checkbox-input:focus-visible + .checkbox-custom,
+.switch-input:focus-visible + .switch-slider,
+.info-icon:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
diff --git a/src/renderer/components/ui/TitleBar.vue b/src/renderer/components/ui/TitleBar.vue
index 3b845292..afb138b6 100644
--- a/src/renderer/components/ui/TitleBar.vue
+++ b/src/renderer/components/ui/TitleBar.vue
@@ -43,8 +43,8 @@
 import { MinusIcon, PinIcon, ShrinkIcon, XIcon } from 'lucide-vue-next'
 import { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue'
 
+import { osGlobal } from '@/hooks/useGlobal'
 import { IRPCActionType } from '@/utils/enum'
-import { osGlobal } from '@/utils/global'
 
 const isShowprogress = ref(false)
 const progress = ref(0)
diff --git a/src/renderer/hooks/useGlobal.ts b/src/renderer/hooks/useGlobal.ts
new file mode 100644
index 00000000..d7302477
--- /dev/null
+++ b/src/renderer/hooks/useGlobal.ts
@@ -0,0 +1,44 @@
+import { readonly, ref } from 'vue'
+
+import { IRPCActionType } from '@/utils/enum'
+
+const osGlobal = ref<string>(window.electron.platform)
+const pageReloadCount = ref(0)
+
+interface getPicBedType {
+  picBeds: IPicBedType[]
+  defaultPicBed: string
+  defaultConfigName: string
+  defaultId: string
+}
+
+const _picBeds = ref<IPicBedType[]>([])
+const _defaultPicBed = ref<string>('')
+const _defaultConfigName = ref<string>('')
+const _defaultPicBedId = ref<string>('')
+
+export function usePicBed() {
+  const updatePicBeds = async () => {
+    console.log('Updating pic beds in global hook...')
+    const result = await window.electron.triggerRPC<getPicBedType>(IRPCActionType.MAIN_GET_PICBED)
+    if (result) {
+      _picBeds.value = result.picBeds
+      _defaultPicBed.value = result.defaultPicBed
+      _defaultConfigName.value = result.defaultConfigName
+      _defaultPicBedId.value = result.defaultId
+    }
+  }
+  return {
+    picBedG: readonly(_picBeds),
+    defaultPicBedG: readonly(_defaultPicBed),
+    defaultConfigNameG: readonly(_defaultConfigName),
+    defaultIdG: readonly(_defaultPicBedId),
+    updatePicBeds,
+  }
+}
+
+async function updatePageReloadCount() {
+  pageReloadCount.value++
+}
+
+export { osGlobal, pageReloadCount, updatePageReloadCount }
diff --git a/src/renderer/hooks/useStore.ts b/src/renderer/hooks/useStore.ts
deleted file mode 100644
index d12d728c..00000000
--- a/src/renderer/hooks/useStore.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { inject } from 'vue'
-
-import { storeKey } from '@/store'
-
-export const useStore = () => {
-  return inject(storeKey) ?? null
-}
diff --git a/src/renderer/i18n/locales/en.json b/src/renderer/i18n/locales/en.json
index fca47e02..f036d052 100644
--- a/src/renderer/i18n/locales/en.json
+++ b/src/renderer/i18n/locales/en.json
@@ -107,6 +107,8 @@
         "description": "Configure settings for each PicBed individually",
         "title": "Per-PicBed Settings"
       },
+      "renameSettings": "Rename",
+      "skipProcessSettings": "Skip Process",
       "title": "Image Processing Settings",
       "transform": {
         "description": "Adjust image size, rotation, flipping, etc.",
diff --git a/src/renderer/i18n/locales/zh-CN.json b/src/renderer/i18n/locales/zh-CN.json
index 37e7b16f..418d580a 100644
--- a/src/renderer/i18n/locales/zh-CN.json
+++ b/src/renderer/i18n/locales/zh-CN.json
@@ -107,6 +107,8 @@
         "description": "为每个图床单独配置设置",
         "title": "图床独立设置"
       },
+      "renameSettings": "重命名",
+      "skipProcessSettings": "文件跳过",
       "title": "图片处理设置",
       "transform": {
         "description": "调整图片大小、旋转、翻转等",
diff --git a/src/renderer/i18n/locales/zh-TW.json b/src/renderer/i18n/locales/zh-TW.json
index da43c915..885fcf95 100644
--- a/src/renderer/i18n/locales/zh-TW.json
+++ b/src/renderer/i18n/locales/zh-TW.json
@@ -107,6 +107,8 @@
         "description": "為每個圖床單獨配置設置",
         "title": "圖床獨立設置"
       },
+      "renameSettings": "重命名",
+      "skipProcessSettings": "文件跳過",
       "title": "圖片處理設置",
       "transform": {
         "description": "調整圖片大小、旋轉、翻轉等",
diff --git a/src/renderer/pages/Gallery.vue b/src/renderer/pages/Gallery.vue
index 509c798a..90b959ab 100644
--- a/src/renderer/pages/Gallery.vue
+++ b/src/renderer/pages/Gallery.vue
@@ -74,7 +74,7 @@
                   <ChevronDownIcon :size="16" />
                 </button>
                 <div v-show="picBedDropdownOpen" class="multiselect-dropdown">
-                  <label v-for="item in picBedGlobal" :key="item.type" class="multiselect-option">
+                  <label v-for="item in picBedG" :key="item.type" class="multiselect-option">
                     <input v-model="choosedPicBed" type="checkbox" :value="item.type" />
                     {{ item.name }}
                   </label>
@@ -514,6 +514,7 @@ import { onBeforeRouteUpdate } from 'vue-router'
 import ALLApi from '@/apis/allApi'
 import VirtualScroller from '@/components/VirtualScroller.vue'
 import useConfirm from '@/hooks/useConfirm'
+import { usePicBed } from '@/hooks/useGlobal'
 import useMessage from '@/hooks/useMessage'
 import { customStrMatch, customStrReplace } from '@/manage/utils/common'
 import { getRawData } from '@/utils/common'
@@ -521,12 +522,12 @@ import { configPaths } from '@/utils/configPaths'
 import { getConfig, saveConfig } from '@/utils/dataSender'
 import $$db from '@/utils/db'
 import { IPasteStyle, IRPCActionType } from '@/utils/enum'
-import { picBedGlobal } from '@/utils/global'
 import { picBedsCanbeDeleted } from '@/utils/static'
 
 const { t } = useI18n()
 const message = useMessage()
 const { confirm } = useConfirm()
+const { picBedG } = usePicBed()
 
 type IResult<T> = T & {
   id: string
diff --git a/src/renderer/pages/MiniPage.vue b/src/renderer/pages/MiniPage.vue
index e989316f..1f3d03a2 100644
--- a/src/renderer/pages/MiniPage.vue
+++ b/src/renderer/pages/MiniPage.vue
@@ -30,10 +30,10 @@
 import type { IConfig } from 'piclist'
 import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 
+import { osGlobal } from '@/hooks/useGlobal'
 import { isUrl } from '@/utils/common'
 import { getConfig } from '@/utils/dataSender'
 import { IRPCActionType } from '@/utils/enum'
-import { osGlobal } from '@/utils/global'
 
 const logoPath = ref('')
 const dragover = ref(false)
diff --git a/src/renderer/pages/PicGoSetting.vue b/src/renderer/pages/PicGoSetting.vue
index ad98517b..be943224 100644
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/src/renderer/pages/PicGoSetting.vue
@@ -348,7 +348,7 @@
                   <span>{{ t('pages.settings.upload.autoImportPicBed') }}</span>
                 </div>
                 <div class="checkbox-group compact">
-                  <label v-for="item in picBedGlobal" :key="item.type" class="checkbox-option">
+                  <label v-for="item in picBedG" :key="item.type" class="checkbox-option">
                     <input
                       v-model="formOfSetting.autoImportPicBed"
                       type="checkbox"
@@ -676,7 +676,7 @@
             </div>
 
             <div class="picbed-checkbox-grid">
-              <label v-for="item in picBedGlobal" :key="item.name" class="picbed-checkbox-card">
+              <label v-for="item in picBedG" :key="item.name" class="picbed-checkbox-card">
                 <input v-model="showPicBedList" type="checkbox" :value="item.name" class="checkbox-input" />
                 <span class="checkbox-indicator" />
                 <span class="checkbox-label">{{ item.name }}</span>
@@ -696,7 +696,7 @@
             </div>
 
             <div class="picbed-checkbox-grid">
-              <label v-for="item in picBedGlobal" :key="`gallery-${item.name}`" class="picbed-checkbox-card">
+              <label v-for="item in picBedG" :key="`gallery-${item.name}`" class="picbed-checkbox-card">
                 <input v-model="galleryPicBedFilterList" type="checkbox" :value="item.type" class="checkbox-input" />
                 <span class="checkbox-indicator" />
                 <span class="checkbox-label">{{ item.name }}</span>
@@ -1747,7 +1747,7 @@
           <button class="dialog-close" @click="imageProcessDialogVisible = false">X</button>
         </div>
         <div class="dialog-content">
-          <ImageProcessSetting v-model="imageProcessDialogVisible" />
+          <ImageProcessSetting :config-id="''" />
         </div>
       </div>
     </div>
@@ -1784,6 +1784,7 @@ import { useRouter } from 'vue-router'
 
 import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
 import useConfirm from '@/hooks/useConfirm'
+import { osGlobal, usePicBed } from '@/hooks/useGlobal'
 import useMessage from '@/hooks/useMessage'
 import { setCurrentLanguage } from '@/i18n'
 import { SHORTKEY_PAGE } from '@/router/config'
@@ -1792,12 +1793,13 @@ import { configPaths } from '@/utils/configPaths'
 import { getConfig, saveConfig } from '@/utils/dataSender'
 import { II18nLanguage, IRPCActionType, ISartMode } from '@/utils/enum'
 import { getLatestVersion } from '@/utils/getLatestVersion'
-import { osGlobal, picBedGlobal, updatePicBedGlobal } from '@/utils/global'
 
 const { t, locale } = useI18n()
 const $router = useRouter()
 const { confirm } = useConfirm()
 const message = useMessage()
+const { picBedG, updatePicBeds } = usePicBed()
+
 const activeName = ref<'system' | 'sync' | 'upload' | 'advanced' | 'update'>('system')
 const showPicBedList = ref<string[]>([])
 const galleryPicBedFilterList = ref<string[]>([])
@@ -2073,7 +2075,7 @@ async function initData() {
   const config = (await getConfig<IConfig>()) || ({} as IConfig)
   const settings = config.settings || {}
   const picBed = config.picBed
-  showPicBedList.value = picBedGlobal.value.filter(item => item.visible).map(item => item.name)
+  showPicBedList.value = picBedG.value.filter(item => item.visible).map(item => item.name)
   galleryPicBedFilterList.value = settings.galleryPicBedFilter || []
   formKeys.forEach(key => {
     ;(formOfSetting.value as any)[key] = settings[key] ?? formOfSetting.value[key]
@@ -2225,9 +2227,9 @@ watch(galleryPicBedFilterList, val => {
 })
 
 function handleShowPicBedListChange(val: ICheckBoxValueType[]) {
-  const list = picBedGlobal.value.map(item => ({ ...item, visible: val.includes(item.name) }))
+  const list = picBedG.value.map(item => ({ ...item, visible: val.includes(item.name) }))
   saveConfig({ [configPaths.picBed.list]: list })
-  updatePicBedGlobal()
+  updatePicBeds()
 }
 
 function handleGalleryPicBedFilterChange(val: ICheckBoxValueType[]) {
diff --git a/src/renderer/pages/Plugin.vue b/src/renderer/pages/Plugin.vue
index 0f7fa3d7..2d968b24 100644
--- a/src/renderer/pages/Plugin.vue
+++ b/src/renderer/pages/Plugin.vue
@@ -225,6 +225,7 @@ import { computed, onBeforeMount, onBeforeUnmount, reactive, ref, toRaw, useTemp
 import { useI18n } from 'vue-i18n'
 
 import ConfigForm from '@/components/UnifiedConfigForm.vue'
+import { usePicBed } from '@/hooks/useGlobal'
 import { getRawData, handleStreamlinePluginName } from '@/utils/common'
 import { configPaths } from '@/utils/configPaths'
 import {
@@ -235,9 +236,9 @@ import {
 } from '@/utils/constant'
 import { getConfig, saveConfig } from '@/utils/dataSender'
 import { IRPCActionType } from '@/utils/enum'
-import { updatePicBedGlobal } from '@/utils/global'
 
 const { t } = useI18n()
+const { updatePicBeds } = usePicBed()
 const searchText = ref('')
 const pluginList = ref<IPicGoPlugin[]>([])
 const config = ref<any[]>([])
@@ -332,7 +333,7 @@ const updateSuccessHandler = (plugin: string) => {
       item.ing = false
       item.hasInstall = true
     }
-    updatePicBedGlobal()
+    updatePicBeds()
   })
   handleReload()
   getPluginList()
@@ -349,7 +350,7 @@ const uninstallSuccessHandler = (plugin: string) => {
       if (item.config.uploader.name) {
         handleRestoreState('uploader', item.config.uploader.name)
       }
-      updatePicBedGlobal()
+      updatePicBeds()
     }
     return item.fullName !== plugin
   })
@@ -379,7 +380,7 @@ const picgoTogglePluginHandler = (fullName: string, enabled: boolean) => {
   const plugin = pluginList.value.find(item => item.fullName === fullName)
   if (plugin) {
     plugin.enabled = enabled
-    updatePicBedGlobal()
+    updatePicBeds()
     needReload.value = true
   }
 }
diff --git a/src/renderer/pages/Upload.vue b/src/renderer/pages/Upload.vue
index db53309f..95f9402e 100644
--- a/src/renderer/pages/Upload.vue
+++ b/src/renderer/pages/Upload.vue
@@ -7,11 +7,11 @@
           <button
             class="provider-button"
             :title="t('pages.upload.uploadViewHint')"
-            @click="handlePicBedNameClick(picBedName, picBedConfigName)"
+            @click="handlePicBedNameClick(picBedName)"
           >
             <div class="provider-info">
               <span class="provider-name">{{ picBedName }}</span>
-              <span class="provider-config">{{ picBedConfigName || 'Default' }}</span>
+              <span class="provider-config">{{ defaultConfigNameG || 'Default' }}</span>
             </div>
             <EditIcon :size="16" class="provider-arrow" />
           </button>
@@ -144,7 +144,7 @@
             </button>
           </div>
           <div class="modal-content">
-            <ImageProcessSetting v-model="imageProcessDialogVisible" />
+            <ImageProcessSetting :config-id="PicBedId" />
           </div>
         </div>
       </div>
@@ -162,11 +162,12 @@ import {
   UploadCloudIcon,
   XIcon,
 } from 'lucide-vue-next'
-import { onBeforeMount, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
+import { computed, onBeforeMount, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
+import { usePicBed } from '@/hooks/useGlobal'
 import useMessage from '@/hooks/useMessage'
 import { PICBEDS_PAGE } from '@/router/config'
 import $bus from '@/utils/bus'
@@ -176,12 +177,12 @@ import { SHOW_INPUT_BOX, SHOW_INPUT_BOX_RESPONSE } from '@/utils/constant'
 import { getConfig, saveConfig } from '@/utils/dataSender'
 import { useDragEventListeners } from '@/utils/drag'
 import { IPasteStyle, IRPCActionType } from '@/utils/enum'
-import { picBedGlobal, updatePicBedGlobal } from '@/utils/global'
 
 useDragEventListeners()
 const $router = useRouter()
 const { t } = useI18n()
 const message = useMessage()
+const { picBedG, defaultPicBedG, defaultConfigNameG, defaultIdG, updatePicBeds } = usePicBed()
 
 const imageProcessDialogVisible = ref(false)
 const useShortUrl = ref(false)
@@ -189,11 +190,18 @@ const dragover = ref(false)
 const progress = ref(0)
 const showProgress = ref(false)
 const showError = ref(false)
-const pasteStyle = ref('')
-const picBedName = ref('')
-const picBedConfigName = ref('')
+const pasteStyle = ref(IPasteStyle.MARKDOWN)
+const PicBedId = ref('')
 const fileInput = useTemplateRef('fileInput')
 
+const picBedName = computed(() => {
+  if (!picBedG.value || picBedG.value.length === 0) {
+    return ''
+  }
+  const target = picBedG.value.find(item => item.type === defaultPicBedG.value)
+  return target ? target.name : defaultPicBedG.value
+})
+
 const pasteFormatList = ref<Record<string, string>>({
   [IPasteStyle.MARKDOWN]: '![alt](url)',
   [IPasteStyle.HTML]: '<img src="url"/>',
@@ -202,9 +210,9 @@ const pasteFormatList = ref<Record<string, string>>({
   [IPasteStyle.CUSTOM]: '',
 })
 
-watch(picBedGlobal, () => {
-  getDefaultPicBed()
-})
+function syncPicBedHandler(): void {
+  updatePicBeds()
+}
 
 let removeUploadProgressListenerCallback: () => void = () => {}
 let removeSyncPicBedListenerCallback: () => void = () => {}
@@ -219,10 +227,6 @@ function uploadProgressHandler(p: number): void {
   }
 }
 
-function syncPicBedHandler(): void {
-  getDefaultPicBed()
-}
-
 const handleImageProcess = () => {
   imageProcessDialogVisible.value = true
 }
@@ -241,21 +245,13 @@ function onProgressChange(val: number) {
   }
 }
 
-async function handlePicBedNameClick(_picBedName: string, picBedConfigName: string | undefined) {
-  const formatedpicBedConfigName = picBedConfigName || 'Default'
-  const currentPicBed = await getConfig<string>(configPaths.picBed.current)
-  const currentPicBedConfig = ((await getConfig<any[]>(`uploader.${currentPicBed}`)) as any) || {}
-  const configList = await window.electron.triggerRPC<IUploaderConfigItem>(
-    IRPCActionType.PICBED_GET_CONFIG_LIST,
-    currentPicBed,
-  )
-  const currentConfigList = configList?.configList ?? []
-  const config = currentConfigList.find((item: any) => item._configName === formatedpicBedConfigName)
+async function handlePicBedNameClick(_picBedName: string) {
+  const currentPicBedConfig = ((await getConfig<any[]>(`uploader.${defaultPicBedG.value}`)) as any) || {}
   $router.push({
     name: PICBEDS_PAGE,
     params: {
-      type: currentPicBed,
-      configId: config?._id || '',
+      type: defaultPicBedG.value,
+      configId: defaultIdG.value,
     },
     query: {
       defaultConfigId: currentPicBedConfig.defaultId || '',
@@ -400,16 +396,6 @@ function handleInputBoxValue(val: string) {
   }
 }
 
-async function getDefaultPicBed() {
-  const currentPicBed = await getConfig<string>(configPaths.picBed.current)
-  picBedGlobal.value.forEach(item => {
-    if (item.type === currentPicBed) {
-      picBedName.value = item.name
-    }
-  })
-  picBedConfigName.value = (await getConfig<string>(`picBed.${currentPicBed}._configName`)) || ''
-}
-
 async function handleChangePicBed() {
   window.electron.sendRPC(IRPCActionType.SHOW_UPLOAD_PAGE_MENU)
 }
@@ -421,13 +407,11 @@ onBeforeUnmount(() => {
 })
 
 onBeforeMount(() => {
-  updatePicBedGlobal()
-  getUseShortUrl()
-  getPasteStyle()
-  getDefaultPicBed()
   removeUploadProgressListenerCallback = window.electron.ipcRendererOn('uploadProgress', uploadProgressHandler)
   removeSyncPicBedListenerCallback = window.electron.ipcRendererOn('syncPicBed', syncPicBedHandler)
   $bus.on(SHOW_INPUT_BOX_RESPONSE, handleInputBoxValue)
+  getUseShortUrl()
+  getPasteStyle()
 })
 </script>
 
diff --git a/src/renderer/pages/UploaderConfigPage.vue b/src/renderer/pages/UploaderConfigPage.vue
index 10fc3d6a..537d88bf 100644
--- a/src/renderer/pages/UploaderConfigPage.vue
+++ b/src/renderer/pages/UploaderConfigPage.vue
@@ -20,11 +20,7 @@
           </div>
         </div>
         <div class="header-actions">
-          <button
-            class="btn btn-primary btn-glow"
-            :disabled="store?.state.defaultPicBed === type"
-            @click="setDefaultPicBed(type)"
-          >
+          <button class="btn btn-primary btn-glow" :disabled="defaultPicBedG === type" @click="setDefaultPicBed(type)">
             <Star :size="16" />
             <span>{{ t('pages.uploaderConfig.setAsDefault') }}</span>
           </button>
@@ -130,8 +126,8 @@ import { useI18n } from 'vue-i18n'
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
 
 import useConfirm from '@/hooks/useConfirm'
+import { usePicBed } from '@/hooks/useGlobal'
 import useMessage from '@/hooks/useMessage'
-import { useStore } from '@/hooks/useStore'
 import { PICBEDS_PAGE, UPLOADER_CONFIG_PAGE } from '@/router/config'
 import $bus from '@/utils/bus'
 import { configPaths } from '@/utils/configPaths'
@@ -144,15 +140,15 @@ const message = useMessage()
 const { confirm } = useConfirm()
 const router = useRouter()
 const route = useRoute()
+const { defaultPicBedG } = usePicBed()
 
 const type = ref('')
 const curConfigList = ref<IStringKeyMap[]>([])
 const defaultConfigId = ref('')
-const store = useStore()
 
 async function selectItem(id: string) {
   await window.electron.triggerRPC<void>(IRPCActionType.UPLOADER_SELECT, type.value, id)
-  if (store?.state.defaultPicBed === type.value) {
+  if (defaultPicBedG.value === type.value) {
     window.electron.sendRPC(
       IRPCActionType.TRAY_SET_TOOL_TIP,
       `${type.value} ${curConfigList.value.find(item => item._id === id)?._configName || ''}`,
@@ -276,7 +272,6 @@ function setDefaultPicBed(type: string) {
     [configPaths.picBed.uploader]: type,
   })
 
-  store?.setDefaultPicBed(type)
   const currentConfigName = curConfigList.value.find(item => item._id === defaultConfigId.value)?._configName
   window.electron.sendRPC(IRPCActionType.TRAY_SET_TOOL_TIP, `${type} ${currentConfigName || ''}`)
   message.success(t('pages.uploaderConfig.setSuccess'))
diff --git a/src/renderer/utils/global.ts b/src/renderer/utils/global.ts
deleted file mode 100644
index e6c72e0e..00000000
--- a/src/renderer/utils/global.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ref } from 'vue'
-
-import { IRPCActionType } from '@/utils/enum'
-
-const osGlobal = ref<string>(window.electron.platform)
-
-const picBedGlobal = ref<IPicBedType[]>([])
-const pageReloadCount = ref(0)
-
-async function updatePicBedGlobal() {
-  picBedGlobal.value = (await window.electron.triggerRPC<IPicBedType[]>(IRPCActionType.MAIN_GET_PICBED))!
-}
-
-async function updatePageReloadCount() {
-  pageReloadCount.value++
-}
-
-export { osGlobal, pageReloadCount, picBedGlobal, updatePageReloadCount, updatePicBedGlobal }