feat: 大幅优化移动端体验

2026-02-04 07:57:21 +08:00 · 2024-10-17 17:18:54 +08:00
parent 57749f03b9
commit df021819b4
24 changed files with 372 additions and 149 deletions
--- 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"
--- 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"
--- 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
--- 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
--- 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
--- 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
--- 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"
--- 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>
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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)"
--- 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"
--- 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"