diff --git a/GEMINI.md b/GEMINI.md index 8453a91..7bacbac 100644 --- a/GEMINI.md +++ b/GEMINI.md @@ -1,4 +1,4 @@ -1.在终端执行命令时使用适合Windows 的命令 +1.在终端执行命令时使用适合Windows的命令,不要使用linux的命令 2.始终使用中文回答 diff --git a/frontend/package.json b/frontend/package.json index 2a7b5a1..2657fea 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -8,8 +8,11 @@ }, "dependencies": { "axios": "^1.11.0", + "pinia": "^3.0.3", "register-service-worker": "^1.7.2", - "vue": "^3.5.18" + "vue": "^3.5.18", + "vue-i18n": "^11.1.11", + "vue-router": "^4.5.1" }, "devDependencies": { "@vue/cli-plugin-pwa": "~5.0.0", diff --git a/frontend/public/index.html b/frontend/public/index.html index 4af8dd9..a801360 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -7,6 +7,7 @@ + 临时邮件 diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 4f8ad98..587fa0f 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,264 +1,20 @@ \ No newline at end of file + diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index 3ebf38e..d162d1c 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -65,7 +65,6 @@ body { } .nav-links a { - margin-left: 2rem; text-decoration: none; color: var(--dark-grey); font-weight: 500; diff --git a/frontend/src/assets/setting.svg b/frontend/src/assets/setting.svg new file mode 100644 index 0000000..aad04a8 --- /dev/null +++ b/frontend/src/assets/setting.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue new file mode 100644 index 0000000..f2bdf90 --- /dev/null +++ b/frontend/src/components/AppHeader.vue @@ -0,0 +1,48 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/i18n/index.js b/frontend/src/i18n/index.js new file mode 100644 index 0000000..79683c3 --- /dev/null +++ b/frontend/src/i18n/index.js @@ -0,0 +1,63 @@ +import { createI18n } from 'vue-i18n'; + +const messages = { + zh: { + howItWorks: { + title: '工作原理', + step1: '在上面的输入框中，随意编造一个以 {domain} 结尾的邮箱地址。', + step2: '使用这个地址去注册任何网站或接收邮件。', + step3: '在这里输入您刚刚使用的地址，点击“查看收件箱”，即可看到邮件。', + }, + language: '语言', + home: { + title: '您的专属临时邮箱，无限且私密', + subtitle: '输入任何', + subtitleAfter: '地址，立即在此查看收件箱。', + placeholder: '输入您的临时邮箱地址...', + copyTitle: '复制地址', + random: '随机生成', + checkInbox: '查看收件箱', + inbox: '收件箱', + refresh: '刷新', + loading: '正在加载...', + noMail: '暂无邮件', + selectMail: '请从选择一封邮件查看', + from: '发件人', + to: '收件人', + } + }, + en: { + howItWorks: { + title: 'How it Works', + step1: 'Invent any email address ending in {domain} in the input box above.', + step2: 'Use this address to register on any website or receive emails.', + step3: 'Enter the address you just used here and click "Check Inbox" to see the emails.', + }, + language: 'Language', + home: { + title: 'Your Exclusive, Unlimited, and Private Temporary Email', + subtitle: 'Enter any address ending in ', + subtitleAfter: ' to check the inbox right here.', + placeholder: 'Enter your temporary email address...', + copyTitle: 'Copy Address', + random: 'Generate Random', + checkInbox: 'Check Inbox', + inbox: 'Inbox', + refresh: 'Refresh', + loading: 'Loading...', + noMail: 'No mail yet', + selectMail: 'Please select an email to view', + from: 'From', + to: 'To', + } + }, +}; + +const i18n = createI18n({ + legacy: false, // 使用组合式 API + locale: 'zh', // 设置默认语言 + fallbackLocale: 'en', // 设置回退语言 + messages, // 设置语言环境信息 +}); + +export default i18n; diff --git a/frontend/src/main.js b/frontend/src/main.js index b57c9ab..a0c6ddc 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -1,6 +1,30 @@ -import { createApp } from 'vue' +import { createApp, watch } from 'vue' +import { createPinia } from 'pinia' import App from './App.vue' -import './assets/main.css' // 引入新的全局样式文件 import './registerServiceWorker' +import router from './router' +import i18n from './i18n' +import { useLanguageStore } from './stores/language' +import './assets/main.css' -createApp(App).mount('#app') \ No newline at end of file +const app = createApp(App) +const pinia = createPinia() + +app.use(pinia) +app.use(router) +app.use(i18n) + +const languageStore = useLanguageStore(pinia) + +// 监听 Pinia store 中的 locale 变化，并更新 i18n +watch( + () => languageStore.locale, + (newLocale) => { + i18n.global.locale.value = newLocale + } +) + +// 初始化时，确保 i18n 的 locale 与 store 同步 +i18n.global.locale.value = languageStore.locale + +app.mount('#app') diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js new file mode 100644 index 0000000..4d9f446 --- /dev/null +++ b/frontend/src/router/index.js @@ -0,0 +1,23 @@ +import { createRouter, createWebHistory } from 'vue-router'; +import Home from '../views/Home.vue'; +import Settings from '../views/Settings.vue'; + +const routes = [ + { + path: '/', + name: 'Home', + component: Home, + }, + { + path: '/settings', + name: 'Settings', + component: Settings, + }, +]; + +const router = createRouter({ + history: createWebHistory(process.env.BASE_URL), + routes, +}); + +export default router; diff --git a/frontend/src/stores/language.js b/frontend/src/stores/language.js new file mode 100644 index 0000000..9918aeb --- /dev/null +++ b/frontend/src/stores/language.js @@ -0,0 +1,17 @@ +import { defineStore } from 'pinia'; + +const STORAGE_KEY = 'user_language'; + +export const useLanguageStore = defineStore('language', { + state: () => ({ + // 优先从 localStorage 获取，否则默认为中文 + locale: localStorage.getItem(STORAGE_KEY) || 'zh', + }), + actions: { + setLocale(newLocale) { + this.locale = newLocale; + // 将新设置存入 localStorage + localStorage.setItem(STORAGE_KEY, newLocale); + }, + }, +}); diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue new file mode 100644 index 0000000..e5eff5a --- /dev/null +++ b/frontend/src/views/Home.vue @@ -0,0 +1,221 @@ + + + diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue new file mode 100644 index 0000000..11c627a --- /dev/null +++ b/frontend/src/views/Settings.vue @@ -0,0 +1,110 @@ + + + + + diff --git a/frontend/vue.config.js b/frontend/vue.config.js index 0b7e6a8..3dd1eb8 100644 --- a/frontend/vue.config.js +++ b/frontend/vue.config.js @@ -17,5 +17,15 @@ module.exports = defineConfig({ // swSrc: 'dev/sw.js', // ...other Workbox options... } + }, + chainWebpack: config => { + config.plugin('define').tap(definitions => { + Object.assign(definitions[0], { + __VUE_OPTIONS_API__: true, + __VUE_PROD_DEVTOOLS__: false, + __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false + }) + return definitions + }) } }) \ No newline at end of file