From 63181a1ddd1b1307ce6c30f7de6825e86e4fa60f Mon Sep 17 00:00:00 2001 From: Jin Yi Date: Thu, 26 Jun 2025 04:34:19 +0900 Subject: [PATCH] [Manager] Standardize Card Aspect Ratios & Enhance UI (#4271) Co-authored-by: Claude --- .../content/manager/PackVersionBadge.test.ts | 35 +++--- .../content/manager/PackVersionBadge.vue | 39 +++--- .../manager/button/PackActionButton.vue | 4 +- .../content/manager/packBanner/PackBanner.vue | 16 +-- .../content/manager/packCard/PackCard.vue | 111 ++++++++---------- .../manager/packCard/PackCardFooter.vue | 2 +- 6 files changed, 97 insertions(+), 110 deletions(-) diff --git a/src/components/dialog/content/manager/PackVersionBadge.test.ts b/src/components/dialog/content/manager/PackVersionBadge.test.ts index 10b0381e2..9bd897986 100644 --- a/src/components/dialog/content/manager/PackVersionBadge.test.ts +++ b/src/components/dialog/content/manager/PackVersionBadge.test.ts @@ -1,6 +1,5 @@ import { VueWrapper, mount } from '@vue/test-utils' import { createPinia } from 'pinia' -import Button from 'primevue/button' import PrimeVue from 'primevue/config' import { beforeEach, describe, expect, it, vi } from 'vitest' import { nextTick } from 'vue' @@ -33,6 +32,12 @@ vi.mock('@/stores/comfyManagerStore', () => ({ })) })) +vi.mock('@/composables/nodePack/usePackUpdateStatus', () => ({ + usePackUpdateStatus: vi.fn(() => ({ + isUpdateAvailable: false + })) +})) + const mockToggle = vi.fn() const mockHide = vi.fn() const PopoverStub = { @@ -78,9 +83,9 @@ describe('PackVersionBadge', () => { it('renders with installed version from store', () => { const wrapper = mountComponent() - const button = wrapper.findComponent(Button) - expect(button.exists()).toBe(true) - expect(button.props('label')).toBe('1.5.0') // From mockInstalledPacks + const badge = wrapper.find('[role="button"]') + expect(badge.exists()).toBe(true) + expect(badge.find('span').text()).toBe('1.5.0') // From mockInstalledPacks }) it('falls back to latest_version when not installed', () => { @@ -97,9 +102,9 @@ describe('PackVersionBadge', () => { props: { nodePack: uninstalledPack } }) - const button = wrapper.findComponent(Button) - expect(button.exists()).toBe(true) - expect(button.props('label')).toBe('3.0.0') // From latest_version + const badge = wrapper.find('[role="button"]') + expect(badge.exists()).toBe(true) + expect(badge.find('span').text()).toBe('3.0.0') // From latest_version }) it('falls back to NIGHTLY when no latest_version and not installed', () => { @@ -113,9 +118,9 @@ describe('PackVersionBadge', () => { props: { nodePack: noVersionPack } }) - const button = wrapper.findComponent(Button) - expect(button.exists()).toBe(true) - expect(button.props('label')).toBe(SelectedVersion.NIGHTLY) + const badge = wrapper.find('[role="button"]') + expect(badge.exists()).toBe(true) + expect(badge.find('span').text()).toBe(SelectedVersion.NIGHTLY) }) it('falls back to NIGHTLY when nodePack.id is missing', () => { @@ -127,16 +132,16 @@ describe('PackVersionBadge', () => { props: { nodePack: invalidPack } }) - const button = wrapper.findComponent(Button) - expect(button.exists()).toBe(true) - expect(button.props('label')).toBe(SelectedVersion.NIGHTLY) + const badge = wrapper.find('[role="button"]') + expect(badge.exists()).toBe(true) + expect(badge.find('span').text()).toBe(SelectedVersion.NIGHTLY) }) it('toggles the popover when button is clicked', async () => { const wrapper = mountComponent() - // Click the button - await wrapper.findComponent(Button).trigger('click') + // Click the badge + await wrapper.find('[role="button"]').trigger('click') // Verify that the toggle method was called expect(mockToggle).toHaveBeenCalled() diff --git a/src/components/dialog/content/manager/PackVersionBadge.vue b/src/components/dialog/content/manager/PackVersionBadge.vue index a3a366535..5a6ee32e2 100644 --- a/src/components/dialog/content/manager/PackVersionBadge.vue +++ b/src/components/dialog/content/manager/PackVersionBadge.vue @@ -1,18 +1,23 @@ @@ -110,12 +90,11 @@ import ProgressSpinner from 'primevue/progressspinner' import { computed, provide, ref } from 'vue' import { useI18n } from 'vue-i18n' -import ContentDivider from '@/components/common/ContentDivider.vue' import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue' import PackBanner from '@/components/dialog/content/manager/packBanner/PackBanner.vue' import PackCardFooter from '@/components/dialog/content/manager/packCard/PackCardFooter.vue' -import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus' import { useComfyManagerStore } from '@/stores/comfyManagerStore' +import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore' import { IsInstallingKey, type MergedNodePack, @@ -130,11 +109,15 @@ const { nodePack, isSelected = false } = defineProps<{ const { d } = useI18n() +const colorPaletteStore = useColorPaletteStore() +const isLightTheme = computed( + () => colorPaletteStore.completedActivePalette.light_theme +) + const isInstalling = ref(false) provide(IsInstallingKey, isInstalling) const { isPackInstalled, isPackEnabled } = useComfyManagerStore() -const { isUpdateAvailable } = usePackUpdateStatus(nodePack) const isInstalled = computed(() => isPackInstalled(nodePack?.id)) const isDisabled = computed( @@ -167,14 +150,14 @@ const formattedLatestVersionDate = computed(() => { position: relative; } -.selected-card::before { +.selected-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - border: 3px solid var(--p-primary-color); + border: 4px solid var(--p-primary-color); border-radius: 0.5rem; pointer-events: none; z-index: 100; diff --git a/src/components/dialog/content/manager/packCard/PackCardFooter.vue b/src/components/dialog/content/manager/packCard/PackCardFooter.vue index 659393c14..1062f2cac 100644 --- a/src/components/dialog/content/manager/packCard/PackCardFooter.vue +++ b/src/components/dialog/content/manager/packCard/PackCardFooter.vue @@ -1,6 +1,6 @@