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

style(admin-web): apply blurred-backdrop cover treatment to KOL cards

Browse Source 
Switch KOL package, template, and workspace card covers from object-fit
cover to a blurred backdrop with a contained foreground image so non-16:9
artwork no longer crops awkwardly. Also restyle the package detail back
button, swap the generate-button copy for the canonical key, and rename
"prompts" counts to "refined templates" in i18n.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
liangxu
2026-04-25 23:17:04 +08:00
parent cde70ca5e0
commit ae63f60def
6 changed files with 186 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin-web/src/components/kol/KolPackageCard.vue
+33 -4
View File
@@ -25,7 +25,7 @@ function handleClick() {
<template>
<a-card hoverable class="kol-package-card" @click="handleClick">
<template #cover>
<div v-if="coverUrl" class="card-cover-image">
<div v-if="coverUrl" class="card-cover-image" :style="{ backgroundImage: `url(${coverUrl})` }">
<img alt="cover" :src="coverUrl" />
</div>
<div v-else class="card-cover-fallback">
@@ -82,18 +82,47 @@ function handleClick() {
}
.card-cover-image {
height: 160px;
aspect-ratio: 16 / 9;
background-color: #eef2f6;
background-position: center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
isolation: isolate;
}
.card-cover-image::before {
content: "";
position: absolute;
inset: -16px;
z-index: 0;
background: inherit;
filter: blur(18px);
opacity: 0.6;
transform: scale(1.08);
}
.card-cover-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: rgba(248, 250, 252, 0.34);
}
.card-cover-image img {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
object-fit: cover;
object-fit: contain;
}
.card-cover-fallback {
height: 160px;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
display: flex;
align-items: center;
apps/admin-web/src/i18n/messages/en-US.ts
+1 -1
View File
@@ -194,7 +194,7 @@ const enUS = {
},
empty: "No published subscription packages yet",
subscribers: "{count} subscribed tenants",
prompts: "{count} prompts",
prompts: "{count} refined templates",
},
package: {
subscribe: "Request subscription",
apps/admin-web/src/i18n/messages/zh-CN.ts
+1 -1
View File
@@ -194,7 +194,7 @@ const zhCN = {
},
empty: "暂无已上架的订阅包",
subscribers: "{count} 个订阅租户",
prompts: "{count} 个提示词",
prompts: "{count} 个精调模版",
},
package: {
subscribe: "申请订阅",
apps/admin-web/src/views/KolPackageDetailView.vue
+86 -10
View File
@@ -5,7 +5,7 @@ import { useI18n } from "vue-i18n";
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
import { message } from "ant-design-vue";
import {
ArrowLeftOutlined,
LeftOutlined,
UserOutlined,
TagOutlined,
ThunderboltOutlined,
@@ -93,10 +93,12 @@ function goBack() {
<template>
<div class="kol-package-detail">
<div class="detail-header">
<a-button type="link" @click="goBack" class="back-btn">
<template #icon><ArrowLeftOutlined /></template>
{{ t("common.back") }}
</a-button>
<button type="button" class="back-btn" @click="goBack" :aria-label="t('common.back')">
<span class="back-btn__icon">
<LeftOutlined />
</span>
<span class="back-btn__text">{{ t("common.back") }}</span>
</button>
</div>
<div v-if="packageQuery.isPending.value" class="loading-state">
@@ -107,7 +109,11 @@ function goBack() {
<a-row :gutter="24">
<a-col :xs="24" :lg="16">
<section class="main-card">
<div class="package-cover" v-if="resolvedCoverUrl">
<div
class="package-cover"
v-if="resolvedCoverUrl"
:style="{ backgroundImage: `url(${resolvedCoverUrl})` }"
>
<img :src="resolvedCoverUrl" alt="cover" />
</div>
<div class="package-info">
@@ -161,7 +167,7 @@ function goBack() {
:disabled="subscription?.status !== 'active'"
@click="handleGenerate(prompt.id)"
>
{{ t("kol.marketplace.prompts", { count: "" }).trim() }} 生成
{{ t("kol.generate.title") }}
</a-button>
</a-tooltip>
</div>
@@ -237,13 +243,54 @@ function goBack() {
gap: 16px;
}
.detail-content {
width: 100%;
max-width: 1360px;
margin: 0 auto;
}
.detail-header {
width: 100%;
max-width: 1360px;
display: flex;
align-items: center;
margin-bottom: 8px;
}
.back-btn {
appearance: none;
border: 0;
background: transparent;
padding: 0;
color: #595959;
display: inline-flex;
align-items: center;
gap: 10px;
color: #111827;
cursor: pointer;
}
.back-btn__icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(144, 157, 181, 0.24);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
}
.back-btn__text {
font-size: 16px;
line-height: 1;
font-weight: 700;
letter-spacing: 0;
}
.back-btn:hover .back-btn__icon {
border-color: rgba(144, 157, 181, 0.36);
}
.loading-state {
@@ -261,14 +308,43 @@ function goBack() {
.package-cover {
width: 100%;
height: 240px;
height: clamp(220px, 28vw, 340px);
background-color: #eef2f6;
background-position: center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
isolation: isolate;
}
.package-cover::before {
content: "";
position: absolute;
inset: -24px;
z-index: 0;
background: inherit;
filter: blur(24px);
opacity: 0.58;
transform: scale(1.08);
}
.package-cover::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: rgba(248, 250, 252, 0.28);
}
.package-cover img {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
object-fit: cover;
object-fit: contain;
}
.package-info {
apps/admin-web/src/views/TemplatesView.vue
+31 -4
View File
@@ -684,7 +684,7 @@ function refreshRecords(): void {
>
<div
class="templates-view__kol-cover"
:style="card.package_cover ? { backgroundImage: `url(${card.package_cover})` } : {}"
:style="card.package_cover ? { '--cover-image': `url(${card.package_cover})` } : {}"
>
<div v-if="!card.package_cover" class="templates-view__kol-cover-fallback">
<AppstoreOutlined class="templates-view__fallback-icon" />
@@ -1109,15 +1109,41 @@ function refreshRecords(): void {
.templates-view__kol-cover {
height: 120px;
background-size: cover;
background-position: center;
background-color: #f8fafc;
background-color: #f3f6fa;
position: relative;
border-bottom: 1px solid #f1f5f9;
overflow: hidden;
isolation: isolate;
}
.templates-view__kol-cover::before {
content: "";
position: absolute;
inset: -16px;
z-index: 0;
background-image: var(--cover-image);
background-position: center;
background-size: cover;
filter: blur(16px);
opacity: 0.55;
transform: scale(1.08);
}
.templates-view__kol-cover::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: var(--cover-image);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}
.templates-view__kol-cover-fallback {
position: relative;
z-index: 2;
height: 100%;
width: 100%;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
@@ -1134,6 +1160,7 @@ function refreshRecords(): void {
.templates-view__kol-hover-overlay {
position: absolute;
inset: 0;
z-index: 3;
background: rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;
apps/admin-web/src/views/WorkspaceView.vue
+34 -4
View File
@@ -342,7 +342,10 @@ function stopRecentArticlesPolling(): void {
class="kol-card"
@click="openRefinedTemplate(card)"
>
<div class="kol-card-cover" :style="card.package_cover ? { backgroundImage: `url(${card.package_cover})` } : {}">
<div
class="kol-card-cover"
:style="card.package_cover ? { '--cover-image': `url(${card.package_cover})` } : {}"
>
<div v-if="!card.package_cover" class="kol-card-cover-fallback">
<AppstoreOutlined class="fallback-icon" />
</div>
@@ -728,15 +731,41 @@ function stopRecentArticlesPolling(): void {
.kol-card-cover {
height: 120px;
background-size: cover;
background-position: center;
background-color: #f8fafc;
background-color: #f3f6fa;
position: relative;
border-bottom: 1px solid #f1f5f9;
overflow: hidden;
isolation: isolate;
}
.kol-card-cover::before {
content: "";
position: absolute;
inset: -16px;
z-index: 0;
background-image: var(--cover-image);
background-position: center;
background-size: cover;
filter: blur(16px);
opacity: 0.55;
transform: scale(1.08);
}
.kol-card-cover::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: var(--cover-image);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}
.kol-card-cover-fallback {
position: relative;
z-index: 2;
height: 100%;
width: 100%;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
@@ -753,6 +782,7 @@ function stopRecentArticlesPolling(): void {
.kol-card-hover-overlay {
position: absolute;
inset: 0;
z-index: 3;
background: rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;