From 35aa3081cefc5adafd7157a813da3a6923ed7efb Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sun, 2 Nov 2025 18:14:59 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84pagetype=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B5=E5=92=8C=E8=AF=A6=E6=83=85=E9=A1=B5=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E5=88=86=E5=8F=91=E9=80=BB=E8=BE=91=EF=BC=8C=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E4=B8=93=E9=97=A8=E7=9A=84=E8=B7=AF=E7=94=B1=E5=88=86=E5=8F=91?=
 =?UTF-8?q?=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/jingrow/frontend/src/app/router/index.ts |  8 +--
 .../frontend/src/core/pagetype/DetailPage.vue | 51 +++++++++++++++++++
 .../src/core/pagetype/GenericDetailPage.vue   | 27 +++-------
 .../src/core/pagetype/GenericListPage.vue     | 26 ++--------
 .../frontend/src/core/pagetype/ListPage.vue   | 48 +++++++++++++++++
 5 files changed, 114 insertions(+), 46 deletions(-)
 create mode 100644 apps/jingrow/frontend/src/core/pagetype/DetailPage.vue
 create mode 100644 apps/jingrow/frontend/src/core/pagetype/ListPage.vue

diff --git a/apps/jingrow/frontend/src/app/router/index.ts b/apps/jingrow/frontend/src/app/router/index.ts
index 4bba04e..b369035 100644
--- a/apps/jingrow/frontend/src/app/router/index.ts
+++ b/apps/jingrow/frontend/src/app/router/index.ts
@@ -76,23 +76,23 @@ const router = createRouter({
         {
           path: 'app/:entity',
           name: 'PageTypeList',
-          component: () => import('../../core/pagetype/GenericListPage.vue')
+          component: () => import('../../core/pagetype/ListPage.vue')
         },
         {
           path: 'app/:entity/:id',
           name: 'PageTypeDetail',
-          component: () => import('../../core/pagetype/GenericDetailPage.vue')
+          component: () => import('../../core/pagetype/DetailPage.vue')
         },
         // 保持向后兼容
         {
           path: 'page/:entity',
           name: 'PageTypeListLegacy',
-          component: () => import('../../core/pagetype/GenericListPage.vue')
+          component: () => import('../../core/pagetype/ListPage.vue')
         },
         {
           path: 'page/:entity/:id',
           name: 'PageTypeDetailLegacy',
-          component: () => import('../../core/pagetype/GenericDetailPage.vue')
+          component: () => import('../../core/pagetype/DetailPage.vue')
         },
         {
           path: 'settings/menu',
diff --git a/apps/jingrow/frontend/src/core/pagetype/DetailPage.vue b/apps/jingrow/frontend/src/core/pagetype/DetailPage.vue
new file mode 100644
index 0000000..4e28ae4
--- /dev/null
+++ b/apps/jingrow/frontend/src/core/pagetype/DetailPage.vue
@@ -0,0 +1,51 @@
+<template>
+  <!-- 详情页路由分发器：决定使用覆盖组件还是默认组件 -->
+  <component 
+    v-if="overrideComponent" 
+    :is="overrideComponent"
+    :context="context"
+  />
+  <GenericDetailPage v-else />
+</template>
+
+<script setup lang="ts">
+import { onMounted, shallowRef, markRaw, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { usePageTypeSlug } from '@/shared/utils/slug'
+import { resolvePagetypeDetailOverride } from '@/core/registry/pagetypeOverride'
+import GenericDetailPage from './GenericDetailPage.vue'
+
+const route = useRoute()
+const router = useRouter()
+const { pagetypeSlug } = usePageTypeSlug(route)
+
+const overrideComponent = shallowRef<any | null>(null)
+
+// 为覆盖组件准备 context（如果需要的话，可以让 GenericDetailPage 提供）
+const context = computed(() => ({
+  route,
+  router,
+  pagetypeSlug: pagetypeSlug.value,
+  entity: route.params.entity as string,
+  id: route.params.id as string
+}))
+
+onMounted(async () => {
+  // 查找详情页覆盖组件
+  const detailComp = await resolvePagetypeDetailOverride(pagetypeSlug.value)
+  overrideComponent.value = detailComp ? markRaw(detailComp) : null
+})
+
+// 监听路由参数变化，当 entity 或 id 变化时重新加载覆盖组件
+watch(() => [route.params.entity, route.params.id], async ([newEntity, newId], [oldEntity, oldId]) => {
+  if (newEntity !== oldEntity || newId !== oldId) {
+    const detailComp = await resolvePagetypeDetailOverride(String(newEntity || pagetypeSlug.value))
+    overrideComponent.value = detailComp ? markRaw(detailComp) : null
+  }
+}, { immediate: false })
+</script>
+
+<style scoped>
+/* DetailPage 仅作为路由分发器，不需要样式 */
+</style>
+
diff --git a/apps/jingrow/frontend/src/core/pagetype/GenericDetailPage.vue b/apps/jingrow/frontend/src/core/pagetype/GenericDetailPage.vue
index c8c5e87..b1154e1 100644
--- a/apps/jingrow/frontend/src/core/pagetype/GenericDetailPage.vue
+++ b/apps/jingrow/frontend/src/core/pagetype/GenericDetailPage.vue
@@ -1,6 +1,5 @@
 <template>
-  <component :is="overrideComponent || 'div'" v-if="overrideComponent" />
-  <div v-else class="generic-detail-page">
+  <div class="generic-detail-page">
     <!-- 页面头部 -->
     <div class="page-header">
       <n-space justify="space-between" align="center">
@@ -321,7 +320,7 @@ import { get_session_api_headers } from '@/shared/api/auth'
 import { updateRecord, getRecord, getRecordAttachments, deleteAttachment, uploadAttachment, deleteRecords } from '@/shared/api/common'
 import { downloadImageToLocal } from '@/shared/api/common'
 import { usePageTypeSlug } from '@/shared/utils/slug'
-import { resolvePagetypeDetailOverride, resolvePagetypeToolbarOverride } from '@/core/registry/pagetypeOverride'
+import { resolvePagetypeToolbarOverride } from '@/core/registry/pagetypeOverride'
 
 const route = useRoute()
 const router = useRouter()
@@ -330,7 +329,7 @@ const dialog = useDialog()
 
 // 使用组合式函数处理URL slug
 const { pagetypeSlug, entity } = usePageTypeSlug(route)
-const overrideComponent = shallowRef<any | null>(null)
+// 覆盖组件引用（工具栏覆盖，整体覆盖由 DetailPage.vue 处理）
 const toolbarComponent = shallowRef<any | null>(null)
 const id = computed(() => route.params.id as string)
 const isNew = computed(() => {
@@ -1144,14 +1143,10 @@ onMounted(async () => {
   // 加载侧边栏用户偏好设置
   loadSidebarPreferences()
   
-  // 优先解析 apps 中的覆盖组件（使用 URL 原始 slug，解析器内部会做 - 到 _ 的转换）
-  const comp = await resolvePagetypeDetailOverride(pagetypeSlug.value)
-  overrideComponent.value = comp ? markRaw(comp) : null
+  // 解析工具栏覆盖组件
   const tb = await resolvePagetypeToolbarOverride(pagetypeSlug.value)
   toolbarComponent.value = tb ? markRaw(tb) : null
-  if (overrideComponent.value) {
-    return
-  }
+  
   await loadMeta()
   await loadDetail()
 })
@@ -1164,23 +1159,17 @@ onUnmounted(() => {
 // 监听路由参数变化
 watch(() => route.params.id, async (newId, oldId) => {
   if (newId && newId !== oldId) {
-    if (!overrideComponent.value) {
-      await loadDetail()
-    }
+    await loadDetail()
   }
 })
 
 // 监听 entity/slug 变化，重新解析覆盖组件
 watch(() => route.params.entity, async (newEntity, oldEntity) => {
   if (newEntity !== oldEntity) {
-    const comp = await resolvePagetypeDetailOverride(String(newEntity))
-    overrideComponent.value = comp ? markRaw(comp) : null
     const tb = await resolvePagetypeToolbarOverride(String(newEntity))
     toolbarComponent.value = tb ? markRaw(tb) : null
-    if (!overrideComponent.value) {
-      await loadMeta()
-      await loadDetail()
-    }
+    await loadMeta()
+    await loadDetail()
   }
 })
 </script>
diff --git a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
index 72cb8fe..9bb50f2 100644
--- a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
+++ b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
@@ -1,8 +1,6 @@
 <template>
   <!-- 如果是单页模式，直接显示单页详情组件 -->
   <SinglePageDetail v-if="isSinglePage" />
-  <!-- 列表页整体覆盖 -->
-  <component :is="listOverrideComponent || 'div'" v-else-if="listOverrideComponent" />
   <div v-else class="page">
     <!-- 头部，与 AI 智能体列表一致的结构 -->
     <div class="page-header">
@@ -303,7 +301,6 @@ import GenericListPageToolBar from './GenericListPageToolBar.vue'
 import GenericListPageFilterBar from './GenericListPageFilterBar.vue'
 import GenericListPageActions from './GenericListPageActions.vue'
 import {
-  resolvePagetypeListOverride,
   resolvePagetypeListToolbarOverride,
   resolvePagetypeListFilterBarOverride,
   resolvePagetypeListActionsOverride
@@ -319,8 +316,7 @@ const dialog = useDialog()
 const { pagetypeSlug, entity } = usePageTypeSlug(route)
 const title = computed(() => entity.value)
 
-// 覆盖组件引用
-const listOverrideComponent = shallowRef<any | null>(null)
+// 覆盖组件引用（子组件覆盖，整体覆盖由 ListPage.vue 处理）
 const toolbarComponent = shallowRef<any | null>(null)
 const filterBarComponent = shallowRef<any | null>(null)
 const actionsComponent = shallowRef<any | null>(null)
@@ -913,10 +909,7 @@ async function loadData() {
 }
 
 onMounted(async () => {
-  // 优先解析覆盖组件
-  const listComp = await resolvePagetypeListOverride(pagetypeSlug.value)
-  listOverrideComponent.value = listComp ? markRaw(listComp) : null
-  
+  // 解析子组件覆盖（工具栏、过滤栏、操作栏）
   const listToolbarComp = await resolvePagetypeListToolbarOverride(pagetypeSlug.value)
   toolbarComponent.value = listToolbarComp ? markRaw(listToolbarComp) : null
   
@@ -926,11 +919,6 @@ onMounted(async () => {
   const listActionsComp = await resolvePagetypeListActionsOverride(pagetypeSlug.value)
   actionsComponent.value = listActionsComp ? markRaw(listActionsComp) : null
   
-  // 如果列表页被完全覆盖，直接返回
-  if (listOverrideComponent.value) {
-    return
-  }
-  
   await loadMeta()
   // 只有在非单页模式下才加载列表数据
   if (!isSinglePage.value) {
@@ -946,10 +934,7 @@ watch([page], () => {
 // 监听路由参数变化，当entity变化时重新加载数据
 watch(() => route.params.entity, async (newEntity, oldEntity) => {
   if (newEntity !== oldEntity) {
-    // 重新解析覆盖组件
-    const listComp = await resolvePagetypeListOverride(String(newEntity))
-    listOverrideComponent.value = listComp ? markRaw(listComp) : null
-    
+    // 重新解析子组件覆盖
     const listToolbarComp = await resolvePagetypeListToolbarOverride(String(newEntity))
     toolbarComponent.value = listToolbarComp ? markRaw(listToolbarComp) : null
     
@@ -959,11 +944,6 @@ watch(() => route.params.entity, async (newEntity, oldEntity) => {
     const listActionsComp = await resolvePagetypeListActionsOverride(String(newEntity))
     actionsComponent.value = listActionsComp ? markRaw(listActionsComp) : null
     
-    // 如果列表页被完全覆盖，直接返回
-    if (listOverrideComponent.value) {
-      return
-    }
-    
     // 重置分页和搜索
     page.value = 1
     searchQuery.value = ''
diff --git a/apps/jingrow/frontend/src/core/pagetype/ListPage.vue b/apps/jingrow/frontend/src/core/pagetype/ListPage.vue
new file mode 100644
index 0000000..52f6876
--- /dev/null
+++ b/apps/jingrow/frontend/src/core/pagetype/ListPage.vue
@@ -0,0 +1,48 @@
+<template>
+  <!-- 列表页路由分发器：决定使用覆盖组件还是默认组件 -->
+  <component 
+    v-if="overrideComponent" 
+    :is="overrideComponent"
+    :context="context"
+  />
+  <GenericListPage v-else />
+</template>
+
+<script setup lang="ts">
+import { onMounted, shallowRef, markRaw, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { usePageTypeSlug } from '@/shared/utils/slug'
+import { resolvePagetypeListOverride } from '@/core/registry/pagetypeOverride'
+import GenericListPage from './GenericListPage.vue'
+
+const route = useRoute()
+const { pagetypeSlug } = usePageTypeSlug(route)
+
+const overrideComponent = shallowRef<any | null>(null)
+
+// 为覆盖组件准备 context（如果需要的话，可以让 GenericListPage 提供）
+const context = computed(() => ({
+  route,
+  pagetypeSlug: pagetypeSlug.value,
+  entity: route.params.entity as string
+}))
+
+onMounted(async () => {
+  // 查找列表页覆盖组件
+  const listComp = await resolvePagetypeListOverride(pagetypeSlug.value)
+  overrideComponent.value = listComp ? markRaw(listComp) : null
+})
+
+// 监听路由参数变化，当 entity 变化时重新加载覆盖组件
+watch(() => route.params.entity, async (newEntity, oldEntity) => {
+  if (newEntity !== oldEntity) {
+    const listComp = await resolvePagetypeListOverride(String(newEntity))
+    overrideComponent.value = listComp ? markRaw(listComp) : null
+  }
+})
+</script>
+
+<style scoped>
+/* ListPage 仅作为路由分发器，不需要样式 */
+</style>
+