From b0530ed9211230227a8f94e394eda779d5ae5fc1 Mon Sep 17 00:00:00 2001 From: birt <2499248221@qq.com> Date: 星期日, 13 四月 2025 01:51:52 +0800 Subject: [PATCH] birtzhang --- zhitan-vue/src/layout/components/Navbar.vue | 197 +++++++++++++++++++----------------------------- 1 files changed, 79 insertions(+), 118 deletions(-) diff --git a/zhitan-vue/src/layout/components/Navbar.vue b/zhitan-vue/src/layout/components/Navbar.vue index 3500f36..edf2bbd 100644 --- a/zhitan-vue/src/layout/components/Navbar.vue +++ b/zhitan-vue/src/layout/components/Navbar.vue @@ -12,108 +12,51 @@ </div> <div class="right-menu"> - <!-- <template v-if="appStore.device !== 'mobile'"> - <header-search id="header-search" class="right-menu-item" /> - - <screenfull id="screenfull" class="right-menu-item hover-effect" /> - - <el-tooltip content="甯冨眬澶у皬" effect="dark" placement="bottom"> - <size-select id="size-select" class="right-menu-item hover-effect" /> - </el-tooltip> - </template> --> - <!-- <el-button @click="toggleTheme">鍒囨崲</el-button> --> - <div class="avatar-container"> - <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> + <!-- 鎶ヨ鎸夐挳 --> + <div class="right-menu-item hover-effect nav-btn-item"> + <el-tooltip content="鎶ヨ" effect="dark" placement="bottom"> + <div class="nav-btn" @click="handleAlarm"> + <img src="@/assets/images/alarm.png" alt="鎶ヨ" /> + <span>鎶ヨ</span> </div> - <template #dropdown> - <el-dropdown-menu> - <router-link to="/user/profile"> - <el-dropdown-item>涓汉涓績</el-dropdown-item> - </router-link> - <el-dropdown-item command="toggleTheme"> - <span>椋庢牸鍒囨崲</span> - </el-dropdown-item> - <!-- - <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings"> - <span>甯冨眬璁剧疆</span> - </el-dropdown-item> --> - <el-dropdown-item divided command="logout"> - <span>閫�鍑虹櫥褰�</span> - </el-dropdown-item> - </el-dropdown-menu> - </template> - </el-dropdown> + </el-tooltip> + </div> + + <!-- 澶фā鍨嬫寜閽� --> + <div class="right-menu-item hover-effect nav-btn-item"> + <el-tooltip content="澶фā鍨�" effect="dark" placement="bottom"> + <div class="nav-btn" @click="handleRobot"> + <img src="@/assets/images/robot.png" alt="澶фā鍨�" /> + <span>澶фā鍨�</span> + </div> + </el-tooltip> </div> </div> </div> </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 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() - -function toggleTheme() { - if (settingsStore.sideTheme == "theme-dark") { - settingsStore.sideTheme = "theme-light" - document.querySelector("body").className = "themeLight" - } else { - settingsStore.sideTheme = "theme-dark" - document.querySelector("body").className = "themeDark" - } -} function toggleSideBar() { appStore.toggleSideBar() } -function handleCommand(command) { - switch (command) { - case "toggleTheme": - toggleTheme() - break - case "setLayout": - setLayout() - break - case "logout": - logout() - break - default: - break - } +function handleAlarm() { + // 澶勭悊鎶ヨ鎸夐挳鐐瑰嚮浜嬩欢 + console.log('鎶ヨ鎸夐挳琚偣鍑�') } -function logout() { - ElMessageBox.confirm("纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�", "鎻愮ず", { - confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷", - type: "warning", - }) - .then(() => { - userStore.logOut().then(() => { - location.href = "/index" - }) - }) - .catch(() => {}) -} - -const emits = defineEmits(["setLayout"]) -function setLayout() { - emits("setLayout") +function handleRobot() { + // 澶勭悊澶фā鍨嬫寜閽偣鍑讳簨浠� + console.log('澶фā鍨嬫寜閽鐐瑰嚮') } </script> @@ -188,26 +131,35 @@ } } - .avatar-container { - margin-right: 40px; - - .avatar-wrapper { - margin-top: 5px; - position: relative; - - .user-avatar { - cursor: pointer; - width: 40px; - height: 40px; - border-radius: 10px; + .nav-btn-item { + display: flex; + align-items: center; + margin-right: 20px; + height: 70px; + + .nav-btn { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: #fff; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 4px; + padding: 8px 16px; + + &:hover { + background-color: rgba(255, 255, 255, 0.2); } - - i { - cursor: pointer; - position: absolute; - right: -20px; - top: 25px; - font-size: 12px; + + img { + width: 20px; + height: 20px; + margin-right: 6px; + } + + span { + font-size: 14px; + font-weight: 500; } } } @@ -284,26 +236,35 @@ } } - .avatar-container { - margin-right: 40px; - - .avatar-wrapper { - margin-top: 5px; - position: relative; - - .user-avatar { - cursor: pointer; - width: 40px; - height: 40px; - border-radius: 10px; + .nav-btn-item { + display: flex; + align-items: center; + margin-right: 20px; + height: 70px; + + .nav-btn { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: #333; + background-color: rgba(0, 0, 0, 0.05); + border-radius: 4px; + padding: 8px 16px; + + &:hover { + background-color: rgba(0, 0, 0, 0.1); } - - i { - cursor: pointer; - position: absolute; - right: -20px; - top: 25px; - font-size: 12px; + + img { + width: 20px; + height: 20px; + margin-right: 6px; + } + + span { + font-size: 14px; + font-weight: 500; } } } -- Gitblit v1.9.3