dark and light

src/App.vue

@@ -1,12 +1,25 @@
 <script setup lang="ts">
+import { ref, watchEffect, provide } from 'vue'
 import { RouterView } from 'vue-router'
+import ThemeToggle from './components/ThemeToggle.vue'
+
+const isDarkMode = ref(false)
+
+watchEffect(() => {
+  document.documentElement.classList.toggle('dark', isDarkMode.value)
+})
+
+provide('isDarkMode', isDarkMode)
 </script>
 
 <template>
-  <div  class="app-container bg-gradient-to-br from-gray-900 via-indigo-900 to-black overflow-hidden">
+  <div :class="['app-container', isDarkMode ? 'dark' : 'light']">
-    <transition name="page" mode="out-in">
+    <ThemeToggle v-model="isDarkMode" />
-      <RouterView />
+    <RouterView v-slot="{ Component }">
+      <transition name="fade" mode="out-in">
+        <component :is="Component" :key="$route.fullPath" />
       </transition>
+    </RouterView>
   </div>
 </template>
 
@@ -18,44 +31,24 @@ import { RouterView } from 'vue-router'
   width: 100%;
   height: 100%;
   overflow: hidden;
+  transition: background-color 0.5s ease;
 }
 
-.page-enter-active,
+.light {
-.page-leave-active {
+  @apply bg-gradient-to-br from-blue-50 via-indigo-50 to-white;
-  transition: all 0.5s ease-out;
 }
 
-.page-enter-from {
+.dark {
+  @apply bg-gradient-to-br from-gray-900 via-indigo-900 to-black;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
-  transform: translateY(20px);
-}
-
-.page-leave-to {
-  opacity: 0;
-  transform: translateY(-20px);
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: 'Inter', sans-serif;
-  @apply bg-gray-900 text-white overflow-y-auto;
-}
-
-/* 自定义滚动条样式 */
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  @apply bg-gray-800;
-}
-
-::-webkit-scrollbar-thumb {
-  @apply bg-indigo-600 rounded-full;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  @apply bg-indigo-500;
 }
 </style>

src/components/ThemeToggle.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SunIcon, MoonIcon } from 'lucide-vue-next'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const isDarkMode = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+</script>
+
+<template>
+  <button
+    @click="isDarkMode = !isDarkMode"
+    class="fixed top-4 right-4 p-2 rounded-full transition-all duration-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transform hover:rotate-180"
+    :class="isDarkMode ? 'bg-gray-800 text-yellow-300' : 'bg-white text-gray-800'"
+  >
+    <SunIcon v-if="!isDarkMode" class="w-6 h-6" />
+    <MoonIcon v-else class="w-6 h-6" />
+  </button>
+</template>

src/views/RetrievewFileView.vue

@@ -1,23 +1,14 @@
 <template>
-  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 via-indigo-900 to-black p-4 overflow-hidden">
+  <div class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300">
-    <div class="absolute inset-0 overflow-hidden">
-      <div v-for="(blob, index) in blobs" :key="index" 
-           :class="[
-             'absolute rounded-full mix-blend-multiply filter blur-3xl opacity-20',
-             `animate-blob-${index + 1}`,
-             `bg-${blob.color}-500`,
-             `w-${blob.size} h-${blob.size}`
-           ]"
-           :style="{
-             left: `${blob.left}%`,
-             top: `${blob.top}%`,
-             animationDelay: `${index * 2}s`
-           }"
-      ></div>
-    </div>
-    
     <div class="w-full max-w-md relative z-10">
-      <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-xl rounded-3xl shadow-2xl overflow-hidden border border-gray-700 transform transition-all duration-300 ">
+      <div 
+        class="rounded-3xl shadow-2xl overflow-hidden border transform transition-all duration-300"
+        :class="[
+          isDarkMode 
+            ? 'bg-gray-800 bg-opacity-50 backdrop-filter backdrop-blur-xl border-gray-700' 
+            : 'bg-white border-gray-200'
+        ]"
+      >
         <div class="p-8">
           <div class="flex justify-center mb-8">
             <div class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow">
@@ -26,17 +17,17 @@
               </div>
             </div>
           </div>
-          <h2 class="text-3xl font-extrabold text-center text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300 mb-6">FileCodeBox</h2>
+          <h2 class="text-3xl font-extrabold text-center mb-6" :class="[isDarkMode ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300' : 'text-indigo-600']">FileCodeBox</h2>
           <form @submit.prevent="handleSubmit">
             <div class="mb-6 relative">
-              <label for="password" class="block text-sm font-medium text-gray-300 mb-2">取件口令</label>
+              <label for="password" class="block text-sm font-medium mb-2" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">取件口令</label>
               <div class="relative">
                 <input
                   id="password"
                   v-model="password"
                   :type="showPassword ? 'text' : 'password'"
