From 16da28ef0f2e6b6ca6e97df06f4c60bf15665e52 Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Thu, 22 Jan 2026 15:48:45 +0800
Subject: [PATCH] :sparkles: Feature(custom): optimize UI of setting page

---
 .../components/common/customButton.vue        |    4 +-
 .../components/common/customInput.vue         |    8 +-
 .../components/common/customModal.vue         |   78 +
 .../components/common/settingSection.vue      |   15 +-
 src/renderer/pages/Gallery.vue                |  261 +-
 src/renderer/pages/PicGoSetting.vue           | 1429 ++++------
 src/renderer/pages/Upload.vue                 |  799 +++---
 src/renderer/pages/UploaderConfigPage.vue     |  182 +-
 src/renderer/pages/css/PicgoSetting.css       | 2319 -----------------
 9 files changed, 1241 insertions(+), 3854 deletions(-)
 create mode 100644 src/renderer/components/common/customModal.vue

diff --git a/src/renderer/components/common/customButton.vue b/src/renderer/components/common/customButton.vue
index 09c0c9cb..e8aaef04 100644
--- a/src/renderer/components/common/customButton.vue
+++ b/src/renderer/components/common/customButton.vue
@@ -28,12 +28,12 @@ const {
   text,
   disabled,
   active = false,
-  icon,
+  icon = null,
   iconSize = 16,
   type = 'primary',
 } = defineProps<{
   text: string
-  icon: any
+  icon?: any
   active?: boolean
   iconSize?: number
   disabled?: boolean
diff --git a/src/renderer/components/common/customInput.vue b/src/renderer/components/common/customInput.vue
index 89738ac9..720edf40 100644
--- a/src/renderer/components/common/customInput.vue
+++ b/src/renderer/components/common/customInput.vue
@@ -6,6 +6,7 @@
       <input
         v-model="modelValue"
         :type="type"
+        v-bind="$attrs"
         class="box-border w-full rounded-md border border-border bg-bg-tertiary p-3 pr-10 text-sm text-main transition-all duration-200 ease-apple focus:border-accent focus:outline-none"
         :placeholder="placeholder"
       />
@@ -26,20 +27,25 @@
 <script setup lang="ts">
 import { EyeClosedIcon, EyeIcon } from 'lucide-vue-next'
 import { onMounted, ref } from 'vue'
-const modelValue = defineModel<string>()
+const modelValue = defineModel<any>()
 const type = ref('text')
 const {
   isPassword = false,
   title,
+  inputType = 'text',
   placeholder,
 } = defineProps<{
   isPassword?: boolean
   title: string
+  inputType?: string
   placeholder: string
 }>()
+
 onMounted(() => {
   if (isPassword) {
     type.value = 'password'
+  } else {
+    type.value = inputType
   }
 })
 </script>
diff --git a/src/renderer/components/common/customModal.vue b/src/renderer/components/common/customModal.vue
new file mode 100644
index 00000000..4746efa2
--- /dev/null
+++ b/src/renderer/components/common/customModal.vue
@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="fixed inset-0 z-1000 flex items-center justify-center overflow-y-auto bg-black/30"
+    :class="{ 'advanced-animation': enableAdvancedAnimation }"
+    @click.stop
+  >
+    <div
+      class="m-auto flex flex-col overflow-hidden rounded-lg border border-border-secondary bg-bg-tertiary shadow-xl"
+      :style="{
+        height: height || '85vh',
+        maxHeight: maxHeight || '85vh',
+        width: width || '90vw',
+        maxWidth: maxWidth || '90vw',
+      }"
+      @click.stop
+    >
+      <div class="flex items-center justify-between border border-border-secondary bg-bg-tertiary px-5 py-4 max-md:p-2">
+        <slot name="titleBar"></slot>
+        <h3 v-if="title !== ''" class="m-0 text-xl font-semibold text-main">
+          {{ title }}
+        </h3>
+        <span v-if="description !== ''" class="mt-1 text-xl font-semibold text-secondary">
+          {{ description }}
+        </span>
+        <button
+          class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-border bg-surface-elevated text-secondary transition-all duration-fast ease-apple hover:scale-105 hover:border-danger hover:bg-danger hover:text-white focus-visible:focus-ring"
+          @click="visible = false"
+        >
+          <XIcon :size="20" />
+        </button>
+      </div>
+      <div
+        class="no-scrollbar h-[calc(90vh-90px)] flex-1 overflow-y-auto max-md:p-4"
+        :style="{ height: height ? 'calc(' + height + ' - 90px)' : 'calc(85vh - 90px)' }"
+      >
+        <slot></slot>
+      </div>
+      <div v-if="$slots.footer" class="flex justify-end gap-3 border-t border-border-secondary p-3">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { XIcon } from 'lucide-vue-next'
+import { onBeforeMount, ref } from 'vue'
+
+import { getConfig } from '@/utils/dataSender'
+
+const visible = defineModel<boolean>('visible')
+
+const enableAdvancedAnimation = ref(false)
+
+const {
+  title = '',
+  description = '',
+  height = '',
+  maxHeight = '',
+  width = '',
+  maxWidth = '',
+} = defineProps<{
+  title?: string
+  description?: string
+  height?: string
+  width?: string
+  maxHeight?: string
+  maxWidth?: string
+}>()
+
+async function initConf() {
+  enableAdvancedAnimation.value = (await getConfig('settings.enableAdvancedAnimation')) || false
+}
+
+onBeforeMount(() => {
+  initConf()
+})
+</script>
diff --git a/src/renderer/components/common/settingSection.vue b/src/renderer/components/common/settingSection.vue
index bce8e4b3..1ae7e9bf 100644
--- a/src/renderer/components/common/settingSection.vue
+++ b/src/renderer/components/common/settingSection.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="w-full rounded-lg border border-border bg-bg-secondary p-6 shadow-sm">
     <div class="mb-2 flex items-start gap-3">
-      <div class="mb-2 flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-lg bg-accent text-white">
+      <div
+        v-if="icon"
+        class="mb-2 flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-lg bg-accent text-white"
+      >
         <slot name="icon">
-          <component :is="icon" v-if="icon" :size="iconSize" />
+          <component :is="icon" :size="iconSize" />
         </slot>
       </div>
       <div>
@@ -27,15 +30,15 @@
 
 <script setup lang="ts">
 const {
-  title,
+  title = '',
   description = '',
-  icon,
+  icon = null,
   iconSize = 20,
   onlyOneRow = false,
 } = defineProps<{
-  title: string
+  title?: string
   description?: string
-  icon: any
+  icon?: any
   iconSize?: number
   onlyOneRow?: boolean
 }>()
diff --git a/src/renderer/pages/Gallery.vue b/src/renderer/pages/Gallery.vue
index d75f3fec..2bd88e69 100644
--- a/src/renderer/pages/Gallery.vue
+++ b/src/renderer/pages/Gallery.vue
@@ -384,164 +384,141 @@
 
     <!-- Edit URL Modal -->
     <transition name="modal">
-      <div
+      <CustomModal
         v-if="dialogVisible"
-        class="modal-overlay"
-        :class="{ 'advanced-animation': enableAdvancedAnimation }"
-        @click="dialogVisible = false"
+        v-model:visible="dialogVisible"
+        :height="'auto'"
+        :width="'40%'"
+        :title="t('pages.gallery.changeImageUrl')"
       >
-        <div class="modal-container" @click.stop>
-          <div class="modal-header">
-            <h3 class="m-0 text-xl font-semibold text-main">{{ t('pages.gallery.changeImageUrl') }}</h3>
-            <button class="modal-close-btn" @click="dialogVisible = false">
-              <XIcon :size="20" />
-            </button>
-          </div>
-          <div class="p-6">
-            <input v-model="imgInfo.imgUrl" type="text" class="form-input" placeholder="Enter new URL" />
-          </div>
-          <div class="modal-footer">
-            <button class="btn-secondary" @click="dialogVisible = false">
-              {{ t('common.cancel') }}
-            </button>
-            <button class="btn-primary" @click="confirmModify">
-              {{ t('common.confirm') }}
-            </button>
-          </div>
+        <div class="p-2">
+          <input v-model="imgInfo.imgUrl" type="text" class="form-input" placeholder="Enter new URL" />
         </div>
-      </div>
+        <template #footer>
+          <CustomButton :type="'secondary'" :text="t('common.cancel')" @click="dialogVisible = false" />
+          <CustomButton :type="'primary'" :text="t('common.confirm')" @click="confirmModify" />
+        </template>
+      </CustomModal>
     </transition>
 
     <!-- Batch Rename Modal -->
     <transition name="modal">
-      <div
+      <CustomModal
         v-if="isShowBatchRenameDialog"
-        class="modal-overlay"
-        :class="{ 'advanced-animation': enableAdvancedAnimation }"
+        v-model:visible="isShowBatchRenameDialog"
+        :height="'auto'"
+        :width="'700px'"
+        :title="t('pages.gallery.batchEditUrl')"
       >
-        <div class="modal-container" @click.stop>
-          <div class="modal-header">
-            <h3 class="m-0 text-xl font-semibold text-main">{{ t('pages.gallery.batchEditUrl') }}</h3>
-            <button class="modal-close-btn" @click="isShowBatchRenameDialog = false">
-              <XIcon :size="20" />
-            </button>
-          </div>
-          <div class="p-6">
-            <div class="mb-6 last:mb-0">
-              <label class="form-label">
-                {{ t('pages.gallery.regexPattern', { matched: matchedCount || 0 }) }}
-              </label>
-              <input
-                v-model="batchRenameMatch"
-                type="text"
-                class="form-input"
-                :placeholder="t('pages.gallery.regexPatternPlaceholder')"
-                @focus="showMatchedUrls = true"
-                @blur="showMatchedUrls = false"
-              />
-              <div
-                v-if="showMatchedUrls && matchedUrls.length > 0"
-                class="absolute z-1000 mt-2 max-h-[300px] max-w-[650px] overflow-hidden rounded-md border border-border-secondary bg-bg-tertiary p-0 shadow-md"
-              >
+        <div class="p-6">
+          <div class="mb-6 last:mb-0">
+            <label class="form-label">
+              {{ t('pages.gallery.regexPattern', { matched: matchedCount || 0 }) }}
+            </label>
+            <input
+              v-model="batchRenameMatch"
+              type="text"
+              class="form-input"
+              :placeholder="t('pages.gallery.regexPatternPlaceholder')"
+              @focus="showMatchedUrls = true"
+              @blur="showMatchedUrls = false"
+            />
+            <div
+              v-if="showMatchedUrls && matchedUrls.length > 0"
+              class="absolute z-1000 mt-2 max-h-[300px] max-w-[650px] overflow-hidden rounded-md border border-border-secondary bg-bg-tertiary p-0 shadow-md"
+            >
+              <div class="border-b border-b-border-secondary bg-bg-secondary px-4 py-3 text-sm font-semibold text-main">
+                Matched URLs ({{ matchedUrls.length }}):
+              </div>
+              <div class="max-h-[240px] overflow-auto p-2">
                 <div
-                  class="border-b border-b-border-secondary bg-bg-secondary px-4 py-3 text-sm font-semibold text-main"
+                  v-for="(url, index) in matchedUrls"
+                  :key="index"
+                  class="rounded-sm px-3 py-2 font-['SF_Mono',Monaco,'Cascadia_Code','Roboto_Mono',Consolas,'Courier_New',monospace] text-sm break-all text-secondary transition-all duration-fast ease-apple hover:bg-surface-elevated"
                 >
-                  Matched URLs ({{ matchedUrls.length }}):
-                </div>
-                <div class="max-h-[240px] overflow-auto p-2">
-                  <div
-                    v-for="(url, index) in matchedUrls"
-                    :key="index"
-                    class="rounded-sm px-3 py-2 font-['SF_Mono',Monaco,'Cascadia_Code','Roboto_Mono',Consolas,'Courier_New',monospace] text-sm break-all text-secondary transition-all duration-fast ease-apple hover:bg-surface-elevated"
-                  >
-                    {{ url }}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="mb-6 last:mb-0">
-              <label class="form-label">
-                {{ t('pages.gallery.replacedWith') }}
-                <button
-                  class="flex h-[20px] w-[20px] cursor-pointer items-center justify-around rounded-full border-none bg-accent text-white transition-all duration-fast ease-apple hover:bg-accent-hover"
-                  @click="showFormatInfo = !showFormatInfo"
-                >
-                  <InfoIcon :size="16" />
-                </button>
-              </label>
-              <input v-model="batchRenameReplace" type="text" class="form-input" placeholder="Ex. {Y}-{m}-{uuid}" />
-            </div>
-
-            <!-- Format Info Panel -->
-            <div v-if="showFormatInfo" class="mb-6 last:mb-0">
-              <label>{{ t('pages.settings.upload.availablePlaceholders') }}</label>
-              <div
-                class="mt-3 max-h-[400px] overflow-y-auto rounded-lg border border-border bg-bg-tertiary p-0 shadow-sm"
-              >
-                <div class="border-b border-b-border last:border-b-0">
-                  <div class="category-title">
-                    {{ t('pages.settings.upload.placeholder.categoryTime') }}
-                  </div>
-                  <div class="placeholder-grid">
-                    <div
-                      v-for="item in advancedRenameList.categoryTime"
-                      :key="item.value"
-                      class="placeholder-item"
-                      @click="copyPlaceholder(item.value)"
-                    >
-                      <code>{{ item.value }}</code>
-                      <span>{{ item.label }}</span>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="placeholder-category">
-                  <div class="category-title">
-                    {{ t('pages.settings.upload.placeholder.categoryHash') }}
-                  </div>
-                  <div class="placeholder-grid">
-                    <div
-                      v-for="item in advancedRenameList.categoryHash"
-                      :key="item.value"
-                      class="placeholder-item"
-                      @click="copyPlaceholder(item.value)"
-                    >
-                      <code>{{ item.value }}</code>
-                      <span>{{ item.label }}</span>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="placeholder-category">
-                  <div class="category-title">
-                    {{ t('pages.settings.upload.placeholder.categoryFile') }}
-                  </div>
-                  <div class="placeholder-grid">
-                    <div
-                      v-for="item in advancedRenameList.categoryFile"
-                      :key="item.value"
-                      class="placeholder-item"
-                      @click="copyPlaceholder(item.value)"
-                    >
-                      <code>{{ item.value }}</code>
-                      <span>{{ item.label }}</span>
-                    </div>
-                  </div>
+                  {{ url }}
                 </div>
               </div>
             </div>
           </div>
