From ae63f60def3e0c59d2c229cc7b04aa551a1d71c3 Mon Sep 17 00:00:00 2001
From: liangxu <liangxu0920@qq.com>
Date: Sat, 25 Apr 2026 23:17:04 +0800
Subject: [PATCH] style(admin-web): apply blurred-backdrop cover treatment to
 KOL cards

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>
---
 .../src/components/kol/KolPackageCard.vue     | 37 ++++++-
 apps/admin-web/src/i18n/messages/en-US.ts     |  2 +-
 apps/admin-web/src/i18n/messages/zh-CN.ts     |  2 +-
 .../src/views/KolPackageDetailView.vue        | 96 +++++++++++++++++--
 apps/admin-web/src/views/TemplatesView.vue    | 35 ++++++-
 apps/admin-web/src/views/WorkspaceView.vue    | 38 +++++++-
 6 files changed, 186 insertions(+), 24 deletions(-)

diff --git a/apps/admin-web/src/components/kol/KolPackageCard.vue b/apps/admin-web/src/components/kol/KolPackageCard.vue
index d7cbf2c..543904a 100644
--- a/apps/admin-web/src/components/kol/KolPackageCard.vue
+++ b/apps/admin-web/src/components/kol/KolPackageCard.vue
@@ -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;
diff --git a/apps/admin-web/src/i18n/messages/en-US.ts b/apps/admin-web/src/i18n/messages/en-US.ts
index 488641a..7decf6d 100644
--- a/apps/admin-web/src/i18n/messages/en-US.ts
+++ b/apps/admin-web/src/i18n/messages/en-US.ts
@@ -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",
diff --git a/apps/admin-web/src/i18n/messages/zh-CN.ts b/apps/admin-web/src/i18n/messages/zh-CN.ts
index 9718236..228acf4 100644
--- a/apps/admin-web/src/i18n/messages/zh-CN.ts
+++ b/apps/admin-web/src/i18n/messages/zh-CN.ts
@@ -194,7 +194,7 @@ const zhCN = {
       },
       empty: "暂无已上架的订阅包",
       subscribers: "{count} 个订阅租户",
-      prompts: "{count} 个提示词",
+      prompts: "{count} 个精调模版",
     },
     package: {
       subscribe: "申请订阅",
diff --git a/apps/admin-web/src/views/KolPackageDetailView.vue b/apps/admin-web/src/views/KolPackageDetailView.vue
index 85e0393..10abb92 100644
--- a/apps/admin-web/src/views/KolPackageDetailView.vue
+++ b/apps/admin-web/src/views/KolPackageDetailView.vue
@@ -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 {
diff --git a/apps/admin-web/src/views/TemplatesView.vue b/apps/admin-web/src/views/TemplatesView.vue
index 3da098b..da23f92 100644
--- a/apps/admin-web/src/views/TemplatesView.vue
+++ b/apps/admin-web/src/views/TemplatesView.vue
@@ -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;
diff --git a/apps/admin-web/src/views/WorkspaceView.vue b/apps/admin-web/src/views/WorkspaceView.vue
index 0370320..398cc41 100644
--- a/apps/admin-web/src/views/WorkspaceView.vue
+++ b/apps/admin-web/src/views/WorkspaceView.vue
@@ -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;