feat: fix android display

frontend/src/App.vue

@@ -12,13 +12,22 @@
       <h1>您的专属临时邮箱，无限且私密</h1>
       <p>输入任何<code>@shenjianl.cn</code>地址，立即在此查看收件箱。</p>
       <form @submit.prevent="fetchMessages" class="input-group">
-        <input
-          type="email"
-          v-model="recipient"
-          class="email-input"
-          placeholder="输入您的临时邮箱地址..."
-          required
-        />
+        <div class="input-wrapper">
+          <input
+            type="email"
+            v-model="recipient"
+            class="email-input"
+            placeholder="输入您的临时邮箱地址..."
+            required
+          />
+          <button @click="copyEmail" type="button" class="btn-copy" title="复制地址">
+            <span v-if="copyStatus === 'copied'">✓</span>
+            <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+              <path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/>
+              <path d="M2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h-1v1a.5.5 0 0 1-.5.5H2.5a.5.5 0 0 1-.5-.5V6.5a.5.5 0 0 1 .5-.5H3v-1z"/>
+            </svg>
+          </button>
+        </div>
         <button type="submit" class="btn btn-primary">查看收件箱</button>
         <button @click="generateRandomEmail" type="button" class="btn btn-secondary">随机生成</button>
       </form>
@@ -92,6 +101,7 @@ export default {
     const selectedMessage = ref(null);
     const loading = ref(false);
     const showModal = ref(false);
+    const copyStatus = ref('idle'); // 'idle' | 'copied'
     // !!! 生产环境<E78EAF><E5A283>要提示 !!!
     // 请务必将下面的 'yourdomain.com' 替换为您的真实域名
     const domain = 'shenjianl.cn';
@@ -128,10 +138,104 @@ export default {
     };
 
     const generateRandomEmail = () => {
-      const randomPart = Math.random().toString(36).substring(2, 10);
-      recipient.value = `${randomPart}@${domain}`;
+      const names = [
+        'alex', 'casey', 'morgan', 'jordan', 'taylor', 'jamie', 'ryan', 'drew', 'jesse', 'pat', 
+        'chris', 'dylan', 'aaron', 'blake', 'cameron', 'devon', 'elliot', 'finn', 'gray', 'harper',
+        'kai', 'logan', 'max', 'noah', 'owen', 'quinn', 'riley', 'rowan', 'sage', 'skyler'
+      ];
+      const places = [
+        'tokyo', 'paris', 'london', 'cairo', 'sydney', 'rio', 'moscow', 'rome', 'nile', 'everest', 
+        'sahara', 'amazon', 'gobi', 'andes', 'pacific', 'kyoto', 'berlin', 'dubai', 'seoul', 'milan',
+        'vienna', 'prague', 'athens', 'lisbon', 'oslo', 'helsinki', 'zürich', 'geneva', 'brussels', 'amsterdam'
+      ];
+      const concepts = [
+        'apollo', 'artemis', 'athena', 'zeus', 'thor', 'loki', 'odin', 'freya', 'phoenix', 'dragon', 
+        'griffin', 'sphinx', 'pyramid', 'colossus', 'acropolis', 'obelisk', 'pagoda', 'castle', 'cyberspace', 'matrix',
+        'protocol', 'algorithm', 'pixel', 'vector', 'photon', 'quark', 'nova', 'pulsar', 'saga', 'voyage',
+        'enigma', 'oracle', 'cipher', 'vortex', 'helix', 'axiom', 'zenith', 'epoch', 'nexus', 'trinity'
+      ];
+
+      const allLists = [names, places, concepts];
+      const getRandomItem = (arr) => arr[Math.floor(Math.random() * arr.length)];
+
+      // Randomly pick 2 lists to combine words from
+      const listA = getRandomItem(allLists);
+      const listB = getRandomItem(allLists);
+
+      const word1 = getRandomItem(listA);
+      const word2 = getRandomItem(listB);
+      
+      const number = Math.floor(Math.random() * 9000) + 1000; // Random 4-digit number
+
+      // Randomly choose a separator
+      const separators = ['.', '-', '_', ''];
+      const separator = getRandomItem(separators);
+
+      let prefix;
+      if (word1 === word2) {
+        // Avoids "alex.alex1234" if the same list and word are picked
+        prefix = `${word1}${number}`;
+      } else {
+        prefix = `${word1}${separator}${word2}${number}`;
+      }
+      
+      recipient.value = `${prefix}@${domain}`;
     };
     
+    const copyEmail = () => {
+      if (!recipient.value) return;
+
+      const textToCopy = recipient.value;
+
+      // Modern browsers in secure contexts
+      if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(textToCopy).then(() => {
+          showCopySuccess();
+        }).catch(err => {
+          console.error('Modern copy failed: ', err);
+          fallbackCopy(textToCopy); // Try fallback on error
+        });
+      } else {
+        // Fallback for older browsers or insecure contexts
+        fallbackCopy(textToCopy);
+      }
+    };
+
+    const fallbackCopy = (text) => {
+      const textArea = document.createElement('textarea');
+      textArea.value = text;
+      
+      // Make the textarea out of sight
+      textArea.style.position = 'fixed';
+      textArea.style.top = '-9999px';
+      textArea.style.left = '-9999px';
+
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+
+      try {
+        const successful = document.execCommand('copy');
+        if (successful) {
+          showCopySuccess();
+        } else {
+          throw new Error('Fallback copy was unsuccessful');
+        }
+      } catch (err) {
+        console.error('Fallback copy failed: ', err);
+        alert('复制失败!');
+      }
+
+      document.body.removeChild(textArea);
+    };
+
+    const showCopySuccess = () => {
+      copyStatus.value = 'copied';
+      setTimeout(() => {
+        copyStatus.value = 'idle';
+      }, 2000);
+    };
+
     const showHowItWorks = () => {
       showModal.value = true;
     };
@@ -146,10 +250,12 @@ export default {
       selectedMessage,
       loading,
       showModal,
+      copyStatus,
       domain,
       fetchMessages,
       selectMessage,
       generateRandomEmail,
+      copyEmail,
       showHowItWorks,
       closeModal,
     };