@a2simcode/ui 0.0.153 → 0.0.155

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