@a2simcode/ui 0.0.138 → 0.0.140

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