115 lines
2.8 KiB
Vue
115 lines
2.8 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import { useAppStore } from '@/stores';
|
||
|
|
import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
|
||
|
|
import { fetchMenusTree } from '@/api/all';
|
||
|
|
const lists = ref([]);
|
||
|
|
const getMenus = async () => {
|
||
|
|
const res = await fetchMenusTree();
|
||
|
|
lists.value = res;
|
||
|
|
};
|
||
|
|
onMounted(() => {
|
||
|
|
getMenus();
|
||
|
|
});
|
||
|
|
const appStore = useAppStore();
|
||
|
|
|
||
|
|
const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
|
||
|
|
const avatar = computed(
|
||
|
|
() => '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image',
|
||
|
|
);
|
||
|
|
const topMenu = computed(() => appStore.topMenu && appStore.menu);
|
||
|
|
const toggleDrawerMenu = inject('toggleDrawerMenu') as () => void;
|
||
|
|
|
||
|
|
function setServerMenu() {
|
||
|
|
appStore.fetchServerMenuConfig();
|
||
|
|
console.log(appStore.serverMenu);
|
||
|
|
}
|
||
|
|
const handleSelect = (index: any) => {
|
||
|
|
console.log(index);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="navbar">
|
||
|
|
<div class="left-side">
|
||
|
|
<a-space>
|
||
|
|
<img src="@/assets/LOGO.svg" alt="" />
|
||
|
|
</a-space>
|
||
|
|
</div>
|
||
|
|
<div class="center-side">
|
||
|
|
<div class="menu-demo">
|
||
|
|
<a-menu mode="horizontal" :default-selected-keys="['1']">
|
||
|
|
<a-menu-item :key="'1'">
|
||
|
|
<view>工作台</view>
|
||
|
|
</a-menu-item>
|
||
|
|
<a-menu-item v-for="(item, index) in lists" :key="index + 2">
|
||
|
|
<a-dropdown @select="handleSelect" :popup-max-height="false">
|
||
|
|
<a-button>{{ item.name }}<icon-caret-down /></a-button>
|
||
|
|
<template #content>
|
||
|
|
<a-doption v-for="(child, index) in item.children" :key="index">{{ child.name }}</a-doption>
|
||
|
|
</template>
|
||
|
|
</a-dropdown>
|
||
|
|
</a-menu-item>
|
||
|
|
</a-menu>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<ul class="right-side">
|
||
|
|
<li>
|
||
|
|
<a-dropdown trigger="click">
|
||
|
|
<a-avatar class="cursor-pointer" :size="32">
|
||
|
|
<img alt="avatar" :src="avatar" />
|
||
|
|
</a-avatar>
|
||
|
|
</a-dropdown>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.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;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
margin-left: 40px;
|
||
|
|
}
|
||
|
|
.cneter-tip {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: var(--color-text-1);
|
||
|
|
}
|
||
|
|
.menu-demo {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
.right-side {
|
||
|
|
display: flex;
|
||
|
|
padding-right: 20px;
|
||
|
|
list-style: none;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|