鸿蒙文搜图·诗境寻踪：从诗句里选词组词，搜出诗中所绘的那幅画

前面做过自由输入检索、限时反向找图、剧情解谜，这一篇把文搜图和中国古典诗词绑在一起——每关一首唐诗，你不能自由打字，只能从诗句下方的字词池里点选最多 4 个词组成搜索词，去图库里搜出诗中所绘的那幅画。词池里混着干扰词，选错了就搜不到正解。通关后逐张解锁诗词知识卡（名句赏析），八关集齐一册。

---

一、效果展示：从展卷到寻画的完整流程

1. DevEco Studio 中的运行全景

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

2. 开始页：朱砂大印 + 四行卷轴规则

开始页走亮宣纸水墨风：米白纸底，一枚 92×92 的朱砂方印「詩」居中，下面「诗境寻踪」四个大字加 6 像素字间距，副题「一句诗 · 一幅画 · 八关词境」。

规则卡做成卷轴式：壹/贰/叁/肆四行，每行左侧一个朱砂小方印（壹/贰/叁/肆），右侧一行说明——读诗、选词、寻画、计分。底部一枚朱砂红「展卷入诗」按钮，四角微圆（4px），没有多余的渐变和阴影，靠纸色 + 墨色 + 朱砂三色撑起整个国风气质。

3. 第 1 关《江雪》：竖排诗格 + 字词池

进入第 1 关，顶部左侧一枚「境」字小印 +「第 1 关 · 共 8 关 · 累计 0 分」。

诗卷卡是整屏的视觉重心：左侧窄列是题款（《江雪》/ 唐 / 柳宗元 + 一枚「賞」字小印），右侧是竖排诗句——「千山鸟飞绝，万径人踪灭。孤舟蓑笠翁，独钓寒江雪。」从右往左逐字纵列排布，完全还原古籍版式。

下方是字词池：8 个词分三行铺开（徒步/自然/茶杯/姜茶、雪山/积雪/徒步/自然、姜茶/茶杯/钢琴/海洋），其中混着明显与《江雪》无关的干扰词（钢琴、海洋、茶杯、姜茶）。顶部 4 个词槽显示已选词（当前已选「徒步、自然、茶杯、姜茶」——这是错误示范）。

4. 第一次搜索：词不对，搜出三张但都不是正解

用「徒步、自然、茶杯、姜茶」搜了一轮（右上角显示「已搜 1 次」），返回三张图：海边日落、空山、森林，每张右上角带红色得分角标「3」，底部绿色小字标出命中标签（都是「自然」）。

这三张图都沾边但都不是诗中所绘——《江雪》画的是「雪山独钓」，而搜索结果里没有雪山。这就是干扰词的作用：选词不精准，检索就会跑偏。

5. 第二次搜索：换上「雪山」仍差一口气

调整选词为「积雪、自然、钢琴、雪山」（仍有「钢琴」干扰词），再搜一轮。这次第一张就是「空山」（命中标签「自然、雪山」，得分 6），后面跟着「海边日落」「森林」。

已经接近了——「雪山」这个词把目标附近的图拉了上来，但「钢琴」「自然」这两个词引入了噪声，导致排序还不够干净。而且真正的目标图「雪山」（文件名 fish.png）还没出现在结果里。

6. 第三次搜索：纯「雪山」一词精准命中

最终精简为「钢琴、徒步、雪山、姜茶」四个词（其实核心就是「雪山」），搜出唯一结果：「雪山」图——白雪皑皑的山坡上几个人在行走，正是「千山鸟飞绝，万径人踪灭」的画面。右上角得分角标「3」，底部绿色标签「雪山」。

点选这张图即通关，解锁《江雪》的诗词知识卡。

---

二、产品立意：把「读诗」变成「检索」

合集里之前的工程，查询词要么是自由输入（text-image-finder），要么是系统给定线索（picture-hunt-game），要么是剧情里提炼（story-quest）。poem-vista 走了一条新路：查询词来自诗句，但由玩家自己选。

这个设计把「读懂一首诗」变成了一件可量化的事：

读诗 → 理解意境 → 从词池选出关键词 → 检索 → 验证理解是否正确

如果你真读懂了《江雪》，你会选「雪山」「积雪」「寒」这类词；如果只是扫了一眼，可能会被「徒步」「自然」这种似是而非的词带偏。搜索结果就是对诗歌理解程度的即时反馈——搜不出正解，说明你没读到位。

词池里故意混入的干扰词（钢琴之于《听蜀僧濬弹琴》以外的关卡、海洋之于《江雪》），就是阅读理解题里的「干扰项」。

---

三、关卡数据：八关唐诗全内置

八关选了八首画面感极强的唐诗，每关包含诗题/作者/朝代/诗句/词池/目标图/注释赏析：

