[Page] [Layout] Support navigation external link

devlive-community · Mar 24, 2024 · c32e27b · c32e27b
1 parent aed0087
commit c32e27b
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 29 deletions.
diff --git a/src/data/Navigation.ts b/src/data/Navigation.ts
@@ -1,7 +1,6 @@
 import { NavigationModel, NavigationPosition } from '@/model/Navigation'
 import NavigationService from '@/services/Navigation'
 import { Home, LogIn, LogOut } from 'lucide-vue-next'
-import { cloneDeep } from 'lodash'
 
 const createNavigation = (): void => {
     NavigationService.addNavigation(createNavigationItem('common.common.home', undefined, '/home', Home, NavigationPosition.LEFT_TOP))
@@ -17,24 +16,27 @@ const createNavigation = (): void => {
         [],
         'common.common.home',
         undefined))
-    const newSignIn = cloneDeep(signIn)
-    newSignIn.position = NavigationPosition.TOP
-    newSignIn.description = 'user.tip.signIn'
-    const newSignUp = cloneDeep(signUp)
-    newSignUp.position = NavigationPosition.TOP
-    newSignUp.description = 'user.tip.signUp'
-    const children = [newSignIn, newSignUp]
-    NavigationService.addNavigation(createNavigationItem('common.common.home',
+
+    const datacap = createNavigationItem('common.common.datacap',
         undefined,
-        '/home',
+        'https://datacap.edurt.io',
         undefined,
         NavigationPosition.TOP,
-        children,
-        'common.common.home',
-        undefined))
+        undefined
+        , undefined,
+        'common.tip.datacap',
+        true)
+    const openProject = createNavigationItem('common.common.openProject',
+        undefined,
+        '/open-project',
+        undefined,
+        NavigationPosition.TOP,
+        [datacap],
+        'common.common.openProject')
+    NavigationService.addNavigation(openProject)
 }
 
