attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 面包屑跳转

Browse Source
This commit is contained in:
wang_fan_w 2024-04-23 23:31:00 +08:00
parent 3619375b60
commit deb7b58ba7
3 changed files with 105 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/layout/components/Header/components/Breadcrumb/index.vue
View File

@ -2,8 +2,11 @@
<div> <div>
<a-space direction="vertical"> <a-space direction="vertical">
<a-breadcrumb> <a-breadcrumb>
<a-breadcrumb-item v-for="item in breadcrumb" :key="item.path"> <a-breadcrumb-item v-for="(item, index) in breadcrumb" :key="item.path">
{{ item.label }} <span v-if="index === breadcrumb.length - 1" class="main_button">{{ item?.meta?.title || "" }}</span>
<span v-else class="route_button" @click="onBreadcrumb(item as RouteLocationMatched)">{{
item?.meta?.title || ""
}}</span>
</a-breadcrumb-item> </a-breadcrumb-item>
</a-breadcrumb> </a-breadcrumb>
</a-space> </a-space>
@ -13,29 +16,42 @@
<script setup lang="ts"> <script setup lang="ts">
import { RouteLocationMatched } from "vue-router"; import { RouteLocationMatched } from "vue-router";
const route = useRoute(); const route = useRoute();
console.log("路由信息", route); const router = useRouter();
/** /**
* 获取面包屑 * 获取面包屑
* 根据当前路由信息获取，route.matched可以获取当前路由的所有父级路由信息 * 根据当前路由信息获取，route.matched可以获取当前路由的所有父级路由信息
* 如果当前路由是重定向路由，则只返回当前路由信息 * 如果当前路由是顶层的重定向路由，则只返回当前路由信息(说明当前就是顶层)
* 否则返回所有父级路由信息，顶层路由重写为首页 * 否则返回所有父级路由信息，顶层路由重写为首页
*/ */
const breadcrumb = computed(() => { const breadcrumb = computed(() => {
if (route.path === route.matched[0].redirect) { if (route.path === route.matched[0].redirect) {
return [{ label: route.meta.title, path: route.path }]; return [route];
} }
return route.matched.map((item: RouteLocationMatched) => { return route.matched.map((item: RouteLocationMatched) => {
if (item.name == "/") { if (item.name == "/") {
return { return item.children[0];
label: item.children[0].meta?.title || "",
path: item.children[0].path
};
} else { } else {
return { label: item.meta.title, path: item.path }; return item;
} }
}); });
}); });
// 面包屑跳转
const onBreadcrumb = (route: RouteLocationMatched) => {
let path = route.redirect ? route.redirect : route.path;
router.replace((path as string) || "");
};
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.main_button {
color: $color-text-1;
}
.route_button {
color: $color-text-2;
&:hover {
color: $color-primary;
}
}
</style>

3
src/router/route.ts
View File

