其实，

鸿蒙业务需求实战：搜索 AI 卡片与搜索框提示词轮播

一、需求背景

这次需求围绕公司鸿蒙项目中的搜索能力展开。主要实现两个功能：

1. 搜索结果页顶部新增 AI 卡片。
2. 首页搜索框内新增推荐问题轮播提示词。按理说，

虽然表面上看是 UI 改动。但实际牵扯到页面定位、组件抽离、ViewModel 状态管理、Biz mock 数据、Controller / Presenter 调用、路由传参、@Param@Event@TraceSwiper 等多项技术点。

从使用者痛点1来看，搜索入口不清晰。导致定位困难

者在寻找相关代码时往往先看到一段文案，却不知道它对应的组件位置。通过全局搜索“搜索服务、地图、帖子”可以定位到首页组件文件，避免了无意义的遍历。

二、根据页面文案定位入口

拿到需求后第一步先不是直接写代码，而是先找页面。不过，

⚠️ 小技巧：先定位文案。再追踪渲染逻辑，可以快速缩小范围。

步骤：

• 首页搜索框文案：搜索服务、地图、帖子
• 定位文件：flushu/yuanzhou_home/src/main/ets/components/TabHomeComp.ets
• 渲染方法：

  this.controller.onClickSearch

• Controller 路由跳转：

  HMUtil.push({
  pageUrl: LushuPageConstant.GlobalSearchPage。param: {
  searchContentState: SearchContentState.HISTORY,currentAreaData: areaHistoryUtil.getFirst,areaSearchShowState: AreaSearchState.AREA,suggestNotRequest: false
  } as GlobalSearchPageParam
  })

User Pain Point – 路由参数遗漏导致功能失效

若忘记传递必要参数，AI 卡片无法显示。 建议在 Controller 层统一封装参数拼接，并做校验。

三、定位搜索结果页

继续根据 LushuPageConstant.GlobalSearchPage 查找。可以定位到：

flushu/lushu_historyandsearch/src/main/ets/pages/GlobalSearchPage.ets

⚠️ 注意：此页面通过 @HMRouter 注册，任何路由变更都要同步更新常量。

• SERACH_CONTENT_STATE:
  - HISTORY 搜索历史
  • SUGGEST 搜索联想 AIGEN_AI_SUMMARY AI 卡片属于 SEARCH_RESULT 状态。
  • AIGEN_AI_SUMMARY -> GlobalSearchResultComp.ets -> List 顶部插入卡片。
  • AIGEN_AI_SUMMARY -> AISearchSummaryCard.tsx
  • AIGEN_AI_SUMMARY -> GlobalSearchBiz.mock -> 模拟返回 summaryText
  • AIGEN_AI_SUMMARY -> GlobalSearchPresenter.searchAiSummary
  • AIGEN_AI_SUMMARY -> ViewModel.aiSummaryText / aiSummaryLoading / aiSummaryKeyword
  • AIGEN_AI_SUMMARY -> GlobalSearchResultComp 渲染 Card
  • AIGEN_AI_SUMMARY -> AISearchSummaryCard UI + @Event onClickDetail
  • AIGEN_AI_SUMMARY -> HMUtil.push 跳转聊天页 并携带 keyword
  • AIGEN_AI_SUMMARY -> AgentChatPage 接收 param.keyword 并打印验证 *以上步骤可视化为一个闭环，从输入关键词到展示 AI 卡片再跳转聊天页。* **痛点** - **UI 与业务混合**：最初将卡片写在 GlobalSearchResultComp 内导致组件膨胀。- **缺少统一数据层**：mock 写在组件里耦合度高，后期接口替换麻烦。**方法** - 抽离 AISearchSummaryCard 为单独 UI 组件。- 引入 Biz Mock 层与 Presenter 分离业务请求。老实说，- 使用 ViewModel 管理状态，保持 UI 无副作用。---

    User Pain Point – 难以维护的 UI 与业务耦合代码块

    # 抽象 & 重构流程 #

    至于请注意，

    • 必须使用 HMUtil.push 并传入完整 param 对象，否则路由会被拦截。

    • 所有关键字段应当提前在 Controller 中定义并校验。

    层级 | 功能描述 | 示例代码 | 疑难点说明
    Main Page	Makes entry point via search box. `bigSearchBuilder` renders UI. `controller.onClickSearch` triggers route. ⚠️ If omitted => no navigation. this.controller.onClickSearch ✅ Router constant ensures correct target. ✅ In `onClick`。pass params .

    ---

    This is a sample representation of how to structure your table and notes within HTML content.

    ---

    ---

    ---

    ---

    ---

    ---