From 1dd316a34b47252125dd97cd0dfc3bd5d66b4192 Mon Sep 17 00:00:00 2001
From: liangxu <liangxu0920@qq.com>
Date: Sat, 18 Apr 2026 14:10:27 +0800
Subject: [PATCH] feat(kol-web): add /kol/profile page with nav entry

---
 apps/admin-web/src/layouts/AppShell.vue     |  1 +
 apps/admin-web/src/router/index.ts          | 10 ++++
 apps/admin-web/src/views/KolProfileView.vue | 60 +++++++++++++++++++++
 3 files changed, 71 insertions(+)
 create mode 100644 apps/admin-web/src/views/KolProfileView.vue

diff --git a/apps/admin-web/src/layouts/AppShell.vue b/apps/admin-web/src/layouts/AppShell.vue
index cb23471..2b8f657 100644
--- a/apps/admin-web/src/layouts/AppShell.vue
+++ b/apps/admin-web/src/layouts/AppShell.vue
@@ -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") },
       ],
     });
   }
diff --git a/apps/admin-web/src/router/index.ts b/apps/admin-web/src/router/index.ts
index 976c158..5fc486b 100644
--- a/apps/admin-web/src/router/index.ts
+++ b/apps/admin-web/src/router/index.ts
@@ -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",
diff --git a/apps/admin-web/src/views/KolProfileView.vue b/apps/admin-web/src/views/KolProfileView.vue
new file mode 100644
index 0000000..5e6a233
--- /dev/null
+++ b/apps/admin-web/src/views/KolProfileView.vue
@@ -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>