root/geo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin-web): redesign publish modal account picker as bento cards

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
liangxu
2026-04-27 00:59:08 +08:00
parent 290da7cd50
commit a72ba4490e
1 changed files with 66 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin-web/src/components/PublishArticleModal.vue
+66 -39
View File
@@ -523,30 +523,30 @@ function normalizePlatformUid(value?: string | null): string {
v-for="account in accountCards" v-for="account in accountCards"
:key="account.id" :key="account.id"
type="button" type="button"
class="publish-modal__list-item" class="publish-modal__card"
:class="{ :class="{
'publish-modal__list-item--active': isSelected(account.id), 'publish-modal__card--active': isSelected(account.id),
'publish-modal__list-item--disabled': !account.selectable, 'publish-modal__card--disabled': !account.selectable,
}" }"
@click="toggleAccount(account.id, account.selectable)" @click="toggleAccount(account.id, account.selectable)"
> >
<div class="publish-modal__identity"> <div class="publish-modal__card-header">
<div class="publish-modal__card-identity">
<span class="publish-modal__avatar" :style="{ background: account.platformAccent }">
<img v-if="account.avatarUrl" :src="account.avatarUrl" :alt="account.displayName" referrerpolicy="no-referrer" />
<span v-else>{{ accountInitial(account) }}</span>
</span>
<div class="publish-modal__identity-copy">
<strong :title="account.displayName">{{ account.displayName }}</strong>
<span :title="`${account.platformName} · ${account.platformUid}`">{{ account.platformName }} · {{ account.platformUid }}</span>
</div>
</div>
<span class="publish-modal__check"> <span class="publish-modal__check">
<span v-if="isSelected(account.id)" class="publish-modal__check-inner"></span> <span v-if="isSelected(account.id)" class="publish-modal__check-inner"></span>
</span> </span>
<span class="publish-modal__avatar" :style="{ background: account.platformAccent }">
<img v-if="account.avatarUrl" :src="account.avatarUrl" :alt="account.displayName" />
<span v-else>{{ accountInitial(account) }}</span>
</span>
<div class="publish-modal__identity-copy">
<strong>{{ account.displayName }}</strong>
<span>{{ account.platformName }} · {{ account.platformUid }}</span>
</div>
</div> </div>
<div class="publish-modal__meta-group"> <div class="publish-modal__card-footer">
<div class="publish-modal__tags"> <div class="publish-modal__tags">
<a-tag :color="healthColor(account.health)">{{ healthLabel(account.health) }}</a-tag> <a-tag :color="healthColor(account.health)">{{ healthLabel(account.health) }}</a-tag>
<a-tag :color="clientStatusColor(account)">{{ clientStatusLabel(account) }}</a-tag> <a-tag :color="clientStatusColor(account)">{{ clientStatusLabel(account) }}</a-tag>
@@ -734,12 +734,13 @@ function normalizePlatformUid(value?: string | null): string {
} }
.publish-modal__list { .publish-modal__list {
display: flex; display: grid;
flex-direction: column; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 10px; gap: 16px;
max-height: 380px; max-height: 400px;
overflow-y: auto; overflow-y: auto;
padding-right: 6px; padding-right: 6px;
padding-bottom: 4px;
} }
/* Custom scrollbar for list */ /* Custom scrollbar for list */
@@ -751,50 +752,70 @@ function normalizePlatformUid(value?: string | null): string {
border-radius: 999px; border-radius: 999px;
} }
.publish-modal__list-item { .publish-modal__card {
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: space-between; gap: 14px;
width: 100%; width: 100%;
padding: 14px 16px; padding: 16px;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 8px; border-radius: 12px;
background: #ffffff; background: #ffffff;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; 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; 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; border-color: #3b82f6;
background: #eff6ff; background: #eff6ff;
box-shadow: 0 0 0 1px #3b82f6; 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; cursor: not-allowed;
opacity: 0.6; opacity: 0.6;
background: #f9fafb; 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; display: flex;
align-items: center; align-items: center;
gap: 14px; gap: 12px;
min-width: 0; min-width: 0;
flex: 1;
} }
.publish-modal__meta-group { .publish-modal__card-footer {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; justify-content: space-between;
flex-shrink: 0; 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 { .publish-modal__check {
@@ -808,9 +829,10 @@ function normalizePlatformUid(value?: string | null): string {
background: #fff; background: #fff;
flex-shrink: 0; flex-shrink: 0;
transition: all 0.2s; transition: all 0.2s;
margin-top: 2px;
} }
.publish-modal__list-item--active .publish-modal__check { .publish-modal__card--active .publish-modal__check {
background: #3b82f6; background: #3b82f6;
border-color: #3b82f6; border-color: #3b82f6;
} }
@@ -825,13 +847,13 @@ function normalizePlatformUid(value?: string | null): string {
transition: opacity 0.2s; transition: opacity 0.2s;
} }
.publish-modal__list-item--active .publish-modal__check-inner { .publish-modal__card--active .publish-modal__check-inner {
opacity: 1; opacity: 1;
} }
.publish-modal__avatar { .publish-modal__avatar {
width: 38px; width: 40px;
height: 38px; height: 40px;
border-radius: 8px; border-radius: 8px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -861,6 +883,9 @@ function normalizePlatformUid(value?: string | null): string {
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
line-height: 1.4; line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.publish-modal__identity-copy span { .publish-modal__identity-copy span {
@@ -868,7 +893,9 @@ function normalizePlatformUid(value?: string | null): string {
color: #6b7280; color: #6b7280;
font-size: 13px; font-size: 13px;
line-height: 1.5; line-height: 1.5;
word-break: break-all; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.publish-modal__state-pill { .publish-modal__state-pill {