介接sidebar選單資訊

Author: alyciaciou

src/components/Sidebar.vue

@@ -7,11 +7,8 @@
           :default-openeds="['1']"
           active-text-color="#ffd04b"
         >
-          <el-menu-item index="1" class="text-white hover:bg-gray-600">
-            <span>qwe</span>
-          </el-menu-item>
-          <el-menu-item index="2" class="text-white hover:bg-gray-600">
-            <span>asd</span>
+          <el-menu-item @click="$emit('getTableData', name)" v-for="(name, index) in sidebarList" :index="(index + 1).toString()" :key="name" class="text-white hover:bg-gray-600">
+            <span>{{ name }}</span>
           </el-menu-item>
         </el-menu>
         <el-button @click="$emit('singOut')" type="primary" class="w-full bg-gray-600 hover:bg-gray-500 border-gray-600 hover:border-gray-500 rounded-none">
@@ -25,9 +22,13 @@
         sidebarOpen: {
             type: Boolean,
             default: true
+        },
+        sidebarList: {
+            type: Array,
+            default: () => []
         }
     })
-    defineEmits(['singOut'])
+    defineEmits(['singOut', 'getTableData'])
 </script>
 
 <style scoped>

src/composables/apis.js

@@ -20,4 +20,9 @@ const tableNames = async () => {
     return res
 }
 
-export { login, logout, checkLoginStatus, tableNames }
+const modelData = async (name) => {
+    const res = await GET('/private/models')
+    return res
+}
+
+export { login, logout, checkLoginStatus, tableNames, modelData }

src/views/HomeView.vue

@@ -1,7 +1,7 @@
 <template>
     <main>
       <el-container class="h-screen">
-        <Sidebar :sidebarOpen="sidebarOpen" @singOut="singOut"/>
+        <Sidebar :sidebarOpen="sidebarOpen" @singOut="singOut" :sidebarList="sidebarList" @getTableData="getTableData"/>
         <el-container>
           <el-header class="bg-white border-b flex items-center justify-between md:justify-end">
             <el-icon  @click="toggleSidebar" class="text-black block md:hidden cursor-pointer"><Menu /></el-icon>