king-design-analyzer 2.1.7 → 2.2.0

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 (311) hide show
  1. package/components/actions.json +101 -0
  2. package/components/advancedset.json +127 -0
  3. package/components/affix.json +7 -0
  4. package/components/aksk.json +172 -0
  5. package/components/az.json +15 -2
  6. package/components/badge.json +7 -0
  7. package/components/billtypes.json +14 -2
  8. package/components/breadcrumb.json +7 -0
  9. package/components/button.json +191 -0
  10. package/components/buttonlink.json +73 -0
  11. package/components/card.json +8 -1
  12. package/components/cardcol.json +142 -0
  13. package/components/cardcols.json +121 -0
  14. package/components/cardcontent.json +15 -3
  15. package/components/cardtabs.json +172 -0
  16. package/components/carousel.json +7 -0
  17. package/components/cascader.json +520 -368
  18. package/components/checkbox.json +51 -4
  19. package/components/cidrinput.json +140 -0
  20. package/components/code.json +8 -1
  21. package/components/collapse.json +7 -0
  22. package/components/colorpicker.json +217 -0
  23. package/components/copy.json +7 -0
  24. package/components/copyhover.json +111 -0
  25. package/components/copyrow.json +124 -0
  26. package/components/datepicker.json +656 -524
  27. package/components/description.json +98 -0
  28. package/components/dialog.json +522 -455
  29. package/components/divider.json +8 -1
  30. package/components/drawer.json +571 -558
  31. package/components/dropdown.json +464 -384
  32. package/components/duration.json +125 -0
  33. package/components/editable.json +66 -0
  34. package/components/ellipsis.json +34 -1
  35. package/components/filtertablefieldsdialog.json +128 -0
  36. package/components/flex.json +151 -0
  37. package/components/form.json +131 -0
  38. package/components/formiteminput.json +214 -0
  39. package/components/formitemspinner.json +213 -0
  40. package/components/formitemswitch.json +185 -0
  41. package/components/formitemtableconfigs.json +210 -0
  42. package/components/grid.json +7 -0
  43. package/components/header.json +161 -0
  44. package/components/icon.json +13 -1
  45. package/components/icontooltip.json +19 -1
  46. package/components/input.json +188 -4
  47. package/components/instancelist.json +194 -0
  48. package/components/instancenum.json +196 -0
  49. package/components/ipinput.json +117 -0
  50. package/components/kspstatus.json +205 -0
  51. package/components/kvcode.json +120 -0
  52. package/components/layoutcontent.json +15 -3
  53. package/components/layoutlistcontent.json +148 -0
  54. package/components/layoutpermissioncontent.json +155 -0
  55. package/components/layoutstandardlist.json +275 -0
  56. package/components/layouttabs.json +168 -0
  57. package/components/lazymount.json +86 -0
  58. package/components/lazyteleport.json +118 -0
  59. package/components/menu.json +7 -0
  60. package/components/pagination.json +12 -0
  61. package/components/paginationplus.json +30 -3
  62. package/components/password.json +121 -0
  63. package/components/popover.json +457 -437
  64. package/components/projects.json +129 -0
  65. package/components/protable.json +97 -8
  66. package/components/queuevisualrange.json +110 -0
  67. package/components/radio.json +82 -2
  68. package/components/rate.json +199 -0
  69. package/components/region.json +14 -2
  70. package/components/search.json +221 -0
  71. package/components/searchinput.json +132 -0
  72. package/components/searchitems.json +215 -0
  73. package/components/searchselect.json +195 -0
  74. package/components/select.json +686 -666
  75. package/components/sidebar.json +198 -0
  76. package/components/skeleton.json +233 -0
  77. package/components/spin.json +8 -1
  78. package/components/split.json +260 -0
  79. package/components/sshkeys.json +138 -0
  80. package/components/status.json +60 -3
  81. package/components/steps.json +7 -0
  82. package/components/switch.json +8 -1
  83. package/components/table.json +18 -1
  84. package/components/tablecolumnid.json +14 -2
  85. package/components/tabs.json +12 -0
  86. package/components/timeline.json +213 -0
  87. package/components/timepicker.json +147 -3
  88. package/components/timerange.json +262 -0
  89. package/components/tip.json +7 -0
  90. package/components/tooltip.json +484 -395
  91. package/components/tour.json +418 -372
  92. package/components/transfer.json +27 -3
  93. package/components/tree.json +6 -4
  94. package/components/treeselect.json +556 -475
  95. package/components/upload.json +474 -473
  96. package/components/vdialog.json +308 -0
  97. package/components/vdrawer.json +331 -0
  98. package/components/virtuallist.json +7 -0
  99. package/dist/ast/index.d.mts +35 -1
  100. package/dist/ast/index.d.ts +35 -1
  101. package/dist/ast/index.js +5 -3
  102. package/dist/ast/index.mjs +3 -1
  103. package/dist/{chunk-DSWKLUIX.mjs → chunk-3LYQ5XFM.mjs} +1 -1
  104. package/dist/chunk-BI5TIQID.mjs +330 -0
  105. package/dist/{chunk-6QS5IGS6.js → chunk-CJGGFVQJ.js} +8 -8
  106. package/dist/chunk-CR3GC4H3.js +353 -0
  107. package/dist/{chunk-NZ6TLWMD.mjs → chunk-D2SXGGTX.mjs} +28 -17
  108. package/dist/{chunk-D3Y6FGWA.js → chunk-EYKZY2F3.js} +29 -18
  109. package/dist/chunk-JSBRDJBE.js +30 -0
  110. package/dist/chunk-KF5YBEM5.js +143 -0
  111. package/dist/chunk-KMIDURUR.mjs +33324 -0
  112. package/dist/chunk-QC6VTSA3.mjs +117 -0
  113. package/dist/chunk-SZYVGYKK.js +33350 -0
  114. package/dist/{chunk-WYSRJVX4.js → chunk-TA3SV4SP.js} +2 -2
  115. package/dist/chunk-UJCSKKID.mjs +27 -0
  116. package/dist/{chunk-FVSQ6BU6.mjs → chunk-XGPHQHLR.mjs} +4 -4
  117. package/dist/docs/index.js +1 -1
  118. package/dist/docs/index.mjs +1 -1
  119. package/dist/full/index.js +8 -6
  120. package/dist/full/index.mjs +6 -4
  121. package/dist/index.d.mts +1 -0
  122. package/dist/index.d.ts +1 -0
  123. package/dist/index.js +15 -13
  124. package/dist/index.mjs +7 -5
  125. package/dist/metadata/index.d.mts +22 -2
  126. package/dist/metadata/index.d.ts +22 -2
  127. package/dist/metadata/index.js +27 -17
  128. package/dist/metadata/index.mjs +27 -16
  129. package/dist/resolve-BsLBxlBi.d.mts +24 -0
  130. package/dist/resolve-BsLBxlBi.d.ts +24 -0
  131. package/dist/runtime/index.js +5 -4
  132. package/dist/runtime/index.mjs +3 -2
  133. package/dist/shared/index.d.mts +10 -0
  134. package/dist/shared/index.d.ts +10 -0
  135. package/dist/shared/index.js +23 -0
  136. package/dist/shared/index.mjs +2 -0
  137. package/dist/static/index.js +6 -5
  138. package/dist/static/index.mjs +3 -2
  139. package/docs_for_llm/actions.doc.md +77 -0
  140. package/docs_for_llm/advancedset.doc.md +89 -0
  141. package/docs_for_llm/affix.doc.md +15 -7
  142. package/docs_for_llm/aksk.doc.md +111 -0
  143. package/docs_for_llm/az.doc.md +17 -11
  144. package/docs_for_llm/badge.doc.md +6 -5
  145. package/docs_for_llm/billtypes.doc.md +17 -11
  146. package/docs_for_llm/breadcrumb.doc.md +6 -3
  147. package/docs_for_llm/button.doc.md +34 -18
  148. package/docs_for_llm/buttonlink.doc.md +55 -0
  149. package/docs_for_llm/card.doc.md +8 -5
  150. package/docs_for_llm/cardcol.doc.md +78 -0
  151. package/docs_for_llm/cardcols.doc.md +84 -0
  152. package/docs_for_llm/cardcontent.doc.md +10 -10
  153. package/docs_for_llm/cardtabs.doc.md +106 -0
  154. package/docs_for_llm/carousel.doc.md +8 -7
  155. package/docs_for_llm/cascader.doc.md +46 -25
  156. package/docs_for_llm/checkbox.doc.md +25 -13
  157. package/docs_for_llm/cidrinput.doc.md +83 -0
  158. package/docs_for_llm/code.doc.md +22 -11
  159. package/docs_for_llm/collapse.doc.md +9 -6
  160. package/docs_for_llm/colorpicker.doc.md +104 -0
  161. package/docs_for_llm/copy.doc.md +15 -13
  162. package/docs_for_llm/copyhover.doc.md +59 -0
  163. package/docs_for_llm/copyrow.doc.md +71 -0
  164. package/docs_for_llm/datepicker.doc.md +51 -39
  165. package/docs_for_llm/description.doc.md +75 -0
  166. package/docs_for_llm/descriptions.doc.md +9 -6
  167. package/docs_for_llm/dialog.doc.md +48 -77
  168. package/docs_for_llm/divider.doc.md +9 -7
  169. package/docs_for_llm/drawer.doc.md +43 -84
  170. package/docs_for_llm/dropdown.doc.md +52 -21
  171. package/docs_for_llm/duration.doc.md +76 -0
  172. package/docs_for_llm/editable.doc.md +36 -14
  173. package/docs_for_llm/ellipsis.doc.md +10 -5
  174. package/docs_for_llm/filtertablefieldsdialog.doc.md +99 -0
  175. package/docs_for_llm/flex.doc.md +74 -0
  176. package/docs_for_llm/form.doc.md +33 -14
  177. package/docs_for_llm/formiteminput.doc.md +128 -0
  178. package/docs_for_llm/formitemspinner.doc.md +105 -0
  179. package/docs_for_llm/formitemswitch.doc.md +113 -0
  180. package/docs_for_llm/formitemtableconfigs.doc.md +95 -0
  181. package/docs_for_llm/grid.doc.md +7 -5
  182. package/docs_for_llm/header.doc.md +85 -0
  183. package/docs_for_llm/icon.doc.md +12 -8
  184. package/docs_for_llm/icontooltip.doc.md +121 -0
  185. package/docs_for_llm/input.doc.md +90 -39
  186. package/docs_for_llm/instancelist.doc.md +113 -0
  187. package/docs_for_llm/instancenum.doc.md +95 -0
  188. package/docs_for_llm/ipinput.doc.md +77 -0
  189. package/docs_for_llm/kspstatus.doc.md +82 -0
  190. package/docs_for_llm/kvcode.doc.md +76 -0
  191. package/docs_for_llm/layoutcontent.doc.md +17 -17
  192. package/docs_for_llm/layoutlistcontent.doc.md +95 -0
  193. package/docs_for_llm/layoutpermissioncontent.doc.md +84 -0
  194. package/docs_for_llm/layoutstandardlist.doc.md +120 -0
  195. package/docs_for_llm/layouttabs.doc.md +101 -0
  196. package/docs_for_llm/lazymount.doc.md +73 -0
  197. package/docs_for_llm/lazyteleport.doc.md +76 -0
  198. package/docs_for_llm/menu.doc.md +14 -11
  199. package/docs_for_llm/message.doc.md +48 -10
  200. package/docs_for_llm/pagination.doc.md +30 -17
  201. package/docs_for_llm/paginationplus.doc.md +31 -10
  202. package/docs_for_llm/password.doc.md +86 -0
  203. package/docs_for_llm/popover.doc.md +24 -55
  204. package/docs_for_llm/progress.doc.md +13 -10
  205. package/docs_for_llm/projects.doc.md +91 -0
  206. package/docs_for_llm/protable.doc.md +89 -15
  207. package/docs_for_llm/queuevisualrange.doc.md +78 -0
  208. package/docs_for_llm/radio.doc.md +23 -8
  209. package/docs_for_llm/rate.doc.md +122 -0
  210. package/docs_for_llm/region.doc.md +25 -13
  211. package/docs_for_llm/search.doc.md +120 -0
  212. package/docs_for_llm/searchinput.doc.md +111 -0
  213. package/docs_for_llm/searchitems.doc.md +116 -0
  214. package/docs_for_llm/searchselect.doc.md +126 -0
  215. package/docs_for_llm/select.doc.md +40 -55
  216. package/docs_for_llm/sidebar.doc.md +133 -0
  217. package/docs_for_llm/skeleton.doc.md +117 -0
  218. package/docs_for_llm/slider.doc.md +31 -21
  219. package/docs_for_llm/spin.doc.md +8 -5
  220. package/docs_for_llm/spinner.doc.md +28 -18
  221. package/docs_for_llm/split.doc.md +157 -0
  222. package/docs_for_llm/sshkeys.doc.md +88 -0
  223. package/docs_for_llm/status.doc.md +14 -9
  224. package/docs_for_llm/steps.doc.md +10 -7
  225. package/docs_for_llm/switch.doc.md +17 -14
  226. package/docs_for_llm/table.doc.md +118 -51
  227. package/docs_for_llm/tablecolumnid.doc.md +36 -16
  228. package/docs_for_llm/tabs.doc.md +19 -10
  229. package/docs_for_llm/tag.doc.md +19 -10
  230. package/docs_for_llm/timeline.doc.md +109 -0
  231. package/docs_for_llm/timepicker.doc.md +57 -38
  232. package/docs_for_llm/timerange.doc.md +157 -0
  233. package/docs_for_llm/tip.doc.md +20 -11
  234. package/docs_for_llm/tooltip.doc.md +55 -29
  235. package/docs_for_llm/tour.doc.md +48 -29
  236. package/docs_for_llm/transfer.doc.md +40 -29
  237. package/docs_for_llm/tree.doc.md +65 -23
  238. package/docs_for_llm/treeselect.doc.md +37 -48
  239. package/docs_for_llm/upload.doc.md +56 -32
  240. package/docs_for_llm/useCRUD.doc.md +49 -0
  241. package/docs_for_llm/useCountdown.doc.md +43 -0
  242. package/docs_for_llm/useDetail.doc.md +48 -0
  243. package/docs_for_llm/useDialog.doc.md +46 -0
  244. package/docs_for_llm/useEntity.doc.md +45 -0
  245. package/docs_for_llm/useEventListener.doc.md +44 -0
  246. package/docs_for_llm/useFalseUntilTruthy.doc.md +41 -0
  247. package/docs_for_llm/useGetCopyAuthText.doc.md +35 -0
  248. package/docs_for_llm/useGetUserPermission.doc.md +43 -0
  249. package/docs_for_llm/useGroup.doc.md +48 -0
  250. package/docs_for_llm/useIdEntities.doc.md +48 -0
  251. package/docs_for_llm/useIdEntity.doc.md +103 -0
  252. package/docs_for_llm/useInterval.doc.md +43 -0
  253. package/docs_for_llm/useLayoutStandardList.doc.md +38 -0
  254. package/docs_for_llm/useMessage.doc.md +46 -0
  255. package/docs_for_llm/useModifyCache.doc.md +37 -0
  256. package/docs_for_llm/useOpenDialog.doc.md +41 -0
  257. package/docs_for_llm/usePagination.doc.md +60 -0
  258. package/docs_for_llm/usePersist.doc.md +54 -0
  259. package/docs_for_llm/usePoll.doc.md +41 -0
  260. package/docs_for_llm/useRoutePlus.doc.md +34 -0
  261. package/docs_for_llm/useRouterPlus.doc.md +34 -0
  262. package/docs_for_llm/useSearch.doc.md +68 -0
  263. package/docs_for_llm/useShell.doc.md +43 -0
  264. package/docs_for_llm/useSkip.doc.md +41 -0
  265. package/docs_for_llm/useStorageIdEntity.doc.md +46 -0
  266. package/docs_for_llm/useStore.doc.md +34 -0
  267. package/docs_for_llm/useTable.doc.md +57 -0
  268. package/docs_for_llm/useTableGroup.doc.md +47 -0
  269. package/docs_for_llm/useTableSort.doc.md +40 -0
  270. package/docs_for_llm/useToState.doc.md +112 -0
  271. package/docs_for_llm/useUser.doc.md +38 -0
  272. package/docs_for_llm/useValidForm.doc.md +41 -0
  273. package/docs_for_llm/vdialog.doc.md +129 -0
  274. package/docs_for_llm/vdrawer.doc.md +119 -0
  275. package/docs_for_llm/virtuallist.doc.md +6 -3
  276. package/hooks/useCRUD.json +61 -0
  277. package/hooks/useCountdown.json +49 -0
  278. package/hooks/useDetail.json +67 -0
  279. package/hooks/useDialog.json +49 -0
  280. package/hooks/useEntity.json +61 -0
  281. package/hooks/useEventListener.json +61 -0
  282. package/hooks/useFalseUntilTruthy.json +43 -0
  283. package/hooks/useGetCopyAuthText.json +36 -0
  284. package/hooks/useGetUserPermission.json +55 -0
  285. package/hooks/useGroup.json +49 -0
  286. package/hooks/useIdEntities.json +61 -0
  287. package/hooks/useInterval.json +55 -0
  288. package/hooks/useLayoutStandardList.json +36 -0
  289. package/hooks/useMessage.json +73 -0
  290. package/hooks/useModifyCache.json +36 -0
  291. package/hooks/useOpenDialog.json +43 -0
  292. package/hooks/usePagination.json +49 -0
  293. package/hooks/usePersist.json +61 -0
  294. package/hooks/usePoll.json +43 -0
  295. package/hooks/useRoutePlus.json +36 -0
  296. package/hooks/useRouterPlus.json +36 -0
  297. package/hooks/useSearch.json +56 -0
  298. package/hooks/useShell.json +49 -0
  299. package/hooks/useSkip.json +43 -0
  300. package/hooks/useStorageIdEntity.json +67 -0
  301. package/hooks/useStore.json +36 -0
  302. package/hooks/useTable.json +49 -0
  303. package/hooks/useTableGroup.json +43 -0
  304. package/hooks/useTableSort.json +43 -0
  305. package/hooks/useUser.json +36 -0
  306. package/hooks/useValidForm.json +43 -0
  307. package/package.json +12 -6
  308. package/dist/chunk-HDV7ETXE.mjs +0 -1055
  309. package/dist/chunk-HPAUCD5I.js +0 -156
  310. package/dist/chunk-L4DS3EXI.mjs +0 -133
  311. package/dist/chunk-YWY3D4J7.js +0 -1082
