style: code format

src/App.vue

@@ -140,6 +140,7 @@ provide('isLoading', isLoading)
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }

src/router/index.ts

@@ -1,5 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 
+// 预加载 SendFileView 组件
+const SendFileView = () => import('../views/SendFileView.vue')
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [
@@ -11,7 +13,7 @@ const router = createRouter({
     {
       path: '/send',
       name: 'Send',
-      component: () => import('@/views/SendFileView.vue')
+      component: SendFileView
     },
     {
       path: '/admin',
@@ -39,12 +41,10 @@ const router = createRouter({
     {
       path: '/login',
       name: 'Login',
-      component: () => import('@/views/LoginView.vue')
+      component: () => import('@/views/manage/LoginView.vue')
     }
   ]
 })
 
-// 预加载 SendFileView 组件
-import('../views/SendFileView.vue')
 
 export default router

src/views/ManageView.vue

@@ -1,8 +1,6 @@
 <template>
-  <div
+  <div class="min-h-screen flex flex-col lg:flex-row transition-colors duration-300"
-    class="min-h-screen flex flex-col lg:flex-row transition-colors duration-300"
+    :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']">
-    :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
-  >
     <!-- Sidebar -->
     <aside
       class="fixed inset-y-0 left-0 z-50 w-64 transform transition-all duration-300 ease-in-out lg:relative lg:translate-x-0 border-r"
@@ -11,28 +9,17 @@
           ? 'bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-xl border-gray-700'
           : 'bg-white border-gray-200',
         { '-translate-x-full': !isSidebarOpen }
-      ]"
+      ]">
-    >
       <!-- Logo区域 -->
-      <div
+      <div class="flex items-center justify-between h-16 px-4 border-b"
-        class="flex items-center justify-between h-16 px-4 border-b"
+        :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
-        :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
-      >
         <div class="flex items-center">
-          <div
+          <div class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow">
-            class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow"
-          >
             <div class="rounded-full p-1" :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
-              <BoxIcon
+              <BoxIcon class="w-6 h-6" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-                class="w-6 h-6"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
             </div>
           </div>
-          <h1
+          <h1 class="ml-2 text-xl font-semibold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-            class="ml-2 text-xl font-semibold"
-            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-          >
             FileCodeBox
           </h1>
         </div>
@@ -45,11 +32,8 @@
       <nav class="flex-1 overflow-y-auto">
         <ul class="p-4 space-y-2">
           <li v-for="item in menuItems" :key="item.id">
-            <a
+            <a href="#" @click="currentSection = item.id"
-              href="#"
+              class="flex items-center p-2 rounded-lg transition-colors duration-200" :class="[
-              @click="currentSection = item.id"
-              class="flex items-center p-2 rounded-lg transition-colors duration-200"
-              :class="[
                 currentSection === item.id
                   ? isDarkMode
                     ? 'bg-indigo-900 text-indigo-400'
@@ -57,8 +41,7 @@
                   : isDarkMode
                     ? 'text-gray-400 hover:bg-gray-700'
                     : 'text-gray-600 hover:bg-gray-100'
-              ]"
+              ]">
-            >
               <component :is="item.icon" class="w-5 h-5 mr-3" />
               {{ item.name }}
             </a>
@@ -70,10 +53,8 @@
     <!-- Main Content -->
     <div class="flex-1 flex flex-col min-h-screen">
       <!-- Header -->
-      <header
+      <header class="shadow-md border-b transition-colors duration-300"
-        class="shadow-md border-b transition-colors duration-300"
+        :class="[isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200']">
-        :class="[isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200']"
-      >
         <div class="flex items-center justify-between h-16 px-4">
           <button @click="toggleSidebar" class="lg:hidden">
             <MenuIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
@@ -82,44 +63,28 @@
       </header>
 
       <!-- Content -->
-      <main
+      <main class="flex-1 p-6 overflow-y-auto transition-colors duration-300"
-        class="flex-1 p-6 overflow-y-auto transition-colors duration-300"
+        :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']">
-        :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
-      >
         <div v-if="currentSection === 'dashboard'">
-          <h2
+          <h2 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-            class="text-2xl font-bold mb-6"
-            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-          >
             仪表盘
           </h2>
 
           <!-- 统计卡片区域 -->
           <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-            <div
+            <div class="p-6 rounded-lg shadow-md transition-colors duration-300"
-              class="p-6 rounded-lg shadow-md transition-colors duration-300"
+              :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-              :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
-            >
               <div class="flex items-center justify-between">
                 <div>
                   <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
                     总文件数
                   </p>
-                  <h3
+                  <h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-                    class="text-2xl font-bold mt-1"
-                    :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-                  >
                     128
                   </h3>
                 </div>
-                <div
+                <div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-indigo-900' : 'bg-indigo-100']">
-                  class="p-3 rounded-full"
+                  <FileIcon class="w-6 h-6" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-                  :class="[isDarkMode ? 'bg-indigo-900' : 'bg-indigo-100']"
-                >
-                  <FileIcon
-                    class="w-6 h-6"
-                    :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-                  />
                 </div>
               </div>
               <p class="text-sm mt-2" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']">
@@ -128,30 +93,19 @@
               </p>
             </div>
 
-            <div
+            <div class="p-6 rounded-lg shadow-md transition-colors duration-300"
-              class="p-6 rounded-lg shadow-md transition-colors duration-300"
+              :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-              :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
-            >
               <div class="flex items-center justify-between">
                 <div>
                   <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
                     存储空间
                   </p>
-                  <h3
+                  <h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-                    class="text-2xl font-bold mt-1"
-                    :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-                  >
                     1.2 TB
                   </h3>
                 </div>
-                <div
+                <div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-purple-900' : 'bg-purple-100']">
-                  class="p-3 rounded-full"
+                  <HardDriveIcon class="w-6 h-6" :class="[isDarkMode ? 'text-purple-400' : 'text-purple-600']" />
-                  :class="[isDarkMode ? 'bg-purple-900' : 'bg-purple-100']"
-                >
-                  <HardDriveIcon
-                    class="w-6 h-6"
-                    :class="[isDarkMode ? 'text-purple-400' : 'text-purple-600']"
-                  />
                 </div>
               </div>
               <div class="mt-4 h-2 bg-gray-200 rounded-full overflow-hidden">
@@ -162,30 +116,19 @@
               </p>
             </div>
 
-            <div
+            <div class="p-6 rounded-lg shadow-md transition-colors duration-300"
-              class="p-6 rounded-lg shadow-md transition-colors duration-300"
+              :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-              :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
-            >
               <div class="flex items-center justify-between">
                 <div>
                   <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
                     活跃用户
                   </p>
-                  <h3
+                  <h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-                    class="text-2xl font-bold mt-1"
-                    :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-                  >
                     25
                   </h3>
                 </div>
-                <div
+                <div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-green-900' : 'bg-green-100']">
-                  class="p-3 rounded-full"
+                  <UsersIcon class="w-6 h-6" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']" />
-                  :class="[isDarkMode ? 'bg-green-900' : 'bg-green-100']"
-                >
-                  <UsersIcon
-                    class="w-6 h-6"
-                    :class="[isDarkMode ? 'text-green-400' : 'text-green-600']"
-                  />
                 </div>
               </div>
               <p class="text-sm mt-2" :class="[isDarkMode ? 'text-red-400' : 'text-red-600']">
@@ -194,27 +137,19 @@
               </p>
             </div>
 
-            <div
+            <div class="p-6 rounded-lg shadow-md transition-colors duration-300"
-              class="p-6 rounded-lg shadow-md transition-colors duration-300"
+              :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-              :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
-            >
               <div class="flex items-center justify-between">
                 <div>
                   <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
                     系统状态
                   </p>
-                  <h3
+                  <h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-                    class="text-2xl font-bold mt-1"
-                    :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-                  >
                     正常
                   </h3>
                 </div>
                 <div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-blue-900' : 'bg-blue-100']">
-                  <ActivityIcon
+                  <ActivityIcon class="w-6 h-6" :class="[isDarkMode ? 'text-blue-400' : 'text-blue-600']" />
-                    class="w-6 h-6"
-                    :class="[isDarkMode ? 'text-blue-400' : 'text-blue-600']"
-                  />
                 </div>
               </div>
               <p class="text-sm mt-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
@@ -224,34 +159,19 @@
           </div>
 
           <!-- 最近活动 -->
-          <div
+          <div class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
-            class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
+            :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-            :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
+            <div class="px-6 py-4 border-b" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
-          >
+              <h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-            <div
-              class="px-6 py-4 border-b"
-              :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
-            >
-              <h3
-                class="text-lg font-medium"
-                :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-              >
                 最近活动
               </h3>
             </div>
             <div class="p-6">
               <div class="space-y-4">
-                <div
+                <div v-for="(activity, index) in recentActivities" :key="index" class="flex items-center space-x-4">
-                  v-for="(activity, index) in recentActivities"
-                  :key="index"
-                  class="flex items-center space-x-4"
-                >
                   <div class="flex-shrink-0">
-                    <component
+                    <component :is="activity.icon" class="w-5 h-5"
-                      :is="activity.icon"
+                      :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
-                      class="w-5 h-5"
-                      :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
-                    />
                   </div>
                   <div class="flex-1">
                     <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
@@ -268,46 +188,31 @@
         </div>
 
         <div v-if="currentSection === 'files'">
-          <h2
+          <h2 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-            class="text-2xl font-bold mb-6"
-            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-          >
             文件管理
           </h2>
 
           <!-- 添加文件操作栏 -->
-          <div
+          <div class="mb-6 flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
-            class="mb-6 flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between"
-          >
             <!-- 搜索和过滤 -->
             <div class="flex flex-1 gap-4">
               <div class="relative flex-1">
-                <input
+                <input type="text" v-model="fileSearchQuery" :class="[
-                  type="text"
-                  v-model="fileSearchQuery"
-                  :class="[
                   isDarkMode
                     ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
                     : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400'
                 ]"
                   class="w-full pl-10 pr-4 py-2 rounded-lg border focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
-                  placeholder="搜索文件..."
+                  placeholder="搜索文件..." />
-                />
+                <SearchIcon class="absolute left-3 top-2.5 w-5 h-5"
-                <SearchIcon
+                  :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" />
-                  class="absolute left-3 top-2.5 w-5 h-5"
-                  :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
-                />
               </div>
 
-              <select
+              <select v-model="fileTypeFilter" :class="[
-                v-model="fileTypeFilter"
-                :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white'
                   : 'bg-white border-gray-300 text-gray-900'
-                ]"
+              ]" class="border rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
-                class="border rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
-              >
                 <option value="">所有类型</option>
                 <option value="PDF">PDF</option>
                 <option value="Image">图片</option>
