From 9693f3d329316a3d847bad734a19338db96722be Mon Sep 17 00:00:00 2001
From: Lan <hhxk666@gmail.com>
Date: Sat, 23 Nov 2024 16:39:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=90=8E=E5=8F=B0=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/retrievew/FileDetailsModal.vue |  10 +-
 src/components/retrievew/HistoryDrawer.vue    |  30 +-
 src/composables/useSystemConfig.ts            |   0
 src/layout/AdminLayout/AdminLayout.vue        | 239 ++++++
 src/router/index.ts                           |  27 +-
 src/stores/adminStore.ts                      |  11 +
 src/stores/counter.ts                         |  12 -
 src/utils/api.ts                              |   5 +-
 src/views/LoginView.vue                       | 219 +++++
 src/views/ManageView.vue                      |   2 +-
 src/views/RetrievewFileView.vue               | 495 ++++++++++--
 src/views/SendFileView.vue                    |   8 +-
 src/views/manage/DashboardView.vue            | 257 ++++++
 src/views/manage/FileManageView.vue           | 369 +++++++++
 src/views/manage/SystemSettingsView.vue       | 750 ++++++++++++++++++
 15 files changed, 2313 insertions(+), 121 deletions(-)
 create mode 100644 src/composables/useSystemConfig.ts
 create mode 100644 src/layout/AdminLayout/AdminLayout.vue
 create mode 100644 src/stores/adminStore.ts
 delete mode 100644 src/stores/counter.ts
 create mode 100644 src/views/LoginView.vue
 create mode 100644 src/views/manage/DashboardView.vue
 create mode 100644 src/views/manage/FileManageView.vue
 create mode 100644 src/views/manage/SystemSettingsView.vue

diff --git a/src/components/retrievew/FileDetailsModal.vue b/src/components/retrievew/FileDetailsModal.vue
index aa03ab9..7890116 100644
--- a/src/components/retrievew/FileDetailsModal.vue
+++ b/src/components/retrievew/FileDetailsModal.vue
@@ -19,18 +19,19 @@
             <XIcon class="h-6 w-6" :class="[isDarkMode ? 'text-white' : 'text-gray-900']" />
           </button>
         </div>
-
         <div class="space-y-6">
           <div class="flex items-center space-x-4">
             <FileIcon class="h-12 w-12 text-indigo-500" />
             <div>
-              <h4 class="font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
+              <h4
+                class="font-medium truncate"
+                :class="[isDarkMode ? 'text-white' : 'text-gray-900']"
+              >
                 {{ record.filename }}
               </h4>
-              <p class="text-sm text-gray-500">{{ record.size }}</p>
+              <p class="text-sm text-gray-500 truncate">{{ record.size }}</p>
             </div>
           </div>
-
           <div class="space-y-4">
             <div class="flex items-center space-x-3">
               <CalendarIcon class="h-5 w-5 text-gray-400" />
@@ -45,7 +46,6 @@
               </span>
             </div>
           </div>
-
           <div class="flex justify-center">
             <QRCode
               :value="baseUrl + '/retrieve/' + record.code"
diff --git a/src/components/retrievew/HistoryDrawer.vue b/src/components/retrievew/HistoryDrawer.vue
index 7aa4c51..573de0c 100644
--- a/src/components/retrievew/HistoryDrawer.vue
+++ b/src/components/retrievew/HistoryDrawer.vue
@@ -32,7 +32,10 @@
           >
             <div class="flex items-start justify-between">
               <div class="flex items-center space-x-3">
-                <FileIcon class="h-5 w-5 text-indigo-500" />
+                <FileIcon
+                  class="h-5 w-5 text-indigo-500"
+                  :class="[record.type === 'text' ? 'text-purple-500' : 'text-indigo-500']"
+                />
                 <div>
                   <h3
                     class="font-medium truncate max-w-[200px]"
@@ -46,8 +49,12 @@
               <div class="flex space-x-2">
                 <button
                   @click="$emit('view-details', record)"
-                  class="p-2 rounded-lg transition duration-300"
-                  :class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100']"
+                  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="h-4 w-4"
@@ -56,7 +63,12 @@
                 </button>
                 <button
                   @click="$emit('download', record)"
-                  class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-300"
+                  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="h-4 w-4"
@@ -65,12 +77,12 @@
                 </button>
                 <button
                   @click="$emit('delete', record)"
-                  class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-300"
+                  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="h-4 w-4"
-                    :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
-                  />
+                  <TrashIcon class="h-4 w-4" />
                 </button>
               </div>
             </div>
