pagetype列表页拆分过滤栏和操作栏为独立的组件

apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue

@@ -57,10 +57,10 @@
         }"
       />
       <!-- 默认过滤栏 -->
-      <FilterBar 
+      <GenericListPageFilterBar 
         v-else-if="!isSinglePage && metaFields.length > 0"
         :fields="metaFields"
-        v-model="filters"
+        v-model:filters="filters"
         @filter-change="onFilterChange"
       />
 
@@ -148,17 +148,15 @@
                 }"
               />
               <!-- 默认操作按钮 -->
-              <template v-else>
+              <GenericListPageActions
-                <button class="action-btn" @click.stop="openDetail(row.name)" :title="t('View')">
+                v-else
-                  <i class="fa fa-eye"></i>
+                :row="row"
-                </button>
+                :entity="entity"
-                <button class="action-btn" @click.stop="editRecord(row)" :title="t('Edit')">
+                view-mode="card"
-                  <i class="fa fa-edit"></i>
+                @view="openDetail(row.name)"
-                </button>
+                @edit="editRecord(row)"
-                <button class="action-btn delete-btn" @click.stop="deleteRecord(row.name)" :title="t('Delete')">
+                @delete="deleteRecord(row.name)"
-                  <i class="fa fa-trash"></i>
+              />
-                </button>
-              </template>
             </div>
           </div>
           </div>
@@ -245,17 +243,15 @@
                   }"
                 />
                 <!-- 默认操作按钮 -->
-                <template v-else>
+                <GenericListPageActions
-                  <button class="action-btn" @click.stop="openDetail(row.name)" :title="t('View')">
+                  v-else
-                    <i class="fa fa-eye"></i>
+                  :row="row"
-                  </button>
+                  :entity="entity"
-                  <button class="action-btn" @click.stop="editRecord(row)" :title="t('Edit')">
+                  view-mode="list"
-                    <i class="fa fa-edit"></i>
+                  @view="openDetail(row.name)"
-                  </button>
+                  @edit="editRecord(row)"
-                  <button class="action-btn delete-btn" @click.stop="deleteRecord(row.name)" :title="t('Delete')">
+                  @delete="deleteRecord(row.name)"
-                    <i class="fa fa-trash"></i>
+                />
-                  </button>
-                </template>
               </div>
             </div>
           </div>
@@ -280,8 +276,9 @@ import { get_session_api_headers } from '@/shared/api/auth'
 import { usePageTypeSlug } from '@/shared/utils/slug'
 import { isSinglePageType } from '@/shared/utils/pagetype'
 import SinglePageDetail from './SinglePageDetail.vue'
-import FilterBar from '@/core/components/FilterBar.vue'
 import GenericListPageToolBar from './GenericListPageToolBar.vue'
