feat: add simplemode button at index (#714)

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudflare_temp_email",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": true,
   "type": "module",
   "scripts": {
@@ -30,7 +30,7 @@
     "naive-ui": "^2.42.0",
     "postal-mime": "^2.4.4",
     "vooks": "^0.2.12",
-    "vue": "^3.5.19",
+    "vue": "^3.5.20",
     "vue-clipboard3": "^2.0.0",
     "vue-i18n": "^11.1.11",
     "vue-router": "^4.5.1"
@@ -47,7 +47,7 @@
     "vite-plugin-wasm": "^3.5.0",
     "workbox-build": "^7.3.0",
     "workbox-window": "^7.3.0",
-    "wrangler": "^4.32.0"
+    "wrangler": "^4.33.0"
   },
   "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
 }

frontend/src/views/Index.vue

@@ -5,6 +5,8 @@ import { useRoute } from 'vue-router'
 
 import { useGlobalState } from '../store'
 import { api } from '../api'
+import { useIsMobile } from '../utils/composables'
+import { FullscreenExitOutlined } from '@vicons/material'
 
 import AddressBar from './index/AddressBar.vue';
 import MailBox from '../components/MailBox.vue';
@@ -15,12 +17,12 @@ import Appearance from './common/Appearance.vue';
 import Webhook from './index/Webhook.vue';
 import Attachment from './index/Attachment.vue';
 import About from './common/About.vue';
-
 import SimpleIndex from './index/SimpleIndex.vue';
 
 const { loading, settings, openSettings, indexTab, globalTabplacement, useSimpleIndex } = useGlobalState()
 const message = useMessage()
 const route = useRoute()
+const isMobile = useIsMobile()
 
 const SendMail = defineAsyncComponent(() => {
   loading.value = true;
@@ -42,6 +44,7 @@ const { t } = useI18n({
       saveToS3Success: 'save to s3 success',
       webhookSettings: 'Webhook Settings',
       query: 'Query',
+      enterSimpleMode: 'Simple Mode',
     },
     zh: {
       mailbox: '收件箱',
@@ -55,6 +58,7 @@ const { t } = useI18n({
       saveToS3Success: '保存到s3成功',
       webhookSettings: 'Webhook 设置',
       query: '查询',
+      enterSimpleMode: '极简模式',
     }
   }
 });
@@ -133,6 +137,16 @@ onMounted(() => {
     <div v-else>
       <AddressBar />
       <n-tabs v-if="settings.address" type="card" v-model:value="indexTab" :placement="globalTabplacement">
+        <template #prefix v-if="!isMobile">
+          <n-button @click="useSimpleIndex = true" tertiary size="small">
+            <template #icon>
+              <n-icon>
+                <FullscreenExitOutlined />
+              </n-icon>
+            </template>
+            {{ t('enterSimpleMode') }}
+          </n-button>
+        </template>
         <n-tab-pane name="mailbox" :tab="t('mailbox')">
           <div v-if="showMailIdQuery" style="margin-bottom: 10px;">
             <n-input-group>