【OpenHarmony/HarmonyOs 】数学知识库收藏管理：标签筛选、详情弹窗与近场分享数据准备

【OpenHarmony/HarmonyOs 】数学知识库收藏管理标签筛选、详情弹窗与近场分享数据准备项目类型OpenHarmony / HarmonyOS ArkTS 数学学习应用项目名称数学视界对应主题近场快传、全场景智慧生活、隐私保护方案关键词ArkTS、收藏系统、知识库、标签筛选、详情弹窗、结构化数据 一、为什么收藏系统不只是“加个爱心”在数学视界项目中收藏系统不是简单地把某个条目标记为喜欢而是一个个人数学知识库。用户可以收藏公式知识点趣味百科图形方案历史内容自定义笔记。这就让收藏系统具备了更大的扩展空间本地复习标签筛选详情查看编辑备注删除整理近场分享备份恢复元服务“最近收藏”入口。所以这篇文章重点写FavoritesPage.ets如何把收藏做成结构化知识库。二、收藏页面状态分类、标签、搜索、排序收藏页的状态比较完整StateselectedCategory: string 全部Statecategories: string[] [全部,公式,知识点,趣味百科,图形,历史,自定义]StateallTags: string[] [全部,几何,代数,三角,函数,概率,导数,常数,基础,趣味百科,画板]StateselectedTag: string 全部StatesearchKeyword: string StatesortType: string 最新StateviewMode: string listStatefavorites: FavoriteItem[] []StatefilteredFavorites: FavoriteItem[] []这说明收藏页支持多维度管理按分类看按标签看按关键词搜按最新/最早/名称/分类排序列表视图和网格视图切换。对学习应用来说这些能力比单纯“收藏/取消收藏”更有价值。三、FavoriteItem收藏条目的统一结构全局收藏类型定义在AppState.etsexport interface FavoriteItem {id:stringtype:stringtitle:stringcontent:stringcategory:stringicon:stringbgColor:stringaccentColor:stringnote:stringtags:string[] createdAt:numberupdatedAt:numbergraphData?:stringthumbnail?:string}这个结构的亮点是它能统一承载多种内容公式type formula知识点type knowledge图形type graph可带graphData自定义笔记type custom。尤其是graphData字段它为后续近场快传数学图形方案做了准备。分享时不一定要传图片可以传结构化数据。四、筛选逻辑分类、标签、关键词组合过滤收藏页的核心筛选逻辑如下private doFilter(): void {let result: FavoriteItem[] this.favoritesif (this.selectedCategory! 全部) { result result.filter((item: FavoriteItem): boolean item.category this.selectedCategory) } if (this.selectedTag! 全部 this.selectedTag! ) { result result.filter((item: FavoriteItem): boolean item.tags.indexOf(this.selectedTag) 0 ) } if (this.searchKeyword.trim() ! ) { const kw: string this.searchKeyword.toLowerCase() result result.filter((item: FavoriteItem): boolean item.title.toLowerCase().indexOf(kw) 0 || item.content.toLowerCase().indexOf(kw) 0 || item.note.toLowerCase().indexOf(kw) 0 ) } this.filteredFavorites result }这个逻辑非常适合个人知识库想看公式选“公式”想看函数相关内容选“函数”标签想找某个关键词直接搜索标题、内容、备注多个条件可以叠加。五、排序让知识库更容易整理收藏页支持四种排序if(this.sortType 最新) { result.sort((a: FavoriteItem,b: FavoriteItem):numberb.createdAt - a.createdAt ) }elseif(this.sortType 最早) { result.sort((a: FavoriteItem,b: FavoriteItem):numbera.createdAt - b.createdAt ) }elseif(this.sortType 名称) { result.sort((a: FavoriteItem,b: FavoriteItem):numbera.title.localeCompare(b.title,zh-CN) ) }elseif(this.sortType 分类) { result.sort((a: FavoriteItem,b: FavoriteItem):numbera.category.localeCompare(b.category,zh-CN) ) }这些排序方式对应不同学习场景最新复习最近收藏最早回顾长期积累名称按知识点查找分类整理知识结构。六、添加收藏自定义内容也能进入知识库收藏页支持用户手动添加内容addFavorite(): void {if(this.addTitle.trim() ) {this.showToast(⚠️ 请输入标题)return}if(this.addContent.trim() ) {this.showToast(⚠️ 请输入公式/内容)return}constparsedTags: string[] this.addTags.split(/[,]/) .map((t: string): string t.trim()) .filter((t: string): boolean t !)constnewItem: FavoriteItem { id: Date.now().toString(), type:this.addCategory 公式?formula:custom, title:this.addTitle.trim(), content:this.addContent.trim(), category:this.addCategory, icon: iconMap[this.addCategory] ??, note:this.addNote.trim() !?this.addNote.trim() :用户收藏, tags: parsedTags, createdAt: Date.now(), updatedAt: Date.now(), } AppState.addFavorite(newItem) }这让收藏页不仅能接收系统内置公式、百科、画板也能接收用户自己的笔记。七、编辑与详情弹窗收藏需要可维护收藏详情弹窗展示了标题、分类、内容、备注、标签Text(this.selectedItem.title)Text(this.selectedItem.category · this.formatDate(this.selectedItem.createdAt))Text(this.selectedItem.content)Text(this.selectedItem.note||暂无备注)标签展示ForEach(this.selectedItem.tags, (tag:string) {Text(tag).fontSize(12).fontColor(#FF7A8A).backgroundColor(this.getIconBg(#FFE8F0)) .borderRadius(10)})底部提供编辑和删除Button(✏️ 编辑) .onClick(() {this.showDetailDialog falsethis.openEditDialog(this.selectedItem!) }) Button(️ 删除) .onClick(() {this.removeFavorite(this.selectedItem!.id)this.showDetailDialog false})知识库不是越多越好也需要整理。编辑和删除能力能让用户保持收藏质量。八、近场分享为什么结构化收藏很重要如果后续接入近场快传收藏系统可以直接作为分享数据来源interface FavoriteSharePackage {version:numbertype:stringtitle:stringcontent:stringcategory:stringnote:stringtags:string[] graphData?:string}比如分享一条公式分享一篇趣味百科分享一个图形画板方案分享一组标签下的知识点。结构化分享比截图更适合学习场景因为接收方可以继续编辑、收藏和复习。九、隐私保护收藏默认留在本地收藏内容可能包含用户的学习重点、错题备注、个人笔记所以它也属于需要保护的学习数据。当前项目的收藏管理是本地状态refreshFavorites(): void { this.favorites AppState.favoritesthis.doFilter() }默认不上传、不共享、不做 AI 识图。用户主动触发分享时再生成结构化数据包是更稳妥的方式。十、全场景扩展收藏可以成为学习资产中心收藏页后续可以扩展到多个场景场景用法元服务展示最近收藏的公式近场快传分享公式卡片或图形方案备份恢复换机保留个人知识库今日复习从收藏中抽取一条知识点学习报告统计收藏分类分布这说明收藏系统不是附属功能而是学习资产中心。十一、总结这篇文章贴合近场快传、全场景智慧生活和隐私保护主题重点是数学视界的收藏知识库。核心实现包括 用FavoriteItem统一承载公式、知识点、百科、图形和自定义内容 用分类、标签、关键词组合筛选 支持最新、最早、名称、分类排序 用详情弹窗展示内容、备注和标签✏️ 支持编辑和删除方便维护知识库质量 通过graphData为图形方案分享做准备 默认本地管理用户主动触发时再分享。对数学学习 App 来说收藏系统的价值不只是“喜欢”。它真正承载的是用户长期积累的学习资产。