Merge branch 'master' of https://gitee.com/youlaiorg/vue3-element-admin
This commit is contained in:
@@ -132,6 +132,16 @@ const onMenuClose = (index: string) => {
|
|||||||
expandedMenuIndexes.value = expandedMenuIndexes.value.filter((item) => item !== index);
|
expandedMenuIndexes.value = expandedMenuIndexes.value.filter((item) => item !== index);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 监听展开的菜单项变化,更新父菜单样式
|
||||||
|
*/
|
||||||
|
watch(
|
||||||
|
() => expandedMenuIndexes.value,
|
||||||
|
() => {
|
||||||
|
updateParentMenuStyles();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 监听菜单模式变化:当菜单模式切换为水平模式时,关闭所有展开的菜单项,
|
* 监听菜单模式变化:当菜单模式切换为水平模式时,关闭所有展开的菜单项,
|
||||||
* 避免在水平模式下菜单项显示错位。
|
* 避免在水平模式下菜单项显示错位。
|
||||||
|
|||||||
@@ -194,7 +194,7 @@ html.sidebar-color-blue {
|
|||||||
// 父菜单激活状态样式 - 当子菜单激活时,父菜单显示激活状态
|
// 父菜单激活状态样式 - 当子菜单激活时,父菜单显示激活状态
|
||||||
.el-sub-menu {
|
.el-sub-menu {
|
||||||
// 当父菜单包含激活子菜单时的样式
|
// 当父菜单包含激活子菜单时的样式
|
||||||
&.has-active-child .el-sub-menu__title {
|
&.has-active-child > .el-sub-menu__title {
|
||||||
color: var(--el-color-primary) !important;
|
color: var(--el-color-primary) !important;
|
||||||
background-color: var(--el-color-primary-light-9) !important;
|
background-color: var(--el-color-primary-light-9) !important;
|
||||||
|
|
||||||
@@ -205,7 +205,7 @@ html.sidebar-color-blue {
|
|||||||
|
|
||||||
// 深色主题下的父菜单激活状态
|
// 深色主题下的父菜单激活状态
|
||||||
html.dark & {
|
html.dark & {
|
||||||
&.has-active-child .el-sub-menu__title {
|
&.has-active-child > .el-sub-menu__title {
|
||||||
color: var(--el-color-primary-light-3) !important;
|
color: var(--el-color-primary-light-3) !important;
|
||||||
background-color: rgba(64, 128, 255, 0.15) !important;
|
background-color: rgba(64, 128, 255, 0.15) !important;
|
||||||
|
|
||||||
@@ -217,7 +217,7 @@ html.sidebar-color-blue {
|
|||||||
|
|
||||||
// 深蓝色侧边栏配色下的父菜单激活状态
|
// 深蓝色侧边栏配色下的父菜单激活状态
|
||||||
html.sidebar-color-blue & {
|
html.sidebar-color-blue & {
|
||||||
&.has-active-child .el-sub-menu__title {
|
&.has-active-child > .el-sub-menu__title {
|
||||||
color: var(--el-color-primary-light-3) !important;
|
color: var(--el-color-primary-light-3) !important;
|
||||||
background-color: rgba(64, 128, 255, 0.2) !important;
|
background-color: rgba(64, 128, 255, 0.2) !important;
|
||||||
|
|
||||||
|
|||||||
@@ -35,13 +35,11 @@ export function setupPermission() {
|
|||||||
const permissionStore = usePermissionStore();
|
const permissionStore = usePermissionStore();
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
|
||||||
// 确保用户信息已加载
|
|
||||||
if (!userStore.userInfo.username) {
|
|
||||||
await userStore.getUserInfo();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 确保动态路由已生成
|
// 确保动态路由已生成
|
||||||
if (!permissionStore.isDynamicRoutesGenerated) {
|
if (!permissionStore.isDynamicRoutesGenerated) {
|
||||||
|
/** 先获取最新的用户信息 */
|
||||||
|
await userStore.getUserInfo();
|
||||||
|
|
||||||
const dynamicRoutes = await permissionStore.generateRoutes();
|
const dynamicRoutes = await permissionStore.generateRoutes();
|
||||||
dynamicRoutes.forEach((route: RouteRecordRaw) => {
|
dynamicRoutes.forEach((route: RouteRecordRaw) => {
|
||||||
router.addRoute(route);
|
router.addRoute(route);
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<el-card class="user-card">
|
<el-card class="user-card">
|
||||||
<div class="user-info">
|
<div class="user-info">
|
||||||
<div class="avatar-wrapper">
|
<div class="avatar-wrapper">
|
||||||
<el-avatar :src="userProfile.avatar" :size="100" />
|
<el-avatar :src="userStore.userInfo.avatar" :size="100" />
|
||||||
<el-button
|
<el-button
|
||||||
type="info"
|
type="info"
|
||||||
class="avatar-edit-btn"
|
class="avatar-edit-btn"
|
||||||
@@ -227,9 +227,12 @@ import UserAPI, {
|
|||||||
} from "@/api/system/user.api";
|
} from "@/api/system/user.api";
|
||||||
|
|
||||||
import FileAPI from "@/api/file.api";
|
import FileAPI from "@/api/file.api";
|
||||||
|
import { useUserStoreHook } from "@/store";
|
||||||
|
|
||||||
import { Camera } from "@element-plus/icons-vue";
|
import { Camera } from "@element-plus/icons-vue";
|
||||||
|
|
||||||
|
const userStore = useUserStoreHook();
|
||||||
|
|
||||||
const userProfile = ref<UserProfileVO>({});
|
const userProfile = ref<UserProfileVO>({});
|
||||||
|
|
||||||
const enum DialogType {
|
const enum DialogType {
|
||||||
@@ -443,12 +446,12 @@ const handleFileChange = async (event: Event) => {
|
|||||||
// 调用文件上传API
|
// 调用文件上传API
|
||||||
try {
|
try {
|
||||||
const data = await FileAPI.uploadFile(file);
|
const data = await FileAPI.uploadFile(file);
|
||||||
// 更新用户头像
|
|
||||||
userProfile.value.avatar = data.url;
|
|
||||||
// 更新用户信息
|
// 更新用户信息
|
||||||
await UserAPI.updateProfile({
|
await UserAPI.updateProfile({
|
||||||
avatar: data.url,
|
avatar: data.url,
|
||||||
});
|
});
|
||||||
|
// 更新用户头像
|
||||||
|
userStore.userInfo.avatar = data.url;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("头像上传失败:" + error);
|
console.error("头像上传失败:" + error);
|
||||||
ElMessage.error("头像上传失败");
|
ElMessage.error("头像上传失败");
|
||||||
|
|||||||
Reference in New Issue
Block a user