@@ -318,90 +223,53 @@
 
             <!-- 上传按钮 -->
             <div class="flex gap-4">
-              <button
+              <button @click="$refs.fileInput.click()"
-                @click="$refs.fileInput.click()"
+                class="flex items-center px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors duration-200">
-                class="flex items-center px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors duration-200"
-              >
                 <UploadIcon class="w-5 h-5 mr-2" />
                 上传文件
               </button>
-              <input
+              <input ref="fileInput" type="file" multiple class="hidden" @change="handleFileUpload" />
-                ref="fileInput"
-                type="file"
-                multiple
-                class="hidden"
-                @change="handleFileUpload"
-              />
             </div>
           </div>
 
           <!-- 拖拽上传区域 -->
-          <div
+          <div v-if="showDropZone" class="mb-6 border-2 border-dashed rounded-lg p-8 text-center"
-            v-if="showDropZone"
-            class="mb-6 border-2 border-dashed rounded-lg p-8 text-center"
             :class="[isDarkMode ? 'border-gray-600 bg-gray-800/50' : 'border-gray-300 bg-gray-50']"
-            @drop.prevent="handleFileDrop"
+            @drop.prevent="handleFileDrop" @dragover.prevent="showDropZone = true"
-            @dragover.prevent="showDropZone = true"
+            @dragleave.prevent="showDropZone = false">
-            @dragleave.prevent="showDropZone = false"
+            <UploadCloudIcon class="mx-auto w-12 h-12 mb-4" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" />
-          >
-            <UploadCloudIcon
-              class="mx-auto w-12 h-12 mb-4"
-              :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
-            />
             <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">拖拽文件到此处上传</p>
           </div>
 
           <!-- File List -->
-          <div
+          <div class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
-            class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
+            :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-            :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
+            <div class="px-6 py-4 border-b" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
-          >
+              <h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-            <div
-              class="px-6 py-4 border-b"
-              :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
-            >
-              <h3
-                class="text-lg font-medium"
-                :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-              >
                 所有文件
               </h3>
             </div>
             <div class="overflow-x-auto">
-              <table
+              <table class="min-w-full divide-y" :class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']">
-                class="min-w-full divide-y"
-                :class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']"
-              >
                 <thead :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-100']">
                   <tr>
-                    <th
+                    <th v-for="header in fileTableHeaders" :key="header"
-                      v-for="header in fileTableHeaders"
-                      :key="header"
                       class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider"
-                      :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
+                      :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
-                    >
                       {{ header }}
                     </th>
                   </tr>
                 </thead>
-                <tbody
+                <tbody :class="[
-                  :class="[
                   isDarkMode
                     ? 'bg-gray-800 divide-y divide-gray-700'
                     : 'bg-white divide-y divide-gray-200'
-                  ]"
+                ]">
-                >
                   <tr v-for="file in files" :key="file.id">
                     <td class="px-6 py-4 whitespace-nowrap">
                       <div class="flex items-center">
-                        <FileIcon
+                        <FileIcon class="w-5 h-5 mr-2" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']" />
-                          class="w-5 h-5 mr-2"
+                        <span class="font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
-                          :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']"
-                        />
-                        <span
-                          class="font-medium"
-                          :class="[isDarkMode ? 'text-white' : 'text-gray-900']"
-                        >
                           {{ file.name }}
                         </span>
                       </div>
@@ -422,26 +290,18 @@
                       </span>
                     </td>
                     <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
+                      <button @click="downloadFile(file)" class="mr-3 transition-colors duration-200" :class="[
-                        @click="downloadFile(file)"
-                        class="mr-3 transition-colors duration-200"
-                        :class="[
                         isDarkMode
                           ? 'text-indigo-400 hover:text-indigo-300'
                           : 'text-indigo-600 hover:text-indigo-900'
-                        ]"
+                      ]">
-                      >
                         下载
                       </button>
-                      <button
+                      <button @click="deleteFile(file)" class="transition-colors duration-200" :class="[
-                        @click="deleteFile(file)"
-                        class="transition-colors duration-200"
-                        :class="[
                         isDarkMode
                           ? 'text-red-400 hover:text-red-300'
                           : 'text-red-600 hover:text-red-900'
-                        ]"
+                      ]">
-                      >
                         删除
                       </button>
                     </td>
@@ -452,15 +312,10 @@
           </div>
 
           <!-- 在文件列表表格下方添加分页组件 -->
-          <div
+          <div class="mt-4 flex items-center justify-between px-6 py-3 border-t"
-            class="mt-4 flex items-center justify-between px-6 py-3 border-t"
+            :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
-            :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
-          >
             <!-- 分页信息 -->
-            <div
+            <div class="flex items-center text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
-              class="flex items-center text-sm"
-              :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
-            >
               显示第 {{ (params.page - 1) * params.size + 1 }} 到
               {{ Math.min(params.page * params.size, params.total) }} 条，共 {{ params.total }} 条
             </div>
@@ -468,11 +323,8 @@
             <!-- 分页控制器 -->
             <div class="flex items-center space-x-2">
               <!-- 上一页 -->
-              <button
+              <button @click="handlePageChange(params.page - 1)" :disabled="params.page === 1"
-                @click="handlePageChange(params.page - 1)"
+                class="px-3 py-1 rounded-md transition-colors duration-200" :class="[
-                :disabled="params.page === 1"
-                class="px-3 py-1 rounded-md transition-colors duration-200"
-                :class="[
                   isDarkMode
                     ? params.page === 1
                       ? 'bg-gray-700 text-gray-500 cursor-not-allowed'
@@ -480,44 +332,32 @@
                     : params.page === 1
                       ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                       : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                ]"
+                ]">
-              >
                 上一页
               </button>
 
               <!-- 页码 -->
               <div class="flex items-center space-x-1">
                 <template v-for="pageNum in displayedPages" :key="pageNum">
-                  <button
+                  <button v-if="pageNum !== '...'" @click="handlePageChange(pageNum)"
-                    v-if="pageNum !== '...'"
+                    class="px-3 py-1 rounded-md transition-colors duration-200" :class="[
-                    @click="handlePageChange(pageNum)"
-                    class="px-3 py-1 rounded-md transition-colors duration-200"
-                    :class="[
                       params.page === pageNum
                         ? 'bg-indigo-600 text-white'
                         : isDarkMode
                           ? 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                           : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                    ]"
+                    ]">
-                  >
                     {{ pageNum }}
                   </button>
-                  <span
+                  <span v-else class="px-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
-                    v-else
-                    class="px-2"
-                    :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
-                  >
                     ...
                   </span>
                 </template>
               </div>
 
               <!-- 下一页 -->
-              <button
+              <button @click="handlePageChange(params.page + 1)" :disabled="params.page >= totalPages"
-                @click="handlePageChange(params.page + 1)"
+                class="px-3 py-1 rounded-md transition-colors duration-200" :class="[
-                :disabled="params.page >= totalPages"
-                class="px-3 py-1 rounded-md transition-colors duration-200"
-                :class="[
                   isDarkMode
                     ? params.page >= totalPages
                       ? 'bg-gray-700 text-gray-500 cursor-not-allowed'
@@ -525,8 +365,7 @@
                     : params.page >= totalPages
                       ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                       : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                ]"
+                ]">
-              >
                 下一页
               </button>
             </div>
@@ -534,26 +373,17 @@
         </div>
 
         <div v-if="currentSection === 'settings'">
-          <h2
+          <h2 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-            class="text-2xl font-bold mb-6"
-            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-          >
             系统设置
           </h2>
-          <div
+          <div class="rounded-lg shadow-md p-6 transition-colors duration-300" :class="[
-            class="rounded-lg shadow-md p-6 transition-colors duration-300"
-            :class="[
             isDarkMode
               ? 'bg-gray-800 bg-opacity-70 backdrop-filter backdrop-blur-xl border border-gray-700'
               : 'bg-white border border-gray-200'
-            ]"
+          ]">
-          >
             <div class="space-y-6">
               <div>
-                <h3
+                <h3 class="text-lg font-medium mb-2" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-                  class="text-lg font-medium mb-2"
-                  :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-                >
                   常规设置
                 </h3>
                 <div class="space-y-4">
@@ -575,47 +405,32 @@
               </div>
 
               <div>
-                <h3
+                <h3 class="text-lg font-medium mb-2" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-                  class="text-lg font-medium mb-2"
-                  :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-                >
                   安全设置
                 </h3>
                 <div class="space-y-4">
                   <div class="flex items-center justify-between">
-                    <span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                    <span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">双因素认证</span>
-                      >双因素认证</span
-                    >
                     <label class="switch">
                       <input type="checkbox" v-model="settings.twoFactor" />
                       <span class="slider round"></span>
                     </label>
                   </div>
                   <div>
-                    <label
+                    <label for="password" class="block text-sm font-medium mb-1"
-                      for="password"
+                      :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                      class="block text-sm font-medium mb-1"
-                      :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-                    >
                       更改密码
                     </label>
                     <div class="mt-1 relative rounded-md shadow-sm">
-                      <input
+                      <input type="password" id="password" v-model="newPassword"
-                        type="password"
-                        id="password"
-                        v-model="newPassword"
                         class="block w-full pr-10 sm:text-sm rounded-md focus:ring-indigo-500 focus:border-indigo-500"
                         :class="[
                           isDarkMode
                             ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
                             : 'border-gray-300 text-gray-900 placeholder-gray-400'
-                        ]"
+                        ]" placeholder="新密码" />
-                        placeholder="新密码"
+                      <button @click="changePassword"
-                      />
+                        class="absolute inset-y-0 right-0 px-3 flex items-center bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
-                      <button
-                        @click="changePassword"
-                        class="absolute inset-y-0 right-0 px-3 flex items-center bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
-                      >
                         更改
                       </button>
                     </div>
