@a2simcode/ui 0.0.187 → 0.0.188

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 (361) hide show
  1. package/.cursor/skills/ui-component-helper/README.md +86 -86
  2. package/.cursor/skills/ui-component-helper/SKILL.md +115 -115
  3. package/LICENSE +53 -53
  4. package/README.md +156 -156
  5. package/dist/components/buttons/src/interface.d.ts +4 -0
  6. package/dist/components/input/index.d.ts +3 -3
  7. package/dist/components/input/src/input.vue.d.ts +1 -1
  8. package/dist/components/input-layer/index.d.ts +3 -3
  9. package/dist/components/input-layer/src/input-layer.vue.d.ts +1 -1
  10. package/dist/components/input-map/index.d.ts +3 -3
  11. package/dist/components/input-map/src/input-map.vue.d.ts +1 -1
  12. package/dist/components/input-tag/index.d.ts +3 -3
  13. package/dist/components/input-tag/src/input-tag.vue.d.ts +1 -1
  14. package/dist/components/time/index.d.ts +3 -3
  15. package/dist/components/time/src/time.vue.d.ts +1 -1
  16. package/dist/components/upload/index.d.ts +24 -24
  17. package/dist/components/upload/src/list.vue.d.ts +1 -1
  18. package/dist/components/upload/src/upload.vue.d.ts +8 -8
  19. package/dist/simcode-ui.es.js +458 -441
  20. package/dist/simcode-ui.umd.js +2 -2
  21. package/dist/stats.html +1 -1
  22. package/dist/ui.css +1 -1
  23. package/docs/components/autocomplete.md +89 -89
  24. package/docs/components/barcode.md +101 -101
  25. package/docs/components/button-select.md +24 -24
  26. package/docs/components/button.md +117 -117
  27. package/docs/components/buttons.md +119 -119
  28. package/docs/components/cascader-select.md +114 -114
  29. package/docs/components/checkbox.md +114 -114
  30. package/docs/components/code-mirror.md +85 -85
  31. package/docs/components/collapse.md +26 -26
  32. package/docs/components/comp.md +71 -71
  33. package/docs/components/count-up.md +24 -24
  34. package/docs/components/count.md +24 -24
  35. package/docs/components/data-panel.md +24 -24
  36. package/docs/components/date.md +76 -76
  37. package/docs/components/dialog-full.md +112 -112
  38. package/docs/components/dialog.md +127 -127
  39. package/docs/components/divider.md +24 -24
  40. package/docs/components/drawer.md +127 -127
  41. package/docs/components/dynamic-layer.md +118 -118
  42. package/docs/components/echarts.md +72 -72
  43. package/docs/components/editor.md +24 -24
  44. package/docs/components/form.md +72 -72
  45. package/docs/components/guid.md +39 -39
  46. package/docs/components/hpanel.md +24 -24
  47. package/docs/components/icon.md +56 -56
  48. package/docs/components/input-button.md +24 -24
  49. package/docs/components/input-code.md +24 -24
  50. package/docs/components/input-color.md +114 -114
  51. package/docs/components/input-layer.md +56 -56
  52. package/docs/components/input-rows.md +370 -370
  53. package/docs/components/input-tag.md +50 -50
  54. package/docs/components/input.md +129 -129
  55. package/docs/components/layer-form.md +61 -61
  56. package/docs/components/layer.md +127 -127
  57. package/docs/components/layout.md +132 -132
  58. package/docs/components/map.md +24 -24
  59. package/docs/components/menu.md +121 -121
  60. package/docs/components/meta/button.ts +212 -212
  61. package/docs/components/meta/buttons.ts +76 -76
  62. package/docs/components/meta/code-mirror.ts +108 -108
  63. package/docs/components/meta/comp.ts +236 -236
  64. package/docs/components/meta/date.ts +267 -267
  65. package/docs/components/meta/echarts.ts +64 -64
  66. package/docs/components/meta/form-item.ts +50 -50
  67. package/docs/components/meta/form.ts +181 -181
  68. package/docs/components/meta/input-button.ts +165 -165
  69. package/docs/components/meta/input-cards.ts +112 -112
  70. package/docs/components/meta/input-code.ts +151 -151
  71. package/docs/components/meta/input-color.ts +243 -243
  72. package/docs/components/meta/input-layer.ts +382 -382
  73. package/docs/components/meta/input-rows.ts +119 -119
  74. package/docs/components/meta/layer-form.ts +56 -56
  75. package/docs/components/meta/map.ts +68 -68
  76. package/docs/components/meta/panel.ts +152 -152
  77. package/docs/components/meta/slider.ts +270 -270
  78. package/docs/components/meta/table-panel.ts +237 -237
  79. package/docs/components/meta/table.ts +391 -391
  80. package/docs/components/meta/tabs.ts +146 -146
  81. package/docs/components/meta/title.ts +91 -91
  82. package/docs/components/meta/tree-select.ts +199 -199
  83. package/docs/components/meta/tree.ts +219 -219
  84. package/docs/components/meta/vpanel.ts +19 -19
  85. package/docs/components/meta/workflow-viewer.ts +55 -55
  86. package/docs/components/number.md +124 -124
  87. package/docs/components/page.md +102 -102
  88. package/docs/components/panel.md +37 -37
  89. package/docs/components/radio.md +87 -87
  90. package/docs/components/rate.md +71 -71
  91. package/docs/components/select.md +133 -133
  92. package/docs/components/slider-captcha.md +41 -41
  93. package/docs/components/slider.md +101 -101
  94. package/docs/components/switch.md +90 -90
  95. package/docs/components/table-panel.md +251 -251
  96. package/docs/components/table.md +391 -391
  97. package/docs/components/tabs.md +26 -26
  98. package/docs/components/title.md +24 -24
  99. package/docs/components/tree.md +207 -207
  100. package/docs/components/upload.md +117 -117
  101. package/docs/components/workflow-viewer.md +21 -21
  102. package/docs/components/workflow.md +21 -21
  103. package/docs/examples/autocomplete/advanced.vue +35 -35
  104. package/docs/examples/autocomplete/basic.vue +32 -32
  105. package/docs/examples/autocomplete/clearable.vue +33 -33
  106. package/docs/examples/autocomplete/custom-template.vue +49 -49
  107. package/docs/examples/autocomplete/disabled.vue +33 -33
  108. package/docs/examples/autocomplete/icon.vue +37 -37
  109. package/docs/examples/barcode/all-types.vue +380 -380
  110. package/docs/examples/barcode/basic.vue +14 -14
  111. package/docs/examples/barcode/props-appearance.vue +243 -243
  112. package/docs/examples/barcode/props-geometry.vue +143 -143
  113. package/docs/examples/barcode/props-logic.vue +216 -216
  114. package/docs/examples/barcode/props-symbology.vue +199 -199
  115. package/docs/examples/barcode/props-text.vue +268 -268
  116. package/docs/examples/button/basic.vue +7 -7
  117. package/docs/examples/button/danger-ghost.vue +17 -17
  118. package/docs/examples/button/disabled.vue +10 -10
  119. package/docs/examples/button/loading.vue +6 -6
  120. package/docs/examples/button/shape.vue +7 -7
  121. package/docs/examples/button/size.vue +14 -14
  122. package/docs/examples/button/type.vue +10 -10
  123. package/docs/examples/button-select/basic.vue +19 -19
  124. package/docs/examples/buttons/basic.vue +62 -45
  125. package/docs/examples/buttons/disabled.vue +36 -36
  126. package/docs/examples/buttons/dropdown.vue +63 -63
  127. package/docs/examples/buttons/group.vue +52 -52
  128. package/docs/examples/buttons/link.vue +47 -47
  129. package/docs/examples/buttons/popup.vue +39 -39
  130. package/docs/examples/buttons/size.vue +45 -45
  131. package/docs/examples/cascader-select/basic.vue +28 -28
  132. package/docs/examples/cascader-select/clearable.vue +34 -34
  133. package/docs/examples/cascader-select/disabled.vue +43 -43
  134. package/docs/examples/cascader-select/filterable.vue +37 -37
  135. package/docs/examples/cascader-select/methods.vue +84 -84
  136. package/docs/examples/cascader-select/multiple.vue +38 -38
  137. package/docs/examples/cascader-select/slot.vue +45 -45
  138. package/docs/examples/checkbox/basic.vue +18 -18
  139. package/docs/examples/checkbox/button.vue +19 -19
  140. package/docs/examples/checkbox/color.vue +25 -25
  141. package/docs/examples/checkbox/disabled.vue +17 -17
  142. package/docs/examples/checkbox/min-max.vue +20 -20
  143. package/docs/examples/checkbox/mixed.vue +56 -56
  144. package/docs/examples/checkbox/size.vue +28 -28
  145. package/docs/examples/code-mirror/basic.vue +11 -11
  146. package/docs/examples/code-mirror/events.vue +42 -42
  147. package/docs/examples/code-mirror/height.vue +25 -25
  148. package/docs/examples/code-mirror/mode.vue +33 -33
  149. package/docs/examples/code-mirror/readonly.vue +14 -14
  150. package/docs/examples/collapse/basic.vue +82 -82
  151. package/docs/examples/comp/basic.vue +7 -7
  152. package/docs/examples/comp/collapse.vue +38 -38
  153. package/docs/examples/comp/tabs.vue +38 -38
  154. package/docs/examples/count/basic.vue +101 -101
  155. package/docs/examples/count-up/basic.vue +89 -89
  156. package/docs/examples/data-panel/basic.vue +110 -110
  157. package/docs/examples/date/basic.vue +73 -73
  158. package/docs/examples/date/default-value.vue +59 -59
  159. package/docs/examples/date/format.vue +75 -75
  160. package/docs/examples/date/range.vue +66 -66
  161. package/docs/examples/date/types.vue +79 -79
  162. package/docs/examples/decorated-title/basic.vue +31 -31
  163. package/docs/examples/dialog/basic.vue +36 -36
  164. package/docs/examples/dialog/custom-buttons.vue +44 -44
  165. package/docs/examples/dialog/fullscreen.vue +23 -23
  166. package/docs/examples/dialog/no-mask.vue +17 -17
  167. package/docs/examples/dialog/size.vue +44 -44
  168. package/docs/examples/dialog/steps.vue +57 -57
  169. package/docs/examples/dialog-full/basic.vue +29 -29
  170. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  171. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  172. package/docs/examples/dialog-full/no-header.vue +27 -27
  173. package/docs/examples/dialog-full/steps.vue +71 -71
  174. package/docs/examples/divider/basic.vue +52 -52
  175. package/docs/examples/drawer/basic.vue +35 -35
  176. package/docs/examples/drawer/custom-buttons.vue +34 -34
  177. package/docs/examples/drawer/direction.vue +47 -47
  178. package/docs/examples/drawer/mask.vue +36 -36
  179. package/docs/examples/drawer/no-buttons.vue +20 -20
  180. package/docs/examples/drawer/size.vue +28 -28
  181. package/docs/examples/dynamic-layer/basic.vue +33 -33
  182. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  183. package/docs/examples/dynamic-layer/form.vue +73 -73
  184. package/docs/examples/dynamic-layer/steps.vue +52 -52
  185. package/docs/examples/dynamic-layer/types.vue +40 -40
  186. package/docs/examples/echarts/basic.vue +31 -31
  187. package/docs/examples/echarts/dynamic.vue +43 -43
  188. package/docs/examples/echarts/line.vue +46 -46
  189. package/docs/examples/echarts/pie.vue +44 -44
  190. package/docs/examples/editor/basic.vue +15 -15
  191. package/docs/examples/form/basic.vue +665 -665
  192. package/docs/examples/form/init.vue +76 -76
  193. package/docs/examples/form/master-detail.vue +203 -203
  194. package/docs/examples/form/rule-format.vue +179 -179
  195. package/docs/examples/guid/basic.vue +10 -10
  196. package/docs/examples/guid/size.vue +13 -13
  197. package/docs/examples/hpanel/basic.vue +79 -79
  198. package/docs/examples/icon/basic.vue +9 -9
  199. package/docs/examples/icon/rotate-flip.vue +9 -9
  200. package/docs/examples/icon/size.vue +7 -7
  201. package/docs/examples/input/basic.vue +10 -10
  202. package/docs/examples/input/clearable.vue +12 -12
  203. package/docs/examples/input/disabled.vue +6 -6
  204. package/docs/examples/input/icon.vue +23 -23
  205. package/docs/examples/input/password.vue +18 -18
  206. package/docs/examples/input/size.vue +13 -13
  207. package/docs/examples/input/textarea.vue +25 -25
  208. package/docs/examples/input/word-limit.vue +28 -28
  209. package/docs/examples/input-button/basic.vue +33 -33
  210. package/docs/examples/input-code/basic.vue +29 -29
  211. package/docs/examples/input-color/basic.vue +10 -10
  212. package/docs/examples/input-color/disabled.vue +13 -13
  213. package/docs/examples/input-color/format.vue +17 -17
  214. package/docs/examples/input-color/no-alpha.vue +13 -13
  215. package/docs/examples/input-color/only-button.vue +15 -15
  216. package/docs/examples/input-color/predefine.vue +31 -31
  217. package/docs/examples/input-color/size.vue +15 -15
  218. package/docs/examples/input-layer/basic.vue +86 -86
  219. package/docs/examples/input-layer/render-vnode-page.vue +160 -160
  220. package/docs/examples/input-layer/render-vnode.vue +127 -127
  221. package/docs/examples/input-rows/basic.vue +73 -73
  222. package/docs/examples/input-rows/drag.vue +48 -48
  223. package/docs/examples/input-rows/layer-form.vue +85 -85
  224. package/docs/examples/input-rows/nested.vue +91 -91
  225. package/docs/examples/input-tag/basic.vue +27 -27
  226. package/docs/examples/input-tag/colors.vue +23 -23
  227. package/docs/examples/input-tag/readonly.vue +17 -17
  228. package/docs/examples/layer/basic.vue +43 -43
  229. package/docs/examples/layer/custom-buttons.vue +61 -61
  230. package/docs/examples/layer/drawer.vue +37 -37
  231. package/docs/examples/layer/full.vue +38 -38
  232. package/docs/examples/layer/modal.vue +34 -34
  233. package/docs/examples/layer/steps.vue +46 -46
  234. package/docs/examples/layer-form/basic.vue +76 -76
  235. package/docs/examples/layer-form/config.vue +82 -82
  236. package/docs/examples/layer-form/size.vue +72 -72
  237. package/docs/examples/layout/basic.vue +36 -36
  238. package/docs/examples/layout/custom-size.vue +50 -50
  239. package/docs/examples/layout/disable-move.vue +37 -37
  240. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  241. package/docs/examples/layout/min-size.vue +73 -73
  242. package/docs/examples/layout/percent-size.vue +80 -80
  243. package/docs/examples/layout/simple.vue +22 -22
  244. package/docs/examples/layout/top-side.vue +34 -34
  245. package/docs/examples/map/basic.vue +22 -22
  246. package/docs/examples/menu/basic.vue +58 -58
  247. package/docs/examples/menu/collapsed.vue +49 -49
  248. package/docs/examples/menu/horizontal.vue +44 -44
  249. package/docs/examples/menu/selection-test.vue +104 -104
  250. package/docs/examples/menu/theme.vue +46 -46
  251. package/docs/examples/menu/vertical.vue +46 -46
  252. package/docs/examples/number/advanced.vue +143 -143
  253. package/docs/examples/number/basic.vue +63 -63
  254. package/docs/examples/number/disabled.vue +49 -49
  255. package/docs/examples/number/size.vue +42 -42
  256. package/docs/examples/number/slots.vue +123 -123
  257. package/docs/examples/number/step-strictly.vue +41 -41
  258. package/docs/examples/number/step.vue +47 -47
  259. package/docs/examples/page/basic.vue +41 -41
  260. package/docs/examples/page/code-table-model.vue +428 -428
  261. package/docs/examples/page/dept-user-management.vue +211 -211
  262. package/docs/examples/page/init.vue +87 -87
  263. package/docs/examples/page/log.vue +453 -453
  264. package/docs/examples/page/user-management.vue +313 -313
  265. package/docs/examples/panel/tool-buttons.vue +18 -18
  266. package/docs/examples/radio/basic.vue +17 -17
  267. package/docs/examples/radio/button.vue +17 -17
  268. package/docs/examples/radio/color.vue +18 -18
  269. package/docs/examples/radio/disabled.vue +17 -17
  270. package/docs/examples/radio/size.vue +29 -29
  271. package/docs/examples/rate/basic.vue +24 -24
  272. package/docs/examples/rate/half.vue +24 -24
  273. package/docs/examples/rate/readonly.vue +11 -11
  274. package/docs/examples/rate/text.vue +37 -37
  275. package/docs/examples/select/basic.vue +16 -16
  276. package/docs/examples/select/clearable.vue +22 -22
  277. package/docs/examples/select/disabled.vue +31 -31
  278. package/docs/examples/select/filterable.vue +24 -24
  279. package/docs/examples/select/group.vue +23 -23
  280. package/docs/examples/select/icon.vue +16 -16
  281. package/docs/examples/select/multiple.vue +18 -18
  282. package/docs/examples/select/size.vue +39 -39
  283. package/docs/examples/slider/basic.vue +42 -42
  284. package/docs/examples/slider/disabled.vue +17 -17
  285. package/docs/examples/slider/marks.vue +30 -30
  286. package/docs/examples/slider/size.vue +37 -37
  287. package/docs/examples/slider/tooltip.vue +36 -36
  288. package/docs/examples/slider/vertical.vue +26 -26
  289. package/docs/examples/slider-captcha/basic.vue +44 -44
  290. package/docs/examples/slider-captcha/custom.vue +48 -48
  291. package/docs/examples/switch/basic.vue +16 -16
  292. package/docs/examples/switch/disabled.vue +13 -13
  293. package/docs/examples/switch/loading.vue +13 -13
  294. package/docs/examples/switch/size.vue +15 -15
  295. package/docs/examples/switch/text.vue +13 -13
  296. package/docs/examples/table/action-filter.vue +126 -126
  297. package/docs/examples/table/actions.vue +116 -116
  298. package/docs/examples/table/add-row.vue +103 -103
  299. package/docs/examples/table/basic.vue +168 -168
  300. package/docs/examples/table/checkbox-layout.vue +68 -68
  301. package/docs/examples/table/custom-layout.vue +115 -115
  302. package/docs/examples/table/dynamic-type.vue +73 -73
  303. package/docs/examples/table/editable.vue +262 -262
  304. package/docs/examples/table/field-selection.vue +87 -87
  305. package/docs/examples/table/frozen-column.vue +140 -140
  306. package/docs/examples/table/height-mode.vue +99 -99
  307. package/docs/examples/table/icon.vue +85 -85
  308. package/docs/examples/table/link.vue +66 -66
  309. package/docs/examples/table/multiple.vue +188 -188
  310. package/docs/examples/table/pagination.vue +151 -151
  311. package/docs/examples/table/single-selection.vue +64 -64
  312. package/docs/examples/table/sub-table-lazy.vue +97 -97
  313. package/docs/examples/table/sub-table.vue +103 -103
  314. package/docs/examples/table/tag.vue +43 -43
  315. package/docs/examples/table/tree-column.vue +119 -119
  316. package/docs/examples/table/tree-data.vue +141 -141
  317. package/docs/examples/table/tree-default-expand-all.vue +60 -60
  318. package/docs/examples/table/tree-lazy.vue +80 -80
  319. package/docs/examples/table/tree-set-selection.vue +75 -75
  320. package/docs/examples/table-panel/basic.vue +229 -229
  321. package/docs/examples/table-panel/batch-operations.vue +285 -285
  322. package/docs/examples/table-panel/button-visibility.vue +88 -88
  323. package/docs/examples/table-panel/filter.vue +219 -219
  324. package/docs/examples/table-panel/get-selection.vue +111 -111
  325. package/docs/examples/table-panel/mask.vue +151 -151
  326. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  327. package/docs/examples/table-panel/pagination.vue +133 -133
  328. package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
  329. package/docs/examples/table-panel/tree-parent-key.vue +67 -67
  330. package/docs/examples/tabs/basic.vue +98 -98
  331. package/docs/examples/time/base.vue +67 -67
  332. package/docs/examples/title/basic.vue +87 -87
  333. package/docs/examples/tree/accordion.vue +46 -46
  334. package/docs/examples/tree/basic.vue +50 -50
  335. package/docs/examples/tree/buttons.vue +53 -53
  336. package/docs/examples/tree/checkable.vue +52 -52
  337. package/docs/examples/tree/custom-keys.vue +39 -39
  338. package/docs/examples/tree/default-expanded.vue +52 -52
  339. package/docs/examples/tree/draggable.vue +29 -29
  340. package/docs/examples/tree/expand-on-click.vue +39 -39
  341. package/docs/examples/tree/flat-data.vue +20 -20
  342. package/docs/examples/tree/icon.vue +40 -40
  343. package/docs/examples/tree/load-data.vue +37 -37
  344. package/docs/examples/tree/methods.vue +74 -74
  345. package/docs/examples/tree/theme.vue +33 -33
  346. package/docs/examples/tree-select/basic.vue +47 -47
  347. package/docs/examples/upload/accept.vue +31 -31
  348. package/docs/examples/upload/basic.vue +12 -12
  349. package/docs/examples/upload/drag.vue +11 -11
  350. package/docs/examples/upload/image.vue +17 -17
  351. package/docs/examples/upload/limit.vue +20 -20
  352. package/docs/examples/upload/multiple.vue +17 -17
  353. package/docs/examples/upload/readonly.vue +17 -17
  354. package/docs/examples/utils/cipher.vue +160 -160
  355. package/docs/examples/utils/common.vue +153 -153
  356. package/docs/examples/utils/date.vue +56 -56
  357. package/docs/examples/utils/dom.vue +52 -52
  358. package/docs/examples/utils/is.vue +70 -70
  359. package/docs/examples/workflow/basic.vue +265 -265
  360. package/docs/examples/workflow-viewer/basic.vue +248 -248
  361. package/package.json +23 -23
