From a9542f0410c8bd428fed23692a0ee5cbd528d611 Mon Sep 17 00:00:00 2001
From: Lan <hhxk666@gmail.com>
Date: Tue, 4 Mar 2025 00:08:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=91=98=E7=BC=96=E8=BE=91=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/RetrievewFileView.vue     | 268 ++++++-------------
 src/views/manage/FileManageView.vue | 381 +++++++++++++++++++++++-----
 2 files changed, 393 insertions(+), 256 deletions(-)

diff --git a/src/views/RetrievewFileView.vue b/src/views/RetrievewFileView.vue
index a2df606..7f16218 100644
--- a/src/views/RetrievewFileView.vue
+++ b/src/views/RetrievewFileView.vue
@@ -1,119 +1,74 @@
 <template>
-  <div
-    class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300"
-  >
+  <div 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
-        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="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
-              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-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
-            @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'
-            ]"
-          >
+          <h2 @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 }}
           </h2>
           <form @submit.prevent="handleSubmit">
             <div class="mb-6 relative">
-              <label
-                for="code"
-                class="block text-sm font-medium mb-2"
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-                >取件码</label
-              >
+              <label for="code" class="block text-sm font-medium mb-2"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">取件码</label>
               <div class="relative">
-                <input
-                  id="code"
-                  v-model="code"
-                  type="text"
+                <input 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"
-                  @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>
+                  ]" placeholder="请输入5位取件码" required :readonly="inputStatus.readonly" 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 }"
-              ></div>
+                :class="{ 'w-97-100': isInputFocused, 'w-0': !isInputFocused }"></div>
             </div>
-            <button
-              type="submit"
+            <button 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"
-              ></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"></span>
             </button>
           </form>
 
           <div class="mt-6 text-center">
-            <router-link
-              to="/send"
-              class="text-indigo-400 hover:text-indigo-300 transition duration-300"
-            >
+            <router-link to="/send" class="text-indigo-400 hover:text-indigo-300 transition duration-300">
               需要发送文件？点击这里
             </router-link>
           </div>
         </div>
-        <div
-          class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
-          :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
-        >
-          <span
-            class="text-sm flex items-center"
-            :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-          >
+        <div class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
+          :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']">
+          <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
-            @click="toggleDrawer"
-            class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
-            :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-          >
+          <button @click="toggleDrawer" 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
-        v-if="showDrawer"
+      <div 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']"
-      >
-        <div
-          class="flex justify-between items-center p-6 border-b"
-          :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
-        >
+        :class="[isDarkMode ? 'bg-gray-900' : 'bg-white']">
+        <div 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
-            @click="toggleDrawer"
-            class="hover:text-white transition duration-300"
-            :class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']"
-          >
+          <button @click="toggleDrawer" 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
-              v-for="record in records"
-              :key="record.id"
+            <div 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
-                  class="w-10 h-10"
-                  :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-                />
+                <FileIcon class="w-10 h-10" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
               </div>
               <div class="flex-grow min-w-0 mr-4">
-                <p
-                  class="font-medium text-lg truncate"
-                  :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-                >
+                <p class="font-medium text-lg truncate" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
                   {{ record.filename }}
                 </p>
-                <p
-                  class="text-sm truncate"
-                  :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
-                >
+                <p 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
-                  @click="viewDetails(record)"
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
+                <button @click="viewDetails(record)"
+                  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
-                  @click="downloadRecord(record)"
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
+                <button @click="downloadRecord(record)"
+                  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
-                  @click="deleteRecord(record.id)"
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
+                <button @click="deleteRecord(record.id)"
+                  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
-        v-if="selectedRecord"
-        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      >
+      <div 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']"
-        >
-          <h3
-            class="text-2xl font-bold mb-6 truncate"
-            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-          >
+          :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
+          <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
-                class="w-6 h-6 mr-3 flex-shrink-0"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
-              <p
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-                class="truncate flex-grow"
-              >
+              <FileIcon class="w-6 h-6 mr-3 flex-shrink-0"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+              <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
-                class="w-6 h-6 mr-3 flex-shrink-0"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
-              <p
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-                class="truncate flex-grow"
-              >
+              <CalendarIcon class="w-6 h-6 mr-3 flex-shrink-0"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+              <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
-                class="w-6 h-6 mr-3 flex-shrink-0"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
-              <p
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-                class="truncate flex-grow"
-              >
+              <HardDriveIcon class="w-6 h-6 mr-3 flex-shrink-0"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+              <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
-                class="w-6 h-6 mr-3"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
+              <DownloadIcon 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
-                  @click="showContentPreview"
-                  class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300"
-                >
+                <button @click="showContentPreview"
+                  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
-                  :href="`${baseUrl}${selectedRecord.downloadUrl}`"
-                  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 :href="`${baseUrl}${selectedRecord.downloadUrl}`" 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
-              class="text-lg font-semibold mb-3"
-              :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-            >
+            <h4 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
-            @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"
-          >
+          <button @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">
             关闭
           </button>
         </div>
