From d52c8687f3932336af5112cb3a0be7911a831844 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sun, 2 Nov 2025 16:08:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96pagetype=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B5=E6=93=8D=E4=BD=9C=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/core/pagetype/GenericListPage.vue     | 123 ++++++++----------
 .../core/pagetype/GenericListPageActions.vue  |  19 ++-
 .../local_ai_agent_list_actions.vue           |  27 +++-
 .../local_ai_node_list_actions.vue            |  25 +++-
 4 files changed, 109 insertions(+), 85 deletions(-)

diff --git a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
index f8035fb..eff52ef 100644
--- a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
+++ b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
@@ -132,32 +132,31 @@
                 </div>
               </div>
             </div>
-            <div class="card-actions">
-              <!-- 操作列覆盖组件（卡片视图） -->
-              <component
-                v-if="actionsComponent"
-                :is="actionsComponent"
-                :context="{
-                  row,
-                  entity,
-                  openDetail,
-                  editRecord,
-                  deleteRecord,
-                  router,
-                  t
-                }"
-              />
-              <!-- 默认操作按钮 -->
-              <GenericListPageActions
-                v-else
-                :row="row"
-                :entity="entity"
-                view-mode="card"
-                @view="openDetail(row.name)"
-                @edit="editRecord(row)"
-                @delete="deleteRecord(row.name)"
-              />
-            </div>
+            <!-- 操作列覆盖组件（卡片视图） -->
+            <component
+              v-if="actionsComponent"
+              :is="actionsComponent"
+              :context="{
+                row,
+                entity,
+                openDetail,
+                editRecord,
+                deleteRecord,
+                router,
+                t,
+                viewMode: 'card'
+              }"
+            />
+            <!-- 默认操作按钮 -->
+            <GenericListPageActions
+              v-else
+              :row="row"
+              :entity="entity"
+              view-mode="card"
+              @view="openDetail(row.name)"
+              @edit="editRecord(row)"
+              @delete="deleteRecord(row.name)"
+            />
           </div>
           </div>
           <div v-if="viewMode === 'card'" class="list-pagination">
@@ -227,32 +226,31 @@
                 </template>
                 <template v-else>{{ formatDisplayValue(row[col.key], col.key) }}</template>
               </div>
-              <div class="col-actions">
-                <!-- 操作列覆盖组件 -->
-                <component
-                  v-if="actionsComponent"
-                  :is="actionsComponent"
-                  :context="{
-                    row,
-                    entity,
-                    openDetail,
-                    editRecord,
-                    deleteRecord,
-                    router,
-                    t
-                  }"
-                />
-                <!-- 默认操作按钮 -->
-                <GenericListPageActions
-                  v-else
-                  :row="row"
-                  :entity="entity"
-                  view-mode="list"
-                  @view="openDetail(row.name)"
-                  @edit="editRecord(row)"
-                  @delete="deleteRecord(row.name)"
-                />
-              </div>
+              <!-- 操作列覆盖组件 -->
+              <component
+                v-if="actionsComponent"
+                :is="actionsComponent"
+                :context="{
+                  row,
+                  entity,
+                  openDetail,
+                  editRecord,
+                  deleteRecord,
+                  router,
+                  t,
+                  viewMode: 'list'
+                }"
+              />
+              <!-- 默认操作按钮 -->
+              <GenericListPageActions
+                v-else
+                :row="row"
+                :entity="entity"
+                view-mode="list"
+                @view="openDetail(row.name)"
+                @edit="editRecord(row)"
+                @delete="deleteRecord(row.name)"
+              />
             </div>
           </div>
           <div v-if="viewMode === 'list'" class="list-pagination">
