@a2simcode/ui 0.0.145 → 0.0.146

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