From 7029d985c6d6327b7e4e9ee1d378e9586df22a02 Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Tue, 17 Dec 2024 14:44:08 +0800
Subject: [PATCH] style: change some column width (#7385)

---
 frontend/src/lang/modules/en.ts               | 20 +++++++++----------
 .../src/views/container/compose/index.vue     | 17 +++++++++++-----
 .../src/views/container/container/index.vue   |  2 +-
 frontend/src/views/database/mysql/index.vue   |  2 +-
 .../src/views/database/postgresql/index.vue   |  2 +-
 .../src/views/host/process/process/index.vue  |  8 +++++++-
 .../src/views/toolbox/supervisor/index.vue    |  8 ++++----
 frontend/src/views/website/ssl/ca/index.vue   |  2 +-
 frontend/src/views/website/ssl/index.vue      |  6 +++---
 frontend/src/views/website/website/index.vue  |  2 +-
 10 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 33d01c05c..7591f602e 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -418,7 +418,7 @@ const message = {
         goInstall: 'Go to install',
         source: 'Source',
         isDelete: 'Deleted',
-        permission: 'Change permissions',
+        permission: 'Permissions',
         permissionForIP: 'IP',
         permissionAll: 'All of them(%)',
         databaseConnInfo: 'View connection info',
@@ -431,7 +431,7 @@ const message = {
         remoteHelper: 'Multiple IP comma-delimited, example: 172.16.10.111, 172.16.10.112',
         remoteConnHelper:
             'Remote connection to MySQL as user root may have security risks. Therefore, perform this operation with caution.',
-        changePassword: 'Change password',
+        changePassword: 'Password',
         changePasswordHelper:
             'The database has been associated with an application. Changing the password will change the database password of the application at the same time. The change takes effect after the application restarts.',
 
@@ -799,7 +799,7 @@ const message = {
         apps: 'App Store',
         local: 'Local',
         createCompose: 'Create',
-        composeDirectory: 'Compose directory',
+        composeDirectory: 'Directory',
         template: 'Template',
         composeTemplate: 'Compose template | Compose templates',
         createComposeTemplate: 'Create',
@@ -1209,7 +1209,7 @@ const message = {
         role: 'Permissions',
         info: 'View attributes',
         linkFile: 'Soft link',
-        terminal: 'Open terminal',
+        terminal: 'Terminal',
         batchoperation: 'batch operation',
         shareList: 'Share list',
         zip: 'Compressed',
@@ -2102,7 +2102,7 @@ const message = {
         disabled: 'Stopped',
         startProxy: 'This will start reverse proxy. Do you want to continue?',
         stopProxy: 'This will stop the reverse proxy. Do you want to continue?',
-        sourceFile: 'View source',
+        sourceFile: 'Source',
         proxyHelper1: 'When accessing this directory, the content of the target URL will be returned and displayed.',
         proxyPassHelper: 'The target URL must be valid and accessible.',
         proxyHostHelper: 'Pass the domain name in the request header to the proxy server.',
@@ -2237,14 +2237,14 @@ const message = {
         err: 'Error',
         value: 'record value',
         dnsResolveHelper: 'Please go to the DNS resolution service provider to add the following resolution records:',
-        detail: 'View details',
+        detail: 'Details',
         msg: 'Information',
         ssl: 'Certificate',
         key: 'Private key',
         startDate: 'Effective time',
         organization: 'issuing organization',
         renewConfirm: 'This will renew a new certificate for domain name {0}. Do you want to continue?',
-        autoRenew: 'Automatic renewal',
+        autoRenew: 'Auto-Renew',
         autoRenewHelper: 'Automatically renew 30 days before expiration',
         renewSuccess: 'Renewal successful',
         renewWebsite:
@@ -2435,7 +2435,7 @@ const message = {
     },
     process: {
         pid: 'Process ID',
-        ppid: 'Parent process ID',
+        ppid: 'Parent PID',
         numThreads: 'Threads',
         memory: 'Memory',
         diskRead: 'Disk read',
@@ -2465,7 +2465,7 @@ const message = {
         laddr: 'Source address/port',
         raddr: 'Destination address/port',
         stopProcess: 'End',
-        viewDetails: 'View details',
+        viewDetails: 'Details',
         stopProcessWarn: 'Are you sure you want to end this process (PID:{0})?',
         processName: 'Process name',
     },
@@ -2480,7 +2480,7 @@ const message = {
             user: 'User',
             command: 'Command',
             dir: 'Directory',
-            numprocs: 'Number of process',
+            numprocs: 'Num. of process',
             initWarn:
                 'This will modify "files" value in "[include"] section in the main configuration file. The directory of other configuration file will be: "{1Panel installation directory}/1panel/tools/supervisord/supervisor.d/".',
             operatorHelper: 'Operation {1} will be performed on {0}, continue? ',
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index 5fc4957d9..f3d1e9111 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -48,14 +48,14 @@
                             </el-text>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('container.from')" prop="createdBy" min-width="80" fix>
+                    <el-table-column :label="$t('container.from')" prop="createdBy" min-width="120" fix>
                         <template #default="{ row }">
                             <span v-if="row.createdBy === ''">{{ $t('container.local') }}</span>
                             <span v-if="row.createdBy === 'Apps'">{{ $t('container.apps') }}</span>
                             <span v-if="row.createdBy === '1Panel'">1Panel</span>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('container.composeDirectory')" min-width="80" fix>
+                    <el-table-column :label="$t('container.composeDirectory')" min-width="100" fix>
                         <template #default="{ row }">
                             <el-button type="primary" link @click="toComposeFolder(row)">
                                 <el-icon>
@@ -64,19 +64,20 @@
                             </el-button>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('container.containerStatus')" min-width="80" fix>
+                    <el-table-column :label="$t('container.containerStatus')" min-width="200" fix>
                         <template #default="scope">
                             <div>
                                 {{ getContainerStatus(scope.row.containers) }}
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('commons.table.createdAt')" prop="createdAt" min-width="80" fix />
+                    <el-table-column :label="$t('commons.table.createdAt')" prop="createdAt" min-width="180" fix />
                     <fu-table-operations
                         width="200px"
                         :ellipsis="10"
                         :buttons="buttons"
                         :label="$t('commons.table.operate')"
+                        :fixed="mobile ? false : 'right'"
                         fix
                     />
                 </ComplexTable>
@@ -90,7 +91,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, onMounted, ref } from 'vue';
+import { reactive, onMounted, ref, computed } from 'vue';
 import EditDialog from '@/views/container/compose/edit/index.vue';
 import CreateDialog from '@/views/container/compose/create/index.vue';
 import DeleteDialog from '@/views/container/compose/delete/index.vue';
@@ -99,6 +100,12 @@ import { loadContainerLog, loadDockerStatus, searchCompose } from '@/api/modules
 import i18n from '@/lang';
 import { Container } from '@/api/interface/container';
 import router from '@/routers';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
+
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
 
 const data = ref();
 const selects = ref<any>([]);
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index a1ec8eb77..73a672917 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -118,7 +118,7 @@
                         :label="$t('container.source')"
                         show-overflow-tooltip
                         prop="resource"
-                        min-width="120"
+                        min-width="150"
                     >
                         <template #default="{ row }">
                             <div v-if="row.hasLoad">
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 1b7e5cb0a..eec01fc98 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -207,7 +207,7 @@
                     />
                     <fu-table-operations
                         :ellipsis="mobile ? 0 : 10"
-                        :min-width="mobile ? 'auto' : 300"
+                        :min-width="mobile ? 'auto' : 400"
                         :buttons="buttons"
                         :label="$t('commons.table.operate')"
                         fixed="right"
diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
index 10feadd36..ab57832aa 100644
--- a/frontend/src/views/database/postgresql/index.vue
+++ b/frontend/src/views/database/postgresql/index.vue
@@ -169,7 +169,7 @@
                     />
                     <fu-table-operations
                         :ellipsis="mobile ? 0 : 10"
-                        :min-width="mobile ? 'auto' : 300"
+                        :min-width="mobile ? 'auto' : 400"
                         :buttons="buttons"
                         :label="$t('commons.table.operate')"
                         fixed="right"
diff --git a/frontend/src/views/host/process/process/index.vue b/frontend/src/views/host/process/process/index.vue
index 61ba824f6..2281971ef 100644
--- a/frontend/src/views/host/process/process/index.vue
+++ b/frontend/src/views/host/process/process/index.vue
@@ -54,11 +54,17 @@
                     <el-table-column
                         :label="$t('process.memory')"
                         fix
+                        min-width="120"
                         prop="rssValue"
                         :formatter="memFormatter"
                         sortable
                     ></el-table-column>
-                    <el-table-column :label="$t('process.numConnections')" fix prop="numConnections"></el-table-column>
+                    <el-table-column
+                        :label="$t('process.numConnections')"
+                        fix
+                        prop="numConnections"
+                        min-width="120"
+                    ></el-table-column>
                     <el-table-column
                         :label="$t('process.status')"
                         fix
diff --git a/frontend/src/views/toolbox/supervisor/index.vue b/frontend/src/views/toolbox/supervisor/index.vue
index 751d02b67..8e49d3b12 100644
--- a/frontend/src/views/toolbox/supervisor/index.vue
+++ b/frontend/src/views/toolbox/supervisor/index.vue
@@ -50,14 +50,14 @@
                         :label="$t('tool.supervisor.user')"
                         prop="user"
                         show-overflow-tooltip
-                        min-width="50px"
+                        min-width="120"
                     ></el-table-column>
                     <el-table-column
                         :label="$t('tool.supervisor.numprocs')"
                         prop="numprocs"
-                        min-width="60px"
+                        min-width="120"
                     ></el-table-column>
-                    <el-table-column :label="$t('tool.supervisor.manage')" min-width="80px">
+                    <el-table-column :label="$t('tool.supervisor.manage')" min-width="120">
                         <template #default="{ row }">
                             <div v-if="row.status && row.status.length > 0 && row.hasLoad">
                                 <el-button
@@ -142,7 +142,7 @@
                         :buttons="buttons"
                         :label="$t('commons.table.operate')"
                         :fixed="mobile ? false : 'right'"
-                        width="280px"
+                        min-width="300"
                         fix
                     />
                 </ComplexTable>
diff --git a/frontend/src/views/website/ssl/ca/index.vue b/frontend/src/views/website/ssl/ca/index.vue
index 1119af0ed..8914de7d6 100644
--- a/frontend/src/views/website/ssl/ca/index.vue
+++ b/frontend/src/views/website/ssl/ca/index.vue
@@ -30,7 +30,7 @@
                 :buttons="buttons"
                 :label="$t('commons.table.operate')"
                 fix
-                width="250px"
+                width="400px"
             />
         </ComplexTable>
         <Create ref="createRef" @close="search()" />
diff --git a/frontend/src/views/website/ssl/index.vue b/frontend/src/views/website/ssl/index.vue
index f65cfc3fd..f581b0845 100644
--- a/frontend/src/views/website/ssl/index.vue
+++ b/frontend/src/views/website/ssl/index.vue
@@ -45,14 +45,14 @@
                         fix
                         show-overflow-tooltip
                         prop="domains"
-                        min-width="90px"
+                        min-width="150px"
                     ></el-table-column>
                     <el-table-column
                         :label="$t('ssl.applyType')"
                         fix
                         show-overflow-tooltip
                         prop="provider"
-                        min-width="110px"
+                        min-width="180px"
                     >
                         <template #default="{ row }">{{ getProvider(row.provider) }}</template>
                     </el-table-column>
@@ -61,7 +61,7 @@
                         fix
                         show-overflow-tooltip
                         prop="acmeAccount.email"
-                        min-width="110px"
+                        min-width="180px"
                     ></el-table-column>
                     <el-table-column
                         :label="$t('commons.table.status')"
diff --git a/frontend/src/views/website/website/index.vue b/frontend/src/views/website/website/index.vue
index 3c4633703..b5b6357c4 100644
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@@ -165,7 +165,7 @@
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('website.sslExpireDate')" width="150px">
+                    <el-table-column :label="$t('website.sslExpireDate')" width="220px">
                         <template #default="{ row }">
                             <el-tag v-if="row.protocol == 'HTTPS'" :type="row.sslStatus">
                                 {{ dateFormatSimple(row.sslExpireDate) }}