@@ -1,17 +1,17 @@
1
- <template>
2
- <div>
3
- <j-upload
4
- v-model="fileId"
5
- placeholder="选择多个文件"
6
- :is-not-api="true"
7
- :multiple="true"
8
- :limit="-1"
9
- />
10
- </div>
11
- </template>
12
-
13
- <script setup lang="ts">
14
- import { ref } from 'vue'
15
-
16
- const fileId = ref('')
17
- </script>
1
+ <template>
2
+ <div>
3
+ <j-upload
4
+ v-model="fileId"
5
+ placeholder="选择多个文件"
6
+ :is-not-api="true"
7
+ :multiple="true"
8
+ :limit="-1"
9
+ />
10
+ </div>
11
+ </template>
12
+
13
+ <script setup lang="ts">
14
+ import { ref } from 'vue'
15
+
16
+ const fileId = ref('')
17
+ </script>
@@ -1,17 +1,17 @@
1
- <template>
2
- <div>
3
- <j-upload
4
- v-model="fileId"
5
- placeholder="点击上传"
6
- :is-not-api="true"
7
- :readonly="true"
8
- btn-text="查看文件"
9
- />
10
- </div>
11
- </template>
12
-
13
- <script setup lang="ts">
14
- import { ref } from 'vue'
15
-
16
- const fileId = ref('')
17
- </script>
1
+ <template>
2
+ <div>
3
+ <j-upload
4
+ v-model="fileId"
5
+ placeholder="点击上传"
6
+ :is-not-api="true"
7
+ :readonly="true"
8
+ btn-text="查看文件"
9
+ />
10
+ </div>
11
+ </template>
12
+
13
+ <script setup lang="ts">
14
+ import { ref } from 'vue'
15
+
16
+ const fileId = ref('')
17
+ </script>
@@ -1,160 +1,160 @@
1
- <template>
2
- <div class="utils-demo">
3
- <h3>加密工具方法示例</h3>
4
-
5
- <div class="demo-section">
6
- <h4>1. AES加密/解密</h4>
7
- <div class="demo-content">
8
- <j-input v-model="plainText" placeholder="输入明文" style="width: 300px" />
9
- <j-input v-model="aesKey" placeholder="输入密钥" style="width: 300px; margin-top: 10px" />
10
- <div style="margin-top: 10px">
11
- <j-button label="AES加密" type="primary" @click="doAesEncrypt" />
12
- <j-button label="AES解密" @click="doAesDecrypt" />
13
- </div>
14
- <p>加密结果: {{ encryptedText }}</p>
15
- <p>解密结果: {{ decryptedText }}</p>
16
- <p style="color: #67c23a">💡 AES加密适用于敏感数据传输</p>
17
- </div>
18
- </div>
19
-
20
- <div class="demo-section">
21
- <h4>2. Base64编码/解码</h4>
22
- <div class="demo-content">
23
- <j-input v-model="base64Text" placeholder="输入文本" style="width: 300px" />
24
- <div style="margin-top: 10px">
25
- <j-button label="Base64编码" type="primary" @click="doBase64Encode" />
26
- <j-button label="Base64解码" @click="doBase64Decode" />
27
- </div>
28
- <p>编码结果: {{ base64Encoded }}</p>
29
- <p>解码结果: {{ base64Decoded }}</p>
30
- </div>
31
- </div>
32
-
33
- <div class="demo-section">
34
- <h4>3. MD5哈希</h4>
35
- <div class="demo-content">
36
- <j-input v-model="md5Text" placeholder="输入文本" style="width: 300px" />
37
- <j-button label="生成MD5" style="margin-top: 10px" type="primary" @click="doMd5Hash" />
38
- <p>MD5: {{ md5Hash }}</p>
39
- <p style="color: #67c23a">💡 常用于密码加密存储</p>
40
- </div>
41
- </div>
42
-
43
- <div class="demo-section">
44
- <h4>4. SHA256哈希</h4>
45
- <div class="demo-content">
46
- <j-input v-model="sha256Text" placeholder="输入文本" style="width: 300px" />
47
- <j-button
48
- label="生成SHA256"
49
- type="primary"
50
- style="margin-top: 10px"
51
- @click="doSha256Hash"
52
- />
53
- <p>SHA256: {{ sha256Hash }}</p>
54
- </div>
55
- </div>
56
-
57
- <div class="demo-section">
58
- <h4>5. SHA512哈希</h4>
59
- <div class="demo-content">
60
- <j-input v-model="sha512Text" placeholder="输入文本" style="width: 300px" />
61
- <j-button
62
- label="生成SHA512"
63
- type="primary"
64
- style="margin-top: 10px"
65
- @click="doSha512Hash"
66
- />
67
- <p style="word-break: break-all">SHA512: {{ sha512Hash }}</p>
68
- </div>
69
- </div>
70
- </div>
71
- </template>
72
-
73
- <script setup>
74
- import { ref } from 'vue'
75
- import { EncryptionFactory, HashingFactory } from '@/core'
76
-
77
- // AES加密
78
- const plainText = ref('Hello World')
79
- const aesKey = ref('my-secret-key-123')
80
- const encryptedText = ref('')
81
- const decryptedText = ref('')
82
-
83
- const doAesEncrypt = () => {
84
- const aes = EncryptionFactory.createAesEncryption({ key: aesKey.value })
85
- encryptedText.value = aes.encrypt(plainText.value)
86
- }
87
-
88
- const doAesDecrypt = () => {
89
- if (encryptedText.value) {
90
- const aes = EncryptionFactory.createAesEncryption({ key: aesKey.value })
91
- decryptedText.value = aes.decrypt(encryptedText.value)
92
- }
93
- }
94
-
95
- // Base64编码
96
- const base64Text = ref('Hello World')
97
- const base64Encoded = ref('')
98
- const base64Decoded = ref('')
99
-
100
- const doBase64Encode = () => {
101
- const base64 = EncryptionFactory.createBase64Encryption()
102
- base64Encoded.value = base64.encrypt(base64Text.value)
103
- }
104
-
105
- const doBase64Decode = () => {
106
- if (base64Encoded.value) {
107
- const base64 = EncryptionFactory.createBase64Encryption()
108
- base64Decoded.value = base64.decrypt(base64Encoded.value)
109
- }
110
- }
111
-
112
- // MD5哈希
113
- const md5Text = ref('password123')
114
- const md5Hash = ref('')
115
-
116
- const doMd5Hash = () => {
117
- const md5 = HashingFactory.createMD5Hashing()
118
- md5Hash.value = md5.hash(md5Text.value)
119
- }
120
-
121
- // SHA256哈希
122
- const sha256Text = ref('Hello World')
123
- const sha256Hash = ref('')
124
-
125
- const doSha256Hash = () => {
126
- const sha256 = HashingFactory.createSHA256Hashing()
127
- sha256Hash.value = sha256.hash(sha256Text.value)
128
- }
129
-
130
- // SHA512哈希
131
- const sha512Text = ref('Hello World')
132
- const sha512Hash = ref('')
133
-
134
- const doSha512Hash = () => {
135
- const sha512 = HashingFactory.createSHA512Hashing()
136
- sha512Hash.value = sha512.hash(sha512Text.value)
137
- }
138
- </script>
139
-
140
- <style scoped>
141
- .utils-demo {
142
- padding: 20px;
143
- }
144
- .demo-section {
145
- margin-bottom: 30px;
146
- padding: 15px;
147
- border: 1px solid #eee;
148
- border-radius: 4px;
149
- }
150
- .demo-section h4 {
151
- margin-top: 0;
152
- color: #409eff;
153
- }
154
- .demo-content {
155
- margin-top: 10px;
156
- }
157
- .demo-content p {
158
- margin: 8px 0;
159
- }
160
- </style>
1
+ <template>
2
+ <div class="utils-demo">
3
+ <h3>加密工具方法示例</h3>
4
+
5
+ <div class="demo-section">
6
+ <h4>1. AES加密/解密</h4>
7
+ <div class="demo-content">
8
+ <j-input v-model="plainText" placeholder="输入明文" style="width: 300px" />
9
+ <j-input v-model="aesKey" placeholder="输入密钥" style="width: 300px; margin-top: 10px" />
10
+ <div style="margin-top: 10px">
11
+ <j-button label="AES加密" type="primary" @click="doAesEncrypt" />
12
+ <j-button label="AES解密" @click="doAesDecrypt" />
13
+ </div>
14
+ <p>加密结果: {{ encryptedText }}</p>
15
+ <p>解密结果: {{ decryptedText }}</p>
16
+ <p style="color: #67c23a">💡 AES加密适用于敏感数据传输</p>
17
+ </div>
18
+ </div>
19
+
20
+ <div class="demo-section">
21
+ <h4>2. Base64编码/解码</h4>
22
+ <div class="demo-content">
23
+ <j-input v-model="base64Text" placeholder="输入文本" style="width: 300px" />
24
+ <div style="margin-top: 10px">
25
+ <j-button label="Base64编码" type="primary" @click="doBase64Encode" />
26
+ <j-button label="Base64解码" @click="doBase64Decode" />
27
+ </div>
28
+ <p>编码结果: {{ base64Encoded }}</p>
29
+ <p>解码结果: {{ base64Decoded }}</p>
30
+ </div>
31
+ </div>
32
+
33
+ <div class="demo-section">
34
+ <h4>3. MD5哈希</h4>
35
+ <div class="demo-content">
36
+ <j-input v-model="md5Text" placeholder="输入文本" style="width: 300px" />
37
+ <j-button label="生成MD5" style="margin-top: 10px" type="primary" @click="doMd5Hash" />
38
+ <p>MD5: {{ md5Hash }}</p>
39
+ <p style="color: #67c23a">💡 常用于密码加密存储</p>
40
+ </div>
41
+ </div>
42
+
43
+ <div class="demo-section">
44
+ <h4>4. SHA256哈希</h4>
45
+ <div class="demo-content">
46
+ <j-input v-model="sha256Text" placeholder="输入文本" style="width: 300px" />
47
+ <j-button
48
+ label="生成SHA256"
49
+ type="primary"
50
+ style="margin-top: 10px"
51
+ @click="doSha256Hash"
52
+ />
53
+ <p>SHA256: {{ sha256Hash }}</p>
54
+ </div>
55
+ </div>
56
+
57
+ <div class="demo-section">
58
+ <h4>5. SHA512哈希</h4>
59
+ <div class="demo-content">
60
+ <j-input v-model="sha512Text" placeholder="输入文本" style="width: 300px" />
61
+ <j-button
62
+ label="生成SHA512"
63
+ type="primary"
64
+ style="margin-top: 10px"
65
+ @click="doSha512Hash"
66
+ />
67
+ <p style="word-break: break-all">SHA512: {{ sha512Hash }}</p>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </template>
72
+
73
+ <script setup>
74
+ import { ref } from 'vue'
75
+ import { EncryptionFactory, HashingFactory } from '@/core'
76
+
77
+ // AES加密
78
+ const plainText = ref('Hello World')
79
+ const aesKey = ref('my-secret-key-123')
80
+ const encryptedText = ref('')
81
+ const decryptedText = ref('')
82
+
83
+ const doAesEncrypt = () => {
84
+ const aes = EncryptionFactory.createAesEncryption({ key: aesKey.value })
85
+ encryptedText.value = aes.encrypt(plainText.value)
86
+ }
87
+
88
+ const doAesDecrypt = () => {
89
+ if (encryptedText.value) {
90
+ const aes = EncryptionFactory.createAesEncryption({ key: aesKey.value })
91
+ decryptedText.value = aes.decrypt(encryptedText.value)
92
+ }
93
+ }
94
+
95
+ // Base64编码
96
+ const base64Text = ref('Hello World')
97
+ const base64Encoded = ref('')
98
+ const base64Decoded = ref('')
99
+
100
+ const doBase64Encode = () => {
101
+ const base64 = EncryptionFactory.createBase64Encryption()
102
+ base64Encoded.value = base64.encrypt(base64Text.value)
103
+ }
104
+
105
+ const doBase64Decode = () => {
106
+ if (base64Encoded.value) {
107
+ const base64 = EncryptionFactory.createBase64Encryption()
108
+ base64Decoded.value = base64.decrypt(base64Encoded.value)
109
+ }
110
+ }
111
+
112
+ // MD5哈希
113
+ const md5Text = ref('password123')
114
+ const md5Hash = ref('')
115
+
116
+ const doMd5Hash = () => {
117
+ const md5 = HashingFactory.createMD5Hashing()
118
+ md5Hash.value = md5.hash(md5Text.value)
119
+ }
120
+
121
+ // SHA256哈希
122
+ const sha256Text = ref('Hello World')
123
+ const sha256Hash = ref('')
124
+
125
+ const doSha256Hash = () => {
126
+ const sha256 = HashingFactory.createSHA256Hashing()
127
+ sha256Hash.value = sha256.hash(sha256Text.value)
128
+ }
129
+
130
+ // SHA512哈希
131
+ const sha512Text = ref('Hello World')
132
+ const sha512Hash = ref('')
133
+
134
+ const doSha512Hash = () => {
135
+ const sha512 = HashingFactory.createSHA512Hashing()
136
+ sha512Hash.value = sha512.hash(sha512Text.value)
137
+ }
138
+ </script>
139
+
140
+ <style scoped>
141
+ .utils-demo {
142
+ padding: 20px;
143
+ }
144
+ .demo-section {
145
+ margin-bottom: 30px;
146
+ padding: 15px;
147
+ border: 1px solid #eee;
148
+ border-radius: 4px;
149
+ }
150
+ .demo-section h4 {
151
+ margin-top: 0;
152
+ color: #409eff;
153
+ }
154
+ .demo-content {
155
+ margin-top: 10px;
156
+ }
157
+ .demo-content p {
158
+ margin: 8px 0;
159
+ }
160
+ </style>