@@ -317,14 +208,10 @@
 
     <!-- 新增内容预览弹框 -->
     <transition name="fade">
-      <div
-        v-if="showPreview"
-        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      >
+      <div 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
-            class="prose max-w-none"
-            :class="[isDarkMode ? 'prose-invert' : '']"
-            v-html="renderedContent"
-          ></div>
+          <div class="prose max-w-none" :class="[isDarkMode ? 'prose-invert' : '']" v-html="renderedContent"></div>
         </div>
       </div>
     </transition>
@@ -453,8 +336,7 @@ const handleSubmit = async () => {
       alertStore.showAlert(res.detail || '获取文件失败', 'error')
     }
   } catch (err) {
-    console.error('取件失败:', err)
-    alertStore.showAlert('取件失败，请稍后重试', 'error')
+    alertStore.showAlert(`取件失败，请稍后重试：${err.response.data.detail}`, 'error')
   } finally {
     inputStatus.value.readonly = false
     inputStatus.value.loading = false
@@ -528,6 +410,7 @@ const showContentPreview = () => {
 
 <style scoped>
 @keyframes blob {
+
   0%,
   100% {
     transform: translate(0, 0) scale(1);
@@ -634,6 +517,7 @@ const showContentPreview = () => {
 }
 
 @media (prefers-color-scheme: dark) {
+
   :deep(.prose h1),
   :deep(.prose h2),
   :deep(.prose h3),
diff --git a/src/views/manage/FileManageView.vue b/src/views/manage/FileManageView.vue
index 6d42e08..40962b7 100644
--- a/src/views/manage/FileManageView.vue
+++ b/src/views/manage/FileManageView.vue
@@ -8,26 +8,20 @@
     </div>
 
     <!-- 搜索和操作栏 -->
-    <div class="mb-6 flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between bg-opacity-70 p-4 rounded-lg shadow-sm"
+    <div
+      class="mb-6 flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between bg-opacity-70 p-4 rounded-lg shadow-sm"
       :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
       <div class="flex flex-1 gap-4 w-full sm:w-auto">
         <div class="relative flex-1">
-          <input 
-            type="text" 
-            v-model="params.keyword" 
-            @keyup.enter="handleSearch"
-            :class="[
-              isDarkMode
-                ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
-                : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400',
-              'w-full pl-10 pr-4 py-2.5 rounded-lg border focus:ring-2 focus:ring-indigo-500 focus:border-transparent'
-            ]"
-            placeholder="搜索文件名称、描述..." 
-          />
+          <input type="text" v-model="params.keyword" @keyup.enter="handleSearch" :class="[
+            isDarkMode
+              ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
+              : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400',
+            'w-full pl-10 pr-4 py-2.5 rounded-lg border focus:ring-2 focus:ring-indigo-500 focus:border-transparent'
+          ]" placeholder="搜索文件名称、描述..." />
           <SearchIcon class="absolute left-3 top-3 w-5 h-5" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" />
         </div>
-        <button 
-          @click="handleSearch"
+        <button @click="handleSearch"
           class="px-4 py-2.5 rounded-lg inline-flex items-center transition-all duration-200 bg-indigo-600 hover:bg-indigo-700 text-white shadow-sm">
           <SearchIcon class="w-5 h-5 mr-2" />
           搜索
@@ -59,8 +53,7 @@
               ? 'bg-gray-800/50 divide-y divide-gray-700'
               : 'bg-white divide-y divide-gray-200'
           ]">
-            <tr v-for="file in tableData" :key="file.id" 
-              class="hover:bg-opacity-50 transition-colors duration-200"
+            <tr v-for="file in tableData" :key="file.id" class="hover:bg-opacity-50 transition-colors duration-200"
               :class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-50']">
               <td class="px-6 py-4 whitespace-nowrap">
                 <div class="flex items-center">
@@ -71,13 +64,15 @@
               </td>
               <td class="px-6 py-4">
                 <div class="flex items-center group relative">
-                  <FileIcon class="w-5 h-5 mr-2 flex-shrink-0" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']" />
-                  <span class="font-medium truncate max-w-[200px]" :class="[isDarkMode ? 'text-white' : 'text-gray-900']"
-                    :title="file.prefix">
+                  <FileIcon class="w-5 h-5 mr-2 flex-shrink-0"
+                    :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']" />
+                  <span class="font-medium truncate max-w-[200px]"
+                    :class="[isDarkMode ? 'text-white' : 'text-gray-900']" :title="file.prefix">
                     {{ file.prefix }}
                   </span>
                   <!-- 悬浮提示 -->
-                  <div class="absolute left-0 -top-2 -translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
+                  <div
+                    class="absolute left-0 -top-2 -translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
                     <div class="bg-gray-900 text-white text-sm rounded px-2 py-1 max-w-xs break-all">
                       {{ file.prefix }}
                     </div>
@@ -96,7 +91,8 @@
                     {{ file.text }}
                   </span>
                   <!-- 悬浮提示 -->
-                  <div class="absolute left-0 -top-2 -translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10">
+                  <div
+                    class="absolute left-0 -top-2 -translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10">
                     <div class="bg-gray-900 text-white text-sm rounded px-2 py-1 max-w-xs break-all">
                       {{ file.text }}
                     </div>
@@ -104,27 +100,35 @@
                 </div>
               </td>
               <td class="px-6 py-4 whitespace-nowrap">
-                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
-                  :class="[
-                    file.expired_at 
-                      ? (isDarkMode ? 'bg-yellow-900/30 text-yellow-400' : 'bg-yellow-100 text-yellow-800')
-                      : (isDarkMode ? 'bg-green-900/30 text-green-400' : 'bg-green-100 text-green-800')
-                  ]">
+                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" :class="[
+                  file.expired_at
+                    ? (isDarkMode ? 'bg-yellow-900/30 text-yellow-400' : 'bg-yellow-100 text-yellow-800')
+                    : (isDarkMode ? 'bg-green-900/30 text-green-400' : 'bg-green-100 text-green-800')
+                ]">
                   {{ file.expired_at ? formatTimestamp(file.expired_at) : '永久' }}
                 </span>
               </td>
               <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                <button 
-                  @click="deleteFile(file.id)" 
-                  class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200"
-                  :class="[
-                    isDarkMode
-                      ? 'bg-red-900/20 text-red-400 hover:bg-red-900/30'
-                      : 'bg-red-50 text-red-600 hover:bg-red-100'
-                  ]">
-                  <TrashIcon class="w-4 h-4 mr-1.5" />
-                  删除
-                </button>
+                <div class="flex items-center space-x-2">
+                  <button @click="openEditModal(file)"
+                    class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
+                      isDarkMode
+                        ? 'bg-blue-900/20 text-blue-400 hover:bg-blue-900/30'
+                        : 'bg-blue-50 text-blue-600 hover:bg-blue-100'
+                    ]">
+                    <PencilIcon class="w-4 h-4 mr-1.5" />
+                    编辑
+                  </button>
+                  <button @click="deleteFile(file.id)"
+                    class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
+                      isDarkMode
+                        ? 'bg-red-900/20 text-red-400 hover:bg-red-900/30'
+                        : 'bg-red-50 text-red-600 hover:bg-red-100'
+                    ]">
+                    <TrashIcon class="w-4 h-4 mr-1.5" />
+                    删除
+                  </button>
+                </div>
               </td>
             </tr>
           </tbody>
