From 4b52d85512f2f722a93e9a5c913ce1663516bf26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=AD=90=E9=BB=98?= <925456043@qq.com> Date: Fri, 7 Aug 2026 12:41:50 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=9F=E4=B8=80=E8=B5=84=E6=BA=90?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=BA=95=E9=83=A8=E6=93=8D=E4=BD=9C=E5=B8=83?= =?UTF-8?q?=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将可见操作紧凑靠左并固定更多菜单位置 - 统一工作流、知识库、智能体和插件卡片密度 - 补充无占位布局回归测试 --- .../app/src/components/page/CardList.vue | 238 ++++++++++-------- .../page/__tests__/CardList.test.ts | 52 ++++ .../app/src/locales/langs/en-US/button.json | 2 +- .../app/src/views/ai/agents/AgentList.vue | 2 + .../documentCollection/DocumentCollection.vue | 1 - .../app/src/views/ai/plugin/Plugin.vue | 4 +- .../src/views/ai/workflow/WorkflowList.vue | 1 - 7 files changed, 193 insertions(+), 107 deletions(-) diff --git a/easyflow-ui-admin/app/src/components/page/CardList.vue b/easyflow-ui-admin/app/src/components/page/CardList.vue index b7050cc5..cae3abd9 100644 --- a/easyflow-ui-admin/app/src/components/page/CardList.vue +++ b/easyflow-ui-admin/app/src/components/page/CardList.vue @@ -341,115 +341,129 @@ function resolveMetaAriaLabel(item: any) { " #footer > -
+
- - - + + + + + + + +
+ + + {{ resolvedPrimaryAction.text }} + +
+
+ +
+ + + {{ resolveActionText(action, item) }} - -
- - - - - {{ resolvedPrimaryAction.text }}
-
+ - - {{ resolveActionText(action, item) }} - - - - - - -
+ @click.stop + /> + +
@@ -488,7 +502,7 @@ function resolveMetaAriaLabel(item: any) { flex-direction: column; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); - border-radius: 18px; + border-radius: var(--radius-panel); transition: transform 0.18s ease, box-shadow 0.18s ease, @@ -701,20 +715,24 @@ function resolveMetaAriaLabel(item: any) { .card-footer { display: flex; - gap: 12px; + gap: var(--space-2); align-items: center; - justify-content: space-between; - padding-top: 14px; + justify-content: flex-start; + min-height: var(--space-8); + padding-top: var(--space-4); border-top: 1px solid hsl(var(--divider-faint) / 85%); } -.card-footer--actions-only { - justify-content: flex-end; +.card-main-actions { + display: flex; + gap: var(--space-2); + align-items: center; + min-width: 0; } .card-primary-hint { display: flex; - flex: 1; + flex: 0 0 auto; align-items: center; min-width: 0; } @@ -751,7 +769,9 @@ function resolveMetaAriaLabel(item: any) { display: flex; gap: 8px; align-items: center; + height: var(--space-8); min-width: 0; + padding: 0 var(--space-1); } .primary-icon { @@ -769,9 +789,18 @@ function resolveMetaAriaLabel(item: any) { .card-actions { display: flex; - flex-shrink: 0; - gap: 4px; + flex: 0 1 auto; + gap: var(--space-2); align-items: center; + min-width: 0; +} + +.card-actions :deep(.el-button + .el-button) { + margin-left: 0; +} + +.card-overflow-action { + flex-shrink: 0; margin-left: auto; } @@ -781,7 +810,9 @@ function resolveMetaAriaLabel(item: any) { --el-button-hover-text-color: hsl(var(--text-strong)); --el-button-active-text-color: hsl(var(--text-strong)); - padding: 0 4px; + height: var(--space-8); + padding: 0 var(--space-1); + white-space: nowrap; } .card-action-btn--danger { @@ -791,6 +822,7 @@ function resolveMetaAriaLabel(item: any) { } .card-action-btn--menu { + width: var(--space-8); padding: 0; } 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 d7d8baaa..e61bea5d 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 @@ -89,6 +89,58 @@ describe('cardList', () => { expect(primaryAction).not.toHaveBeenCalled(); }); + it('将可见主操作与行内操作紧凑放在左侧，并将更多菜单独立放在右侧', () => { + const wrapper = mountCardList({ + primaryAction: { + text: '编排', + onClick: vi.fn(), + }, + actions: [ + { + text: '发布', + placement: 'inline', + onClick: vi.fn(), + }, + { + text: '删除', + placement: 'menu', + onClick: vi.fn(), + }, + ], + }); + + const mainActions = wrapper.get('.card-main-actions'); + + expect(mainActions.get('.card-primary-hint').text()).toContain('编排'); + expect(mainActions.get('.card-actions').text()).toContain('发布'); + expect(mainActions.find('.card-action-btn--menu').exists()).toBe(false); + expect(wrapper.find('.card-overflow-action').exists()).toBe(true); + }); + + it('仅渲染当前可见的行内操作且不保留空占位', () => { + const wrapper = mountCardList({ + actions: [ + { + text: '编辑', + placement: 'inline', + visible: false, + onClick: vi.fn(), + }, + { + text: '运行', + placement: 'inline', + onClick: vi.fn(), + }, + ], + }); + + const inlineButtons = wrapper.findAll('.card-actions .card-action-btn'); + + expect(inlineButtons).toHaveLength(1); + expect(inlineButtons[0]?.text()).toContain('运行'); + expect(wrapper.text()).not.toContain('编辑'); + }); + it('异步次级操作执行中会禁用重复点击并展示加载态', async () => { const inlineAction = vi.fn(); const wrapper = mountCardList({ diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/button.json b/easyflow-ui-admin/app/src/locales/langs/en-US/button.json index e4a3440e..a2c70096 100644 --- a/easyflow-ui-admin/app/src/locales/langs/en-US/button.json +++ b/easyflow-ui-admin/app/src/locales/langs/en-US/button.json @@ -46,7 +46,7 @@ "republish": "Republish", "offline": "Offline", "hide": "Hide", - "more": "Mode", + "more": "More", "submitDeleteApproval": "Submit Delete Approval", "submitPublishApproval": "Submit Publish Approval", "viewSegmentation": "View Segments", diff --git a/easyflow-ui-admin/app/src/views/ai/agents/AgentList.vue b/easyflow-ui-admin/app/src/views/ai/agents/AgentList.vue index 410bc36e..0862775d 100644 --- a/easyflow-ui-admin/app/src/views/ai/agents/AgentList.vue +++ b/easyflow-ui-admin/app/src/views/ai/agents/AgentList.vue @@ -358,6 +358,8 @@ async function handleDeleteAction(row: AgentInfo) { :data="pageList" :primary-action="primaryAction" :actions="actions" + density="compact" + meta-layout="compact" >