feat: useMenuData

d2/components/d2/admin/layout/dashboard/menu/render/item.vue

@@ -1,16 +1,16 @@
 <template>
-  <a-menu-item :key="getMenuId(menu)">
-    <template #icon>
-      <d2-icon :name="getMenuIcon(menu)"/>
+  <a-menu-item :key="menuId">
+    <template v-if="menuIcon" #icon>
+      <d2-icon :name="menuIcon"/>
     </template>
-    {{ getMenuTitle(menu) }}
+    {{ menuTitle }}
   </a-menu-item>
 </template>
 
 <script>
 import { makeNameByUrl } from 'd2/utils/framework/component.js'
 import { defineComponent } from 'vue'
-import { getMenuId, getMenuTitle, getMenuIcon } from 'd2/utils/framework/menu.js'
+import { useMenuData } from 'd2/use/menu.js'
 
 export default defineComponent({
   name: makeNameByUrl(import.meta.url),
@@ -20,11 +20,15 @@ export default defineComponent({
       required: true
     }
   },
-  setup () {
+  setup (props) {
+    const { menu } = props
+
+    const { menuId, menuTitle, menuIcon } = useMenuData(menu)
+
     return {
-      getMenuId,
-      getMenuTitle,
-      getMenuIcon
+      menuId,
+      menuTitle,
+      menuIcon
     }
   }
 })

d2/use/menu.js

@@ -1,13 +1,27 @@
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'
+import { getMenuId, getMenuTitle, getMenuIcon, getMenuUrl } from 'd2/utils/framework/menu.js'
 
 export function useMenu () {
   const router = useRouter()
 
   function navigateByMenu (menu) {
-    router.push(menu.url)
+    router.push(getMenuUrl(menu.url))
   }
 
   return {
     navigateByMenu
   }
 }
+
+export function useMenuData (menu) {
+  const menuId = computed(() => getMenuId(menu))
+  const menuTitle = computed(() => getMenuTitle(menu))
+  const menuIcon = computed(() => getMenuIcon(menu))
+
+  return {
+    menuId,
+    menuTitle,
+    menuIcon
+  }
+}