feat: 优化网站目录显示 (#4301)

Refs https://github.com/1Panel-dev/1Panel/issues/4280

frontend/src/components/app-status/index.vue

@@ -2,73 +2,80 @@
     <div>
         <div class="app-status" v-if="data.isExist">
             <el-card>
-                <div>
+                <div class="flex items-center">
-                    <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
+                    <div>
-                    <Status class="status-content" :key="refresh" :status="data.status"></Status>
+                        <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
-                    <el-tag class="status-content">{{ $t('app.version') }}:{{ data.version }}</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">
+                    <div class="ml-5" v-if="key === 'openresty' && (httpPort != 80 || httpsPort != 443)">
-                        <el-button
+                        <el-text type="danger">{{ $t('website.openrestyHelper', [httpPort, httpsPort]) }}</el-text>
-                            type="primary"
+                    </div>
-                            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>
             </el-card>
         </div>
@@ -237,12 +244,3 @@ onMounted(() => {
     onCheck();
 });
 </script>
-
-<style lang="scss">
-.warn {
-    margin-left: 20px;
-    .helper {
-        display: inline;
-    }
-}
-</style>

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>

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"