搜索结果列表页面开发
This commit is contained in:
付民康
286
src/components/v2/NavSidebar/index.vue
Normal file
286
src/components/v2/NavSidebar/index.vue
Normal file
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<div class="navtabs-avatardiv pb-24 pr-24 pl-[10px]" v-if="showAvatar">
|
||||
<GAvatar :src="avatarParam?.avatar" :style="isOrg?'border:.5px solid #d3d3d3;border-radius: var(--border-radius);':''" :name="avatarParam?.name" :width="48" :height="48" :is_round="isRound"></GAvatar>
|
||||
<div class="navtabs-text ml-[16px]">
|
||||
<div class="info-span text-base text-G900 navtabs-omit">{{ avatarParam?.name }}</div>
|
||||
<div class="info-subtext text-sm text-CG600 navtabs-omit">{{ avatarParam?.infoSubText }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="g-nav-sidebar w-[200px] pb-[48px]">
|
||||
<slot name="sidebarInfo"></slot>
|
||||
<!-- ui增加分类名和分割线 -->
|
||||
<template v-if="menuShow">
|
||||
<div v-for="(typeItem, index) in setMenuTypes(menulist)" :key="`${typeItem.label}_${index}`">
|
||||
<div class="mt-[16px] mb-[8px] text-[#9C9DB4] pl-[16px]" v-if="typeItem.label">{{ typeItem.label }}</div>
|
||||
<d-menu mode="vertical" :default-select-keys="[id]" :open-keys="openKeys" @select="handleNav">
|
||||
<template v-for="item in typeItem.children" :key="item.id">
|
||||
<d-menu-item v-if="!item.children" :key="item.id">
|
||||
<template #icon v-if="item?.icon">
|
||||
<Icon :name="item?.icon" class="common-icon"></Icon>
|
||||
<Icon :name="item?.activeIcon" class="active-icon"></Icon>
|
||||
</template>
|
||||
{{ item.label }}</d-menu-item>
|
||||
<d-sub-menu v-if="item.children" :title="item.label" :key="item.id">
|
||||
<template #icon v-if="item?.icon">
|
||||
<!-- <Icon :name="item?.icon"></Icon> -->
|
||||
<div class="icon-div">
|
||||
<Icon :name="item?.icon"></Icon>
|
||||
<Icon v-if="item.isNew" class="icon-new" :name="'gt-new'" size="28px"></Icon>
|
||||
</div>
|
||||
</template>
|
||||
<d-menu-item v-for="item1 in item.children" :key="item1.id">
|
||||
<template #icon v-if="item1?.icon">
|
||||
<Icon :name="item1?.icon"></Icon>
|
||||
</template>
|
||||
{{ item1.label }}</d-menu-item>
|
||||
</d-sub-menu>
|
||||
</template>
|
||||
</d-menu>
|
||||
<div class="row-line" v-if="setMenuTypes(menulist)?.length - 1 > index"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, nextTick, computed } from 'vue';
|
||||
import { onBeforeRouteUpdate, useRouter, useRoute } from 'vue-router';
|
||||
import { type listType } from './types';
|
||||
import menu from '@/constant/menu';
|
||||
import { orgInfoStore, type OrgInfo } from '@/stores/Org/index';
|
||||
import { useAccountStore } from '@/stores/user';
|
||||
const { accountInfo } = useAccountStore();
|
||||
interface IProps {
|
||||
// 声明props内容
|
||||
showAvatar?: boolean,
|
||||
isRound?: boolean,
|
||||
avatarParam?: {
|
||||
avatar?: string,
|
||||
name?: string,
|
||||
infoSubText?: string, // 预留，暂时没有传值
|
||||
[x: string]: any
|
||||
}
|
||||
}
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
showAvatar: true,
|
||||
isRound: false,
|
||||
avatarParam: () => {
|
||||
return {
|
||||
visibility: ''
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const orgStore = orgInfoStore();
|
||||
const route = useRoute();
|
||||
const menulist = ref<listType[]>(menu[route.meta.sidebarType]);
|
||||
const router = useRouter();
|
||||
const nsId = computed(() => orgStore.communityInfo?.ns_id);
|
||||
const isOrg = computed(() => /^\/org\//.test(route.path));
|
||||
const devHost = '';
|
||||
// const devHost = (import.meta as any).env.MODE === 'development' ? 'https://loc-devpress.csdn.net:444' : '';
|
||||
const id = ref();
|
||||
const openKeys = ref([]);
|
||||
const setCurSelected = () => {
|
||||
// 白名单处理Webhook创建、详情页要选中导航
|
||||
id.value = router.currentRoute.value.name?.includes('repoWebhook') ? 'repoWebhook' : router.currentRoute.value.name;
|
||||
|
||||
menulist.value?.forEach(item => {
|
||||
if (item?.children?.some(e => e.id === id.value)) {
|
||||
openKeys.value.push(item.id);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 判断社区是否显示
|
||||
const menuShow = ref(true);
|
||||
const onShowCom = () => {
|
||||
menuShow.value = false;
|
||||
menulist.value = menu[route.meta.sidebarType].filter((item: any) => {
|
||||
if (item.label === '社区管理') {
|
||||
return orgStore.orgInfo.visibility === 'public';
|
||||
}
|
||||
return true;
|
||||
});
|
||||
nextTick(() => {
|
||||
menuShow.value = true;
|
||||
});
|
||||
};
|
||||
const onShowPipeLine = async () => {
|
||||
menuShow.value = false;
|
||||
menulist.value = menu[route.meta.sidebarType].filter((item: any) => {
|
||||
if (item.label === '流水线') {
|
||||
return accountInfo.atomgit_username;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
nextTick(() => {
|
||||
menuShow.value = true;
|
||||
});
|
||||
};
|
||||
watch(() => orgStore.orgInfo, () => {
|
||||
onShowCom();
|
||||
}, { deep: true });
|
||||
watch(() => accountInfo.atomgit_username, () => {
|
||||
onShowPipeLine();
|
||||
}, { deep: true });
|
||||
|
||||
onBeforeRouteUpdate((to) => {
|
||||
id.value = to.name; // 页面加载，激活对应tab
|
||||
menulist.value = menu[to.meta.sidebarType]; // 根据meta中的type确定导航内容
|
||||
if (route.meta.sidebarType === 'userSetting') {
|
||||
onShowPipeLine();
|
||||
}
|
||||
});
|
||||
watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
|
||||
menulist.value = menu[route?.meta?.sidebarType];
|
||||
if (route.meta.sidebarType === 'orgSetting') {
|
||||
onShowCom();
|
||||
}
|
||||
if (route.meta.sidebarType === 'userSetting') {
|
||||
onShowPipeLine();
|
||||
}
|
||||
setCurSelected();
|
||||
}, { immediate: true });
|
||||
// 点击tab跳转路由
|
||||
const handleNav = (val) => {
|
||||
if (/^\/organization/.test(val.key)) {
|
||||
window.open(`${devHost}${val.key}/${nsId.value}`, '_self');
|
||||
} else router.push({ name: val.key });
|
||||
};
|
||||
|
||||
// 分类处理函数-增加分类名称显示
|
||||
const setMenuTypes = (menu:any) => {
|
||||
const res = []; const typeMap = new Map();
|
||||
for (let i = 0; i < menu.length; ++i) {
|
||||
const { menuType } = menu[i];
|
||||
if (menuType) {
|
||||
let type = typeMap.get(menuType);
|
||||
if (!type) {
|
||||
type = { label: menuType, children: [] };
|
||||
res.push(type);
|
||||
typeMap.set(menuType, type);
|
||||
}
|
||||
type.children.push(menu[i]);
|
||||
} else {
|
||||
if (res.length && res[res.length - 1].label === '') res[res.length - 1].children.push(menu[i]);
|
||||
else res.push({ label: '', children: [menu[i]] });
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.g-nav-sidebar {
|
||||
:deep(.devui-menu-vertical) {
|
||||
border-right: 0;
|
||||
background: none !important;
|
||||
|
||||
.devui-menu-item {
|
||||
color: var(--devui-text);
|
||||
.devui-menu-icon + span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.active-icon {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
background: var(--tab-active-bg) !important;
|
||||
border-radius: var(--devui-border-radius);
|
||||
.active-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
.common-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.devui-menu-item-select {
|
||||
background: var(--tab-active-bg) !important;
|
||||
border-radius: var(--devui-border-radius);
|
||||
.active-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
.common-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.layer_1 {
|
||||
|
||||
.devui-menu-item,
|
||||
.devui-submenu-title {
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.layer_2 {
|
||||
.devui-menu-item {
|
||||
padding: 0 50px !important;
|
||||
}
|
||||
|
||||
.devui-submenu-title {
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.layer_2>div.devui-submenu-title,
|
||||
ul.devui-submenu .devui-menu-item {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.icon-chevron-up {
|
||||
color: var(--color-CG600);
|
||||
}
|
||||
}
|
||||
.row-line {
|
||||
width: calc(100% - 32px);
|
||||
margin-left: 16px;
|
||||
height: 1px;
|
||||
background: var(--devui-dividing-line);
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.navtabs-avatardiv {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.navtabs-text {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info-span {
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.info-subtext {
|
||||
// font-size: var(--text-sm);
|
||||
font-weight: 400;
|
||||
// color: var(--color-CG600);
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.navtabs-omit {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon-div {
|
||||
position: relative;
|
||||
|
||||
.icon-new {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
left: 8px;
|
||||
}
|
||||
}</style>
|
||||
Reference in New Issue
Block a user