gao-customer-h5/src/pages/management/UserDetail.vue

<template>
	<div v-can="permissionCodes.user.read" class="user-edit">
		<t-cell-group v-if="currentUser" theme="card">
			<t-cell
				:title="currentUser.name"
				:description="currentUser.role"
			>
				<template #leftIcon>
					<t-image
						class="avatar"
						:src="currentUser.avatar || buildFallbackAvatar(currentUser.name)"
						:alt="currentUser.name"
						fit="cover"
					/>
				</template>
			</t-cell>
		</t-cell-group>

		<t-cell-group v-if="currentUser" theme="card">
			<t-cell title="手机号">
				<template #description>
					<telephone-link :value="currentUser.mobile" placeholder="未填写" />
				</template>
			</t-cell>
			<t-cell title="上次登录时间" :description="currentUser.lastLoginAt || '暂无记录'" />
		</t-cell-group>

		<t-cell-group v-if="currentUser" theme="card">
			<t-cell
				v-can="permissionCodes.user.update"
				title="配置角色"
				note="为用户授权业务角色"
				arrow
				hover
				@click="toRoleAssign"
			>
				<template #leftIcon>
					<t-icon name="usergroup" size="1.75rem" />
				</template>
			</t-cell>
		</t-cell-group>

		<section v-if="currentUser" class="registration-actions bg-white">
			<header>
				<h4 class="title">可登记事件</h4>
			</header>
			<div class="actions">
				<t-tag
					v-for="item in scopeList"
					:key="item"
					variant="light-outline"
					theme="success"
					:content="item"
				/>
				<div v-if="!scopeList.length" class="empty-card">未配置</div>
			</div>
		</section>
		<t-button v-can="permissionCodes.user.update" class="edit" theme="primary" @click="toEdit">编辑用户</t-button>
	</div>
</template>

<script setup lang="ts">
import { Toast } from "tdesign-mobile-vue";
import { UserAPI, type User } from "timi-web";
import EventAPI from "@/api/EventAPI";
import ManagedUserAPI from "@/api/ManagedUserAPI";
import type { ManagedUser } from "@/types/ManagedUser";
import type { EventItem } from "@/types/EventItem";
import { usePermissionSettingsStore } from "@/store/permissionSettingsStore";
import { buildEffectiveRoleCodeSet, getRoleDisplayName } from "@/utils/role";
import { permissionCodes } from "@/utils/permission";

defineOptions({
	name: "UserDetail"
});

const route = useRoute();
const router = useRouter();
const permissionStore = usePermissionSettingsStore();

// ---------- 用户数据 ----------

const managedUser = ref<ManagedUser>();
const eventList = ref<EventItem[]>([]);

const currentUser = computed(() => {
	const item = managedUser.value;
	if (!item) {
		return null;
	}
	const user = item.user;
	return {
		id: item.id || "",
		name: user?.nick || user?.name || "未命名用户",
		role: getRoleDisplayName(item.roleList?.[0], permissionStore.roleList),
		avatar: buildUserAvatar(user),
		mobile: user?.phoneNo || "",
		lastLoginAt: user?.lastLoginAt ? new Date(user.lastLoginAt).toLocaleString() : ""
	};
});
const scopeList = computed(() => {
	const item = managedUser.value;
	if (!item) {
		return [];
	}
	return eventList.value
		.filter(action => canEventItem(action, item))
		.map(item => item.name);
});

// ---------- 导航 ----------

async function toEdit(): Promise<void> {
	if (!currentUser.value) {
		return;
	}

	await router.push(`/management/users/${currentUser.value.id}/edit`);
}

async function toRoleAssign(): Promise<void> {
	if (!currentUser.value) {
		return;
	}

	await router.push({
		path: `/management/users/${currentUser.value.id}/roles`
	});
}

// ---------- 头像 ----------

function buildFallbackAvatar(name: string): string {
	const text = encodeURIComponent((name.trim() || "用户").slice(0, 2));
	return [
		"data:image/svg+xml;charset=UTF-8,",
		"%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E",
		"%3Crect width='120' height='120' rx='24' fill='%232563eb'/%3E",
		"%3Ctext x='50%25' y='54%25' fill='white' font-size='36' font-family='Arial,sans-serif' text-anchor='middle' dominant-baseline='middle'%3E",
		text,
		"%3C/text%3E%3C/svg%3E"
	].join("");
}

function buildUserAvatar(user?: Partial<User>): string {
	const name = user?.nick || user?.name || "用户";
	return isUser(user) ? UserAPI.getAvatarURL(user) || buildFallbackAvatar(name) : buildFallbackAvatar(name);
}

function isUser(user?: Partial<User>): user is User {
	return typeof user?.name === "string";
}

// ---------- 事件范围 ----------

function canEventItem(action: EventItem, item: ManagedUser): boolean {
	const userRoleCodeSet = buildEffectiveRoleCodeSet(item, permissionStore.roleList);
	const roleCodeList = action.roleCodeList || [];
	if (!roleCodeList.length) {
		return false;
	}
	return roleCodeList.some(code => userRoleCodeSet.has(code));
}

// ---------- 页面数据 ----------

async function loadData(): Promise<void> {
	const routeId = String(route.params.id || "");
	const [detail, actions] = await Promise.all([
		ManagedUserAPI.detail(routeId),
		EventAPI.listValid(),
		permissionStore.loadAll()
	]);
	managedUser.value = detail;
	eventList.value = actions || [];
}

onMounted(async () => {
	try {
		await loadData();
	} catch {
		Toast.error("用户详情加载失败");
	}
});
</script>

<style scoped lang="less">
.user-edit {
	gap: 1rem;
	display: flex;
	padding: calc(var(--app-nav-height) + 1rem) 0 4rem 0;
	flex-direction: column;

	.avatar {
		width: 5rem;
		height: 5rem;
		border-radius: .875rem;
	}

	.registration-actions {
		gap: .5rem;
		margin: 0 1rem;
		padding: 1rem;
		display: flex;
		border-radius: 1rem;
		flex-direction: column;

		.title {
			margin: 0;
		}

		.actions {
			gap: .5rem;
			display: flex;

			.empty-card {
				color: #52607a;
			}
		}
	}

	.edit {
		left: 1rem;
		right: 1rem;
		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
		position: fixed;
	}
}

:global(html.theme-dark) {
	.user-edit {
		.panel,
		.bottom-bar {
			background: rgba(15, 23, 42, .92);
			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
		}

		p,
		.info-list li span,
		.empty-card {
			color: #94a3b8;
		}

		.action {
			color: #e2e8f0;
			background: rgba(15, 23, 42, .72);
			border-color: rgba(148, 163, 184, .16);
		}
	}
}
</style>