feat: UI add min-width for table page (#428)

2026-05-06 20:32:55 +08:00 · 2024-08-19 22:53:13 +08:00
parent 1cf38c1768
commit 4c6fd3c2af
14 changed files with 80 additions and 46 deletions
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "ms-python.vscode-pylance",
+    "1yib.rust-bundle",
+    "rust-lang.rust-analyzer",
+    "vue.volar"
+  ]
+}
--- 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 的正则表达式, 只用于检查，符合条件将通过检查
--- a/frontend/.vscode/extensions.json
+++ b/frontend/.vscode/extensions.json
@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}
--- 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": {
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>

--- 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>
--- 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": {
--- 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",
--- 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": {
--- 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',