king-design-analyzer 2.1.9 → 2.2.1

package/docs_for_llm/tabs.doc.md

@@ -12,22 +12,28 @@ import { Tabs, Tab } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| value | `any` | `undefined` | 否 | 被选中的选项卡，可用 v-model 双向绑定 | `<Tabs v-model="activeTab"></Tabs>` |
-| type | `"default" | "card" | "flat-card"` | `"default"` | 否 | 选项卡类型 | `<Tabs type="card"></Tabs>` |
-| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 选项卡尺寸 | `<Tabs size="small"></Tabs>` |
-| vertical | `boolean` | `undefined` | 否 | 是否垂直排列 | `<Tabs vertical></Tabs>` |
-| closable | `boolean` | `false` | 否 | 是否展示选项卡关闭按钮 | `<Tabs closable @remove="handleRemove"></Tabs>` |
-| beforeChange | `(value: any) => boolean | Promise<boolean>` | `undefined` | 否 | 切换选项卡之前的拦截函数，返回 false 阻止切换，支持异步 | `<Tabs :beforeChange="handleBeforeChange"></Tabs>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `any` | `undefined` | 否 | 被选中的选项卡，可用 v-model 双向绑定 | - | `<Tabs v-model="activeTab"></Tabs>` |
+| type | `"default" | "card" | "flat-card"` | `"default"` | 否 | 选项卡类型 | - | `<Tabs type="card"></Tabs>` |
+| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 选项卡尺寸 | - | `<Tabs size="small"></Tabs>` |
+| vertical | `boolean` | `undefined` | 否 | 是否垂直排列 | - | `<Tabs vertical></Tabs>` |
+| closable | `boolean` | `false` | 否 | 是否展示选项卡关闭按钮 | - | `<Tabs closable @remove="handleRemove"></Tabs>` |
+| beforeChange | `(value: any) => boolean | Promise<boolean>` | `undefined` | 否 | 切换选项卡之前的拦截函数，返回 false 阻止切换，支持异步 | - | `<Tabs :beforeChange="handleBeforeChange"></Tabs>` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
 | remove | `@remove` | 关闭选项卡时触发 | `value: any` | `<Tabs @remove="handleRemove"></Tabs>` |
 
-### 事件处理函数示例
-**remove**:
+### 事件参数说明
+**remove**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `any` | 是 | - | 被关闭选项卡的 value |
+
+事件处理示例:
 ```typescript
 const handleRemove = (value: string) => {
   const index = tabs.value.indexOf(value);
@@ -39,6 +45,7 @@ const handleRemove = (value: string) => {
 ### Tab
 选项卡项组件
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | value | `any` | 选项卡的值，用于标识和选中 | `<Tab value="home">首页</Tab>` |
@@ -46,10 +53,106 @@ 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 自动切换内容
 > **错误用法**: `<Tabs v-model="activeTab">
   <Tab value="home">首页内容</Tab> <!-- 期望显示内容 -->
 </Tabs>`
@@ -59,10 +162,12 @@ const handleRemove = (value: string) => {
 <div v-if="activeTab === 'home'">首页内容</div>`
 > **说明**: Tabs 仅提供头部样式，内容区域需要使用 v-if 自行切换
 
+### Tab 未设置 value
 > **错误用法**: `<Tab>选项卡</Tab>`
 > **正确写法**: `<Tab value="tab1">选项卡</Tab>`
 > **说明**: 每个 Tab 必须设置 value 用于标识
 
+### 使用 closable 但未处理 remove 事件
 > **错误用法**: `<Tabs closable> <!-- 点击关闭不会真正移除 -->`
 > **正确写法**: `<Tabs closable @remove="handleRemove">`
 > **说明**: closable 只显示关闭按钮，需要监听 remove 事件手动移除选项卡

package/docs_for_llm/tag.doc.md

@@ -12,22 +12,28 @@ import { Tag, Tags } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| type | `"default" | "primary" | "success" | "warning" | "danger"` | `"default"` | 否 | 组件类型，决定标签的视觉样式 | `<Tag type="primary">主要标签</Tag>` |
-| closable | `boolean` | `false` | 否 | 是否可关闭，显示关闭按钮 | `<Tag closable @close="handleClose">可关闭标签</Tag>` |
-| closed | `boolean` | `false` | 否 | 是否已关闭（受控模式） | `<Tag closable :closed="isClosed" @close="handleClose">标签</Tag>` |
-| disabled | `boolean` | `false` | 否 | 是否展示禁用状态 | `<Tag disabled>禁用标签</Tag>` |
-| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 组件尺寸 | `<Tag size="small">小标签</Tag>` |
-| border | `"solid" | "dashed" | "none"` | `"none"` | 否 | 定义边框样式 | `<Tag border="solid">带边框标签</Tag>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| type | `"default" | "primary" | "success" | "warning" | "danger"` | `"default"` | 否 | 组件类型，决定标签的视觉样式 | - | `<Tag type="primary">主要标签</Tag>` |
+| closable | `boolean` | `false` | 否 | 是否可关闭，显示关闭按钮 | - | `<Tag closable @close="handleClose">可关闭标签</Tag>` |
+| closed | `boolean` | `false` | 否 | 是否已关闭（受控模式） | - | `<Tag closable :closed="isClosed" @close="handleClose">标签</Tag>` |
+| disabled | `boolean` | `false` | 否 | 是否展示禁用状态 | - | `<Tag disabled>禁用标签</Tag>` |
+| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 组件尺寸 | - | `<Tag size="small">小标签</Tag>` |
+| border | `"solid" | "dashed" | "none"` | `"none"` | 否 | 定义边框样式 | - | `<Tag border="solid">带边框标签</Tag>` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
 | close | `@close` | 标签关闭事件，点击关闭按钮时触发 | `e: MouseEvent` | `<Tag closable @close="handleClose">可关闭</Tag>` |
 
-### 事件处理函数示例
-**close**:
+### 事件参数说明
+**close**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| e | `MouseEvent` | 是 | - | 原生鼠标事件对象 |
+
+事件处理示例:
 ```typescript
 const handleClose = (e: MouseEvent) => {
   console.log('标签已关闭');
@@ -38,6 +44,7 @@ const handleClose = (e: MouseEvent) => {
 ### Tags
 标签组容器，用于管理多个标签，支持单行展示和拖拽排序
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | size | `"large" | "default" | "small" | "mini"` | 定义"更多"标签尺寸 | `<Tags size="small"></Tags>` |
@@ -45,22 +52,167 @@ 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>
+```
+
+##### 单行标签组
+**场景**: 在有限空间内展示标签，超出部分显示数量
+
+超出隐藏并显示隐藏数量
+
+**命中的子组件 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);
+};
 
-**插槽**:
-- `undefined`: 追加到后面的元素，不参与到Tags对Tag的管理中
+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)
+### 可关闭标签未使用受控模式
 > **错误用法**: `<Tag closable>标签</Tag>`
 > **正确写法**: `<Tag closable :closed="isClosed" @close="handleClose">标签</Tag>`
 > **说明**: closable 只显示关闭按钮，需要配合 closed 属性和 @close 事件来控制关闭行为
 
