From 88a5a8087a277b9ed5a7107ecfb8a5b828c4d7fd Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Sun, 25 Jan 2026 16:04:32 +0800
Subject: [PATCH] :sparkles: Feature(custom): migrate all pages to tailwind

---
 currentVersion.md                             |    2 +
 src/renderer/assets/css/utilities.css         |    1 +
 src/renderer/components/UnifiedConfigForm.vue |    1 -
 .../components/common/customInput.vue         |   11 +-
 .../components/common/customSwitch.vue        |   14 +-
 src/renderer/index.css                        |   18 +-
 src/renderer/manage/pages/BucketPage.vue      |  810 +++++----
 src/renderer/manage/pages/ManageMain.vue      |    8 +-
 src/renderer/manage/pages/css/BucketPage.css  | 1485 +----------------
 src/renderer/pages/Gallery.vue                |    6 +-
 src/renderer/pages/MiniPage.vue               |    8 +-
 src/renderer/pages/PicGoSetting.vue           |    6 +-
 src/renderer/pages/Upload.vue                 |    4 +-
 src/renderer/utils/drag.ts                    |   29 +-
 supported_format.md                           |    1 -
 15 files changed, 462 insertions(+), 1942 deletions(-)

diff --git a/currentVersion.md b/currentVersion.md
index f5ca7b7d..a75196d3 100644
--- a/currentVersion.md
+++ b/currentVersion.md
@@ -25,6 +25,7 @@
   - 优化相册页面卡片样式，边界更清晰，提升选择框视觉效果。
   - 优化多个页面在窄屏下的显示，避免内容溢出。
   - 文件浏览侧边栏名称超出宽度时支持滚动显示完整名称。
+  - 优化了视频播放页面的显示效果。
 - 相册页面支持显示已选数量、匹配的 URL 列表和记忆过滤器状态。
 - 支持浏览完整插件列表、查看详情及一键安装。
 - 新增新手引导页面，首次运行自动弹出。
@@ -38,6 +39,7 @@
 
 - 修复了管理页面中排序下拉框显示异常的问题。
 - 修复了管理页面图床列表未正确高亮当前选中项的问题。
+- 修复了管理页面markdown预览内容没有正确渲染的问题。
 - 修复了暗色模式下任务页面的显示异常。
 - 修复了图床设置页面“设置为默认图床”按钮状态更新不及时的问题。
 - 修复了预处理设置页面中，图床水印独立设置按钮状态不同步的问题。
diff --git a/src/renderer/assets/css/utilities.css b/src/renderer/assets/css/utilities.css
index cab64728..2308e6e6 100644
--- a/src/renderer/assets/css/utilities.css
+++ b/src/renderer/assets/css/utilities.css
@@ -29,3 +29,4 @@
 @utility no-drag-region {
   -webkit-app-region: none;
 }