@@ -886,11 +701,11 @@ onMounted(() => {
   background-color: #4b5563;
 }
 
-input:checked + .slider {
+input:checked+.slider {
   background-color: #4f46e5;
 }
 
-.dark input:checked + .slider {
+.dark input:checked+.slider {
   background-color: #4f46e5;
 }
 
@@ -921,6 +736,7 @@ input:checked + .slider {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }

src/views/RetrievewFileView.vue

@@ -1,119 +1,74 @@
 <template>
-  <div
+  <div class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300">
-    class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300"
-  >
     <div class="w-full max-w-md relative z-10">
-      <div
+      <div class="rounded-3xl shadow-2xl overflow-hidden border transform transition-all duration-300" :class="[
-        class="rounded-3xl shadow-2xl overflow-hidden border transform transition-all duration-300"
-        :class="[
         isDarkMode
           ? 'bg-gray-800 bg-opacity-50 backdrop-filter backdrop-blur-xl border-gray-700'
           : 'bg-white border-gray-200'
-        ]"
+      ]">
-      >
         <div class="p-8">
           <div class="flex justify-center mb-8">
-            <div
+            <div class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow">
-              class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow"
-            >
               <div class="rounded-full bg-gray-900 p-2">
                 <BoxIcon class="w-8 h-8 text-white" />
               </div>
             </div>
           </div>
-          <h2
+          <h2 @click="toSend" class="text-3xl cursor-pointer font-extrabold text-center mb-6" :class="[
-            @click="toSend"
-            class="text-3xl cursor-pointer font-extrabold text-center mb-6"
-            :class="[
             isDarkMode
               ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
               : 'text-indigo-600'
-            ]"
+          ]">
-          >
+            {{ config.name }}
-            {{config.name}}
           </h2>
           <form @submit.prevent="handleSubmit">
             <div class="mb-6 relative">
-              <label
+              <label for="code" class="block text-sm font-medium mb-2"
-                for="code"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">取件码</label>
-                class="block text-sm font-medium mb-2"
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-                >取件码</label
-              >
               <div class="relative">
-                <input
+                <input id="code" v-model="code" type="text"
-                  id="code"
-                  v-model="code"
-                  type="text"
                   class="w-full px-4 py-3 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 pr-10"
                   :class="[
                     isDarkMode ? 'bg-gray-700 bg-opacity-50' : 'bg-gray-100',
                     { 'ring-2 ring-red-500': error },
                     isDarkMode ? 'text-gray-300' : 'text-gray-800'
-                  ]"
+                  ]" placeholder="请输入5位取件码" required :readonly="inputStatus.readonly" maxlength="5"
-                  placeholder="请输入5位取件码"
+                  @focus="isInputFocused = true" @blur="isInputFocused = false" />
-                  required
+                <div v-if="inputStatus.loading" class="absolute inset-y-0 right-0 flex items-center pr-3">
-                  :readonly="inputStatus.readonly"
+                  <span class="animate-spin rounded-full h-5 w-5 border-b-2 border-indigo-500"></span>
-                  maxlength="5"
-                  @focus="isInputFocused = true"
-                  @blur="isInputFocused = false"
-                />
-                <div
-                  v-if="inputStatus.loading"
-                  class="absolute inset-y-0 right-0 flex items-center pr-3"
-                >
-                  <span
-                    class="animate-spin rounded-full h-5 w-5 border-b-2 border-indigo-500"
-                  ></span>
                 </div>
               </div>
               <div
                 class="absolute -bottom-0.5 left-2 h-0.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 transition-all duration-300 ease-in-out"
-                :class="{ 'w-97-100': isInputFocused, 'w-0': !isInputFocused }"
+                :class="{ 'w-97-100': isInputFocused, 'w-0': !isInputFocused }"></div>
-              ></div>
             </div>
-            <button
+            <button type="submit"
-              type="submit"
               class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-3 px-4 rounded-lg hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
-              :disabled="inputStatus.loading"
+              :disabled="inputStatus.loading">
-            >
               <span class="flex items-center justify-center relative z-10">
                 <span>{{ inputStatus.loading ? '处理中...' : '提取文件' }}</span>
                 <ArrowRightIcon
-                  class="w-5 h-5 ml-2 transition-transform duration-300 transform group-hover:translate-x-1"
+                  class="w-5 h-5 ml-2 transition-transform duration-300 transform group-hover:translate-x-1" />
-                />
               </span>
               <span
-                class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
-              ></span>
             </button>
           </form>
 
           <div class="mt-6 text-center">
-            <router-link
+            <router-link to="/send" class="text-indigo-400 hover:text-indigo-300 transition duration-300">
-              to="/send"
-              class="text-indigo-400 hover:text-indigo-300 transition duration-300"
-            >
               需要发送文件？点击这里
             </router-link>
           </div>
         </div>
-        <div
+        <div class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
-          class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
+          :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']">
-          :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
+          <span class="text-sm flex items-center" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
-        >
-          <span
-            class="text-sm flex items-center"
-            :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-          >
             <ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
             安全加密
           </span>
-          <button
+          <button @click="toggleDrawer" class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
-            @click="toggleDrawer"
+            :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']">
-            class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
-            :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-          >
             取件记录
             <ClipboardListIcon class="w-4 h-4 ml-1" />
           </button>
@@ -122,84 +77,56 @@
     </div>
 
     <transition name="drawer">
-      <div
+      <div v-if="showDrawer"
-        v-if="showDrawer"
         class="fixed inset-y-0 right-0 w-full sm:w-120 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col"
-        :class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
+        :class="[isDarkMode ? 'bg-gray-900' : 'bg-white']">
-      >
+        <div class="flex justify-between items-center p-6 border-b"
-        <div
+          :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
-          class="flex justify-between items-center p-6 border-b"
-          :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
-        >
           <h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
             取件记录
           </h3>
-          <button
+          <button @click="toggleDrawer" class="hover:text-white transition duration-300"
-            @click="toggleDrawer"
+            :class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']">
-            class="hover:text-white transition duration-300"
-            :class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']"
-          >
             <XIcon class="w-6 h-6" />
           </button>
         </div>
         <div class="flex-grow overflow-y-auto p-6">
           <transition-group name="list" tag="div" class="space-y-4">
-            <div
+            <div v-for="record in records" :key="record.id"
-              v-for="record in records"
-              :key="record.id"
               class="bg-opacity-50 rounded-lg p-4 flex items-center shadow-md hover:shadow-lg transition duration-300 transform hover:scale-102"
-              :class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']"
+              :class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']">
-            >
               <div class="flex-shrink-0 mr-4">
-                <FileIcon
+                <FileIcon class="w-10 h-10" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-                  class="w-10 h-10"
-                  :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-                />
               </div>
               <div class="flex-grow min-w-0 mr-4">
-                <p
+                <p class="font-medium text-lg truncate" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-                  class="font-medium text-lg truncate"
-                  :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-                >
                   {{ record.filename }}
                 </p>
-                <p
+                <p class="text-sm truncate" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
-                  class="text-sm truncate"
-                  :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
-                >
                   {{ record.date }} · {{ record.size }}
                 </p>
               </div>
               <div class="flex-shrink-0 flex space-x-2">
-                <button
+                <button @click="viewDetails(record)"
-                  @click="viewDetails(record)"
+                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
                     isDarkMode
                       ? 'hover:bg-indigo-400 text-indigo-400'
                       : 'hover:bg-indigo-100 text-indigo-600'
-                  ]"
+                  ]">
-                >
                   <EyeIcon class="w-5 h-5" />
                 </button>
-                <button
+                <button @click="downloadRecord(record)"
-                  @click="downloadRecord(record)"
+                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
                     isDarkMode
                       ? 'hover:bg-green-400 text-green-400'
                       : 'hover:bg-green-100 text-green-600'
-                  ]"
+                  ]">
-                >
                   <DownloadIcon class="w-5 h-5" />
                 </button>
-                <button
+                <button @click="deleteRecord(record.id)"
-                  @click="deleteRecord(record.id)"
+                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
                     isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
-                  ]"
+                  ]">
-                >
                   <TrashIcon class="w-5 h-5" />
                 </button>
               </div>
@@ -210,80 +137,49 @@
     </transition>
 
     <transition name="fade">
-      <div
+      <div v-if="selectedRecord" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        v-if="selectedRecord"
-        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      >
         <div
           class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70 overflow-hidden"
-          :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
+          :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
-        >
+          <h3 class="text-2xl font-bold mb-6 truncate" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-          <h3
-            class="text-2xl font-bold mb-6 truncate"
-            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-          >
             文件详情
           </h3>
           <div class="space-y-4">
             <div class="flex items-center">
-              <FileIcon
+              <FileIcon class="w-6 h-6 mr-3 flex-shrink-0"
-                class="w-6 h-6 mr-3 flex-shrink-0"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']" class="truncate flex-grow">
-              />
-              <p
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-                class="truncate flex-grow"
-              >
                 <span class="font-medium">文件名：</span>{{ selectedRecord.filename }}
               </p>
             </div>
             <div class="flex items-center">
-              <CalendarIcon
+              <CalendarIcon class="w-6 h-6 mr-3 flex-shrink-0"
-                class="w-6 h-6 mr-3 flex-shrink-0"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']" class="truncate flex-grow">
-              />
-              <p
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-                class="truncate flex-grow"
-              >
                 <span class="font-medium">取件日期：</span>{{ selectedRecord.date }}
               </p>
             </div>
             <div class="flex items-center">
-              <HardDriveIcon
+              <HardDriveIcon class="w-6 h-6 mr-3 flex-shrink-0"
-                class="w-6 h-6 mr-3 flex-shrink-0"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']" class="truncate flex-grow">
-              />
-              <p
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-                class="truncate flex-grow"
-              >
                 <span class="font-medium">文件大小：</span>{{ selectedRecord.size }}
               </p>
             </div>
             <div class="flex items-center">
-              <DownloadIcon
+              <DownloadIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-                class="w-6 h-6 mr-3"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
               <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
                 <span class="font-medium">文件内容：</span>
               </p>
               <div v-if="selectedRecord.filename == 'Text'" class="ml-2">
-                <button
+                <button @click="showContentPreview"
-                  @click="showContentPreview"
+                  class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300">
-                  class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300"
-                >
                   预览内容
                 </button>
               </div>
               <div v-else>
-                <a
+                <a :href="`${baseUrl}${selectedRecord.downloadUrl}`" target="_blank" rel="noopener noreferrer"
-                  :href="`${baseUrl}${selectedRecord.downloadUrl}`"
+                  class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300">
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300"
-                >
                   点击下载
                 </a>
               </div>
@@ -291,10 +187,7 @@
           </div>
 
           <div class="mt-6 flex flex-col items-center">
-            <h4
+            <h4 class="text-lg font-semibold mb-3" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-              class="text-lg font-semibold mb-3"
-              :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-            >
               取件二维码
             </h4>
             <div class="bg-white p-2 rounded-lg shadow-md">
@@ -305,10 +198,8 @@
             </p>
           </div>
 
-          <button
+          <button @click="selectedRecord = null"
-            @click="selectedRecord = null"
+            class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105">
-            class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105"
-          >
             关闭
           </button>
         </div>
@@ -317,14 +208,10 @@
 
     <!-- 新增内容预览弹框 -->
     <transition name="fade">
-      <div
+      <div v-if="showPreview" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        v-if="showPreview"
-        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      >
         <div
           class="p-8 rounded-2xl max-w-3xl w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70 max-h-[80vh] overflow-y-auto"
