From 124778d7cfe210c4d128dbf398ddf13462653b1d Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 24 Mar 2024 18:00:15 +0800
Subject: [PATCH] [Page] [Layout] Support navigation children

---
 src/components/ui/collapsible/Collapsible.vue | 15 ++++++
 .../ui/collapsible/CollapsibleContent.vue     | 11 ++++
 .../ui/collapsible/CollapsibleTrigger.vue     | 11 ++++
 src/components/ui/collapsible/index.ts        |  3 ++
 src/data/Navigation.ts                        |  7 ++-
 src/i18n/langs/en/Common.ts                   |  4 +-
 src/i18n/langs/zhCn/Common.ts                 |  4 +-
 src/model/Navigation.ts                       |  1 +
 .../components/NavigationClosed.vue           | 35 +++++++++++-
 .../components/NavigationOpened.vue           | 54 ++++++++++++++++++-
 .../components/NavigationRouterLink.vue       |  4 +-
 11 files changed, 140 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ui/collapsible/Collapsible.vue
 create mode 100644 src/components/ui/collapsible/CollapsibleContent.vue
 create mode 100644 src/components/ui/collapsible/CollapsibleTrigger.vue
 create mode 100644 src/components/ui/collapsible/index.ts

diff --git a/src/components/ui/collapsible/Collapsible.vue b/src/components/ui/collapsible/Collapsible.vue
new file mode 100644
index 00000000..52bff5f2
--- /dev/null
+++ b/src/components/ui/collapsible/Collapsible.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>
diff --git a/src/components/ui/collapsible/CollapsibleContent.vue b/src/components/ui/collapsible/CollapsibleContent.vue
new file mode 100644
index 00000000..9f30898b
--- /dev/null
+++ b/src/components/ui/collapsible/CollapsibleContent.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'
+
+const props = defineProps<CollapsibleContentProps>()
+</script>
+
+<template>
+  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+    <slot />
+  </CollapsibleContent>
+</template>
diff --git a/src/components/ui/collapsible/CollapsibleTrigger.vue b/src/components/ui/collapsible/CollapsibleTrigger.vue
new file mode 100644
index 00000000..4a434639
--- /dev/null
+++ b/src/components/ui/collapsible/CollapsibleTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>
diff --git a/src/components/ui/collapsible/index.ts b/src/components/ui/collapsible/index.ts
new file mode 100644
index 00000000..4930f4c6
--- /dev/null
+++ b/src/components/ui/collapsible/index.ts
@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
+export { default as CollapsibleContent } from './CollapsibleContent.vue'
diff --git a/src/data/Navigation.ts b/src/data/Navigation.ts
index 086d618e..b0c7ff80 100644
--- a/src/data/Navigation.ts
+++ b/src/data/Navigation.ts
@@ -1,6 +1,6 @@
 import { NavigationModel, NavigationPosition } from '@/model/Navigation'
 import NavigationService from '@/services/Navigation'
