From 87a987963e5c8a3510a407272d8acb94628064a7 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Fri, 6 Feb 2026 21:02:17 +0800
Subject: [PATCH] feat: expand portal entry flows and dynamic recommendation
 routing

---
 docs/plan.md                                  | 118 ++++-----
 frontend/portal/src/components/TopNavbar.vue  |   6 +
 frontend/portal/src/router/index.js           |  31 +++
 frontend/portal/src/views/ExploreView.vue     |  94 +++++--
 frontend/portal/src/views/HomeView.vue        | 238 +++++++++++++-----
 frontend/portal/src/views/TopicsView.vue      |  73 +++++-
 frontend/portal/src/views/tenant/HomeView.vue | 156 ++++++++++--
 7 files changed, 542 insertions(+), 174 deletions(-)

diff --git a/docs/plan.md b/docs/plan.md
index 6302564..053d800 100644
--- a/docs/plan.md
+++ b/docs/plan.md
@@ -1,30 +1,30 @@
-# Implementation Plan: portal-senior-color-redesign
+# Implementation Plan: portal-tenant-home-route-query-sync
 
-**Branch**: `[feat/portal-senior-color-redesign]` | **Date**: 2026-02-06 | **Spec**: `N/A`
-**Input**: User request to redesign Portal color system for minimal, senior-friendly UX and provide a branch for visual validation.
+**Branch**: `[main]` | **Date**: 2026-02-06 | **Spec**: `N/A`
+**Input**: User confirmed next step should be “connect route first, then implement query-sync” for `frontend/portal/src/views/tenant/HomeView.vue`.
 
 ## Summary
 
-Implement a senior-friendly, minimal color system for `frontend/portal` by introducing semantic design tokens (default + high-contrast), applying them to shared shells/components (layouts, navbar, footer), and adding PrimeVue-friendly global styling so visual changes are broad, consistent, and easy to validate by product stakeholders.
+Expose `tenant/HomeView.vue` through an active router path, then implement full `genre` query synchronization for its topic filter so navigation into this page with `?genre=...` produces consistent filtering behavior (and optional URL state sync when in-page filters change), while preserving existing content loading and UX.
 
 ## Technical Context
 
-**Language/Version**: Vue 3 (ESM), JavaScript, CSS (Tailwind v4)  
-**Primary Dependencies**: Vite, TailwindCSS v4, PrimeVue 4 (`@primevue/themes/aura`), PrimeIcons  
-**Storage**: N/A  
-**Testing**: `npm -C frontend/portal run lint`, `npm -C frontend/portal run build`  
-**Target Platform**: Web browser (Portal tenant-facing frontend)  
-**Project Type**: Web frontend module (`frontend/portal`)  
-**Performance Goals**: No regressions in initial render and interactivity; preserve current bundle behavior  
-**Constraints**: Keep changes focused on styling/theme surfaces; no route/business-logic changes; avoid generated files; maintain readability and accessibility contrast goals  
-**Scale/Scope**: Global portal style tokens + shared layout/component surfaces for meaningful visual review
+**Language/Version**: Vue 3 + JavaScript (Vite)  
+**Primary Dependencies**: Vue Router, PrimeVue, TailwindCSS  
+**Storage**: N/A (frontend behavior/routing only)  
+**Testing**: `npm -C frontend/portal run lint`, `npm -C frontend/portal run build`, browser flow checks for tenant page + query sync; `go test ./...` for frontend-involved phase completion governance  
+**Target Platform**: Web browser (`frontend/portal`)  
+**Project Type**: Web frontend module  
+**Performance Goals**: No notable regression in tenant page load/filter response  
+**Constraints**: Minimal incremental changes; no backend API contract changes; keep existing page styles/layout; avoid generated-file edits  
+**Scale/Scope**: `frontend/portal/src/router/index.js`, `frontend/portal/src/views/tenant/HomeView.vue` (optional minimal caller path adjustment if needed)
 
 ## Constitution Check
 
-- Conforms to repository planning rule: complete plan defined before non-trivial implementation.
-- Scope limited to `frontend/portal` styling/theme layers and shared UI shell.
-- No generated files are modified.
-- Verification includes frontend lint/build checks before handoff.
+- Plan-first requirement satisfied before non-trivial implementation.
+- Scope constrained to route exposure + query-sync behavior for tenant page.
+- No generated files involved.
+- Acceptance includes frontend page-flow validation and backend `go test ./...` evidence per repository rules.
 
 ## Project Structure
 
@@ -39,66 +39,68 @@ docs/
 
 ```text
 frontend/portal/
-├── src/assets/main.css
-├── src/main.js
-├── src/layout/LayoutMain.vue
-├── src/layout/LayoutUser.vue
-├── src/layout/LayoutCreator.vue
-├── src/layout/LayoutAuth.vue
-├── src/components/TopNavbar.vue
-└── src/components/AppFooter.vue
+├── src/router/index.js
+├── src/views/tenant/HomeView.vue
+└── src/views/HomeView.vue (optional tiny entry-path adjustment only if needed)
 ```
 
