king-design-analyzer 2.2.0 → 2.2.2

package/docs_for_llm/collapse.doc.md

@@ -19,24 +19,154 @@ import { Collapse, CollapseItem } from '@king-design/vue';
 | arrow | `"right" | "left"` | `"right"` | 否 | 指定箭头位置 | - | `<Collapse arrow="left"></Collapse>` |
 | noBorder | `boolean` | `false` | 否 | 是否展示无边框的简洁样式 | - | `<Collapse noBorder></Collapse>` |
 
-## 插槽 (Slots)
-| 插槽名 | 说明 | 模板写法 | 示例 |
-| --- | --- | --- | --- |
-| title | 扩展标题 | `undefined` | - |
-
 ## 子组件 (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 类型错误，使用字符串而非数组

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/copyrow.doc.md

@@ -23,7 +23,16 @@ import { CopyRow } from '@ksyun-internal/versatile';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| default | 自定义行内容 | `<CopyRow>...</CopyRow>` | - |
+| default | 自定义行内容 | `<CopyRow>...</CopyRow>` | `<CopyRow>
+  <template <CopyRow>...</CopyRow>>
+    自定义default内容
+  </template>
+</CopyRow>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
 
 ## 使用示例
 ### 接口地址一键复制

package/docs_for_llm/datepicker.doc.md

@@ -73,6 +73,25 @@ const handleSelecting = (value, confirmed) => {
 | hide | 主动关闭日期选择面板。 | `-` | `void` |
 | position | 重新计算日期选择面板的位置。 | `-` | `void` |
 
+### 方法调用示例
+**show**
+
+```typescript
+datepickerRef.value?.show();
+```
+
+**hide**
+
+```typescript
+datepickerRef.value?.hide();
+```
+
+**position**
+
+```typescript
+datepickerRef.value?.position();
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 范围选择时 value 类型错误
 > **错误用法**: `const date = ref('');

package/docs_for_llm/descriptions.doc.md

@@ -22,21 +22,130 @@ import { Descriptions, DescriptionItem } from '@king-design/vue';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| title | 自定义title | `undefined` | - |
+| title | 自定义title | `#title` | `<Descriptions>
+  <template #title>自定义标题</template>
+</Descriptions>` |
+
+### 插槽参数说明
+**title**
+
+- 参数结构: 无参数
 
 ## 子组件 (Sub-Components)
 ### DescriptionItem
 描述列表项组件，用于定义每个字段的标签和内容
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | label | `string | number | VNode` | 内容的标题/标签 | `<DescriptionItem label="姓名">张三</DescriptionItem>` |
 | content | `string | number | VNode` | 包含内容，也可直接在标签内写内容 | `<DescriptionItem label="姓名" content="张三" />` |
 | append | `string | number | VNode` | 自定义内容，常用于操作区 | `<DescriptionItem label="手机" append="修改">138****8000</DescriptionItem>` |
 
-**插槽**:
-- `undefined`: 用于超长省略后的操作区自定义内容
-- `undefined`: 自定义label
+#### 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| append | 用于超长省略后的操作区自定义内容 | `#append` | `<DescriptionItem label="手机号">
+  138****8000
+  <template #append>
+    修改
+  </template>
+</DescriptionItem>` |
+| label | 自定义label | `#label` | `<DescriptionItem>
+  <template #label>
+    联系方式
+  </template>
+  138****8000
+</DescriptionItem>` |
+
+##### 插槽参数说明
+**append**
+
+- 参数结构: 无参数
+
+**label**
+
+- 参数结构: 无参数
+
+#### 组合示例
+##### 带操作按钮
+**场景**: 在描述项后添加操作按钮
+
+在描述项后添加操作按钮
+
+**命中的子组件 API**: 属性: label | 插槽: append
+
+```vue
+<script setup lang="ts">
+import { Descriptions, DescriptionItem, Button } from '@king-design/vue';
+</script>
+<template>
+  <Descriptions title="账户信息" :columns="2">
+    <DescriptionItem label="手机号">
+      138****8000
+      <template #append>
+        <Button type="link" size="small">修改</Button>
+      </template>
+    </DescriptionItem>
+    <DescriptionItem label="邮箱">
+      zhang***@example.com
+      <template #append>
+        <Button type="link" size="small">修改</Button>
+      </template>
+    </DescriptionItem>
+  </Descriptions>
+</template>
+```
+
+##### 基础用法
+**场景**: 创建基本的信息展示描述列表
+
+基本的描述列表
+
+**命中的子组件 API**: 属性: label
+
+```vue
+<script setup lang="ts">
+import { Descriptions, DescriptionItem } from '@king-design/vue';
+</script>
+<template>
+  <Descriptions title="用户信息">
+    <DescriptionItem label="姓名">张三</DescriptionItem>
+    <DescriptionItem label="年龄">28</DescriptionItem>
+    <DescriptionItem label="性别">男</DescriptionItem>
+    <DescriptionItem label="电话">13800138000</DescriptionItem>
+    <DescriptionItem label="地址">北京市朝阳区</DescriptionItem>
+    <DescriptionItem label="邮箱">zhangsan@example.com</DescriptionItem>
+  </Descriptions>
+</template>
+```
+
+##### 详情页示例
+**场景**: 详情页的完整信息展示
+
+完整的详情页信息展示
+
+**命中的子组件 API**: 属性: label
+
+```vue
+<script setup lang="ts">
+import { Descriptions, DescriptionItem, Card, Tag } from '@king-design/vue';
+</script>
+<template>
+  <Card title="订单详情">
+    <Descriptions :columns="3">
+      <DescriptionItem label="订单编号">DD2024010100001</DescriptionItem>
+      <DescriptionItem label="创建时间">2024-01-01 10:30:00</DescriptionItem>
+      <DescriptionItem label="订单状态">
+        <Tag type="success">已完成</Tag>
+      </DescriptionItem>
+      <DescriptionItem label="收货人">张三</DescriptionItem>
+      <DescriptionItem label="联系电话">13800138000</DescriptionItem>
+      <DescriptionItem label="收货地址">北京市朝阳区xxx路xxx号</DescriptionItem>
+    </Descriptions>
+  </Card>
+</template>
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### DescriptionItem 未设置 label