-          <div class="modal-footer">
-            <button class="btn-secondary" @click="isShowBatchRenameDialog = false">
-              {{ t('common.cancel') }}
-            </button>
-            <button class="btn-primary" @click="handleBatchRename()">
-              {{ t('common.confirm') }}
-            </button>
+
+          <div class="mb-6 last:mb-0">
+            <label class="form-label">
+              {{ t('pages.gallery.replacedWith') }}
+              <button
+                class="flex h-[20px] w-[20px] cursor-pointer items-center justify-around rounded-full border-none bg-accent text-white transition-all duration-fast ease-apple hover:bg-accent-hover"
+                @click="showFormatInfo = !showFormatInfo"
+              >
+                <InfoIcon :size="16" />
+              </button>
+            </label>
+            <input v-model="batchRenameReplace" type="text" class="form-input" placeholder="Ex. {Y}-{m}-{uuid}" />
+          </div>
+
+          <!-- Format Info Panel -->
+          <div v-if="showFormatInfo" class="mb-6 last:mb-0">
+            <label>{{ t('pages.settings.upload.availablePlaceholders') }}</label>
+            <div
+              class="mt-3 max-h-[400px] overflow-y-auto rounded-lg border border-border bg-bg-tertiary p-0 shadow-sm"
+            >
+              <div class="border-b border-b-border last:border-b-0">
+                <div class="category-title">
+                  {{ t('pages.settings.upload.placeholder.categoryTime') }}
+                </div>
+                <div class="placeholder-grid">
+                  <div
+                    v-for="item in advancedRenameList.categoryTime"
+                    :key="item.value"
+                    class="placeholder-item"
+                    @click="copyPlaceholder(item.value)"
+                  >
+                    <code>{{ item.value }}</code>
+                    <span>{{ item.label }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="placeholder-category">
+                <div class="category-title">
+                  {{ t('pages.settings.upload.placeholder.categoryHash') }}
+                </div>
+                <div class="placeholder-grid">
+                  <div
+                    v-for="item in advancedRenameList.categoryHash"
+                    :key="item.value"
+                    class="placeholder-item"
+                    @click="copyPlaceholder(item.value)"
+                  >
+                    <code>{{ item.value }}</code>
+                    <span>{{ item.label }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="placeholder-category">
+                <div class="category-title">
+                  {{ t('pages.settings.upload.placeholder.categoryFile') }}
+                </div>
+                <div class="placeholder-grid">
+                  <div
+                    v-for="item in advancedRenameList.categoryFile"
+                    :key="item.value"
+                    class="placeholder-item"
+                    @click="copyPlaceholder(item.value)"
+                  >
+                    <code>{{ item.value }}</code>
+                    <span>{{ item.label }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+        <template #footer>
+          <CustomButton :type="'secondary'" :text="t('common.cancel')" @click="isShowBatchRenameDialog = false" />
+          <CustomButton :type="'primary'" :text="t('common.confirm')" @click="handleBatchRename" />
+        </template>
+      </CustomModal>
     </transition>
   </div>
 </template>
@@ -582,6 +559,8 @@ import { useI18n } from 'vue-i18n'
 import { onBeforeRouteUpdate } from 'vue-router'
 
 import ALLApi from '@/apis/allApi'
+import CustomButton from '@/components/common/customButton.vue'
+import CustomModal from '@/components/common/customModal.vue'
 import MultiSelect from '@/components/common/multiSelect.vue'
 import SingleSelect from '@/components/common/singleSelect.vue'
 import VirtualScroller from '@/components/VirtualScroller.vue'
diff --git a/src/renderer/pages/PicGoSetting.vue b/src/renderer/pages/PicGoSetting.vue
index b6757c04..32ad8291 100644
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/src/renderer/pages/PicGoSetting.vue
@@ -182,9 +182,7 @@
               :title="t('pages.settings.system.customMiniIconPath')"
             >
               <template #extra>
-                <button class="btn btn-secondary btn-sm" @click="handleMiniIconPath">
-                  {{ t('pages.settings.clickToSet') }}
-                </button>
+                <CustomButton type="secondary" :text="t('pages.settings.clickToSet')" @click="handleMiniIconPath" />
               </template>
             </CustomNavCard>
           </SettingSection>
@@ -693,842 +691,523 @@
 
     <!-- Dialogs -->
     <!-- Custom Link Format Dialog -->
-    <div v-if="customLinkVisible" class="dialog-overlay" :class="advancedAnimation" @click="customLinkVisible = false">
-      <div class="dialog enhanced-dialog" @click.stop>
-        <div class="dialog-header">
-          <div class="dialog-header-content">
-            <div class="dialog-icon-wrapper link">
-              <Link :size="20" />
-            </div>
-            <div>
-              <h3 class="dialog-title">{{ t('pages.settings.upload.customLinkFormat') }}</h3>
-            </div>
+    <CustomModal
+      v-if="customLinkVisible"
+      v-model:visible="customLinkVisible"
+      height="auto"
+      width="auto"
+      :title="t('pages.settings.upload.customLinkFormat')"
+    >
+      <div class="flex flex-col gap-4 p-4">
+        <div class="rounded-lg border border-border p-4">
+          <div class="mb-2 flex items-center gap-2 p-1">
+            <FileText :size="16" class="text-accent" />
+            <span class="text-sm font-semibold text-main">{{
+              t('pages.settings.upload.availablePlaceholdersTitle')
+            }}</span>
           </div>
-          <button class="dialog-close" @click="customLinkVisible = false">×</button>
-        </div>
-        <div class="dialog-content">
-          <div class="placeholder-info-card">
-            <div class="placeholder-info-title">
-              <FileText :size="16" />
-              <span>{{ t('pages.settings.upload.availablePlaceholdersTitle') }}</span>
-            </div>
-            <div class="placeholder-info-list">
-              <div class="placeholder-info-item">
-                <code>$url</code>
-                <span>{{ t('pages.settings.upload.urlPlaceholder') }}</span>
+          <div class="flex flex-col gap-2">
+            <template v-for="item in placeholderList" :key="item.code">
+              <div class="flex items-center gap-3">
+                <code
+                  class="min-w-[80px] rounded-sm border border-border bg-bg-secondary px-2 py-1 text-center font-['SF_Mono,Monaco,Menlo,monospace'] text-sm font-semibold text-main"
+                  >{{ item.code }}</code
+                >
+                <span class="text-sm font-semibold text-secondary">{{
+                  t(`pages.settings.upload.${item.description}`)
+                }}</span>
               </div>
-              <div class="placeholder-info-item">
-                <code>$fileName</code>
-                <span>{{ t('pages.settings.upload.fileNamePlaceholder') }}</span>
-              </div>
-              <div class="placeholder-info-item">
-                <code>$extName</code>
-                <span>{{ t('pages.settings.upload.extNamePlaceholder') }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="form-group">
-            <label>{{ t('pages.settings.upload.customLinkFormatInput') }}</label>
-            <input v-model="customLink.value" type="text" class="form-input" :placeholder="'![$fileName]($url)'" />
+            </template>
           </div>
         </div>
-        <div class="dialog-footer">
-          <button class="btn btn-secondary" @click="cancelCustomLink">
-            {{ t('common.cancel') }}
-          </button>
-          <button class="btn btn-primary" @click="confirmCustomLink">
-            {{ t('common.confirm') }}
-          </button>
+        <div>
+          <SettingCard>
+            <CustomInput
+              v-model="customLink"
+              :title="t('pages.settings.upload.customLinkFormatInput')"
+              :placeholder="'![$fileName]($url)'"
+            />
+          </SettingCard>
         </div>
       </div>
-    </div>
+    </CustomModal>
 
     <!-- Proxy Settings Dialog -->
-    <div v-if="proxyVisible" class="dialog-overlay" :class="advancedAnimation" @click="proxyVisible = false">
-      <div class="dialog enhanced-dialog" @click.stop>
-        <div class="dialog-header">
-          <div class="dialog-header-content">
-            <div class="dialog-icon-wrapper network">
-              <Globe :size="20" />
-            </div>
-            <div>
-              <h3 class="dialog-title">{{ t('pages.settings.advanced.setProxyAndMirror') }}</h3>
-              <p class="dialog-subtitle">{{ t('pages.settings.advanced.proxyDialogDesc') }}</p>
-            </div>
-          </div>
-          <button class="dialog-close" @click="proxyVisible = false">×</button>
-        </div>
-        <div class="dialog-content">
-          <div class="proxy-config-grid">
-            <div class="proxy-config-card">
-              <div class="proxy-config-icon">
-                <CloudUpload :size="18" />
-              </div>
-              <div class="proxy-config-field">
-                <label>{{ t('pages.settings.advanced.uploadProxy') }}</label>
-                <input v-model="proxy" type="text" class="form-input" placeholder="http://127.0.0.1:1080" />
-              </div>
-            </div>
-            <div class="proxy-config-card">
-              <div class="proxy-config-icon">
-                <Settings :size="18" />
-              </div>
-              <div class="proxy-config-field">
-                <label>{{ t('pages.settings.advanced.pluginInstallProxy') }}</label>
-                <input
-                  v-model="formOfSetting.proxy"
-                  type="text"
-                  class="form-input"
-                  placeholder="http://127.0.0.1:1080"
-                />
-              </div>
-            </div>
-            <div class="proxy-config-card full-width">
-              <div class="proxy-config-icon">
-                <Globe :size="18" />
-              </div>
-              <div class="proxy-config-field">
-                <label>{{ t('pages.settings.advanced.pluginInstallMirror') }}</label>
-                <input
-                  v-model="formOfSetting.registry"
-                  type="text"
-                  class="form-input"
-                  placeholder="https://registry.npmmirror.com"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="dialog-footer">
-          <button class="btn btn-secondary" @click="proxyVisible = false">
-            {{ t('common.cancel') }}
-          </button>
-          <button class="btn btn-primary" @click="proxyVisible = false">
-            {{ t('common.confirm') }}
-          </button>
-        </div>
-      </div>
-    </div>
+    <CustomModal
+      v-if="proxyVisible"
+      v-model:visible="proxyVisible"
+      height="auto"
+      width="600px"
+      :title="t('pages.settings.advanced.setProxyAndMirror')"
+    >
+      <SettingSection>
+        <SettingCard>
+          <CustomInput
+            v-model="proxy"
+            :title="t('pages.settings.advanced.uploadProxy')"
+            placeholder="http://127.0.0.1:1080"
+          />
+        </SettingCard>
+        <SettingCard>
+          <CustomInput
+            v-model="formOfSetting.proxy"
+            :title="t('pages.settings.advanced.pluginInstallProxy')"
+            placeholder="http://127.0.0.1:1080"
+          />
+        </SettingCard>
+        <SettingCard>
+          <CustomInput
+            v-model="formOfSetting.registry"
+            :title="t('pages.settings.advanced.pluginInstallMirror')"
+            placeholder="https://registry.npmmirror.com"
+          />
+        </SettingCard>
+      </SettingSection>
+    </CustomModal>
 
     <!-- Main Window Size Dialog -->
-    <div v-if="mainWindowSizeVisible" class="dialog-overlay" :class="advancedAnimation">
-      <div class="dialog enhanced-dialog" @click.stop>
-        <div class="dialog-header">
-          <div class="dialog-header-content">
-            <div class="dialog-icon-wrapper window">
-              <Monitor :size="20" />
-            </div>
-            <div>
-              <h3 class="dialog-title">{{ t('pages.settings.system.setMainWindowSize') }}</h3>
-            </div>
-          </div>
-          <button class="dialog-close" @click="cancelWindowSize">X</button>
-        </div>
-        <div class="dialog-content">
-          <div class="window-size-grid">
-            <div class="window-size-field">
-              <label>
-                <Monitor :size="14" />
-                {{ t('pages.settings.system.mainWindowWidth') }}
-              </label>
-              <input v-model="formOfSetting.mainWindowWidth" type="number" class="form-input" placeholder="1200" />
-            </div>
-            <div class="window-size-field">
-              <label>
-                <Monitor :size="14" />
-                {{ t('pages.settings.system.mainWindowHeight') }}
-              </label>
-              <input v-model="formOfSetting.mainWindowHeight" type="number" class="form-input" placeholder="800" />
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="switch-label">
-              <input v-model="rawPicGoSize" type="checkbox" class="switch-input" />
-              <span class="switch-slider" />
-              <div class="switch-content">
-                <div class="switch-title">{{ t('pages.settings.system.rawPicGoSize') }}</div>
-                <div class="switch-description">
-                  {{ t('pages.settings.system.rawPicGoSizeHint') }}
-                </div>
-              </div>
-            </label>
-          </div>
-        </div>
-        <div class="dialog-footer">
-          <button class="btn btn-secondary" @click="cancelWindowSize">
-            {{ t('common.cancel') }}
-          </button>
-          <button class="btn btn-primary" @click="confirmWindowSize">
-            {{ t('common.confirm') }}
-          </button>
-        </div>
-      </div>
-    </div>
+    <CustomModal
+      v-if="mainWindowSizeVisible"
+      v-model:visible="mainWindowSizeVisible"
+      height="auto"
+      width="600px"
+      :title="t('pages.settings.system.setMainWindowSize')"
+    >
+      <SettingSection>
+        <SettingCard>
+          <CustomInput
+            v-model="formOfSetting.mainWindowWidth"
+            type="number"
+            min="1"
+            max="10000"
+            :title="t('pages.settings.system.mainWindowWidth')"
+            placeholder="1200"
+          />
+        </SettingCard>
+        <SettingCard>
+          <CustomInput
+            v-model="formOfSetting.mainWindowHeight"
+            type="number"
+            min="1"
+            max="10000"
+            :title="t('pages.settings.system.mainWindowHeight')"
+            placeholder="800"
+          />
+        </SettingCard>
+        <CustomSwitch
+          v-model="rawPicGoSize"
+          small
+          :title="t('pages.settings.system.rawPicGoSize')"
+          :description="t('pages.settings.system.rawPicGoSizeHint')"
+        />
+      </SettingSection>
+    </CustomModal>
 
     <!-- Check Update Dialog -->
-    <div v-if="checkUpdateVisible" class="dialog-overlay" :class="advancedAnimation" @click="cancelCheckVersion">
-      <div class="dialog enhanced-dialog update-dialog" @click.stop>
-        <div class="dialog-header">
-          <div class="dialog-header-content">
-            <div class="dialog-icon-wrapper update">
-              <RefreshCw :size="20" />
-            </div>
-            <div>
-              <h3 class="dialog-title">{{ t('pages.settings.update.checkUpdate') }}</h3>
-              <p class="dialog-subtitle">{{ t('pages.settings.update.checkUpdateDialogDesc') }}</p>
+    <CustomModal
+      v-if="checkUpdateVisible"
+      v-model:visible="checkUpdateVisible"
+      height="auto"
+      width="500px"
+      :title="t('pages.settings.update.checkUpdate')"
+    >
+      <div class="mb-4 no-scrollbar overflow-y-auto p-1">
+        <div class="mt-5 flex items-center justify-center gap-4">
+          <div class="min-w-[120px] flex-1 rounded-lg border border-border bg-bg-tertiary px-5 py-4 text-center">
+            <div class="mb-1.5 text-sm font-semibold text-secondary">
+              {{ t('pages.settings.update.currentVersionLabel') }}
             </div>
+            <div class="text-lg font-bold text-main">v{{ version }}</div>
           </div>
-          <button class="dialog-close" @click="cancelCheckVersion">×</button>
-        </div>
-        <div class="dialog-content">
-          <div class="update-version-comparison">
-            <div class="version-card current">
-              <div class="version-card-label">{{ t('pages.settings.update.currentVersionLabel') }}</div>
-              <div class="version-card-value">v{{ version }}</div>
-            </div>
-            <div class="version-arrow">
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M5 12h14M12 5l7 7-7 7" />
-              </svg>
-            </div>
-            <div class="version-card latest" :class="{ 'has-update': needUpdate }">
-              <div class="version-card-label">{{ t('pages.settings.update.newestVersion') }}</div>
-              <div class="version-card-value">
-                {{ latestVersion ? `${latestVersion}` : t('pages.settings.update.getting') }}
-              </div>
-            </div>
+          <div class="shrink-0 text-tertiary">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M5 12h14M12 5l7 7-7 7" />
+            </svg>
           </div>
-          <div v-if="needUpdate" class="update-notice-card">
-            <RefreshCw :size="18" />
-            <span>{{ t('pages.settings.update.hasNewVersion') }}</span>
+          <div
+            class="group latest min-w-[120px] flex-1 rounded-lg border border-border bg-bg-tertiary px-5 py-4 text-center"
+            :class="{ 'has-update': needUpdate }"
+          >
+            <div class="mb-1.5 text-sm font-semibold text-secondary group-[.has-update]:text-success">
+              {{ t('pages.settings.update.newestVersion') }}
+            </div>
+            <div class="text-lg font-bold text-main group-[.has-update]:text-success">
+              {{ latestVersion ? `${latestVersion}` : t('pages.settings.update.getting') }}
+            </div>
           </div>
         </div>
-        <div class="dialog-footer">
-          <button class="btn btn-secondary" @click="cancelCheckVersion">
-            {{ t('common.cancel') }}
-          </button>
-          <button class="btn btn-primary" @click="confirmCheckVersion">
-            {{ needUpdate ? t('pages.settings.update.updateNow') : t('common.confirm') }}
-          </button>
+        <div
+          v-if="!needUpdate"
+          class="flex items-center justify-center gap-2 rounded-lg p-4 text-sm font-semibold text-success"
+        >
+          <RefreshCw :size="18" />
+          <span>{{ t('pages.settings.update.hasNewVersion') }}</span>
         </div>
       </div>
-    </div>
+      <template #footer>
+        <CustomButton type="secondary" :text="t('common.cancel')" @click="cancelCheckVersion" />
+        <CustomButton
+          type="primary"
+          :text="needUpdate ? t('pages.settings.update.updateNow') : t('common.confirm')"
+          @click="confirmCheckVersion"
+        />
+      </template>
+    </CustomModal>
 
     <!-- Advanced Rename Dialog -->
-    <div
+    <CustomModal
       v-if="advancedRenameVisible"
-      class="dialog-overlay"
-      :class="advancedAnimation"
-      @click="handleCancelAdvancedRename"
+      v-model:visible="advancedRenameVisible"
+      height="85vh"
+      width="65vw"
+      :title="t('pages.settings.upload.advancedRname')"
     >
-      <div class="dialog enhanced-dialog rename-dialog" @click.stop>
-        <div class="dialog-header">
-          <div class="dialog-header-content">
-            <div class="dialog-icon-wrapper rename">
-              <Edit :size="20" />
-            </div>
-            <div>
-              <h3 class="dialog-title">{{ t('pages.settings.upload.advancedRname') }}</h3>
-              <p class="dialog-subtitle">{{ t('pages.settings.upload.advancedRnameDialogDesc') }}</p>
-            </div>
-          </div>
-          <button class="dialog-close" @click="handleCancelAdvancedRename">×</button>
-        </div>
-        <div class="dialog-content">
-          <div class="rename-toggle-card">
-            <label class="switch-label">
-              <input v-model="advancedRename.enable" type="checkbox" class="switch-input" />
-              <span class="switch-slider" />
-              <div class="switch-content">
-                <div class="switch-title">{{ t('pages.settings.upload.enableAdvancedRname') }}</div>
-                <div class="switch-description">{{ t('pages.settings.upload.enableAdvancedRnameDesc') }}</div>
-              </div>
-            </label>
-          </div>
-          <div class="form-group rename-format-field">
-            <label>
-              <Edit :size="14" />
-              {{ t('pages.settings.upload.advancedRnameFormat') }}
-            </label>
-            <input v-model="advancedRename.format" type="text" class="form-input" placeholder="Ex. {Y}-{m}-{uuid}" />
-            <div class="dialog-footer">
-              <button class="btn btn-secondary" @click="handleCancelAdvancedRename">
-                {{ t('common.cancel') }}
-              </button>
-              <button class="btn btn-primary" @click="handleSaveAdvancedRename">
-                {{ t('common.confirm') }}
-              </button>
-            </div>
-          </div>
-          <div class="form-group">
-            <label>{{ t('pages.settings.upload.availablePlaceholders') }}</label>
-            <div class="placeholder-help">
-              <div class="placeholder-category">
-                <div class="category-title">
-                  {{ t('pages.settings.upload.placeholder.categoryTime') }}
-                </div>
-                <div class="placeholder-grid">
-                  <div
-                    v-for="item in advancedRenameList.categoryTime"
-                    :key="item.value"
-                    class="placeholder-item"
-                    @click="copyPlaceholder(item.value)"
-                  >
-                    <code>{{ item.value }}</code>
-                    <span>{{ item.label }}</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="placeholder-category">
-                <div class="category-title">
-                  {{ t('pages.settings.upload.placeholder.categoryHash') }}
-                </div>
-                <div class="placeholder-grid">
-                  <div
-                    v-for="item in advancedRenameList.categoryHash"
-                    :key="item.value"
-                    class="placeholder-item"
-                    @click="copyPlaceholder(item.value)"
-                  >
-                    <code>{{ item.value }}</code>
-                    <span>{{ item.label }}</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="placeholder-category">
-                <div class="category-title">
-                  {{ t('pages.settings.upload.placeholder.categoryFile') }}
-                </div>
-                <div class="placeholder-grid">
-                  <div
-                    v-for="item in advancedRenameList.categoryFile"
-                    :key="item.value"
-                    class="placeholder-item"
-                    @click="copyPlaceholder(item.value)"
-                  >
-                    <code>{{ item.value }}</code>
-                    <span>{{ item.label }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+      <div class="flex h-full w-full flex-col p-2">
+        <SettingSection>
+          <CustomSwitch
+            v-model="advancedRename.enable"
+            :title="t('pages.settings.upload.enableAdvancedRname')"
+            :description="t('pages.settings.upload.enableAdvancedRnameDesc')"
+          />
+          <CustomInput
+            v-model="advancedRename.format"
+            :title="t('pages.settings.upload.advancedRnameFormat')"
+            placeholder="Ex. {Y}-{m}-{uuid}"
+          />
+        </SettingSection>
+        <div class="flex w-full flex-1 flex-col overflow-hidden p-2">
+          <label class="text-xl font-bold text-secondary">{{ t('pages.settings.upload.availablePlaceholders') }}</label>
+          <placeholderTable :list="advancedRenameList" :title-list="advancedRenameTitleList" />
         </div>
       </div>
-    </div>
+    </CustomModal>
 
     <!-- Log Settings Dialog -->
-    <div v-if="logFileVisible" class="dialog-overlay" :class="advancedAnimation" @click="cancelLogLevelSetting">
-      <div class="dialog enhanced-dialog log-dialog" @click.stop>
-        <div class="dialog-header">
-          <div class="dialog-header-content">
-            <div class="dialog-icon-wrapper log">
-              <FileText :size="20" />
-            </div>
-            <div>
-              <h3 class="dialog-title">{{ t('pages.settings.advanced.setLog') }}</h3>
-              <p class="dialog-subtitle">{{ t('pages.settings.advanced.logDialogDesc') }}</p>
-            </div>
-          </div>
-          <button class="dialog-close" @click="cancelLogLevelSetting">×</button>
-        </div>
-        <div class="dialog-content">
-          <div class="log-files-section">
-            <div class="log-files-title">
-              <FolderOpen :size="16" />
-              <span>{{ t('pages.settings.advanced.logFilesTitle') }}</span>
-            </div>
-            <div class="log-files-grid">
-              <div class="log-file-card" @click="openFile('piclist.log')">
-                <div class="log-file-icon">
-                  <FileText :size="18" />
-                </div>
-                <div class="log-file-info">
-                  <span class="log-file-name">{{ t('pages.settings.advanced.logFile') }}</span>
-                  <span class="log-file-hint">piclist.log</span>
-                </div>
-              </div>
-              <div class="log-file-card" @click="openFile('piclist-gui-local.log')">
-                <div class="log-file-icon">
-                  <FileText :size="18" />
-                </div>
-                <div class="log-file-info">
-                  <span class="log-file-name">{{ t('pages.settings.advanced.guiLogFile') }}</span>
-                  <span class="log-file-hint">piclist-gui-local.log</span>
-                </div>
-              </div>
-              <div class="log-file-card" @click="openFile('manage.log')">
-                <div class="log-file-icon">
-                  <FileText :size="18" />
-                </div>
-                <div class="log-file-info">
-                  <span class="log-file-name">{{ t('pages.settings.advanced.manageLogFile') }}</span>
-                  <span class="log-file-hint">manage.log</span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="log-settings-grid">
-            <div class="form-group">
-              <label>
-                <Settings :size="14" />
-                {{ t('pages.settings.advanced.logLevel') }}
-              </label>
-              <select v-model="formOfSetting.logLevel" multiple class="form-select">
-                <option v-for="(value, key) of logLevel" :key="key" :value="key">
-                  {{ value }}
-                </option>
-              </select>
-            </div>
-            <div class="form-group">
-              <label>
-                <FileText :size="14" />
-                {{ t('pages.settings.advanced.logFileSize') }} (MB)
-              </label>
-              <input
-                v-model="formOfSetting.logFileSizeLimit"
-                type="number"
-                class="form-input"
-                placeholder="10"
-                min="1"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="dialog-footer">
-          <button class="btn btn-secondary" @click="cancelLogLevelSetting">
-            {{ t('common.cancel') }}
-          </button>
-          <button class="btn btn-primary" @click="confirmLogLevelSetting">
-            {{ t('common.confirm') }}
-          </button>
-        </div>
+    <CustomModal
+      v-if="logFileVisible"
+      v-model:visible="logFileVisible"
+      height="auto"
+      width="800px"
+      :title="t('pages.settings.advanced.setLog')"
+    >
+      <div class="flex h-full w-full flex-col p-4">
+        <SettingSection>
+          <CustomNavCard
+            :title="t('pages.settings.advanced.logFile')"
+            description="piclist.log"
+            :icon="FileText"
+            @click="openFile('piclist.log')"
+          />
+          <CustomNavCard
+            :title="t('pages.settings.advanced.guiLogFile')"
+            description="piclist-gui-local.log"
+            :icon="FileText"
+            @click="openFile('piclist-gui-local.log')"
+          />
+          <CustomNavCard
+            :title="t('pages.settings.advanced.manageLogFile')"
+            description="manage.log"
+            :icon="FileText"
+            @click="openFile('manage.log')"
+          />
+          <CustomInput
+            v-model="formOfSetting.logFileSizeLimit"
+            :title="t('pages.settings.advanced.logFileSize')"
+            placeholder="10"
+            type="number"
+            min="1"
+            max="1024"
+            step="1"
+          />
+          <SettingCard>
+            <MultiSelect
+              v-model:choosed="formOfSetting.logLevel"
+              :icon="FileText"
+              :tight="false"
+              :title="t('pages.settings.advanced.logLevel')"
+              :zero-placeholder="t('pages.settings.advanced.logLevel')"
+              :all-list="logLevel"
+          /></SettingCard>
+        </SettingSection>
       </div>
-    </div>
+    </CustomModal>
 
     <!-- Server Settings Dialog -->
-    <div v-if="serverVisible" class="dialog-overlay" :class="advancedAnimation" @click="cancelServerSetting">
-      <div class="dialog enhanced-dialog server-dialog" @click.stop>
-        <div class="dialog-header">
-          <div class="dialog-header-content">
-            <div class="dialog-icon-wrapper server">
-              <Server :size="20" />
-            </div>
-            <div>
-              <h3 class="dialog-title">{{ t('pages.settings.advanced.uploadServer') }}</h3>
-              <p class="dialog-subtitle">{{ t('pages.settings.advanced.serverDialogDesc') }}</p>
-            </div>
-          </div>
-          <button class="dialog-close" @click="cancelServerSetting">×</button>
-        </div>
-        <div class="dialog-content">
-          <div class="server-notice-card">
-            <span>{{ t('pages.settings.advanced.serverSettingsNotice') }}</span>
-          </div>
-          <div class="server-toggle-card">
-            <label class="switch-label">
-              <input v-model="server.enable" type="checkbox" class="switch-input" />
-              <span class="switch-slider" />
-              <div class="switch-content">
-                <div class="switch-title">{{ t('pages.settings.advanced.enableServer') }}</div>
-              </div>
-            </label>
-          </div>
-          <div v-if="server.enable" class="server-config-section">
-            <div class="server-config-title">
-              <Settings :size="16" />
-              <span>{{ t('pages.settings.advanced.serverConfig') }}</span>
-            </div>
-            <div class="server-fields-grid">
-              <div class="form-group">
-                <label>
-                  <Globe :size="14" />
-                  {{ t('pages.settings.advanced.serverHost') }}
-                </label>
-                <input v-model="server.host" type="text" class="form-input" placeholder="127.0.0.1" />
-              </div>
-              <div class="form-group">
-                <label>
-                  <Server :size="14" />
-                  {{ t('pages.settings.advanced.serverPort') }}
-                </label>
-                <input v-model="server.port" type="number" class="form-input" placeholder="36677" />
-              </div>
-            </div>
-            <div class="form-group server-key-field">
-              <label>
-                <Keyboard :size="14" />
-                {{ t('pages.settings.advanced.serverKey') }}
-              </label>
-              <div class="input-with-icon">
-                <input
-                  v-model="formOfSetting.serverKey"
-                  type="text"
-                  class="form-input"
-                  :placeholder="t('pages.settings.advanced.serverKeyPlaceholder')"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="dialog-footer">
-          <button class="btn btn-secondary" @click="cancelServerSetting">
-            {{ t('common.cancel') }}
-          </button>
-          <button class="btn btn-primary" @click="confirmServerSetting">
-            {{ t('common.confirm') }}
-          </button>
+    <CustomModal
+      v-if="serverVisible"
+      v-model:visible="serverVisible"
+      height="auto"
+      width="600px"
+      :title="t('pages.settings.advanced.uploadServer')"
+    >
+      <div class="flex w-full flex-col gap-4 p-4">
+        <div
+          class="mb-4 flex items-start gap-3 rounded-lg border border-border bg-success/10 px-4 py-3 text-sm leading-1.5 font-semibold text-secondary"
+        >
+          <span>{{ t('pages.settings.advanced.serverSettingsNotice') }}</span>
         </div>
+        <SettingCard p1>
+          <CustomSwitch v-model="server.enable" :title="t('pages.settings.advanced.enableServer')" no-border small />
+        </SettingCard>
+        <SettingSection v-if="server.enable">
+          <SettingCard>
+            <CustomInput
+              v-model="server.host"
+              type="text"
+              :title="t('pages.settings.advanced.serverHost')"
+              placeholder="127.0.0.1"
+            />
+          </SettingCard>
+          <SettingCard>
+            <CustomInput
+              v-model="server.port"
+              type="number"
+              :min="1"
+              :max="65535"
+              :step="1"
+              :title="t('pages.settings.advanced.serverPort')"
+              placeholder="36677"
+            />
+          </SettingCard>
+          <SettingCard>
+            <CustomInput
+              v-model="formOfSetting.serverKey"
+              :is-password="true"
+              :title="t('pages.settings.advanced.serverKey')"
+              :placeholder="t('pages.settings.advanced.serverKeyPlaceholder')"
+            />
+          </SettingCard>
+        </SettingSection>
       </div>
-    </div>
+      <template #footer>
+        <CustomButton type="secondary" :text="t('common.cancel')" @click="cancelServerSetting" />
+        <CustomButton type="primary" :text="t('common.confirm')" @click="confirmServerSetting" />
+      </template>
+    </CustomModal>
 
     <!-- Web Server Settings Dialog -->
-    <div v-if="webServerVisible" class="dialog-overlay" :class="advancedAnimation" @click="confirmWebServerSetting">
-      <div class="dialog enhanced-dialog webserver-dialog" @click.stop>
-        <div class="dialog-header">
-          <div class="dialog-header-content">
-            <div class="dialog-icon-wrapper webserver">
-              <Globe :size="20" />
-            </div>
-            <div>
-              <h3 class="dialog-title">{{ t('pages.settings.advanced.webServerSettings') }}</h3>
-              <p class="dialog-subtitle">{{ t('pages.settings.advanced.webServerDialogDesc') }}</p>
-            </div>
-          </div>
-          <button class="dialog-close" @click="confirmWebServerSetting">×</button>
-        </div>
-        <div class="dialog-content">
-          <div class="server-notice-card">
-            <span>{{ t('pages.settings.advanced.webServerNotice') }}</span>
-          </div>
-          <div class="server-toggle-card">
-            <label class="switch-label">
-              <input v-model="formOfSetting.enableWebServer" type="checkbox" class="switch-input" />
-              <span class="switch-slider" />
-              <div class="switch-content">
-                <div class="switch-title">{{ t('pages.settings.advanced.enableWebServer') }}</div>
-              </div>
-            </label>
-          </div>
-          <div v-if="formOfSetting.enableWebServer" class="server-config-section">
-            <div class="server-config-title">
-              <Settings :size="16" />
-              <span>{{ t('pages.settings.advanced.webServerConfig') }}</span>
-            </div>
-            <div class="server-fields-grid">
-              <div class="form-group">
-                <label>
-                  <Globe :size="14" />
-                  {{ t('pages.settings.advanced.webServerHost') }}
-                </label>
-                <input
-                  v-model="formOfSetting.webServerHost"
-                  type="text"
-                  class="form-input"
-                  :placeholder="t('pages.settings.advanced.webServerPlaceholderHost')"
-                />
-              </div>
-              <div class="form-group">
-                <label>
-                  <Server :size="14" />
-                  {{ t('pages.settings.advanced.webServerPort') }}
-                </label>
-                <input
-                  v-model.number="formOfSetting.webServerPort"
-                  type="number"
-                  class="form-input"
-                  min="1"
-                  max="65535"
-                  :placeholder="t('pages.settings.advanced.webServerPlaceholderPort')"
-                />
-              </div>
-            </div>
-            <div class="form-group server-path-field">
-              <label>
-                <FolderOpen :size="14" />
-                {{ t('pages.settings.advanced.webServerPath') }}
-              </label>
-              <input
-                v-model="formOfSetting.webServerPath"
-                type="text"
-                class="form-input"
-                :placeholder="t('pages.settings.advanced.webServerPathPlaceholder')"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="dialog-footer">
-          <button class="btn btn-primary" @click="confirmWebServerSetting">
-            {{ t('common.confirm') }}
-          </button>
+    <CustomModal
+      v-if="webServerVisible"
+      v-model:visible="webServerVisible"
+      height="auto"
+      width="600px"
+      :title="t('pages.settings.advanced.webServerSettings')"
+    >
+      <div class="flex w-full flex-col gap-4 p-4">
+        <div
+          class="mb-4 flex items-start gap-3 rounded-lg border border-border bg-success/10 px-4 py-3 text-sm leading-1.5 font-semibold text-secondary"
+        >
+          <span>{{ t('pages.settings.advanced.webServerNotice') }}</span>
         </div>
+        <SettingCard p1>
+          <CustomSwitch
+            v-model="formOfSetting.enableWebServer"
+            :title="t('pages.settings.advanced.enableWebServer')"
+            no-border
+            small
+          />
+        </SettingCard>
+        <SettingSection
+          v-if="formOfSetting.enableWebServer"
+          :icon="Settings"
+          :title="t('pages.settings.advanced.webServerConfig')"
+        >
+          <SettingCard>
+            <CustomInput
+              v-model="formOfSetting.webServerHost"
+              type="text"
+              :title="t('pages.settings.advanced.webServerHost')"
+              placeholder="127.0.0.1"
+            />
+          </SettingCard>
+          <SettingCard>
+            <CustomInput
+              v-model="formOfSetting.webServerPort"
+              type="number"
+              :min="1"
+              :max="65535"
+              :step="1"
+              :title="t('pages.settings.advanced.webServerPort')"
+              placeholder="37777"
+            />
+          </SettingCard>
+          <SettingCard>
+            <CustomInput
+              v-model="formOfSetting.webServerPath"
+              :title="t('pages.settings.advanced.webServerPath')"
+              :placeholder="t('pages.settings.advanced.webServerPathPlaceholder')"
+            />
+          </SettingCard>
+        </SettingSection>
       </div>
-    </div>
+      <template #footer>
+        <CustomButton type="primary" :text="t('common.confirm')" @click="confirmWebServerSetting" />
+      </template>
+    </CustomModal>
 
     <!-- Sync Configuration Dialog -->
-    <div v-if="syncVisible" class="dialog-overlay" :class="advancedAnimation">
-      <div class="dialog sync-config-dialog" @click.stop>
-        <div class="dialog-header">
-          <div class="dialog-header-content">
-            <div class="sync-dialog-icon">
-              <RotateCcw :size="24" />
-            </div>
-            <div>
-              <h3 class="dialog-title">{{ t('pages.settings.sync.syncEndpointConfig') }}</h3>
-            </div>
+    <CustomModal
+      v-if="syncVisible"
+      v-model:visible="syncVisible"
+      height="auto"
+      width="700px"
+      :title="t('pages.settings.sync.syncEndpointConfig')"
+    >
+      <div class="flex w-full flex-col gap-4 p-4">
+        <div class="p-2">
+          <div class="grid grid-cols-4 gap-3">
+            <button
+              v-for="typeitem of syncType"
+              :key="typeitem"
+              class="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-border bg-bg-tertiary px-2 py-4 hover:border-accent/50 hover:bg-accent/10 [.active]:border-accent [.active]:bg-accent/10 [.active]:text-accent [.active]:shadow-md"
+              :class="{ active: sync.type === typeitem }"
+              @click="sync.type = typeitem"
+            >
+              <GitBranch v-if="typeitem.includes('git')" class="text-secondary" :size="20" />
+              <Store v-else-if="typeitem === 'webdav'" class="text-secondary" :size="20" />
+              <span class="text-sm font-semibold text-secondary">{{
+                typeitem.slice(0, 1).toUpperCase() + typeitem.slice(1)
+              }}</span>
+            </button>
           </div>
-          <button class="dialog-close" @click="cancelSyncSetting">×</button>
         </div>
-        <div class="dialog-content sync-dialog-content">
-          <div class="sync-type-selector">
-            <label class="sync-type-label">{{ t('pages.settings.sync.selectType') }}</label>
-            <div class="sync-type-grid">
-              <button
-                v-for="typeitem of syncType"
-                :key="typeitem"
-                :class="['sync-type-btn', { active: sync.type === typeitem }]"
-                @click="sync.type = typeitem"
-              >
-                <GitBranch v-if="typeitem.includes('git')" :size="20" />
-                <Store v-else-if="typeitem === 'webdav'" :size="20" />
-                <span>{{ typeitem.slice(0, 1).toUpperCase() + typeitem.slice(1) }}</span>
-              </button>
-            </div>
-          </div>
 
-          <!-- Configuration Fields -->
-          <div class="sync-config-fields">
-            <div v-if="sync.type === 'gitea'" class="sync-field-group">
-              <label>
-                <Server :size="16" />
-                {{ t('pages.settings.sync.giteaHost') }}
-              </label>
-              <input
+        <!-- Configuration Fields -->
+        <div class="flex w-full flex-col gap-4">
+          <SettingSection :icon="Settings" :title="sync.type">
+            <SettingCard v-if="sync.type === 'gitea'">
+              <CustomInput
                 v-model.trim="sync.endpoint"
-                type="text"
-                class="form-input"
+                :title="t('pages.settings.sync.giteaHost')"
                 :placeholder="t('pages.settings.sync.giteaHost')"
               />
-            </div>
-
-            <!-- WebDAV Endpoint -->
-            <div v-if="sync.type === 'webdav'" class="sync-field-group">
-              <label>
-                <Globe :size="16" />
-                {{ t('pages.settings.sync.webdavEndpoint') }}
-              </label>
-              <input
+            </SettingCard>
+            <SettingCard v-if="sync.type === 'webdav'">
+              <CustomInput
                 v-model.trim="sync.webdavEndpoint"
-                type="text"
-                class="form-input"
+                :title="t('pages.settings.sync.webdavEndpoint')"
                 :placeholder="t('pages.settings.sync.webdavEndpoint')"
               />
-            </div>
-
-            <!-- Git-based fields -->
+            </SettingCard>
             <template v-if="sync.type !== 'webdav'">
-              <div class="sync-fields-grid">
-                <div
-                  v-for="inputItem in ['username', 'repo', 'branch', 'token']"
-                  :key="inputItem"
-                  class="sync-field-group"
-                >
-                  <label>
-                    {{ t(`pages.settings.sync.${sync.type.toLowerCase()}.${inputItem.toLowerCase()}`) }}
-                  </label>
-                  <input
-                    v-model.trim="sync[inputItem as any]"
-                    type="text"
-                    class="form-input"
-                    :placeholder="t(`pages.settings.sync.${sync.type.toLowerCase()}.${inputItem.toLowerCase()}`)"
-                  />
-                </div>
-              </div>
+              <SettingCard v-for="inputItem in ['username', 'repo', 'branch', 'token']" :key="inputItem">
+                <CustomInput
+                  v-model.trim="sync[inputItem as any]"
+                  :is-password="inputItem === 'token'"
+                  :title="t(`pages.settings.sync.${sync.type.toLowerCase()}.${inputItem.toLowerCase()}`)"
+                  :placeholder="t(`pages.settings.sync.${sync.type.toLowerCase()}.${inputItem.toLowerCase()}`)"
+                />
+              </SettingCard>
             </template>
-
-            <!-- WebDAV fields -->
-            <template v-if="sync.type === 'webdav'">
-              <div class="sync-fields-grid">
-                <div class="sync-field-group">
-                  <label>{{ t('pages.settings.sync.webdav.username') }}</label>
-                  <input
-                    v-model.trim="sync.webdavUsername"
-                    type="text"
-                    class="form-input"
-                    :placeholder="t('pages.settings.sync.webdav.username')"
-                  />
-                </div>
-                <div class="sync-field-group">
-                  <label>{{ t('pages.settings.sync.webdav.password') }}</label>
-                  <input
-                    v-model.trim="sync.webdavPassword"
-                    type="text"
-                    class="form-input"
-                    :placeholder="t('pages.settings.sync.webdav.password')"
-                  />
-                </div>
-                <div class="sync-field-group">
-                  <label>{{ t('pages.settings.sync.webdav.savePath') }}</label>
-                  <input
-                    v-model.trim="sync.webdavSavePath"
-                    type="text"
-                    class="form-input"
-                    :placeholder="t('pages.settings.sync.webdav.savePath')"
-                  />
-                </div>
-                <div class="sync-field-group">
-                  <label>{{ t('pages.settings.sync.webdav.authType') }}</label>
-                  <select v-model="sync.webdavAuthType" class="form-select">
-                    <option value="basic">Basic</option>
-                    <option value="digest">Digest</option>
-                  </select>
-                </div>
-              </div>
-              <div class="sync-ssl-toggle">
-                <label class="switch-label">
-                  <input v-model="sync.webdavSslEnabled" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.sync.webdav.enableSSL') }}</div>
-                    <div class="switch-description">{{ t('pages.settings.sync.webdav.enableSSLDesc') }}</div>
-                  </div>
-                </label>
-              </div>
-            </template>
-
-            <!-- GitHub Proxy -->
-            <div v-if="sync.type === 'github'" class="sync-field-group">
-              <label>
-                <Globe :size="16" />
-                {{ t('pages.settings.sync.syncConfigProxy') }}
-              </label>
-              <input
+            <SettingCard v-if="sync.type === 'webdav'">
+              <CustomInput
+                v-model.trim="sync.webdavUsername"
+                :title="t('pages.settings.sync.webdav.username')"
+                :placeholder="t('pages.settings.sync.webdav.username')"
+              />
+            </SettingCard>
+            <SettingCard v-if="sync.type === 'webdav'">
+              <CustomInput
+                v-model.trim="sync.webdavPassword"
+                :is-password="true"
+                :title="t('pages.settings.sync.webdav.password')"
+                :placeholder="t('pages.settings.sync.webdav.password')"
+              />
+            </SettingCard>
+            <SettingCard v-if="sync.type === 'webdav'">
+              <CustomInput
+                v-model.trim="sync.webdavSavePath"
+                :title="t('pages.settings.sync.webdav.savePath')"
+                :placeholder="t('pages.settings.sync.webdav.savePath')"
+              />
+            </SettingCard>
+            <SettingCard v-if="sync.type === 'webdav'">
+              <CustomSelect
+                v-model="sync.webdavAuthType"
+                :select-list="[
+                  { label: 'Basic', value: 'basic' },
+                  { label: 'Digest', value: 'digest' },
+                ]"
+                :title="t('pages.settings.sync.webdav.authType')"
+                :icon="Settings"
+              />
+            </SettingCard>
+            <SettingCard v-if="sync.type === 'webdav'">
+              <CustomSwitch
+                v-model="sync.webdavSslEnabled"
+                small
+                no-border
+                :title="t('pages.settings.sync.webdav.enableSSL')"
+                :description="t('pages.settings.sync.webdav.enableSSLDesc')"
+              />
+            </SettingCard>
+            <SettingCard v-if="sync.type === 'github'">
+              <CustomInput
                 v-model.trim="sync.proxy"
-                type="text"
-                class="form-input"
+                :title="t('pages.settings.sync.syncConfigProxy')"
                 :placeholder="t('pages.settings.sync.syncConfigProxy')"
               />
-            </div>
-          </div>
-        </div>
-        <div class="dialog-footer">
-          <button class="btn btn-secondary" @click="cancelSyncSetting">
-            {{ t('common.cancel') }}
-          </button>
-          <button class="btn btn-primary" @click="confirmSyncSetting">
-            {{ t('common.confirm') }}
-          </button>
+            </SettingCard>
+          </SettingSection>
         </div>
       </div>
-    </div>
+      <template #footer>
+        <CustomButton type="secondary" :text="t('common.cancel')" @click="cancelSyncSetting" />
+        <CustomButton type="primary" :text="t('common.confirm')" @click="confirmSyncSetting" />
+      </template>
+    </CustomModal>
 
     <!-- Upload/Download Config Dialog -->
-    <div
+    <CustomModal
       v-if="upDownConfigVisible"
-      class="dialog-overlay"
-      :class="advancedAnimation"
-      @click="upDownConfigVisible = false"
+      v-model:visible="upDownConfigVisible"
+      height="auto"
+      width="700px"
+      :title="t('pages.settings.sync.upDownloadSettings')"
     >
-      <div class="dialog config-dialog" @click.stop>
-        <div class="dialog-header">
-          <div class="dialog-header-content">
-            <RotateCcw :size="20" class="dialog-icon" />
-            <h3 class="dialog-title">
-              {{ t('pages.settings.sync.upDownloadSettings') }}
-            </h3>
-          </div>
-          <button class="dialog-close" @click="upDownConfigVisible = false">×</button>
-        </div>
-        <div class="dialog-content">
-          <!-- Upload Settings Section -->
-          <div class="config-section">
-            <div class="config-section-header">
-              <CloudUpload :size="18" />
-              <h4>{{ t('pages.settings.sync.uploadSettings') }}</h4>
-            </div>
-            <div class="config-button-grid">
-              <button
-                v-for="item in syncTaskList.slice(0, 3)"
-                :key="item.task"
-                class="config-button"
-                @click="syncTaskFn(item.task, item.number)"
-              >
-                <CloudUpload :size="16" class="button-icon" />
-                <span>{{ item.label }}</span>
-              </button>
-            </div>
-          </div>
-
-          <!-- Download Settings Section -->
-          <div class="config-section">
-            <div class="config-section-header">
-              <Download :size="18" />
-              <h4>{{ t('pages.settings.sync.downloadSettings') }}</h4>
-            </div>
-            <div class="config-button-grid">
-              <button
-                v-for="item in syncTaskList.slice(3, 6)"
-                :key="item.task"
-                class="config-button"
-                @click="syncTaskFn(item.task, item.number)"
-              >
-                <Download :size="16" class="button-icon" />
-                <span>{{ item.label }}</span>
-              </button>
-            </div>
-          </div>
-
-          <!-- Gallery DB Section -->
-          <div class="config-section">
-            <div class="config-section-header">
-              <ImageIcon :size="18" />
-              <h4>{{ t('pages.settings.sync.galleryDB') }}</h4>
-            </div>
-            <div class="config-button-grid full-width">
-              <button
-                v-for="item in syncTaskList.slice(6, 7)"
-                :key="item.task"
-                class="config-button"
-                @click="syncTaskFn(item.task, item.number)"
-              >
-                <RefreshCw :size="16" class="button-icon" />
-                <span>{{ item.label }}</span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div class="dialog-footer">
-          <button class="btn btn-secondary" @click="upDownConfigVisible = false">
-            {{ t('common.close') }}
-          </button>
-        </div>
+      <div class="flex flex-col gap-6 p-4">
+        <SettingSection :icon="CloudUpload" :title="t('pages.settings.sync.uploadSettings')">
+          <CustomButton
+            v-for="item in syncTaskList.slice(0, 3)"
+            :key="item.task"
+            type="secondary"
+            :icon="CloudUpload"
+            :text="item.label"
+            @click="syncTaskFn(item.task, item.number)"
+          />
+        </SettingSection>
+        <SettingSection :icon="Download" :title="t('pages.settings.sync.downloadSettings')">
+          <CustomButton
+            v-for="item in syncTaskList.slice(3, 6)"
+            :key="item.task"
+            type="secondary"
+            :icon="Download"
+            :text="item.label"
+            @click="syncTaskFn(item.task, item.number)"
+          />
+        </SettingSection>
+        <SettingSection :icon="ImageIcon" :title="t('pages.settings.sync.galleryDB')">
+          <CustomButton
+            v-for="item in syncTaskList.slice(6, 7)"
+            :key="item.task"
+            type="secondary"
+            :icon="ImageIcon"
+            :text="item.label"
+            @click="syncTaskFn(item.task, item.number)"
+          />
+        </SettingSection>
       </div>
-    </div>
+    </CustomModal>
 
     <!-- Image Process Dialog -->
-    <div
+    <CustomModal
       v-if="imageProcessDialogVisible"
-      class="dialog-overlay"
-      :class="advancedAnimation"
-      @click="imageProcessDialogVisible = false"
+      v-model:visible="imageProcessDialogVisible"
+      :title="t('pages.imageProcess.title')"
+      :description="t('pages.imageProcess.subtitle-Global')"
     >
-      <div class="dialog large" @click.stop>
-        <div class="dialog-header">
-          <h3 class="dialog-title">
-            {{ t('pages.imageProcess.title') }}
-          </h3>
-          <span class="dialog-title">
-            {{ t('pages.imageProcess.subtitle-Global') }}
-          </span>
-          <button class="dialog-close" @click="imageProcessDialogVisible = false">X</button>
-        </div>
-        <div class="dialog-content">
-          <ImageProcessSetting :config-id="''" :current-picbed-name="''" />
-        </div>
-      </div>
-    </div>
+      <ImageProcessSetting :config-id="''" :current-picbed-name="''" />
+    </CustomModal>
   </div>
 </template>
 
@@ -1559,16 +1238,18 @@ import {
 import { marked } from 'marked'
 import type { IConfig } from 'piclist'
 import pkg from 'root/package.json'
-import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, toRaw, watch } from 'vue'
+import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import CustomButton from '@/components/common/customButton.vue'
 import CustomInput from '@/components/common/customInput.vue'
+import CustomModal from '@/components/common/customModal.vue'
 import CustomNavCard from '@/components/common/customNavCard.vue'
 import CustomSelect from '@/components/common/customSelect.vue'
 import CustomSwitch from '@/components/common/customSwitch.vue'
 import MultiSelect from '@/components/common/multiSelect.vue'
+import placeholderTable from '@/components/common/placeholderTable.vue'
 import SettingCard from '@/components/common/settingCard.vue'
 import SettingSection from '@/components/common/settingSection.vue'
 import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
@@ -1620,7 +1301,7 @@ const mainWindowSizeVisible = ref(false)
 const advancedRenameVisible = ref(false)
 const imageProcessDialogVisible = ref(false)
 const rawPicGoSize = ref(false)
-const customLink = reactive({ value: '![$fileName]($url)' })
+const customLink = ref('![$fileName]($url)')
 const currentTab = useStorage<'system' | 'sync' | 'upload' | 'advanced' | 'update'>('settings-current-tab', 'system')
 const server = ref({ port: 36677, host: '0.0.0.0', enable: true })
 const advancedRename = ref({ enable: false, format: '{filename}' })
@@ -1695,10 +1376,6 @@ const tabs = computed(() => [
   { id: 'update', label: t('pages.settings.update.title'), icon: RefreshCw },
 ])
 
-const advancedAnimation = computed(() => ({
-  advancedAnimation: formOfSetting.value.enableAdvancedAnimation,
-}))
-
 const needUpdate = computed(() => {
   if (latestVersion.value) {
     return compareVersion2Update(version, latestVersion.value)
@@ -1721,14 +1398,14 @@ const syncTaskList = [
   { task: IRPCActionType.CONFIGURE_SYNC_GALLERY_DB, label: t('pages.settings.sync.galleryDB'), number: 2 },
 ]
 
-const logLevel = {
-  all: t('pages.settings.advanced.logLevelList.all'),
-  success: t('pages.settings.advanced.logLevelList.success'),
-  error: t('pages.settings.advanced.logLevelList.error'),
-  info: t('pages.settings.advanced.logLevelList.info'),
-  warn: t('pages.settings.advanced.logLevelList.warn'),
-  none: t('pages.settings.advanced.logLevelList.none'),
-}
+const logLevel = [
+  { type: 'all', name: t('pages.settings.advanced.logLevelList.all') },
+  { type: 'success', name: t('pages.settings.advanced.logLevelList.success') },
+  { type: 'error', name: t('pages.settings.advanced.logLevelList.error') },
+  { type: 'info', name: t('pages.settings.advanced.logLevelList.info') },
+  { type: 'warn', name: t('pages.settings.advanced.logLevelList.warn') },
+  { type: 'none', name: t('pages.settings.advanced.logLevelList.none') },
+]
 
 const syncType = ['github', 'gitee', 'gitea', 'webdav']
 const version = pkg.version
@@ -1814,6 +1491,27 @@ const advancedRenameList = {
   ],
 }
 
+const advancedRenameTitleList = computed(() => ({
+  categoryTime: t('pages.settings.upload.placeholder.categoryTime'),
+  categoryHash: t('pages.settings.upload.placeholder.categoryHash'),
+  categoryFile: t('pages.settings.upload.placeholder.categoryFile'),
+}))
+
+const placeholderList = [
+  {
+    code: '$url',
+    description: 'urlPlaceholder',
+  },
+  {
+    code: '$fileName',
+    description: 'fileNamePlaceholder',
+  },
+  {
+    code: '$extName',
+    description: 'extNamePlaceholder',
+  },
+]
+
 /* watchers and effects */
 const addWatch = () => {
   autoWatchKeys.forEach(key => {
@@ -1876,12 +1574,77 @@ const addWatch = () => {
     message.info(t('pages.settings.system.needRestart'))
     saveConfig({ [configPaths.settings.isDisableGPU]: newVal })
   })
-}
 
-const addProxyWatch = () => {
+  watch(
+    advancedRename,
+    newVal => {
+      saveConfig(configPaths.buildIn.rename, toRaw(newVal))
+      if (newVal.enable) {
+        formOfSetting.value.autoRename = false
+        saveConfig(configPaths.settings.autoRename, false)
+      }
+    },
+    { deep: true },
+  )
+
+  watch(
+    () => formOfSetting.value.mainWindowWidth,
+    newVal => {
+      console.log('Main window width changed:', newVal)
+      const width = enforceNumber(newVal)
+      saveConfig({ [configPaths.settings.mainWindowWidth]: rawPicGoSize.value ? 800 : Math.max(width, 100) })
+    },
+  )
+
+  watch(
+    () => formOfSetting.value.mainWindowHeight,
+    newVal => {
+      console.log('Main window height changed:', newVal)
+      const height = enforceNumber(newVal)
+      saveConfig({ [configPaths.settings.mainWindowHeight]: rawPicGoSize.value ? 450 : Math.max(height, 100) })
+    },
+  )
+
+  watch(rawPicGoSize, newVal => {
+    if (newVal) {
+      formOfSetting.value.mainWindowWidth = 800
+      formOfSetting.value.mainWindowHeight = 450
+    }
+  })
+
+  watch(customLink, newVal => {
+    saveConfig(configPaths.settings.customLink, newVal)
+  })
+
   watch(proxy, value => {
     saveConfig({ 'picBed.proxy': value })
   })
+
+  watch(
+    () => formOfSetting.value.logFileSizeLimit,
+    newVal => {
+      const size = enforceNumber(newVal)
+      if (size < 1) {
+        formOfSetting.value.logFileSizeLimit = 1
+        saveConfig({ [configPaths.settings.logFileSizeLimit]: 1 })
+      } else {
+        saveConfig({ [configPaths.settings.logFileSizeLimit]: size })
+      }
+    },
+  )
+
+  watch(
+    () => formOfSetting.value.logLevel,
+    newVal => {
+      if (newVal.length === 0) {
+        message.error(t('pages.settings.advanced.chooseLogLevel'))
+        return
+      }
+      saveConfig({
+        [configPaths.settings.logLevel]: newVal,
+      })
+    },
+  )
 }
 
 /* methods */
@@ -2041,7 +1804,6 @@ async function initData() {
     webdavSavePath: '',
   }
   formOfSetting.value.logFileSizeLimit = enforceNumber(settings.logFileSizeLimit) || 10
-  addProxyWatch()
   addWatch()
   fetchReleaseNotes()
 }
@@ -2073,32 +1835,6 @@ function openLogSetting() {
   logFileVisible.value = true
 }
 
-async function cancelCustomLink() {
-  customLinkVisible.value = false
-  customLink.value = (await getConfig<string>(configPaths.settings.customLink)) || '![$fileName]($url)'
-}
-
-function confirmCustomLink() {
-  saveConfig(configPaths.settings.customLink, customLink.value)
-  customLinkVisible.value = false
-}
-
-async function handleCancelAdvancedRename() {
-  advancedRenameVisible.value = false
-  advancedRename.value = toRaw(
-    (await getConfig<any>(configPaths.buildIn.rename)) || { enable: false, format: '{filename}' },
-  )
-}
-
-function handleSaveAdvancedRename() {
-  saveConfig(configPaths.buildIn.rename, toRaw(advancedRename.value))
-  if (advancedRename.value.enable) {
-    formOfSetting.value.autoRename = false
-    saveConfig(configPaths.settings.autoRename, false)
-  }
-  advancedRenameVisible.value = false
-}
-
 function handleMigrateFromPicGo() {
   confirm({
     title: t('pages.settings.sync.mirgrateTitle'),
@@ -2259,33 +1995,12 @@ function confirmWebServerSetting() {
   webServerVisible.value = false
 }
 
-async function getMainWindowSize() {
-  formOfSetting.value.mainWindowWidth = (await getConfig<number>(configPaths.settings.mainWindowWidth)) || 1200
-  formOfSetting.value.mainWindowHeight = (await getConfig<number>(configPaths.settings.mainWindowHeight)) || 800
-}
-
-async function cancelWindowSize() {
-  mainWindowSizeVisible.value = false
-  await getMainWindowSize()
-}
-
-async function confirmWindowSize() {
-  mainWindowSizeVisible.value = false
-  const width = enforceNumber(formOfSetting.value.mainWindowWidth)
-  const height = enforceNumber(formOfSetting.value.mainWindowHeight)
-  saveConfig({
-    [configPaths.settings.mainWindowWidth]: rawPicGoSize.value ? 800 : width < 100 ? 100 : width,
-    [configPaths.settings.mainWindowHeight]: rawPicGoSize.value ? 450 : height < 100 ? 100 : height,
-  })
-  await getMainWindowSize()
-}
-
 function handleMiniWindowOntop(val: ICheckBoxValueType) {
   saveConfig(configPaths.settings.miniWindowOntop, val)
   window.electron.sendRPC(IRPCActionType.MINI_WINDOW_ON_TOP, val)
 }
 
-async function handleMiniIconPath(_: Event) {
+async function handleMiniIconPath() {
   const result = await window.electron.triggerRPC<string[]>(IRPCActionType.MANAGE_OPEN_FILE_SELECT_DIALOG)
   if (result && result[0]) {
     formOfSetting.value.customMiniIcon = result[0]
@@ -2303,33 +2018,6 @@ function handleAesPasswordChange(val: string) {
   saveConfig(configPaths.settings.aesPassword, val || 'PicList-aesPassword')
 }
 
-function confirmLogLevelSetting() {
-  if (formOfSetting.value.logLevel.length === 0) {
-    message.error(t('pages.settings.advanced.chooseLogLevel'))
-    return
-  }
-  saveConfig({
-    [configPaths.settings.logLevel]: formOfSetting.value.logLevel,
-    [configPaths.settings.logFileSizeLimit]: formOfSetting.value.logFileSizeLimit,
-  })
-  logFileVisible.value = false
-}
-
-async function cancelLogLevelSetting() {
-  logFileVisible.value = false
-  let logLevel = await getConfig<string | string[]>(configPaths.settings.logLevel)
-  const logFileSizeLimit = (await getConfig<number>(configPaths.settings.logFileSizeLimit)) || 10
-  if (!Array.isArray(logLevel)) {
-    if (logLevel && logLevel.length > 0) {
-      logLevel = [logLevel]
-    } else {
-      logLevel = ['all']
-    }
-  }
-  formOfSetting.value.logLevel = logLevel
-  formOfSetting.value.logFileSizeLimit = logFileSizeLimit
-}
-
 function syncMessage(failed: number) {
   if (failed) {
     message.error(t('pages.settings.sync.syncResult.failed'))
@@ -2385,11 +2073,6 @@ function goShortCutPage() {
   $router.push({ name: SHORTKEY_PAGE })
 }
 
-function copyPlaceholder(placeholder: string) {
-  window.electron.clipboard.writeText(placeholder)
-  message.success(t('pages.settings.upload.copySuccess', { content: placeholder }))
-}
-
 /* lifecycle hooks */
 onBeforeMount(() => {
   initData()
diff --git a/src/renderer/pages/Upload.vue b/src/renderer/pages/Upload.vue
index 8c2b6fd1..4c2627ff 100644
--- a/src/renderer/pages/Upload.vue
+++ b/src/renderer/pages/Upload.vue
@@ -245,442 +245,400 @@
     </div>
     <!-- Image Process Dialog -->
     <transition name="modal">
-      <div
+      <CustomModal
         v-if="imageProcessDialogVisible"
-        class="fixed inset-0 z-1000 flex items-center justify-center overflow-y-auto bg-black/30"
-        :class="{ 'advanced-animation': enableAdvancedAnimation }"
-        @click.stop
+        v-model:visible="imageProcessDialogVisible"
+        :title="t('pages.imageProcess.title')"
+        :description="
+          PicBedId === '' ? t('pages.imageProcess.subtitle-Global') : t('pages.imageProcess.subtitle-PerPicbed')
+        "
       >
-        <div
-          class="m-auto flex h-[85vh] w-[90vw] flex-col overflow-hidden rounded-2xl border border-border-secondary bg-bg-tertiary shadow-xl"
-          @click.stop
-        >
-          <div
-            class="flex items-center justify-between border border-border-secondary bg-bg-tertiary px-5 py-4 max-md:p-2"
-          >
-            <h3 class="m-0 text-xl font-semibold text-main">
-              {{ t('pages.imageProcess.title') }}
-            </h3>
-            <span class="mt-1 text-xl font-semibold text-secondary">
-              {{
-                PicBedId === '' ? t('pages.imageProcess.subtitle-Global') : t('pages.imageProcess.subtitle-PerPicbed')
-              }}
-            </span>
-            <button
-              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-border bg-surface-elevated text-secondary transition-all duration-fast ease-apple hover:scale-105 hover:border-danger hover:bg-danger hover:text-white focus-visible:focus-ring"
-              @click="imageProcessDialogVisible = false"
-            >
-              <XIcon :size="20" />
-            </button>
-          </div>
-          <div class="no-scrollbar h-[calc(90vh-90px)] flex-1 overflow-y-auto max-md:p-4">
-            <ImageProcessSetting :config-id="PicBedId" :current-picbed-name="defaultPicBedG" />
-          </div>
-        </div>
-      </div>
+        <ImageProcessSetting :config-id="PicBedId" :current-picbed-name="defaultPicBedG" />
+      </CustomModal>
     </transition>
 
     <!-- Task Queue Manager Modal -->
     <transition name="modal">
-      <div
-        v-if="taskDialogVisible"
-        class="fixed inset-0 z-1000 flex items-center justify-center overflow-y-auto bg-black/50 p-4 max-md:p-4"
-        :class="{ 'advanced-animation': enableAdvancedAnimation }"
-      >
-        <div
-          class="m-auto flex h-[85vh] max-h-[85vh] w-[90vw] max-w-[90vw] flex-col overflow-hidden rounded-2xl border border-border-secondary bg-bg-tertiary shadow-xl max-md:max-h-[90vh] max-md:w-[95vw]"
-          @click.stop
-        >
-          <div class="flex items-center justify-between border border-border-secondary bg-bg-tertiary px-5 py-4">
-            <div class="flex flex-row items-center gap-4">
-              <h3 class="flex items-center gap-2.5 bg-clip-text text-xl font-bold tracking-tight text-main">
-                {{ t('pages.upload.taskQueue.title') }}
-              </h3>
-              <span class="m-0 text-lg font-semibold text-secondary">
-                {{
-                  t('pages.upload.taskQueue.stats', {
-                    completed: taskQueueStatus.stats.completed,
-                    total: taskQueueStatus.stats.total,
-                  })
-                }}
-              </span>
-            </div>
-            <button
-              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-border bg-surface-elevated text-secondary transition-all duration-fast ease-apple hover:scale-105 hover:border-danger hover:bg-danger hover:text-white focus-visible:focus-ring"
-              @click="taskDialogVisible = false"
-            >
-              <XIcon :size="20" />
-            </button>
+      <CustomModal v-if="taskDialogVisible" v-model:visible="taskDialogVisible">
+        <template #titleBar>
+          <div class="flex flex-row items-center gap-4">
+            <h3 class="flex items-center gap-2.5 bg-clip-text text-xl font-bold tracking-tight text-main">
+              {{ t('pages.upload.taskQueue.title') }}
+            </h3>
+            <span class="m-0 text-lg font-semibold text-secondary">
+              {{
+                t('pages.upload.taskQueue.stats', {
+                  completed: taskQueueStatus.stats.completed,
+                  total: taskQueueStatus.stats.total,
+                })
+              }}
+            </span>
           </div>
+        </template>
 
-          <div class="no-scrollbar max-h-[calc(90vh-90px)] overflow-y-auto">
-            <!-- Action Bar -->
-            <div
-              class="flex flex-wrap items-center justify-between gap-4 border-b border-b-border px-5 py-4 max-md:flex-col max-md:items-stretch"
-            >
-              <div class="flex flex-wrap items-center gap-2.5 max-md:w-full max-md:justify-center">
-                <button
-                  v-show="taskQueueStatus.tasks.length > 0"
-                  class="flex cursor-pointer items-center justify-center gap-2 rounded-md bg-accent px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
-                  @click="addFilesToTask"
-                >
-                  <PlusIcon :size="16" />
-                  <span>{{ t('pages.upload.taskQueue.addFiles') }}</span>
-                </button>
-                <button
-                  v-if="!taskQueueStatus.config.isRunning && taskQueueStatus.stats.pending > 0"
-                  class="flex cursor-pointer items-center gap-2 rounded-md bg-success px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
-                  @click="startTaskQueue"
-                >
-                  <PlayIcon :size="16" />
-                  <span>{{ t('pages.upload.taskQueue.start') }}</span>
-                </button>
-                <button
-                  v-if="taskQueueStatus.config.isRunning && !taskQueueStatus.config.isPaused"
-                  class="flex cursor-pointer items-center gap-2 rounded-md bg-warning px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
-                  @click="pauseTaskQueue"
-                >
-                  <PauseIcon :size="16" />
-                  <span>{{ t('pages.upload.taskQueue.pause') }}</span>
-                </button>
-                <button
-                  v-if="taskQueueStatus.config.isPaused"
-                  class="flex cursor-pointer items-center gap-2 rounded-md bg-success px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
-                  @click="resumeTaskQueue"
-                >
-                  <PlayIcon :size="16" />
-                  <span>{{ t('pages.upload.taskQueue.resume') }}</span>
-                </button>
-              </div>
-              <div class="flex flex-wrap items-center gap-2.5 max-md:w-full max-md:justify-center">
-                <button
-                  v-if="taskQueueStatus.stats.failed > 0"
-                  class="flex cursor-pointer items-center gap-2 rounded-md bg-warning px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
-                  @click="retryAllFailedTasks"
-                >
-                  <RefreshCwIcon :size="16" />
-                  <span>{{ t('pages.upload.taskQueue.retryAllFailed') }}</span>
-                </button>
-                <button
-                  v-if="taskQueueStatus.config.isRunning || taskQueueStatus.stats.pending > 0"
-                  class="flex cursor-pointer items-center gap-2 rounded-md bg-danger px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
-                  @click="cancelAllTasks"
-                >
-                  <XIcon :size="16" />
-                  <span>{{ t('pages.upload.taskQueue.cancelAll') }}</span>
-                </button>
-                <button
-                  v-if="
-                    taskQueueStatus.stats.completed > 0 ||
-                    taskQueueStatus.stats.failed > 0 ||
-                    taskQueueStatus.stats.cancelled > 0
-                  "
-                  class="flex cursor-pointer items-center gap-2 rounded-md bg-danger px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
-                  @click="clearFinishedTasks"
-                >
-                  <Trash2Icon :size="16" />
-                  <span>{{ t('pages.upload.taskQueue.clearFinished') }}</span>
-                </button>
-                <button
-                  class="flex cursor-pointer items-center gap-2 rounded-md bg-accent px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
-                  :class="{ active: showTaskSettings }"
-                  @click="showTaskSettings = !showTaskSettings"
-                >
-                  <SettingsIcon :size="16" />
-                </button>
-              </div>
-            </div>
-
-            <!-- Overall Progress -->
-            <div v-if="taskQueueStatus.stats.total > 0" class="border-b border-b-border p-5">
-              <div class="mb-3.5 flex items-center justify-between">
-                <span class="text-sm font-semibold text-main">{{ t('pages.upload.taskQueue.overallProgress') }}</span>
-                <span class="text-xl leading-1 font-bold text-accent">{{ overallProgressPercent }}%</span>
-              </div>
-              <div class="h-2 overflow-hidden rounded-full bg-surface-elevated">
-                <div
-                  class="h-full bg-[linear-gradient(90deg,var(--color-accent)_0%,var(--color-primary)_50%)] shadow-sm transition-[width] duration-medium ease-standard"
-                  :style="{ width: `${overallProgressPercent}%` }"
-                />
-              </div>
-              <div class="mt-2 flex flex-wrap justify-between gap-4">
-                <span
-                  v-if="taskQueueStatus.stats.avgSpeed > 0"
-                  class="flex items-center gap-2 py-1.5 text-xs text-secondary"
-                >
-                  <ZapIcon :size="14" class="text-accent" />
-                  {{ formatSpeed(taskQueueStatus.stats.avgSpeed) }}
-                </span>
-                <span
-                  v-if="taskQueueStatus.stats.estimatedTimeMs > 0 && taskQueueStatus.config.isRunning"
-                  class="flex items-center gap-2 py-1.5 text-xs text-secondary"
-                >
-                  <ClockIcon :size="14" class="text-accent" />
-                  {{ formatTime(taskQueueStatus.stats.estimatedTimeMs) }}
-                </span>
-                <span class="flex items-center gap-2 py-1.5 text-xs text-secondary">
-                  <HardDriveIcon :size="14" class="text-accent" />
-                  {{ formatSize(taskQueueStatus.stats.completedSize) }} /
-                  {{ formatSize(taskQueueStatus.stats.totalSize) }}
-                </span>
-              </div>
-            </div>
-
-            <!-- Settings Panel -->
-            <transition name="settings-slide">
-              <div v-if="showTaskSettings" class="overflow-visible border-b border-b-border p-4">
-                <div class="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] items-center gap-4 max-md:grid-cols-1">
-                  <div class="flex min-w-0 flex-col gap-2">
-                    <label class="m-0 flex items-center gap-2 text-sm font-medium text-main">
-                      {{ t('pages.upload.taskQueue.interval') }}
-                    </label>
-                    <div class="flex items-center gap-2.5 max-sm:flex-row">
-                      <input
-                        v-model.number="uploadInterval"
-                        type="number"
-                        min="1"
-                        max="99999"
-                        step="1"
-                        class="box-border w-full flex-1 rounded-md bg-surface-elevated px-3 py-2 text-sm text-main transition-all duration-fast ease-standard hover:border-accent hover:bg-surface focus:border-accent focus:bg-white focus:shadow-md focus:outline-0 disabled:cursor-not-allowed disabled:bg-surface disabled:opacity-60"
-                        :disabled="taskQueueStatus.config.isRunning"
-                        @change="updateInterval"
-                      />
-                      <span class="bg-transparent px-1 py-2 text-sm font-semibold text-secondary">s</span>
-                    </div>
-                  </div>
-                  <div class="flex min-w-0 flex-col gap-2">
-                    <label class="m-0 flex items-center gap-2 text-sm font-medium text-main">{{
-                      t('pages.upload.taskQueue.maxRetry')
-                    }}</label>
-                    <input
-                      v-model.number="maxRetryCount"
-                      type="number"
-                      min="0"
-                      max="10"
-                      step="1"
-                      class="box-border w-full rounded-md bg-surface-elevated px-3 py-2 text-sm text-main transition-all duration-fast ease-standard hover:border-accent hover:bg-surface focus:border-accent focus:bg-white focus:shadow-md focus:outline-0 disabled:cursor-not-allowed disabled:bg-surface disabled:opacity-60"
-                      @change="updateSettings"
-                    />
-                  </div>
-                  <div
-                    class="flex min-h-[40px] min-w-0 flex-row items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2.5 transition-all duration-fast ease-standard hover:bg-surface-elevated"
-                  >
-                    <label class="m-0 flex items-center gap-2 text-base font-semibold text-main" for="task-auto-start">
-                      {{ t('pages.upload.taskQueue.autoStart') }}
-                    </label>
-                    <input
-                      id="task-auto-start"
-                      v-model="autoStart"
-                      type="checkbox"
-                      class="h-[16px] w-[16px] cursor-pointer accent-accent"
-                      @change="updateSettings"
-                    />
-                  </div>
-                  <div
-                    class="flex min-h-[40px] min-w-0 flex-row items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2.5 transition-all duration-fast ease-standard hover:bg-surface-elevated"
-                  >
-                    <label
-                      class="m-0 flex items-center gap-2 text-base font-semibold text-main"
-                      for="task-pause-on-error"
-                    >
-                      {{ t('pages.upload.taskQueue.pauseOnError') }}
-                    </label>
-                    <input
-                      id="task-pause-on-error"
-                      v-model="pauseOnError"
-                      type="checkbox"
-                      class="h-[16px] w-[16px] cursor-pointer accent-accent"
-                      @change="updateSettings"
-                    />
-                  </div>
-                </div>
-              </div>
-            </transition>
-
-            <!-- Filter & Search Bar -->
-            <div v-if="taskQueueStatus.tasks.length > 0" class="flex flex-col gap-2 border-b border-b-border p-5">
-              <div
-                class="flex items-center gap-2.5 rounded-lg border border-border-secondary bg-bg-secondary px-4 py-2.5 shadow-sm transition-all duration-fast ease-standard focus-within:border-accent focus-within:bg-white focus-within:shadow-md"
-              >
-                <SearchIcon :size="16" class="shrink-0 text-accent" />
-                <input
-                  v-model="taskSearchQuery"
-                  type="text"
-                  class="flex border-0 bg-transparent text-sm text-main outline-0 placeholder:text-tertiary max-sm:max-w-none"
-                  :placeholder="t('pages.upload.taskQueue.searchPlaceholder')"
-                />
-              </div>
-              <div class="flex flex-wrap gap-2.5">
-                <button class="filter-tab" :class="{ active: taskFilter === 'all' }" @click="taskFilter = 'all'">
-                  {{ t('pages.upload.taskQueue.filterAll') }}
-                </button>
-                <button
-                  class="filter-tab"
-                  :class="{ active: taskFilter === 'pending' }"
-                  @click="taskFilter = 'pending'"
-                >
-                  {{ t('pages.upload.taskQueue.filterPending') }}
-                </button>
-                <button
-                  class="filter-tab"
-                  :class="{ active: taskFilter === 'completed' }"
-                  @click="taskFilter = 'completed'"
-                >
-                  {{ t('pages.upload.taskQueue.filterCompleted') }}
-                </button>
-                <button class="filter-tab" :class="{ active: taskFilter === 'failed' }" @click="taskFilter = 'failed'">
-                  {{ t('pages.upload.taskQueue.filterFailed') }}
-                </button>
-              </div>
-            </div>
-
-            <!-- Task List -->
-            <div v-if="taskQueueStatus.tasks.length > 0" class="min-h-[300px] flex-1 overflow-y-auto">
-              <TransitionGroup name="task" tag="div" class="flex flex-col">
-                <div
-                  v-for="task in filteredTasks"
-                  :key="task.id"
-                  class="group/tasklist relative flex items-center justify-between gap-2 border-b border-b-border bg-surface px-5 py-4 transition-all duration-fast ease-standard last:border-b-0 hover:bg-surface-elevated hover:shadow-sm max-md:flex-col max-md:items-start max-md:gap-3"
-                  :class="getTaskStatusClass(task.status)"
-                >
-                  <div class="flex min-w-0 flex-1 flex-col gap-2.5">
-                    <div class="flex items-center justify-between gap-3.5">
-                      <div class="flex min-w-0 flex-1 items-center gap-2.5">
-                        <span
-                          class="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-main group-[.status-cancelled]/tasklist:text-tertiary group-[.status-cancelled]/tasklist:line-through group-[.status-completed]/tasklist:text-success group-[.status-failed]/tasklist:text-danger"
-                          :title="task.filePath"
-                          >{{ task.fileName }}</span
-                        >
-                        <span
-                          v-if="task.priority === 2"
-                          class="flex shrink-0 items-center justify-center rounded-full bg-warning p-1 text-white"
-                        >
-                          <StarIcon :size="13" />
-                        </span>
-                      </div>
-                      <div
-                        class="rounded-full px-2.5 py-1 text-xs font-semibold tracking-wider whitespace-nowrap uppercase [.status-cancelled]:bg-tertiary/15 [.status-cancelled]:text-tertiary [.status-cancelled]:line-through [.status-completed]:bg-success/15 [.status-completed]:text-success [.status-failed]:bg-danger/15 [.status-failed]:text-danger [.status-pending]:bg-accent/15 [.status-pending]:text-secondary [.status-uploading]:bg-primary/15 [.status-uploading]:text-primary"
-                        :class="getTaskStatusClass(task.status)"
-                      >
-                        {{ getTaskStatusText(task.status) }}
-                      </div>
-                    </div>
-                    <div class="flex flex-wrap items-center gap-3">
-                      <span v-if="task.fileSize > 0" class="flex items-center gap-1 text-[0.75rem] text-tertiary">
-                        <HardDriveIcon :size="12" class="text-secondary" />
-                        {{ formatSize(task.fileSize) }}
-                      </span>
-                      <span
-                        v-if="task.uploadSpeed && task.status === 'uploading'"
-                        class="flex items-center gap-1 text-[0.75rem] text-tertiary"
-                      >
-                        <ZapIcon :size="12" />
-                        {{ formatSpeed(task.uploadSpeed) }}
-                      </span>
-                      <span v-if="task.retryCount > 0" class="flex items-center gap-1 text-[0.75rem] text-warning">
-                        {{ t('pages.upload.taskQueue.retryCount', { count: task.retryCount }) }}
-                      </span>
-                      <span
-                        v-if="task.error"
-                        class="flex max-w-[200px] items-center gap-1 overflow-hidden text-[0.75rem] text-ellipsis whitespace-nowrap text-danger"
-                        :title="task.error"
-                      >
-                        {{ task.error }}
-                      </span>
-                    </div>
-                  </div>
-                  <div class="flex items-center gap-1.5">
-                    <!-- Pending task actions -->
-                    <template v-if="task.status === 'pending'">
-                      <button
-                        class="task-icon-btn"
-                        :title="t('pages.upload.taskQueue.moveUp')"
-                        @click="moveTaskUp(task.id)"
-                      >
-                        <ChevronUpIcon :size="16" />
-                      </button>
-                      <button
-                        class="task-icon-btn"
-                        :title="t('pages.upload.taskQueue.moveDown')"
-                        @click="moveTaskDown(task.id)"
-                      >
-                        <ChevronDownIcon :size="16" />
-                      </button>
-                      <button
-                        class="task-icon-btn"
-                        :class="{ 'is-high': task.priority === 2 }"
-                        :title="t('pages.upload.taskQueue.togglePriority')"
-                        @click="toggleTaskPriority(task.id, task.priority)"
-                      >
-                        <StarIcon :size="16" />
-                      </button>
-                      <button
-                        class="task-icon-btn danger"
-                        :title="t('pages.upload.taskQueue.cancelTask')"
-                        @click="cancelTask(task.id)"
-                      >
-                        <XIcon :size="16" />
-                      </button>
-                    </template>
-                    <!-- Failed task actions -->
-                    <template v-if="task.status === 'failed'">
-                      <button
-                        class="task-icon-btn"
-                        :title="t('pages.upload.taskQueue.retryTask')"
-                        @click="retryTask(task.id)"
-                      >
-                        <RefreshCwIcon :size="16" />
-                      </button>
-                      <button
-                        class="task-icon-btn danger"
-                        :title="t('pages.upload.taskQueue.removeTask')"
-                        @click="removeTask(task.id)"
-                      >
-                        <Trash2Icon :size="16" />
-                      </button>
-                    </template>
-                    <!-- Completed/Cancelled task actions -->
-                    <template v-if="task.status === 'completed' || task.status === 'cancelled'">
-                      <button
-                        class="task-icon-btn"
-                        :title="t('pages.upload.taskQueue.removeTask')"
-                        @click="removeTask(task.id)"
-                      >
-                        <Trash2Icon :size="16" />
-                      </button>
-                    </template>
-                    <!-- Status icon -->
-                    <div class="flex h-[32px] w-[32px] items-center justify-center">
-                      <CheckCircleIcon v-if="task.status === 'completed'" :size="18" class="text-success" />
-                      <XCircleIcon v-if="task.status === 'failed'" :size="18" class="text-error" />
-                      <LoaderIcon
-                        v-if="task.status === 'uploading'"
-                        :size="18"
-                        class="animate-[spin_1s_linear_infinite] text-accent"
-                      />
-                      <ClockIcon v-if="task.status === 'pending'" :size="18" class="text-tertiary" />
-                    </div>
-                  </div>
-                </div>
-              </TransitionGroup>
-            </div>
-
-            <!-- Empty State -->
-            <div v-else class="flex h-full flex-col items-center gap-4 bg-bg-tertiary px-8 py-12 text-center">
-              <ListTodoIcon class="text-accent opacity-90" :size="48" />
-              <h4 class="m-0 text-xl font-semibold text-main">{{ t('pages.upload.taskQueue.empty') }}</h4>
-              <p class="m-0 max-w-[400px] text-base text-secondary">{{ t('pages.upload.taskQueue.emptyHint') }}</p>
+        <div class="no-scrollbar max-h-[calc(90vh-90px)] overflow-y-auto">
+          <!-- Action Bar -->
+          <div
+            class="flex flex-wrap items-center justify-between gap-4 border-b border-b-border px-5 py-4 max-md:flex-col max-md:items-stretch"
+          >
+            <div class="flex flex-wrap items-center gap-2.5 max-md:w-full max-md:justify-center">
               <button
+                v-show="taskQueueStatus.tasks.length > 0"
                 class="flex cursor-pointer items-center justify-center gap-2 rounded-md bg-accent px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
                 @click="addFilesToTask"
               >
                 <PlusIcon :size="16" />
-                <span class="mt-0.5">{{ t('pages.upload.taskQueue.selectFiles') }}</span>
+                <span>{{ t('pages.upload.taskQueue.addFiles') }}</span>
+              </button>
+              <button
+                v-if="!taskQueueStatus.config.isRunning && taskQueueStatus.stats.pending > 0"
+                class="flex cursor-pointer items-center gap-2 rounded-md bg-success px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
+                @click="startTaskQueue"
+              >
+                <PlayIcon :size="16" />
+                <span>{{ t('pages.upload.taskQueue.start') }}</span>
+              </button>
+              <button
+                v-if="taskQueueStatus.config.isRunning && !taskQueueStatus.config.isPaused"
+                class="flex cursor-pointer items-center gap-2 rounded-md bg-warning px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
+                @click="pauseTaskQueue"
+              >
+                <PauseIcon :size="16" />
+                <span>{{ t('pages.upload.taskQueue.pause') }}</span>
+              </button>
+              <button
+                v-if="taskQueueStatus.config.isPaused"
+                class="flex cursor-pointer items-center gap-2 rounded-md bg-success px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
+                @click="resumeTaskQueue"
+              >
+                <PlayIcon :size="16" />
+                <span>{{ t('pages.upload.taskQueue.resume') }}</span>
+              </button>
+            </div>
+            <div class="flex flex-wrap items-center gap-2.5 max-md:w-full max-md:justify-center">
+              <button
+                v-if="taskQueueStatus.stats.failed > 0"
+                class="flex cursor-pointer items-center gap-2 rounded-md bg-warning px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
+                @click="retryAllFailedTasks"
+              >
+                <RefreshCwIcon :size="16" />
+                <span>{{ t('pages.upload.taskQueue.retryAllFailed') }}</span>
+              </button>
+              <button
+                v-if="taskQueueStatus.config.isRunning || taskQueueStatus.stats.pending > 0"
+                class="flex cursor-pointer items-center gap-2 rounded-md bg-danger px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
+                @click="cancelAllTasks"
+              >
+                <XIcon :size="16" />
+                <span>{{ t('pages.upload.taskQueue.cancelAll') }}</span>
+              </button>
+              <button
+                v-if="
+                  taskQueueStatus.stats.completed > 0 ||
+                  taskQueueStatus.stats.failed > 0 ||
+                  taskQueueStatus.stats.cancelled > 0
+                "
+                class="flex cursor-pointer items-center gap-2 rounded-md bg-danger px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
+                @click="clearFinishedTasks"
+              >
+                <Trash2Icon :size="16" />
+                <span>{{ t('pages.upload.taskQueue.clearFinished') }}</span>
+              </button>
+              <button
+                class="flex cursor-pointer items-center gap-2 rounded-md bg-accent px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
+                :class="{ active: showTaskSettings }"
+                @click="showTaskSettings = !showTaskSettings"
+              >
+                <SettingsIcon :size="16" />
               </button>
             </div>
           </div>
+
+          <!-- Overall Progress -->
+          <div v-if="taskQueueStatus.stats.total > 0" class="border-b border-b-border p-5">
+            <div class="mb-3.5 flex items-center justify-between">
+              <span class="text-sm font-semibold text-main">{{ t('pages.upload.taskQueue.overallProgress') }}</span>
+              <span class="text-xl leading-1 font-bold text-accent">{{ overallProgressPercent }}%</span>
+            </div>
+            <div class="h-2 overflow-hidden rounded-full bg-surface-elevated">
+              <div
+                class="h-full bg-[linear-gradient(90deg,var(--color-accent)_0%,var(--color-primary)_50%)] shadow-sm transition-[width] duration-medium ease-standard"
+                :style="{ width: `${overallProgressPercent}%` }"
+              />
+            </div>
+            <div class="mt-2 flex flex-wrap justify-between gap-4">
+              <span
+                v-if="taskQueueStatus.stats.avgSpeed > 0"
+                class="flex items-center gap-2 py-1.5 text-xs text-secondary"
+              >
+                <ZapIcon :size="14" class="text-accent" />
+                {{ formatSpeed(taskQueueStatus.stats.avgSpeed) }}
+              </span>
+              <span
+                v-if="taskQueueStatus.stats.estimatedTimeMs > 0 && taskQueueStatus.config.isRunning"
+                class="flex items-center gap-2 py-1.5 text-xs text-secondary"
+              >
+                <ClockIcon :size="14" class="text-accent" />
+                {{ formatTime(taskQueueStatus.stats.estimatedTimeMs) }}
+              </span>
+              <span class="flex items-center gap-2 py-1.5 text-xs text-secondary">
+                <HardDriveIcon :size="14" class="text-accent" />
+                {{ formatSize(taskQueueStatus.stats.completedSize) }} /
+                {{ formatSize(taskQueueStatus.stats.totalSize) }}
+              </span>
+            </div>
+          </div>
+
+          <!-- Settings Panel -->
+          <transition name="settings-slide">
+            <div v-if="showTaskSettings" class="overflow-visible border-b border-b-border p-4">
+              <div class="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] items-center gap-4 max-md:grid-cols-1">
+                <div class="flex min-w-0 flex-col gap-2">
+                  <label class="m-0 flex items-center gap-2 text-sm font-medium text-main">
+                    {{ t('pages.upload.taskQueue.interval') }}
+                  </label>
+                  <div class="flex items-center gap-2.5 max-sm:flex-row">
+                    <input
+                      v-model.number="uploadInterval"
+                      type="number"
+                      min="1"
+                      max="99999"
+                      step="1"
+                      class="box-border w-full flex-1 rounded-md bg-surface-elevated px-3 py-2 text-sm text-main transition-all duration-fast ease-standard hover:border-accent hover:bg-surface focus:border-accent focus:bg-white focus:shadow-md focus:outline-0 disabled:cursor-not-allowed disabled:bg-surface disabled:opacity-60"
+                      :disabled="taskQueueStatus.config.isRunning"
+                      @change="updateInterval"
+                    />
+                    <span class="bg-transparent px-1 py-2 text-sm font-semibold text-secondary">s</span>
+                  </div>
+                </div>
+                <div class="flex min-w-0 flex-col gap-2">
+                  <label class="m-0 flex items-center gap-2 text-sm font-medium text-main">{{
+                    t('pages.upload.taskQueue.maxRetry')
+                  }}</label>
+                  <input
+                    v-model.number="maxRetryCount"
+                    type="number"
+                    min="0"
+                    max="10"
+                    step="1"
+                    class="box-border w-full rounded-md bg-surface-elevated px-3 py-2 text-sm text-main transition-all duration-fast ease-standard hover:border-accent hover:bg-surface focus:border-accent focus:bg-white focus:shadow-md focus:outline-0 disabled:cursor-not-allowed disabled:bg-surface disabled:opacity-60"
+                    @change="updateSettings"
+                  />
+                </div>
+                <div
+                  class="flex min-h-[40px] min-w-0 flex-row items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2.5 transition-all duration-fast ease-standard hover:bg-surface-elevated"
+                >
+                  <label class="m-0 flex items-center gap-2 text-base font-semibold text-main" for="task-auto-start">
+                    {{ t('pages.upload.taskQueue.autoStart') }}
+                  </label>
+                  <input
+                    id="task-auto-start"
+                    v-model="autoStart"
+                    type="checkbox"
+                    class="h-[16px] w-[16px] cursor-pointer accent-accent"
+                    @change="updateSettings"
+                  />
+                </div>
+                <div
+                  class="flex min-h-[40px] min-w-0 flex-row items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2.5 transition-all duration-fast ease-standard hover:bg-surface-elevated"
+                >
+                  <label
+                    class="m-0 flex items-center gap-2 text-base font-semibold text-main"
+                    for="task-pause-on-error"
+                  >
+                    {{ t('pages.upload.taskQueue.pauseOnError') }}
+                  </label>
+                  <input
+                    id="task-pause-on-error"
+                    v-model="pauseOnError"
+                    type="checkbox"
+                    class="h-[16px] w-[16px] cursor-pointer accent-accent"
+                    @change="updateSettings"
+                  />
+                </div>
+              </div>
+            </div>
+          </transition>
+
+          <!-- Filter & Search Bar -->
+          <div v-if="taskQueueStatus.tasks.length > 0" class="flex flex-col gap-2 border-b border-b-border p-5">
+            <div
+              class="flex items-center gap-2.5 rounded-lg border border-border-secondary bg-bg-secondary px-4 py-2.5 shadow-sm transition-all duration-fast ease-standard focus-within:border-accent focus-within:bg-white focus-within:shadow-md"
+            >
+              <SearchIcon :size="16" class="shrink-0 text-accent" />
+              <input
+                v-model="taskSearchQuery"
+                type="text"
+                class="flex border-0 bg-transparent text-sm text-main outline-0 placeholder:text-tertiary max-sm:max-w-none"
+                :placeholder="t('pages.upload.taskQueue.searchPlaceholder')"
+              />
+            </div>
+            <div class="flex flex-wrap gap-2.5">
+              <button class="filter-tab" :class="{ active: taskFilter === 'all' }" @click="taskFilter = 'all'">
+                {{ t('pages.upload.taskQueue.filterAll') }}
+              </button>
+              <button class="filter-tab" :class="{ active: taskFilter === 'pending' }" @click="taskFilter = 'pending'">
+                {{ t('pages.upload.taskQueue.filterPending') }}
+              </button>
+              <button
+                class="filter-tab"
+                :class="{ active: taskFilter === 'completed' }"
+                @click="taskFilter = 'completed'"
+              >
+                {{ t('pages.upload.taskQueue.filterCompleted') }}
+              </button>
+              <button class="filter-tab" :class="{ active: taskFilter === 'failed' }" @click="taskFilter = 'failed'">
+                {{ t('pages.upload.taskQueue.filterFailed') }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Task List -->
+          <div v-if="taskQueueStatus.tasks.length > 0" class="min-h-[300px] flex-1 overflow-y-auto">
+            <TransitionGroup name="task" tag="div" class="flex flex-col">
+              <div
+                v-for="task in filteredTasks"
+                :key="task.id"
+                class="group/tasklist relative flex items-center justify-between gap-2 border-b border-b-border bg-surface px-5 py-4 transition-all duration-fast ease-standard last:border-b-0 hover:bg-surface-elevated hover:shadow-sm max-md:flex-col max-md:items-start max-md:gap-3"
+                :class="getTaskStatusClass(task.status)"
+              >
+                <div class="flex min-w-0 flex-1 flex-col gap-2.5">
+                  <div class="flex items-center justify-between gap-3.5">
+                    <div class="flex min-w-0 flex-1 items-center gap-2.5">
+                      <span
+                        class="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-main group-[.status-cancelled]/tasklist:text-tertiary group-[.status-cancelled]/tasklist:line-through group-[.status-completed]/tasklist:text-success group-[.status-failed]/tasklist:text-danger"
+                        :title="task.filePath"
+                        >{{ task.fileName }}</span
+                      >
+                      <span
+                        v-if="task.priority === 2"
+                        class="flex shrink-0 items-center justify-center rounded-full bg-warning p-1 text-white"
+                      >
+                        <StarIcon :size="13" />
+                      </span>
+                    </div>
+                    <div
+                      class="rounded-full px-2.5 py-1 text-xs font-semibold tracking-wider whitespace-nowrap uppercase [.status-cancelled]:bg-tertiary/15 [.status-cancelled]:text-tertiary [.status-cancelled]:line-through [.status-completed]:bg-success/15 [.status-completed]:text-success [.status-failed]:bg-danger/15 [.status-failed]:text-danger [.status-pending]:bg-accent/15 [.status-pending]:text-secondary [.status-uploading]:bg-primary/15 [.status-uploading]:text-primary"
+                      :class="getTaskStatusClass(task.status)"
+                    >
+                      {{ getTaskStatusText(task.status) }}
+                    </div>
+                  </div>
+                  <div class="flex flex-wrap items-center gap-3">
+                    <span v-if="task.fileSize > 0" class="flex items-center gap-1 text-[0.75rem] text-tertiary">
+                      <HardDriveIcon :size="12" class="text-secondary" />
+                      {{ formatSize(task.fileSize) }}
+                    </span>
+                    <span
+                      v-if="task.uploadSpeed && task.status === 'uploading'"
+                      class="flex items-center gap-1 text-[0.75rem] text-tertiary"
+                    >
+                      <ZapIcon :size="12" />
+                      {{ formatSpeed(task.uploadSpeed) }}
+                    </span>
+                    <span v-if="task.retryCount > 0" class="flex items-center gap-1 text-[0.75rem] text-warning">
+                      {{ t('pages.upload.taskQueue.retryCount', { count: task.retryCount }) }}
+                    </span>
+                    <span
+                      v-if="task.error"
+                      class="flex max-w-[200px] items-center gap-1 overflow-hidden text-[0.75rem] text-ellipsis whitespace-nowrap text-danger"
+                      :title="task.error"
+                    >
+                      {{ task.error }}
+                    </span>
+                  </div>
+                </div>
+                <div class="flex items-center gap-1.5">
+                  <!-- Pending task actions -->
+                  <template v-if="task.status === 'pending'">
+                    <button
+                      class="task-icon-btn"
+                      :title="t('pages.upload.taskQueue.moveUp')"
+                      @click="moveTaskUp(task.id)"
+                    >
+                      <ChevronUpIcon :size="16" />
+                    </button>
+                    <button
+                      class="task-icon-btn"
+                      :title="t('pages.upload.taskQueue.moveDown')"
+                      @click="moveTaskDown(task.id)"
+                    >
+                      <ChevronDownIcon :size="16" />
+                    </button>
+                    <button
+                      class="task-icon-btn"
+                      :class="{ 'is-high': task.priority === 2 }"
+                      :title="t('pages.upload.taskQueue.togglePriority')"
+                      @click="toggleTaskPriority(task.id, task.priority)"
+                    >
+                      <StarIcon :size="16" />
+                    </button>
+                    <button
+                      class="task-icon-btn danger"
+                      :title="t('pages.upload.taskQueue.cancelTask')"
+                      @click="cancelTask(task.id)"
+                    >
+                      <XIcon :size="16" />
+                    </button>
+                  </template>
+                  <!-- Failed task actions -->
+                  <template v-if="task.status === 'failed'">
+                    <button
+                      class="task-icon-btn"
+                      :title="t('pages.upload.taskQueue.retryTask')"
+                      @click="retryTask(task.id)"
+                    >
+                      <RefreshCwIcon :size="16" />
+                    </button>
+                    <button
+                      class="task-icon-btn danger"
+                      :title="t('pages.upload.taskQueue.removeTask')"
+                      @click="removeTask(task.id)"
+                    >
+                      <Trash2Icon :size="16" />
+                    </button>
+                  </template>
+                  <!-- Completed/Cancelled task actions -->
+                  <template v-if="task.status === 'completed' || task.status === 'cancelled'">
+                    <button
+                      class="task-icon-btn"
+                      :title="t('pages.upload.taskQueue.removeTask')"
+                      @click="removeTask(task.id)"
+                    >
+                      <Trash2Icon :size="16" />
+                    </button>
+                  </template>
+                  <!-- Status icon -->
+                  <div class="flex h-[32px] w-[32px] items-center justify-center">
+                    <CheckCircleIcon v-if="task.status === 'completed'" :size="18" class="text-success" />
+                    <XCircleIcon v-if="task.status === 'failed'" :size="18" class="text-error" />
+                    <LoaderIcon
+                      v-if="task.status === 'uploading'"
+                      :size="18"
+                      class="animate-[spin_1s_linear_infinite] text-accent"
+                    />
+                    <ClockIcon v-if="task.status === 'pending'" :size="18" class="text-tertiary" />
+                  </div>
+                </div>
+              </div>
+            </TransitionGroup>
+          </div>
+
+          <!-- Empty State -->
+          <div v-else class="flex h-full flex-col items-center gap-4 bg-bg-tertiary px-8 py-12 text-center">
+            <ListTodoIcon class="text-accent opacity-90" :size="48" />
+            <h4 class="m-0 text-xl font-semibold text-main">{{ t('pages.upload.taskQueue.empty') }}</h4>
+            <p class="m-0 max-w-[400px] text-base text-secondary">{{ t('pages.upload.taskQueue.emptyHint') }}</p>
+            <button
+              class="flex cursor-pointer items-center justify-center gap-2 rounded-md bg-accent px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"
+              @click="addFilesToTask"
+            >
+              <PlusIcon :size="16" />
+              <span class="mt-0.5">{{ t('pages.upload.taskQueue.selectFiles') }}</span>
+            </button>
+          </div>
         </div>
-      </div>
+      </CustomModal>
     </transition>
   </div>
 </template>
@@ -718,6 +676,7 @@ import { computed, onBeforeMount, onBeforeUnmount, reactive, ref, useTemplateRef
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
+import CustomModal from '@/components/common/customModal.vue'
 import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
 import { usePicBed } from '@/hooks/useGlobal'
 import useMessage from '@/hooks/useMessage'
@@ -787,7 +746,6 @@ const progress = ref(0)
 const showProgress = ref(false)
 const showError = ref(false)
 const pasteStyle = ref(IPasteStyle.MARKDOWN)
-const enableAdvancedAnimation = ref(false)
 const PicBedId = ref('')
 const fileInput = useTemplateRef('fileInput')
 const uploadInterval = ref(1000)
@@ -987,7 +945,6 @@ function ipcSendFiles(files: FileList) {
 
 async function initConf() {
   const settingConfig = await getConfig<any>('settings')
-  enableAdvancedAnimation.value = settingConfig?.enableAdvancedAnimation || false
   pasteStyle.value = settingConfig?.pasteStyle || IPasteStyle.MARKDOWN
   pasteFormatList.value.Custom = settingConfig?.customLink || '![$fileName]($url)'
   useShortUrl.value = settingConfig?.useShortUrl || false
diff --git a/src/renderer/pages/UploaderConfigPage.vue b/src/renderer/pages/UploaderConfigPage.vue
index 88ed323a..62ee90f3 100644
--- a/src/renderer/pages/UploaderConfigPage.vue
+++ b/src/renderer/pages/UploaderConfigPage.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative z-1 no-scrollbar flex h-full w-full flex-col items-center justify-start gap-4 overflow-auto rounded-xl border-none px-4 py-6 shadow-sm"
+    class="relative z-1 flex h-full w-full flex-col items-center justify-start gap-4 rounded-xl border-none px-4 py-6 shadow-sm"
   >
     <div
       class="flex w-full items-center justify-between gap-4 rounded-2xl border border-border-secondary px-6 py-2 shadow-md"
@@ -34,108 +34,108 @@
 
     <!-- Config Grid -->
     <div
-      class="no-scrollbar flex w-full flex-1 items-start gap-4 overflow-auto rounded-2xl border border-border-secondary px-4 py-6 shadow-md"
+      class="flex w-full flex-1 items-center gap-4 overflow-hidden rounded-2xl border border-border-secondary px-4 py-6 shadow-md"
     >
-      <div
-        class="no-scrollbar grid h-auto w-full grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-5 overflow-auto border-none p-1 max-md:grid-cols-1 max-md:gap-4 xl:grid-cols-[repeat(auto-fill,minmax(325px,1fr))]"
-      >
-        <!-- Config Items -->
-        <div
-          v-for="(item, index) in curConfigList"
-          :key="item._id"
-          class="group/config-card relative flex min-h-[180px] cursor-pointer flex-col gap-6 overflow-hidden rounded-xl border border-border-secondary p-5 shadow-sm transition-all duration-fast ease-apple hover:border-accent hover:shadow-md [.is-active]:border-2 [.is-active]:border-accent [.is-active]:shadow-md"
-          :class="{ 'is-active': defaultConfigId === item._id }"
-          :style="{ '--delay': `${index * 50}ms` }"
-          @click="() => selectItem(item._id)"
-        >
-          <!-- Card Header -->
-          <div class="relative z-1 flex flex-1 items-start justify-between">
-            <div
-              class="peer flex h-[40px] w-[40px] items-center justify-center rounded-lg border border-border-secondary text-accent transition-all duration-fast ease-apple group-hover/config-card:scale-105 [.is-active]:border-none [.is-active]:bg-accent [.is-active]:text-white"
-              :class="{ 'is-active': defaultConfigId === item._id }"
-            >
-              <Cloud :size="20" />
+      <div class="no-scrollbar h-full w-full overflow-auto rounded-sm">
+        <div class="grid w-full grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-5 border-none p-1 max-md:gap-4">
+          <!-- Config Items -->
+          <div
+            v-for="(item, index) in curConfigList"
+            :key="item._id"
+            class="group/config-card relative flex min-h-[180px] cursor-pointer flex-col gap-6 overflow-hidden rounded-xl border border-border-secondary p-5 shadow-sm transition-all duration-fast ease-apple hover:border-accent hover:shadow-md [.is-active]:border-2 [.is-active]:border-accent [.is-active]:shadow-md"
+            :class="{ 'is-active': defaultConfigId === item._id }"
+            :style="{ '--delay': `${index * 50}ms` }"
+            @click="() => selectItem(item._id)"
+          >
+            <!-- Card Header -->
+            <div class="relative z-1 flex flex-1 items-start justify-between">
+              <div
+                class="peer flex h-[40px] w-[40px] items-center justify-center rounded-lg border border-border-secondary text-accent transition-all duration-fast ease-apple group-hover/config-card:scale-105 [.is-active]:border-none [.is-active]:bg-accent [.is-active]:text-white"
+                :class="{ 'is-active': defaultConfigId === item._id }"
+              >
+                <Cloud :size="20" />
+              </div>
+              <div
+                class="grid grid-cols-2 gap-1.5 opacity-0 transition-all duration-fast ease-apple group-hover/config-card:opacity-100 peer-[.is-active]:opacity-100"
+              >
+                <button
+                  class="action-btn"
+                  :title="
+                    isConfigFavorited(item._id)
+                      ? t('pages.uploaderConfig.removeFromFavorites')
+                      : t('pages.uploaderConfig.addToFavorites')
+                  "
+                  @click.stop="() => toggleConfigFavorite(item._id, item._configName)"
+                >
+                  <Heart :size="14" :fill="isConfigFavorited(item._id) ? 'var(--color-warning)' : 'none'" />
+                </button>
+                <button class="action-btn" :title="t('pages.uploaderConfig.edit')" @click.stop="openEditPage(item._id)">
+                  <Pencil :size="14" />
+                </button>
+                <button
+                  class="action-btn"
+                  :title="t('pages.uploaderConfig.duplicate')"
+                  @click.stop="() => duplicateConfig(item._id)"
+                >
+                  <Copy :size="14" />
+                </button>
+                <button
+                  class="action-btn danger"
+                  :class="{ disabled: curConfigList.length <= 1 }"
+                  :title="t('pages.uploaderConfig.delete')"
+                  :disabled="curConfigList.length <= 1"
+                  @click.stop="() => deleteConfig(item._id)"
+                >
+                  <Trash2 :size="14" />
+                </button>
+              </div>
             </div>
-            <div
-              class="grid grid-cols-2 gap-1.5 opacity-0 transition-all duration-fast ease-apple group-hover/config-card:opacity-100 peer-[.is-active]:opacity-100"
-            >
-              <button
-                class="action-btn"
-                :title="
-                  isConfigFavorited(item._id)
-                    ? t('pages.uploaderConfig.removeFromFavorites')
-                    : t('pages.uploaderConfig.addToFavorites')
-                "
-                @click.stop="() => toggleConfigFavorite(item._id, item._configName)"
-              >
-                <Heart :size="14" :fill="isConfigFavorited(item._id) ? 'var(--color-warning)' : 'none'" />
-              </button>
-              <button class="action-btn" :title="t('pages.uploaderConfig.edit')" @click.stop="openEditPage(item._id)">
-                <Pencil :size="14" />
-              </button>
-              <button
-                class="action-btn"
-                :title="t('pages.uploaderConfig.duplicate')"
-                @click.stop="() => duplicateConfig(item._id)"
-              >
-                <Copy :size="14" />
-              </button>
-              <button
-                class="action-btn danger"
-                :class="{ disabled: curConfigList.length <= 1 }"
-                :title="t('pages.uploaderConfig.delete')"
-                :disabled="curConfigList.length <= 1"
-                @click.stop="() => deleteConfig(item._id)"
-              >
-                <Trash2 :size="14" />
-              </button>
+
+            <!-- Card Body -->
+            <div class="relative z-1 flex-1">
+              <h3 class="mx-0 mt-0 mb-2 text-base leading-[1.4] font-semibold tracking-tight text-main">
+                {{ item._configName }}
+              </h3>
+              <div class="flex items-center gap-1.5 text-xs text-tertiary">
+                <div class="flex items-center gap-1">
+                  <Clock :size="12" />
+                  <span>{{ formatTime(item._updatedAt) }}</span>
+                </div>
+                <div
+                  v-if="defaultConfigId === item._id"
+                  class="inline-flex items-center gap-1.5 rounded-2xl bg-accent/40 px-3 py-1.5 text-xs font-medium text-white transition-all duration-fast ease-standard"
+                >
+                  <CheckCircle2 :size="15" />
+                  <span>{{ t('pages.uploaderConfig.selected') }}</span>
+                </div>
+                <div
+                  v-else
+                  class="inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs font-medium text-tertiary transition-all duration-fast ease-standard group-hover/config-card:bg-accent/10"
+                >
+                  <Circle :size="14" />
+                  <span>{{ t('pages.uploaderConfig.clickToSelect') }}</span>
+                </div>
+              </div>
             </div>
           </div>
 
-          <!-- Card Body -->
-          <div class="relative z-1 flex-1">
-            <h3 class="mx-0 mt-0 mb-2 text-base leading-[1.4] font-semibold tracking-tight text-main">
-              {{ item._configName }}
-            </h3>
-            <div class="flex items-center gap-1.5 text-xs text-tertiary">
-              <div class="flex items-center gap-1">
-                <Clock :size="12" />
-                <span>{{ formatTime(item._updatedAt) }}</span>
-              </div>
+          <div
+            key="add-new"
+            class="group/new relative flex min-h-[180px] cursor-pointer flex-col items-center justify-center gap-6 overflow-hidden rounded-xl border-2 border-dashed border-border p-5 shadow-sm transition-all duration-fast ease-apple hover:border-solid hover:border-accent hover:bg-surface hover:shadow-md"
+            @click="addNewConfig"
+          >
+            <div class="flex flex-col items-center gap-3 transition-all duration-fast ease-apple">
               <div
-                v-if="defaultConfigId === item._id"
-                class="inline-flex items-center gap-1.5 rounded-2xl bg-accent/40 px-3 py-1.5 text-xs font-medium text-white transition-all duration-fast ease-standard"
+                class="flex h-[56px] w-[56px] items-center justify-center rounded-xl border-2 border-dashed border-border text-tertiary transition-all duration-fast ease-apple group-hover/new:scale-105 group-hover/new:border-solid group-hover/new:border-accent group-hover/new:bg-accent/5 group-hover/new:text-accent"
               >
-                <CheckCircle2 :size="15" />
-                <span>{{ t('pages.uploaderConfig.selected') }}</span>
+                <Plus :size="24" />
               </div>
-              <div
-                v-else
-                class="inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs font-medium text-tertiary transition-all duration-fast ease-standard group-hover/config-card:bg-accent/10"
-              >
-                <Circle :size="14" />
-                <span>{{ t('pages.uploaderConfig.clickToSelect') }}</span>
+              <div class="flex flex-col items-center gap-1">
+                <span class="text-base font-semibold text-secondary">{{ t('pages.uploaderConfig.addNew') }}</span>
               </div>
             </div>
           </div>
         </div>
-
-        <div
-          key="add-new"
-          class="group/new relative flex min-h-[180px] cursor-pointer flex-col items-center justify-center gap-6 overflow-hidden rounded-xl border-2 border-dashed border-border p-5 shadow-sm transition-all duration-fast ease-apple hover:border-solid hover:border-accent hover:bg-surface hover:shadow-md"
-          @click="addNewConfig"
-        >
-          <div class="flex flex-col items-center gap-3 transition-all duration-fast ease-apple">
-            <div
-              class="flex h-[56px] w-[56px] items-center justify-center rounded-xl border-2 border-dashed border-border text-tertiary transition-all duration-fast ease-apple group-hover/new:scale-105 group-hover/new:border-solid group-hover/new:border-accent group-hover/new:bg-accent/5 group-hover/new:text-accent"
-            >
-              <Plus :size="24" />
-            </div>
-            <div class="flex flex-col items-center gap-1">
-              <span class="text-base font-semibold text-secondary">{{ t('pages.uploaderConfig.addNew') }}</span>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
diff --git a/src/renderer/pages/css/PicgoSetting.css b/src/renderer/pages/css/PicgoSetting.css
index da3ae51d..4bd1d26e 100644
--- a/src/renderer/pages/css/PicgoSetting.css
+++ b/src/renderer/pages/css/PicgoSetting.css
@@ -4,2325 +4,6 @@
 @import '../../assets/css/theme.css' reference;
 @import '../../assets/css/utilities.css' reference;
 
-/* Form Elements */
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
-.form-group:last-child {
-  margin-bottom: 0;
-}
-
-.form-group > label:not(.switch-label, .radio-option) {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.form-input,
-.form-textarea,
-.form-select {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.75rem;
-  width: 100%;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-  transition: all 0.2s ease;
-  box-sizing: border-box;
-}
-
-.form-input:focus,
-.form-textarea:focus,
-.form-select:focus {
-  border-color: var(--color-accent);
-  outline: none;
-}
-
-/* Switch Component */
-.switch-label {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  padding: 0.75rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.2s ease;
-  gap: 0.75rem;
-  cursor: pointer;
-}
-
-.switch-label:hover {
-  border-color: var(--color-border);
-  background: var(--color-background-secondary);
-}
-
-.switch-input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.switch-slider {
-  position: relative;
-  border-radius: 24px;
-  width: 44px;
-  height: 21px;
-  background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
-  box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
-  transition: all var(--transition-medium);
-  flex-shrink: 0;
-}
-
-.switch-slider::before {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  border-radius: var(--radius-round);
-  width: 17px;
-  height: 17px;
-  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
-  box-shadow:
-    0 2px 6px rgb(0 0 0 / 20%),
-    0 1px 2px rgb(0 0 0 / 10%);
-  transition: all var(--transition-medium);
-  content: '';
-}
-
-.switch-input:checked + .switch-slider {
-  background: var(--color-accent);
-  box-shadow:
-    inset 0 1px 3px rgb(0 0 0 / 10%),
-    0 2px 8px color-mix(in srgb, var(--color-accent), transparent 30%);
-}
-
-.switch-input:checked + .switch-slider::before {
-  transform: translateX(23px);
-}
-
-.switch-content {
-  flex: 1;
-}
-
-.switch-title {
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.switch-description {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-/* Buttons */
-.btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  padding: 0.75rem 1rem;
-  min-width: fit-content;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
-}
-
-.btn-primary {
-  color: white;
-  background: var(--color-accent);
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: var(--color-accent-hover);
-}
-
-.btn-secondary {
-  border: 1px solid var(--color-border);
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background: var(--color-background-secondary);
-}
-
-/* Checkbox Group */
-.checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-
-.checkbox-option {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-sm);
-  padding: 0.5rem 0.75rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.2s ease;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.checkbox-option:hover {
-  border-color: var(--color-border);
-  background: var(--color-background-secondary);
-}
-
-.checkbox-input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.checkbox-indicator {
-  position: relative;
-  border: 2px solid var(--color-border);
-  border-radius: 4px;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
-.checkbox-input:checked + .checkbox-indicator {
-  border-color: var(--color-accent);
-  background: var(--color-accent);
-}
-
-.checkbox-input:checked + .checkbox-indicator::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  font-size: 10px;
-  color: white;
-  content: '✓';
-  transform: translate(-50%, -50%);
-}
-
-.checkbox-label {
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-}
-
-/* Input Groups */
-.input-group {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.input-group .form-input {
-  flex: 1;
-}
-
-.input-addon-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  width: 40px;
-  color: var(--color-text-secondary);
-  background: var(--color-background-tertiary);
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.input-addon-btn:hover {
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-}
-
-/* Dialog Overlay */
-.dialog-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgb(0 0 0 / 50%);
-}
-
-.dialog {
-  overflow-y: auto;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-2xl);
-  padding: 0.75rem;
-  width: 85vw;
-  max-width: 90vw;
-  max-height: 85vh;
-  background: var(--color-background-tertiary);
-  box-shadow: var(--shadow-xl);
-  box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
-}
-
-.dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.dialog-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.dialog-close {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-sm);
-  width: 32px;
-  height: 32px;
-  font-size: 1.5rem;
-  color: var(--color-text-secondary);
-  background: var(--color-surface);
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.dialog-close:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.dialog-content {
-  overflow-y: auto;
-  margin-bottom: 1.5rem;
-  padding: 0.2rem;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.dialog-content::-webkit-scrollbar {
-  display: none;
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 1rem;
-  gap: 0.75rem;
-}
-
-.button-group {
-  display: flex;
-  gap: 0.75rem;
-}
-
-.button-group .btn {
-  flex: 1;
-}
-
-/* Small text */
-small {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-/* Responsive Design */
-@media (width <= 768px) {
-  .piclist-settings {
-    padding: 1rem;
-  }
-
-  .tab-navigation {
-    flex-direction: column;
-  }
-
-  .tab-button {
-    justify-content: flex-start;
-  }
-
-  .form-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .dialog {
-    margin: 1rem;
-    width: 95%;
-  }
-}
-
-/* Placeholder Help Styles */
-.placeholder-help {
-  overflow-y: auto;
-  margin-top: 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 0;
-  max-height: 400px;
-  background: var(--color-background-tertiary);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
-}
-
-.placeholder-category {
-  border-bottom: 1px solid var(--color-border);
-}
-
-.placeholder-category:last-child {
-  border-bottom: none;
-}
-
-.category-title {
-  margin: 0;
-  border-bottom: 1px solid var(--color-border);
-  padding: 0.875rem 1rem 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
-  letter-spacing: 0.02em;
-}
-
-.placeholder-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 0;
-  padding: 0.5rem 0;
-}
-
-.placeholder-item {
-  display: flex;
-  align-items: center;
-  margin: 0;
-  border-radius: 0;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  line-height: 1.4;
-}
-
-.placeholder-item:hover {
-  background: color-mix(in srgb, var(--color-accent), transparent 95%);
-}
-
-.placeholder-item code {
-  margin-right: 0.875rem;
-  border: 1px solid rgb(255 255 255 / 20%);
-  border-radius: var(--radius-md);
-  padding: 0.3rem 0.6rem;
-  min-width: 80px;
-  font-size: 1rem;
-  font-family: 'SF Mono', Monaco, Menlo, 'Ubuntu Mono', monospace;
-  font-weight: 600;
-  text-align: center;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-  box-shadow: var(--shadow-md);
-  letter-spacing: 0.02em;
-  flex-shrink: 0;
-}
-
-.placeholder-item span {
-  font-weight: 500;
-  color: var(--color-text-primary);
-  flex: 1;
-}
-
-/* Scrollbar styling for macOS feel */
-.placeholder-help::-webkit-scrollbar {
-  width: 6px;
-}
-
-.placeholder-help::-webkit-scrollbar-track {
-  border-radius: var(--radius-lg);
-  background: transparent;
-}
-
-.placeholder-help::-webkit-scrollbar-thumb {
-  border-radius: var(--radius-lg);
-  background: var(--color-border);
-  transition: background 0.2s ease;
-}
-
-.placeholder-help::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-secondary);
-}
-
-/* Update info and Release Notes Styles */
-.update-info {
-  margin-bottom: 1.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 1rem;
-  background: var(--color-background);
-}
-
-.update-info > div {
-  margin-bottom: 0.5rem;
-  font-size: 0.925rem;
-}
-
-.update-info > div:last-child {
-  margin-bottom: 0;
-}
-
-.update-notice {
-  font-weight: 500;
-  color: var(--color-success) !important;
-}
-
-/* Release Notes Card */
-.release-notes-card {
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-background-secondary);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
-}
-
-.release-notes-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  padding: 1rem 1.5rem;
-  background: var(--color-background-secondary);
-}
-
-.release-notes-header h3 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.release-notes-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.btn-sm {
-  padding: 0.375rem 0.75rem;
-  min-height: auto;
-  font-size: 0.875rem;
-}
-
-.btn-link {
-  border: none;
-  padding: 0.25rem;
-  text-decoration: underline;
-  color: var(--color-accent);
-  background: transparent;
-}
-
-.btn-link:hover {
-  color: var(--color-accent-hover);
-  background: transparent;
-}
-
-.release-notes-content {
-  overflow-y: auto;
-  max-height: 400px;
-  background: var(--color-background-secondary);
-  scrollbar-width: thin;
-}
-
-.release-notes-content::-webkit-scrollbar {
-  width: 6px;
-}
-
-.release-notes-content::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.release-notes-content::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background: var(--color-accent);
-}
-
-.release-notes-content::-webkit-scrollbar-thumb:hover {
-  background: var(--color-accent-hover);
-}
-
-/* Rotation animation for loading icons */
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.rotate {
-  animation: rotate 1s linear infinite;
-}
-
-/* Config Dialog Styles */
-.config-dialog {
-  width: 90%;
-  max-width: 600px;
-}
-
-.dialog-icon {
-  color: var(--color-accent);
-}
-
-.config-section {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1.25rem;
-  background: var(--color-background-secondary);
-  transition: all 0.2s ease;
-}
-
-.config-section:hover {
-  border-color: var(--color-accent);
-  box-shadow: 0 2px 12px rgb(64 158 255 / 15%);
-}
-
-.config-section:not(:last-child) {
-  margin-bottom: 1rem;
-}
-
-.config-section-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  gap: 0.5rem;
-}
-
-.config-section-header h4 {
-  margin: 0;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.config-section-header svg {
-  color: var(--color-accent);
-}
-
-.config-button-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.75rem;
-}
-
-.config-button-grid.full-width {
-  grid-template-columns: 1fr;
-}
-
-.config-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.875rem 1rem;
-  min-height: 48px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  background: var(--color-background-primary);
-  transition: all 0.2s ease;
-  cursor: pointer;
-  gap: 0.5rem;
-
-}
-
-.config-button:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-  background: var(--color-background-hover);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgb(64 158 255 / 20%);
-}
-
-.config-button:active {
-  transform: translateY(0);
-  box-shadow: 0 2px 6px rgb(64 158 255 / 15%);
-}
-
-.config-button .button-icon {
-  flex-shrink: 0;
-  color: var(--color-accent);
-  transition: transform 0.2s ease;
-}
-
-.config-button:hover .button-icon {
-  transform: scale(1.1);
-}
-
-.config-button span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@media (width <= 768px) {
-  .config-button-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .config-dialog {
-    max-width: 95%;
-  }
-}
-
-/* ==================== Sync Panel Styles ==================== */
-
-/* Sync Overview Card */
-.sync-overview-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  padding: 1.5rem;
-  background: var(--color-background-secondary);
-  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
-  gap: 1.5rem;
-}
-
-.sync-overview-header {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.sync-overview-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-xl);
-  width: 46px;
-  height: 46px;
-  color: white;
-  background: var(--color-accent);
-  box-shadow: 0 4px 12px rgb(64 158 255 / 30%);
-}
-
-.sync-overview-info h2 {
-  margin: 0 0 0.25rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.sync-status-text {
-  display: flex;
-  align-items: center;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  gap: 0.5rem;
-}
-
-.sync-type-badge {
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--radius-sm);
-  padding: 0.2rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--color-accent);
-  background: var(--color-background-tertiary);
-  letter-spacing: 0.02em;
-}
-
-.sync-not-configured {
-  font-style: italic;
-  color: var(--color-text-tertiary);
-}
-
-.sync-config-btn {
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-/* Section Header with Icon */
-.section-header-with-icon {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 0.5rem;
-  gap: 0.75rem;
-}
-
-.section-icon {
-  margin-top: 0.125rem;
-  color: var(--color-accent);
-  flex-shrink: 0;
-}
-
-.section-header-with-icon h2 {
-  margin-top: 0.4rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.section-header-with-icon p {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-/* Sync Action Cards */
-.sync-action-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.sync-action-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 0.5rem 1.25rem;
-  background: var(--color-background-secondary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 1rem;
-}
-
-.sync-action-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateX(4px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.sync-action-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-lg);
-  width: 38px;
-  height: 38px;
-  color: white;
-  flex-shrink: 0;
-}
-
-.sync-action-icon.upload {
-  background: var(--color-accent);
-}
-
-.sync-action-icon.migrate {
-  background: var(--color-accent);
-}
-
-.sync-action-content {
-  flex: 1;
-}
-
-.sync-action-content h4 {
-  margin: 0 0 0.25rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.sync-action-content p {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-  line-height: 1.4;
-}
-
-.sync-action-arrow {
-  color: var(--color-text-tertiary);
-  transition: all 0.25s ease;
-  flex-shrink: 0;
-}
-
-.sync-action-card:hover .sync-action-arrow {
-  color: var(--color-accent);
-  transform: translateX(4px);
-}
-
-/* File Management Section */
-.file-action-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.file-action-btn {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1.5rem 1rem;
-  background: var(--color-background-secondary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 0.75rem;
-}
-
-.file-action-btn:hover {
-  border-style: solid;
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-  background: rgb(64 158 255 / 8%);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgb(64 158 255 / 15%);
-}
-
-.file-action-btn svg {
-  color: var(--color-text-secondary);
-  transition: color 0.25s ease;
-}
-
-.file-action-btn:hover svg {
-  color: var(--color-accent);
-}
-
-.file-action-btn span {
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-align: center;
-  color: var(--color-text-primary);
-}
-
-/* ==================== Sync Configuration Dialog ==================== */
-
-.sync-config-dialog {
-  width: 90%;
-  max-width: 560px;
-}
-
-.sync-dialog-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-lg);
-  width: 34px;
-  height: 34px;
-  color: var(--color-surface);
-  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
-  box-shadow: 0 4px 12px rgb(64 158 255 / 25%);
-  flex-shrink: 0;
-}
-
-.dialog-subtitle {
-  margin: 0.25rem 0 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-}
-
-.sync-dialog-content {
-  padding: 0.5rem;
-}
-
-/* Sync Type Selector */
-.sync-type-selector {
-  margin-bottom: 1.5rem;
-}
-
-.sync-type-label {
-  display: block;
-  margin-bottom: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.sync-type-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 0.75rem;
-}
-
-.sync-type-btn {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1rem 0.5rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.2s ease;
-  cursor: pointer;
-  gap: 0.5rem;
-}
-
-.sync-type-btn:hover {
-  border-color: var(--color-accent);
-  background: rgb(64 158 255 / 8%);
-}
-
-.sync-type-btn.active {
-  border-color: var(--color-border);
-  color: var(--color-accent);
-  background: var(--color-surface);
-  box-shadow: 0 0 0 3px rgb(64 158 255 / 15%);
-}
-
-.sync-type-btn svg {
-  color: var(--color-text-secondary);
-  transition: color 0.2s ease;
-}
-
-.sync-type-btn.active svg,
-.sync-type-btn:hover svg {
-  color: var(--color-accent);
-}
-
-.sync-type-btn span {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-/* Sync Config Fields */
-.sync-config-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.sync-fields-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.sync-field-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.sync-field-group label {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.5rem;
-  font-size: 0.825rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  gap: 0.4rem;
-}
-
-.sync-field-group label svg {
-  color: var(--color-accent);
-}
-
-.sync-ssl-toggle {
-  margin-top: 0.5rem;
-}
-
-/* Responsive Adjustments */
-@media (width <= 768px) {
-  .sync-overview-card {
-    flex-direction: column;
-    text-align: center;
-  }
-
-  .sync-overview-header {
-    flex-direction: column;
-  }
-
-  .file-action-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .sync-type-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .sync-fields-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* ==================== Advanced Settings Panel ==================== */
-
-/* Section Icon Wrapper */
-.section-icon-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 0.5rem;
-  border-radius: var(--radius-lg);
-  width: 44px;
-  height: 44px;
-  flex-shrink: 0;
-  color: white;
-  background: var(--color-accent);
-}
-
-/* Advanced Action Grid */
-.advanced-action-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.advanced-action-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1.25rem;
-  background: var(--color-background-secondary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 1rem;
-}
-
-.advanced-action-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.advanced-action-card.standalone {
-  grid-column: 1 / -1;
-}
-
-.advanced-action-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-lg);
-  width: 44px;
-  height: 44px;
-  color: var(--color-accent);
-  background: rgb(64 158 255 / 12%);
-  flex-shrink: 0;
-}
-
-.advanced-action-info {
-  flex: 1;
-}
-
-.advanced-action-info h4 {
-  margin: 0 0 0.25rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.advanced-action-info p {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-  line-height: 1.4;
-}
-
-.advanced-action-arrow {
-  color: var(--color-text-tertiary);
-  transition: all 0.25s ease;
-  flex-shrink: 0;
-}
-
-.advanced-action-card:hover .advanced-action-arrow {
-  color: var(--color-accent);
-  transform: translateX(4px);
-}
-
-/* Server Config Grid */
-.server-config-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  margin-bottom: 1.25rem;
-  gap: 1rem;
-}
-
-.server-config-card {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1.25rem;
-  background: var(--color-background-secondary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-}
-
-.server-config-card:hover {
-  border-color: var(--color-accent);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.server-config-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.75rem;
-}
-
-.server-config-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-md);
-  width: 36px;
-  height: 36px;
-  color: white;
-  background: var(--color-accent);
-}
-
-.server-config-badge {
-  border-radius: var(--radius-sm);
-  padding: 0.2rem 0.5rem;
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  background: var(--color-background-secondary);
-  letter-spacing: 0.05em;
-}
-
-.server-config-card h4 {
-  margin: 0 0 0.25rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.server-config-card p {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-  line-height: 1.4;
-}
-
-/* Encryption Key Section */
-.encryption-key-section {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1.25rem;
-  background: var(--color-background-secondary);
-}
-
-.encryption-key-header {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 0.75rem;
-  gap: 0.75rem;
-}
-
-.encryption-key-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-md);
-  width: 32px;
-  height: 32px;
-  color: var(--color-accent);
-  background: rgb(230 162 60 / 15%);
-  flex-shrink: 0;
-}
-
-.encryption-key-header label {
-  display: block;
-  margin-bottom: 0.125rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.encryption-key-header small {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-/* ==================== Update Settings Panel ==================== */
-
-/* Update Status Card */
-.update-status-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  padding: 1.5rem 2rem;
-  background: var(--color-background-secondary);
-  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
-  gap: 1.5rem;
-}
-
-.update-status-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-xl);
-  width: 44px;
-  height: 44px;
-  color: white;
-  background: var(--color-accent);
-  flex-shrink: 0;
-}
-
-.update-status-info {
-  flex: 1;
-}
-
-.update-status-info h2 {
-  margin: 0 0 0.5rem;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--color-text-primary);
-}
-
-.version-info {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.version-badge {
-  border-radius: var(--radius-md);
-  padding: 0.3rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-success);
-  background: var(--color-background-secondary);
-}
-
-.version-label {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.update-check-btn {
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-/* Responsive for Advanced & Update */
-@media (width <= 768px) {
-  .advanced-action-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .server-config-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .update-status-card {
-    flex-direction: column;
-    padding: 1.5rem;
-    text-align: center;
-  }
-
-  .version-info {
-    justify-content: center;
-  }
-}
-
-/* ==================== System Settings Panel ==================== */
-
-/* System Option Grid */
-.system-option-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.system-option-card {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1rem;
-  background: var(--color-background-secondary);
-}
-
-.system-option-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  gap: 0.5rem;
-}
-
-.system-option-header svg {
-  color: var(--color-accent);
-}
-
-/* Window Size Card */
-.window-size-card {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1rem;
-  background: var(--color-background-secondary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 1rem;
-}
-
-.window-size-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.window-size-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-lg);
-  width: 25px;
-  height: 25px;
-  color: white;
-  background: var(--color-accent);
-  flex-shrink: 0;
-}
-
-.window-size-info {
-  flex: 1;
-}
-
-.window-size-info h4 {
-  margin-top: 0.2rem;
-  font-size: 0.95rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.window-size-info p {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-}
-
-.window-size-arrow {
-  color: var(--color-text-tertiary);
-  transition: all 0.25s ease;
-  flex-shrink: 0;
-}
-
-.window-size-card:hover .window-size-arrow {
-  color: var(--color-accent);
-  transform: translateX(4px);
-}
-
-/* System Toggles Grid */
-.system-toggles-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
-}
-
-.system-toggle-card {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 0.25rem;
-  background: var(--color-background-secondary);
-}
-
-.system-toggle-card .switch-label {
-  margin: 0;
-  border: none;
-  background: transparent;
-}
-
-.system-toggle-card.with-action {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-}
-
-.toggle-with-action-content {
-  display: flex;
-  align-items: center;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  gap: 0.5rem;
-}
-
-.toggle-with-action-content svg {
-  color: var(--color-accent);
-}
-
-/* Theme Actions Grid */
-
-
-.theme-action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  transition: all 0.25s ease;
-}
-
-.theme-action-btn svg {
-  width: 14px;
-  height: 14px;
-}
-
-.theme-action-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.theme-action-btn:not(:disabled):hover {
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgb(64 158 255 / 15%);
-}
-
-/* Startup Options Grid */
-.startup-options-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.startup-toggle-card {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 0.25rem;
-  background: var(--color-background-secondary);
-}
-
-.startup-toggle-card .switch-label {
-  margin: 0;
-  border: none;
-  background: transparent;
-}
-
-/* Shortcut Action Card */
-.shortcut-action-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1.25rem;
-  background: var(--color-background-secondary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 1rem;
-}
-
-.shortcut-action-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.shortcut-action-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-lg);
-  width: 44px;
-  height: 44px;
-  color: white;
-  background: var(--color-accent);
-  flex-shrink: 0;
-}
-
-.shortcut-action-info {
-  flex: 1;
-}
-
-.shortcut-action-info h4 {
-  margin: 0 0 0.25rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.shortcut-action-info p {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-}
-
-.shortcut-action-arrow {
-  color: var(--color-text-tertiary);
-  transition: all 0.25s ease;
-  flex-shrink: 0;
-}
-
-.shortcut-action-card:hover .shortcut-action-arrow {
-  color: var(--color-accent);
-  transform: translateX(4px);
-}
-
-/* Upload Behavior Grid */
-.upload-behavior-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.upload-feature-card {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 0.25rem;
-  background: var(--color-background-secondary);
-}
-
-.upload-feature-card .switch-label {
-  margin: 0;
-  border: none;
-  background: transparent;
-}
-
-.upload-feature-card.picbed-selection {
-  padding: 1rem;
-  grid-column: 1 / -1;
-}
-
-.picbed-selection-header {
-  margin-bottom: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.checkbox-group.compact {
-  gap: 0.5rem;
-}
-
-/* Upload Action Card */
-.upload-action-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1rem;
-  background: var(--color-background-secondary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 0.75rem;
-}
-
-.upload-action-card:hover {
-  border-color: var(--color-accent);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgb(64 158 255 / 15%);
-}
-
-.upload-action-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-md);
-  width: 36px;
-  height: 36px;
-  color: var(--color-accent);
-  background: rgb(64 158 255 / 12%);
-  flex-shrink: 0;
-}
-
-.upload-action-info {
-  flex: 1;
-}
-
-.upload-action-info h4 {
-  margin: 0 0 0.125rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.upload-action-info p {
-  margin: 0;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-.upload-action-arrow {
-  color: var(--color-text-tertiary);
-  transition: all 0.25s ease;
-  flex-shrink: 0;
-}
-
-.upload-action-card:hover .upload-action-arrow {
-  color: var(--color-accent);
-  transform: translateX(4px);
-}
-
-/* Processing Actions Grid */
-.processing-actions-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  margin-bottom: 1rem;
-  gap: 1rem;
-}
-
-.processing-action-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1.25rem;
-  background: var(--color-background-secondary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 1rem;
-}
-
-.processing-action-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.processing-action-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-lg);
-  width: 30px;
-  height: 30px;
-  color: white;
-  flex-shrink: 0;
-  background: var(--color-accent);
-}
-
-.processing-action-info {
-  flex: 1;
-}
-
-.processing-action-info h4 {
-  margin: 0 0 0.25rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.processing-action-info p {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-}
-
-/* Upload Toggles Grid */
-.upload-toggles-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
-}
-
-.upload-toggle-card {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 0.25rem;
-  background: var(--color-background-secondary);
-}
-
-.upload-toggle-card .switch-label {
-  margin: 0;
-  border: none;
-  background: transparent;
-}
-
-.upload-toggle-card.standalone {
-  grid-column: 1 / -1;
-  margin-top: 1rem;
-}
-
-/* URL Format Action Card */
-.url-format-action-card {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1.25rem;
-  background: var(--color-background-secondary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 1rem;
-}
-
-.url-format-action-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.url-format-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-lg);
-  width: 30px;
-  height: 30px;
-  color: white;
-  background: var(--color-accent);
-  flex-shrink: 0;
-}
-
-.url-format-info {
-  flex: 1;
-}
-
-.url-format-info h4 {
-  margin: 0 0 0.25rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.url-format-info p {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-}
-
-.url-format-arrow {
-  color: var(--color-text-tertiary);
-  transition: all 0.25s ease;
-  flex-shrink: 0;
-}
-
-.url-format-action-card:hover .url-format-arrow {
-  color: var(--color-accent);
-  transform: translateX(4px);
-}
-
-/* Short URL Section */
-.short-url-section {
-  margin-bottom: 1rem;
-}
-
-.short-url-config {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  margin-top: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1rem;
-  background: var(--color-background-tertiary);
-  gap: 1rem;
-}
-
-.short-url-field {
-  display: flex;
-  flex-direction: column;
-}
-
-.short-url-field label {
-  margin-bottom: 0.5rem;
-  font-size: 0.825rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-/* PicBed Checkbox Grid */
-.picbed-checkbox-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-
-.picbed-checkbox-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.625rem 0.875rem;
-  background: var(--color-background-secondary);
-  transition: all 0.2s ease;
-  cursor: pointer;
-  gap: 0.5rem;
-}
-
-.picbed-checkbox-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-}
-
-/* ==================== Enhanced Dialog Styles ==================== */
-
-.enhanced-dialog {
-  width: 500px;
-  max-width: 90vw;
-}
-
-.dialog-header-content {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.dialog-icon-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-lg);
-  width: 40px;
-  height: 40px;
-  color: white;
-  flex-shrink: 0;
-  background: var(--color-accent);
-}
-
-/* Placeholder Info Card */
-.placeholder-info-card {
-  margin-bottom: 1.25rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1rem;
-  background: var(--color-background-tertiary);
-}
-
-.placeholder-info-title {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  gap: 0.5rem;
-}
-
-.placeholder-info-title svg {
-  color: var(--color-accent);
-}
-
-.placeholder-info-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.placeholder-info-item {
-  display: flex;
-  align-items: center;
-  font-size: 0.825rem;
-  gap: 0.75rem;
-}
-
-.placeholder-info-item code {
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-border);
-  padding: 0.25rem 0.5rem;
-  min-width: 80px;
-  font-family: 'SF Mono', Monaco, Menlo, monospace;
-  font-weight: 600;
-  text-align: center;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-}
-
-.placeholder-info-item span {
-  color: var(--color-text-secondary);
-}
-
-/* Proxy Config Grid */
-.proxy-config-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.proxy-config-card {
-  display: flex;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1rem;
-  background: var(--color-background-tertiary);
-  gap: 0.75rem;
-}
-
-.proxy-config-card.full-width {
-  grid-column: 1 / -1;
-}
-
-.proxy-config-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-md);
-  width: 36px;
-  height: 36px;
-  color: white;
-  flex-shrink: 0;
-  background: var(--color-accent);
-}
-
-.proxy-config-field {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.proxy-config-field label {
-  margin-bottom: 0.5rem;
-  font-size: 0.825rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-/* Window Size Grid */
-.window-size-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  margin-bottom: 1rem;
-  gap: 1rem;
-}
-
-.window-size-field {
-  display: flex;
-  flex-direction: column;
-}
-
-.window-size-field label {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.5rem;
-  font-size: 0.825rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  gap: 0.375rem;
-}
-
-.window-size-field label svg {
-  color: var(--color-accent);
-}
-
-/* Update Dialog Styles */
-.update-dialog {
-  width: 480px;
-}
-
-.update-version-comparison {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 1.25rem;
-  gap: 1rem;
-}
-
-.version-card {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1rem 1.5rem;
-  min-width: 120px;
-  text-align: center;
-  background: var(--color-background-tertiary);
-  flex: 1;
-}
-
-.version-card.latest.has-update {
-  border-color: var(--color-success);
-  background: rgb(103 194 58 / 10%);
-}
-
-.version-card-label {
-  margin-bottom: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-}
-
-.version-card-value {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: var(--color-text-primary);
-}
-
-.version-card.latest.has-update .version-card-value {
-  color: var(--color-success);
-}
-
-.version-arrow {
-  color: var(--color-text-tertiary);
-  flex-shrink: 0;
-}
-
-.update-notice-card {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-lg);
-  padding: 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-success);
-  background: rgb(103 194 58 / 12%);
-  gap: 0.5rem;
-}
-
-/* Rename Dialog Styles */
-.rename-dialog {
-  width: 600px;
-}
-
-.rename-toggle-card {
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 0.25rem;
-  background: var(--color-background-tertiary);
-}
-
-.rename-toggle-card .switch-label {
-  margin: 0;
-  border: none;
-  background: transparent;
-}
-
-.rename-format-field label {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-.rename-format-field label svg {
-  color: var(--color-accent);
-}
-
-/* ============================
-   Log Dialog Styles
-   ============================ */
-.log-dialog {
-  max-width: 600px;
-}
-
-.log-files-section {
-  margin-bottom: 1.5rem;
-}
-
-.log-files-title {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  gap: 0.5rem;
-}
-
-.log-files-title svg {
-  color: var(--color-accent);
-}
-
-.log-files-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.75rem;
-}
-
-.log-file-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1rem;
-  text-align: center;
-  background: var(--color-background-tertiary);
-  transition: all 0.25s ease;
-  flex-direction: column;
-  cursor: pointer;
-  gap: 0.75rem;
-}
-
-.log-file-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.log-file-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-lg);
-  width: 42px;
-  height: 42px;
-  color: white;
-  background: var(--color-accent);
-}
-
-.log-file-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.log-file-name {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.log-file-hint {
-  font-size: 0.7rem;
-  color: var(--color-text-tertiary);
-}
-
-.log-settings-grid {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 1rem;
-}
-
-/* ============================
-   Server Dialog Styles
-   ============================ */
-.server-dialog,
-.webserver-dialog {
-  max-width: 550px;
-}
-
-.server-notice-card {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 0.875rem 1rem;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-  background: var(--color-background-tertiary);
-  line-height: 1.5;
-  gap: 0.75rem;
-}
-
-.server-toggle-card {
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 0.25rem;
-  background: var(--color-background-tertiary);
-}
-
-.server-toggle-card .switch-label {
-  margin: 0;
-  border: none;
-  background: transparent;
-}
-
-.server-config-section {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1rem;
-  background: var(--color-background-tertiary);
-}
-
-.server-config-title {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  border-bottom: 1px solid var(--color-border);
-  padding-bottom: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  gap: 0.5rem;
-}
-
-.server-config-title svg {
-  color: var(--color-accent);
-}
-
-.server-fields-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.server-key-field,
-.server-path-field {
-  margin-top: 1rem;
-}
-
-.server-key-field label,
-.server-path-field label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.server-key-field label svg,
-.server-path-field label svg {
-  color: var(--color-accent);
-}
-
-
-/* Responsive Adjustments */
-@media (width <= 768px) {
-  .system-option-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .system-toggles-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .startup-options-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .upload-behavior-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .processing-actions-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .upload-toggles-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .short-url-config {
-    grid-template-columns: 1fr;
-  }
-
-  .proxy-config-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .window-size-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .update-version-comparison {
-    flex-direction: column;
-  }
-
-  .version-arrow {
-    transform: rotate(90deg);
-  }
-
-  .log-files-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .log-settings-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .server-fields-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
 .notes-body {
   @apply overflow-y-auto rounded-lg p-5 max-h-[200px] text-base leading-[1.5] bg-bg-tertiary text-secondary;
 }