隐藏路由

src/layout/default/app-main/Navbar.vue

@@ -22,7 +22,7 @@
     <div class="navbar-right">
       <component :is="item" v-for="(item, i) of navbar.right" :key="i" />
       <!-- 下拉操作菜单 -->
-      <debugger/>
+      <debugger />
       <div v-if="settings.ShowDropDown" class="right-menu rowSC">
         <!--        <ScreenFull />-->
         <!--        <ScreenLock />-->
@@ -30,14 +30,24 @@
         <!--        <SizeSelect />-->
         <!--        <LangSelect />-->
         <el-dropdown trigger="click" size="default">
-          <div class="avatar-wrapper" :title="(userInfo?.realName || userInfo?.username) + ' - 在线'">
+          <div class="avatar-wrapper" :title="(userInfo?.realName || userInfo?.userName) + ' - 在线'">
             <img :src="userInfo.avatar ?? userImage" alt="用户头像" class="user-avatar" />
-            <div class="user-avatar-status" />
+            <div class="user-avatar-status" :style="{backgroundColor: !online ? 'red' : null}">
+              <el-popover :visible="!online" :effect="'dark'" :width="170">
+                <template #reference>
+                  <div />
+                </template>
+                <div class="online-status">
+                  <menu-icon icon="exclamation-triangle-fill" />
+                  <span>与服务器连接中断</span>
+                </div>
+              </el-popover>
+            </div>
           </div>
           <template #dropdown>
             <el-dropdown-menu class="drop-down">
               <el-dropdown-item class="welcome-user">
-                {{ time }}好，<b>{{ userInfo.realName || userImage.username || "平台用户" }}</b>
+                {{ time }}好，<b>{{ userInfo.realName || userImage.userName || "平台用户" }}</b>
               </el-dropdown-item>
               <router-link to="/">
                 <el-dropdown-item divided>{{ langTitle("Home") }}</el-dropdown-item>
@@ -71,9 +81,12 @@ import { useBasicStore } from "@/store/basic";
 import { langTitle } from "@/hooks/use-common";
 import userImage from "@/assets/layout/user.png";
 import Debugger from "@/layout/default/app-main/component/Debugger.vue";
+import MenuIcon from "@/components/MenuIcon.vue";
+import { useDebuggerStore } from "@/store/debuger";
 
 const basicStore = useBasicStore();
 const { settings, sidebar, setToggleSideBar, userInfo } = basicStore;
