开发预览更新于 2026-05-10

VariableAwareInput 变量感知输入

Input 增强版，自动识别 `{{var}}` 模板变量并高亮；未知变量标红波浪线。

基础用法

实现：底层是透明文字的原生 input + 同尺寸 overlay 渲染高亮文本，光标位置完全对齐。 variables 数组里的名字算”已知”用 accent 高亮，其他算”未知”用红色波浪线。

已知变量：base_url · user_id · auth_token（其余高亮为红色波浪线）

<CfVariableAwareInput v-model="url" :variables="['base_url', 'user_id']" />

<CfVariableAwareInput value={url} onChange={setUrl} variables={['base_url', 'user_id']} />

已知（accent 高亮）+ 未知（红色波浪线）的组合实例。

<CfVariableAwareInput v-model="v" :variables="known" />

<CfVariableAwareInput value={v} onChange={setV} variables={known} />

自动补全浮层（输入 {{ 触发候选列表）在 v2 加入。