鸿蒙文搜图·图境奇旅：剧情藏线索，搜对图片才能翻页的旅行手账

这是一个把「文搜图」做成叙事解谜的 HarmonyOS 应用。你得自己读懂一段旅行故事，从字里行间提炼出关键词，才能搜出剧情所指的那张图。搜对了才能翻页，搜错了……那就再读一遍。六章旅程走完，回头解锁整册旅行照片。全程端侧、零网络、零权限。

---

一、效果展示：一段完整的解谜流程

1. DevEco Studio 中的运行全景

项目 story-quest 在 DevEco Studio 中一键运行到 Mate 90 Pro 模拟器。左侧项目结构、中间 README、右侧运行窗口，底部日志显示 com.example.storyquest successfully launched。全程端侧、无网络、无权限。

2. 开始页：旅行手账封面

开始页走旅行手账风：奶油纸底，一张白卡片上用橘红胶带贴条斜贴着「TRAVEL LOG · 六章旅程」标签，下面是手写感的「图境奇旅」大标题。副题写着「剧情里藏着线索，搜对图片才能翻页。像翻旅行手账一样，走完六段故事。」

下面三个彩色小标签排成列：读剧情（蓝）、搜图库（红）、搜分数（绿），各配一行说明。底部一枚天蓝色「启程翻页」按钮，整个页面像一本刚翻开的旅行手账。

3. 第一章「启程的清晨」：读故事找线索

进入第一章，顶部是行程节点线——6 个圆点排成一行，当前第 1 站用红色高亮，其余灰白，右端标注「第 1 站 / 共 6 站 · 行囊积分 0」。

剧情卡用红色「本章剧情」胶带贴条标记，内容是：

天刚蒙蒙亮，行囊已经收拾好。双手捧起一只粗瓷碗，姜片和柠檬在水里打着转，热气一直烫到心口。喝完这一碗，就该出门了。

——搜索这碗暖手的东西。

线索就藏在故事里：粗瓷碗、姜片、柠檬、热气、暖手。玩家需要自己提炼关键词，不能靠系统给。

下方是自由输入框（占位提示「提炼关键词，如：毛茸茸 宠物」），旁边一枚蓝色「翻图」按钮。右下角还有个小字链接「求个提示 · -20 分」——卡关时可以花 20 分看三个提示词。

4. 输入关键词：手机键盘弹出

玩家输入了「宠物」——这是被占位提示「毛茸茸 宠物」带偏了。键盘弹出，输入框聚焦，还没点「翻图」。

这一张截图展示了自由输入检索的交互形态：虽然是自由文本搜索，但语境完全不同——你不是在找图，是在解谜。

5. 第一次搜索：错搜出「草地与狗」

用「宠物」搜出唯一结果：「草地与狗」——一个女孩蹲在草地上逗狗。得分角标 3，底部标签「宠物」。

但这不是剧情所指的图！剧情说的是「姜片和柠檬在水里打着转」，指向的是「柠檬姜茶」。搜索框下方弹出一条珊瑚红错误提示：「『草地与狗』不是这一站的风景，再读一遍剧情」。

这个设计的核心在于：检索结果是对的（标签确实命中「宠物」），但剧情理解是错的。系统不会告诉你该搜什么词，只会告诉你搜错了。

6. 第二次搜索：搜「茶」仍错选「晨光茶歇」

玩家调整关键词为「茶」，搜出「晨光茶歇」——一杯茶配一本书，晨光洒在桌面上。得分 3，标签「茶杯」。

点选后依然错误：「『晨光茶歇』不是这一站的风景，再读一遍剧情」。原因是「晨光茶歇」的标签是「下午茶、书本、阅读」，和剧情里的「姜片、柠檬、暖手」并不匹配。

真正的目标是「柠檬姜茶」——标签含「姜茶、柠檬、热饮」，和剧情完美对应。玩家需要再读一遍故事，抓住「姜片和柠檬」这个关键细节，搜「姜茶」才能命中。

---

二、产品立意：把「读故事」变成「搜图」

「图境奇旅」的核心设计只有一句话：搜索框里不放关键词，放你对剧情的理解。

传统的文搜图应用，查询词要么自由输入、要么系统给定、要么从词池挑选。而这个应用更进一步——查询词需要玩家自己从一段旅行故事里提炼出来。你不是在操作一个搜索框，而是在读一段旅行故事。故事里的每一个细节（粗瓷碗、姜片、柠檬、热气）都是线索，你需要把它们翻译成图库的标签语言。

这个设计让「搜索」变成了阅读理解的自然延伸：读懂了就能搜到，搜不到就说明没读到位。

---

三、六章旅程：一段从清晨到归途的完整叙事

六章构成一段环形旅程——清晨出发，穿过城市、黄昏、星夜、雪山，最终回到出发的地方：

