INIT
This commit is contained in:
kgdxpr
4
src/view/navbar/index.ts
Normal file
4
src/view/navbar/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
import NavBar from './navbar.vue';
|
||||
import SwitchLang from './switch-lang.vue';
|
||||
|
||||
export { NavBar, SwitchLang };
|
||||
241
src/view/navbar/navbar.vue
Normal file
241
src/view/navbar/navbar.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div class="navbar-container">
|
||||
<div class="navbar-top">
|
||||
<div class="navbar-header">
|
||||
<img :src="GlobalConfig.logoPath || Logo" />
|
||||
<span>{{ GlobalConfig.title || "MateChat11" }}</span>
|
||||
</div>
|
||||
<div class="dividing-line"></div>
|
||||
|
||||
<!-- 聊天按钮1 -->
|
||||
<div
|
||||
class="chat-box"
|
||||
:class="{ active: activeChat === 1 }"
|
||||
@click="setActiveChat(1)"
|
||||
>
|
||||
<div class="chat-icon-box" :class="{ active: activeChat === 1 }">
|
||||
<img src="/chat-icon.svg" />
|
||||
</div>
|
||||
<span :class="{ active: activeChat === 1 }">{{ $t("navbar.chat") }}1</span>
|
||||
</div>
|
||||
|
||||
<!-- 聊天按钮2 -->
|
||||
<div
|
||||
class="chat-box"
|
||||
:class="{ active: activeChat === 2 }"
|
||||
@click="setActiveChat(2)"
|
||||
>
|
||||
<div class="chat-icon-box" :class="{ active: activeChat === 2 }">
|
||||
<img src="/chat-icon.svg" />
|
||||
</div>
|
||||
<span :class="{ active: activeChat === 2 }">{{ $t("navbar.chat") }}2</span>
|
||||
</div>
|
||||
|
||||
<!-- 聊天按钮3 -->
|
||||
<div
|
||||
class="chat-box"
|
||||
:class="{ active: activeChat === 3 }"
|
||||
@click="setActiveChat(3)"
|
||||
>
|
||||
<div class="chat-icon-box" :class="{ active: activeChat === 3 }">
|
||||
<img src="/chat-icon.svg" />
|
||||
</div>
|
||||
<span :class="{ active: activeChat === 3 }">{{ $t("navbar.chat") }}3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-bottom">
|
||||
<SwitchLang v-if="!GlobalConfig.language" />
|
||||
<Theme v-if="!GlobalConfig.theme" />
|
||||
<d-popover :position="['right']" trigger="hover">
|
||||
<template #content>
|
||||
<span class="devui-text">{{ $t("navbar.systemSetting") }}</span>
|
||||
</template>
|
||||
<div class="switch-lang-container">
|
||||
<i class="icon-setting system-setting" />
|
||||
</div>
|
||||
</d-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import GlobalConfig from "@/global-config";
|
||||
import { Theme } from "@/view/theme";
|
||||
import SwitchLang from "./switch-lang.vue";
|
||||
import Logo from "../../../public/logo.svg";
|
||||
|
||||
// 管理当前选中的聊天
|
||||
const activeChat = ref(1);
|
||||
|
||||
// 设置选中的聊天
|
||||
const setActiveChat = (chatId: number) => {
|
||||
activeChat.value = chatId;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "devui-theme/styles-var/devui-var.scss";
|
||||
|
||||
:deep(.switch-lang-container) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: $devui-text;
|
||||
border-radius: $devui-border-radius-card;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.navbar-top,
|
||||
.navbar-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-top {
|
||||
margin-top: 12px;
|
||||
|
||||
.navbar-header {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
img {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
span {
|
||||
line-height: 20px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-bottom {
|
||||
padding-bottom: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
:deep(.mc-header-logo-container) {
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
|
||||
.mc-header-title.mc-header-title {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.dividing-line {
|
||||
width: 32px;
|
||||
height: 1px;
|
||||
margin: 16px 0;
|
||||
background-color: #babbc0;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: $devui-font-size-sm;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.chat-icon-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: $devui-border-radius-card;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e0e0e0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:hover {
|
||||
background-color: #f8f9fa;
|
||||
border-color: #d0d0d0;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $devui-brand;
|
||||
border-color: $devui-brand;
|
||||
box-shadow: 0 4px 12px 0 rgba($devui-brand, 0.4);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 23px;
|
||||
background-color: $devui-brand;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
}
|
||||
|
||||
img {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666666;
|
||||
font-size: $devui-font-size-sm;
|
||||
line-height: 20px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.active {
|
||||
color: $devui-brand;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .system-setting {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.devui-text {
|
||||
color: $devui-text;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 940px) {
|
||||
.navbar-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
23
src/view/navbar/switch-lang.vue
Normal file
23
src/view/navbar/switch-lang.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="switch-lang-container" @click="onClick">
|
||||
<span>{{ langStore.currentLang === "zh-cn" ? "EN" : "CN" }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useLangStore } from '@/store';
|
||||
import { LangType } from '@/types';
|
||||
|
||||
const langStore = useLangStore();
|
||||
|
||||
const onClick = () => {
|
||||
if (langStore.currentLang === LangType.CN) {
|
||||
langStore.updateCurrentLang(LangType.EN);
|
||||
} else {
|
||||
langStore.updateCurrentLang(LangType.CN);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
Reference in New Issue
Block a user