@a2simcode/ui 0.0.48 → 0.0.50

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 (310) hide show
  1. package/.cursor/skills/ui-component-helper/README.md +43 -43
  2. package/.cursor/skills/ui-component-helper/SKILL.md +81 -81
  3. package/LICENSE +53 -53
  4. package/README.md +156 -156
  5. package/dist/components/index.d.ts +3 -1
  6. package/dist/components/panel/index.d.ts +51 -0
  7. package/dist/components/panel/src/panel.vue.d.ts +71 -0
  8. package/dist/simcode-ui.es.js +1963 -1879
  9. package/dist/simcode-ui.umd.js +2 -2
  10. package/dist/stats.html +1 -1
  11. package/dist/ui.css +1 -1
  12. package/docs/components/autocomplete.md +89 -89
  13. package/docs/components/barcode.md +101 -101
  14. package/docs/components/button-select.md +24 -24
  15. package/docs/components/button.md +117 -117
  16. package/docs/components/buttons.md +119 -119
  17. package/docs/components/cascader-select.md +114 -114
  18. package/docs/components/checkbox.md +114 -114
  19. package/docs/components/code-mirror.md +85 -85
  20. package/docs/components/collapse.md +26 -26
  21. package/docs/components/comp.md +71 -71
  22. package/docs/components/count-up.md +24 -24
  23. package/docs/components/count.md +24 -24
  24. package/docs/components/data-panel.md +24 -24
  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 +27 -27
  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 +56 -56
  49. package/docs/components/meta/comp.ts +224 -224
  50. package/docs/components/meta/dynamic-layer.ts +99 -99
  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 +160 -160
  54. package/docs/components/meta/guid.ts +42 -42
  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/page.ts +67 -67
  60. package/docs/components/meta/panel.ts +83 -0
  61. package/docs/components/meta/radio.ts +55 -55
  62. package/docs/components/meta/slider.ts +270 -270
  63. package/docs/components/meta/table-panel.ts +154 -154
  64. package/docs/components/meta/table.ts +328 -328
  65. package/docs/components/meta/tabs.ts +136 -136
  66. package/docs/components/meta/workflow-viewer.ts +55 -55
  67. package/docs/components/meta/workflow.ts +113 -113
  68. package/docs/components/number.md +124 -124
  69. package/docs/components/page.md +42 -42
  70. package/docs/components/panel.md +37 -0
  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 +199 -199
  78. package/docs/components/table.md +202 -202
  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 +54 -54
  137. package/docs/examples/count-up/basic.vue +89 -89
  138. package/docs/examples/data-panel/basic.vue +110 -110
  139. package/docs/examples/dialog/basic.vue +36 -36
  140. package/docs/examples/dialog/custom-buttons.vue +44 -44
  141. package/docs/examples/dialog/fullscreen.vue +23 -23
  142. package/docs/examples/dialog/no-mask.vue +17 -17
  143. package/docs/examples/dialog/size.vue +44 -44
  144. package/docs/examples/dialog/steps.vue +57 -57
  145. package/docs/examples/dialog-full/basic.vue +29 -29
  146. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  147. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  148. package/docs/examples/dialog-full/no-header.vue +27 -27
  149. package/docs/examples/dialog-full/steps.vue +71 -71
  150. package/docs/examples/divider/basic.vue +52 -52
  151. package/docs/examples/drawer/basic.vue +35 -35
  152. package/docs/examples/drawer/custom-buttons.vue +34 -34
  153. package/docs/examples/drawer/direction.vue +47 -47
  154. package/docs/examples/drawer/mask.vue +36 -36
  155. package/docs/examples/drawer/no-buttons.vue +20 -20
  156. package/docs/examples/drawer/size.vue +28 -28
  157. package/docs/examples/dynamic-layer/basic.vue +33 -33
  158. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  159. package/docs/examples/dynamic-layer/form.vue +73 -73
  160. package/docs/examples/dynamic-layer/steps.vue +52 -52
  161. package/docs/examples/dynamic-layer/types.vue +40 -40
  162. package/docs/examples/echarts/basic.vue +31 -31
  163. package/docs/examples/echarts/dynamic.vue +43 -43
  164. package/docs/examples/echarts/line.vue +46 -46
  165. package/docs/examples/echarts/pie.vue +44 -44
  166. package/docs/examples/editor/basic.vue +15 -15
  167. package/docs/examples/form/basic.vue +224 -224
  168. package/docs/examples/guid/basic.vue +10 -10
  169. package/docs/examples/guid/size.vue +13 -13
  170. package/docs/examples/hpanel/basic.vue +79 -79
  171. package/docs/examples/icon/basic.vue +9 -9
  172. package/docs/examples/icon/rotate-flip.vue +9 -9
  173. package/docs/examples/icon/size.vue +7 -7
  174. package/docs/examples/input/basic.vue +10 -10
  175. package/docs/examples/input/clearable.vue +12 -12
  176. package/docs/examples/input/disabled.vue +6 -6
  177. package/docs/examples/input/icon.vue +23 -23
  178. package/docs/examples/input/password.vue +18 -18
  179. package/docs/examples/input/size.vue +13 -13
  180. package/docs/examples/input/textarea.vue +25 -25
  181. package/docs/examples/input/word-limit.vue +28 -28
  182. package/docs/examples/input-button/basic.vue +33 -33
  183. package/docs/examples/input-code/basic.vue +29 -29
  184. package/docs/examples/input-color/basic.vue +10 -10
  185. package/docs/examples/input-color/disabled.vue +13 -13
  186. package/docs/examples/input-color/format.vue +17 -17
  187. package/docs/examples/input-color/no-alpha.vue +13 -13
  188. package/docs/examples/input-color/only-button.vue +15 -15
  189. package/docs/examples/input-color/predefine.vue +31 -31
  190. package/docs/examples/input-color/size.vue +15 -15
  191. package/docs/examples/input-layer/basic.vue +69 -69
  192. package/docs/examples/input-rows/basic.vue +73 -73
  193. package/docs/examples/input-rows/drag.vue +48 -48
  194. package/docs/examples/input-rows/layer-form.vue +85 -85
  195. package/docs/examples/input-rows/nested.vue +91 -91
  196. package/docs/examples/input-tag/basic.vue +27 -27
  197. package/docs/examples/input-tag/colors.vue +23 -23
  198. package/docs/examples/input-tag/readonly.vue +17 -17
  199. package/docs/examples/layer/basic.vue +43 -43
  200. package/docs/examples/layer/custom-buttons.vue +61 -61
  201. package/docs/examples/layer/drawer.vue +37 -37
  202. package/docs/examples/layer/full.vue +38 -38
  203. package/docs/examples/layer/modal.vue +34 -34
  204. package/docs/examples/layer/steps.vue +46 -46
  205. package/docs/examples/layer-form/basic.vue +76 -76
  206. package/docs/examples/layer-form/config.vue +82 -82
  207. package/docs/examples/layer-form/size.vue +72 -72
  208. package/docs/examples/layout/basic.vue +36 -36
  209. package/docs/examples/layout/custom-size.vue +50 -50
  210. package/docs/examples/layout/disable-move.vue +37 -37
  211. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  212. package/docs/examples/layout/min-size.vue +73 -73
  213. package/docs/examples/layout/percent-size.vue +80 -80
  214. package/docs/examples/layout/simple.vue +22 -22
  215. package/docs/examples/layout/top-side.vue +34 -34
  216. package/docs/examples/map/basic.vue +22 -22
  217. package/docs/examples/menu/basic.vue +58 -58
  218. package/docs/examples/menu/collapsed.vue +49 -49
  219. package/docs/examples/menu/horizontal.vue +44 -44
  220. package/docs/examples/menu/selection-test.vue +104 -104
  221. package/docs/examples/menu/theme.vue +46 -46
  222. package/docs/examples/menu/vertical.vue +46 -46
  223. package/docs/examples/number/advanced.vue +143 -143
  224. package/docs/examples/number/basic.vue +63 -63
  225. package/docs/examples/number/disabled.vue +49 -49
  226. package/docs/examples/number/size.vue +42 -42
  227. package/docs/examples/number/slots.vue +123 -123
  228. package/docs/examples/number/step-strictly.vue +41 -41
  229. package/docs/examples/number/step.vue +47 -47
  230. package/docs/examples/page/basic.vue +41 -41
  231. package/docs/examples/page/init.vue +87 -87
  232. package/docs/examples/panel/basic.vue +8 -0
  233. package/docs/examples/panel/tool-buttons.vue +18 -0
  234. package/docs/examples/radio/basic.vue +17 -17
  235. package/docs/examples/radio/button.vue +17 -17
  236. package/docs/examples/radio/color.vue +18 -18
  237. package/docs/examples/radio/disabled.vue +17 -17
  238. package/docs/examples/radio/size.vue +29 -29
  239. package/docs/examples/rate/basic.vue +24 -24
  240. package/docs/examples/rate/half.vue +24 -24
  241. package/docs/examples/rate/readonly.vue +11 -11
  242. package/docs/examples/rate/text.vue +32 -32
  243. package/docs/examples/select/basic.vue +16 -16
  244. package/docs/examples/select/clearable.vue +22 -22
  245. package/docs/examples/select/disabled.vue +31 -31
  246. package/docs/examples/select/filterable.vue +24 -24
  247. package/docs/examples/select/group.vue +23 -23
  248. package/docs/examples/select/icon.vue +16 -16
  249. package/docs/examples/select/multiple.vue +18 -18
  250. package/docs/examples/select/size.vue +39 -39
  251. package/docs/examples/slider/basic.vue +42 -42
  252. package/docs/examples/slider/disabled.vue +17 -17
  253. package/docs/examples/slider/marks.vue +30 -30
  254. package/docs/examples/slider/size.vue +37 -37
  255. package/docs/examples/slider/tooltip.vue +36 -36
  256. package/docs/examples/slider/vertical.vue +26 -26
  257. package/docs/examples/slider-captcha/basic.vue +44 -44
  258. package/docs/examples/slider-captcha/custom.vue +48 -48
  259. package/docs/examples/switch/basic.vue +16 -16
  260. package/docs/examples/switch/disabled.vue +13 -13
  261. package/docs/examples/switch/loading.vue +13 -13
  262. package/docs/examples/switch/size.vue +15 -15
  263. package/docs/examples/switch/text.vue +13 -13
  264. package/docs/examples/table/actions.vue +116 -116
  265. package/docs/examples/table/add-row.vue +103 -103
  266. package/docs/examples/table/basic.vue +168 -168
  267. package/docs/examples/table/editable.vue +261 -261
  268. package/docs/examples/table/field-selection.vue +87 -87
  269. package/docs/examples/table/frozen-column.vue +140 -140
  270. package/docs/examples/table/height-mode.vue +99 -99
  271. package/docs/examples/table/multiple.vue +178 -178
  272. package/docs/examples/table/pagination.vue +151 -151
  273. package/docs/examples/table/single-selection.vue +64 -64
  274. package/docs/examples/table/tree-column.vue +119 -119
  275. package/docs/examples/table/tree-data.vue +141 -141
  276. package/docs/examples/table-panel/basic.vue +228 -228
  277. package/docs/examples/table-panel/batch-operations.vue +285 -285
  278. package/docs/examples/table-panel/filter.vue +209 -209
  279. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  280. package/docs/examples/table-panel/pagination.vue +133 -133
  281. package/docs/examples/tabs/basic.vue +98 -98
  282. package/docs/examples/title/basic.vue +80 -80
  283. package/docs/examples/tree/accordion.vue +46 -46
  284. package/docs/examples/tree/basic.vue +50 -50
  285. package/docs/examples/tree/buttons.vue +53 -53
  286. package/docs/examples/tree/checkable.vue +52 -52
  287. package/docs/examples/tree/custom-keys.vue +39 -39
  288. package/docs/examples/tree/default-expanded.vue +52 -52
  289. package/docs/examples/tree/draggable.vue +29 -29
  290. package/docs/examples/tree/expand-on-click.vue +39 -39
  291. package/docs/examples/tree/flat-data.vue +20 -20
  292. package/docs/examples/tree/icon.vue +40 -40
  293. package/docs/examples/tree/load-data.vue +37 -37
  294. package/docs/examples/tree/methods.vue +74 -74
  295. package/docs/examples/tree/theme.vue +33 -33
  296. package/docs/examples/upload/accept.vue +31 -31
  297. package/docs/examples/upload/basic.vue +12 -12
  298. package/docs/examples/upload/drag.vue +11 -11
  299. package/docs/examples/upload/image.vue +17 -17
  300. package/docs/examples/upload/limit.vue +20 -20
  301. package/docs/examples/upload/multiple.vue +17 -17
  302. package/docs/examples/upload/readonly.vue +17 -17
  303. package/docs/examples/utils/cipher.vue +160 -160
  304. package/docs/examples/utils/common.vue +153 -153
  305. package/docs/examples/utils/date.vue +56 -56
  306. package/docs/examples/utils/dom.vue +52 -52
  307. package/docs/examples/utils/is.vue +70 -70
  308. package/docs/examples/workflow/basic.vue +265 -265
  309. package/docs/examples/workflow-viewer/basic.vue +248 -248
  310. package/package.json +23 -23
@@ -1,20 +1,20 @@
1
- <template>
2
- <div>
3
- <j-upload
4
- v-model="fileId"
5
- placeholder="限制上传数量"
6
- :is-not-api="true"
7
- :multiple="true"
8
- :limit="3"
9
- :is-tip="true"
10
- :max-size="10"
11
- size-type="MB"
12
- />
13
- </div>
14
- </template>
15
-
16
- <script setup lang="ts">
17
- import { ref } from 'vue'
18
-
19
- const fileId = ref('')
20
- </script>
1
+ <template>
2
+ <div>
3
+ <j-upload
4
+ v-model="fileId"
5
+ placeholder="限制上传数量"
6
+ :is-not-api="true"
7
+ :multiple="true"
8
+ :limit="3"
9
+ :is-tip="true"
10
+ :max-size="10"
11
+ size-type="MB"
12
+ />
13
+ </div>
14
+ </template>
15
+
16
+ <script setup lang="ts">
17
+ import { ref } from 'vue'
18
+
19
+ const fileId = ref('')
20
+ </script>
@@ -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>