From 1fcc21839a5a9d007229c50e876a6e2a0b0c64d2 Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Mon, 9 Jan 2023 14:30:49 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=B8=80=E4=BA=9B=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=9A=84=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/app-status/index.vue  | 36 ++++++++-----------
 .../src/components/complex-table/index.vue    |  2 +-
 .../src/components/drawer-header/index.vue    | 13 ++++---
 frontend/src/components/status/index.vue      | 25 ++++++++++---
 .../views/website/website/backup/index.vue    |  2 +-
 .../website/config/safety/ccdeny/index.vue    |  2 +-
 .../config/safety/file-block-list/index.vue   |  2 +-
 .../website/config/safety/ip-list/index.vue   |  2 +-
 .../config/safety/value-list/index.vue        |  2 +-
 frontend/src/views/website/website/index.vue  |  4 +--
 .../views/website/website/status/index.vue    |  7 ++--
 .../views/website/website/upload/index.vue    |  2 +-
 12 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index a36cd42c7..1f466872e 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -3,26 +3,14 @@
         <div class="app-content" v-if="data.isExist">
             <el-card class="app-card">
                 <el-row :gutter="20">
-                    <el-col :lg="3" :xl="2">
-                        <div>
-                            <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
-                        </div>
+                    <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="6">
+                        <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" type="primary">
+                            {{ $t('app.version') }}:{{ data.version }}
+                        </el-tag>
                     </el-col>
-                    <el-col :lg="3" :xl="2">
-                        <div>
-                            {{ $t('app.version') }}:
-                            <el-tag type="info">{{ data.version }}</el-tag>
-                        </div>
-                    </el-col>
-                    <el-col :lg="3" :xl="2">
-                        <div>
-                            {{ $t('commons.table.status') }}:
-                            <el-tag type="info">
-                                <Status :key="refresh" :status="data.status"></Status>
-                            </el-tag>
-                        </div>
-                    </el-col>
-                    <el-col :lg="4" :xl="6">
+                    <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="4">
                         <el-button type="primary" v-if="data.status != 'Running'" link @click="onOperate('up')">
                             {{ $t('app.up') }}
                         </el-button>