@@ -1455,25 +1453,8 @@ function formatDisplayValue(value: any, fieldName: string) {
 /* 工具栏容器样式（保留用于布局） */
 .header-right { display: flex; align-items: center; gap: 12px; }
 
-/* 卡片视图操作按钮容器样式（为自定义操作组件提供 footer 样式） */
-.card-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 8px 16px;
-  border-top: 1px solid #f3f4f6;
-  background: #fafbfc;
-  margin-top: auto;
-}
-
-/* 表格操作列样式 - 与 AgentList 完全一致 */
-.col-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
- }
+/* 注意：操作列的样式现在由 GenericListPageActions 组件和自定义操作组件自己管理 */
+/* 父组件不再定义 card-actions 和 col-actions 样式，符合组件自包含的最佳实践 */
 
 /* 列表样式 - 与 AgentList 完全一致 */
 .col-checkbox {
diff --git a/apps/jingrow/frontend/src/core/pagetype/GenericListPageActions.vue b/apps/jingrow/frontend/src/core/pagetype/GenericListPageActions.vue
index ee5dd0c..0f8d3f4 100644
--- a/apps/jingrow/frontend/src/core/pagetype/GenericListPageActions.vue
+++ b/apps/jingrow/frontend/src/core/pagetype/GenericListPageActions.vue
@@ -32,10 +32,9 @@ interface Emits {
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
-// 根据视图模式决定容器类名
-// 注意：卡片视图时父元素已经提供了 card-actions 容器和样式，所以只使用 col-actions
+// 根据视图模式决定容器类名，组件自包含所有样式
 const containerClass = computed(() => {
-  return 'col-actions'
+  return props.viewMode === 'card' ? 'actions-container card-actions' : 'actions-container col-actions'
 })
 
 function handleView() {
@@ -52,14 +51,24 @@ function handleDelete() {
 </script>
 
 <style scoped>
-/* 列表视图操作按钮容器 - 卡片视图时由父元素的 card-actions 提供样式 */
-.col-actions {
+/* 操作按钮容器基础样式 */
+.actions-container {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
 }
 
+/* 卡片视图样式：包含 footer 外观（padding, border-top, background） */
+.card-actions {
+  padding: 8px 16px;
+  border-top: 1px solid #f3f4f6;
+  background: #fafbfc;
+  margin-top: auto;
+}
+
+/* 列表视图样式：只提供按钮排列，无背景（通过 actions-container 基础样式实现） */
+
 /* 操作按钮通用样式 - 统一使用节点列表页的大小 */
 .action-btn { 
   width: 28px; 
diff --git a/apps/jingrow/frontend/src/views/pagetype/local_ai_agent/local_ai_agent_list_actions.vue b/apps/jingrow/frontend/src/views/pagetype/local_ai_agent/local_ai_agent_list_actions.vue
index 76da21f..5b97b46 100644
--- a/apps/jingrow/frontend/src/views/pagetype/local_ai_agent/local_ai_agent_list_actions.vue
+++ b/apps/jingrow/frontend/src/views/pagetype/local_ai_agent/local_ai_agent_list_actions.vue
@@ -1,6 +1,6 @@
 <template>
-  <!-- 只使用 col-actions，父元素在卡片视图时会提供 card-actions 样式 -->
-  <div class="col-actions">
+  <!-- 根据视图模式决定容器类名，组件自包含所有样式 -->
+  <div :class="containerClass">
     <!-- 默认操作按钮 -->
     <button class="action-btn" @click.stop="context.openDetail(context.row.name)" :title="context.t('View')">
       <i class="fa fa-eye"></i>
@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useMessage } from 'naive-ui'
 import axios from 'axios'
 import { get_session_api_headers } from '@/shared/api/auth'
@@ -46,9 +46,16 @@ const props = defineProps<{
     deleteRecord: (name: string) => void
     router: any
     t: (key: string) => string
+    viewMode?: 'card' | 'list'
   }
 }>()
 
+// 根据视图模式决定容器类名，组件自包含所有样式
+const containerClass = computed(() => {
+  const viewMode = props.context.viewMode || 'list'
+  return viewMode === 'card' ? 'actions-container card-actions' : 'actions-container col-actions'
+})
+
 const message = useMessage()
 const executing = ref(false)
 
@@ -128,14 +135,24 @@ async function handleFlowBuilder() {
 </script>
 
 <style scoped>
-/* 列表视图样式 - 只提供按钮排列，无背景 */
-.col-actions {
+/* 操作按钮容器基础样式 */
+.actions-container {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
 }
 
+/* 卡片视图样式：包含 footer 外观（padding, border-top, background） */
+.card-actions {
+  padding: 8px 16px;
+  border-top: 1px solid #f3f4f6;
+  background: #fafbfc;
+  margin-top: auto;
+}
+
+/* 列表视图样式：只提供按钮排列，无背景（通过 actions-container 基础样式实现） */
+
 /* 操作按钮通用样式 - 统一使用节点列表页的大小 */
 .action-btn { 
   width: 28px; 
diff --git a/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_list_actions.vue b/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_list_actions.vue
index 28232a8..b3bba89 100644
--- a/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_list_actions.vue
+++ b/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_list_actions.vue
@@ -1,6 +1,6 @@
 <template>
-  <!-- 只使用 col-actions，父元素在卡片视图时会提供 card-actions 样式 -->
-  <div class="col-actions">
+  <!-- 根据视图模式决定容器类名，组件自包含所有样式 -->
+  <div :class="containerClass">
     <!-- 默认操作按钮 -->
     <button class="action-btn" @click.stop="context.openDetail(context.row.name)" :title="context.t('View')">
       <i class="fa fa-eye"></i>
@@ -52,9 +52,16 @@ const props = defineProps<{
     deleteRecord: (name: string) => void
     router: any
     t: (key: string) => string
+    viewMode?: 'card' | 'list'
   }
 }>()
 
+// 根据视图模式决定容器类名，组件自包含所有样式
+const containerClass = computed(() => {
+  const viewMode = props.context.viewMode || 'list'
+  return viewMode === 'card' ? 'actions-container card-actions' : 'actions-container col-actions'
+})
+
 const message = useMessage()
 const showSchemaEditor = ref(false)
 
@@ -140,14 +147,24 @@ async function handleSchemaSave(schemaData: any) {
 </script>
 
 <style scoped>
-/* 列表视图样式 - 只提供按钮排列，无背景 */
-.col-actions {
+/* 操作按钮容器基础样式 */
+.actions-container {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
 }
 
+/* 卡片视图样式：包含 footer 外观（padding, border-top, background） */
+.card-actions {
+  padding: 8px 16px;
+  border-top: 1px solid #f3f4f6;
+  background: #fafbfc;
+  margin-top: auto;
+}
+
+/* 列表视图样式：只提供按钮排列，无背景（通过 actions-container 基础样式实现） */
+
 /* 操作按钮通用样式 - 统一使用节点列表页的大小 */
 .action-btn { 
   width: 28px;