king-design-analyzer 2.1.9 → 2.2.1

package/docs_for_llm/editable.doc.md

@@ -12,17 +12,23 @@ import { Editable } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| value | `string` | `undefined` | 否 | 编辑的内容，可用 v-model 双向绑定 | `<Editable v-model="text" />` |
-| editing | `boolean` | `false` | 否 | 是否为编辑状态 | `<Editable :editing="isEditing" />` |
-| required | `boolean` | `true` | 否 | 是否规定不能为空 | `<Editable :required="false" />` |
-| validate | `((v: string) => boolean) | RegExp | string` | `undefined` | 否 | 验证规则，支持函数、正则表达式或正则字符串。函数返回 true 表示验证通过 | `<Editable :validate="(v) => v.length >= 3" /></Editable>` |
-| disabled | `boolean` | `false` | 否 | 是否禁用编辑 | `<Editable disabled />` |
-| tip | `string` | `"编辑"` | 否 | 编辑按钮提示文案 | `<Editable tip="点击修改" />` |
-| trim | `boolean` | `true` | 否 | 是否去掉前后空白字符 | `<Editable :trim="false" />` |
-| invalid | `boolean` | `false` | 否 | 是否为验证失败状态 | `<Editable :invalid="hasError" />` |
-| rows | `string | number | 'auto' | AutoRows` | `1` | 否 | 是否自动折行及行数控制，可为数字、'auto' 或包含 min/max 的对象 | `<Editable :rows="3" />` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `string` | `undefined` | 否 | 编辑的内容，可用 v-model 双向绑定 | - | `<Editable v-model="text" />` |
+| editing | `boolean` | `false` | 否 | 是否为编辑状态 | - | `<Editable :editing="isEditing" />` |
+| required | `boolean` | `true` | 否 | 是否规定不能为空 | - | `<Editable :required="false" />` |
+| validate | `((v: string) => boolean) | RegExp | string` | `undefined` | 否 | 验证规则，支持函数、正则表达式或正则字符串。函数返回 true 表示验证通过 | - | `<Editable :validate="(v) => v.length >= 3" /></Editable>` |
+| disabled | `boolean` | `false` | 否 | 是否禁用编辑 | - | `<Editable disabled />` |
+| placeholder | `string` | `undefined` | 否 | 编辑态输入框的占位提示文本 | - | `<Editable placeholder="请输入内容" />` |
+| title | `string` | `"编辑"` | 否 | 编辑按钮或输入区域的标题提示文本 | - | `<Editable title="修改名称" />` |
+| tip | `string` | `"编辑"` | 否 | 编辑按钮提示文案 | - | `<Editable tip="点击修改" />` |
+| trim | `boolean` | `true` | 否 | 是否去掉前后空白字符 | - | `<Editable :trim="false" />` |
+| invalid | `boolean` | `false` | 否 | 是否为验证失败状态 | - | `<Editable :invalid="hasError" />` |
+| errorTip | `string` | `"输入有误"` | 否 | 验证失败时显示的错误提示文案 | - | `<Editable error-tip="名称格式不正确" />` |
+| okText | `string` | `"确定"` | 否 | 确认按钮文案 | - | `<Editable ok-text="保存" />` |
+| cancelText | `string` | `"取消"` | 否 | 取消按钮文案 | - | `<Editable cancel-text="放弃" />` |
+| type | `string` | `undefined` | 否 | 编辑输入框类型，通常用于切换单行或其他输入模式 | - | `<Editable type="textarea" />` |
+| rows | `string | number | 'auto' | AutoRows` | `1` | 否 | 是否自动折行及行数控制，可为数字、'auto' 或包含 min/max 的对象 | - | `<Editable :rows="3" />` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
@@ -30,15 +36,28 @@ import { Editable } from '@king-design/vue';
 | change | `@change` | 当值改变时触发 | `newValue: string, oldValue: string` | `<Editable @change="handleChange" />` |
 | error | `@error` | 验证失败时触发 | `value: string` | `<Editable @error="handleError" />` |
 
