renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: layout组件文件目录调整

Browse Source
This commit is contained in:
rd
2025-08-18 10:09:41 +08:00
parent dade534122
commit 7c7704c078
23 changed files with 11 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/layouts/components/navbar/components/right-side/index.vue Normal file
View File

@ -0,0 +1,210 @@
<template>
<div class="right-wrap">
<!-- 任务中心 -->
<div
class="relative p-6px rounded-30px flex items-center justify-center bg-[rgba(255,255,255,0.6)]"
@click="setUnread"
>
<SvgIcon
name="svg-taskCenter"
size="20"
class="cursor-pointer color-#737478 hover:color-#6D4CFE"
@click="openDownloadCenter"
/>
<div class="w-6px h-6px rounded-50% bg-#F64B31 absolute top-6px right-6px" v-if="hasUnreadInfo"></div>
</div>
<!-- 灵机空间入口 -->
<div class="agent-entry mx-16px" :class="isAgentRoute ? 'agent' : ''" @click="handleAgentClick"></div>
<!-- 头像设置 -->
<a-dropdown trigger="click" class="layout-avatar-dropdown">
<a-avatar class="cursor-pointer" :size="32">
<img alt="avatar" src="@/assets/avatar.svg" />
</a-avatar>
<template #content>
<div>
<a-doption>
<a-space class="flex justify-between w-100%" @click="setServerMenu">
<div class="flex items-center">
<img :src="icon1" class="w-16px h-16px mr-8px" />
<span>管理中心</span>
</div>
<icon-right size="12" />
</a-space>
</a-doption>
<a-dsubmenu value="option-1" position="lt" trigger="hover" class="enterprises-dsubmenu">
<a-doption class="enterprises-doption">
<a-space class="flex justify-between w-100%">
<div class="flex items-center">
<img :src="icon3" class="w-16px h-16px mr-8px" />
<span>切换企业账号</span>
</div>
<icon-right size="12" />
</a-space>
</a-doption>
<template #content>
<a-doption
v-for="(item, index) in enterprises"
:key="index"
class="rounded-8px hover:bg-#F2F3F5"
@click="onEnterpriseItemClick(item)"
>
<div
class="flex items-center w-100% justify-between"
:class="enterpriseInfo?.id === item.id ? '!color-#6D4CFE' : ''"
>
<span>{{ item.name }}</span>
<icon-check v-if="enterpriseInfo?.id === item.id" size="16" />
</div>
</a-doption>
</template>
</a-dsubmenu>
<a-doption>
<a-space class="flex justify-between w-100%" @click="clickExit">
<div class="flex items-center">
<img :src="icon2" class="w-16px h-16px mr-8px" />
<span>退出登录</span>
</div>
<icon-right size="12" />
</a-space>
</a-doption>
</div>
</template>
</a-dropdown>
<ExitAccountModal ref="exitAccountModalRef" />
<DownloadCenterModal ref="downloadCenterModalRef" />
</div>
</template>
<script setup>
import router from '@/router';
import { useEnterpriseStore } from '@/stores/modules/enterprise';
import { useSidebarStore } from '@/stores/modules/side-bar';
import { useUserStore } from '@/stores';
import ExitAccountModal from '../exit-account-modal';
import DownloadCenterModal from '../task-center-modal';
import icon1 from '@/assets/option.svg';
import icon2 from '@/assets/exit.svg';
import icon3 from '@/assets/change.svg';
const props = defineProps({
isAgentRoute: {
type: Boolean,
default: false,
},
});
const enterpriseStore = useEnterpriseStore();
const userStore = useUserStore();
const sideBarStore = useSidebarStore();
const route = useRoute();
const hasUnreadInfo = computed(() => sideBarStore.unreadInfo.length);
const exitAccountModalRef = ref(null);
const downloadCenterModalRef = ref(null);
const enterprises = computed(() => {
return userStore.userInfo?.enterprises ?? [];
});
const enterpriseInfo = computed(() => {
return enterpriseStore?.enterpriseInfo ?? {};
});
const openDownloadCenter = () => {
downloadCenterModalRef.value.open();
};
const onEnterpriseItemClick = async (item) => {
enterpriseStore.setEnterpriseInfo(item);
window.location.reload();
};
const clickExit = async () => {
exitAccountModalRef.value?.open();
};
const setServerMenu = () => {
router.push('/management/person');
};
const setUnread = () => {
if (sideBarStore.unreadInfo.length) {
sideBarStore.removeTaskUnreadInfo();
}
};
const handleAgentClick = () => {
router.push({ name: props.isAgentRoute ? 'Home' : 'AgentIndex' });
};
</script>
<style scoped lang="scss">
@import './style.scss';
</style>
<style lang="scss">
.layout-avatar-dropdown,
.enterprises-dsubmenu {
.arco-dropdown {
border-radius: 8px;
border: 1px solid var(--BG-300, #e6e6e8);
background: var(--BG-white, #fff);
padding: 12px 0px;
.arco-dropdown-option {
padding: 0 12px;
margin-bottom: 4px;
&-content {
display: flex;
height: 40px;
width: 100%;
padding: 10px 24px;
align-items: center;
.menu-item-text {
color: var(--Text-2, #3c4043);
font-family: $font-family-regular;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
}
.arco-dropdown-option-content {
border-radius: 8px !important;
}
&:not(.arco-dropdown-option-disabled):hover {
background-color: transparent;
.arco-dropdown-option-content {
background: var(--BG-200, #f2f3f5);
}
}
}
}
}
.layout-avatar-dropdown,
.enterprises-dsubmenu {
width: 200px;
.arco-dropdown {
padding: 12px 4px;
.arco-dropdown-option {
padding: 0 !important;
&-content {
padding: 0 12px !important;
}
}
}
.arco-dropdown-option-suffix {
display: none;
}
.enterprises-doption {
.arco-dropdown-option-content {
padding: 0 !important;
border-radius: 8px;
}
&:not(.arco-dropdown-option-disabled):hover {
background-color: transparent;
.arco-dropdown-option-content {
background: var(--BG-200, #f2f3f5);
}
}
}
}
</style>