@@ -140,11 +144,8 @@
         </div>
 
         <div class="flex items-center space-x-2">
-          <button 
-            @click="handlePageChange(params.page - 1)" 
-            :disabled="params.page === 1"
-            class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" 
-            :class="[
+          <button @click="handlePageChange(params.page - 1)" :disabled="params.page === 1"
+            class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
               isDarkMode
                 ? params.page === 1
                   ? 'bg-gray-800 text-gray-600 cursor-not-allowed'
@@ -159,11 +160,8 @@
 
           <div class="flex items-center space-x-1">
             <template v-for="pageNum in displayedPages" :key="pageNum">
-              <button 
-                v-if="pageNum !== '...'" 
-                @click="handlePageChange(pageNum)"
-                class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" 
-                :class="[
+              <button v-if="pageNum !== '...'" @click="handlePageChange(pageNum)"
+                class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
                   params.page === pageNum
                     ? 'bg-indigo-600 text-white'
                     : isDarkMode
@@ -172,20 +170,14 @@
                 ]">
                 {{ pageNum }}
               </button>
-              <span
-                v-else 
-                class="px-2" 
-                :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
+              <span v-else class="px-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
                 ...
               </span>
             </template>
           </div>
 
-          <button 
-            @click="handlePageChange(params.page + 1)" 
-            :disabled="params.page >= totalPages"
-            class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" 
-            :class="[
+          <button @click="handlePageChange(params.page + 1)" :disabled="params.page >= totalPages"
+            class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
               isDarkMode
                 ? params.page >= totalPages
                   ? 'bg-gray-800 text-gray-600 cursor-not-allowed'