-          :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
+          :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
-        >
           <div class="flex justify-between items-center mb-4">
             <h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
               内容预览
@@ -333,11 +220,7 @@
               <XIcon class="w-6 h-6" />
             </button>
           </div>
-          <div
+          <div class="prose max-w-none" :class="[isDarkMode ? 'prose-invert' : '']" v-html="renderedContent"></div>
-            class="prose max-w-none"
-            :class="[isDarkMode ? 'prose-invert' : '']"
-            v-html="renderedContent"
-          ></div>
         </div>
       </div>
     </transition>
@@ -420,7 +303,7 @@ const handleSubmit = async () => {
 
     if (res.code === 200) {
       if (res.detail) {
-        const isFile = res.detail.text.startsWith('/share/download') || res.detail.name !=='Text'
+        const isFile = res.detail.text.startsWith('/share/download') || res.detail.name !== 'Text'
         const newFileData = {
           id: Date.now(),
           code: res.detail.code,
@@ -499,7 +382,7 @@ const downloadRecord = (record) => {
 
   if (record.downloadUrl) {
     // 如果是文件,直接下载
-    window.open(`${ record.downloadUrl.startsWith('http') ? '' : baseUrl }${record.downloadUrl}`, '_blank')
+    window.open(`${record.downloadUrl.startsWith('http') ? '' : baseUrl}${record.downloadUrl}`, '_blank')
   } else if (record.content) {
     // 如果是文本,转成txt下载
     const blob = new Blob([record.content], { type: 'text/plain;charset=utf-8' })
@@ -522,34 +405,44 @@ const showContentPreview = () => {
 
 <style scoped>
 @keyframes blob {
+
   0%,
   100% {
     transform: translate(0, 0) scale(1);
   }
+
   25% {
     transform: translate(20px, -50px) scale(1.1);
   }
+
   50% {
     transform: translate(-20px, 20px) scale(0.9);
   }
+
   75% {
     transform: translate(50px, 50px) scale(1.05);
   }
 }
+
 @media (min-width: 640px) {
   .sm\:w-120 {
-    width: 30rem; /* 480px */
+    width: 30rem;
+    /* 480px */
   }
 }
+
 .animate-blob-1 {
   animation: blob 25s infinite;
 }
+
 .animate-blob-2 {
   animation: blob 30s infinite;
 }
+
 .animate-blob-3 {
   animation: blob 35s infinite;
 }
+
 .animate-blob-4 {
   animation: blob 40s infinite;
 }
@@ -562,6 +455,7 @@ const showContentPreview = () => {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -571,6 +465,7 @@ const showContentPreview = () => {
 .fade-leave-active {
   transition: opacity 0.3s ease;
 }
+
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
@@ -580,6 +475,7 @@ const showContentPreview = () => {
 .list-leave-active {
   transition: all 0.5s ease;
 }
+
 .list-enter-from,
 .list-leave-to {
   opacity: 0;
@@ -590,10 +486,12 @@ const showContentPreview = () => {
 .drawer-leave-active {
   transition: transform 0.3s ease;
 }
+
 .drawer-enter-from,
 .drawer-leave-to {
   transform: translateX(100%);
 }
+
 .w-97-100 {
   width: 97%;
 }
@@ -602,30 +500,35 @@ const showContentPreview = () => {
 :deep(.prose) {
   text-align: left;
 }
+
 :deep(.prose h1),
 :deep(.prose h2),
 :deep(.prose h3),
 :deep(.prose h4),
 :deep(.prose h5),
 :deep(.prose h6) {
-  color: rgb(79, 70, 229); /* text-indigo-600 */
+  color: rgb(79, 70, 229);
+  /* text-indigo-600 */
 }
 
 @media (prefers-color-scheme: dark) {
+
   :deep(.prose h1),
   :deep(.prose h2),
   :deep(.prose h3),
   :deep(.prose h4),
   :deep(.prose h5),
   :deep(.prose h6) {
-    color: rgb(129, 140, 248); /* text-indigo-400 */
+    color: rgb(129, 140, 248);
+    /* text-indigo-400 */
   }
 }
 
 /* 添加新的宽度类 */
 @media (min-width: 640px) {
   .sm\:w-120 {
-    width: 30rem; /* 480px */
+    width: 30rem;
+    /* 480px */
   }
 }
 </style>

src/views/SendFileView.vue

@@ -1,48 +1,31 @@
 <template>
-  <div
+  <div class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300">
-    class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300"
+    <div class="rounded-3xl shadow-2xl overflow-hidden border w-full max-w-md transition-colors duration-300" :class="[
-  >
-    <div
-      class="rounded-3xl shadow-2xl overflow-hidden border w-full max-w-md transition-colors duration-300"
-      :class="[
       isDarkMode
         ? 'bg-white bg-opacity-10 backdrop-filter backdrop-blur-xl border-gray-700'
         : 'bg-white border-gray-200'
-      ]"
+    ]">
-    >
       <div class="p-8">
-        <h2
+        <h2 class="text-3xl font-extrabold text-center mb-8 cursor-pointer transition-colors duration-300" :class="[
-          class="text-3xl font-extrabold text-center mb-8 cursor-pointer transition-colors duration-300"
-          :class="[
           isDarkMode
             ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
             : 'text-indigo-600'
-          ]"
+        ]" @click="toRetrieve">
-          @click="toRetrieve"
+          {{ config.name }}
-        >
-          {{config.name}}
         </h2>
         <form @submit.prevent="handleSubmit" class="space-y-8">
           <!-- 发送类型选择 -->
           <div class="flex justify-center space-x-4 mb-6">
-            <button
+            <button type="button" @click="sendType = 'file'" :class="[
-              type="button"
-              @click="sendType = 'file'"
-              :class="[
               'px-4 py-2 rounded-lg',
               sendType === 'file' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
-              ]"
+            ]">
-            >
               发送文件
             </button>
-            <button
+            <button type="button" @click="sendType = 'text'" :class="[
-              type="button"
-              @click="sendType = 'text'"
-              :class="[
               'px-4 py-2 rounded-lg',
               sendType === 'text' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
-              ]"
+            ]">
-            >
               发送文本
             </button>
           </div>
@@ -56,37 +39,23 @@
                   isDarkMode
                     ? 'bg-gray-800 bg-opacity-50 border-gray-600 hover:border-indigo-500'
                     : 'bg-gray-100 border-gray-300 hover:border-indigo-500'
-                ]"
+                ]" @click="triggerFileUpload" @dragover.prevent @drop.prevent="handleFileDrop">
-                @click="triggerFileUpload"
+                <input id="file-upload" type="file" class="hidden" @change="handleFileUpload" ref="fileInput" />
-                @dragover.prevent
-                @drop.prevent="handleFileDrop"
-              >
-                <input
-                  id="file-upload"
-                  type="file"
-                  class="hidden"
-                  @change="handleFileUpload"
-                  ref="fileInput"
-                />
                 <div class="absolute inset-0 w-full h-full" v-if="uploadProgress > 0">
                   <BorderProgressBar :progress="uploadProgress" />
                 </div>
-                <UploadCloudIcon
+                <UploadCloudIcon :class="[
-                  :class="[
                   'w-16 h-16 transition-colors duration-300',
                   isDarkMode
                     ? 'text-gray-400 group-hover:text-indigo-400'
                     : 'text-gray-600 group-hover:text-indigo-600'
-                  ]"
+                ]" />
-                />
+                <p :class="[
-                <p
-                  :class="[
                   'mt-4 text-sm transition-colors duration-300 w-full text-center',
                   isDarkMode
                     ? 'text-gray-400 group-hover:text-indigo-400'
                     : 'text-gray-600 group-hover:text-indigo-600'
-                  ]"
+                ]">
-                >
                   <span class="block truncate">
                     {{ selectedFile ? selectedFile.name : '点击或拖放文件到此处上传' }}
                   </span>
@@ -99,18 +68,12 @@
             <div v-else key="text" class="grid grid-cols-1 gap-8">
               <!-- 文本输入区域 -->
               <div v-if="sendType === 'text'" class="flex flex-col">
-                <textarea
+                <textarea id="text-content" v-model="textContent" rows="7" :class="[
-                  id="text-content"
-                  v-model="textContent"
-                  rows="7"
-                  :class="[
                   'flex-grow px-4 py-3 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 resize-none',
                   isDarkMode
                     ? 'bg-gray-800 bg-opacity-50 text-white'
                     : 'bg-white text-gray-900 border border-gray-300'
-                  ]"
+                ]" placeholder="在此输入要发送的文本..."></textarea>
-                  placeholder="在此输入要发送的文本..."
-                ></textarea>
               </div>
             </div>
           </transition>
@@ -119,51 +82,38 @@
             <label :class="['text-sm font-medium', isDarkMode ? 'text-gray-300' : 'text-gray-700']">
               过期方式
             </label>
-            <select
+            <select v-model="expirationMethod" :class="[
-              v-model="expirationMethod"
-              :class="[
               'px-4 py-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500',
               isDarkMode
                 ? 'bg-gray-800 bg-opacity-50 text-white'
                 : 'bg-white text-gray-900 border border-gray-300'
-              ]"
+            ]">
-            >
               <option v-for="item in config.expireStyle" :value="item" :key="item">
                 {{ getUnit(item) }}
               </option>
             </select>
             <div v-if="expirationMethod !== 'forever'" class="flex items-center space-x-2">
               <div class="relative flex-grow">
-                <input
+                <input v-model="expirationValue" type="number" :placeholder="getPlaceholder()" :class="[
-                  v-model="expirationValue"
-                  type="number"
-                  :placeholder="getPlaceholder()"
-                  :class="[
                   'w-full px-4 py-2 pr-16 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500',
                   isDarkMode
                     ? 'bg-gray-800 bg-opacity-50 text-white'
                     : 'bg-white text-gray-900 border border-gray-300'
-                  ]"
+                ]" />
-                />
+                <span :class="[
-                <span
-                  :class="[
                   'absolute right-3 top-1/2 transform -translate-y-1/2',
                   isDarkMode ? 'text-gray-300' : 'text-gray-700'
-                  ]"
+                ]">
-                >
                   {{ getUnit() }}
                 </span>
               </div>
             </div>
           </div>
           <!-- 提交按钮 -->
-          <button
+          <button type="submit"
-            type="submit"
+            class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group">
-            class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
-          >
             <span
-              class="absolute top-0 left-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"
+              class="absolute top-0 left-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
-            ></span>
             <span class="relative z-10 flex items-center justify-center text-lg">
               <SendIcon class="w-6 h-6 mr-2" />
               <span>安全寄送</span>
