|
|
@@ -11,7 +11,7 @@
|
|
|
<span>上海水务海洋数字孪生模型平台</span>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="16">
|
|
|
+ <el-col :span="15">
|
|
|
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
|
|
|
<el-menu
|
|
|
:default-active="activeMenu"
|
|
|
@@ -32,6 +32,31 @@
|
|
|
</el-menu>
|
|
|
</el-scrollbar>
|
|
|
</el-col>
|
|
|
+ <el-col :span="1">
|
|
|
+ <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="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>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -43,9 +68,11 @@ import variables from '@/assets/styles/variables.module.scss'
|
|
|
import useAppStore from '@/store/modules/app'
|
|
|
import useSettingsStore from '@/store/modules/settings'
|
|
|
import usePermissionStore from '@/store/modules/permission'
|
|
|
+import useUserStore from '@/store/modules/user'
|
|
|
|
|
|
const route = useRoute();
|
|
|
const appStore = useAppStore()
|
|
|
+const userStore = useUserStore()
|
|
|
const settingsStore = useSettingsStore()
|
|
|
const permissionStore = usePermissionStore()
|
|
|
|
|
|
@@ -62,8 +89,21 @@ const activeMenu = computed(() => {
|
|
|
return meta.activeMenu;
|
|
|
}
|
|
|
return path;
|
|
|
+
|
|
|
})
|
|
|
|
|
|
+function handleCommand(command) {
|
|
|
+ switch (command) {
|
|
|
+ case "setLayout":
|
|
|
+ setLayout();
|
|
|
+ break;
|
|
|
+ case "logout":
|
|
|
+ logout();
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
<style>
|
|
|
.headBar {
|
|
|
@@ -99,5 +139,27 @@ const activeMenu = computed(() => {
|
|
|
background-color: transparent !important; /* 使用 !important 确保优先级 */
|
|
|
font-size: 20px !important;
|
|
|
}
|
|
|
+
|
|
|
+.avatar-container {
|
|
|
+ .avatar-wrapper {
|
|
|
+ margin-top: 10px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .user-avatar {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ i {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: -20px;
|
|
|
+ top: 25px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
|