-                  class="w-full px-4 py-3 bg-gray-800 bg-opacity-50 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 pr-10"
+                  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="{ 'ring-2 ring-red-500': error }"
+                  :class="[isDarkMode ? 'bg-gray-700 bg-opacity-50' : 'bg-gray-100', { 'ring-2 ring-red-500': error }]"
                   placeholder="请输入您的口令"
                   required
                   @focus="isInputFocused = true"
@@ -73,12 +64,12 @@
             </router-link>
           </div>
         </div>
-        <div class="px-8 py-4 bg-gray-800 bg-opacity-50 flex justify-between items-center">
+        <div class="px-8 py-4 bg-opacity-50 flex justify-between items-center" :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']">
-          <span class="text-sm text-gray-300 flex items-center">
+          <span class="text-sm flex items-center" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
             <ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
             安全加密
           </span>
-          <button @click="toggleDrawer" class="text-sm text-indigo-400 hover:text-indigo-300 transition duration-300 flex items-center">
+          <button @click="toggleDrawer" class="text-sm hover:text-indigo-300 transition duration-300 flex items-center" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']">
             取件记录
             <ClipboardListIcon class="w-4 h-4 ml-1" />
           </button>
@@ -88,25 +79,25 @@
 
     <!-- 抽屉式取件记录 -->
     <transition name="drawer">
-      <div v-if="showDrawer" class="fixed inset-y-0 right-0 w-full sm:w-96 bg-gray-900 bg-opacity-95 backdrop-filter backdrop-blur-lg shadow-2xl z-50 overflow-hidden flex flex-col">
+      <div v-if="showDrawer" class="fixed inset-y-0 right-0 w-full sm:w-96 bg-opacity-95 backdrop-filter backdrop-blur-lg 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 border-gray-700">
+        <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 text-white">取件记录</h3>
+          <h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">取件记录</h3>
-          <button @click="toggleDrawer" class="text-gray-400 hover:text-white transition duration-300">
+          <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-gray-800 bg-opacity-50 rounded-lg p-4 flex justify-between items-center">
+            <div v-for="record in records" :key="record.id" class="bg-opacity-50 rounded-lg p-4 flex justify-between items-center" :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']">
               <div>
-                <p class="text-white font-medium">{{ record.filename }}</p>
+                <p class="font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">{{ record.filename }}</p>
-                <p class="text-gray-400 text-sm">{{ record.date }}</p>
+                <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">{{ record.date }}</p>
               </div>
               <div class="flex space-x-2">
-                <button @click="viewDetails(record)" class="text-indigo-400 hover:text-indigo-300 transition duration-300">
+                <button @click="viewDetails(record)" class="hover:text-indigo-300 transition duration-300" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']">
                   <EyeIcon class="w-5 h-5" />
                 </button>
-                <button @click="deleteRecord(record.id)" class="text-red-400 hover:text-red-300 transition duration-300">
+                <button @click="deleteRecord(record.id)" class="hover:text-red-300 transition duration-300" :class="[isDarkMode ? 'text-red-400' : 'text-red-600']">
                   <TrashIcon class="w-5 h-5" />
                 </button>
               </div>
@@ -119,11 +110,11 @@
     <!-- 帮助弹窗 -->
     <transition name="fade">
       <div v-if="showHelp" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        <div class="bg-gray-800 p-6 rounded-lg max-w-md w-full mx-4">
+        <div class="p-6 rounded-lg max-w-md w-full mx-4" :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
-          <h3 class="text-xl font-bold text-white mb-4">需要帮助？</h3>
+          <h3 class="text-xl font-bold mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">需要帮助？</h3>
-          <p class="text-gray-300 mb-4">如果您遇到任何问题或需要协助，请联系我们的客户支持团队。我们将很乐意为您提供帮助。</p>
+          <p class="mb-4" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">如果您遇到任何问题或需要协助，请联系我们的客户支持团队。我们将很乐意为您提供帮助。</p>
-          <p class="text-gray-300 mb-4">客服热线：400-123-4567</p>
+          <p class="mb-4" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">客服热线：400-123-4567</p>
-          <p class="text-gray-300 mb-4">电子邮箱：support@example.com</p>
+          <p class="mb-4" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">电子邮箱：support@example.com</p>
           <button @click="showHelp = false" class="bg-indigo-500 text-white px-4 py-2 rounded hover:bg-indigo-600 transition duration-300">关闭</button>
         </div>
       </div>
@@ -132,12 +123,12 @@
     <!-- 记录详情弹窗 -->
     <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="bg-gray-800 p-6 rounded-lg max-w-md w-full mx-4">
