1404/11/04- first

src/components/BasicMenu/components/BasicMenuItem.vue

@@ -0,0 +1,40 @@
+<template>
+  <template v-for="item in props.menu" :key="item.name">
+    <AMenuItem :key="item.name" v-if="!item.children" @click="handleClickMenu(item)">
+      <template #icon v-if="item?.meta?.icon">
+        <BaseIcon :icon="item?.meta?.icon" />
+      </template>
+      {{ item?.meta?.title }}
+    </AMenuItem>
+    <ASubMenu :key="item.name" v-else>
+      <template #icon v-if="item?.meta?.icon">
+        <BaseIcon :icon="item.meta.icon" />
+      </template>
+      <template #title>{{ item.meta.title }}</template>
+      <BasicMenuItem v-if="item.children" :menu="item.children" />
+    </ASubMenu>
+  </template>
+</template>
+
+<script setup lang="ts">
+// import BasicMenuItem from './BasicMenuItem'
+
+import { defineProps } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { useRouter } from 'vue-router'
+
+interface Prop {
+  menu: RouteRecordRaw[]
+}
+
+const router = useRouter()
+
+function handleClickMenu(item: RouteRecordRaw) {
+  //debugger
+  router.push({ name: item.name })
+}
+
+const props = defineProps<Prop>()
+</script>
+
+<style scoped></style>

src/components/BasicMenu/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <!--    {{ props.menu }}-->
+    <AMenu
+      v-model:selectedKeys="selectedKeys"
+      :style="{ width: props.width }"
+      :mode="props.mode"
+      :theme="props.theme"
+    >
+      <!--      <a-menu-item key="1"> Navigation One </a-menu-item>-->
+      <!--      {{ props.menu }}-->
+      <BasicMenuItem :menu="props.menu" />
+    </AMenu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MenuMode, MenuTheme } from 'ant-design-vue'
+import { defineProps } from 'vue'
+//import Icon from '@core/components/BaseIcon/src/Icon.vue'
+import BasicMenuItem from '@/components/BasicMenu/components/BasicMenuItem.vue'
+import type { RouteRecordRaw } from 'vue-router'
+
+const selectedKeys = ref<string[]>([])
+const router = useRouter()
+/*const state = reactive({
+  selectedKeys: ['1'],
+  openKeys: ['sub1']
+})*/
+//define emit
+//const emits = defineEmits(['onChange'])
+//selected key
+//const selectedKeys = ref<Array<string>>(['1'])
+/*watch(selectedKeys, (val) => {
+  emits('onChange', val[0])
+})*/
+
+//prop
+interface Prop {
+  menu: RouteRecordRaw[]
+  mode?: MenuMode
+  theme?: MenuTheme
+  width?: string
+}
+const props = withDefaults(defineProps<Prop>(), {
+  mode: 'inline',
+  theme: 'light',
+  width: '20rem'
+})
+onMounted(() => {
+  selectedKeys.value = [router.currentRoute.value.name as string]
+  //emits('onChange', '1')
+})
+</script>
+
+<style scoped></style>