@@ -177,22 +127,14 @@
         </div>
       </div>
 
-      <div
+      <div class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
-        class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
+        :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']">
-        :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
+        <span class="text-sm flex items-center" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
-      >
-        <span
-          class="text-sm flex items-center"
-          :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-        >
           <ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
           安全加密
         </span>
-        <button
+        <button @click="toggleDrawer" class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
-          @click="toggleDrawer"
+          :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']">
-          class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
-          :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-        >
           发件记录
           <ClipboardListIcon class="w-4 h-4 ml-1" />
         </button>
@@ -201,84 +143,56 @@
 
     <!-- 抽屉式发件记录 -->
     <transition name="drawer">
-      <div
+      <div v-if="showDrawer"
-        v-if="showDrawer"
         class="fixed inset-y-0 right-0 w-full sm:w-120 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col"
-        :class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
+        :class="[isDarkMode ? 'bg-gray-900' : 'bg-white']">
-      >
+        <div class="flex justify-between items-center p-6 border-b"
-        <div
+          :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
-          class="flex justify-between items-center p-6 border-b"
-          :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
-        >
           <h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
             发件记录
           </h3>
-          <button
+          <button @click="toggleDrawer" class="hover:text-white transition duration-300"
-            @click="toggleDrawer"
+            :class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']">
-            class="hover:text-white transition duration-300"
-            :class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']"
-          >
             <XIcon class="w-6 h-6" />
           </button>
         </div>
         <div class="flex-grow overflow-y-auto p-6">
           <transition-group name="list" tag="div" class="space-y-4">
-            <div
+            <div v-for="record in sendRecords" :key="record.id"
-              v-for="record in sendRecords"
-              :key="record.id"
               class="bg-opacity-50 rounded-lg p-4 flex items-center shadow-md hover:shadow-lg transition duration-300 transform hover:scale-102"
-              :class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']"
+              :class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']">
-            >
               <div class="flex-shrink-0 mr-4">
-                <FileIcon
+                <FileIcon class="w-10 h-10" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-                  class="w-10 h-10"
-                  :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-                />
               </div>
               <div class="flex-grow min-w-0 mr-4">
-                <p
+                <p class="font-medium text-lg truncate" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-                  class="font-medium text-lg truncate"
-                  :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-                >
                   {{ record.filename ? record.filename : 'Text' }}
                 </p>
-                <p
+                <p class="text-sm truncate" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
-                  class="text-sm truncate"
-                  :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
-                >
                   {{ record.date }} · {{ record.size }}
                 </p>
               </div>
               <div class="flex-shrink-0 flex space-x-2">
-                <button
+                <button @click="copyRetrieveLink(record.retrieveCode)"
-                  @click="copyRetrieveLink(record.retrieveCode)"
+                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
                     isDarkMode
                       ? 'hover:bg-blue-400 text-blue-400'
                       : 'hover:bg-blue-100 text-blue-600'
-                  ]"
+                  ]">
-                >
                   <ClipboardCopyIcon class="w-5 h-5" />
                 </button>
-                <button
+                <button @click="viewDetails(record)"
-                  @click="viewDetails(record)"
+                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
                     isDarkMode
                       ? 'hover:bg-green-400 text-green-400'
                       : 'hover:bg-green-100 text-green-600'
-                  ]"
+                  ]">
-                >
                   <EyeIcon class="w-5 h-5" />
                 </button>
-                <button
+                <button @click="deleteRecord(record.id)"
-                  @click="deleteRecord(record.id)"
+                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
                     isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
-                  ]"
+                  ]">
-                >
                   <TrashIcon class="w-5 h-5" />
                 </button>
               </div>
@@ -290,53 +204,34 @@
 
     <!-- 记录详情弹窗 -->
     <transition name="fade">
-      <div
+      <div v-if="selectedRecord" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        v-if="selectedRecord"
-        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      >
         <div
           class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70"
-          :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
+          :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
-        >
+          <h3 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-          <h3
-            class="text-2xl font-bold mb-6"
-            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-          >
             文件详情
           </h3>
           <div class="space-y-4">
             <div class="flex items-center">
-              <FileIcon
+              <FileIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-                class="w-6 h-6 mr-3"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
               <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
                 <span class="font-medium">文件名：</span>{{ selectedRecord.filename }}
               </p>
             </div>
             <div class="flex items-center">
-              <CalendarIcon
+              <CalendarIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-                class="w-6 h-6 mr-3"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
               <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
                 <span class="font-medium">发送日期：</span>{{ selectedRecord.date }}
               </p>
             </div>
             <div class="flex items-center">
-              <HardDriveIcon
+              <HardDriveIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-                class="w-6 h-6 mr-3"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
               <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
                 <span class="font-medium">文件大小：</span>{{ selectedRecord.size }}
               </p>
             </div>
             <div class="flex items-center">
-              <ClockIcon
+              <ClockIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-                class="w-6 h-6 mr-3"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
               <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
                 <span class="font-medium">过期时间：</span>{{ selectedRecord.expiration }}
               </p>
@@ -346,16 +241,12 @@
           <!-- 取件码和二维码部分 -->
           <div class="mt-6 flex justify-between items-center">
             <div class="flex flex-col items-center w-1/2 pr-2">
-              <h4
+              <h4 class="text-lg font-semibold mb-3" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-                class="text-lg font-semibold mb-3"
-                :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-              >
                 取件码
               </h4>
               <div
                 class="bg-gray-100 p-3 rounded-lg shadow-md cursor-pointer hover:bg-gray-200 transition-colors duration-300 w-full text-center"
-                @click="copyRetrieveCode(selectedRecord.retrieveCode)"
+                @click="copyRetrieveCode(selectedRecord.retrieveCode)">
-              >
                 <p class="text-2xl font-bold text-indigo-600">{{ selectedRecord.retrieveCode }}</p>
               </div>
               <p class="mt-2 text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
@@ -363,10 +254,7 @@
               </p>
             </div>
             <div class="flex flex-col items-center w-1/2 pl-2">
-              <h4
+              <h4 class="text-lg font-semibold mb-3" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-                class="text-lg font-semibold mb-3"
-                :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-              >
                 二维码
               </h4>
               <div class="bg-white p-2 rounded-lg shadow-md">
@@ -378,10 +266,8 @@
             </div>
           </div>
 
-          <button
+          <button @click="selectedRecord = null"
-            @click="selectedRecord = null"
+            class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105">
-            class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105"
-          >
             关闭
           </button>
         </div>
@@ -437,7 +323,6 @@ const sendRecords = computed(() => fileDataStore.shareData)
 
 // 新增状态
 const fileHash = ref('')
