github/cosin
1
0
Fork 0
mirror of https://github.com/chatopera/cosin.git synced 2025-08-01 16:38:02 +08:00
Code Issues Releases Wiki Activity

add: nested route view

Browse Source 
Signed-off-by: Kaifuny <superbiger.github@gmail.com>
This commit is contained in:
Kaifuny 2023-08-09 09:28:04 +08:00
parent eb873f0482
commit ba7447fa32
9 changed files with 79 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
contact-frontend/packages/modules/models/src/routes.ts
View File

@ -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

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

@ -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>

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

@ -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',

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

@ -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>

3
contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorMethodsView.vue Normal file
View File

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

3
contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorSettingView.vue Normal file
View File

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

3
contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorTemplateView.vue Normal file
View File

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

3
contact-frontend/packages/modules/services/system/src/views/pages/authenticator/AuthenticatorUsersView.vue Normal file
View File

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

5
contact-frontend/packages/shared/utils/src/routes.ts
View File

@ -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,