feat(distribution-banner): 分销站点轮播支持 PC/移动端分图与热区配置

This commit is contained in:
yml2213
2026-10-17 14:47:00 +08:00
parent ab9d852bde
commit 790267e3eb
9 changed files with 1472 additions and 120 deletions
+18 -5
View File
@@ -1,7 +1,7 @@
# 首页轮播图配置说明
> 适用范围:PC 首页 Hero 轮播(`HomeBanner.vue`)、移动端首页 Banner 轮播(`MobileHomeView.vue`)、后台「首页轮播图」弹窗(`HomeBannersDialog.vue`)。
> 配置存储位置:系统配置表 `mobile.home_banners`(JSON 字符串),前台接口 `GET /api/mobile-home-config`。
> 适用范围:PC 首页 Hero 轮播(`HomeBanner.vue`)、移动端首页 Banner 轮播(`MobileHomeView.vue`)、主站后台「首页轮播图」弹窗(`HomeBannersDialog.vue`),以及分销站点后台「品牌装修 → 首页轮播横幅」(`distribution-admin/src/pages/SiteSettings.tsx`)。
> 配置存储位置:主站为系统配置表 `mobile.home_banners`(JSON 字符串),前台接口 `GET /api/mobile-home-config`;分销站点为 `distribution_sites.banners_json`,随 `GET /api/distribution/site-info` 下发。
## 一、出图规范(两端容器严格等比,按规范出图不裁切)
@@ -107,9 +107,22 @@
3. 在预览图上**单击**新增热区 → **拖动**移动 → 拖右下角小方块缩放;下方可为选中热区设置名称、精确坐标、跳转,以及**热区按钮图**与**悬浮放大倍数**(后台预览图会把按钮图半透明铺在框内,所见即所得)。
4. 保存时写入 `mobile.home_banners`,后台会顺带把旧的扁平 `image_url` 结构升级为 `pc` / `mobile` 结构。
## 六、校验与兜底
## 六、分销站点后台
分销站点与主站使用**完全相同**的 `pc` / `mobile` 数据结构,但独立保存在 `distribution_sites.banners_json`,不影响主站配置。
入口:分销后台 → 品牌装修 → 「首页轮播横幅」。每条轮播同样支持:
1. 启用/停用、上移/下移、删除,以及眉标/主标题/角标/胶囊/色调;
2. PC 端与移动端分别上传图片、填写图片 URL、配置整图点击行为;
3. 每端独立配置热区:单击新增、拖动移动、拖右下角缩放,热区可设置透明 PNG 按钮图、悬浮放大、坐标与跳转;
4. 某一端留空时,该端前台回退为文字卡片,不会拿另一端的图强行裁切。
历史兼容:早期分销后台保存的扁平 `{ image_url, title, link }` 或 `{ image_url, link_url }` 会自动升级为两端共图;其中旧字段 `link` 与 `link_url` 都会被识别。分销前台归一化实现:`frontend/src/stores/distributionSite.ts`(`mapDistributionHomeBanners`)。
## 七、校验与兜底
- 前后端都会归一化配置:坐标收敛到 `0-100` 且不越界,宽高为 0 的热区直接丢弃;`route` / `link` 缺少目标时退化为 `none`(避免「点了没反应」的死热区)。
- 后端归一化实现:`backend/internal/modules/systemconfig/normalize.go`(`normalizeHomeBanners`)。
- 前端归一化实现:`frontend/src/features/listings/api/homeConfig.ts`(`normalizeHomeBanner`)。
- 相关测试:`frontend/src/features/listings/api/homeConfig.spec.ts`、`backend/internal/modules/systemconfig/home_banners_test.go`。
- 前端归一化实现:`frontend/src/features/listings/api/homeConfig.ts`(`normalizeHomeBanner`);分销站点为 `distribution-admin/src/homeBanner.ts`。
- 相关测试:`frontend/src/features/listings/api/homeConfig.spec.ts`、`frontend/src/stores/distributionHomeBanner.spec.ts`、`backend/internal/modules/systemconfig/home_banners_test.go`。