feat(home): 首页品牌条文案支持后台配置

This commit is contained in:
2026-11-13 11:06:27 +08:00
parent 5d7fedd915
commit d65b8d8089
13 changed files with 442 additions and 8 deletions
+15
View File
@@ -34,6 +34,12 @@ export interface HomeBannerItem {
mobile?: HomeBannerVisual
}
export interface HomeBrandBarConfig {
eyebrow: string
title: string
subtitle: string
}
export interface HomeConfig {
announcements: string[]
banners: HomeBannerItem[]
@@ -41,6 +47,15 @@ export interface HomeConfig {
aw_recycle: HomeEntryConfig
cooperation_feedback: HomeEntryConfig
home_entries_enabled: boolean
/** 首页品牌条三行文案,后台可配置;旧接口未返回时前台回退默认值。 */
brand_bar?: HomeBrandBarConfig
}
/** 首页品牌条默认文案,与后端 mobile.home_brand_bar 默认值保持一致。 */
export const fallbackBrandBar: HomeBrandBarConfig = {
eyebrow: 'JIEYOU TRADING HOUSE · 账号租赁',
title: '解忧柜选',
subtitle: '实名审核 · 流程留痕 · 账单透明 · 争议可申诉',
}
export const fallbackBanners: HomeBannerItem[] = [
@@ -25,6 +25,7 @@ import {
import { Link } from 'react-router-dom'
import { BrandLogo } from '@/components/BrandLogo'
import { fallbackBrandBar, useHomeConfig } from '@/features/home/api'
import { HomePortalRow } from '@/features/home/HomePortalRow'
import { useListings } from '@/features/listings/api'
import {
@@ -296,6 +297,9 @@ export function ListingListPage() {
localStorage.setItem('jieyou:listings:view', mode)
}
const homeConfig = useHomeConfig()
const brandBar = homeConfig.data?.brand_bar ?? fallbackBrandBar
const publishOptions = useQuery({
queryKey: ['listing-publish-options'],
queryFn: fetchListingPublishOptions,
@@ -384,11 +388,9 @@ export function ListingListPage() {
<section className="home-market-bar">
<div className="home-market-bar__inner">
<div className="home-market-bar__copy">
<span className="home-market-bar__eyebrow">JIEYOU TRADING HOUSE · 账号租赁</span>
<strong className="home-market-bar__title">解忧柜选</strong>
<span className="home-market-bar__trust">
实名审核 · 流程留痕 · 账单透明 · 争议可申诉
</span>
<span className="home-market-bar__eyebrow">{brandBar.eyebrow}</span>
<strong className="home-market-bar__title">{brandBar.title}</strong>
<span className="home-market-bar__trust">{brandBar.subtitle}</span>
</div>
<Input.Search
allowClear
@@ -29,6 +29,7 @@ import { Link, useNavigate } from 'react-router-dom'
import { BrandLogo } from '@/components/BrandLogo'
import {
fallbackBanners,
fallbackBrandBar,
useHomeConfig,
type HomeBannerItem,
type HomeEntryConfig,
@@ -444,6 +445,7 @@ export function MobileHomePage() {
const banners = (homeConfig.data?.banners ?? fallbackBanners)
.filter(banner => banner.enabled !== false)
.slice(0, 4)
const brandBar = homeConfig.data?.brand_bar ?? fallbackBrandBar
const runBannerAction = (banner: HomeBannerItem) => {
const action = banner.mobile?.action
@@ -469,7 +471,7 @@ export function MobileHomePage() {
<section className="mobile-home-search">
<div className="mobile-home-search__heading">
<div>
<span>解忧柜选</span>
<span>{brandBar.title}</span>
<strong>今天想租什么账号?</strong>
</div>
<Link to="/m/announcements">规则</Link>
+10
View File
@@ -255,25 +255,35 @@
flex-direction: column;
gap: 1px;
min-width: 232px;
max-width: 360px;
}
.home-market-bar__eyebrow {
max-width: 100%;
overflow: hidden;
color: var(--ink-muted);
font-size: 10.5px;
letter-spacing: 0.18em;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-market-bar__title {
max-width: 100%;
overflow: hidden;
color: var(--brand-ink);
font-family: 'Noto Serif SC', 'Songti SC', serif;
font-size: 22px;
letter-spacing: 0.05em;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-market-bar__trust {
color: var(--ink-muted);
font-size: 11px;
line-height: 1.4;
}
.home-market-bar__search {