路由meta.title修改为非必须

This commit is contained in:
hooray
2022-11-27 03:51:54 +08:00
parent 7281bc5679
commit 363f3e83b7
8 changed files with 61 additions and 29 deletions
-2
View File
@@ -73,8 +73,6 @@ watch([
else {
document.title = import.meta.env.VITE_APP_TITLE
}
}, {
immediate: true,
})
onMounted(() => {
+3 -3
View File
@@ -210,7 +210,7 @@ declare namespace Settings {
declare module 'vue-router' {
interface RouteMeta {
title: string | Function
title?: string | Function
i18n?: string
icon?: string
activeIcon?: string
@@ -239,7 +239,7 @@ declare namespace Route {
}
interface breadcrumb {
path: string
title: string | Function
title?: string | Function
hide: boolean
}
}
@@ -249,7 +249,7 @@ declare namespace Menu {
interface recordRaw {
path?: string
meta: {
title: string
title?: string
icon?: string
defaultOpened?: boolean
auth?: string | string[]
+2 -2
View File
@@ -19,12 +19,12 @@ const { switchTo } = useMenu()
<div
v-if="item.children && item.children.length !== 0" :key="index" class="item" :class="{
active: index === menuStore.actived,
}" :title="item.meta.title" @click="switchTo(index)"
}" :title="item.meta.title ?? '[ 无标题 ]'" @click="switchTo(index)"
>
<el-icon>
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
</el-icon>
<span>{{ item.meta.title }}</span>
<span>{{ item.meta.title ?? '[ 无标题 ]' }}</span>
</div>
</template>
</div>
+42 -14
View File
@@ -16,8 +16,8 @@ const menuStore = useMenuStore()
interface listTypes {
icon?: string
title: string
breadcrumb: string[]
title?: string | Function
breadcrumb: (string | Function | undefined)[]
path: string
}
@@ -38,13 +38,37 @@ const resultList = computed(() => {
let result = []
result = sourceList.value.filter((item) => {
let flag = false
if (item.title.includes(searchInput.value)) {
flag = true
if (item.title) {
if (typeof item.title === 'function') {
if (item.title().includes(searchInput.value)) {
flag = true
}
}
else {
if (item.title.includes(searchInput.value)) {
flag = true
}
}
}
if (item.path.includes(searchInput.value)) {
flag = true
}
if (item.breadcrumb.some(b => b.includes(searchInput.value))) {
if (item.breadcrumb.some((b) => {
let flag = false
if (b) {
if (typeof b === 'function') {
if (b().includes(searchInput.value)) {
flag = true
}
}
else {
if (b.includes(searchInput.value)) {
flag = true
}
}
}
return flag
})) {
flag = true
}
return flag
@@ -116,16 +140,16 @@ function hasChildren(item: Route.recordRaw) {
}
return flag
}
function getSourceList(arr: Route.recordRaw[], basePath?: string, icon?: string, breadcrumb?: string[]) {
function getSourceList(arr: Route.recordRaw[], basePath?: string, icon?: string, breadcrumb?: (string | Function | undefined)[]) {
arr.forEach((item) => {
if (item.meta.sidebar !== false) {
const breadcrumbTemp = cloneDeep(breadcrumb) || []
if (item.children && hasChildren(item)) {
breadcrumbTemp.push(typeof item.meta.title === 'function' ? item.meta.title() : item.meta.title)
breadcrumbTemp.push(item.meta.title)
getSourceList(item.children, basePath ? [basePath, item.path].join('/') : item.path, item.meta.icon || icon, breadcrumbTemp)
}
else {
breadcrumbTemp.push(typeof item.meta.title === 'function' ? item.meta.title() : item.meta.title)
breadcrumbTemp.push(item.meta.title)
let path = ''
if (isExternalLink(item.path)) {
path = item.path
@@ -135,7 +159,7 @@ function getSourceList(arr: Route.recordRaw[], basePath?: string, icon?: string,
}
sourceList.value.push({
icon: item.meta.icon || icon,
title: typeof item.meta.title === 'function' ? item.meta.title() : item.meta.title,
title: item.meta.title,
breadcrumb: breadcrumbTemp,
path,
})
@@ -143,7 +167,7 @@ function getSourceList(arr: Route.recordRaw[], basePath?: string, icon?: string,
}
})
}
function getSourceListByMenus(arr: Menu.recordRaw[], icon?: string, breadcrumb?: string[]) {
function getSourceListByMenus(arr: Menu.recordRaw[], icon?: string, breadcrumb?: (string | Function | undefined)[]) {
arr.forEach((item) => {
const breadcrumbTemp = cloneDeep(breadcrumb) || []
if (item.children && item.children.length > 0) {
@@ -181,7 +205,9 @@ function keyDown() {
}
}
function keyEnter() {
if (actived.value !== -1) { searchResultItemRef.value[actived.value].click() }
if (actived.value !== -1) {
searchResultItemRef.value[actived.value].click()
}
}
function handleScroll() {
let scrollTo = 0
@@ -191,7 +217,9 @@ function handleScroll() {
const activedClientHeight = searchResultItemRef.value[actived.value].clientHeight
const searchScrollTop = searchResultRef.value.scrollTop
const searchClientHeight = searchResultRef.value.clientHeight
if (activedOffsetTop + activedClientHeight > searchScrollTop + searchClientHeight) { scrollTo = activedOffsetTop + activedClientHeight - searchClientHeight }
if (activedOffsetTop + activedClientHeight > searchScrollTop + searchClientHeight) {
scrollTo = activedOffsetTop + activedClientHeight - searchClientHeight
}
else if (activedOffsetTop <= searchScrollTop) {
scrollTo = activedOffsetTop
}
@@ -261,11 +289,11 @@ function pageJump(url: string) {
</el-icon>
<div class="info">
<div class="title">
{{ item.title }}
{{ item.title ?? '[ 无标题 ]' }}
</div>
<div class="breadcrumb">
<span v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex">
{{ bc }}
{{ bc ?? '[ 无标题 ]' }}
<el-icon>
<svg-icon name="ep:arrow-right" />
</el-icon>
+4 -4
View File
@@ -35,20 +35,20 @@ const hasChildren = computed(() => {
<div class="sidebar-item">
<router-link v-if="!hasChildren" v-slot="{ href, navigate, isActive, isExactActive }" custom :to="resolveRoutePath(basePath, item.path || '')">
<a :href="isExternalLink(resolveRoutePath(basePath, item.path || '')) ? resolveRoutePath(basePath, item.path || '') : href" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" :target="isExternalLink(resolveRoutePath(basePath, item.path || '')) ? '_blank' : '_self'" @click="navigate">
<el-menu-item :title="item.meta.title" :index="resolveRoutePath(basePath, item.path || '')">
<el-menu-item :title="item.meta.title ?? '[ 无标题 ]'" :index="resolveRoutePath(basePath, item.path || '')">
<el-icon v-if="item.meta.icon" class="title-icon">
<svg-icon :name="item.meta.icon" />
</el-icon>
<span class="title">{{ item.meta.title }}</span>
<span class="title">{{ item.meta.title ?? '[ 无标题 ]' }}</span>
</el-menu-item>
</a>
</router-link>
<el-sub-menu v-else :title="item.meta.title" :index="settingsStore.app.routeBaseOn !== 'filesystem' ? resolveRoutePath(basePath, item.path || '') : JSON.stringify(item)">
<el-sub-menu v-else :title="item.meta.title ?? '[ 无标题 ]'" :index="settingsStore.app.routeBaseOn !== 'filesystem' ? resolveRoutePath(basePath, item.path || '') : JSON.stringify(item)">
<template #title>
<el-icon v-if="item.meta.icon" class="title-icon">
<svg-icon :name="item.meta.icon" />
</el-icon>
<span class="title">{{ item.meta.title }}</span>
<span class="title">{{ item.meta.title ?? '[ 无标题 ]' }}</span>
</template>
<template v-for="route in item.children">
<SidebarItem v-if="route.meta.sidebar !== false" :key="route.path" :item="route" :base-path="resolveRoutePath(basePath, item.path || '')" />
+1 -1
View File
@@ -61,7 +61,7 @@ function pathCompile(path: string) {
<el-breadcrumb v-if="settingsStore.breadcrumb.enable && settingsStore.mode === 'pc' && settingsStore.app.routeBaseOn !== 'filesystem'">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path" :to="index < breadcrumbList.length - 1 ? pathCompile(item.path) : ''">
{{ item.title }}
{{ item.title ?? '[ 无标题 ]' }}
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
+6 -1
View File
@@ -119,7 +119,12 @@ router.afterEach((to, from) => {
const keepAliveStore = useKeepAliveStore()
settingsStore.app.enableProgress && (isLoading.value = false)
// 设置页面 title
to.meta.title && settingsStore.setTitle(typeof to.meta.title === 'function' ? to.meta.title() : to.meta.title)
if (settingsStore.app.routeBaseOn !== 'filesystem') {
settingsStore.setTitle(to.meta.breadcrumbNeste?.at(-1)?.title)
}
else {
settingsStore.setTitle(to.meta.title)
}
// 判断当前页面是否开启缓存,如果开启,则将当前页面的 name 信息存入 keep-alive 全局状态
if (to.meta.cache) {
const componentName = to.matched.at(-1)?.components?.default.name
+3 -2
View File
@@ -1,4 +1,5 @@
import { defaultsDeep } from 'lodash-es'
import type { RouteMeta } from 'vue-router'
import type { RecursiveRequired, Settings } from '@/global'
import settings from '@/settings'
import settingsDefault from '@/settings.default'
@@ -6,7 +7,7 @@ import settingsDefault from '@/settings.default'
interface SettingsStore extends RecursiveRequired<Settings.all> {
subMenuCollapseLastStatus: boolean
mode: 'pc' | 'mobile'
title: string
title?: RouteMeta['title']
}
const useSettingsStore = defineStore(
@@ -25,7 +26,7 @@ const useSettingsStore = defineStore(
}),
actions: {
// 设置网页标题
setTitle(title: string) {
setTitle(title: SettingsStore['title']) {
this.title = title
},
// 设置访问模式