三大关键技术点：

1. 智能存储：使用Preferences用户首选项轻量存储，保存用户个人历史记录

2. 流畅交互：点击历史记录跳转相关页面

3. 隐私保护：支持一键清空

//KeyWords.ets

import { SearchContext } from '../components/SearchContext'
import { HMRouter, HMRouterMgr } from '@hadss/hmrouter';
import { preferencesUtil } from 'base';


@HMRouter({ pageUrl: 'search/Keywords' })

@Component
export struct Keywords {
  @StorageProp('bottomRectHeight')bottomRectHeight: number = 0;
  @StorageProp('topRectHeight')topRectHeight: number = 0;
  @Provide searchInput:string = ''
  @Provide  historylist:string[] =[]
  aboutToAppear(){

      this.historylist=preferencesUtil.get<string[]>('history') as string[]

  }
  @Builder
  SearchBuilder() {
    Row() {
      Row() {
        Search({ placeholder: '黑布林大李子',value:$$this.searchInput}).width('90%').backgroundColor(Color.White)
        Image($r('app.media.saoma')).width('8%')
      }.layoutWeight(1).backgroundColor(Color.White).height(40).borderRadius(40)

      Text('搜索').width(47).onClick(() =>{
        if (this.searchInput) {
          this.historylist.unshift(this.searchInput);
          preferencesUtil.put('history',this.historylist)
          preferencesUtil.flush('history',this.historylist)
        }
        HMRouterMgr.push({pageUrl:'goods/List'})
      })
    }.margin({ top: 30 }).width('95%')
  }

  build() {
    Column() {
      this.SearchBuilder()
      SearchContext()
    }.backgroundColor('#f2f2f2').height('100%').width('100%').padding({top: px2vp(this.topRectHeight), bottom: px2vp(this.bottomRectHeight) })
  }
}

视图循环展示

//SearchContext.ets

import { HMRouterMgr } from "@hadss/hmrouter"
import { Permissions } from '@kit.AbilityKit';
import { ApiListItemType, getPageType,hotTitleType, preferencesUtil, request } from "base";
import { PermissionManager } from '../../utils/permissionManager';
import SpeechRecognizerManager from '../../utils/speechRecognizerManager';

@Component
export struct SearchContext {

  @Consume searchInput:string
  @Consume historylist:string[]
  private async startSpeechRecognition() {
    const permissions: Permissions[] = ["ohos.permission.MICROPHONE"]
    // 检查是否拥有权限
    const isPermission = await PermissionManager.checkPermission(permissions)
    if (!isPermission) {
      //   如果没权限，就主动申请
      PermissionManager.requestPermission(permissions)
    }else {
      SpeechRecognizerManager.init(res => {
        this.searchInput = res.result
      })
    }
  }

  private stopSpeechRecognition() {
    SpeechRecognizerManager.cancel()
  }

  @State HotSearchList: hotTitleType[] = [
  ]
  async aboutToAppear(){

    // this.searchInput=preferencesUtil.get<string>('history') as string
    // preferencesUtil.put('history',this.searchInput)
    // this.searchInput=preferencesUtil.get<string>('history') as string
    // this.historyList=preferencesUtil.get<string[]>('history') as string[]
    //====================================
    const serverData:ApiListItemType<hotTitleType[]>=await request.get('/hotSearch/index',new getPageType(1,10))
    // promptAction.showToast({message:serverData.msg})
    this.HotSearchList=serverData.list
    // console.log('历史列表历史列表历史列表',this.historyList)
    // console.log('关键词关键词关键词关键词',this.searchInput)
  }
  build() {
    Column() {
      Row() {
        Text('历史记录').fontWeight(700).fontSize(18)
        Image($r('app.media.delete')).width(15).onClick(()=>{
          this.historylist=[]
          preferencesUtil.del('history')
        })
      }.justifyContent(FlexAlign.SpaceBetween).width('95%').margin({ top: 20 })

      Flex({ wrap: FlexWrap.Wrap }) {
        ForEach(this.historylist, (item: string,index:number) => {
          Badge({
            value: '×',
            position:BadgePosition.RightTop,
            style: { badgeSize: 4, badgeColor: '#f2f2f2' }
          })
          {
            Text(item)
              .fontSize(12)
              .padding(5)
              .margin(5)
              .backgroundColor('#f2f2f2')
              .borderRadius(5)
              .onClick(() => {
                HMRouterMgr.push({pageUrl:'goods/List'})
              })
          }
        })
      }.margin({ top: 10 })

      Row() {
        Text('热门推荐').fontWeight(700).fontSize(18)
        Image($r('app.media.fire')).width(15)
      }.justifyContent(FlexAlign.SpaceBetween).width('95%').margin({ top: 20 })

      Flex({ wrap: FlexWrap.Wrap }) {
        ForEach(this.HotSearchList, (item: hotTitleType) => {
          Row() {
            Text('· ').fontColor(Color.Red).fontSize(20)
            Text(item.content)
          }.width('50%').margin({ top: 10, bottom: 10 }).onClick(() => {
            HMRouterMgr.push({ pageUrl: 'goods/List', animator: false })
          })

        })
      }.width('95%').margin({ top: 10 })

      Row() {
        Image($r('app.media.mic')).width(16)
        Text('长按说出你要的东西').fontSize(13).gesture(
          LongPressGesture({ repeat: true })
            .onAction(() => {
              this.startSpeechRecognition();
            })
            .onActionEnd(() => {
              this.stopSpeechRecognition();
            })
        )
      }.backgroundColor('#d6d6d6').borderRadius(10).margin({ top: 240 }).padding(7)
    }.layoutWeight(1).width('95%').backgroundColor(Color.White).margin({ top: 10 })
  }
}