-**Structure Decision**: Apply color redesign through centralized tokens and shared shell/components to maximize consistency and minimize page-level edits.
+**Structure Decision**: Activate existing `tenant/HomeView.vue` via router first, then add robust route-query synchronization inside that page to avoid broad refactor.
 
 ## Plan Phases
 
-1. **Token Foundation**
-   - Define semantic color tokens for senior-light and high-contrast modes.
-   - Map tokens for Tailwind and global CSS usage.
-2. **Shared Surface Application**
-   - Update shared layouts/navbar/footer from hardcoded slate/dark palette to semantic tokens.
-   - Remove distracting decorative backgrounds and improve contrast/focus cues.
-3. **PrimeVue Alignment + Verification**
-   - Add global PrimeVue color overrides for button/input/panel/readability consistency.
-   - Run lint/build verification and prepare branch handoff for visual QA.
+1. **Phase 1 — Route Activation**
+   - Add explicit route entry for tenant profile page to render `views/tenant/HomeView.vue`.
+   - Ensure route path does not conflict with existing tenant homepage / creator routes.
+
+2. **Phase 2 — Topic/Query Synchronization**
+   - Parse incoming `route.query.genre` and initialize selected topic filter.
+   - Watch query changes to keep selected topic in sync.
+   - Optionally sync selected topic back to URL query (replace) for deep-link consistency.
+   - Keep sort/topic/search/loadMore behavior consistent with existing logic.
+
+3. **Phase 3 — Entry Path and Validation**
+   - Ensure there is at least one practical navigation path to this newly connected route.
+   - Run diagnostics and command checks.
+   - Verify browser flows for route rendering and query-driven filtering.
 
 ## Tasks
 
-1. Create and verify a dedicated feature branch for this redesign.
-2. Rebuild `src/assets/main.css` with:
-   - semantic palette tokens,
-   - default + high-contrast variable sets,
-   - global base styles (body/link/focus),
-   - PrimeVue global color overrides.
-3. Ensure `src/main.js` imports and theme setup remain compatible after token changes.
-4. Refactor shared shells to semantic colors and reduced visual noise:
-   - `LayoutMain.vue`, `LayoutUser.vue`, `LayoutCreator.vue`, `LayoutAuth.vue`.
-5. Refactor shared navigation/footer surfaces to semantic tokens:
-   - `TopNavbar.vue`, `AppFooter.vue`.
-6. Run portal checks (`lint`, `build`) and resolve any regressions caused by this change set.
-7. Provide branch name and reviewer instructions for visual validation.
+1. Add tenant profile route in `router/index.js` to load `views/tenant/HomeView.vue`.
+2. In `tenant/HomeView.vue`, add helper to normalize `route.query.genre` and initialize `selectedTopic` from it.
+3. Add watcher for route query changes (`genre`) to update in-page filter state.
+4. Add safe guard/initialization flag to avoid duplicate or race-condition fetches.
+5. Ensure existing data fetch (`query.genre`) continues to rely on selected topic string.
+6. (If needed) Add minimal navigation entry in existing pages so new route is reachable through UI.
+7. Run `lsp_diagnostics` on changed files.
+8. Run `npm -C frontend/portal run lint`.
+9. Run `npm -C frontend/portal run build`.
+10. Run backend `go test ./...`.
+11. Execute browser verification for route access and `genre` prefilter behavior.
 
 ## Dependencies
 
-- Phase 2 depends on semantic token completion from Phase 1.
-- Phase 3 depends on Phase 2 to verify final visual consistency and avoid rework.
-- Reviewer validation depends on successful lint/build completion.
+- Phase 2 depends on Phase 1 route activation.
+- Phase 3 depends on completed route/query behavior.
+- Browser acceptance depends on build/runtime availability.
 
 ## Acceptance Criteria
 
-- A new branch exists containing only portal color-system redesign changes.
-- Portal shared shells/components use semantic color tokens instead of ad-hoc hardcoded palette where modified.
-- High-contrast mode token set is available for accessibility-forward validation.
+- `tenant/HomeView.vue` is reachable via a real router path (not dead code).
+- Entering tenant page with `?genre=xxx` preselects topic filter and requests content with matching `genre` query.
+- Query updates (navigation changes) keep topic filter state synchronized.
+- Existing tenant page sort/topic/search/loadMore behaviors remain functional.
+- No new 404 regressions introduced by route activation.
+- `lsp_diagnostics` clean on changed files (or only known template-analysis false positives reported).
 - `npm -C frontend/portal run lint` passes.
 - `npm -C frontend/portal run build` passes.
