时间轨迹第 12 篇：AI 工具页源码拆解，四种能力与占位交互

时间轨迹第 12 篇：AI 工具页源码拆解，四种能力与占位交互

AIToolsPage.ets 的任务不是“真的跑一堆 AI”，而是先把 AI 功能入口和交互节奏搭出来。 这类页面最重要的是：让用户一眼知道有哪些能力，以及点击后系统如何反馈。

目录

一、AI 工具页是能力展示层

#mermaid-svg-0Hp98aN6GQiNOKZQ{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-0Hp98aN6GQiNOKZQ .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-0Hp98aN6GQiNOKZQ .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-0Hp98aN6GQiNOKZQ .error-icon{fill:#552222;}#mermaid-svg-0Hp98aN6GQiNOKZQ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-0Hp98aN6GQiNOKZQ .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-0Hp98aN6GQiNOKZQ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-0Hp98aN6GQiNOKZQ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-0Hp98aN6GQiNOKZQ .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-0Hp98aN6GQiNOKZQ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-0Hp98aN6GQiNOKZQ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-0Hp98aN6GQiNOKZQ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-0Hp98aN6GQiNOKZQ .marker.cross{stroke:#333333;}#mermaid-svg-0Hp98aN6GQiNOKZQ svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-0Hp98aN6GQiNOKZQ p{margin:0;}#mermaid-svg-0Hp98aN6GQiNOKZQ .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-0Hp98aN6GQiNOKZQ .cluster-label text{fill:#333;}#mermaid-svg-0Hp98aN6GQiNOKZQ .cluster-label span{color:#333;}#mermaid-svg-0Hp98aN6GQiNOKZQ .cluster-label span p{background-color:transparent;}#mermaid-svg-0Hp98aN6GQiNOKZQ .label text,#mermaid-svg-0Hp98aN6GQiNOKZQ span{fill:#333;color:#333;}#mermaid-svg-0Hp98aN6GQiNOKZQ .node rect,#mermaid-svg-0Hp98aN6GQiNOKZQ .node circle,#mermaid-svg-0Hp98aN6GQiNOKZQ .node ellipse,#mermaid-svg-0Hp98aN6GQiNOKZQ .node polygon,#mermaid-svg-0Hp98aN6GQiNOKZQ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-0Hp98aN6GQiNOKZQ .rough-node .label text,#mermaid-svg-0Hp98aN6GQiNOKZQ .node .label text,#mermaid-svg-0Hp98aN6GQiNOKZQ .image-shape .label,#mermaid-svg-0Hp98aN6GQiNOKZQ .icon-shape .label{text-anchor:middle;}#mermaid-svg-0Hp98aN6GQiNOKZQ .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-0Hp98aN6GQiNOKZQ .rough-node .label,#mermaid-svg-0Hp98aN6GQiNOKZQ .node .label,#mermaid-svg-0Hp98aN6GQiNOKZQ .image-shape .label,#mermaid-svg-0Hp98aN6GQiNOKZQ .icon-shape .label{text-align:center;}#mermaid-svg-0Hp98aN6GQiNOKZQ .node.clickable{cursor:pointer;}#mermaid-svg-0Hp98aN6GQiNOKZQ .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-0Hp98aN6GQiNOKZQ .arrowheadPath{fill:#333333;}#mermaid-svg-0Hp98aN6GQiNOKZQ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-0Hp98aN6GQiNOKZQ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-0Hp98aN6GQiNOKZQ .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-0Hp98aN6GQiNOKZQ .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-0Hp98aN6GQiNOKZQ .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-0Hp98aN6GQiNOKZQ .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-0Hp98aN6GQiNOKZQ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-0Hp98aN6GQiNOKZQ .cluster text{fill:#333;}#mermaid-svg-0Hp98aN6GQiNOKZQ .cluster span{color:#333;}#mermaid-svg-0Hp98aN6GQiNOKZQ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-0Hp98aN6GQiNOKZQ .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-0Hp98aN6GQiNOKZQ rect.text{fill:none;stroke-width:0;}#mermaid-svg-0Hp98aN6GQiNOKZQ .icon-shape,#mermaid-svg-0Hp98aN6GQiNOKZQ .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-0Hp98aN6GQiNOKZQ .icon-shape p,#mermaid-svg-0Hp98aN6GQiNOKZQ .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-0Hp98aN6GQiNOKZQ .icon-shape .label rect,#mermaid-svg-0Hp98aN6GQiNOKZQ .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-0Hp98aN6GQiNOKZQ .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-0Hp98aN6GQiNOKZQ .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-0Hp98aN6GQiNOKZQ :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

AI 工具页

图像增强

天空替换

智能换色

更多功能

页面里最关键的不是按钮数量，而是“先展示能力，再给出占位反馈”。

二、关键代码

Button(this.activeTool === tool.id ? '处理中…' : '立即使用')
.enabled(this.activeTool !== tool.id)
.onClick(() => {
this.activeTool = tool.id;
setTimeout(() => {
this.activeTool = '';
promptAction.showToast({ message: tool.name + ' 处理完成', duration: 1800 });
}, 2000);
})

这段交互很适合文章里讲，因为它说明：

• 点击后有明确反馈
• 处理中态会禁用重复点击
• 功能上线前也能先把 UX 跑起来

三、底部栏是功能扩展位

private bottomTools: string[] = ['图像增强', '天空替换', '智能换色', '更多功能'];

