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