From 5d36e1f987ef21e44ded2e8a1d06c28094ec1e76 Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期六, 19 四月 2025 12:39:47 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
zhitan-vue/src/components/Avatar/index.vue | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 100 insertions(+), 0 deletions(-)
diff --git a/zhitan-vue/src/components/Avatar/index.vue b/zhitan-vue/src/components/Avatar/index.vue
new file mode 100644
index 0000000..bb8a375
--- /dev/null
+++ b/zhitan-vue/src/components/Avatar/index.vue
@@ -0,0 +1,100 @@
+<template>
+ <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>
+ <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 divided command="logout">
+ <span>閫�鍑虹櫥褰�</span>
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </div>
+</template>
+
+<script setup>
+import { ElMessageBox } from "element-plus"
+import useUserStore from "@/store/modules/user"
+import useSettingsStore from "@/store/modules/settings"
+
+const userStore = useUserStore()
+const settingsStore = useSettingsStore()
+
+function handleCommand(command) {
+ switch (command) {
+ case "toggleTheme":
+ const newTheme = settingsStore.sideTheme === "theme-dark" ? "theme-light" : "theme-dark";
+ settingsStore.changeSetting({ key: "sideTheme", value: newTheme });
+ document.querySelector("body").className = newTheme === "theme-dark" ? "themeDark" : "themeLight";
+ break;
+ case "logout":
+ ElMessageBox.confirm("纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ userStore.logOut().then(() => {
+ location.href = "/index";
+ });
+ })
+ .catch(() => {});
+ break;
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.avatar-container {
+ margin-right: 20px;
+
+ .avatar-wrapper {
+ margin-top: 5px;
+ position: relative;
+ display: flex;
+ align-items: center;
+
+ .user-avatar {
+ cursor: pointer;
+ width: 40px;
+ height: 40px;
+ border-radius: 10px;
+ }
+
+ .el-icon {
+ cursor: pointer;
+ margin-left: 8px;
+ font-size: 12px;
+ color: #ffffff;
+ }
+ }
+}
+
+.right-menu-item {
+ display: inline-block;
+ padding: 0 8px;
+ height: 100%;
+ font-size: 18px;
+ color: #ffffff;
+ vertical-align: text-bottom;
+
+ &.hover-effect {
+ cursor: pointer;
+ transition: background 0.3s;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.1);
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3