style: Optimize layout style (#7352)

frontend/src/components/license-import/index.vue

@@ -33,7 +33,7 @@
                     {{ $t('license.power') }}
                 </el-button>
                 <div class="mt-3 mb-5">
-                    <el-button text type="primary" @click="toHalo">{{ $t('license.knowMorePro') }}</el-button>
+                    <el-button text type="primary" @click="toLxware">{{ $t('license.knowMorePro') }}</el-button>
                 </div>
             </div>
         </el-dialog>
@@ -73,7 +73,7 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
     uploadRef.value!.handleStart(file);
 };
 
-const toHalo = () => {
+const toLxware = () => {
     window.open('https://www.lxware.cn/1panel' + '', '_blank', 'noopener,noreferrer');
 };
 

frontend/src/components/system-upgrade/index.vue

@@ -16,7 +16,7 @@
                 <el-divider v-if="!mobile" direction="vertical" />
             </div>
             <div class="flex flex-wrap items-center">
-                <el-link :underline="false" type="primary" @click="toHalo">
+                <el-link :underline="false" type="primary" @click="toLxware">
                     {{ $t(globalStore.isIntl || !isProductPro ? 'license.community' : 'license.pro') }}
                 </el-link>
                 <el-link :underline="false" class="version" type="primary" @click="copyText(version)">
@@ -121,7 +121,7 @@ const handleClose = () => {
     drawerVisible.value = false;
 };
 
-const toHalo = () => {
+const toLxware = () => {
     if (!globalStore.isIntl) {
         window.open('https://www.lxware.cn/1panel' + '', '_blank', 'noopener,noreferrer');
     }

frontend/src/styles/common.scss

@@ -124,7 +124,7 @@ html {
 .input-help {
     font-size: 12px;
     word-break: break-all;
-    color: #ADB0BC;
+    color: #adb0bc;
     width: 100%;
     display: inline-block;
 }
@@ -443,7 +443,7 @@ html {
     cursor: pointer;
 }
 
-.dialog-footer{
+.dialog-footer {
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -464,7 +464,7 @@ html {
 .monaco-editor-tree-dark .el-tree-node.is-current > .el-tree-node__content {
     background-color: #111417;
 }
-.check-label{
+.check-label {
     background: var(--panel-main-bg-color-10) !important;
     .check-label-a {
         color: var(--panel-color-primary);
@@ -480,7 +480,6 @@ html {
     }
 }
 
-
 .el-descriptions {
     overflow: hidden;
     text-overflow: ellipsis;

frontend/src/styles/element-dark.scss

@@ -1,63 +1,62 @@
 html.dark {
+    --panel-color-primary: #3d8eff;
+    --panel-color-primary-light-8: #3674cc;
+    --panel-color-primary-light-1: #6eaaff;
+    --panel-color-primary-light-2: #366fc2;
+    --panel-color-primary-light-3: #3364ad;
+    --panel-color-primary-light-4: #2f558f;
+    --panel-color-primary-light-5: #372e46;
+    --panel-color-primary-light-6: #2a4066;
+    --panel-color-primary-light-7: #2d4a7a;
+    --panel-color-primary-light-9: #2d4a7a;
 
-    --panel-color-primary: #3D8EFF;
+    --panel-main-bg-color-1: #e3e6f3;
-    --panel-color-primary-light-8: #3674CC;
+    --panel-main-bg-color-2: #c0c2cf;
-    --panel-color-primary-light-1: #6EAAFF;
+    --panel-main-bg-color-3: #adb0bc;
-    --panel-color-primary-light-2: #366FC2;
+    --panel-main-bg-color-4: #9597a4;
-    --panel-color-primary-light-3: #3364AD;
+    --panel-main-bg-color-5: #90929f;
-    --panel-color-primary-light-4: #2F558F;
+    --panel-main-bg-color-6: #787b88;
-    --panel-color-primary-light-5: #372E46;
+    --panel-main-bg-color-7: #5b5e6a;
-    --panel-color-primary-light-6: #2A4066;
-    --panel-color-primary-light-7: #2D4A7A;
-    --panel-color-primary-light-9: #2D4A7A;
-
-    --panel-main-bg-color-1: #E3E6F3;
-    --panel-main-bg-color-2: #C0C2CF;
-    --panel-main-bg-color-3: #ADB0BC;
-    --panel-main-bg-color-4: #9597A4;
-    --panel-main-bg-color-5: #90929F;
-    --panel-main-bg-color-6: #787B88;
-    --panel-main-bg-color-7: #5B5E6A;
     --panel-main-bg-color-8: #434552;
-    --panel-main-bg-color-9: #2E313D;
+    --panel-main-bg-color-9: #2e313d;
     --panel-main-bg-color-10: #242633;
-    --panel-main-bg-color-11: #60626F;
+    --panel-main-bg-color-11: #60626f;
     --panel-main-bg-color-12: #000000;
 
     --panel-alert-error-bg-color: #fef0f0;
     --panel-alert-error-text-color: #f56c6c;
-    --panel-alert-error-hover-bg-color: #E9657B;
+    --panel-alert-error-hover-bg-color: #e9657b;
 
     --panel-alert-success-bg-color: #e1f3d8;
     --panel-alert-success-text-color: #67c23a;
-    --panel-alert-success-hover-bg-color: #4DC894;
+    --panel-alert-success-hover-bg-color: #4dc894;
 
-    --panel-alert-warning-bg-color: #59472A;
+    --panel-alert-warning-bg-color: #59472a;
-    --panel-alert-warning-text-color: #EDAC2C;
+    --panel-alert-warning-text-color: #edac2c;
-    --panel-alert-warning-hover-bg-color: #F1C161;
+    --panel-alert-warning-hover-bg-color: #f1c161;
 
     --panel-alert-info-bg-color: var(--panel-main-bg-color-7);
     --panel-alert-info-text-color: var(--panel-text-color-white);
     --panel-alert-info-hover-bg-color: var(--panel-main-bg-color-4);
 
     --el-color-success: #3fb950;
-    --el-color-success-light-5: #4DC894;
+    --el-color-success-light-5: #4dc894;
     --el-color-success-light-8: #3fb950;
     --el-color-success-light-9: var(--panel-main-bg-color-9);
 
-    --el-color-warning: #EDAC2C;
+    --el-color-warning: #edac2c;
-    --el-color-warning-light-5: #F1C161;
+    --el-color-warning-light-5: #f1c161;
-    --el-color-warning-light-8: #EDAC2C;
+    --el-color-warning-light-8: #edac2c;
     --el-color-warning-light-9: var(--panel-main-bg-color-9);
 
-    --el-color-danger: #E2324F;
+    --el-color-danger: #e2324f;
-    --el-color-danger-light-5: #E9657B;
+    --el-color-danger-light-5: #e9657b;
-    --el-color-danger-light-8: #E2324F;
+    --el-color-danger-light-8: #e2324f;
     --el-color-danger-light-9: var(--panel-main-bg-color-9);
 
-    --el-color-error: #E2324F;
+    --el-color-error: #e2324f;
-    --el-color-error-light-5: #E9657B;
+    --el-color-error-light-5: #e9657b;
-    --el-color-error-light-8: #E2324F;
+    --el-color-error-light-8: #e2324f;
     --el-color-error-light-9: var(--panel-main-bg-color-9);
 
     --el-color-info: var(--panel-main-bg-color-3);
@@ -65,11 +64,9 @@ html.dark {
     --el-color-info-light-8: var(--panel-main-bg-color-3);
     --el-color-info-light-9: var(--panel-main-bg-color-9);
 
-
     --panel-pie-bg-color: #434552;
     --panel-text-color-white: #ffffff;
 
-
     --el-color-primary: var(--panel-color-primary);
     --el-color-primary-light-1: var(--panel-color-primary-light-1);
     --el-color-primary-light-2: var(--panel-color-primary-light-2);
@@ -113,10 +110,10 @@ html.dark {
     --el-text-color-primary: var(--panel-main-bg-color-2);
     --el-text-color-regular: var(--panel-main-bg-color-2);
 
-    --el-box-shadow: 0px 12px 32px 4px rgba(36, 38, 51, .36), 0px 8px 20px rgba(36, 38, 51, .72);
+    --el-box-shadow: 0px 12px 32px 4px rgba(36, 38, 51, 0.36), 0px 8px 20px rgba(36, 38, 51, 0.72);
-    --el-box-shadow-light: 0px 0px 12px rgba(36, 38, 51, .72);
+    --el-box-shadow-light: 0px 0px 12px rgba(36, 38, 51, 0.72);
-    --el-box-shadow-lighter: 0px 0px 6px rgba(36, 38, 51, .72);
+    --el-box-shadow-lighter: 0px 0px 6px rgba(36, 38, 51, 0.72);
-    --el-box-shadow-dark: 0px 16px 48px 16px rgba(36, 38, 51, .72), 0px 12px 32px #242633, 0px 8px 16px -8px #242633;
+    --el-box-shadow-dark: 0px 16px 48px 16px rgba(36, 38, 51, 0.72), 0px 12px 32px #242633, 0px 8px 16px -8px #242633;
     --el-bg-color: var(--panel-main-bg-color-9);
     --el-bg-color-overlay: var(--panel-main-bg-color-9);
 
@@ -129,16 +126,17 @@ html.dark {
         color: var(--panel-main-bg-color-3);
     }
 
-    .el-menu-item:hover, .el-sub-menu__title:hover{
+    .el-menu-item:hover,
+    .el-sub-menu__title:hover {
         background: var(--panel-main-bg-color-8) !important;
     }
 
     .el-menu .el-menu-item {
-        box-shadow: 0 0 4px rgba(36, 38, 51, .72);
+        box-shadow: 0 0 4px rgba(36, 38, 51, 0.72);
     }
 
     .el-menu .el-sub-menu__title {
-        box-shadow: 0 0 4px rgba(36, 38, 51, .72);
+        box-shadow: 0 0 4px rgba(36, 38, 51, 0.72);
     }
 
     .el-overlay {
@@ -188,11 +186,11 @@ html.dark {
     }
 
     .el-card {
-        --el-card-bg-color: var(--panel-main-bg-color-10)
+        --el-card-bg-color: var(--panel-main-bg-color-10);
     }
 
     .el-button:hover {
-        --el-button-hover-border-color:var(--panel-main-bg-color-11);
+        --el-button-hover-border-color: var(--panel-main-bg-color-11);
         --el-button-hover-bg-color: var(--panel-main-bg-color-10);
     }
 
@@ -203,7 +201,7 @@ html.dark {
         &.brief-button {
             --el-button-text-color: var(--panel-main-bg-color-10);
             --el-button-hover-text-color: var(--el-color-white);
-            --el-button-hover-border-color:var(--el-color-primary);
+            --el-button-hover-border-color: var(--el-color-primary);
             --el-button-hover-bg-color: var(--el-color-primary);
         }
 
@@ -219,7 +217,9 @@ html.dark {
         }
     }
 
-    .el-button--primary.is-plain, .el-button--primary.is-text, .el-button--primary.is-link {
+    .el-button--primary.is-plain,
+    .el-button--primary.is-text,
+    .el-button--primary.is-link {
         --el-button-text-color: var(--panel-main-bg-color-2);
         --el-button-bg-color: var(--panel-main-bg-color-9);
         --el-button-border-color: var(--panel-main-bg-color-8);
@@ -227,7 +227,8 @@ html.dark {
         --el-button-hover-border-color: var(--panel-main-bg-color-8);
     }
 
-    .el-button--primary.is-text,.el-button--primary.is-link {
+    .el-button--primary.is-text,
+    .el-button--primary.is-link {
         --el-button-text-color: var(--panel-color-primary);
     }
 

frontend/src/views/database/mysql/index.vue

@@ -206,10 +206,11 @@
                         show-overflow-tooltip
                     />
                     <fu-table-operations
-                        width="370px"
+                        :ellipsis="mobile ? 0 : 10"
+                        :min-width="mobile ? 'auto' : 300"
                         :buttons="buttons"
-                        :ellipsis="10"
                         :label="$t('commons.table.operate')"
+                        fixed="right"
                         fix
                     />
                 </ComplexTable>
@@ -291,7 +292,7 @@ import UploadDialog from '@/components/upload/index.vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import { dateFormat } from '@/utils/util';
 import { ElMessageBox } from 'element-plus';
-import { onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import {
     deleteCheckMysqlDB,
     listDatabases,
@@ -371,6 +372,10 @@ const onChangeConn = async () => {
     });
 };
 
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
+
 const goRemoteDB = async () => {
     if (currentDB.value) {
         globalStore.setCurrentDB(currentDB.value.database);

frontend/src/views/database/postgresql/index.vue

@@ -168,10 +168,11 @@
                         show-overflow-tooltip
                     />
                     <fu-table-operations
-                        width="370px"
+                        :ellipsis="mobile ? 0 : 10"
+                        :min-width="mobile ? 'auto' : 300"
                         :buttons="buttons"
-                        :ellipsis="10"
                         :label="$t('commons.table.operate')"
+                        fixed="right"
                         fix
                     />
                 </ComplexTable>
@@ -252,7 +253,7 @@ import Backups from '@/components/backup/index.vue';
 import UploadDialog from '@/components/upload/index.vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import { dateFormat } from '@/utils/util';
-import { onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import {
     deleteCheckPostgresqlDB,
     listDatabases,
@@ -331,6 +332,10 @@ const onChangeConn = async () => {
     });
 };
 
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
+
 const goRemoteDB = async () => {
     if (currentDB.value) {
         globalStore.setCurrentDB(currentDB.value.database);

frontend/src/views/database/redis/index.vue

@@ -213,6 +213,10 @@ const onLoadConn = async () => {
         database: currentDBName.value,
     });
 };
+//
+// const mobile = computed(() => {
+//     return globalStore.isMobile();
+// });
 
 const goRouter = async (target: string) => {
     if (target === 'app') {

frontend/src/views/setting/license/index.vue

@@ -95,7 +95,7 @@
                                             <div class="h-app-content">{{ $t('license.technicalAdvice') }}</div>
                                         </el-col>
                                         <el-col :span="5">
-                                            <el-button type="primary" plain round size="small" @click="toHalo()">
+                                            <el-button type="primary" plain round size="small" @click="toLxware()">
                                                 {{ $t('license.advice') }}
                                             </el-button>
                                         </el-col>
@@ -138,7 +138,7 @@ const license = reactive({
     message: '',
 });
 
-const toHalo = () => {
+const toLxware = () => {
     window.open('https://www.lxware.cn/1panel' + '', '_blank', 'noopener,noreferrer');
 };
 

frontend/src/views/website/runtime/dotnet/index.vue

@@ -37,7 +37,7 @@
                             </el-text>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('website.runDir')" prop="codeDir">
+                    <el-table-column :label="$t('website.runDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
                             <el-button type="primary" link @click="toFolder(row.codeDir)">
                                 <el-icon>
@@ -47,7 +47,7 @@
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('runtime.version')" prop="version"></el-table-column>
-                    <el-table-column :label="$t('runtime.externalPort')" prop="port">
+                    <el-table-column :label="$t('runtime.externalPort')" prop="port" min-width="110px">
                         <template #default="{ row }">
                             {{ row.port }}
                             <el-button link :icon="Promotion" @click="goDashboard(row.port, 'http')"></el-button>
@@ -71,7 +71,7 @@
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('commons.button.log')" prop="path">
+                    <el-table-column :label="$t('commons.button.log')" prop="path" min-width="90px">
                         <template #default="{ row }">
                             <el-button @click="openLog(row)" link type="primary">{{ $t('website.check') }}</el-button>
                         </template>

frontend/src/views/website/runtime/go/index.vue

@@ -37,7 +37,7 @@
                             </el-text>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('website.runDir')" prop="codeDir">
+                    <el-table-column :label="$t('website.runDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
                             <el-button type="primary" link @click="toFolder(row.codeDir)">
                                 <el-icon>
@@ -47,7 +47,7 @@
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('runtime.version')" prop="version"></el-table-column>
-                    <el-table-column :label="$t('runtime.externalPort')" prop="port">
+                    <el-table-column :label="$t('runtime.externalPort')" prop="port" min-width="110px">
                         <template #default="{ row }">
                             {{ row.port }}
                             <el-button link :icon="Promotion" @click="goDashboard(row.port, 'http')"></el-button>
@@ -72,7 +72,7 @@
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('commons.button.log')" prop="path">
+                    <el-table-column :label="$t('commons.button.log')" prop="path" min-width="90px">
                         <template #default="{ row }">
                             <el-button @click="openLog(row)" link type="primary">{{ $t('website.check') }}</el-button>
                         </template>

frontend/src/views/website/runtime/java/index.vue

@@ -37,7 +37,7 @@
                             </el-text>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('website.runDir')" prop="codeDir">
+                    <el-table-column :label="$t('website.runDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
                             <el-button type="primary" link @click="toFolder(row.codeDir)">
                                 <el-icon>
@@ -47,7 +47,7 @@
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('runtime.version')" prop="version"></el-table-column>
-                    <el-table-column :label="$t('runtime.externalPort')" prop="port">
+                    <el-table-column :label="$t('runtime.externalPort')" prop="port" min-width="120px">
                         <template #default="{ row }">
                             {{ row.port }}
                             <el-button link :icon="Promotion" @click="goDashboard(row.port, 'http')"></el-button>
@@ -71,7 +71,7 @@
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('commons.button.log')" prop="path">
+                    <el-table-column :label="$t('commons.button.log')" prop="path" min-width="120px">
                         <template #default="{ row }">
                             <el-button @click="openLog(row)" link type="primary">{{ $t('website.check') }}</el-button>
                         </template>

frontend/src/views/website/runtime/node/index.vue

@@ -37,7 +37,7 @@
                             </el-text>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('runtime.codeDir')" prop="codeDir">
+                    <el-table-column :label="$t('runtime.codeDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
                             <el-button type="primary" link @click="toFolder(row.codeDir)">
                                 <el-icon>
@@ -47,7 +47,7 @@
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('runtime.version')" prop="version"></el-table-column>
-                    <el-table-column :label="$t('runtime.externalPort')" prop="port">
+                    <el-table-column :label="$t('runtime.externalPort')" prop="port" min-width="110px">
                         <template #default="{ row }">
                             {{ row.port }}
                             <el-button link :icon="Promotion" @click="goDashboard(row.port, 'http')"></el-button>
@@ -71,7 +71,7 @@
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('commons.button.log')" prop="path">
+                    <el-table-column :label="$t('commons.button.log')" prop="path" min-width="90px">
                         <template #default="{ row }">
                             <el-button @click="openLog(row)" link type="primary">{{ $t('website.check') }}</el-button>
                         </template>

frontend/src/views/website/runtime/python/index.vue

@@ -37,7 +37,7 @@
                             </el-text>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('website.runDir')" prop="codeDir">
+                    <el-table-column :label="$t('website.runDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
                             <el-button type="primary" link @click="toFolder(row.codeDir)">
                                 <el-icon>
@@ -47,7 +47,7 @@
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('runtime.version')" prop="version"></el-table-column>
-                    <el-table-column :label="$t('runtime.externalPort')" prop="port">
+                    <el-table-column :label="$t('runtime.externalPort')" prop="port" min-width="110px">
                         <template #default="{ row }">
                             {{ row.port }}
                             <el-button link :icon="Promotion" @click="goDashboard(row.port, 'http')"></el-button>
@@ -72,7 +72,7 @@
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('commons.button.log')" prop="path">
+                    <el-table-column :label="$t('commons.button.log')" prop="path" min-width="90px">
                         <template #default="{ row }">
                             <el-button @click="openLog(row)" link type="primary">{{ $t('website.check') }}</el-button>
                         </template>

frontend/src/views/website/ssl/index.vue

@@ -45,8 +45,15 @@
                         fix
                         show-overflow-tooltip
                         prop="domains"
+                        min-width="90px"
                     ></el-table-column>
-                    <el-table-column :label="$t('ssl.applyType')" fix show-overflow-tooltip prop="provider">
+                    <el-table-column
+                        :label="$t('ssl.applyType')"
+                        fix
+                        show-overflow-tooltip
+                        prop="provider"
+                        min-width="110px"
+                    >
                         <template #default="{ row }">{{ getProvider(row.provider) }}</template>
                     </el-table-column>
                     <el-table-column
@@ -54,6 +61,7 @@
                         fix
                         show-overflow-tooltip
                         prop="acmeAccount.email"
+                        min-width="110px"
                     ></el-table-column>
                     <el-table-column
                         :label="$t('commons.table.status')"
@@ -97,8 +105,9 @@
                         fix
                         show-overflow-tooltip
                         prop="organization"
+                        min-width="110px"
                     ></el-table-column>
-                    <el-table-column :label="$t('website.remark')" fix prop="description">
+                    <el-table-column :label="$t('website.remark')" fix prop="description" min-width="100px">
                         <template #default="{ row }">
                             <fu-read-write-switch>
                                 <template #read>
@@ -110,7 +119,7 @@
                             </fu-read-write-switch>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('ssl.autoRenew')" fix>
+                    <el-table-column :label="$t('ssl.autoRenew')" fix min-width="110px">
                         <template #default="{ row }">
                             <el-switch
                                 :disabled="row.provider === 'dnsManual' || row.provider === 'manual'"