fix(metrics): 更新多个视图中的指标计算方式描述
refactor(header): 重构高级经理指挥台的头部组件,支持路由导航显示
This commit is contained in:
@@ -4,11 +4,31 @@
|
||||
<header class="dashboard-header">
|
||||
<div class="header-content">
|
||||
<div class="logo-section">
|
||||
<div class="header-text">
|
||||
<h1>高级经理指挥台</h1>
|
||||
<p>统筹多组运营,优化资源配置,驱动业绩增长,实现团队协同发展。</p>
|
||||
<!-- 动态顶栏:根据是否有路由参数显示不同内容 -->
|
||||
<!-- 路由跳转时的顶栏:面包屑 + 姓名 -->
|
||||
<div v-if="isRouteNavigation" class="route-header">
|
||||
<div class="breadcrumb">
|
||||
<span class="breadcrumb-item" @click="goBack">团队管理</span>
|
||||
<span class="breadcrumb-separator">></span>
|
||||
<span class="breadcrumb-item current">{{ routeUserName }}高级经理指挥台</span>
|
||||
</div>
|
||||
<div class="user-name">
|
||||
{{ routeUserName }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 自己登录时的顶栏:原有样式 -->
|
||||
<template v-else>
|
||||
<div class="header-text">
|
||||
<h1>高级经理指挥台</h1>
|
||||
<p>统筹多组运营,优化资源配置,驱动业绩增长,实现团队协同发展。</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="!isRouteNavigation">
|
||||
<!-- 用户下拉菜单 -->
|
||||
<UserDropdown class="header-ringht" style="margin-left: auto;" />
|
||||
</div>
|
||||
<UserDropdown class="header-ringht" style="margin-left: auto;" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -204,6 +224,22 @@ const userStore = useUserStore()
|
||||
// 路由实例
|
||||
const router = useRouter()
|
||||
|
||||
// 判断是否为路由导航(有路由参数)
|
||||
const isRouteNavigation = computed(() => {
|
||||
const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
|
||||
return !!routeUserName
|
||||
})
|
||||
|
||||
// 获取路由传递的用户名
|
||||
const routeUserName = computed(() => {
|
||||
return router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name || ''
|
||||
})
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.go(-1)
|
||||
}
|
||||
|
||||
// Loading状态
|
||||
const isLoading = ref(false)
|
||||
// 团队详情加载状态
|
||||
@@ -1180,4 +1216,53 @@ const hideTooltip = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 路由导航样式
|
||||
.route-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
.breadcrumb-item {
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
|
||||
&:not(.current) {
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #3b82f6;
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
color: #1e293b;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
color: #94a3b8;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.user-name {
|
||||
color: #1e293b;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user