From 69f06ebc4d6510d893d6832724e22fc080a47084 Mon Sep 17 00:00:00 2001
From: Kaifuny <superbiger.github@gmail.com>
Date: Fri, 21 Jul 2023 14:36:28 +0800
Subject: [PATCH] fix: use shared-ui menus

Signed-off-by: Kaifuny <superbiger.github@gmail.com>
---
 .../enterprise/src/layouts/MenusLayout.vue      |  5 +++--
 .../organization/src/layouts/MenusLayout.vue    |  6 ++++--
 .../services/seats/src/layouts/MenusLayout.vue  |  5 +++--
 .../setting/src/layouts/MenusLayout.vue         |  5 +++--
 .../services/system/src/layouts/MenusLayout.vue |  5 +++--
 .../packages/shared/ui/src/components/Menus.vue | 17 +++++++++++++++++
 .../packages/shared/ui/src/index.ts             |  6 ++++--
 7 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/contact-frontend/packages/modules/services/enterprise/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/enterprise/src/layouts/MenusLayout.vue
index e7927f45..356fddb0 100644
--- a/contact-frontend/packages/modules/services/enterprise/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/enterprise/src/layouts/MenusLayout.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { MenusLayout } from '@cskefu/shared-ui'
-import { MenuOption, NMenu } from 'naive-ui'
+import { MenuOption } from 'naive-ui'
 
 import routes from '../routes'
 import { routesToMenus } from '@cskefu/shared-utils'
+import { Menu } from '@cskefu/shared-ui'
 
 const menuOptions: MenuOption[] = routesToMenus(routes)
 </script>
 <template>
   <MenusLayout>
-    <n-menu :options="menuOptions" />
+    <Menu :options="menuOptions" />
   </MenusLayout>
 </template>
diff --git a/contact-frontend/packages/modules/services/organization/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/organization/src/layouts/MenusLayout.vue
index a0c59d60..b6c27e8c 100644
--- a/contact-frontend/packages/modules/services/organization/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/organization/src/layouts/MenusLayout.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { MenusLayout } from '@cskefu/shared-ui'
-import { MenuOption, NMenu } from 'naive-ui'
+import { MenuOption } from 'naive-ui'
+
+import { Menu } from '@cskefu/shared-ui'
 
 const menuOptions: MenuOption[] = []
 </script>
 <template>
   <MenusLayout>
-    <n-menu :options="menuOptions" />
+    <Menu :options="menuOptions" />
   </MenusLayout>
 </template>
diff --git a/contact-frontend/packages/modules/services/seats/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/seats/src/layouts/MenusLayout.vue
index e7927f45..356fddb0 100644
--- a/contact-frontend/packages/modules/services/seats/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/seats/src/layouts/MenusLayout.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { MenusLayout } from '@cskefu/shared-ui'
-import { MenuOption, NMenu } from 'naive-ui'
+import { MenuOption } from 'naive-ui'
 
 import routes from '../routes'
 import { routesToMenus } from '@cskefu/shared-utils'
+import { Menu } from '@cskefu/shared-ui'
 
 const menuOptions: MenuOption[] = routesToMenus(routes)
 </script>
 <template>
   <MenusLayout>
-    <n-menu :options="menuOptions" />
+    <Menu :options="menuOptions" />
   </MenusLayout>
 </template>
diff --git a/contact-frontend/packages/modules/services/setting/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/setting/src/layouts/MenusLayout.vue
index a0c59d60..610d8ac3 100644
--- a/contact-frontend/packages/modules/services/setting/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/setting/src/layouts/MenusLayout.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { MenusLayout } from '@cskefu/shared-ui'
-import { MenuOption, NMenu } from 'naive-ui'
+import { MenuOption } from 'naive-ui'
+import { Menu } from '@cskefu/shared-ui'
 
 const menuOptions: MenuOption[] = []
 </script>
 <template>
   <MenusLayout>
-    <n-menu :options="menuOptions" />
+    <Menu :options="menuOptions" />
   </MenusLayout>
 </template>
diff --git a/contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue
index c05cafcd..4b3a5504 100644
--- a/contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { MenusLayout } from '@cskefu/shared-ui'
-import { MenuOption, NMenu } from 'naive-ui'
+import { MenuOption } from 'naive-ui'
+import { Menu } from '@cskefu/shared-ui'
 
 import routes from '../routes'
 
@@ -10,6 +11,6 @@ const menuOptions: MenuOption[] = routesToMenus(routes)
 </script>
 <template>
   <MenusLayout>
-    <n-menu :options="menuOptions" />
+    <Menu :options="menuOptions" />
   </MenusLayout>
 </template>
diff --git a/contact-frontend/packages/shared/ui/src/components/Menus.vue b/contact-frontend/packages/shared/ui/src/components/Menus.vue
index e69de29b..a620e97e 100644
--- a/contact-frontend/packages/shared/ui/src/components/Menus.vue
+++ b/contact-frontend/packages/shared/ui/src/components/Menus.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { NMenu } from 'naive-ui'
+import { NBadge, MenuOption } from 'naive-ui'
+import { h } from 'vue'
+
+function renderMenuLabel(option: MenuOption) {
+  if (option.comingSoon) {
+    return h(NBadge, { value: 'coming soon', offset: [50, 10] }, () => [
+      h('slot', { class: 'text-gray-900' }, option.label as string),
+    ])
+  }
+  return option.label as string
+}
+</script>
+<template>
+  <n-menu :render-label="renderMenuLabel" />
+</template>
diff --git a/contact-frontend/packages/shared/ui/src/index.ts b/contact-frontend/packages/shared/ui/src/index.ts
index c25c535f..f16d5257 100644
--- a/contact-frontend/packages/shared/ui/src/index.ts
+++ b/contact-frontend/packages/shared/ui/src/index.ts
@@ -1,5 +1,7 @@
 import IndexLayout from './layouts/IndexLayout.vue'
 import MenusLayout from './layouts/MenusLayout.vue'
-import Nav from './components/Nav.vue'
 
-export { IndexLayout, MenusLayout, Nav }
+import Nav from './components/Nav.vue'
+import Menu from './components/Menus.vue'
+
+export { IndexLayout, MenusLayout, Nav, Menu }