king-design-analyzer 2.1.9 → 2.2.1

package/docs_for_llm/collapse.doc.md

@@ -12,39 +12,171 @@ import { Collapse, CollapseItem } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| value | `string[]` | `undefined` | 否 | 当前展开的 CollapseItem 取值，可用 v-model 双向绑定 | `<Collapse v-model="activeKeys"></Collapse>` |
-| accordion | `boolean` | `false` | 否 | 是否展示手风琴风格，同时只能展开一个面板 | `<Collapse v-model="activeKeys" accordion></Collapse>` |
-| arrow | `"right" | "left"` | `"right"` | 否 | 指定箭头位置 | `<Collapse arrow="left"></Collapse>` |
-| noBorder | `boolean` | `false` | 否 | 是否展示无边框的简洁样式 | `<Collapse noBorder></Collapse>` |
-
-## 插槽 (Slots)
-| 插槽名 | 说明 | 模板写法 | 示例 |
-| --- | --- | --- | --- |
-| title | 扩展标题 | `undefined` | - |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `string[]` | `undefined` | 否 | 当前展开的 CollapseItem 取值，可用 v-model 双向绑定 | - | `<Collapse v-model="activeKeys"></Collapse>` |
+| accordion | `boolean` | `false` | 否 | 是否展示手风琴风格，同时只能展开一个面板 | - | `<Collapse v-model="activeKeys" accordion></Collapse>` |
+| arrow | `"right" | "left"` | `"right"` | 否 | 指定箭头位置 | - | `<Collapse arrow="left"></Collapse>` |
+| noBorder | `boolean` | `false` | 否 | 是否展示无边框的简洁样式 | - | `<Collapse noBorder></Collapse>` |
 
 ## 子组件 (Sub-Components)
 ### CollapseItem
 折叠面板项组件，用于定义每个可折叠的内容区域
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | value | `string` | 当前 CollapseItem 的取值，默认会使用 $ + 索引的组合 | `<CollapseItem value="1" title="面板标题">内容</CollapseItem>` |
 | title | `string | VNode` | 标题内容 | `<CollapseItem title="面板标题">内容</CollapseItem>` |
 | disabled | `boolean` | 是否禁用 | `<CollapseItem disabled title="禁用面板">内容</CollapseItem>` |
 
