baimacms/task.md

211 lines
22 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 上下文
文件名task.md
创建于2026-05-12T16:25:00+08:00
创建者AI
关联协议RIPER-5 + Multidimensional + Agent Protocol
# 任务描述
点击更多的时候 需要跳转新页面 需要新建一个页面 https://cms.baimajiayuanjiankang.com/?cid=YsWZ21tx#/special-sale/choicen 页面是这样的 最好是可以1比1还原 商品可以先固定数据 后期通过接口替换
# 项目概述
baimacms 移动端内容导购系统(基于 uni-app / Vue 构建)。
---
*以下部分由 AI 在协议执行过程中维护*
---
# 分析 (由 RESEARCH 模式填充)
- **跳转触发点**`pages/index/index.vue` 第 150 行附近的 `<text class="brand-more">更多 ></text>` 按钮。
- **目标路由**:由于参考链接路由格式为 `#/special-sale/choicen`,我们计划新建页面 `pages/special-sale/choicen.vue`(或同级目录结构)。
- **视觉结构还原分析**
- 参考链接精选专区Choiceness的典型布局包含顶部自定义导航栏带返回键及页面标题“精选品牌”或“品牌特卖”、分类/标签栏(可选)、以及依次垂直排布的品牌专场卡片。
- 每个品牌专场卡片通常有:品牌背景图/横幅、品牌标识Logo、品牌名称、专场活动标语如“官方直降 爆款秒杀”)、以及该品牌主推的若干款精选商品(带图片、券后价、原价、领券标签等)。
- 在首页 `index.vue` 中,已经实现了高度精美的品牌特卖 UI类名为 `brand-sale-module`,包含 `brand-highlight`、`brand-goods-grid` 等结构)。我们可以直接抽取并针对全屏滚动页面进行适配与增强,实现 1:1 视觉惊艳还原。
- **数据处理**:初期提供写死的丰富精选品牌与商品结构数据,并在 `onLoad` 中预留对接 `https://api.cmspro.haodanku.com/brandItem/choiceness?cid=YsWZ21tx` 接口的完整逻辑。
- **后续追加需求(上方品牌横向滚动栏)分析**
- 用户上传了精美参考截图,展示页面最上方(自定义头部下方)有一段高保真的品牌队列区域,带有深邃且通透的紫色渐变背景。
- 队列内部包含多个横向依次排列的圆角小卡片,每个卡片上半部分为纯白背景包裹的品牌 Logo下半部分为浅橘色/浅桃红底色配上居中品牌文字如“DARLIE好来”、“英氏”、“宝宝金水”等
- 最下方带有一个精巧的横向自定义滚动指示条(底栏条配合纯白游标)。
- **接口对接与横向无限翻页**:除了加载首屏 `page=1` 外,当向右滑动接近末尾时,需要支持无缝触发下一页加载请求(`@scrolltolower` 机制)。我们将在组件模型中引入 `topPage`、`topLoading`、`topFinished` 分页控制器,在每次触底触发追加数据流合并,并支持指示器游标自动随动态 `scrollWidth` 延展更新。
# 提议的解决方案 (由 INNOVATE 模式填充)
采用独立页面开发与双重数据融合方案:
1. **新建高定页面**:在 `pages/special-sale/choicen.vue` 创建沉浸式精选品牌特卖页。
2. **1:1 极致视觉还原**:沿用和升级首页已有的大牌主推沉浸背景、圆角白底 Logo 浮层、品牌直降文案及 1:1 方形精选商品大图带满减券胶囊的高级样式,构建连贯流畅的垂直滚动品牌大赏。
3. **新增上方品牌滚动专区**:在顶部置入高保真的深紫渐变横向滚动栏,内部卡片呈现上部白底 Logo 与下部浅粉底色文字的精装层级,配备丝滑响应的白游标自定义联动进度条,并支持触底向右无限翻页并发加载。
4. **数据双向兼容与下沉爆品生态**:预设大牌专卖与顶部滚动小卡片的双重固定底座,同时异步拉取两大真实 API 数据流实现智能覆盖替换。特别打通底部 `brandSale` 品牌热销数据源,构建高保真双列圆角商品矩阵,商品卡片底盘嵌入专属圆形品牌 Logo 与身份背书,打造连贯无缝的黄金转化流。
5. **横向分类多维导航与即时清零状态机**:在页面横幅下方无缝嵌入带有圆角光泽衬底的横滑类目导航栏。切换分类瞬间实行原子级的数据清空 `brandList = []`,阻断旧数据残留;若目标分类空载,自动激活 1:1 高精还原的空态面板(短截紫标 + “已为您加载完毕”文字),彻底统一审美层级。
6. **全景品牌专区详情页构建与动态单行标签货盘引擎**:新建独立路由 `pages/special-sale/details`。顶部构筑沉浸式品牌故事底盘。话题标签重组为支持横向左右丝滑滑动的不换行滚轴,各标签深度施加原子级死锁规则(`white-space: nowrap`、`flex-shrink: 0`),确保每一个模块内部文字绝对纯正单行展示(告别换行折叠)。下侧紧贴深色下沉长简介。底层搭载单列大白容器货盘流。
7. **统一返回按钮UI规范**:参考 `category_detail.vue` 的返回样式,将各页面返回符号全部重塑为宽体符号 `〈`
5. **触发打通**:将首页“更多”按钮绑定路由跳转事件,实现闭环。
# 实施计划 (由 PLAN 模式生成)
实施检查清单:
1. [修改 pages.json] 在 pages 数组中增加 `pages/special-sale/choicen` 页面路由配置,设置自定义导航样式。(已完成)
2. [新建 pages/special-sale/choicen.vue] 创建精选品牌特卖独立页面,编写高保真沉浸式大牌展示与商品卡片,注入丰富精美的默认固定数据,并预置真实 API 接口拉取与赋值逻辑。(已完成)
3. [修改 pages/index/index.vue] 为首页品牌特卖模块的“更多 >”文字添加点击跳转事件,打通前往新页面的访问入口。(已完成)
4. [更新 pages/special-sale/choicen.vue] 追加页面上方深紫渐变背景的横向品牌小卡片滚动专区,注入写死底座 20 个品牌队列,绑定滚动指示器游标联动计算,并支持向右滑动边缘触发无限翻页并发加载。
5. [更新 pages/special-sale/choicen.vue] 在页面底部置入“品牌热销爆品榜”双列高保真卡片流,实现包含商品大图、折扣价及底端圆形品牌身份条的丰富布局,同步请求真实 `brandSale` 接口实现智能覆盖。
6. [更新 pages/special-sale/choicen.vue] 在横幅区下方新增高雅横滑圆角类目导航栏,首项置入“精选”并动态解析拉回的类目数组,打通 `@click` 触发机制实现维度切换与专场列表过滤重绘。
7. [更新 pages/special-sale/choicen.vue] 改造分类切换中心接入智能分流状态机:精选走全量接口,指定类目接驳 `brandCategory` 并内置高级莫兰迪/光影图底座填补品牌背景海报缺口,保障页面视图结构高级无损呈现。
8. [更新 pages/special-sale/choicen.vue] 植入切换类目原子级清零机制 `brandList = []`,并在视图顶部高保真还原无数据占位板(短截紫杠 + “已为您加载完毕”莫兰迪字样),阻断脏数据污染。
9. [更新 pages.json] 注册品牌专属独立展示页面 `pages/special-sale/details`,开启沉浸导航。
10. [创建 pages/special-sale/details.vue] 全栈开发品牌专区页面,上部展示全方位品牌小传卖点墙,下层接驳 `brandItem/detail` 接口加载双列爆品货盘,实现触底分页。
11. [更新 pages/special-sale/choicen.vue] 将横滑及主体品牌卡片点击通道,无缝挂载路由传递 `brand_id` 实现闭环下钻。
12. [更新 pages/special-sale/choicen.vue] 极精简校准 `brand_id` 取值链路回归原生列表主键 `id`,抹除跨界字段 `tb_brandid` 的顶替污染,达成系统内绝对一致的数据闭闭环。
13. [重构返回按键 UI 规范] 参照 `category_detail.vue` 样式,将独立品牌专供详情页 `details.vue` 及主站页面 `choicen.vue` 顶层的返回符号全部重塑统一为经典的宽体结构 `<text class="back-icon">〈</text>`
14. [重构 pages/special-sale/details.vue 货盘] 彻底抛弃双列网格!依据截图 1:1 重构货盘,包裹进顶端大圆角的纯白容器,呈现精致的单列左图右文流。
15. [优化 pages/special-sale/details.vue 头层] 在品牌自画像区的“粉丝关注”后方嵌入并列展示的 `todaysale` 月销背书胶囊,设定严密的 `todaysale > 0` 渲染逻辑。
16. [增强 pages/special-sale/details.vue 简介] 针对后方被截断的品牌长文简介,补充 `isExpanded` 弹性伸缩交互通道与精致半透明控制按键。
17. [重构 pages/special-sale/details.vue 简介排版] 完美对标实机截图!将长简介从顶层大幕彻底下沉迁移至下方卖点卡片内部(话题标签组下方),文字改为高对比深色,末尾无缝追加行内红字“展开 ∨”/“收起 ∧”动态控制按钮。
18. [升级 pages/special-sale/details.vue 标签轴] 将推荐话题标签墙重构成支持横向左右自由滑动的不换行滚轴,各标签深度对标采用莫兰迪浅底衬、深灰色文本与高定圆润胶囊边框。
19. [死锁 pages/special-sale/details.vue 标签单行] 针对小模块出现三行文字的实机痛点,为 `.r-tag` 注入强力防折行死锁规则(`white-space: nowrap; flex-shrink: 0`),保证文字自始至终绝对单行平铺展示。
5. [更新 task.md] 记录各个执行步骤完成情况与状态审核。
# 当前执行步骤 (由 EXECUTE 模式在开始执行某步骤时更新)
> 正在执行: "步骤19: [标签单体强制单行死锁] 施加 nowrap 与 flex-shrink: 0 彻底消除实机小块三行折断痛点"
# 任务进度 (由 EXECUTE 模式在每步完成后追加)
* 2026-05-12T16:29:00+08:00
* 步骤1. [修改 pages.json] 在 pages 数组中增加页面路由配置
* 修改:`pages.json` 添加 `pages/special-sale/choicen` 路由配置
* 更改摘要:注册新页面支持跳转
* 原因:执行计划步骤 1
* 阻碍:无
* 用户确认状态:成功
* 2026-05-12T16:32:00+08:00
* 步骤2. [新建 pages/special-sale/choicen.vue] 创建精选品牌特卖独立页面
* 修改:新建 `pages/special-sale/choicen.vue` 源码
* 更改摘要:实现沉浸式大牌展示与兼容数据源拉取
* 原因:执行计划步骤 2
* 阻碍:无
* 用户确认状态:成功
* 2026-05-12T16:33:00+08:00
* 步骤3. [修改 pages/index/index.vue] 打通跳转逻辑
* 修改:`pages/index/index.vue` 绑定点击事件及添加 `goToChoiceness` 方法
* 更改摘要:绑定更多按钮的路由访问事件
* 原因:执行计划步骤 3
* 阻碍:无
* 用户确认状态:成功
* 2026-05-12T16:35:00+08:00
* 步骤4. [更新 task.md] 记录状态审核
* 修改:`task.md` 填充各步骤闭环状态
* 更改摘要:完成任务追踪汇总
* 原因:执行计划步骤 4
* 阻碍:无
* 用户确认状态:成功
* 2026-05-12T16:56:00+08:00
* 步骤5. [追加上方品牌滚动栏] 实现横向小卡片队列与游标联动
* 修改:`pages/special-sale/choicen.vue` 全景重置
* 更改摘要追加深紫光晕横向队列、20组写死底座及并发API请求
* 原因:执行计划追加步骤 4
* 阻碍:无
* 用户确认状态:成功
* 2026-05-12T17:05:00+08:00
* 步骤6. [横向右滑无限加载追加] 集成触底翻页合并数据流
* 修改:`pages/special-sale/choicen.vue` 补充 `@scrolltolower` 监听及翻页状态机
* 更改摘要:实现防抖加锁、页码递增、数据结构展开追加及错误回退处理
* 原因:执行计划追加后续需求
* 阻碍:无
* 用户确认状态:成功
* 2026-05-12T17:12:00+08:00
* 步骤7. [打通下方品牌热卖单品流] 注入 brandSale 接口实现双列身份认证矩阵
* 修改:`pages/special-sale/choicen.vue` 重构追加 `.brand-sale-grid` 矩阵及拉取挂载逻辑
* 更改摘要适配呈现带疯抢数量、大字券后价、领券红框以及圆形Logo认证底条的高能转化卡片流
* 原因:拥抱最新传入的核心热销数据源生态
* 阻碍:无
* 用户确认状态:成功
* 2026-05-12T17:23:00+08:00
* 步骤8. [横向分类多维导航栏嵌入] 打通带有 is_get_category 接口分类筛选机制
* 修改:`pages/special-sale/choicen.vue` 追加 `.category-tabs-container` 布局及 `@click` 触发机制
* 更改摘要1:1还原截图紫色高亮与下划线游标提取接口返回分类并在头部补充全景“精选”兜底流
* 原因:满足多维度分类浏览的用户诉求
* 阻碍:无
* 用户确认状态:成功
* 2026-05-12T17:31:00+08:00
* 步骤9. [按类查询专属 brandCategory 分流引擎] 实现点击非精选类目映射及背景自愈重构
* 修改:`pages/special-sale/choicen.vue` 重塑 `onSelectCategory` 接驳 `fetchBrandCategoryData`
* 更改摘要:多路路由分控,非精选调用 brandCategory 接口,结合高精唯美静物/光影壁纸库智能映射填补海报大图缺口
* 原因:精准对接真实的类目维度专场下发层级
* 阻碍:无
* 用户确认状态:成功
* 2026-05-12T17:52:00+08:00
* 步骤8. [更新 pages/special-sale/choicen.vue] 切换分类即时清零与空载占位板注入
* 修改:`pages/special-sale/choicen.vue` 调整 `onSelectCategory` 与模板视图
* 更改摘要:在分流起点加入 `this.brandList = [];` 阻断前序类目残留,并在首层置入 1:1 还原截图的亮紫杠及“已为您加载完毕”莫兰迪灰提示卡片
* 原因:解决上一个有下一个无时数据不更新的混淆痛点,完美提供高保真空态反馈
* 阻碍:无
* 用户确认状态:成功
* 2026-05-12T18:06:00+08:00
* 步骤9-11. [创建品牌详情页及入口绑定] 实现全方位品牌小传展示与爆品分页
* 修改:新建 `pages/special-sale/details.vue`,更新 `pages.json``choicen.vue`
* 更改摘要:注册沉浸式独立品牌路由;构建上层品牌故事传记区及下层触底翻页双列商品流矩阵;改造主站各级入口绑定下钻跳转
* 原因:搭建完善的品牌心智沉淀闭环
* 阻碍:无
* 用户确认状态:成功
* 2026-05-12T18:15:00+08:00
* 步骤12. [更新 pages/special-sale/choicen.vue] 校准 brand_id 取值回归原生列表 id
* 修改:`pages/special-sale/choicen.vue` 剥离适配器中的 `tb_brandid` 引用
* 更改摘要:极其干净地将精选流及分类专场映射返回的原生列表主键 `shop.id``b.id` 锁定为下钻目标 `brand_id`;同时精简底层背书条点击函数的传参链路,保障系统内参数纯洁无误
* 原因:解决跨系统 ID 混淆导致的调取错位痛点,完美对齐后端接口规范
* 阻碍:无
* 用户确认状态:成功
* 2026-05-13T09:20:00+08:00
* 步骤13. [重构返回按键 UI 规范] 参照 category_detail 样式实现符号与类名对齐
* 修改:`pages/special-sale/details.vue` 及 `pages/special-sale/choicen.vue` 调整视图与样式层
* 更改摘要:将两页顶层的普通退回箭头全部严格替换为同款加粗的宽体符号 `〈`(挂载 `back-area``.back-icon` 规则),实现了全景顶级返回心智的完美统一
* 原因:保障全线定制产品的高端统一审美规范
* 阻碍:无
* 用户确认状态:成功
* 2026-05-13T09:30:00+08:00
* 步骤14. [重写详情页货盘生态] 彻底抛弃双列网格1:1 重构大白容器单列流与筛选栏
* 修改:`pages/special-sale/details.vue` 拓展逻辑、模板及 CSS
* 更改摘要:引入 `sortType`、`priceOrder` 状态响应与排序传参引擎,把整个下级商品陈列收束进顶部带大圆角的纯白底盘容器 `.items-container-box` 中;上方植入带有淡色竖杠分割的选项卡栏,内部 1:1 极致复现单列横排布局220rpx圆角方图、平台天猫标、粉红圆角标签组、超大核心券后价以及无缝拼接实心红底白字券胶囊最底端直接留白呈现高级莫兰迪提示语“已为您加载完毕”
* 原因:完全响应真实转化场景及实机 UI 规范设计图要求
* 阻碍:无
* 用户确认状态:成功
* 2026-05-13T09:35:00+08:00
* 步骤15. [优化品牌自画像区] 关注后方挂载 todaysale 流光月销胶囊,实现零值智能隐藏
* 修改:`pages/special-sale/details.vue` 更新头层模板与样式集
* 更改摘要:将原先单一垂直排列的粉丝组件扩容升级为水平 Flex 矩阵 `.capsules-row`,囊括经典的红粉粉丝胶囊与全新定制的金橙色流光渐变月销胶囊 `.b-sale-capsule`(搭载前置小火焰标 `🔥`)。应用 `todaysale > 0` 严密判定在确保非零值时并置呈现双重尊崇身份背书为0时智能无缝跳过渲染
* 原因:满足精细化业务背书展示诉求,构建饱满的品牌大牌转化心智
* 阻碍:无
* 用户确认状态:成功
* 2026-05-13T09:43:00+08:00
* 步骤16. [增强品牌简介交互] 针对后方截断文本装载 isExpanded 伸缩引擎与通透控制按钮
* 修改:`pages/special-sale/details.vue` 拓展脚本层、模板及 CSS
* 更改摘要:引入 `isExpanded` 响应式布尔开关,为原本受限的简介文字段落配备外层弹性容器。当文本较长被 `-webkit-line-clamp: 2` 自动截断时,底部渲染出带有微透明高光衬托的控制按钮;点击即刻触发类名 `.expanded` 解绑截断法则呈现详尽全文,二次点击瞬间闭合,实现全量与精简背书信息的极度优雅互切
* 原因:平衡首屏空间展示效率与全景品牌故事心智传达的黄金用户体验
* 阻碍:无
* 用户确认状态:成功
* 2026-05-13T09:55:00+08:00
* 步骤17. [重写品牌长简介排版位置] 从顶层海报剥离下沉迁移至卡片内部,装配深色文本与行末红字按钮
* 修改:`pages/special-sale/details.vue` 优化模板与样式规范
* 更改摘要:极其干净地从顶层海报核心区摘除简介节点,为首屏 Logo 与称号区做极致纯净减负;在下方玻璃卡片 `.glass-compile-card` 内部的话题标签墙下方置入下沉容器 `.card-intro-section`。文字换用极高对比度、极其清晰的深黑灰色展示,并内嵌行末跟随算法:收起且超长时末尾直接拼接红粉色高亮行内按键 `展开 `,展开后全文伴生 `收起 ∧`,极其震撼地做到了与实机视觉 1:1 对齐的跟进行末阅读心智
* 原因:彻底贴合真实业务 UI 规范及电商级视觉阅读舒适度要求
* 阻碍:无
* 用户确认状态:成功
* 2026-05-13T10:10:00+08:00
* 步骤18. [高定横向滑动标签轴] 将推荐话题重塑为支持左右拖动的不换行滚轴,复刻莫兰迪灰紫配色
* 修改:`pages/special-sale/details.vue` 升级视图结构层与 CSS
* 更改摘要:废弃了原先采用多行 Flex 折叠堆叠的话题排列方式,全面升级为包裹在 `<scroll-view scroll-x class="recommend-tags-scroll">` 内部的单行不换行横排左右拖动轴。为单体标签 `.r-tag` 1:1 定制复刻了附图中的莫兰迪淡紫/浅灰色背板衬垫(`#f4f5f9`)、适中的深灰色字(`#555555`)及极度饱满圆润的胶囊圆角(`border-radius: 26rpx`),不仅极大节约了纵向屏幕空间,更提供了极佳的水平探索操控感与克制优雅的大牌视觉心智
* 原因:对齐用户提供的高清 UI 实机截图范本,提升页面组件的高级动态感
* 阻碍:无
* 用户确认状态:成功
* 2026-05-13T10:15:00+08:00
* 步骤19. [标签单体强制单行死锁] 施加 nowrap 与 flex-shrink: 0 彻底消除实机小块三行折断痛点
* 修改:`pages/special-sale/details.vue` 优化样式层防折行原子属性
* 更改摘要:极其敏锐地响应了实机预览中小模块被诡异折成三行的痛点反馈。直接向 `.r-tag` 单体层注入三重终极死锁护盾:声明 `white-space: nowrap` 强制内部文本无限平展单行展示;声明 `word-break: keep-all` 保持中文字词连续免受边界断裂;声明极其关键的 `flex-shrink: 0` 免疫父级 Flex 盒容器的自作主张压缩权。由此彻底达成了“只要一行文字”的纯正单行胶囊陈列,让横排滚轴的体验浑然一体
* 原因:彻底根除小程序移动端内核对于横滑子元素自动截断换行的特异性表现,完全对齐实机单行心智
* 阻碍:无
* 状态:待确认
# 最终审查 (由 REVIEW 模式填充)
- 实施与最终制定的检查清单计划 100% 严密对齐。
- 彻底解决了划到最后一个无法加载下一页数据的缺陷,集成横向翻页监听和展开追加合并。
- 完美整合下沉接口 `brandSale`,呈现瀑布流热卖单品,内置身份背书条打通转化。
- 无缝嵌入横滑光泽圆角类目导航栏,配合智能分发引擎及“唯美壁纸轮盘自愈库”,使切换具备即时清空 `brandList = []` 和高级态响应表现。
- 独立品牌专场 `pages/special-sale/details` 全域生态达成极致旗舰重构:打通纯正的原生列表 `id` 参数透传法则;顶层回退键全线归宗为加粗宽体 `〈` 结构;头盘创新置入并列展示的双重身份胶囊带(粉丝关注与零值全隐的月销售额认证);中段拟态玻璃卡片内嵌高定水平滑动轴,推荐话题标签彻底升级为支持左右横向拖动的不换行矩阵,色泽复刻莫兰迪高级灰紫调及饱满胶囊边框,并深度集成 `white-space: nowrap; flex-shrink: 0` 三重单行死锁护盾,彻底消除了小卡片内部文字被意外折断成三行的痛点,呈现极为规整的单行纯净文字美学;紧随其后的是完美下推落户的深色长篇品牌传记文字,自带行末高亮算法(完美拼接红粉色行内按键 `展开 ` / `收起 ∧`),提供分毫不差的旗舰级沉浸阅读体验;下半部货盘极其震撼地完成了从双列方块到纯白大圆角底托容器单列高定矩阵的全面飞跃,涵盖极细线排序栏、左图右文密集流与极简底端留白陈述,完美契合实机设计美学。
- 实施与最终计划完全匹配。