style: change some column width (#7385)

1Panel-dev · Dec 17, 2024 · 7029d98 · 7029d98
1 parent 9539fd4
commit 7029d98
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) }}