From df021819b41c4a18fa670e06f4c09ffcde83f8f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=97=E5=AD=90?= <i@haozi.net>
Date: Thu, 17 Oct 2024 17:18:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=A7=E5=B9=85=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/app/IndexView.vue             | 11 +++---
 web/src/views/apps/fail2ban/IndexView.vue   | 29 +++++++++------
 web/src/views/apps/mysql/IndexView.vue      | 24 ++++++++++--
 web/src/views/apps/nginx/IndexView.vue      | 24 ++++++++++--
 web/src/views/apps/php/IndexView.vue        | 39 ++++++++++++++++----
 web/src/views/apps/postgresql/IndexView.vue | 24 ++++++++++--
 web/src/views/apps/pureftpd/IndexView.vue   | 15 +++++---
 web/src/views/apps/redis/IndexView.vue      | 24 ++++++++++--
 web/src/views/apps/rsync/IndexView.vue      | 31 ++++++++++++----
 web/src/views/apps/s3fs/IndexView.vue       |  9 ++---
 web/src/views/apps/supervisor/IndexView.vue | 30 ++++++++++++---
 web/src/views/backup/ListView.vue           | 16 +++++---
 web/src/views/cert/AccountView.vue          | 23 +++++++++---
 web/src/views/cert/CertView.vue             | 16 ++++----
 web/src/views/cert/DnsView.vue              | 15 +++++---
 web/src/views/container/ContainerView.vue   | 19 +++++++---
 web/src/views/container/ImageView.vue       | 20 ++++++----
 web/src/views/container/NetworkView.vue     | 22 +++++++----
 web/src/views/container/VolumeView.vue      | 19 +++++++---
 web/src/views/cron/IndexView.vue            | 27 ++++++++++----
 web/src/views/file/ListTable.vue            | 41 ++++++++++++++++-----
 web/src/views/safe/IndexView.vue            | 16 ++++----
 web/src/views/task/IndexView.vue            | 11 +++---
 web/src/views/website/IndexView.vue         | 16 ++++----
 24 files changed, 372 insertions(+), 149 deletions(-)

