From 4c6fd3c2afa6ec8b0427f11875388cae5d3fff1c Mon Sep 17 00:00:00 2001
From: Dream Hunter <dreamhunter2333@gmail.com>
Date: Mon, 19 Aug 2024 22:53:13 +0800
Subject: [PATCH] feat: UI add min-width for table page (#428)

---
 .vscode/extensions.json                       |  8 +++++
 CHANGELOG.md                                  |  4 +++
 frontend/.vscode/extensions.json              |  3 --
 frontend/package.json                         |  2 +-
 frontend/src/views/Admin.vue                  | 10 +++---
 frontend/src/views/admin/Account.vue          | 22 +++++++-----
 frontend/src/views/admin/SenderAccess.vue     | 22 +++++++-----
 frontend/src/views/admin/UserManagement.vue   | 34 +++++++++++--------
 frontend/src/views/admin/Webhook.vue          |  5 +--
 frontend/src/views/user/AddressManagement.vue |  8 ++++-
 pages/package.json                            |  2 +-
 vitepress-docs/package.json                   |  2 +-
 worker/package.json                           |  2 +-
 worker/src/constants.ts                       |  2 +-
 14 files changed, 80 insertions(+), 46 deletions(-)
 create mode 100644 .vscode/extensions.json
 delete mode 100644 frontend/.vscode/extensions.json

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 00000000..ca1b1bb3
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "ms-python.vscode-pylance",
+    "1yib.rust-bundle",
+    "rust-lang.rust-analyzer",
+    "vue.volar"
+  ]
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 53a550cf..98d95d0b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,10 @@
 <!-- markdownlint-disable-file MD004 MD024 MD034 MD036 -->
 # CHANGE LOG
 
+## main(v0.7.4)
+
+- feat: UI 列表页面增加最小宽度
+
 ## v0.7.3
 
 - feat: worker 增加 `ADDRESS_CHECK_REGEX`, address name 的正则表达式, 只用于检查，符合条件将通过检查
