0099
This commit is contained in:
146
cdTMP/src/layout/components/menu.vue
Normal file
146
cdTMP/src/layout/components/menu.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<script lang="jsx">
|
||||
import { defineComponent, ref, h, compile, computed } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import { useAppStore } from "@/store"
|
||||
import { listenerRouteChange } from "@/utils/route-listener"
|
||||
import { openWindow, regexUrl } from "@/utils"
|
||||
import useMenuTree from "./use-menu-tree"
|
||||
|
||||
export default defineComponent({
|
||||
emit: ["collapse"],
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const { menuTree } = useMenuTree()
|
||||
const collapsed = computed({
|
||||
get() {
|
||||
if (appStore.device === "desktop") return appStore.menuCollapse
|
||||
return false
|
||||
},
|
||||
set(value) {
|
||||
appStore.updateSettings({ menuCollapse: value })
|
||||
}
|
||||
})
|
||||
|
||||
const topMenu = computed(() => appStore.topMenu)
|
||||
const openKeys = ref([])
|
||||
const selectedKey = ref([])
|
||||
|
||||
const goto = (item) => {
|
||||
// Open external link
|
||||
if (regexUrl.test(item.path)) {
|
||||
openWindow(item.path)
|
||||
selectedKey.value = [item.name]
|
||||
return
|
||||
}
|
||||
// Eliminate external link side effects
|
||||
const { hideInMenu, activeMenu } = item.meta
|
||||
if (route.name === item.name && !hideInMenu && !activeMenu) {
|
||||
selectedKey.value = [item.name]
|
||||
return
|
||||
}
|
||||
// Trigger router change
|
||||
router.push({
|
||||
name: item.name
|
||||
})
|
||||
}
|
||||
const findMenuOpenKeys = (target) => {
|
||||
const result = []
|
||||
let isFind = false
|
||||
const backtrack = (item, keys) => {
|
||||
if (item.name === target) {
|
||||
isFind = true
|
||||
result.push(...keys)
|
||||
return
|
||||
}
|
||||
if (item.children?.length) {
|
||||
item.children.forEach((el) => {
|
||||
backtrack(el, [...keys, el.name])
|
||||
})
|
||||
}
|
||||
}
|
||||
menuTree.value.forEach((el) => {
|
||||
if (isFind) return // Performance optimization
|
||||
backtrack(el, [el.name])
|
||||
})
|
||||
return result
|
||||
}
|
||||
listenerRouteChange((newRoute) => {
|
||||
const { requiresAuth, activeMenu, hideInMenu } = newRoute.meta
|
||||
if (requiresAuth && (!hideInMenu || activeMenu)) {
|
||||
const menuOpenKeys = findMenuOpenKeys(activeMenu || newRoute.name)
|
||||
|
||||
const keySet = new Set([...menuOpenKeys, ...openKeys.value])
|
||||
openKeys.value = [...keySet]
|
||||
|
||||
selectedKey.value = [activeMenu || menuOpenKeys[menuOpenKeys.length - 1]]
|
||||
}
|
||||
}, true)
|
||||
const setCollapse = (val) => {
|
||||
if (appStore.device === "desktop") appStore.updateSettings({ menuCollapse: val })
|
||||
}
|
||||
|
||||
const renderSubMenu = () => {
|
||||
function travel(_route, nodes = []) {
|
||||
if (_route) {
|
||||
_route.forEach((element) => {
|
||||
// This is demo, modify nodes as needed
|
||||
const icon = element?.meta?.icon ? () => h(compile(`<${element?.meta?.icon}/>`)) : null
|
||||
const node =
|
||||
element?.children && element?.children.length !== 0 ? (
|
||||
<a-sub-menu
|
||||
key={element?.name}
|
||||
v-slots={{
|
||||
icon,
|
||||
title: () => h(compile(element?.meta?.locale || ""))
|
||||
}}
|
||||
>
|
||||
{travel(element?.children)}
|
||||
</a-sub-menu>
|
||||
) : (
|
||||
<a-menu-item key={element?.name} v-slots={{ icon }} onClick={() => goto(element)}>
|
||||
{element?.meta?.locale || ""}
|
||||
</a-menu-item>
|
||||
)
|
||||
nodes.push(node)
|
||||
})
|
||||
}
|
||||
return nodes
|
||||
}
|
||||
return travel(menuTree.value)
|
||||
}
|
||||
|
||||
return () => (
|
||||
<a-menu
|
||||
mode={topMenu.value ? "horizontal" : "vertical"}
|
||||
v-model:collapsed={collapsed.value}
|
||||
v-model:open-keys={openKeys.value}
|
||||
show-collapse-button={appStore.device !== "mobile"}
|
||||
auto-open={false}
|
||||
selected-keys={selectedKey.value}
|
||||
auto-open-selected={true}
|
||||
level-indent={34}
|
||||
style="height: 100%;width:100%;"
|
||||
onCollapse={setCollapse}
|
||||
>
|
||||
{renderSubMenu()}
|
||||
</a-menu>
|
||||
)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.arco-menu-inner) {
|
||||
.arco-menu-inline-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.arco-icon {
|
||||
&:not(.arco-icon-down) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
207
cdTMP/src/layout/components/navbar.vue
Normal file
207
cdTMP/src/layout/components/navbar.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<div class="left-side">
|
||||
<a-space>
|
||||
<img src="@/assets/img/wxwx-logo.svg" class="logo" alt="logo" />
|
||||
<a-typography-title :style="{ margin: 0, fontSize: '18px' }" :heading="5">
|
||||
成都测试管理平台
|
||||
</a-typography-title>
|
||||
<icon-menu-fold
|
||||
v-if="!topMenu && appStore.device === 'mobile'"
|
||||
style="font-size: 22px; cursor: pointer"
|
||||
@click="toggleDrawerMenu"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="center-side">
|
||||
<Menu v-if="topMenu"></Menu>
|
||||
</div>
|
||||
<ul class="right-side">
|
||||
<li>
|
||||
<a-tooltip content="搜索-暂无">
|
||||
<a-button class="nav-btn" type="outline" :shape="'circle'">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</li>
|
||||
<li>
|
||||
<a-tooltip content="语言-暂无">
|
||||
<a-button class="nav-btn" type="outline" :shape="'circle'">
|
||||
<template #icon>
|
||||
<icon-language />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<!-- 这里有个下拉列表 -->
|
||||
</li>
|
||||
<li>
|
||||
<a-tooltip content="切换主题-暂无">
|
||||
<a-button class="nav-btn" type="outline" :shape="'circle'">
|
||||
<template #icon>
|
||||
<icon-moon-fill />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</li>
|
||||
<li>
|
||||
<a-tooltip :content="isFullscreen ? '退出全屏' : '进入全屏'">
|
||||
<a-button class="nav-btn" type="outline" :shape="'circle'" @click="toggleFullScreen">
|
||||
<template #icon>
|
||||
<icon-fullscreen-exit v-if="isFullscreen" />
|
||||
<icon-fullscreen v-else />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</li>
|
||||
<li>
|
||||
<a-tooltip content="设置">
|
||||
<a-button class="nav-btn" type="outline" :shape="'circle'" @click="setVisible">
|
||||
<template #icon>
|
||||
<icon-settings />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</li>
|
||||
<li>
|
||||
<a-dropdown trigger="click">
|
||||
<a-avatar :size="32" :style="{ marginRight: '8px', cursor: 'pointer' }">
|
||||
<img alt="avatar" src="@/assets/img/avatar.jpg" />
|
||||
</a-avatar>
|
||||
<template #content>
|
||||
<a-doption>
|
||||
<a-space @click="switchRoles">
|
||||
<icon-tag />
|
||||
<span> 切换角色 </span>
|
||||
</a-space>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<a-space @click="$router.push({ name: 'Info' })">
|
||||
<icon-user />
|
||||
<span> 用户中心 </span>
|
||||
</a-space>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<a-space @click="$router.push({ name: 'Setting' })">
|
||||
<icon-settings />
|
||||
<span> 用户设置 </span>
|
||||
</a-space>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<a-space @click="handleLogout">
|
||||
<icon-export />
|
||||
<span> 退出登录 </span>
|
||||
</a-space>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, inject } from "vue"
|
||||
import { useAppStore } from "@/store"
|
||||
import { useFullscreen } from "@vueuse/core"
|
||||
// 这个hook就是退出登录跳转的
|
||||
import useUser from "@/hooks/logout"
|
||||
import { Message } from "@arco-design/web-vue"
|
||||
import Menu from "@/layout/components/menu.vue"
|
||||
const appStore = useAppStore()
|
||||
// 是否menu在顶部-暂时不用
|
||||
const topMenu = computed(() => appStore.topMenu && appStore.menu)
|
||||
// 全屏设置,使用了@vueuse/core
|
||||
const { isFullscreen, toggle: toggleFullScreen } = useFullscreen()
|
||||
// appStore里面设置
|
||||
const setVisible = () => {
|
||||
console.log("在appStore里面设置全局{ globalSettings: true }，暂无做")
|
||||
appStore.updateSettings({ globalSettings: true })
|
||||
}
|
||||
// 右上角下拉
|
||||
const setDropDownVisible = () => {
|
||||
const event = new MouseEvent("click", {
|
||||
view: window,
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
})
|
||||
triggerBtn.value.dispatchEvent(event)
|
||||
}
|
||||
/// 切换角色
|
||||
const switchRoles = async () => {
|
||||
Message.success("模拟切换角色")
|
||||
}
|
||||
/// 退出登录
|
||||
const { logout } = useUser()
|
||||
const handleLogout = () => {
|
||||
logout()
|
||||
}
|
||||
// 注入事件
|
||||
const toggleDrawerMenu = inject("toggleDrawerMenu")
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.logo {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
background-color: var(--color-bg-2);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.left-side {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.center-side {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
display: flex;
|
||||
padding-right: 20px;
|
||||
list-style: none;
|
||||
:deep(.locale-select) {
|
||||
border-radius: 20px;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-text-1);
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-btn {
|
||||
border-color: rgb(var(--gray-2));
|
||||
color: rgb(var(--gray-8));
|
||||
font-size: 16px;
|
||||
}
|
||||
.trigger-btn,
|
||||
.ref-btn {
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
}
|
||||
.trigger-btn {
|
||||
margin-left: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.message-popover {
|
||||
.arco-popover-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
cdTMP/src/layout/components/tab-bar.vue
Normal file
90
cdTMP/src/layout/components/tab-bar.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="tab-bar-container">
|
||||
<a-affix ref="affixRef" :offset-top="offsetTop">
|
||||
<div class="tab-bar-box">
|
||||
<div class="tab-bar-scroll">
|
||||
<div class="tags-wrap">
|
||||
<tab-item v-for="(tag, index) in tagList" :key="tag.fullPath" :index="index" :item-data="tag" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag-bar-operation"></div>
|
||||
</div>
|
||||
</a-affix>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, watch, onUnmounted } from 'vue'
|
||||
import type { RouteLocationNormalized } from 'vue-router'
|
||||
import { listenerRouteChange, removeRouteListener } from '@/utils/route-listener'
|
||||
import { useAppStore, useTabBarStore } from '@/store'
|
||||
import tabItem from './tab-item.vue'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const tabBarStore = useTabBarStore()
|
||||
|
||||
const affixRef = ref()
|
||||
const tagList = computed(() => {
|
||||
return tabBarStore.getTabList
|
||||
})
|
||||
const offsetTop = computed(() => {
|
||||
return appStore.navbar ? 60 : 0
|
||||
})
|
||||
|
||||
watch(
|
||||
() => appStore.navbar,
|
||||
() => {
|
||||
affixRef.value.updatePosition()
|
||||
}
|
||||
)
|
||||
listenerRouteChange((route) => {
|
||||
if (!route.meta.noAffix && !tagList.value.some((tag) => tag.fullPath === route.fullPath)) {
|
||||
tabBarStore.updateTabList(route)
|
||||
}
|
||||
}, true)
|
||||
|
||||
onUnmounted(() => {
|
||||
removeRouteListener()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.tab-bar-container {
|
||||
position: relative;
|
||||
background-color: var(--color-bg-2);
|
||||
.tab-bar-box {
|
||||
display: flex;
|
||||
padding: 0 0 0 20px;
|
||||
background-color: var(--color-bg-2);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
.tab-bar-scroll {
|
||||
height: 32px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.tags-wrap {
|
||||
padding: 4px 0;
|
||||
height: 48px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
|
||||
:deep(.arco-tag) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 6px;
|
||||
cursor: pointer;
|
||||
&:first-child {
|
||||
.arco-tag-close-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-bar-operation {
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
cdTMP/src/layout/components/use-menu-tree.js
Normal file
66
cdTMP/src/layout/components/use-menu-tree.js
Normal file
@@ -0,0 +1,66 @@
|
||||
import { computed } from 'vue'
|
||||
import usePermission from '@/hooks/permission'
|
||||
import { useAppStore } from '@/store'
|
||||
import appClientMenus from '@/router/app-menus'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
export default function useMenuTree() {
|
||||
const permission = usePermission()
|
||||
const appStore = useAppStore()
|
||||
const appRoute = computed(() => {
|
||||
if (appStore.menuFromServer) {
|
||||
return appStore.appAsyncMenus
|
||||
}
|
||||
return appClientMenus
|
||||
})
|
||||
const menuTree = computed(() => {
|
||||
const copyRouter = cloneDeep(appRoute.value)
|
||||
copyRouter.sort((a, b) => {
|
||||
return 0 - 0
|
||||
})
|
||||
function travel(_routes, layer) {
|
||||
if (!_routes) return null
|
||||
|
||||
const collector = _routes.map((element) => {
|
||||
// no access
|
||||
if (!permission.accessRouter(element)) {
|
||||
return null
|
||||
}
|
||||
|
||||
// leaf node
|
||||
if (element.meta?.hideChildrenInMenu || !element.children) {
|
||||
element.children = []
|
||||
return element
|
||||
}
|
||||
|
||||
// route filter hideInMenu true
|
||||
element.children = element.children.filter((x) => x.meta?.hideInMenu !== true)
|
||||
|
||||
// Associated child node
|
||||
const subItem = travel(element.children, layer + 1)
|
||||
|
||||
if (subItem.length) {
|
||||
element.children = subItem
|
||||
return element
|
||||
}
|
||||
// the else logic
|
||||
if (layer > 1) {
|
||||
element.children = subItem
|
||||
return element
|
||||
}
|
||||
|
||||
if (element.meta?.hideInMenu === false) {
|
||||
return element
|
||||
}
|
||||
|
||||
return null
|
||||
})
|
||||
return collector.filter(Boolean)
|
||||
}
|
||||
return travel(copyRouter, 0)
|
||||
})
|
||||
|
||||
return {
|
||||
menuTree,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user