king-design-analyzer 2.2.1 → 2.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/components/aside.json +100 -0
  2. package/components/body.json +43 -0
  3. package/components/dropdown.json +9 -0
  4. package/components/footer.json +40 -0
  5. package/components/layout.json +53 -0
  6. package/components/layoutheader.json +113 -0
  7. package/components/popover.json +23 -0
  8. package/components/select.json +9 -0
  9. package/components/spinner.json +5 -1
  10. package/components/tour.json +16 -0
  11. package/components/transfer.json +11 -0
  12. package/components/upload.json +16 -0
  13. package/components/virtuallist.json +9 -0
  14. package/dist/ast/index.d.mts +7 -2
  15. package/dist/ast/index.d.ts +7 -2
  16. package/dist/ast/index.js +3 -3
  17. package/dist/ast/index.mjs +1 -1
  18. package/dist/{chunk-4WXOYU2N.js → chunk-7CSMAJZ2.js} +2 -2
  19. package/dist/{chunk-IPJJMPOO.mjs → chunk-7YBUXYUI.mjs} +75 -42
  20. package/dist/{chunk-JNRGUR3O.js → chunk-K6UQSWLC.js} +75 -42
  21. package/dist/{chunk-LRTDTFFQ.mjs → chunk-RJQMTGRE.mjs} +1 -1
  22. package/dist/full/index.js +4 -4
  23. package/dist/full/index.mjs +2 -2
  24. package/dist/index.js +6 -6
  25. package/dist/index.mjs +2 -2
  26. package/docs_for_llm/aside.doc.md +62 -0
  27. package/docs_for_llm/body.doc.md +44 -0
  28. package/docs_for_llm/dropdown.doc.md +17 -0
  29. package/docs_for_llm/footer.doc.md +46 -0
  30. package/docs_for_llm/layout-header.doc.md +61 -0
  31. package/docs_for_llm/layout.doc.md +53 -0
  32. package/docs_for_llm/popover.doc.md +34 -0
  33. package/docs_for_llm/select.doc.md +15 -0
  34. package/docs_for_llm/tour.doc.md +24 -0
  35. package/docs_for_llm/transfer.doc.md +1 -0
  36. package/docs_for_llm/upload.doc.md +21 -0
  37. package/docs_for_llm/virtuallist.doc.md +14 -0
  38. package/package.json +1 -1
@@ -0,0 +1,44 @@
1
+ # 布局主体 (Body)
2
+
3
+ 布局主体容器,用于承载页面主要内容区域,通常与 Header、Aside 组合使用。
4
+
5
+ ## 导入语句
6
+ ```typescript
7
+ import { Body } from '@king-design/vue';
8
+ ```
9
+
10
+ ## 插槽 (Slots)
11
+ | 插槽名 | 说明 | 模板写法 | 示例 |
12
+ | --- | --- | --- | --- |
13
+ | default | 主体内容区域。 | `#default` | `<Body>
14
+ <div style="padding: 16px;">页面主体内容</div>
15
+ </Body>` |
16
+
17
+ ### 插槽参数说明
18
+ **default**
19
+
20
+ - 参数结构: 无参数
21
+
22
+ ## 使用示例
23
+ ### 主体内容区
24
+ **场景**: 作为后台页面的主要内容承载区域。
25
+
26
+ 在布局中承载页面正文。
27
+
28
+ ```vue
29
+ <script setup lang="ts">
30
+ import { Layout, Header, Body } from '@king-design/vue';
31
+ </script>
32
+ <template>
33
+ <Layout>
34
+ <Header>实例管理</Header>
35
+ <Body>
36
+ <div style="padding: 16px;">这里放页面内容</div>
37
+ </Body>
38
+ </Layout>
39
+ </template>
40
+ ```
41
+
42
+ ## 相关组件
43
+ Layout, Header, Aside, Footer
44
+
@@ -44,6 +44,23 @@ const handlePositioned = (feedback: Feedback) => {
44
44
  };