-**事件**:
-- `@show`: 展开时触发
-- `@hide`: 收起时触发
+#### 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| show | `@show` | 展开时触发 | `collapseItem: CollapseItem` | `<CollapseItem @show="handlePanelShow"></CollapseItem>` |
+| hide | `@hide` | 收起时触发 | `collapseItem: CollapseItem` | `<CollapseItem @hide="handlePanelHide"></CollapseItem>` |
+
+##### CollapseItem 事件参数说明
+**show**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| collapseItem | `CollapseItem` | 是 | - | 当前折叠项实例 |
+
+事件处理示例:
+```typescript
+const expandedPanels = ref<string[]>([]);
+
+const handlePanelShow = (collapseItem) => {
+  const panelValue = String(collapseItem.value);
+  if (!expandedPanels.value.includes(panelValue)) {
+    expandedPanels.value.push(panelValue);
+  }
+};
+```
+
+**hide**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| collapseItem | `CollapseItem` | 是 | - | 当前折叠项实例 |
+
+事件处理示例:
+```typescript
+const expandedPanels = ref<string[]>([]);
+
+const handlePanelHide = (collapseItem) => {
+  expandedPanels.value = expandedPanels.value.filter((item) => item !== String(collapseItem.value));
+};
+```
+
+#### 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| title | 扩展标题 | `#title` | `<CollapseItem value="custom">
+  <template #title>
+    自定义标题
+  </template>
+  自定义内容
+</CollapseItem>` |
+
+##### 插槽参数说明
+**title**
+
+- 参数结构: 无参数
+
+#### 组合示例
+##### 监听展开收起
+**场景**: 监听折叠面板的展开和收起事件
+
+监听面板的展开和收起事件
+
+**命中的子组件 API**: 属性: value, title | 事件: show, hide
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Collapse, CollapseItem, Message } from '@king-design/vue';
+
+const activeKeys = ref([]);
+
+const handleShow = () => {
+  Message.success('面板已展开');
+};
+
+const handleHide = () => {
+  Message.info('面板已收起');
+};
+</script>
+<template>
+  <Collapse v-model="activeKeys">
+    <CollapseItem value="1" title="面板一" @show="handleShow" @hide="handleHide">
+      内容一
+    </CollapseItem>
+  </Collapse>
+</template>
+```
+
+##### 禁用面板
+**场景**: 禁用某个折叠面板项
+
+禁用某个折叠项
+
+**命中的子组件 API**: 属性: value, title, disabled
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Collapse, CollapseItem } from '@king-design/vue';
+
+const activeKeys = ref([]);
+</script>
+<template>
+  <Collapse v-model="activeKeys">
+    <CollapseItem value="1" title="可用面板">内容一</CollapseItem>
+    <CollapseItem value="2" title="禁用面板" disabled>内容二</CollapseItem>
+  </Collapse>
+</template>
+```
+
+##### 基础用法
+**场景**: 创建基本的折叠面板
+
+基本的折叠面板
+
+**命中的子组件 API**: 属性: value, title
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Collapse, CollapseItem } from '@king-design/vue';
+
+const activeKeys = ref(['1']);
+</script>
+<template>
+  <Collapse v-model="activeKeys">
+    <CollapseItem value="1" title="面板一">
+      这是面板一的内容
+    </CollapseItem>
+    <CollapseItem value="2" title="面板二">
+      这是面板二的内容
+    </CollapseItem>
+    <CollapseItem value="3" title="面板三">
+      这是面板三的内容
+    </CollapseItem>
+  </Collapse>
+</template>
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### value 类型错误，使用字符串而非数组
 > **错误用法**: `const activeKey = ref('1');
 <Collapse v-model="activeKey">`
 > **正确写法**: `const activeKeys = ref(['1']);
 <Collapse v-model="activeKeys">`
 > **说明**: Collapse 的 value 必须是字符串数组类型，即使使用 accordion 模式
 
+### CollapseItem 未设置 value 导致无法正确控制
 > **错误用法**: `<Collapse v-model="activeKeys">
   <CollapseItem title="面板">内容</CollapseItem>
 </Collapse>`
@@ -53,6 +185,7 @@ import { Collapse, CollapseItem } from '@king-design/vue';
 </Collapse>`
 > **说明**: 建议为 CollapseItem 显式设置 value，便于控制展开状态
 
+### arrow 值拼写错误
 > **错误用法**: `<Collapse arrow="start">`
 > **正确写法**: `<Collapse arrow="left">`
 > **说明**: arrow 只支持 right 和 left 两个值

package/docs_for_llm/colorpicker.doc.md