-- User can run portal and visually compare revised palette/readability across login, home shell, user shell, and creator shell.
+- backend `go test ./...` passes (or unrelated pre-existing failures explicitly reported).
+- Browser page-flow checks pass for route + query-sync scenarios.
 
 ## Risks
 
-- Broad visual changes may impact component contrast unexpectedly in edge views not directly edited.
-- PrimeVue internal styles can override utility classes; requires targeted global overrides.
-- Overly aggressive recolor could reduce brand recognition; keep primary brand hue stable while improving accessibility.
+- Newly connected route may require clearer entry path from existing UI to be practically discoverable.
+- Query-sync watchers can accidentally trigger duplicate fetches without initialization guards.
+- Topic list values and query genre may not always align exactly, requiring graceful fallback behavior.
 
 ## Complexity Tracking
 
diff --git a/frontend/portal/src/components/TopNavbar.vue b/frontend/portal/src/components/TopNavbar.vue
index 96b1062..53f30e0 100644
--- a/frontend/portal/src/components/TopNavbar.vue
+++ b/frontend/portal/src/components/TopNavbar.vue
@@ -76,6 +76,12 @@ const logout = () => {
           active-class="text-primary-600"
           >专题</router-link
         >
+        <router-link
+          :to="tenantRoute('/channel')"
+          class="text-muted font-medium hover:text-primary-600"
+          active-class="text-primary-600"
+          >频道</router-link
+        >
       </div>
 
       <!-- Center-Right: Global Search -->
diff --git a/frontend/portal/src/router/index.js b/frontend/portal/src/router/index.js
index 4389cd8..617ba4f 100644
--- a/frontend/portal/src/router/index.js
+++ b/frontend/portal/src/router/index.js
@@ -7,6 +7,32 @@ import LayoutCreator from "../layout/LayoutCreator.vue";
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
+    {
+      path: "/",
+      component: LayoutMain,
+      children: [
+        {
+          path: "",
+          component: () => import("../views/HomeView.vue"),
+        },
+        {
+          path: "contents/:id",
+          component: () => import("../views/content/DetailView.vue"),
+        },
+        {
+          path: "explore",
+          component: () => import("../views/ExploreView.vue"),
+        },
+        {
+          path: "topics",
+          component: () => import("../views/TopicsView.vue"),
+        },
+        {
+          path: "creator/apply",
+          component: () => import("../views/creator/ApplyView.vue"),
+        },
+      ],
+    },
     {
       path: "/t/:tenantCode",
       component: LayoutMain,
@@ -16,6 +42,11 @@ const router = createRouter({
           name: "home",
           component: () => import("../views/HomeView.vue"),
         },
+        {
+          path: "channel",
+          name: "tenant-channel",
+          component: () => import("../views/tenant/HomeView.vue"),
+        },
         {
           path: "contents/:id",
           name: "content-detail",
diff --git a/frontend/portal/src/views/ExploreView.vue b/frontend/portal/src/views/ExploreView.vue
index 3c4b70f..7a76791 100644
--- a/frontend/portal/src/views/ExploreView.vue
+++ b/frontend/portal/src/views/ExploreView.vue
@@ -1,7 +1,8 @@
 <script setup>
-import { ref, watch, onMounted } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { contentApi } from "../api/content";
+import { commonApi } from "../api/common";
 import { tenantPath } from "../utils/tenant";
 
 const route = useRoute();
@@ -12,6 +13,29 @@ const sort = ref("latest");
 const keyword = ref("");
 const contents = ref([]);
 const page = ref(1);
+const initializing = ref(true);
+
+const STATIC_GENRES = [
+  "全部",
+  "京剧",
+  "昆曲",
+  "越剧",
+  "黄梅戏",
+  "豫剧",
+  "评剧",
+  "秦腔",
+  "河北梆子",
+];
+
+const filters = reactive({
+  genres: [...STATIC_GENRES],
+  prices: [
+    { label: "全部", value: "all" },
+    { label: "免费", value: "free" },
+    { label: "付费", value: "paid" },
+    { label: "会员专享", value: "member" },
+  ],
+});
 
 const fetchContents = async (append = false) => {
   const params = {
@@ -41,33 +65,59 @@ const loadMore = () => {
 };
 
 watch([selectedGenre, selectedPrice, sort], () => {
+  if (initializing.value) return;
   page.value = 1;
   fetchContents();
 });
 
-onMounted(() => {
-  fetchContents();
-});
+const fetchGenres = async () => {
+  try {
+    const res = await commonApi.getOptions();
+    const dynamicGenres = Array.from(
+      new Set(
+        (res?.content_genre || [])
+          .map((opt) => opt?.value)
+          .filter((value) => typeof value === "string" && value),
+      ),
+    );
 
-const filters = {
-  genres: [
-    "全部",
-    "京剧",
-    "昆曲",
-    "越剧",
-    "黄梅戏",
-    "豫剧",
-    "评剧",
-    "秦腔",
-    "河北梆子",
-  ],
-  prices: [
-    { label: "全部", value: "all" },
-    { label: "免费", value: "free" },
-    { label: "付费", value: "paid" },
-    { label: "会员专享", value: "member" },
-  ],
+    filters.genres = dynamicGenres.length
+      ? ["全部", ...dynamicGenres]
+      : [...STATIC_GENRES];
+  } catch (e) {
+    console.error("Failed to fetch dynamic genres, using fallback", e);
+    filters.genres = [...STATIC_GENRES];
+  }
+
+  // 1. Sync from query if present
+  if (route.query.genre && filters.genres.includes(route.query.genre)) {
+    selectedGenre.value = route.query.genre;
+  }
+  // 2. Guard: if selected genre is no longer valid, reset to "全部"
+  else if (!filters.genres.includes(selectedGenre.value)) {
+    selectedGenre.value = "全部";
+  }
 };
+
+watch(
+  () => route.query.genre,
+  (newGenre) => {
+    if (newGenre && filters.genres.includes(newGenre)) {
+      selectedGenre.value = newGenre;
+    } else if (!newGenre) {
+      selectedGenre.value = "全部";
+    }
+  },
+);
+
+onMounted(async () => {
+  await fetchGenres();
+  // fetchContents handled by watcher or initial call if not triggered
+  if (initializing.value) {
+    initializing.value = false;
+    fetchContents();
+  }
+});
 </script>
 
 <template>
diff --git a/frontend/portal/src/views/HomeView.vue b/frontend/portal/src/views/HomeView.vue
index c4c4ad3..815614d 100644
--- a/frontend/portal/src/views/HomeView.vue
+++ b/frontend/portal/src/views/HomeView.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
+import { commonApi } from "../api/common";
 import { contentApi } from "../api/content";
 import { tenantApi } from "../api/tenant";
 import { tenantPath } from "../utils/tenant";
@@ -18,16 +19,129 @@ const page = ref(1);
 const hasMore = ref(false);
 const activeBannerIndex = ref(0);
 
+const activeTab = ref("recommend");
+const activeGenre = ref("");
+
+const fallbackGenres = [
+  { label: "全部", value: "" },
+  { label: "京剧", value: "京剧" },
+  { label: "昆曲", value: "昆曲" },
+  { label: "越剧", value: "越剧" },
+  { label: "名家名段", value: "名家名段" },
+  { label: "戏曲教学", value: "戏曲教学" },
+];
+
+const genres = ref(fallbackGenres);
+
+const getFeedSort = () => {
+  if (activeTab.value === "hot") return "hot";
+  return "latest";
+};
+
+const loadGenres = async () => {
+  try {
+    const res = await commonApi.getOptions();
+    const dynamicGenres = (res?.content_genre || [])
+      .filter((opt) => opt?.value)
+      .map((opt) => ({ label: opt.value, value: opt.value }));
+
+    genres.value = dynamicGenres.length
+      ? [{ label: "全部", value: "" }, ...dynamicGenres]
+      : fallbackGenres;
+
+    if (!genres.value.some((item) => item.value === activeGenre.value)) {
+      activeGenre.value = "";
+    }
+  } catch {
+    genres.value = fallbackGenres;
+    if (!genres.value.some((item) => item.value === activeGenre.value)) {
+      activeGenre.value = "";
+    }
+  }
+};
+
+const getCreatorPath = (creator) => {
+  const code =
+    creator.tenant_code || creator.tenantCode || creator.code || creator.id;
+  return `/t/${code}`;
+};
+
+const getCreatorChannelPath = (creator) => {
+  const code = creator.tenant_code || creator.tenantCode || creator.code;
+  if (!code) return "";
+
+  const id = creator.id;
+  if (!Number.isInteger(id) || id <= 0) return "";
+
+  return `/t/${code}/channel`;
+};
+
+const getFeedParams = () => {
+  const params = {
+    page: page.value,
+    limit: 10,
+    sort: getFeedSort(),
+    keyword: searchKeyword.value,
+  };
+  if (activeGenre.value) {
+    params.genre = activeGenre.value;
+  }
+  return params;
+};
+
+const fetchFeed = async (isLoadMore = false) => {
+  if (!isLoadMore) {
+    loading.value = true;
+    page.value = 1;
+  }
+
+  try {
+    const res = await contentApi.list(getFeedParams());
+
+    if (isLoadMore) {
+      if (res.items) contents.value.push(...res.items);
+    } else {
+      contents.value = res.items || [];
+    }
+    hasMore.value = (res.total || 0) > contents.value.length;
+  } catch (e) {
+    console.error("Feed load error:", e);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const switchTab = (tab) => {
+  if (activeTab.value === tab) return;
+  activeTab.value = tab;
+  fetchFeed();
+};
+
+const switchGenre = (genreValue) => {
+  if (activeGenre.value === genreValue) return;
+  activeGenre.value = genreValue;
+  fetchFeed();
+};
+
 const fetchData = async () => {
   loading.value = true;
   try {
-    const [bannerRes, trendingRes, creatorsRes, feedRes] = await Promise.all([
+    // Resilient loading using Promise.allSettled
+    const results = await Promise.allSettled([
       contentApi.list({ is_pinned: true, limit: 5 }),
       contentApi.list({ sort: "hot", limit: 3 }),
       tenantApi.list({ limit: 5 }),
       contentApi.list({ page: 1, limit: 10, sort: "latest" }),
     ]);
 
+    const getVal = (res, def = { items: [] }) =>
+      res.status === "fulfilled" ? res.value : def;
+
+    const bannerRes = getVal(results[0]);
+    const trendingRes = getVal(results[1]);
+    const creatorsRes = getVal(results[2]);
+    const feedRes = getVal(results[3]);
+
     if (bannerRes.items && bannerRes.items.length > 0) {
       bannerItems.value = bannerRes.items;
     } else if (feedRes.items && feedRes.items.length > 0) {
@@ -38,7 +152,7 @@ const fetchData = async () => {
     recommendedCreators.value = creatorsRes.items || [];
 
     contents.value = feedRes.items || [];
-    hasMore.value = feedRes.total > contents.value.length;
+    hasMore.value = (feedRes.total || 0) > contents.value.length;
   } catch (e) {
     console.error(e);
   } finally {
@@ -50,23 +164,25 @@ const handleSearch = async () => {
   page.value = 1;
   loading.value = true;
   matchedCreators.value = [];
+
+  // Search resets tab context to 'recommend' (latest) effectively
+  // but we can just invoke fetchFeed with current tab if we want to respect it.
+  // Requirement says: "Feed requests respect current tab mode + keyword"
+  // So we do NOT reset activeTab here.
+
   try {
-    const promises = [
-      contentApi.list({ page: 1, limit: 10, keyword: searchKeyword.value }),
-    ];
+    const promises = [fetchFeed()];
     if (searchKeyword.value) {
-      promises.push(tenantApi.list({ keyword: searchKeyword.value, limit: 5 }));
-    }
-
-    const results = await Promise.all(promises);
-    const contentRes = results[0];
-
-    contents.value = contentRes.items || [];
-    hasMore.value = contentRes.total > contents.value.length;
-
-    if (results[1]) {
-      matchedCreators.value = results[1].items || [];
+      promises.push(
+        tenantApi
+          .list({ keyword: searchKeyword.value, limit: 5 })
+          .then((res) => {
+            matchedCreators.value = res.items || [];
+          })
+          .catch((e) => console.error(e)),
+      );
     }
+    await Promise.all(promises);
   } finally {
     loading.value = false;
   }
@@ -74,18 +190,13 @@ const handleSearch = async () => {
 
 const loadMore = async () => {
   page.value++;
-  const res = await contentApi.list({
-    page: page.value,
-    limit: 10,
-    keyword: searchKeyword.value,
-  });
-  if (res.items) {
-    contents.value.push(...res.items);
-    hasMore.value = res.total > contents.value.length;
-  }
+  await fetchFeed(true);
 };
 
-onMounted(fetchData);
+onMounted(async () => {
+  await loadGenres();
+  await fetchData();
+});
 </script>
 
 <template>
@@ -168,17 +279,35 @@ onMounted(fetchData);
       >
         <div class="flex items-center gap-8">
           <button
-            class="text-lg font-bold text-primary-600 border-b-2 border-primary-600 -mb-4.5 pb-4 px-2"
+            @click="switchTab('recommend')"
+            class="text-lg -mb-4.5 pb-4 px-2 transition-colors"
+            :class="[
+              activeTab === 'recommend'
+                ? 'font-bold text-primary-600 border-b-2 border-primary-600'
+                : 'font-medium text-slate-500 hover:text-slate-800',
+            ]"
           >
             推荐
           </button>
           <button
-            class="text-lg font-medium text-slate-500 hover:text-slate-800 -mb-4.5 pb-4 px-2 transition-colors"
+            @click="switchTab('latest')"
+            class="text-lg -mb-4.5 pb-4 px-2 transition-colors"
+            :class="[
+              activeTab === 'latest'
+                ? 'font-bold text-primary-600 border-b-2 border-primary-600'
+                : 'font-medium text-slate-500 hover:text-slate-800',
+            ]"
           >
             最新
           </button>
           <button
-            class="text-lg font-medium text-slate-500 hover:text-slate-800 -mb-4.5 pb-4 px-2 transition-colors"
+            @click="switchTab('hot')"
+            class="text-lg -mb-4.5 pb-4 px-2 transition-colors"
+            :class="[
+              activeTab === 'hot'
+                ? 'font-bold text-primary-600 border-b-2 border-primary-600'
+                : 'font-medium text-slate-500 hover:text-slate-800',
+            ]"
           >
             热门
           </button>
@@ -201,34 +330,17 @@ onMounted(fetchData);
       <!-- Tags -->
       <div class="flex flex-wrap gap-3">
         <button
-          class="px-4 py-1.5 rounded-full bg-slate-900 text-white text-sm font-medium"
+          v-for="genre in genres"
+          :key="genre.label"
+          @click="switchGenre(genre.value)"
+          class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors"
+          :class="[
+            activeGenre === genre.value
+              ? 'bg-slate-900 text-white'
+              : 'bg-slate-100 text-slate-600 hover:bg-slate-200',
+          ]"
         >
-          全部
-        </button>
-        <button
-          class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors"
-        >
-          京剧
-        </button>
-        <button
-          class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors"
-        >
-          昆曲
-        </button>
-        <button
-          class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors"
-        >
-          越剧
-        </button>
-        <button
-          class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors"
-        >
-          名家名段
-        </button>
-        <button
-          class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors"
-        >
-          戏曲教学
+          {{ genre.label }}
         </button>
       </div>
     </div>
@@ -248,7 +360,7 @@ onMounted(fetchData);
               v-for="creator in matchedCreators"
               :key="creator.id"
               class="flex items-center gap-3 p-3 rounded-xl hover:bg-slate-50 transition-colors cursor-pointer border border-transparent hover:border-slate-200"
-              @click="$router.push(`/t/${creator.id}`)"
+              @click="$router.push(getCreatorPath(creator))"
             >
               <img
                 :src="
@@ -397,12 +509,12 @@ onMounted(fetchData);
                   `https://api.dicebear.com/7.x/avataaars/svg?seed=${creator.id}`
                 "
                 class="w-10 h-10 rounded-full cursor-pointer"
-                @click="$router.push(`/t/${creator.id}`)"
+                @click="$router.push(getCreatorPath(creator))"
               />
               <div class="flex-1 min-w-0">
                 <div
                   class="font-bold text-slate-900 text-sm truncate hover:text-primary-600 cursor-pointer"
-                  @click="$router.push(`/t/${creator.id}`)"
+                  @click="$router.push(getCreatorPath(creator))"
                 >
                   {{ creator.name }}
                 </div>
@@ -410,11 +522,13 @@ onMounted(fetchData);
                   粉丝 {{ creator.stats?.followers || 0 }}
                 </div>
               </div>
-              <button
+              <router-link
+                v-if="getCreatorChannelPath(creator)"
+                :to="getCreatorChannelPath(creator)"
                 class="px-3 py-1 bg-primary-50 text-primary-600 text-xs font-bold rounded-full hover:bg-primary-100"
               >
-                关注
-              </button>
+                频道
+              </router-link>
             </div>
             <div
               v-if="recommendedCreators.length === 0"
diff --git a/frontend/portal/src/views/TopicsView.vue b/frontend/portal/src/views/TopicsView.vue
index 94a3f41..c1f48d4 100644
--- a/frontend/portal/src/views/TopicsView.vue
+++ b/frontend/portal/src/views/TopicsView.vue
@@ -1,11 +1,14 @@
 <script setup>
-import { ref } from "vue";
-import { useRoute } from "vue-router";
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { tenantPath } from "../utils/tenant";
+import { contentApi } from "../api/content";
 
 const route = useRoute();
+const router = useRouter();
 const tenantRoute = (path) => tenantPath(path, route);
-const topics = ref([
+
+const STATIC_TOPICS = [
   {
     id: 1,
     title: "程派艺术赏析：幽咽婉转后的风骨",
@@ -56,7 +59,59 @@ const topics = ref([
     date: "2024-12-05",
     count: 15,
   },
-]);
+];
+
+const topics = ref([...STATIC_TOPICS]);
+
+const KNOWN_GENRES = [
+  "京剧",
+  "昆曲",
+  "越剧",
+  "黄梅戏",
+  "豫剧",
+  "评剧",
+  "秦腔",
+  "河北梆子",
+];
+
+const findGenre = (topic) => {
+  const text = (topic.title + topic.tag).toLowerCase();
+  return KNOWN_GENRES.find((g) => text.includes(g));
+};
+
+const navigateToTopic = (topic) => {
+  const genre = findGenre(topic);
+  const target = tenantRoute("/explore");
+
+  if (genre) {
+    router.push({ path: target, query: { genre } });
+  } else {
+    // Fallback: navigate to explore without specific genre if no match found
+    router.push(target);
+  }
+};
+
+onMounted(async () => {
+  try {
+    const res = await contentApi.listTopics();
+    if (res && Array.isArray(res) && res.length > 0) {
+      topics.value = res.map((item, index) => ({
+        id: item.id || index + 100, // Safe ID
+        title: item.title || "未命名专题",
+        desc: item.desc || `探索${item.title || "精彩内容"}的更多详情。`,
+        cover:
+          item.cover ||
+          "https://images.unsplash.com/photo-1514306191717-452ec28c7f31?auto=format&fit=crop&w=800",
+        tag: item.tag || "精选",
+        date: item.date || new Date().toISOString().split("T")[0],
+        count: item.count || 0,
+      }));
+    }
+  } catch (err) {
+    console.warn("Failed to load topics, using fallback:", err);
+    // Keep STATIC_TOPICS
+  }
+});
 </script>
 
 <template>
@@ -68,8 +123,9 @@ const topics = ref([
 
     <!-- 1. Hero Topic -->
     <div
+      v-if="topics.length > 0"
       class="relative w-full h-[400px] rounded-2xl overflow-hidden mb-12 group cursor-pointer shadow-lg"
-      @click="$router.push(tenantRoute(`/explore?topic=${topics[0].id}`))"
+      @click="navigateToTopic(topics[0])"
     >
       <img
         :src="topics[0].cover"
@@ -112,13 +168,16 @@ const topics = ref([
     </div>
 
     <!-- 2. Masonry-like Grid -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+    <div
+      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+      v-if="topics.length > 1"
+    >
       <div
         v-for="(topic, idx) in topics.slice(1)"
         :key="topic.id"
         class="group bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden hover:shadow-xl transition-all cursor-pointer flex flex-col"
         :class="{ 'lg:col-span-2 flex-row': idx === 0 }"
-        @click="$router.push(tenantRoute(`/explore?topic=${topic.id}`))"
+        @click="navigateToTopic(topic)"
       >
         <!-- Cover -->
         <div
diff --git a/frontend/portal/src/views/tenant/HomeView.vue b/frontend/portal/src/views/tenant/HomeView.vue
index ff79c86..e6ee700 100644
--- a/frontend/portal/src/views/tenant/HomeView.vue
+++ b/frontend/portal/src/views/tenant/HomeView.vue
@@ -1,14 +1,25 @@
 <script setup>
 import { useToast } from "primevue/usetoast";
 import { computed, onMounted, ref, watch } from "vue";
-import { useRoute } from "vue-router";
-import { tenantApi } from "../../api/tenant";
+import { useRoute, useRouter } from "vue-router";
 import { contentApi } from "../../api/content";
+import { tenantApi } from "../../api/tenant";
 import { tenantPath } from "../../utils/tenant";
 
 const route = useRoute();
+const router = useRouter();
 const tenantRoute = (path) => tenantPath(path, route);
 const toast = useToast();
+
+const tenantID = ref(0);
+
+const resolveTenantIDFromRoute = () => {
+  const raw = route.params.id;
+  const parsed = Number(raw);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : 0;
+};
+
+const showFollowActions = computed(() => tenantID.value > 0);
 const currentTab = ref("home");
 const isFollowing = ref(false);
 const tenant = ref({});
@@ -25,46 +36,57 @@ const hasMore = ref(false);
 const sortOption = ref("latest");
 const selectedTopic = ref("");
 const limit = 10;
+const querySyncReady = ref(false);
+
+const normalizeGenreQuery = (value) => {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (Array.isArray(value) && value.length > 0) {
+    return typeof value[0] === "string" ? value[0] : "";
+  }
+  return "";
+};
 
 const fetchData = async (isLoadMore = false) => {
   if (!isLoadMore) loading.value = true;
   try {
-    const id = route.params.id;
+    const effectiveTenantID = tenantID.value || resolveTenantIDFromRoute();
     const query = {
-      tenant_id: id,
       sort: sortOption.value,
       page: page.value,
       limit: limit,
       keyword: searchKeyword.value,
     };
+    if (effectiveTenantID > 0) {
+      query.tenant_id = effectiveTenantID;
+    }
     if (selectedTopic.value) {
       query.genre = selectedTopic.value;
     }
 
     const reqs = [contentApi.list(query)];
 
-    // Only fetch tenant info & featured on first load
+    // Only fetch featured on first load
     if (!isLoadMore && page.value === 1) {
-      reqs.push(tenantApi.get(id));
-      reqs.push(
-        contentApi.list({
-          tenant_id: id,
-          is_pinned: true,
-          genre: selectedTopic.value || "",
-        }),
-      );
+      const pinnedQuery = {
+        is_pinned: true,
+        genre: selectedTopic.value || "",
+      };
+      if (effectiveTenantID > 0) {
+        pinnedQuery.tenant_id = effectiveTenantID;
+      }
+
+      reqs.push(contentApi.list(pinnedQuery));
     }
 
     const results = await Promise.all(reqs);
     const c = results[0]; // Content List
 
     if (!isLoadMore && page.value === 1) {
-      const t = results[1];
-      const f = results[2];
-      tenant.value = t || {};
-      isFollowing.value = t?.is_following || false;
+      const f = results[1];
 
-      if (f && f.items && f.items.length > 0) {
+      if (f?.items?.length > 0) {
         featuredContent.value = f.items[0];
       } else {
         featuredContent.value = null;
@@ -92,12 +114,34 @@ const fetchData = async (isLoadMore = false) => {
   }
 };
 
-onMounted(() => fetchData());
 onMounted(async () => {
+  selectedTopic.value = normalizeGenreQuery(route.query.genre);
+  querySyncReady.value = true;
+
   try {
-    topics.value = (await contentApi.listTopics()) || [];
+    const topicsRes = await contentApi.listTopics();
+
+    topics.value = topicsRes || [];
+
+    tenantID.value = resolveTenantIDFromRoute();
+    tenant.value = {
+      id: tenantID.value,
+      name: route.params.tenantCode,
+      bio: "",
+      cover: "",
+      avatar: "",
+      stats: {
+        followers: 0,
+        contents: 0,
+        likes: 0,
+      },
+    };
+    isFollowing.value = false;
+
+    fetchData();
   } catch (e) {
     console.error(e);
+    fetchData();
   }
 });
 
@@ -119,13 +163,25 @@ const loadMore = () => {
 
 const toggleFollow = async () => {
   if (followLoading.value) return;
+
+  const effectiveTenantID = tenantID.value || resolveTenantIDFromRoute();
+  if (!effectiveTenantID) {
+    toast.add({
+      severity: "warn",
+      summary: "暂不可用",
+      detail: "当前频道暂不支持关注操作",
+      life: 2000,
+    });
+    return;
+  }
+
   followLoading.value = true;
   try {
     if (isFollowing.value) {
-      await tenantApi.unfollow(route.params.id);
+      await tenantApi.unfollow(effectiveTenantID);
       isFollowing.value = false;
     } else {
-      await tenantApi.follow(route.params.id);
+      await tenantApi.follow(effectiveTenantID);
       isFollowing.value = true;
       toast.add({
         severity: "success",
@@ -156,9 +212,43 @@ const sortLabel = computed(() =>
   sortOption.value === "hot" ? "最热" : "最新",
 );
 
-watch([sortOption, selectedTopic], () => {
-  applyFilters();
+const currentTopicBreadcrumb = computed(() => {
+  const fromQuery = normalizeGenreQuery(route.query.genre);
+  if (fromQuery) return fromQuery;
+  if (selectedTopic.value) return selectedTopic.value;
+  return "全部专题";
 });
+
+watch(
+  () => route.query.genre,
+  (newGenre) => {
+    const normalized = normalizeGenreQuery(newGenre);
+    if (normalized !== selectedTopic.value) {
+      selectedTopic.value = normalized;
+    }
+  },
+);
+
+watch(
+  [sortOption, selectedTopic],
+  ([nextSort, nextTopic], [prevSort, prevTopic]) => {
+    if (!querySyncReady.value) return;
+
+    if (nextTopic !== prevTopic) {
+      const nextQuery = { ...route.query };
+      if (nextTopic) {
+        nextQuery.genre = nextTopic;
+      } else {
+        delete nextQuery.genre;
+      }
+      router.replace({ query: nextQuery });
+    }
+
+    if (nextSort !== prevSort || nextTopic !== prevTopic) {
+      applyFilters();
+    }
+  },
+);
 </script>
 
 <template>
@@ -229,6 +319,7 @@ watch([sortOption, selectedTopic], () => {
           <div class="flex flex-col items-end gap-5 pb-2">
             <div class="flex gap-3">
               <button
+                v-if="showFollowActions"
                 @click="toggleFollow"
                 :disabled="followLoading"
                 class="h-11 w-32 rounded-full font-bold text-base transition-all flex items-center justify-center gap-2 backdrop-blur-md"
@@ -310,7 +401,16 @@ watch([sortOption, selectedTopic], () => {
       <div
         class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 flex items-center justify-between h-14"
       >
-        <div class="flex gap-8 h-full">
+        <div class="flex items-center gap-4 h-full">
+          <div
+            class="hidden md:flex items-center text-xs text-slate-500 bg-slate-100 rounded-full px-3 py-1"
+          >
+            <span>频道</span>
+            <i class="pi pi-angle-right text-[10px] mx-1.5"></i>
+            <span class="font-semibold text-slate-700">{{
+              currentTopicBreadcrumb
+            }}</span>
+          </div>
           <button
             v-for="tab in tabs"
             :key="tab.value"
@@ -324,6 +424,12 @@ watch([sortOption, selectedTopic], () => {
           >
             {{ tab.label }}
           </button>
+          <router-link
+            :to="tenantRoute('/topics')"
+            class="text-xs px-3 py-1.5 rounded-full border border-slate-200 text-slate-600 hover:border-primary-200 hover:text-primary-600 transition-colors"
+          >
+            去专题
+          </router-link>
         </div>
 
         <!-- In-Tenant Search -->