45
45
  ```
46
46
 
47
+ ## 插槽 (Slots)
48
+ | 插槽名 | 说明 | 模板写法 | 示例 |
49
+ | --- | --- | --- | --- |
50
+ | menu | 自定义下拉菜单内容,通常放置 DropdownMenu 和 DropdownItem。 | `<template #menu>...</template>` | `<Dropdown>
51
+ <Button>更多操作</Button>
52
+ <template #menu>
53
+ <DropdownMenu>
54
+ <DropdownItem>查看详情</DropdownItem>
55
+ </DropdownMenu>
56
+ </template>
57
+ </Dropdown>` |
58
+
59
+ ### 插槽参数说明
60
+ **menu**
61
+
62
+ - 参数结构: 无参数
63
+
47
64
  ## 方法 (Methods)
48
65
  | 方法名 | 说明 | 参数 | 返回值 |
49
66
  | --- | --- | --- | --- |
@@ -0,0 +1,46 @@
1
+ # 布局底部 (Footer)
2
+
3
+ 布局底部组件,适合展示版权、说明信息或页面级辅助操作。
4
+
5
+ ## 导入语句
6
+ ```typescript
7
+ import { Footer } from '@king-design/vue';
8
+ ```
9
+
10
+ ## 插槽 (Slots)
11
+ | 插槽名 | 说明 | 模板写法 | 示例 |
12
+ | --- | --- | --- | --- |
13
+ | default | 底部内容区域。 | `#default` | `<Footer>
14
+ Copyright 2026 Kingsoft Cloud
15
+ </Footer>` |
16
+
17
+ ### 插槽参数说明
18
+ **default**
19
+
20
+ - 参数结构: 无参数
21
+
22
+ ## 使用示例
23
+ ### 基础底部
24
+ **场景**: 在控制台页面底部展示版权或补充提示。
25
+
26
+ 展示底部版权或补充说明。
27
+
28
+ ```vue
29
+ <script setup lang="ts">
30
+ import { Layout, Body, Footer } from '@king-design/vue';
31
+ </script>
32
+ <template>
33
+ <Layout>
34
+ <Body>
35
+ <div style="padding: 16px; min-height: 200px;">内容区域</div>
36
+ </Body>
37
+ <Footer>
38
+ Copyright 2026 Kingsoft Cloud
39
+ </Footer>
40
+ </Layout>
41
+ </template>
42
+ ```
43
+
44
+ ## 相关组件
45
+ Layout, Body
46
+
@@ -0,0 +1,61 @@
1
+ # 布局头部 (Header)
2
+
3
+ 布局头部组件,常用于放置站点标题、全局导航和操作入口,可配置固定定位、主题和毛玻璃效果。
4
+
5
+ ## 导入语句
6
+ ```typescript
7
+ import { Header } from '@king-design/vue';
8
+ ```
9
+
10
+ ## 属性 (Props)
11
+ | 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
12
+ | --- | --- | --- | --- | --- | --- | --- |
13
+ | fixed | `boolean` | `false` | 否 | 是否固定在页面顶部。 | - | `<Header fixed>固定头部</Header>` |
14
+ | height | `number | string` | `64` | 否 | 头部高度,支持数字或带单位的字符串。 | - | `<Header :height="56">紧凑头部</Header>` |
15
+ | style | `string | Record<string, string>` | `undefined` | 否 | 自定义内联样式。 | - | `<Header :style="{ background: '#fff' }">自定义样式</Header>` |
16
+ | theme | `MenuProps['theme']` | `"light"` | 否 | 头部主题,沿用 Menu 组件的主题配置。 | - | `<Header theme="dark">深色头部</Header>` |
17
+ | blur | `boolean` | `false` | 否 | 是否开启毛玻璃背景效果。 | - | `<Header blur>毛玻璃头部</Header>` |
18
+ | boxShadow | `boolean` | `false` | 否 | 是否展示底部阴影。 | - | `<Header boxShadow>带阴影头部</Header>` |
19
+
20
+ ## 插槽 (Slots)
21
+ | 插槽名 | 说明 | 模板写法 | 示例 |
22
+ | --- | --- | --- | --- |
23
+ | default | 头部内容区域,通常放置 Logo、导航或操作按钮。 | `#default` | `<Header>
24
+ <div style="display: flex; justify-content: space-between;">控制台<header-actions /></div>
25
+ </Header>` |
26
+
27
+ ### 插槽参数说明
28
+ **default**
29
+
30
+ - 参数结构: 无参数
31
+
32
+ ## 使用示例
33
+ ### 基础布局头部
34
+ **场景**: 用于后台系统的全局固定顶部栏。
35
+
36
+ 作为站点或控制台的全局顶部栏。
37
+
38
+ **使用的 API**: 属性: fixed, theme, height
39
+
40
+ ```vue
41
+ <script setup lang="ts">
42
+ import { Layout, Header, Body, Button } from '@king-design/vue';
43
+ </script>
44
+ <template>
45
+ <Layout>
46
+ <Header fixed theme="dark" :height="56">
47
+ <div style="display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 16px;">
48
+ <span>控制台</span>
49
+ <Button type="primary">新建资源</Button>
50
+ </div>
51
+ </Header>
52
+ <Body>
53
+ <div style="padding: 16px;">页面内容</div>
54
+ </Body>
55
+ </Layout>
56
+ </template>
57
+ ```
58
+
59
+ ## 相关组件
60
+ Layout, Body, Aside
61
+
@@ -0,0 +1,53 @@
1
+ # 布局容器 (Layout)
2
+
3
+ 页面整体布局容器,用于组合 Header、Aside、Body、Footer 等区域,构建后台或工作台页面结构。
4
+
5
+ **关键词**: layout, 页面布局, 布局容器
6
+
7
+ **使用场景**: 后台布局、控制台页面、工作台页面
8
+
9
+ ## 导入语句
10
+ ```typescript
11
+ import { Layout } from '@king-design/vue';
12
+ ```
13
+
14
+ ## 插槽 (Slots)
15
+ | 插槽名 | 说明 | 模板写法 | 示例 |
16
+ | --- | --- | --- | --- |
17
+ | default | 布局内容区域,通常放置 Header、Aside、Body、Footer 组件。 | `#default` | `<Layout>
18
+ <Header />
19
+ <Body>内容区</Body>
20
+ </Layout>` |
21
+
22
+ ### 插槽参数说明
23
+ **default**
24
+
25
+ - 参数结构: 无参数
26
+
27
+ ## 使用示例
28
+ ### 基础布局
29
+ **场景**: 用于管理后台和工作台页面的整体结构搭建。
30
+
31
+ 组合头部、侧边栏和内容区,构建典型后台页面布局。
32
+
33
+ ```vue
34
+ <script setup lang="ts">
35
+ import { Layout, Header, Aside, Body, Footer } from '@king-design/vue';
36
+ </script>
37
+ <template>
38
+ <Layout>
39
+ <Header>控制台</Header>
40
+ <Layout>
41
+ <Aside>导航菜单</Aside>
42
+ <Body>
43
+ <div style="padding: 16px;">页面内容</div>
44
+ </Body>
45
+ </Layout>
46
+ <Footer>Copyright 2026</Footer>
47
+ </Layout>
48
+ </template>
49
+ ```
50
+
51
+ ## 相关组件
52
+ Header, Aside, Body, Footer
53
+
@@ -38,6 +38,40 @@ import { Popover } from '@king-design/vue';
38
38
  | ok | `@ok` | 点击确认按钮时触发 | `-` | `<Popover @ok="handleOk">` |
39
39
  | cancel | `@cancel` | 点击取消按钮时触发 | `-` | `<Popover @cancel="handleCancel">` |
40
40
 
41
+ ## 插槽 (Slots)
42
+ | 插槽名 | 说明 | 模板写法 | 示例 |
43
+ | --- | --- | --- | --- |
44
+ | title | 自定义确认提示标题区域内容。 | `<template #title>...</template>` | `<Popover>
45
+ <template #title>删除实例</template>
46
+ <Button>删除</Button>
47
+ </Popover>` |
48
+ | content | 自定义确认提示主体内容。 | `<template #content>...</template>` | `<Popover>
49
+ <template #content>
50
+ 删除后将无法恢复,请确认操作。
51
+ </template>
52
+ <Button>删除</Button>
53
+ </Popover>` |
54
+ | footer | 自定义底部操作区内容,可覆盖默认的确认/取消按钮。 | `<template #footer>...</template>` | `<Popover>
55
+ <template #footer>
56
+ <Button size="small">稍后处理</Button>
57
+ <Button type="danger" size="small">立即删除</Button>
58
+ </template>
59
+ <Button>删除</Button>
60
+ </Popover>` |
61
+
62
+ ### 插槽参数说明
63
+ **title**
64
+
65
+ - 参数结构: 无参数
66
+
67
+ **content**
68
+
69
+ - 参数结构: 无参数
70
+
71
+ **footer**
72
+
73
+ - 参数结构: 无参数
74
+
41
75
  ## 常见错误与正确用法 (Anti-Hallucination)
42
76
  ### 未提供触发元素
43
77
  > **错误用法**: `<Popover title="确认" content="内容" />`
@@ -219,6 +219,21 @@ const selected = ref('');
219
219
  <Option value="apple" label="苹果" />
220
220
  </OptionGroup>` |
