From f2608adf3c3661e2669811070ca4887a418b998d Mon Sep 17 00:00:00 2001
From: Lan <xzu@live.com>
Date: Sun, 16 Mar 2025 22:19:28 +0800
Subject: [PATCH] fix: https://github.com/vastsa/FileCodeBox/issues/294

---
 src/views/SendFileView.vue | 139 ++++++++++++++-----------------------
 1 file changed, 54 insertions(+), 85 deletions(-)

diff --git a/src/views/SendFileView.vue b/src/views/SendFileView.vue
index 3e92646..182007c 100644
--- a/src/views/SendFileView.vue
+++ b/src/views/SendFileView.vue
@@ -94,92 +94,64 @@
               过期时间
             </label>
             <div class="relative flex-grow group">
-              <div 
-                :class="[
-                  'relative h-11 rounded-xl border transition-all duration-300',
-                  isDarkMode
-                    ? 'bg-gray-800/50 border-gray-700 group-hover:border-gray-600'
-                    : 'bg-white border-gray-200 group-hover:border-gray-300'
-                ]"
-              >
+              <div :class="[
+                'relative h-11 rounded-xl border transition-all duration-300',
+                isDarkMode
+                  ? 'bg-gray-800/50 border-gray-700 group-hover:border-gray-600'
+                  : 'bg-white border-gray-200 group-hover:border-gray-300'
+              ]">
                 <template v-if="expirationMethod !== 'forever'">
-                  <input 
-                    v-model="expirationValue" 
-                    type="number" 
-                    :placeholder="getPlaceholder()" 
-                    min="1"
-                    :class="[
-                      'w-full h-full px-4 pr-32 rounded-xl placeholder-gray-400 transition-all duration-300',
-                      'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent',
-                      '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
-                      'bg-transparent',
-                      isDarkMode ? 'text-white' : 'text-gray-900'
-                    ]" 
-                  />
+                  <input v-model="expirationValue" type="number" :placeholder="getPlaceholder()" min="1" :class="[
+                    'w-full h-full px-4 pr-32 rounded-xl placeholder-gray-400 transition-all duration-300',
+                    'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent',
+                    '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+                    'bg-transparent',
+                    isDarkMode ? 'text-white' : 'text-gray-900'
+                  ]" />
                   <div class="absolute right-24 top-0 h-full flex flex-col border-l"
                     :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
-                    <button 
-                      type="button"
-                      @click="incrementValue(1)"
+                    <button type="button" @click="incrementValue(1)"
                       class="flex-1 px-2 flex items-center justify-center transition-colors duration-200 hover:bg-opacity-50"
-                      :class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100']"
-                    >
-                      <svg class="w-3 h-3" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      :class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100']">
+                      <svg class="w-3 h-3" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" fill="none"
+                        viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                       </svg>
                     </button>
-                    <button 
-                      type="button"
-                      @click="incrementValue(-1)"
+                    <button type="button" @click="incrementValue(-1)"
                       class="flex-1 px-2 flex items-center justify-center transition-colors duration-200 hover:bg-opacity-50"
-                      :class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100']"
-                    >
-                      <svg class="w-3 h-3" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      :class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100']">
+                      <svg class="w-3 h-3" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" fill="none"
+                        viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                       </svg>
                     </button>
                   </div>
                 </template>
-                <select 
-                  v-model="expirationMethod" 
-                  :class="[
-                    'absolute right-0 top-0 h-full appearance-none cursor-pointer bg-transparent',
-                    'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-0',
-                    expirationMethod === 'forever' ? 'w-full px-4' : 'w-24 pl-3 pr-8 border-l',
-                    isDarkMode 
-                      ? 'text-white border-gray-700' 
-                      : 'text-gray-900 border-gray-200'
-                  ]"
-                >
+                <select v-model="expirationMethod" :class="[
+                  'absolute right-0 top-0 h-full appearance-none cursor-pointer bg-transparent',
+                  'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-0',
+                  expirationMethod === 'forever' ? 'w-full px-4' : 'w-24 pl-3 pr-8 border-l',
+                  isDarkMode
+                    ? 'text-white border-gray-700'
+                    : 'text-gray-900 border-gray-200'
+                ]">
                   <option v-for="item in config.expireStyle" :value="item" :key="item">
                     {{ getUnit(item) }}
                   </option>
                 </select>
-                <div 
-                  class="absolute pointer-events-none"
-                  :class="[
-                    expirationMethod === 'forever' ? 'right-3' : 'right-2',
-                    'top-1/2 -translate-y-1/2'
-                  ]"
-                >
-                  <svg 
-                    class="w-4 h-4 transition-colors duration-300"
-                    :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
-                    fill="none" 
-                    stroke="currentColor" 
-                    viewBox="0 0 24 24"
-                  >
+                <div class="absolute pointer-events-none" :class="[
+                  expirationMethod === 'forever' ? 'right-3' : 'right-2',
+                  'top-1/2 -translate-y-1/2'
+                ]">
+                  <svg class="w-4 h-4 transition-colors duration-300"
+                    :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" fill="none" stroke="currentColor"
+                    viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                   </svg>
                 </div>
               </div>
             </div>
