feat(kol-web): add /kol/profile page with nav entry

This commit is contained in:
2026-04-18 14:10:27 +08:00
parent 4ac7339c2d
commit 1dd316a34b
3 changed files with 71 additions and 0 deletions
+1
View File
@@ -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") },
],
});
}
+10
View File
@@ -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>