From a72ba4490e49298b8d8a83c3360e235d6bf7edcb Mon Sep 17 00:00:00 2001 From: liangxu Date: Mon, 27 Apr 2026 00:59:08 +0800 Subject: [PATCH] feat(admin-web): redesign publish modal account picker as bento cards Switch the account picker from a vertical list to an auto-fill grid of bento-style cards so a creator can compare more accounts at a glance. Each card stacks identity + check above a dashed divider with the status tags below, hovers lift with a soft shadow, and the avatar loads with a no-referrer policy to keep cross-origin platform CDNs happy. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../src/components/PublishArticleModal.vue | 105 +++++++++++------- 1 file changed, 66 insertions(+), 39 deletions(-) diff --git a/apps/admin-web/src/components/PublishArticleModal.vue b/apps/admin-web/src/components/PublishArticleModal.vue index a189cb1..22c31de 100644 --- a/apps/admin-web/src/components/PublishArticleModal.vue +++ b/apps/admin-web/src/components/PublishArticleModal.vue @@ -523,30 +523,30 @@ function normalizePlatformUid(value?: string | null): string { v-for="account in accountCards" :key="account.id" type="button" - class="publish-modal__list-item" + class="publish-modal__card" :class="{ - 'publish-modal__list-item--active': isSelected(account.id), - 'publish-modal__list-item--disabled': !account.selectable, + 'publish-modal__card--active': isSelected(account.id), + 'publish-modal__card--disabled': !account.selectable, }" @click="toggleAccount(account.id, account.selectable)" > -
+
+
+ + + {{ accountInitial(account) }} + +
+ {{ account.displayName }} + {{ account.platformName }} · {{ account.platformUid }} +
+
- - - - {{ accountInitial(account) }} - - -
- {{ account.displayName }} - {{ account.platformName }} · {{ account.platformUid }} -
-
+
{{ healthLabel(account.health) }} {{ clientStatusLabel(account) }} @@ -734,12 +734,13 @@ function normalizePlatformUid(value?: string | null): string { } .publish-modal__list { - display: flex; - flex-direction: column; - gap: 10px; - max-height: 380px; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); + gap: 16px; + max-height: 400px; overflow-y: auto; padding-right: 6px; + padding-bottom: 4px; } /* Custom scrollbar for list */ @@ -751,50 +752,70 @@ function normalizePlatformUid(value?: string | null): string { border-radius: 999px; } -.publish-modal__list-item { +.publish-modal__card { display: flex; - align-items: center; - justify-content: space-between; + flex-direction: column; + gap: 14px; width: 100%; - padding: 14px 16px; + padding: 16px; border: 1px solid #e5e7eb; - border-radius: 8px; + border-radius: 12px; background: #ffffff; text-align: left; cursor: pointer; transition: all 0.2s ease; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02); } -.publish-modal__list-item:hover:not(.publish-modal__list-item--disabled) { +.publish-modal__card:hover:not(.publish-modal__card--disabled) { border-color: #d1d5db; - background: #f9fafb; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04); + transform: translateY(-2px); } -.publish-modal__list-item--active { +.publish-modal__card--active { border-color: #3b82f6; background: #eff6ff; box-shadow: 0 0 0 1px #3b82f6; } -.publish-modal__list-item--disabled { +.publish-modal__card--active:hover:not(.publish-modal__card--disabled) { + box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.15), 0 0 0 1px #3b82f6; +} + +.publish-modal__card--disabled { cursor: not-allowed; opacity: 0.6; background: #f9fafb; + box-shadow: none; } -.publish-modal__identity { +.publish-modal__card-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 12px; +} + +.publish-modal__card-identity { display: flex; align-items: center; - gap: 14px; + gap: 12px; min-width: 0; - flex: 1; } -.publish-modal__meta-group { +.publish-modal__card-footer { display: flex; align-items: center; - gap: 16px; - flex-shrink: 0; + justify-content: space-between; + padding-top: 12px; + border-top: 1px dashed #e5e7eb; + gap: 8px; + transition: border-color 0.2s; +} + +.publish-modal__card--active .publish-modal__card-footer { + border-top-color: #bfdbfe; } .publish-modal__check { @@ -808,9 +829,10 @@ function normalizePlatformUid(value?: string | null): string { background: #fff; flex-shrink: 0; transition: all 0.2s; + margin-top: 2px; } -.publish-modal__list-item--active .publish-modal__check { +.publish-modal__card--active .publish-modal__check { background: #3b82f6; border-color: #3b82f6; } @@ -825,13 +847,13 @@ function normalizePlatformUid(value?: string | null): string { transition: opacity 0.2s; } -.publish-modal__list-item--active .publish-modal__check-inner { +.publish-modal__card--active .publish-modal__check-inner { opacity: 1; } .publish-modal__avatar { - width: 38px; - height: 38px; + width: 40px; + height: 40px; border-radius: 8px; display: inline-flex; align-items: center; @@ -861,6 +883,9 @@ function normalizePlatformUid(value?: string | null): string { font-size: 15px; font-weight: 600; line-height: 1.4; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .publish-modal__identity-copy span { @@ -868,7 +893,9 @@ function normalizePlatformUid(value?: string | null): string { color: #6b7280; font-size: 13px; line-height: 1.5; - word-break: break-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .publish-modal__state-pill {