@ -115,7 +115,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
{ {
path: "/multilevel-menu", path: "/multilevel-menu",
name: "multilevel-menu", name: "multilevel-menu",
redirect: "/multilevel-menu/second-menu", redirect: "/multilevel-menu/second-menu-1",
meta: { meta: {
title: "multilevel-menu", title: "multilevel-menu",
link: "", link: "",
@ -145,6 +145,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
{ {
path: "/multilevel-menu/second-menu-2", path: "/multilevel-menu/second-menu-2",
name: "second-menu-2", name: "second-menu-2",
redirect: "/multilevel-menu/third-menu-1",
meta: { meta: {
title: "second-menu-2", title: "second-menu-2",
link: "", link: "",

152
src/style/global-theme.scss
View File

@ -1,76 +1,76 @@
/* global css theme */ /* global css theme */
$margin: 14px; // 盒子间距 $margin: 14px; // 盒子间距
$margin-text: 8px; // 文字间距-行内 $margin-text: 8px; // 文字间距-行内
$padding: 16px; // 盒子和内容的间距 $padding: 16px; // 盒子和内容的间距
$radius-box: 4px; // 边框圆角 $radius-box: 4px; // 边框圆角
$icon-box: 24px; // icon盒子通用大小 $icon-box: 24px; // icon盒子通用大小
$icon-size: 18px; // icon通用大小 $icon-size: 18px; // icon通用大小
// 边框宽度 // 边框宽度
$border-1: 1px; // 常规-主要 $border-1: 1px; // 常规-主要
$border-2: 2px; // 较粗 $border-2: 2px; // 较粗
$border-3: 3px; // 粗 $border-3: 3px; // 粗
// 边框色 // 边框色
$color-border-1: var(--color-border-1); // 浅色 $color-border-1: var(--color-border-1); // 浅色
$color-border-2: var(--color-border-2); // 常规-主要边框色 $color-border-2: var(--color-border-2); // 常规-主要边框色
$color-border-3: var(--color-border-3); // 深/悬浮 $color-border-3: var(--color-border-3); // 深/悬浮
$color-border-4: var(--color-border-4); // 重/按钮描边 $color-border-4: var(--color-border-4); // 重/按钮描边
// 默认不占位边框 // 默认不占位边框
$shadow-border-1: inset 0 0 0 1px red; $shadow-border-1: inset 0 0 0 1px red;
$shadow-border-2: inset 0 0 0 1px cyan; $shadow-border-2: inset 0 0 0 1px cyan;
$shadow-border-3: inset 0 0 0 1px blue; $shadow-border-3: inset 0 0 0 1px blue;
$shadow-border-4: inset 0 0 0 1px gold; $shadow-border-4: inset 0 0 0 1px gold;
$shadow-border-5: inset 0 0 0 1px violet; $shadow-border-5: inset 0 0 0 1px violet;
$shadow-border-6: inset 0 0 0 1px green; $shadow-border-6: inset 0 0 0 1px green;
// 填充色 // 填充色
$color-fill-1: #eeeeee; // 常规填充色/灰底悬浮 $color-fill-1: #eeeeee; // 常规填充色/灰底悬浮
$color-fill-2: #d1d1d1; // 深/灰底悬浮 $color-fill-2: #d1d1d1; // 深/灰底悬浮
$color-fill-3: #b6b6b6; // 重/特殊场景 $color-fill-3: #b6b6b6; // 重/特殊场景
$color-fill-4: #9b9b9b; // 浅/禁用 $color-fill-4: #9b9b9b; // 浅/禁用
// 设置全局主题色：https://arco.design/vue/docs/token // 设置全局主题色：https://arco.design/vue/docs/token
$color-primary: rgb(var(--primary-6)); // 主题色-主要 $color-primary: rgb(var(--primary-6)); // 主题色-主要
$color-success: rgb(var(--success-6)); // 成功色 $color-success: rgb(var(--success-6)); // 成功色
$color-warning: rgb(var(--warning-6)); // 警示色 $color-warning: rgb(var(--warning-6)); // 警示色
$color-danger: rgb(var(--danger-6)); // 错误色 $color-danger: rgb(var(--danger-6)); // 错误色
$color-link: rgb(var(--link-6)); // 链接色 $color-link: rgb(var(--link-6)); // 链接色
// 字体色 // 字体色
$color-text-1: var(--color-text-1); // 标题、重点字体颜色 强调/正文标题 $color-text-1: var(--color-text-1); // 标题、重点字体颜色 强调/正文标题
$color-text-2: var(--color-text-2); // 默认字体色 次强调/正文标题 $color-text-2: var(--color-text-2); // 默认字体色 次强调/正文标题
$color-text-3: var(--color-text-3); // 次要信息 二级字体色 $color-text-3: var(--color-text-3); // 次要信息 二级字体色
$color-text-4: var(--color-text-4); // 置灰信息 $color-text-4: var(--color-text-4); // 置灰信息
// 背景色 // 背景色
$color-bg-1: var(--color-bg-1); // 整体背景色 $color-bg-1: var(--color-bg-1); // 整体背景色
$color-bg-2: var(--color-bg-2); // 一级容器背景 $color-bg-2: var(--color-bg-2); // 一级容器背景
$color-bg-3: var(--color-bg-3); // 二级容器背景 $color-bg-3: var(--color-bg-3); // 二级容器背景
$color-bg-4: var(--color-bg-4); // 三级容器背景 $color-bg-4: var(--color-bg-4); // 三级容器背景
// 阴影 // 阴影
$shadow-special: 0 0 1px rgba(0, 0, 0, 0.3); // 特殊阴影 $shadow-special: 0 0 1px rgba(0, 0, 0, 0.3); // 特殊阴影
$shadow1-center: 0 -2px 5px rgba(0, 0, 0, 0.1); // 阴影样式1 $shadow1-center: 0 -2px 5px rgba(0, 0, 0, 0.1); // 阴影样式1
$shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1); // 阴影样式2 $shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1); // 阴影样式2
$shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1); // 阴影样式3 $shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1); // 阴影样式3
// 常规大小为字体对应的首选项 // 常规大小为字体对应的首选项
// 字体大小 // 字体大小
$font-size-body-3: 14px; // 默认大小-正文-常规 $font-size-body-3: 14px; // 默认大小-正文-常规
$font-size-body-2: 13px; // 小号字体 $font-size-body-2: 13px; // 小号字体
$font-size-body-1: 12px; // 说明描述-辅助文案/次要文案 $font-size-body-1: 12px; // 说明描述-辅助文案/次要文案
// 标题 // 标题
$font-size-title-1: 16px; // h3-标题-小 $font-size-title-1: 16px; // h3-标题-小
$font-size-title-2: 20px; // 常规-h2-标题-中 $font-size-title-2: 20px; // 常规-h2-标题-中
$font-size-title-3: 24px; // h1-标题-大 $font-size-title-3: 24px; // h1-标题-大
// 运营标题 // 运营标题
$font-size-display-1: 36px; // 运营标题-小 $font-size-display-1: 36px; // 运营标题-小
$font-size-display-2: 48px; // 常规-运营标题-中 $font-size-display-2: 48px; // 常规-运营标题-中
$font-size-display-3: 56px; // 运营标题-大 $font-size-display-3: 56px; // 运营标题-大
// icon的衬线类型 // icon的衬线类型
$stroke-width-3: 3; // 衬线-3 轻线 $stroke-width-3: 3; // 衬线-3 轻线
$stroke-width-4: 4; // 默认-衬线-4 重线 $stroke-width-4: 4; // 默认-衬线-4 重线