feat: PWA (#40)

2026-06-29 11:22:02 +08:00 · 2023-12-12 17:26:56 +08:00
parent bf6374af52
commit c2c1e4ae59
10 changed files with 3218 additions and 664 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -28,3 +28,4 @@ coverage
 *.sw?

 .env.*
+*-dist/
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,9 +3,11 @@

 <head>
  <meta charset="UTF-8">
-  <link rel="icon" href="/favicon.ico">
+  <link rel="icon" href="/logo.svg">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Temp Email</title>
+  <link rel="icon" href="/logo.svg" sizes="any">
+  <link rel="apple-touch-icon" href="/logo.svg">
 </head>

 <body>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,19 +6,20 @@
    "dev": "vite",
    "build": "vite build -m prod --emptyOutDir",
    "preview": "vite preview",
-    "deploy": "wrangler pages deploy ../dist --branch production"
+    "deploy": "npm run build && wrangler pages deploy ../dist --branch production"
  },
  "dependencies": {
-    "@vueuse/core": "^10.1.2",
+    "@vueuse/core": "^10.7.0",
    "axios": "^1.6.2",
-    "naive-ui": "^2.34.3",
-    "vue": "^3.3.4",
+    "naive-ui": "^2.35.0",
+    "vue": "^3.3.11",
    "vue-clipboard3": "^2.0.0",
-    "vue-i18n": "9",
+    "vue-i18n": "^9.8.0",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.2.3",
-    "vite": "^4.4.6"
+    "@vitejs/plugin-vue": "^4.5.2",
+    "vite-plugin-pwa": "^0.17.4",
+    "vite": "^4.5.1"
  }
 }
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/public/logo.svg
+++ b/frontend/public/logo.svg
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -43,6 +43,8 @@ const { t } = useI18n({
      deleteTip: 'Are you sure to delete this email?',
      refresh: 'Refresh',
      emails: 'Emails',
+      itemCount: 'itemCount',
+      query: 'Query',
    },
    zh: {
      title: '临时邮件 Admin',
@@ -58,6 +60,8 @@ const { t } = useI18n({
      deleteTip: '确定要删除这个邮箱吗？',
      refresh: '刷新',
      emails: '邮件',
+      itemCount: '总数',
+      query: '查询',
    }
  }
 });
@@ -270,7 +274,11 @@ const fetchMailUnknowData = async () => {
      <n-tab-pane name="account" tab="account">
        <div style="display: inline-block;">
          <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" :page-sizes="[20, 50, 100]"
-            show-size-picker />
+            show-size-picker>
+            <template #prefix="{ itemCount }">
+              {{ t('itemCount') }}: {{ itemCount }}
+            </template>
+          </n-pagination>
        </div>
        <n-button tertiary @click="fetchData" type="primary">
          {{ t('refresh') }}
@@ -286,7 +294,11 @@ const fetchMailUnknowData = async () => {
        </n-input-group>
        <n-list hoverable clickable>
          <div style="display: inline-block; margin-bottom: 10px;">
-            <n-pagination v-model:page="mailPage" v-model:page-size="mailPageSize" :item-count="mailCount" simple />
+            <n-pagination v-model:page="mailPage" v-model:page-size="mailPageSize" :item-count="mailCount" simple>
+              <template #prefix="{ itemCount }">
+                {{ t('itemCount') }}: {{ itemCount }}
+              </template>
+            </n-pagination>
          </div>
          <n-list-item v-for="row in mailData" v-bind:key="row.id">
            <n-thing class="center" :title="row.subject">
@@ -307,12 +319,16 @@ const fetchMailUnknowData = async () => {
      </n-tab-pane>
      <n-tab-pane name="unknow" tab="unknown">
        <n-button @click="fetchMailUnknowData" type="primary" ghost>
-          {{ t('refresh') }}
+          {{ t('query') }}
        </n-button>
        <n-list hoverable clickable>
          <div style="display: inline-block; margin-bottom: 10px;">
            <n-pagination v-model:page="mailUnknowPage" v-model:page-size="mailUnknowPageSize"
-              :item-count="mailUnknowCount" simple />
+              :item-count="mailUnknowCount" simple>
+              <template #prefix="{ itemCount }">
+                {{ t('itemCount') }}: {{ itemCount }}
+              </template>
+            </n-pagination>
          </div>
          <n-list-item v-for="row in mailUnknowData" v-bind:key="row.id">
            <n-thing class="center" :title="row.subject">
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -2,6 +2,7 @@ import { fileURLToPath, URL } from 'node:url'

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'

 // https://vitejs.dev/config/
 export default defineConfig({
@@ -10,6 +11,24 @@ export default defineConfig({
  },
  plugins: [
    vue(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      devOptions: {
+        enabled: true
+      },
+      manifest: {
+        name: 'Temp Email',
+        short_name: 'Temp Email',
+        description: 'Temp Email - Temporary Email',
+        icons: [
+          {
+            src: '/logo.svg',
+            sizes: '192x192',
+            type: 'image/svg+xml'
+          }
+        ]
+      }
+    })
  ],
  resolve: {
    alias: {
--- a/worker/package.json
+++ b/worker/package.json
@@ -7,12 +7,12 @@
    "start": "wrangler dev"
  },
  "devDependencies": {
-    "wrangler": "^3.5.1"
+    "wrangler": "^3.19.0"
  },
  "dependencies": {
-    "hono": "^3.4.3",
+    "hono": "^3.11.4",
    "mailparser": "^3.6.5",
-    "postal-mime": "^1.0.16"
+    "postal-mime": "^1.1.0"
  },
  "pnpm": {
    "patchedDependencies": {
--- a/worker/pnpm-lock.yaml
+++ b/worker/pnpm-lock.yaml
--- a/worker/src/router.js
+++ b/worker/src/router.js
@@ -179,7 +179,7 @@ api.get('/admin/mails_unknow', async (c) => {
    let count = 0;
    if (offset == 0) {
        const { count: mailCount } = await c.env.DB.prepare(`
-            SELECT count(*) FROM mails
+            SELECT count(*) as count FROM mails
            where address NOT IN
            (select concat('${c.env.PREFIX}', name) from address)`
        ).first();