1

src/App.vue

@@ -2,12 +2,27 @@
 import { ref, watchEffect, provide, onMounted } from 'vue'
 import { RouterView } from 'vue-router'
 import ThemeToggle from './components/ThemeToggle.vue'
+import AlertComponent from './components/AlertComponent.vue'
 import { useRouter } from 'vue-router'
-
+import api from './utils/api'
 const isDarkMode = ref(false)
 const isLoading = ref(false)
 const router = useRouter()
 
+const showAlert = ref(false)
+const alertMessage = ref('')
+const alertType = ref('success')
+const closeAlert = () => {
+  showAlert.value = false
+}
+const showAlertMessage = (
+  message: string,
+  type: 'success' | 'error' | 'warning' | 'info' = 'success'
+) => {
+  alertMessage.value = message
+  alertType.value = type
+  showAlert.value = true
+}
 // 检查系统颜色模式
 const checkSystemColorScheme = () => {
   return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -35,6 +50,19 @@ onMounted(() => {
   } else {
     setColorMode(checkSystemColorScheme())
   }
+  api.post('/', {}).then((res: any) => {
+    if (res.code === 200) {
+      localStorage.setItem('config', JSON.stringify(res.detail))
+      if (
+        res.detail.notify_title &&
+        res.detail.notify_content &&
+        localStorage.getItem('notify') !== res.detail.notify_title + res.detail.notify_content
+      ) {
+        localStorage.setItem('notify', res.detail.notify_title + res.detail.notify_content)
+        showAlertMessage(res.detail.notify_title + ': ' + res.detail.notify_content, 'success')
+      }
+    }
+  })
 })
 
 watchEffect(() => {
@@ -68,6 +96,12 @@ provide('isLoading', isLoading)
         <component :is="Component" :key="$route.fullPath" />
       </transition>
     </RouterView>
+    <AlertComponent
+      :show="showAlert"
+      :message="alertMessage"
+      :type="alertType"
+      @close="closeAlert"
+    />
   </div>
 </template>
 
@@ -123,7 +157,11 @@ provide('isLoading', isLoading)
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 </style>

src/assets/style/main.css

@@ -4,7 +4,7 @@
 
 @font-face {
   font-family: 'DingTalk';
-  src: url('../assets/font/DingTalk.ttf') format('truetype');
+  src: url('@/assets/font/DingTalk.ttf') format('truetype');
 }
 
 * {

src/components/AlertComponent.vue

@@ -1,10 +1,12 @@
 <template>
   <transition name="alert-fade">
     <div v-if="show" class="fixed top-4 right-4 max-w-sm w-full z-50">
-      <div :class="[
-        'rounded-lg shadow-lg overflow-hidden transform transition-all duration-300',
-        alertTypeClasses[type]
-      ]">
+      <div
+        :class="[
+          'rounded-lg shadow-lg overflow-hidden transform transition-all duration-300',
+          alertTypeClasses[type]
+        ]"
+      >
         <div class="p-4">
           <div class="flex items-start">
             <div class="flex-shrink-0">
@@ -14,10 +16,13 @@
               <Info v-else class="h-6 w-6 text-white" />
             </div>
             <div class="ml-3 w-0 flex-1 pt-0.5">
-              <p class="text-sm font-medium text-white">{{ message }}</p>
+              <p class="text-sm font-medium text-white" v-html="message"></p>
             </div>
             <div class="ml-4 flex-shrink-0 flex">
-              <button @click="$emit('close')" class="inline-flex text-white hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white">
+              <button
+                @click="$emit('close')"
+                class="inline-flex text-white hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white"
+              >
                 <span class="sr-only">关闭</span>
                 <X class="h-5 w-5" />
               </button>
@@ -26,7 +31,10 @@
         </div>
         <div class="h-1 bg-white bg-opacity-25">
           <div
-            :class="['h-full transition-all duration-300 ease-out bg-white', { 'w-full': !autoClose }]"
+            :class="[
+              'h-full transition-all duration-300 ease-out bg-white',
+              { 'w-full': !autoClose }
+            ]"
             :style="{ width: `${progressWidth}%` }"
           ></div>
         </div>
@@ -36,8 +44,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
-import { CheckCircle, AlertTriangle, AlertCircle, Info, X } from 'lucide-vue-next';
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { CheckCircle, AlertTriangle, AlertCircle, Info, X } from 'lucide-vue-next'
 
 const props = defineProps({
   show: Boolean,
@@ -55,65 +63,70 @@ const props = defineProps({
     type: Boolean,
     default: true
   }
-});
+})
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(['close'])
 