diff --git a/src/composables/useSystemConfig.ts b/src/composables/useSystemConfig.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/layout/AdminLayout/AdminLayout.vue b/src/layout/AdminLayout/AdminLayout.vue
new file mode 100644
index 0000000..a9b4040
--- /dev/null
+++ b/src/layout/AdminLayout/AdminLayout.vue
@@ -0,0 +1,239 @@
+<template>
+  <div
+    class="min-h-screen flex flex-col lg:flex-row transition-colors duration-300"
+    :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"
+      :class="[
+        isDarkMode
+          ? '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
+        class="flex items-center justify-between h-16 px-4 border-b"
+        :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
+      >
+        <div class="flex items-center">
+          <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 p-1" :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
+              <BoxIcon
+                class="w-6 h-6"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+              />
+            </div>
+          </div>
+          <h1
+            class="ml-2 text-xl font-semibold"
+            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
+          >
+            FileCodeBox
+          </h1>
+        </div>
+        <button @click="toggleSidebar" class="lg:hidden">
+          <XIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
+        </button>
+      </div>
+
+      <!-- 导航菜单 -->
+      <nav class="flex-1 overflow-y-auto">
+        <ul class="p-4 space-y-2">
+          <li v-for="item in menuItems" :key="item.id">
+            <a
+              @click="router.push(item.redirect)"
+              class="flex items-center p-2 rounded-lg transition-colors duration-200"
+              :class="[
+                router.currentRoute.value.name === item.id
+                  ? isDarkMode
+                    ? 'bg-indigo-900 text-indigo-400'
+                    : 'bg-indigo-100 text-indigo-600'
+                  : 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>
+          </li>
+        </ul>
+      </nav>
+    </aside>
+
+    <!-- Main Content -->
+    <div class="flex-1 flex flex-col min-h-screen">
+      <!-- Header -->
+      <header
+        class="shadow-md border-b transition-colors duration-300"
+        :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']" />
+          </button>
+        </div>
+      </header>
+
+      <!-- Content -->
+      <main
+        class="flex-1 p-6 overflow-y-auto transition-colors duration-300"
+        :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
+      >
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, inject, onMounted, onUnmounted } from 'vue'
+import { BoxIcon, MenuIcon, XIcon, FolderIcon, CogIcon, LayoutDashboardIcon } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+
+interface MenuItem {
+  id: string
+  name: string
+  icon: any
+  redirect: string
+}
+
+const router = useRouter()
+const isDarkMode = inject('isDarkMode')
+const menuItems: MenuItem[] = [
+  { id: 'Dashboard', name: '仪表盘', icon: LayoutDashboardIcon, redirect: '/admin/dashboard' },
+  { id: 'FileManage', name: '文件管理', icon: FolderIcon, redirect: '/admin/files' },
+  { id: 'Settings', name: '系统设置', icon: CogIcon, redirect: '/admin/settings' }
+]
+
+const isSidebarOpen = ref(true)
+const toggleSidebar = () => {
+  isSidebarOpen.value = !isSidebarOpen.value
+}
+
+// 响应式处理
+const handleResize = () => {
+  if (window.innerWidth >= 1024) {
+    isSidebarOpen.value = true
+  } else {
+    isSidebarOpen.value = false
+  }
+}
+
+onMounted(() => {
+  handleResize()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+
+// 分页参数
+const params = ref({
+  page: 1,
+  size: 10,
+  total: 0
+})
+
+// 加载文件列表
+const loadFiles = async () => {
+  try {
+    params.value.total = 85
+    // 更新文件列表数据...
+  } catch (error) {
+    console.error('加载文件列表失败:', error)
+    // 处理错误...
+  }
+}
+
+// 初始加载
+onMounted(() => {
+  loadFiles()
+})
+</script>
+
+<style>
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #e5e7eb;
+  transition: 0.4s;
+}
+
+.dark .slider {
+  background-color: #4b5563;
+}
+
+input:checked + .slider {
+  background-color: #4f46e5;
+}
+
+.dark input:checked + .slider {
+  background-color: #4f46e5;
+}
+
+.slider:before {
+  position: absolute;
+  content: '';
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.4s;
+}
+
+.dark .slider:before {
+  background-color: #e5e7eb;
+}
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin-slow {
+  animation: spin 8s linear infinite;
+}
+
+.transition-colors {
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index d08c0b1..57f9108 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -14,9 +14,32 @@ const router = createRouter({
       component: () => import('@/views/SendFileView.vue')
     },
     {
-      path: '/manage',
+      path: '/admin',
       name: 'Manage',
-      component: () => import('@/views/ManageView.vue')
+      component: () => import('@/layout/AdminLayout/AdminLayout.vue'),
+      redirect: '/admin/dashboard',
+      children: [
+        {
+          path: '/admin/dashboard',
+          name: 'Dashboard',
+          component: () => import('@/views/manage/DashboardView.vue')
+        },
+        {
+          path: '/admin/files',
+          name: 'FileManage',
+          component: () => import('@/views/manage/FileManageView.vue')
+        },
+        {
+          path: '/admin/settings',
+          name: 'Settings',
+          component: () => import('@/views/manage/SystemSettingsView.vue')
+        }
+      ]
+    },
+    {
+      path: '/login',
+      name: 'Login',
+      component: () => import('@/views/LoginView.vue')
     }
   ]
 })
