feat: add empty of page & nav

pumelotea · Mar 10, 2022 · c41baa6 · c41baa6
1 parent c98f4a1
commit c41baa6
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/src/components/HbAdminNav.vue b/src/components/HbAdminNav.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {NIcon, NButton, NAvatar, NTag, NDropdown} from "naive-ui"
+import {NIcon, NButton, NEmpty, NTag, NDropdown} from "naive-ui"
 import {
   ArrowBack,
   ArrowForward,
@@ -129,7 +129,9 @@ function scrollHorizontal(direction){
 
 watch(currentRouteMenu,value=>{
   nextTick(()=>{
-    scroll(value.pageId)
+    if (value){
+      scroll(value.pageId)
+    }
   })
 })
 
@@ -148,6 +150,7 @@ watch(currentRouteMenu,value=>{
       </template>
     </n-button>
     <div class="inline-box" ref="navDom">
+      <n-empty :show-icon="false" description="从左侧菜单打开页面" v-if="navList.length <= 0"></n-empty>
       <n-tag closable
              round
              v-for="e in navList" @close="()=>{onNavClose(e)}"

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
@@ -5,7 +5,7 @@ import HbAdminNav from "../../components/HbAdminNav.vue"
 import HbAdminLogo from "../../components/HbAdminLogo.vue"
 import HbAdminCopyright from "../../components/HbAdminCopyright.vue"
 import HbAdminUserCard from "../../components/HbAdminUserCard.vue"
-
+import {NEmpty,NIcon} from "naive-ui"
 import {
   NMessageProvider,
   NConfigProvider,
@@ -17,11 +17,20 @@ import {
 } from "naive-ui"
 
 import {theme,isMenuCollapsed} from "../../global/config";
+import {h} from "vue";
+import {CubeOutline,AlbumsOutline} from "@vicons/ionicons5";
+import framework from "../../global/framework";
 
 function onLayoutCollapsed(collapsed){
   isMenuCollapsed.value = collapsed
 }
 
+const currentMenuRoute = framework.getCurrentMenuRoute()
+
+function renderIcon(){
+  return ()=>h(NIcon, null, {default: () => h(CubeOutline)})
+}
+
 
 </script>
 
@@ -57,6 +66,13 @@ function onLayoutCollapsed(collapsed){
             <router-view v-slot="{ Component }">
               <component :is="Component"></component>
             </router-view>
+            <div class="empty-route-body" v-if="!currentMenuRoute">
+              <n-empty size="huge" description="还没打开页面呐 ~">
+                <template #icon>
+                  <n-icon :component="AlbumsOutline"></n-icon>
+                </template>
+              </n-empty>
+            </div>
           </n-layout-content>
           <n-layout-footer class="main-foot">
             <hb-admin-copyright/>
@@ -91,4 +107,12 @@ function onLayoutCollapsed(collapsed){
 .main-foot {
   height: 40px;
 }
+
+.empty-route-body{
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
 </style>