-import { Home, LogIn, LogOut } from 'lucide-vue-next'
+import { Ban, Home, LogIn, LogOut, StickyNote } from 'lucide-vue-next'
 
 const createNavigation = (): void => {
     NavigationService.addNavigation(createNavigationItem('common.common.home', undefined, '/home', Home, NavigationPosition.LEFT_TOP))
@@ -34,6 +34,11 @@ const createNavigation = (): void => {
         [datacap],
         'common.common.openProject')
     NavigationService.addNavigation(openProject)
+
+    const page404 = createNavigationItem('common.common.page404', undefined, '/common/404', Ban, NavigationPosition.LEFT_TOP)
+    const pages = createNavigationItem('common.common.page', undefined, '/pages', StickyNote,
+        NavigationPosition.LEFT_TOP, [page404], undefined, 'common.common.page')
+    NavigationService.addNavigation(pages)
 }
 
 const createNavigationItem = (title?: string, label?: string, href?: string, icon?: any, position?: NavigationPosition, children?: NavigationModel[], group?: string, description?: string, blank?: boolean): NavigationModel => {
diff --git a/src/i18n/langs/en/Common.ts b/src/i18n/langs/en/Common.ts
index 9d244a18..e9c2505e 100644
--- a/src/i18n/langs/en/Common.ts
+++ b/src/i18n/langs/en/Common.ts
@@ -12,7 +12,9 @@ export default {
         logout: 'Logout',
         codeMirror: 'Code Mirror',
         openProject: 'Open Project',
-        datacap: 'DataCap'
+        datacap: 'DataCap',
+        page: 'Page',
+        page404: '404'
     },
     tip: {
         signInInfo: 'Enter your information to sign in to your account.',
diff --git a/src/i18n/langs/zhCn/Common.ts b/src/i18n/langs/zhCn/Common.ts
index 52c23293..598d1ca6 100644
--- a/src/i18n/langs/zhCn/Common.ts
+++ b/src/i18n/langs/zhCn/Common.ts
@@ -12,7 +12,9 @@ export default {
         logout: '退出',
         codeMirror: '代码仓库',
         openProject: '开源项目',
-        datacap: 'DataCap'
+        datacap: 'DataCap',
+        page: '页面',
+        page404: '404'
     },
     tip: {
         signInInfo: '输入您的信息以登录您的帐户。',
diff --git a/src/model/Navigation.ts b/src/model/Navigation.ts
index e7659b81..57da4f00 100644
--- a/src/model/Navigation.ts
+++ b/src/model/Navigation.ts
@@ -7,6 +7,7 @@ export interface NavigationModel
     group?: string
     description?: string,
     external?: boolean
+    opened?: boolean
     position?: NavigationPosition
     children?: NavigationModel[]
 }
diff --git a/src/views/layouts/base/components/components/NavigationClosed.vue b/src/views/layouts/base/components/components/NavigationClosed.vue
index a9fae7d1..9b5a1569 100644
--- a/src/views/layouts/base/components/components/NavigationClosed.vue
+++ b/src/views/layouts/base/components/components/NavigationClosed.vue
@@ -1,6 +1,30 @@
 <template>
   <div v-if="navigator?.position === NavigationPosition.LEFT_TOP || navigator?.position === NavigationPosition.LEFT_BOTTOM">
-    <NavigationRouterLink :external="navigator?.external" :link="navigator?.href as string"
+    <Collapsible v-model="navigator.opened" v-if="navigator?.children && navigator.children.length > 0" class="cursor-pointer" @click="navigator.opened = !navigator.opened">
+      <CollapsibleTrigger as-child>
+        <Button as="a" size="sm" class="flex items-center justify-between text-wrap rounded-none h-10 w-full border-l border-l-slate-500 px-2"
+                :variant="$route.path === `${navigator?.href}` ? 'secondary' : 'ghost'">
+          <div class="flex items-center">
+            <component :is="navigator?.icon"/>
+            <div class="ml-2">{{ $t(navigator?.title as string) }}</div>
+            <div v-if="navigator?.label" class="ml-2 rounded-lg bg-primary px-2 mt-0.5 text-[0.625rem] text-primary-foreground">{{ navigator?.label }}</div>
+          </div>
+          <ChevronDown :class="`${navigator?.opened ? 'rotate-180' : 'rotate-0'}`"/>
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent class="space-y-2">
+        <NavigationRouterLink v-for="item in navigator?.children" :external="item?.external" :link="item?.href as string"
+                              :class="`my-1 ml-8 ${item?.position === NavigationPosition.LEFT_BOTTOM ? 'absolute bottom-0 left-0 right-0' : ''}`">
+          <Button as="a" size="sm" class="justify-start text-wrap rounded-none h-10 w-full border-l border-l-slate-500 px-2"
+                  :variant="$route.path === `${item?.href}` ? 'secondary' : 'ghost'">
+            <component :is="item?.icon"/>
+            <div class="ml-2">{{ $t(item?.title as string) }}</div>
+            <div v-if="item?.label" class="ml-2 rounded-lg bg-primary px-2 mt-0.5 text-[0.625rem] text-primary-foreground">{{ item?.label }}</div>
+          </Button>
+        </NavigationRouterLink>
+      </CollapsibleContent>
+    </Collapsible>
+    <NavigationRouterLink v-else :external="navigator?.external" :link="navigator?.href as string"
                           :class="`${navigator?.position === NavigationPosition.LEFT_BOTTOM ? 'absolute bottom-0 left-0 right-0' : ''}`">
       <Button as="a" size="sm" class="justify-start text-wrap rounded-none h-10 w-full border-l border-l-slate-500 px-2"
               :variant="$route.path === `${navigator?.href}` ? 'secondary' : 'ghost'">
@@ -17,6 +41,8 @@ import { defineComponent } from 'vue'
 import { Button } from '@/components/ui/button'
 import { NavigationModel, NavigationPosition } from '@/model/Navigation'
 import NavigationRouterLink from '@/views/layouts/base/components/components/NavigationRouterLink.vue'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { ChevronDown } from 'lucide-vue-next'
 
 export default defineComponent({
   name: 'NavigationClosed',
@@ -26,7 +52,12 @@ export default defineComponent({
       return NavigationPosition
     }
   },
-  components: {NavigationRouterLink, Button},
+  components: {
+    Collapsible, CollapsibleTrigger, CollapsibleContent,
+    NavigationRouterLink,
+    Button,
+    ChevronDown
+  },
   props: {
     navigator: {
       type: Object as () => NavigationModel
diff --git a/src/views/layouts/base/components/components/NavigationOpened.vue b/src/views/layouts/base/components/components/NavigationOpened.vue
index 6fbdf17e..080023f2 100644
--- a/src/views/layouts/base/components/components/NavigationOpened.vue
+++ b/src/views/layouts/base/components/components/NavigationOpened.vue
@@ -1,6 +1,30 @@
 <template>
   <div v-if="navigator?.position === NavigationPosition.LEFT_TOP || navigator?.position === NavigationPosition.LEFT_BOTTOM">
-    <NavigationRouterLink :external="navigator?.external" :link="navigator?.href as string"
+    <DropdownMenu v-if="navigator?.children && navigator.children.length > 0">
+      <DropdownMenuTrigger class="cursor-pointer" as-child>
+        <Button as="a" size="icon" class="h-12 w-12" :variant="$route.path === `${navigator?.href}` ? 'secondary' : 'ghost'">
+          <component :is="navigator?.icon"/>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side='right' align='start'>
+        <DropdownMenuLabel>
+          {{ $t(navigator?.title as string) }}
+          <span v-if="navigator?.label" class="ml-auto text-muted-foreground">({{ navigator?.label }})</span>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator/>
+        <DropdownMenuItem v-for="item in navigator?.children" class="cursor-pointer">
+          <NavigationRouterLink :external="item?.external" :link="item?.href as string">
+            <Button as="a" size="sm" class="justify-start text-wrap rounded-none w-full"
+                    :variant="$route.path === `${item?.href}` ? 'secondary' : 'ghost'">
+              <component :is="item?.icon"/>
+              <div class="ml-2 max-w-52 text-wrap">{{ $t(item?.title as string) }}</div>
+              <div v-if="item?.label" class="ml-2 rounded-lg bg-primary px-2 mt-0.5 text-[0.625rem] text-primary-foreground">{{ item?.label }}</div>
+            </Button>
+          </NavigationRouterLink>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+    <NavigationRouterLink v-else :external="navigator?.external" :link="navigator?.href as string"
                           :class="`${navigator?.position === NavigationPosition.LEFT_BOTTOM ? 'absolute bottom-0 left-0 right-0' : ''}`">
       <TooltipProvider>
         <Tooltip :delay-duration="0">
@@ -26,6 +50,20 @@ import { Button } from '@/components/ui/button'
 import { NavigationModel, NavigationPosition } from '@/model/Navigation'
 import { ChevronsLeft } from 'lucide-vue-next'
 import NavigationRouterLink from '@/views/layouts/base/components/components/NavigationRouterLink.vue'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
 
 export default defineComponent({
   name: 'NavigationOpened',
@@ -39,7 +77,19 @@ export default defineComponent({
     NavigationRouterLink,
     ChevronsLeft,
     Button,
-    Tooltip, TooltipContent, TooltipProvider, TooltipTrigger
+    Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger
   },
   props: {
     navigator: {
diff --git a/src/views/layouts/base/components/components/NavigationRouterLink.vue b/src/views/layouts/base/components/components/NavigationRouterLink.vue
index 3098149d..649db3ab 100644
--- a/src/views/layouts/base/components/components/NavigationRouterLink.vue
+++ b/src/views/layouts/base/components/components/NavigationRouterLink.vue
@@ -1,8 +1,8 @@
 <template>
-  <a v-if="external" :href="link" target="_blank">
+  <a v-if="external" :href="link as string" target="_blank">
     <slot></slot>
   </a>
-  <RouterLink v-else :to="link">
+  <RouterLink v-else :to="link as string">
     <slot></slot>
   </RouterLink>
 </template>