目前主流的 AI 生成页面中，都提供了类似 Chomre 那样页面元素选择的功能，选中页面对应元素，输入修改条件（比如更改颜色或者其他样式）后，agent 就自动去帮忙处理这个指令。
在这背后，选中元素后，可以得到目标元素的文件位置，但是如果是修改文案的场景中，文案可能是配置化传入目标组件的，就意味着，选中元素的文件位置不一定就是要修改的目标文案的文件位置，怎么才能找到目标文案的正确位置并正确修改，这个主流页面生成 agent 是怎么做的。
比如：下面两个文件
// ./src/index.tsx
import {TEXT_CONF} from './conf';
<div id="fruitList">
{TEXT_CONF.map(item=><span>{item}<span>)}
</div>
// ./src/conf.ts
export const TEXT_CONF = ['苹果', '李子', '香蕉']
页面选中列表元素得到的文件是 './src/index.tsx'，输入指令是更改“苹果”为“梨”。怎么能找到实际的文件位置，并修改？（实际情况可能比这更复杂，比如通过组件的 props 传入的情况，CONF 也可能会被处理多次才塞给 fruitList 这个 div ）
是通过模型自己的 reAct ？还是结合一些工程化的手段？
 |
1
micate 28 天前
简单研究下你感兴趣的产品就知道了，比如 lovable：
```html <h3 data-lov-id="src/components/HumanoidSection.tsx:209:18" data-lov-name="h3" data-component-path="src/components/HumanoidSection.tsx" data-component-line="209" data-component-file="HumanoidSection.tsx" data-component-name="h3" data-component-content="%7B%22text%22%3A%22We're%20creating%20companions%2C%22%2C%22className%22%3A%22text-2xl%20sm%3Atext-3xl%20md%3Atext-4xl%20font-display%20text-white%20font-bold%20leading-tight%20mb-4%22%7D" class="text-2xl sm:text-3xl md:text-4xl font-display text-white font-bold leading-tight mb-4">We're creating companions, <span data-lov-id="src/components/HumanoidSection.tsx:210:47" data-lov-name="span" data-component-path="src/components/HumanoidSection.tsx" data-component-line="210" data-component-file="HumanoidSection.tsx" data-component-name="span" data-component-content="%7B%22text%22%3A%22not%20replacements%22%2C%22className%22%3A%22text-%5B%23FC4D0A%5D%22%7D" class="text-[#FC4D0A]">not replacements</span></h3> ``` 将你的问题提给 AI 也能得到答案。 另外一种方案就是采用低代码（ Schema ） + AI 的形式，配合成熟的可视化编辑方案来实现，比如 https://deamoy.ai/ 。 |
 |
2
roderic OP @micate 把我的问题给了下 claude ，它的回答看起来主要还是需要依赖代码的静态分析 https://claude.ai/share/a2ba908a-a84d-4b1b-b12e-75012359fdfd
|
Select Language