+        <div class="p-6 rounded-lg max-w-md w-full mx-4" :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
-          <h3 class="text-xl font-bold text-white mb-4">文件详情</h3>
+          <h3 class="text-xl font-bold mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">文件详情</h3>
-          <p class="text-gray-300 mb-2"><span class="font-medium">文件名：</span>{{ selectedRecord.filename }}</p>
+          <p class="mb-2" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"><span class="font-medium">文件名：</span>{{ selectedRecord.filename }}</p>
-          <p class="text-gray-300 mb-2"><span class="font-medium">取件日期：</span>{{ selectedRecord.date }}</p>
+          <p class="mb-2" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"><span class="font-medium">取件日期：</span>{{ selectedRecord.date }}</p>
-          <p class="text-gray-300 mb-2"><span class="font-medium">文件大小：</span>{{ selectedRecord.size }}</p>
+          <p class="mb-2" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"><span class="font-medium">文件大小：</span>{{ selectedRecord.size }}</p>
-          <p class="text-gray-300 mb-4"><span class="font-medium">下载次数：</span>{{ selectedRecord.downloads }}</p>
+          <p class="mb-4" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"><span class="font-medium">下载次数：</span>{{ selectedRecord.downloads }}</p>
           <button @click="selectedRecord = null" class="bg-indigo-500 text-white px-4 py-2 rounded hover:bg-indigo-600 transition duration-300">关闭</button>
         </div>
       </div>
@@ -146,28 +137,21 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, inject } from 'vue'
 import { LockIcon, EyeIcon, EyeOffIcon, ArrowRightIcon, ShieldCheckIcon, ClipboardListIcon, XIcon, TrashIcon } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
+const isDarkMode = inject('isDarkMode')
 
 const password = ref('')
 const showPassword = ref(false)
 const isInputFocused = ref(false)
-const rememberPassword = ref(false)
 const error = ref('')
 const showHelp = ref(false)
 const selectedRecord = ref(null)
 const showDrawer = ref(false)
 
-const blobs = reactive([
-  { color: 'indigo', size: '96', left: 50, top: 50 },
-  { color: 'purple', size: '80', left: 30, top: 30 },
-  { color: 'pink', size: '88', left: 70, top: 70 },
-  { color: 'blue', size: '72', left: 20, top: 80 },
-])
-
 const records = ref([
   { id: 1, filename: '重要文档.pdf', date: '2023-05-15', size: '2.5 MB', downloads: 3 },
   { id: 2, filename: '会议记录.docx', date: '2023-05-10', size: '1.2 MB', downloads: 2 },

src/views/SendFileView.vue

@@ -1,10 +1,20 @@
 <template>
-  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 via-indigo-900 to-black p-4 overflow-hidden">
+  <div class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300">
     <div
-      class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-xl rounded-3xl shadow-2xl overflow-hidden border border-gray-700 p-8 w-full max-w-md"
+      class="rounded-3xl shadow-2xl overflow-hidden border p-8 w-full max-w-md transition-colors duration-300"
+      :class="[
+        isDarkMode 
+          ? 'bg-white bg-opacity-10 backdrop-filter backdrop-blur-xl border-gray-700' 
+          : 'bg-white border-gray-200'
+      ]"
     >
       <h2
-        class="text-3xl font-extrabold text-center text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300 mb-8 cursor-pointer"
+        class="text-3xl font-extrabold text-center mb-8 cursor-pointer transition-colors duration-300"
+        :class="[
+          isDarkMode
+            ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
+            : 'text-indigo-600'
+        ]"
         @click="toRetrieve" 
       >
         FileCodeBox
@@ -38,7 +48,12 @@
           <!-- 文件上传区域 -->
           <div
             v-if="sendType === 'file'"
-          class="bg-gray-800 bg-opacity-50 rounded-xl p-6 flex flex-col items-center justify-center border-2 border-dashed border-gray-600 transition-all duration-300 hover:border-indigo-500 group cursor-pointer"
+            class="rounded-xl p-6 flex flex-col items-center justify-center border-2 border-dashed transition-all duration-300 group cursor-pointer"
+            :class="[
+              isDarkMode
+                ? 'bg-gray-800 bg-opacity-50 border-gray-600 hover:border-indigo-500'
+                : 'bg-gray-100 border-gray-300 hover:border-indigo-500'
+            ]"
             @click="triggerFileUpload"
             @dragover.prevent
             @drop.prevent="handleFileDrop"
@@ -51,26 +66,43 @@
               ref="fileInput"
             />
             <UploadCloudIcon
-            class="w-16 h-16 text-gray-400 group-hover:text-indigo-400 transition-colors duration-300"
+              :class="[
+                'w-16 h-16 transition-colors duration-300',
+                isDarkMode
+                  ? 'text-gray-400 group-hover:text-indigo-400'
+                  : 'text-gray-600 group-hover:text-indigo-600'
+              ]"
             />
             <p