-const uploadedChunks = ref<Set<number>>(new Set())
 
 const triggerFileUpload = () => {
   fileInput.value?.click()
@@ -461,7 +346,7 @@ const handleFileDrop = async (event: DragEvent) => {
 
 const calculateFileHash = async (file: File): Promise<string> => {
   return new Promise((resolve) => {
-    const chunkSize = 2097152 // 2MB
+    const chunkSize = 2097152
     const spark = new SparkMD5.ArrayBuffer()
     const fileReader = new FileReader()
 
@@ -489,67 +374,6 @@ const calculateFileHash = async (file: File): Promise<string> => {
   })
 }
 
-const startChunkUpload = async () => {
-  if (!selectedFile.value) return
-
-  const chunkSize = 1024 * 1024 // 1MB 每片
-  const totalChunks = Math.ceil(selectedFile.value.size / chunkSize)
-
-  // 检查已上传的切片
-  const { uploadedList } = await checkUploadedChunks(fileHash.value)
-  uploadedChunks.value = new Set(uploadedList)
-
-  for (let i = 0; i < totalChunks; i++) {
-    if (uploadedChunks.value.has(i)) {
-      console.log(`切片 ${i} 已上传,跳过`)
-      continue
-    }
-
-    const start = i * chunkSize
-    const end = Math.min(start + chunkSize, selectedFile.value.size)
-    const chunk = selectedFile.value.slice(start, end)
-
-    // 上传每个切片
-    await uploadChunk(chunk, i, totalChunks)
-
-    // 更新进度
-    uploadProgress.value = ((uploadedChunks.value.size + 1) / totalChunks) * 100
-  }
-
-  // 所有切片上传完成,通知服务器合并文件
-  await mergeChunks(fileHash.value, totalChunks)
-
-  alertStore.showAlert('文件上传完成', 'success')
-}
-
-const checkUploadedChunks = async (fileHash: string) => {
-  console.log(fileHash)
-
-  // 这里应该调用后端API来检查已上传的切片
-  // 现在用模拟数据代替
-  return new Promise<{ uploadedList: number[] }>((resolve) => {
-    setTimeout(() => {
-      resolve({ uploadedList: [] })
-    }, 500)
-  })
-}
-
-const uploadChunk = async (chunk: Blob, index: number, total: number) => {
-  // 这里应该是实际的上传逻辑,现在用setTimeout模拟
-  return new Promise<void>((resolve) => {
-    setTimeout(() => {
-      console.log(`上传切片 ${index + 1}/${total}`)
-      uploadedChunks.value.add(index)
-      resolve()
-    }, 500)
-  })
-}
-
-const mergeChunks = async (fileHash: string, totalChunks: number) => {
-  // 这里应该调用后端API来合并文件切片
-  console.log(`请求合并文件切片, fileHash: ${fileHash}, totalChunks: ${totalChunks}`)
-}
-
 const getPlaceholder = (value: string = expirationMethod.value) => {
   switch (value) {
     case 'day':
@@ -726,7 +550,8 @@ onMounted(() => {
 
 @media (min-width: 640px) {
   .sm\:w-120 {
-    width: 30rem; /* 480px */
+    width: 30rem;
+    /* 480px */
   }
 }
 
@@ -740,6 +565,7 @@ onMounted(() => {
 .drawer-leave-active {
   transition: transform 0.3s ease;
 }
+
 .drawer-enter-from,
 .drawer-leave-to {
   transform: translateX(100%);
@@ -749,6 +575,7 @@ onMounted(() => {
 .list-leave-active {
   transition: all 0.5s ease;
 }
+
 .list-enter-from,
 .list-leave-to {
   opacity: 0;

src/views/manage/DashboardView.vue

@@ -6,27 +6,19 @@
 
     <!-- 统计卡片区域 -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-      <div
+      <div class="p-6 rounded-lg shadow-md transition-colors duration-300"
-        class="p-6 rounded-lg shadow-md transition-colors duration-300"
+        :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-        :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
-      >
         <div class="flex items-center justify-between">
           <div>
             <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
               总文件数
             </p>
-            <h3
+            <h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-              class="text-2xl font-bold mt-1"
-              :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-            >
               {{ dashboardData.totalFiles }}
             </h3>
           </div>
           <div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-indigo-900' : 'bg-indigo-100']">
-            <FileIcon
+            <FileIcon class="w-6 h-6" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-              class="w-6 h-6"
-              :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-            />
           </div>
         </div>
         <p class="text-sm mt-2" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']">
@@ -37,27 +29,19 @@
         </p>
       </div>
 
-      <div
+      <div class="p-6 rounded-lg shadow-md transition-colors duration-300"
-        class="p-6 rounded-lg shadow-md transition-colors duration-300"
+        :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-        :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
-      >
         <div class="flex items-center justify-between">
           <div>
             <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
               存储空间
             </p>
-            <h3
+            <h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-              class="text-2xl font-bold mt-1"
-              :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-            >
               {{ dashboardData.storageUsed }}
             </h3>
           </div>
           <div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-purple-900' : 'bg-purple-100']">
-            <HardDriveIcon
+            <HardDriveIcon class="w-6 h-6" :class="[isDarkMode ? 'text-purple-400' : 'text-purple-600']" />
-              class="w-6 h-6"
-              :class="[isDarkMode ? 'text-purple-400' : 'text-purple-600']"
-            />
           </div>
         </div>
 
@@ -69,27 +53,19 @@
         </p>
       </div>
 
-      <div
+      <div class="p-6 rounded-lg shadow-md transition-colors duration-300"
-        class="p-6 rounded-lg shadow-md transition-colors duration-300"
+        :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-        :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
-      >
         <div class="flex items-center justify-between">
           <div>
             <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
               活跃用户
             </p>
-            <h3
+            <h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-              class="text-2xl font-bold mt-1"
-              :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-            >
               25
             </h3>
           </div>
           <div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-green-900' : 'bg-green-100']">
-            <UsersIcon
+            <UsersIcon class="w-6 h-6" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']" />
-              class="w-6 h-6"
-              :class="[isDarkMode ? 'text-green-400' : 'text-green-600']"
-            />
           </div>
         </div>
         <p class="text-sm mt-2" :class="[isDarkMode ? 'text-red-400' : 'text-red-600']">
@@ -98,27 +74,19 @@
         </p>
       </div>
 
-      <div
+      <div class="p-6 rounded-lg shadow-md transition-colors duration-300"
-        class="p-6 rounded-lg shadow-md transition-colors duration-300"
+        :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-        :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
-      >
         <div class="flex items-center justify-between">
           <div>
             <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
               系统状态
             </p>
-            <h3
+            <h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-              class="text-2xl font-bold mt-1"
-              :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-            >
               正常
             </h3>
           </div>
           <div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-blue-900' : 'bg-blue-100']">
-            <ActivityIcon
+            <ActivityIcon class="w-6 h-6" :class="[isDarkMode ? 'text-blue-400' : 'text-blue-600']" />
-              class="w-6 h-6"
-              :class="[isDarkMode ? 'text-blue-400' : 'text-blue-600']"
-            />
           </div>
         </div>
         <p class="text-sm mt-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
@@ -128,10 +96,8 @@
     </div>
 
     <!-- 最近活动 -->
-    <div
+    <div class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
-      class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
+      :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-      :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
-    >
       <div class="px-6 py-4 border-b" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
         <h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
           最近活动
@@ -139,17 +105,10 @@
       </div>
       <div class="p-6">
         <div class="space-y-4">
-          <div
+          <div v-for="(activity, index) in recentActivities" :key="index" class="flex items-center space-x-4">
-            v-for="(activity, index) in recentActivities"
-            :key="index"
-            class="flex items-center space-x-4"
-          >
             <div class="flex-shrink-0">
-              <component
+              <component :is="activity.icon" class="w-5 h-5"
-                :is="activity.icon"
+                :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
-                class="w-5 h-5"
-                :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
-              />
             </div>
             <div class="flex-1">
               <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">

src/views/manage/FileManageView.vue

@@ -9,30 +9,22 @@
       <!-- 搜索和过滤 -->
       <div class="flex flex-1 gap-4">
         <div class="relative flex-1">
-          <input
+          <input type="text" v-model="params.keyword" :class="[
-            type="text"
-            v-model="params.keyword"
-            :class="[
             isDarkMode
               ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
               : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400'
           ]"
             class="w-full pl-10 pr-4 py-2 rounded-lg border focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
-            placeholder="搜索文件..."
+            placeholder="搜索文件..." />
-          />
+          <SearchIcon class="absolute left-3 top-2.5 w-5 h-5"
-          <SearchIcon
+            :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" />
-            class="absolute left-3 top-2.5 w-5 h-5"
-            :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
-          />
         </div>
       </div>
 
       <!-- 搜索按钮 -->
       <div class="flex gap-4">
-        <button
+        <button @click="handleSearch"
-          @click="handleSearch"
+          class="flex items-center px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors duration-200">
-          class="flex items-center px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors duration-200"
-        >
           <SearchIcon class="w-5 h-5 mr-2" />
           搜索
         </button>
@@ -40,39 +32,29 @@
     </div>
 
     <!-- File List -->
-    <div
+    <div class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
-      class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
+      :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-      :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
-    >
       <div class="px-6 py-4 border-b" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
         <h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
           所有文件
         </h3>
       </div>
       <div class="overflow-x-auto">
-        <table
+        <table class="min-w-full divide-y" :class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']">
-          class="min-w-full divide-y"
-          :class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']"
-        >
           <thead :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-100']">
             <tr>
-              <th
+              <th v-for="header in fileTableHeaders" :key="header"
-                v-for="header in fileTableHeaders"
-                :key="header"
                 class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider"
-                :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
+                :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
-              >
                 {{ header }}
               </th>
             </tr>
           </thead>
-          <tbody
+          <tbody :class="[
-            :class="[
             isDarkMode
               ? 'bg-gray-800 divide-y divide-gray-700'
               : 'bg-white divide-y divide-gray-200'
-            ]"
+          ]">
-          >
             <tr v-for="file in tableData" :key="file.id">
               <td class="px-6 py-4 whitespace-nowrap">
                 <div class="flex items-center">
@@ -83,10 +65,7 @@
               </td>
               <td class="px-6 py-4 whitespace-nowrap">
                 <div class="flex items-center">
-                  <FileIcon
+                  <FileIcon class="w-5 h-5 mr-2" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']" />
-                    class="w-5 h-5 mr-2"
-                    :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']"
-                  />
                   <span class="font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
                     {{ file.prefix }}
                   </span>
@@ -120,15 +99,11 @@
                 >
                   下载
                 </button> -->
-                <button
+                <button @click="deleteFile(file.id)" class="transition-colors duration-200" :class="[
-                  @click="deleteFile(file.id)"
-                  class="transition-colors duration-200"
-                  :class="[
                   isDarkMode
                     ? 'text-red-400 hover:text-red-300'
                     : 'text-red-600 hover:text-red-900'
-                  ]"
+                ]">
-                >
                   删除
                 </button>
               </td>
@@ -139,15 +114,10 @@
     </div>
 
     <!-- 在文件列表表格下方添加分页组件 -->
-    <div
+    <div class="mt-4 flex items-center justify-between px-6 py-3 border-t"
-      class="mt-4 flex items-center justify-between px-6 py-3 border-t"
+      :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
-      :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
-    >
       <!-- 分页信息 -->
-      <div
+      <div class="flex items-center text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
-        class="flex items-center text-sm"
-        :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
-      >
         显示第 {{ (params.page - 1) * params.size + 1 }} 到
         {{ Math.min(params.page * params.size, params.total) }} 条，共 {{ params.total }} 条
       </div>
@@ -155,11 +125,8 @@
       <!-- 分页控制器 -->
       <div class="flex items-center space-x-2">
         <!-- 上一页 -->
-        <button
+        <button @click="handlePageChange(params.page - 1)" :disabled="params.page === 1"
-          @click="handlePageChange(params.page - 1)"
+          class="px-3 py-1 rounded-md transition-colors duration-200" :class="[
-          :disabled="params.page === 1"
-          class="px-3 py-1 rounded-md transition-colors duration-200"
-          :class="[
             isDarkMode
               ? params.page === 1
                 ? 'bg-gray-700 text-gray-500 cursor-not-allowed'
@@ -167,26 +134,21 @@
               : params.page === 1
                 ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                 : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-          ]"
+          ]">
-        >
           上一页
         </button>
 
         <!-- 页码 -->
         <div class="flex items-center space-x-1">
           <template v-for="pageNum in displayedPages" :key="pageNum">
-            <button
+            <button v-if="pageNum !== '...'" @click="handlePageChange(pageNum)"
-              v-if="pageNum !== '...'"
+              class="px-3 py-1 rounded-md transition-colors duration-200" :class="[
-              @click="handlePageChange(pageNum)"
-              class="px-3 py-1 rounded-md transition-colors duration-200"
-              :class="[
                 params.page === pageNum
                   ? 'bg-indigo-600 text-white'
                   : isDarkMode
                     ? 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                     : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-              ]"
+              ]">
-            >
               {{ pageNum }}
             </button>
             <span v-else class="px-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
@@ -196,11 +158,8 @@
         </div>
 
         <!-- 下一页 -->
-        <button
+        <button @click="handlePageChange(params.page + 1)" :disabled="params.page >= totalPages"
-          @click="handlePageChange(params.page + 1)"
+          class="px-3 py-1 rounded-md transition-colors duration-200" :class="[
-          :disabled="params.page >= totalPages"
-          class="px-3 py-1 rounded-md transition-colors duration-200"
-          :class="[
             isDarkMode
               ? params.page >= totalPages
                 ? 'bg-gray-700 text-gray-500 cursor-not-allowed'
@@ -208,8 +167,7 @@
               : params.page >= totalPages
                 ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                 : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-          ]"
+          ]">
-        >
           下一页
         </button>
       </div>

src/views/manage/LoginView.vue

@@ -1,41 +1,33 @@
 <template>
-  <div
+  <div :class="[
-    :class="[
     'min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 transition-colors duration-200 relative overflow-hidden',
     isDarkMode ? 'bg-gray-900' : 'bg-gray-50'
-    ]"
+  ]">
-  >
     <div class="absolute inset-0 z-0">
       <div class="cyber-grid"></div>
       <div class="floating-particles"></div>
     </div>
-    <div
+    <div class="max-w-md w-full space-y-8 backdrop-blur-lg bg-opacity-20 p-8 rounded-xl border border-opacity-20"
-      class="max-w-md w-full space-y-8 backdrop-blur-lg bg-opacity-20 p-8 rounded-xl border border-opacity-20"
+      :class="[isDarkMode ? 'bg-gray-800 border-gray-600' : 'bg-white/70 border-gray-200']">
-      :class="[isDarkMode ? 'bg-gray-800 border-gray-600' : 'bg-white/70 border-gray-200']"
-    >
       <div>
         <div class="mx-auto h-16 w-16 relative">
           <div
