feat:后台设置页面

src/views/RetrievewFileView.vue

@@ -11,7 +11,6 @@
             : 'bg-white border-gray-200'
         ]"
       >
-        <!-- Logo and Title Section -->
         <div class="p-8">
           <div class="flex justify-center mb-8">
             <div
@@ -33,9 +32,61 @@
           >
             FileCodeBox
           </h2>
-
-          <!-- File Input Form Component -->
-          <FileInputForm :is-dark-mode="isDarkMode" @submit="handleSubmit" />
+          <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
+              >
+              <div class="relative">
+                <input
+                  id="code"
+                  v-model="code"
+                  type="text"
+                  class="w-full px-4 py-3 rounded-lg text-white 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 }
+                  ]"
+                  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>
+            </div>
+            <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"
+            >
+              <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"
+                />
+              </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>
+            </button>
+          </form>
 
           <div class="mt-6 text-center">
             <router-link
@@ -46,8 +97,6 @@
             </router-link>
           </div>
         </div>
-
-        <!-- Footer Section -->
         <div
           class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
           :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
@@ -71,85 +120,302 @@
       </div>
     </div>
 
-    <!-- History Drawer Component -->
-    <HistoryDrawer
-      :show="showDrawer"
-      :records="records"
-      :is-dark-mode="isDarkMode"
-      @close="toggleDrawer"
-      @view-details="viewDetails"
-      @download="downloadRecord"
-      @delete="deleteRecord"
-    />
+    <transition name="drawer">
+      <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']"
+        >
+          <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']"
+          >
+            <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"
+              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']"
+            >
+              <div class="flex-shrink-0 mr-4">
+                <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']"
+                >
+                  {{ record.filename }}
+                </p>
+                <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="[
+                    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="[
+                    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="[
+                    isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
+                  ]"
+                >
+                  <TrashIcon class="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+          </transition-group>
+        </div>
+      </div>
+    </transition>
 
-    <!-- File Details Modal Component -->
-    <FileDetailsModal
-      :record="selectedRecord"
-      :is-dark-mode="isDarkMode"
-      :base-url="baseUrl"
-      @close="selectedRecord = null"
-      @show-preview="showContentPreview"
-      @download="downloadRecord"
-    />
+    <transition name="fade">
+      <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']"
+          >
+            文件详情
+          </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"
+              >
+                <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"
+              >
+                <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"
+              >
+                <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']"
+              />
+              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
+                <span class="font-medium">文件内容：</span>
+              </p>
+              <div v-if="selectedRecord.content" 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>
+              </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>
+              </div>
+            </div>
+          </div>
 
-    <!-- Content Preview Modal Component -->
-    <ContentPreviewModal
-      :show="showPreview"
-      :content="selectedRecord?.content"
-      :is-dark-mode="isDarkMode"
-      @close="showPreview = false"
-    />
+          <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>
+            <div class="bg-white p-2 rounded-lg shadow-md">
+              <QRCode :value="getQRCodeValue(selectedRecord)" :size="128" level="M" />
+            </div>
+            <p class="mt-2 text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
+              扫描二维码快速取件
+            </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>
+        </div>
+      </div>
+    </transition>
+
+    <!-- 新增内容预览弹框 -->
+    <transition name="fade">
+      <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']"
+        >
+          <div class="flex justify-between items-center mb-4">
+            <h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+              内容预览
+            </h3>
+            <button @click="showPreview = false" class="text-gray-500 hover:text-gray-700">
+              <XIcon class="w-6 h-6" />
+            </button>
+          </div>
+          <div
+            class="prose max-w-none"
+            :class="[isDarkMode ? 'prose-invert' : '']"
+            v-html="renderedContent"
+          ></div>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script setup>
-import { ref, inject, onMounted } from 'vue'
+import { ref, inject, onMounted, watch, computed } from 'vue'
+import {
+  BoxIcon,
+  EyeIcon,
+  ArrowRightIcon,
+  ShieldCheckIcon,
+  ClipboardListIcon,
+  XIcon,
+  TrashIcon,
+  FileIcon,
+  CalendarIcon,
+  HardDriveIcon,
+  DownloadIcon
+} from 'lucide-vue-next'
 import { useRouter, useRoute } from 'vue-router'
-import { storeToRefs } from 'pinia'
+import QRCode from 'qrcode.vue'
 import { useFileDataStore } from '@/stores/fileData'
-import { useAlertStore } from '@/stores/alertStore'
+import { storeToRefs } from 'pinia'
 import api from '@/utils/api'
 import { saveAs } from 'file-saver'
-import { BoxIcon, ShieldCheckIcon, ClipboardListIcon } from 'lucide-vue-next'
+import { marked } from 'marked'
+import { useAlertStore } from '@/stores/alertStore'
 
-// Components
-import FileInputForm from '@/components/retrievew/FileInputForm.vue'
-import HistoryDrawer from '@/components/retrievew/HistoryDrawer.vue'
-import FileDetailsModal from '@/components/retrievew/FileDetailsModal.vue'
-import ContentPreviewModal from '@/components/retrievew/ContentPreviewModal.vue'
-
-// Store and Router setup
-const router = useRouter()
-const route = useRoute()
-const fileStore = useFileDataStore()
 const alertStore = useAlertStore()
-const { receiveData: records } = storeToRefs(fileStore)
-
-// Inject and Environment Variables
-const isDarkMode = inject('isDarkMode')
 const baseUrl =
   import.meta.env.MODE === 'production'
     ? import.meta.env.VITE_API_BASE_URL_PROD
     : import.meta.env.VITE_API_BASE_URL_DEV
 
