本方案面向一个服装电商商城首页，沿用本项目
store-pages/*.yaml的页面结构约定 （Page容器 +Header/PlaceHolder/Footermaster 模板 + 各业务组件通过dataLoader取数）。 可直接作为clothing主题的store-pages/home.yaml蓝图。
1. 设计理念与视觉风格
| 维度 | 方案 |
|---|---|
| 主题定位 | 现代都市轻时尚服饰（Unisex / 通勤 + 休闲） |
| 主色 | 极简黑白 + 一点焦糖棕（#1A1A1A / #FFFFFF / #B08968） |
| 辅助色 | 雾灰 #EAEAEA、缎光米 #F7F4EF |
| 字体 | 标题用衬线（如 Playfair Display），正文用无衬线（Inter / 系统中文字体） |
| 质感 | 大留白、大图banner、细线分隔、卡片轻阴影 |
| 响应式 | 桌面 4 列商品网格 → 平板 2 列 → 手机 1~2 列 |
2. 信息架构（自上而下区块）
- Header（导航：首页 / 女装 / 男装 / 新品 / 折扣 / 关于）
- HeroBanner —— 当季主推大片 + 双 CTA（逛女装 / 逛男装）
- EntryGrid（场景/功能入口，见下方说明）—— 按”场景/品类”快速挑选
- ProductSection（mode: new） —— 本周上新
- CategorySection —— 服装品类墙（女装/男装/童装/鞋包/配饰）
- ImageTextSection —— 品牌故事 / 可持续面料
- FeatureSection —— 为什么选择我们（正品保障/7天无理由/极速发货/会员积分）
- ProductSection（mode: hot） —— 热卖榜单
- BrandsSection —— 合作品牌
- Footer（品牌 / 快捷链接 / 客服 / 订阅资讯）
3. 首页 YAML 蓝图
type: Page
props:
id: clothing-home-page
title: 都市衣橱 - 首页
pagePath: /home
key: clothing-home-page
children:
- type: HeroBanner
props:
id: clothing-home-hero
key: clothing-home-hero
- type: EntryGrid
props:
id: clothing-home-scenes
title: 按场景挑选
subtitle: 一键直达适合你的穿搭
key: clothing-home-scenes
dataLoader:
name: categoryDataSet
args:
datasetId: clothing-scene-entry
- type: ProductSection
props:
id: clothing-home-new
title: 本周上新
icon: ✨
mode: new
key: clothing-home-new
currency: ${store.currency}
dataLoader:
name: productDataSet
args:
datasetId: clothing-dataset-new-arrivals
- type: CategorySection
props:
id: clothing-home-categories
title: 商品分类
subtitle: 从基础款到当季流行，一应俱全
key: clothing-home-categories
dataLoader:
name: categoryDataSet
args:
datasetId: clothing-dataset-categories
- type: ImageTextSection
props:
id: clothing-about
key: clothing-about
title: 关于都市衣橱
paragraphs:
- 都市衣橱创立于 2018 年，专注为都市人群提供兼具质感与实穿性的日常服饰。
- 我们与全球面料供应商合作，坚持环保工艺，让每一件衣服都经得起时间考验。
image: "https://example.com/clothing-atelier.jpg"
imageAlt: 品牌故事
stats:
- number: 8年
label: 行业沉淀
- number: 200+
label: 合作工厂
- number: 300万+
label: 满意会员
- type: FeatureSection
props:
id: clothing-choose-us
key: clothing-choose-us
title: 为什么选择我们
description: 把购衣体验做到简单、安心、值得
items:
- id: f1
title: 正品保障
description: 品牌直供，假一赔十
icon: fas fa-certificate
- id: f2
title: 7天无理由
description: 不满意随时退换
icon: fas fa-undo
- id: f3
title: 极速发货
description: 当日下单当日发出
icon: fas fa-shipping-fast
- id: f4
title: 会员积分
description: 消费即返积分抵现
icon: fas fa-star
- type: ProductSection
props:
id: clothing-home-hot
title: 热卖榜单
icon: 🔥
mode: hot
key: clothing-home-hot
currency: ${store.currency}
dataLoader:
name: productDataSet
args:
datasetId: clothing-dataset-best-sellers
- type: BrandsSection
props:
id: clothing-home-brands
key: clothing-home-brands
masterId: <master-uuid>
master:
type: Page
props:
id: <master-uuid>
title: 服装商城主模板
children:
- type: Header
props:
dataLoader:
name: headerData
id: header
storeBasePath: ${storeBasePath}
showSearch: true
showCart: true
showUser: true
showTopbar: true
topbarText: 🚚 满 ¥199 包邮 · 新客首单立减 ¥30 · 会员专享折扣 👗
language: ${store.language}
- type: PlaceHolder
props:
id: place-holder
className: place-holder
- type: Footer
props:
id: footer
copyrightText: © 2026 都市衣橱. 保留所有权利.
children:
- type: FooterSection
props:
id: footer-brand
title: 都市衣橱
children:
- type: Text
props:
id: footer-brand-desc
text: 为都市生活而设计的实穿服饰，兼顾质感与可持续。
- type: SocialLinks
props:
id: footer-social
links:
- id: s-wx
title: 微信
url: '#'
icon: fab fa-weixin
- id: s-wb
title: 微博
url: '#'
icon: fab fa-weibo
- id: s-dy
title: 抖音
url: '#'
icon: fab fa-tiktok
- type: FooterSection
props:
id: footer-categories
title: 商品分类
children:
- type: Links
props:
id: footer-cat-links
items:
- id: c-women
text: 女装
url: '#women'
- id: c-men
text: 男装
url: '#men'
- id: c-kids
text: 童装
url: '#kids'
- id: c-shoes
text: 鞋包配饰
url: '#accessories'
- type: FooterSection
props:
id: footer-service
title: 客户服务
children:
- type: Links
props:
id: footer-service-links
items:
- id: sv-delivery
text: 配送说明
url: '#'
- id: sv-return
text: 退换政策
url: '#'
- id: sv-size
text: 尺码指南
url: '#'
- id: sv-contact
text: 联系我们
url: '#'
- type: FooterSection
props:
id: footer-subscribe
title: 订阅资讯
children:
- type: Text
props:
id: subscribe-desc
text: 订阅获取新品上架与会员专属优惠
- type: SubscribeNews
props:
id: footer-subscribe-news
title: 订阅资讯
description: 订阅获取新品上架与会员专属优惠
placeholder: 输入您的邮箱
buttonText: 订阅
theme: clothing
previewManagedAssets: true4. 关键区块说明
EntryGrid（按场景挑选）
- 复用前面命名的通用组件
EntryGrid，此处填入”场景/功能”维度入口： 通勤穿搭、约会造型、运动休闲、度假风、基础百搭、大码专区。 - 每个入口 = 图标/图片 + 文字标签 + 跳转链接，与烘焙主题的”按场景挑选”同构，可跨主题复用。
ProductSection（mode 字段）
mode: new→ 新品数据集；mode: hot→ 热卖数据集。- 由
productDataSet取数与currency: ${store.currency}渲染价格。
CategorySection
- 由
categoryDataSet提供服装品类（女装/男装/童装/鞋包/配饰），网格卡片点击进入对应分类页。
5. 组件需求清单（clothing 主题需实现/复用）
| 组件 | 来源 | 说明 |
|---|---|---|
Page / Header / Footer / PlaceHolder | 框架内置 | 通用 |
HeroBanner | 复用 baking | 需适配服装大图风格 |
EntryGrid（entry-grid） | 通用组件 | 场景/功能入口 |
ProductSection | 复用 baking | 支持 mode: new/hot |
CategorySection | 复用 baking | 服装品类墙 |
ImageTextSection | 复用 baking | 品牌故事 |
FeatureSection | 复用 baking | 卖点 |
BrandsSection | 复用 baking | 合作品牌 |
FooterSection / Text / Links / SocialLinks / SubscribeNews | 复用 baking | 页脚构件 |
视觉差异主要通过**主题 SCSS 变量（主色/字体/间距）**与 Hero 大图实现，组件逻辑可最大化复用， 符合项目”主题自包含、组件跨主题复用”的约定。