底部栏不是装饰，而是后续能力扩容的位置。

四、问题 – 方案 – 验证

问题

如果 AI 页只展示“敬请期待”，就不会有产品感。

方案

用卡片 + 处理中态 + 底部扩展栏，让页面先具备真实使用感。

验证

用户点击后能看到处理中态，结束后有 toast，说明交互闭环成立。

五、检查清单

• 卡片信息是否完整
• 处理中态是否会禁用按钮
• 底部栏是否有扩展位
• toast 是否有明确结果反馈

参考资料

• 华为 HarmonyOS 多设备开发最佳实践
• 博客质量分计算——发布 version 5.0

结构拆解

#mermaid-svg-35Gdxo5APUnKJe6W{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-35Gdxo5APUnKJe6W .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-35Gdxo5APUnKJe6W .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-35Gdxo5APUnKJe6W .error-icon{fill:#552222;}#mermaid-svg-35Gdxo5APUnKJe6W .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-35Gdxo5APUnKJe6W .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-35Gdxo5APUnKJe6W .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-35Gdxo5APUnKJe6W .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-35Gdxo5APUnKJe6W .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-35Gdxo5APUnKJe6W .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-35Gdxo5APUnKJe6W .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-35Gdxo5APUnKJe6W .marker{fill:#333333;stroke:#333333;}#mermaid-svg-35Gdxo5APUnKJe6W .marker.cross{stroke:#333333;}#mermaid-svg-35Gdxo5APUnKJe6W svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-35Gdxo5APUnKJe6W p{margin:0;}#mermaid-svg-35Gdxo5APUnKJe6W .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-35Gdxo5APUnKJe6W .cluster-label text{fill:#333;}#mermaid-svg-35Gdxo5APUnKJe6W .cluster-label span{color:#333;}#mermaid-svg-35Gdxo5APUnKJe6W .cluster-label span p{background-color:transparent;}#mermaid-svg-35Gdxo5APUnKJe6W .label text,#mermaid-svg-35Gdxo5APUnKJe6W span{fill:#333;color:#333;}#mermaid-svg-35Gdxo5APUnKJe6W .node rect,#mermaid-svg-35Gdxo5APUnKJe6W .node circle,#mermaid-svg-35Gdxo5APUnKJe6W .node ellipse,#mermaid-svg-35Gdxo5APUnKJe6W .node polygon,#mermaid-svg-35Gdxo5APUnKJe6W .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-35Gdxo5APUnKJe6W .rough-node .label text,#mermaid-svg-35Gdxo5APUnKJe6W .node .label text,#mermaid-svg-35Gdxo5APUnKJe6W .image-shape .label,#mermaid-svg-35Gdxo5APUnKJe6W .icon-shape .label{text-anchor:middle;}#mermaid-svg-35Gdxo5APUnKJe6W .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-35Gdxo5APUnKJe6W .rough-node .label,#mermaid-svg-35Gdxo5APUnKJe6W .node .label,#mermaid-svg-35Gdxo5APUnKJe6W .image-shape .label,#mermaid-svg-35Gdxo5APUnKJe6W .icon-shape .label{text-align:center;}#mermaid-svg-35Gdxo5APUnKJe6W .node.clickable{cursor:pointer;}#mermaid-svg-35Gdxo5APUnKJe6W .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-35Gdxo5APUnKJe6W .arrowheadPath{fill:#333333;}#mermaid-svg-35Gdxo5APUnKJe6W .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-35Gdxo5APUnKJe6W .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-35Gdxo5APUnKJe6W .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-35Gdxo5APUnKJe6W .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-35Gdxo5APUnKJe6W .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-35Gdxo5APUnKJe6W .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-35Gdxo5APUnKJe6W .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-35Gdxo5APUnKJe6W .cluster text{fill:#333;}#mermaid-svg-35Gdxo5APUnKJe6W .cluster span{color:#333;}#mermaid-svg-35Gdxo5APUnKJe6W div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-35Gdxo5APUnKJe6W .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-35Gdxo5APUnKJe6W rect.text{fill:none;stroke-width:0;}#mermaid-svg-35Gdxo5APUnKJe6W .icon-shape,#mermaid-svg-35Gdxo5APUnKJe6W .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-35Gdxo5APUnKJe6W .icon-shape p,#mermaid-svg-35Gdxo5APUnKJe6W .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-35Gdxo5APUnKJe6W .icon-shape .label rect,#mermaid-svg-35Gdxo5APUnKJe6W .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-35Gdxo5APUnKJe6W .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-35Gdxo5APUnKJe6W .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-35Gdxo5APUnKJe6W :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

AI 工具页

工具卡片区

底部工具栏

图像增强

天空替换

智能换色

更多功能

工具卡片的设计思路

每一张卡片都包含四个信息层：

这样做的好处是，用户不需要猜它能做什么。

可扩展的交互形态

为什么要有“处理中”

AI 功能最容易让用户误判为“点了没反应”。activeTool 的意义就在于把“正在处理”显式呈现出来。

实战建议

• 加载时间低于 1 秒时，toast 够用
• 加载时间高于 1 秒时，应显示处理中态
• 功能若真联网，建议加骨架屏或进度条

典型用户路径

易错点

• 只有点击没有状态，用户会认为失效
• 所有功能都放底部会让首屏信息过轻
• 底部栏如果没有说明，容易显得像“没做完”