-### 事件处理函数示例
-**change**:
+### 事件参数说明
+**change**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| newValue | `string` | 是 | - | 新的值 |
+| oldValue | `string` | 是 | - | 旧的值 |
+
+事件处理示例:
 ```typescript
 const handleChange = (newValue: string, oldValue: string) => {
   console.log(`值从 ${oldValue} 变为 ${newValue}`);
 };
 ```
 
-**error**:
+**error**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string` | 是 | - | 验证失败的值 |
+
+事件处理示例:
 ```typescript
 const handleError = (value: string) => {
   Message.error(`验证失败: ${value}`);
@@ -46,6 +65,7 @@ const handleError = (value: string) => {
 ```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 验证函数返回值错误
 > **错误用法**: `const validate = (v: string) => {
   if (v.length < 3) {
     return '长度不能小于3';
@@ -56,10 +76,12 @@ const handleError = (value: string) => {
 }`
 > **说明**: validate 函数应返回布尔值，true 表示验证通过，false 表示失败
 
+### rows 值类型错误
 > **错误用法**: `<Editable rows="3" />`
 > **正确写法**: `<Editable :rows="3" />`
 > **说明**: 当 rows 为数字时需要使用 v-bind (:rows)，字符串 '3' 会被当作字符串处理
 
+### 不了解 required 默认为 true
 > **错误用法**: `<Editable v-model="text" /> <!-- 用户无法保存空值 -->`
 > **正确写法**: `<Editable v-model="text" :required="false" /> <!-- 允许空值 -->`
 > **说明**: Editable 默认 required 为 true，如果允许空值需要显式设置 :required="false"

package/docs_for_llm/ellipsis.doc.md

@@ -12,23 +12,28 @@ import { Ellipsis } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| maxLines | `number` | `undefined` | 否 | 定义多行省略最大行数，不设置时为单行省略 | `<Ellipsis :maxLines="2">长文本内容</Ellipsis>` |
-| position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` | 否 | Tooltip 弹出的位置，默认在触发器正上方向上偏移 10px | `<Ellipsis position="bottom">长文本</Ellipsis>` |
-| disabled | `boolean` | `false` | 否 | 是否禁用 Tooltip 提示（禁用后悬停不会显示完整内容） | `<Ellipsis disabled>长文本</Ellipsis>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| maxLines | `number` | `undefined` | 否 | 定义多行省略最大行数，不设置时为单行省略 | - | `<Ellipsis :maxLines="2">长文本内容</Ellipsis>` |
+| position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` | 否 | Tooltip 弹出的位置，默认在触发器正上方向上偏移 10px | - | `<Ellipsis position="bottom">长文本</Ellipsis>` |
+| theme | `"dark" | "light"` | `"light"` | 否 | Tooltip 主题 | - | `<Ellipsis theme="dark">长文本</Ellipsis>` |
+| hoverable | `boolean` | `false` | 否 | 悬浮提示层是否在鼠标移入 Tooltip 内容时仍然保持显示 | - | `<Ellipsis hoverable>长文本</Ellipsis>` |
+| disabled | `boolean` | `false` | 否 | 是否禁用 Tooltip 提示（禁用后悬停不会显示完整内容） | - | `<Ellipsis disabled>长文本</Ellipsis>` |
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 容器未设置宽度
 > **错误用法**: `<Ellipsis>长文本内容</Ellipsis>`
 > **正确写法**: `<div style="width: 200px;">
   <Ellipsis>长文本内容</Ellipsis>
 </div>`
 > **说明**: Ellipsis 需要父容器有明确的宽度限制才能生效
 
+### maxLines 使用字符串而非数字
 > **错误用法**: `<Ellipsis maxLines="2">文本</Ellipsis>`
 > **正确写法**: `<Ellipsis :maxLines="2">文本</Ellipsis>`
 > **说明**: maxLines 是数字类型，需要使用 v-bind 语法
 
+### 误解 disabled 属性的含义
 > **错误用法**: `<Ellipsis disabled> <!-- 以为会禁用省略效果 -->`
 > **正确写法**: `<Ellipsis disabled> <!-- 实际是禁用 Tooltip，省略效果仍然存在 -->`
 > **说明**: disabled 只是禁用悬停时的 Tooltip 提示，文本省略效果仍然生效

package/docs_for_llm/filtertablefieldsdialog.doc.md

@@ -0,0 +1,99 @@
+# 表格字段筛选弹窗 (FilterTableFieldsDialog)
+
+用于自定义表格可见列的配置弹窗，常与 ProTable、标准列表页联动，让用户自行决定展示哪些字段。
+
+**关键词**: filter table fields dialog, column settings, 列筛选弹窗, 字段配置, 列展示设置, column chooser, 表格列管理, 隐藏列
+
+**使用场景**: 表格字段自定义、列表列设置、列显示偏好持久化、用户自定义列表展示字段
+
+## 导入语句
+```typescript
+import { FilterTableFieldsDialog } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| modelValue | `boolean` | `undefined` | 否 | 弹窗显示状态 | - | - |
+| fields | `TableFieldItem[]` | `undefined` | 是 | 可配置字段列表 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| update:modelValue | `@update:modelValue` | 弹窗开关状态变化时触发，用于控制列设置面板显隐。 | `value?: boolean` | - |
+| change:noCheckedColFields | `@change:noCheckedColFields` | 未勾选列集合变化时触发，便于把列配置持久化到本地或服务端。 | `value?: string[]` | - |
+
+### 事件参数说明
+**update:modelValue**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `boolean` | 否 | - | 当前列设置弹窗是否显示。 |
+
+**change:noCheckedColFields**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string[]` | 否 | - | 当前未勾选字段的 key 列表。 |
+
+## 使用示例
+### 列表列展示配置
+**场景**: 让用户自主配置列表页中要显示的列。
+
+通过字段列表控制表格哪些列默认展示。
+
+**使用的 API**: 属性: modelValue, fields | 事件: update:modelValue, change:noCheckedColFields
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { FilterTableFieldsDialog } from '@ksyun-internal/versatile';
+
+const visible = ref(true);
+const fields = [
+  { key: 'id', label: '实例 ID', checked: true },
+  { key: 'name', label: '实例名称', checked: true },
+  { key: 'privateIp', label: '内网 IP', checked: false },
+];
+</script>
+
+<template>
+  <FilterTableFieldsDialog v-model="visible" :fields="fields" />
+</template>
+```
+
+### 持久化隐藏列配置
+**场景**: 让用户的列显示偏好在刷新页面后仍然保留。
+
+监听未勾选字段变化并保存到本地缓存。
+
+**使用的 API**: 属性: modelValue, fields | 事件: change:noCheckedColFields
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { FilterTableFieldsDialog } from '@ksyun-internal/versatile';
+
+const visible = ref(true);
+const fields = [
+  { key: 'id', label: '实例 ID', checked: true },
+  { key: 'zone', label: '可用区', checked: true },
+  { key: 'privateIp', label: '内网 IP', checked: false },
+];
+const handleChange = (hiddenFields: string[]) => {
+  localStorage.setItem('instance-hidden-fields', JSON.stringify(hiddenFields));
+};
+</script>
+
+<template>
+  <FilterTableFieldsDialog
+    v-model="visible"
+    :fields="fields"
+    @change:noCheckedColFields="handleChange"
+  />
+</template>
+```
+
+## 相关组件
+ProTable, LayoutStandardList
+

package/docs_for_llm/flex.doc.md

@@ -0,0 +1,83 @@
+# 弹性布局 (Flex)
+
+对 Flexbox 的业务友好封装，适合快速实现工具栏、卡片头部、表单辅助区等横向或纵向弹性布局。
+
+**关键词**: flex, layout, 弹性布局, 对齐, gap
+
+**使用场景**: 工具栏布局、信息块横向或纵向排列、纵向摘要区排版
+
+## 导入语句
+```typescript
+import { Flex } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| align | `'normal' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'` | `'normal'` | 否 | 交叉轴对齐方式 | - | - |
+| justify | `'normal' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'` | `'normal'` | 否 | 主轴对齐方式 | - | - |
+| wrap | `'nowrap' | 'wrap' | 'wrap-reverse' | boolean` | `'nowrap'` | 否 | 换行方式 | - | - |
+| inline | `boolean` | `false` | 否 | 是否以行内 flex 容器渲染 | - | - |
+| vertical | `boolean` | `false` | 否 | 是否启用纵向布局 | - | - |
+| gap | `'small' | 'middle' | 'large' | string` | `'small'` | 否 | 子元素间距，支持预设值或自定义字符串 | - | - |
+| component | `string | Component` | `'div'` | 否 | 容器渲染的标签或组件类型 | - | - |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | Flex 容器内容 | `<Flex>...</Flex>` | `<Flex>
+  <template <Flex>...</Flex>>
+    自定义default内容
+  </template>
+</Flex>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+## 使用示例
+### 工具栏左右分布布局
+**场景**: 搭建列表页顶部的标题和操作区。
+
+用 Flex 快速搭建常见的左右两端对齐工具栏。
+
+**使用的 API**: 属性: justify, align, gap
+
+```vue
+<script setup lang="ts">
+import { Flex } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <Flex justify="space-between" align="center" gap="middle">
+    <div>实例列表</div>
+    <div>刷新 / 导出 / 新建</div>
+  </Flex>
+</template>
+```
+
+### 纵向信息堆叠
+**场景**: 在详情摘要区纵向排列多条关键信息。
+
+使用 vertical 和 gap 快速搭建纵向信息区。
+
+**使用的 API**: 属性: vertical, gap
+
+```vue
+<script setup lang="ts">
+import { Flex } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <Flex vertical gap="large">
+    <div>实例规格：4C8G</div>
+    <div>系统盘：100GB SSD</div>
+    <div>网络：经典网络</div>
+  </Flex>
+</template>
+```
+
+## 相关组件
+LayoutContent, LayoutListContent
+

package/docs_for_llm/form.doc.md

@@ -12,20 +12,35 @@ import { Form, FormItem } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| labelWidth | `string | number` | `undefined` | 否 | 定义所有子孙 FormItem 组件的 label 宽度 | `<Form :labelWidth="120"></Form>` |
-| layout | `"horizontal" | "vertical" | "inline"` | `"horizontal"` | 否 | 指定表单布局方式 | `<Form layout="vertical"></Form>` |
-| starOnRequired | `boolean` | `false` | 否 | 当 FormItem 必填时，是否在 label 前面展示 * | `<Form starOnRequired></Form>` |
-| size | `"default" | "small" | "mini"` | `"default"` | 否 | 定义表单之间的间隔大小 | `<Form size="small"></Form>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| labelWidth | `string | number` | `undefined` | 否 | 定义所有子孙 FormItem 组件的 label 宽度 | - | `<Form :labelWidth="120"></Form>` |
+| layout | `"horizontal" | "vertical" | "inline"` | `"horizontal"` | 否 | 指定表单布局方式 | - | `<Form layout="vertical"></Form>` |
+| starOnRequired | `boolean` | `false` | 否 | 当 FormItem 必填时，是否在 label 前面展示 * | - | `<Form starOnRequired></Form>` |
+| size | `"default" | "small" | "mini"` | `"default"` | 否 | 定义表单之间的间隔大小 | - | `<Form size="small"></Form>` |
+| acceptcharset | `string` | `undefined` | 否 | 原生 acceptcharset 属性，指定服务器可处理的字符编码 | `native` | `<Form acceptcharset="UTF-8"></Form>` |
+| autocomplete | `string` | `undefined` | 否 | 原生 autocomplete 属性，指定表单自动补全行为 | `native` | `<Form autocomplete="off"></Form>` |
+| name | `string` | `undefined` | 否 | 原生 name 属性 | `native` | `<Form name="loginForm"></Form>` |
+| rel | `string` | `undefined` | 否 | 原生 rel 属性，指定表单与目标资源的关系 | `native` | `<Form rel="external"></Form>` |
+| action | `string` | `undefined` | 否 | 原生 action 属性，指定表单提交地址 | `native` | `<Form action="/api/submit"></Form>` |
+| enctype | `string` | `undefined` | 否 | 原生 enctype 属性，指定表单提交编码类型 | `native` | `<Form enctype="multipart/form-data"></Form>` |
+| method | `"post" | "get" | "dialog"` | `undefined` | 否 | 原生 method 属性，指定表单提交方法 | `native` | `<Form method="post"></Form>` |
+| novalidate | `boolean` | `undefined` | 否 | 原生 novalidate 属性，提交时跳过原生表单校验 | `native` | `<Form novalidate></Form>` |
+| target | `string` | `undefined` | 否 | 原生 target 属性，指定表单响应的打开位置 | `native` | `<Form target="_blank"></Form>` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
 | submit | `@submit` | 当表单提交并且所有规则都验证通过时触发 | `event: Event` | `<Form @submit="handleSubmit"></Form>` |
 
-### 事件处理函数示例
-**submit**:
+### 事件参数说明
+**submit**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| event | `Event` | 是 | - | 原生表单提交事件对象 |
+
+事件处理示例:
 ```typescript
 const handleSubmit = (e: Event) => {
   console.log('表单验证通过，提交中...');
@@ -35,15 +50,48 @@ const handleSubmit = (e: Event) => {
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| validate | 验证表单所有规则 | `` | `Promise<boolean>` |
-| reset | 重置表单验证状态 | `` | `void` |
-| getFirstInvalidFormItem | 获取第一条出错的 FormItem | `` | `FormItem` |
-| getAllInvalidFormItems | 获取所有校验失败的 FormItem | `` | `FormItem[]` |
+| validate | 验证表单所有规则 | `-` | `Promise<boolean>` |
+| reset | 重置表单验证状态 | `-` | `void` |
+| getFirstInvalidFormItem | 获取第一条出错的 FormItem | `-` | `FormItem` |
+| getAllInvalidFormItems | 获取所有校验失败的 FormItem | `-` | `FormItem[]` |
+
+### 方法调用示例
+**validate**
+
+```typescript
+const formRef = ref<InstanceType<typeof Form>>();
+
+const handleSubmit = async () => {
+  const valid = await formRef.value?.validate();
+  if (valid) {
+    console.log('验证通过');
+  }
+};</InstanceType>
+```
+
+**reset**
+
+```typescript
+formRef.value?.reset();
+```
+
+**getFirstInvalidFormItem**
+
+```typescript
+const firstError = formRef.value?.getFirstInvalidFormItem();
+```
+
+**getAllInvalidFormItems**
+
+```typescript
+const allErrors = formRef.value?.getAllInvalidFormItems();
+```
 
 ## 子组件 (Sub-Components)
 ### FormItem
 表单项组件，用于包裹表单控件并提供验证功能
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | value | `any` | 指定需要验证的数据 | `<FormItem :value="model.username" :rules="{required: true}"></FormItem>` |
@@ -57,12 +105,139 @@ const handleSubmit = (e: Event) => {
 | fluid | `boolean` | FormItem 的宽度默认是被子元素撑开的，添加该属性可以渲染 100% 的宽度 | `<FormItem fluid></FormItem>` |
 | validateOnStart | `boolean` | 是否组件一渲染就开始验证，而不是等用户输入完成再验证 | `<FormItem validateOnStart></FormItem>` |
 
-**插槽**:
-- `undefined`: 扩展前面的标题label
-- `undefined`: 扩展后面的内容，也可以使用children代替
-- `undefined`: 往后面追加的内容
+#### 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| label | 扩展前面的标题label | `#label` | `<FormItem>
+  <template #label>
+    用户名
+  </template>
+  <Input />
+</FormItem>` |
+| content | 扩展后面的内容，也可以使用children代替 | `#content` | `<FormItem label="用户名">
+  <template #content>
+    <Input />
+  </template>
+</FormItem>` |
+| append | 往后面追加的内容 | `#append` | `<FormItem label="验证码">
+  <Input />
+  <template #append>
+    <Button type="primary">发送验证码</Button>
+  </template>
+</FormItem>` |
+
+##### 插槽参数说明
+**label**
+
+- 参数结构: 无参数
+
+**content**
+
+- 参数结构: 无参数
+
+**append**
+
+- 参数结构: 无参数
+
+#### 组合示例
+##### 自定义错误提示
+**场景**: 自定义表单验证失败时显示的错误提示文案
+
+自定义验证失败时的错误提示文案
+
+**命中的子组件 API**: 属性: value, rules, messages, label
+
+```vue
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { Form, FormItem, Input } from '@king-design/vue';
+
+const model = reactive({
+  email: ''
+});
+</script>
+<template>
+  <Form>
+    <FormItem label="邮箱" :value="model.email" 
+      :rules="{required: true, email: true}"
+      :messages="{required: '邮箱不能为空', email: '邮箱格式不正确'}">
+      <Input v-model="model.email" />
+    </FormItem>
+  </Form>
+</template>
+```
+
+##### 基础表单验证
+**场景**: 创建一个带有用户名和邮箱验证的基础表单
+
+基本的表单验证用法
+
+**命中的子组件 API**: 属性: value, rules, label
+
+```vue
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { Form, FormItem, Input, Button, Message } from '@king-design/vue';
+
+const form = ref<InstanceType<typeof Form>>();
+const model = reactive({
+  username: '',
+  email: ''
+});
+
+const handleSubmit = async () => {
+  if (await form.value?.validate()) {
+    Message.success('验证通过');
+  }
+};
+</script>
+<template>
+  <Form ref="form" @submit="handleSubmit">
+    <FormItem label="用户名" :value="model.username" :rules="{required: true}">
+      <Input v-model="model.username" />
+    </FormItem>
+    <FormItem label="邮箱" :value="model.email" :rules="{required: true, email: true}">
+      <Input v-model="model.email" />
+    </FormItem>
+    <FormItem>
+      <Button type="primary" htmlType="submit">提交</Button>
+    </FormItem>
+  </Form>
+</template>
+```
+
+##### 密码确认验证
+**场景**: 创建密码和确认密码字段，验证两次输入是否一致
+
+使用 equal 规则实现密码确认
+
+**命中的子组件 API**: 属性: value, rules, label
+
+```vue
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { Form, FormItem, Input } from '@king-design/vue';
+
+const model = reactive({
+  password: '',
+  confirmPassword: ''
+});
+</script>
+<template>
+  <Form>
+    <FormItem label="密码" :value="model.password" :rules="{required: true}">
+      <Input type="password" v-model="model.password" />
+    </FormItem>
+    <FormItem label="确认密码" :value="model.confirmPassword" 
+      :rules="{required: true, equal: model.password}">
+      <Input type="password" v-model="model.confirmPassword" />
+    </FormItem>
+  </Form>
+</template>
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### FormItem 配置了 rules 但未绑定 value
 > **错误用法**: `<FormItem label="用户名" :rules="{required: true}">
   <Input v-model="model.username" />
 </FormItem>`
@@ -71,14 +246,17 @@ const handleSubmit = (e: Event) => {
 </FormItem>`
 > **说明**: 使用验证规则时，必须通过 :value 属性绑定需要验证的数据，否则验证不会生效
 
+### 使用不存在的 layout 值
 > **错误用法**: `<Form layout="flex">`
 > **正确写法**: `<Form layout="horizontal">`
 > **说明**: Form 的 layout 只支持 horizontal, vertical, inline 三种值
 
+### rules 格式错误
 > **错误用法**: `<FormItem :rules="'required'">`
 > **正确写法**: `<FormItem :rules="{required: true}">`
 > **说明**: rules 必须是对象格式，key 为规则名，value 为规则参数（通常为 true 或具体值）
 
+### validate 方法未使用 await
 > **错误用法**: `const valid = form.value?.validate();
 if (valid) { /* ... */ }`
 > **正确写法**: `const valid = await form.value?.validate();
@@ -91,7 +269,7 @@ if (valid) { /* ... */ }`
 
 基本的表单验证用法
 
-**使用的 API**: 属性: label, value, rules | 事件: submit
+**使用的 API**: 属性: label, value, rules | 事件: submit | 方法: validate
 
 ```vue
 <script setup lang="ts">
@@ -271,7 +449,7 @@ const model = reactive({
 
 重置表单验证状态
 
-**使用的 API**: 属性: label, value, rules
+**使用的 API**: 属性: label, value, rules | 方法: reset
 
 ```vue
 <script setup lang="ts">