From af1c9e588f1de0240390648f9bb56aa486870aff Mon Sep 17 00:00:00 2001
From: chengxiangling <291105840@qq.com>
Date: 星期五, 16 五月 2025 17:40:18 +0800
Subject: [PATCH] 提交高度修改;
---
src/layout/components/Navbar.vue | 144 ++++++++++++++++++++++++++++++++++-------------
1 files changed, 104 insertions(+), 40 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 34da618..9b6f205 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,15 +1,56 @@
<template>
<div class="navbar">
- <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
- <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
- <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
+ <hamburger
+ id="hamburger-container"
+ :is-active="appStore.sidebar.opened"
+ class="hamburger-container"
+ @toggleClick="toggleSideBar"
+ />
+ <breadcrumb
+ v-if="!settingsStore.topNav"
+ id="breadcrumb-container"
+ class="breadcrumb-container"
+ />
+ <top-nav
+ v-if="settingsStore.topNav"
+ id="topmenu-container"
+ class="topmenu-container"
+ />
<div class="right-menu">
- <template v-if="appStore.device !== 'mobile'">
-
- </template>
+ <template v-if="appStore.device !== 'mobile'"> </template>
+ <div class="mt5">
+ <el-dropdown>
+ <img
+ class="zh_icon"
+ v-if="locale === 'zh'"
+ src="@/assets/images/zh.svg"
+ alt="zh"
+ />
+ <img
+ class="zh_icon"
+ v-if="locale === 'en'"
+ src="@/assets/images/en.svg"
+ alt="en"
+ />
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item @click="changeLanguage('zh', 'zh-CN')">{{
+ $t(`common.topNav.zh`)
+ }}</el-dropdown-item>
+ <el-dropdown-item @click="changeLanguage('en', 'en-US')">{{
+ $t(`common.topNav.en`)
+ }}</el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </div>
<div class="avatar-container">
- <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
+ <el-dropdown
+ @command="handleCommand"
+ class="right-menu-item hover-effect"
+ trigger="click"
+ >
<div class="avatar-wrapper">
<img :src="userStore.avatar" class="user-avatar" />
<el-icon><caret-bottom /></el-icon>
@@ -17,13 +58,15 @@
<template #dropdown>
<el-dropdown-menu>
<router-link to="/user/profile">
- <el-dropdown-item>涓汉涓績</el-dropdown-item>
+ <el-dropdown-item>{{
+ $t(`common.topNav.center`)
+ }}</el-dropdown-item>
</router-link>
<!-- <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
<span>甯冨眬璁剧疆</span>
</el-dropdown-item> -->
<el-dropdown-item divided command="logout">
- <span>閫�鍑虹櫥褰�</span>
+ <span>{{ $t(`common.topNav.logout`) }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
@@ -34,25 +77,36 @@
</template>
<script setup>
-import { ElMessageBox } from 'element-plus'
-import Breadcrumb from '@/components/Breadcrumb'
-import TopNav from '@/components/TopNav'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import HeaderSearch from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
-import useAppStore from '@/store/modules/app'
-import useUserStore from '@/store/modules/user'
-import useSettingsStore from '@/store/modules/settings'
-
-const appStore = useAppStore()
-const userStore = useUserStore()
-const settingsStore = useSettingsStore()
+// import { ElMessageBox } from "element-plus";
+import Breadcrumb from "@/components/Breadcrumb";
+import TopNav from "@/components/TopNav";
+import Hamburger from "@/components/Hamburger";
+import Screenfull from "@/components/Screenfull";
+import SizeSelect from "@/components/SizeSelect";
+import HeaderSearch from "@/components/HeaderSearch";
+import RuoYiGit from "@/components/RuoYi/Git";
+import RuoYiDoc from "@/components/RuoYi/Doc";
+import useAppStore from "@/store/modules/app";
+import useUserStore from "@/store/modules/user";
+import useSettingsStore from "@/store/modules/settings";
+import useLanguageStore from "@/store/modules/language";
+import { VxeUI } from "vxe-table";
+import { useI18n } from "vue-i18n"; //瑕佸湪js涓娇鐢ㄥ浗闄呭寲
+const { t, locale } = useI18n();
+const appStore = useAppStore();
+const userStore = useUserStore();
+const settingsStore = useSettingsStore();
+const languageStore = useLanguageStore();
+const { proxy } = getCurrentInstance();
+function changeLanguage(type1, type2) {
+ proxy.$i18n.locale = type1;
+ languageStore.setLocale(type1);
+ VxeUI.setLanguage(type2);
+ // console.log(VxeUI.getLanguage(),'VxeUI.getLanguage()')
+}
function toggleSideBar() {
- appStore.toggleSideBar()
+ appStore.toggleSideBar();
}
function handleCommand(command) {
@@ -69,28 +123,30 @@
}
function logout() {
- ElMessageBox.confirm('纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- userStore.logOut().then(() => {
- location.href = '/index';
+ ElMessageBox.confirm("纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ userStore.logOut().then(() => {
+ location.href = "/index";
+ });
})
- }).catch(() => { });
+ .catch(() => {});
}
-const emits = defineEmits(['setLayout'])
+const emits = defineEmits(["setLayout"]);
function setLayout() {
- emits('setLayout');
+ emits("setLayout");
}
function toggleTheme() {
- settingsStore.toggleTheme()
+ settingsStore.toggleTheme();
}
</script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
.navbar {
height: 50px;
overflow: hidden;
@@ -130,7 +186,15 @@
height: 100%;
line-height: 50px;
display: flex;
-
+ .mt5 {
+ margin-top: 5px;
+ .zh_icon {
+ width: 35px;
+ height: 35px;
+ border: none;
+ outline: none;
+ }
+ }
&:focus {
outline: none;
}
@@ -158,7 +222,7 @@
svg {
transition: transform 0.3s;
-
+
&:hover {
transform: scale(1.15);
}
--
Gitblit v1.9.3