feat(home): 首页品牌条文案支持后台配置
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user