feat(kol-web): add /kol/profile page with nav entry
This commit is contained in:
@@ -116,6 +116,7 @@ const navSections = computed(() => {
|
||||
items: [
|
||||
{ key: "/kol/manage", label: t("nav.kolManage") },
|
||||
{ key: "/kol/dashboard", label: t("nav.kolDashboard") },
|
||||
{ key: "/kol/profile", label: t("nav.kolProfile") },
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
@@ -166,6 +166,16 @@ const router = createRouter({
|
||||
requiresKol: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "kol/profile",
|
||||
name: "kol-profile",
|
||||
component: () => import("@/views/KolProfileView.vue"),
|
||||
meta: {
|
||||
titleKey: "kol.profile.title",
|
||||
navKey: "/kol/profile",
|
||||
requiresKol: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "kol/marketplace",
|
||||
name: "kol-marketplace",
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user