feat: 进入首页自动聚焦输入框

src/utils/clipboard.ts

@@ -3,7 +3,6 @@
  */
 
 import { useAlertStore } from '@/stores/alertStore'
-const alertStore = useAlertStore();
 interface CopyOptions {
   successMsg?: string
   errorMsg?: string
@@ -21,17 +20,14 @@ export const copyToClipboard = async (
   options: CopyOptions = {}
 ): Promise<boolean> => {
   const { successMsg = '复制成功', errorMsg = '复制失败，请手动复制', showMsg = true } = options
-
   const alertStore = useAlertStore()
-
   try {
     // 优先使用 Clipboard API
-    if (navigator.clipboard && navigator.clipboard.writeText) {
+    if (document.hasFocus() && navigator.clipboard && navigator.clipboard.writeText) {
       await navigator.clipboard.writeText(text)
       if (showMsg) alertStore.showAlert(successMsg, 'success')
       return true
     }
-
     // 后备方案：使用传统的复制方法
     const textarea = document.createElement('textarea')
     textarea.value = text
@@ -41,7 +37,6 @@ export const copyToClipboard = async (
     textarea.select()
     const success = document.execCommand('copy')
     document.body.removeChild(textarea)
-
     if (success) {
       if (showMsg) alertStore.showAlert(successMsg, 'success')
       return true
@@ -115,7 +110,7 @@ function fallbackCopyTextToClipboard(text:string) {
   document.body.removeChild(textArea);
 }
 
-if (navigator.clipboard && navigator.clipboard.writeText) {
+if (document.hasFocus() && navigator.clipboard && navigator.clipboard.writeText) {
   navigator.clipboard.writeText("要复制的文本");
 } else {
   fallbackCopyTextToClipboard("要复制的文本");

src/views/RetrievewFileView.vue

@@ -26,8 +26,8 @@
               <label for="code" class="block text-sm font-medium mb-2"
                 :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">取件码</label>
               <div class="relative">
-                <input id="code" v-model="code" type="text"
+                <input id="code" v-model="code" type="text" ref="codeInput"
-                  class="w-full px-4 py-3 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 pr-10"
+                       class="w-full px-4 py-3 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 pr-10"
                   :class="[
                     isDarkMode ? 'bg-gray-700 bg-opacity-50' : 'bg-gray-100',
                     { 'ring-2 ring-red-500': error },
@@ -175,7 +175,7 @@
               <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
                 <span class="font-medium">文件内容：</span>
               </p>
-              <div v-if="selectedRecord.filename == 'Text'" class="ml-2">
+              <div v-if="selectedRecord.filename === 'Text'" class="ml-2">
                 <button @click="showContentPreview"
                   class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300">
                   预览内容
@@ -304,8 +304,10 @@ const route = useRoute()
 // 使用 receiveData 替代原来的 records
 const records = receiveData
 const config = JSON.parse(localStorage.getItem('config') || '{}')
+const codeInput = ref(null)
 
 onMounted(() => {
+  codeInput.value && codeInput.value.focus()
   const query_code = route.query.code
   if (query_code) {
     code.value = query_code
@@ -359,12 +361,10 @@ const handleSubmit = async () => {
           content: isFile ? null : res.detail.text,
           date: new Date().toLocaleString()
         }
-
         let flag = true
         fileStore.receiveData.forEach((file) => {
           if (file.code === newFileData.code) {
             flag = false
-            return
           }
         })
         if (flag) {
@@ -484,22 +484,6 @@ const showContentPreview = () => {
   }
 }
 
-.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;
 }
@@ -514,37 +498,6 @@ const showContentPreview = () => {
   }
 }
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.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%;
 }