@@ -200,21 +192,207 @@
         </div>
       </div>
     </div>
+
+    <!-- 添加编辑模态框 -->
+    <div v-if="showEditModal" class="fixed inset-0 z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+      <!-- 背景遮罩 - 添加高斯模糊和渐变效果 -->
+      <div
+        class="fixed inset-0 bg-gradient-to-br from-gray-900/90 to-black/90 backdrop-blur-sm transition-opacity duration-300"
+        @click="closeEditModal"></div>
+
+      <!-- 模态框容器 - 添加缩放动画效果 -->
+      <div class="fixed inset-0 z-10 overflow-y-auto">
+        <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+          <div
+            class="relative transform overflow-hidden rounded-2xl text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-xl animate-modal-scale"
+            :class="[isDarkMode ? 'bg-gray-800/95 backdrop-blur-md' : 'bg-white']">
+
+            <!-- 模态框头部 - 添加渐变背景 -->
+            <div class="relative px-6 pt-6 pb-4"
+              :class="[isDarkMode ? 'bg-gradient-to-r from-gray-800/50 to-gray-700/50' : 'bg-gradient-to-r from-gray-50 to-white']">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                  <div class="p-2 rounded-lg" :class="[isDarkMode ? 'bg-indigo-500/10' : 'bg-indigo-50']">
+                    <PencilIcon class="w-5 h-5" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+                  </div>
+                  <h3 class="text-xl font-semibold leading-6" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
+                    编辑文件信息
+                  </h3>
+                </div>
+                <!-- 优化的关闭按钮 -->
+                <button @click="closeEditModal" class="rounded-lg p-2 transition-all duration-200 hover:rotate-90"
+                  :class="[isDarkMode ? 'text-gray-400 hover:text-white hover:bg-white/10' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100']">
+                  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <!-- 表单内容 -->
+            <div class="px-6 py-5">
+              <div class="grid gap-6">
+                <!-- 取件码 -->
+                <div class="space-y-2 group">
+                  <label class="text-sm font-medium flex items-center space-x-2 transition-colors duration-200"
+                    :class="[isDarkMode ? 'text-gray-300 group-focus-within:text-indigo-400' : 'text-gray-700 group-focus-within:text-indigo-600']">
+                    <span>取件码</span>
+                    <div class="h-px flex-1 transition-colors duration-200"
+                      :class="[isDarkMode ? 'bg-gray-700 group-focus-within:bg-indigo-500/50' : 'bg-gray-200 group-focus-within:bg-indigo-500/30']">
+                    </div>
+                  </label>
+                  <div class="relative rounded-lg shadow-sm">
+                    <input type="text" v-model="editForm.code"
+                      class="block w-full rounded-lg border-0 py-2.5 pl-4 pr-10 transition-all duration-200 focus:ring-2 focus:ring-inset sm:text-sm"
+                      :class="[
+                        isDarkMode
+                          ? 'bg-gray-700/50 text-white placeholder-gray-400 focus:ring-indigo-500/50'
+                          : 'bg-gray-50 text-gray-900 placeholder-gray-400 focus:ring-indigo-500'
+                      ]" placeholder="输入取件码">
+                    <div
+                      class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none transition-opacity duration-200 opacity-0 group-focus-within:opacity-100">
+                      <CheckIcon class="w-5 h-5" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 文件名称 -->
+                <div class="space-y-2 group">
+                  <label class="text-sm font-medium flex items-center space-x-2 transition-colors duration-200"
+                    :class="[isDarkMode ? 'text-gray-300 group-focus-within:text-indigo-400' : 'text-gray-700 group-focus-within:text-indigo-600']">
+                    <span>文件名称</span>
+                    <div class="h-px flex-1 transition-colors duration-200"
+                      :class="[isDarkMode ? 'bg-gray-700 group-focus-within:bg-indigo-500/50' : 'bg-gray-200 group-focus-within:bg-indigo-500/30']">
+                    </div>
+                  </label>
+                  <div class="relative rounded-lg shadow-sm">
+                    <input type="text" v-model="editForm.prefix"
+                      class="block w-full rounded-lg border-0 py-2.5 pl-4 pr-10 transition-all duration-200 focus:ring-2 focus:ring-inset sm:text-sm"
+                      :class="[
+                        isDarkMode
+                          ? 'bg-gray-700/50 text-white placeholder-gray-400 focus:ring-indigo-500/50'
+                          : 'bg-gray-50 text-gray-900 placeholder-gray-400 focus:ring-indigo-500'
+                      ]" placeholder="输入文件名称">
+                    <div
+                      class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none transition-opacity duration-200 opacity-0 group-focus-within:opacity-100">
+                      <CheckIcon class="w-5 h-5" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 文件后缀 -->
+                <div class="space-y-2 group">
+                  <label class="text-sm font-medium flex items-center space-x-2 transition-colors duration-200"
+                    :class="[isDarkMode ? 'text-gray-300 group-focus-within:text-indigo-400' : 'text-gray-700 group-focus-within:text-indigo-600']">
+                    <span>文件后缀</span>
+                    <div class="h-px flex-1 transition-colors duration-200"
+                      :class="[isDarkMode ? 'bg-gray-700 group-focus-within:bg-indigo-500/50' : 'bg-gray-200 group-focus-within:bg-indigo-500/30']">
+                    </div>
+                  </label>
+                  <div class="relative rounded-lg shadow-sm">
+                    <input type="text" v-model="editForm.suffix"
+                      class="block w-full rounded-lg border-0 py-2.5 pl-4 pr-10 transition-all duration-200 focus:ring-2 focus:ring-inset sm:text-sm"
+                      :class="[
+                        isDarkMode
+                          ? 'bg-gray-700/50 text-white placeholder-gray-400 focus:ring-indigo-500/50'
+                          : 'bg-gray-50 text-gray-900 placeholder-gray-400 focus:ring-indigo-500'
+                      ]" placeholder="输入文件后缀">
+                    <div
+                      class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none transition-opacity duration-200 opacity-0 group-focus-within:opacity-100">
+                      <CheckIcon class="w-5 h-5" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 过期时间 -->
+                <div class="space-y-2 group">
+                  <label class="text-sm font-medium flex items-center space-x-2 transition-colors duration-200"
+                    :class="[isDarkMode ? 'text-gray-300 group-focus-within:text-indigo-400' : 'text-gray-700 group-focus-within:text-indigo-600']">
+                    <span>过期时间</span>
+                    <div class="h-px flex-1 transition-colors duration-200"
+                      :class="[isDarkMode ? 'bg-gray-700 group-focus-within:bg-indigo-500/50' : 'bg-gray-200 group-focus-within:bg-indigo-500/30']">
+                    </div>
+                  </label>
+                  <div class="relative rounded-lg shadow-sm">
+                    <input type="datetime-local" v-model="editForm.expired_at"
+                      class="block w-full rounded-lg border-0 py-2.5 pl-4 pr-10 transition-all duration-200 focus:ring-2 focus:ring-inset sm:text-sm"
+                      :class="[
+                        isDarkMode
+                          ? 'bg-gray-700/50 text-white placeholder-gray-400 focus:ring-indigo-500/50'
+                          : 'bg-gray-50 text-gray-900 placeholder-gray-400 focus:ring-indigo-500'
+                      ]">
+                    <div
+                      class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none transition-opacity duration-200 opacity-0 group-focus-within:opacity-100">
+                      <CheckIcon class="w-5 h-5" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 下载次数限制 -->
+                <div class="space-y-2 group">
+                  <label class="text-sm font-medium flex items-center space-x-2 transition-colors duration-200"
+                    :class="[isDarkMode ? 'text-gray-300 group-focus-within:text-indigo-400' : 'text-gray-700 group-focus-within:text-indigo-600']">
+                    <span>下载次数限制</span>
+                    <div class="h-px flex-1 transition-colors duration-200"
+                      :class="[isDarkMode ? 'bg-gray-700 group-focus-within:bg-indigo-500/50' : 'bg-gray-200 group-focus-within:bg-indigo-500/30']">
+                    </div>
+                  </label>
+                  <div class="relative rounded-lg shadow-sm">
+                    <input type="number" v-model="editForm.expired_count"
+                      class="block w-full rounded-lg border-0 py-2.5 pl-4 pr-10 transition-all duration-200 focus:ring-2 focus:ring-inset sm:text-sm"
+                      :class="[
+                        isDarkMode
+                          ? 'bg-gray-700/50 text-white placeholder-gray-400 focus:ring-indigo-500/50'
+                          : 'bg-gray-50 text-gray-900 placeholder-gray-400 focus:ring-indigo-500'
+                      ]" placeholder="输入下载次数限制">
+                    <div
+                      class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none transition-opacity duration-200 opacity-0 group-focus-within:opacity-100">
+                      <CheckIcon class="w-5 h-5" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 优化的操作按钮区域 -->
+            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t bg-gradient-to-b"
+              :class="[isDarkMode ? 'border-gray-700/50 from-gray-800/50 to-gray-800' : 'border-gray-200 from-gray-50 to-white']">
+              <button @click="closeEditModal"
+                class="inline-flex items-center justify-center rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200"
+                :class="[
+                  isDarkMode
+                    ? 'bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white'
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                ]">
+                取消
+              </button>
+              <button @click="handleUpdate"
+                class="inline-flex items-center justify-center rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200 bg-gradient-to-r from-indigo-600 to-indigo-500 hover:from-indigo-500 hover:to-indigo-600 text-white shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/35">
+                <CheckIcon class="w-4 h-4 mr-2" />
+                保存更改
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { inject, ref, computed } from 'vue'
 import api from '@/utils/api'