-const alertTypeClasses: {[key: string]: string} = {
+const alertTypeClasses: { [key: string]: string } = {
   success: 'bg-green-500',
   error: 'bg-red-500',
   warning: 'bg-yellow-500',
   info: 'bg-blue-500'
-};
+}
 
-const progressWidth = ref(100);
-let timer: number | null = null;
+const progressWidth = ref(100)
+let timer: number | null = null
 
 const startTimer = () => {
   if (timer) {
-    clearInterval(timer);
+    clearInterval(timer)
   }
-  progressWidth.value = 100;
-  const startTime = Date.now();
-  const endTime = startTime + props.duration;
+  progressWidth.value = 100
+  const startTime = Date.now()
+  const endTime = startTime + props.duration
 
   timer = setInterval(() => {
-    const now = Date.now();
-    const remaining = endTime - now;
-    progressWidth.value = (remaining / props.duration) * 100;
+    const now = Date.now()
+    const remaining = endTime - now
+    progressWidth.value = (remaining / props.duration) * 100
 
     if (remaining <= 0) {
-      clearInterval(timer!);
-      emit('close');
+      clearInterval(timer!)
+      emit('close')
     }
-  }, 10);
-};
+  }, 10)
+}
 
-watch(() => props.show, (newValue) => {
-  if (newValue && props.autoClose) {
-    startTimer();
-  } else if (!newValue && timer) {
-    clearInterval(timer);
+watch(
+  () => props.show,
+  (newValue) => {
+    if (newValue && props.autoClose) {
+      startTimer()
+    } else if (!newValue && timer) {
+      clearInterval(timer)
+    }
   }
-});
+)
 
 onMounted(() => {
   if (props.show && props.autoClose) {
-    startTimer();
+    startTimer()
   }
-});
+})
 
 onUnmounted(() => {
   if (timer) {
-    clearInterval(timer);
+    clearInterval(timer)
   }
-});
+})
 </script>
 
 <style scoped>
 .alert-fade-enter-active,
 .alert-fade-leave-active {
-  transition: opacity 0.3s, transform 0.3s;
+  transition:
+    opacity 0.3s,
+    transform 0.3s;
 }
 
 .alert-fade-enter-from,
@@ -121,4 +134,4 @@ onUnmounted(() => {
   opacity: 0;
   transform: translateX(20px);
 }
-</style>
+</style>

src/main.ts

@@ -1,4 +1,4 @@
-import './assets/main.css'
+import './assets/style/main.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'

src/router/index.ts

@@ -1,5 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { defineAsyncComponent } from 'vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -12,7 +11,8 @@ const router = createRouter({
     {
       path: '/send',
       name: 'Send',
-      component: defineAsyncComponent(() => import('@/views/SendFileView.vue'))
+      // 直接使用动态导入，不再包裹在 defineAsyncComponent 中
+      component: () => import('@/views/SendFileView.vue')
     }
   ]
 })

src/utils/api.ts

