Skip to content

Commit

Permalink
fix: 导航栏样式按照设计规范统一处理 --story=119603762
Browse files Browse the repository at this point in the history 
# Reviewed, transaction id: 17842
  • Loading branch information
@luofann
luofann committed Sep 9, 2024
1 parent fc73292 commit 0212b50
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 59 deletions.
153 changes: 95 additions & 58 deletions frontend/pc/src/components/common/layout/Navigation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,14 @@
<bk-navigation
navigation-type="top-bottom"
theme-color="#ffffff"
class="app-layout-nav"
:default-open="isSideOpen"
:side-title="appName"
:need-menu="sideRouters.length > 0"
@toggle="isSideOpen = $event"
@toggle-click="isSideOpen = $event">
<template slot="side-icon">
<img :src="platformInfo.appLogo || appLogo" alt="" style="width: 36px; height: 36px;">
<img :src="platformInfo.appLogo || appLogo" alt="" style="width: 28px; height: 28px;">
</template>
<template slot="header">
<div class="nav-header">
Expand All @@ -52,8 +54,8 @@
</ul>
</div>
<div class="quick-entry">
<bk-popover theme="navigation-popover" :arrow="false" offset="0, 2" :tippy-options="{ animateFill: false, hideOnClick: false }">
<div class="language" style="margin: 0 10px;">
<bk-popover theme="navigation-popover" :arrow="false" offset="0, 2" placement="bottom-start" :tippy-options="{ animateFill: false, hideOnClick: false }">
<div class="language">
<span :class="['language-btn bk-itsm-icon', curLanguage === 'zh' ? 'icon-yuyanqiehuanzhongwen' : 'icon-yuyanqiehuanyingwen']"></span>
</div>
<template slot="content">
Expand All @@ -71,7 +73,7 @@
</ul>
</template>
</bk-popover>
<bk-popover theme="navigation-popover" :arrow="false" offset="0, 2" :tippy-options="{ animateFill: false, hideOnClick: false }">
<bk-popover theme="navigation-popover" :arrow="false" offset="0, 2" placement="bottom-start" :tippy-options="{ animateFill: false, hideOnClick: false }">
<div class="right-question-icon">
<svg class="bk-icon" style="margin-top: 2px; width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M32,4C16.5,4,4,16.5,4,32c0,3.6,0.7,7.1,2,10.4V56c0,1.1,0.9,2,2,2h13.6C36,63.7,52.3,56.8,58,42.4S56.8,11.7,42.4,6C39.1,4.7,35.6,4,32,4z M31.3,45.1c-1.7,0-3-1.3-3-3s1.3-3,3-3c1.7,0,3,1.3,3,3S33,45.1,31.3,45.1z M36.7,31.7c-2.3,1.3-3,2.2-3,3.9v0.9H29v-1c-0.2-2.8,0.7-4.4,3.2-5.8c2.3-1.4,3-2.2,3-3.8s-1.3-2.8-3.3-2.8c-1.8-0.1-3.3,1.2-3.5,3c0,0.1,0,0.1,0,0.2h-4.8c0.1-4.4,3.1-7.4,8.5-7.4c5,0,8.3,2.8,8.3,6.9C40.5,28.4,39.2,30.3,36.7,31.7z"></path>
Expand All @@ -91,7 +93,7 @@
</ul>
</template>
</bk-popover>
<bk-popover data-test-id="navigation-popover-user" theme="navigation-popover" :arrow="false" offset="0, 7" :tippy-options="{ animateFill: false, hideOnClick: false }">
<bk-popover data-test-id="navigation-popover-user" placement="bottom-start" theme="navigation-popover" :arrow="false" offset="0, 7" :tippy-options="{ animateFill: false, hideOnClick: false }">
<div class="user-name">
<span>{{ userName }}</span>
<i class="bk-icon icon-down-shape"></i>
Expand All @@ -110,47 +112,50 @@
</div>
</template>
<template slot="menu">
<bk-select
data-test-id="navigation-select-projectList"
v-if="activeNav === 'project'"
:value="selectedProject"
class="project-select"
ext-popover-cls="project-select-popover"
:loading="projectListLoading"
:clearable="false"
:searchable="true"
@selected="onSelectProject">
<bk-option
v-for="item in projectList"
:key="item.key"
:id="item.key"
:disabled="!hasPermission(['project_view'], item.auth_actions)"
:name="item.name">
<div
v-cursor="{ active: !hasPermission(['project_view'], item.auth_actions) }"
:class="['project-item', { 'text-permission-disable': !hasPermission(['project_view'], item.auth_actions) }]"
@click="applyForProjectViewPerm(item, 'project_view')">
{{ item.name }}
</div>
</bk-option>
<div slot="extension" class="project-select-extension">
<div
data-test-id="navigation-div-createProject"
v-cursor="{ active: !hasPermission(['project_create']) }"
:class="['action-item', { 'text-permission-disable': !hasPermission(['project_create']) }]"
@click="handleCreateProject">
<i class="bk-icon icon-plus-circle"></i>
{{ $t(`m['新建项目']`) }}
</div>
<div
data-test-id="navigation-div-manageProject"
class="action-item"
@click="goToProjectManage">
<i class="bk-icon icon-apps"></i>
{{ $t(`m['项目管理']`) }}
<template v-if="activeNav === 'project'">
<bk-select
v-if="isSideOpen"
data-test-id="navigation-select-projectList"
:value="selectedProject"
class="project-select"
ext-popover-cls="project-select-popover"
:loading="projectListLoading"
:clearable="false"
:searchable="true"
@selected="onSelectProject">
<bk-option
v-for="item in projectList"
:key="item.key"
:id="item.key"
:disabled="!hasPermission(['project_view'], item.auth_actions)"
:name="item.name">
<div
v-cursor="{ active: !hasPermission(['project_view'], item.auth_actions) }"
:class="['project-item', { 'text-permission-disable': !hasPermission(['project_view'], item.auth_actions) }]"
@click="applyForProjectViewPerm(item, 'project_view')">
{{ item.name }}
</div>
</bk-option>
<div slot="extension" class="project-select-extension">
<div
data-test-id="navigation-div-createProject"
v-cursor="{ active: !hasPermission(['project_create']) }"
:class="['action-item', { 'text-permission-disable': !hasPermission(['project_create']) }]"
@click="handleCreateProject">
<i class="bk-icon icon-plus-circle"></i>
{{ $t(`m['新建项目']`) }}
</div>
<div
data-test-id="navigation-div-manageProject"
class="action-item"
@click="goToProjectManage">
<i class="bk-icon icon-apps"></i>
{{ $t(`m['项目管理']`) }}
</div>
</div>
</div>
</bk-select>
</bk-select>
<div v-else class="project-first-text">{{ projectFirstText }}</div>
</template>
<bk-navigation-menu
item-active-bg-color="#e1ecff"
item-active-color="#3a84ff"
Expand Down Expand Up @@ -298,6 +303,13 @@
const { name, i18n } = this.platformInfo;
return i18n.name || name;
},
projectFirstText() {
if (this.activeNav === 'project') {
const project = this.projectList.find(item => item.key === this.selectedProject);
return project ? project.name[0] : '';
}
return '';
},
},
watch: {
'$route.fullPath': {
Expand Down Expand Up @@ -543,6 +555,15 @@
display: flex;
align-items: center;
}
.project-first-text {
padding: 3px 0 0 22px;
height: 32px;
line-height: 1;
font-size: 14px;
font-weight: bold;
color: #63656e;
border-bottom: 1px solid #cec6cc;
}
.create-bill-btn {
margin-right: 40px;
padding: 0 8px;
Expand Down Expand Up @@ -577,33 +598,45 @@
.right-question-icon {
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
height: 32px;
width: 32px;
margin-left: 4px;
padding: 0 8px;
height: 34px;
color: #768197;
font-size: 16px;
font-size: 18px;
border-radius: 50%;
cursor: pointer;
&:hover {
background: #252f43;
color: #3a84ff;
color: #ffffff;
}
}
.user-name {
display: flex;
align-items: center;
height: 34px;
margin-left: 16px;
color: #96a2b9;
font-size: 14px;
cursor: pointer;
&:hover {
color: #ffffff;
}
}
.language-btn {
color: #768197;
font-size: 18px;
&:hover {
color: #3a84ff;
}
.language {
display: flex;
align-items: center;
margin: 4px 4px 0 0;
padding: 0 8px;
height: 34px;
color: #768197;
border-radius: 50%;
&:hover {
background: #252f43;
color: #ffffff;
}
.language-btn {
font-size: 18px;
}
}
}
/deep/ .project-select.bk-select {
Expand Down Expand Up @@ -641,6 +674,11 @@
}
</style>
<style lang="scss">
.app-layout-nav {
.bk-navigation-wrapper .navigation-nav {
z-index: 1001;
}
}
.tippy-popper .tippy-tooltip.navigation-popover-theme {
padding: 0;
background: #ffffff;
Expand All @@ -655,7 +693,6 @@
height: 30px;
line-height: 30px;
color: #63656e;
text-align: center;
cursor: pointer;
> a {
color: #63656e;
Expand Down
2 changes: 1 addition & 1 deletion frontend/pc/src/i18n/lang/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1753,7 +1753,7 @@ export const m = {
取消: 'Cancel',
当前版本: 'Current',
产品文档: 'Documentation',
版本日志: 'Release note',
版本日志: 'Release Note',
问题反馈: 'Feedback',
'【': '[',
'】版本更新明细': '] Details Of Version Updates',
Expand Down

0 comments on commit 0212b50

Please sign in to comment.