From ebfd91eeab36be73a514e216f17d29acc3f4b25b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=AD=90=E9=BB=98?= <925456043@qq.com>
Date: Thu, 23 Jul 2026 16:10:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=9F=E4=B8=80=E7=9F=A5=E8=AF=86?=
 =?UTF-8?q?=E5=BA=93=E5=8D=A1=E7=89=87=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- FAQ 与文档知识库统一使用标题下方类型标签

- 同排卡片底部操作栏保持贴底对齐
---
 .../app/src/components/page/CardList.vue      | 20 ++++++++++++++++++-
 .../page/__tests__/CardList.test.ts           | 20 +++++++++++++++++++
 .../documentCollection/DocumentCollection.vue |  1 +
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/easyflow-ui-admin/app/src/components/page/CardList.vue b/easyflow-ui-admin/app/src/components/page/CardList.vue
index 6d5b314b..47fc21ab 100644
--- a/easyflow-ui-admin/app/src/components/page/CardList.vue
+++ b/easyflow-ui-admin/app/src/components/page/CardList.vue
@@ -22,6 +22,7 @@ import { $t } from '#/locales';
 
 export type ActionPlacement = 'inline' | 'menu';
 export type ActionTone = 'danger' | 'default';
+export type TagLayout = 'inline' | 'stacked';
 
 export interface ActionButton {
   icon?: any;
@@ -60,6 +61,7 @@ export interface CardListProps {
   data: any[];
   primaryAction?: CardPrimaryAction;
   tagField?: string;
+  tagLayout?: TagLayout;
   tagMap?: Record<string, string>;
 }
 
@@ -73,6 +75,7 @@ const props = withDefaults(defineProps<CardListProps>(), {
   cornerTagTypeMap: () => ({}),
   primaryAction: undefined,
   tagField: '',
+  tagLayout: 'inline',
   tagMap: () => ({}),
 });
 
@@ -205,7 +208,10 @@ function resolveMetaItems(item: any) {
             :size="44"
           />
           <div class="card-meta">
-            <div class="title-row">
+            <div
+              class="title-row"
+              :class="{ 'title-row--stacked': tagLayout === 'stacked' }"
+            >
               <ElText truncated size="large" class="card-title">
                 {{ item[titleField] }}
               </ElText>
@@ -371,6 +377,8 @@ function resolveMetaItems(item: any) {
 }
 
 .card-item {
+  display: flex;
+  flex-direction: column;
   background: hsl(var(--card));
   border: 1px solid hsl(var(--border));
   border-radius: 18px;
@@ -400,6 +408,7 @@ function resolveMetaItems(item: any) {
 }
 
 :deep(.el-card__body) {
+  flex: 1;
   padding: 18px;
 }
 
@@ -447,6 +456,15 @@ function resolveMetaItems(item: any) {
   min-width: 0;
 }
 
+.title-row--stacked {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.title-row--stacked .card-title {
+  max-width: 100%;
+}
+
 .card-title {
   font-weight: 600;
   color: hsl(var(--text-strong));
diff --git a/easyflow-ui-admin/app/src/components/page/__tests__/CardList.test.ts b/easyflow-ui-admin/app/src/components/page/__tests__/CardList.test.ts
index 10da5c8c..d7d8baaa 100644
--- a/easyflow-ui-admin/app/src/components/page/__tests__/CardList.test.ts
+++ b/easyflow-ui-admin/app/src/components/page/__tests__/CardList.test.ts
@@ -193,4 +193,24 @@ describe('cardList', () => {
 
     expect(wrapper.find('.card-meta-row').exists()).toBe(false);
   });
+
+  it('支持知识库使用标题与类型标签的堆叠布局', () => {
+    const wrapper = mountCardList({
+      data: [
+        {
+          collectionType: 'FAQ',
+          id: 'knowledge-1',
+          title: '常见问题',
+        },
+      ],
+      tagField: 'collectionType',
+      tagLayout: 'stacked',
+      tagMap: {
+        FAQ: 'FAQ',
+      },
+    });
+
+    expect(wrapper.get('.title-row').classes()).toContain('title-row--stacked');
+    expect(wrapper.get('.title-row').text()).toContain('FAQ');
+  });
 });
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentCollection.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentCollection.vue
index f27d1396..0e7b36d1 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentCollection.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentCollection.vue
@@ -696,6 +696,7 @@ function changeCategory(category: any) {
               :primary-action="primaryAction"
               :actions="actions"
               tag-field="collectionType"
+              tag-layout="stacked"
               :tag-map="collectionTypeLabelMap"
             >
               <template #corner="{ item }">