diff --git a/src/stores/adminStore.ts b/src/stores/adminStore.ts
new file mode 100644
index 0000000..9986d22
--- /dev/null
+++ b/src/stores/adminStore.ts
@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useAdminData = defineStore('adminData', () => {
+  const adminPassword = ref(localStorage.getItem('adminPassword') || '')
+  function updateAdminPwd(pwd: string) {
+    adminPassword.value = pwd
+    localStorage.setItem('token', pwd)
+  }
+  return { adminPassword, updateAdminPwd }
+})
diff --git a/src/stores/counter.ts b/src/stores/counter.ts
deleted file mode 100644
index b6757ba..0000000
--- a/src/stores/counter.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})
diff --git a/src/utils/api.ts b/src/utils/api.ts
index bbad035..85c879c 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { useRouter } from 'vue-router'
 
 // 从环境变量中获取 API 基础 URL
 const baseURL =
@@ -38,7 +39,6 @@ api.interceptors.request.use(
     return Promise.reject(error)
   }
 )
-
 // 响应拦截器
 api.interceptors.response.use(
   (response) => {
@@ -49,8 +49,9 @@ api.interceptors.response.use(
     if (error.response) {
       switch (error.response.status) {
         case 401:
-          // 未授权,可能需要重新登录
           console.error('未授权，请重新登录')
+          localStorage.clear()
+          window.location.href = '/login'
           break
         case 403:
           // 禁止访问
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
new file mode 100644
index 0000000..4192b3c
--- /dev/null
+++ b/src/views/LoginView.vue
@@ -0,0 +1,219 @@
+<template>
+  <div
+    :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
+      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']"
+    >
+      <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"
+          ></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"
+          ></div>
+          <div
+            :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
+          :class="[
+            'mt-6 text-center text-3xl font-extrabold',
+            isDarkMode ? 'text-white' : 'text-gray-900'
+          ]"
+        >
+          登录
+        </h2>
+      </div>
+      <form class="mt-8 space-y-6" @submit.prevent="handleSubmit">
+        <input type="hidden" name="remember" value="true" />
+        <div class="rounded-md shadow-sm -space-y-px">
+          <div>
+            <label for="password" class="sr-only">密码</label>
+            <input
+              id="password"
+              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="密码"
+            />
+          </div>
+        </div>
+        <div>
+          <button
+            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"
+          >
+            <span class="absolute left-0 inset-y-0 flex items-center pl-3"> </span>
+            {{ isLoading ? '登录中...' : '登录' }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, inject } from 'vue'
+import { BoxIcon } from 'lucide-vue-next'
+import api from '@/utils/api'
+import { useAlertStore } from '@/stores/alertStore'
+import { useAdminData } from '@/stores/adminStore'
+import { useRouter } from 'vue-router'
+const alertStore = useAlertStore()
+const password = ref('')
+const isLoading = ref(false)
+const isDarkMode = inject('isDarkMode')
+const adminStore = useAdminData()
+const validateForm = () => {
+  let isValid = true
+  if (!password.value) {
+    alertStore.showAlert('无效的密码', 'error')
+    isValid = false
+  } else if (password.value.length < 6) {
+    alertStore.showAlert('密码长度至少为6位', 'error')
+    isValid = false
+  }
+  return isValid
+}
+
+const router = useRouter()
+
+const handleSubmit = async () => {
+  if (!validateForm()) return
+  adminStore.updateAdminPwd(password.value)
+  api
+    .post('/admin/login', { password: password.value })
+    .then(() => {
+      router.push('/admin')
+    })
+    .catch((error: any) => {
+      alertStore.showAlert(error.response.data.detail, 'error')
+    })
+  isLoading.value = true
+  try {
+    await new Promise((resolve) => setTimeout(resolve, 2000))
+    // 处理登录成功
+  } catch (error) {
+    // 处理错误
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
+
+<style scoped>
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin-slow {
+  animation: spin 8s linear infinite;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+input:focus {
+  box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
+}
+
+button:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.cyber-grid {
+  background-image: linear-gradient(transparent 95%, rgba(99, 102, 241, 0.1) 50%),
+    linear-gradient(90deg, transparent 95%, rgba(99, 102, 241, 0.1) 50%);
+  background-size: 30px 30px;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  opacity: 0.5;
+}
+
+.floating-particles {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at center, transparent 0%, transparent 100%);
+  filter: url(#gooey);
+}
+
+.floating-particles::before,
+.floating-particles::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
+  animation: float 20s infinite linear;
+}
+
+.floating-particles::after {
+  animation-delay: -10s;
+  opacity: 0.5;
+}
+
+@keyframes float {
+  0% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(50px, 50px) scale(1.5);
+  }
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+}
+
+button:hover:not(:disabled) {
+  box-shadow: 0 0 25px rgba(99, 102, 241, 0.5);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>
diff --git a/src/views/ManageView.vue b/src/views/ManageView.vue
index 812762b..52eec51 100644
--- a/src/views/ManageView.vue
+++ b/src/views/ManageView.vue
@@ -631,7 +631,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, inject, onMounted, onUnmounted, computed, watch } from 'vue'
+import { ref, inject, onMounted, onUnmounted, computed } from 'vue'
 import {
   BoxIcon,
   MenuIcon,
diff --git a/src/views/RetrievewFileView.vue b/src/views/RetrievewFileView.vue
index 9a629c2..9a7f944 100644
--- a/src/views/RetrievewFileView.vue
+++ b/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>
diff --git a/src/views/SendFileView.vue b/src/views/SendFileView.vue
index d3f7b0d..f543119 100644
--- a/src/views/SendFileView.vue
+++ b/src/views/SendFileView.vue
@@ -662,9 +662,13 @@ const handleSubmit = async () => {
     } else {
       throw new Error('服务器响应异常')
     }
-  } catch (error) {
+  } catch (error: any) {
     console.error('发送失败:', error)
-    alertStore.showAlert('发送失败,请稍后重试', 'error')
+    if (error.response.data.detail) {
+      alertStore.showAlert(error.response.data.detail, 'error')
+    } else {
+      alertStore.showAlert('发送失败,请稍后重试', 'error')
+    }
   } finally {
     // 确保无论成功还是失败,最后都重置进度条
     uploadProgress.value = 0
diff --git a/src/views/manage/DashboardView.vue b/src/views/manage/DashboardView.vue
new file mode 100644
index 0000000..9f5f9fb
--- /dev/null
+++ b/src/views/manage/DashboardView.vue
@@ -0,0 +1,257 @@
+<template>
+  <div>
+    <h2 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
+        class="p-6 rounded-lg shadow-md transition-colors duration-300"
+        :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
+              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
+              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']">
+          <span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">昨天：</span>
+          <span>{{ dashboardData.yesterdayCount }} </span>
+          <span class="ml-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">今天：</span>
+          <span>{{ dashboardData.todayCount }} </span>
+        </p>
+      </div>
+
+      <div
+        class="p-6 rounded-lg shadow-md transition-colors duration-300"
+        :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
+              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
+              class="w-6 h-6"
+              :class="[isDarkMode ? 'text-purple-400' : 'text-purple-600']"
+            />
+          </div>
+        </div>
+
+        <p class="text-sm mt-2" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']">
+          <span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">昨天：</span>
+          <span>{{ dashboardData.yesterdaySize }} </span>
+          <span class="ml-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">今天：</span>
+          <span>{{ dashboardData.todaySize }} </span>
+        </p>
+      </div>
+
+      <div
+        class="p-6 rounded-lg shadow-md transition-colors duration-300"
+        :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
+              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
+              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']">
+          <span>↓ 5% </span>
+          <span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">较上周</span>
+        </p>
+      </div>
+
+      <div
+        class="p-6 rounded-lg shadow-md transition-colors duration-300"
+        :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
+              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
+              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']">
+          服务器运行时间: {{ dashboardData.sysUptime }}
+        </p>
+      </div>
+    </div>
+
+    <!-- 最近活动 -->
+    <div
+      class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
+      :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="p-6">
+        <div class="space-y-4">
+          <div
+            v-for="(activity, index) in recentActivities"
+            :key="index"
+            class="flex items-center space-x-4"
+          >
+            <div class="flex-shrink-0">
+              <component
+                :is="activity.icon"
+                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']">
+                {{ activity.description }}
+              </p>
+              <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
+                {{ activity.time }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, reactive } from 'vue'
+import {
+  FileIcon,
+  HardDriveIcon,
+  UsersIcon,
+  ActivityIcon,
+  UploadIcon,
+  TrashIcon,
+  UserIcon
+} from 'lucide-vue-next'
+const isDarkMode = inject('isDarkMode')
+import api from '@/utils/api'
+
+const dashboardData: any = reactive({
+  totalFiles: 0,
+  storageUsed: 0,
+  yesterdayCount: 0,
+  todayCount: 0,
+  yesterdaySize: 0,
+  todaySize: 0,
+  sysUptime: 0
+})
+
+// 添加最近活动数据
+const recentActivities = [
+  {
+    icon: UploadIcon,
+    description: '张三上传了文件 "项目计划.pdf"',
+    time: '10分钟前'
+  },
+  {
+    icon: UserIcon,
+    description: '新用户李四加入了系统',
+    time: '30分钟前'
+  },
+  {
+    icon: TrashIcon,
+    description: '王五删除了文件 "旧文档.doc"',
+    time: '1小时前'
+  },
+  {
+    icon: FileIcon,
+    description: '系统自动备份完成',
+    time: '2小时前'
+  }
+]
+
+const getSysUptime = (startTimestamp: number) => {
+  const now = new Date().getTime()
+  const uptime = now - startTimestamp
+  const days = Math.floor(uptime / (24 * 60 * 60 * 1000))
+  const hours = Math.floor((uptime % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000))
+  return `${days}天${hours}小时`
+}
+
+const getLocalstorageUsed = (nowUsedBit: string) => {
+  const kb = parseInt(nowUsedBit) / 1024
+  const mb = kb / 1024
+  const gb = mb / 1024
+  const tb = gb / 1024
+  // 根据大小选择合适的单位
+  if (tb > 1) {
+    return `${tb.toFixed(2)}TB`
+  } else if (gb > 1) {
+    return `${gb.toFixed(2)}GB`
+  } else if (mb > 1) {
+    return `${mb.toFixed(2)}MB`
+  } else if (kb > 1) {
+    return `${kb.toFixed(2)}KB`
+  } else {
+    return `${nowUsedBit}B`
+  }
+}
+const getDashboardData = async () => {
+  const response: any = await api.get('/admin/dashboard')
+  dashboardData.totalFiles = response.detail.totalFiles
+  dashboardData.storageUsed = getLocalstorageUsed(response.detail.storageUsed)
+  dashboardData.yesterdaySize = getLocalstorageUsed(response.detail.yesterdaySize)
+  dashboardData.todaySize = getLocalstorageUsed(response.detail.todaySize)
+  dashboardData.yesterdayCount = response.detail.yesterdayCount
+  dashboardData.todayCount = response.detail.todayCount
+  dashboardData.sysUptime = getSysUptime(response.detail.sysUptime)
+}
+
+onMounted(() => {
+  getDashboardData()
+})
+</script>
diff --git a/src/views/manage/FileManageView.vue b/src/views/manage/FileManageView.vue
new file mode 100644
index 0000000..a118031
--- /dev/null
+++ b/src/views/manage/FileManageView.vue
@@ -0,0 +1,369 @@
+<template>
+  <div>
+    <h2 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+      文件管理
+    </h2>
+
+    <!-- 添加文件操作栏 -->
+    <div 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
+            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="搜索文件..."
+          />
+          <SearchIcon
+            class="absolute left-3 top-2.5 w-5 h-5"
+            :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
+          />
+        </div>
+
+        <select
+          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"
+        >
+          <option value="">所有类型</option>
+          <option value="PDF">PDF</option>
+          <option value="Image">图片</option>
+          <option value="Video">视频</option>
+          <option value="Document">文档</option>
+        </select>
+      </div>
+
+      <!-- 上传按钮 -->
+      <div class="flex gap-4">
+        <button
+          @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"
+        >
+          <UploadIcon class="w-5 h-5 mr-2" />
+          上传文件
+        </button>
+        <input ref="fileInput" type="file" multiple class="hidden" @change="handleFileUpload" />
+      </div>
+    </div>
+
+    <!-- 拖拽上传区域 -->
+    <div
+      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"
+      @dragover.prevent="showDropZone = true"
+      @dragleave.prevent="showDropZone = false"
+    >
+      <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
+      class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
+      :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
+          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
+                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']"
+              >
+                {{ header }}
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            :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
+                    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.name }}
+                  </span>
+                </div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
+                  {{ file.size }}
+                </span>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
+                  {{ file.type }}
+                </span>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
+                  {{ file.lastModified }}
+                </span>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                <button
+                  @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
+                  @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>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- 在文件列表表格下方添加分页组件 -->
+    <div
+      class="mt-4 flex items-center justify-between px-6 py-3 border-t"
+      :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
+    >
+      <!-- 分页信息 -->
+      <div
+        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>
+
+      <!-- 分页控制器 -->
+      <div class="flex items-center space-x-2">
+        <!-- 上一页 -->
+        <button
+          @click="handlePageChange(params.page - 1)"
+          :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'
+                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+              : 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
+              v-if="pageNum !== '...'"
+              @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']">
+              ...
+            </span>
+          </template>
+        </div>
+
+        <!-- 下一页 -->
+        <button
+          @click="handlePageChange(params.page + 1)"
+          :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'
+                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+              : params.page >= totalPages
+                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+          ]"
+        >
+          下一页
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, ref, computed } from 'vue'
+const isDarkMode = inject('isDarkMode')
+
+// 新增的响应式变量
+const fileSearchQuery = ref('')
+const fileTypeFilter = ref('')
+const showDropZone = ref(false)
+
+const handleFileUpload = (event: Event) => {
+  const files = (event.target as HTMLInputElement).files
+  if (files && files.length > 0) {
+    console.log('Uploading files:', files)
+  }
+}
+
+interface File {
+  id: number
+  name: string
+  size: string
+  type: string
+  lastModified: string
+}
+
+const fileTableHeaders = ['名称', '大小', '类型', '最后修改', '操作']
+
+const files: File[] = [
+  { id: 1, name: 'document.pdf', size: '2.5 MB', type: 'PDF', lastModified: '2024-01-15' },
+  { id: 2, name: 'image.jpg', size: '1.8 MB', type: 'Image', lastModified: '2024-01-14' },
+  {
+    id: 3,
+    name: 'spreadsheet.xlsx',
+    size: '3.2 MB',
+    type: 'Spreadsheet',
+    lastModified: '2024-01-13'
+  },
+  {
+    id: 4,
+    name: 'presentation.pptx',
+    size: '5.1 MB',
+    type: 'Presentation',
+    lastModified: '2024-01-12'
+  },
+  { id: 5, name: 'video.mp4', size: '15.7 MB', type: 'Video', lastModified: '2024-01-11' }
+]
+
+const handleFileDrop = (event: any) => {
+  const files = (event.dataTransfer as DataTransfer).files
+  if (files && files.length > 0) {
+    console.log('Dropped files:', files)
+  }
+}
+
+// 分页参数
+const params = ref({
+  page: 1,
+  size: 10,
+  total: 0
+})
+
+// 计算总页数
+const totalPages = computed(() => Math.ceil(params.value.total / params.value.size))
+
+const downloadFile = (file: File) => {
+  console.log('Downloading file:', file.name)
+}
+
+const deleteFile = (file: File) => {
+  console.log('Deleting file:', file.name)
+}
+
+// 计算要显示的页码
+const displayedPages = computed(() => {
+  const current = params.value.page
+  const total = totalPages.value
+  const delta = 2 // 当前页码前后显示的页码数
+
+  let pages: (number | string)[] = []
+
+  // 始终显示第一页
+  pages.push(1)
+
+  // 计算显示范围
+  let left = Math.max(2, current - delta)
+  let right = Math.min(total - 1, current + delta)
+
+  // 添加省略号和页码
+  if (left > 2) {
+    pages.push('...')
+  }
+
+  for (let i = left; i <= right; i++) {
+    pages.push(i)
+  }
+
+  if (right < total - 1) {
+    pages.push('...')
+  }
+
+  // 始终显示最后一页
+  if (total > 1) {
+    pages.push(total)
+  }
+
+  return pages
+})
+
+// 页码改变处理函数
+const handlePageChange = async (page: any) => {
+  if (page < 1 || page > totalPages.value) return
+  params.value.page = page
+  await loadFiles() // 重新加载文件列表
+}
+
+// 加载文件列表
+const loadFiles = async () => {
+  try {
+    params.value.total = 85
+    // 更新文件列表数据...
+  } catch (error) {
+    console.error('加载文件列表失败:', error)
+    // 处理错误...
+  }
+}
+</script>
diff --git a/src/views/manage/SystemSettingsView.vue b/src/views/manage/SystemSettingsView.vue
new file mode 100644
index 0000000..b6aa6bd
--- /dev/null
+++ b/src/views/manage/SystemSettingsView.vue
@@ -0,0 +1,750 @@
+<script setup lang="ts">
+import { inject, ref } from 'vue'
+import api from '@/utils/api'
+
+const isDarkMode = inject('isDarkMode')
+interface ConfigState {
+  name: string
+  description: string
+  file_storage: string
+  expireStyle: string[]
+  admin_token: string
+  robotsText: string
+  keywords: string
+  notify_title: string
+  notify_content: string
+  openUpload: number
+  uploadSize: number
+  uploadMinute: number
+  max_save_seconds: number
+  opacity: number
+  s3_access_key_id: string
+  background: string
+  showAdminAddr: number
+  page_explain: string
+  s3_secret_access_key: string
+  aws_session_token: string
+  s3_signature_version: string
+  s3_region_name: string
+  s3_bucket_name: string
+  s3_endpoint_url: string
+  s3_hostname: string
+  uploadCount: number
+  errorMinute: number
+  errorCount: number
+}
+
+const config = ref<ConfigState>({
+  name: '',
+  description: '',
+  file_storage: '',
+  expireStyle: [],
+  admin_token: '',
+  robotsText: '',
+  keywords: '',
+  notify_title: '',
+  notify_content: '',
+  openUpload: 1,
+  uploadSize: 1,
+  uploadMinute: 1,
+  max_save_seconds: 0,
+  opacity: 0.9,
+  s3_access_key_id: '',
+  background: '',
+  showAdminAddr: 0,
+  page_explain: '',
+  s3_secret_access_key: '',
+  aws_session_token: '',
+  s3_signature_version: '',
+  s3_region_name: '',
+  s3_bucket_name: '',
+  s3_endpoint_url: '',
+  s3_hostname: '',
+  uploadCount: 1,
+  errorMinute: 1,
+  errorCount: 1
+})
+
+const fileSize = ref(1)
+const sizeUnit = ref('MB')
+
+// 添加保存时间相关的响应式变量
+const saveTime = ref(1)
+const saveTimeUnit = ref('天')
+
+// 转换时间为秒
+const convertToSeconds = (time: number, unit: string): number => {
+  const units = {
+    秒: 1,
+    分: 60,
+    时: 3600,
+    天: 86400
+  }
+  return time * units[unit as keyof typeof units]
+}
+
+const refreshData = () => {
+  api({
+    url: '/admin/config/get',
+    method: 'get'
+  }).then((res: any) => {
+    config.value = res.detail
+
+    // 将字节转换为合适的单位
+    let size = config.value.uploadSize
+    if (size >= 1024 * 1024 * 1024) {
+      fileSize.value = Math.round(size / (1024 * 1024 * 1024))
+      sizeUnit.value = 'GB'
+    } else if (size >= 1024 * 1024) {
+      fileSize.value = Math.round(size / (1024 * 1024))
+      sizeUnit.value = 'MB'
+    } else {
+      fileSize.value = Math.round(size / 1024)
+      sizeUnit.value = 'KB'
+    }
+
+    // 时间单位转换逻辑
+    let seconds = config.value.max_save_seconds
+    if (seconds === 0) {
+      // 如果是0，显示为7天
+      saveTime.value = 7
+      saveTimeUnit.value = '天'
+    } else if (seconds % 86400 === 0 && seconds >= 86400) {
+      saveTime.value = seconds / 86400
+      saveTimeUnit.value = '天'
+    } else if (seconds % 3600 === 0 && seconds >= 3600) {
+      saveTime.value = seconds / 3600
+      saveTimeUnit.value = '时'
+    } else if (seconds % 60 === 0 && seconds >= 60) {
+      saveTime.value = seconds / 60
+      saveTimeUnit.value = '分'
+    } else {
+      saveTime.value = seconds
+      saveTimeUnit.value = '秒'
+    }
+  })
+}
+// 转换文件大小为字节
+const convertToBytes = (size: number, unit: string): number => {
+  const units = {
+    KB: 1024,
+    MB: 1024 * 1024,
+    GB: 1024 * 1024 * 1024
+  }
+  return size * units[unit as keyof typeof units]
+}
+
+const submitSave = () => {
+  const formData = { ...config.value }
+  formData.uploadSize = convertToBytes(fileSize.value, sizeUnit.value)
+
+  // 如果保存时间为0，则默认设置为7天
+  if (saveTime.value === 0) {
+    formData.max_save_seconds = 7 * 86400 // 7天转换为秒
+  } else {
+    formData.max_save_seconds = convertToSeconds(saveTime.value, saveTimeUnit.value)
+  }
+
+  api({
+    url: '/admin/config/update',
+    method: 'patch',
+    data: formData
+  }).then((res: any) => {
+    if (res.code == 200) {
+      alert('保存成功')
+    } else {
+      alert(res.message)
+    }
+  })
+}
+
+refreshData()
+</script>
+
+<template>
+  <div class="p-6 h-screen overflow-y-auto custom-scrollbar">
+    <h2 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+      系统设置
+    </h2>
+
+    <div
+      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']">
+          基本设置
+        </h3>
+
+        <!-- 网基本信息 -->
+        <div class="grid grid-cols-1 gap-6">
+          <div class="space-y-2">
+            <label
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
+              网站名称
+            </label>
+            <input
+              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
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
+              网站描述
+            </label>
+            <input
+              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
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
+              管理员密码
+            </label>
+            <div class="relative">
+              <input
+                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"
+                :class="[isDarkMode ? 'text-gray-500' : 'text-gray-400']"
+              >
+                <span class="text-xs">留空则不修改</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="space-y-2">
+            <label
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
+              关键词
+            </label>
+            <input
+              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
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
+              Robots.txt
+            </label>
+            <textarea
+              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>
+          </div>
+        </div>
+
+        <!-- 通知设置 -->
+        <div class="grid grid-cols-1 gap-6 mt-8">
+          <div class="space-y-2">
+            <label
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
+              通知标题
+            </label>
+            <input
+              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
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
+              通知内容
+            </label>
+            <textarea
+              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>
+          </div>
+        </div>
+
+        <!-- 存储设置 -->
+        <div class="mt-8">
+          <h3
+            class="text-lg font-medium mb-4"
+            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
+          >
+            存储设置
+          </h3>
+
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <label
+                class="block text-sm font-medium"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+              >
+                存储方式
+              </label>
+              <select
+                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="
+                  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>
+              </select>
+            </div>
+
+            <!-- S3 配置 -->
+            <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
+                    class="block text-sm font-medium"
+                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                  >
+                    S3 AccessKeyId
+                  </label>
+                  <input
+                    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
+                    class="block text-sm font-medium"
+                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                  >
+                    S3 SecretAccessKey
+                  </label>
+                  <input
+                    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
+                    class="block text-sm font-medium"
+                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                  >
+                    S3 BucketName
+                  </label>
+                  <input
+                    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
+                    class="block text-sm font-medium"
+                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                  >
+                    S3 EndpointUrl
+                  </label>
+                  <input
+                    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>
+            </div>
+          </div>
+        </div>
+
+        <!-- 上传限制 -->
+        <div class="mt-8">
+          <h3
+            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
+                class="block text-sm font-medium"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+              >
+                每分钟上传限制
+              </label>
+              <div class="flex items-center space-x-2">
+                <input
+                  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
+                class="block text-sm font-medium"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+              >
+                上传数量限制
+              </label>
+              <div class="flex items-center space-x-2">
+                <input
+                  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
+                class="block text-sm font-medium"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+              >
+                文件大小限制
+              </label>
+              <div class="flex items-center space-x-2">
+                <input
+                  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"
+                  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>
+                </select>
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <label
+                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
+                  v-for="style in ['day', 'hour', 'minute', 'forever', 'count']"
+                  :key="style"
+                  class="relative inline-flex items-center group cursor-pointer"
+                >
+                  <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'
+                          : 'bg-indigo-600 border-indigo-600 text-white'
+                        : 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: '按天',
+                        hour: '按小时',
+                        minute: '按分钟',
+                        forever: '永久',
+                        count: '按次数'
+                      }[style]
+                    }}
+                  </div>
+                </label>
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <label
+                class="block text-sm font-medium"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+              >
+                最长保存时间
+              </label>
+              <div class="flex items-center space-x-2">
+                <input
+                  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"
+                  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>
+                  <option value="天">天</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <label
+                class="block text-sm font-medium mb-2"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+              >
+                游客上传
+              </label>
+              <div class="flex items-center">
+                <button
+                  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']"
+                  role="switch"
+                  :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
+                  class="ml-3 text-sm"
+                  :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                >
+                  {{ config.openUpload === 1 ? '已开启' : '已关闭' }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 错误限制 -->
+        <div class="mt-8">
+          <h3
+            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
+                class="block text-sm font-medium"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+              >
+                每分钟错误限制
+              </label>
+              <div class="flex items-center space-x-2">
+                <input
+                  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
+                class="block text-sm font-medium"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+              >
+                错误次数限制
+              </label>
+              <div class="flex items-center space-x-2">
+                <input
+                  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>
+          </div>
+        </div>
+
+        <!-- 保存按钮 -->
+        <div class="flex justify-end mt-8">
+          <button
+            @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"
+          >
+            保存设置
+          </button>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+<style scoped>
+.custom-scrollbar {
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #cbd5e0;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: #a0aec0;
+    }
+  }
+
+  /* 适配暗黑模式 */
+  :deep(.dark &::-webkit-scrollbar-thumb) {
+    background-color: #4a5568;
+
+    &:hover {
+      background-color: #2d3748;
+    }
+  }
+}
+
+/* 确保内容区域不会被截断 */
+.space-y-6 {
+  margin-bottom: 5rem;
+}
+</style>