-            <p 
-              class="text-xs transition-colors duration-300" 
-              :class="[isDarkMode ? 'text-gray-500' : 'text-gray-400']"
-            >
-              选择文件过期的时间，过期后文件将自动删除
-            </p>
           </div>
           <!-- 提交按钮 -->
           <button type="submit"
@@ -276,11 +248,8 @@
 
     <!-- 记录详情弹窗 -->
     <transition name="fade">
-      <div v-if="selectedRecord"
-        class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-3 sm:p-4 overflow-y-auto">
-        <div
-          class="w-full max-w-2xl rounded-2xl shadow-2xl transform transition-all duration-300 ease-out overflow-hidden"
-          :class="[isDarkMode ? 'bg-gray-900 bg-opacity-70' : 'bg-white bg-opacity-95']">
+      <div v-if="selectedRecord" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-3 sm:p-4 overflow-y-auto">
+        <div class="w-full max-w-2xl rounded-2xl shadow-2xl transform transition-all duration-300 ease-out overflow-hidden" :class="[isDarkMode ? 'bg-gray-900 bg-opacity-70' : 'bg-white bg-opacity-95']">
           <!-- 顶部标题栏 -->
           <div class="px-4 sm:px-6 py-3 sm:py-4 border-b" :class="[isDarkMode ? 'border-gray-800' : 'border-gray-100']">
             <div class="flex items-center justify-between">
@@ -304,27 +273,27 @@
                   <FileIcon class="w-5 h-5 sm:w-6 sm:h-6"
                     :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
                 </div>
-                <div class="ml-3 sm:ml-4">
-                  <h4 class="font-medium text-sm sm:text-base" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
+                <div class="ml-3 sm:ml-4 min-w-0 flex-1">
+                  <h4 class="font-medium text-sm sm:text-base truncate" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
                     {{ selectedRecord.filename }}
                   </h4>
-                  <p class="text-xs sm:text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
+                  <p class="text-xs sm:text-sm truncate" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
                     {{ selectedRecord.size }} · {{ selectedRecord.date }}
                   </p>
                 </div>
               </div>
               <div class="grid grid-cols-2 gap-3 sm:gap-4">
-                <div class="flex items-center">
-                  <ClockIcon class="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1.5 sm:mr-2"
+                <div class="flex items-center min-w-0">
+                  <ClockIcon class="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 flex-shrink-0"
                     :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" />
-                  <span class="text-xs sm:text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
+                  <span class="text-xs sm:text-sm truncate" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
                     {{ selectedRecord.expiration }}
                   </span>
                 </div>
-                <div class="flex items-center">
-                  <ShieldCheckIcon class="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1.5 sm:mr-2"
+                <div class="flex items-center min-w-0">
+                  <ShieldCheckIcon class="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 flex-shrink-0"
                     :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" />
-                  <span class="text-xs sm:text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
+                  <span class="text-xs sm:text-sm truncate" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
                     安全加密
                   </span>
                 </div>
@@ -343,25 +312,25 @@
                       <ClipboardCopyIcon class="w-4 h-4 sm:w-5 sm:h-5" />
                     </button>
                   </div>
-                  <p class="text-2xl sm:text-3xl font-bold tracking-wider text-center">{{ selectedRecord.retrieveCode }}
+                  <p class="text-2xl sm:text-3xl font-bold tracking-wider text-center break-all">{{ selectedRecord.retrieveCode }}
                   </p>
                 </div>
 
                 <div class="rounded-xl p-3 sm:p-4"
                   :class="[isDarkMode ? 'bg-gray-800 bg-opacity-50' : 'bg-gray-50 bg-opacity-95']">
                   <div class="flex items-center justify-between mb-2 sm:mb-3">
-                    <h4 class="font-medium text-sm sm:text-base flex items-center"
+                    <h4 class="font-medium text-sm sm:text-base flex items-center min-w-0"
                       :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
-                      <TerminalIcon class="w-4 h-4 sm:w-5 sm:h-5 mr-1.5 sm:mr-2 text-indigo-500" />
-                      wget下载
+                      <TerminalIcon class="w-4 h-4 sm:w-5 sm:h-5 mr-1.5 sm:mr-2 text-indigo-500 flex-shrink-0" />
+                      <span class="truncate">wget下载</span>
                     </h4>
                     <button @click="copyWgetCommand(selectedRecord.retrieveCode)"
-                      class="p-1.5 sm:p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+                      class="p-1.5 sm:p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0">
                       <ClipboardCopyIcon class="w-4 h-4 sm:w-5 sm:h-5"
                         :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" />
                     </button>
                   </div>
-                  <p class="text-xs sm:text-sm font-mono break-all"
+                  <p class="text-xs sm:text-sm font-mono break-all line-clamp-2"
                     :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
                     点击复制wget命令
                   </p>
@@ -375,7 +344,7 @@
                   <QRCode :value="getQRCodeValue(selectedRecord)" :size="140" level="M"
                     class="sm:w-[160px] sm:h-[160px]" />
                 </div>
-                <p class="text-xs sm:text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
+                <p class="text-xs sm:text-sm truncate max-w-full" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
                   扫描二维码快速取件
                 </p>
               </div>