+import GenericListPageFilterBar from './GenericListPageFilterBar.vue'
+import GenericListPageActions from './GenericListPageActions.vue'
 import {
   resolvePagetypeListOverride,
   resolvePagetypeListToolbarOverride,
@@ -1419,42 +1416,6 @@ function formatDisplayValue(value: any, fieldName: string) {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
-.card-actions { 
-  display: flex; 
-  align-items: center; 
-  justify-content: center;
-  gap: 6px; 
-  padding: 12px 20px;
-  border-top: 1px solid #f3f4f6;
-  background: #fafbfc;
-  margin-top: auto;
-}
-
-.action-btn { 
-  width: 32px; 
-  height: 32px; 
-  border: none; 
-  background: #f3f4f6; 
-  color: #6b7280; 
-  border-radius: 6px; 
-  cursor: pointer; 
-  display: flex; 
-  align-items: center; 
-  justify-content: center; 
-  font-size: 13px; 
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
-}
-
-.action-btn:hover { 
-  background: #3b82f6; 
-  color: white; 
-}
-
-.action-btn.delete-btn:hover {
-  background: #ef4444;
-  color: white;
-}
-
 /* 工具栏容器样式（保留用于布局） */
 .header-right { display: flex; align-items: center; gap: 12px; }
 
@@ -1558,6 +1519,7 @@ function formatDisplayValue(value: any, fieldName: string) {
   font-size: 14px;
 }
 
+/* 操作列容器样式（用于网格布局，按钮样式由 GenericListPageActions 组件处理） */
 .col-actions {
   display: flex;
   align-items: center;
@@ -1565,31 +1527,6 @@ function formatDisplayValue(value: any, fieldName: string) {
   gap: 4px;
 }
 
-.action-btn {
-  width: 28px;
-  height: 28px;
-  border: none;
-  background: #f3f4f6;
-  color: #6b7280;
-  border-radius: 6px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.action-btn:hover {
-  background: #3b82f6;
-  color: white;
-}
-
-.action-btn.delete-btn:hover {
-  background: #ef4444;
-  color: white;
-}
-
 /* 布尔值样式 */
 .boolean-true {
   color: #059669;

apps/jingrow/frontend/src/core/pagetype/GenericListPageActions.vue

@@ -0,0 +1,106 @@
+<template>
+  <div :class="containerClass">
+    <!-- 操作按钮 -->
+    <button class="action-btn" @click.stop="handleView" :title="t('View')">
+      <i class="fa fa-eye"></i>
+    </button>
+    <button class="action-btn" @click.stop="handleEdit" :title="t('Edit')">
+      <i class="fa fa-edit"></i>
+    </button>
+    <button class="action-btn delete-btn" @click.stop="handleDelete" :title="t('Delete')">
+      <i class="fa fa-trash"></i>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { t } from '@/shared/i18n'
+
+interface Props {
+  row: any
+  entity: string
+  viewMode?: 'card' | 'list'
+}
+
+interface Emits {
+  (e: 'view', row: any): void
+  (e: 'edit', row: any): void
+  (e: 'delete', row: any): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// 根据视图模式决定容器类名
+const containerClass = computed(() => {
+  return props.viewMode === 'card' ? 'card-actions' : 'col-actions'
+})
+
+function handleView() {
+  emit('view', props.row)
+}
+
+function handleEdit() {
+  emit('edit', props.row)
+}
+
+function handleDelete() {
+  emit('delete', props.row)
+}
+</script>
+
+<style scoped>
+/* 卡片视图操作按钮容器 */
+.card-actions { 
+  display: flex; 
+  align-items: center; 
+  justify-content: center;
+  gap: 6px; 
+  padding: 12px 20px;
+  border-top: 1px solid #f3f4f6;
+  background: #fafbfc;
+  margin-top: auto;
+}
+
+/* 列表视图操作按钮容器 */
+.col-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+/* 操作按钮通用样式 */
+.action-btn { 
+  width: 32px; 
+  height: 32px; 
+  border: none; 
+  background: #f3f4f6; 
+  color: #6b7280; 
+  border-radius: 6px; 
+  cursor: pointer; 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+  font-size: 13px; 
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
+}
+
+.action-btn:hover { 
+  background: #3b82f6; 
+  color: white; 
+}
+
+.action-btn.delete-btn:hover {
+  background: #ef4444;
+  color: white;
+}
+
+/* 列表视图中的按钮稍小一些 */
+.col-actions .action-btn {
+  width: 28px;
+  height: 28px;
+  font-size: 12px;
+}
+</style>

apps/jingrow/frontend/src/core/pagetype/GenericListPageFilterBar.vue

@@ -0,0 +1,38 @@
+<template>
+  <FilterBar 
+    v-if="fields.length > 0"
+    :fields="fields"
+    :model-value="filters"
+    @update:model-value="handleUpdateFilters"
+    @filter-change="handleFilterChange"
+  />
+</template>
+
+<script setup lang="ts">
+import FilterBar from '@/core/components/FilterBar.vue'
+
+interface Props {
+  fields: any[]
+  filters: Record<string, any>
+}
+
+interface Emits {
+  (e: 'update:filters', value: Record<string, any>): void
+  (e: 'filter-change'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+function handleUpdateFilters(value: Record<string, any>) {
+  emit('update:filters', value)
+}
+
+function handleFilterChange() {
+  emit('filter-change')
+}
+</script>
+
+<style scoped>
+/* 过滤栏样式由 FilterBar 组件内部处理 */
+</style>