-// Reactive References
-const showDrawer = ref(false)
+const router = useRouter()
+const isDarkMode = inject('isDarkMode')
+const fileStore = useFileDataStore()
+const { receiveData } = storeToRefs(fileStore)
+const code = ref('')
+const inputStatus = ref({
+  readonly: false,
+  loading: false
+})
+const isInputFocused = ref(false)
+const error = ref('')
 const selectedRecord = ref(null)
-const showPreview = ref(false)
+const showDrawer = ref(false)
+const route = useRoute()
+
+// 使用 receiveData 替代原来的 records
+const records = receiveData
 
-// Lifecycle Hooks
 onMounted(() => {
-  const queryCode = route.query.code
-  if (queryCode) {
-    handleSubmit(queryCode)
+  const query_code = route.query.code
+  if (query_code) {
+    code.value = query_code
+  }
+})
+watch(code, (newVal) => {
+  if (newVal.length === 5) {
+    handleSubmit()
   }
 })
 
-// Methods
-const handleSubmit = async (code) => {
-  try {
-    const res = await api.post('/share/select/', { code })
+const handleSubmit = async () => {
+  if (code.value.length !== 5) {
+    alertStore.showAlert('请输入5位取件码', 'error')
+    return
+  }
 
+  inputStatus.value.readonly = true
+  inputStatus.value.loading = true
+
+  try {
+    const res = await api.post('/share/select/', {
+      code: code.value
+    })
     if (res.code === 200) {
       if (res.detail) {
         const isFile = res.detail.text.startsWith('/share/download')
@@ -163,12 +429,16 @@ const handleSubmit = async (code) => {
           date: new Date().toLocaleString()
         }
 
-        // Check if file already exists in history
-        const exists = fileStore.receiveData.some((file) => file.code === newFileData.code)
-        if (!exists) {
+        let flag = true
+        fileStore.receiveData.forEach((file) => {
+          if (file.code === newFileData.code) {
+            flag = false
+            return
+          }
+        })
+        if (flag) {
           fileStore.addReceiveData(newFileData)
         }
-
         showDrawer.value = true
         alertStore.showAlert('文件获取成功', 'success')
       } else {
@@ -180,6 +450,10 @@ const handleSubmit = async (code) => {
   } catch (err) {
     console.error('取件失败:', err)
     alertStore.showAlert('取件失败，请稍后重试', 'error')
+  } finally {
+    inputStatus.value.readonly = false
+    inputStatus.value.loading = false
+    code.value = ''
   }
 }
 
@@ -210,23 +484,35 @@ const toSend = () => {
   router.push('/send')
 }
 
+const getQRCodeValue = (record) => {
+  return `${baseUrl}${record.downloadUrl}`
+}
+
 const downloadRecord = (record) => {
   if (record.downloadUrl) {
-    // If it's a file, open in new tab for download
+    // 如果是文件,直接下载
     window.open(`${baseUrl}${record.downloadUrl}`, '_blank')
   } else if (record.content) {
-    // If it's text content, download as txt file
+    // 如果是文本,转成txt下载
     const blob = new Blob([record.content], { type: 'text/plain;charset=utf-8' })
     saveAs(blob, `${record.filename}.txt`)
   }
 }
 
+const showPreview = ref(false)
+const renderedContent = computed(() => {
+  if (selectedRecord.value && selectedRecord.value.content) {
+    return marked(selectedRecord.value.content)
+  }
+  return ''
+})
+
 const showContentPreview = () => {
   showPreview.value = true
 }
 </script>
 
-<style>
+<style scoped>
 @keyframes blob {
   0%,
   100% {
@@ -242,6 +528,23 @@ const showContentPreview = () => {
     transform: translate(50px, 50px) scale(1.05);
   }
 }
+@media (min-width: 640px) {
+  .sm\:w-120 {
+    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;
+}
 
 .animate-spin-slow {
   animation: spin 8s linear infinite;
@@ -256,42 +559,58 @@ const showContentPreview = () => {
   }
 }
 
-/* Media Queries */
-@media (min-width: 640px) {
-  .sm\:w-120 {
-    width: 30rem;
-  }
-}
-
-/* Transitions */
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.3s ease;
 }
-
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
 }
 
-.drawer-enter-active,
-.drawer-leave-active {
-  transition: transform 0.3s ease;
-}
-
-.drawer-leave-to,
-.drawer-enter-from {
-  transform: translateX(100%);
-}
-
 .list-enter-active,
 .list-leave-active {
   transition: all 0.5s ease;
 }
-
 .list-enter-from,
 .list-leave-to {
   opacity: 0;
   transform: translateX(30px);
 }
+
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: transform 0.3s ease;
+}
+.drawer-enter-from,
+.drawer-leave-to {
+  transform: translateX(100%);
+}
+.w-97-100 {
+  width: 97%;
+}
+
+/* 添加 Markdown 样式 */
+:deep(.prose) {
+  @apply text-left;
+}
+:deep(.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6) {
+  @apply text-indigo-600 dark:text-indigo-400;
+}
+:deep(.prose a) {
+  @apply text-blue-600 dark:text-blue-400;
+}
+:deep(.prose code) {
+  @apply bg-gray-100 dark:bg-gray-700 rounded px-1;
+}
+:deep(.prose pre) {
+  @apply bg-gray-100 dark:bg-gray-700 rounded p-4 overflow-x-auto;
+}
+
+/* 添加新的宽度类 */
+@media (min-width: 640px) {
+  .sm\:w-120 {
+    width: 30rem; /* 480px */
+  }
+}
 </style>