From 3d3439294673e5b1db3a029fd2733735395e5145 Mon Sep 17 00:00:00 2001 From: jingrow Date: Sat, 1 Nov 2025 16:22:39 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96pagetype=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E9=A1=B5=E5=8D=A1=E7=89=87=E6=A8=A1=E5=BC=8F=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/core/pagetype/GenericListPage.vue | 229 ++++++++++++++---- 1 file changed, 184 insertions(+), 45 deletions(-) diff --git a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue index 924eec8..a479f0d 100644 --- a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue +++ b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue @@ -144,34 +144,34 @@ -
- - - - -
+ +
+ + + +
@@ -238,7 +238,7 @@ - @@ -363,8 +363,9 @@ const primaryLabel = computed(() => { return f?.fieldname || 'name' }) const cardBadges = computed(() => { + // 显示所有 displayColumns 中的字段，除了已经显示的 primaryLabel 和 name const keys = displayColumns.value.map((c: any) => c.key).filter((k: string) => k && k !== 'actions' && k !== primaryLabel.value && k !== 'name') - return keys.slice(0, 2).map((k: string) => ({ key: k })) + return keys.map((k: string) => ({ key: k })) }) const metaFields = ref([]) @@ -920,21 +921,154 @@ function formatDisplayValue(value: any, fieldName: string) { .loading i { margin-right: 8px; } /* 卡片视图样式（对齐 AgentList 设计） */ -.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 24px; } -.agent-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } -.agent-card:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1); transform: translateY(-2px); } -.agent-card.selected { border-color: #3b82f6; background: #f0f9ff; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } -.card-checkbox { position: absolute; top: 12px; right: 12px; z-index: 10; } -.card-checkbox input[type="checkbox"] { cursor: pointer; accent-color: #3b82f6; } -.card-content { display: flex; align-items: center; justify-content: space-between; gap: 12px; } -.info { display: flex; flex-direction: column; gap: 8px; min-width: 0; } -.title { font-size: 16px; font-weight: 600; color: #111827; line-height: 1.4; } -.desc { font-size: 14px; color: #6b7280; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } -.meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } -.badge { background: #f3f4f6; color: #374151; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; } -.card-actions { display: flex; align-items: center; gap: 6px; } -.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; } +.agent-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 20px; + margin-bottom: 24px; +} + +.agent-card { + background: white; + border: 1px solid #e5e7eb; + border-radius: 12px; + padding: 0; + cursor: pointer; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + height: 100%; +} + +.agent-card:hover { + border-color: #2563eb; + box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1); + transform: translateY(-2px); +} + +.agent-card.selected { + border-color: #3b82f6; + background: #f0f9ff; + box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); +} + +.card-checkbox { + position: absolute; + top: 12px; + right: 12px; + z-index: 10; +} + +.card-checkbox input[type="checkbox"] { + cursor: pointer; + accent-color: #3b82f6; + width: 18px; + height: 18px; +} + +.card-content { + display: flex; + flex-direction: column; + flex: 1; + padding: 20px; + padding-bottom: 12px; + min-height: 0; +} + +.info { + display: flex; + flex-direction: column; + gap: 10px; + flex: 1; + min-width: 0; + width: 100%; + overflow: hidden; +} + +.title { + font-size: 16px; + font-weight: 600; + color: #111827; + line-height: 1.4; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.desc { + font-size: 13px; + color: #6b7280; + line-height: 1.5; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.meta { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; + margin-top: 4px; + width: 100%; + overflow: hidden; +} + +.badge { + background: #f3f4f6; + color: #374151; + padding: 4px 10px; + border-radius: 6px; + font-size: 12px; + font-weight: 500; + line-height: 1.4; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + display: inline-block; + min-width: 0; +} + +.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; +} /* 工具栏样式（对齐 AgentList） */ .header-right { display: flex; align-items: center; gap: 12px; } @@ -1067,6 +1201,11 @@ function formatDisplayValue(value: any, fieldName: string) { color: white; } +.action-btn.delete-btn:hover { + background: #ef4444; + color: white; +} + /* 布尔值样式 */ .boolean-true { color: #059669;