add: nested route view

Signed-off-by: Kaifuny <superbiger.github@gmail.com>

contact-frontend/packages/modules/models/src/routes.ts

@@ -66,7 +66,11 @@ export enum ROUTE_NAME {
   SYSTEM_INFO_INDEX = 'SYSTEM_INFO_INDEX', // 系统信息
   SYSTEM_SOURCE_INDEX = 'SYSTEM_SOURCE_INDEX', // 源数据
   SYSTEM_NOTIFICATION_INDEX = 'SYSTEM_NOTIFICATION_INDEX', // 通知
-  SYSTEM_SOCIAL_INDEX = 'SYSTEM_SOCIAL_INDEX', // 三方登录
+  SYSTEM_AUTHENTICATOR_INDEX = 'SYSTEM_AUTHENTICATOR_INDEX', // 三方登录
+  SYSTEM_AUTHENTICATOR_USERS_INDEX = 'SYSTEM_AUTHENTICATOR_USERS_INDEX', // 三方登录 - 用户管理
+  SYSTEM_AUTHENTICATOR_METHODS_INDEX = 'SYSTEM_AUTHENTICATOR_METHODS_INDEX', // 三方登录 - 登录方式
+  SYSTEM_AUTHENTICATOR_TEMPLATE_INDEX = 'SYSTEM_AUTHENTICATOR_TEMPLATE_INDEX', // 三方登录 - 模板管理
+  SYSTEM_AUTHENTICATOR_SETTING_INDEX = 'SYSTEM_AUTHENTICATOR_SETTING_INDEX', // 三方登录 - 设置
   SYSTEM_OSS_INDEX = 'SYSTEM_OSS_INDEX', // OSS
   SYSTEM_CDN_INDEX = 'SYSTEM_CDN_INDEX', // CDN
   SYSTEM_GPT_INDEX = 'SYSTEM_GPT_INDEX', // GPT

contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue

@@ -8,7 +8,7 @@ import { routesToMenus } from '@cskefu/shared-utils'
 
 import routes from '../routes'
 
-const menuOptions: MenuOption[] = routesToMenus(routes)
+const menuOptions: MenuOption[] = routesToMenus(routes, false, false)
 const collapsed = ref<boolean>(false)
 </script>
 <template>

contact-frontend/packages/modules/services/system/src/routes/index.ts

@@ -20,7 +20,7 @@ const routes: RouteRecordRaw[] = [
     path: '/system',
     name: ROUTE_NAME.SYSTEM_INDEX,
     component: Layout,
-    redirect: '/system/index',
+    redirect: { name: ROUTE_NAME.SYSTEM_INFO_INDEX },
     children: [
       {
         path: 'index',
@@ -33,14 +33,47 @@ const routes: RouteRecordRaw[] = [
         },
       },
       {
-        path: 'social',
+        path: 'authenticator',
-        name: ROUTE_NAME.SYSTEM_SOCIAL_INDEX,
+        name: ROUTE_NAME.SYSTEM_AUTHENTICATOR_INDEX,
         component: () => import('../views/AuthenticatorView.vue'),
         meta: {
           title: '认证登录',
           requiresAuth: true,
           icon: IdCardOutline,
         },
+        redirect: { name: ROUTE_NAME.SYSTEM_AUTHENTICATOR_USERS_INDEX },
+        children: [
+          {
+            path: 'users',
+            name: ROUTE_NAME.SYSTEM_AUTHENTICATOR_USERS_INDEX,
+            component: () =>
+              import('../views/pages/authenticator/AuthenticatorUsersView.vue'),
+          },
+          {
+            path: 'methods',
+            name: ROUTE_NAME.SYSTEM_AUTHENTICATOR_METHODS_INDEX,
+            component: () =>
+              import(
+                '../views/pages/authenticator/AuthenticatorMethodsView.vue'
+              ),
+          },
+          {
+            path: 'template',
+            name: ROUTE_NAME.SYSTEM_AUTHENTICATOR_TEMPLATE_INDEX,
+            component: () =>
+              import(
+                '../views/pages/authenticator/AuthenticatorTemplateView.vue'
+              ),
+          },
+          {
+            path: 'setting',
+            name: ROUTE_NAME.SYSTEM_AUTHENTICATOR_SETTING_INDEX,
+            component: () =>
+              import(
+                '../views/pages/authenticator/AuthenticatorSettingView.vue'
+              ),
+          },
+        ],
       },
       {
         path: 'oss',

contact-frontend/packages/modules/services/system/src/views/AuthenticatorView.vue

@@ -1,13 +1,30 @@
 <script setup lang="ts">
+import { ROUTE_NAME } from '@cskefu/models'
 import { NTabs, NTab } from 'naive-ui'
 </script>
 <template>
   <div class="p-4">
-    <n-tabs type="line" :bar-width="32">
+    <n-tabs
-      <n-tab name="users"> 用户 </n-tab>
+      type="line"
-      <n-tab name="social"> 登录提供方 </n-tab>
+      :bar-width="32"
-      <n-tab name="template"> 模板 </n-tab>
+      :on-update:value="
-      <n-tab name="setting"> 设置 </n-tab>
+        (value) => {
+          $router.push({
+            name: value as ROUTE_NAME,
+          })
+        }
+      "
+    >
+      <n-tab :name="ROUTE_NAME.SYSTEM_AUTHENTICATOR_USERS_INDEX"> 用户 </n-tab>
+      <n-tab :name="ROUTE_NAME.SYSTEM_AUTHENTICATOR_METHODS_INDEX">
+        登录提供方
+      </n-tab>
+      <n-tab :name="ROUTE_NAME.SYSTEM_AUTHENTICATOR_TEMPLATE_INDEX">
+        模板
+      </n-tab>
+      <n-tab :name="ROUTE_NAME.SYSTEM_AUTHENTICATOR_SETTING_INDEX">
+        设置
+      </n-tab>
     </n-tabs>
     <div>
       <router-view></router-view>

contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorMethodsView.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>methods</div>
+</template>

contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorSettingView.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>setting</div>
+</template>

contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorTemplateView.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>template</div>
+</template>

contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorUsersView.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>users</div>
+</template>

contact-frontend/packages/shared/utils/src/routes.ts

@@ -10,13 +10,14 @@ function renderIcon(icon?: Component) {
 
 export function routesToMenus(
   routes: RouteRecordRaw[],
-  isNotRoot?: boolean
+  isNotRoot?: boolean,
+  deep?: boolean
 ): MenuOption[] {
   const result: MenuOption[] = []
   const array = isNotRoot ? routes : routes[0].children
   if (array) {
     array.forEach((route: RouteRecordRaw) => {
-      if (route.children) {
+      if (route.children && deep) {
         result.push({
           label: h(
             RouterLink,