-
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/components/Breadcrumb/index.ts b/src/layouts/components/Breadcrumb/index.ts
new file mode 100644
index 0000000..93ffe70
--- /dev/null
+++ b/src/layouts/components/Breadcrumb/index.ts
@@ -0,0 +1,3 @@
+import Breadcrumb from './src/Breadcrumb.vue'
+
+export { Breadcrumb }
diff --git a/src/layouts/components/Breadcrumb/src/Breadcrumb.vue b/src/layouts/components/Breadcrumb/src/Breadcrumb.vue
new file mode 100644
index 0000000..7c36ffd
--- /dev/null
+++ b/src/layouts/components/Breadcrumb/src/Breadcrumb.vue
@@ -0,0 +1,130 @@
+
+
+
diff --git a/src/layouts/components/Breadcrumb/src/helper.ts b/src/layouts/components/Breadcrumb/src/helper.ts
new file mode 100644
index 0000000..fb3ec19
--- /dev/null
+++ b/src/layouts/components/Breadcrumb/src/helper.ts
@@ -0,0 +1,31 @@
+import { pathResolve } from '@/utils/routerHelper'
+import type { RouteMeta } from 'vue-router'
+
+export const filterBreadcrumb = (
+ routes: AppRouteRecordRaw[],
+ parentPath = ''
+): AppRouteRecordRaw[] => {
+ const res: AppRouteRecordRaw[] = []
+
+ for (const route of routes) {
+ const meta = route?.meta as RouteMeta
+ if (meta.hidden && !meta.canTo) {
+ continue
+ }
+
+ const data: AppRouteRecordRaw =
+ !meta.alwaysShow && route.children?.length === 1
+ ? { ...route.children[0], path: pathResolve(route.path, route.children[0].path) }
+ : { ...route }
+
+ data.path = pathResolve(parentPath, data.path)
+
+ if (data.children) {
+ data.children = filterBreadcrumb(data.children, data.path)
+ }
+ if (data) {
+ res.push(data)
+ }
+ }
+ return res
+}
diff --git a/src/layouts/components/Collapse/index.ts b/src/layouts/components/Collapse/index.ts
new file mode 100644
index 0000000..73f65a3
--- /dev/null
+++ b/src/layouts/components/Collapse/index.ts
@@ -0,0 +1,3 @@
+import Collapse from './src/Collapse.vue'
+
+export { Collapse }
diff --git a/src/layouts/components/Collapse/src/Collapse.vue b/src/layouts/components/Collapse/src/Collapse.vue
new file mode 100644
index 0000000..addf5a5
--- /dev/null
+++ b/src/layouts/components/Collapse/src/Collapse.vue
@@ -0,0 +1,36 @@
+
+
+
+
+ tagItem: RouteLocationNormalizedLoaded
+}
+
+export { ContextMenu }
diff --git a/src/layouts/components/ContextMenu/src/ContextMenu.vue b/src/layouts/components/ContextMenu/src/ContextMenu.vue
new file mode 100644
index 0000000..30c0694
--- /dev/null
+++ b/src/layouts/components/ContextMenu/src/ContextMenu.vue
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/components/Footer/index.ts b/src/layouts/components/Footer/index.ts
new file mode 100644
index 0000000..bd052e0
--- /dev/null
+++ b/src/layouts/components/Footer/index.ts
@@ -0,0 +1,3 @@
+import Footer from './src/Footer.vue'
+
+export { Footer }
diff --git a/src/layouts/components/Footer/src/Footer.vue b/src/layouts/components/Footer/src/Footer.vue
new file mode 100644
index 0000000..4923330
--- /dev/null
+++ b/src/layouts/components/Footer/src/Footer.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
diff --git a/src/layouts/components/LocaleDropdown/index.ts b/src/layouts/components/LocaleDropdown/index.ts
new file mode 100644
index 0000000..d02e640
--- /dev/null
+++ b/src/layouts/components/LocaleDropdown/index.ts
@@ -0,0 +1,3 @@
+import LocaleDropdown from './src/LocaleDropdown.vue'
+
+export { LocaleDropdown }
diff --git a/src/layouts/components/LocaleDropdown/src/LocaleDropdown.vue b/src/layouts/components/LocaleDropdown/src/LocaleDropdown.vue
new file mode 100644
index 0000000..10c3bea
--- /dev/null
+++ b/src/layouts/components/LocaleDropdown/src/LocaleDropdown.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+
+
diff --git a/src/layouts/components/Logo/index.ts b/src/layouts/components/Logo/index.ts
new file mode 100644
index 0000000..1c4224c
--- /dev/null
+++ b/src/layouts/components/Logo/index.ts
@@ -0,0 +1,3 @@
+import Logo from './src/Logo.vue'
+
+export { Logo }
diff --git a/src/layouts/components/Logo/src/Logo.vue b/src/layouts/components/Logo/src/Logo.vue
new file mode 100644
index 0000000..092bfd3
--- /dev/null
+++ b/src/layouts/components/Logo/src/Logo.vue
@@ -0,0 +1,88 @@
+
+
+
+ (allRouters, v.path).join('/')
+
+ if (
+ oneShowingChild &&
+ (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
+ !meta?.alwaysShow
+ ) {
+ return (
+
+ {{
+ default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
+ }}
+
+ )
+ } else {
+ return (
+
+ {{
+ title: () => renderMenuTitle(meta),
+ default: () => renderMenuItem(v.children!, fullPath)
+ }}
+
+ )
+ }
+ })
+ }
+
+ return {
+ renderMenuItem
+ }
+ }
diff --git a/src/layouts/components/Menu/src/components/useRenderMenuTitle.tsx b/src/layouts/components/Menu/src/components/useRenderMenuTitle.tsx
new file mode 100644
index 0000000..8941d9d
--- /dev/null
+++ b/src/layouts/components/Menu/src/components/useRenderMenuTitle.tsx
@@ -0,0 +1,27 @@
+import type { RouteMeta } from 'vue-router'
+import { Icon } from '@/components/Icon'
+import { useI18n } from '@/hooks/web/useI18n'
+
+export const useRenderMenuTitle = () => {
+ const renderMenuTitle = (meta: RouteMeta) => {
+ const { t } = useI18n()
+ const { title = 'Please set title', icon } = meta
+
+ return icon ? (
+ <>
+ (treeData: T[], path: string) => {
+ const menuList = findPath(treeData, (n) => n.path === path) as AppRouteRecordRaw[]
+ return (menuList || []).map((item) => item.path)
+}
+
+export const hasOneShowingChild = (
+ children: AppRouteRecordRaw[] = [],
+ parent: AppRouteRecordRaw
+): HasOneShowingChild => {
+ const onlyOneChild = ref()
+
+ const showingChildren = children.filter((v) => {
+ const meta = (v.meta ?? {}) as RouteMeta
+ if (meta.hidden) {
+ return false
+ } else {
+ // Temp set(will be used if only has one showing child)
+ onlyOneChild.value = v
+ return true
+ }
+ })
+
+ // When there is only one child router, the child router is displayed by default
+ if (showingChildren.length === 1) {
+ return {
+ oneShowingChild: true,
+ onlyOneChild: unref(onlyOneChild)
+ }
+ }
+
+ // Show parent if there are no child router to display
+ if (!showingChildren.length) {
+ onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
+ return {
+ oneShowingChild: true,
+ onlyOneChild: unref(onlyOneChild)
+ }
+ }
+
+ return {
+ oneShowingChild: false,
+ onlyOneChild: unref(onlyOneChild)
+ }
+}
diff --git a/src/layouts/components/Screenfull/index.ts b/src/layouts/components/Screenfull/index.ts
new file mode 100644
index 0000000..faec2d8
--- /dev/null
+++ b/src/layouts/components/Screenfull/index.ts
@@ -0,0 +1,3 @@
+import Screenfull from './src/Screenfull.vue'
+
+export { Screenfull }
diff --git a/src/layouts/components/Screenfull/src/Screenfull.vue b/src/layouts/components/Screenfull/src/Screenfull.vue
new file mode 100644
index 0000000..4c045f2
--- /dev/null
+++ b/src/layouts/components/Screenfull/src/Screenfull.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+ {{ t('setting.projectSetting') }}
+
+
+ {{ t('setting.interfaceDisplay') }}
+
+
+
+
diff --git a/src/layouts/components/Setting/src/components/ColorRadioPicker.vue b/src/layouts/components/Setting/src/components/ColorRadioPicker.vue
new file mode 100644
index 0000000..cf79649
--- /dev/null
+++ b/src/layouts/components/Setting/src/components/ColorRadioPicker.vue
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+ {{ t(`size.${item}`) }}
+
+
+
+
+
diff --git a/src/layouts/components/TabMenu/index.ts b/src/layouts/components/TabMenu/index.ts
new file mode 100644
index 0000000..b5fd71c
--- /dev/null
+++ b/src/layouts/components/TabMenu/index.ts
@@ -0,0 +1,3 @@
+import TabMenu from './src/TabMenu.vue'
+
+export { TabMenu }
diff --git a/src/layouts/components/TabMenu/src/TabMenu.vue b/src/layouts/components/TabMenu/src/TabMenu.vue
new file mode 100644
index 0000000..ed67f18
--- /dev/null
+++ b/src/layouts/components/TabMenu/src/TabMenu.vue
@@ -0,0 +1,235 @@
+
+
+
diff --git a/src/layouts/components/TabMenu/src/helper.ts b/src/layouts/components/TabMenu/src/helper.ts
new file mode 100644
index 0000000..0871372
--- /dev/null
+++ b/src/layouts/components/TabMenu/src/helper.ts
@@ -0,0 +1,51 @@
+import { getAllParentPath } from '@/layouts/components/Menu/src/helper'
+import type { RouteMeta } from 'vue-router'
+import { isUrl } from '@/utils/is'
+import { cloneDeep } from 'lodash-es'
+
+export type TabMapTypes = {
+ [key: string]: string[]
+}
+
+export const tabPathMap = reactive({})
+
+export const initTabMap = (routes: AppRouteRecordRaw[]) => {
+ for (const v of routes) {
+ const meta = (v.meta ?? {}) as RouteMeta
+ if (!meta?.hidden) {
+ tabPathMap[v.path] = []
+ }
+ }
+}
+
+export const filterMenusPath = (
+ routes: AppRouteRecordRaw[],
+ allRoutes: AppRouteRecordRaw[]
+): AppRouteRecordRaw[] => {
+ const res: AppRouteRecordRaw[] = []
+ for (const v of routes) {
+ let data: Nullable = null
+ const meta = (v.meta ?? {}) as RouteMeta
+ if (!meta.hidden || meta.canTo) {
+ const allParentPath = getAllParentPath(allRoutes, v.path)
+
+ const fullPath = isUrl(v.path) ? v.path : allParentPath.join('/')
+
+ data = cloneDeep(v)
+ data.path = fullPath
+ if (v.children && data) {
+ data.children = filterMenusPath(v.children, allRoutes)
+ }
+
+ if (data) {
+ res.push(data)
+ }
+
+ if (allParentPath.length && Reflect.has(tabPathMap, allParentPath[0])) {
+ tabPathMap[allParentPath[0]].push(fullPath)
+ }
+ }
+ }
+
+ return res
+}
diff --git a/src/layouts/components/TagsView/index.ts b/src/layouts/components/TagsView/index.ts
new file mode 100644
index 0000000..30e604a
--- /dev/null
+++ b/src/layouts/components/TagsView/index.ts
@@ -0,0 +1,3 @@
+import TagsView from './src/TagsView.vue'
+
+export { TagsView }
diff --git a/src/layouts/components/TagsView/src/TagsView.vue b/src/layouts/components/TagsView/src/TagsView.vue
new file mode 100644
index 0000000..f24b177
--- /dev/null
+++ b/src/layouts/components/TagsView/src/TagsView.vue
@@ -0,0 +1,585 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/components/UserInfo/src/components/LockDialog.vue b/src/layouts/components/UserInfo/src/components/LockDialog.vue
new file mode 100644
index 0000000..2ff3427
--- /dev/null
+++ b/src/layouts/components/UserInfo/src/components/LockDialog.vue
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+
diff --git a/src/layouts/components/UserInfo/src/components/LockPage.vue b/src/layouts/components/UserInfo/src/components/LockPage.vue
new file mode 100644
index 0000000..87a9174
--- /dev/null
+++ b/src/layouts/components/UserInfo/src/components/LockPage.vue
@@ -0,0 +1,258 @@
+
+
+
+
+
+
diff --git a/src/layouts/components/ContextMenu/index.ts b/src/layouts/components/ContextMenu/index.ts
new file mode 100644
index 0000000..2a7c1f0
--- /dev/null
+++ b/src/layouts/components/ContextMenu/index.ts
@@ -0,0 +1,10 @@
+import ContextMenu from './src/ContextMenu.vue'
+import { ElDropdown } from 'element-plus'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+export interface ContextMenuExpose {
+ elDropdownMenuRef: ComponentRef
+
+ 
+
+
+
diff --git a/src/layouts/components/Menu/index.ts b/src/layouts/components/Menu/index.ts
new file mode 100644
index 0000000..a6ec696
--- /dev/null
+++ b/src/layouts/components/Menu/index.ts
@@ -0,0 +1,3 @@
+import Menu from './src/Menu.vue'
+
+export { Menu }
diff --git a/src/layouts/components/Menu/src/Menu.vue b/src/layouts/components/Menu/src/Menu.vue
new file mode 100644
index 0000000..05f799b
--- /dev/null
+++ b/src/layouts/components/Menu/src/Menu.vue
@@ -0,0 +1,257 @@
+
+
+
+
+
diff --git a/src/layouts/components/Menu/src/components/useRenderMenuItem.tsx b/src/layouts/components/Menu/src/components/useRenderMenuItem.tsx
new file mode 100644
index 0000000..301313f
--- /dev/null
+++ b/src/layouts/components/Menu/src/components/useRenderMenuItem.tsx
@@ -0,0 +1,50 @@
+import { ElSubMenu, ElMenuItem } from 'element-plus'
+import { hasOneShowingChild } from '../helper'
+import { isUrl } from '@/utils/is'
+import { useRenderMenuTitle } from './useRenderMenuTitle'
+import { pathResolve } from '@/utils/routerHelper'
+
+const { renderMenuTitle } = useRenderMenuTitle()
+
+export const useRenderMenuItem = () =>
+ // allRouters: AppRouteRecordRaw[] = [],
+ {
+ const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
+ return routers
+ .filter((v) => !v.meta?.hidden)
+ .map((v) => {
+ const meta = v.meta ?? {}
+ const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
+ const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath
+
+ {{ title }}
+
+
+
+
diff --git a/src/layouts/components/Setting/index.ts b/src/layouts/components/Setting/index.ts
new file mode 100644
index 0000000..b64c9ad
--- /dev/null
+++ b/src/layouts/components/Setting/index.ts
@@ -0,0 +1,3 @@
+import Setting from './src/Setting.vue'
+
+export { Setting }
diff --git a/src/layouts/components/Setting/src/Setting.vue b/src/layouts/components/Setting/src/Setting.vue
new file mode 100644
index 0000000..d6546ba
--- /dev/null
+++ b/src/layouts/components/Setting/src/Setting.vue
@@ -0,0 +1,269 @@
+
+
+
+
+
+
+
+
+ {{ t('setting.theme') }}
+ {{ t('setting.layout') }}
+ {{ t('setting.systemTheme') }}
+ {{ t('setting.headerTheme') }}
+ {{ t('setting.menuTheme') }}
+
+
+
+
+ {{ t('setting.copy') }}
+
+
+
+ {{ t('setting.clearAndReset') }}
+
+
+
+
+
+
+
+
diff --git a/src/layouts/components/Setting/src/components/InterfaceDisplay.vue b/src/layouts/components/Setting/src/components/InterfaceDisplay.vue
new file mode 100644
index 0000000..b760025
--- /dev/null
+++ b/src/layouts/components/Setting/src/components/InterfaceDisplay.vue
@@ -0,0 +1,224 @@
+
+
+
+
+
+
diff --git a/src/layouts/components/Setting/src/components/LayoutRadioPicker.vue b/src/layouts/components/Setting/src/components/LayoutRadioPicker.vue
new file mode 100644
index 0000000..950f3aa
--- /dev/null
+++ b/src/layouts/components/Setting/src/components/LayoutRadioPicker.vue
@@ -0,0 +1,172 @@
+
+
+
+
+ {{ t('setting.breadcrumb') }}
+
+
+
+ {{ t('setting.breadcrumbIcon') }}
+
+
+
+ {{ t('setting.hamburgerIcon') }}
+
+
+
+ {{ t('setting.screenfullIcon') }}
+
+
+
+ {{ t('setting.sizeIcon') }}
+
+
+
+ {{ t('setting.localeIcon') }}
+
+
+
+ {{ t('setting.messageIcon') }}
+
+
+
+ {{ t('setting.tagsView') }}
+
+
+
+ {{ t('setting.tagsViewIcon') }}
+
+
+
+ {{ t('setting.logo') }}
+
+
+
+ {{ t('setting.uniqueOpened') }}
+
+
+
+ {{ t('setting.fixedHeader') }}
+
+
+
+ {{ t('setting.footer') }}
+
+
+
+ {{ t('setting.greyMode') }}
+
+
+
+ {{ t('setting.fixedMenu') }}
+
+
+
+ {{ t('watermark.watermark') }}
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/components/SizeDropdown/index.ts b/src/layouts/components/SizeDropdown/index.ts
new file mode 100644
index 0000000..516488d
--- /dev/null
+++ b/src/layouts/components/SizeDropdown/index.ts
@@ -0,0 +1,3 @@
+import SizeDropdown from './src/SizeDropdown.vue'
+
+export { SizeDropdown }
diff --git a/src/layouts/components/SizeDropdown/src/SizeDropdown.vue b/src/layouts/components/SizeDropdown/src/SizeDropdown.vue
new file mode 100644
index 0000000..1d7e967
--- /dev/null
+++ b/src/layouts/components/SizeDropdown/src/SizeDropdown.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/components/TagsView/src/helper.ts b/src/layouts/components/TagsView/src/helper.ts
new file mode 100644
index 0000000..22f6a50
--- /dev/null
+++ b/src/layouts/components/TagsView/src/helper.ts
@@ -0,0 +1,21 @@
+import type { RouteMeta, RouteLocationNormalizedLoaded } from 'vue-router'
+import { pathResolve } from '@/utils/routerHelper'
+
+export const filterAffixTags = (routes: AppRouteRecordRaw[], parentPath = '') => {
+ let tags: RouteLocationNormalizedLoaded[] = []
+ routes.forEach((route) => {
+ const meta = route.meta as RouteMeta
+ const tagPath = pathResolve(parentPath, route.path)
+ if (meta?.affix) {
+ tags.push({ ...route, path: tagPath, fullPath: tagPath } as RouteLocationNormalizedLoaded)
+ }
+ if (route.children) {
+ const tempTags: RouteLocationNormalizedLoaded[] = filterAffixTags(route.children, tagPath)
+ if (tempTags.length >= 1) {
+ tags = [...tags, ...tempTags]
+ }
+ }
+ })
+
+ return tags
+}
diff --git a/src/layouts/components/ThemeSwitch/index.ts b/src/layouts/components/ThemeSwitch/index.ts
new file mode 100644
index 0000000..823a276
--- /dev/null
+++ b/src/layouts/components/ThemeSwitch/index.ts
@@ -0,0 +1,3 @@
+import ThemeSwitch from './src/ThemeSwitch.vue'
+
+export { ThemeSwitch }
diff --git a/src/layouts/components/ThemeSwitch/src/ThemeSwitch.vue b/src/layouts/components/ThemeSwitch/src/ThemeSwitch.vue
new file mode 100644
index 0000000..372058f
--- /dev/null
+++ b/src/layouts/components/ThemeSwitch/src/ThemeSwitch.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('common.profile') }}
+ {{ t('common.document') }}
+ {{ t('lock.lockScreen') }}
+ {{ t('common.loginOut') }}
+
+
+
+
+
+
+
+
diff --git a/src/layouts/components/useRenderLayout.tsx b/src/layouts/components/useRenderLayout.tsx
new file mode 100644
index 0000000..668de51
--- /dev/null
+++ b/src/layouts/components/useRenderLayout.tsx
@@ -0,0 +1,306 @@
+import { computed } from 'vue'
+import { useAppStore } from '@/stores/modules/app'
+import { Menu } from '@/layouts/components/Menu'
+import { TabMenu } from '@/layouts/components/TabMenu'
+import { TagsView } from '@/layouts/components/TagsView'
+import { Logo } from '@/layouts/components/Logo'
+import AppView from './AppView.vue'
+import ToolHeader from './ToolHeader.vue'
+import { ElScrollbar } from 'element-plus'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('layout')
+
+const appStore = useAppStore()
+
+const pageLoading = computed(() => appStore.getPageLoading)
+
+// 标签页
+const tagsView = computed(() => appStore.getTagsView)
+
+// 菜单折叠
+const collapse = computed(() => appStore.getCollapse)
+
+// logo
+const logo = computed(() => appStore.logo)
+
+// 固定头部
+const fixedHeader = computed(() => appStore.getFixedHeader)
+
+// 是否是移动端
+const mobile = computed(() => appStore.getMobile)
+
+// 固定菜单
+const fixedMenu = computed(() => appStore.getFixedMenu)
+
+export const useRenderLayout = () => {
+ const renderClassic = () => {
+ return (
+ <>
+
+
+
+
+
+
+ {{ hour }}
+
+ {{ meridiem }}
+
+
+
+ {{ minute }}
+
+
+
+
+
+
+ ![]()
+
+ {{ userName }}
+
+
+
+
+ {{ t('common.back') }}
+
+
+ {{ t('lock.backToLogin') }}
+
+
+ {{ t('lock.entrySystem') }}
+
+
+
+
+
+ {{ hour }}:{{ minute }}
+ {{ meridiem }}
+
+ {{ year }}/{{ month }}/{{ day }} {{ week }}
+
+ {logo.value ? (
+
+
+
+
+
+
+ )
+ }
+
+ const renderTopLeft = () => {
+ return (
+ <>
+
+
+
+
+ {logo.value ?
+
+
+
+
+ )
+ }
+
+ const renderTop = () => {
+ return (
+ <>
+
+
+ {tagsView.value ? (
+
+
+
+ {logo.value ?
+
+
+ {tagsView.value ? (
+
+
+
+ )
+ }
+
+ const renderCutMenu = () => {
+ return (
+ <>
+
+ {logo.value ?
+
+
+
+ )
+ }
+
+ return {
+ renderClassic,
+ renderTopLeft,
+ renderTop,
+ renderCutMenu
+ }
+}
+
+ {tagsView.value ? (
+
+
+