diff --git a/web/src/views/app/IndexView.vue b/web/src/views/app/IndexView.vue
index dedda3fb87..a7d48f83ef 100644
--- a/web/src/views/app/IndexView.vue
+++ b/web/src/views/app/IndexView.vue
@@ -20,26 +20,27 @@ const columns: any = [
   {
     title: t('appIndex.columns.name'),
     key: 'name',
-    width: 200,
+    minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: t('appIndex.columns.description'),
     key: 'description',
+    minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: t('appIndex.columns.installedVersion'),
     key: 'installed_version',
-    width: 100,
+    minWidth: 100,
     ellipsis: { tooltip: true }
   },
   {
     title: t('appIndex.columns.show'),
     key: 'show',
-    width: 100,
+    minWidth: 100,
     align: 'center',
     render(row: any) {
       return h(NSwitch, {
@@ -53,9 +54,8 @@ const columns: any = [
   {
     title: t('appIndex.columns.actions'),
     key: 'actions',
-    width: 280,
+    minWidth: 280,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -238,6 +238,7 @@ onMounted(() => {
       <n-data-table
         striped
         remote
+        :scroll-x="1000"
         :loading="false"
         :columns="columns"
         :data="apps"
diff --git a/web/src/views/apps/fail2ban/IndexView.vue b/web/src/views/apps/fail2ban/IndexView.vue
index 3c64a3f353..cd34e65af8 100644
--- a/web/src/views/apps/fail2ban/IndexView.vue
+++ b/web/src/views/apps/fail2ban/IndexView.vue
@@ -40,14 +40,13 @@ const jailsColumns: any = [
   {
     title: '名称',
     key: 'name',
-    fixed: 'left',
-    width: 300,
+    minWidth: 250,
     ellipsis: { tooltip: true }
   },
   {
     title: '状态',
     key: 'enabled',
-    width: 60,
+    minWidth: 60,
     align: 'center',
     render(row: any) {
       return h(NSwitch, {
@@ -58,16 +57,21 @@ const jailsColumns: any = [
       })
     }
   },
-  { title: '最大尝试', key: 'max_retry', width: 150, ellipsis: { tooltip: true } },
-  { title: '封禁时间', key: 'ban_time', width: 150, ellipsis: { tooltip: true } },
-  { title: '周期', key: 'find_time', width: 150, ellipsis: { tooltip: true } },
-  { title: '日志路径', key: 'log_path', resizable: true, ellipsis: { tooltip: true } },
+  { title: '最大尝试', key: 'max_retry', minWidth: 150, ellipsis: { tooltip: true } },
+  { title: '封禁时间', key: 'ban_time', minWidth: 150, ellipsis: { tooltip: true } },
+  { title: '周期', key: 'find_time', minWidth: 150, ellipsis: { tooltip: true } },
+  {
+    title: '日志路径',
+    key: 'log_path',
+    minWidth: 150,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
   {
     title: '操作',
     key: 'actions',
-    width: 200,
+    minWidth: 280,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -123,16 +127,15 @@ const banedIPColumns: any = [
   {
     title: 'IP',
     key: 'ip',
-    fixed: 'left',
+    minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: '操作',
     key: 'actions',
-    width: 100,
+    minWidth: 100,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -376,6 +379,7 @@ onMounted(() => {
           <n-data-table
             striped
             remote
+            :scroll-x="1000"
             :loading="false"
             :columns="jailsColumns"
             :data="jails"
@@ -475,6 +479,7 @@ onMounted(() => {
           <n-data-table
             striped
             remote
+            :scroll-x="300"
             :loading="false"
             :columns="banedIPColumns"
             :data="jailBanedList"
diff --git a/web/src/views/apps/mysql/IndexView.vue b/web/src/views/apps/mysql/IndexView.vue
index a3cee8729d..3bf7a8297e 100644
--- a/web/src/views/apps/mysql/IndexView.vue
+++ b/web/src/views/apps/mysql/IndexView.vue
@@ -21,8 +21,19 @@ const statusStr = computed(() => {
 })
 
 const loadColumns: any = [
-  { title: '属性', key: 'name', fixed: 'left', resizable: true, ellipsis: { tooltip: true } },
-  { title: '当前值', key: 'value', width: 200, ellipsis: { tooltip: true } }
+  {
+    title: '属性',
+    key: 'name',
+    minWidth: 200,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '当前值',
+    key: 'value',
+    minWidth: 200,
+    ellipsis: { tooltip: true }
+  }
 ]
 
 const load = ref<any[]>([])
@@ -243,7 +254,14 @@ onMounted(() => {
         </n-space>
       </n-tab-pane>
       <n-tab-pane name="load" tab="负载状态">
-        <n-data-table striped remote :loading="false" :columns="loadColumns" :data="load" />
+        <n-data-table
+          striped
+          remote
+          :scroll-x="400"
+          :loading="false"
+          :columns="loadColumns"
+          :data="load"
+        />
       </n-tab-pane>
       <n-tab-pane name="error-log" tab="错误日志">
         <Editor
diff --git a/web/src/views/apps/nginx/IndexView.vue b/web/src/views/apps/nginx/IndexView.vue
index 4448c5349e..92b514eb3f 100644
--- a/web/src/views/apps/nginx/IndexView.vue
+++ b/web/src/views/apps/nginx/IndexView.vue
@@ -20,8 +20,19 @@ const statusStr = computed(() => {
 })
 
 const columns: any = [
-  { title: '属性', key: 'name', fixed: 'left', resizable: true, ellipsis: { tooltip: true } },
-  { title: '当前值', key: 'value', width: 200, ellipsis: { tooltip: true } }
+  {
+    title: '属性',
+    key: 'name',
+    minWidth: 200,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '当前值',
+    key: 'value',
+    minWidth: 200,
+    ellipsis: { tooltip: true }
+  }
 ]
 
 const load = ref<any[]>([])
@@ -197,7 +208,14 @@ onMounted(() => {
         </n-space>
       </n-tab-pane>
       <n-tab-pane name="load" tab="负载状态">
-        <n-data-table striped remote :loading="false" :columns="columns" :data="load" />
+        <n-data-table
+          striped
+          remote
+          :scroll-x="400"
+          :loading="false"
+          :columns="columns"
+          :data="load"
+        />
       </n-tab-pane>
       <n-tab-pane name="error-log" tab="错误日志">
         <Editor
diff --git a/web/src/views/apps/php/IndexView.vue b/web/src/views/apps/php/IndexView.vue
index 9997862076..3ab839a781 100644
--- a/web/src/views/apps/php/IndexView.vue
+++ b/web/src/views/apps/php/IndexView.vue
@@ -27,18 +27,22 @@ const extensionColumns: any = [
   {
     title: '拓展名',
     key: 'name',
-    fixed: 'left',
-    width: 250,
+    minWidth: 250,
     resizable: true,
     ellipsis: { tooltip: true }
   },
-  { title: '描述', key: 'description', resizable: true, ellipsis: { tooltip: true } },
+  {
+    title: '描述',
+    key: 'description',
+    resizable: true,
+    minWidth: 250,
+    ellipsis: { tooltip: true }
+  },
   {
     title: '操作',
     key: 'actions',
-    width: 240,
+    minWidth: 240,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -89,8 +93,19 @@ const extensionColumns: any = [
 ]
 
 const loadColumns: any = [
-  { title: '属性', key: 'name', fixed: 'left', resizable: true, ellipsis: { tooltip: true } },
-  { title: '当前值', key: 'value', width: 200, ellipsis: { tooltip: true } }
+  {
+    title: '属性',
+    key: 'name',
+    minWidth: 200,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '当前值',
+    key: 'value',
+    minWidth: 200,
+    ellipsis: { tooltip: true }
+  }
 ]
 
 const extensions = ref<any[]>([])
@@ -319,6 +334,7 @@ onMounted(() => {
           <n-data-table
             striped
             remote
+            :scroll-x="1000"
             :loading="false"
             :columns="extensionColumns"
             :data="extensions"
@@ -365,7 +381,14 @@ onMounted(() => {
         </n-space>
       </n-tab-pane>
       <n-tab-pane name="load" tab="负载状态">
-        <n-data-table striped remote :loading="false" :columns="loadColumns" :data="load" />
+        <n-data-table
+          striped
+          remote
+          :scroll-x="400"
+          :loading="false"
+          :columns="loadColumns"
+          :data="load"
+        />
       </n-tab-pane>
       <n-tab-pane name="error-log" tab="错误日志">
         <Editor
diff --git a/web/src/views/apps/postgresql/IndexView.vue b/web/src/views/apps/postgresql/IndexView.vue
index 1857ab7a57..69ebf95f95 100644
--- a/web/src/views/apps/postgresql/IndexView.vue
+++ b/web/src/views/apps/postgresql/IndexView.vue
@@ -20,8 +20,19 @@ const statusStr = computed(() => {
 })
 
 const loadColumns: any = [
-  { title: '属性', key: 'name', fixed: 'left', resizable: true, ellipsis: { tooltip: true } },
-  { title: '当前值', key: 'value', width: 200, ellipsis: { tooltip: true } }
+  {
+    title: '属性',
+    key: 'name',
+    minWidth: 200,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '当前值',
+    key: 'value',
+    minWidth: 200,
+    ellipsis: { tooltip: true }
+  }
 ]
 
 const load = ref<any[]>([])
@@ -233,7 +244,14 @@ onMounted(() => {
         </n-space>
       </n-tab-pane>
       <n-tab-pane name="load" tab="负载状态">
-        <n-data-table striped remote :loading="false" :columns="loadColumns" :data="load" />
+        <n-data-table
+          striped
+          remote
+          :scroll-x="400"
+          :loading="false"
+          :columns="loadColumns"
+          :data="load"
+        />
       </n-tab-pane>
       <n-tab-pane name="log" tab="日志">
         <Editor
diff --git a/web/src/views/apps/pureftpd/IndexView.vue b/web/src/views/apps/pureftpd/IndexView.vue
index 30cf7a9294..83dd968f7b 100644
--- a/web/src/views/apps/pureftpd/IndexView.vue
+++ b/web/src/views/apps/pureftpd/IndexView.vue
@@ -45,18 +45,22 @@ const userColumns: any = [
   {
     title: '用户名',
     key: 'username',
-    fixed: 'left',
-    width: 250,
+    minWidth: 250,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '路径',
+    key: 'path',
+    minWidth: 250,
     resizable: true,
     ellipsis: { tooltip: true }
   },
-  { title: '路径', key: 'path', resizable: true, ellipsis: { tooltip: true } },
   {
     title: '操作',
     key: 'actions',
-    width: 240,
+    minWidth: 240,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -281,6 +285,7 @@ onMounted(() => {
           <n-data-table
             striped
             remote
+            :scroll-x="1000"
             :loading="false"
             :columns="userColumns"
             :data="users"
diff --git a/web/src/views/apps/redis/IndexView.vue b/web/src/views/apps/redis/IndexView.vue
index 915cf8c592..585dba92be 100644
--- a/web/src/views/apps/redis/IndexView.vue
+++ b/web/src/views/apps/redis/IndexView.vue
@@ -18,8 +18,19 @@ const statusStr = computed(() => {
 })
 
 const loadColumns: any = [
-  { title: '属性', key: 'name', fixed: 'left', resizable: true, ellipsis: { tooltip: true } },
-  { title: '当前值', key: 'value', width: 200, ellipsis: { tooltip: true } }
+  {
+    title: '属性',
+    key: 'name',
+    minWidth: 200,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '当前值',
+    key: 'value',
+    minWidth: 200,
+    ellipsis: { tooltip: true }
+  }
 ]
 
 const load = ref<any[]>([])
@@ -161,7 +172,14 @@ onMounted(() => {
         </n-space>
       </n-tab-pane>
       <n-tab-pane name="load" tab="负载状态">
-        <n-data-table striped remote :loading="false" :columns="loadColumns" :data="load" />
+        <n-data-table
+          striped
+          remote
+          :scroll-x="1000"
+          :loading="false"
+          :columns="loadColumns"
+          :data="load"
+        />
       </n-tab-pane>
     </n-tabs>
   </common-page>
diff --git a/web/src/views/apps/rsync/IndexView.vue b/web/src/views/apps/rsync/IndexView.vue
index fea812dece..6fc9bae3df 100644
--- a/web/src/views/apps/rsync/IndexView.vue
+++ b/web/src/views/apps/rsync/IndexView.vue
@@ -43,21 +43,37 @@ const processColumns: any = [
   {
     title: '名称',
     key: 'name',
-    width: 200,
-    fixed: 'left',
+    minWidth: 200,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '目录',
+    key: 'path',
+    minWidth: 250,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '用户',
+    key: 'auth_user',
+    minWidth: 200,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '主机',
+    key: 'hosts_allow',
+    minWidth: 250,
     resizable: true,
     ellipsis: { tooltip: true }
   },
-  { title: '目录', key: 'path', width: 250, resizable: true, ellipsis: { tooltip: true } },
-  { title: '用户', key: 'auth_user', width: 200, resizable: true, ellipsis: { tooltip: true } },
-  { title: '主机', key: 'hosts_allow', width: 250, resizable: true, ellipsis: { tooltip: true } },
   { title: '备注', key: 'comment', resizable: true, ellipsis: { tooltip: true } },
   {
     title: '操作',
     key: 'actions',
-    width: 200,
+    minWidth: 200,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -299,6 +315,7 @@ onMounted(() => {
           <n-data-table
             striped
             remote
+            :scroll-x="1000"
             :loading="false"
             :columns="processColumns"
             :data="modules"
diff --git a/web/src/views/apps/s3fs/IndexView.vue b/web/src/views/apps/s3fs/IndexView.vue
index 8b37a63bbe..2617c7090d 100644
--- a/web/src/views/apps/s3fs/IndexView.vue
+++ b/web/src/views/apps/s3fs/IndexView.vue
@@ -29,18 +29,16 @@ const columns: any = [
   {
     title: '挂载路径',
     key: 'path',
-    fixed: 'left',
-    width: 250,
+    minWidth: 250,
     resizable: true,
     ellipsis: { tooltip: true }
   },
-  { title: 'Bucket', key: 'bucket', resizable: true, ellipsis: { tooltip: true } },
+  { title: 'Bucket', key: 'bucket', resizable: true, minWidth: 250, ellipsis: { tooltip: true } },
   {
     title: '操作',
     key: 'actions',
-    width: 240,
+    minWidth: 240,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -124,6 +122,7 @@ onMounted(() => {
       <n-data-table
         striped
         remote
+        :scroll-x="1000"
         :loading="false"
         :columns="columns"
         :data="mounts"
diff --git a/web/src/views/apps/supervisor/IndexView.vue b/web/src/views/apps/supervisor/IndexView.vue
index 63d5962c11..53377180f5 100644
--- a/web/src/views/apps/supervisor/IndexView.vue
+++ b/web/src/views/apps/supervisor/IndexView.vue
@@ -43,19 +43,36 @@ const processColumns: any = [
   {
     title: '名称',
     key: 'name',
-    fixed: 'left',
+    minWidth: 200,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '状态',
+    key: 'status',
+    minWidth: 100,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: 'PID',
+    key: 'pid',
+    minWidth: 100,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '运行时间',
+    key: 'uptime',
+    minWidth: 150,
     resizable: true,
     ellipsis: { tooltip: true }
   },
-  { title: '状态', key: 'status', width: 100, resizable: true, ellipsis: { tooltip: true } },
-  { title: 'PID', key: 'pid', width: 100, resizable: true, ellipsis: { tooltip: true } },
-  { title: '运行时间', key: 'uptime', width: 150, resizable: true, ellipsis: { tooltip: true } },
   {
     title: '操作',
     key: 'actions',
-    width: 500,
+    minWidth: 500,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -431,6 +448,7 @@ onUnmounted(() => {
           <n-data-table
             striped
             remote
+            :scroll-x="1000"
             :loading="false"
             :columns="processColumns"
             :data="processes"
diff --git a/web/src/views/backup/ListView.vue b/web/src/views/backup/ListView.vue
index 01443f99cb..e1215b2d56 100644
--- a/web/src/views/backup/ListView.vue
+++ b/web/src/views/backup/ListView.vue
@@ -18,12 +18,18 @@ const restoreModel = ref({
 })
 
 const columns: any = [
-  { title: '文件名', key: 'name', fixed: 'left', resizable: true, ellipsis: { tooltip: true } },
-  { title: '大小', key: 'size', width: 160, ellipsis: { tooltip: true } },
+  {
+    title: '文件名',
+    key: 'name',
+    minWidth: 200,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  { title: '大小', key: 'size', minWidth: 160, ellipsis: { tooltip: true } },
   {
     title: '更新日期',
     key: 'time',
-    width: 200,
+    minWidth: 200,
     ellipsis: { tooltip: true },
     render(row: any) {
       return formatDateTime(row.time)
@@ -32,9 +38,8 @@ const columns: any = [
   {
     title: '操作',
     key: 'actions',
-    width: 200,
+    minWidth: 200,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -142,6 +147,7 @@ onMounted(() => {
   <n-data-table
     striped
     remote
+    :scroll-x="1000"
     :loading="false"
     :columns="columns"
     :data="data"
diff --git a/web/src/views/cert/AccountView.vue b/web/src/views/cert/AccountView.vue
index 839bf21d2e..f559084612 100644
--- a/web/src/views/cert/AccountView.vue
+++ b/web/src/views/cert/AccountView.vue
@@ -39,11 +39,17 @@ const caProviders = ref<any>([])
 const algorithms = ref<any>([])
 
 const accountColumns: any = [
-  { title: '邮箱', key: 'email', resizable: true, ellipsis: { tooltip: true } },
+  {
+    title: '邮箱',
+    key: 'email',
+    minWidth: 200,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
   {
     title: 'CA',
     key: 'ca',
-    width: 150,
+    minWidth: 150,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any) {
@@ -61,13 +67,18 @@ const accountColumns: any = [
       )
     }
   },
-  { title: '密钥类型', key: 'key_type', width: 150, resizable: true, ellipsis: { tooltip: true } },
+  {
+    title: '密钥类型',
+    key: 'key_type',
+    minWidth: 150,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
   {
     title: '操作',
     key: 'actions',
-    width: 200,
+    minWidth: 200,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -202,8 +213,8 @@ onMounted(() => {
     <n-data-table
       striped
       remote
+      :scroll-x="1000"
       :loading="false"
-      :scroll-x="1200"
       :columns="accountColumns"
       :data="accountData"
       :row-key="(row: any) => row.id"
diff --git a/web/src/views/cert/CertView.vue b/web/src/views/cert/CertView.vue
index 39dca82e54..bae926b35e 100644
--- a/web/src/views/cert/CertView.vue
+++ b/web/src/views/cert/CertView.vue
@@ -46,6 +46,7 @@ const certColumns: any = [
   {
     title: '域名',
     key: 'domains',
+    minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any) {
@@ -63,7 +64,7 @@ const certColumns: any = [
   {
     title: '类型',
     key: 'type',
-    width: 100,
+    minWidth: 100,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any) {
@@ -95,7 +96,7 @@ const certColumns: any = [
   {
     title: '关联账号',
     key: 'account_id',
-    width: 200,
+    minWidth: 150,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any) {
@@ -114,7 +115,7 @@ const certColumns: any = [
   {
     title: '关联网站',
     key: 'website_id',
-    width: 150,
+    minWidth: 150,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any) {
@@ -133,7 +134,7 @@ const certColumns: any = [
   {
     title: '关联DNS',
     key: 'dns_id',
-    width: 150,
+    minWidth: 150,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any) {
@@ -152,7 +153,7 @@ const certColumns: any = [
   {
     title: '自动续签',
     key: 'auto_renew',
-    width: 100,
+    minWidth: 100,
     align: 'center',
     resizable: true,
     render(row: any) {
@@ -167,9 +168,8 @@ const certColumns: any = [
   {
     title: '操作',
     key: 'actions',
-    width: 350,
+    minWidth: 350,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     resizable: true,
     render(row: any) {
@@ -485,8 +485,8 @@ onMounted(() => {
     <n-data-table
       striped
       remote
+      :scroll-x="1000"
       :loading="false"
-      :scroll-x="1200"
       :columns="certColumns"
       :data="certData"
       :row-key="(row: any) => row.id"
diff --git a/web/src/views/cert/DnsView.vue b/web/src/views/cert/DnsView.vue
index 2c13c9bc36..7a71abbae1 100644
--- a/web/src/views/cert/DnsView.vue
+++ b/web/src/views/cert/DnsView.vue
@@ -33,11 +33,17 @@ const updateDNS = ref<any>()
 const dnsProviders = ref<any>([])
 
 const dnsColumns: any = [
-  { title: '备注名称', key: 'name', resizable: true, ellipsis: { tooltip: true } },
+  {
+    title: '备注名称',
+    key: 'name',
+    minWidth: 200,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
   {
     title: '类型',
     key: 'type',
-    width: 150,
+    minWidth: 150,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any) {
@@ -69,9 +75,8 @@ const dnsColumns: any = [
   {
     title: '操作',
     key: 'actions',
-    width: 200,
+    minWidth: 200,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -203,8 +208,8 @@ onMounted(async () => {
     <n-data-table
       striped
       remote
+      :scroll-x="1000"
       :loading="false"
-      :scroll-x="1200"
       :columns="dnsColumns"
       :data="dnsData"
       :row-key="(row: any) => row.id"
diff --git a/web/src/views/container/ContainerView.vue b/web/src/views/container/ContainerView.vue
index 60d042ce44..53db3d9b9b 100644
--- a/web/src/views/container/ContainerView.vue
+++ b/web/src/views/container/ContainerView.vue
@@ -25,11 +25,17 @@ const onChecked = (rowKeys: any) => {
 
 const columns: any = [
   { type: 'selection', fixed: 'left' },
-  { title: '容器名', key: 'name', width: 150, resizable: true, ellipsis: { tooltip: true } },
+  {
+    title: '容器名',
+    key: 'name',
+    minWidth: 150,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
   {
     title: '状态',
     key: 'state',
-    width: 100,
+    minWidth: 100,
     resizable: true,
     render(row: any) {
       return h(NSwitch, {
@@ -46,10 +52,11 @@ const columns: any = [
       })
     }
   },
-  { title: '镜像', key: 'image', width: 300, resizable: true, ellipsis: { tooltip: true } },
+  { title: '镜像', key: 'image', minWidth: 300, resizable: true, ellipsis: { tooltip: true } },
   {
     title: '端口（主机->容器）',
     key: 'ports',
+    minWidth: 100,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any) {
@@ -63,16 +70,15 @@ const columns: any = [
   {
     title: '运行状态',
     key: 'status',
-    width: 300,
+    minWidth: 300,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: '操作',
     key: 'actions',
-    width: 250,
+    minWidth: 250,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -433,6 +439,7 @@ onMounted(() => {
       <n-data-table
         striped
         remote
+        :scroll-x="1000"
         :data="data"
         :columns="columns"
         :row-key="(row: any) => row.id"
diff --git a/web/src/views/container/ImageView.vue b/web/src/views/container/ImageView.vue
index 2d0f724c60..81649f0798 100644
--- a/web/src/views/container/ImageView.vue
+++ b/web/src/views/container/ImageView.vue
@@ -22,18 +22,24 @@ const onChecked = (rowKeys: any) => {
 
 const columns: any = [
   { type: 'selection', fixed: 'left' },
-  { title: 'ID', key: 'id', width: 150, resizable: true, ellipsis: { tooltip: true } },
+  {
+    title: 'ID',
+    key: 'id',
+    minWidth: 150,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
   {
     title: '容器数',
     key: 'containers',
-    width: 100,
+    minWidth: 100,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: '镜像',
     key: 'repo_tags',
-    width: 300,
+    minWidth: 300,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any): any {
@@ -50,23 +56,22 @@ const columns: any = [
   {
     title: '大小',
     key: 'size',
-    width: 150,
+    minWidth: 150,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: '创建时间',
     key: 'created',
-    width: 200,
+    minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: '操作',
     key: 'actions',
-    width: 120,
+    minWidth: 120,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -174,6 +179,7 @@ onMounted(() => {
       <n-data-table
         striped
         remote
+        :scroll-x="1000"
         :data="data"
         :columns="columns"
         :row-key="(row: any) => row.id"
diff --git a/web/src/views/container/NetworkView.vue b/web/src/views/container/NetworkView.vue
index d8cbb2ae11..9c49636a66 100644
--- a/web/src/views/container/NetworkView.vue
+++ b/web/src/views/container/NetworkView.vue
@@ -44,25 +44,31 @@ const onChecked = (rowKeys: any) => {
 
 const columns: any = [
   { type: 'selection', fixed: 'left' },
-  { title: '名称', key: 'name', width: 150, resizable: true, ellipsis: { tooltip: true } },
+  {
+    title: '名称',
+    key: 'name',
+    minWidth: 150,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
   {
     title: '驱动',
     key: 'driver',
-    width: 100,
+    minWidth: 100,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: '范围',
     key: 'scope',
-    width: 100,
+    minWidth: 100,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: '子网',
     key: 'subnet',
-    width: 150,
+    minWidth: 150,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any): any {
@@ -79,7 +85,7 @@ const columns: any = [
   {
     title: '网关',
     key: 'gateway',
-    width: 150,
+    minWidth: 150,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any): any {
@@ -96,16 +102,15 @@ const columns: any = [
   {
     title: '创建时间',
     key: 'created',
-    width: 200,
+    minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: '操作',
     key: 'actions',
-    width: 120,
+    minWidth: 120,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -213,6 +218,7 @@ onMounted(() => {
       <n-data-table
         striped
         remote
+        :scroll-x="1000"
         :data="data"
         :columns="columns"
         :row-key="(row: any) => row.id"
diff --git a/web/src/views/container/VolumeView.vue b/web/src/views/container/VolumeView.vue
index 9bc07a48f0..3b98e339ea 100644
--- a/web/src/views/container/VolumeView.vue
+++ b/web/src/views/container/VolumeView.vue
@@ -25,18 +25,24 @@ const onChecked = (rowKeys: any) => {
 
 const columns: any = [
   { type: 'selection', fixed: 'left' },
-  { title: '名称', key: 'id', width: 150, resizable: true, ellipsis: { tooltip: true } },
+  {
+    title: '名称',
+    key: 'id',
+    minWidth: 150,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
   {
     title: '驱动',
     key: 'driver',
-    width: 100,
+    minWidth: 100,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: '范围',
     key: 'scope',
-    width: 100,
+    minWidth: 100,
     resizable: true,
     ellipsis: { tooltip: true }
   },
@@ -44,21 +50,21 @@ const columns: any = [
     title: '挂载点',
     key: 'mount',
     resizable: true,
+    minWidth: 150,
     ellipsis: { tooltip: true }
   },
   {
     title: '创建时间',
     key: 'created',
-    width: 200,
+    minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: '操作',
     key: 'actions',
-    width: 120,
+    minWidth: 120,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -166,6 +172,7 @@ onMounted(() => {
       <n-data-table
         striped
         remote
+        :scroll-x="1000"
         :data="data"
         :columns="columns"
         :row-key="(row: any) => row.id"
diff --git a/web/src/views/cron/IndexView.vue b/web/src/views/cron/IndexView.vue
index eb53590a58..79e42234d7 100644
--- a/web/src/views/cron/IndexView.vue
+++ b/web/src/views/cron/IndexView.vue
@@ -51,11 +51,17 @@ const websites = ref<any>([])
 
 const columns: any = [
   { type: 'selection', fixed: 'left' },
-  { title: '任务名', key: 'name', width: 150, resizable: true, ellipsis: { tooltip: true } },
+  {
+    title: '任务名',
+    key: 'name',
+    minWidth: 150,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
   {
     title: '任务类型',
     key: 'type',
-    width: 100,
+    minWidth: 100,
     resizable: true,
     render(row: any) {
       return row.type === 'shell' ? '运行脚本' : row.type === 'backup' ? '备份数据' : '切割日志'
@@ -64,7 +70,7 @@ const columns: any = [
   {
     title: '启用',
     key: 'status',
-    width: 60,
+    minWidth: 60,
     align: 'center',
     resizable: true,
     render(row: any) {
@@ -76,11 +82,17 @@ const columns: any = [
       })
     }
   },
-  { title: '任务周期', key: 'time', width: 100, resizable: true, ellipsis: { tooltip: true } },
+  {
+    title: '任务周期',
+    key: 'time',
+    minWidth: 100,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
   {
     title: '创建时间',
     key: 'created_at',
-    width: 200,
+    minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any): string {
@@ -90,6 +102,7 @@ const columns: any = [
   {
     title: '最后更新时间',
     key: 'updated_at',
+    minWidth: 200,
     ellipsis: { tooltip: true },
     render(row: any): string {
       return formatDateTime(row.updated_at)
@@ -98,9 +111,8 @@ const columns: any = [
   {
     title: '操作',
     key: 'actions',
-    width: 280,
+    minWidth: 280,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -374,6 +386,7 @@ onMounted(() => {
         <n-data-table
           striped
           remote
+          :scroll-x="1000"
           :data="data"
           :columns="columns"
           :row-key="(row: any) => row.id"
diff --git a/web/src/views/file/ListTable.vue b/web/src/views/file/ListTable.vue
index 9acb3c5c2d..9a9dbfe063 100644
--- a/web/src/views/file/ListTable.vue
+++ b/web/src/views/file/ListTable.vue
@@ -38,7 +38,7 @@ const columns: DataTableColumns<RowData> = [
   {
     title: '名称',
     key: 'name',
-    width: '180',
+    minWidth: 180,
     ellipsis: {
       tooltip: true
     },
@@ -78,15 +78,35 @@ const columns: DataTableColumns<RowData> = [
       )
     }
   },
-  { title: '权限', key: 'mode', width: '80' },
-  { title: '所有者', key: 'owner', width: '80' },
-  { title: '组', key: 'group', width: '80' },
-  { title: '大小', key: 'size', width: '80' },
-  { title: '修改时间', key: 'modify', width: '150' },
+  {
+    title: '权限',
+    key: 'mode',
+    minWidth: 80
+  },
+  {
+    title: '所有者',
+    key: 'owner',
+    minWidth: 80
+  },
+  {
+    title: '组',
+    key: 'group',
+    minWidth: 80
+  },
+  {
+    title: '大小',
+    key: 'size',
+    minWidth: 80
+  },
+  {
+    title: '修改时间',
+    key: 'modify',
+    minWidth: 150
+  },
   {
     title: '操作',
     key: 'action',
-    width: '340',
+    minWidth: 340,
     render(row) {
       return h(
         NSpace,
@@ -355,7 +375,11 @@ onUnmounted(() => {
 
 <template>
   <n-data-table
+    remote
+    striped
+    virtual-scroll
     size="small"
+    :scroll-x="1000"
     :columns="columns"
     :data="data"
     :loading="loading"
@@ -363,9 +387,6 @@ onUnmounted(() => {
     :row-key="(row: any) => row.full"
     :checked-row-keys="selected"
     max-height="60vh"
-    remote
-    striped
-    virtual-scroll
     @update:page="handlePageChange"
     @update:page-size="handlePageSizeChange"
     @update:checked-row-keys="onChecked"
diff --git a/web/src/views/safe/IndexView.vue b/web/src/views/safe/IndexView.vue
index 444555a22b..3fa5949f51 100644
--- a/web/src/views/safe/IndexView.vue
+++ b/web/src/views/safe/IndexView.vue
@@ -20,7 +20,7 @@ const columns: any = [
   {
     title: '传输协议',
     key: 'protocol',
-    width: 150,
+    minWidth: 150,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any): any {
@@ -37,7 +37,7 @@ const columns: any = [
   {
     title: '网络协议',
     key: 'family',
-    width: 150,
+    minWidth: 150,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any): any {
@@ -54,7 +54,7 @@ const columns: any = [
   {
     title: '端口',
     key: 'port',
-    width: 250,
+    minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any): any {
@@ -67,7 +67,7 @@ const columns: any = [
   {
     title: '策略',
     key: 'strategy',
-    width: 150,
+    minWidth: 100,
     render(row: any): any {
       return h(
         NTag,
@@ -95,7 +95,7 @@ const columns: any = [
   {
     title: '方向',
     key: 'direction',
-    width: 150,
+    minWidth: 100,
     render(row: any): any {
       return h(NTag, null, {
         default: () => {
@@ -114,6 +114,7 @@ const columns: any = [
   {
     title: '目标',
     key: 'address',
+    minWidth: 100,
     render(row: any): any {
       return h(NTag, null, {
         default: () => {
@@ -129,8 +130,7 @@ const columns: any = [
     title: '操作',
     key: 'actions',
     align: 'center',
-    fixed: 'right',
-    width: 150,
+    minWidth: 150,
     hideInExcel: true,
     render(row: any) {
       return [
@@ -314,8 +314,8 @@ onMounted(() => {
       <n-data-table
         striped
         remote
+        :scroll-x="1000"
         :loading="false"
-        :scroll-x="1200"
         :columns="columns"
         :data="data"
         :row-key="(row: any) => JSON.stringify(row)"
diff --git a/web/src/views/task/IndexView.vue b/web/src/views/task/IndexView.vue
index 0cb589a6d1..028a1fab31 100644
--- a/web/src/views/task/IndexView.vue
+++ b/web/src/views/task/IndexView.vue
@@ -19,13 +19,14 @@ const columns: any = [
   {
     title: t('taskIndex.columns.name'),
     key: 'name',
+    minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: t('taskIndex.columns.status'),
     key: 'status',
-    width: 100,
+    minWidth: 100,
     ellipsis: { tooltip: true },
     render(row: any) {
       return row.status === 'finished'
@@ -40,7 +41,7 @@ const columns: any = [
   {
     title: t('taskIndex.columns.createdAt'),
     key: 'created_at',
-    width: 200,
+    minWidth: 200,
     ellipsis: { tooltip: true },
     render(row: any): string {
       return formatDateTime(row.created_at)
@@ -49,7 +50,7 @@ const columns: any = [
   {
     title: t('taskIndex.columns.updatedAt'),
     key: 'updated_at',
-    width: 200,
+    minWidth: 200,
     ellipsis: { tooltip: true },
     render(row: any): string {
       return formatDateTime(row.updated_at)
@@ -58,9 +59,8 @@ const columns: any = [
   {
     title: t('taskIndex.columns.actions'),
     key: 'actions',
-    width: 200,
+    minWidth: 200,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -208,6 +208,7 @@ onUnmounted(() => {
       <n-data-table
         striped
         remote
+        :scroll-x="1000"
         :loading="false"
         :columns="columns"
         :data="tasks"
diff --git a/web/src/views/website/IndexView.vue b/web/src/views/website/IndexView.vue
index 82d980cb05..842844ec81 100644
--- a/web/src/views/website/IndexView.vue
+++ b/web/src/views/website/IndexView.vue
@@ -26,14 +26,14 @@ const columns: any = [
   {
     title: t('websiteIndex.columns.name'),
     key: 'name',
-    width: 150,
+    minWidth: 150,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: t('websiteIndex.columns.status'),
     key: 'status',
-    width: 60,
+    minWidth: 60,
     align: 'center',
     render(row: any) {
       return h(NSwitch, {
@@ -47,14 +47,14 @@ const columns: any = [
   {
     title: t('websiteIndex.columns.path'),
     key: 'path',
-    width: 200,
+    minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true }
   },
   {
     title: 'SSL',
     key: 'ssl',
-    width: 60,
+    minWidth: 60,
     align: 'center',
     render(row: any) {
       return h(NSwitch, {
@@ -68,11 +68,12 @@ const columns: any = [
   {
     title: t('websiteIndex.columns.remark'),
     key: 'remark',
-    width: 200,
+    minWidth: 200,
     resizable: true,
     ellipsis: { tooltip: true },
     render(row: any) {
       return h(NInput, {
+        class: 'w-100',
         size: 'small',
         value: row.remark,
         onBlur: () => handleRemark(row),
@@ -85,9 +86,8 @@ const columns: any = [
   {
     title: t('websiteIndex.columns.actions'),
     key: 'actions',
-    width: 240,
+    minWidth: 280,
     align: 'center',
-    fixed: 'right',
     hideInExcel: true,
     render(row: any) {
       return [
@@ -388,7 +388,7 @@ onMounted(() => {
         striped
         remote
         :loading="false"
-        :scroll-x="1200"
+        :scroll-x="1000"
         :columns="columns"
         :data="data"
         :row-key="(row: any) => row.id"