From 4de733e084885679357d54cdf49007ab567f67a3 Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Mon, 25 Mar 2024 17:58:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=BD=91=E7=AB=99?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95=E6=98=BE=E7=A4=BA=20(#4301)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs https://github.com/1Panel-dev/1Panel/issues/4280
---
 frontend/src/components/app-status/index.vue  | 148 +++++++++---------
 frontend/src/views/home/index.vue             |   6 +-
 .../config/basic/site-folder/index.vue        |   2 +-
 3 files changed, 79 insertions(+), 77 deletions(-)

diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index 5a74a1b0e..2b8b931b7 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -2,73 +2,80 @@
     <div>
         <div class="app-status" v-if="data.isExist">
             <el-card>
-                <div>
-                    <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
-                    <Status class="status-content" :key="refresh" :status="data.status"></Status>
-                    <el-tag class="status-content">{{ $t('app.version') }}:{{ data.version }}</el-tag>
+                <div class="flex items-center">
+                    <div>
+                        <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
+                    </div>
+                    <div>
+                        <Status class="status-content" :key="refresh" :status="data.status"></Status>
+                    </div>
+                    <div>
+                        <el-tag class="status-content">{{ $t('app.version') }}:{{ data.version }}</el-tag>
+                    </div>
+                    <div>
+                        <span class="buttons">
+                            <el-button
+                                type="primary"
+                                v-if="data.status != 'Running'"
+                                link
+                                @click="onOperate('start')"
+                                :disabled="data.status === 'Installing'"
+                            >
+                                {{ $t('app.start') }}
+                            </el-button>
+                            <el-button type="primary" v-if="data.status === 'Running'" link @click="onOperate('stop')">
+                                {{ $t('app.stop') }}
+                            </el-button>
+                            <el-divider direction="vertical" />
+                            <el-button
+                                type="primary"
+                                link
+                                :disabled="data.status === 'Installing'"
+                                @click="onOperate('restart')"
+                            >
+                                {{ $t('app.restart') }}
+                            </el-button>
+                            <el-divider direction="vertical" />
+                            <el-button
+                                type="primary"
+                                link
+                                v-if="data.app === 'OpenResty'"
+                                @click="onOperate('reload')"
+                                :disabled="data.status !== 'Running'"
+                            >
+                                {{ $t('app.reload') }}
+                            </el-button>
+                            <el-divider v-if="data.app === 'OpenResty'" direction="vertical" />
+                            <el-button
+                                type="primary"
+                                @click="setting"
+                                link
+                                :disabled="
+                                    data.status === 'Installing' ||
+                                    (data.status !== 'Running' && data.app === 'OpenResty')
+                                "
+                            >
+                                {{ $t('commons.button.set') }}
+                            </el-button>
+                            <el-divider v-if="data.app === 'OpenResty'" direction="vertical" />
+                            <el-button
+                                v-if="data.app === 'OpenResty'"
+                                type="primary"
+                                @click="clear"
+                                link
+                                :disabled="
+                                    data.status === 'Installing' ||
+                                    (data.status !== 'Running' && data.app === 'OpenResty')
+                                "
+                            >
+                                {{ $t('nginx.clearProxyCache') }}
+                            </el-button>
+                        </span>
+                    </div>
 
-                    <span class="buttons">
-                        <el-button
-                            type="primary"
-                            v-if="data.status != 'Running'"
-                            link
-                            @click="onOperate('start')"
-                            :disabled="data.status === 'Installing'"
-                        >
-                            {{ $t('app.start') }}
-                        </el-button>
-                        <el-button type="primary" v-if="data.status === 'Running'" link @click="onOperate('stop')">
-                            {{ $t('app.stop') }}
-                        </el-button>
-                        <el-divider direction="vertical" />
-                        <el-button
-                            type="primary"
-                            link
-                            :disabled="data.status === 'Installing'"
-                            @click="onOperate('restart')"
-                        >
-                            {{ $t('app.restart') }}
-                        </el-button>
-                        <el-divider direction="vertical" />
-                        <el-button
-                            type="primary"
-                            link
-                            v-if="data.app === 'OpenResty'"
-                            @click="onOperate('reload')"
-                            :disabled="data.status !== 'Running'"
-                        >
-                            {{ $t('app.reload') }}
-                        </el-button>
-                        <el-divider v-if="data.app === 'OpenResty'" direction="vertical" />
-                        <el-button
-                            type="primary"
-                            @click="setting"
-                            link
-                            :disabled="
-                                data.status === 'Installing' || (data.status !== 'Running' && data.app === 'OpenResty')
-                            "
-                        >
-                            {{ $t('commons.button.set') }}
-                        </el-button>
-                        <el-divider v-if="data.app === 'OpenResty'" direction="vertical" />
-                        <el-button
-                            v-if="data.app === 'OpenResty'"
-                            type="primary"
-                            @click="clear"
-                            link
-                            :disabled="
-                                data.status === 'Installing' || (data.status !== 'Running' && data.app === 'OpenResty')
-                            "
-                        >
-                            {{ $t('nginx.clearProxyCache') }}
-                        </el-button>
-                    </span>
-
-                    <span class="warn" v-if="key === 'openresty' && (httpPort != 80 || httpsPort != 443)">
-                        <el-alert class="helper" type="error" :closable="false">
-                            {{ $t('website.openrestyHelper', [httpPort, httpsPort]) }}
-                        </el-alert>
-                    </span>
+                    <div class="ml-5" v-if="key === 'openresty' && (httpPort != 80 || httpsPort != 443)">
+                        <el-text type="danger">{{ $t('website.openrestyHelper', [httpPort, httpsPort]) }}</el-text>
+                    </div>
                 </div>
             </el-card>
         </div>
@@ -237,12 +244,3 @@ onMounted(() => {
     onCheck();
 });
 </script>
-
-<style lang="scss">
-.warn {
-    margin-left: 20px;
-    .helper {
-        display: inline;
-    }
-}
-</style>
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 30e108464..d2a54985e 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -206,7 +206,11 @@
                                             {{ $t('home.platformVersion') }}
                                         </span>
                                     </template>
-                                    {{ baseInfo.platformVersion === "" ? baseInfo.platform : (baseInfo.platform + "-" + baseInfo.platformVersion) }}
+                                    {{
+                                        baseInfo.platformVersion === ''
+                                            ? baseInfo.platform
+                                            : baseInfo.platform + '-' + baseInfo.platformVersion
+                                    }}
                                 </el-descriptions-item>
                                 <el-descriptions-item class-name="system-content">
                                     <template #label>
diff --git a/frontend/src/views/website/website/config/basic/site-folder/index.vue b/frontend/src/views/website/website/config/basic/site-folder/index.vue
index f3d5576ce..243252356 100644
--- a/frontend/src/views/website/website/config/basic/site-folder/index.vue
+++ b/frontend/src/views/website/website/config/basic/site-folder/index.vue
@@ -20,7 +20,7 @@
                 </el-form-item>
                 <el-form-item v-if="configDir" :label="$t('website.runDir')">
                     <el-space wrap>
-                        <el-select v-model="update.siteDir">
+                        <el-select v-model="update.siteDir" class="p-w-200">
                             <el-option
                                 v-for="(item, index) in dirs"
                                 :label="item"