@@ -0,0 +1,104 @@
+# 颜色选择器 (Colorpicker)
+
+颜色选择器组件，用于选择纯色或带透明度的颜色值。点击触发器后会弹出调色面板，支持预设颜色、自定义弹出容器和弹层定位。
+
+**关键词**: colorpicker, 颜色选择器, 颜色, 主题色, rgba, hex, 预设颜色
+
+**使用场景**: 主题颜色配置、图表颜色设置、标签颜色自定义、运营后台品牌色选择
+
+## 导入语句
+```typescript
+import { Colorpicker } from '@king-design/vue';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `string` | `undefined` | 是 | 当前颜色值，必填。支持十六进制颜色或 rgba 字符串，可用 v-model 双向绑定。 | - | `<Colorpicker v-model="color" />` |
+| presets | `string[]` | `["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#BD10E0", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"]` | 否 | 预设颜色列表，展示在面板底部，便于快速选择常用颜色。 | - | `<Colorpicker v-model="color" :presets="['#1677ff', '#52c41a', '#faad14']" />` |
+| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 尺寸。 | - | `<Colorpicker v-model="color" size="small" />` |
+| disabled | `boolean` | `false` | 否 | 是否禁用，禁用后无法打开面板和修改颜色。 | - | `<Colorpicker v-model="color" disabled />` |
+| container | `string | ((parentDom: Element, anchor: Node | null) => Element)` | `undefined` | 否 | 指定弹出层挂载位置。通常在 Dialog、Drawer 等容器中需要显式指定，避免层级或定位异常。 | - | `<Colorpicker v-model="color" :container="() => document.body" />` |
+| show | `boolean` | `undefined` | 否 | 是否展示颜色面板，可用于受控显示。 | - | `<Colorpicker v-model="color" :show="visible" />` |
+| position | `DropdownProps['position']` | `{ collision: 'fit' }` | 否 | 下拉面板定位配置，继承 Dropdown 的 position 能力。 | - | `<Colorpicker v-model="color" :position="{ placement: 'bottom-start', collision: 'fit' }" />` |
+
+## 常见错误与正确用法 (Anti-Hallucination)
+### 未传入有效颜色字符串
+> **错误用法**: `<Colorpicker :value="undefined" />`
+> **正确写法**: `<Colorpicker v-model="color" />`
+> **说明**: Colorpicker 的 value 是必填项，应提供合法的颜色字符串并通过 v-model 维护状态。
+
+### 在弹层容器内使用时未指定 container
+> **错误用法**: `<Dialog v-model="visible"><Colorpicker v-model="color" /></Dialog>`
+> **正确写法**: `<Dialog v-model="visible"><Colorpicker v-model="color" :container="() => document.body" /></Dialog>`
+> **说明**: Colorpicker 内部会渲染下拉面板，在 Dialog、Drawer 等场景中建议显式设置挂载容器，避免遮挡和定位问题。
+
+## 使用示例
+### 基础用法
+**场景**: 选择品牌主色或主题色
+
+选择主题色并实时预览。
+
+**使用的 API**: 属性: value
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Colorpicker } from '@king-design/vue';
+
+const color = ref('#1677ff');
+</script>
+<template>
+  <div style="display: flex; align-items: center; gap: 12px;">
+    <Colorpicker v-model="color" />
+    <span>当前颜色：{{ color }}</span>
+  </div>
+</template>
+```
+
+### 预设颜色
+**场景**: 为运营后台提供固定品牌色
+
+通过 presets 提供常用颜色快捷选择。
+
+**使用的 API**: 属性: value, presets
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Colorpicker } from '@king-design/vue';
+
+const color = ref('#52c41a');
+const presets = ['#1677ff', '#52c41a', '#faad14', '#f5222d', '#722ed1'];
+</script>
+<template>
+  <Colorpicker v-model="color" :presets="presets" />
+</template>
+```
+
+### 弹窗内使用
+**场景**: 在弹窗中配置颜色字段
+
+在弹窗中显式指定挂载容器，避免弹层错位。
+
+**使用的 API**: 属性: value, container
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Button, Colorpicker, Dialog } from '@king-design/vue';
+
+const visible = ref(false);
+const color = ref('rgba(22, 119, 255, 0.8)');
+</script>
+<template>
+  <Button @click="visible = true">编辑颜色</Button>
+  <Dialog v-model="visible" title="颜色设置">
+    <Colorpicker v-model="color" :container="() => document.body" />
+  </Dialog>
+</template>
+```
+
+## 相关组件
+Input, Dropdown, Dialog
+

package/docs_for_llm/configprovider.doc.md

@@ -0,0 +1,77 @@
+# 全局配置提供器 (ConfigProvider)
+
+配置上下文提供器，用于向包裹区域内的组件统一注入类名前缀和波纹动画配置。适合在局部区域隔离样式命名空间或关闭交互波纹效果。
+
+**关键词**: configprovider, 配置提供器, classNamePrefix, disableWave
+
+**使用场景**: 局部样式前缀隔离、统一关闭波纹动画、子树级组件配置注入
+
+## 导入语句
+```typescript
+import { ConfigProvider } from '@king-design/vue';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `{ classNamePrefix?: string; disableWave?: boolean }` | `{}` | 否 | 传递给内部组件的配置对象 | - | `<ConfigProvider :value="{ classNamePrefix: 'my', disableWave: true }"></ConfigProvider>` |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 需要继承配置的子组件内容 | `#default` | `<ConfigProvider :value="config"><Button>按钮</Button></ConfigProvider>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+## 使用示例
+### 自定义类名前缀
+**场景**: 在微前端或局部主题隔离场景中定制组件类名前缀。
+
+为局部组件树设置独立类名前缀。
+
+**使用的 API**: 属性: value | 插槽: default
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Button, ButtonGroup, ConfigProvider } from '@king-design/vue';
+
+const config = ref({ classNamePrefix: 'custom' });
+</script>
+<template>
+  <ConfigProvider :value="config">
+    <ButtonGroup>
+      <Button>默认按钮</Button>
+      <Button type="primary">主要按钮</Button>
+    </ButtonGroup>
+  </ConfigProvider>
+</template>
+```
+
+### 关闭波纹效果
+**场景**: 在需要弱化交互动画或统一交互体验时关闭波纹效果。
+
+统一禁用子组件的波纹动画效果。
+
+**使用的 API**: 属性: value | 插槽: default
+
+```vue
+<script setup lang="ts">
+import { Button, ConfigProvider } from '@king-design/vue';
+</script>
+<template>
+  <ConfigProvider :value="{ disableWave: true }">
+    <div style="display: flex; gap: 8px;">
+      <Button>普通按钮</Button>
+      <Button type="primary">无波纹按钮</Button>
+    </div>
+  </ConfigProvider>
+</template>
+```
+
+## 相关组件
+Button, Notification
+

