From 4f69657017ff3dd0298f30bf8cc4ef3a1bc329b3 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Mon, 5 Oct 2026 14:46:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(distribution):=20=E5=88=86=E7=AB=99?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=94=B9=E4=B8=BA=E8=81=94=E5=90=8D=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E5=B9=B6=E5=90=8C=E6=AD=A5=E6=89=8B=E6=9C=BA=E8=BD=AE?=
 =?UTF-8?q?=E6=92=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

首页主标题显示为站名×大锤商行，手机端使用与电脑端相同的分站自定义海报。

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/features/listings/views/HomeView.vue  | 28 ++---------
 .../listings/views/MobileHomeView.css         |  9 ++++
 .../listings/views/MobileHomeView.vue         | 14 ++++--
 .../src/stores/distributionHomeBanner.spec.ts | 25 ++++++++++
 frontend/src/stores/distributionSite.ts       | 48 +++++++++++++++++++
 5 files changed, 96 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/stores/distributionHomeBanner.spec.ts

diff --git a/frontend/src/features/listings/views/HomeView.vue b/frontend/src/features/listings/views/HomeView.vue
index 8fdbe23..ac83f3c 100644
--- a/frontend/src/features/listings/views/HomeView.vue
+++ b/frontend/src/features/listings/views/HomeView.vue
@@ -40,7 +40,7 @@ import HomeBanner from '../components/HomeBanner.vue'
 import HomeFilters from '../components/HomeFilters.vue'
 import HomeZones from '../components/HomeZones.vue'
 import ListingCard from '../components/ListingCard.vue'
-import { useDistributionSiteStore } from '@/stores/distributionSite'
+import { mapDistributionHomeBanners, useDistributionSiteStore } from '@/stores/distributionSite'
 
 const siteStore = useDistributionSiteStore()
 
