feat: 修改 AppStatus 状态条

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

@@ -3,7 +3,7 @@
         <div class="app-content" v-if="data.isExist">
             <el-card class="app-card" v-loading="loading">
                 <el-row :gutter="20">
-                    <el-col :lg="2" :xl="1">
+                    <el-col :lg="3" :xl="2">
                         <div>
                             <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
                         </div>
@@ -18,18 +18,20 @@
                         <div>
                             {{ $t('commons.table.status') }}:
                             <el-tag type="info">
-                                <Status :status="data.status"></Status>
+                                <Status :key="refresh" :status="data.status"></Status>
                             </el-tag>
                         </div>
                     </el-col>
-                    <el-col :lg="6" :xl="4">
-                        <div>
-                            {{ $t('website.lastBackupAt') }}:
-                            <el-tag v-if="data.lastBackupAt != ''" type="info">{{ data.lastBackupAt }}</el-tag>
-                            <span v-else>{{ $t('website.null') }}</span>
-                        </div>
-                    </el-col>
                     <el-col :lg="4" :xl="6">
+                        <el-button type="primary" v-if="data.status != 'Running'" link @click="onOperate('up')">
+                            {{ $t('app.up') }}
+                        </el-button>
+                        <el-button type="primary" v-if="data.status === 'Running'" link @click="onOperate('down')">
+                            {{ $t('app.down') }}
+                        </el-button>
+                        <el-divider direction="vertical" />
+                        <el-button type="primary" link @click="onOperate('restart')">{{ $t('app.restart') }}</el-button>
+                        <el-divider direction="vertical" />
                         <el-button type="primary" link @click="setting">{{ $t('commons.button.set') }}</el-button>
                     </el-col>
                 </el-row>
