Initial project

src/components/user-profile/index.vue

@@ -0,0 +1,96 @@
+<template>
+	<div class="tui-user-profile">
+		<template v-if="user">
+			<img
+				:class="(<any>ImageType)[user.profile.wrapperType]"
+				:src="UserAPI.getWrapperURL(user.profile)"
+				width="320"
+				alt="背景"
+			/>
+			<img
+				class="avatar"
+				:class="(<any>ImageType)[user.profile.avatarType]"
+				width="64"
+				height="64"
+				:src="UserAPI.getAvatarURL(user.profile)"
+				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" />
+				</div>
+				<template v-if="user.profile.sex">
+					<icon
+						v-if="user.profile.sex === 1"
+						class="sex boy"
+						name="BOY"
+						fill="var(--tui-blue)"
+						v-popup="`男生`"
+					/>
+					<icon
+						v-else
+						class="sex girl"
+						name="GIRL"
+						fill="var(--tui-pink)"
+						v-popup="`女生`"
+					/>
+				</template>
+				<p class="description" v-text="user.profile.description"></p>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { Icon, ImageType, Toolkit, UserAPI, UserLevel, UserView } from "timi-web";
+
+defineOptions({
+	name: "UserProfile"
+});
+
+const props = withDefaults(defineProps<{
+	user?: UserView,
+}>(), {
+});
+const { user } = toRefs(props);
+</script>
+
+<style lang="less" scoped>
+.tui-user-profile {
+	width: 320px;
+	position: relative;
+
+	.avatar {
+		margin: -32px 0 0 16px;
+		border: 1px solid #CDDEF0;
+		position: absolute;
+	}
+
+	.info {
+		margin-top: 4px;
+
+		.name {
+			margin: 0 6px;
+			display: flex;
+			align-items: center;
+			line-height: 22px;
+			padding-left: 84px;
+
+			.value {
+				margin: 0 .5rem 0 0;
+			}
+		}
+
+		.sex {
+			width: 22px;
+			height: 22px;
+		}
+
+		.description {
+			padding: 0 16px;
+			margin-top: 20px;
+		}
+	}
+}
+</style>