+const online = toRef(basicStore, "online");
 
 const toggleSideBar = () => {
   setToggleSideBar();
@@ -123,6 +136,21 @@ watch(() => basicStore.navbar.cursor, () => {
 </script>
 
 <style lang="scss" scoped>
+
+.online-status {
+  display: flex;
+  align-items: center;
+
+  .menu-icon {
+    color: gold;
+    margin-right: 0.5em;
+  }
+
+  span {
+    color: red;
+  }
+}
+
 .navbar {
   height: var(--nav-bar-height);
   overflow: hidden;

src/layout/default/app-main/component/Debugger.vue

@@ -1,34 +1,117 @@
 <template>
   <div class="debugger" title="调试器">
-    <el-button class="btn" type="primary" link @click="data.dialog = true">
+    <el-button v-if="store.enable" class="btn" type="primary" link @click="data.dialog = true">
       <menu-icon icon="bug-fill" />
     </el-button>
-    <el-dialog v-model="data.dialog" :append-to-body="true" title="Debugger" :width="600">
+    <el-dialog v-if="data.dialog" v-model="data.dialog" :append-to-body="true" title="调试工具" :width="600">
-      <div>
+      <div class="debugger-items">
-        显示调试网格
+        <p>UI</p>
-        <el-switch v-model="showLayoutGrid" />
+        <div class="switch-item">
+          <p>显示页面布局网格</p>
+          <el-switch v-model="ui.showLayoutGrid" />
+        </div>
+        <hr />
+        <p>消息面板</p>
+        <div class="switch-item">
+          <p>始终显示消息面板</p>
+          <el-switch v-model="messageFrame.alwaysShow" />
+        </div>
+        <div class="switch-item">
+          <p>页面变更时打印间隔消息</p>
+          <el-switch v-model="messageFrame.showPageSwitchMsg" />
+        </div>
+        <hr />
+        <p>网络</p>
+        <div class="switch-item">
+          <p>打印网络请求至消息面板</p>
+          <el-switch v-model="network.printMsg.enable" />
+        </div>
+        <template v-if="network.printMsg.enable">
+          <div class="switch-item">
+            <p>> 显示请求时间</p>
+            <el-switch v-model="network.printMsg.showTime" />
+          </div>
+          <div class="switch-item">
+            <p>> 等待消息面板显示</p>
+            <el-switch v-model="network.printMsg.waitMessageFrameShow" />
+          </div>
+        </template>
       </div>
     </el-dialog>
-    <div v-if="showLayoutGrid" v-html="data.gridHtml" />
+    <div v-if="ui.showLayoutGrid" v-html="data.gridHtml" />
   </div>
 </template>
 
 <script setup lang="ts">
 import MenuIcon from "@/components/MenuIcon.vue";
 import { useDebuggerStore } from "@/store/debuger";
+import bus from "@/utils/bus";
 
-const store = useDebuggerStore()
+const store = useDebuggerStore();
-const {showLayoutGrid} = storeToRefs(store)
+const { ui, network, messageFrame } = storeToRefs(store);
 
 const data = reactive({
   dialog: false,
   gridHtml: `<style>*{ box-shadow: 0 0 1px 0 blue }</style>`
 });
 
+function onDebuggerShow() {
+  data.dialog = true;
+}
+
+onMounted(() => {
+  bus.on("debugger:show", onDebuggerShow);
+});
+
+onUnmounted(() => {
+  bus.off("debugger:show", onDebuggerShow);
+});
+
 </script>
 
 <style scoped lang="scss">
-.btn{
+.debugger {
-  padding: 0.3em !important;
+  margin-left: 0 !important;
+
+  .btn {
+    margin-left: 1em;
+    padding: 0.3em !important;
+  }
+}
+
+.debugger-items {
+  padding: 0 2em 0 2em;
+  position: relative;
+
+  > p {
+    position: relative;
+    left: -0.5em;
+    margin: 0.5em 0 0.5em 0;
+    color: gray;
+  }
+
+  > hr {
+    margin: 1em 0 0 0;
+  }
+
+  .switch-item {
+    display: flex;
+    align-items: center;
+    color: black;
+
+    > p {
+      display: block;
+      flex-grow: 1;
+      margin: 0;
+      line-height: 2em;
+      font-size: 1.1em;
+    }
+
+    .el-switch {
+      position: relative;
+      transform: scale(1.4);
+      right: 2em;
+    }
+  }
 }
 </style>

src/layout/default/app-main/index.vue

@@ -15,12 +15,12 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="AppMain">
 import { computed, watch } from 'vue'
 import { storeToRefs } from 'pinia/dist/pinia'
 import { useRoute } from 'vue-router'
 import type { RouteLocationMatched } from 'vue-router'
-import type { rawConfig } from '~/basic'
+import type { RawConfig, RouteRawConfig } from "~/basic";
 import { useBasicStore } from '@/store/basic'
 import { cloneDeep } from '@/hooks/use-common'
 const { settings, cachedViews } = storeToRefs(useBasicStore())
@@ -29,7 +29,7 @@ const key = computed(() => route.path)
 /*listen the component name changing, then to keep-alive the page*/
 // cachePage: is true, keep-alive this Page
 // leaveRmCachePage: is true, keep-alive remote when page leave
-let oldRoute: rawConfig = {}
+let oldRoute: RouteRawConfig = {} as any
 let deepOldRouter: RouteLocationMatched | null = null
 const basicStore = useBasicStore()
 const removeDeepChildren = (deepOldRouter) => {

src/layout/default/index.vue

@@ -10,7 +10,7 @@
     </div>
   </div>
 </template>
-<script setup lang="ts">
+<script setup lang="ts" name="DefaultLayout">
 import { computed } from 'vue'
 import Sidebar from './sidebar/index.vue'
 import AppMain from './app-main/index.vue'

src/layout/default/sidebar/SidebarItem.vue

@@ -28,8 +28,8 @@
 import { ref } from 'vue'
 import { resolve } from 'path-browserify'
 import Link from './Link.vue'
-import MenuIcon from '../../../components/MenuIcon.vue'
+import MenuIcon from '@/components/MenuIcon.vue'
-import type { RouteRawConfig } from '~/basic'
+import type { RouteRawConfig, RouterTypes } from '~/basic'
 import { isExternal } from '@/hooks/use-layout'
 import { langTitle } from '@/hooks/use-common'
 
@@ -52,13 +52,13 @@ const props = defineProps({
 })
 //显示sidebarItem 的情况
 const onlyOneChild = ref()
-const showSidebarItem = (children = [], parent) => {
+const showSidebarItem = (children: RouterTypes = [], parent: RouteRawConfig) => {
-  const showingChildren = children.filter((item: RouteRawConfig) => {
+  if (parent.expand === false) {
-    if (item.hidden) {
+    onlyOneChild.value = { ...parent, path: '', noChildren: true }
-      return false
+    return true
-    } else {
+  }
-      return true
+  const showingChildren = children.filter((item) => {
-    }
+    return !item.hidden
   })
   if (showingChildren.length === 1 && !parent?.alwaysShow) {
     onlyOneChild.value = showingChildren[0]
@@ -80,3 +80,9 @@ const resolvePath = (routePath) => {
   return resolve(props.basePath, routePath)
 }
 </script>
+
+<style scoped lang="scss">
+:deep(.el-menu-item.is-active) {
+  text-shadow: 1px 1px 0 #ffffff88;
+}
+</style>

src/layout/default/sidebar/index.vue

@@ -17,8 +17,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="SideBar">
-import { computed } from 'vue'
 import { storeToRefs } from 'pinia/dist/pinia'
 import { useRoute } from "vue-router";
 import Logo from './Logo.vue'