king-design-analyzer 2.2.0 → 2.2.2

package/docs_for_llm/dropdown.doc.md

@@ -44,6 +44,23 @@ const handlePositioned = (feedback: Feedback) => {
 };
 ```
 
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| menu | 自定义下拉菜单内容，通常放置 DropdownMenu 和 DropdownItem。 | `<template #menu>...</template>` | `<Dropdown>
+  <Button>更多操作</Button>
+  <template #menu>
+    <DropdownMenu>
+      <DropdownItem>查看详情</DropdownItem>
+    </DropdownMenu>
+  </template>
+</Dropdown>` |
+
+### 插槽参数说明
+**menu**
+
+- 参数结构: 无参数
+
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -59,33 +76,270 @@ const handlePositioned = (feedback: Feedback) => {
 | --- | --- | --- | --- | --- |
 | shouldFocus | `boolean` | 否 | - | 展开后是否尝试把焦点移动到菜单内容，用于键盘可访问性场景。 |
 
+调用示例:
+```typescript
+dropdownRef.value?.show(true);
+```
+
 **hide**
 
 | 参数 | 类型 | 必填 | 默认值 | 说明 |
 | --- | --- | --- | --- | --- |
 | immediately | `boolean` | 否 | - | 是否立即隐藏并跳过延迟关闭逻辑。 |
 
+调用示例:
+```typescript
+dropdownRef.value?.hide(true);
+```
+
 **position**
 
 | 参数 | 类型 | 必填 | 默认值 | 说明 |
 | --- | --- | --- | --- | --- |
 | callback | `(feedback: Feedback) => void` | 否 | - | 定位完成后的回调，可读取最终 placement 和坐标。 |
 
+调用示例:
+```typescript
+dropdownRef.value?.position((feedback) => console.log(feedback.placement));
+```
+
+### 方法调用示例
+**show**
+
+```typescript
+dropdownRef.value?.show(true);
+```
+
+**hide**
+
+```typescript
+dropdownRef.value?.hide(true);
+```
+
+**focusFirst**
+
+```typescript
+dropdownRef.value?.focusFirst();
+```
+
+**position**
+
+```typescript
+dropdownRef.value?.position((feedback) => console.log(feedback.placement));
+```
+
 ## 子组件 (Sub-Components)
 ### DropdownMenu
 下拉菜单容器，用于包裹菜单项
 
+#### 组合示例
+##### 嵌套菜单
+**场景**: 创建多级嵌套的下拉菜单
+
+多级嵌套的下拉菜单
+
+```vue
+<script setup lang="ts">
+import { Dropdown, DropdownMenu, DropdownItem, Button } from '@king-design/vue';
+</script>
+<template>
+  <Dropdown>
+    <Button>嵌套菜单</Button>
+    <template #menu>
+      <DropdownMenu>
+        <DropdownItem>菜单项1</DropdownItem>
+        <Dropdown position="right">
+          <DropdownItem>更多 ></DropdownItem>
+          <template #menu>
+            <DropdownMenu>
+              <DropdownItem>子菜单1</DropdownItem>
+              <DropdownItem>子菜单2</DropdownItem>
+            </DropdownMenu>
+          </template>
+        </Dropdown>
+      </DropdownMenu>
+    </template>
+  </Dropdown>
+</template>
+```
+
+##### 基础用法
+**场景**: 创建一个悬停触发的下拉菜单
+
+基本的下拉菜单，悬停触发
+
+```vue
+<script setup lang="ts">
+import { Dropdown, DropdownMenu, DropdownItem, Button } from '@king-design/vue';
+</script>
+<template>
+  <Dropdown>
+    <Button>下拉菜单</Button>
+    <template #menu>
+      <DropdownMenu>
+        <DropdownItem>菜单项1</DropdownItem>
+        <DropdownItem>菜单项2</DropdownItem>
+        <DropdownItem>菜单项3</DropdownItem>
+      </DropdownMenu>
+    </template>
+  </Dropdown>
+</template>
+```
+
+##### 点击触发
+**场景**: 创建点击触发的下拉菜单
+
+点击触发的下拉菜单
+
+```vue
+<script setup lang="ts">
+import { Dropdown, DropdownMenu, DropdownItem, Button } from '@king-design/vue';
+</script>
+<template>
+  <Dropdown trigger="click">
+    <Button>点击展开</Button>
+    <template #menu>
+      <DropdownMenu>
+        <DropdownItem>菜单项1</DropdownItem>
+        <DropdownItem>菜单项2</DropdownItem>
+      </DropdownMenu>
+    </template>
+  </Dropdown>
+</template>
+```
+
 ### DropdownItem
 下拉菜单项组件
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | disabled | `boolean` | 是否禁用该菜单项 | `<DropdownItem disabled>禁用项</DropdownItem>` |
 | hideOnSelect | `boolean` | 选中该菜单后是否隐藏整个菜单 | `<DropdownItem :hideOnSelect="false">选中不关闭</DropdownItem>` |
 
-**事件**:
-- `@select`: 菜单项被选中时触发（点击或键盘操作）
-- `@click`: 菜单项被点击时触发
+#### 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| select | `@select` | 菜单项被选中时触发（点击或键盘操作） | `item: DropdownItem` | `<DropdownItem @select="handleActionSelect">查看详情</DropdownItem>` |
+| click | `@click` | 菜单项被点击时触发 | `e: MouseEvent` | `<DropdownItem @click="recordMenuClick">下载日志</DropdownItem>` |
+
+##### DropdownItem 事件参数说明
+**select**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| item | `DropdownItem` | 是 | - | 被选中的菜单项实例 |
+
+事件处理示例:
+```typescript
+const selectedAction = ref('');
+const selectedItem = ref(null);
+
+const handleActionSelect = (item) => {
+  selectedAction.value = 'detail';
+  selectedItem.value = item;
+};
+```
+
+**click**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| e | `MouseEvent` | 是 | - | 原生鼠标事件 |
+
+事件处理示例:
+```typescript
+const lastPointer = ref({ x: 0, y: 0 });
+
+const recordMenuClick = (e: MouseEvent) => {
+  lastPointer.value = { x: e.clientX, y: e.clientY };
+};
+```
+
+#### 组合示例
+##### 禁用菜单项
+**场景**: 禁用特定的菜单项
+
+禁用特定的菜单项
+
+**命中的子组件 API**: 属性: disabled
+
+```vue
+<script setup lang="ts">
+import { Dropdown, DropdownMenu, DropdownItem, Button } from '@king-design/vue';
+</script>
+<template>
+  <Dropdown>
+    <Button>下拉菜单</Button>
+    <template #menu>
+      <DropdownMenu>
+        <DropdownItem>可用项</DropdownItem>
+        <DropdownItem disabled>禁用项</DropdownItem>
+        <DropdownItem>可用项</DropdownItem>
+      </DropdownMenu>
+    </template>
+  </Dropdown>
+</template>
+```
+
+##### 监听选择事件
+**场景**: 监听菜单项点击并执行操作
+
+监听菜单项的选择
+
+**命中的子组件 API**: 事件: click
+
+```vue
+<script setup lang="ts">
+import { Dropdown, DropdownMenu, DropdownItem, Button, Message } from '@king-design/vue';
+
+const handleClick = (action: string) => {
+  Message.info(`选择了: ${action}`);
+};
+</script>
+<template>
+  <Dropdown>
+    <Button>操作</Button>
+    <template #menu>
+      <DropdownMenu>
+        <DropdownItem @click="handleClick('编辑')">编辑</DropdownItem>
+        <DropdownItem @click="handleClick('复制')">复制</DropdownItem>
+        <DropdownItem @click="handleClick('删除')">删除</DropdownItem>
+      </DropdownMenu>
+    </template>
+  </Dropdown>
+</template>
+```
+
+##### 表格操作列
+**场景**: 在表格操作列中使用下拉菜单
+
+在表格中使用下拉菜单作为操作列
+
+**命中的子组件 API**: 事件: click
+
+```vue
+<script setup lang="ts">
+import { Dropdown, DropdownMenu, DropdownItem, Button, Message } from '@king-design/vue';
+
+const handleAction = (action: string, id: number) => {
+  Message.info(`对 ID=${id} 执行 ${action}`);
+};
+</script>
+<template>
+  <!-- 假设在表格的操作列中 -->
+  <Dropdown trigger="click">
+    <Button type="link" size="small">操作</Button>
+    <template #menu>
+      <DropdownMenu>
+        <DropdownItem @click="handleAction('查看', 1)">查看</DropdownItem>
+        <DropdownItem @click="handleAction('编辑', 1)">编辑</DropdownItem>
+        <DropdownItem @click="handleAction('删除', 1)">删除</DropdownItem>
+      </DropdownMenu>
+    </template>
+  </Dropdown>
+</template>
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 未使用 #menu 插槽