-            class="absolute inset-0 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full animate-spin-slow"
+            class="absolute inset-0 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full animate-spin-slow">
-          ></div>
+          </div>
           <div
-            class="absolute -inset-2 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full opacity-50 blur-md animate-pulse"
+            class="absolute -inset-2 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full opacity-50 blur-md animate-pulse">
-          ></div>
+          </div>
-          <div
+          <div :class="[
-            :class="[
             'absolute inset-1 rounded-full flex items-center justify-center',
             isDarkMode ? 'bg-gray-800' : 'bg-white'
-            ]"
+          ]">
-          >
             <BoxIcon :class="['h-8 w-8', isDarkMode ? 'text-cyan-400' : 'text-cyan-600']" />
           </div>
         </div>
-        <h2
+        <h2 :class="[
-          :class="[
           'mt-6 text-center text-3xl font-extrabold',
           isDarkMode ? 'text-white' : 'text-gray-900'
-          ]"
+        ]">
-        >
           登录
         </h2>
       </div>
@@ -44,35 +36,23 @@
         <div class="rounded-md shadow-sm -space-y-px">
           <div>
             <label for="password" class="sr-only">密码</label>
-            <input
+            <input id="password" name="password" type="password" autocomplete="current-password" required
-              id="password"
+              v-model="password" :class="[
-              name="password"
-              type="password"
-              autocomplete="current-password"
-              required
-              v-model="password"
-              :class="[
                 'appearance-none rounded-t-md relative block w-full px-4 py-3 border transition-all duration-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm backdrop-blur-sm',
                 isDarkMode
                   ? 'bg-gray-800/50 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'bg-white/50 border-gray-300 text-gray-900 hover:border-gray-400'
-              ]"
+              ]" placeholder="密码" />
-              placeholder="密码"
-            />
           </div>
         </div>
         <div>
-          <button
+          <button type="submit" :class="[
-            type="submit"
-            :class="[
             'group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white transition-all duration-300 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 shadow-lg hover:shadow-cyan-500/50',
             isDarkMode
               ? 'bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600'
               : 'bg-gradient-to-r from-cyan-600 to-purple-600 hover:from-cyan-700 hover:to-purple-700',
             isLoading ? 'opacity-75 cursor-not-allowed' : ''
-            ]"
+          ]" :disabled="isLoading">
-            :disabled="isLoading"
-          >
             <span class="absolute left-0 inset-y-0 flex items-center pl-3"> </span>
             {{ isLoading ? '登录中...' : '登录' }}
           </button>
@@ -136,6 +116,7 @@ const handleSubmit = async () => {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -200,9 +181,11 @@ button:active:not(:disabled) {
   0% {
     transform: translate(0, 0) scale(1);
   }
+
   50% {
     transform: translate(50px, 50px) scale(1.5);
   }
+
   100% {
     transform: translate(0, 0) scale(1);
   }

src/views/manage/SystemSettingsView.vue

@@ -183,10 +183,7 @@ refreshData()
       系统设置
     </h2>
 
-    <div
+    <div class="space-y-6 rounded-lg shadow-md p-6" :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-      class="space-y-6 rounded-lg shadow-md p-6"
-      :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
-    >
       <!-- 基本设置 -->
       <section class="space-y-4">
         <h3 class="text-lg font-medium mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
@@ -196,224 +193,157 @@ refreshData()
         <!-- 网基本信息 -->
         <div class="grid grid-cols-1 gap-6">
           <div class="space-y-2">
-            <label
+            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-              class="block text-sm font-medium"
-              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-            >
               网站名称
             </label>
-            <input
+            <input type="text" v-model="config.name"
-              type="text"
-              v-model="config.name"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-              ]"
+              ]" />
-            />
           </div>
 
           <div class="space-y-2">
-            <label
+            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-              class="block text-sm font-medium"
-              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-            >
               网站描述
             </label>
-            <input
+            <input type="text" v-model="config.description"
-              type="text"
-              v-model="config.description"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-              ]"
+              ]" />
-            />
           </div>
 
           <div class="space-y-2">
-            <label
+            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-              class="block text-sm font-medium"
-              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-            >
               管理员密码
             </label>
             <div class="relative">
-              <input
+              <input type="password" v-model="config.admin_token" placeholder="留空则不修改密码"
-                type="password"
-                v-model="config.admin_token"
-                placeholder="留空则不修改密码"
                 class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                 :class="[
                   isDarkMode
                     ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                     : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                ]"
+                ]" />
-              />
+              <div class="absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-gray-400"
-              <div
+                :class="[isDarkMode ? 'text-gray-500' : 'text-gray-400']">
-                class="absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-gray-400"
-                :class="[isDarkMode ? 'text-gray-500' : 'text-gray-400']"
-              >
                 <span class="text-xs">留空则不修改</span>
               </div>
             </div>
           </div>
 
           <div class="space-y-2">
-            <label
+            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-              class="block text-sm font-medium"
-              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-            >
               关键词
             </label>
-            <input
+            <input type="text" v-model="config.keywords"
-              type="text"
-              v-model="config.keywords"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-              ]"
+              ]" />
-            />
           </div>
 
           <!-- 主题选择 -->
           <div class="space-y-2">
-            <label
+            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-              class="block text-sm font-medium"
-              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-            >
               主题选择
             </label>
-            <select
+            <select v-model="config.themesSelect"
-              v-model="config.themesSelect"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border appearance-none bg-no-repeat bg-right focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none cursor-pointer"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400'
-              ]"
+              ]" style="
-              style="
                 background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M7%208l3%203%203-3%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
-              "
+              ">
-            >
               <option v-for="item in config.themesChoices" :value="item.key" :key="item.key">
                 {{ item.name }} (by {{ item.author }} V{{ item.version }})
               </option>
             </select>
           </div>
           <div class="space-y-2">
-            <label
+            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-              class="block text-sm font-medium"
-              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-            >
               Robots.txt
             </label>
-            <textarea
+            <textarea v-model="config.robotsText" rows="3"
-              v-model="config.robotsText"
-              rows="3"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border resize-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-              ]"
+              ]"></textarea>
-            ></textarea>
           </div>
         </div>
 
         <!-- 通知设置 -->
         <div class="grid grid-cols-1 gap-6 mt-8">
           <div class="space-y-2">
-            <label
+            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-              class="block text-sm font-medium"
-              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-            >
               通知标题
             </label>
-            <input
+            <input type="text" v-model="config.notify_title"
-              type="text"
-              v-model="config.notify_title"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-              ]"
+              ]" />
-            />
           </div>
 
           <div class="space-y-2">
-            <label
+            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-              class="block text-sm font-medium"
-              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-            >
               通知内容
             </label>
-            <textarea
+            <textarea v-model="config.notify_content" rows="3"
-              v-model="config.notify_content"
-              rows="3"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border resize-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-              ]"
+              ]"></textarea>
-            ></textarea>
           </div>
         </div>
 
         <!-- 存储设置 -->
         <div class="space-y-4">
-          <h3
+          <h3 class="text-lg font-medium mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-            class="text-lg font-medium mb-4"
-            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-          >
             存储设置
           </h3>
           <!-- 通知设置 -->
           <div class="space-y-2">
-            <label
+            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-              class="block text-sm font-medium"
-              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-            >
               存储路径
             </label>
-            <input
+            <input type="text" placeholder="留空则使用默认路径，可不填写" v-model="config.storage_path"
-              type="text"
-              placeholder="留空则使用默认路径，可不填写"
-              v-model="config.storage_path"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-              ]"
+              ]" />
-            />
           </div>
           <div class="space-y-4">
             <div class="space-y-2">
-              <label
+              <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                class="block text-sm font-medium"
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-              >
                 存储方式
               </label>
-              <select
+              <select v-model="config.file_storage"
-                v-model="config.file_storage"
                 class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border appearance-none bg-no-repeat bg-right focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none cursor-pointer"
                 :class="[
                   isDarkMode
                     ? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
                     : 'border-gray-300 hover:border-gray-400'
-                ]"
+                ]" style="
-                style="
                   background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M7%208l3%203%203-3%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
-                "
+                ">
-              >
                 <option value="local">本地存储</option>
                 <option value="s3">S3 存储</option>
                 <option value="webdav">Webdav 存储</option>
@@ -423,63 +353,42 @@ refreshData()
             <div v-if="config.file_storage === 'webdav'" class="space-y-4">
               <!-- 通知设置 -->
               <div class="space-y-2">
-                <label
+                <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                  class="block text-sm font-medium"
-                  :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-                >
                   Webdav URL
                 </label>
-                <input
+                <input type="text" placeholder="请输入 Webdav URL" v-model="config.webdav_url"
-                  type="text"
-                  placeholder="请输入 Webdav URL"
-                  v-model="config.webdav_url"
                   class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                   :class="[
                     isDarkMode
                       ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                       : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                  ]"
+                  ]" />
-                />
               </div>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div class="space-y-2">
-                  <label
+                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                    class="block text-sm font-medium"
-                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-                  >
                     Webdav Username
                   </label>
-                  <input
+                  <input type="text" placeholder="请输入 Webdav Username" v-model="config.webdav_username"
-                    type="text"
-                    placeholder="请输入 Webdav Username"
-                    v-model="config.webdav_username"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]"
+                    ]" />
-                  />
                 </div>
 
                 <div class="space-y-2">
-                  <label
+                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                    class="block text-sm font-medium"
-                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-                  >
                     Webdav Password
                   </label>
-                  <input
+                  <input type="password" placeholder="请输入 Webdav Password" v-model="config.webdav_password"
-                    type="password"
-                    placeholder="请输入 Webdav Password"
-                    v-model="config.webdav_password"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]"
+                    ]" />
-                  />
                 </div>
               </div>
             </div>
@@ -487,169 +396,117 @@ refreshData()
             <div v-if="config.file_storage === 's3'" class="space-y-4">
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div class="space-y-2">
-                  <label
+                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                    class="block text-sm font-medium"
-                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-                  >
                     S3 AccessKeyId
                   </label>
-                  <input
+                  <input type="text" v-model="config.s3_access_key_id"
-                    type="text"
-                    v-model="config.s3_access_key_id"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]"
+                    ]" />
-                  />
                 </div>
 
                 <div class="space-y-2">
-                  <label
+                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                    class="block text-sm font-medium"
-                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-                  >
                     S3 SecretAccessKey
                   </label>