package/docs_for_llm/copy.doc.md

@@ -12,10 +12,10 @@ import { Copy } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| text | `string` | `undefined` | 否 | 复制文案值，要复制到剪贴板的内容 | `<Copy text="要复制的内容"><Button>复制</Button></Copy>` |
-| showMessage | `boolean` | `true` | 否 | 复制成功/失败时，是否展示 Message 提示 | `<Copy text="内容" :showMessage="false"><Button>静默复制</Button></Copy>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| text | `string` | `undefined` | 否 | 复制文案值，要复制到剪贴板的内容 | - | `<Copy text="要复制的内容"><Button>复制</Button></Copy>` |
+| showMessage | `boolean` | `true` | 否 | 复制成功/失败时，是否展示 Message 提示 | - | `<Copy text="内容" :showMessage="false"><Button>静默复制</Button></Copy>` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
@@ -23,30 +23,32 @@ import { Copy } from '@king-design/vue';
 | success | `@success` | 复制成功时触发 | `value: string` | `<Copy text="内容" @success="handleSuccess"></Copy>` |
 | error | `@error` | 复制失败时触发 | `-` | `<Copy text="内容" @error="handleError"></Copy>` |
 
-### 事件处理函数示例
-**success**:
+### 事件参数说明
+**success**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string` | 是 | - | 复制的内容 |
+
+事件处理示例:
 ```typescript
 const handleSuccess = (value: string) => {
   console.log('复制成功:', value);
 };
 ```
 
-**error**:
-```typescript
-const handleError = () => {
-  console.log('复制失败');
-};
-```
-
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 未设置 text 属性
 > **错误用法**: `<Copy><Button>复制</Button></Copy>`
 > **正确写法**: `<Copy text="要复制的内容"><Button>复制</Button></Copy>`
 > **说明**: 必须通过 text 属性指定要复制的内容
 
+### 未提供触发元素
 > **错误用法**: `<Copy text="内容" />`
 > **正确写法**: `<Copy text="内容"><Button>复制</Button></Copy>`
 > **说明**: Copy 组件需要包裹一个子元素作为触发器
 
+### success 事件处理函数参数错误
 > **错误用法**: `const handleSuccess = () => {
   console.log('复制成功');
 }`

package/docs_for_llm/copyhover.doc.md

