From 1710ca21e6bc2088f16b3185bd9a2d4c5af8c773 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=80=E4=B8=83=E5=B9=B4=E5=A4=8F?= <2098833867@qq.com> Date: Sun, 25 Jun 2023 17:19:33 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E7=BA=A7Layout=E4=B8=8E=E9=9A=90?= =?UTF-8?q?=E8=97=8F=E8=B7=AF=E7=94=B1=EF=BC=8C=E4=B8=AA=E4=BA=BA=E4=B8=AD?= =?UTF-8?q?=E5=BF=83Layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/use-permission.ts | 2 +- src/layout/UserProfileLayout.vue | 8 ++ .../{ => default}/app-main/Breadcrumb.vue | 0 .../{ => default}/app-main/Hamburger.vue | 0 src/layout/{ => default}/app-main/Navbar.vue | 2 +- .../{ => default}/app-main/TagsView.vue | 0 .../app-main/component/Debugger.vue | 0 .../app-main/component/LangSelect.vue | 0 .../app-main/component/ScreenFull.vue | 0 .../app-main/component/ScreenLock.vue | 0 .../app-main/component/SizeSelect.vue | 0 .../app-main/component/ThemeSelect.vue | 0 src/layout/{ => default}/app-main/index.vue | 0 src/layout/{ => default}/index.vue | 0 src/layout/{ => default}/sidebar/Link.vue | 0 src/layout/{ => default}/sidebar/Logo.vue | 0 .../{ => default}/sidebar/SidebarItem.vue | 2 +- src/layout/{ => default}/sidebar/index.vue | 0 src/layout/submenu/index.vue | 84 +++++++++++++++++++ src/layout/submenu/sidebar/index.vue | 67 +++++++++++++++ src/router/index.ts | 17 +--- src/router/modules/basic-demo.ts | 2 +- src/router/modules/charts.ts | 2 +- src/router/modules/directive.ts | 2 +- src/router/modules/excel.ts | 2 +- src/router/modules/guid.ts | 2 +- src/router/modules/other.ts | 2 +- src/router/modules/rich-text.ts | 2 +- src/router/modules/table.ts | 2 +- src/router/modules/user.ts | 17 ++++ typings/basic.d.ts | 67 +++++++++------ 31 files changed, 233 insertions(+), 49 deletions(-) create mode 100644 src/layout/UserProfileLayout.vue rename src/layout/{ => default}/app-main/Breadcrumb.vue (100%) rename src/layout/{ => default}/app-main/Hamburger.vue (100%) rename src/layout/{ => default}/app-main/Navbar.vue (98%) rename src/layout/{ => default}/app-main/TagsView.vue (100%) rename src/layout/{ => default}/app-main/component/Debugger.vue (100%) rename src/layout/{ => default}/app-main/component/LangSelect.vue (100%) rename src/layout/{ => default}/app-main/component/ScreenFull.vue (100%) rename src/layout/{ => default}/app-main/component/ScreenLock.vue (100%) rename src/layout/{ => default}/app-main/component/SizeSelect.vue (100%) rename src/layout/{ => default}/app-main/component/ThemeSelect.vue (100%) rename src/layout/{ => default}/app-main/index.vue (100%) rename src/layout/{ => default}/index.vue (100%) rename src/layout/{ => default}/sidebar/Link.vue (100%) rename src/layout/{ => default}/sidebar/Logo.vue (100%) rename src/layout/{ => default}/sidebar/SidebarItem.vue (97%) rename src/layout/{ => default}/sidebar/index.vue (100%) create mode 100644 src/layout/submenu/index.vue create mode 100644 src/layout/submenu/sidebar/index.vue create mode 100644 src/router/modules/user.ts diff --git a/src/hooks/use-permission.ts b/src/hooks/use-permission.ts index 7989d25..4e07779 100644 --- a/src/hooks/use-permission.ts +++ b/src/hooks/use-permission.ts @@ -1,6 +1,6 @@ import NProgress from 'nprogress' import type { RouteRecordName } from 'vue-router' -import Layout from '@/layout/index.vue' +import Layout from '@/layout/default/index.vue' import router, { asyncRoutes, constantRoutes } from '@/router' import 'nprogress/nprogress.css' import { useBasicStore } from '@/store/basic' diff --git a/src/layout/UserProfileLayout.vue b/src/layout/UserProfileLayout.vue new file mode 100644 index 0000000..0317c9b --- /dev/null +++ b/src/layout/UserProfileLayout.vue @@ -0,0 +1,8 @@ + + + diff --git a/src/layout/app-main/Breadcrumb.vue b/src/layout/default/app-main/Breadcrumb.vue similarity index 100% rename from src/layout/app-main/Breadcrumb.vue rename to src/layout/default/app-main/Breadcrumb.vue diff --git a/src/layout/app-main/Hamburger.vue b/src/layout/default/app-main/Hamburger.vue similarity index 100% rename from src/layout/app-main/Hamburger.vue rename to src/layout/default/app-main/Hamburger.vue diff --git a/src/layout/app-main/Navbar.vue b/src/layout/default/app-main/Navbar.vue similarity index 98% rename from src/layout/app-main/Navbar.vue rename to src/layout/default/app-main/Navbar.vue index 6b87f05..72866b1 100644 --- a/src/layout/app-main/Navbar.vue +++ b/src/layout/default/app-main/Navbar.vue @@ -70,7 +70,7 @@ import { elMessage } from "@/hooks/use-element"; import { useBasicStore } from "@/store/basic"; import { langTitle } from "@/hooks/use-common"; import userImage from "@/assets/layout/user.png"; -import Debugger from "@/layout/app-main/component/Debugger.vue"; +import Debugger from "@/layout/default/app-main/component/Debugger.vue"; const basicStore = useBasicStore(); const { settings, sidebar, setToggleSideBar, userInfo } = basicStore; diff --git a/src/layout/app-main/TagsView.vue b/src/layout/default/app-main/TagsView.vue similarity index 100% rename from src/layout/app-main/TagsView.vue rename to src/layout/default/app-main/TagsView.vue diff --git a/src/layout/app-main/component/Debugger.vue b/src/layout/default/app-main/component/Debugger.vue similarity index 100% rename from src/layout/app-main/component/Debugger.vue rename to src/layout/default/app-main/component/Debugger.vue diff --git a/src/layout/app-main/component/LangSelect.vue b/src/layout/default/app-main/component/LangSelect.vue similarity index 100% rename from src/layout/app-main/component/LangSelect.vue rename to src/layout/default/app-main/component/LangSelect.vue diff --git a/src/layout/app-main/component/ScreenFull.vue b/src/layout/default/app-main/component/ScreenFull.vue similarity index 100% rename from src/layout/app-main/component/ScreenFull.vue rename to src/layout/default/app-main/component/ScreenFull.vue diff --git a/src/layout/app-main/component/ScreenLock.vue b/src/layout/default/app-main/component/ScreenLock.vue similarity index 100% rename from src/layout/app-main/component/ScreenLock.vue rename to src/layout/default/app-main/component/ScreenLock.vue diff --git a/src/layout/app-main/component/SizeSelect.vue b/src/layout/default/app-main/component/SizeSelect.vue similarity index 100% rename from src/layout/app-main/component/SizeSelect.vue rename to src/layout/default/app-main/component/SizeSelect.vue diff --git a/src/layout/app-main/component/ThemeSelect.vue b/src/layout/default/app-main/component/ThemeSelect.vue similarity index 100% rename from src/layout/app-main/component/ThemeSelect.vue rename to src/layout/default/app-main/component/ThemeSelect.vue diff --git a/src/layout/app-main/index.vue b/src/layout/default/app-main/index.vue similarity index 100% rename from src/layout/app-main/index.vue rename to src/layout/default/app-main/index.vue diff --git a/src/layout/index.vue b/src/layout/default/index.vue similarity index 100% rename from src/layout/index.vue rename to src/layout/default/index.vue diff --git a/src/layout/sidebar/Link.vue b/src/layout/default/sidebar/Link.vue similarity index 100% rename from src/layout/sidebar/Link.vue rename to src/layout/default/sidebar/Link.vue diff --git a/src/layout/sidebar/Logo.vue b/src/layout/default/sidebar/Logo.vue similarity index 100% rename from src/layout/sidebar/Logo.vue rename to src/layout/default/sidebar/Logo.vue diff --git a/src/layout/sidebar/SidebarItem.vue b/src/layout/default/sidebar/SidebarItem.vue similarity index 97% rename from src/layout/sidebar/SidebarItem.vue rename to src/layout/default/sidebar/SidebarItem.vue index c32a250..26eb5be 100644 --- a/src/layout/sidebar/SidebarItem.vue +++ b/src/layout/default/sidebar/SidebarItem.vue @@ -28,7 +28,7 @@ import { ref } from 'vue' import { resolve } from 'path-browserify' import Link from './Link.vue' -import MenuIcon from '../../components/MenuIcon.vue' +import MenuIcon from '../../../components/MenuIcon.vue' import type { RouteRawConfig } from '~/basic' import { isExternal } from '@/hooks/use-layout' import { langTitle } from '@/hooks/use-common' diff --git a/src/layout/sidebar/index.vue b/src/layout/default/sidebar/index.vue similarity index 100% rename from src/layout/sidebar/index.vue rename to src/layout/default/sidebar/index.vue diff --git a/src/layout/submenu/index.vue b/src/layout/submenu/index.vue new file mode 100644 index 0000000..d99a094 --- /dev/null +++ b/src/layout/submenu/index.vue @@ -0,0 +1,84 @@ + + + + diff --git a/src/layout/submenu/sidebar/index.vue b/src/layout/submenu/sidebar/index.vue new file mode 100644 index 0000000..a88a910 --- /dev/null +++ b/src/layout/submenu/sidebar/index.vue @@ -0,0 +1,67 @@ + + + + diff --git a/src/router/index.ts b/src/router/index.ts index 89ab940..5834a94 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,7 +1,8 @@ import { createRouter, createWebHistory } from 'vue-router' import type { RouterTypes } from '~/basic' import settings from '@/settings' -const Layout = () => import('@/layout/index.vue') +import { userRoute } from '@/router/modules/user' +const Layout = () => import('@/layout/default/index.vue') export const constantRoutes: RouterTypes = [ { @@ -38,19 +39,7 @@ export const constantRoutes: RouterTypes = [ } ] }, - { - path: '/user', - name: '用户', - component: Layout, - hidden: true, - children: [ - { - path: 'profile', - name: '首选项', - component: () => import('@/views/user/profile/index.vue') - } - ] - } + userRoute ] //角色和code数组动态路由 diff --git a/src/router/modules/basic-demo.ts b/src/router/modules/basic-demo.ts index e93584b..5468595 100644 --- a/src/router/modules/basic-demo.ts +++ b/src/router/modules/basic-demo.ts @@ -1,4 +1,4 @@ -import Layout from '@/layout/index.vue' +import Layout from '@/layout/default/index.vue' const BasicDemo = { path: '/basic-demo', component: Layout, diff --git a/src/router/modules/charts.ts b/src/router/modules/charts.ts index c8841eb..b7a88da 100644 --- a/src/router/modules/charts.ts +++ b/src/router/modules/charts.ts @@ -1,6 +1,6 @@ /** When your routing table is too long, you can split it into small modules**/ -import Layout from '@/layout/index.vue' +import Layout from '@/layout/default/index.vue' const chartsRouter = { path: '/charts', diff --git a/src/router/modules/directive.ts b/src/router/modules/directive.ts index ce26e09..d9d86c0 100644 --- a/src/router/modules/directive.ts +++ b/src/router/modules/directive.ts @@ -1,4 +1,4 @@ -import Layout from '@/layout/index.vue' +import Layout from '@/layout/default/index.vue' const directive = { path: '/directive', diff --git a/src/router/modules/excel.ts b/src/router/modules/excel.ts index d722541..c3ad98c 100644 --- a/src/router/modules/excel.ts +++ b/src/router/modules/excel.ts @@ -1,4 +1,4 @@ -import Layout from '@/layout/index.vue' +import Layout from '@/layout/default/index.vue' const excel = { path: '/excel', component: Layout, diff --git a/src/router/modules/guid.ts b/src/router/modules/guid.ts index 885f0e2..fbe296a 100644 --- a/src/router/modules/guid.ts +++ b/src/router/modules/guid.ts @@ -1,4 +1,4 @@ -import Layout from '@/layout/index.vue' +import Layout from '@/layout/default/index.vue' const guid = { path: '/guide', component: Layout, diff --git a/src/router/modules/other.ts b/src/router/modules/other.ts index 31c708c..1d546f9 100644 --- a/src/router/modules/other.ts +++ b/src/router/modules/other.ts @@ -1,4 +1,4 @@ -import Layout from '@/layout/index.vue' +import Layout from '@/layout/default/index.vue' const other = { path: '/other', component: Layout, diff --git a/src/router/modules/rich-text.ts b/src/router/modules/rich-text.ts index 252e42f..d0a1af2 100644 --- a/src/router/modules/rich-text.ts +++ b/src/router/modules/rich-text.ts @@ -1,4 +1,4 @@ -import Layout from '@/layout/index.vue' +import Layout from '@/layout/default/index.vue' const richText = { path: '/rich-text', component: Layout, diff --git a/src/router/modules/table.ts b/src/router/modules/table.ts index 64b8f8e..77244b3 100644 --- a/src/router/modules/table.ts +++ b/src/router/modules/table.ts @@ -1,4 +1,4 @@ -import Layout from '@/layout/index.vue' +import Layout from '@/layout/default/index.vue' const table = { path: '/table', component: Layout, diff --git a/src/router/modules/user.ts b/src/router/modules/user.ts new file mode 100644 index 0000000..f7568bf --- /dev/null +++ b/src/router/modules/user.ts @@ -0,0 +1,17 @@ +import type { BootstrapIcons, RouteRawConfig } from "~/basic"; + +export const userRoute = { + path: '/user', + name: 'User', + component: () => import('@/layout/UserProfileLayout.vue'), + meta: { title: '用户中心', icon: 'person' as BootstrapIcons }, + hidden: true, + children: [ + { + path: 'profile', + name: 'Profile', + meta: {title: '个人信息', icon: 'text-left' as BootstrapIcons}, + component: () => import('@/views/user/profile/index.vue') + } + ] +} as RouteRawConfig diff --git a/typings/basic.d.ts b/typings/basic.d.ts index d322486..e2d7a6d 100644 --- a/typings/basic.d.ts +++ b/typings/basic.d.ts @@ -11,31 +11,50 @@ /*router*/ import type { RouteRecordRaw } from 'vue-router' -export interface rawConfig { - hidden?: boolean - alwaysShow?: boolean - code?: number - name?: string - fullPath?: string - path?: string - meta?: { - title: string - icon?: string - affix?: boolean - activeMenu?: string - breadcrumb?: boolean - roles?: Array - elSvgIcon?: string - code?: number - cachePage?: boolean - leaveRmCachePage?: boolean - closeTabRmCache?: boolean - } - children?: RouterOptions - redirect?: string + +import type icons from 'bootstrap-icons/font/bootstrap-icons.json' +export type BootstrapIcons = keyof typeof icons; + +export interface RawConfig { + /** 是否隐藏路由 */ + hidden: boolean + /** TODO 不知道。 */ + alwaysShow: boolean + /** TODO 不知道。 */ + code: number + /** 路由名称 */ + name: string + /** 完整路径，一般不填 */ + fullPath: string + /** 路径，可以为相对路径 */ + path: string + /** 元数据，没有元数据时不显示菜单 */ + meta: Omit, 'title'> & Required> + /** 子路由 */ + children: RouterTypes + /** 重定向，绝对路径 */ + redirect: string + /** 是否显示子菜单 */ + expand: boolean } -export type RouteRawConfig = RouteRecordRaw & rawConfig -export type RouterTypes = Array + +export interface RawConfigMeta { + /** 路由标题，显示在菜单按钮上 */ + title: string + /** 路由图标 */ + icon: BootstrapIcons + affix: boolean + activeMenu: string + breadcrumb: boolean + roles: Array + code: number + cachePage: boolean + leaveRmCachePage: boolean + closeTabRmCache: boolean +} + +export type RouteRawConfig = RouteRecordRaw & Partial +export type RouterTypes = Array /*settings*/ export interface SettingsConfig {