upper to timi-ts

src/components/user-profile/index.vue

@@ -2,23 +2,23 @@
 	<div class="tui-user-profile">
 		<template v-if="user">
 			<img
-				:class="(<any>ImageType)[user.profile.wrapperType]"
-				:src="UserAPI.getWrapperURL(user.profile)"
+				:class="getImageClass(user.profile.wrapperType)"
+				:src="wrapperUrl"
 				width="320"
 				alt="背景"
 			/>
 			<img
 				class="avatar"
-				:class="(<any>ImageType)[user.profile.avatarType]"
+				:class="getImageClass(user.profile.avatarType)"
 				width="64"
 				height="64"
-				:src="UserAPI.getAvatarURL(user.profile)"
+				:src="avatarUrl"
 				alt="头像"
 			/>
 			<div class="info">
 				<div class="name">
 					<h3 class="value pink" v-text="user.name"></h3>
-					<user-level :value="Toolkit.toUserLevel(user.profile.exp).value" />
+					<user-level :value="toUserLevel(user.profile.exp).value" />
 				</div>
 				<template v-if="user.profile.sex">
 					<icon
@@ -43,17 +43,55 @@
 </template>
 
 <script lang="ts" setup>
-import { Icon, ImageType, Toolkit, UserAPI, UserLevel, UserView } from "timi-web";
+import { Icon } from "timi-web";
+import { toUserLevel } from "../user-level";
+import { ImageType } from "./types";
+import type {
+	ImageTypeKey,
+	UserImageResolver,
+	UserView
+} from "./types";
 
 defineOptions({
 	name: "UserProfile"
 });
 
 const props = withDefaults(defineProps<{
-	user?: UserView,
+	user?: UserView;
+	resolveAvatarUrl?: UserImageResolver;
+	resolveWrapperUrl?: UserImageResolver;
 }>(), {
 });
 const { user } = toRefs(props);
+
+const wrapperUrl = ref("");
+const avatarUrl = ref("");
+
+async function updateImageUrls(value?: UserView) {
+	const profile = value?.profile;
+
+	wrapperUrl.value = profile?.wrapperUrl || "";
+	avatarUrl.value = profile?.avatarUrl || "";
+	if (!profile) {
+		return;
+	}
+
+	if (props.resolveWrapperUrl) {
+		wrapperUrl.value = await props.resolveWrapperUrl(profile) || wrapperUrl.value;
+	}
+	if (props.resolveAvatarUrl) {
+		avatarUrl.value = await props.resolveAvatarUrl(profile) || avatarUrl.value;
+	}
+}
+
+watch(() => props.user, async value => await updateImageUrls(value), {
+	deep: true,
+	immediate: true
+});
+
+function getImageClass(type?: string) {
+	return type && type in ImageType ? ImageType[type as ImageTypeKey] : "";
+}
 </script>
 
 <style lang="less" scoped>