@@ -203,6 +222,19 @@ function hasVisibleActions(item: any) {
+
+
+ {{ meta.label }}:
+ {{ meta.value }}
+
+
@@ -355,13 +387,17 @@ function hasVisibleActions(item: any) {
}
.card-header {
- display: flex;
- gap: 14px;
+ display: grid;
+ grid-template-columns: 44px minmax(0, 1fr) auto;
+ column-gap: 14px;
+ row-gap: 10px;
align-items: flex-start;
width: 100%;
}
.card-avatar {
+ grid-column: 1;
+ grid-row: 1;
background: hsl(var(--surface-subtle));
border: 1px solid hsl(var(--line-subtle));
}
@@ -371,6 +407,8 @@ function hasVisibleActions(item: any) {
flex: 1;
flex-direction: column;
gap: 10px;
+ grid-column: 2;
+ grid-row: 1;
min-width: 0;
}
@@ -394,8 +432,41 @@ function hasVisibleActions(item: any) {
color: hsl(var(--text-muted));
}
+.card-meta-row {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ align-items: flex-start;
+ grid-column: 1 / -1;
+ width: 100%;
+ font-size: 12px;
+ line-height: 18px;
+ color: hsl(var(--text-muted));
+}
+
+.card-meta-item {
+ display: flex;
+ gap: 4px;
+ align-items: flex-start;
+ justify-content: flex-start;
+ width: 100%;
+ min-width: 0;
+}
+
+.card-meta-label {
+ flex-shrink: 0;
+}
+
+.card-meta-value {
+ min-width: 0;
+ text-align: left;
+ word-break: break-all;
+}
+
.card-corner-tag {
display: flex;
+ grid-column: 3;
+ grid-row: 1;
flex-shrink: 0;
align-items: flex-start;
justify-content: flex-end;
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 44965e2..1f5dddf 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
@@ -14,6 +14,16 @@ vi.mock('@easyflow/access', () => ({
}),
}));
+vi.mock('#/locales', () => ({
+ $t: (key: string) => {
+ const labelMap: Record = {
+ 'aiResource.created': '创建时间',
+ 'aiResource.createdBy': '创建者',
+ };
+ return labelMap[key] || key;
+ },
+}));
+
describe('cardList', () => {
function mountCardList(props: Record) {
return mount(CardList, {
@@ -110,4 +120,55 @@ describe('cardList', () => {
expect(wrapper.get('.card-item').attributes('role')).toBeUndefined();
expect(legacyAction).toHaveBeenCalledTimes(1);
});
+
+ it('同时展示创建人与创建时间', () => {
+ const wrapper = mountCardList({
+ data: [
+ {
+ id: 'bot-1',
+ title: '演示卡片',
+ description: '用于验证元信息展示',
+ createdByName: '管理员',
+ created: '2026-04-12 10:00:00',
+ },
+ ],
+ });
+
+ const metaText = wrapper.get('.card-meta-row').text();
+
+ expect(metaText).toContain('创建者:管理员');
+ expect(metaText).toContain('创建时间:2026-04-12 10:00:00');
+ });
+
+ it('缺少创建人时仅展示创建时间', () => {
+ const wrapper = mountCardList({
+ data: [
+ {
+ id: 'bot-1',
+ title: '演示卡片',
+ description: '用于验证元信息展示',
+ created: '2026-04-12 10:00:00',
+ },
+ ],
+ });
+
+ const metaText = wrapper.get('.card-meta-row').text();
+
+ expect(metaText).toContain('创建时间:2026-04-12 10:00:00');
+ expect(metaText).not.toContain('创建者:');
+ });
+
+ it('缺少创建信息时不渲染元信息区', () => {
+ const wrapper = mountCardList({
+ data: [
+ {
+ id: 'bot-1',
+ title: '演示卡片',
+ description: '用于验证元信息展示',
+ },
+ ],
+ });
+
+ expect(wrapper.find('.card-meta-row').exists()).toBe(false);
+ });
});