Name card

This commit is contained in:
LittleSheep 2024-03-20 21:16:28 +08:00
parent 96ee0dc3a7
commit 6ac77f3695
4 changed files with 54 additions and 4 deletions

Binary file not shown.

View File

@ -16,6 +16,8 @@
"@fontsource/roboto": "^5.0.12", "@fontsource/roboto": "^5.0.12",
"@mdi/font": "^7.4.47", "@mdi/font": "^7.4.47",
"@unocss/reset": "^0.58.5", "@unocss/reset": "^0.58.5",
"dompurify": "^3.0.10",
"marked": "^12.0.1",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"universal-cookie": "^7.1.0", "universal-cookie": "^7.1.0",
"unocss": "^0.58.5", "unocss": "^0.58.5",
@ -26,6 +28,7 @@
"devDependencies": { "devDependencies": {
"@rushstack/eslint-patch": "^1.3.3", "@rushstack/eslint-patch": "^1.3.3",
"@tsconfig/node20": "^20.1.2", "@tsconfig/node20": "^20.1.2",
"@types/dompurify": "^3.0.5",
"@types/node": "^20.11.25", "@types/node": "^20.11.25",
"@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue": "^5.0.4",
"@vitejs/plugin-vue-jsx": "^3.1.0", "@vitejs/plugin-vue-jsx": "^3.1.0",

View File

@ -1,7 +1,9 @@
<template> <template>
<div> <div>
<v-card class="px-1 mb-3"> <v-card>
<v-card-text class="flex gap-3.5"> <v-img cover class="bg-grey-lighten-2" :height="240" :src="'/api/avatar/' + id.userinfo.data.banner" />
<v-card-text class="flex gap-3.5 px-5 pb-5">
<v-avatar <v-avatar
color="grey-lighten-2" color="grey-lighten-2"
icon="mdi-account-circle" icon="mdi-account-circle"
@ -10,8 +12,19 @@
:image="'/api/avatar/' + id.userinfo.data.avatar" :image="'/api/avatar/' + id.userinfo.data.avatar"
/> />
<div> <div>
<h1 class="text-2xl">{{ id.userinfo.displayName }}</h1> <h1 class="text-2xl cursor-pointer" @click="show.realname = !show.realname">{{ displayName }}</h1>
<p>What can I help you today?</p> <p v-html="description"></p>
<div class="mt-5">
<p class="opacity-80 desc-line">
<v-icon icon="mdi-calendar-blank" size="16" />
<span>Joined at {{ new Date(id.userinfo.data?.created_at)?.toLocaleString() }}</span>
</p>
<p class="opacity-80 desc-line">
<v-icon icon="mdi-cake-variant" size="16" />
<span>Birthday is {{ new Date(id.userinfo.data?.profile.birthday)?.toLocaleString() }}</span>
</p>
</div>
</div> </div>
</v-card-text> </v-card-text>
</v-card> </v-card>
@ -20,10 +33,43 @@
<script setup lang="ts"> <script setup lang="ts">
import { useUserinfo } from "@/stores/userinfo" import { useUserinfo } from "@/stores/userinfo"
import { computed } from "vue"
import { reactive } from "vue"
import { parse } from "marked"
import dompurify from "dompurify"
const id = useUserinfo() const id = useUserinfo()
const displayName = computed(() => {
if (show.realname) {
return (
(id.userinfo.data?.profile?.first_name ?? "Unknown") + " " + (id.userinfo.data?.profile?.last_name ?? "Unknown")
)
} else {
return id.userinfo.displayName
}
})
const description = computed(() => {
if (id.userinfo.data?.description) {
return dompurify().sanitize(parse(id.userinfo.data?.description) as string)
} else {
return "No description yet."
}
})
const show = reactive({
realname: false,
})
</script> </script>
<style scoped>
.desc-line {
display: flex;
align-items: center;
gap: 4px;
}
</style>
<style> <style>
.rounded-card { .rounded-card {
border-radius: 8px; border-radius: 8px;

View File

@ -138,6 +138,7 @@ watch(
if (val.isReady) { if (val.isReady) {
data.value.name = id.userinfo.data.name data.value.name = id.userinfo.data.name
data.value.nick = id.userinfo.data.nick data.value.nick = id.userinfo.data.nick
data.value.description = id.userinfo.data.description
data.value.first_name = id.userinfo.data.profile.first_name data.value.first_name = id.userinfo.data.profile.first_name
data.value.last_name = id.userinfo.data.profile.last_name data.value.last_name = id.userinfo.data.profile.last_name
data.value.birthday = id.userinfo.data.profile.birthday data.value.birthday = id.userinfo.data.profile.birthday