fix icon

src/pages/tabs/SettingTab.vue

@@ -15,6 +15,17 @@
 					<div class="header">
 						<div class="name" v-text="currentUser.name" />
 						<gender-icon :value="currentUser.gender" />
+						<div class="roles">
+							<t-tag
+								v-for="role in currentUserRoleList"
+								:key="getRoleKey(role)"
+								size="small"
+								theme="success"
+								variant="outline"
+								:content="getRoleName(role)"
+							/>
+							<span v-if="!currentUserRoleList.length && !isRoleLoading" class="muted" v-text="'未配置角色'" />
+						</div>
 					</div>
 				</template>
 				<template #leftIcon>
@@ -50,8 +61,9 @@
 </template>
 
 <script setup lang="ts">
-import { UserAPI, useUserStore } from "timi-web";
+import { type Role as UserRole, RoleAPI, UserAPI, useUserStore } from "timi-web";
 import { buildFallbackAvatar } from "@/utils/avatar";
+import { moduleCode } from "@/store/permissionSettingsStore";
 import { corePermissionCodes, gaoRoleCodes, permissionCodes } from "@/utils/permission";
 
 type UserAvatarSource = Parameters<typeof UserAPI.getAvatarURL>[0];
@@ -77,6 +89,8 @@ const userStore = useUserStore();
 const currentUser = computed(() => userStore.loginUser.user);
 
 const currentUserAvatar = computed(() => buildUserAvatar(currentUser.value));
+const currentUserRoleList = ref<UserRole[]>([]);
+const isRoleLoading = ref(false);
 const canManagePermission = computed(() => userStore.hasPermissions([
 	corePermissionCodes.role.read,
 	corePermissionCodes.permission.read
@@ -100,7 +114,7 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 				visible: userStore.hasPermissions(permissionCodes.customer.read)
 			},
 			{
-				icon: "usergroup",
+				icon: "chart-combo",
 				path: "/management/customer-data-charts",
 				title: "客户统计数据",
 				visible: userStore.hasPermissions(permissionCodes.stat.read)
@@ -129,7 +143,7 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 				visible: userStore.hasPermissions(permissionCodes.eventRecord.read)
 			},
 			{
-				icon: "chart",
+				icon: "order-list",
 				path: "/management/registration-event-record-rank",
 				title: "登记记录排行",
 				visible: userStore.hasPermissions(permissionCodes.stat.read)
@@ -140,7 +154,7 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 		title: "积分",
 		items: [
 			{
-				icon: "edit-1",
+				icon: "git-merge",
 				path: "/management/points/rules",
 				title: "积分规则",
 				visible: userStore.hasPermissions(permissionCodes.pointRule.read)
@@ -152,13 +166,13 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 				visible: userStore.hasPermissions(permissionCodes.point.accountRead)
 			},
 			{
-				icon: "chart-bubble",
+				icon: "bill",
 				path: "/management/points/ledger",
 				title: "积分流水",
 				visible: userStore.hasPermissions(permissionCodes.point.ledgerRead)
 			},
 			{
-				icon: "edit-1",
+				icon: "user-marked",
 				path: "/management/points/adjust",
 				title: "人工调整积分",
 				visible: userStore.hasPermissions(permissionCodes.point.adjust)
@@ -181,7 +195,7 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 				visible: canManagePermission.value
 			},
 			{
-				icon: "root-list",
+				icon: "usergroup",
 				path: "/management/users",
 				title: "用户管理",
 				visible: canManageUser.value && userStore.hasPermissions(permissionCodes.user.read)
@@ -196,6 +210,27 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 	}
 ]);
 
+function getRoleKey(role: UserRole): string {
+	return role.id || `${role.moduleCode}:${role.code}`;
+}
+
+function getRoleName(role: UserRole): string {
+	return role.name || role.code || "未配置角色";
+}
+
+async function loadCurrentRoleList(): Promise<void> {
+	if (!currentUser.value) {
+		return;
+	}
+
+	isRoleLoading.value = true;
+	try {
+		currentUserRoleList.value = await RoleAPI.currentDetailList(moduleCode);
+	} finally {
+		isRoleLoading.value = false;
+	}
+}
+
 function buildUserAvatar(user?: UserAvatarSource): string {
 	return UserAPI.getAvatarURL(user) || buildFallbackAvatar(currentUser.value?.name, "#0f766e");
 }
@@ -208,6 +243,10 @@ async function go(item: MenuItem | string): Promise<void> {
 
 	await router.push(item.path);
 }
+
+onMounted(async () => {
+	await loadCurrentRoleList();
+});
 </script>
 
 <style scoped lang="less">
@@ -232,6 +271,12 @@ async function go(item: MenuItem | string): Promise<void> {
 				gap: .5rem;
 				display: flex;
 				align-items: center;
+
+				.roles {
+					gap: .25rem;
+					display: flex;
+					flex-wrap: wrap;
+				}
 			}
 		}
 	}
@@ -258,6 +303,7 @@ async function go(item: MenuItem | string): Promise<void> {
 		.footer p {
 			color: #94a3b8;
 		}
+
 	}
 }
 </style>