king-design-analyzer 2.2.0 → 2.2.1

package/docs_for_llm/steps.doc.md

@@ -24,10 +24,81 @@ import { Steps, Step } from '@king-design/vue';
 ### Step
 步骤项组件，用于定义每个步骤的标题和内容
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | title | `string` | 步骤标题 | `<Step title="步骤1" />` |
 
+#### 组合示例
+##### 基础用法
+**场景**: 创建一个基本的步骤条
+
+基本的步骤条
+
+**命中的子组件 API**: 属性: title
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Steps, Step } from '@king-design/vue';
+
+const current = ref(1);
+</script>
+<template>
+  <Steps :value="current">
+    <Step title="步骤1" />
+    <Step title="步骤2" />
+    <Step title="步骤3" />
+  </Steps>
+</template>
+```
+
+##### 可点击切换
+**场景**: 可以点击已完成的步骤进行切换
+
+支持点击切换已完成的步骤
+
+**命中的子组件 API**: 属性: title
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Steps, Step } from '@king-design/vue';
+
+const current = ref(0);
+</script>
+<template>
+  <Steps v-model="current" clickable>
+    <Step title="填写信息" />
+    <Step title="确认信息" />
+    <Step title="完成" />
+  </Steps>
+</template>
+```
+
+##### 垂直步骤条
+**场景**: 创建垂直排列的步骤条
+
+垂直排列的步骤条
+
+**命中的子组件 API**: 属性: title
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Steps, Step } from '@king-design/vue';
+
+const current = ref(1);
+</script>
+<template>
+  <Steps :value="current" vertical>
+    <Step title="步骤1" />
+    <Step title="步骤2" />
+    <Step title="步骤3" />
+  </Steps>
+</template>
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### value 从 1 开始而非 0
 > **错误用法**: `const current = ref(1); // 期望第一步

package/docs_for_llm/switch.doc.md

@@ -30,8 +30,21 @@ import { Switch } from '@king-design/vue';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| on | 扩展开启时的文案 | `undefined` | - |
-| off | 扩展关闭时的文案 | `undefined` | - |
+| on | 扩展开启时的文案 | `#on` | `<Switch>
+  <template #on>自定义on内容</template>
+</Switch>` |
+| off | 扩展关闭时的文案 | `#off` | `<Switch>
+  <template #off>自定义off内容</template>
+</Switch>` |
+
+### 插槽参数说明
+**on**
+
+- 参数结构: 无参数
+
+**off**
+
+- 参数结构: 无参数
 
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 在 Vue 中使用保留字 Switch

package/docs_for_llm/table.doc.md

@@ -168,6 +168,25 @@ const handlePage = (pageInfo: {value: number, limit: number}) => {
   </template>
 </Table>` |
 
