easyflow-ui-admin/app/src/components/page/CardList.vue

@@ -456,6 +456,7 @@ function resolveMetaItems(item: any) {
 }
 
 .title-row--stacked .card-title {
+  align-self: flex-start;
   max-width: 100%;
 }
 

easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentCollection.vue

@@ -707,7 +707,7 @@ function changeCategory(category: any) {
               :tag-map="collectionTypeLabelMap"
             >
               <template #corner="{ item }">
-                <AiResourceCornerMeta>
+                <AiResourceCornerMeta publish-placement="below">
                   <template #publish>
                     <div
                       class="knowledge-publish-chip"

easyflow-ui-admin/app/src/views/ai/shared/AiResourceCornerMeta.vue

@@ -1,5 +1,23 @@
+<script setup lang="ts">
+type PublishPlacement = 'below' | 'inline';
+
+interface Props {
+  publishPlacement?: PublishPlacement;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  publishPlacement: 'inline',
+});
+</script>
+
 <template>
-  <div class="ai-resource-corner-meta">
+  <div
+    class="ai-resource-corner-meta"
+    :class="{
+      'ai-resource-corner-meta--publish-below':
+        props.publishPlacement === 'below',
+    }"
+  >
     <div class="ai-resource-corner-meta__item">
       <slot name="publish"></slot>
     </div>
@@ -17,6 +35,11 @@
   justify-content: flex-end;
 }
 
+.ai-resource-corner-meta--publish-below {
+  flex-direction: column-reverse;
+  align-items: flex-end;
+}
+
 .ai-resource-corner-meta__item {
   display: flex;
   align-items: center;

easyflow-ui-admin/app/src/views/ai/workflow/WorkflowList.vue

@@ -1100,7 +1100,7 @@ function handleHeaderButtonClick(data: any) {
               :actions="actions"
             >
               <template #corner="{ item }">
-                <AiResourceCornerMeta>
+                <AiResourceCornerMeta publish-placement="below">
                   <template #publish>
                     <div
                       class="workflow-publish-chip"