king-design-analyzer 2.2.0 → 2.2.1

package/docs_for_llm/input.doc.md

@@ -168,6 +168,23 @@ const handleMouseleave = (e: MouseEvent) => {
   <template #suffix><Icon class="k-icon-search" /></template>
 </Input>` |
 
+### 插槽参数说明
+**prepend**
+
+- 参数结构: 无参数
+
+**append**
+
+- 参数结构: 无参数
+
+**prefix**
+
+- 参数结构: 无参数
+
+**suffix**
+
+- 参数结构: 无参数
+
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -175,10 +192,31 @@ const handleMouseleave = (e: MouseEvent) => {
 | blur | 使输入框失去焦点 | `-` | `void` |
 | select | 全选输入框中的内容 | `-` | `void` |
 
+### 方法调用示例
+**focus**
+
+```typescript
+const inputRef = ref<InstanceType<typeof Input>>();
+inputRef.value?.focus();</InstanceType>
+```
+
+**blur**
+
+```typescript
+inputRef.value?.blur();
+```
+
+**select**
+
+```typescript
+inputRef.value?.select();
+```
+
 ## 子组件 (Sub-Components)
 ### Search
 搜索框组件，提供可展开收起的搜索输入框功能
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | value | `string` | 组件输入的值 | `<Search v-model="keywords" />` |
@@ -187,8 +225,77 @@ const handleMouseleave = (e: MouseEvent) => {
 | size | `"large" | "default" | "small" | "mini"` | 尺寸 | `<Search size="small" />` |
 | open | `boolean` | 是否展开状态 | `<Search :open="isExpanded" />` |
 
-**事件**:
-- `@submit`: 表单提交事件，按回车或点击搜索按钮时触发
+#### 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| submit | `@submit` | 表单提交事件，按回车或点击搜索按钮时触发 | `keywords: string` | `<Search @submit="handleKeywordSearch" />` |
+
+##### Search 事件参数说明
+**submit**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| keywords | `string` | 是 | - | 当前搜索关键字 |
+
+事件处理示例:
+```typescript
+const searchHistory = ref<string[]>([]);
+
+const handleKeywordSearch = (keywords: string) => {
+  const normalized = keywords.trim();
+  if (!normalized) return;
+  searchHistory.value = [normalized, ...searchHistory.value.filter((item) => item !== normalized)].slice(0, 5);
+};
+```
+
+#### 方法 (Methods)
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| focus | 使搜索框获得焦点 | `-` | `void` |
+| blur | 使搜索框失去焦点 | `-` | `void` |
+
+##### Search 方法调用示例
+**focus**
+
+```typescript
+const searchRef = ref<InstanceType<typeof Search>>();
+
+const openSearchBar = () => {
+  searchRef.value?.focus();
+};
+```
+
+**blur**
+
+```typescript
+const closeSearchBar = () => {
+  searchRef.value?.blur();
+};
+```
+
+#### 组合示例
+##### 搜索框
+**场景**: 创建搜索框，支持回车提交
+
+使用 Search 组件创建搜索输入框
+
+**命中的子组件 API**: 事件: submit
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Search, Message } from '@king-design/vue';
+
+const keywords = ref('');
+
+const handleSubmit = (value: string) => {
+  Message.info(`搜索: ${value}`);
+};
+</script>
+<template>
+  <Search v-model="keywords" @submit="handleSubmit" />
+</template>
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 设置 rows 但未指定 type="textarea"

package/docs_for_llm/layoutcontent.doc.md

@@ -41,3 +41,40 @@ import { LayoutContent } from '@ksyun-internal/versatile';
 | footerRight | 扩展底部栏右侧处内容 | `<template #footerRight>...</template>` | `<LayoutContent><template #footerRight><Button>提交</Button></template></LayoutContent>` |
 | footer | 扩展底部栏处的整体内容，底部栏没有左右之分的时候可使用此扩展 | `<template #footer>...</template>` | `<LayoutContent><template #footer><Button>保存</Button><Button>取消</Button></template></LayoutContent>` |
 
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+**headerTitle**
+
+- 参数结构: 无参数
+
+**headerTitleAppend**
+
+- 参数结构: 无参数
+
+**headerDocPrepend**
+
+- 参数结构: 无参数
+
+**headerDoc**
+
+- 参数结构: 无参数
+
+**tab**
+
+- 参数结构: 无参数
+
+**footerLeft**
+
+- 参数结构: 无参数
+
+**footerRight**
+
+- 参数结构: 无参数
+
+**footer**
+
+- 参数结构: 无参数
+

package/docs_for_llm/layoutlistcontent.doc.md

@@ -21,15 +21,88 @@ import { LayoutListContent } from '@ksyun-internal/versatile';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| default | 页面主体内容区域 | `<LayoutListContent>...</LayoutListContent>` | - |
-| headerTitle | 扩展顶部栏左侧标题处内容 | `<template #headerTitle>...</template>` | - |
-| headerTitleAppend | 扩展顶部栏左侧标题后的追加内容 | `<template #headerTitleAppend>...</template>` | - |
-| headerDocPrepend | 扩展顶部栏右侧文档前置内容 | `<template #headerDocPrepend>...</template>` | - |
-| headerDoc | 扩展顶部栏右侧文档内容 | `<template #headerDoc>...</template>` | - |
-| opLeft | 卡片操作栏左侧内容 | `<template #opLeft>...</template>` | - |
-| opRight | 卡片操作栏右侧内容 | `<template #opRight>...</template>` | - |
-| prepend | 卡片操作栏上方扩展内容 | `<template #prepend>...</template>` | - |
-| extra | 头部附加区域 | `<template #extra>...</template>` | - |
+| default | 页面主体内容区域 | `<LayoutListContent>...</LayoutListContent>` | `<LayoutListContent>
+  <template <LayoutListContent>...</LayoutListContent>>
+    自定义default内容
+  </template>
+</LayoutListContent>` |
+| headerTitle | 扩展顶部栏左侧标题处内容 | `<template #headerTitle>...</template>` | `<LayoutListContent>
+  <template <template #headerTitle>...</template>>
+    自定义headerTitle内容
+  </template>
+</LayoutListContent>` |
+| headerTitleAppend | 扩展顶部栏左侧标题后的追加内容 | `<template #headerTitleAppend>...</template>` | `<LayoutListContent>
+  <template <template #headerTitleAppend>...</template>>
+    自定义headerTitleAppend内容
+  </template>
+</LayoutListContent>` |
+| headerDocPrepend | 扩展顶部栏右侧文档前置内容 | `<template #headerDocPrepend>...</template>` | `<LayoutListContent>
+  <template <template #headerDocPrepend>...</template>>
+    自定义headerDocPrepend内容
+  </template>
+</LayoutListContent>` |
+| headerDoc | 扩展顶部栏右侧文档内容 | `<template #headerDoc>...</template>` | `<LayoutListContent>
+  <template <template #headerDoc>...</template>>
+    自定义headerDoc内容
+  </template>
+</LayoutListContent>` |
+| opLeft | 卡片操作栏左侧内容 | `<template #opLeft>...</template>` | `<LayoutListContent>
+  <template <template #opLeft>...</template>>
+    自定义opLeft内容
+  </template>
+</LayoutListContent>` |
+| opRight | 卡片操作栏右侧内容 | `<template #opRight>...</template>` | `<LayoutListContent>
+  <template <template #opRight>...</template>>
+    自定义opRight内容
+  </template>
+</LayoutListContent>` |
+| prepend | 卡片操作栏上方扩展内容 | `<template #prepend>...</template>` | `<LayoutListContent>
+  <template <template #prepend>...</template>>
+    自定义prepend内容
+  </template>
+</LayoutListContent>` |
+| extra | 头部附加区域 | `<template #extra>...</template>` | `<LayoutListContent>
+  <template <template #extra>...</template>>
+    自定义extra内容
+  </template>
+</LayoutListContent>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+**headerTitle**
+
+- 参数结构: 无参数
+
+**headerTitleAppend**
+
+- 参数结构: 无参数
+
+**headerDocPrepend**
+
+- 参数结构: 无参数
+
+**headerDoc**
+
+- 参数结构: 无参数
+
+**opLeft**
+
+- 参数结构: 无参数
+
+**opRight**
+
+- 参数结构: 无参数
+
+**prepend**
+
+- 参数结构: 无参数
+
+**extra**
+
+- 参数结构: 无参数
 
 ## 使用示例
 ### 标准列表页布局

package/docs_for_llm/layoutpermissioncontent.doc.md

@@ -30,7 +30,16 @@ import { LayoutPermissionContent } from '@ksyun-internal/versatile';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| default | 主内容区域 | `<LayoutPermissionContent>...</LayoutPermissionContent>` | - |
+| default | 主内容区域 | `<LayoutPermissionContent>...</LayoutPermissionContent>` | `<LayoutPermissionContent>
+  <template <LayoutPermissionContent>...</LayoutPermissionContent>>
+    自定义default内容
+  </template>
+</LayoutPermissionContent>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
 
 ## 使用示例
 ### 无权限状态页

package/docs_for_llm/layoutstandardlist.doc.md

@@ -37,7 +37,16 @@ import { LayoutStandardList } from '@ksyun-internal/versatile';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| default | 自定义列表主体内容 | `<LayoutStandardList>...</LayoutStandardList>` | - |
+| default | 自定义列表主体内容 | `<LayoutStandardList>...</LayoutStandardList>` | `<LayoutStandardList>
+  <template <LayoutStandardList>...</LayoutStandardList>>
+    自定义default内容
+  </template>
+</LayoutStandardList>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
 
 ## 使用示例
 ### 资源管理列表页

package/docs_for_llm/lazymount.doc.md

@@ -19,7 +19,16 @@ import { LazyMount } from '@ksyun-internal/versatile';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| default | 延迟挂载的内容 | `<LazyMount>...</LazyMount>` | - |
+| default | 延迟挂载的内容 | `<LazyMount>...</LazyMount>` | `<LazyMount>
+  <template <LazyMount>...</LazyMount>>
+    自定义default内容
+  </template>
+</LazyMount>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
 
 ## 使用示例
 ### 延迟挂载重量级图表

package/docs_for_llm/lazyteleport.doc.md

@@ -22,7 +22,16 @@ import { LazyTeleport } from '@ksyun-internal/versatile';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| default | 待传送内容 | `<LazyTeleport>...</LazyTeleport>` | - |
+| default | 待传送内容 | `<LazyTeleport>...</LazyTeleport>` | `<LazyTeleport>
+  <template <LazyTeleport>...</LazyTeleport>>
+    自定义default内容
+  </template>
+</LazyTeleport>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
 
 ## 使用示例
 ### 延迟传送页面操作区

package/docs_for_llm/menu.doc.md

@@ -27,12 +27,20 @@ import { Menu, MenuItem } from '@king-design/vue';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| header | 扩展菜单头部 | `undefined` | - |
+| header | 扩展菜单头部 | `#header` | `<Menu>
+  <template #header>头部内容</template>
+</Menu>` |
+
+### 插槽参数说明
+**header**
+
+- 参数结构: 无参数
 
 ## 子组件 (Sub-Components)
 ### MenuItem
 菜单项组件，可嵌套使用形成子菜单
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | key | `string | number` | 全局唯一的标识，用于标识和控制选中状态 | `<MenuItem key="home">首页</MenuItem>` |
@@ -40,8 +48,122 @@ import { Menu, MenuItem } from '@king-design/vue';
 | disabled | `boolean` | 是否禁用当前项 | `<MenuItem key="disabled" disabled>禁用项</MenuItem>` |
 | dot | `boolean` | 是否给当前菜单项前面添加圆点 | `<MenuItem key="item" dot>带圆点</MenuItem>` |
 
-**事件**:
-- `@select`: 选中没有子菜单的菜单项时触发
+#### 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| select | `@select` | 选中没有子菜单的菜单项时触发 | `menuItem: MenuItem, e: MouseEvent` | `<MenuItem @select="handleMenuSelect"></MenuItem>` |
+
+##### MenuItem 事件参数说明
+**select**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| menuItem | `MenuItem` | 是 | - | 被选中的菜单项实例 |
+| e | `MouseEvent` | 是 | - | 原生鼠标事件 |
+
+事件处理示例:
+```typescript
+const activeSection = ref('');
+
+const handleMenuSelect = (menuItem, e: MouseEvent) => {
+  activeSection.value = String(menuItem.key);
+};
+```
+
+#### 组合示例
+##### 带图标的嵌套菜单
+**场景**: 创建带图标的多级嵌套菜单，包含禁用项和路由跳转
+
+图标和多级嵌套子菜单
+
+**命中的子组件 API**: 属性: key, to, disabled | 事件: select
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Menu, MenuItem, Icon } from '@king-design/vue';
+
+const selectedKey = ref('');
+const expandedKeys = ref<string[]>(['3']);
+
+const onSelect = (menuItem: any) => {
+  console.log('选中:', menuItem.key);
+};
+</script>
+<template>
+  <Menu 
+    v-model:selectedKey="selectedKey"
+    v-model:expandedKeys="expandedKeys"
+    theme="light"
+  >
+    <MenuItem key="1" @select="onSelect">菜单 1</MenuItem>
+    <MenuItem key="2" disabled>菜单 2（禁用）</MenuItem>
+    <MenuItem key="3">
+      <Icon class="k-icon-heart" /> 菜单 3
+      <Menu>
+        <MenuItem key="3-1" @select="onSelect">子菜单 1</MenuItem>
+        <MenuItem key="3-2" @select="onSelect">子菜单 2</MenuItem>
+        <MenuItem key="3-3" disabled>子菜单 3（禁用）</MenuItem>
+        <MenuItem key="3-4">子菜单 4</MenuItem>
+      </Menu>
+    </MenuItem>
+    <MenuItem key="4" to="/">菜单 4（路由）</MenuItem>
+  </Menu>
+</template>
+```
+
+##### 路由集成
+**场景**: 配合 Vue Router 进行页面导航
+
+配合 Vue Router 使用
+
+**命中的子组件 API**: 属性: key, to
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Menu, MenuItem } from '@king-design/vue';
+
+const selectedKey = ref('home');
+</script>
+<template>
+  <Menu v-model:selectedKey="selectedKey">
+    <MenuItem key="home" to="/">首页</MenuItem>
+    <MenuItem key="products" to="/products">产品</MenuItem>
+    <MenuItem key="docs" :to="{name: 'docs'}">文档</MenuItem>
+  </Menu>
+</template>
+```
+
+##### 带圆点和头部
+**场景**: 使用 dot 属性给菜单项添加圆点，使用 header 插槽自定义头部
+
+使用 dot 属性和 header 插槽
+
+**命中的子组件 API**: 属性: key, dot
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Menu, MenuItem } from '@king-design/vue';
+
+const selectedKey = ref('1');
+const expandedKeys = ref<string[]>([]);
+</script>
+<template>
+  <Menu 
+    v-model:selectedKey="selectedKey"
+    v-model:expandedKeys="expandedKeys"
+    :dot="true" 
+    theme="light"
+  >
+    <template #header>管理面板</template>
+    <MenuItem key="1">菜单项 1</MenuItem>
+    <MenuItem key="2">菜单项 2</MenuItem>
+    <MenuItem key="3" :dot="false">无圆点菜单项</MenuItem>
+  </Menu>
+</template>
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### MenuItem 未设置 key

package/docs_for_llm/message.doc.md

@@ -36,6 +36,11 @@ import { Message } from '@king-design/vue';
 | content | `string | VNode | Partial<MessageProps>` | 是 | - | 提示内容或配置对象 |
 | duration | `number` | 是 | - | 可选，显示时长（ms） |
 
+调用示例:
+```typescript
+Message.info('这是一条普通消息');
+```
+
 **success**
 
 | 参数 | 类型 | 必填 | 默认值 | 说明 |
@@ -43,6 +48,11 @@ import { Message } from '@king-design/vue';
 | content | `string | VNode | Partial<MessageProps>` | 是 | - | 提示内容或配置对象 |
 | duration | `number` | 是 | - | 可选，显示时长（ms） |
 
+调用示例:
+```typescript
+Message.success('操作成功');
+```
+
 **warning**
 
 | 参数 | 类型 | 必填 | 默认值 | 说明 |
@@ -50,6 +60,11 @@ import { Message } from '@king-design/vue';
 | content | `string | VNode | Partial<MessageProps>` | 是 | - | 提示内容或配置对象 |
 | duration | `number` | 是 | - | 可选，显示时长（ms） |
 
+调用示例:
+```typescript
+Message.warning('请注意');
+```
+
 **error**
 
 | 参数 | 类型 | 必填 | 默认值 | 说明 |
@@ -57,6 +72,36 @@ import { Message } from '@king-design/vue';
 | content | `string | VNode | Partial<MessageProps>` | 是 | - | 提示内容或配置对象 |
 | duration | `number` | 是 | - | 可选，显示时长（ms） |
 
+调用示例:
+```typescript
+Message.error('操作失败');
+```
+
+### 方法调用示例
+**info**
+
+```typescript
+Message.info('这是一条普通消息');
+```
+
+**success**
+
+```typescript
+Message.success('操作成功');
+```
+
+**warning**
+
+```typescript
+Message.warning('请注意');
+```
+
+**error**
+
+```typescript
+Message.error('操作失败');
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 未导入 Message 组件
 > **错误用法**: `Message.success('成功'); // ReferenceError: Message is not defined`