@@ -12,13 +12,13 @@ import { Message } from '@king-design/vue';
12
12
  ```
13
13
 
14
14
  ## 属性 (Props)
15
- | 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
16
- | --- | --- | --- | --- | --- | --- |
17
- | content | `string | VNode` | `undefined` | 否 | 提示内容 | `Message.info({ content: '提示内容' })` |
18
- | duration | `number` | `5000` | 否 | 提示展示多长时间后自动关闭,传入 0 时不自动关闭,单位 ms | `Message.info('提示', 10000)` |
19
- | type | `"info" | "error" | "success" | "warning"` | `"info"` | 否 | 提示类型 | `Message.success('成功')` |
20
- | closable | `boolean` | `false` | 否 | 是否展示关闭按钮 | `Message.info({ content: '可关闭', closable: true })` |
21
- | hideIcon | `boolean` | `false` | 否 | 是否隐藏文字前面的图标 | `Message.info({ content: '无图标', hideIcon: true })` |
15
+ | 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
16
+ | --- | --- | --- | --- | --- | --- | --- |
17
+ | content | `string | VNode` | `undefined` | 否 | 提示内容 | - | `Message.info({ content: '提示内容' })` |
18
+ | duration | `number` | `5000` | 否 | 提示展示多长时间后自动关闭,传入 0 时不自动关闭,单位 ms | - | `Message.info('提示', 10000)` |
19
+ | type | `"info" | "error" | "success" | "warning"` | `"info"` | 否 | 提示类型 | - | `Message.success('成功')` |
20
+ | closable | `boolean` | `false` | 否 | 是否展示关闭按钮 | - | `Message.info({ content: '可关闭', closable: true })` |
21
+ | hideIcon | `boolean` | `false` | 否 | 是否隐藏文字前面的图标 | - | `Message.info({ content: '无图标', hideIcon: true })` |
22
22
 
23
23
  ## 方法 (Methods)
24
24
  | 方法名 | 说明 | 参数 | 返回值 |
@@ -28,17 +28,49 @@ import { Message } from '@king-design/vue';
28
28
  | warning | 显示警告提示消息 | `content: string | VNode | Partial<MessageProps>, duration: number` | `void` |
29
29
  | error | 显示错误提示消息 | `content: string | VNode | Partial<MessageProps>, duration: number` | `void` |
30
30
 
31
+ ### 方法参数说明
32
+ **info**
33
+
34
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
35
+ | --- | --- | --- | --- | --- |
36
+ | content | `string | VNode | Partial<MessageProps>` | 是 | - | 提示内容或配置对象 |
37
+ | duration | `number` | 是 | - | 可选,显示时长(ms) |
38
+
39
+ **success**
40
+
41
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
42
+ | --- | --- | --- | --- | --- |
43
+ | content | `string | VNode | Partial<MessageProps>` | 是 | - | 提示内容或配置对象 |
44
+ | duration | `number` | 是 | - | 可选,显示时长(ms) |
45
+
46
+ **warning**
47
+
48
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
49
+ | --- | --- | --- | --- | --- |
50
+ | content | `string | VNode | Partial<MessageProps>` | 是 | - | 提示内容或配置对象 |
51
+ | duration | `number` | 是 | - | 可选,显示时长(ms) |
52
+
53
+ **error**
54
+
55
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
56
+ | --- | --- | --- | --- | --- |
57
+ | content | `string | VNode | Partial<MessageProps>` | 是 | - | 提示内容或配置对象 |
58
+ | duration | `number` | 是 | - | 可选,显示时长(ms) |
59
+
31
60
  ## 常见错误与正确用法 (Anti-Hallucination)
61
+ ### 未导入 Message 组件
32
62
  > **错误用法**: `Message.success('成功'); // ReferenceError: Message is not defined`
