From ba7447fa323e1bd4a4a30a1ce4ce2c616388faf6 Mon Sep 17 00:00:00 2001
From: Kaifuny <superbiger.github@gmail.com>
Date: Wed, 9 Aug 2023 09:28:04 +0800
Subject: [PATCH] add: nested route view

Signed-off-by: Kaifuny <superbiger.github@gmail.com>
---
 .../packages/modules/models/src/routes.ts     |  6 ++-
 .../system/src/layouts/MenusLayout.vue        |  2 +-
 .../services/system/src/routes/index.ts       | 39 +++++++++++++++++--
 .../system/src/views/AuthenticatorView.vue    | 27 ++++++++++---
 .../AuthenticatorMethodsView.vue              |  3 ++
 .../AuthenticatorSettingView.vue              |  3 ++
 .../AuthenticatorTemplateView.vue             |  3 ++
 .../authenticator/AuthenticatorUsersView.vue  |  3 ++
 .../packages/shared/utils/src/routes.ts       |  5 ++-
 9 files changed, 79 insertions(+), 12 deletions(-)
 create mode 100644 contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorMethodsView.vue
 create mode 100644 contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorSettingView.vue
 create mode 100644 contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorTemplateView.vue
 create mode 100644 contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorUsersView.vue

diff --git a/contact-frontend/packages/modules/models/src/routes.ts b/contact-frontend/packages/modules/models/src/routes.ts
index d664f7ea..361d4679 100644
--- a/contact-frontend/packages/modules/models/src/routes.ts
+++ b/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
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 46371a34..bec4ab7c 100644
--- a/contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue
+++ b/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>
diff --git a/contact-frontend/packages/modules/services/system/src/routes/index.ts b/contact-frontend/packages/modules/services/system/src/routes/index.ts
index 31bd773f..58882da1 100644
--- a/contact-frontend/packages/modules/services/system/src/routes/index.ts
+++ b/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',
-        name: ROUTE_NAME.SYSTEM_SOCIAL_INDEX,
+        path: 'authenticator',
+        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',
diff --git a/contact-frontend/packages/modules/services/system/src/views/AuthenticatorView.vue b/contact-frontend/packages/modules/services/system/src/views/AuthenticatorView.vue
index 442e076d..1deed1e7 100644
--- a/contact-frontend/packages/modules/services/system/src/views/AuthenticatorView.vue
+++ b/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-tab name="users"> 用户 </n-tab>
-      <n-tab name="social"> 登录提供方 </n-tab>
-      <n-tab name="template"> 模板 </n-tab>
-      <n-tab name="setting"> 设置 </n-tab>
+    <n-tabs
+      type="line"
+      :bar-width="32"
+      :on-update:value="
+        (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>
diff --git a/contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorMethodsView.vue b/contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorMethodsView.vue
new file mode 100644
index 00000000..f94fad80
--- /dev/null
+++ b/contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorMethodsView.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>methods</div>
+</template>
diff --git a/contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorSettingView.vue b/contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorSettingView.vue
new file mode 100644
index 00000000..d95ecca4
--- /dev/null
+++ b/contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorSettingView.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>setting</div>
+</template>
diff --git a/contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorTemplateView.vue b/contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorTemplateView.vue
new file mode 100644
index 00000000..d9ebc257
--- /dev/null
+++ b/contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorTemplateView.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>template</div>
+</template>
diff --git a/contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorUsersView.vue b/contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorUsersView.vue
new file mode 100644
index 00000000..f96959cc
--- /dev/null
+++ b/contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorUsersView.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>users</div>
+</template>
diff --git a/contact-frontend/packages/shared/utils/src/routes.ts b/contact-frontend/packages/shared/utils/src/routes.ts
index e1cade98..b4dae4b0 100644
--- a/contact-frontend/packages/shared/utils/src/routes.ts
+++ b/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,