61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { useQuery } from "@tanstack/vue-query";
|
||
|
|
import { useI18n } from "vue-i18n";
|
||
|
|
|
||
|
|
import { kolManageApi } from "@/lib/api";
|
||
|
|
import { formatError } from "@/lib/errors";
|
||
|
|
import KolPersonaCard from "@/components/kol/KolPersonaCard.vue";
|
||
|
|
|
||
|
|
const { t } = useI18n();
|
||
|
|
|
||
|
|
const profileQuery = useQuery({
|
||
|
|
queryKey: ["kol", "profile"],
|
||
|
|
queryFn: () => kolManageApi.profile(),
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="kol-profile-view">
|
||
|
|
<header class="page-header">
|
||
|
|
<h2 class="page-title">{{ t("kol.profile.title") }}</h2>
|
||
|
|
<p class="page-subtitle">{{ t("kol.profile.subtitle") }}</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<a-skeleton v-if="profileQuery.isPending.value" active avatar :paragraph="{ rows: 3 }" />
|
||
|
|
<a-alert
|
||
|
|
v-else-if="profileQuery.isError.value"
|
||
|
|
type="error"
|
||
|
|
show-icon
|
||
|
|
:message="formatError(profileQuery.error.value) || t('common.noData')"
|
||
|
|
/>
|
||
|
|
<KolPersonaCard
|
||
|
|
v-else-if="profileQuery.data.value"
|
||
|
|
:profile="profileQuery.data.value"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.kol-profile-view {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 24px;
|
||
|
|
}
|
||
|
|
.page-header {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 4px;
|
||
|
|
}
|
||
|
|
.page-title {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #1a1a1a;
|
||
|
|
}
|
||
|
|
.page-subtitle {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 13px;
|
||
|
|
color: #8c8c8c;
|
||
|
|
}
|
||
|
|
</style>
|