+
diff --git a/src/renderer/components/UnifiedConfigForm.vue b/src/renderer/components/UnifiedConfigForm.vue
index cd34ac63..4c57f261 100644
--- a/src/renderer/components/UnifiedConfigForm.vue
+++ b/src/renderer/components/UnifiedConfigForm.vue
@@ -175,7 +175,6 @@ function validateForm(): boolean {
 }
 
 function clearFieldError(fieldName: string) {
-  console.log('Clearing error for field:', fieldName)
   if (validationErrors[fieldName]) {
     delete validationErrors[fieldName]
   }
diff --git a/src/renderer/components/common/customInput.vue b/src/renderer/components/common/customInput.vue
index c8f84bdd..84ed012d 100644
--- a/src/renderer/components/common/customInput.vue
+++ b/src/renderer/components/common/customInput.vue
@@ -6,16 +6,14 @@
         <span v-if="required" class="ml-1 text-danger">*</span>
       </label>
       <slot name="title-extra"></slot>
-      <div v-if="tips" class="relative">
+      <div v-if="tips" class="group relative inline-block">
         <div
           class="flex h-[20px] w-[20px] cursor-pointer items-center justify-center rounded-full p-[2px] text-secondary hover:bg-bg-secondary hover:text-accent"
-          @click="toggleTooltip()"
         >
           <Info :size="16" />
         </div>
         <div
-          v-show="visibleTooltips"
-          class="absolute top-full left-0 z-1000 max-w-[300px] min-w-[200px] rounded-md border border-border bg-bg-secondary p-3 text-xs leading-[1.4] text-main shadow-lg max-md:max-w-[250px] max-md:min-w-[150px]"
+          class="invisible absolute top-[125%] left-1/2 z-1000 w-max max-w-[200px] translate-x-[-50%] rounded-md border border-border bg-bg-tertiary p-2 text-center text-xs text-main opacity-0 shadow-md transition-opacity duration-300 group-hover:visible group-hover:opacity-100"
           v-html="transformMarkdownToHTML(tips)"
         />
       </div>
@@ -62,7 +60,6 @@ const [modelValue, modifiers] = defineModel<any>({
 })
 
 const type = ref('text')
-const visibleTooltips = ref(false)
 
 const {
   isPassword = false,
@@ -80,10 +77,6 @@ const {
   tips?: string
 }>()
 
-function toggleTooltip() {
-  visibleTooltips.value = !visibleTooltips.value
-}
-
 function transformMarkdownToHTML(markdown: string) {
   try {
     return marked.parse(markdown)
diff --git a/src/renderer/components/common/customSwitch.vue b/src/renderer/components/common/customSwitch.vue
index b2607d68..19239661 100644
--- a/src/renderer/components/common/customSwitch.vue
+++ b/src/renderer/components/common/customSwitch.vue
@@ -29,16 +29,14 @@
       </div>
     </label>
     <slot name="title-extra"></slot>
-    <div v-if="tips" class="relative">
+    <div v-if="tips" class="group relative inline-block">
       <div
         class="flex h-[20px] w-[20px] cursor-pointer items-center justify-center rounded-full p-[2px] text-secondary hover:bg-bg-secondary hover:text-accent"
-        @click="toggleTooltip()"
       >
         <Info :size="16" />
       </div>
       <div
-        v-show="visibleTooltips"
-        class="absolute top-full left-0 z-1000 max-w-[300px] min-w-[200px] rounded-md border border-border bg-bg-secondary p-3 text-xs leading-[1.4] text-main shadow-lg max-md:max-w-[250px] max-md:min-w-[150px]"
+        class="invisible absolute top-[125%] left-1/2 z-1000 w-max max-w-[200px] translate-x-[-50%] rounded-md border border-border bg-bg-tertiary p-2 text-center text-xs text-main opacity-0 shadow-md transition-opacity duration-300 group-hover:visible group-hover:opacity-100"
         v-html="transformMarkdownToHTML(tips)"
       />
     </div>
@@ -48,12 +46,10 @@
 <script lang="ts" setup>
 import { Info } from 'lucide-vue-next'
 import { marked } from 'marked'
-import { onMounted, ref } from 'vue'
+import { onMounted } from 'vue'
 
 const emit = defineEmits(['change'])
 
-const visibleTooltips = ref(false)
-
 const modelValue = defineModel<boolean>()
 const {
   title = '',
@@ -75,10 +71,6 @@ const {
   tighter?: boolean
 }>()
 
-function toggleTooltip() {
-  visibleTooltips.value = !visibleTooltips.value
-}
-
 function transformMarkdownToHTML(markdown: string) {
   try {
     return marked.parse(markdown)
diff --git a/src/renderer/index.css b/src/renderer/index.css
index 481b2c36..141c9503 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -8,7 +8,7 @@
   }
 
   html {
-    @apply m-0 h-full p-0 w-full bg-transparent;
+    @apply m-0 h-full w-full bg-transparent p-0;
   }
 
   #app {
@@ -180,14 +180,14 @@
   }
 
   @keyframes slide-right {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
 
-  to {
-    transform: translateX(0);
-    opacity: 1;
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
   }
 }
-}
diff --git a/src/renderer/manage/pages/BucketPage.vue b/src/renderer/manage/pages/BucketPage.vue
index 6ceb5b88..7f184200 100644
--- a/src/renderer/manage/pages/BucketPage.vue
+++ b/src/renderer/manage/pages/BucketPage.vue
@@ -3,14 +3,13 @@
   <div
     ref="bucketContainerRef"
     class="relative flex h-full w-full items-center justify-center"
-    :class="{ 'content-fullscreen': isContentFullscreen }"
     @scroll="handleBucketContainerScroll"
   >
-    <div class="relative z-1 flex h-full w-full flex-col items-center justify-start gap-2 rounded-xl border-none p-0">
+    <div class="relative z-1 flex h-full w-full flex-col items-center justify-start gap-1 rounded-xl border-none p-0">
       <!-- Header Card -->
       <div
         v-if="!isContentFullscreen"
-        class="flex w-full flex-wrap items-center justify-between gap-4 overflow-visible rounded-xl border border-border-secondary p-0 shadow-sm"
+        class="flex w-full flex-wrap items-center justify-between gap-4 overflow-visible rounded-xl p-0"
       >
         <div class="flex flex-1 flex-wrap items-center gap-4 p-1">
           <!-- Custom Domain Input/Select -->
@@ -130,7 +129,7 @@
       <!-- Breadcrumb Card -->
       <div
         v-if="!isContentFullscreen"
-        class="flex w-full items-center justify-between gap-4 overflow-hidden rounded-xl border border-border-secondary p-0 shadow-sm"
+        class="flex w-full items-center justify-between gap-4 overflow-hidden rounded-sm border border-border-secondary p-0"
       >
         <div class="flex flex-1 items-center gap-0 overflow-x-auto px-4 py-1">
           <HomeIcon class="h-[16px] w-[16px] shrink-0 text-accent" />
@@ -138,7 +137,7 @@
             <template v-for="(item, index) in configMap.prefix.replace(/\/$/g, '').split('/')" :key="index">
               <ChevronRightIcon v-if="index !== 0" class="h-[16px] w-[15px] shrink-0 text-accent" />
               <button
-                class="flex shrink-0 cursor-pointer items-center gap-1 rounded-md border-none bg-bg-secondary p-1 text-sm font-semibold text-secondary hover:bg-accent/10 hover:text-main"
+                class="flex shrink-0 cursor-pointer items-center gap-1 rounded-md border-none bg-bg-secondary p-1 text-sm font-semibold text-secondary last:bg-accent/10 hover:bg-accent/10 hover:text-main"
                 @click="handleBreadcrumbClick(Number(index))"
               >
                 {{ item === '' ? t('pages.manage.bucket.rootFolder') : item }}
@@ -158,7 +157,7 @@
       <!-- Control Panel Card -->
       <div
         v-if="!isContentFullscreen"
-        class="flex w-full flex-wrap items-center justify-between gap-2 overflow-visible rounded-xl border border-border-secondary p-0 shadow-sm"
+        class="flex w-full flex-wrap items-center justify-between gap-2 overflow-visible rounded-sm border border-border-secondary p-0"
       >
         <FileInfo :current-page-files-info="currentPageFilesInfo" :calculate-all-file-size="calculateAllFileSize" />
 
@@ -187,14 +186,25 @@
           </template>
 
           <!-- Sort Dropdown -->
-          <div class="dropdown">
-            <button class="dropdown-button" @click="sortDropdownOpen = !sortDropdownOpen">
+          <div class="relative">
+            <button
+              class="flex cursor-pointer items-center gap-2 rounded-md border border-border bg-bg-secondary px-3 py-2 text-sm font-medium text-main hover:border-accent hover:bg-accent/10"
+              @click="sortDropdownOpen = !sortDropdownOpen"
+            >
               <ArrowUpDownIcon class="action-icon" />
               {{ t(`pages.manage.bucket.sort.${currentSortType}`) }}
               <ChevronDownIcon class="action-icon" />
             </button>
-            <div v-if="sortDropdownOpen" class="dropdown-content">
-              <div v-for="item in sortTypeList" :key="item" class="dropdown-item" @click="sortFile(item as any)">
+            <div
+              v-if="sortDropdownOpen"
+              class="absolute top-full left-0 z-1000 mt-1 min-w-[150px] rounded-md border border-border bg-bg-tertiary shadow-md"
+            >
+              <div
+                v-for="item in sortTypeList"
+                :key="item"
+                class="cursor-pointer bg-bg-tertiary px-3 py-2 text-sm text-main transition-all duration-fast ease-apple hover:bg-accent/30 hover:text-white"
+                @click="sortFile(item as any)"
+              >
                 {{ t(`pages.manage.bucket.sort.${item}`) }}
               </div>
             </div>
@@ -235,7 +245,7 @@
         class="flex w-full flex-wrap items-center justify-between gap-2 overflow-visible rounded-xl border border-border-secondary p-0 shadow-sm"
       >
         <div class="flex max-w-[400px] min-w-[200px] items-center overflow-x-auto px-4 py-1">
-          <div class="fullscreen-breadcrumb rounded-md shadow-sm">
+          <div class="flex flex-wrap items-center gap-1 rounded-md shadow-sm">
             <HomeIcon class="h-[16px] w-[16px] shrink-0 text-accent" />
             <template v-if="configMap.prefix !== '/'">
               <template v-for="(item, index) in configMap.prefix.replace(/\/$/g, '').split('/')" :key="index">
@@ -258,7 +268,7 @@
           </div>
         </div>
         <FileInfo :current-page-files-info="currentPageFilesInfo" :calculate-all-file-size="calculateAllFileSize" />
-        <div class="fullscreen-header-right">
+        <div class="flex min-w-[200px] flex-1 items-center justify-end gap-3">
           <!-- Search -->
           <input
             v-model="searchText"
@@ -282,7 +292,7 @@
       </div>
 
       <div
-        class="no-scrollbar flex min-h-[500px] w-full flex-1 flex-col flex-wrap items-center justify-center gap-2 overflow-auto rounded-2xl border border-border-secondary p-1 shadow-md"
+        class="no-scrollbar flex min-h-[500px] w-full flex-1 flex-col flex-wrap items-center justify-center gap-2 overflow-auto rounded-md border border-border-secondary p-1 shadow-md"
       >
         <div v-if="filterList.length === 0" class="h-full w-full">
           <EmptyPage />
@@ -366,13 +376,13 @@
                 </template>
               </div>
 
-              <div class="flex shrink-0 flex-col justify-between gap-0.5">
+              <div class="flex min-w-0 shrink-0 flex-col justify-between gap-0.5">
                 <div
-                  class="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-main"
+                  class="w-full truncate text-center text-sm font-medium text-main"
                   :title="item.fileName"
                   @click.stop="copyToClipboard(item.fileName ?? '')"
                 >
-                  <div class="text-center">{{ item.fileName ?? '' }}</div>
+                  {{ item.fileName ?? '' }}
                 </div>
                 <div
                   v-if="!item.isDir"
@@ -512,7 +522,7 @@
           @click="copyToClipboard(JSON.stringify(currentShowedFileInfo, null, 2))"
         />
       </div>
-      <div class="modal-content">
+      <div class="flex-1 overflow-y-auto bg-bg p-6">
         <div
           v-for="(value, key) in currentShowedFileInfo"
           :key="key"
@@ -548,9 +558,12 @@
         <div class="mb-6 last:mb-0">
           <label class="mb-2 flex items-center gap-2 text-sm font-medium text-main">
             {{ t('pages.manage.bucket.matchedPattern', { num: matchedFilesNumber.length }) }}
-            <div class="tooltip">
+            <div class="group relative inline-block">
               <InfoIcon class="action-icon" />
-              <span class="tooltip-text">{{ t('pages.manage.bucket.regexPatternTips') }}</span>
+              <span
+                class="invisible absolute top-[125%] left-1/2 z-1000 w-max max-w-[200px] translate-x-[-50%] rounded-md border border-border bg-bg-tertiary p-2 text-center text-xs text-main opacity-0 shadow-md transition-opacity duration-300 group-hover:visible group-hover:opacity-100"
+                >{{ t('pages.manage.bucket.regexPatternTips') }}</span
+              >
             </div>
           </label>
           <input
@@ -663,245 +676,221 @@
       </div>
     </div>
     <!-- Upload Drawer -->
-    <div
+    <CustomModal
       v-if="isShowUploadPanel"
-      class="drawer-overlay"
-      :class="{ open: isShowUploadPanel }"
-      @click="isShowUploadPanel = false"
+      v-model:visible="isShowUploadPanel"
+      :title="t('pages.manage.bucket.uploadFile')"
+      width="900px"
+      height="90vh"
     >
-      <div class="drawer-container" @click.stop>
-        <div class="drawer-header">
-          <h3 class="drawer-title">
-            {{ t('pages.manage.bucket.uploadFile') }}
-          </h3>
-          <div class="switch-container">
-            <label class="switch">
-              <input v-model="isUploadKeepDirStructure" type="checkbox" @change="handleUploadKeepDirChange" />
-              <span class="switch-slider" />
-            </label>
-            <span class="switch-label">
-              {{
-                isUploadKeepDirStructure
-                  ? t('pages.manage.bucket.keepDirStructure')
-                  : t('pages.manage.bucket.noKeepDirStructure')
-              }}
-            </span>
-          </div>
-          <button class="modal-close" @click="isShowUploadPanel = false">
-            <XIcon class="action-icon" />
-          </button>
+      <div class="flex h-full w-full flex-col gap-2">
+        <div class="flex justify-end">
+          <CustomSwitch
+            v-model="isUploadKeepDirStructure"
+            :title="
+              isUploadKeepDirStructure
+                ? t('pages.manage.bucket.keepDirStructure')
+                : t('pages.manage.bucket.noKeepDirStructure')
+            "
+            small
+            no-border
+            @change="handleUploadKeepDirChange"
+          />
         </div>
 
-        <div class="drawer-content">
-          <div
-            v-if="!tableData.length"
-            class="upload-area"
-            :class="{ dragover: isDragover }"
-            @drop.prevent="onDrop"
-            @dragover.prevent="isDragover = true"
-            @dragleave.prevent="isDragover = false"
-            @click="openFileSelectDialog"
-          >
-            <div class="upload-area-text">
-              {{ t('pages.manage.bucket.dragUpload') }}
-            </div>
-            <div class="upload-area-subtext">
-              {{ t('pages.manage.bucket.clickUpload') }}
-            </div>
-          </div>
-
-          <!-- Upload File List -->
-          <div v-if="tableData.length">
-            <VirtualScroller
-              :items="
-                tableData.sort((a, b) =>
-                  b.isFolder - a.isFolder === 0 ? b.filesList.length - a.filesList.length : b.isFolder - a.isFolder,
-                )
-              "
-              :item-height="90"
-              :style="{ height: '100%' }"
-              view-mode="list"
+        <div class="no-scrollbar w-full flex-1 overflow-hidden rounded-md border border-border p-4 shadow-md">
+          <div class="flex h-full w-full flex-col">
+            <div
+              v-if="!tableData.length"
+              ref="uploadDialog"
+              class="h-[200px] w-full cursor-pointer rounded-lg border-2 border-dashed border-border bg-surface p-4 text-center transition-all duration-fast ease-apple hover:border-accent hover:bg-accent/10 [.dragover]:border-accent [.dragover]:bg-accent/10"
+              :class="{ dragover: isDragover }"
+              @drop.prevent="onDrop"
+              @dragover.prevent="isDragover = true"
+              @dragleave.prevent="isDragover = false"
+              @click="openFileSelectDialog"
             >
-              <template #default="{ item }">
-                <div class="file-list-item">
-                  <div class="file-list-icon">
-                    <FolderIcon v-if="item.isFolder" class="file-icon" />
-                    <FileIcon v-else class="file-icon" />
-                  </div>
-                  <div class="file-list-info">
-                    <div class="file-list-name">
-                      {{ formatFileName(item.name) }}
-                    </div>
-                    <div v-if="item.fullPath" class="file-list-path">
-                      {{ item.fullPath }}
-                    </div>
-                    <div class="file-list-meta">
-                      <span>{{ formatFileSize(item.fileSize) }}</span>
-                      <span v-if="item.isFolder"> {{ item.filesList.length }} files </span>
-                    </div>
-                  </div>
+              <div class="flex h-full flex-col items-center justify-center gap-2">
+                <div class="mb-2 text-lg font-semibold text-secondary">
+                  {{ t('pages.manage.bucket.dragUpload') }}
                 </div>
-              </template>
-            </VirtualScroller>
-          </div>
-
-          <!-- Upload Actions -->
-          <div v-if="tableData.length" style="display: flex; justify-content: center; gap: 1rem; margin-top: 1rem">
-            <button class="action-button primary" :disabled="isLoadingUploadPanelFiles" @click="uploadFiles">
-              <UploadIcon class="action-icon" />
-              {{ isLoadingUploadPanelFiles ? t('pages.manage.bucket.readingDir') : t('pages.manage.bucket.upload') }}
-            </button>
-            <button class="action-button secondary" :disabled="isLoadingUploadPanelFiles" @click="clearTableData">
-              <Trash2Icon class="action-icon" />
-              {{ t('pages.manage.bucket.clear') }}
-            </button>
-          </div>
-
-          <!-- Upload Tasks Tabs -->
-          <div class="tabs-container">
-            <div class="tabs-header">
-              <button
-                class="tab-button"
-                :class="{ active: activeUpLoadTab === 'uploading' }"
-                @click="activeUpLoadTab = 'uploading'"
-              >
-                {{ t('pages.manage.bucket.uploading') }}
-                <span v-if="uploadingTaskList.length" class="tab-badge">
-                  {{ uploadingTaskList.length }}
-                </span>
-              </button>
-              <button
-                class="tab-button"
-                :class="{ active: activeUpLoadTab === 'finished' }"
-                @click="activeUpLoadTab = 'finished'"
-              >
-                {{ t('pages.manage.bucket.success') }}
-                <span v-if="uploadedTaskList.filter(item => item.status === 'uploaded').length" class="tab-badge">
-                  {{ uploadedTaskList.filter(item => item.status === 'uploaded').length }}
-                </span>
-              </button>
-              <button
-                class="tab-button"
-                :class="{ active: activeUpLoadTab === 'failed' }"
-                @click="activeUpLoadTab = 'failed'"
-              >
-                {{ t('pages.manage.bucket.failed') }}
-                <span v-if="uploadedTaskList.filter(item => item.status !== 'uploaded').length" class="tab-badge">
-                  {{ uploadedTaskList.filter(item => item.status !== 'uploaded').length }}
-                </span>
-              </button>
+                <div class="text-sm font-medium text-secondary">
+                  {{ t('pages.manage.bucket.clickUpload') }}
+                </div>
+              </div>
             </div>
 
-            <div class="tab-content">
-              <!-- Uploading Tab -->
-              <div v-if="activeUpLoadTab === 'uploading'" class="tab-panel">
-                <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem">
-                  <button class="action-button secondary" @click="handleCopyUploadingTaskInfo">
-                    <CopyIcon class="action-icon" />
-                    {{ t('pages.manage.bucket.copyUploadTask') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleDeleteUploadedTask">
-                    <Trash2Icon class="action-icon" />
-                    {{ t('pages.manage.bucket.clearFinishedTasks') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleDeleteAllUploadedTask">
-                    <Trash2Icon class="action-icon" />
-                    {{ t('pages.manage.bucket.clearAll') }}
-                  </button>
-                </div>
-                <VirtualScroller
-                  :items="uploadingTaskList"
-                  :item-height="70"
-                  :style="{ height: '100%' }"
-                  view-mode="list"
-                >
-                  <template #default="{ item }">
-                    <div class="file-list-item">
-                      <div class="file-list-info">
-                        <div class="file-list-name">
-                          {{ formatFileName(item.sourceFileName) }}
+            <!-- Upload File List -->
+            <div
+              v-if="tableData.length"
+              class="flex h-[200px] w-full cursor-pointer rounded-lg border-2 border-dashed border-border bg-surface p-4 text-center transition-all duration-fast ease-apple"
+            >
+              <VirtualScroller
+                :items="
+                  tableData.sort((a, b) =>
+                    b.isFolder - a.isFolder === 0 ? b.filesList.length - a.filesList.length : b.isFolder - a.isFolder,
+                  )
+                "
+                :item-height="90"
+                class="min-h-0 w-full flex-1 p-3"
+                view-mode="list"
+              >
+                <template #default="{ item }">
+                  <div
+                    class="m-0 flex w-full cursor-pointer items-center gap-2 rounded-md border border-border-secondary bg-bg-secondary px-4 py-3 hover:bg-accent/10"
+                  >
+                    <div class="flex h-[25px] w-[25px] shrink-0 items-center justify-center">
+                      <FolderIcon v-if="item.isFolder" class="h-[48px] w-[48px] text-tertiary" />
+                      <FileIcon v-else class="h-[48px] w-[48px] text-tertiary" />
+                    </div>
+                    <div class="min-w-0 flex-1 flex-col">
+                      <div class="flex flex-row justify-between gap-3">
+                        <div
+                          class="mb-1 cursor-pointer overflow-hidden text-sm font-semibold text-ellipsis whitespace-nowrap text-secondary"
+                        >
+                          {{ item.name }}
                         </div>
-                        <div class="progress-bar">
-                          <div class="progress-fill" :style="{ width: `${item.progress || 50}%` }" />
+                        <div
+                          v-if="item.fullPath"
+                          class="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-secondary"
+                        >
+                          {{ item.fullPath }}
                         </div>
                       </div>
-                    </div>
-                  </template>
-                </VirtualScroller>
-              </div>
-
-              <!-- Finished Tab -->
-              <div v-if="activeUpLoadTab === 'finished'" class="tab-panel">
-                <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem">
-                  <button class="action-button secondary" @click="handleCopyUploadingTaskInfo">
-                    <CopyIcon class="action-icon" />
-                    {{ t('pages.manage.bucket.copyUploadTask') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleDeleteUploadedTask">
-                    <Trash2Icon class="action-icon" />
-                    {{ t('pages.manage.bucket.clearFinishedTasks') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleDeleteAllUploadedTask">
-                    <Trash2Icon class="action-icon" />
-                    {{ t('pages.manage.bucket.clearAll') }}
-                  </button>
-                </div>
-                <VirtualScroller
-                  :items="uploadedTaskList.filter(item => item.status === 'uploaded')"
-                  :item-height="70"
-                  :style="{ height: '100%' }"
-                  view-mode="list"
-                >
-                  <template #default="{ item }">
-                    <div class="file-list-item">
-                      <div class="file-list-info">
-                        <div class="file-list-name">
-                          {{ formatFileName(item.sourceFileName) }}
-                        </div>
-                        <div class="file-list-meta">
-                          <span>{{ item.finishTime }}</span>
-                          <span class="badge success">
-                            {{ t('pages.manage.bucket.success') }}
-                          </span>
-                        </div>
+                      <div class="flex text-xs text-secondary">
+                        <span>{{ formatFileSize(item.fileSize) }}</span>
+                        <span v-if="item.isFolder"> {{ item.filesList.length }} files </span>
                       </div>
                     </div>
-                  </template>
-                </VirtualScroller>
+                  </div>
+                </template>
+              </VirtualScroller>
+            </div>
+
+            <!-- Upload Actions -->
+            <div v-if="tableData.length" class="mt-4 flex justify-center gap-4">
+              <CustomButton
+                type="primary"
+                :disabled="isLoadingUploadPanelFiles"
+                :text="
+                  isLoadingUploadPanelFiles ? t('pages.manage.bucket.readingDir') : t('pages.manage.bucket.upload')
+                "
+                :icon="UploadIcon"
+                @click="uploadFiles"
+              />
+              <CustomButton
+                type="secondary"
+                :icon="Trash2Icon"
+                :text="t('pages.manage.bucket.clear')"
+                :disabled="isLoadingUploadPanelFiles"
+                @click="clearTableData"
+              />
+            </div>
+
+            <!-- Upload Tasks Tabs -->
+            <div class="flex flex-1 flex-col gap-2 overflow-hidden border-t border-border-secondary">
+              <div class="flex shrink-0 border-b border-b-border">
+                <button
+                  class="relative flex-1 rounded-md border-b-2 border-b-transparent bg-none px-6 py-3 text-sm font-semibold text-secondary shadow-sm transition-all duration-fast ease-apple hover:border-b-accent hover:text-main [.active]:border-b-accent [.active]:bg-accent [.active]:text-white"
+                  :class="{ active: activeUpLoadTab === 'uploading' }"
+                  @click="activeUpLoadTab = 'uploading'"
+                >
+                  {{ t('pages.manage.bucket.uploading') }}
+                  <span
+                    v-if="uploadingTaskList.length"
+                    class="absolute top-1 right-1 min-w-[16px] rounded-full bg-accent px-1.5 py-0.5 text-center text-xs text-white"
+                  >
+                    {{ uploadingTaskList.length }}
+                  </span>
+                </button>
+                <button
+                  class="relative flex-1 rounded-md border-b-2 border-b-transparent bg-none px-6 py-3 text-sm font-semibold text-secondary shadow-sm transition-all duration-fast ease-apple hover:border-b-accent hover:text-main [.active]:border-b-accent [.active]:bg-accent [.active]:text-white"
+                  :class="{ active: activeUpLoadTab === 'finished' }"
+                  @click="activeUpLoadTab = 'finished'"
+                >
+                  {{ t('pages.manage.bucket.success') }}
+                  <span
+                    v-if="uploadedTaskList.filter(item => item.status === 'uploaded').length"
+                    class="absolute top-1 right-1 min-w-[16px] rounded-full bg-accent px-1.5 py-0.5 text-center text-xs text-white"
+                  >
+                    {{ uploadedTaskList.filter(item => item.status === 'uploaded').length }}
+                  </span>
+                </button>
+                <button
+                  class="relative flex-1 rounded-md border-b-2 border-b-transparent bg-none px-6 py-3 text-sm font-semibold text-secondary shadow-sm transition-all duration-fast ease-apple hover:border-b-accent hover:text-main [.active]:border-b-accent [.active]:bg-accent [.active]:text-white"
+                  :class="{ active: activeUpLoadTab === 'failed' }"
+                  @click="activeUpLoadTab = 'failed'"
+                >
+                  {{ t('pages.manage.bucket.failed') }}
+                  <span
+                    v-if="uploadedTaskList.filter(item => item.status !== 'uploaded').length"
+                    class="absolute top-1 right-1 min-w-[16px] rounded-full bg-accent px-1.5 py-0.5 text-center text-xs text-white"
+                  >
+                    {{ uploadedTaskList.filter(item => item.status !== 'uploaded').length }}
+                  </span>
+                </button>
               </div>
 
-              <!-- Failed Tab -->
-              <div v-if="activeUpLoadTab === 'failed'" class="tab-panel">
-                <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem">
-                  <button class="action-button secondary" @click="handleCopyUploadingTaskInfo">
-                    <CopyIcon class="action-icon" />
-                    {{ t('pages.manage.bucket.copyUploadTask') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleDeleteUploadedTask">
-                    <Trash2Icon class="action-icon" />
-                    {{ t('pages.manage.bucket.clearFinishedTasks') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleDeleteAllUploadedTask">
-                    <Trash2Icon class="action-icon" />
-                    {{ t('pages.manage.bucket.clearAll') }}
-                  </button>
-                </div>
+              <div class="flex flex-row justify-center gap-3 rounded-md border border-border shadow-sm">
+                <CustomButton
+                  type="secondary"
+                  :text="t('pages.manage.bucket.copyUploadTask')"
+                  :icon="CopyIcon"
+                  @click="handleCopyUploadingTaskInfo"
+                />
+                <CustomButton
+                  type="secondary"
+                  :text="t('pages.manage.bucket.clearFinishedTasks')"
+                  :icon="Trash2Icon"
+                  @click="handleDeleteUploadedTask"
+                />
+                <CustomButton
+                  type="secondary"
+                  :text="t('pages.manage.bucket.clearAll')"
+                  :icon="Trash2Icon"
+                  @click="handleDeleteAllUploadedTask"
+                />
+              </div>
+
+              <div class="w-full flex-1 overflow-auto rounded-md border border-border-secondary p-2">
+                <!-- Uploading Tab -->
                 <VirtualScroller
-                  :items="uploadedTaskList.filter(item => item.status !== 'uploaded')"
+                  :items="
+                    activeUpLoadTab === 'uploading'
+                      ? uploadingTaskList
+                      : activeUpLoadTab === 'finished'
+                        ? uploadedTaskList.filter(item => item.status === 'uploaded')
+                        : uploadedTaskList.filter(item => item.status !== 'uploaded')
+                  "
                   :item-height="70"
-                  :style="{ height: '100%' }"
+                  class="min-h-0 w-full flex-1 p-3"
                   view-mode="list"
                 >
                   <template #default="{ item }">
-                    <div class="file-list-item">
-                      <div class="file-list-info">
-                        <div class="file-list-name">
-                          {{ formatFileName(item.sourceFileName) }}
+                    <div
+                      class="m-0 flex w-full cursor-pointer items-center gap-3 rounded-md border border-border bg-bg-secondary px-4 py-3 hover:border-accent hover:shadow-md"
+                    >
+                      <div class="flex flex-1 flex-col gap-1">
+                        <div class="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-secondary">
+                          {{ item.sourceFileName }}
                         </div>
-                        <div class="file-list-meta">
+                        <div
+                          v-if="activeUpLoadTab === 'uploading'"
+                          class="h-[8px] w-full overflow-hidden rounded-[4px] bg-surface-elevated"
+                        >
+                          <div
+                            class="h-full rounded-[4px] bg-accent transition-all duration-300 ease-apple"
+                            :style="{ width: `${item.progress}%` }"
+                          />
+                        </div>
+                        <div v-else class="flex gap-4 text-xs text-secondary">
                           <span>{{ item.finishTime }}</span>
-                          <span class="badge error">
-                            {{ t('pages.manage.bucket.failed') }}
+                          <span class="text-xs font-semibold text-success">
+                            {{
+                              activeUpLoadTab === 'finished'
+                                ? t('pages.manage.bucket.success')
+                                : t('pages.manage.bucket.failed')
+                            }}
                           </span>
                         </div>
                       </div>
@@ -913,245 +902,200 @@
           </div>
         </div>
       </div>
-    </div>
+    </CustomModal>
 
     <!-- Download Drawer -->
-    <div
+    <CustomModal
       v-if="isShowDownloadPanel"
-      class="drawer-overlay"
-      :class="{ open: isShowDownloadPanel }"
-      @click="isShowDownloadPanel = false"
+      v-model:visible="isShowDownloadPanel"
+      :title="t('pages.manage.bucket.downloadPage')"
+      width="900px"
+      height="90vh"
     >
-      <div class="drawer-container" @click.stop>
-        <div class="drawer-header">
-          <h3 class="drawer-title">
-            {{ t('pages.manage.bucket.downloadPage') }}
-          </h3>
-          <button class="modal-close" @click="isShowDownloadPanel = false">
-            <XIcon class="action-icon" />
-          </button>
-        </div>
-
-        <div class="drawer-content">
+      <div class="no-scrollbar w-full flex-1 overflow-hidden rounded-md border border-border p-4 shadow-md">
+        <div class="flex h-full w-full flex-col">
           <!-- Download Tasks Tabs -->
-          <div class="tabs-container">
-            <div class="tabs-header">
+          <div class="flex flex-1 flex-col gap-2 overflow-hidden border-t border-border-secondary">
+            <div class="flex shrink-0 border-b border-b-border">
               <button
-                class="tab-button"
+                class="relative flex-1 rounded-md border-b-2 border-b-transparent bg-none px-6 py-3 text-sm font-semibold text-secondary shadow-sm transition-all duration-fast ease-apple hover:border-b-accent hover:text-main [.active]:border-b-accent [.active]:bg-accent [.active]:text-white"
                 :class="{ active: activeDownLoadTab === 'downloading' }"
                 @click="activeDownLoadTab = 'downloading'"
               >
                 {{ t('pages.manage.bucket.downloading') }}
-                <span v-if="downloadingTaskList.length" class="tab-badge">
+                <span
+                  v-if="downloadingTaskList.length"
+                  class="absolute top-1 right-1 min-w-[16px] rounded-full bg-accent px-1.5 py-0.5 text-center text-xs text-white"
+                >
                   {{ downloadingTaskList.length }}
                 </span>
               </button>
               <button
-                class="tab-button"
+                class="relative flex-1 rounded-md border-b-2 border-b-transparent bg-none px-6 py-3 text-sm font-semibold text-secondary shadow-sm transition-all duration-fast ease-apple hover:border-b-accent hover:text-main [.active]:border-b-accent [.active]:bg-accent [.active]:text-white"
                 :class="{ active: activeDownLoadTab === 'finished' }"
                 @click="activeDownLoadTab = 'finished'"
               >
                 {{ t('pages.manage.bucket.success') }}
-                <span v-if="downloadedTaskList.filter(item => item.status === 'downloaded').length" class="tab-badge">
+                <span
+                  v-if="downloadedTaskList.filter(item => item.status === 'downloaded').length"
+                  class="absolute top-1 right-1 min-w-[16px] rounded-full bg-accent px-1.5 py-0.5 text-center text-xs text-white"
+                >
                   {{ downloadedTaskList.filter(item => item.status === 'downloaded').length }}
                 </span>
               </button>
               <button
-                class="tab-button"
+                class="relative flex-1 rounded-md border-b-2 border-b-transparent bg-none px-6 py-3 text-sm font-semibold text-secondary shadow-sm transition-all duration-fast ease-apple hover:border-b-accent hover:text-main [.active]:border-b-accent [.active]:bg-accent [.active]:text-white"
                 :class="{ active: activeDownLoadTab === 'failed' }"
                 @click="activeDownLoadTab = 'failed'"
               >
                 {{ t('pages.manage.bucket.failed') }}
-                <span v-if="downloadedTaskList.filter(item => item.status !== 'downloaded').length" class="tab-badge">
+                <span
+                  v-if="downloadedTaskList.filter(item => item.status !== 'downloaded').length"
+                  class="absolute top-1 right-1 min-w-[16px] rounded-full bg-accent px-1.5 py-0.5 text-center text-xs text-white"
+                >
                   {{ downloadedTaskList.filter(item => item.status !== 'downloaded').length }}
                 </span>
               </button>
             </div>
 
-            <!-- Download Tabs Content -->
-            <div class="tab-content">
+            <div class="flex flex-row justify-center gap-3 rounded-md border border-border shadow-sm">
+              <CustomButton
+                type="secondary"
+                :text="t('pages.manage.bucket.copyDownloadTask')"
+                :icon="CopyIcon"
+                @click="handleCopyDownloadingTaskInfo"
+              />
+              <CustomButton
+                type="secondary"
+                :text="t('pages.manage.bucket.clearFinishedTasks')"
+                :icon="Trash2Icon"
+                @click="handleDeleteDownloadedTask"
+              />
+              <CustomButton
+                type="secondary"
+                :text="t('pages.manage.bucket.clearAll')"
+                :icon="Trash2Icon"
+                @click="handleDeleteAllDownloadedTask"
+              />
+              <CustomButton
+                type="secondary"
+                :text="t('pages.manage.bucket.openDownloadFolder')"
+                :icon="FolderIcon"
+                @click="handleOpenDownloadedFolder"
+              />
+            </div>
+
+            <div class="w-full flex-1 overflow-auto rounded-md border border-border-secondary p-2">
               <!-- Downloading Tab -->
-              <div v-if="activeDownLoadTab === 'downloading'" class="tab-panel">
-                <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem">
-                  <button class="action-button secondary" @click="handleCopyDownloadingTaskInfo">
-                    <CopyIcon class="action-icon" />
-                    {{ t('pages.manage.bucket.copyDownloadTask') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleDeleteDownloadedTask">
-                    <Trash2Icon class="action-icon" />
-                    {{ t('pages.manage.bucket.clearFinishedTasks') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleDeleteAllDownloadedTask">
-                    <Trash2Icon class="action-icon" />
-                    {{ t('pages.manage.bucket.clearAll') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleOpenDownloadedFolder">
-                    <FolderIcon class="action-icon" />
-                    {{ t('pages.manage.bucket.openDownloadFolder') }}
-                  </button>
-                </div>
-                <VirtualScroller
-                  :items="downloadingTaskList"
-                  :item-height="70"
-                  :style="{ height: '100%' }"
-                  view-mode="list"
-                >
-                  <template #default="{ item }">
-                    <div class="file-list-item">
-                      <div class="file-list-info">
-                        <div class="file-list-name">
-                          {{ formatFileName(item.sourceFileName) }}
-                        </div>
-                        <div class="progress-bar">
-                          <div class="progress-fill" :style="{ width: `${item.progress}%` }" />
-                        </div>
+              <VirtualScroller
+                :items="
+                  activeDownLoadTab === 'downloading'
+                    ? downloadingTaskList
+                    : activeDownLoadTab === 'finished'
+                      ? downloadedTaskList.filter(item => item.status === 'downloaded')
+                      : downloadedTaskList.filter(item => item.status !== 'downloaded')
+                "
+                :item-height="70"
+                class="min-h-0 w-full flex-1 p-3"
+                view-mode="list"
+              >
+                <template #default="{ item }">
+                  <div
+                    class="m-0 flex w-full cursor-pointer items-center gap-3 rounded-md border border-border bg-bg-secondary px-4 py-3 hover:border-accent hover:shadow-md"
+                  >
+                    <div class="flex flex-1 flex-col gap-1">
+                      <div class="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-secondary">
+                        {{ item.sourceFileName }}
+                      </div>
+                      <div
+                        v-if="activeDownLoadTab === 'downloading'"
+                        class="relative h-[8px] w-full overflow-hidden rounded-[4px] bg-surface-elevated"
+                      >
+                        <div
+                          class="h-full rounded-[4px] bg-accent transition-all duration-300 ease-apple"
+                          :style="{ width: `${item.progress}%` }"
+                        />
+                      </div>
+                      <div v-else class="flex gap-4 text-xs text-secondary">
+                        <span>{{ item.finishTime }}</span>
+                        <span class="text-xs font-semibold text-success">
+                          {{
+                            activeUpLoadTab === 'finished'
+                              ? t('pages.manage.bucket.success')
+                              : t('pages.manage.bucket.failed')
+                          }}
+                        </span>
                       </div>
                     </div>
-                  </template>
-                </VirtualScroller>
-              </div>
-
-              <!-- Finished Tab -->
-              <div v-if="activeDownLoadTab === 'finished'" class="tab-panel">
-                <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem">
-                  <button class="action-button secondary" @click="handleCopyDownloadingTaskInfo">
-                    <CopyIcon class="action-icon" />
-                    {{ t('pages.manage.bucket.copyDownloadTask') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleDeleteDownloadedTask">
-                    <Trash2Icon class="action-icon" />
-                    {{ t('pages.manage.bucket.clearFinishedTasks') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleDeleteAllDownloadedTask">
-                    <Trash2Icon class="action-icon" />
-                    {{ t('pages.manage.bucket.clearAll') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleOpenDownloadedFolder">
-                    <FolderIcon class="action-icon" />
-                    {{ t('pages.manage.bucket.openDownloadFolder') }}
-                  </button>
-                </div>
-                <VirtualScroller
-                  :items="downloadedTaskList.filter(item => item.status === 'downloaded')"
-                  :item-height="70"
-                  :style="{ height: '100%' }"
-                  view-mode="list"
-                >
-                  <template #default="{ item }">
-                    <div class="file-list-item">
-                      <div class="file-list-info">
-                        <div class="file-list-name">
-                          {{ formatFileName(item.sourceFileName) }}
-                        </div>
-                        <div class="file-list-meta">
-                          <span>{{ item.finishTime }}</span>
-                          <span class="badge success">
-                            {{ t('pages.manage.bucket.success') }}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </template>
-                </VirtualScroller>
-              </div>
-
-              <!-- Failed Tab -->
-              <div v-if="activeDownLoadTab === 'failed'" class="tab-panel">
-                <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem">
-                  <button class="action-button secondary" @click="handleCopyDownloadingTaskInfo">
-                    <CopyIcon class="action-icon" />
-                    {{ t('pages.manage.bucket.copyDownloadTask') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleDeleteDownloadedTask">
-                    <Trash2Icon class="action-icon" />
-                    {{ t('pages.manage.bucket.clearFinishedTasks') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleDeleteAllDownloadedTask">
-                    <Trash2Icon class="action-icon" />
-                    {{ t('pages.manage.bucket.clearAll') }}
-                  </button>
-                  <button class="action-button secondary" @click="handleOpenDownloadedFolder">
-                    <FolderIcon class="action-icon" />
-                    {{ t('pages.manage.bucket.openDownloadFolder') }}
-                  </button>
-                </div>
-                <VirtualScroller
-                  :items="downloadedTaskList.filter(item => item.status !== 'downloaded')"
-                  :style="{ height: '100%' }"
-                  :item-height="70"
-                  view-mode="list"
-                >
-                  <template #default="{ item }">
-                    <div class="file-list-item">
-                      <div class="file-list-info">
-                        <div class="file-list-name">
-                          {{ formatFileName(item.sourceFileName) }}
-                        </div>
-                        <div class="file-list-meta">
-                          <span>{{ item.finishTime }}</span>
-                          <span class="badge error">
-                            {{ t('pages.manage.bucket.failed') }}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </template>
-                </VirtualScroller>
-              </div>
+                  </div>
+                </template>
+              </VirtualScroller>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </CustomModal>
 
     <!-- Markdown Preview Dialog -->
-    <div v-if="isShowMarkDownDialog" class="modal-overlay" @click="isShowMarkDownDialog = false">
-      <div class="modal-container" style="width: 90vw; height: 90vh" @click.stop>
-        <div class="modal-header">
-          <h3 class="modal-title">
-            {{ t('pages.manage.bucket.preview') }}
-          </h3>
-          <button class="modal-close" @click="isShowMarkDownDialog = false">
-            <XIcon class="action-icon" />
-          </button>
-        </div>
-        <div class="modal-content" style="user-select: text" v-html="markDownContent" />
+    <CustomModal
+      v-if="isShowMarkDownDialog"
+      v-model:visible="isShowMarkDownDialog"
+      width="80vw"
+      height="80vh"
+      :title="t('pages.manage.bucket.preview')"
+    >
+      <div class="flex h-full w-full">
+        <div class="notes-body" style="user-select: text" v-html="markDownContent" />
       </div>
-    </div>
+    </CustomModal>
 
     <!-- Text File Preview Dialog -->
-    <div v-if="isShowTextFileDialog" class="modal-overlay" @click="isShowTextFileDialog = false">
-      <div class="modal-container" style="width: 90vw; height: 90vh" @click.stop>
-        <div class="modal-header">
-          <h3 class="modal-title">
-            {{ t('pages.manage.bucket.preview') }}
-          </h3>
-          <button class="modal-close" @click="isShowTextFileDialog = false">
-            <XIcon class="action-icon" />
-          </button>
-        </div>
-        <div class="modal-content">
-          <pre style="font-family: monospace; white-space: pre-wrap; user-select: text">{{ textfileContent }}</pre>
-        </div>
+    <CustomModal
+      v-if="isShowTextFileDialog"
+      v-model:visible="isShowTextFileDialog"
+      width="80vw"
+      height="80vh"
+      :title="t('pages.manage.bucket.preview')"
+    >
+      <div class="flex h-full w-full">
+        <pre class="overflow-auto font-['SF_Mono',Monaco,Menlo,'Ubuntu_Mono',monospace] text-base text-main">{{
+          textfileContent
+        }}</pre>
       </div>
-    </div>
+    </CustomModal>
 
     <!-- Video Player Dialog -->
-    <div v-if="isShowVideoFileDialog" class="modal-overlay" @click="isShowVideoFileDialog = false">
-      <div class="modal-container" style="width: 90vw; height: 90vh" @click.stop>
-        <div class="modal-header">
-          <h3 class="modal-title">
-            {{ t('pages.manage.bucket.play') }}
-          </h3>
-          <button class="modal-close" @click="isShowVideoFileDialog = false">
-            <XIcon class="action-icon" />
-          </button>
-        </div>
-        <div class="modal-content">
-          <video :src="videoFileUrl" controls loop autoplay style="width: 100%; height: auto; max-height: 70vh" />
-        </div>
+    <CustomModal
+      v-if="isShowVideoFileDialog"
+      v-model:visible="isShowVideoFileDialog"
+      width="90vw"
+      height="90vh"
+      :title="t('pages.manage.bucket.play')"
+    >
+      <div class="flex h-full w-full items-center justify-center bg-black">
+        <video-player
+          class="video-player"
+          :src="videoFileUrl"
+          :volume="0.6"
+          :options="{
+            autoplay: true,
+            muted: false,
+            responsive: true,
+            fill: true,
+            fluid: false,
+            controlBar: {
+              volumePanel: {
+                inline: false,
+              },
+            },
+          }"
+          crossorigin="anonymous"
+          controls
+          playsinline
+          loop
+        />
       </div>
-    </div>
+    </CustomModal>
 
     <!-- Create Folder Dialog -->
     <CustomModal
@@ -1234,7 +1178,6 @@ import { useDownloadFileTransferStore, useFileTransferStore, useManageStore } fr
 import {
   customStrMatch,
   customStrReplace,
-  formatFileName,
   formatFileSize,
   formatLink,
   getFileIconPath,
@@ -1245,6 +1188,7 @@ import { getConfig, saveConfig } from '@/manage/utils/dataSender'
 import { textFileExt } from '@/manage/utils/textfile'
 import { videoExt } from '@/manage/utils/videofile'
 import { trimPath } from '@/utils/common'
+import { useDragEventListeners } from '@/utils/drag'
 import { IRPCActionType } from '@/utils/enum'
 import { cancelDownloadLoadingFileList, refreshDownloadFileTransferList } from '@/utils/static'
 /*
@@ -1265,6 +1209,8 @@ const props = defineProps<{
 
 type ISortTypeList = 'name' | 'size' | 'time' | 'ext' | 'check' | 'init'
 
+const uploadDialog = useTemplateRef<HTMLDivElement>('uploadDialog')
+useDragEventListeners(uploadDialog)
 let fileTransferInterval: NodeJS.Timeout | undefined
 let downloadInterval: NodeJS.Timeout | undefined
 let scrollTimeout: ReturnType<typeof setTimeout> | undefined
@@ -1536,8 +1482,8 @@ function getList() {
   })
 }
 
-function handleUploadKeepDirChange() {
-  saveConfig('settings.isUploadKeepDirStructure', isUploadKeepDirStructure.value)
+function handleUploadKeepDirChange(value: boolean) {
+  saveConfig('settings.isUploadKeepDirStructure', value)
   manageStore.refreshConfig()
 }
 
@@ -1896,7 +1842,7 @@ async function handleClickFile(item: any) {
       const fileUrl = item.url
       const res = await fetch(fileUrl, options)
       const content = await res.text()
-      markDownContent.value = await marked.parse(content)
+      markDownContent.value = await marked(content, { breaks: true, gfm: true })
       isShowMarkDownDialog.value = true
     } catch (_error) {
       message.error(t('pages.manage.bucket.loadingFailed'))
diff --git a/src/renderer/manage/pages/ManageMain.vue b/src/renderer/manage/pages/ManageMain.vue
index 1ecc2c12..4aa4420d 100644
--- a/src/renderer/manage/pages/ManageMain.vue
+++ b/src/renderer/manage/pages/ManageMain.vue
@@ -40,16 +40,16 @@
     >
       <div class="flex h-full w-full">
         <div
-          class="flex min-h-0 max-w-[400px] min-w-[40px] flex-col border-r-2 border-r-border transition-all duration-100 ease-out"
+          class="flex min-h-0 w-[40px] max-w-[400px] min-w-[40px] flex-col border-r-2 border-r-border transition-all duration-100 ease-out"
           :style="{ width: sidebarWidth + 'px' }"
         >
-          <div class="shrink-0 border-b-2 border-b-border-secondary p-2">
+          <div v-if="menuTitleMap[currentPicBedName]" class="shrink-0 border-b-2 border-b-border-secondary p-2">
             <h3 class="m-0 text-center text-sm font-semibold text-secondary">
               {{ menuTitleMap[currentPicBedName] }}
             </h3>
           </div>
 
-          <div class="min-h-0 flex-1 overflow-y-auto p-2">
+          <div class="min-h-0 flex-1 overflow-y-auto">
             <div v-if="isLoadingBucketList" class="flex flex-col items-center justify-center gap-2 p-8">
               <div
                 class="h-[25px] w-[25px] animate-spin rounded-full border-3 border-t-2 border-border border-t-accent"
@@ -287,7 +287,7 @@ const configMap = ref<any>(null)
 const currentAlias = ref(route.query.alias as string)
 const currentPicBedName = ref(route.query.picBedName as string)
 
-const sidebarWidth = ref(160)
+const sidebarWidth = ref(120)
 const isResizing = ref(false)
 
 let allPicBedConfigure = JSON.parse(route.query.allPicBedConfigure as string)
diff --git a/src/renderer/manage/pages/css/BucketPage.css b/src/renderer/manage/pages/css/BucketPage.css
index 78a8582a..ec5c8858 100644
--- a/src/renderer/manage/pages/css/BucketPage.css
+++ b/src/renderer/manage/pages/css/BucketPage.css
@@ -1,540 +1,53 @@
+/* stylelint-disable selector-pseudo-class-no-unknown */
 @import "tailwindcss" reference;
 @import "../../../assets/css/theme.css" reference;
 @import "../../../assets/css/utilities.css" reference;
 
-
-/* Header Card */
-.bucket-card {
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-xl);
-  background: var(--color-background-secondary);
-  box-shadow: var(--shadow-sm);
-  transition: var(--transition-medium);
-}
-
-.bucket-card:hover {
-  border-color: var(--color-border);
-  box-shadow: var(--shadow-md);
-}
-
-.header-card {
-  flex-shrink: 0;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border-secondary);
-  padding: 0.75rem 1rem;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-  min-width: 200px;
-}
-
-.custom-domain-input {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.5rem 0.75rem;
-  width: 200px;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-  transition: var(--transition-fast);
-}
-
-.custom-domain-input:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
-}
-
-.custom-domain-select {
-  position: relative;
-  width: 200px;
-}
-
-.select-input {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.5rem 2rem 0.5rem 0.75rem;
-  width: 100%;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.select-input:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
-}
-
-.select-arrow {
-  position: absolute;
-  top: 50%;
-  right: 0.75rem;
-  width: 16px;
-  height: 16px;
-  color: var(--color-text-secondary);
-  transition: var(--transition-fast);
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-
-.select-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  left: 0;
-  z-index: 1000;
-  overflow-y: auto;
-  margin-top: 0.25rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  max-height: 200px;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-lg);
-}
-
-.select-option {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.select-option:hover {
-  background: var(--color-surface-elevated);
-}
-
-.custom-domain-link {
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-decoration: none;
-  color: var(--color-accent);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.custom-domain-link:hover {
-  text-decoration: underline;
-  color: var(--color-accent-hover);
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.action-button {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  padding: 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-  gap: 0.25rem;
-  cursor: pointer;
-}
-
-.action-button:hover {
-  color: white;
-  background: var(--color-accent-hover);
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
-}
-
-.action-button.primary {
-  color: white;
-  background: var(--color-accent);
-}
-
-.action-button.primary:hover {
-  background: var(--color-accent-hover);
-}
-
-.action-button.secondary {
-  border: 1px solid var(--color-border);
-  background: var(--color-background-secondary);
-}
-
-.action-button.secondary:hover {
-  border-color: var(--color-accent-hover);
-}
-
-.action-button.danger {
-  color: white;
-  background: var(--color-error);
-}
-
-.action-button.danger:hover {
-  background: var(--color-error);
-}
-
-.action-icon {
-  @apply w-[16px] h-[16px];
-}
-
-.search-input {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.5rem 0.75rem;
-  width: 200px;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-  transition: var(--transition-fast);
-}
-
-.search-input:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  background: var(--color-background-tertiary);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
-}
-
-/* Breadcrumb */
-.breadcrumb-card {
-  flex-shrink: 0;
-}
-
-.breadcrumb-container {
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-  padding: 0.75rem 1rem;
-  flex-wrap: wrap;
-}
-
-.breadcrumb-item {
-  display: flex;
-  align-items: center;
-  border: 0 solid var(--color-border);
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-  gap: 0.25rem;
-  cursor: pointer;
-}
-
-.breadcrumb-item:hover {
-  color: var(--color-accent);
-}
-
-.breadcrumb-item.current {
-  font-weight: 500;
-  color: var(--color-text-primary);
-  cursor: default;
-}
-
-.breadcrumb-separator {
-  width: 16px;
-  height: 16px;
-  color: var(--color-text-tertiary);
-}
-
-/* Control Panel */
-.control-panel-card {
-  flex-shrink: 0;
-  overflow: visible;
-}
-
-.control-panel {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.control-left {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-}
-
-.file-info {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.file-info-box {
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-  padding: 0.25rem;
-  border: 0 solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-}
-
-
-.control-center {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.control-right {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.view-toggle {
-  display: flex;
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-}
-
-.view-toggle-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  padding: 0.5rem;
-  color: var(--color-text-secondary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.view-toggle-button.active {
-  color: white;
-  background: var(--color-accent);
-}
-
-.view-toggle-button:not(.active):hover {
-  background: var(--color-surface);
-}
-
-.dropdown {
-  position: relative;
-}
-
-.dropdown-button {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.dropdown-button:hover {
-  border-color: var(--color-accent);
-  background: var(--color-surface);
-}
-
-.dropdown-content {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  margin-top: 0.25rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  min-width: 150px;
-  background: var(--color-background-tiertiary);
-  box-shadow: var(--shadow-lg);
-}
-
-.dropdown-item {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  transition: var(--transition-fast);
-  background: var(--color-background-tertiary);
-  cursor: pointer;
-}
-
-.dropdown-item:hover {
-  color: var(--color-accent);
-  background: var(--color-surface-elevated);
-}
-
-.page-input {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.25rem 0.5rem;
-  width: 80px;
-  font-size: 0.875rem;
-  text-align: center;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.page-input:focus {
-  border-color: var(--color-accent);
-  outline: none;
-}
-
-/* Content Area */
-.content-area {
-  display: flex;
-  overflow: hidden;
-  min-height: 0;
-  flex: 1;
-  flex-direction: column;
-}
-
-/* Keep overflow hidden for specific bucket cards that need it */
-.content-area,
-.breadcrumb-card {
-  overflow: hidden;
-}
-
-.content-area::-webkit-scrollbar {
-  width: 8px;
-}
-
-.content-area::-webkit-scrollbar-track {
-  border-radius: var(--radius-md);
-  background: var(--color-surface-elevated);
-}
-
-.content-area::-webkit-scrollbar-thumb {
-  border-radius: var(--radius-md);
-  background: var(--color-border);
-  transition: var(--transition-fast);
-}
-
-.content-area::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-secondary);
-}
-
-/* Virtual Scroller Container */
-.virtual-gallery-scroller {
-  width: 100%;
-  flex: 1;
-  min-height: 0;
-}
-
-/* File Grid Item */
-.virtual-gallery-scroller .file-grid-item {
-  display: flex;
-  overflow: visible;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  margin: 0;
-  background: var(--color-background-secondary);
-  cursor: pointer;
-  transition: var(--transition-medium);
-  width: 100%;
-  height: calc(100% - 8px);
-  box-sizing: border-box;
-  flex-direction: column;
-}
-
-.virtual-gallery-scroller .file-grid-item:hover {
-  border-color: var(--color-border);
-  box-shadow: var(--shadow-md);
-  transform: translateY(-2px);
-}
-
-.virtual-gallery-scroller .file-grid-item.selected {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 40%);
-}
-
-.virtual-gallery-scroller .file-preview {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  background: var(--color-background-secondary);
-  flex: 1;
-  aspect-ratio: auto;
-}
-
-.file-image {
+:deep(.video-js) {
   width: 100%;
   height: 100%;
-  object-fit: contain;
-  transition: var(--transition-medium);
+  max-height: 90vh;
 }
 
-.file-icon {
-  width: 48px;
-  height: 48px;
-  color: var(--color-text-tertiary);
+.notes-body {
+  @apply overflow-y-auto  p-5 border rounded-md w-full text-base leading-[1.5] bg-bg-tertiary text-secondary border-border;
 }
 
-.file-info-section {
-  display: flex;
-  justify-content: space-between;
-  padding: 0.75rem;
-  min-height: 80px;
-  flex-shrink: 0;
-  flex-direction: column;
+.notes-body :deep(h1),
+.notes-body :deep(h2),
+.notes-body :deep(h3) {
+  @apply font-bold text-main mt-5 mb-2;
 }
 
-.file-name {
-  overflow: hidden;
-  margin-bottom: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-text-primary);
-  cursor: pointer;
+.notes-body :deep(h1:first-child),
+.notes-body :deep(h2:first-child),
+.notes-body :deep(h3:first-child) {
+  @apply mt-0;
 }
 
-.file-name:hover {
-  color: var(--color-accent);
+.notes-body :deep(p) {
+  @apply mb-2;
 }
 
-.file-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.75rem;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
+.notes-body :deep(ul),
+.notes-body :deep(ol) {
+  @apply list-inside my-3.5 pl-6;
 }
 
-.file-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.notes-body :deep(li) {
+  @apply mb-1.5;
 }
 
-.file-action-group {
-  display: flex;
-  gap: 0.25rem;
+.notes-body :deep(a) {
+  @apply text-accent underline;
+}
+
+.notes-body :deep(a:hover) {
+  @apply text-accent-hover;
+}
+
+.notes-body :deep(img) {
+  @apply max-w-full rounded-md;
 }
 
 .file-action-button {
@@ -543,940 +56,6 @@
   @apply hover:[.danger]:text-error hover:[.danger]:bg-error/10;
 }
 
-.file-checkbox {
-  position: relative;
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  width: 16px;
-  height: 16px;
-  background: var(--color-surface);
-  transition: var(--transition-fast);
-  appearance: none;
-  cursor: pointer;
-}
-
-.file-checkbox:checked {
-  border-color: var(--color-accent);
-  background: var(--color-accent);
-}
-
-.file-checkbox:checked::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  font-size: 10px;
-  font-weight: bold;
-  color: white;
-  content: '✓';
-  transform: translate(-50%, -50%);
-}
-
-/* File List Item */
-.file-list-item {
-  display: flex;
-  align-items: center;
-  margin: 0;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  padding: 0.75rem 1rem;
-  width: 100%;
-  background: var(--color-background-secondary);
-  transition: var(--transition-medium);
-  gap: 0.75rem;
-  cursor: pointer;
-}
-
-.file-list-item:hover {
-  border-color: var(--color-border);
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
-}
-
-.file-list-item.selected {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
-}
-
-.file-list-checkbox {
-  flex-shrink: 0;
-  margin-right: 0.25rem;
-}
-
-.file-list-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  flex-shrink: 0;
-}
-
-.file-list-info {
-  margin-right: 1rem;
-  min-width: 0;
-  flex: 1;
-}
-
-.file-list-name {
-  overflow: hidden;
-  margin-bottom: 0.25rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-text-primary);
-  cursor: pointer;
-}
-
-.file-list-name:hover {
-  color: var(--color-accent);
-}
-
-.file-list-path {
-  overflow: hidden;
-  margin-bottom: 0.25rem;
-  font-size: 0.75rem;
-  font-family: 'SF Mono', Monaco, Inconsolata, 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Cascadia Code', 'Courier New', monospace;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-text-tertiary);
-  opacity: 0.8;
-}
-
-.file-list-meta {
-  display: flex;
-  gap: 1rem;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-.file-list-actions {
-  display: flex;
-  gap: 0.25rem;
-  flex-shrink: 0;
-}
-
-/* File Actions Dropdown */
-.file-actions-dropdown {
-  position: relative;
-  z-index: 100;
-}
-
-.file-actions-dropdown-content {
-   position: absolute;
-  top: 100%;
-  right: 0;
-  z-index: 3000;
-  overflow: visible;
-  overflow-y: auto;
-  margin-top: 0.25rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  min-width: 120px;
-  max-width: 200px;
-
-  /* Ensure dropdown is never clipped */
-  max-height: 300px;
-  white-space: nowrap;
-  background: var(--color-background-tertiary);
-  box-shadow: var(--shadow-lg);
-  transform-origin: top right;
-  animation: dropdown-appear 0.15s ease-out;
-}
-
-@keyframes dropdown-appear {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(-5px);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-.file-actions-dropdown-content.position-left {
-  right: auto;
-  left: 0;
-  transform-origin: top left;
-}
-
-.file-actions-dropdown-content.position-up {
-  top: auto;
-  bottom: 100%;
-  margin-top: 0;
-  margin-bottom: 0.25rem;
-  transform-origin: bottom right;
-}
-
-.file-actions-dropdown-content.position-up.position-left {
-  transform-origin: bottom left;
-}
-
-.content-fullscreen .file-actions-dropdown-content {
-  z-index: 4000;
-}
-
-@media (width <= 768px) {
-  .file-actions-dropdown-content {
-    min-width: 120px;
-    max-width: 150px;
-  }
-}
-
-.file-actions-dropdown-item {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border-secondary);
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-background-primary);
-  transition: var(--transition-fast);
-  cursor: pointer;
-  gap: 0.5rem;
-}
-
-.file-actions-dropdown-item:last-child {
-  border-bottom: none;
-}
-
-.file-actions-dropdown-item:hover {
-  color: var(--color-accent);
-  background: var(--color-surface-elevated);
-}
-
-/* Modal Overlay */
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 2000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgb(0 0 0 / 50%);
-}
-
-.modal-container {
-  display: flex;
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  max-width: 90vw;
-  max-height: 90vh;
-  background: var(--color-background-tertiary);
-  box-shadow: var(--shadow-xl);
-  flex-direction: column;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  padding: 1rem 1.5rem;
-  flex-shrink: 0;
-}
-
-.modal-title {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.modal-close {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  padding: 0.5rem;
-  color: var(--color-text-secondary);
-  background: none;
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.modal-close:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.modal-content {
-  overflow-y: auto;
-  padding: 1.5rem;
-  background: var(--color-background-primary);
-  flex: 1;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  border-top: 1px solid var(--color-border);
-  padding: 1rem 1.5rem;
-  background: var(--color-background-primary);
-  gap: 0.75rem;
-  flex-shrink: 0;
-}
-
-/* Form Elements */
-.form-group {
-  margin-bottom: 1rem;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.form-input {
-  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: var(--transition-fast);
-}
-
-.form-input:focus {
-  border-color: var(--color-accent);
-  background: white;
-  outline: none;
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
-}
-
-.form-textarea {
-  min-height: 100px;
-  resize: vertical;
-}
-
-.form-select {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.75rem 2rem 0.75rem 0.75rem;
-  width: 100%;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  cursor: pointer;
-  appearance: none;
-}
-
-.form-select:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
-}
-
-/* Switch */
-.switch-container {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 44px;
-  height: 24px;
-}
-
-.switch input {
-  width: 0;
-  height: 0;
-  opacity: 0;
-}
-
-.switch-slider {
-  position: absolute;
-  inset: 0;
-  border-radius: 24px;
-  background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
-  box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
-  transition: all var(--transition-medium);
-  cursor: pointer;
-}
-
-.switch-slider::before {
-  position: absolute;
-  bottom: 3px;
-  left: 3px;
-  border-radius: var(--radius-round);
-  width: 18px;
-  height: 18px;
-  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: "";
-}
-
-input:checked + .switch-slider {
-  background: var(--color-accent);
-  box-shadow:
-    inset 0 1px 3px rgb(0 0 0 / 10%),
-    0 2px 8px rgb(64 158 255 / 30%);
-}
-
-input:checked + .switch-slider::before {
-  transform: translateX(20px);
-}
-
-.switch-label {
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-}
-
-/* Drawer */
-.drawer-overlay {
-  position: fixed;
-  inset: 32px 0 0;
-  z-index: 2000;
-  display: flex;
-  justify-content: flex-end;
-  background: rgb(0 0 0 / 50%);
-}
-
-.drawer-container {
-  display: flex;
-  width: 60%;
-  max-width: 800px;
-  height: 100%;
-  background: var(--color-background-tertiary);
-  box-shadow: var(--shadow-xl);
-  transition: transform 0.3s ease-out;
-  flex-direction: column;
-  transform: translateX(100%);
-}
-
-.drawer-overlay.open .drawer-container {
-  transform: translateX(0);
-}
-
-.drawer-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  padding: 1rem 1.5rem;
-  flex-shrink: 0;
-}
-
-.drawer-title {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.drawer-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-}
-
-/* Upload Area */
-.upload-area {
-  border: 2px dashed var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 3rem 2rem;
-  text-align: center;
-  background: var(--color-surface);
-  transition: var(--transition-medium);
-  cursor: pointer;
-}
-
-.upload-area:hover,
-.upload-area.dragover {
-  border-color: var(--color-accent);
-  background: var(--color-surface-elevated);
-}
-
-.upload-area-text {
-  margin-bottom: 0.5rem;
-  font-size: 1.125rem;
-  color: var(--color-text-secondary);
-}
-
-.upload-area-subtext {
-  font-size: 0.875rem;
-  color: var(--color-text-tertiary);
-}
-
-/* Tabs */
-.tabs-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.tabs-header {
-  display: flex;
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.tab-button {
-  position: relative;
-  border: none;
-  border-bottom: 2px solid transparent;
-  padding: 0.75rem 1.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  background: none;
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.tab-button:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.tab-button.active {
-  border-bottom-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.tab-badge {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  border-radius: var(--radius-lg);
-  padding: 0.125rem 0.375rem;
-  min-width: 16px;
-  font-size: 0.625rem;
-  text-align: center;
-  color: white;
-  background: var(--color-accent);
-}
-
-.tab-content {
-  display: flex;
-  overflow: hidden;
-  flex: 1;
-  flex-direction: column;
-}
-
-.tab-panel {
-  overflow-y: auto;
-  padding: 1rem;
-  flex: 1;
-}
-
-/* Progress Bar */
-.progress-bar {
-  overflow: hidden;
-  border-radius: 4px;
-  width: 100%;
-  height: 8px;
-  background: var(--color-surface-elevated);
-}
-
-.progress-fill {
-  border-radius: 4px;
-  height: 100%;
-  background: var(--color-accent);
-  transition: width 0.3s ease;
-}
-
-/* Badge */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--radius-sm);
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.badge.success {
-  color: var(--color-success);
-  background: var(--color-success-soft);
-}
-
-.badge.error {
-  color: var(--color-error);
-  background: var(--color-error-soft);
-}
-
-.badge.warning {
-  color: var(--color-warning);
-  background: var(--color-warning-soft);
-}
-
-/* Tooltip */
-.tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip-text {
-  position: absolute;
-  top: 125%;
-  left: 50%;
-  z-index: 1000;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.5rem;
-  width: max-content;
-  max-width: 200px;
-  font-size: 0.75rem;
-  text-align: center;
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-  opacity: 0;
-  visibility: hidden;
-  box-shadow: var(--shadow-md);
-  transition: opacity 0.3s;
-  transform: translateX(-50%);
-}
-
-.tooltip:hover .tooltip-text {
-  opacity: 1;
-  visibility: visible;
-}
-
-/* File Actions Dropdown */
-@media (width <= 768px) {
-  .file-actions-dropdown-content {
-    min-width: 100px;
-    max-width: 140px;
-  }
-}
-
-/* Responsive Design */
-@media (width <= 768px) {
-  .bucket-container {
-    padding: 0.5rem;
-  }
-
-  .card-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .header-left {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.5rem;
-  }
-
-  .control-panel {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.75rem;
-  }
-
-  .file-grid-item {
-    overflow: auto;
-    height: 240px;
-  }
-
-  .drawer-container {
-    width: 90%;
-  }
-}
-
-/* Transitions */
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-}
-
-.slide-enter-active, .slide-leave-active {
-  transition: transform 0.3s ease;
-}
-
-.slide-enter-from, .slide-leave-to {
-  transform: translateX(100%);
-}
-
-/* Fullscreen Styles */
-.content-fullscreen {
-  padding: 0;
-  gap: 0;
-}
-
-.content-fullscreen .content-card {
-  display: flex;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  flex: 1;
-  flex-direction: column;
-}
-
-.fullscreen-header {
-  z-index: 100;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border-secondary);
-  padding: 0.75rem 1rem;
-  background: var(--color-background-secondary);
-  flex-shrink: 0;
-}
-
-.fullscreen-header-left {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 200px;
-}
-
-.fullscreen-header-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-}
-
-.fullscreen-header-right {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  min-width: 200px;
-  gap: 0.75rem;
-  flex: 1;
-}
-
-.fullscreen-breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-  flex-wrap: wrap;
-}
-
-.content-fullscreen .content-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: visible;
-}
-
-.content-fullscreen .virtual-scroller-container {
-  flex: 1;
-  overflow: visible;
-}
-
-/* Responsive adjustments for fullscreen */
-@media (width <= 768px) {
-  .fullscreen-header {
-    flex-direction: column;
-    gap: 0.75rem;
-    padding: 1rem;
-  }
-
-  .fullscreen-header-left,
-  .fullscreen-header-center,
-  .fullscreen-header-right {
-    width: 100%;
-    min-width: unset;
-  }
-
-  .fullscreen-header-right {
-    justify-content: space-between;
-  }
-}
-
-
-.empty-state {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 4rem 2rem;
-  text-align: center;
-  flex-direction: column;
-}
-
-.empty-icon {
-  margin-bottom: 1rem;
-  color: var(--color-text-secondary);
-}
-
-.empty-state h3 {
-  margin: 0 0 0.5rem;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.empty-state p {
-  margin: 0;
-  color: var(--color-text-secondary);
-}
-
-/* Loading Spinner */
-.loading-spinner {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgb(255 255 255 / 30%);
-  border-radius: var(--radius-round);
-  border-top: 2px solid #ffffff;
-  margin-right: 0.5rem;
-  animation: spin 1s linear infinite;
-}
-
-/* Loading Toast Notifications */
-.loading-toast {
-  position: fixed;
-  right: 25px;
-  z-index: 9999;
-  animation: slide-right  0.3s ease-out;
-}
-
-.loading-toast-bottom {
-  bottom: 25px;
-}
-
-.loading-toast-top {
-  top: 50px;
-}
-
-.loading-toast-content {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.875rem 1rem;
-  background: rgb(0 0 0 / 85%);
-  border: 1px solid rgb(255 255 255 / 10%);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 8px 32px rgb(0 0 0 / 30%);
-  min-width: 240px;
-  transition: all 0.2s ease;
-}
-
-.loading-toast-content:hover {
-  background: rgb(0 0 0 / 90%);
-  border-color: rgb(255 255 255 / 20%);
-  transform: translateY(-2px);
-  box-shadow: 0 12px 40px rgb(0 0 0 / 40%);
-}
-
-.loading-text {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #ffffff;
-  flex: 1;
-  line-height: 1.4;
-}
-
-.loading-cancel-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: rgb(255 255 255 / 10%);
-  border: 1px solid rgb(255 255 255 / 20%);
-  border-radius: var(--radius-md);
-  color: #ffffff;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
-
-.loading-cancel-button:hover {
-  background: rgb(255 255 255 / 20%);
-  border-color: rgb(255 255 255 / 30%);
-  transform: scale(1.05);
-}
-
-.loading-cancel-button:active {
-  transform: scale(0.95);
-}
-
-.loading-toast .loading-spinner {
-  border-color: rgb(255 255 255 / 30%);
-  border-top-color: #ffffff;
-  width: 18px;
-  height: 18px;
-  margin-right: 0;
-  flex-shrink: 0;
-}
-
-@keyframes slide-right {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* File Info Dialog Improvements */
-.file-info-item {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 1rem;
-  gap: 1rem;
-  padding: 0.75rem;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-}
-
-.file-info-item:hover {
-  border-color: var(--color-border);
-  background: var(--color-surface);
-}
-
-.file-info-key {
-  flex: 0 0 30%;
-  font-weight: 600;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  cursor: pointer;
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--radius-sm);
-  transition: var(--transition-fast);
-}
-
-.file-info-key:hover {
-  background: var(--color-accent-soft);
-  color: var(--color-accent);
-}
-
-.file-info-value {
-  flex: 1;
-  font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  word-break: break-all;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--radius-sm);
-  transition: var(--transition-fast);
-  max-height: 120px;
-  overflow-y: auto;
-}
-
-.file-info-value:hover {
-  background: var(--color-accent-soft);
-  color: var(--color-text-primary);
+.action-icon {
+  @apply w-[16px] h-[16px];
 }
diff --git a/src/renderer/pages/Gallery.vue b/src/renderer/pages/Gallery.vue
index 49607c65..5c0d4fc1 100644
--- a/src/renderer/pages/Gallery.vue
+++ b/src/renderer/pages/Gallery.vue
@@ -242,12 +242,12 @@
                 </div>
               </div>
 
-              <div class="flex shrink-0 flex-col justify-between">
+              <div class="flex min-w-0 shrink-0 flex-col justify-between">
                 <div
-                  class="mb-1.5 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-main"
+                  class="mb-1.5 w-full truncate text-center text-sm font-medium text-main"
                   :title="(item.fileName || '').toString().length > 30 ? item.fileName || '' : ''"
                 >
-                  <div class="text-center">{{ formatFileName(item.fileName || '') }}</div>
+                  {{ formatFileName(item.fileName || '') }}
                 </div>
 
                 <div class="mr-2 flex items-center justify-between">
diff --git a/src/renderer/pages/MiniPage.vue b/src/renderer/pages/MiniPage.vue
index 439adf00..47f6e4d6 100644
--- a/src/renderer/pages/MiniPage.vue
+++ b/src/renderer/pages/MiniPage.vue
@@ -5,7 +5,7 @@
     :class="[osGlobal === 'linux' ? 'rounded-none bg-size-[100vh_100vw]' : 'rounded-full bg-size-[90vh_90vw]']"
   >
     <div
-      id="upload-area"
+      ref="uploadArea"
       class="h-full w-full transition-all duration-200 ease-in-out"
       :class="{
         'bg-[rgba(0,0,0,0.3)]': dragover,
@@ -35,11 +35,12 @@
 
 <script lang="ts" setup>
 import type { IConfig } from 'piclist'
-import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
+import { onBeforeMount, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
 
 import { osGlobal } from '@/hooks/useGlobal'
 import { isUrl } from '@/utils/common'
 import { getConfig } from '@/utils/dataSender'
+import { useDragEventListeners } from '@/utils/drag'
 import { IRPCActionType } from '@/utils/enum'
 
 const logoPath = ref('')
@@ -51,6 +52,9 @@ const wX = ref(-1)
 const wY = ref(-1)
 const screenX = ref(-1)
 const screenY = ref(-1)
+const uploadArea = useTemplateRef<HTMLDivElement>('uploadArea')
+
+useDragEventListeners(uploadArea)
 
 let removeListeners: () => void = () => {}
 
diff --git a/src/renderer/pages/PicGoSetting.vue b/src/renderer/pages/PicGoSetting.vue
index 06c122ee..55262866 100644
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/src/renderer/pages/PicGoSetting.vue
@@ -135,7 +135,7 @@
                 small
                 no-border
                 :title="t('pages.settings.system.isHideDock')"
-                @change="handleHideDockChange(formOfSetting.isHideDock)"
+                @change="handleHideDockChange"
               />
             </SettingCard>
 
@@ -163,7 +163,7 @@
                 small
                 no-border
                 :title="t('pages.settings.system.miniWindowOnTop')"
-                @click="handleMiniWindowOntop(formOfSetting.miniWindowOntop)"
+                @change="handleMiniWindowOntop"
               />
             </SettingCard>
 
@@ -197,7 +197,7 @@
                 no-border
                 :title="t('pages.settings.system.autoLaunch')"
                 :description="t('pages.settings.system.autoLaunchDesc')"
-                @change="handleAutoStartChange(formOfSetting.autoStart)"
+                @change="handleAutoStartChange"
               />
             </SettingCard>
             <CustomNavCard
diff --git a/src/renderer/pages/Upload.vue b/src/renderer/pages/Upload.vue
index 032dd471..c1b0151b 100644
--- a/src/renderer/pages/Upload.vue
+++ b/src/renderer/pages/Upload.vue
@@ -111,6 +111,7 @@
       >
         <div
           id="upload-area"
+          ref="uploadArea"
           class="group/upload relative flex h-full w-full cursor-pointer items-center justify-center rounded-xl border-2 border-dashed border-border bg-bg-secondary px-1 py-12 duration-medium ease-standard focus-visible:focus-ring focus-visible:outline-offset-4 max-md:px-4 max-md:py-8 max-xs:px-2 max-xs:py-6 [:hover,.drag-active]:border-accent [:hover,.drag-active]:bg-[linear-gradient(135deg,var(--color-surface-elevated)_0%,color-mix(in_srgb,var(--color-accent),transparent_95%)_100%)] [:hover,.drag-active]:shadow-lg [:hover,.drag-active&]:-translate-y-[2px]"
           :class="{ 'drag-active': dragover }"
           @drop.prevent="onDrop"
@@ -736,7 +737,8 @@ interface IUploadTaskQueueStatus {
   }
 }
 
-useDragEventListeners()
+const uploadArea = useTemplateRef('uploadArea')
+useDragEventListeners(uploadArea)
 const $router = useRouter()
 const { t } = useI18n()
 const message = useMessage()
diff --git a/src/renderer/utils/drag.ts b/src/renderer/utils/drag.ts
index 0e9c1267..35d05abb 100644
--- a/src/renderer/utils/drag.ts
+++ b/src/renderer/utils/drag.ts
@@ -1,23 +1,26 @@
-import { onBeforeUnmount, onMounted } from 'vue'
+import { onBeforeUnmount, onMounted, type Ref } from 'vue'
 
-function disableDrag(e: DragEvent) {
-  const dropzone = document.getElementById('upload-area')
-  if (dropzone === null || !dropzone.contains(e.target as Node)) {
-    e.preventDefault()
-    e.dataTransfer!.effectAllowed = 'none'
-    e.dataTransfer!.dropEffect = 'none'
+export function useDragEventListeners(dropZoneRef: Ref<HTMLElement | null>) {
+  function disableDrag(e: DragEvent) {
+    const dropzone = dropZoneRef.value
+    if (!dropzone || !dropzone.contains(e.target as Node)) {
+      e.preventDefault()
+      if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = 'none'
+        e.dataTransfer.dropEffect = 'none'
+      }
+    }
   }
-}
 
-export function useDragEventListeners() {
   onMounted(() => {
     window.addEventListener('dragenter', disableDrag, false)
-    window.addEventListener('dragover', disableDrag)
-    window.addEventListener('drop', disableDrag)
+    window.addEventListener('dragover', disableDrag, false)
+    window.addEventListener('drop', disableDrag, false)
   })
+
   onBeforeUnmount(() => {
     window.removeEventListener('dragenter', disableDrag, false)
-    window.removeEventListener('dragover', disableDrag)
-    window.removeEventListener('drop', disableDrag)
+    window.removeEventListener('dragover', disableDrag, false)
+    window.removeEventListener('drop', disableDrag, false)
   })
 }
diff --git a/supported_format.md b/supported_format.md
index 734012a5..5395039c 100644
--- a/supported_format.md
+++ b/supported_format.md
@@ -42,7 +42,6 @@
 | .amv  |      AMV视频文件      | .mpg  |          MPEG视频文件           |
 | .avi  |      AVI视频文件      | .mts  |          AVCHD视频文件          |
 | .flac |     FLAC音频文件      | .ogg  |       Ogg Vorbis音频文件        |
-| .flv  |     Flash视频文件     | .ogv  |       Ogg Theora视频文件        |
 | .m2ts |     M2TS视频文件      | .vob  |           DVD视频文件           |
 | .m4a  |    MPEG-4音频文件     | .wav  |           WAV音频文件           |
 | .m4v  |    MPEG-4视频文件     | .webm |          WebM视频文件           |