feat(kol-web): add /kol/profile page with nav entry
This commit is contained in:
@@ -116,6 +116,7 @@ const navSections = computed(() => {
|
|||||||
items: [
|
items: [
|
||||||
{ key: "/kol/manage", label: t("nav.kolManage") },
|
{ key: "/kol/manage", label: t("nav.kolManage") },
|
||||||
{ key: "/kol/dashboard", label: t("nav.kolDashboard") },
|
{ key: "/kol/dashboard", label: t("nav.kolDashboard") },
|
||||||
|
{ key: "/kol/profile", label: t("nav.kolProfile") },
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -166,6 +166,16 @@ const router = createRouter({
|
|||||||
requiresKol: true,
|
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",
|
path: "kol/marketplace",
|
||||||
name: "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