@@ -0,0 +1,59 @@
+# 悬浮复制 (CopyHover)
+
+在文本悬停时才露出复制图标的轻量组件，适合详情字段、表格单元格等需要降低视觉噪音的复制场景。
+
+**关键词**: copy hover, hover copy, 复制悬浮, 悬停复制, 轻量复制按钮
+
+**使用场景**: 详情字段快速复制、列表项悬浮复制、敏感信息禁用复制
+
+## 导入语句
+```typescript
+import { CopyHover } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| text | `string` | `""` | 否 | 待复制文本 | - | - |
+| showMessage | `boolean` | `true` | 否 | 复制成功/失败时，是否展示 Message 提示 | `inherited:Copy` | `<Copy text="内容" :showMessage="false"><Button>静默复制</Button></Copy>` |
+| tooltipText | `string` | `undefined` | 否 | 复制按钮提示文案 | - | - |
+| disabled | `boolean` | `undefined` | 否 | 是否禁用复制 | - | - |
+
+## 使用示例
+### 详情字段悬浮复制
+**场景**: 在详情页展示实例 ID，同时保持界面简洁。
+
+只在悬停时显示复制图标，适合长 ID、Token 等字段。
+
+**使用的 API**: 属性: text, tooltipText
+
+```vue
+<script setup lang="ts">
+import { CopyHover } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <CopyHover text="i-2ze7x5a4a92b" tooltip-text="复制实例 ID" />
+</template>
+```
+
+### 敏感字段禁止复制
+**场景**: 在脱敏展示 SecretKey 等敏感内容时显式禁用复制。
+
+对脱敏后的内容保留展示但关闭复制。
+
+**使用的 API**: 属性: text, tooltipText, disabled
+
+```vue
+<script setup lang="ts">
+import { CopyHover } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <CopyHover text="sk-******" tooltip-text="敏感信息不可复制" :disabled="true" />
+</template>
+```
+
+## 相关组件
+Copy, CopyRow
+

package/docs_for_llm/copyrow.doc.md

@@ -0,0 +1,80 @@
+# 复制行 (CopyRow)
+
+用于展示并复制一整行文本的业务组件，适合实例 ID、API 地址、回源域名等长文本信息。
+
+**关键词**: copy row, copy text row, 复制行, 文本复制, 长文本复制
+
+**使用场景**: 详情页字段复制、表格文本复制、自定义内容的复制展示行
+
+## 导入语句
+```typescript
+import { CopyRow } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| text | `string` | `undefined` | 否 | 待展示和复制的文本内容 | - | - |
+| maxLines | `number` | `undefined` | 否 | 最大展示行数 | - | - |
+| position | `any` | `undefined` | 否 | 复制提示弹出位置 | - | - |
+| disabled | `boolean` | `undefined` | 否 | 是否禁用复制 | - | - |
+| disabledTooltip | `boolean` | `undefined` | 否 | 禁用时是否显示 tooltip | - | - |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 自定义行内容 | `<CopyRow>...</CopyRow>` | `<CopyRow>
+  <template <CopyRow>...</CopyRow>>
+    自定义default内容
+  </template>
+</CopyRow>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+## 使用示例
+### 接口地址一键复制
+**场景**: 在详情页展示并复制较长的接口地址或资源标识。
+
+在单行文本中集成复制能力和超长内容省略。
+
+**使用的 API**: 属性: text, maxLines
+
+```vue
+<script setup lang="ts">
+import { CopyRow } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <CopyRow
+    text="https://api.ksyun.com/v1/instance/describe"
+    :max-lines="1"
+  />
+</template>
+```
+
+### 自定义复制行内容
+**场景**: 在详情页用自定义文案组合显示可复制字段。
+
+通过默认插槽自定义展示样式，同时保留复制能力。
+
+**使用的 API**: 属性: text
+
+```vue
+<script setup lang="ts">
+import { CopyRow } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <CopyRow text="bucket-logs-001">
+    <strong>日志桶：</strong>
+    <span>bucket-logs-001</span>
+  </CopyRow>
+</template>
+```
+
+## 相关组件
+CopyHover, TableColumnId
+