@@ -35,7 +35,7 @@ api.interceptors.request.use(
 // 响应拦截器
 api.interceptors.response.use(
   (response) => {
-    return response
+    return response.data
   },
   (error) => {
     // 处理错误响应

src/views/SendFileView.vue

@@ -114,9 +114,9 @@
           </transition>
           <!-- 过期方式选择 -->
           <div class="flex flex-col space-y-4">
-            <label :class="['text-sm font-medium', isDarkMode ? 'text-gray-300' : 'text-gray-700']"
-              >过期方式</label
-            >
+            <label :class="['text-sm font-medium', isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+              过期方式
+            </label>
             <select
               v-model="expirationMethod"
               :class="[
@@ -126,33 +126,27 @@
                   : 'bg-white text-gray-900 border border-gray-300'
               ]"
             >
-              <option value="time">按时间</option>
-              <option value="views">按查看次数</option>
+              <option value="day">按天数</option>
+              <option value="hour">按小时</option>
+              <option value="minute">按分钟</option>
+              <option value="count">按查看次数</option>
             </select>
-            <input
-              v-if="expirationMethod === 'time'"
-              v-model="expirationTime"
-              type="number"
-              placeholder="过期时间（小时）"
-              :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 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 class="flex items-center space-x-2">
+              <input
+                v-model="expirationValue"
+                type="number"
+                :placeholder="getPlaceholder()"
+                :class="[
+                  'flex-grow 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'
+                ]"
+              />
+              <span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+                {{ getUnit() }}
+              </span>
+            </div>
           </div>
           <!-- 提交按钮 -->
           <button
@@ -403,6 +397,7 @@ import BorderProgressBar from '../components/BorderProgressBar.vue'
 import QRCode from 'qrcode.vue'
 import AlertComponent from '../components/AlertComponent.vue'
 import api from '../utils/api'
+
 const router = useRouter()
 const isDarkMode = inject('isDarkMode')
 
@@ -410,29 +405,12 @@ const sendType = ref('file')
 const selectedFile = ref<File | null>(null)
 const textContent = ref('')
 const fileInput = ref<HTMLInputElement | null>(null)
-const expirationMethod = ref('time')
-const expirationTime = ref('')
-const expirationViews = ref('')
+const expirationMethod = ref('day')
+const expirationValue = ref('')
 const uploadProgress = ref(0)
 const showDrawer = ref(false)
 const selectedRecord = ref<any>(null)
-api
-  .post('/', {
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    data: {
-      sendType: sendType.value,
-      selectedFile: selectedFile.value,
-      textContent: textContent.value,
-      expirationMethod: expirationMethod.value,
-      expirationTime: expirationTime.value,
-      expirationViews: expirationViews.value
-    }
-  })
-  .then((res) => {
-    console.log(res)
-  })
+
 const sendRecords = ref([
   {
     id: 1,
@@ -529,6 +507,36 @@ const simulateFileUpload = () => {
   animate(0)
 }
 
+const getPlaceholder = () => {
+  switch (expirationMethod.value) {
+    case 'day':
+      return '输入天数'
+    case 'hour':
+      return '输入小时数'
+    case 'minute':
+      return '输入分钟数'
+    case 'count':
+      return '输入查看次数'
+    default:
+      return '输入值'
+  }
+}
+
+const getUnit = () => {
+  switch (expirationMethod.value) {
+    case 'day':
+      return '天'
+    case 'hour':
+      return '小时'
+    case 'minute':
+      return '分钟'
+    case 'count':
+      return '次'
+    default:
+      return ''
+  }
+}
+
 const handleSubmit = () => {
   if (sendType.value === 'file' && !selectedFile.value) {
     showAlertMessage('请选择要上传的文件', 'error')
@@ -538,12 +546,8 @@ const handleSubmit = () => {
     showAlertMessage('请输入要发送的文本', 'error')
     return
   }
-  if (expirationMethod.value === 'time' && !expirationTime.value) {
-    showAlertMessage('请输入过期时间', 'error')
-    return
-  }
-  if (expirationMethod.value === 'views' && !expirationViews.value) {
-    showAlertMessage('请输入查看次数', 'error')
+  if (!expirationValue.value) {
+    showAlertMessage('请输入过期值', 'error')
     return
   }
 
@@ -552,8 +556,24 @@ const handleSubmit = () => {
   console.log('Selected File:', selectedFile.value)
   console.log('Text Content:', textContent.value)
   console.log('Expiration Method:', expirationMethod.value)
-  console.log('Expiration Time:', expirationTime.value)
-  console.log('Expiration Views:', expirationViews.value)
+  console.log('Expiration Value:', expirationValue.value)
+
+  // 计算过期时间
+  let expirationDate = new Date()
+  switch (expirationMethod.value) {
+    case 'day':
+      expirationDate.setDate(expirationDate.getDate() + parseInt(expirationValue.value))
+      break
+    case 'hour':
+      expirationDate.setHours(expirationDate.getHours() + parseInt(expirationValue.value))
+      break
+    case 'minute':
+      expirationDate.setMinutes(expirationDate.getMinutes() + parseInt(expirationValue.value))
+      break
+    case 'count':
+      // 对于查看次数,我们不设置具体的过期日期
+      break
+  }
 
   // 添加新的发送记录
   const newRecord = {
@@ -564,11 +584,9 @@ const handleSubmit = () => {
       ? `${(selectedFile.value.size / (1024 * 1024)).toFixed(1)} MB`
       : '0.1 MB',
     expiration:
-      expirationMethod.value === 'time'
-        ? new Date(Date.now() + parseInt(expirationTime.value) * 60 * 60 * 1000)
-            .toISOString()
-            .split('T')[0]
-        : `${expirationViews.value}次查看后过期`,
+      expirationMethod.value === 'count'
+        ? `${expirationValue.value}次查看后过期`
+        : expirationDate.toISOString().split('T')[0],
     retrieveCode: Math.random().toString(36).substring(2, 8).toUpperCase()
   }
   sendRecords.value.unshift(newRecord)
@@ -579,8 +597,7 @@ const handleSubmit = () => {
   // 重置表单
   selectedFile.value = null
   textContent.value = ''
-  expirationTime.value = ''
-  expirationViews.value = ''
+  expirationValue.value = ''
   uploadProgress.value = 0
 }