-            class="mt-4 text-sm text-gray-400 group-hover:text-indigo-400 transition-colors duration-300"
+              :class="[
+                'mt-4 text-sm transition-colors duration-300',
+                isDarkMode
+                  ? 'text-gray-400 group-hover:text-indigo-400'
+                  : 'text-gray-600 group-hover:text-indigo-600'
+              ]"
             >
               {{ selectedFile ? selectedFile.name : '点击或拖放文件到此处上传' }}
             </p>
-          <p class="mt-2 text-xs text-gray-500">支持各种常见格式，最大20MB</p>
+            <p :class="['mt-2 text-xs', isDarkMode ? 'text-gray-500' : 'text-gray-400']">
+              支持各种常见格式，最大20MB
+            </p>
           </div>
 
           <!-- 文本输入区域 -->
           <div v-if="sendType === 'text'" class="flex flex-col">
-          <label for="text-content" class="text-sm font-medium text-gray-300 mb-2">
+            <label for="text-content" :class="['text-sm font-medium mb-2', isDarkMode ? 'text-gray-300' : 'text-gray-700']">
               文本内容
             </label>
             <textarea
               id="text-content"
               v-model="textContent"
               rows="8"
-            class="flex-grow px-4 py-3 bg-gray-800 bg-opacity-50 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 resize-none"
+              :class="[
+                'flex-grow px-4 py-3 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 resize-none',
+                isDarkMode
+                  ? 'bg-gray-800 bg-opacity-50 text-white'
+                  : 'bg-white text-gray-900 border border-gray-300'
+              ]"
               placeholder="在此输入要发送的文本..."
             ></textarea>
           </div>
@@ -78,10 +110,15 @@
 
         <!-- 过期方式选择 -->
         <div class="flex flex-col space-y-4">
-        <label class="text-sm font-medium text-gray-300">过期方式</label>
+          <label :class="['text-sm font-medium', isDarkMode ? 'text-gray-300' : 'text-gray-700']">过期方式</label>
           <select
             v-model="expirationMethod"
-          class="px-4 py-2 bg-gray-800 bg-opacity-50 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            :class="[
+              'px-4 py-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500',
+              isDarkMode
+                ? 'bg-gray-800 bg-opacity-50 text-white'
+                : 'bg-white text-gray-900 border border-gray-300'
+            ]"
           >
             <option value="time">按时间</option>
             <option value="views">按查看次数</option>
@@ -91,14 +128,24 @@
             v-model="expirationTime"
             type="number"
             placeholder="过期时间（小时）"
-          class="px-4 py-2 bg-gray-800 bg-opacity-50 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            :class="[
+              'px-4 py-2 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500',
+              isDarkMode
+                ? 'bg-gray-800 bg-opacity-50 text-white'
+                : 'bg-white text-gray-900 border border-gray-300'
+            ]"
           />
           <input
             v-if="expirationMethod === 'views'"
             v-model="expirationViews"
             type="number"
             placeholder="查看次数"
-          class="px-4 py-2 bg-gray-800 bg-opacity-50 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            :class="[
+              'px-4 py-2 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500',
+              isDarkMode
+                ? 'bg-gray-800 bg-opacity-50 text-white'
+                : 'bg-white text-gray-900 border border-gray-300'
+            ]"
           />
         </div>
         <!-- 提交按钮 -->
@@ -124,13 +171,19 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed, inject } from 'vue'
 import { UploadCloudIcon, SendIcon } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+// 修改这里：使用 inject 来获取 isDarkMode
+const isDarkMode = inject('isDarkMode')
+
 const sendType = ref('file')
-const selectedFile = ref(null)
+const selectedFile:any = ref(null)
 const textContent = ref('')
-const fileInput = ref(null)
+const fileInput:any = ref(null)
 const expirationMethod = ref('time')
 const expirationTime = ref('')
 const expirationViews = ref('')
@@ -138,11 +191,11 @@ const triggerFileUpload = () => {
   fileInput.value.click()
 }
 
-const handleFileUpload = (event) => {
+const handleFileUpload = (event:any) => {
   selectedFile.value = event.target.files[0]
 }
 
-const handleFileDrop = (event) => {
+const handleFileDrop = (event:any) => {
   selectedFile.value = event.dataTransfer.files[0]
 }
 const handleSubmit = () => {
@@ -171,4 +224,8 @@ const handleSubmit = () => {
   console.log('Expiration Time:', expirationTime.value)
   console.log('Expiration Views:', expirationViews.value)
 }
+
+const toRetrieve = () => {
+  router.push('/')
+}
 </script>