init

frontend/app/components/SiderMenu.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div class="menu-out">
+      <a-layout-sider v-model:collapsed="collapsed" collapsible style="height: 100%;">
+        <div class="logo" />
+        <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" @click="menuClick">
+          <a-menu-item key="">
+            <pie-chart-outlined />
+            <span>控制台</span>
+          </a-menu-item>
+          <a-sub-menu key="device">
+            <template #title>
+              <span>
+                <user-outlined />
+                <span>设备管理</span>
+              </span>
+            </template>
+            <a-menu-item key="list">设备列表</a-menu-item>
+          </a-sub-menu>
+        </a-menu>
+      </a-layout-sider>
+    </div>
+    <div>
+      <a-layout-sider v-model:collapsed="collapsed" collapsible style="height: 100%;"></a-layout-sider>
+    </div>
+  </div>
+  
+</template>
+<script lang="ts" setup>
+import {
+  PieChartOutlined,
+  UserOutlined,
+} from '@ant-design/icons-vue';
+import { ref } from 'vue';
+const collapsed = ref<boolean>(false);
+const selectedKeys = ref<string[]>(['']);
+function menuClick(e: any) {
+  console.log(e);
+  const keyList = e.keyPath
+  let path = ''
+  for (let i = 0; i < keyList.length; i++) {
+    const element = keyList[i];
+    path += "/"+element
+  }
+  navigateTo(path)
+}
+
+
+</script>
+<style scoped>
+.logo {
+  height: 32px;
+  margin: 16px;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.site-layout .site-layout-background {
+  background: #fff;
+}
+[data-theme='dark'] .site-layout .site-layout-background {
+  background: #141414;
+}
+
+.menu-out{
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+  min-height: 100vh;
+}
+</style>