@agentscope-ai/design 1.0.6 → 1.0.7

package/llms/components/commonComponents/FloatButton/index.zh-CN.llms.txt

@@ -0,0 +1,70 @@
+
+
+<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。"></DemoTitle>
+
+
+
+
+
+示例
+
+<Install>
+import { FloatButton } from 'antd';
+</Install>
+
+#### 悬浮按钮示例
+
+以下是此组件的示例和变体
+
+
+
+
+
+以主题色为背景的悬浮按钮
+
+本组件完全兼容 antd 同名组件，详情可访问 [antd float-button](https://ant.design/components/float-button-cn) 查看更多 API
+
+
+## antd API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+自 `antd@5.0.0` 版本开始提供该组件。
+
+### 共同的 API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| icon | 自定义图标 | ReactNode | - |  | 
+| description | 文字及其它内容 | ReactNode | - |  | 
+| tooltip | 气泡卡片的内容 | ReactNode |  | - | TooltipProps: 5.25.0 | 
+| type | 设置按钮类型 | default | default |  | 
+| shape | 设置按钮形状 | circle | circle |  | 
+| onClick | 点击按钮时的回调 | (event) => void | - |  | 
+| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |  | 
+| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - |  | 
+| htmlType | 设置  | submit | button | 5.21.0 | 
+| badge | 带徽标数字的悬浮按钮（不支持  |  | - | 5.4.0 | 
+
+
+### FloatButton.Group
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| shape | 设置包含的 FloatButton 按钮形状 | circle | circle |  | 
+| trigger | 触发方式（有触发方式为菜单模式） | click | - |  | 
+| open | 受控展开，需配合 trigger 一起使用 | boolean | - |  | 
+| closeIcon | 自定义关闭按钮 | React.ReactNode | <CloseOutlined /> |  | 
+| placement | 自定义菜单弹出位置 | top | top | 5.21.0 | 
+| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - |  | 
+| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 | 
+
+
+### FloatButton.BackTop
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| duration | 回到顶部所需时间（ms） | number | 450 |  | 
+| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window |  | 
+| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 |  | 
+| onClick | 点击按钮的回调函数 | () => void | - |  | 

package/llms/components/commonComponents/Form/index.zh-CN.llms.txt

@@ -0,0 +1,383 @@
+
+
+<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。"></DemoTitle>
+
+
+
+
+
+示例
+
+<Install>Form</Install>
+
+#### 标签页示例
+
+以下是此组件的示例和变体
+
+
+
+
+
+横向排布
+
+本组件完全兼容 antd 同名组件，详情可访问 [antd form](https://ant.design/components/form-cn) 查看更多 API
+
+
+## antd API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+### Form
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| colon | 配置 Form.Item 的  | boolean | true |  | 
+| disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 | 
+| component | 设置 Form 渲染元素，为  | ComponentType | false | form |  | 
+| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看 |  | - |  | 
+| form | 经  |  | - |  | 
+| feedbackIcons | 当  |  | - | 5.9.0 | 
+| initialValues | 表单默认值，只有初始化以及重置时生效 | object | - |  | 
+| labelAlign | label 标签的文本对齐方式 | left | right |  | 
+| labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 | 
+| labelCol | label 标签布局，同  |  | - |  | 
+| layout | 表单布局 | horizontal | horizontal |  | 
+| name | 表单名称，会作为表单字段  | string | - |  | 
+| preserve | 当字段被删除时保留字段值。你可以通过  | boolean | true | 4.4.0 | 
+| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean |  | true | renderProps | 
+| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean |  | false | focus: 5.24.0 | 
+| size | 设置字段组件的尺寸（仅限 antd 组件） | small | - |  | 
+| validateMessages | 验证提示模板，说明 |  | - |  | 
+| validateTrigger | 统一设置字段触发验证的时机 | string | string[] | onChange | 4.3.0 | 
+| variant | 表单内控件变体 | outlined | outlined | 5.13.0 |  | 
+| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol |  | - |  | 
+| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - |  | 
+| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - |  | 
+| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - |  | 
+| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - |  | 
+| clearOnDestroy | 当表单被卸载时清空表单值 | boolean | false | 5.18.0 | 
+
+
+支持原生 form 除 `onSubmit` 外的所有属性。
+
+### validateMessages
+
+Form 为验证提供了[默认的错误提示信息](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134)，你可以通过配置 `validateMessages` 属性，修改对应的提示模板。一种常见的使用方式，是配置国际化提示信息：
+
+
+
+
+
+此外，[ConfigProvider](/components/config-provider-cn) 也提供了全局化配置方案，允许统一配置错误提示模板：
+
+
+
+
+
+## Form.Item
+
+表单字段组件，用于数据双向绑定、校验、布局等。
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| colon | 配合  | boolean | true |  | 
+| dependencies | 设置依赖字段，说明 |  | - |  | 
+| extra | 额外的提示信息，和  | ReactNode | - |  | 
+| getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - |  | 
+| getValueProps | 为子元素添加额外的属性 (不建议通过  | (value: any) => Record<string, any> | - | 4.2.0 | 
+| hasFeedback | 配合  | boolean | { icons:  | false | icons: 5.9.0 | 
+| help | 提示信息，如不设置，则会根据校验规则自动生成 | ReactNode | - |  | 
+| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false | 4.4.0 | 
+| htmlFor | 设置子元素 label  | string | - |  | 
+| initialValue | 设置子元素默认值，如果与 Form 的  | string | - | 4.2.0 | 
+| label | label | ReactNode | - | null: 5.22.0 | 
+| labelAlign | 标签文本对齐方式 | left | right |  | 
+| labelCol | label |  | - |  | 
+| messageVariables | 默认验证字段的信息，查看 | Record<string, string> | - | 4.7.0 | 
+| name | 字段名，支持数组 |  | - |  | 
+| normalize | 组件获取值后进行转换，再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - |  | 
+| noStyle | 为  | boolean | false |  | 
+| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 | 
+| required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false |  | 
+| rules | 校验规则，设置字段的校验逻辑。点击 |  | - |  | 
+| shouldUpdate | 自定义字段更新逻辑，说明 | boolean | (prevValue, curValue) => boolean | false |  | 
+| tooltip | 配置提示信息 | ReactNode |  | - | 4.7.0 | 
+| trigger | 设置收集字段值变更的时机。点击 | string | onChange |  | 
+| validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置  | boolean |  | false | parallel | 
+| validateDebounce | 设置防抖，延迟毫秒数后进行校验 | number | - | 5.9.0 | 
+| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - |  | 
+| validateTrigger | 设置字段校验的时机 | string | string[] | onChange |  | 
+| valuePropName | 子节点的值的属性。注意：Switch、Checkbox 的 valuePropName 应该是  | string | value |  | 
+| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同  |  | - |  | 
+| layout | 表单项布局 | horizontal | - | 5.18.0 | 
+
+
+被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
+
+
+1. 你**不再需要也不应该**用 `onChange` 来做数据收集同步（你可以使用 Form 的 `onValuesChange`），但还是可以继续监听 `onChange` 事件。
+2. 你不能用控件的 `value` 或 `defaultValue` 等属性来设置表单域的值，默认值可以用 Form 里的 `initialValues` 来设置。注意 `initialValues` 不能被 `setState` 动态更新，你需要用 `setFieldsValue` 来更新。
+3. 你不应该用 `setState`，可以使用 `form.setFieldsValue` 来动态改变表单值。
+
+### dependencies
+
+当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#form-demo-dependencies)。
+
+`dependencies` 不应和 `shouldUpdate` 一起使用，因为这可能带来更新逻辑的混乱。
+
+### FeedbackIcons
+
+`({ status: ValidateStatus, errors: ReactNode, warnings: ReactNode }) => Record<ValidateStatus, ReactNode>`
+
+### shouldUpdate
+
+Form 通过增量更新方式，只更新被修改的字段相关组件以达到性能优化目的。大部分场景下，你只需要编写代码或者与 [`dependencies`](#dependencies) 属性配合校验即可。而在某些特定场景，例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 `shouldUpdate` 修改 Form.Item 的更新逻辑。
+
+当 `shouldUpdate` 为 `true` 时，Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助，要注意 Form.Item 里包裹的子组件必须由函数返回，否则 `shouldUpdate` 不会起作用：
+
+相关issue：[#34500](https://github.com/ant-design/ant-design/issues/34500)
+
+
+
+
+
+你可以参考[示例](#form-demo-inline-login)查看具体使用场景。
+
+当 `shouldUpdate` 为方法时，表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助：
+
+
+
+
+
+你可以参考[示例](#form-demo-control-hooks)查看具体使用场景。
+
+### messageVariables
+
+你可以通过 `messageVariables` 修改 Form.Item 的默认验证信息。
+
+
+
+
+
+自 `5.20.2` 起，当你希望不要转译 `${}` 时，你可以通过 `\\${}` 来略过：
+
+
+
+
+
+## Form.List
+
+为字段提供数组化管理。
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| children | 渲染函数 | (fields: Field[], operation: { add, remove, move }, meta: { errors }) => React.ReactNode | - |  | 
+| initialValue | 设置子元素默认值，如果与 Form 的  | any[] | - | 4.9.0 | 
+| name | 字段名，支持数组。List 本身也是字段，因而  |  | - |  | 
+| rules | 校验规则，仅支持自定义规则。需要配合  | { validator, message }[] | - | 4.7.0 | 
+
+
+
+
+
+
+注意：Form.List 下的字段不应该配置 `initialValue`，你始终应该通过 Form.List 的 `initialValue` 或者 Form 的 `initialValues` 来配置。
+
+## operation
+
+Form.List 渲染表单相关操作函数。
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex | 4.6.0 | 
+| move | 移动表单项 | (from: number, to: number) => void | - |  | 
+| remove | 删除表单项 | (index: number | number[]) => void | number[] | 4.5.0 | 
+
+
+## Form.ErrorList
+
+4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#form-demo-dynamic-form-item)。
+
+| 参数 | 说明 | 类型 | 默认值 | 
+|--------|--------|--------|--------|
+| errors | 错误列表 | ReactNode[] | - | 
+
+
+## Form.Provider
+
+提供表单间联动功能，其下设置 `name` 的 Form 更新时，会自动触发对应事件。查看[示例](#form-demo-form-context)。
+
+| 参数 | 说明 | 类型 | 默认值 | 
+|--------|--------|--------|--------|
+| onFormChange | 子表单字段更新时触发 | function(formName: string, info: { changedFields, forms }) | - | 
+| onFormFinish | 子表单提交时触发 | function(formName: string, info: { values, forms }) | - | 
+
+
+
+
+
+
+### FormInstance
+
+| 名称 | 说明 | 类型 | 版本 | 
+|--------|--------|--------|--------|
+| getFieldError | 获取对应字段名的错误信息 | (name:  |  | 
+| getFieldInstance | 获取对应字段实例 | (name:  | 4.4.0 | 
+| getFieldsError | 获取一组字段名对应的错误信息，返回为数组形式 | (nameList?:  |  | 
+| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用  |  |  | 
+| getFieldValue | 获取对应字段名的值 | (name:  |  | 
+| isFieldsTouched | 检查一组字段是否被用户操作过， | (nameList?:  |  | 
+| isFieldTouched | 检查对应字段是否被用户操作过 | (name:  |  | 
+| isFieldValidating | 检查对应字段是否正在校验 | (name:  |  | 
+| resetFields | 重置一组字段到  | (fields?:  |  | 
+| scrollToField | 滚动到对应字段位置 | (name:  | focus: 5.24.0 | 
+| setFields | 设置一组字段状态 | (fields:  |  | 
+| setFieldValue | 设置表单的值（该值将直接传入 form store 中并且 | (name:  | 4.22.0 | 
+| setFieldsValue | 设置表单的值（该值将直接传入 form store 中并且 | (values) => void |  | 
+| submit | 提交表单，与点击  | () => void |  | 
+| validateFields | 触发表单验证，设置  | (nameList?:  |  | 
+
+
+#### validateFields
+
+
+
+
+
+返回示例：
+
+
+
+
+
+## Hooks
+
+### Form.useForm
+
+`type Form.useForm = (): [FormInstance]`
+
+创建 Form 实例，用于管理所有数据状态。
+
+### Form.useFormInstance
+
+`type Form.useFormInstance = (): FormInstance`
+
+`4.20.0` 新增，获取当前上下文正在使用的 Form 实例，常见于封装子组件消费无需透传 Form 实例：
+
+
+
+
+
+### Form.useWatch
+
+`type Form.useWatch = (namePath: NamePath | (selector: (values: Store)) => any, formInstance?: FormInstance | WatchOptions): Value`
+
+`5.12.0` 新增 `selector`
+
+用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如 `useSWR` 进行联动从而降低维护成本：
+
+
+
+
+
+如果你的组件被包裹在 `Form.Item` 内部，你可以省略第二个参数，`Form.useWatch` 会自动找到上层最近的 `FormInstance`。
+
+`useWatch` 默认只监听在 Form 中注册的字段，如果需要监听非注册字段，可以通过配置 `preserve` 进行监听：
+
+
+
+
+
+### Form.Item.useStatus
+
+`type Form.Item.useStatus = (): { status: ValidateStatus | undefined, errors: ReactNode[], warnings: ReactNode[] }`
+
+`4.22.0` 新增，可用于获取当前 Form.Item 的校验状态，如果上层没有 Form.Item，`status` 将会返回 `undefined`。`5.4.0` 新增 `errors` 和 `warnings`，可用于获取当前 Form.Item 的错误信息和警告信息：
+
+
+
+
+
+#### 与其他获取数据的方式的区别
+
+Form 仅会对变更的 Field 进行刷新，从而避免完整的组件刷新可能引发的性能问题。因而你无法在 render 阶段通过 `form.getFieldsValue` 来实时获取字段值，而 `useWatch` 提供了一种特定字段访问的方式，从而使得在当前组件中可以直接消费字段的值。同时，如果为了更好的渲染性能，你可以通过 Field 的 renderProps 仅更新需要更新的部分。而当当前组件更新或者 effect 都不需要消费字段值时，则可以通过 `onValuesChange` 将数据抛出，从而避免组件更新。
+
+## Interface
+
+### NamePath
+
+`string | number | (string | number)[]`
+
+### GetFieldsValue
+
+`getFieldsValue` 提供了多种重载方法：
+
+#### getFieldsValue(nameList?: true | [NamePath](#namepath)[], filterFunc?: FilterFunc)
+
+当不提供 `nameList` 时，返回所有注册字段，这也包含 List 下所有的值（即便 List 下没有绑定 Item）。
+
+当 `nameList` 为 `true` 时，返回 store 中所有的值，包含未注册字段。例如通过 `setFieldsValue` 设置了不存在的 Item 的值，也可以通过 `true` 全部获取。
+
+当 `nameList` 为数组时，返回规定路径的值。需要注意的是，`nameList` 为嵌套数组。例如你需要某路径值应该如下：
+
+
+
+
+
+#### getFieldsValue({ strict?: boolean, filter?: FilterFunc })
+
+`5.8.0` 新增接受配置参数。当 `strict` 为 `true` 时会仅匹配 Item 的值。例如 `{ list: [{ bamboo: 1, little: 2 }] }` 中，如果 List 仅绑定了 `bamboo` 字段，那么 `getFieldsValue({ strict: true })` 会只获得 `{ list: [{ bamboo: 1 }] }`。
+
+### FilterFunc
+
+用于过滤一些字段值，`meta` 会返回字段相关信息。例如可以用来获取仅被用户修改过的值等等。
+
+
+
+
+
+### FieldData
+
+| 名称 | 说明 | 类型 | 
+|--------|--------|--------|
+| errors | 错误信息 | string[] | 
+| warnings | 警告信息 | string[] | 
+| name | 字段名称 |  | 
+| touched | 是否被用户操作过 | boolean | 
+| validating | 是否正在校验 | boolean | 
+| value | 字段对应值 | any | 
+
+
+### Rule
+
+Rule 支持接收 object 进行配置，也支持 function 来动态获取 form 的数据：
+
+
+
+
+
+| 名称 | 说明 | 类型 | 版本 | 
+|--------|--------|--------|--------|
+| defaultField | 仅在  |  |  | 
+| enum | 是否匹配枚举中的值（需要将  | any[] |  | 
+| fields | 仅在  | Record<string,  |  | 
+| len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | number |  | 
+| max | 必须设置  | number |  | 
+| message | 错误信息，不设置时会通过 | string | ReactElement |  | 
+| min | 必须设置  | number |  | 
+| pattern | 正则表达式匹配 | RegExp |  | 
+| required | 是否为必选字段 | boolean |  | 
+| transform | 将字段值转换成目标值后进行校验 | (value) => any |  | 
+| type | 类型，常见有  | string |  | 
+| validateTrigger | 设置触发验证时机，必须是 Form.Item 的  | string | string[] |  | 
+| validator | 自定义校验，接收 Promise 作为返回值。 | ( |  | 
+| warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 | 
+| whitespace | 如果字段仅包含空格则校验不通过，只在  | boolean |  | 
+
+
+### WatchOptions
+
+| 名称 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| form | 指定 Form 实例 | FormInstance | 当前 context 中的 Form | 5.4.0 | 
+| preserve | 是否监视没有对应的  | boolean | false | 5.4.0 | 

package/llms/components/commonComponents/IconButton/index.zh-CN.llms.txt

@@ -0,0 +1,68 @@
+
+
+<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。"></DemoTitle>
+
+
+
+
+
+示例
+
+<Install>IconButton</Install>
+
+#### 图标按钮示例
+
+以下是此组件的示例和变体
+
+
+
+
+带边框的图标按钮
+
+
+
+
+圆形图标按钮
+
+#### API
+
+| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> | 
+|--------|--------|--------|--------|
+| icon | <div><span class="lang-en"></span><span class="lang-cn">icon</span></div> | ReactNode | string |  | 
+| iconType | <div><span class="lang-en"></span><span class="lang-cn">百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add</span></div> | string |  | 
+| bordered | <div><span class="lang-en"></span><span class="lang-cn">边框</span></div> | boolean | true | 
+| shape | <div><span class="lang-en"></span><span class="lang-cn">形状</span></div> | 'default' | 'circle' | 'default' | 
+
+
+## antd API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
+
+按钮的属性说明如下：
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置  | boolean | true | 5.17.0 | 
+| block | 将按钮宽度调整为其父宽度的选项 | boolean | false |  | 
+| classNames | 语义化结构 class |  | - | 5.4.0 | 
+| color | 设置按钮的颜色 | default | - | default | 
+| danger | 语法糖，设置危险按钮。当设置  | boolean | false |  | 
+| disabled | 设置按钮失效状态 | boolean | false |  | 
+| ghost | 幽灵属性，使按钮背景透明 | boolean | false |  | 
+| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |  | 
+| htmlType | 设置  | submit | button |  | 
+| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 | 
+| loading | 设置按钮载入状态 | boolean | { delay: number, icon: ReactNode } | false | icon: 5.23.0 | 
+| styles | 语义化结构 style |  | - | 5.4.0 | 
+| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  | 
+| onClick | 点击按钮时的回调 | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |  | 
+| variant | 设置按钮的变体 | outlined | - | 5.21.0 | 
+
+
+支持原生 button 的其他所有属性。
+
+### PresetColors
+
+type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';

package/llms/components/commonComponents/Image/index.zh-CN.llms.txt

@@ -0,0 +1,118 @@
+
+
+<DemoTitle title="Image" desc="可预览的图片"></DemoTitle>
+
+
+
+
+
+示例
+
+<Install>Image</Install>
+
+#### API
+
+本组件完全兼容 antd 同名组件，详情可访问 [antd image](https://ant.design/components/image-cn) 查看更多 API
+
+
+## antd API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+### Image
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| alt | 图像描述 | string | - | 4.6.0 | 
+| fallback | 加载失败容错地址 | string | - | 4.6.0 | 
+| height | 图像高度 | string | number | - | 4.6.0 | 
+| placeholder | 加载占位，为  | ReactNode | - | 4.6.0 | 
+| preview | 预览参数，为  | boolean |  | true | 4.6.0  | 
+| src | 图片地址 | string | - | 4.6.0 | 
+| width | 图像宽度 | string | number | - | 4.6.0 | 
+| onError | 加载错误回调 | (event: Event) => void | - | 4.12.0 | 
+
+
+其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+
+### PreviewType
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| visible | 是否显示 | boolean | - | - | 
+| src | 自定义预览 src | string | - | 4.10.0 | 
+| getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string | HTMLElement | (() => HTMLElement) | false | - | 4.8.0 | 
+| movable | 是否可移动 | boolean | true | 5.8.0 | 
+| mask | 缩略图遮罩 | ReactNode | - | 4.9.0 | 
+| maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 | 
+| rootClassName | 预览图的根 DOM 类名 | string | - | 5.4.0 | 
+| scaleStep | 1 + scaleStep | number | 0.5 | - | 
+| minScale | 最小缩放倍数 | number | 1 | 5.7.0 | 
+| maxScale | 最大放大倍数 | number | 50 | 5.7.0 | 
+| closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 | 
+| forceRender | 强制渲染预览图 | boolean | - | - | 
+| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: Omit< | - | 5.7.0,  | 
+| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform:  | - | 5.7.0, image: 5.18.0 | 
+|  | 关闭预览时销毁子元素 | boolean | false |  | 
+| destroyOnHidden | 关闭预览时销毁子元素 | boolean | false | 5.25.0 | 
+| onTransform | 预览图 transform 变化的回调 | { transform:  | - | 5.7.0 | 
+| onVisibleChange | 当  | (visible: boolean, prevVisible: boolean) => void | - | - | 
+
+
+## PreviewGroup
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| preview | 预览参数，为  | boolean |  | true | 4.6.0  | 
+| items | 预览数组 | string[] | { src: string, crossOrigin: string, ... }[] | - | 5.7.0 | 
+| fallback | 加载失败容错地址 | string | - | 5.7.0 | 
+
+
+### PreviewGroupType
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| visible | 是否显示 | boolean | - | - | 
+| getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string | HTMLElement | (() => HTMLElement) | false | - | 4.8.0 | 
+| movable | 是否可移动 | boolean | true | 5.8.0 | 
+| current | 当前预览图的 index | number | - | 4.12.0 | 
+| mask | 缩略图遮罩 | ReactNode | - | 4.9.0 | 
+| maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 | 
+|  | 预览图的根 DOM 类名，不做推荐了，v6 会移到根组件上 | string | - | 5.4.0 | 
+| scaleStep | 1 + scaleStep | number | 0.5 | - | 
+| minScale | 最小缩放倍数 | number | 1 | 5.7.0 | 
+| maxScale | 最大放大倍数 | number | 50 | 5.7.0 | 
+| closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 | 
+| forceRender | 强制渲染预览图 | boolean | - | - | 
+| countRender | 自定义预览计数内容 | (current: number, total: number) => React.ReactNode | - | 4.20.0 | 
+| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info:  | - | 5.7.0,  | 
+| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform:  | - | 5.7.0, image: 5.18.0 | 
+| onTransform | 预览图 transform 变化的回调 | { transform:  | - | 5.7.0 | 
+| onChange | 切换预览图的回调 | (current: number, prevCurrent: number) => void | - | 5.3.0 | 
+| onVisibleChange | 当  | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 | 
+
+
+## Interface
+
+### TransformType
+
+
+
+
+
+### TransformAction
+
+
+
+
+
+### ToolbarRenderInfoType
+
+
+
+
+
+### ImgInfo
+
+
+