-const createNavigationItem = (title?: string, label?: string, href?: string, icon?: any, position?: NavigationPosition, children?: NavigationModel[], group?: string, description?: string): NavigationModel => {
+const createNavigationItem = (title?: string, label?: string, href?: string, icon?: any, position?: NavigationPosition, children?: NavigationModel[], group?: string, description?: string, blank?: boolean): NavigationModel => {
     return {
         title: title,
         label: label,
@@ -43,7 +45,8 @@ const createNavigationItem = (title?: string, label?: string, href?: string, ico
         position: position,
         group: group,
         description: description,
-        children: children
+        children: children,
+        external: blank
     }
 }
 

diff --git a/src/i18n/langs/en/Common.ts b/src/i18n/langs/en/Common.ts
@@ -11,6 +11,8 @@ export default {
         sendEmail: 'Send Email',
         logout: 'Logout',
         codeMirror: 'Code Mirror',
+        openProject: 'Open Project',
+        datacap: 'DataCap'
     },
     tip: {
         signInInfo: 'Enter your information to sign in to your account.',
@@ -19,6 +21,7 @@ export default {
         signUpInfo: 'Enter your information to create an account.',
         signUpHasAccount: 'Already have an account?',
         forgotPasswordInfo: 'Enter your registered email and we will send you a link to reset your password.',
-        inputAnyInfo: 'Enter your username and password at will'
+        inputAnyInfo: 'Enter your username and password at will',
+        datacap: 'DataCap is integrated software for data transformation, integration, and visualization. Support a variety of data sources, file types, big data related database, relational database, NoSQL database, etc. Through the software can realize the management of multiple data sources, the data under the source of various operations conversion, making data charts, monitoring data sources and other functions.'
     }
 }
diff --git a/src/i18n/langs/zhCn/Common.ts b/src/i18n/langs/zhCn/Common.ts
@@ -10,7 +10,9 @@ export default {
         forgotPassword: '忘记密码',
         sendEmail: '发送邮件',
         logout: '退出',
-        codeMirror: '代码仓库'
+        codeMirror: '代码仓库',
+        openProject: '开源项目',
+        datacap: 'DataCap'
     },
     tip: {
         signInInfo: '输入您的信息以登录您的帐户。',
@@ -19,6 +21,7 @@ export default {
         signUpInfo: '输入您的信息以创建账号。',
         signUpHasAccount: '已有账号？',
         forgotPasswordInfo: '输入您注册的邮箱以获取重置密码的链接。',
-        inputAnyInfo: '输入任何信息即可'
+        inputAnyInfo: '输入任何信息即可',
+        datacap: 'DataCap 是数据转换、集成和可视化的集成软件。支持多种数据源，文件类型，大数据相关数据库，关系型数据库，NoSQL 数据库等。通过软件可以实现管理多种数据源，对该源下的数据进行各种操作转换，制作数据图表，监控数据源等各种功能。'
     }
 }
diff --git a/src/model/Navigation.ts b/src/model/Navigation.ts
@@ -5,7 +5,8 @@ export interface NavigationModel
     href?: string
     icon?: any
     group?: string
-    description?: string
+    description?: string,
+    external?: boolean
     position?: NavigationPosition
     children?: NavigationModel[]
 }

diff --git a/src/views/layouts/base/components/components/LanguageSwitcher.vue b/src/views/layouts/base/components/components/LanguageSwitcher.vue
@@ -6,9 +6,9 @@
     <SelectContent>
       <SelectGroup>
         <SelectLabel>{{ $t('region.common.asia.default') }}</SelectLabel>
-        <SelectItem class="pl-6" value="language_zh_cn">{{ $t('region.common.asia.chineseSimple') }}</SelectItem>
+        <SelectItem class="pl-6 cursor-pointer" value="language_zh_cn">{{ $t('region.common.asia.chineseSimple') }}</SelectItem>
         <SelectLabel>{{ $t('region.common.northAmerica.default') }}</SelectLabel>
-        <SelectItem class="pl-6" value="language_en">{{ $t('region.common.northAmerica.english') }}</SelectItem>
+        <SelectItem class="pl-6 cursor-pointer" value="language_en">{{ $t('region.common.northAmerica.english') }}</SelectItem>
       </SelectGroup>
     </SelectContent>
   </Select>

diff --git a/src/views/layouts/base/components/components/NavigationClosed.vue b/src/views/layouts/base/components/components/NavigationClosed.vue
@@ -1,20 +1,22 @@
 <template>
   <div v-if="navigator?.position === NavigationPosition.LEFT_TOP || navigator?.position === NavigationPosition.LEFT_BOTTOM">
-    <RouterLink :to="navigator?.href as string" :class="`${navigator?.position === NavigationPosition.LEFT_BOTTOM ? 'absolute bottom-0 left-0 right-0' : ''}`">
+    <NavigationRouterLink :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'">
         <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>
       </Button>
-    </RouterLink>
+    </NavigationRouterLink>
   </div>
 </template>
 
 <script lang="ts">
 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'
 
 export default defineComponent({
   name: 'NavigationClosed',
@@ -24,7 +26,7 @@ export default defineComponent({
       return NavigationPosition
     }
   },
-  components: {Button},
+  components: {NavigationRouterLink, Button},
   props: {
     navigator: {
       type: Object as () => NavigationModel

diff --git a/src/views/layouts/base/components/components/NavigationItem.vue b/src/views/layouts/base/components/components/NavigationItem.vue
@@ -1,15 +1,15 @@
 <template>
   <li v-if="navigator?.position === NavigationPosition.TOP">
     <NavigationMenuLink as-child>
-      <RouterLink :to="navigator?.href as string"
-                  :class="cn('block select-none space-y-1 rounded-md leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+      <NavigationRouterLink :external="navigator?.external" :link="navigator?.href as string"
+                            :class="cn('block select-none space-y-1 rounded-md leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
                               'pl-5 pr-5 pt-3 pb-2',
                               $route.path === `${navigator?.href}` && 'bg-muted hover:bg-muted')">
         <div class="text-sm font-medium leading-none">{{ $t(navigator?.title as string) }}</div>
         <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
           <slot/>
         </p>
-      </RouterLink>
+      </NavigationRouterLink>
     </NavigationMenuLink>
   </li>
 </template>
@@ -20,10 +20,12 @@ import { cn } from '@/lib/utils'
 import { NavigationModel, NavigationPosition } from '@/model/Navigation'
 import { Button } from '@/components/ui/button'
 import { NavigationMenuLink } from '@/components/ui/navigation-menu'
+import NavigationRouterLink from '@/views/layouts/base/components/components/NavigationRouterLink.vue'
 
 export default defineComponent({
   name: 'NavigationItem',
   components: {
+    NavigationRouterLink,
     NavigationMenuLink,
     Button
   },

diff --git a/src/views/layouts/base/components/components/NavigationOpened.vue b/src/views/layouts/base/components/components/NavigationOpened.vue
@@ -1,6 +1,7 @@
 <template>
   <div v-if="navigator?.position === NavigationPosition.LEFT_TOP || navigator?.position === NavigationPosition.LEFT_BOTTOM">
-    <RouterLink :to="navigator?.href as string" :class="`${navigator?.position === NavigationPosition.LEFT_BOTTOM ? 'absolute bottom-0 left-0 right-0' : ''}`">
+    <NavigationRouterLink :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">
           <TooltipTrigger asChild>
@@ -14,7 +15,7 @@
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
-    </RouterLink>
+    </NavigationRouterLink>
   </div>
 </template>
 
@@ -24,6 +25,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 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'
 
 export default defineComponent({
   name: 'NavigationOpened',
@@ -34,6 +36,7 @@ export default defineComponent({
     }
   },
   components: {
+    NavigationRouterLink,
     ChevronsLeft,
     Button,
     Tooltip, TooltipContent, TooltipProvider, TooltipTrigger

diff --git a/src/views/layouts/base/components/components/NavigationRouterLink.vue b/src/views/layouts/base/components/components/NavigationRouterLink.vue
@@ -0,0 +1,24 @@
+<template>
+  <a v-if="external" :href="link" target="_blank">
+    <slot></slot>
+  </a>
+  <RouterLink v-else :to="link">
+    <slot></slot>
+  </RouterLink>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'NavigationRouterLink',
+  props: {
+    external: {
+      type: Boolean
+    },
+    link: {
+      type: String
+    }
+  }
+})
+</script>