feat: 菜单跳转，关联tags栏
This commit is contained in:
wang_fan_w
parent
7ff3b00d0e
commit
77ee7ba1af
@ -1,35 +1,31 @@
|
||||
<template>
|
||||
<a-layout-content class="content">
|
||||
<Tabs />
|
||||
<a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
|
||||
<div class="main">
|
||||
<div class="main_box"></div>
|
||||
</div>
|
||||
</a-scrollbar>
|
||||
</a-layout-content>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Tabs from "@/layout/components/Tabs/index.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
height: calc(100vh - 60px - 30px); // 动态切类名-去掉footer
|
||||
}
|
||||
.scrollbar {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.main {
|
||||
padding: $padding;
|
||||
.main_box {
|
||||
height: 1000px;
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
// 修改左侧滚动条宽度
|
||||
:deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
|
||||
width: 4px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<a-layout-content class="content">
|
||||
<Tabs />
|
||||
<a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
|
||||
<div class="main">
|
||||
<router-view />
|
||||
</div>
|
||||
</a-scrollbar>
|
||||
</a-layout-content>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Tabs from "@/layout/components/Tabs/index.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
height: calc(100vh - 60px - 30px); // 动态切类名-去掉footer
|
||||
}
|
||||
.scrollbar {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.main {
|
||||
padding: $padding;
|
||||
}
|
||||
// 修改左侧滚动条宽度
|
||||
:deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
|
||||
width: 4px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<a-menu breakpoint="xl" :collapsed="collapsed">
|
||||
<a-menu breakpoint="xl" :collapsed="collapsed" @menu-item-click="onMenuItem">
|
||||
<MenuItem :route-tree="routeTree" />
|
||||
</a-menu>
|
||||
</template>
|
||||
@ -9,13 +9,25 @@ import MenuItem from "@/layout/components/Menu/menu-item.vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useThemeConfig } from "@/store/theme-config";
|
||||
import { useRoutesListStore } from "@/store/route-list";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const routerStore = useRoutesListStore();
|
||||
const { routeTree } = storeToRefs(routerStore);
|
||||
const { routeTree, routeList } = storeToRefs(routerStore);
|
||||
const themeStore = useThemeConfig();
|
||||
const { collapsed } = storeToRefs(themeStore);
|
||||
|
||||
console.log("路由树", routeTree.value);
|
||||
|
||||
const onMenuItem = (key: string) => {
|
||||
let find = routeList.value.find((item: Menu.MenuOptions) => item.name === key);
|
||||
console.log("当前", find);
|
||||
if (find) {
|
||||
routerStore.setTagsList(find);
|
||||
router.push(find.path);
|
||||
} else {
|
||||
router.push("/404");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<template #title>{{ item.meta.title }}</template>
|
||||
<MenuItem :route-tree="item.children" />
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="item.name">
|
||||
<a-menu-item v-else :key="item?.name">
|
||||
<template #icon v-if="item.meta.svgIcon || item.meta.icon">
|
||||
<IconCommon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
|
||||
</template>
|
||||
|
||||
@ -1,122 +1,129 @@
|
||||
<template>
|
||||
<div class="tabs">
|
||||
<a-tabs
|
||||
:editable="true"
|
||||
:hide-content="true"
|
||||
size="medium"
|
||||
type="line"
|
||||
show-add-button
|
||||
@add="handleAdd"
|
||||
@delete="handleDelete"
|
||||
>
|
||||
<a-tab-pane v-for="(item, index) of data" :key="item.key" :title="item.title" :closable="index !== 2" />
|
||||
</a-tabs>
|
||||
<div class="tabs_setting">
|
||||
<a-dropdown trigger="hover">
|
||||
<div class="setting"><icon-loop :size="18" /></div>
|
||||
<template #content>
|
||||
<a-doption>
|
||||
<template #icon><icon-refresh /></template>
|
||||
<template #default>刷新</template>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<template #icon><icon-left /></template>
|
||||
<template #default>关闭左侧</template>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<template #icon><icon-right /></template>
|
||||
<template #default>关闭右侧</template>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<template #icon><icon-close /></template>
|
||||
<template #default>关闭其它</template>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<template #icon><icon-close-circle /></template>
|
||||
<template #default>全部关闭</template>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
let count = 5;
|
||||
const data = ref([
|
||||
{
|
||||
key: "1",
|
||||
title: "Tab 1",
|
||||
content: "Content of Tab Panel 1"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
title: "Tab 2",
|
||||
content: "Content of Tab Panel 2"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
title: "Tab 3",
|
||||
content: "Content of Tab Panel 3"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
title: "Tab 4",
|
||||
content: "Content of Tab Panel 4"
|
||||
}
|
||||
]);
|
||||
|
||||
const handleAdd = () => {
|
||||
const number = count++;
|
||||
data.value = data.value.concat({
|
||||
key: `${number}`,
|
||||
title: `New Tab ${number}`,
|
||||
content: `Content of New Tab Panel ${number}`
|
||||
});
|
||||
};
|
||||
const handleDelete = (key: any) => {
|
||||
data.value = data.value.filter(item => item.key !== key);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabs {
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: $border-1 solid $color-border-2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.tabs_setting {
|
||||
margin: 0 0 0 $margin;
|
||||
.setting {
|
||||
margin-right: $margin;
|
||||
color: $color-text-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.arco-tabs-nav-tab) {
|
||||
// 移入展示关闭icon
|
||||
.arco-tabs-tab-closable {
|
||||
svg {
|
||||
width: 0px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
&:hover {
|
||||
svg {
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 消除tab移入的背景色
|
||||
&:hover .arco-tabs-tab-title::before {
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
// 消除tabs底部边线
|
||||
:deep(.arco-tabs-nav) {
|
||||
&::before {
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="tabs">
|
||||
<a-tabs :editable="true" :hide-content="true" size="medium" type="line" @delete="handleDelete">
|
||||
<a-tab-pane v-for="item of tagsList" :key="item.name" :title="item.meta.title" :closable="!item.meta.isAffix" />
|
||||
</a-tabs>
|
||||
<div class="tabs_setting">
|
||||
<a-dropdown trigger="hover">
|
||||
<div class="setting"><icon-loop :size="18" /></div>
|
||||
<template #content>
|
||||
<a-doption>
|
||||
<template #icon><icon-refresh /></template>
|
||||
<template #default>刷新</template>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<template #icon><icon-left /></template>
|
||||
<template #default>关闭左侧</template>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<template #icon><icon-right /></template>
|
||||
<template #default>关闭右侧</template>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<template #icon><icon-close /></template>
|
||||
<template #default>关闭其它</template>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<template #icon><icon-close-circle /></template>
|
||||
<template #default>全部关闭</template>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useRoutesListStore } from "@/store/route-list";
|
||||
const routerStore = useRoutesListStore();
|
||||
const { tagsList } = storeToRefs(routerStore);
|
||||
|
||||
watch(
|
||||
tagsList.value,
|
||||
newV => {
|
||||
console.log("tagsList", newV);
|
||||
},
|
||||
{ flush: "post" }
|
||||
);
|
||||
|
||||
// let count = 5;
|
||||
// const data = ref([
|
||||
// {
|
||||
// key: "1",
|
||||
// title: "Tab 1",
|
||||
// content: "Content of Tab Panel 1"
|
||||
// },
|
||||
// {
|
||||
// key: "2",
|
||||
// title: "Tab 2",
|
||||
// content: "Content of Tab Panel 2"
|
||||
// },
|
||||
// {
|
||||
// key: "3",
|
||||
// title: "Tab 3",
|
||||
// content: "Content of Tab Panel 3"
|
||||
// },
|
||||
// {
|
||||
// key: "4",
|
||||
// title: "Tab 4",
|
||||
// content: "Content of Tab Panel 4"
|
||||
// }
|
||||
// ]);
|
||||
|
||||
// const handleAdd = () => {
|
||||
// const number = count++;
|
||||
// data.value = data.value.concat({
|
||||
// key: `${number}`,
|
||||
// title: `New Tab ${number}`,
|
||||
// content: `Content of New Tab Panel ${number}`
|
||||
// });
|
||||
// };
|
||||
const handleDelete = (key: any) => {
|
||||
console.log("关闭tags", key);
|
||||
|
||||
// data.value = data.value.filter(item => item.key !== key);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabs {
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: $border-1 solid $color-border-2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.tabs_setting {
|
||||
margin: 0 0 0 $margin;
|
||||
.setting {
|
||||
margin-right: $margin;
|
||||
color: $color-text-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.arco-tabs-nav-tab) {
|
||||
// 移入展示关闭icon
|
||||
.arco-tabs-tab-closable {
|
||||
svg {
|
||||
width: 0px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
&:hover {
|
||||
svg {
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 消除tab移入的背景色
|
||||
&:hover .arco-tabs-tab-title::before {
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
// 消除tabs底部边线
|
||||
:deep(.arco-tabs-nav) {
|
||||
&::before {
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -39,7 +39,7 @@ export async function initSetRouter() {
|
||||
export function setCacheName(flattenedArray: any) {
|
||||
const store = useRoutesListStore(pinia);
|
||||
const cacheName = flattenedArray.map((item: any) => item.name);
|
||||
store.setrouteNames(cacheName); // 缓存路由name
|
||||
store.setRouteNames(cacheName); // 缓存路由name
|
||||
store.setRouteList(flattenedArray); // 缓存路由
|
||||
}
|
||||
|
||||
|
||||
@ -191,16 +191,6 @@ export const staticRoutes = [
|
||||
* @link 参考：https://router.vuejs.org/zh/guide/essentials/history-mode.html#netlify
|
||||
*/
|
||||
export const notFoundAndNoPower = [
|
||||
// 未找到页面的时候跳转该页面
|
||||
{
|
||||
path: "/:path(.*)*",
|
||||
name: "notFound",
|
||||
component: () => import("@/views/error/404.vue"),
|
||||
meta: {
|
||||
title: "notFound",
|
||||
isHide: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/401",
|
||||
name: "noPower",
|
||||
@ -209,5 +199,14 @@ export const notFoundAndNoPower = [
|
||||
title: "notFound",
|
||||
isHide: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/:path(.*)*", // 匹配任意路由，兜底，未找到页面的时候跳转该页面
|
||||
name: "notFound",
|
||||
component: () => import("@/views/error/404.vue"),
|
||||
meta: {
|
||||
title: "notFound",
|
||||
isHide: true
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@ -4,13 +4,14 @@ import { defineStore } from "pinia";
|
||||
* 路由列表
|
||||
* @methods setRouteTree 设置路由树
|
||||
* @methods setRoutesList 设置路由一维数据
|
||||
* @methods setrouteNames 设置路由名称集合
|
||||
* @methods setRouteNames 设置路由名称集合
|
||||
*/
|
||||
export const useRoutesListStore = defineStore("routeList", {
|
||||
state: (): any => ({
|
||||
routeTree: [], // 路由树
|
||||
routeList: [], // 路由数据
|
||||
routeNames: [] // 路由名称
|
||||
routeList: [], // 路由数据-一维
|
||||
routeNames: [], // 路由名称
|
||||
tagsList: [] // 标签页数据
|
||||
}),
|
||||
actions: {
|
||||
setRouteTree(data: any) {
|
||||
@ -19,8 +20,14 @@ export const useRoutesListStore = defineStore("routeList", {
|
||||
setRouteList(data: any) {
|
||||
this.routeList = data;
|
||||
},
|
||||
setrouteNames(data: Array<string>) {
|
||||
setRouteNames(data: Array<string>) {
|
||||
this.routeNames = data;
|
||||
},
|
||||
setTagsList(data: Menu.MenuOptions) {
|
||||
let isExist = this.tagsList.some((item: Menu.MenuOptions) => item.name === data.name);
|
||||
if (!isExist) {
|
||||
this.tagsList.push(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user