feat: 增加配置界面交互，修改菜单

frontend/src/App.vue

@@ -1,11 +1,11 @@
 <template>
     <el-config-provider :locale="i18nLocale" :button="config" :size="assemblySize">
-        <router-view></router-view>
+        <router-view v-if="isRouterAlive"></router-view>
     </el-config-provider>
 </template>
 
 <script setup lang="ts">
-import { reactive, computed } from 'vue';
+import { reactive, computed, ref, nextTick, provide } from 'vue';
 import { GlobalStore } from '@/store';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import en from 'element-plus/es/locale/lang/en';
@@ -24,6 +24,16 @@ const i18nLocale = computed((): any => {
 });
 
 const assemblySize = computed((): string => globalStore.assemblySize);
+
+let isRouterAlive = ref(true);
+
+const reload = () => {
+    isRouterAlive.value = false;
+    nextTick(function () {
+        isRouterAlive.value = true;
+    });
+};
+provide('reload', reload);
 </script>
 
 <style scoped lang="scss"></style>

frontend/src/components/back-button/index.vue

@@ -1,11 +1,9 @@
 <template>
-    <!-- <el-icon class="back-button" @click="jump">
-        <Back />
-    </el-icon> -->
     <el-page-header :content="header" @back="jump" />
 </template>
 
 <script setup lang="ts">
+import { inject } from 'vue';
 import { useRouter } from 'vue-router';
 const router = useRouter();
 const props = defineProps({
@@ -13,9 +11,13 @@ const props = defineProps({
     name: String,
     to: Object,
     header: String,
+    reload: Boolean,
 });
 function jump() {
-    const { path, name, to } = props;
+    const { path, name, to, reload } = props;
+    if (reload) {
+        reloadPage();
+    }
     if (path) {
         router.push(path);
     }
@@ -26,16 +28,6 @@ function jump() {
         router.push(to);
     }
 }
-</script>
 
-<style lang="scss">
+let reloadPage: Function = inject('reload');
-// .back-button {
+</script>
-//     cursor: pointer;
-//     margin-right: 10px;
-//     font-weight: 600;
-
-//     &:active {
-//         transform: scale(0.85);
-//     }
-// }
-</style>

frontend/src/lang/modules/zh.ts

@@ -139,7 +139,7 @@ export default {
         cronjob: '计划任务',
         host: '主机',
         security: '安全',
-        files: '文件管理',
+        files: '文件',
         monitor: '监控',
         terminal: '终端',
         settings: '面板设置',
@@ -752,5 +752,6 @@ export default {
         aliasHelper: '代号是网站目录的文件夹名称',
         lastBackupAt: '上次备份时间',
         null: '无',
+        nginxConfig: 'Nginx配置',
     },
 };

frontend/src/layout/layout-content.vue

@@ -7,8 +7,10 @@
                     :name="backName"
                     :to="backTo"
                     :header="header"
+                    :reload="reload"
                     v-if="showBack"
                 ></back-button>
+                <!-- <el-page-header @back="reload" v-if="showBack" :content="header"></el-page-header> -->
                 <span v-else>{{ header }}</span>
             </slot>
         </div>
@@ -37,11 +39,12 @@ const prop = defineProps({
     backPath: String,
     backName: String,
     backTo: Object,
+    reload: Boolean,
 });
 
 const showBack = computed(() => {
-    const { backPath, backName, backTo } = prop;
+    const { backPath, backName, backTo, reload } = prop;
-    return backPath || backName || backTo;
+    return backPath || backName || backTo || reload;
 });
 </script>
 

frontend/src/routers/modules/website.ts

@@ -36,14 +36,6 @@ const webSiteRouter = {
                 title: 'menu.ssl',
             },
         },
-        {
-            path: '/websites/nginx',
-            name: 'Config',
-            component: () => import('@/views/website/config/index.vue'),
-            meta: {
-                title: 'menu.config',
-            },
-        },
     ],
 };
 

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

@@ -1,9 +1,9 @@
 <template>
-    <div ref="websiteRef">
+    <LayoutContent>
-        <LayoutContent>
+        <AppStatus :app-key="'nginx'" @setting="setting"></AppStatus>
-            <AppStatus :app-key="'nginx'" :parentRef="websiteRef"></AppStatus>
+        <br />
-            <br />
+        <el-card v-if="!openNginxConfig">
-            <el-card>
+            <LayoutContent :header="$t('website.website')">
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search()">
                     <template #toolbar>
                         <el-button type="primary" plain @click="openCreate">
@@ -30,13 +30,16 @@
                         fix
                     />
                 </ComplexTable>
-            </el-card>
+            </LayoutContent>
+        </el-card>
+        <el-card v-if="openNginxConfig">
+            <NginxConfig></NginxConfig>
+        </el-card>
 
-            <CreateWebSite ref="createRef" @close="search"></CreateWebSite>
+        <CreateWebSite ref="createRef" @close="search"></CreateWebSite>
-            <DeleteWebsite ref="deleteRef" @close="search"></DeleteWebsite>
+        <DeleteWebsite ref="deleteRef" @close="search"></DeleteWebsite>
-            <WebSiteGroup ref="groupRef"></WebSiteGroup>
+        <WebSiteGroup ref="groupRef"></WebSiteGroup>
-        </LayoutContent>
+    </LayoutContent>
-    </div>
 </template>
 
 <script lang="ts" setup>
@@ -49,6 +52,7 @@ import WebSiteGroup from './group/index.vue';
 import { SearchWebSites } from '@/api/modules/website';
 import { WebSite } from '@/api/interface/website';
 import AppStatus from '@/components/app-status/index.vue';
+import NginxConfig from './nginx/index.vue';
 
 import i18n from '@/lang';
 import router from '@/routers';
@@ -56,7 +60,7 @@ import router from '@/routers';
 const createRef = ref();
 const deleteRef = ref();
 const groupRef = ref();
-const websiteRef = ref();
+let openNginxConfig = ref(false);
 
 const paginationConfig = reactive({
     currentPage: 1,
@@ -77,6 +81,9 @@ const search = async () => {
         paginationConfig.total = res.data.total;
     });
 };
+const setting = () => {
+    openNginxConfig.value = true;
+};
 
 const openConfig = (id: number) => {
     router.push({ name: 'WebsiteConfig', params: { id: id, tab: 'basic' } });

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

@@ -1,5 +1,5 @@
 <template>
-    <LayoutContent></LayoutContent>
+    <LayoutContent :header="$t('website.nginxConfig')" :reload="true"></LayoutContent>
 </template>
 
 <script lang="ts" setup>