+### 使用不存在的 type 值
 > **错误用法**: `<Tag type="info">信息标签</Tag>`
 > **正确写法**: `<Tag type="primary">主要标签</Tag>`
 > **说明**: Tag 的 type 只支持 default, primary, success, warning, danger，不存在 info 值
 
+### 拖拽标签组未设置 key
 > **错误用法**: `<Tags draggable>
   <Tag v-for="tag in tags">{{ tag }}</Tag>
 </Tags>`

package/docs_for_llm/timeline.doc.md

@@ -0,0 +1,187 @@
+# 时间轴 (Timeline)
+
+时间轴组件，用于按时间顺序展示事件或流程记录。配合 TimelineItem 子组件使用，支持不同状态类型和自定义节点。
+
+**关键词**: timeline, 时间轴, 操作记录, 流程日志, TimelineItem, dot
+
+**使用场景**: 操作日志、订单轨迹、发布流程、任务执行记录
+
+## 导入语句
+```typescript
+import { Timeline, TimelineItem } from '@king-design/vue';
+```
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 时间轴内容，通常由多个 TimelineItem 组成。 | `<Timeline>...</Timeline>` | `<Timeline><TimelineItem>创建完成</TimelineItem><TimelineItem>审核通过</TimelineItem></Timeline>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+## 子组件 (Sub-Components)
+### TimelineItem
+时间轴节点项。
+
+#### 属性 (Props)
+| 属性名 | 类型 | 说明 | 示例 |
+| --- | --- | --- | --- |
+| type | `"primary" | "warning" | "danger" | "success"` | 节点状态类型。 | `<TimelineItem type="success">发布成功</TimelineItem>` |
+| size | `"large" | "default" | "small" | "mini"` | 节点尺寸。 | `<TimelineItem size="small">日志记录</TimelineItem>` |
+
+#### 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| dot | 自定义时间轴节点圆点。 | `<template #dot>...</template>` | `<TimelineItem><template #dot><Icon class="k-icon-check" /></template>发布完成</TimelineItem>` |
+
+##### 插槽参数说明
+**dot**
+
+- 参数结构: 无参数
+
+#### 组合示例
+##### 自定义节点
+**场景**: 用图标增强时间轴状态表达
+
+通过 dot 插槽渲染图标或编号。
+
+**命中的子组件 API**: 属性: type | 插槽: dot
+
+```vue
+<script setup lang="ts">
+import { Icon, Timeline, TimelineItem } from '@king-design/vue';
+</script>
+<template>
+  <Timeline>
+    <TimelineItem>
+      <template #dot>
+        <Icon class="k-icon-play-circle" />
+      </template>
+      服务启动
+    </TimelineItem>
+    <TimelineItem type="success">
+      <template #dot>
+        <Icon class="k-icon-check" />
+      </template>
+      健康检查通过
+    </TimelineItem>
+  </Timeline>
+</template>
+```
+
+##### 不同状态节点
+**场景**: 用时间轴展示状态变更
+
+用颜色区分不同阶段。
+
+**命中的子组件 API**: 属性: type
+
+```vue
+<template>
+  <Timeline>
+    <TimelineItem type="primary">等待执行</TimelineItem>
+    <TimelineItem type="warning">处理中</TimelineItem>
+    <TimelineItem type="danger">执行失败</TimelineItem>
+    <TimelineItem type="success">重新执行成功</TimelineItem>
+  </Timeline>
+</template>
+```
+
+##### 基础用法
+**场景**: 展示任务处理过程
+
+按时间顺序展示操作记录。
+
+**命中的子组件 API**: 属性: type
+
+```vue
+<template>
+  <Timeline>
+    <TimelineItem>2026-04-20 10:00 创建任务</TimelineItem>
+    <TimelineItem>2026-04-20 10:10 分配负责人</TimelineItem>
+    <TimelineItem type="success">2026-04-20 10:30 处理完成</TimelineItem>
+  </Timeline>
+</template>
+```
+
+## 常见错误与正确用法 (Anti-Hallucination)
+### 在 Timeline 中直接写普通 div，而不是 TimelineItem
+> **错误用法**: `<Timeline><div>创建成功</div><div>发布完成</div></Timeline>`
+> **正确写法**: `<Timeline><TimelineItem>创建成功</TimelineItem><TimelineItem>发布完成</TimelineItem></Timeline>`
+> **说明**: Timeline 负责整体容器结构，具体节点应使用 TimelineItem 渲染，才能获得连线、圆点和状态样式。
+
+### 把 dot 插槽写在 Timeline 上
+> **错误用法**: `<Timeline><template #dot>1</template></Timeline>`
+> **正确写法**: `<Timeline><TimelineItem><template #dot>1</template>步骤一</TimelineItem></Timeline>`
+> **说明**: dot 是 TimelineItem 的插槽，不属于 Timeline 容器本身。
+
+## 使用示例
+### 基础用法
+**场景**: 展示任务处理过程
+
+按时间顺序展示操作记录。
+
+**使用的 API**: 属性: type | 插槽: default
+
+```vue
+<template>
+  <Timeline>
+    <TimelineItem>2026-04-20 10:00 创建任务</TimelineItem>
+    <TimelineItem>2026-04-20 10:10 分配负责人</TimelineItem>
+    <TimelineItem type="success">2026-04-20 10:30 处理完成</TimelineItem>
+  </Timeline>
+</template>
+```
+
+### 不同状态节点
+**场景**: 用时间轴展示状态变更
+
+用颜色区分不同阶段。
+
+**使用的 API**: 属性: type | 插槽: default
+
+```vue
+<template>
+  <Timeline>
+    <TimelineItem type="primary">等待执行</TimelineItem>
+    <TimelineItem type="warning">处理中</TimelineItem>
+    <TimelineItem type="danger">执行失败</TimelineItem>
+    <TimelineItem type="success">重新执行成功</TimelineItem>
+  </Timeline>
+</template>
+```
+
+### 自定义节点
+**场景**: 用图标增强时间轴状态表达
+
+通过 dot 插槽渲染图标或编号。
+
+**使用的 API**: 属性: type | 插槽: dot
+
+```vue
+<script setup lang="ts">
+import { Icon, Timeline, TimelineItem } from '@king-design/vue';
+</script>
+<template>
+  <Timeline>
+    <TimelineItem>
+      <template #dot>
+        <Icon class="k-icon-play-circle" />
+      </template>
+      服务启动
+    </TimelineItem>
+    <TimelineItem type="success">
+      <template #dot>
+        <Icon class="k-icon-check" />
+      </template>
+      健康检查通过
+    </TimelineItem>
+  </Timeline>
+</template>
+```
+
+## 相关组件
+Steps, Tag, Icon
+