king-design-analyzer 2.1.9 → 2.2.0

package/docs_for_llm/sidebar.doc.md

@@ -0,0 +1,133 @@
+# 侧边导航 (Sidebar)
+
+用于控制台左侧导航的多层级菜单组件，支持路由联动、展开状态管理和默认选中逻辑。
+
+**关键词**: sidebar, navigation, menu tree, 侧边栏, 菜单导航, 多级菜单, 控制台导航, 左侧导航
+
+**使用场景**: 控制台左侧导航、多级菜单导航、资源中心侧边菜单、路由驱动的后台导航
+
+## 导入语句
+```typescript
+import { Sidebar } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| title | `string` | `undefined` | 否 | 侧边栏标题 | - | - |
+| selectedKey | `Key` | `undefined` | 否 | 当前选中的菜单 key | - | - |
+| expandedKeys | `Key[]` | `undefined` | 否 | 当前展开的菜单 key 列表 | - | - |
+| menus | `Menus` | `undefined` | 是 | 菜单配置树 | - | - |
+| router | `boolean` | `false` | 否 | 是否启用路由模式 | - | - |
+| autoSelectDefault | `boolean` | `true` | 否 | 未匹配到路由时是否自动选中默认菜单项 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| update:selectedKey | `@update:selectedKey` | 当前选中菜单 key 变化时触发，可用于同步路由或高亮状态。 | `value?: string` | - |
+| update:expandedKeys | `@update:expandedKeys` | 展开的菜单节点变化时触发，适合持久化用户展开习惯。 | `value?: string[]` | - |
+| update:menuItem | `@update:menuItem` | 当前选中的完整菜单项变化时触发，便于读取标题、路由等附加字段。 | `value?: SidebarMenuItem` | - |
+| change:menus | `@change:menus` | 菜单结构变化时触发，适合动态菜单加载后重新同步状态。 | `value?: SidebarMenuItem[]` | - |
+
+### 事件参数说明
+**update:selectedKey**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string` | 否 | - | 当前选中的菜单 key。 |
+
+**update:expandedKeys**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string[]` | 否 | - | 当前处于展开状态的菜单 key 列表。 |
+
+**update:menuItem**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `SidebarMenuItem` | 否 | - | 当前命中的菜单项对象，包含标题、路由参数和 children 等扩展字段。 |
+
+**change:menus**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `SidebarMenuItem[]` | 否 | - | 当前可渲染的菜单树数组，常用于动态菜单加载后做缓存或二次处理。 |
+
+## 使用示例
+### 控制台侧边导航
+**场景**: 在控制台左侧展示资源管理导航。
+
+渲染一个带二级菜单的控制台导航树。
+
+**使用的 API**: 属性: title, selectedKey, expandedKeys, menus | 事件: update:selectedKey, update:expandedKeys
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Sidebar } from '@ksyun-internal/versatile';
+
+const selectedKey = ref('instances');
+const expandedKeys = ref(['compute']);
+const menus = [
+  {
+    key: 'compute',
+    label: '计算',
+    children: [
+      { key: 'instances', label: '实例列表' },
+      { key: 'images', label: '镜像' },
+    ],
+  },
+];
+</script>
+
+<template>
+  <Sidebar
+    title="云服务器"
+    v-model:selected-key="selectedKey"
+    v-model:expanded-keys="expandedKeys"
+    :menus="menus"
+  />
+</template>
+```
+
+### 路由模式侧边导航
+**场景**: 在多级控制台中让菜单选中状态与 URL 同步。
+
+在路由驱动的控制台中让侧边栏自动和当前页面同步。
+
+**使用的 API**: 属性: selectedKey, expandedKeys, menus, router, autoSelectDefault | 事件: update:selectedKey, update:expandedKeys
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Sidebar } from '@ksyun-internal/versatile';
+
+const selectedKey = ref('dashboard');
+const expandedKeys = ref(['overview']);
+const menus = [
+  {
+    key: 'overview',
+    label: '概览',
+    children: [
+      { key: 'dashboard', label: '仪表盘' },
+      { key: 'alerts', label: '告警中心' },
+    ],
+  },
+];
+</script>
+
+<template>
+  <Sidebar
+    v-model:selected-key="selectedKey"
+    v-model:expanded-keys="expandedKeys"
+    :menus="menus"
+    :router="true"
+    :auto-select-default="false"
+  />
+</template>
+```
+
+## 相关组件
+Header, LayoutContent
+

package/docs_for_llm/skeleton.doc.md

@@ -0,0 +1,117 @@
+# 骨架屏 (Skeleton)
+
+骨架屏组件，用于在内容加载阶段展示占位结构，减轻页面空白感。支持内置文本行、头像骨架和自定义骨架项。
+
+**关键词**: skeleton, 骨架屏, loading, 占位, avator, SkeletonItem
+
+**使用场景**: 列表加载占位、详情页内容预加载、卡片骨架、表单异步初始化
+
+## 导入语句
+```typescript
+import { Skeleton, SkeletonItem } from '@king-design/vue';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| loading | `boolean` | `undefined` | 是 | 是否处于加载中。为 true 时显示骨架内容，否则渲染为空或交由外层控制真实内容展示。 | - | `<Skeleton :loading="loading" />` |
+| animated | `boolean` | `false` | 否 | 是否启用骨架闪动动画。 | - | `<Skeleton :loading="loading" animated />` |
+| rows | `number` | `2` | 否 | 文本骨架行数，最小按 1 处理。 | - | `<Skeleton :loading="loading" :rows="4" />` |
+| avator | `boolean` | `false` | 否 | 是否展示头像占位。注意组件属性名为 avator，与常见 avatar 拼写不同。 | - | `<Skeleton :loading="loading" avator />` |
+| size | `string` | `"large"` | 否 | 骨架尺寸，影响占位块的高度与间距。 | - | `<Skeleton :loading="loading" size="small" />` |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 自定义骨架内容。当 loading 为 true 时，默认插槽内容会作为骨架结构渲染。 | `<Skeleton :loading="loading">...</Skeleton>` | `<Skeleton :loading="loading"><div style="display:flex; gap:12px;"><SkeletonItem type="avator" /><div style="flex:1;"><SkeletonItem type="text" /><SkeletonItem type="text" /></div></div></Skeleton>` |
+
+## 子组件 (Sub-Components)
+### SkeletonItem
+单个骨架项组件，用于组合更复杂的骨架布局。
+
+| 属性名 | 类型 | 说明 | 示例 |
+| --- | --- | --- | --- |
+| type | `"text" | "avator" | "image" | "button" | "input"` | 骨架项类型。 | `<SkeletonItem type="image" />` |
+
+## 常见错误与正确用法 (Anti-Hallucination)
+### 误以为 Skeleton 会自动在 loading=false 时渲染真实内容
+> **错误用法**: `<Skeleton :loading="loading"><RealContent /></Skeleton>`
+> **正确写法**: `<Skeleton :loading="loading"><SkeletonItem type="text" /></Skeleton>
+<RealContent v-if="!loading" />`
+> **说明**: 当前 Skeleton 在 loading 为 true 时负责渲染骨架结构，真实内容建议由外层通过条件渲染控制。
+
+### 把 avator 错写成 avatar
+> **错误用法**: `<Skeleton :loading="loading" avatar />`
+> **正确写法**: `<Skeleton :loading="loading" avator />`
+> **说明**: 该组件实际属性名是 avator，需按源码字段使用，否则不会展示头像骨架。
+
+## 使用示例
+### 基础用法
+**场景**: 列表请求中展示文本占位
+
+展示默认文本骨架。
+
+**使用的 API**: 属性: loading, rows, animated
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Skeleton } from '@king-design/vue';
+
+const loading = ref(true);
+</script>
+<template>
+  <Skeleton :loading="loading" :rows="3" animated />
+</template>
+```
+
+### 带头像骨架
+**场景**: 个人信息卡片加载态
+
+适合用户卡片、评论列表等结构。
+
+**使用的 API**: 属性: loading, avator, rows
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Skeleton } from '@king-design/vue';
+
+const loading = ref(true);
+</script>
+<template>
+  <Skeleton :loading="loading" avator :rows="2" />
+</template>
+```
+
+### 自定义骨架布局
+**场景**: 自定义复杂卡片骨架
+
+通过 SkeletonItem 自定义表单或卡片骨架。
+
+**使用的 API**: 属性: loading | 插槽: default
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Skeleton, SkeletonItem } from '@king-design/vue';
+
+const loading = ref(true);
+</script>
+<template>
+  <Skeleton :loading="loading">
+    <div style="display: flex; gap: 12px; align-items: flex-start;">
+      <SkeletonItem type="image" />
+      <div style="flex: 1; display: grid; gap: 8px;">
+        <SkeletonItem type="text" />
+        <SkeletonItem type="input" />
+        <SkeletonItem type="button" />
+      </div>
+    </div>
+  </Skeleton>
+</template>
+```
+
+## 相关组件
+Spin, Card, Image
+

package/docs_for_llm/slider.doc.md

@@ -12,33 +12,40 @@ import { Slider } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| value | `number | [number, number]` | `0` | 否 | 当前值，可用 v-model 双向绑定。范围选择时为 [number, number] 数组 | `<Slider v-model="value" />` |
-| min | `number` | `0` | 否 | 最小值 | `<Slider :min="0" />` |
-| max | `number` | `100` | 否 | 最大值 | `<Slider :max="200" />` |
-| range | `boolean` | `false` | 否 | 是否是范围选择（双滑块） | `<Slider v-model="rangeValue" range />` |
-| step | `number | StepObject | StepFunction` | `1` | 否 | 步长，支持数字、对象配置或函数 | `<Slider :step="10" />` |
-| disabled | `boolean` | `false` | 否 | 是否禁用 | `<Slider disabled />` |
-| unit | `string` | `""` | 否 | 单位，用于刻度展示 | `<Slider unit="%" />` |
-| showEnd | `boolean` | `true` | 否 | 是否展示最小值和最大值刻度 | `<Slider :showEnd="false" />` |
-| showInput | `boolean` | `true` | 否 | 是否展示输入框 | `<Slider :showInput="false" />` |
-| showTooltip | `boolean` | `false` | 否 | 是否展示提示气泡 | `<Slider showTooltip />` |
-| always | `boolean` | `false` | 否 | 当展示气泡时，是否一直展示 | `<Slider showTooltip always />` |
-| points | `boolean | number[]` | `false` | 否 | 是否展示间隔点，或指定哪些值展示间隔点 | `<Slider :points="[25, 50, 75]" />` |
-| marks | `Marks` | `undefined` | 否 | 标注刻度，对象形式指定位置和标签 | `<Slider :marks="{0: '低', 50: '中', 100: '高'}" />` |
-| animate | `boolean` | `true` | 否 | 滑块移动是否使用缓动动画 | `<Slider :animate="false" />` |
-| forceStep | `boolean` | `true` | 否 | 是否限制 value（除边界外）满足 min + step * n | `<Slider :forceStep="false" />` |
-| tooltipProps | `TooltipProps` | `undefined` | 否 | 设置内置 Tooltip 的所有属性 | `<Slider showTooltip :tooltipProps="{position: 'bottom'}" />` |
-| spinnerProps | `SpinnerProps` | `undefined` | 否 | 设置内置 Spinner 输入框的所有属性 | `<Slider :spinnerProps="{precision: 2}" />` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `number | [number, number]` | `0` | 否 | 当前值，可用 v-model 双向绑定。范围选择时为 [number, number] 数组 | - | `<Slider v-model="value" />` |
+| min | `number` | `0` | 否 | 最小值 | - | `<Slider :min="0" />` |
+| max | `number` | `100` | 否 | 最大值 | - | `<Slider :max="200" />` |
+| range | `boolean` | `false` | 否 | 是否是范围选择（双滑块） | - | `<Slider v-model="rangeValue" range />` |
+| step | `number | StepObject | StepFunction` | `1` | 否 | 步长，支持数字、对象配置或函数 | - | `<Slider :step="10" />` |
+| disabled | `boolean` | `false` | 否 | 是否禁用 | - | `<Slider disabled />` |
+| unit | `string` | `""` | 否 | 单位，用于刻度展示 | - | `<Slider unit="%" />` |
+| showEnd | `boolean` | `true` | 否 | 是否展示最小值和最大值刻度 | - | `<Slider :showEnd="false" />` |
+| showInput | `boolean` | `true` | 否 | 是否展示输入框 | - | `<Slider :showInput="false" />` |
+| showTooltip | `boolean` | `false` | 否 | 是否展示提示气泡 | - | `<Slider showTooltip />` |
+| always | `boolean` | `false` | 否 | 当展示气泡时，是否一直展示 | - | `<Slider showTooltip always />` |
+| points | `boolean | number[]` | `false` | 否 | 是否展示间隔点，或指定哪些值展示间隔点 | - | `<Slider :points="[25, 50, 75]" />` |
+| marks | `Marks` | `undefined` | 否 | 标注刻度，对象形式指定位置和标签 | - | `<Slider :marks="{0: '低', 50: '中', 100: '高'}" />` |
+| animate | `boolean` | `true` | 否 | 滑块移动是否使用缓动动画 | - | `<Slider :animate="false" />` |
+| forceStep | `boolean` | `true` | 否 | 是否限制 value（除边界外）满足 min + step * n | - | `<Slider :forceStep="false" />` |
+| tooltipProps | `TooltipProps` | `undefined` | 否 | 设置内置 Tooltip 的所有属性 | - | `<Slider showTooltip :tooltipProps="{position: 'bottom'}" />` |
+| spinnerProps | `SpinnerProps` | `undefined` | 否 | 设置内置 Spinner 输入框的所有属性 | - | `<Slider :spinnerProps="{precision: 2}" />` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
 | change | `@change` | 当值变化时触发，拖动过程中不会触发，拖动结束时触发 | `newValue: number | [number, number], oldValue: number | [number, number]` | `<Slider @change="handleChange" />` |
 
-### 事件处理函数示例
-**change**:
+### 事件参数说明
+**change**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| newValue | `number | [number, number]` | 是 | - | 新的值 |
+| oldValue | `number | [number, number]` | 是 | - | 旧的值 |
+
+事件处理示例:
 ```typescript
 const handleChange = (newVal: number, oldVal: number) => {
   console.log(`值从 ${oldVal} 变为 ${newVal}`);
@@ -51,16 +58,19 @@ const handleChange = (newVal: number, oldVal: number) => {
 | tooltip | 当展示提示气泡，定义气泡的内容，和Tooltip组件行为一样，如果你传入空的内容，则不会展示气泡 | `undefined` | - |
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 范围选择时 value 类型错误
 > **错误用法**: `const value = ref(50);
 <Slider v-model="value" range />`
 > **正确写法**: `const value = ref<[number, number]>([20, 80]);
 <Slider v-model="value" range />`
 > **说明**: 当 range 为 true 时，value 必须是 [number, number] 数组
 
+### step 使用字符串而非数字
 > **错误用法**: `<Slider step="10" />`
 > **正确写法**: `<Slider :step="10" />`
 > **说明**: step 是数字类型，需要使用 v-bind 语法
 
+### marks 格式错误
 > **错误用法**: `const marks = ['低', '中', '高'];`
 > **正确写法**: `const marks = {
   0: '低',

package/docs_for_llm/spin.doc.md

@@ -12,11 +12,11 @@ import { Spin } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 组件尺寸 | `<Spin size="small" />` |
-| center | `boolean` | `false` | 否 | 是否居中展示，需要父元素为定位元素（position: relative/absolute） | `<Spin center />` |
-| overlay | `boolean` | `false` | 否 | 是否展示带遮罩层的加载动画，需要父元素为定位元素 | `<Spin overlay center />` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 组件尺寸 | - | `<Spin size="small" />` |
+| center | `boolean` | `false` | 否 | 是否居中展示，需要父元素为定位元素（position: relative/absolute） | - | `<Spin center />` |
+| overlay | `boolean` | `false` | 否 | 是否展示带遮罩层的加载动画，需要父元素为定位元素 | - | `<Spin overlay center />` |
 
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
@@ -24,6 +24,7 @@ import { Spin } from '@king-design/vue';
 | canvas | 自定义旋转的元素内容 | `undefined` | - |
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 使用 center 但父元素无定位
 > **错误用法**: `<div>
   <Spin center />
 </div>`
@@ -32,6 +33,7 @@ import { Spin } from '@king-design/vue';
 </div>`
 > **说明**: 使用 center 属性时，父元素必须设置 position: relative 或 absolute
 
+### 使用 overlay 但父元素无定位
 > **错误用法**: `<div>
   <Spin overlay />
   <p>内容</p>
@@ -42,6 +44,7 @@ import { Spin } from '@king-design/vue';
 </div>`
 > **说明**: 使用 overlay 时，父元素必须设置定位，且通常配合 center 使用
 
+### size 值拼写错误
 > **错误用法**: `<Spin size="xs" />`
 > **正确写法**: `<Spin size="mini" />`
 > **说明**: size 只支持 large, default, small, mini，不存在 xs 值

package/docs_for_llm/spinner.doc.md

@@ -12,30 +12,36 @@ import { Spinner } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| value | `number` | `0` | 否 | 组件的值，可用 v-model 进行双向绑定 | `<Spinner v-model="count" />` |
-| disabled | `boolean` | `false` | 否 | 是否禁用 | `<Spinner disabled />` |
-| max | `number` | `Number.POSITIVE_INFINITY` | 否 | 最大值 | `<Spinner :max="100" />` |
-| min | `number` | `Number.NEGATIVE_INFINITY` | 否 | 最小值 | `<Spinner :min="0" />` |
-| step | `number | StepObject | StepFunction` | `1` | 否 | 步长，支持数字、对象或函数形式的动态步长 | `<Spinner :step="5" />` |
-| size | `"default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | `<Spinner size="small" />` |
-| vertical | `boolean` | `false` | 否 | 控制按钮是否竖直排列 | `<Spinner vertical />` |
-| precision | `number` | `undefined` | 否 | 控制展示精度，该值必须为正整数或 0 | `<Spinner :precision="2" :step="0.1" />` |
-| formatter | `(value: number) => string` | `undefined` | 否 | 定义格式化展示值的函数 | `<Spinner :formatter="(val) => `${val}%`" :parser="(val) => parseFloat(val)" /></Spinner>` |
-| parser | `(value: string) => number` | `undefined` | 否 | 与 formatter 结合使用，定义解析格式化的值的函数 | `<Spinner :formatter="(val) => `${val}%`" :parser="(val) => parseFloat(val)" /></Spinner>` |
-| prefix | `string` | `undefined` | 否 | 定义展示的值的前缀，优先级低于 formatter | `<Spinner prefix="¥" />` |
-| suffix | `string` | `undefined` | 否 | 定义展示的值的后缀，优先级低于 formatter | `<Spinner suffix="元" />` |
-| width | `string | number` | `undefined` | 否 | 指定 Input 输入框的宽度 | `<Spinner :width="150" />` |
-| forceStep | `boolean` | `false` | 否 | value 值除了边界值，都必须满足 min + step * n（n 为整数） | `<Spinner :min="0" :step="5" forceStep />` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `number` | `0` | 否 | 组件的值，可用 v-model 进行双向绑定 | - | `<Spinner v-model="count" />` |
+| disabled | `boolean` | `false` | 否 | 是否禁用 | - | `<Spinner disabled />` |
+| max | `number` | `Number.POSITIVE_INFINITY` | 否 | 最大值 | - | `<Spinner :max="100" />` |
+| min | `number` | `Number.NEGATIVE_INFINITY` | 否 | 最小值 | - | `<Spinner :min="0" />` |
+| step | `number | StepObject | StepFunction` | `1` | 否 | 步长，支持数字、对象或函数形式的动态步长 | - | `<Spinner :step="5" />` |
+| size | `"default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | - | `<Spinner size="small" />` |
+| vertical | `boolean` | `false` | 否 | 控制按钮是否竖直排列 | - | `<Spinner vertical />` |
+| precision | `number` | `undefined` | 否 | 控制展示精度，该值必须为正整数或 0 | - | `<Spinner :precision="2" :step="0.1" />` |
+| formatter | `(value: number) => string` | `undefined` | 否 | 定义格式化展示值的函数 | - | `<Spinner :formatter="(val) => `${val}%`" :parser="(val) => parseFloat(val)" /></Spinner>` |
+| parser | `(value: string) => number` | `undefined` | 否 | 与 formatter 结合使用，定义解析格式化的值的函数 | - | `<Spinner :formatter="(val) => `${val}%`" :parser="(val) => parseFloat(val)" /></Spinner>` |
+| prefix | `string` | `undefined` | 否 | 定义展示的值的前缀，优先级低于 formatter | - | `<Spinner prefix="¥" />` |
+| suffix | `string` | `undefined` | 否 | 定义展示的值的后缀，优先级低于 formatter | - | `<Spinner suffix="元" />` |
+| width | `string | number` | `undefined` | 否 | 指定 Input 输入框的宽度 | - | `<Spinner :width="150" />` |
+| forceStep | `boolean` | `false` | 否 | value 值除了边界值，都必须满足 min + step * n（n 为整数） | - | `<Spinner :min="0" :step="5" forceStep />` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
 | change | `@change` | value 值变化时触发，仅在输入框 change 事件触发或点击加减按钮改变 value 时触发 | `value: number` | `<Spinner @change="handleChange" />` |
 
-### 事件处理函数示例
-**change**:
+### 事件参数说明
+**change**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `number` | 是 | - | 当前的数值 |
+
+事件处理示例:
 ```typescript
 const handleChange = (value: number) => {
   console.log('当前值:', value);
@@ -43,18 +49,22 @@ const handleChange = (value: number) => {
 ```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### precision 设置为负数
 > **错误用法**: `<Spinner :precision="-1" />`
 > **正确写法**: `<Spinner :precision="2" />`
 > **说明**: precision 必须为正整数或 0，负数无效
 
+### 使用不存在的 size 值 (Spinner)
 > **错误用法**: `<Spinner size="large" />`
 > **正确写法**: `<Spinner size="default" />`
 > **说明**: Spinner 的 size 只支持 default, small, mini。Spinner 组件目前不支持 large 尺寸。
 
+### 使用 formatter 但未提供 parser
 > **错误用法**: `<Spinner :formatter="(val) => `${val}%`" />`
 > **正确写法**: `<Spinner :formatter="(val) => `${val}%`" :parser="(val) => parseFloat(val)" />`
 > **说明**: 使用 formatter 格式化显示时，必须同时提供 parser 来解析用户输入
 
+### min 大于 max
 > **错误用法**: `<Spinner :min="100" :max="0" />`
 > **正确写法**: `<Spinner :min="0" :max="100" />`
 > **说明**: min 值必须小于或等于 max 值

package/docs_for_llm/split.doc.md

@@ -0,0 +1,157 @@
+# 分栏拖拽 (Split)
+
+可拖拽调整尺寸的分栏布局组件。支持横向和纵向两种模式，通过 `first`、`last` 命名插槽定义两侧内容。
+
+**关键词**: split, 分栏, 拖拽布局, 左右布局, 上下布局, resize
+
+**使用场景**: 侧边栏加主内容区、编辑器与预览区、日志面板、控制台双栏布局
+
+## 导入语句
+```typescript
+import { Split } from '@king-design/vue';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| mode | `"horizontal" | "vertical"` | `"horizontal"` | 否 | 分栏方向。 | - | `<Split mode="vertical">` |
+| firstSize | `string` | `"auto"` | 否 | 第一个面板尺寸，支持具体尺寸值或 auto。 | - | `<Split firstSize="240px">` |
+| lastSize | `string` | `"auto"` | 否 | 第二个面板尺寸，支持具体尺寸值或 auto。 | - | `<Split lastSize="320px">` |
+| min | `number | string` | `0` | 否 | 拖拽时允许的最小尺寸。 | - | `<Split firstSize="240px" :min="120" />` |
+| max | `number | string` | `"100%-6"` | 否 | 拖拽时允许的最大尺寸。 | - | `<Split firstSize="240px" max="60%" />` |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| moveStart | `@moveStart` | 开始拖拽时触发。 | `e: MouseEvent` | `<Split @moveStart="handleMoveStart">` |
+| moving | `@moving` | 拖拽过程中持续触发。 | `e: MouseEvent` | `<Split @moving="handleMoving">` |
+| moveEnd | `@moveEnd` | 拖拽结束时触发。 | `e: MouseEvent | undefined` | `<Split @moveEnd="handleMoveEnd">` |
+
+### 事件参数说明
+**moveStart**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| e | `MouseEvent` | 是 | - | 原生鼠标事件 |
+
+事件处理示例:
+```typescript
+const handleMoveStart = (e: MouseEvent) => {
+  console.log('开始拖拽');
+};
+```
+
+**moving**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| e | `MouseEvent` | 是 | - | 原生鼠标事件 |
+
+事件处理示例:
+```typescript
+const handleMoving = (e: MouseEvent) => {
+  console.log('拖拽中');
+};
+```
+
+**moveEnd**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| e | `MouseEvent | undefined` | 是 | - | 原生鼠标事件 |
+
+事件处理示例:
+```typescript
+const handleMoveEnd = (e?: MouseEvent) => {
+  console.log('拖拽结束');
+};
+```
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| first | 第一个面板内容。 | `<template #first>...</template>` | `<Split><template #first>左侧内容</template><template #last>右侧内容</template></Split>` |
+| last | 第二个面板内容。 | `<template #last>...</template>` | `<Split><template #first>左侧内容</template><template #last>右侧内容</template></Split>` |
+| drag | 自定义拖拽分割条内容。 | `<template #drag>...</template>` | `<Split><template #drag><div class="custom-handle" /></template></Split>` |
+
+## 常见错误与正确用法 (Anti-Hallucination)
+### 未使用 first 和 last 命名插槽
+> **错误用法**: `<Split>
+  <div>左侧</div>
+  <div>右侧</div>
+</Split>`
+> **正确写法**: `<Split>
+  <template #first><div>左侧</div></template>
+  <template #last><div>右侧</div></template>
+</Split>`
+> **说明**: Split 使用命名插槽组织两个面板，直接写默认子节点不会正确分配到两侧区域。
+
+### 同时固定 firstSize 和 lastSize，导致拖拽空间不足
+> **错误用法**: `<Split firstSize="300px" lastSize="500px">...</Split>`
+> **正确写法**: `<Split firstSize="300px" lastSize="auto">...</Split>`
+> **说明**: 实际使用中通常固定一侧，另一侧使用 auto，让拖拽有可调整空间。
+
+## 使用示例
+### 左右分栏
+**场景**: 后台页面侧边栏和主内容区
+
+基础的横向可拖拽布局。
+
+**使用的 API**: 属性: firstSize | 插槽: first, last
+
+```vue
+<template>
+  <Split firstSize="240px" style="height: 320px; border: 1px solid #eee;">
+    <template #first>
+      <div style="padding: 16px;">左侧目录</div>
+    </template>
+    <template #last>
+      <div style="padding: 16px;">右侧内容</div>
+    </template>
+  </Split>
+</template>
+```
+
+### 上下分栏
+**场景**: 上下布局的编辑器和预览区
+
+适合日志面板或上下编辑区。
+
+**使用的 API**: 属性: mode, firstSize | 插槽: first, last
+
+```vue
+<template>
+  <Split mode="vertical" firstSize="120px" style="height: 360px; border: 1px solid #eee;">
+    <template #first>
+      <div style="padding: 16px;">上方面板</div>
+    </template>
+    <template #last>
+      <div style="padding: 16px;">下方面板</div>
+    </template>
+  </Split>
+</template>
+```
+
+### 拖拽范围限制
+**场景**: 限制侧栏宽度的后台布局
+
+限制面板最小和最大尺寸。
+
+**使用的 API**: 属性: firstSize, min, max | 插槽: first, last
+
+```vue
+<template>
+  <Split firstSize="240px" :min="120" :max="480" style="height: 320px; border: 1px solid #eee;">
+    <template #first>
+      <div style="padding: 16px;">可拖拽但不小于 120px</div>
+    </template>
+    <template #last>
+      <div style="padding: 16px;">主面板</div>
+    </template>
+  </Split>
+</template>
+```
+
+## 相关组件
+Layout, Grid, Card
+