增加日历组件

src/components/layout/Layout.vue

@@ -82,13 +82,16 @@ iniPage()
 
 .el-main {
   padding: 16px;
+  overflow: hidden;
 }
 
 .el-aside {
   margin-left: -10px;
+  background: #191a23;
 }
 
 .el-footer {
+  margin-top: 20px;
   display: flex;
   justify-content: space-around;
 }

src/components/layout/MainApp.vue

@@ -1,10 +1,14 @@
 <template>
-  <section class="section-main">
-    <router-view />
+  <section class="section-main" v-loading="usesSttingsStore.isLoading" element-loading-text="页面加载中……"
+    element-loading-background="rgba(0, 0, 0, 0.1)">
+    <router-view v-if="usesSttingsStore.isRouterAlive" />
   </section>
 </template>
 
 <script setup lang='ts'>
+import { settingsStore } from "@/store/modules/settings"
+const usesSttingsStore = settingsStore()
+
 </script>
 
 <style>

src/components/layout/NavBar.vue

@@ -17,6 +17,9 @@
     </el-col>
     <el-col :xs="12" :lg="9" :md="9" :sm="14" :xl="9">
       <div class="right-box">
+        <el-icon class="dashboard-icon" @click="open">
+          <avatar />
+        </el-icon>
         <!-- <Search /> -->
         <el-dropdown>
           <div class="dp-flex justify-content-center align-items height-full width-full">
@@ -58,6 +61,7 @@
 import CustomPic from "@/components/customPic/index.vue";
 import { tenantStore } from '@/store/modules/tenant'
 import { settingsStore } from '@/store/modules/settings'
+import { Action, ElMessage, ElMessageBox } from "element-plus";
 
 // -- IMPORT --
 const useTenantStore = tenantStore()
@@ -71,6 +75,19 @@ const useSettingsStore = settingsStore()
 const toPerson = () => {
 
 }
+const open = () => {
+  ElMessageBox.alert('This is a message', 'Title', {
+    // if you want to disable its autofocus
+    // autofocus: false,
+    confirmButtonText: 'OK',
+    callback: (action: Action) => {
+      ElMessage({
+        type: 'info',
+        message: `action: ${action}`,
+      })
+    },
+  })
+}
 
 useTenantStore.reflush()