@@ -30,12 +18,14 @@
                             {{ $t('app.down') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" link @click="onOperate('restart')">{{ $t('app.restart') }}</el-button>
+                        <el-button type="primary" link @click="onOperate('restart')">
+                            {{ $t('app.restart') }}
+                        </el-button>
                         <el-divider direction="vertical" />
                         <el-button
                             type="primary"
-                            link
                             @click="setting"
+                            link
                             :disabled="data.status !== 'Running' && data.app === 'OpenResty'"
                         >
                             {{ $t('commons.button.set') }}
@@ -145,4 +135,8 @@ onMounted(() => {
 body {
     margin: 0;
 }
+
+.status-content {
+    margin-left: 50px;
+}
 </style>
diff --git a/frontend/src/components/complex-table/index.vue b/frontend/src/components/complex-table/index.vue
index 76e0db45a..703db07cd 100644
--- a/frontend/src/components/complex-table/index.vue
+++ b/frontend/src/components/complex-table/index.vue
@@ -41,7 +41,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-defineOptions({ name: 'ComplexTable' }); // 组件名
+defineOptions({ name: 'ComplexTable' });
 defineProps({
     header: String,
     searchConfig: Object,
diff --git a/frontend/src/components/drawer-header/index.vue b/frontend/src/components/drawer-header/index.vue
index 9a5f1a949..0da1623ff 100644
--- a/frontend/src/components/drawer-header/index.vue
+++ b/frontend/src/components/drawer-header/index.vue
@@ -1,9 +1,13 @@
 <template>
-    <el-page-header :content="header" @back="props.back">
-        <template v-if="slots.buttons" #content>
+    <el-page-header @back="props.back">
+        <template #content>
             <span>{{ header }}</span>
-            <el-divider direction="vertical" />
-            <slot name="buttons"></slot>
+            <span v-if="resource">
+                -
+                <el-tag effect="dark" type="success">{{ resource }}</el-tag>
+            </span>
+            <el-divider v-if="slots.buttons" direction="vertical" />
+            <slot v-if="slots.buttons" name="buttons"></slot>
         </template>
     </el-page-header>
 </template>
@@ -15,5 +19,6 @@ const slots = useSlots();
 const props = defineProps({
     header: String,
     back: Function,
+    resource: String,
 });
 </script>
diff --git a/frontend/src/components/status/index.vue b/frontend/src/components/status/index.vue
index b2976781a..79eb9260e 100644
--- a/frontend/src/components/status/index.vue
+++ b/frontend/src/components/status/index.vue
@@ -1,7 +1,9 @@
 <template>
-    <span :style="{ color: getColor(status) }">
+    <el-tag :type="getType(status)" round effect="light">
+        <!-- <span :style="{ color: getColor(status) }"> -->
         {{ $t('commons.status.' + status) }}
-    </span>
+        <!-- </span> -->
+    </el-tag>
 </template>
 
 <script lang="ts" setup>
@@ -15,12 +17,25 @@ const props = defineProps({
 });
 let status = ref('running');
 
-const getColor = (status: string) => {
+// const getColor = (status: string) => {
+//     switch (status) {
+//         case 'running':
+//             return '#00c957';
+//         case 'error':
+//             return '#ff0000';
+//         default:
+//             return '';
+//     }
+// };
+
+const getType = (status: string) => {
     switch (status) {
         case 'running':
-            return '#00c957';
+            return 'success';
         case 'error':
-            return '#ff0000';
+            return 'danger';
+        case 'stopped':
+            return 'warning';
         default:
             return '';
     }
diff --git a/frontend/src/views/website/website/backup/index.vue b/frontend/src/views/website/website/backup/index.vue
index e45939135..aa256eada 100644
--- a/frontend/src/views/website/website/backup/index.vue
+++ b/frontend/src/views/website/website/backup/index.vue
@@ -1,7 +1,7 @@
 <template>
     <el-drawer v-model="backupVisiable" size="50%" :show-close="false">
         <template #header>
-            <Header :header="$t('database.backup') + ' - ' + websiteName" :back="handleClose"></Header>
+            <Header :header="$t('database.backup')" :resource="websiteName" :back="handleClose"></Header>
         </template>
         <ComplexTable
             v-loading="loading"
diff --git a/frontend/src/views/website/website/config/safety/ccdeny/index.vue b/frontend/src/views/website/website/config/safety/ccdeny/index.vue
index 78d458214..1fe9dc662 100644
--- a/frontend/src/views/website/website/config/safety/ccdeny/index.vue
+++ b/frontend/src/views/website/website/config/safety/ccdeny/index.vue
@@ -1,6 +1,6 @@
 <template>
     <el-row :gutter="20">
-        <el-col :span="10" :offset="2">
+        <el-col :span="10" :offset="1">
             <el-form
                 ref="wafForm"
                 label-position="left"
diff --git a/frontend/src/views/website/website/config/safety/file-block-list/index.vue b/frontend/src/views/website/website/config/safety/file-block-list/index.vue
index 28fca7a49..5d9039d9e 100644
--- a/frontend/src/views/website/website/config/safety/file-block-list/index.vue
+++ b/frontend/src/views/website/website/config/safety/file-block-list/index.vue
@@ -1,6 +1,6 @@
 <template>
     <el-row>
-        <el-col :span="10" :offset="2">
+        <el-col :span="10" :offset="1">
             <el-form-item prop="enable" :label="$t('website.enable')">
                 <el-switch v-model="enableUpdate.enable" @change="updateEnable"></el-switch>
             </el-form-item>
diff --git a/frontend/src/views/website/website/config/safety/ip-list/index.vue b/frontend/src/views/website/website/config/safety/ip-list/index.vue
index b25e2136a..71846daa5 100644
--- a/frontend/src/views/website/website/config/safety/ip-list/index.vue
+++ b/frontend/src/views/website/website/config/safety/ip-list/index.vue
@@ -1,6 +1,6 @@
 <template>
     <el-row>
-        <el-col :span="10" :offset="2">
+        <el-col :span="10" :offset="1">
             <el-form-item prop="enable" :label="$t('website.enable')">
                 <el-switch v-model="enableUpdate.enable" @change="updateEnable"></el-switch>
             </el-form-item>
diff --git a/frontend/src/views/website/website/config/safety/value-list/index.vue b/frontend/src/views/website/website/config/safety/value-list/index.vue
index 5802d15d8..941964965 100644
--- a/frontend/src/views/website/website/config/safety/value-list/index.vue
+++ b/frontend/src/views/website/website/config/safety/value-list/index.vue
@@ -1,6 +1,6 @@
 <template>
     <el-row>
-        <el-col :span="10" :offset="2">
+        <el-col :span="10" :offset="1">
             <el-form-item prop="enable" :label="$t('website.enable')">
                 <el-switch v-model="enableUpdate.enable" @change="updateEnable"></el-switch>
             </el-form-item>
diff --git a/frontend/src/views/website/website/index.vue b/frontend/src/views/website/website/index.vue
index f8517ed58..63fdedb5c 100644
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@@ -8,7 +8,7 @@
                 @is-exist="checkExist"
             ></AppStatus>
         </template>
-        <template v-if="!openNginxConfig" #toolbar>
+        <template v-if="nginxIsExist && !openNginxConfig" #toolbar>
             <el-row :class="{ mask: nginxStatus != 'Running' }">
                 <el-col :span="10">
                     <el-button type="primary" icon="Plus" @click="openCreate">
@@ -37,7 +37,7 @@
                 </el-col>
             </el-row>
         </template>
-        <template v-if="!openNginxConfig" #search>
+        <template v-if="nginxIsExist && !openNginxConfig" #search>
             <div :class="{ mask: nginxStatus != 'Running' }">
                 <el-select v-model="req.websiteGroupId" @change="search()">
                     <el-option :label="$t('website.allGroup')" :value="0"></el-option>
diff --git a/frontend/src/views/website/website/status/index.vue b/frontend/src/views/website/website/status/index.vue
index eac579332..52396b382 100644
--- a/frontend/src/views/website/website/status/index.vue
+++ b/frontend/src/views/website/website/status/index.vue
@@ -8,16 +8,13 @@
             </el-col>
             <el-col :lg="4" :xl="2">
                 <div class="span-font">
-                    {{ $t('commons.table.status') }}:
-                    <el-tag type="info">
-                        <Status class="span-font" :key="props.status" :status="props.status"></Status>
-                    </el-tag>
+                    <Status class="span-font" :key="props.status" :status="props.status"></Status>
                 </div>
             </el-col>
             <el-col :lg="4" :xl="4">
                 <div class="span-font">
-                    {{ $t('website.expireDate') }}:
                     <el-tag type="info">
+                        {{ $t('website.expireDate') }}:
                         <span v-if="isEver(props.expireDate)">
                             {{ $t('website.neverExpire') }}
                         </span>
diff --git a/frontend/src/views/website/website/upload/index.vue b/frontend/src/views/website/website/upload/index.vue
index aba0c1603..43c3a3809 100644
--- a/frontend/src/views/website/website/upload/index.vue
+++ b/frontend/src/views/website/website/upload/index.vue
@@ -1,7 +1,7 @@
 <template>
     <el-drawer v-model="upVisiable" size="50%" :show-close="false">
         <template #header>
-            <Header :header="$t('commons.button.import') + ' - ' + websiteName" :back="handleClose"></Header>
+            <Header :header="$t('commons.button.import')" :resource="websiteName" :back="handleClose"></Header>
         </template>
         <div v-loading="loading">
             <el-upload