@@ -45,10 +47,12 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { CheckAppInstalled } from '@/api/modules/app';
+import { CheckAppInstalled, InstalledOp } from '@/api/modules/app';
 import router from '@/routers';
 import { onMounted, reactive, ref } from 'vue';
 import Status from '@/components/status/index.vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import i18n from '@/lang';
 
 const props = defineProps({
     appKey: {
@@ -72,6 +76,7 @@ let operateReq = reactive({
     installId: 0,
     operate: '',
 });
+let refresh = ref(1);
 
 const em = defineEmits(['setting', 'isExist']);
 const setting = () => {
@@ -89,6 +94,30 @@ const onCheck = async () => {
     em('isExist', res.data);
     operateReq.installId = res.data.appInstallId;
     loading.value = false;
+    refresh.value++;
+};
+
+const onOperate = async (operation: string) => {
+    operateReq.operate = operation;
+    ElMessageBox.confirm(
+        i18n.global.t('app.operatorHelper', [i18n.global.t('app.' + operation)]),
+        i18n.global.t('app.' + operation),
+        {
+            confirmButtonText: i18n.global.t('commons.button.confirm'),
+            cancelButtonText: i18n.global.t('commons.button.cancel'),
+            type: 'info',
+        },
+    ).then(() => {
+        loading.value = true;
+        InstalledOp(operateReq)
+            .then(() => {
+                ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+                onCheck();
+            })
+            .finally(() => {
+                loading.value = false;
+            });
+    });
 };
 
 onMounted(() => {

frontend/src/lang/modules/zh.ts

@@ -876,7 +876,9 @@ export default {
         reading: '请求数(Reading)',
         writing: '响应数(Writing)',
         waiting: '驻留进程(Waiting)',
-        status: '负载状态',
+        status: '当前状态',
+        nginxConfig: 'OpenResty 设置',
+        configResource: '配置修改',
     },
     ssl: {
         provider: '类型',

frontend/src/styles/common.scss

@@ -118,7 +118,7 @@
 .input-help {
     font-size: 12px;
     word-break: break-all;
-  color: #4A4B4D;
+    color: #4a4b4d;
     transform: scale(0.9);
     transform-origin: left;
     width: 110%;
@@ -133,7 +133,7 @@
     transform-origin: left;
     width: 110%;
     display: inline-block;
-  }
+}
 
 .myTable {
     border-collapse: collapse;
@@ -150,7 +150,7 @@
 }
 
 .myTable td div {
-    margin-top: 2px
+    margin-top: 2px;
 }
 
 .myTable th {
@@ -169,3 +169,20 @@
 .myTable tr td:nth-child(even) {
     color: #85888e;
 }
+
+.mask {
+    width: 100%;
+    height: 100%;
+    opacity: 0.4;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+}
+
+.mask-prompt {
+    position: absolute;
+    z-index: 9999;
+    top: 20%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}

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

@@ -1,7 +1,8 @@
 <template>
     <div>
         <AppStatus :app-key="'nginx'" @setting="setting" @is-exist="checkExist"></AppStatus>
-        <LayoutContent v-if="nginxIsExist">
+        <div v-if="nginxIsExist" :class="{ mask: nginxStatus != 'Running' }">
+            <LayoutContent>
                 <br />
                 <el-card v-if="!openNginxConfig">
                     <LayoutContent :header="$t('website.website')">
@@ -19,7 +20,9 @@
                                 prop="primaryDomain"
                             >
                                 <template #default="{ row }">
-                                <el-link type="primary" @click="openConfig(row.id)">{{ row.primaryDomain }}</el-link>
+                                    <el-link type="primary" @click="openConfig(row.id)">
+                                        {{ row.primaryDomain }}
+                                    </el-link>
                                 </template>
                             </el-table-column>
                             <el-table-column :label="$t('commons.table.type')" fix prop="type">
@@ -51,9 +54,6 @@
                         </ComplexTable>
                     </LayoutContent>
                 </el-card>
-            <el-card v-if="openNginxConfig">
-                <NginxConfig :containerName="containerName"></NginxConfig>
-            </el-card>
 
                 <CreateWebSite ref="createRef" @close="search"></CreateWebSite>
                 <DeleteWebsite ref="deleteRef" @close="search"></DeleteWebsite>
@@ -62,6 +62,13 @@
                 <BackupRecords ref="dialogBackupRef" />
             </LayoutContent>
         </div>
+        <el-card width="30%" v-if="nginxStatus != 'Running'" class="mask-prompt">
+            <span style="font-size: 14px">当前未启动 OpenResty 服务</span>
+        </el-card>
+        <el-card v-if="openNginxConfig">
+            <NginxConfig :containerName="containerName" :status="nginxStatus"></NginxConfig>
+        </el-card>
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -90,6 +97,7 @@ const groupRef = ref();
 let openNginxConfig = ref(false);
 let nginxIsExist = ref(false);
 let containerName = ref('');
+let nginxStatus = ref('');
 
 const paginationConfig = reactive({
     currentPage: 1,
@@ -172,6 +180,7 @@ const openGroup = () => {
 const checkExist = (data: App.CheckInstalled) => {
     nginxIsExist.value = data.isExist;
     containerName.value = data.containerName;
+    nginxStatus.value = data.status;
 };
 
 onMounted(() => {

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

@@ -1,17 +1,17 @@
 <template>
-    <LayoutContent :header="$t('website.nginxConfig')" :reload="true">
+    <LayoutContent :header="$t('nginx.nginxConfig')" :reload="true">
         <el-collapse v-model="activeName" accordion>
-            <el-collapse-item :title="$t('website.source')" name="1">
-                <Source></Source>
+            <el-collapse-item :title="$t('nginx.configResource')" name="1">
+                <Source v-if="activeName === '1'"></Source>
             </el-collapse-item>
-            <el-collapse-item :title="$t('website.log')" name="2">
-                <ContainerLog ref="dialogContainerLogRef" />
+            <el-collapse-item :title="$t('nginx.status')" name="2">
+                <Status v-if="activeName === '2'" :status="status" />
             </el-collapse-item>
             <el-collapse-item :title="$t('website.nginxPer')" name="3">
-                <NginxPer />
+                <NginxPer v-if="activeName === '3'" />
             </el-collapse-item>
-            <el-collapse-item :title="$t('nginx.status')" name="4">
-                <Status />
+            <el-collapse-item :title="$t('website.log')" name="4">
+                <ContainerLog ref="dialogContainerLogRef" />
             </el-collapse-item>
         </el-collapse>
     </LayoutContent>
@@ -33,12 +33,16 @@ const props = defineProps({
         type: String,
         default: '',
     },
+    status: {
+        type: String,
+        default: 'Running',
+    },
 });
 
 watch(
     activeName,
     (newvalue) => {
-        if (newvalue === '2') {
+        if (newvalue === '4') {
             dialogContainerLogRef.value!.acceptParams({
                 containerID: props.containerName,
                 container: props.containerName,

frontend/src/views/website/website/nginx/status/index.vue

@@ -21,6 +21,13 @@ import { Nginx } from '@/api/interface/nginx';
 import { GetNginxStatus } from '@/api/modules/nginx';
 import { onMounted, ref } from 'vue';
 
+const props = defineProps({
+    status: {
+        type: String,
+        default: 'Running',
+    },
+});
+
 let data = ref<Nginx.NginxStatus>({
     accepts: '',
     handled: '',
@@ -32,6 +39,9 @@ let data = ref<Nginx.NginxStatus>({
 });
 
 const get = async () => {
+    if (props.status != 'Running') {
+        return;
+    }
     const res = await GetNginxStatus();
     data.value = res.data;
 };