style: Optimize layout style (#7359)

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

@@ -93,7 +93,7 @@ import { ElMessageBox } from 'element-plus';
 import { storeToRefs } from 'pinia';
 
 const globalStore = GlobalStore();
-const { isDarkTheme } = storeToRefs(globalStore);
+const { isDarkTheme, docsUrl } = storeToRefs(globalStore);
 
 const mobile = computed(() => {
     return globalStore.isMobile();
@@ -129,7 +129,7 @@ const toLxware = () => {
 };
 
 const toDoc = () => {
-    window.open('https://1panel.cn/docs/', '_blank', 'noopener,noreferrer');
+    window.open(docsUrl.value, '_blank', 'noopener,noreferrer');
 };
 
 const toForum = () => {

frontend/src/lang/modules/en.ts

@@ -1798,7 +1798,7 @@ const message = {
         all: 'All',
         version: 'Version',
         detail: 'Details',
-        params: 'Edit parameters',
+        params: 'Edit',
         install: 'Install',
         author: 'Author',
         source: 'Source',
@@ -1855,7 +1855,7 @@ const message = {
         installPrompt: 'No apps installed yet',
         updateHelper: 'Editing parameters may cause the application to fail to start. Please proceed with caution.',
         updateWarn: 'Update parameters need to rebuild the application, Do you want to continue? ',
-        busPort: 'Service Port',
+        busPort: 'Port',
         syncStart: 'Start syncing! Please refresh the app store later',
         advanced: 'Advanced Settings',
         cpuCore: 'core(s)',

frontend/src/store/modules/global.ts

@@ -48,6 +48,7 @@ const GlobalStore = defineStore({
             state.themeConfig.theme === 'dark' ||
             (state.themeConfig.theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches),
         isDarkGoldTheme: (state) => state.themeConfig.primary === '#F0BE96' && state.isProductPro,
+        docsUrl: (state) => (state.isIntl ? 'https://docs.1panel.hk' : 'https://1panel.cn/docs'),
     },
     actions: {
         setOpenMenuTabs(openMenuTabs: boolean) {

frontend/src/styles/moblie.scss

@@ -30,7 +30,6 @@
             min-width: auto !important;
         }
         .d-description {
-            display: block !important;
             overflow: inherit !important;
         }
     }

frontend/src/views/app-store/index.scss

@@ -13,37 +13,41 @@
         .d-name {
             height: 20%;
             .name {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                max-width: 120px;
                 font-weight: 500;
                 font-size: 18px;
                 color: var(--panel-text-color);
             }
             .status {
-                margin-left: 10px;
+                margin-left: 5px;
             }
             .h-button {
                 float: right;
-                margin-right: 10px;
+                margin-right: 5px;
             }
             .msg {
-                margin-left: 10px;
+                margin-left: 5px;
+            }
+            .el-button + .el-button {
+                margin-left: 6px;
             }
         }
 
         .d-description {
             margin-top: 10px;
             overflow: hidden;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
             .el-tag {
                 margin-right: 5px;
             }
+        }
         .description {
             margin-top: 10px;
             font-size: 14px;
             color: var(--el-text-color-regular);
         }
-        }
         .d-button {
             margin-top: 10px;
             min-width: 440px;

frontend/src/views/app-store/installed/index.vue

@@ -94,11 +94,11 @@
                     :md="24"
                     :lg="12"
                     :xl="12"
-                    class="install-card-col-12"
+                    :class="mode === 'upgrade' ? 'upgrade-card-col-12' : 'install-card-col-12'"
                 >
                     <div class="install-card">
                         <el-card class="e-card">
-                            <el-row :gutter="20">
+                            <el-row :gutter="10">
                                 <el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="4">
                                     <div class="icon" @click.stop="openDetail(installed.appKey)">
                                         <el-avatar
@@ -112,9 +112,10 @@
                                     <div class="a-detail">
                                         <div class="d-name">
                                             <el-button link type="info">
+                                                <el-tooltip effect="dark" :content="installed.name" placement="top">
                                                     <span class="name">{{ installed.name }}</span>
+                                                </el-tooltip>
                                             </el-button>
-
                                             <span class="status">
                                                 <Status :key="installed.status" :status="installed.status"></Status>
                                             </span>
@@ -210,7 +211,7 @@
                                                 {{ $t('commons.button.upgrade') }}
                                             </el-button>
                                         </div>
-                                        <div class="d-description">
+                                        <div class="d-description flex flex-wrap items-center justify-start gap-1.5">
                                             <el-button class="tagMargin" plain size="small">
                                                 {{ $t('app.version') }}{{ $t('commons.colon') }}{{ installed.version }}
                                             </el-button>
@@ -237,17 +238,16 @@
                                                 {{ $t('app.busPort') }}{{ $t('commons.colon')
                                                 }}{{ installed.httpsPort }}
                                             </el-button>
-
+                                        </div>
                                         <div class="description">
                                             <span>
                                                 {{ $t('app.alreadyRun') }}{{ $t('commons.colon') }}
                                                 {{ getAge(installed.createdAt) }}
                                             </span>
                                         </div>
-                                        </div>
                                         <div class="app-divider" />
                                         <div
-                                            class="d-button flex flex-wrap items-center justify-start gap-3"
+                                            class="d-button flex flex-wrap items-center justify-start gap-1.5"
                                             v-if="mode === 'installed' && installed.status != 'Installing'"
                                         >
                                             <el-button
@@ -386,7 +386,7 @@ const sync = () => {
             try {
                 await SyncInstalledApp();
                 MsgSuccess(i18n.global.t('app.syncSuccess'));
-                search();
+                await search();
             } finally {
                 syncLoading.value = false;
             }
@@ -631,10 +631,31 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 @import '../index.scss';
-@media only screen and (max-width: 1300px) {
+@media only screen and (max-width: 1400px) {
     .install-card-col-12 {
         max-width: 100%;
         flex: 0 0 100%;
+        .a-detail {
+            .d-name {
+                .name {
+                    max-width: 300px;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 1499px) {
+    .upgrade-card-col-12 {
+        max-width: 100%;
+        flex: 0 0 100%;
+        .a-detail {
+            .d-name {
+                .name {
+                    max-width: 300px;
+                }
+            }
+        }
     }
 }
 
@@ -647,4 +668,9 @@ onUnmounted(() => {
         margin-left: 0;
     }
 }
+.d-description {
+    .el-button + .el-button {
+        margin-left: 0;
+    }
+}
 </style>

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

@@ -45,7 +45,9 @@ import { onMounted, ref } from 'vue';
 import SystemUpgrade from '@/components/system-upgrade/index.vue';
 import { GlobalStore } from '@/store';
 import PrimaryLogo from '@/assets/images/1panel-logo.svg?component';
+import { storeToRefs } from 'pinia';
 const globalStore = GlobalStore();
+const { docsUrl } = storeToRefs(globalStore);
 
 const version = ref();
 const loading = ref();
@@ -55,7 +57,7 @@ const search = async () => {
 };
 
 const toDoc = () => {
-    window.open('https://1panel.cn/docs/', '_blank', 'noopener,noreferrer');
+    window.open(docsUrl.value, '_blank', 'noopener,noreferrer');
 };
 const toGithub = () => {
     window.open('https://github.com/1Panel-dev/1Panel', '_blank', 'noopener,noreferrer');