diff --git a/frontend/.vscode/extensions.json b/frontend/.vscode/extensions.json
deleted file mode 100644
index c0a6e5a4..00000000
--- a/frontend/.vscode/extensions.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}
diff --git a/frontend/package.json b/frontend/package.json
index 759f227a..d32d5d23 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cloudflare_temp_email",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/frontend/src/views/Admin.vue b/frontend/src/views/Admin.vue
index 1765b0e2..0b14af7f 100644
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -117,7 +117,7 @@ onMounted(async () => {
     </n-modal>
     <n-tabs v-if="showAdminPage" type="card" v-model:value="adminTab" :placement="globalTabplacement">
       <n-tab-pane name="qucickSetup" :tab="t('qucickSetup')">
-        <n-tabs type="bar" animated>
+        <n-tabs type="bar" justify-content="center" animated>
           <n-tab-pane name="account_settings" :tab="t('account_settings')">
             <AccountSettings />
           </n-tab-pane>
@@ -130,7 +130,7 @@ onMounted(async () => {
         </n-tabs>
       </n-tab-pane>
       <n-tab-pane name="account" :tab="t('account')">
-        <n-tabs type="bar" animated>
+        <n-tabs type="bar" justify-content="center" animated>
           <n-tab-pane name="account" :tab="t('account')">
             <Account />
           </n-tab-pane>
@@ -149,7 +149,7 @@ onMounted(async () => {
         </n-tabs>
       </n-tab-pane>
       <n-tab-pane name="user" :tab="t('user')">
-        <n-tabs type="bar" animated>
+        <n-tabs type="bar" justify-content="center" animated>
           <n-tab-pane name="user_management" :tab="t('user_management')">
             <UserManagement />
           </n-tab-pane>
@@ -162,7 +162,7 @@ onMounted(async () => {
         </n-tabs>
       </n-tab-pane>
       <n-tab-pane name="mails" :tab="t('mails')">
-        <n-tabs type="bar" animated>
+        <n-tabs type="bar" justify-content="center" animated>
           <n-tab-pane name="mails" :tab="t('mails')">
             <Mails />
           </n-tab-pane>
@@ -184,7 +184,7 @@ onMounted(async () => {
         <Statistics />
       </n-tab-pane>
       <n-tab-pane name="maintenance" :tab="t('maintenance')">
-        <n-tabs type="bar" animated>
+        <n-tabs type="bar" justify-content="center" animated>
           <n-tab-pane name="workerconfig" :tab="t('workerconfig')">
             <WorkerConfig />
           </n-tab-pane>
diff --git a/frontend/src/views/admin/Account.vue b/frontend/src/views/admin/Account.vue
index bd6d6d83..1eabc894 100644
--- a/frontend/src/views/admin/Account.vue
+++ b/frontend/src/views/admin/Account.vue
@@ -286,15 +286,17 @@ onMounted(async () => {
                 {{ t('query') }}
             </n-button>
         </n-input-group>
-        <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>
-                <template #prefix="{ itemCount }">
-                    {{ t('itemCount') }}: {{ itemCount }}
-                </template>
-            </n-pagination>
+        <div style="overflow: auto;">
+            <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>
+                    <template #prefix="{ itemCount }">
+                        {{ t('itemCount') }}: {{ itemCount }}
+                    </template>
+                </n-pagination>
+            </div>
+            <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
         </div>
-        <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
     </div>
 </template>
 
@@ -303,4 +305,8 @@ onMounted(async () => {
     margin-top: 10px;
     margin-bottom: 10px;
 }
+
+.n-data-table {
+    min-width: 1000px;
+}
 </style>
diff --git a/frontend/src/views/admin/SenderAccess.vue b/frontend/src/views/admin/SenderAccess.vue
index 7da17234..35136222 100644
--- a/frontend/src/views/admin/SenderAccess.vue
+++ b/frontend/src/views/admin/SenderAccess.vue
@@ -198,15 +198,17 @@ onMounted(async () => {
         {{ t('query') }}
       </n-button>
     </n-input-group>
-    <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>
-        <template #prefix="{ itemCount }">
-          {{ t('itemCount') }}: {{ itemCount }}
-        </template>
-      </n-pagination>
+    <div style="overflow: auto;">
+      <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>
+          <template #prefix="{ itemCount }">
+            {{ t('itemCount') }}: {{ itemCount }}
+          </template>
+        </n-pagination>
+      </div>
+      <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
     </div>
-    <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
   </div>
 </template>
 
@@ -215,4 +217,8 @@ onMounted(async () => {
   margin-top: 10px;
   margin-bottom: 10px;
 }
+
+.n-data-table {
+  min-width: 700px;
+}
 </style>
diff --git a/frontend/src/views/admin/UserManagement.vue b/frontend/src/views/admin/UserManagement.vue
index 069ddc66..2fd4430b 100644
--- a/frontend/src/views/admin/UserManagement.vue
+++ b/frontend/src/views/admin/UserManagement.vue
@@ -368,21 +368,23 @@ onMounted(async () => {
                 {{ t('query') }}
             </n-button>
         </n-input-group>
-        <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>
-                <template #prefix="{ itemCount }">
-                    {{ t('itemCount') }}: {{ itemCount }}
-                </template>
-                <template #suffix>
-                    <n-button @click="showCreateUser = true" size="small" tertiary type="primary"
-                        style="margin-left: 10px">
-                        {{ t('createUser') }}
-                    </n-button>
-                </template>
-            </n-pagination>
+        <div style="overflow: auto;">
+            <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>
+                    <template #prefix="{ itemCount }">
+                        {{ t('itemCount') }}: {{ itemCount }}
+                    </template>
+                    <template #suffix>
+                        <n-button @click="showCreateUser = true" size="small" tertiary type="primary"
+                            style="margin-left: 10px">
+                            {{ t('createUser') }}
+                        </n-button>
+                    </template>
+                </n-pagination>
+            </div>
+            <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
         </div>
-        <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
     </div>
 </template>
 
@@ -391,4 +393,8 @@ onMounted(async () => {
     margin-top: 10px;
     margin-bottom: 10px;
 }
+
+.n-data-table {
+    min-width: 800px;
+}
 </style>
diff --git a/frontend/src/views/admin/Webhook.vue b/frontend/src/views/admin/Webhook.vue
index 1145ce33..7d943c36 100644
--- a/frontend/src/views/admin/Webhook.vue
+++ b/frontend/src/views/admin/Webhook.vue
@@ -36,6 +36,7 @@ class WebhookSettings {
 
 const webhookSettings = ref(new WebhookSettings([]))
 const webhookEnabled = ref(false)
+const errorInfo = ref('')
 
 const getSettings = async () => {
     try {
@@ -43,7 +44,7 @@ const getSettings = async () => {
         Object.assign(webhookSettings.value, res)
         webhookEnabled.value = true
     } catch (error) {
-        message.error((error as Error).message || "error");
+        errorInfo.value = (error as Error).message || "error";
     }
 }
 
@@ -75,7 +76,7 @@ onMounted(async () => {
                 {{ t('save') }}
             </n-button>
         </n-card>
-        <n-result v-else status="404" :title="t('notEnabled')" />
+        <n-result v-else status="404" :title="t('notEnabled')" :description="errorInfo" />
     </div>
 </template>
 
diff --git a/frontend/src/views/user/AddressManagement.vue b/frontend/src/views/user/AddressManagement.vue
index d0b361df..ea702e70 100644
--- a/frontend/src/views/user/AddressManagement.vue
+++ b/frontend/src/views/user/AddressManagement.vue
@@ -164,7 +164,13 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div>
+    <div style="overflow: auto;">
         <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
     </div>
 </template>
+
+<style scoped>
+.n-data-table {
+    min-width: 700px;
+}
+</style>
diff --git a/pages/package.json b/pages/package.json
index f1b64e16..799cd13a 100644
--- a/pages/package.json
+++ b/pages/package.json
@@ -1,6 +1,6 @@
 {
   "name": "temp-email-pages",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/vitepress-docs/package.json b/vitepress-docs/package.json
index 4618ccda..f35a72da 100644
--- a/vitepress-docs/package.json
+++ b/vitepress-docs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "temp-mail-docs",
   "private": true,
-  "version": "0.7.3",
+  "version": "0.7.4",
   "type": "module",
   "devDependencies": {
     "@types/node": "^22.3.0",
diff --git a/worker/package.json b/worker/package.json
index 69b8815a..a9c89f6d 100644
--- a/worker/package.json
+++ b/worker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cloudflare_temp_email",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/worker/src/constants.ts b/worker/src/constants.ts
index 19cfb71f..8f99ae72 100644
--- a/worker/src/constants.ts
+++ b/worker/src/constants.ts
@@ -1,5 +1,5 @@
 export const CONSTANTS = {
-    VERSION: 'v0.7.3',
+    VERSION: 'v0.7.4',
 
     // DB settings
     ADDRESS_BLOCK_LIST_KEY: 'address_block_list',