-                  <input
+                  <input type="password" v-model="config.s3_secret_access_key"
-                    type="password"
-                    v-model="config.s3_secret_access_key"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]"
+                    ]" />
-                  />
                 </div>
 
                 <div class="space-y-2">
-                  <label
+                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                    class="block text-sm font-medium"
-                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-                  >
                     S3 BucketName
                   </label>
-                  <input
+                  <input type="text" v-model="config.s3_bucket_name"
-                    type="text"
-                    v-model="config.s3_bucket_name"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]"
+                    ]" />
-                  />
                 </div>
 
                 <div class="space-y-2">
-                  <label
+                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                    class="block text-sm font-medium"
-                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-                  >
                     S3 EndpointUrl
                   </label>
-                  <input
+                  <input type="text" v-model="config.s3_endpoint_url"
-                    type="text"
-                    v-model="config.s3_endpoint_url"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]"
+                    ]" />
-                  />
                 </div>
 
                 <div class="space-y-2">
-                  <label
+                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                    class="block text-sm font-medium"
-                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-                  >
                     S3 Region Name
                   </label>
-                  <input
+                  <input type="text" v-model="config.s3_region_name" placeholder="auto"
-                    type="text"
-                    v-model="config.s3_region_name"
-                    placeholder="auto"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]"
+                    ]" />
-                  />
                 </div>
 
                 <div class="space-y-2">
-                  <label
+                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                    class="block text-sm font-medium"
-                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-                  >
                     S3 Signature Version
                   </label>
-                  <select
+                  <select v-model="config.s3_signature_version"
-                    v-model="config.s3_signature_version"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400'
-                    ]"
+                    ]">
-                  >
                     <option value="s3v2">S3v2</option>
                     <option value="s3v4">S3v4</option>
                   </select>
                 </div>
 
                 <div class="space-y-2">
-                  <label
+                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                    class="block text-sm font-medium"
-                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-                  >
                     S3 Hostname
                   </label>
-                  <input
+                  <input type="text" v-model="config.s3_hostname"
-                    type="text"
-                    v-model="config.s3_hostname"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]"
+                    ]" />
-                  />
                 </div>
 
                 <div class="space-y-2">
-                  <label
+                  <label class="block text-sm font-medium mb-2"
-                    class="block text-sm font-medium mb-2"
+                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-                  >
                     启用代理
                   </label>
                   <div class="flex items-center">
-                    <button
+                    <button type="button" @click="config.s3_proxy = config.s3_proxy === 1 ? 0 : 1"
-                      type="button"
-                      @click="config.s3_proxy = config.s3_proxy === 1 ? 0 : 1"
                       class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                      :class="[config.s3_proxy === 1 ? 'bg-indigo-600' : 'bg-gray-200']"
+                      :class="[config.s3_proxy === 1 ? 'bg-indigo-600' : 'bg-gray-200']" role="switch"
-                      role="switch"
+                      :aria-checked="config.s3_proxy === 1">
-                      :aria-checked="config.s3_proxy === 1"
-                    >
                       <span
                         class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                         :class="[
                           config.s3_proxy === 1 ? 'translate-x-5' : 'translate-x-0',
                           isDarkMode && config.s3_proxy !== 1 ? 'bg-gray-100' : 'bg-white'
-                        ]"
+                        ]" />
-                      />
                     </button>
-                    <span
+                    <span class="ml-3 text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                      class="ml-3 text-sm"
-                      :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-                    >
                       {{ config.s3_proxy === 1 ? '已开启' : '已关闭' }}
                     </span>
                   </div>
@@ -661,85 +518,62 @@ refreshData()
 
         <!-- 上传限制 -->
         <div class="mt-8">
-          <h3
+          <h3 class="text-lg font-medium mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-            class="text-lg font-medium mb-4"
-            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-          >
             上传限制
           </h3>
 
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div class="space-y-2">
-              <label
+              <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                class="block text-sm font-medium"
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-              >
                 每分钟上传限制
               </label>
               <div class="flex items-center space-x-2">
-                <input
+                <input type="number" v-model="config.uploadMinute"
-                  type="number"
-                  v-model="config.uploadMinute"
                   class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                   :class="[
                     isDarkMode
                       ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                       : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                  ]"
+                  ]" />
-                />
                 <span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">分钟</span>
               </div>
             </div>
 
             <div class="space-y-2">
-              <label
+              <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                class="block text-sm font-medium"
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-              >
                 上传数量限制
               </label>
               <div class="flex items-center space-x-2">
-                <input
+                <input type="number" v-model="config.uploadCount"
-                  type="number"
-                  v-model="config.uploadCount"
                   class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                   :class="[
                     isDarkMode
                       ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                       : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                  ]"
+                  ]" />
-                />
                 <span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">个文件</span>
               </div>
             </div>
 
             <div class="space-y-2">
-              <label
+              <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                class="block text-sm font-medium"
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-              >
                 文件大小限制
               </label>
               <div class="flex items-center space-x-2">
-                <input
+                <input type="number" v-model="fileSize"
-                  type="number"
-                  v-model="fileSize"
                   class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                   :class="[
                     isDarkMode
                       ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                       : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                  ]"
+                  ]" />
-                />
+                <select v-model="sizeUnit"
-                <select
-                  v-model="sizeUnit"
                   class="rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                   :class="[
                     isDarkMode
                       ? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
                       : 'border-gray-300 hover:border-gray-400'
-                  ]"
+                  ]">
-                >
                   <option value="KB">KB</option>
                   <option value="MB">MB</option>
                   <option value="GB">GB</option>
@@ -748,27 +582,14 @@ refreshData()
             </div>
 
             <div class="space-y-2">
-              <label
+              <label class="block text-sm font-medium mb-2" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                class="block text-sm font-medium mb-2"
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-              >
                 过期方式
               </label>
               <div class="flex flex-wrap gap-3">
-                <label
+                <label v-for="style in ['day', 'hour', 'minute', 'forever', 'count']" :key="style"
-                  v-for="style in ['day', 'hour', 'minute', 'forever', 'count']"
+                  class="relative inline-flex items-center group cursor-pointer">
-                  :key="style"
+                  <input type="checkbox" :value="style" v-model="config.expireStyle" class="peer sr-only" />
-                  class="relative inline-flex items-center group cursor-pointer"
+                  <div class="px-4 py-2 rounded-full border-2 transition-all duration-200 select-none" :class="[
-                >
-                  <input
-                    type="checkbox"
-                    :value="style"
-                    v-model="config.expireStyle"
-                    class="peer sr-only"
-                  />
-                  <div
-                    class="px-4 py-2 rounded-full border-2 transition-all duration-200 select-none"
-                    :class="[
                     config.expireStyle.includes(style)
                       ? isDarkMode
                         ? 'bg-indigo-600 border-indigo-600 text-white'
@@ -776,8 +597,7 @@ refreshData()
                       : isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-gray-300 hover:border-indigo-500'
                         : 'bg-white border-gray-300 text-gray-700 hover:border-indigo-500'
-                    ]"
+                  ]">
-                  >
                     {{
                       {
                         day: '按天',
@@ -793,32 +613,24 @@ refreshData()
             </div>
 
             <div class="space-y-2">
-              <label
+              <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                class="block text-sm font-medium"
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-              >
                 最长保存时间
               </label>
               <div class="flex items-center space-x-2">
-                <input
+                <input type="number" v-model="saveTime"
-                  type="number"
-                  v-model="saveTime"
                   class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                   :class="[
                     isDarkMode
                       ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                       : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                  ]"
+                  ]" />
-                />
+                <select v-model="saveTimeUnit"
-                <select
-                  v-model="saveTimeUnit"
                   class="rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                   :class="[
                     isDarkMode
                       ? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
                       : 'border-gray-300 hover:border-gray-400'
-                  ]"
+                  ]">
-                >
                   <option value="秒">秒</option>
                   <option value="分">分</option>
                   <option value="时">时</option>
@@ -828,33 +640,22 @@ refreshData()
             </div>
 
             <div class="space-y-2">
-              <label
+              <label class="block text-sm font-medium mb-2" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                class="block text-sm font-medium mb-2"
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-              >
                 游客上传
               </label>
               <div class="flex items-center">
-                <button
+                <button type="button" @click="config.openUpload = config.openUpload === 1 ? 0 : 1"
-                  type="button"
-                  @click="config.openUpload = config.openUpload === 1 ? 0 : 1"
                   class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                  :class="[config.openUpload === 1 ? 'bg-indigo-600' : 'bg-gray-200']"
+                  :class="[config.openUpload === 1 ? 'bg-indigo-600' : 'bg-gray-200']" role="switch"
-                  role="switch"
+                  :aria-checked="config.openUpload === 1">
-                  :aria-checked="config.openUpload === 1"
-                >
                   <span
                     class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                     :class="[
                       config.openUpload === 1 ? 'translate-x-5' : 'translate-x-0',
                       isDarkMode && config.openUpload !== 1 ? 'bg-gray-100' : 'bg-white'
-                    ]"
+                    ]" />
-                  />
                 </button>
-                <span
+                <span class="ml-3 text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                  class="ml-3 text-sm"
-                  :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-                >
                   {{ config.openUpload === 1 ? '已开启' : '已关闭' }}
                 </span>
               </div>
@@ -864,54 +665,39 @@ refreshData()
 
         <!-- 错误限制 -->
         <div class="mt-8">
-          <h3
+          <h3 class="text-lg font-medium mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-            class="text-lg font-medium mb-4"
-            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-          >
             错误限制
           </h3>
 
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div class="space-y-2">
-              <label
+              <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                class="block text-sm font-medium"
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-              >
                 每分钟错误限制
               </label>
               <div class="flex items-center space-x-2">
-                <input
+                <input type="number" v-model="config.errorMinute"
-                  type="number"
-                  v-model="config.errorMinute"
                   class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                   :class="[
                     isDarkMode
                       ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                       : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                  ]"
+                  ]" />
-                />
                 <span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">分钟</span>
               </div>
             </div>
 
             <div class="space-y-2">
-              <label
+              <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
-                class="block text-sm font-medium"
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-              >
                 错误次数限制
               </label>
               <div class="flex items-center space-x-2">
-                <input
+                <input type="number" v-model="config.errorCount"
-                  type="number"
-                  v-model="config.errorCount"
                   class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                   :class="[
                     isDarkMode
                       ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                       : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                  ]"
+                  ]" />
-                />
                 <span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">次</span>
               </div>
             </div>
@@ -920,10 +706,8 @@ refreshData()
 
         <!-- 保存按钮 -->
         <div class="flex justify-end mt-8">
-          <button
+          <button @click="submitSave"
-            @click="submitSave"
+            class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
-            class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
-          >
             保存设置
           </button>
         </div>