-import { 
-  FileIcon, 
-  SearchIcon, 
+import {
+  FileIcon,
+  SearchIcon,
   TrashIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  UploadIcon,
-  HardDriveIcon
+  PencilIcon,
+  CheckIcon,
 } from 'lucide-vue-next'
+import { useAlertStore } from '@/stores/alertStore'
+
 function formatTimestamp(timestamp: string): string {
   const date = new Date(timestamp)
   const year = date.getFullYear()
@@ -228,7 +406,7 @@ function formatTimestamp(timestamp: string): string {
 
 const isDarkMode = inject('isDarkMode')
 const tableData: any = ref([])
-
+const alertStore = useAlertStore()
 // 修改文件表头
 const fileTableHeaders = ['取件码', '名称', '大小', '描述', '过期时间', '操作']
 
@@ -240,6 +418,58 @@ const params = ref({
   keyword: ''
 })
 
+// 添加编辑相关的状态
+const showEditModal = ref(false)
+const editForm = ref({
+  id: null,
+  code: '',
+  prefix: '',
+  suffix: '',
+  expired_at: '',
+  expired_count: null
+})
+
+// 打开编辑模态框
+const openEditModal = (file: any) => {
+  editForm.value = {
+    id: file.id,
+    code: file.code,
+    prefix: file.prefix,
+    suffix: file.suffix,
+    expired_at: file.expired_at ? file.expired_at.slice(0, 16) : '', // 格式化日期时间
+    expired_count: file.expired_count
+  }
+  showEditModal.value = true
+}
+
+// 关闭编辑模态框
+const closeEditModal = () => {
+  showEditModal.value = false
+  editForm.value = {
+    id: null,
+    code: '',
+    prefix: '',
+    suffix: '',
+    expired_at: '',
+    expired_count: null
+  }
+}
+
+// 处理更新
+const handleUpdate = async () => {
+  try {
+    await api({
+      url: '/admin/file/update',
+      method: 'patch',
+      data: editForm.value
+    })
+    await loadFiles()
+    closeEditModal()
+  } catch (error: any) {
+    alertStore.showAlert(error.response.data.detail, 'error')
+  }
+}
+
 // 下载文件处理
 const downloadFile = async (id: number) => {
   try {
@@ -374,3 +604,26 @@ const handleSearch = async () => {
   await loadFiles()
 }
 </script>
+
+<style>
+.animate-modal-scale {
+  animation: modal-scale 0.3s ease-out;
+}
+
+@keyframes modal-scale {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* 添加输入框聚焦时的微妙缩放效果 */
+input:focus {
+  transform: scale(1.002);
+}
+</style>