@a2simcode/ui 0.0.182 → 0.0.183

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 (347) 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/core/utils/date.d.ts +1 -0
  6. package/dist/simcode-ui.es.js +24 -14
  7. package/dist/simcode-ui.umd.js +2 -2
  8. package/dist/stats.html +1 -1
  9. package/dist/ui.css +1 -1
  10. package/docs/components/autocomplete.md +89 -89
  11. package/docs/components/barcode.md +101 -101
  12. package/docs/components/button-select.md +24 -24
  13. package/docs/components/button.md +117 -117
  14. package/docs/components/buttons.md +119 -119
  15. package/docs/components/cascader-select.md +114 -114
  16. package/docs/components/checkbox.md +114 -114
  17. package/docs/components/code-mirror.md +85 -85
  18. package/docs/components/collapse.md +26 -26
  19. package/docs/components/comp.md +71 -71
  20. package/docs/components/count-up.md +24 -24
  21. package/docs/components/count.md +24 -24
  22. package/docs/components/data-panel.md +24 -24
  23. package/docs/components/date.md +76 -76
  24. package/docs/components/dialog-full.md +112 -112
  25. package/docs/components/dialog.md +127 -127
  26. package/docs/components/divider.md +24 -24
  27. package/docs/components/drawer.md +127 -127
  28. package/docs/components/dynamic-layer.md +118 -118
  29. package/docs/components/echarts.md +72 -72
  30. package/docs/components/editor.md +24 -24
  31. package/docs/components/form.md +72 -72
  32. package/docs/components/guid.md +39 -39
  33. package/docs/components/hpanel.md +24 -24
  34. package/docs/components/icon.md +56 -56
  35. package/docs/components/input-button.md +24 -24
  36. package/docs/components/input-code.md +24 -24
  37. package/docs/components/input-color.md +114 -114
  38. package/docs/components/input-layer.md +41 -41
  39. package/docs/components/input-rows.md +370 -370
  40. package/docs/components/input-tag.md +50 -50
  41. package/docs/components/input.md +129 -129
  42. package/docs/components/layer-form.md +61 -61
  43. package/docs/components/layer.md +127 -127
  44. package/docs/components/layout.md +132 -132
  45. package/docs/components/map.md +24 -24
  46. package/docs/components/menu.md +121 -121
  47. package/docs/components/meta/button.ts +212 -212
  48. package/docs/components/meta/buttons.ts +76 -76
  49. package/docs/components/meta/code-mirror.ts +108 -108
  50. package/docs/components/meta/comp.ts +236 -236
  51. package/docs/components/meta/date.ts +267 -267
  52. package/docs/components/meta/echarts.ts +64 -64
  53. package/docs/components/meta/form-item.ts +50 -50
  54. package/docs/components/meta/form.ts +181 -181
  55. package/docs/components/meta/input-button.ts +165 -165
  56. package/docs/components/meta/input-cards.ts +112 -112
  57. package/docs/components/meta/input-code.ts +151 -151
  58. package/docs/components/meta/input-color.ts +243 -243
  59. package/docs/components/meta/input-layer.ts +382 -382
  60. package/docs/components/meta/input-rows.ts +119 -119
  61. package/docs/components/meta/layer-form.ts +56 -56
  62. package/docs/components/meta/map.ts +68 -68
  63. package/docs/components/meta/panel.ts +152 -152
  64. package/docs/components/meta/slider.ts +270 -270
  65. package/docs/components/meta/table-panel.ts +237 -237
  66. package/docs/components/meta/table.ts +391 -391
  67. package/docs/components/meta/tabs.ts +146 -146
  68. package/docs/components/meta/title.ts +91 -91
  69. package/docs/components/meta/tree-select.ts +199 -199
  70. package/docs/components/meta/tree.ts +219 -219
  71. package/docs/components/meta/vpanel.ts +19 -19
  72. package/docs/components/meta/workflow-viewer.ts +55 -55
  73. package/docs/components/number.md +124 -124
  74. package/docs/components/page.md +102 -102
  75. package/docs/components/panel.md +37 -37
  76. package/docs/components/radio.md +87 -87
  77. package/docs/components/rate.md +71 -71
  78. package/docs/components/select.md +133 -133
  79. package/docs/components/slider-captcha.md +41 -41
  80. package/docs/components/slider.md +101 -101
  81. package/docs/components/switch.md +90 -90
  82. package/docs/components/table-panel.md +251 -251
  83. package/docs/components/table.md +391 -391
  84. package/docs/components/tabs.md +26 -26
  85. package/docs/components/title.md +24 -24
  86. package/docs/components/tree.md +207 -207
  87. package/docs/components/upload.md +117 -117
  88. package/docs/components/workflow-viewer.md +21 -21
  89. package/docs/components/workflow.md +21 -21
  90. package/docs/examples/autocomplete/advanced.vue +35 -35
  91. package/docs/examples/autocomplete/basic.vue +32 -32
  92. package/docs/examples/autocomplete/clearable.vue +33 -33
  93. package/docs/examples/autocomplete/custom-template.vue +49 -49
  94. package/docs/examples/autocomplete/disabled.vue +33 -33
  95. package/docs/examples/autocomplete/icon.vue +37 -37
  96. package/docs/examples/barcode/all-types.vue +380 -380
  97. package/docs/examples/barcode/basic.vue +14 -14
  98. package/docs/examples/barcode/props-appearance.vue +243 -243
  99. package/docs/examples/barcode/props-geometry.vue +143 -143
  100. package/docs/examples/barcode/props-logic.vue +216 -216
  101. package/docs/examples/barcode/props-symbology.vue +199 -199
  102. package/docs/examples/barcode/props-text.vue +268 -268
  103. package/docs/examples/button/basic.vue +7 -7
  104. package/docs/examples/button/danger-ghost.vue +17 -17
  105. package/docs/examples/button/disabled.vue +10 -10
  106. package/docs/examples/button/loading.vue +6 -6
  107. package/docs/examples/button/shape.vue +7 -7
  108. package/docs/examples/button/size.vue +14 -14
  109. package/docs/examples/button/type.vue +10 -10
  110. package/docs/examples/button-select/basic.vue +19 -19
  111. package/docs/examples/buttons/basic.vue +45 -45
  112. package/docs/examples/buttons/disabled.vue +36 -36
  113. package/docs/examples/buttons/dropdown.vue +63 -63
  114. package/docs/examples/buttons/group.vue +52 -52
  115. package/docs/examples/buttons/link.vue +47 -47
  116. package/docs/examples/buttons/popup.vue +39 -39
  117. package/docs/examples/buttons/size.vue +45 -45
  118. package/docs/examples/cascader-select/basic.vue +28 -28
  119. package/docs/examples/cascader-select/clearable.vue +34 -34
  120. package/docs/examples/cascader-select/disabled.vue +43 -43
  121. package/docs/examples/cascader-select/filterable.vue +37 -37
  122. package/docs/examples/cascader-select/methods.vue +84 -84
  123. package/docs/examples/cascader-select/multiple.vue +38 -38
  124. package/docs/examples/cascader-select/slot.vue +45 -45
  125. package/docs/examples/checkbox/basic.vue +18 -18
  126. package/docs/examples/checkbox/button.vue +19 -19
  127. package/docs/examples/checkbox/color.vue +25 -25
  128. package/docs/examples/checkbox/disabled.vue +17 -17
  129. package/docs/examples/checkbox/min-max.vue +20 -20
  130. package/docs/examples/checkbox/mixed.vue +56 -56
  131. package/docs/examples/checkbox/size.vue +28 -28
  132. package/docs/examples/code-mirror/basic.vue +11 -11
  133. package/docs/examples/code-mirror/events.vue +42 -42
  134. package/docs/examples/code-mirror/height.vue +25 -25
  135. package/docs/examples/code-mirror/mode.vue +33 -33
  136. package/docs/examples/code-mirror/readonly.vue +14 -14
  137. package/docs/examples/collapse/basic.vue +82 -82
  138. package/docs/examples/comp/basic.vue +7 -7
  139. package/docs/examples/comp/collapse.vue +38 -38
  140. package/docs/examples/comp/tabs.vue +38 -38
  141. package/docs/examples/count/basic.vue +101 -101
  142. package/docs/examples/count-up/basic.vue +89 -89
  143. package/docs/examples/data-panel/basic.vue +110 -110
  144. package/docs/examples/date/basic.vue +73 -73
  145. package/docs/examples/date/default-value.vue +59 -59
  146. package/docs/examples/date/format.vue +75 -75
  147. package/docs/examples/date/range.vue +66 -66
  148. package/docs/examples/date/types.vue +79 -79
  149. package/docs/examples/decorated-title/basic.vue +31 -31
  150. package/docs/examples/dialog/basic.vue +36 -36
  151. package/docs/examples/dialog/custom-buttons.vue +44 -44
  152. package/docs/examples/dialog/fullscreen.vue +23 -23
  153. package/docs/examples/dialog/no-mask.vue +17 -17
  154. package/docs/examples/dialog/size.vue +44 -44
  155. package/docs/examples/dialog/steps.vue +57 -57
  156. package/docs/examples/dialog-full/basic.vue +29 -29
  157. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  158. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  159. package/docs/examples/dialog-full/no-header.vue +27 -27
  160. package/docs/examples/dialog-full/steps.vue +71 -71
  161. package/docs/examples/divider/basic.vue +52 -52
  162. package/docs/examples/drawer/basic.vue +35 -35
  163. package/docs/examples/drawer/custom-buttons.vue +34 -34
  164. package/docs/examples/drawer/direction.vue +47 -47
  165. package/docs/examples/drawer/mask.vue +36 -36
  166. package/docs/examples/drawer/no-buttons.vue +20 -20
  167. package/docs/examples/drawer/size.vue +28 -28
  168. package/docs/examples/dynamic-layer/basic.vue +33 -33
  169. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  170. package/docs/examples/dynamic-layer/form.vue +73 -73
  171. package/docs/examples/dynamic-layer/steps.vue +52 -52
  172. package/docs/examples/dynamic-layer/types.vue +40 -40
  173. package/docs/examples/echarts/basic.vue +31 -31
  174. package/docs/examples/echarts/dynamic.vue +43 -43
  175. package/docs/examples/echarts/line.vue +46 -46
  176. package/docs/examples/echarts/pie.vue +44 -44
  177. package/docs/examples/editor/basic.vue +15 -15
  178. package/docs/examples/form/basic.vue +665 -665
  179. package/docs/examples/form/init.vue +76 -76
  180. package/docs/examples/form/master-detail.vue +203 -203
  181. package/docs/examples/form/rule-format.vue +179 -179
  182. package/docs/examples/guid/basic.vue +10 -10
  183. package/docs/examples/guid/size.vue +13 -13
  184. package/docs/examples/hpanel/basic.vue +79 -79
  185. package/docs/examples/icon/basic.vue +9 -9
  186. package/docs/examples/icon/rotate-flip.vue +9 -9
  187. package/docs/examples/icon/size.vue +7 -7
  188. package/docs/examples/input/basic.vue +10 -10
  189. package/docs/examples/input/clearable.vue +12 -12
  190. package/docs/examples/input/disabled.vue +6 -6
  191. package/docs/examples/input/icon.vue +23 -23
  192. package/docs/examples/input/password.vue +18 -18
  193. package/docs/examples/input/size.vue +13 -13
  194. package/docs/examples/input/textarea.vue +25 -25
  195. package/docs/examples/input/word-limit.vue +28 -28
  196. package/docs/examples/input-button/basic.vue +33 -33
  197. package/docs/examples/input-code/basic.vue +29 -29
  198. package/docs/examples/input-color/basic.vue +10 -10
  199. package/docs/examples/input-color/disabled.vue +13 -13
  200. package/docs/examples/input-color/format.vue +17 -17
  201. package/docs/examples/input-color/no-alpha.vue +13 -13
  202. package/docs/examples/input-color/only-button.vue +15 -15
  203. package/docs/examples/input-color/predefine.vue +31 -31
  204. package/docs/examples/input-color/size.vue +15 -15
  205. package/docs/examples/input-layer/basic.vue +86 -86
  206. package/docs/examples/input-layer/render-vnode.vue +127 -127
  207. package/docs/examples/input-rows/basic.vue +73 -73
  208. package/docs/examples/input-rows/drag.vue +48 -48
  209. package/docs/examples/input-rows/layer-form.vue +85 -85
  210. package/docs/examples/input-rows/nested.vue +91 -91
  211. package/docs/examples/input-tag/basic.vue +27 -27
  212. package/docs/examples/input-tag/colors.vue +23 -23
  213. package/docs/examples/input-tag/readonly.vue +17 -17
  214. package/docs/examples/layer/basic.vue +43 -43
  215. package/docs/examples/layer/custom-buttons.vue +61 -61
  216. package/docs/examples/layer/drawer.vue +37 -37
  217. package/docs/examples/layer/full.vue +38 -38
  218. package/docs/examples/layer/modal.vue +34 -34
  219. package/docs/examples/layer/steps.vue +46 -46
  220. package/docs/examples/layer-form/basic.vue +76 -76
  221. package/docs/examples/layer-form/config.vue +82 -82
  222. package/docs/examples/layer-form/size.vue +72 -72
  223. package/docs/examples/layout/basic.vue +36 -36
  224. package/docs/examples/layout/custom-size.vue +50 -50
  225. package/docs/examples/layout/disable-move.vue +37 -37
  226. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  227. package/docs/examples/layout/min-size.vue +73 -73
  228. package/docs/examples/layout/percent-size.vue +80 -80
  229. package/docs/examples/layout/simple.vue +22 -22
  230. package/docs/examples/layout/top-side.vue +34 -34
  231. package/docs/examples/map/basic.vue +22 -22
  232. package/docs/examples/menu/basic.vue +58 -58
  233. package/docs/examples/menu/collapsed.vue +49 -49
  234. package/docs/examples/menu/horizontal.vue +44 -44
  235. package/docs/examples/menu/selection-test.vue +104 -104
  236. package/docs/examples/menu/theme.vue +46 -46
  237. package/docs/examples/menu/vertical.vue +46 -46
  238. package/docs/examples/number/advanced.vue +143 -143
  239. package/docs/examples/number/basic.vue +63 -63
  240. package/docs/examples/number/disabled.vue +49 -49
  241. package/docs/examples/number/size.vue +42 -42
  242. package/docs/examples/number/slots.vue +123 -123
  243. package/docs/examples/number/step-strictly.vue +41 -41
  244. package/docs/examples/number/step.vue +47 -47
  245. package/docs/examples/page/basic.vue +41 -41
  246. package/docs/examples/page/code-table-model.vue +428 -428
  247. package/docs/examples/page/dept-user-management.vue +211 -211
  248. package/docs/examples/page/init.vue +87 -87
  249. package/docs/examples/page/log.vue +453 -453
  250. package/docs/examples/page/user-management.vue +313 -313
  251. package/docs/examples/panel/tool-buttons.vue +18 -18
  252. package/docs/examples/radio/basic.vue +17 -17
  253. package/docs/examples/radio/button.vue +17 -17
  254. package/docs/examples/radio/color.vue +18 -18
  255. package/docs/examples/radio/disabled.vue +17 -17
  256. package/docs/examples/radio/size.vue +29 -29
  257. package/docs/examples/rate/basic.vue +24 -24
  258. package/docs/examples/rate/half.vue +24 -24
  259. package/docs/examples/rate/readonly.vue +11 -11
  260. package/docs/examples/rate/text.vue +37 -37
  261. package/docs/examples/select/basic.vue +16 -16
  262. package/docs/examples/select/clearable.vue +22 -22
  263. package/docs/examples/select/disabled.vue +31 -31
  264. package/docs/examples/select/filterable.vue +24 -24
  265. package/docs/examples/select/group.vue +23 -23
  266. package/docs/examples/select/icon.vue +16 -16
  267. package/docs/examples/select/multiple.vue +18 -18
  268. package/docs/examples/select/size.vue +39 -39
  269. package/docs/examples/slider/basic.vue +42 -42
  270. package/docs/examples/slider/disabled.vue +17 -17
  271. package/docs/examples/slider/marks.vue +30 -30
  272. package/docs/examples/slider/size.vue +37 -37
  273. package/docs/examples/slider/tooltip.vue +36 -36
  274. package/docs/examples/slider/vertical.vue +26 -26
  275. package/docs/examples/slider-captcha/basic.vue +44 -44
  276. package/docs/examples/slider-captcha/custom.vue +48 -48
  277. package/docs/examples/switch/basic.vue +16 -16
  278. package/docs/examples/switch/disabled.vue +13 -13
  279. package/docs/examples/switch/loading.vue +13 -13
  280. package/docs/examples/switch/size.vue +15 -15
  281. package/docs/examples/switch/text.vue +13 -13
  282. package/docs/examples/table/action-filter.vue +126 -126
  283. package/docs/examples/table/actions.vue +116 -116
  284. package/docs/examples/table/add-row.vue +103 -103
  285. package/docs/examples/table/basic.vue +168 -168
  286. package/docs/examples/table/checkbox-layout.vue +68 -68
  287. package/docs/examples/table/custom-layout.vue +115 -115
  288. package/docs/examples/table/dynamic-type.vue +73 -73
  289. package/docs/examples/table/editable.vue +262 -262
  290. package/docs/examples/table/field-selection.vue +87 -87
  291. package/docs/examples/table/frozen-column.vue +140 -140
  292. package/docs/examples/table/height-mode.vue +99 -99
  293. package/docs/examples/table/icon.vue +85 -85
  294. package/docs/examples/table/link.vue +66 -66
  295. package/docs/examples/table/multiple.vue +188 -188
  296. package/docs/examples/table/pagination.vue +151 -151
  297. package/docs/examples/table/single-selection.vue +64 -64
  298. package/docs/examples/table/sub-table-lazy.vue +97 -97
  299. package/docs/examples/table/sub-table.vue +103 -103
  300. package/docs/examples/table/tag.vue +43 -43
  301. package/docs/examples/table/tree-column.vue +119 -119
  302. package/docs/examples/table/tree-data.vue +141 -141
  303. package/docs/examples/table/tree-default-expand-all.vue +60 -60
  304. package/docs/examples/table/tree-lazy.vue +80 -80
  305. package/docs/examples/table/tree-set-selection.vue +75 -75
  306. package/docs/examples/table-panel/basic.vue +229 -229
  307. package/docs/examples/table-panel/batch-operations.vue +285 -285
  308. package/docs/examples/table-panel/button-visibility.vue +88 -88
  309. package/docs/examples/table-panel/filter.vue +219 -219
  310. package/docs/examples/table-panel/get-selection.vue +111 -111
  311. package/docs/examples/table-panel/mask.vue +151 -151
  312. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  313. package/docs/examples/table-panel/pagination.vue +133 -133
  314. package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
  315. package/docs/examples/table-panel/tree-parent-key.vue +67 -67
  316. package/docs/examples/tabs/basic.vue +98 -98
  317. package/docs/examples/time/base.vue +67 -67
  318. package/docs/examples/title/basic.vue +87 -87
  319. package/docs/examples/tree/accordion.vue +46 -46
  320. package/docs/examples/tree/basic.vue +50 -50
  321. package/docs/examples/tree/buttons.vue +53 -53
  322. package/docs/examples/tree/checkable.vue +52 -52
  323. package/docs/examples/tree/custom-keys.vue +39 -39
  324. package/docs/examples/tree/default-expanded.vue +52 -52
  325. package/docs/examples/tree/draggable.vue +29 -29
  326. package/docs/examples/tree/expand-on-click.vue +39 -39
  327. package/docs/examples/tree/flat-data.vue +20 -20
  328. package/docs/examples/tree/icon.vue +40 -40
  329. package/docs/examples/tree/load-data.vue +37 -37
  330. package/docs/examples/tree/methods.vue +74 -74
  331. package/docs/examples/tree/theme.vue +33 -33
  332. package/docs/examples/tree-select/basic.vue +47 -47
  333. package/docs/examples/upload/accept.vue +31 -31
  334. package/docs/examples/upload/basic.vue +12 -12
  335. package/docs/examples/upload/drag.vue +11 -11
  336. package/docs/examples/upload/image.vue +17 -17
  337. package/docs/examples/upload/limit.vue +20 -20
  338. package/docs/examples/upload/multiple.vue +17 -17
  339. package/docs/examples/upload/readonly.vue +17 -17
  340. package/docs/examples/utils/cipher.vue +160 -160
  341. package/docs/examples/utils/common.vue +153 -153
  342. package/docs/examples/utils/date.vue +56 -56
  343. package/docs/examples/utils/dom.vue +52 -52
  344. package/docs/examples/utils/is.vue +70 -70
  345. package/docs/examples/workflow/basic.vue +265 -265
  346. package/docs/examples/workflow-viewer/basic.vue +248 -248
  347. 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>