【TraeCode 上手记】我用 TraeCode 还原了 App 组件样式，踩了一圈字体、SVG 转义和手势的坑
一、我这次想解决什么 / 想试什么
我的需求其实很简单：一款 App 的界面原型，要用纯 HTML + CSS + JS 还原成一个能在浏览器里跑的网页组件，尽量贴近 App 原样。真正动手才发现，坑全藏在细节里：
- 字体选择：App 用的苹方/系统字体，网页直接写
font-family，粗细、行高全不对； - SVG 文字转义：图标里嵌文案、
<text>里的特殊字符一多，整个 SVG 直接渲染不出来； - 文字区排版：多行文本的截断、换行、省略号，App 里一套规则、CSS 里另一套规则；
- Tab 左右滑动切换：App 里是左右滑动 + 惯性、吸附，网页里要么卡顿要么对不齐手势；
- 图片放大查看逻辑：单点关闭、双击放缩、滚轮缩放、遮罩与滚动，每一个都是一层坑。
这一版我就是想把这些"App 很自然、Web 很费劲"的交互，一个个搬进浏览器。
二、我是怎么把 TraeCode 慢慢用顺的
一开始我很"朴实"，把一整块需求一次性丢给它：“把这张 App 界面用 HTML 还原出来。”它确实出了一版，但离还原差得远——字体不对、间距不对、交互也没有。这才让我意识到：越是大而全的需求，越容易给不到位。 与其让它猜，不如我带它拆。
于是我从最噪的地方一步步"喂"：
1. 字体，先逼它去对齐。
App 用系统字体，直接写 font-family: "PingFang SC" 往往白搭。我改成告诉它“参考苹方/系统字体回退栈，并把 line-height、字重也要按需还原”，Trae 每次都给我一版可对比的调整。这是我觉得“原来这样用会更顺”的第一个点——好用的方式，是把“现象”翻译成“属性”。 少说“字不好看”，多说“字重 / 行高 / 字间 / 族类”。
2. SVG 文字转义，被坑了个明明白白。
这是我比较狼狈的一步。我在 <text> 节点里放了 &、<、引号这类字符，结果整个图标在浏览器里直接渲染不出来。卡了很久，最后把报错和截图一起放进去，Trae 提醒我是不是“小程序里的特殊字符没做 HTML/XML 转义”。一看果然是 & 没转成 &。修完才反应过来——App 原生根本不用管这套，而 Web 要自己负责每个特殊字符。
3. 文字区排版，别让 CSS 自己做主。
App 里的多行文本是业务语义的截断，而 CSS 的 -webkit-line-clamp 是“物理截断”。Trae 帮我梳理出 white-space、overflow: hidden、text-overflow: ellipsis 这一整套，再把“固定行数 + 固定高度”的判断逻辑落到 JS 上，量出来的状态才基本对得上。
4. Tab 左右滑动切换，从“生搬”到“打磨”。
一开始我让 Trae “做个能滑动的 Tab”，它给了个挺基础的封装，但吸附、回弹手感都不对。我改成“滑到一半松手要回吸到最近的一页”，它才把吸附阈值、惯性、过渡时长这些参数补齐。这一步让我彻底确认，手势描述越具体，它越能给到接近真实交互的代码。
5. 图片放大查看，最后一关的“遮罩”与“滚动”。
放大预览里包含单击关闭、双击放缩、滚轮缩放，还有“遮罩层是否盖住页面滚动”。嵌套滚轮 + 手势很容易打架。这轮我把“放大状态时底下的页面滚动被屏蔽”交给它分析，它给出的思路是用遮罩拦截事件、用 preventDefault 屏蔽滚轮，并从那里开始，让我觉得这种跨层级的交互光靠抄是抄不出来的。
三、我最后做成了什么，想留一句什么建议
跑通这条链，靠的不是一次生成，而是**“拆解 + 追问 + 抵细节”**三件事来回滚。最后我把那个组件从“能看”打磨到“能用”：字体栈对齐、特殊字符安全转义者、排版稳定、Tab 滑动吸附手感接近、图片预览遮罩与滚动共存。
如果让我把它推荐给下一个要还原 App 的人，我会劝他怎么开始：
一句话：别让它“整体还原”，去让它“一个个抠”。
把每个组件拆成一个独立问题，用“描述现象 → 指出属性 → 对比来回调”的方式推进，它会成为你得力的“前端还原搭子”，而不是只给你一版“差不多”的代码。
这也是我给准备上手 Trae 的朋友的一个建议：它是顺着你的思路长出细节的工具，前提是你把思路先拆得够细。