221
221
 
222
+ #### 插槽 (Slots)
223
+ | 插槽名 | 说明 | 模板写法 | 示例 |
224
+ | --- | --- | --- | --- |
225
+ | label | 自定义选项分组标题内容。 | `#label` | `<OptionGroup>
226
+ <template #label>
227
+ <span>水果分组</span>
228
+ </template>
229
+ <Option value="apple" label="苹果" />
230
+ </OptionGroup>` |
231
+
232
+ ##### 插槽参数说明
233
+ **label**
234
+
235
+ - 参数结构: 无参数
236
+
222
237
  #### 组合示例
223
238
  ##### 分组选项
224
239
  **场景**: 创建带有分组的下拉选择框
@@ -86,6 +86,30 @@ const handlePositioned = (feedback: Feedback) => {
86
86
  | nextText | `string` | 下一步按钮文本 | `<TourStep nextText="继续">` |
87
87
  | prevText | `string` | 上一步按钮文本 | `<TourStep prevText="返回">` |
88
88
 
89
+ #### 插槽 (Slots)
90
+ | 插槽名 | 说明 | 模板写法 | 示例 |
91
+ | --- | --- | --- | --- |
92
+ | header | 自定义步骤头部内容,可覆盖标题区域。 | `#header` | `<TourStep>
93
+ <template #header>
94
+ <strong>欢迎使用控制台</strong>
95
+ </template>
96
+ </TourStep>` |
97
+ | footer | 自定义步骤底部操作区,可覆盖默认的步骤指示和按钮。 | `#footer` | `<TourStep>
98
+ <template #footer>
99
+ <Button size="small">跳过引导</Button>
100
+ <Button type="primary" size="small">继续</Button>
101
+ </template>
102
+ </TourStep>` |
103
+
104
+ ##### 插槽参数说明
105
+ **header**
106
+
107
+ - 参数结构: 无参数
108
+
109
+ **footer**
110
+
111
+ - 参数结构: 无参数
112
+
89
113
  #### 组合示例
90
114
  ##### 声明式步骤
91
115
  **场景**: 使用声明式方式定义引导步骤
@@ -29,6 +29,7 @@ import { Transfer } from '@king-design/vue';
29
29
  | rightTitle | `string | VNode` | `"已选择"` | 否 | 右侧标题 | - | `<Transfer rightTitle="已选列表"></Transfer>` |
30
30
  | enableAdd | `() => boolean` | `undefined` | 否 | 控制右箭头按钮的可用状态 | - | `<Transfer :enableAdd="canAdd"></Transfer>` |
31
31
  | enableRemove | `() => boolean` | `undefined` | 否 | 控制左箭头按钮的可用状态 | - | `<Transfer :enableRemove="canRemove"></Transfer>` |
32
+ | pagination | `boolean | PaginationProps` | `false` | 否 | 是否启用左右面板分页,也可以传入 Pagination 的配置对象来自定义页码和每页条数。 | - | `<Transfer :pagination="{ value: 1, limit: 10 }"></Transfer>` |
32
33
 
33
34
  ## 事件 (Events)
34
35
  | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
@@ -87,6 +87,27 @@ const handleError = (err, file, files) => {
87
87
  };
88
88
  ```
89
89
 
90
+ ## 插槽 (Slots)
91
+ | 插槽名 | 说明 | 模板写法 | 示例 |
92
+ | --- | --- | --- | --- |
93
+ | content | 自定义上传触发区域内容,例如按钮、拖拽提示文案等。 | `<template #content>...</template>` | `<Upload action="/api/upload">
94
+ <template #content>
95
+ <Button type="primary">选择文件</Button>
96
+ </template>
97
+ </Upload>` |
98
+ | tip | 自定义底部提示内容,通常用于说明支持的文件类型、大小或数量限制。 | `<template #tip>...</template>` | `<Upload action="/api/upload">
99
+ <template #tip>只能上传 JPG/PNG 文件,且不超过 500KB</template>
100
+ </Upload>` |
101
+
102
+ ### 插槽参数说明
103
+ **content**
104
+
105
+ - 参数结构: 无参数
106
+
107
+ **tip**
108
+
109
+ - 参数结构: 无参数
110
+
90
111
  ## 方法 (Methods)
91
112
  | 方法名 | 说明 | 参数 | 返回值 |
92
113
  | --- | --- | --- | --- |
@@ -16,6 +16,20 @@ import { VirtualList } from '@king-design/vue';
16
16
  | --- | --- | --- | --- | --- | --- | --- |
17
17
  | disabled | `boolean` | `false` | 否 | 是否禁用虚拟化,禁用后会渲染所有元素 | - | `<VirtualList disabled></VirtualList>` |
18
18
 
19
+ ## 插槽 (Slots)
20
+ | 插槽名 | 说明 | 模板写法 | 示例 |
21
+ | --- | --- | --- | --- |
22
+ | default | 列表项渲染内容,通常配合 v-for 渲染大量行。 | `#default` | `<VirtualList style="height: 400px;">
23
+ <template #default>
24
+ <div v-for="item in data" :key="item.value">{{ item.label }}</div>
25
+ </template>
26
+ </VirtualList>` |
27
+
28
+ ### 插槽参数说明
29
+ **default**
30
+
31
+ - 参数结构: 无参数
32
+
19
33
  ## 子组件 (Sub-Components)
20
34
  ### VirtualListContainer
21
35
  虚拟列表容器组件,用于组合式使用
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "king-design-analyzer",
3
- "version": "2.2.1",
3
+ "version": "2.2.3",
4
4
  "description": "AST-based code analyzer for King Design Vue components with on-demand modular imports",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",