@@ -59,28 +59,8 @@ const displayAnnouncements = computed(() => {
 })
 const banners = ref<HomeBannerSlide[]>(defaultHomeBanners)
 const displayBanners = computed<HomeBannerSlide[]>(() => {
-  if (siteStore.isDistribution && siteStore.banners && siteStore.banners.length > 0) {
-    return siteStore.banners.map(b => {
-      const imageUrl = b.image_url?.trim() || ''
-      // 整张海报已含文案。再叠标题会触发整幅压暗遮罩，左右两侧颜色会被压暗。
-      if (imageUrl) {
-        return {
-          eyebrow: '',
-          title: '',
-          badge: '本店精选',
-          pill: '',
-          tone: 'gold',
-          image_url: imageUrl,
-        }
-      }
-      return {
-        eyebrow: siteStore.siteName,
-        title: b.title || '精选游戏账号 · 随租随玩',
-        badge: '本店精选',
-        pill: '官方保障',
-        tone: 'gold',
-      }
-    })
+  if (siteStore.isDistribution && siteStore.banners.length > 0) {
+    return mapDistributionHomeBanners(siteStore.banners, siteStore.siteName)
   }
   return banners.value
 })
@@ -461,7 +441,7 @@ if (!restored) {
             <span class="dist-pulse"></span>
             {{ siteStore.storefrontText.hero_badge }}
           </div>
-          <h2 class="dist-portal-title">{{ siteStore.siteName }}</h2>
+          <h2 class="dist-portal-title">{{ siteStore.coBrandName }}</h2>
           <p class="dist-portal-desc">{{ siteStore.storefrontText.hero_desc }}</p>
         </div>
         <div class="dist-portal-badges">
diff --git a/frontend/src/features/listings/views/MobileHomeView.css b/frontend/src/features/listings/views/MobileHomeView.css
index 7fee354..19ae8d0 100644
--- a/frontend/src/features/listings/views/MobileHomeView.css
+++ b/frontend/src/features/listings/views/MobileHomeView.css
@@ -328,6 +328,15 @@
   object-fit: cover;
 }
 
+.mobile-banner.has-image:not(.has-copy) {
+  background: #0f172a;
+}
+
+.mobile-banner.has-image:not(.has-copy) .banner-image {
+  object-fit: contain;
+  background: #0f172a;
+}
+
 .mobile-banner.has-image.has-copy::after {
   position: absolute;
   inset: 0;
diff --git a/frontend/src/features/listings/views/MobileHomeView.vue b/frontend/src/features/listings/views/MobileHomeView.vue
index f2d0306..700b02e 100644
--- a/frontend/src/features/listings/views/MobileHomeView.vue
+++ b/frontend/src/features/listings/views/MobileHomeView.vue
@@ -60,7 +60,7 @@ import {
   getListingResources,
 } from '@/shared/utils/listingDisplay'
 import { buildMobileHomeListSignature, useMobileHomeCacheStore } from '@/stores/mobileHomeCache'
-import { useDistributionSiteStore } from '@/stores/distributionSite'
+import { mapDistributionHomeBanners, useDistributionSiteStore } from '@/stores/distributionSite'
 import { useSessionStore } from '@/stores/session'
 
 const router = useRouter()
@@ -97,6 +97,12 @@ const displayAnnouncements = computed(() => {
   return announcements.value
 })
 const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners)
+const displayBanners = computed<HomeBannerSlide[]>(() => {
+  if (siteStore.isDistribution && siteStore.banners.length > 0) {
+    return mapDistributionHomeBanners(siteStore.banners, siteStore.siteName)
+  }
+  return bannerSlides.value
+})
 const awRecycle = ref<AWRecycleConfig>({ ...defaultAWRecycleConfig })
 const awRecyclePreviewVisible = ref(false)
 const cooperationFeedback = ref<CooperationFeedbackConfig>({ ...defaultCooperationFeedbackConfig })
@@ -507,7 +513,7 @@ function openCooperationFeedback() {
 function openBannerPreview(slide: HomeBannerSlide) {
   const url = slide.image_url?.trim()
   if (!url) return
-  const images = bannerSlides.value
+  const images = displayBanners.value
     .map(item => item.image_url?.trim() || '')
     .filter((item): item is string => Boolean(item))
   const startPosition = images.indexOf(url)
@@ -903,14 +909,14 @@ if (!restoreHomeConfigFromCache()) {
           <div v-if="siteStore.isDistribution" class="mobile-dist-card">
             <div class="dist-card-top">
               <span class="dist-card-badge">{{ siteStore.storefrontText.hero_badge }}</span>
-              <strong class="dist-card-name">{{ siteStore.siteName }}</strong>
+              <strong class="dist-card-name">{{ siteStore.coBrandName }}</strong>
             </div>
             <p class="dist-card-sub">{{ siteStore.storefrontText.card_sub }}</p>
           </div>
 
           <!-- Banner 轮播 -->
           <van-swipe class="banner-swipe" :autoplay="3600" lazy-render>
-            <van-swipe-item v-for="slide in bannerSlides" :key="slide.title || slide.image_url">
+            <van-swipe-item v-for="slide in displayBanners" :key="slide.image_url || slide.title">
               <div
                 class="mobile-banner"
                 :class="[
diff --git a/frontend/src/stores/distributionHomeBanner.spec.ts b/frontend/src/stores/distributionHomeBanner.spec.ts
new file mode 100644
index 0000000..0272341
--- /dev/null
+++ b/frontend/src/stores/distributionHomeBanner.spec.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+import { formatDistributionCoBrandName, mapDistributionHomeBanners } from './distributionSite'
+
+describe('formatDistributionCoBrandName', () => {
+  it('joins a distribution site with the main brand', () => {
+    expect(formatDistributionCoBrandName('天域商行', true)).toBe('天域商行×大锤商行')
+  })
+
+  it('keeps the main site name', () => {
+    expect(formatDistributionCoBrandName('大锤商行', false)).toBe('大锤商行')
+  })
+})
+
+describe('mapDistributionHomeBanners', () => {
+  it('uses the custom image without overlay copy', () => {
+    const [slide] = mapDistributionHomeBanners(
+      [{ image_url: 'https://cdn.example/poster.webp', title: '海报标题' }],
+      '天域商行'
+    )
+    expect(slide?.image_url).toBe('https://cdn.example/poster.webp')
+    expect(slide?.title).toBe('')
+    expect(slide?.eyebrow).toBe('')
+    expect(slide?.pill).toBe('')
+  })
+})
diff --git a/frontend/src/stores/distributionSite.ts b/frontend/src/stores/distributionSite.ts
index dd07d7c..6acec58 100644
--- a/frontend/src/stores/distributionSite.ts
+++ b/frontend/src/stores/distributionSite.ts
@@ -14,6 +14,50 @@ export interface DistributionBanner {
   title?: string
 }
 
+export interface DistributionHomeBanner {
+  eyebrow: string
+  title: string
+  badge: string
+  pill: string
+  tone: string
+  image_url?: string
+}
+
+/** 分站首页主标题：站名与主站联名。主站或站名已含主站名时保持原样。 */
+export function formatDistributionCoBrandName(siteName: string, isDistribution: boolean): string {
+  const name = siteName.trim()
+  if (!isDistribution) return name || '大锤商行'
+  if (!name || name.includes('大锤商行')) return name || '大锤商行'
+  return `${name}×大锤商行`
+}
+
+/** 分站首页轮播：有图时不再叠标题，避免整幅压暗。 */
+export function mapDistributionHomeBanners(
+  banners: DistributionBanner[],
+  siteName: string
+): DistributionHomeBanner[] {
+  return banners.map(banner => {
+    const imageUrl = banner.image_url?.trim() || ''
+    if (imageUrl) {
+      return {
+        eyebrow: '',
+        title: '',
+        badge: '本店精选',
+        pill: '',
+        tone: 'gold',
+        image_url: imageUrl,
+      }
+    }
+    return {
+      eyebrow: siteName,
+      title: banner.title?.trim() || '精选游戏账号 · 随租随玩',
+      badge: '本店精选',
+      pill: '官方保障',
+      tone: 'gold',
+    }
+  })
+}
+
 export interface DistributionFooterInfo {
   icp?: string
   copyright?: string
@@ -92,6 +136,10 @@ export const useDistributionSiteStore = defineStore('distributionSite', {
     brandMark(state): string {
       return state.isDistribution && state.siteName ? state.siteName.slice(0, 1) : '锤'
     },
+    /** 分站首页主标题：站名与主站联名。 */
+    coBrandName(state): string {
+      return formatDistributionCoBrandName(state.siteName, state.isDistribution)
+    },
   },
 
   actions: {