1

src/views/SendFileView.vue

@@ -44,11 +44,11 @@
           </button>
         </div>
 
-        <div class="grid grid-cols-1 gap-8">
+        <transition name="fade" mode="out-in">
+          <div v-if="sendType === 'file'" key="file" class="grid grid-cols-1 gap-8">
             <!-- 文件上传区域 -->
             <div
-            v-if="sendType === 'file'"
+              class="rounded-xl p-8 flex flex-col items-center justify-center border-2 border-dashed transition-all duration-300 group cursor-pointer relative"
-            class="rounded-xl p-6 flex flex-col items-center justify-center border-2 border-dashed transition-all duration-300 group cursor-pointer relative"
               :class="[
                 isDarkMode
                   ? 'bg-gray-800 bg-opacity-50 border-gray-600 hover:border-indigo-500'
@@ -90,16 +90,14 @@
                 支持各种常见格式，最大20MB
               </p>
             </div>
-
+          </div>
+          <div v-else key="text" class="grid grid-cols-1 gap-8">
               <!-- 文本输入区域 -->
               <div v-if="sendType === 'text'" class="flex flex-col">
-            <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"
+                  rows="7"
                   :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
@@ -110,7 +108,7 @@
                 ></textarea>
               </div>
             </div>
-
+        </transition>
         <!-- 过期方式选择 -->
         <div class="flex flex-col space-y-4">
           <label :class="['text-sm font-medium', isDarkMode ? 'text-gray-300' : 'text-gray-700']">过期方式</label>
@@ -265,3 +263,22 @@ onMounted(() => {
   console.log('SendFileView mounted')
 })
 </script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+</style>