cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导航栏样式调整

Browse Source
This commit is contained in:
付民康
2025-03-14 16:32:12 +08:00
parent f2a0d29269
commit b7d3afa26f
3 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Header/Notice.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<router-link to="/notice?status=all&message_type=mr"> <router-link to="/personalCenter?status=all&message_type=mr">
<d-badge class="g-notice" :count="counts" :offset="[-2, 4]" :hidden="!counts" status="danger"> <d-badge class="g-notice" :count="counts" :offset="[-2, 4]" :hidden="!counts" status="danger">
<GIcon name="gt-line-notice" /> <d-icon style="font-size: 16px" name="notice" />
</d-badge> </d-badge>
</router-link> </router-link>
</template> </template>
@@ -12,7 +12,7 @@ import { getMessageCount } from '@/api/notice';
import { addEventListener, offEvent } from '@/utils/eventBus'; import { addEventListener, offEvent } from '@/utils/eventBus';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
const counts = ref(0); const counts = ref(9);
const getCounts = () => { const getCounts = () => {
getMessageCount().then((result) => { getMessageCount().then((result) => {
counts.value = result.data?.reduce((prev: number, curr: Record<string, any>) => { counts.value = result.data?.reduce((prev: number, curr: Record<string, any>) => {
@@ -39,6 +39,7 @@ onBeforeUnmount(() => {
.g-notice { .g-notice {
cursor: pointer; cursor: pointer;
margin: 0 8px; margin: 0 8px;
padding-top: 6px;
&-list { &-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

22
src/components/Header/UserAvatar.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<div class="g-user-avatar flex-center ml-1" @click="toggleDropDown"> <div class="g-user-avatar flex-center ml-1" @click="toggleDropDown">
<GAvatar :name="accountInfo.nickname" :src="accountInfo.avatar"></GAvatar> <GAvatar :width="28" :height="28" :name="accountInfo.nickname" :src="accountInfo.avatar"></GAvatar>
</div> </div>
<d-drawer v-model="visible" class="g-user-drawer-container"> <d-drawer v-model="visible" class="g-user-drawer-container">
<div class="g-user-drawer"> <div class="g-user-drawer">
<div class="g-user-drawer-info"> <div class="g-user-drawer-info">
<div class="g-user-avatar"> <div class="g-user-avatar">
<GAvatar :name="accountInfo.nickname" :src="accountInfo.avatar"></GAvatar> <GAvatar style="width: 28px" :name="accountInfo.nickname" :src="accountInfo.avatar"></GAvatar>
</div> </div>
<div class="g-user-drawer-info-list"> <div class="g-user-drawer-info-list">
<div class="g-user-drawer-info-list-name"> <div class="g-user-drawer-info-list-name">
@@ -107,20 +107,20 @@ const blockList = ref([
{ id: 'myPage', label: '我的主页', to: getRouterLink('homepage') } { id: 'myPage', label: '我的主页', to: getRouterLink('homepage') }
], ],
[ [
{ id: 'dashboard', label: '工作台', icon: 'gt-member-c', to: getRouterLink('dashboard') }, // { id: 'dashboard', label: '工作台', icon: 'gt-member-c', to: getRouterLink('dashboard') },
{ id: 'myIssues', label: '我的 Issue', icon: 'gt-issue-c', to: getRouterLink('issues') }, // { id: 'myIssues', label: '我的 Issue', icon: 'gt-issue-c', to: getRouterLink('issues') },
{ id: 'myDiscuss', label: '我的讨论', icon: 'gt-comment-c', to: getRouterLink('discussionCreated') }, // { id: 'myDiscuss', label: '我的讨论', icon: 'gt-comment-c', to: getRouterLink('discussionCreated') },
{ id: 'myMR', label: '我的合并请求', icon: 'gt-me-merge-c', to: getRouterLink('merge') }, // { id: 'myMR', label: '我的合并请求', icon: 'gt-me-merge-c', to: getRouterLink('merge') },
{ id: 'notice', label: '消息通知', icon: 'gt-remind-c', to: getRouterLink({ name: 'notice', query: { status: 'all' }}) } { id: 'notice', label: '消息通知', icon: 'gt-remind-c', to: getRouterLink({ name: 'notice', query: { status: 'all' }}) }
], ],
[ [
{ id: 'myOrg', label: '我的组织', icon: 'gt-organizations-c', to: getRouterLink({ name: 'settingOrganization' }) }, { id: 'myOrg', label: '我的组织', icon: 'gt-organizations-c', to: getRouterLink({ name: 'settingOrganization' }) },
{ id: 'myRepo', label: '我的项目', icon: 'gt-folder-c', to: getRouterLink('userRepos') }, // { id: 'myRepo', label: '我的项目', icon: 'gt-folder-c', to: getRouterLink('userRepos') },
{ id: 'myStar', label: '我的 Star', icon: 'gt-star-c', to: getRouterLink('userStars') } // { id: 'myStar', label: '我的 Star', icon: 'gt-star-c', to: getRouterLink('userStars') }
], ],
[ [
{ id: 'personalSetting', label: '个人设置', icon: 'gt-setting-c', to: getRouterLink('setting') }, { id: 'personalSetting', label: '个人设置', icon: 'gt-setting-c', to: getRouterLink('setting') },
{ id: 'help', label: '帮助文档', icon: 'gt-file-c', href: 'https://gitcode.com/Gitcode-offical-team/GitCode-Docs/wiki' } // { id: 'help', label: '帮助文档', icon: 'gt-file-c', href: 'https://gitcode.com/Gitcode-offical-team/GitCode-Docs/wiki' }
], ],
[ [
{ id: 'logout', label: '退出登录', icon: 'gt-exit', action: logout } { id: 'logout', label: '退出登录', icon: 'gt-exit', action: logout }
@@ -132,8 +132,8 @@ const blockList = ref([
@import 'devui-theme/styles-var/devui-var.scss'; @import 'devui-theme/styles-var/devui-var.scss';
.g-user { .g-user {
&-avatar { &-avatar {
height: 35px; height: 30px;
width: 35px; width: 30px;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
margin-left: 2px; margin-left: 2px;

31
src/components/Header/index.vue
View File

@@ -5,8 +5,8 @@
<div class="g-toolbar-left flex-shrink items-center"> <div class="g-toolbar-left flex-shrink items-center">
<div class="flex-center gap-[16px]"> <div class="flex-center gap-[16px]">
<!-- <g-icon v-if="!asideSetShow" @click="$emit('clickMenu')" name="gt-hamburger" size="20px" class="cursor-pointer hover:!text-black" color="#1D1F3A"></g-icon>--> <!-- <g-icon v-if="!asideSetShow" @click="$emit('clickMenu')" name="gt-hamburger" size="20px" class="cursor-pointer hover:!text-black" color="#1D1F3A"></g-icon>-->
<GLink class="g-toolbar-left-logo" href="/" /> <GLink class="g-toolbar-left-logo" :href="baseUrl" />
<GLink class="g-toolbar-left-title" href="/">可信代码库</GLink> <GLink class="g-toolbar-left-title" :href="baseUrl">可信代码库</GLink>
<!-- <Entrance v-if="isLogin" :is-mobile="isMobile" /> --> <!-- <Entrance v-if="isLogin" :is-mobile="isMobile" /> -->
</div> </div>
@@ -14,7 +14,7 @@
<div class="flex-1 flex items-center justify-end"> <div class="flex-1 flex items-center justify-end">
<Search class="g-toolbar-left-search" v-if="!isMobile" :key="$route.fullPath"/> <Search class="g-toolbar-left-search" v-if="!isMobile" :key="$route.fullPath"/>
</div> </div>
<div class="g-toolbar-right gap-[24px] flex-grow-0 flex-shrink-0"> <div class="g-toolbar-right gap-[12px] flex-grow-0 flex-shrink-0">
<GLink <GLink
class="g-toolbar-right-link" class="g-toolbar-right-link"
v-for="item in defaultLinkList" v-for="item in defaultLinkList"
@@ -36,15 +36,18 @@
</template> </template>
<template v-else> <template v-else>
<!--ai copilot--> <!--ai copilot-->
<a class="g-header-copilot" href="/ai-copilot/"> <!-- <a class="g-header-copilot" href="/ai-copilot/">-->
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <!-- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 6C2.5 4.89543 3.39543 4 4.5 4H11.5C12.6046 4 13.5 4.89543 13.5 6V12C13.5 13.1046 12.6046 14 11.5 14H4.5C3.39543 14 2.5 13.1046 2.5 12V6ZM4.5 8C4.5 7.44772 4.94772 7 5.5 7C6.05228 7 6.5 7.44772 6.5 8V9C6.5 9.55228 6.05228 10 5.5 10C4.94772 10 4.5 9.55228 4.5 9V8ZM10.5 7C9.94772 7 9.5 7.44772 9.5 8V9C9.5 9.55228 9.94772 10 10.5 10C11.0523 10 11.5 9.55228 11.5 9V8C11.5 7.44772 11.0523 7 10.5 7Z" fill="white"/> <!-- <path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 6C2.5 4.89543 3.39543 4 4.5 4H11.5C12.6046 4 13.5 4.89543 13.5 6V12C13.5 13.1046 12.6046 14 11.5 14H4.5C3.39543 14 2.5 13.1046 2.5 12V6ZM4.5 8C4.5 7.44772 4.94772 7 5.5 7C6.05228 7 6.5 7.44772 6.5 8V9C6.5 9.55228 6.05228 10 5.5 10C4.94772 10 4.5 9.55228 4.5 9V8ZM10.5 7C9.94772 7 9.5 7.44772 9.5 8V9C9.5 9.55228 9.94772 10 10.5 10C11.0523 10 11.5 9.55228 11.5 9V8C11.5 7.44772 11.0523 7 10.5 7Z" fill="white"/>-->
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M8.75 3.29933C9.19835 3.03997 9.5 2.55521 9.5 2C9.5 1.17157 8.82843 0.5 8 0.5C7.17157 0.5 6.5 1.17157 6.5 2C6.5 2.55521 6.80165 3.03997 7.25 3.29933V5.5H8.75V3.29933ZM0 7C0 6.44772 0.447715 6 1 6H1.5V12H1C0.447715 12 0 11.5523 0 11V7ZM15 6H14.5V12H15C15.5523 12 16 11.5523 16 11V7C16 6.44772 15.5523 6 15 6Z" fill="white"/> <!-- <path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M8.75 3.29933C9.19835 3.03997 9.5 2.55521 9.5 2C9.5 1.17157 8.82843 0.5 8 0.5C7.17157 0.5 6.5 1.17157 6.5 2C6.5 2.55521 6.80165 3.03997 7.25 3.29933V5.5H8.75V3.29933ZM0 7C0 6.44772 0.447715 6 1 6H1.5V12H1C0.447715 12 0 11.5523 0 11V7ZM15 6H14.5V12H15C15.5523 12 16 11.5523 16 11V7C16 6.44772 15.5523 6 15 6Z" fill="white"/>-->
</svg> <!-- </svg>-->
<span class="ml-xs">AI Copilot</span> <!-- <span class="ml-xs">AI Copilot</span>-->
</a> <!-- </a>-->
<Create /> <!-- <Create />-->
<SearchAiHistory /> <!-- <SearchAiHistory />-->
<d-popover content="提示！" trigger="hover" style="background-color: #7693f5; color: #fff">
<d-icon style="font-size: 16px" name="icon-helping" />
</d-popover>
<Notice /> <Notice />
<UserAvatar /> <UserAvatar />
</template> </template>
@@ -74,6 +77,7 @@ import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useAccountStore } from '@/stores/user'; import { useAccountStore } from '@/stores/user';
import { emitEvent } from '@/utils/eventBus'; import { emitEvent } from '@/utils/eventBus';
import Create from './Create.vue'; import Create from './Create.vue';
import Entrance from './Entrance.vue'; import Entrance from './Entrance.vue';
import Notice from './Notice.vue'; import Notice from './Notice.vue';
@@ -84,6 +88,7 @@ import { useWindowScroll } from '@vueuse/core';
import { usePageResize } from '@/utils/hooks/usePageResize'; import { usePageResize } from '@/utils/hooks/usePageResize';
import microApp from '@micro-zoe/micro-app'; import microApp from '@micro-zoe/micro-app';
const baseUrl = import.meta.env.VITE_BASE_URL;
const { y } = useWindowScroll(); const { y } = useWindowScroll();
const defaultLinkList = ref([]); const defaultLinkList = ref([]);
const route = useRoute(); const route = useRoute();
@@ -160,7 +165,7 @@ $header-bg: #fff;
gap: 16px; gap: 16px;
flex-basis: 56px; flex-basis: 56px;
overflow: hidden; overflow: hidden;
padding: 0 32px; padding: 0 24px;
border-bottom: 1px solid #F1F1F8; border-bottom: 1px solid #F1F1F8;
:deep(.devui-button) { :deep(.devui-button) {
padding: 6px 16px; padding: 6px 16px;