feat: 添加simple、normal、full 等layout布局

src/layouts/components/SideMenu.vue

@@ -0,0 +1,62 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:50:35
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <n-menu
+    ref="menu"
+    class="side-menu"
+    accordion
+    :indent="18"
+    :collapsed-icon-size="22"
+    :collapsed-width="64"
+    :collapsed="appStore.collapsed"
+    :options="permissionStore.menus"
+    :value="activeKey"
+    @update:value="handleMenuSelect"
+  />
+</template>
+
+<script setup>
+import { useAppStore, usePermissionStore } from '@/store'
+import { isExternal } from '@/utils'
+
+const router = useRouter()
+const route = useRoute()
+const appStore = useAppStore()
+const permissionStore = usePermissionStore()
+
+const activeKey = computed(() => route.meta?.parentKey || route.name)
+
+const menu = ref(null)
+watch(route, async () => {
+  await nextTick()
+  menu.value?.showOption()
+})
+
+function handleMenuSelect(key, item) {
+  if (isExternal(item.path)) {
+    window.open(item.path)
+  } else {
+    router.push(item.path)
+  }
+}
+</script>
+
+<style lang="scss">
+.side-menu:not(.n-menu--collapsed) {
+  .n-menu-item-content {
+    &::before {
+      left: 8px;
+      right: 8px;
+    }
+    &.n-menu-item-content--selected::before {
+      border-left: 4px solid var(--primary-color);
+    }
+  }
+}
+</style>