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));

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');
+  });
 });

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 }">