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

binbin_522026-06-21 8:27

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

AIToolsPage.ets 的任务不是"真的跑一堆 AI"，而是先把 AI 功能入口和交互节奏搭出来。

这类页面最重要的是：让用户一眼知道有哪些能力，以及点击后系统如何反馈。

目录

  1. 页面定位
  2. 工具卡片结构
  3. 底部功能栏
  4. 为什么要有处理中态
  5. 问题 - 方案 - 验证

一、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 工具页
图像增强
天空替换
智能换色
更多功能

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

二、关键代码

ts 复制代码 
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 跑起来

三、底部栏是功能扩展位

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

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

四、问题 - 方案 - 验证

问题

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

方案

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

验证

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

五、检查清单

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

参考资料

结构拆解

#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 工具页
工具卡片区
底部工具栏
图像增强
天空替换
智能换色
更多功能

工具卡片的设计思路

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

  1. 工具名称
  2. 工具描述
  3. 子说明文本
  4. 立即使用按钮

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

可扩展的交互形态

模块 当前实现 后续可扩展
卡片标题 静态描述 动态推荐
按钮状态 处理中 / 可点击 队列处理 / 多任务
底部栏 占位功能 真正功能入口
提示反馈 toast 进度条 / 结果页

为什么要有"处理中"

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

实战建议

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

典型用户路径

  1. 用户点进 AI 页
  2. 先看四张卡片，判断有哪些能力
  3. 点某张卡片后看到处理中
  4. 结束后收到 toast
  5. 未来如果接入真实 AI，底部栏可以承接更多功能

易错点

  • 只有点击没有状态，用户会认为失效
  • 所有功能都放底部会让首屏信息过轻
  • 底部栏如果没有说明，容易显得像"没做完"
热门推荐
012026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？022026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04【AI】2026 年具身智能模型和世界模型总结05GitHub 镜像站点06AI科技热点日报 | 2026年6月1日07AI一周事件 · 2026-06-03 至 2026-06-0908Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析09上线仅72小时被强制下架：Claude Fable 5 的短命10Codex 下载安装指南：Windows 和 macOS 官方版下载