package/docs_for_llm/flex.doc.md

@@ -25,7 +25,16 @@ import { Flex } from '@ksyun-internal/versatile';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| default | Flex 容器内容 | `<Flex>...</Flex>` | - |
+| default | Flex 容器内容 | `<Flex>...</Flex>` | `<Flex>
+  <template <Flex>...</Flex>>
+    自定义default内容
+  </template>
+</Flex>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
 
 ## 使用示例
 ### 工具栏左右分布布局

package/docs_for_llm/form.doc.md

@@ -55,10 +55,43 @@ const handleSubmit = (e: Event) => {
 | 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>` |
@@ -72,10 +105,136 @@ 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

package/docs_for_llm/formitemspinner.doc.md

@@ -18,7 +18,7 @@ import { FormItemSpinner } from '@ksyun-internal/versatile';
 | max | `number` | `Infinity` | 否 | 最大值 | - | - |
 | min | `number` | `0` | 否 | 最小值 | - | - |
 | step | `number` | `1` | 否 | 步长 | - | - |
-| size | `"default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | `inherited:Spinner` | `<Spinner size="small" />` |
+| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | `inherited:Spinner` | `<Spinner size="small" />` |
 | vertical | `boolean` | `false` | 否 | 控制按钮是否竖直排列 | `inherited:Spinner` | `<Spinner vertical />` |
 | precision | `number` | `0` | 否 | 保留小数位数 | - | - |
 | formatter | `(value: number) => string` | `undefined` | 否 | 定义格式化展示值的函数 | `inherited:Spinner` | `<Spinner :formatter="(val) => `${val}%`" :parser="(val) => parseFloat(val)" /></Spinner>` |

package/docs_for_llm/grid.doc.md

@@ -22,6 +22,7 @@ import { Row, Col } from '@king-design/vue';
 ### Col
 栅格列组件
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | span | `number | string` | 栅格占位格数，为 0 时相当于 display: none | `<Col :span="12"></Col>` |
@@ -36,6 +37,76 @@ import { Row, Col } from '@king-design/vue';
 | xl | `number | string | object` | ≥1200px 响应式栅格 | - |
 | xxl | `number | string | object` | ≥1600px 响应式栅格 | - |
 
+#### 组合示例
+##### 响应式布局
+**场景**: 适配不同屏幕尺寸的布局
+
+预设六个响应尺寸：xs sm md lg xl xxl
+
+**命中的子组件 API**: 属性: xs, sm, md, lg, xl
+
+```vue
+<script setup lang="ts">
+import { Row, Col } from '@king-design/vue';
+</script>
+<template>
+  <Row :gutter="10">
+    <Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
+      <div>Responsive</div>
+    </Col>
+    <Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
+      <div>Responsive</div>
+    </Col>
+    <Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
+      <div>Responsive</div>
+    </Col>
+  </Row>
+</template>
+```
+
+##### 左右偏移
+**场景**: 创建中间有空隙的布局
+
+使用 offset 属性将列向右侧偏移
+
+**命中的子组件 API**: 属性: span, offset
+
+```vue
+<script setup lang="ts">
+import { Row, Col } from '@king-design/vue';
+</script>
+<template>
+  <Row>
+    <Col :span="8"><div>col-8</div></Col>
+    <Col :span="8" :offset="8"><div>col-8 offset-8</div></Col>
+  </Row>
+</template>
+```
+
+##### 基础栅格
+**场景**: 基本的等分列布局
+
+简单的行列布局
+
+**命中的子组件 API**: 属性: span
+
+```vue
+<script setup lang="ts">
+import { Row, Col } from '@king-design/vue';
+</script>
+<template>
+  <Row>
+    <Col :span="12"><div>50%</div></Col>
+    <Col :span="12"><div>50%</div></Col>
+  </Row>
+  <Row>
+    <Col :span="8"><div>33.3%</div></Col>
+    <Col :span="8"><div>33.3%</div></Col>
+    <Col :span="8"><div>33.3%</div></Col>
+  </Row>
+</template>
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### span 总和超过 24
 > **错误用法**: `<Row>

package/docs_for_llm/header.doc.md

@@ -24,10 +24,39 @@ import { Header } from '@ksyun-internal/versatile';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| title | 扩展顶部栏左侧标题处内容 | `<template #title>...</template>` | - |
-| titleAppend | 扩展顶部栏左侧标题后的追加内容 | `<template #titleAppend>...</template>` | - |
-| docPrepend | 扩展右侧文档入口前的内容 | `<template #docPrepend>...</template>` | - |
-| doc | 自定义右侧文档区域 | `<template #doc>...</template>` | - |
+| title | 扩展顶部栏左侧标题处内容 | `<template #title>...</template>` | `<Header>
+  <template <template #title>...</template>>自定义标题</template>
+</Header>` |
+| titleAppend | 扩展顶部栏左侧标题后的追加内容 | `<template #titleAppend>...</template>` | `<Header>
+  <template <template #titleAppend>...</template>>
+    自定义titleAppend内容
+  </template>
+</Header>` |
+| docPrepend | 扩展右侧文档入口前的内容 | `<template #docPrepend>...</template>` | `<Header>
+  <template <template #docPrepend>...</template>>
+    自定义docPrepend内容
+  </template>
+</Header>` |
+| doc | 自定义右侧文档区域 | `<template #doc>...</template>` | `<Header>
+  <template <template #doc>...</template>>自定义doc内容</template>
+</Header>` |
+
+### 插槽参数说明
+**title**
+
+- 参数结构: 无参数
+
+**titleAppend**
+
+- 参数结构: 无参数
+
+**docPrepend**
+
+- 参数结构: 无参数
+
+**doc**
+
+- 参数结构: 无参数
 
 ## 使用示例
 ### 详情页头部信息