init : 初始化仓库

src/layout/siderbar/MenuItem.vue

@@ -0,0 +1,48 @@
+<template>
+  <!-- 有子菜单 -->
+  <template v-for="item in menuItem" :key="item.path">
+    <el-sub-menu v-if="item?.children?.length>0 && !item.hidden" :index="item.path">
+      <template #title>
+        <svg-icon :name="item.icon"/>
+        <span>{{ item.title }}</span>
+      </template>
+      <Item :menu-item="item.children"></Item>
+    </el-sub-menu>
+    <el-menu-item v-else-if="!item.hidden&&!item.meta.isFrame" :index="handleGo(item.path)">
+      <template #title>
+        <div v-if="item.path==='/tool/swagger'">
+          <a class="port-link" :href="link" target="_blank">
+            <svg-icon :name="item.icon"/>
+            {{ item.title }}
+          </a>
+        </div>
+        <div v-else>
+          <svg-icon :name="item.icon"/>
+          <span>{{ item.title }}</span>
+        </div>
+      </template>
+    </el-menu-item>
+  </template>
+</template>
+
+<script setup>
+import SvgIcon from '@/components/svgIcon/index.vue'
+import Item from './MenuItem.vue'
+
+const props = defineProps({
+  menuItem: {
+    type: Array,
+    required: true
+  }
+})
+const link = ref('http://gateway.feashow.cn/doc.html#/home')
+const handleGo = (path) => {
+  if (path === "/tool/swagger") {
+    return ''
+  } else {
+    return path
+  }
+}
+
+</script>
+

src/layout/siderbar/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="logo" ref="logo">
+    <span v-if="!siderbarStore.isCollapse">SmartOpsWeb</span>
+  </div>
+  <el-scrollbar :height="`calc(100vh - ${logoHeight}px)`" style="background-color: #ffffff">
+    <el-menu
+      router
+      :default-active="activeMenu"
+      :unique-opened="true"
+      :collapse="siderbarStore.isCollapse"
+      active-text-color="#333"
+      text-color="#333"
+      style="border: none;"
+      :collapse-transition="false"
+    >
+      <MenuItem :menu-item="permisstionStore.menuList"></MenuItem>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script setup>
+import MenuItem from './MenuItem.vue';
+import {useRoute} from 'vue-router'
+import {useSiderBar} from '@/stores/siderbar.js'
+import {usePermisstionStroe} from '@/stores/permisstion.js'
+import {nextTick} from 'vue';
+
+const siderbarStore = useSiderBar()
+const permisstionStore = usePermisstionStroe()
+const route = useRoute()
+const link = ref('')
+const title = ref('')
+const logo = ref(null)
+const logoHeight = ref()
+const getLogoH = () => {
+  logoHeight.value = logo.value.offsetHeight
+}
+const activeMenu = computed(() => {
+  const {path} = route
+  return path
+})
+
+onMounted(() => {
+  nextTick(() => {
+    getLogoH()
+  })
+})
+
+window.addEventListener('resize', () => {
+  getLogoH()
+})
+</script>