From 320acc70abe6d3dfabf90573e242e86704389f6a Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Tue, 14 Nov 2023 15:10:47 +0800
Subject: [PATCH] add sidebar items on mounted

---
 frontend/src/stores/router.ts                 |  2 +-
 frontend/src/views/Home/Home.vue              |  8 +++++++
 .../src/views/Home/components/Sidebar.vue     | 23 ++++++++++++++++++-
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/frontend/src/stores/router.ts b/frontend/src/stores/router.ts
index e2c2cf6..0284193 100644
--- a/frontend/src/stores/router.ts
+++ b/frontend/src/stores/router.ts
@@ -11,7 +11,7 @@ export interface Menu {
 }
 
 export const routerStore = defineStore('router', () => {
-    const menus = ref<Menu[]>()
+    const menus = ref<Menu[]>([])
 
     return { menus }
 })
diff --git a/frontend/src/views/Home/Home.vue b/frontend/src/views/Home/Home.vue
index cec9642..9d88fef 100644
--- a/frontend/src/views/Home/Home.vue
+++ b/frontend/src/views/Home/Home.vue
@@ -20,7 +20,15 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from "vue";
 import Sidebar from "./components/Sidebar.vue";
+
+import { updateSidebarItems } from "@/router/index";
+
+onMounted(()=>{
+    updateSidebarItems();
+})
+
 </script>
 
 
diff --git a/frontend/src/views/Home/components/Sidebar.vue b/frontend/src/views/Home/components/Sidebar.vue
index 9737a9e..f673a44 100644
--- a/frontend/src/views/Home/components/Sidebar.vue
+++ b/frontend/src/views/Home/components/Sidebar.vue
@@ -1,10 +1,31 @@
 <template>
   <div>
-    <p>sidebar menus</p>
+    <template v-for="item in routes">
+      <router-link :to="item.path">
+        <el-menu-item :index="item.panel">
+          <component class="sidebar_icon" :is="item.icon"></component>
+          <template #title>
+            <span style="padding-left: 2px;">{{ item.title }}</span>
+          </template>
+        </el-menu-item>
+      </router-link>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, watchEffect, onMounted } from "vue";
+import { routerStore, type Menu } from "@/stores/router";
+
+let routes = ref<Menu[]>([]);
+
+onMounted(() => {
+  routes.value = routerStore().menus
+});
+
+watchEffect(() => {
+  routes.value = routerStore().menus
+})
 </script>
 
 <style lang="scss" scoped></style>
\ No newline at end of file
-- 
Gitee