Files
WonderQ-Project/docs/superpowers/specs/2026-08-27-mine-records-design.md
T

3.8 KiB

我的出行记录设计规格

目标

在 MiniAPP「我的」页面中,将“用车需求”和“历史浏览”收敛到同一个“我的出行记录”模块中,减少纵向区块数量,同时保持现有截图中的米白背景、白色卡片、橙棕色主操作色和圆角列表风格。

方案

采用已确认的 A 方案“我的出行记录”:一个外层列表容器,第一项为固定的“用车需求”入口,后续为最近浏览内容。

结构如下:

我的出行记录                         N 项
用车需求与最近浏览集中在这里
┌────────────────────────────────┐
│  [用车图标] 用车需求       >     │  固定入口
│             填写专属出行方案     │
├────────────────────────────────┤
│  [缩略图]   最近浏览标题     >    │  本地浏览记录
│             玩法路线             │
└────────────────────────────────┘

视觉规则

  • 继续复用当前 MineRecentViews.vue 的外层圆角卡片和列表分隔线。
  • 模块标题从“继续探索”改为“我的出行记录”。
  • 副标题改为“用车需求与最近浏览集中在这里”。
  • “用车需求”使用橙棕色浅底图标块,与最近浏览缩略图形成稳定的类型区分。
  • “用车需求”作为第一行显示,不额外创建新的页面区块。
  • 最近浏览项继续保留缩略图、标题、类型文案和右侧箭头。
  • 空态时仍保留“用车需求”第一行,下面显示原有“暂无浏览记录”空态和“去看看玩法”按钮。

交互和数据边界

  • 点击“用车需求”调用现有 goVehicleDemand(),继续由既有登录守卫处理未登录用户,然后进入 /pages/vehicle-demand。
  • 点击历史浏览项继续沿用现有 select-recent 事件和 openRecent() 路由分发,不改变三种历史浏览类型。
  • RecentlyViewedItem 和 miniapp:recently-viewed 本地存储结构不变。
  • 本次不新增“已提交用车需求历史”数据,不新增 Public API、数据库字段或后端接口;当前 Public API 只有需求提交接口,没有客户需求历史查询契约,因此“用车需求”在该模块中是固定入口,不冒充历史记录。
  • 退出登录时继续清理现有本地浏览记录;固定的“用车需求”入口不受清理影响。
  • 没有历史浏览记录时,模块仍然可用:用户可以直接点击“用车需求”,也可以通过空态按钮继续探索玩法。

影响范围

  • 修改 WonderQ-MiniAPP/src/pages/mine/components/MineRecentViews.vue:统一列表展示,并新增用车入口事件。
  • 修改 WonderQ-MiniAPP/src/pages/mine/components/MineMember.vue:透传用车入口事件。
  • 修改 WonderQ-MiniAPP/src/pages/mine/index.vue:绑定现有 goVehicleDemand() 导航。
  • 不修改 WonderQ-MiniAPP/src/lib/recentlyViewed.ts、Public API 契约、后端、数据库和管理端。

验收标准

  1. 登录后的「我的」页面只显示一个“我的出行记录”模块,不再把“用车需求”做成独立区块。
  2. “用车需求”始终位于列表第一项,点击后进入现有用车需求页,未登录时仍按原登录守卫处理。
  3. 有历史浏览记录时,历史项紧接在用车入口之后,原有详情跳转不回归。
  4. 无历史浏览记录时,用车入口仍显示,原有浏览空态和“去看看玩法”操作仍可用。
  5. 只使用当前 MiniAPP 的 Tailwind 工具类,不新增 SFC <style>。
  6. 通过 MiniAPP 定向类型检查/构建或现有测试验证,且变更不影响工作区中的其他未相关修改。