关卡	诗题	作者	目标画面	核心词
1	江雪	柳宗元	雪山	雪山、积雪
2	问刘十九	白居易	猕猴	猴子、动物
3	早发白帝城	李白	猕猴	猴子、动物
4	暮江吟	白居易	云天	天空、云朵、傍晚
5	忆江南	白居易	冲浪者	冲浪、日落、沙滩
6	春晓	孟浩然	午间小憩	沙发、睡觉、午睡
7	听蜀僧濬弹琴	李白	弹钢琴的手	钢琴、双手、音乐
8	鸟鸣涧	王维	星空下的谷仓	星空、夜晚、寂静

每关的注释赏析做成诗词知识卡，通关后逐张解锁，终局展示收集册——把「玩游戏」和「学诗词」绑在一起。

---

四、核心机制：选词组词与标签计分检索

1. 选词：最多 4 词，有序可取消

selectWord(word: string): void {
  if (this.selected.indexOf(word) < 0 && this.selected.length < 4) {
    this.selected.push(word);
  }
}

词槽上限 4 个，已选词再点一次即取消。这个限制迫使玩家做减法——不能把所有词都扔进去，必须挑出最能代表诗境的那几个。

2. 检索：完全相等 3 分 / 包含匹配 2 分

for (const raw of words) {
  if (card.tags.indexOf(raw) >= 0) { score += 3; continue; }
  for (const tag of card.tags) {
    if (raw.indexOf(tag) >= 0 && tag.length >= 2) { score += 2; break; }
  }
}

每个选词对每张图卡计分：标签完全相等 +3，标签被包含在选词里 +2。得分 > 0 的图按分数降序返回。词越精准，目标图排名越靠前。

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

得分 = max(20, 100 - 搜索次数×15 - 选错次数×25)

第一次就搜对拿满分 100；每多搜一次 -15，每选错一张图 -25，下限 20 分保底。8 关满分 800，终局按总分比例评星（★≥40% / ★★≥65% / ★★★≥90%）。

---

五、UI 实现：竖排诗格与朱砂印章

竖排诗格：按行拆分 + 倒序 + 逐字 Column

ArkUI 没有原生的竖排文本组件，实现方式是：

// 按 \n 拆行并倒序（古诗从右往左读，首行在最右）
private poemLinesReversed(): string[] {
  return this.level.verse.split('\n').reverse();
}

// 每行拆成单字，用 Column 逐字纵排
Row({ space: 18 }) {
  ForEach(this.poemLinesReversed(), (line: string) => {
    Column({ space: 5 }) {
      ForEach(this.charsOf(line), (ch: string) => {
        Text(ch).fontSize(17).fontColor(C_INK)
      })
    }
  })
}

外層 Row 把每一行作为一列（从右往左），内层 Column 把每个字纵向排开。配合左侧的题款窄列，整体还原古籍「右起竖排」的版式。

朱砂印章：方形圆角小组件

@Builder
sealBlock(char: string, size: number) {
  Text(char)
    .fontSize(size * 0.52)
    .fontColor('#FFFFFF')
    .fontWeight(FontWeight.Bold)
    .width(size).height(size)
    .textAlign(TextAlign.Center)
    .borderRadius(6)
    .backgroundColor(C_RED)
}

一个可复用的印章 Builder，开始页用 92px 的「詩」，关卡页用 34px 的「境」，通关页用 72px 的「得」，结算页用 64px 的「圓」——同一组件四种尺寸，贯穿整个应用的视觉识别。

配色：四色宣纸体系

色值	用途
#F7F2E6	宣纸底
#2E2A24	墨色主文字
#B23A2E	朱砂（印章/按钮/选中词）
#9A7B2D	泥金（诗题/知识卡标题）
#4E7A4E	竹青（命中标签）

五种颜色全部来自传统国画颜料，没有任何蓝紫渐变或科技感元素。

---

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

截图	关键数据	代码验证
03-level1	第 1 关 · 共 8 关，已选 4 词	LEVELS.length = 8，selected.length ≤ 4 ✓
04-search1	已搜 1 次，3 张结果各得 3 分	「自然」命中三张图的 自然 标签，各 +3 ✓
05-search2	空山排第一，得分 6	「自然」+3、「雪山」+3 = 6 ✓
06-search3	唯一结果「雪山」，得分 3	只有「雪山」一词命中目标图标签，+3 ✓

三次搜索的词组变化（徒步自然茶杯姜茶 → 积雪自然钢琴雪山 → 钢琴徒步雪山姜茶）清晰展示了逐步收敛的检索过程。

---

七、已知边界

1. 关卡为固定八关，无随机化，诗词与图卡映射为预置
2. 词池为人工预置，未做拼音/模糊容错——选「雪」和选「雪山」是不同的词
3. 未实现通关进度持久化，退出应用后从头开始
4. 图卡复用合集素材（12 张），部分关卡的「目标画面」与诗句的对应带有一定 interpretive 色彩（如《春晓》对应「午间小憩」）

---

八、小结

「诗境寻踪」是文搜图合集中的国风诗词篇——把「读懂一首诗」变成「选对几个词」，把「搜索」变成「理解」的试金石。竖排诗格 + 朱砂印章 + 宣纸墨色的视觉体系，配上八关唐诗和知识卡收集，让文搜图这个技术动作第一次有了文化重量。全程端侧、零网络零权限，模拟器即可完整游玩。