# mention-editor LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/mention-editor` 的使用方式。

## 模块定位

基于MentionWrapper封装的模版字符串配置组件 1. 提供变量，数字，链接等可选的模版参数 2. 不同类型模版参数可配置多个 3. mention 会根据 传入的params自动推断出关键字 4. 模版参数建议都以${_xxx}为格式 5. Demo: https://fex.qa.tcshuke.com/docs/admin/main/widget?key=mention-editor

## 导入方式

```ts
import { MentionEditor } from '@flatbiz/antd/mention-editor';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `* from ./mention-editor.jsx`
- `MentionEditor` - 基于MentionWrapper封装的模版字符串配置组件 1. 提供变量，数字，链接等可选的模版参数 2. 不同类型模版参数可配置多个 3. mention 会根据 传入的params自动推断出关键字 4. 模版参数建议都以${_xxx}为格式 5. Demo: https:/…
- `OperationPresetProps`
- `MentionEditorProps`
- `ParamItem`

## 依赖的 antd 能力

`Button`、`Flex`

## Props / 配置要点

### OperationPresetProps

- `icon`（必填）：: ReactElement；icon
- `label`（可选）：: string；模版参数文案
- `type`（必填）：: string；模版参数类型
- `codePrefix`（必填）：: string；自增code前缀
- `codeAdapter`（可选）：: () => string | undefined；自定义生成模版参数code

### MentionEditorProps

- `onSelectParam`（可选）：: (item: ParamItem, prefix?: string) => void；onChange @item 点击的预设模版参数
- `prefix`（可选）：: string；模版参数前缀 & ｜ $
- `operations`（可选）：: OperationPresetProps[]；editor 支持添加的模版参数类型
- `params`（可选）：: ParamItem[] | undefined；模版参数列表

### ParamItem

- `code`（必填）：: string；模版参数code
- `type`（必填）：: 'text' | 'number' | 'link'；模版参数类型 文本/数字/链接
- `value`（必填）：: TAny；模版参数 value

## 使用规则与行为

- icon
- 模版参数文案
- 模版参数类型
- 自增code前缀
- 自定义生成模版参数code
- onChange @item 点击的预设模版参数
- 模版参数前缀 & ｜ $
- editor 支持添加的模版参数类型
- 模版参数列表
- 基于MentionWrapper封装的模版字符串配置组件 1. 提供变量，数字，链接等可选的模版参数 2. 不同类型模版参数可配置多个 3. mention 会根据 传入的params自动推断出关键字 4. 模版参数建议都以${_xxx}为格式 5. Demo: https://fex.qa.tcshuke.com/docs/admin/main/widget?key=mention-editor

## 基础示例

来自模块 README 的示例：

```tsx
const index = useRef(0)
const [value, setValue] = useState<string>();
const [params, setParams] = useState<ParamItem[]>([
  { code: '${_var0}', type: 'text', value: '111' },
  { code: '${_var1}', type: 'text', value: '222' },
])

const onAddParams = (item, prefix) => {
  setParams(preParams => [
    ...preParams,
    item
  ])
}

return <MetionEditor
  value={value}
  onSelectParam={onAddParams}
  onChange={setValue}
  prefix={'$'}
  operations={[
    {
      type: 'text', codePrefix: '_text', label: "文本参数", icon: <FieldStringOutlined />, codeAdapter: () => {
        return '_text' + index.current++;
      }
    },
    { type: 'number', codePrefix: '_number', label: "数字参数", icon: <NumberOutlined /> },
    { type: 'link', codePrefix: '_link', label: "链接参数", icon: <LinkOutlined /> },
  ]}
  params={params}
/>
```

## README 摘要

MetionEditor

## 源码索引

- `src/mention-editor/index.ts`
- `src/mention-editor/mention-editor.tsx`
- `src/mention-editor/readme.md`
- `src/mention-editor/types.ts`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/mention-editor` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。