shenjianZ/email-unlimit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add switch with zh|en

Browse Source
This commit is contained in:
shenjianZ
2025-07-28 23:36:33 +08:00
parent 7bfb909532
commit a186439b84
14 changed files with 536 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
frontend/src/App.vue
View File

@@ -1,264 +1,20 @@
<template>
<header class="app-header">
<div class="logo">Email Unlimit</div>
<nav class="nav-links">
<a href="https://gitea.shenjianl.cn/shenjianZ/email-unlimit" target="_blank">Gitee</a>
<a href="#" @click.prevent="showHowItWorks">How it Works</a>
</nav>
</header>
<main id="app-main">
<section class="hero-section">
<h1>您的专属临时邮箱，无限且私密</h1>
<p>输入任何<code>@shenjianl.cn</code>地址，立即在此查看收件箱。</p>
<form @submit.prevent="fetchMessages" class="input-group">
<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 @click="generateRandomEmail" type="button" class="btn btn-secondary">随机生成</button>
<button type="submit" class="btn btn-primary">查看收件箱</button>
</form>
</section>
<section class="inbox-section">
<div class="inbox-container">
<div class="message-list">
<div class="message-list-header">
<h2>收件箱</h2>
<button @click="fetchMessages" class="refresh-btn" title="刷新">
&#x21bb;
</button>
</div>
<div v-if="loading" class="loading-state">正在加载...</div>
<div v-else-if="messages.length === 0" class="empty-state">暂无邮件</div>
<div v-else>
<div
v-for="message in messages"
:key="message.id"
class="message-item"
:class="{ selected: selectedMessage && selectedMessage.id === message.id }"
@click="selectMessage(message)"
>
<div class="from">{{ message.sender }}</div>
<div class="subject">{{ message.subject }}</div>
</div>
</div>
</div>
<div class="message-detail">
<div v-if="!selectedMessage" class="empty-state">
<p>请从选择一封邮件查看</p>
</div>
<div v-else>
<div class="message-content-header">
<h3>{{ selectedMessage.subject }}</h3>
<p class="from-line"><strong>发件人:</strong> {{ selectedMessage.sender }}</p>
<p><strong>收件人:</strong> {{ selectedMessage.recipient }}</p>
</div>
<div class="message-body">
{{ selectedMessage.body }}
</div>
</div>
</div>
</div>
</section>
</main>
<!-- How it Works Modal -->
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
<div class="modal-content">
<button @click="closeModal" class="close-btn">&times;</button>
<h3>工作原理</h3>
<ol>
<li>在上面的输入框中，随意编造一个以<code>@{{ domain }}</code>结尾的邮箱地址。</li>
<li>使用这个地址去注册任何网站或接收邮件。</li>
<li>在这里输入您刚刚使用的地址，点击“查看收件箱”，即可看到邮件。</li>
</ol>
</div>
</div>
<AppHeader />
<router-view />
</template>
<script>
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import AppHeader from './components/AppHeader.vue';
export default {
name: 'App',
components: {
AppHeader,
},
setup() {
const recipient = ref('');
const messages = ref([]);
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';
const fetchMessages = async () => {
if (!recipient.value) {
alert('请输入一个邮箱地址');
return;
}
loading.value = true;
selectedMessage.value = null; // Clear selected message on new fetch
try {
// API URL 已修改为相对路径，以适配 Nginx 反向代理
const response = await fetch(`/api/messages?recipient=${recipient.value}`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
messages.value = data;
// Automatically select the first message if available
if (messages.value.length > 0) {
selectedMessage.value = messages.value[0];
}
} catch (error) {
console.error('Failed to fetch messages:', error);
alert('无法获取邮件，请检查后端服务和 Nginx 配置是否正常。');
} finally {
loading.value = false;
}
};
const selectMessage = (message) => {
selectedMessage.value = message;
};
const generateRandomEmail = () => {
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;
};
const closeModal = () => {
showModal.value = false;
};
return {
recipient,
messages,
selectedMessage,
loading,
showModal,
copyStatus,
domain,
fetchMessages,
selectMessage,
generateRandomEmail,
copyEmail,
showHowItWorks,
closeModal,
};
// 在根组件中建立 i18n 上下文，以供所有子路由继承
useI18n();
},
};
</script>
</script>