@a2simcode/ui 0.0.66 → 0.0.68

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