章节	标题	目标图	核心线索
1	启程的清晨	柠檬姜茶	粗瓷碗、姜片、柠檬、暖手
2	城市的告别	欧式穹顶	穹顶、塔楼、天际线
3	黄昏的云	云天	云、傍晚、月亮
4	荒野的星夜	星空下的谷仓	星空、夜晚、寂静
5	雪山的召唤	雪山	雪山、峰顶、积雪
6	归途的伙伴	草地与狗	狗、草地、陪伴

每章末尾的破折号给出搜索指令（「——搜索这碗暖手的东西」），但不给具体词——关键词需要玩家自己从故事里提炼。

---

四、核心机制：提炼关键词与错误纠偏

1. 自由输入 + 标签计分检索

search(query: string): void {
  const keywords = query.split(/\s+/).filter(k => k.length > 0);
  for (const card of CARDS) {
    let score = 0;
    for (const kw of keywords) {
      if (card.tags.indexOf(kw) >= 0) score += 3;
      else if (card.title.indexOf(kw) >= 0) score += 2;
      else { /* 部分匹配 */ }
    }
    if (score > 0) hits.push(...);
  }
  hits.sort((a, b) => b.score - a.score);
}

检索引擎是纯端侧的标签计分匹配（标签精确 +3、标题包含 +2、部分匹配 +1），关键词不是随手敲的，而是从剧情里读出来的。搜索结果的排序本身就是对剧情理解的反馈——目标图排得越靠前，说明你提炼的关键词越精准。

2. 错误提示：不剧透答案，只给方向

wrongFeedback = `『${hit.title}』不是这一站的风景，再读一遍剧情`;

点错图后不会弹出「正确答案是 XX」，只会温和地提示「再读一遍剧情」。这个设计保护了叙事解谜的核心乐趣——玩家需要自己回头重读故事，发现被忽略的细节。

3. 提示系统：花钱看词，每章一次

useHint(): void {
  if (this.hintShown || this.hintsUsed >= 1) return;
  this.hintWords = this.chapter.hintWords;  // 如 ['姜茶', '柠檬', '碗']
  this.hintShown = true;
}

卡关时可以花 20 分看三个提示词（如第一章的「姜茶、柠檬、碗」）。但每章只能用一次，且总分扣 20——提示是有代价的。

4. 计分：一次搜对 100 分，多搜多错皆扣

得分 = max(20, 100 - 搜索次数×10 - 提示×20)

第一次就搜对拿满分 100；每多搜一次 -10，用提示 -20，下限 20 分保底。6 章满分 600，终局按总分解锁回顾画廊。

---

五、UI 实现：旅行手账的视觉体系

配色：奶油纸底 + 三色标签

色值	用途
#F5F0E1	奶油纸底
#2D2926	墨色文字
#E85D3D	橘红（胶带/剧情标签/当前站）
#4A90D9	天蓝（读剧情/按钮）
#5CA85C	草绿（搜分数/成功反馈）
#D94A4A	珊瑚红（错误提示/搜图库标签）

关键视觉元素

• 胶带贴条：TRAVEL LOG、本章剧情 等标签用微倾斜的色块模拟手账胶带
• 行程节点线：6 个圆点连成一线，当前站红色高亮，已过站灰色，未来站灰白
• 拍立得照片：搜索结果和解锁图卡用白边圆角卡片，微微倾斜，模拟拍立得照片钉在手账上的效果
• 便签提示条：错误提示用珊瑚红便签条，成功提示用草绿便签条

---

六、验证：截图与代码逻辑核对

截图	关键数据	代码验证
03-chapter1	第 1 站 / 共 6 站，行囊积分 0	CHAPTERS.length = 6，初始 totalScore = 0 ✓
05-hit-dog	「宠物」搜出草地与狗，得分 3	草地与狗标签含「宠物」→ +3 分 ✓
06-wrong-tea	「茶」搜出晨光茶歇，错选提示	晨光茶歇标签含「茶杯」→ 命中但非目标图 ✓
06-wrong-tea	错误提示「再读一遍剧情」	wrongFeedback 文案匹配 ✓

三次搜索的词组变化（宠物 → 茶 → 姜茶）清晰展示了逐步逼近正确理解的过程。

---

七、已知边界

1. 六章剧情为固定内容，无分支或多结局
2. 内置图卡共 12 张，部分章节的「目标画面」与剧情的对应带有解读色彩
3. 未实现进度持久化，退出应用后从头开始
4. 提示词为预置，未做动态生成——如果玩家搜的词和提示词完全不同，提示可能不够有针对性

---

八、小结

「图境奇旅」把「读懂一段故事」变成「搜出一张图」，把「搜索」变成「理解」的自然延伸。旅行手账的视觉体系 + 六章环形叙事 + 自由提炼关键词的检索机制，让文搜图这个技术动作第一次有了故事感。全程端侧、零网络零权限，模拟器即可完整游玩。