@a2simcode/ui 0.0.181 → 0.0.183

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