+### 插槽参数说明
+**empty**
+
+- 参数结构: 无参数
+
+**expand**
+
+- 参数结构: #expand="[row, index]"
+- 参数列表: `row: T`、`index: number`
+
+**footer**
+
+- 参数结构: 无参数
+
+**tooltip**
+
+- 参数结构: #tooltip="[data, index]"
+- 参数列表: `data: T`、`index: number`
+
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -186,12 +205,22 @@ const handlePage = (pageInfo: {value: number, limit: number}) => {
 | --- | --- | --- | --- | --- |
 | index | `number` | 是 | - | 行索引 |
 
+调用示例:
+```typescript
+await tableRef.value?.scrollToRowByIndex(10);
+```
+
 **scrollToRowByKey**
 
 | 参数 | 类型 | 必填 | 默认值 | 说明 |
 | --- | --- | --- | --- | --- |
 | key | `TableRowKey` | 是 | - | 行key |
 
+调用示例:
+```typescript
+await tableRef.value?.scrollToRowByKey('row-id-123');
+```
+
 **exportTable**
 
 | 参数 | 类型 | 必填 | 默认值 | 说明 |
@@ -199,10 +228,60 @@ const handlePage = (pageInfo: {value: number, limit: number}) => {
 | data | `T[]` | 否 | `this.data` | 要导出的数据 |
 | filename | `string` | 否 | `"table"` | 导出文件名 |
 
+调用示例:
+```typescript
+const content = await tableRef.value?.exportTable(data.value, 'users');
+```
+
+### 方法调用示例
+**getCheckedData**
+
+```typescript
+const tableRef = ref<InstanceType<typeof Table>>();
+const checkedData = tableRef.value?.getCheckedData();</InstanceType>
+```
+
+**getSelectedData**
+
+```typescript
+const selectedData = tableRef.value?.getSelectedData();
+```
+
+**checkAll**
+
+```typescript
+tableRef.value?.checkAll();
+```
+
+**uncheckAll**
+
+```typescript
+tableRef.value?.uncheckAll();
+```
+
+**scrollToRowByIndex**
+
+```typescript
+await tableRef.value?.scrollToRowByIndex(10);
+```
+
+**scrollToRowByKey**
+
+```typescript
+await tableRef.value?.scrollToRowByKey('row-id-123');
+```
+
+**exportTable**
+
+```typescript
+const content = await tableRef.value?.exportTable(data.value, 'users');
+```
+
 ## 子组件 (Sub-Components)
 ### TableColumn
 表格列定义
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | key | `string` | 指定当前列的key，必须指定 | `<TableColumn key="name" title="姓名" />` |
@@ -222,10 +301,126 @@ const handlePage = (pageInfo: {value: number, limit: number}) => {
 | hidden | `boolean` | 是否隐藏当前列，仅为不可见，不影响exportTable导出表格 | - |
 | ellipsis | `boolean` | 是否开启超长省略 | `<TableColumn key="desc" title="描述" ellipsis />` |
 
-**插槽**:
-- `#title`: 自定义复杂表头内容
-- `#template="[data, index]"`: 自定义单元格内容
-- `#default="[data, index]"`: 与template扩展点等价，为了方便vue中使用的别名
+#### 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| title | 自定义复杂表头内容 | `#title` | `<TableColumn key="custom">
+  <template #title>自定义表头</template>
+</TableColumn>` |
+| template | 自定义单元格内容 | `#template="[data, index]"` | `<TableColumn key="action" title="操作">
+  <template #template="[data]">
+    <Button @click="handleEdit(data)">编辑</Button>
+  </template>
+</TableColumn>` |
+| default | 与template扩展点等价，为了方便vue中使用的别名 | `#default="[data, index]"` | `<TableColumn key="action" title="操作">
+  <template #default="[data]">
+    <Button @click="handleEdit(data)">编辑</Button>
+  </template>
+</TableColumn>` |
+
+##### 插槽参数说明
+**title**
+
+- 参数结构: 无参数
+
+**template**
+
+- 参数结构: #template="[data, index]"
+- 参数列表: `data: T`、`index: number`
+
+**default**
+
+- 参数结构: #default="[data, index]"
+- 参数列表: `data: T`、`index: number`
+
+#### 组合示例
+##### 自定义单元格
+**场景**: 创建带有状态标签和操作按钮的表格
+
+使用插槽自定义单元格内容
+
+**命中的子组件 API**: 属性: key, title | 插槽: default
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Table, TableColumn, Button, Tag } from '@king-design/vue';
+
+const data = ref([
+  { name: '张三', status: 'active' },
+  { name: '李四', status: 'inactive' }
+]);
+</script>
+<template>
+  <Table :data="data">
+    <TableColumn key="name" title="姓名" />
+    <TableColumn key="status" title="状态">
+      <template #default="[row]">
+        <Tag :type="row.status === 'active' ? 'success' : 'warning'">
+          {{ row.status === 'active' ? '激活' : '未激活' }}
+        </Tag>
+      </template>
+    </TableColumn>
+    <TableColumn key="action" title="操作">
+      <template #default="[row]">
+        <Button type="primary" size="small">编辑</Button>
+      </template>
+    </TableColumn>
+  </Table>
+</template>
+```
+
+##### 基础表格
+**场景**: 创建一个简单的表格展示用户信息
+
+展示基本的表格用法
+
+**命中的子组件 API**: 属性: key, title
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Table, TableColumn } from '@king-design/vue';
+
+const data = ref([
+  { name: '张三', age: 25, address: '北京' },
+  { name: '李四', age: 30, address: '上海' }
+]);
+</script>
+<template>
+  <Table :data="data">
+    <TableColumn key="name" title="姓名" />
+    <TableColumn key="age" title="年龄" />
+    <TableColumn key="address" title="地址" />
+  </Table>
+</template>
+```
+
+##### 可选择表格
+**场景**: 创建一个可多选的表格，支持获取选中行
+
+支持行选择的表格
+
+**命中的子组件 API**: 属性: key, title
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Table, TableColumn } from '@king-design/vue';
+
+const data = ref([
+  { id: 1, name: '张三' },
+  { id: 2, name: '李四' }
+]);
+const checkedKeys = ref<number[]>([]);
+</script>
+<template>
+  <Table :data="data" checkType="checkbox" v-model:checkedKeys="checkedKeys" :rowKey="row => row.id">
+    <TableColumn key="name" title="姓名" />
+  </Table>
+  <p>选中: {{ checkedKeys }}</p>
+</template>
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### TableColumn 作用域插槽参数解构方式错误

package/docs_for_llm/tabs.doc.md

@@ -45,6 +45,7 @@ const handleRemove = (value: string) => {
 ### Tab
 选项卡项组件
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | value | `any` | 选项卡的值，用于标识和选中 | `<Tab value="home">首页</Tab>` |
@@ -52,8 +53,103 @@ const handleRemove = (value: string) => {
 | to | `string` | 点击标签的跳转地址 | `<Tab value="home" to="/home">首页</Tab>` |
 | closable | `boolean` | 是否展示该选项卡的关闭按钮 | `<Tab value="tab" closable>可关闭</Tab>` |
 
-**事件**:
-- `@click`: Tab 点击事件，发生在 value 改变之后，disabled 状态不触发
+#### 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| click | `@click` | Tab 点击事件，发生在 value 改变之后，disabled 状态不触发 | `e: MouseEvent` | `<Tab @click="handleTabClick"></Tab>` |
+
+##### Tab 事件参数说明
+**click**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| e | `MouseEvent` | 是 | - | 原生鼠标事件 |
+
+事件处理示例:
+```typescript
+const openInNewWindow = ref(false);
+
+const handleTabClick = (e: MouseEvent) => {
+  openInNewWindow.value = e.metaKey || e.ctrlKey;
+};
+```
+
+#### 组合示例
+##### 禁用选项卡
+**场景**: 禁用某个选项卡
+
+禁用某个选项卡
+
+**命中的子组件 API**: 属性: value, disabled
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tabs, Tab } from '@king-design/vue';
+
+const activeTab = ref('tab1');
+</script>
+<template>
+  <Tabs v-model="activeTab">
+    <Tab value="tab1">可用</Tab>
+    <Tab value="tab2" disabled>禁用</Tab>
+    <Tab value="tab3">可用</Tab>
+  </Tabs>
+</template>
+```
+
+##### 路由导航
+**场景**: 使用 to 属性进行路由导航
+
+配合路由使用的选项卡
+
+**命中的子组件 API**: 属性: value, to
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tabs, Tab } from '@king-design/vue';
+
+const activeTab = ref('home');
+</script>
+<template>
+  <Tabs v-model="activeTab">
+    <Tab value="home" to="/">首页</Tab>
+    <Tab value="products" to="/products">产品</Tab>
+    <Tab value="docs" to="/docs">文档</Tab>
+  </Tabs>
+</template>
+```
+
+##### 可关闭选项卡
+**场景**: 创建可关闭的选项卡
+
+支持关闭选项卡
+
+**命中的子组件 API**: 属性: value, closable
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tabs, Tab } from '@king-design/vue';
+
+const activeTab = ref('tab1');
+const tabs = ref(['tab1', 'tab2', 'tab3']);
+
+const handleRemove = (value: string) => {
+  const index = tabs.value.indexOf(value);
+  tabs.value.splice(index, 1);
+  if (activeTab.value === value && tabs.value.length > 0) {
+    activeTab.value = tabs.value[0];
+  }
+};
+</script>
+<template>
+  <Tabs v-model="activeTab" closable @remove="handleRemove">
+    <Tab v-for="tab in tabs" :key="tab" :value="tab">{{ tab }}</Tab>
+  </Tabs>
+</template>
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 期望 Tabs 自动切换内容

package/docs_for_llm/tag.doc.md

@@ -44,6 +44,7 @@ const handleClose = (e: MouseEvent) => {
 ### Tags
 标签组容器，用于管理多个标签，支持单行展示和拖拽排序
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | size | `"large" | "default" | "small" | "mini"` | 定义"更多"标签尺寸 | `<Tags size="small"></Tags>` |
@@ -51,12 +52,154 @@ const handleClose = (e: MouseEvent) => {
 | nowrap | `boolean` | 是否单行展示标签组，超出的部分会隐藏，仅展示隐藏数量 | `<Tags nowrap></Tags>` |
 | draggable | `boolean` | 标签是否支持拖动排序 | `<Tags draggable></Tags>` |
 
-**事件**:
-- `@dragstart`: 拖动开始时触发
-- `@dragend`: 拖动结束时触发
+#### 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| dragstart | `@dragstart` | 拖动开始时触发 | `key: string | number, from: number` | `<Tags draggable @dragstart="handleTagDragStart"></Tags>` |
+| dragend | `@dragend` | 拖动结束时触发 | `key: string | number, from: number, to: number` | `<Tags draggable @dragend="handleTagDragEnd"></Tags>` |
+
+##### Tags 事件参数说明
+**dragstart**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| key | `string | number` | 是 | - | 被拖拽标签的 key |
+| from | `number` | 是 | - | 起始位置索引 |
+
+事件处理示例:
+```typescript
+const draggingTagKey = ref<string | number | null>(null);
+
+const handleTagDragStart = ({ key }) => {
+  draggingTagKey.value = key;
+};
+```
+
+**dragend**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| key | `string | number` | 是 | - | 被拖拽标签的 key |
+| from | `number` | 是 | - | 起始位置索引 |
+| to | `number` | 是 | - | 目标位置索引 |
+
+事件处理示例:
+```typescript
+const tags = ref(['稳定版', '灰度中', '待发布']);
+const draggingTagKey = ref<string | number | null>(null);
+
+const handleTagDragEnd = ({ from, to }) => {
+  const moved = tags.value.splice(from, 1)[0];
+  tags.value.splice(to, 0, moved);
+  draggingTagKey.value = null;
+};
+```
+
+#### 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| append | 追加到后面的元素，不参与到Tags对Tag的管理中 | `#append` | `<Tags>
+  <Tag closable>标签一</Tag>
+  <template #append>
+    <Button type="link">新增标签</Button>
+  </template>
+</Tags>` |
+
+##### 插槽参数说明
+**append**
+
+- 参数结构: 无参数
+
+#### 组合示例
+##### 可拖拽排序
+**场景**: 创建支持拖拽排序的标签组
+
+支持拖拽排序的标签组
+
+**命中的子组件 API**: 属性: draggable | 事件: dragend
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tags, Tag, Message } from '@king-design/vue';
+
+const tags = ref(['标签1', '标签2', '标签3', '标签4']);
+
+const handleDragEnd = ({from, to}: {from: number; to: number}) => {
+  const tag = tags.value.splice(from, 1)[0];
+  tags.value.splice(to, 0, tag);
+  Message.success(`从 ${from} 移动到 ${to}`);
+};
+</script>
+<template>
+  <Tags draggable @dragend="handleDragEnd">
+    <Tag v-for="tag in tags" :key="tag">{{ tag }}</Tag>
+  </Tags>
+</template>
+```
+
+##### 单行标签组
+**场景**: 在有限空间内展示标签，超出部分显示数量
+
+超出隐藏并显示隐藏数量
 
-**插槽**:
-- `undefined`: 追加到后面的元素，不参与到Tags对Tag的管理中
+**命中的子组件 API**: 属性: nowrap
+
+```vue
+<script setup lang="ts">
+import { Tags, Tag } from '@king-design/vue';
+</script>
+<template>
+  <div style="width: 300px;">
+    <Tags nowrap>
+      <Tag>标签1</Tag>
+      <Tag>标签2</Tag>
+      <Tag>标签3</Tag>
+      <Tag>标签4</Tag>
+      <Tag>标签5</Tag>
+      <Tag>标签6</Tag>
+    </Tags>
+  </div>
+</template>
+```
+
+##### 动态编辑标签
+**场景**: 动态添加和删除标签的完整示例
+
+动态添加和删除标签
+
+**命中的子组件 API**: 插槽: append
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tags, Tag, Button, Input } from '@king-design/vue';
+
+const tags = ref(['标签1', '标签2']);
+const inputValue = ref('');
+
+const handleClose = (index: number) => {
+  tags.value.splice(index, 1);
+};
+
+const handleAdd = () => {
+  if (inputValue.value) {
+    tags.value.push(inputValue.value);
+    inputValue.value = '';
+  }
+};
+</script>
+<template>
+  <Tags>
+    <Tag v-for="(tag, index) in tags" :key="tag" 
+      closable @close="handleClose(index)">{{ tag }}</Tag>
+    <template #append>
+      <Input v-model="inputValue" :width="100" size="mini" 
+        placeholder="新标签" @keydown.enter="handleAdd" />
+    </template>
+  </Tags>
+</template>
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 可关闭标签未使用受控模式