feat: 大幅优化移动端体验

TheTNB · Oct 17, 2024 · df02181 · df02181
1 parent 57749f0
commit df02181
Show file tree

Hide file tree

Showing 24 changed files with 372 additions and 149 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>