119 lines
2.8 KiB
Vue
119 lines
2.8 KiB
Vue
<script setup lang="ts">
|
||
import { useRouter } from 'vue-router';
|
||
|
||
type LinkItem = {
|
||
title: string;
|
||
icon: string;
|
||
to: { name: string };
|
||
disabled?: boolean;
|
||
};
|
||
|
||
type BlockItem = {
|
||
id: string;
|
||
title: string;
|
||
list: any[];
|
||
avatarRound: boolean;
|
||
link: {
|
||
to: {
|
||
name: string;
|
||
params: {
|
||
namespace?: string;
|
||
};
|
||
};
|
||
};
|
||
};
|
||
|
||
defineProps<{
|
||
linkList: LinkItem[];
|
||
blockList: BlockItem[];
|
||
}>();
|
||
|
||
const emit = defineEmits<{(event: 'handleToggle', value: boolean): void;
|
||
}>();
|
||
|
||
const router = useRouter();
|
||
// repo\org切换，强制页面重载
|
||
const handleLinkClick = (event, data) => {
|
||
const href = router.resolve(data.to).fullPath;
|
||
window.open(href, '_self');
|
||
emit('handleToggle', false);
|
||
|
||
event?.stopPropagation();
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="g-entrance-menu">
|
||
<div class="g-entrance-menu-links">
|
||
<OptionLink v-for="item in linkList" :key="item.title" v-bind="item">
|
||
<GIcon :name="item.icon" />{{ item.title }}
|
||
</OptionLink>
|
||
</div>
|
||
<div class="g-entrance-menu-block" v-for="block in blockList" :key="block.id">
|
||
<div class="g-entrance-menu-block-title">
|
||
<span>{{ block.title }}</span>
|
||
<GLink v-bind="block.link">
|
||
<GIcon name="gt-more-operate" />
|
||
</GLink>
|
||
</div>
|
||
<div class="g-entrance-menu-block-list">
|
||
<DataPanel :loading="block.loading" :empty="!block.list?.length" :card="false" skeleton>
|
||
<OptionLink
|
||
v-for="item in block.list"
|
||
:key="item.name"
|
||
v-bind="item"
|
||
@click="handleLinkClick($event, item)"
|
||
>
|
||
<GAvatar
|
||
:src="item.avatar"
|
||
:name="item.avatarText"
|
||
:width="16"
|
||
:height="16"
|
||
:is_round="block.avatarRound"
|
||
></GAvatar>
|
||
<d-tooltip :content="item.label" position="right" :mouse-enter-delay="800">
|
||
<div class="ellipsis">{{ item.label }}</div>
|
||
</d-tooltip>
|
||
</OptionLink>
|
||
<template #empty>
|
||
<div class="py-2 flex-center opacity-50">暂无数据</div>
|
||
</template>
|
||
<template #loading>
|
||
<d-skeleton :rows="5" />
|
||
</template>
|
||
</DataPanel>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
@import 'devui-theme/styles-var/devui-var.scss';
|
||
|
||
.g-entrance-menu {
|
||
&-links {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
&-block {
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-top: 1px solid var(--color-border-light);
|
||
margin-top: 16px;
|
||
&:last-child {
|
||
padding-bottom: 0;
|
||
}
|
||
&-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #2d2d2e;
|
||
line-height: 32px;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|