目前主流 Code Agent 是怎么实现代码间依赖识别的

目前主流的 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 ？还是结合一些工程化的手段？

micate

95 天前

简单研究下你感兴趣的产品就知道了，比如 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/ 。