33
63
  > **正确写法**: `import { Message } from '@king-design/vue';
34
64
 
35
65
  Message.success('成功');`
36
66
  > **说明**: 使用 Message 前需要先从 @king-design/vue 导入
37
67
 
68
+ ### duration 使用字符串而非数字
38
69
  > **错误用法**: `Message.info('提示', '5000');`
39
70
  > **正确写法**: `Message.info('提示', 5000);`
40
71
  > **说明**: duration 必须是数字类型,单位是毫秒
41
72
 
73
+ ### 传入配置对象时忘记设置 content
42
74
  > **错误用法**: `Message.info({ duration: 10000 });`
43
75
  > **正确写法**: `Message.info({ content: '提示内容', duration: 10000 });`
44
76
  > **说明**: 使用配置对象时必须包含 content 属性
@@ -49,6 +81,8 @@ Message.success('成功');`
49
81
 
50
82
  基本的消息提示
51
83
 
84
+ **使用的 API**: 方法: info
85
+
52
86
  ```vue
53
87
  <script setup lang="ts">
54
88
  import { Button, Message } from '@king-design/vue';
@@ -67,6 +101,8 @@ const showMessage = () => {
67
101
 
68
102
  四种类型的消息提示
69
103
 
104
+ **使用的 API**: 方法: success, warning, error, info
105
+
70
106
  ```vue
71
107
  <script setup lang="ts">
72
108
  import { Button, Message } from '@king-design/vue';
@@ -89,7 +125,7 @@ const showInfo = () => Message.info('提示信息');
89
125
 
90
126
  设置消息显示时长
91
127
 
92
- **使用的 API**: 属性: duration
128
+ **使用的 API**: 属性: duration | 方法: info, warning
93
129
 
94
130
  ```vue
95
131
  <script setup lang="ts">
@@ -116,7 +152,7 @@ const showPermanent = () => {
116
152
 
117
153
  带关闭按钮的消息
118
154
 
119
- **使用的 API**: 属性: content, closable, duration
155
+ **使用的 API**: 属性: content, closable, duration | 方法: info
120
156
 
121
157
  ```vue
122
158
  <script setup lang="ts">
@@ -140,7 +176,7 @@ const showMessage = () => {
140
176
 
141
177
  不显示图标的消息
142
178
 
143
- **使用的 API**: 属性: content, hideIcon
179
+ **使用的 API**: 属性: content, hideIcon | 方法: success
144
180
 
145
181
  ```vue
146
182
  <script setup lang="ts">
@@ -163,6 +199,8 @@ const showMessage = () => {
163
199
 
164
200
  常见的 API 请求结果提示
165
201
 
202
+ **使用的 API**: 方法: success, error
203
+
166
204
  ```vue
167
205
  <script setup lang="ts">
168
206
  import { ref } from 'vue';
@@ -12,29 +12,36 @@ import { Pagination } from '@king-design/vue';
12
12
  ```
13
13
 
14
14
  ## 属性 (Props)
15
- | 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
16
- | --- | --- | --- | --- | --- | --- |
17
- | value | `number` | `1` | 否 | 当前页码,可用 v-model 双向绑定 | `<Pagination v-model="currentPage" :total="100" />` |
18
- | total | `number` | `0` | 否 | 数据总条数 | `<Pagination :total="1000" />` |
19
- | limit | `number` | `10` | 否 | 每页条数,可用 v-model:limit 双向绑定 | `<Pagination v-model:limit="pageSize" :total="100" />` |
20
- | limits | `Array<number>` | `[10, 20, 50]` | 否 | 可选的每页条数列表 | `<Pagination :limits="[20, 50, 100, 200]" :total="1000" />` |
21
- | size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | `<Pagination size="small" :total="100" />` |
22
- | counts | `number` | `7` | 否 | 展示的页码按钮个数 | `<Pagination :counts="5" :total="100" />` |
23
- | flat | `boolean` | `false` | 否 | 是否展示无边框样式 | `<Pagination flat :total="100" />` |
24
- | simple | `boolean` | `false` | 否 | 是否展示简洁样式 | `<Pagination simple :total="100" />` |
25
- | showTotal | `boolean` | `true` | 否 | 是否显示总条数 | `<Pagination :showTotal="false" :total="100" />` |
26
- | showGoto | `boolean` | `false` | 否 | 是否显示快速跳转框 | `<Pagination showGoto :total="100" />` |
27
- | showLimits | `boolean` | `true` | 否 | 是否显示每页条数选择框 | `<Pagination :showLimits="false" :total="100" />` |
28
- | disableBtn | `(page: number, limit: number) => boolean` | `undefined` | 否 | 禁用页码按钮的函数,"上一页""下一页"按钮依然可点 | `<Pagination :disableBtn="(page) => page > 10" :total="200" /></Pagination>` |
29
- | disablePage | `(page: number, limit: number) => boolean` | `undefined` | 否 | 同时禁用页码按钮和"上一页""下一页"按钮的函数 | `<Pagination :disablePage="(page) => page > 10" :total="200" /></Pagination>` |
15
+ | 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
16
+ | --- | --- | --- | --- | --- | --- | --- |
17
+ | value | `number` | `1` | 否 | 当前页码,可用 v-model 双向绑定 | - | `<Pagination v-model="currentPage" :total="100" />` |
18
+ | total | `number` | `0` | 否 | 数据总条数 | - | `<Pagination :total="1000" />` |
19
+ | limit | `number` | `10` | 否 | 每页条数,可用 v-model:limit 双向绑定 | - | `<Pagination v-model:limit="pageSize" :total="100" />` |
20
+ | limits | `Array<number>` | `[10, 20, 50]` | 否 | 可选的每页条数列表 | - | `<Pagination :limits="[20, 50, 100, 200]" :total="1000" />` |
21
+ | size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | - | `<Pagination size="small" :total="100" />` |
22
+ | counts | `number` | `7` | 否 | 展示的页码按钮个数 | - | `<Pagination :counts="5" :total="100" />` |
23
+ | flat | `boolean` | `false` | 否 | 是否展示无边框样式 | - | `<Pagination flat :total="100" />` |
24
+ | simple | `boolean` | `false` | 否 | 是否展示简洁样式 | - | `<Pagination simple :total="100" />` |
25
+ | showTotal | `boolean` | `true` | 否 | 是否显示总条数 | - | `<Pagination :showTotal="false" :total="100" />` |
26
+ | showGoto | `boolean` | `false` | 否 | 是否显示快速跳转框 | - | `<Pagination showGoto :total="100" />` |
27
+ | showLimits | `boolean` | `true` | 否 | 是否显示每页条数选择框 | - | `<Pagination :showLimits="false" :total="100" />` |
28
+ | disableBtn | `(page: number, limit: number) => boolean` | `undefined` | 否 | 禁用页码按钮的函数,"上一页""下一页"按钮依然可点 | - | `<Pagination :disableBtn="(page) => page > 10" :total="200" /></Pagination>` |
29
+ | disablePage | `(page: number, limit: number) => boolean` | `undefined` | 否 | 同时禁用页码按钮和"上一页""下一页"按钮的函数 | - | `<Pagination :disablePage="(page) => page > 10" :total="200" /></Pagination>` |
30
30
 
31
31
  ## 事件 (Events)
32
32
  | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
33
33
  | --- | --- | --- | --- | --- |
34
34
  | change | `@change` | value 和 limit 变化时触发,同时变化不会重复触发 | `value: number, limit: number` | `<Pagination @change="handleChange" :total="100" />` |
35
35
 
36
- ### 事件处理函数示例
37
- **change**:
36
+ ### 事件参数说明
37
+ **change**
38
+
39
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
40
+ | --- | --- | --- | --- | --- |
41
+ | value | `number` | 是 | - | 当前页码 |
42
+ | limit | `number` | 是 | - | 每页条数 |
43
+
44
+ 事件处理示例:
38
45
  ```typescript
39
46
  const handleChange = ({value, limit}: {value: number; limit: number}) => {
40
47
  console.log(`当前页: ${value}, 每页: ${limit}`);
@@ -43,26 +50,32 @@ const handleChange = ({value, limit}: {value: number; limit: number}) => {
43
50
  ```
44
51
 
45
52
  ## 常见错误与正确用法 (Anti-Hallucination)
53
+ ### 未设置 total 属性
46
54
  > **错误用法**: `<Pagination v-model="currentPage" />`
47
55
  > **正确写法**: `<Pagination v-model="currentPage" :total="100" />`
48
56
  > **说明**: 必须设置 total 属性来指定数据总条数,否则分页无法正确计算总页数
49
57
 
58
+ ### 使用不存在的 size 值 (Pagination)
50
59
  > **错误用法**: `<Pagination size="medium" :total="100" />`
51
60
  > **正确写法**: `<Pagination size="default" :total="100" />`
52
61
  > **说明**: Pagination 的 size 只支持 large, default, small, mini。常见错误是使用 medium 值。
53
62
 
63
+ ### limit 值不在 limits 列表中
54
64
  > **错误用法**: `<Pagination :limit="15" :limits="[10, 20, 50]" :total="100" />`
55
65
  > **正确写法**: `<Pagination :limit="10" :limits="[10, 20, 50]" :total="100" />`
56
66
  > **说明**: limit 的初始值应该在 limits 列表中,否则可能导致显示异常
57
67
 
68
+ ### change 事件参数解构错误
58
69
  > **错误用法**: `const handleChange = (value, limit) => {}`
59
70
  > **正确写法**: `const handleChange = ({value, limit}: {value: number; limit: number}) => {}`
60
71
  > **说明**: change 事件的参数是一个对象,需要解构获取 value 和 limit
61
72
 
73
+ ### 错误使用 Element UI 风格事件名
62
74
  > **错误用法**: `<Pagination @current-change="..." @size-change="..." />`
63
75
  > **正确写法**: `<Pagination @change="..." />`
64
76
  > **说明**: KPC Pagination 不支持 `@current-change` 或 `@size-change`,请统一使用 `@change` 事件监听页码或每页条数变化。
65
77
 
78
+ ### 建议使用 v-model 进行双向绑定
66
79
  > **错误用法**: `<Pagination :value="page" :limit="size" @change="..." />`
67
80
  > **正确写法**: `<Pagination v-model="page" v-model:limit="size" />`
68
81
  > **说明**: 推荐使用 `v-model` 绑定当前页码,`v-model:limit` 绑定每页条数,更加简洁。
@@ -2,9 +2,9 @@
2
2
 
3
3
  集成选中统计和操作的分页组件,继承自 Pagination。
4
4
 
5
- **关键词**: pagination, page, paging, 分页
5
+ **关键词**: pagination, page, paging, 分页, 增强分页, 选中统计分页, 列表底部分页
6
6
 
7
- **使用场景**: 列表页分页控制
7
+ **使用场景**: 列表页分页控制、批量勾选后的分页统计、带选中数量提示的资源列表分页
8
8
 
9
9
  ## 导入语句
10
10
  ```typescript
@@ -12,21 +12,42 @@ import { PaginationPlus } from '@ksyun-internal/versatile';
12
12
  ```
13
13
 
14
14
  ## 属性 (Props)
15
- | 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
16
- | --- | --- | --- | --- | --- | --- |
17
- | modelValue | `number` | `undefined` | 否 | 当前页码 | - |
18
- | checkedKeys | `any[]` | `undefined` | 否 | 选中的行的 key 列表 | - |
19
- | checkedLength | `number` | `undefined` | 否 | 选中的总数量 | - |
20
- | showCheckedTotal | `boolean` | `true` | 否 | 是否显示选中统计信息 | - |
15
+ | 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
16
+ | --- | --- | --- | --- | --- | --- | --- |
17
+ | total | `number` | `0` | 否 | 数据总条数 | `inherited:Pagination` | `<Pagination :total="1000" />` |
18
+ | limit | `number` | `10` | 否 | 每页条数,可用 v-model:limit 双向绑定 | `inherited:Pagination` | `<Pagination v-model:limit="pageSize" :total="100" />` |
19
+ | limits | `Array<number>` | `[10, 20, 50]` | 否 | 可选的每页条数列表 | `inherited:Pagination` | `<Pagination :limits="[20, 50, 100, 200]" :total="1000" />` |
20
+ | size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | `inherited:Pagination` | `<Pagination size="small" :total="100" />` |
21
+ | counts | `number` | `7` | 否 | 展示的页码按钮个数 | `inherited:Pagination` | `<Pagination :counts="5" :total="100" />` |
22
+ | flat | `boolean` | `false` | 否 | 是否展示无边框样式 | `inherited:Pagination` | `<Pagination flat :total="100" />` |
23
+ | simple | `boolean` | `false` | 否 | 是否展示简洁样式 | `inherited:Pagination` | `<Pagination simple :total="100" />` |
24
+ | showTotal | `boolean` | `true` | 否 | 是否显示总条数 | `inherited:Pagination` | `<Pagination :showTotal="false" :total="100" />` |
25
+ | showGoto | `boolean` | `false` | 否 | 是否显示快速跳转框 | `inherited:Pagination` | `<Pagination showGoto :total="100" />` |
26
+ | showLimits | `boolean` | `true` | 否 | 是否显示每页条数选择框 | `inherited:Pagination` | `<Pagination :showLimits="false" :total="100" />` |
27
+ | disableBtn | `(page: number, limit: number) => boolean` | `undefined` | 否 | 禁用页码按钮的函数,"上一页""下一页"按钮依然可点 | `inherited:Pagination` | `<Pagination :disableBtn="(page) => page > 10" :total="200" /></Pagination>` |
28
+ | disablePage | `(page: number, limit: number) => boolean` | `undefined` | 否 | 同时禁用页码按钮和"上一页""下一页"按钮的函数 | `inherited:Pagination` | `<Pagination :disablePage="(page) => page > 10" :total="200" /></Pagination>` |
29
+ | modelValue | `number` | `undefined` | 否 | 当前页码 | - | - |
30
+ | checkedKeys | `any[]` | `undefined` | 否 | 选中的行的 key 列表 | - | - |
31
+ | checkedLength | `number` | `undefined` | 否 | 选中的总数量 | - | - |
32
+ | showCheckedTotal | `boolean` | `true` | 否 | 是否显示选中统计信息 | - | - |
21
33
 
22
34
  ## 事件 (Events)
23
35
  | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
24
36
  | --- | --- | --- | --- | --- |
25
37
  | change | `change` | 页码或每页条数改变时触发 | `data: { page: number, limit: number }` | `<PaginationPlus @change="onChange" />` |
26
38
 
27
- ### 事件处理函数示例
28
- **change**:
39
+ ### 事件参数说明
40
+ **change**
41
+
42
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
43
+ | --- | --- | --- | --- | --- |
44
+ | data | `{ page: number, limit: number }` | 是 | - | 分页信息 |
45
+
46
+ 事件处理示例:
29
47
  ```typescript
30
48
  ({ page, limit }) => { params.page = page; }
31
49
  ```
32
50
 
51
+ ## 相关组件
52
+ Pagination, ProTable
53
+
@@ -0,0 +1,86 @@
1
+ # 密码输入 (Password)
2
+
3
+ 面向密码录入的业务输入组件,内置校验能力和错误提示展示,适合实例登录密码、数据库密码等安全场景。
4
+
5
+ **关键词**: password, password input, 密码输入, 密码校验, 数据库密码, 登录密码
6
+
7
+ **使用场景**: 账号凭证录入、新建实例密码配置、数据库密码复杂度校验
8
+
9
+ ## 导入语句
10
+ ```typescript
11
+ import { Password } from '@ksyun-internal/versatile';
12
+ ```
13
+
14
+ ## 属性 (Props)
15
+ | 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
16
+ | --- | --- | --- | --- | --- | --- | --- |
17
+ | modelValue | `string` | `undefined` | 否 | 当前密码值 | - | - |
18
+ | validate | `string | Function` | `undefined` | 否 | 自定义校验函数或校验规则 | - | - |
19
+ | errorMessage | `string` | `undefined` | 否 | 校验失败时的错误提示文案 | - | - |
20
+
21
+ ## 事件 (Events)
22
+ | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
23
+ | --- | --- | --- | --- | --- |
24
+ | update:modelValue | `@update:modelValue` | 密码内容变化时触发,可与父级表单或强度校验逻辑联动。 | `value?: string` | - |
25
+
26
+ ### 事件参数说明
27
+ **update:modelValue**
28
+
29
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
30
+ | --- | --- | --- | --- | --- |
31
+ | value | `string` | 否 | - | 当前输入的密码值。 |
32
+
33
+ ## 使用示例
34
+ ### 实例登录密码录入
35
+ **场景**: 在创建实例或重置密码时录入并校验登录密码。
36
+
37
+ 结合 validate 和错误提示控制密码输入质量。
38
+
39
+ **使用的 API**: 属性: modelValue, validate, errorMessage | 事件: update:modelValue
40
+
41
+ ```vue
42
+ <script setup lang="ts">
43
+ import { ref } from 'vue';
44
+ import { Password } from '@ksyun-internal/versatile';
45
+
46
+ const password = ref('');
47
+ const validate = (value: string) => /^(?=.*[A-Z])(?=.*\d).{8,}$/.test(value);
48
+ </script>
49
+
50
+ <template>
51
+ <Password
52
+ v-model="password"
53
+ :validate="validate"
54
+ error-message="至少 8 位,且必须包含大写字母和数字"
55
+ />
56
+ </template>
57
+ ```
58
+
59
+ ### 数据库密码规则校验
60
+ **场景**: 在数据库创建页中校验更严格的密码复杂度要求。
61
+
62
+ 通过自定义规则约束数据库密码长度和复杂度。
63
+
64
+ **使用的 API**: 属性: modelValue, validate, errorMessage | 事件: update:modelValue
65
+
66
+ ```vue
67
+ <script setup lang="ts">
68
+ import { ref } from 'vue';
69
+ import { Password } from '@ksyun-internal/versatile';
70
+
71
+ const password = ref('');
72
+ const validate = (value: string) => value.length >= 12 && /[A-Z]/.test(value) && /\d/.test(value);
73
+ </script>
74
+
75
+ <template>
76
+ <Password
77
+ v-model="password"
78
+ :validate="validate"
79
+ error-message="至少 12 位,并包含大写字母和数字"
80
+ />
81
+ </template>
82
+ ```
83
+
84
+ ## 相关组件
85
+ Input
86
+
@@ -12,77 +12,46 @@ import { Popover } from '@king-design/vue';
12
12
  ```
13
13
 
14
14
  ## 属性 (Props)
15
- | 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
16
- | --- | --- | --- | --- | --- | --- |
17
- | title | `string | VNode` | `undefined` | 否 | 提示的标题 | `<Popover title="确认操作"></Popover>` |
18
- | content | `string | VNode` | `undefined` | 否 | 提示的内容 | `<Popover content="你确定要执行此操作吗?"></Popover>` |
19
- | type | `"info" | "success" | "error" | "warning"` | `undefined` | 否 | 提示的类型,不同类型显示不同的图标 | `<Popover type="warning"></Popover>` |
20
- | value | `boolean` | `false` | 否 | 是否展示弹层,可用 v-model 双向绑定 | `<Popover v-model="visible"></Popover>` |
21
- | disabled | `boolean` | `false` | 否 | 是否禁用组件 | `<Popover disabled></Popover>` |
22
- | position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` | 否 | 弹层弹出的位置,默认在触发器正上方 | `<Popover position="right"></Popover>` |
23
- | showArrow | `boolean` | `true` | 否 | 弹层是否展示箭头 | `<Popover :showArrow="false"></Popover>` |
24
- | always | `boolean` | `false` | 否 | 是否一直保持当前展示/隐藏状态 | `<Popover always></Popover>` |
25
- | size | `"default" | "small"` | `"default"` | 否 | 弹层尺寸 | `<Popover size="small"></Popover>` |
26
- | okText | `string` | `"确认"` | 否 | "确认"按钮文案 | `<Popover okText=""></Popover>` |
27
- | cancelText | `string` | `"取消"` | 否 | "取消"按钮文案 | `<Popover cancelText=""></Popover>` |
28
- | of | `"self" | "parent" | Event` | `"self"` | | 弹出菜单的位置是相对当前触发元素还是父元素 | `<Popover of="parent"></Popover>` |
29
- | container | `string | ((parentDom: Element, anchor: Node | null) => Element)` | `undefined` | 否 | 指定弹出菜单追加的位置,默认追加到 body | `<Popover :container="() => document.body"></Popover>` |
15
+ | 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
16
+ | --- | --- | --- | --- | --- | --- | --- |
17
+ | title | `string | VNode` | `undefined` | 否 | 提示的标题 | - | `<Popover title="确认操作">` |
18
+ | content | `string | VNode` | `undefined` | 否 | 提示的内容 | - | `<Popover content="你确定要执行此操作吗?">` |
19
+ | type | `"info" | "success" | "error" | "warning"` | `undefined` | 否 | 提示的类型,不同类型显示不同的图标 | - | `<Popover type="warning">` |
20
+ | value | `boolean` | `false` | 否 | 是否展示弹层,可用 v-model 双向绑定 | - | `<Popover v-model="visible">` |
21
+ | disabled | `boolean` | `false` | 否 | 是否禁用组件 | - | `<Popover disabled>` |
22
+ | position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` | 否 | 弹层弹出的位置,默认在触发器正上方 | - | `<Popover position="right">` |
23
+ | collison | `Collision | [Collision, Collision]` | `undefined` | 否 | 碰撞检测策略,控制弹层超出边界时的处理方式。注意源码字段名拼写为 collison。 | - | `<Popover :collison="'flipfit'">` |
24
+ | showArrow | `boolean` | `true` | 否 | 弹层是否展示箭头 | - | `<Popover :showArrow="false">` |
25
+ | always | `boolean` | `false` | 否 | 是否一直保持当前展示/隐藏状态 | - | `<Popover always>` |
26
+ | size | `"default" | "small"` | `"default"` | 否 | 弹层尺寸 | - | `<Popover size="small">` |
27
+ | okText | `string` | `"确认"` | 否 | "确认"按钮文案 | - | `<Popover okText="">` |
28
+ | cancelText | `string` | `"取消"` | | "取消"按钮文案 | - | `<Popover cancelText="">` |
29
+ | of | `"self" | "parent" | Event` | `"self"` | 否 | 弹出菜单的位置是相对当前触发元素还是父元素 | - | `<Popover of="parent">` |
30
+ | container | `string | ((parentDom: Element, anchor: Node | null) => Element)` | `undefined` | 否 | 指定弹出菜单追加的位置,默认追加到 body | - | `<Popover :container="() => document.body">` |
31
+ | alwaysShowOnClick | `boolean` | `false` | 否 | 不管什么触发方式,重复点击触发器都不隐藏弹层 | - | `<Popover alwaysShowOnClick>` |
30
32
 
31
33
  ## 事件 (Events)
32
34
  | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
33
35
  | --- | --- | --- | --- | --- |
34
- | show | `@show` | 弹层展示时触发 | `-` | `<Popover @show="handleShow"></Popover>` |
35
- | hide | `@hide` | 弹层隐藏时触发 | `-` | `<Popover @hide="handleHide"></Popover>` |
36
- | ok | `@ok` | 点击确认按钮时触发 | `-` | `<Popover @ok="handleOk"></Popover>` |
37
- | cancel | `@cancel` | 点击取消按钮时触发 | `-` | `<Popover @cancel="handleCancel"></Popover>` |
38
-
39
- ### 事件处理函数示例
40
- **show**:
41
- ```typescript
42
- const handleShow = () => {
43
- console.log('弹层已展示');
44
- };
45
- ```
46
-
47
- **hide**:
48
- ```typescript
49
- const handleHide = () => {
50
- console.log('弹层已隐藏');
51
- };
52
- ```
53
-
54
- **ok**:
55
- ```typescript
56
- const handleOk = () => {
57
- Message.success('已确认');
58
- };
59
- ```
60
-
61
- **cancel**:
62
- ```typescript
63
- const handleCancel = () => {
64
- console.log('已取消');
65
- };
66
- ```
67
-
68
- ## 插槽 (Slots)
69
- | 插槽名 | 说明 | 模板写法 | 示例 |
70
- | --- | --- | --- | --- |
71
- | title | 自定义提示标题 | `undefined` | - |
72
- | content | 自定义提示内容 | `undefined` | - |
73
- | footer | 自定义底部按钮 | `undefined` | - |
36
+ | show | `@show` | 弹层展示时触发 | `-` | `<Popover @show="handleShow">` |
37
+ | hide | `@hide` | 弹层隐藏时触发 | `-` | `<Popover @hide="handleHide">` |
38
+ | ok | `@ok` | 点击确认按钮时触发 | `-` | `<Popover @ok="handleOk">` |
39
+ | cancel | `@cancel` | 点击取消按钮时触发 | `-` | `<Popover @cancel="handleCancel">` |
74
40
 
75
41
  ## 常见错误与正确用法 (Anti-Hallucination)
42
+ ### 未提供触发元素
76
43
  > **错误用法**: `<Popover title="确认" content="内容" />`
77
44
  > **正确写法**: `<Popover title="确认" content="内容">
78
45
  <Button>点击</Button>
79
46
  </Popover>`
80
47
  > **说明**: Popover 需要包裹一个子元素作为触发器
81
48
 
49
+ ### position 值拼写错误
82
50
  > **错误用法**: `<Popover position="buttom">`
83
51
  > **正确写法**: `<Popover position="bottom">`
84
52
  > **说明**: position 只支持 top, bottom, left, right,注意拼写
85
53
 
54
+ ### 设置 type 但未显示图标
86
55
  > **错误用法**: `<Popover type="warning" content="警告内容">`
87
56
  > **正确写法**: `<Popover type="warning" title="警告" content="警告内容">`
88
57
  > **说明**: 建议同时设置 title 和 content,使提示更加清晰
@@ -12,26 +12,29 @@ import { Progress } from '@king-design/vue';
12
12
  ```
13
13
 
14
14
  ## 属性 (Props)
15
- | 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
16
- | --- | --- | --- | --- | --- | --- |
17
- | percent | `number | string` | `0` | 否 | 当前百分比 (0-100) | `<Progress :percent="50" />` |
18
- | type | `"bar" | "circle"` | `"bar"` | 否 | 进度条类型 | `<Progress type="circle" :percent="75" />` |
19
- | status | `"success" | "error" | "active" | "normal" | "warning"` | `"active"` | 否 | 进度条状态,决定颜色 | `<Progress :percent="100" status="success" />` |
20
- | size | `"default" | "small" | "mini"` | `"default"` | 否 | 进度条尺寸 | `<Progress :percent="50" size="small" />` |
21
- | showOuterText | `boolean` | `true` | 否 | 是否展示进度条后面的百分比文字 | `<Progress :percent="50" :showOuterText="false" />` |
22
- | showInnerText | `boolean` | `false` | 否 | 是否展示进度条上面的百分比文字 | `<Progress :percent="50" showInnerText />` |
23
- | strokeWidth | `number` | `10` | 否 | 圆形进度条的线条宽度,单位 px,只对 type="circle" 有效 | `<Progress type="circle" :percent="50" :strokeWidth="8" />` |
24
- | color | `string | Color[] | ((percent: number) => string)` | `undefined` | 否 | 进度条背景颜色,支持固定颜色、根据百分比的颜色数组或函数。会覆盖 status 设置的颜色 | `<Progress :percent="50" color="#8e44ad" />` |
15
+ | 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
16
+ | --- | --- | --- | --- | --- | --- | --- |
17
+ | percent | `number | string` | `0` | 否 | 当前百分比 (0-100) | - | `<Progress :percent="50" />` |
18
+ | type | `"bar" | "circle"` | `"bar"` | 否 | 进度条类型 | - | `<Progress type="circle" :percent="75" />` |
19
+ | status | `"success" | "error" | "active" | "normal" | "warning"` | `"active"` | 否 | 进度条状态,决定颜色 | - | `<Progress :percent="100" status="success" />` |
20
+ | size | `"default" | "small" | "mini"` | `"default"` | 否 | 进度条尺寸 | - | `<Progress :percent="50" size="small" />` |
21
+ | showOuterText | `boolean` | `true` | 否 | 是否展示进度条后面的百分比文字 | - | `<Progress :percent="50" :showOuterText="false" />` |
22
+ | showInnerText | `boolean` | `false` | 否 | 是否展示进度条上面的百分比文字 | - | `<Progress :percent="50" showInnerText />` |
23
+ | strokeWidth | `number` | `10` | 否 | 圆形进度条的线条宽度,单位 px,只对 type="circle" 有效 | - | `<Progress type="circle" :percent="50" :strokeWidth="8" />` |
24
+ | color | `string | Color[] | ((percent: number) => string)` | `undefined` | 否 | 进度条背景颜色,支持固定颜色、根据百分比的颜色数组或函数。会覆盖 status 设置的颜色 | - | `<Progress :percent="50" color="#8e44ad" />` |
25
25
 
26
26
  ## 常见错误与正确用法 (Anti-Hallucination)
27
+ ### percent 使用字符串而非数字
27
28
  > **错误用法**: `<Progress percent="50" />`
28
29
  > **正确写法**: `<Progress :percent="50" />`
29
30
  > **说明**: percent 是数字类型,需要使用 v-bind 语法 (:percent)
30
31
 
32
+ ### percent 超出 0-100 范围
31
33
  > **错误用法**: `<Progress :percent="150" />`
32
34
  > **正确写法**: `<Progress :percent="100" />`
33
35
  > **说明**: percent 的有效范围是 0-100
34
36
 
37
+ ### 在条形进度条上使用 strokeWidth
35
38
  > **错误用法**: `<Progress type="bar" :percent="50" :strokeWidth="5" /> <!-- strokeWidth 无效 -->`
36
39
  > **正确写法**: `<Progress type="circle" :percent="50" :strokeWidth="5" />`
37
40
  > **说明**: strokeWidth 只对 type="circle" 圆形进度条有效
@@ -0,0 +1,91 @@
1
+ # 项目选择 (Projects)
2
+
3
+ 用于拉取并选择当前账号项目归属的业务组件,适合在创建资源、共享资源和权限分配场景中选择项目上下文。
4
+
5
+ **关键词**: projects, project selector, 项目选择, 项目归属, 资源所属项目, project select, 项目下拉, 项目切换
6
+
7
+ **使用场景**: 项目归属选择、资源所属项目配置、按项目切换资源上下文、选择后联动项目实体信息
8
+
9
+ ## 导入语句
10
+ ```typescript
11
+ import { Projects } from '@ksyun-internal/versatile';
12
+ ```
13
+
14
+ ## 属性 (Props)
15
+ | 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
16
+ | --- | --- | --- | --- | --- | --- | --- |
17
+ | modelValue | `number` | `undefined` | 否 | 当前选中的项目 ID | - | - |
18
+ | href | `string` | `undefined` | 否 | 跳转到项目管理页的链接 | - | - |
19
+
20
+ ## 事件 (Events)
21
+ | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
22
+ | --- | --- | --- | --- | --- |
23
+ | update:modelValue | `@update:modelValue` | 选中的项目 ID 变化时触发,适合与表单主值同步。 | `value?: number` | - |
24
+ | update:project | `@update:project` | 选中的完整项目对象变化时触发,便于读取项目名称或配额信息。 | `value?: ProjectItem` | - |
25
+
26
+ ### 事件参数说明
27
+ **update:modelValue**
28
+
29
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
30
+ | --- | --- | --- | --- | --- |
31
+ | value | `number` | 否 | - | 当前选中的项目 ID。 |
32
+
33
+ **update:project**
34
+
35
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
36
+ | --- | --- | --- | --- | --- |
37
+ | value | `ProjectItem` | 否 | - | 当前选中的完整项目对象。 |
38
+
39
+ ## 使用示例
40
+ ### 选择资源所属项目
41
+ **场景**: 在创建资源或授权时指定资源归属项目。
42
+
43
+ 在创建资源时把项目选择作为基础表单项。
44
+
45
+ **使用的 API**: 属性: modelValue, href | 事件: update:modelValue, update:project
46
+
47
+ ```vue
48
+ <script setup lang="ts">
49
+ import { ref } from 'vue';
50
+ import { Projects } from '@ksyun-internal/versatile';
51
+
52
+ const projectId = ref(1001);
53
+ </script>
54
+
55
+ <template>
56
+ <Projects v-model="projectId" href="/project/list" />
57
+ </template>
58
+ ```
59
+
60
+ ### 同步项目实体信息
61
+ **场景**: 在选择项目后联动展示项目名称、配额或权限等附加信息。
62
+
63
+ 监听项目实体变化,在选择项目后立即拿到完整项目信息。
64
+
65
+ **使用的 API**: 属性: modelValue, href | 事件: update:modelValue, update:project
66
+
67
+ ```vue
68
+ <script setup lang="ts">
69
+ import { ref } from 'vue';
70
+ import { Projects } from '@ksyun-internal/versatile';
71
+
72
+ const projectId = ref<number | undefined>(undefined);
73
+ const projectName = ref('未选择');
74
+ const handleProjectChange = (project: { name?: string }) => {
75
+ projectName.value = project?.name || '未选择';
76
+ };
77
+ </script>
78
+
79
+ <template>
80
+ <Projects
81
+ v-model="projectId"
82
+ href="/project/list"
83
+ @update:project="handleProjectChange"
84
+ />
85
+ <div>当前项目:{{ projectName }}</div>
86
+ </template>
87
+ ```
88
+
89
+ ## 相关组件
90
+ Region, AZ
91
+