@a2simcode/ui 0.0.130 → 0.0.131

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