@robot-admin/naive-ui-components 0.6.19 → 0.6.21

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 (274) hide show
  1. package/CHANGELOG.md +48 -48
  2. package/README.md +277 -277
  3. package/dist/C_ActionBar-jZPsiXtT.css.map +1 -0
  4. package/dist/C_ActionBar-nnfbZCea.css.map +1 -0
  5. package/dist/C_ActionBar.css +47 -47
  6. package/dist/C_ActionBar.js.map +1 -1
  7. package/dist/C_ActionBar2.js +1 -1
  8. package/dist/C_ActionBar2.js.map +1 -1
  9. package/dist/{C_AntV-BY8jqqmi.css.map → C_AntV-A3NXx_sF.css.map} +1 -1
  10. package/dist/{C_AntV-BbkHc-_a.css.map → C_AntV-D2Zp2qQF.css.map} +1 -1
  11. package/dist/C_AntV.css +78 -78
  12. package/dist/C_AntV.js.map +1 -1
  13. package/dist/C_AntV2.js +2 -2
  14. package/dist/C_AntV2.js.map +1 -1
  15. package/dist/{C_AudioPlayer-DKRIGhi7.css.map → C_AudioPlayer-CXl4yP_m.css.map} +1 -1
  16. package/dist/{C_AudioPlayer-DlB6eNsa.css.map → C_AudioPlayer-CcBtt71m.css.map} +1 -1
  17. package/dist/C_AudioPlayer.css +47 -47
  18. package/dist/C_AudioPlayer.js.map +1 -1
  19. package/dist/C_AudioPlayer2.js +1 -1
  20. package/dist/C_AudioPlayer2.js.map +1 -1
  21. package/dist/{C_AvatarGroup-D02zci-i.css.map → C_AvatarGroup-CtPhfH9h.css.map} +1 -1
  22. package/dist/{C_AvatarGroup-DatHaUlY.css.map → C_AvatarGroup-M1dNPH3E.css.map} +1 -1
  23. package/dist/C_AvatarGroup.css +21 -21
  24. package/dist/C_AvatarGroup.js.map +1 -1
  25. package/dist/C_AvatarGroup2.js +1 -1
  26. package/dist/C_AvatarGroup2.js.map +1 -1
  27. package/dist/{C_Barcode-DYDRDe2O.css.map → C_Barcode-DjTmDkbQ.css.map} +1 -1
  28. package/dist/{C_Barcode-muJdc_O4.css.map → C_Barcode-Do1Ozsmh.css.map} +1 -1
  29. package/dist/C_Barcode.css +7 -7
  30. package/dist/C_Barcode.js.map +1 -1
  31. package/dist/C_Barcode2.js +1 -1
  32. package/dist/C_Barcode2.js.map +1 -1
  33. package/dist/C_Breadcrumb.js.map +1 -1
  34. package/dist/C_Breadcrumb2.js.map +1 -1
  35. package/dist/{C_Captcha-9_hk6VmY.css.map → C_Captcha-CZmAETly.css.map} +1 -1
  36. package/dist/{C_Captcha-MtASlJ0f.css.map → C_Captcha-Ccq3DMrR.css.map} +1 -1
  37. package/dist/C_Captcha.css +19 -19
  38. package/dist/C_Captcha.js.map +1 -1
  39. package/dist/C_Captcha2.js +1 -1
  40. package/dist/C_Captcha2.js.map +1 -1
  41. package/dist/{C_Chat-CcjZdAwu.css.map → C_Chat-CcdWgVE8.css.map} +1 -1
  42. package/dist/{C_Chat-Diq7tyWU.css.map → C_Chat-Cx0woEEe.css.map} +1 -1
  43. package/dist/C_Chat.css +65 -65
  44. package/dist/C_Chat.js.map +1 -1
  45. package/dist/C_Chat2.js +1 -1
  46. package/dist/C_Chat2.js.map +1 -1
  47. package/dist/{C_City-Bam08Qv3.css.map → C_City-Cv5BESaN.css.map} +1 -1
  48. package/dist/{C_City-Bb3W-KaN.css.map → C_City-DNKv4MpH.css.map} +1 -1
  49. package/dist/C_City.css +29 -29
  50. package/dist/C_City.js.map +1 -1
  51. package/dist/C_City2.js +1 -1
  52. package/dist/C_City2.js.map +1 -1
  53. package/dist/C_Code-DPZlNSxL.css.map +1 -0
  54. package/dist/C_Code-avZjAnHD.css.map +1 -0
  55. package/dist/C_Code.css +3 -3
  56. package/dist/C_Code.js.map +1 -1
  57. package/dist/C_Code2.js +1 -1
  58. package/dist/C_Code2.js.map +1 -1
  59. package/dist/{C_CollapsePanel-BCmTFuDz.css.map → C_CollapsePanel-B18ryXwh.css.map} +1 -1
  60. package/dist/{C_CollapsePanel-Bxnh4Zy-.css.map → C_CollapsePanel-BiGoiHgh.css.map} +1 -1
  61. package/dist/C_CollapsePanel.css +35 -35
  62. package/dist/C_CollapsePanel.js.map +1 -1
  63. package/dist/C_CollapsePanel2.js +1 -1
  64. package/dist/C_CollapsePanel2.js.map +1 -1
  65. package/dist/{C_ContextMenu-B3Cgz_wJ.css.map → C_ContextMenu-CCsCeI39.css.map} +1 -1
  66. package/dist/{C_ContextMenu-u1LixF3_.css.map → C_ContextMenu-DOTBeltf.css.map} +1 -1
  67. package/dist/C_ContextMenu.css +17 -17
  68. package/dist/C_ContextMenu.js.map +1 -1
  69. package/dist/C_ContextMenu2.js +1 -1
  70. package/dist/C_ContextMenu2.js.map +1 -1
  71. package/dist/{C_Cron-Civir5-I.css.map → C_Cron-C0-8b5af.css.map} +1 -1
  72. package/dist/{C_Cron-iw3qpMsy.css.map → C_Cron-DqHQ92LN.css.map} +1 -1
  73. package/dist/C_Cron.css +37 -37
  74. package/dist/C_Cron.js.map +1 -1
  75. package/dist/C_Cron2.js +1 -1
  76. package/dist/C_Cron2.js.map +1 -1
  77. package/dist/C_Date.js.map +1 -1
  78. package/dist/C_Date2.js.map +1 -1
  79. package/dist/{C_Draggable-BCjIvIwT.css.map → C_Draggable-Bq6o0qXn.css.map} +1 -1
  80. package/dist/{C_Draggable-DwkSlCOS.css.map → C_Draggable-r6nhx3yM.css.map} +1 -1
  81. package/dist/C_Draggable.css +46 -46
  82. package/dist/C_Draggable.js.map +1 -1
  83. package/dist/C_Draggable2.js +1 -1
  84. package/dist/C_Draggable2.js.map +1 -1
  85. package/dist/{C_FilePreview-BhcbiXsV.css.map → C_FilePreview-BVarVvnD.css.map} +1 -1
  86. package/dist/{C_FilePreview-DJudcIbW.css.map → C_FilePreview-DHGlV4OR.css.map} +1 -1
  87. package/dist/C_FilePreview.css +91 -91
  88. package/dist/C_FilePreview.js.map +1 -1
  89. package/dist/C_FilePreview2.js +1 -1
  90. package/dist/C_FilePreview2.js.map +1 -1
  91. package/dist/{C_Form-BtcAPIRi.css.map → C_Form-BciQUPpS.css.map} +1 -1
  92. package/dist/{C_Form-D_gwQ7hC.css.map → C_Form-CKHvXL3O.css.map} +1 -1
  93. package/dist/C_Form.css +222 -222
  94. package/dist/C_Form.d.cts +2 -2
  95. package/dist/C_Form.d.ts +2 -2
  96. package/dist/C_Form.js.map +1 -1
  97. package/dist/C_Form2.js +1 -1
  98. package/dist/C_Form2.js.map +1 -1
  99. package/dist/{C_FormSearch-Bi4XYjjk.css.map → C_FormSearch-Bmd2CmG6.css.map} +1 -1
  100. package/dist/{C_FormSearch-DUGOoX0u.css.map → C_FormSearch-DBNtnjaL.css.map} +1 -1
  101. package/dist/C_FormSearch.css +45 -45
  102. package/dist/C_FormSearch.js.map +1 -1
  103. package/dist/C_FormSearch2.js +1 -1
  104. package/dist/C_FormSearch2.js.map +1 -1
  105. package/dist/{C_FormulaEditor-CJk3SSUJ.css.map → C_FormulaEditor-3WG2vtQl.css.map} +1 -1
  106. package/dist/{C_FormulaEditor-Cy7mjfVO.css.map → C_FormulaEditor-Cm0CokN5.css.map} +1 -1
  107. package/dist/C_FormulaEditor.css +78 -78
  108. package/dist/C_FormulaEditor.js.map +1 -1
  109. package/dist/C_FormulaEditor2.js +1 -1
  110. package/dist/C_FormulaEditor2.js.map +1 -1
  111. package/dist/C_FullCalendar-1U4VlG7X.css.map +1 -0
  112. package/dist/C_FullCalendar-DLUdCtqf.css.map +1 -0
  113. package/dist/C_FullCalendar.css +3 -3
  114. package/dist/C_FullCalendar.js.map +1 -1
  115. package/dist/C_FullCalendar2.js +1 -1
  116. package/dist/C_FullCalendar2.js.map +1 -1
  117. package/dist/C_Icon.js.map +1 -1
  118. package/dist/C_Icon2.js.map +1 -1
  119. package/dist/{C_ImageCropper-BqZpkZfU.css.map → C_ImageCropper-D3L2-J_J.css.map} +1 -1
  120. package/dist/{C_ImageCropper-CylwGuzS.css.map → C_ImageCropper-DrmUlaLi.css.map} +1 -1
  121. package/dist/C_ImageCropper.css +10 -10
  122. package/dist/C_ImageCropper.js.map +1 -1
  123. package/dist/C_ImageCropper2.js +1 -1
  124. package/dist/C_ImageCropper2.js.map +1 -1
  125. package/dist/C_Language.js.map +1 -1
  126. package/dist/C_Language2.js.map +1 -1
  127. package/dist/{C_Login-BkdnkBKX.css.map → C_Login-Cst_W1XC.css.map} +1 -1
  128. package/dist/{C_Login-VkMM6OJ2.css.map → C_Login-DWZ_6K1x.css.map} +1 -1
  129. package/dist/C_Login.css +72 -72
  130. package/dist/C_Login.js.map +1 -1
  131. package/dist/C_Login2.js +1 -1
  132. package/dist/C_Login2.js.map +1 -1
  133. package/dist/{C_Map-DNnBcY70.css.map → C_Map-BCJmDnJT.css.map} +1 -1
  134. package/dist/{C_Map-LEXIx6zM.css.map → C_Map-WUMXSAfy.css.map} +1 -1
  135. package/dist/C_Map.css +4 -4
  136. package/dist/C_Map.js.map +1 -1
  137. package/dist/C_Map2.js +1 -1
  138. package/dist/C_Map2.js.map +1 -1
  139. package/dist/{C_Markdown-Kujzx1qG.css.map → C_Markdown-7iBnLDtL.css.map} +1 -1
  140. package/dist/{C_Markdown-YCAmBbNF.css.map → C_Markdown-BbTvdFCl.css.map} +1 -1
  141. package/dist/C_Markdown.css +33 -33
  142. package/dist/C_Markdown.js.map +1 -1
  143. package/dist/C_Markdown2.js +1 -1
  144. package/dist/C_Markdown2.js.map +1 -1
  145. package/dist/{C_QRCode-CFNTda_1.css.map → C_QRCode-DMxSyogU.css.map} +1 -1
  146. package/dist/{C_QRCode-CmWr9lK-.css.map → C_QRCode-G7fiAkm4.css.map} +1 -1
  147. package/dist/C_QRCode.css +9 -9
  148. package/dist/C_QRCode.js.map +1 -1
  149. package/dist/C_QRCode2.js +1 -1
  150. package/dist/C_QRCode2.js.map +1 -1
  151. package/dist/{C_Signature-PN4GOLRX.css.map → C_Signature-B5fFz6RD.css.map} +1 -1
  152. package/dist/{C_Signature-fWQqGIZ-.css.map → C_Signature-es-ZNPzr.css.map} +1 -1
  153. package/dist/C_Signature.css +14 -14
  154. package/dist/C_Signature.js.map +1 -1
  155. package/dist/C_Signature2.js +1 -1
  156. package/dist/C_Signature2.js.map +1 -1
  157. package/dist/{C_SplitPane-BOwr1C7K.css.map → C_SplitPane-Br2eK8IG.css.map} +1 -1
  158. package/dist/{C_SplitPane-N-a_D-7F.css.map → C_SplitPane-DuyzUhKB.css.map} +1 -1
  159. package/dist/C_SplitPane.css +31 -31
  160. package/dist/C_SplitPane.js.map +1 -1
  161. package/dist/C_SplitPane2.js +1 -1
  162. package/dist/C_SplitPane2.js.map +1 -1
  163. package/dist/C_Steps-BHYNJI1l.css.map +1 -0
  164. package/dist/C_Steps-DY7vl-4I.css.map +1 -0
  165. package/dist/C_Steps.css +38 -38
  166. package/dist/C_Steps.js.map +1 -1
  167. package/dist/C_Steps2.js +1 -1
  168. package/dist/C_Steps2.js.map +1 -1
  169. package/dist/{C_Table-BV1wUw6f.css.map → C_Table-vZlcgH6x.css.map} +1 -1
  170. package/dist/{C_Table-LlJ-JEdm.css.map → C_Table-wzAO43l0.css.map} +1 -1
  171. package/dist/C_Table.css +93 -93
  172. package/dist/C_Table.js.map +1 -1
  173. package/dist/C_Table2.js +1 -1
  174. package/dist/C_Table2.js.map +1 -1
  175. package/dist/{C_TagsView-DX3LecK1.css.map → C_TagsView-BsutyC3U.css.map} +1 -1
  176. package/dist/{C_TagsView-DqOTa8bL.css.map → C_TagsView-Crm7yWg9.css.map} +1 -1
  177. package/dist/C_TagsView.css +36 -36
  178. package/dist/C_TagsView.js.map +1 -1
  179. package/dist/C_TagsView2.js +1 -1
  180. package/dist/C_TagsView2.js.map +1 -1
  181. package/dist/C_Time-Bd_e1YDN.css.map +1 -0
  182. package/dist/C_Time-CKb_fwdm.css.map +1 -0
  183. package/dist/C_Time.css +5 -5
  184. package/dist/C_Time.js.map +1 -1
  185. package/dist/C_Time2.js +1 -1
  186. package/dist/C_Time2.js.map +1 -1
  187. package/dist/{C_Timeline-BIvw3f41.css.map → C_Timeline-CGTFTMX0.css.map} +1 -1
  188. package/dist/{C_Timeline-VsDfCv4Q.css.map → C_Timeline-DxKyvKer.css.map} +1 -1
  189. package/dist/C_Timeline.css +42 -42
  190. package/dist/C_Timeline.js.map +1 -1
  191. package/dist/C_Timeline2.js +1 -1
  192. package/dist/C_Timeline2.js.map +1 -1
  193. package/dist/{C_Transfer-BOB6OBqS.css.map → C_Transfer-CCEqnC-v.css.map} +1 -1
  194. package/dist/{C_Transfer-Dpq7ezWC.css.map → C_Transfer-CStPm4NP.css.map} +1 -1
  195. package/dist/C_Transfer.css +31 -31
  196. package/dist/C_Transfer.js.map +1 -1
  197. package/dist/C_Transfer2.js +1 -1
  198. package/dist/C_Transfer2.js.map +1 -1
  199. package/dist/{C_Tree-D98nX9qT.css.map → C_Tree-B-Le4hjQ.css.map} +1 -1
  200. package/dist/{C_Tree-ulfm7b-P.css.map → C_Tree-DnGc_MPb.css.map} +1 -1
  201. package/dist/C_Tree.css +33 -33
  202. package/dist/C_Tree.js.map +1 -1
  203. package/dist/C_Tree2.js +1 -1
  204. package/dist/C_Tree2.js.map +1 -1
  205. package/dist/{C_VideoPlayer-4J96tKfK.css.map → C_VideoPlayer-Cdgv4Zq0.css.map} +1 -1
  206. package/dist/{C_VideoPlayer-D35seHkm.css.map → C_VideoPlayer-rm0MODUv.css.map} +1 -1
  207. package/dist/C_VideoPlayer.css +13 -13
  208. package/dist/C_VideoPlayer.js.map +1 -1
  209. package/dist/C_VideoPlayer2.js +1 -1
  210. package/dist/C_VideoPlayer2.js.map +1 -1
  211. package/dist/{C_VtableGantt-C2lxFmWg.css.map → C_VtableGantt-BpY-Rng3.css.map} +1 -1
  212. package/dist/{C_VtableGantt-Dwnkw_WL.css.map → C_VtableGantt-DB87-jdS.css.map} +1 -1
  213. package/dist/C_VtableGantt.css +15 -15
  214. package/dist/C_VtableGantt.js.map +1 -1
  215. package/dist/C_VtableGantt2.js +1 -1
  216. package/dist/C_VtableGantt2.js.map +1 -1
  217. package/dist/{C_WorkFlow-2hJfvvTK.css.map → C_WorkFlow-7F6op6qN.css.map} +1 -1
  218. package/dist/{C_WorkFlow-DHoNjl8-.css.map → C_WorkFlow-Cy3HWA6A.css.map} +1 -1
  219. package/dist/C_WorkFlow.css +108 -108
  220. package/dist/C_WorkFlow.js.map +1 -1
  221. package/dist/C_WorkFlow2.js +1 -1
  222. package/dist/C_WorkFlow2.js.map +1 -1
  223. package/dist/constants.d.ts +2 -2
  224. package/dist/constants2.d.ts +1 -1
  225. package/dist/constants3.d.ts +2 -2
  226. package/dist/constants4.d.ts +3 -3
  227. package/dist/data.d.ts +1 -1
  228. package/dist/index.cjs.map +1 -1
  229. package/dist/index.d.cts +2 -2
  230. package/dist/index.d.ts +2 -2
  231. package/dist/index.js.map +1 -1
  232. package/dist/index10.vue.d.ts +3 -3
  233. package/dist/index11.vue.d.ts +5 -5
  234. package/dist/index13.vue.d.ts +1 -1
  235. package/dist/index15.vue.d.ts +2 -2
  236. package/dist/index18.vue.d.ts +3 -3
  237. package/dist/index2.vue.d.ts +5 -5
  238. package/dist/index20.vue.d.ts +2 -2
  239. package/dist/index24.vue.d.ts +2 -2
  240. package/dist/index26.vue.d.ts +2 -2
  241. package/dist/index3.vue.d.ts +1 -1
  242. package/dist/index4.vue.d.ts +5 -5
  243. package/dist/index6.vue.d.ts +2 -2
  244. package/dist/index8.vue.d.ts +2 -2
  245. package/dist/menuAdapter.js.map +1 -1
  246. package/dist/resolver.cjs.map +1 -1
  247. package/dist/resolver.js.map +1 -1
  248. package/dist/style.css +1512 -1512
  249. package/dist/useCalendarEvents.d.ts +1 -1
  250. package/dist/useCollapsePanel.d.ts +3 -1
  251. package/dist/useCropperCore.d.ts +5 -5
  252. package/dist/useDraggableLayout.d.ts +3 -3
  253. package/dist/useDynamicFormState.d.ts +7 -7
  254. package/dist/useEdgeInteraction.d.ts +1 -1
  255. package/dist/useFullscreen.d.ts +2 -2
  256. package/dist/useInfiniteScroll.d.ts +3 -3
  257. package/dist/useModalEdit.d.ts +3 -3
  258. package/dist/useQRCode.d.ts +3 -3
  259. package/dist/useSignatureHistory.d.ts +1 -1
  260. package/dist/useSplitResize.d.ts +2 -2
  261. package/dist/useTimeSelection.d.ts +2 -2
  262. package/dist/useTreeOperations.d.ts +3 -3
  263. package/dist/useWorkflowValidation.d.ts +2 -2
  264. package/package.json +1 -1
  265. package/dist/C_ActionBar-DYG0Yf3A.css.map +0 -1
  266. package/dist/C_ActionBar-MAjRhqcI.css.map +0 -1
  267. package/dist/C_Code-BFi5xxnM.css.map +0 -1
  268. package/dist/C_Code-CZ7yfnri.css.map +0 -1
  269. package/dist/C_FullCalendar-BQA0OjGB.css.map +0 -1
  270. package/dist/C_FullCalendar-ChJUosAi.css.map +0 -1
  271. package/dist/C_Steps-Bk1krgiR.css.map +0 -1
  272. package/dist/C_Steps-Dn2CMpy1.css.map +0 -1
  273. package/dist/C_Time-BzyQVvTS.css.map +0 -1
  274. package/dist/C_Time-DmpKLQHc.css.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"C_Markdown2.js","names":["isDark","modelValue","height","placeholder","toolbar","mode","tocNavPosition","defaultFullscreen","autofocus","includeLevel","leftToolbar","rightToolbar"],"sources":["../src/components/C_Markdown/index.vue","../src/components/C_Markdown/index.vue","../src/components/C_Markdown/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-20\n * @Description: Markdown 编辑器封装组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n class=\"c-markdown-wrapper\"\n :class=\"{ 'is-dark': isDark }\"\n >\n <VMdEditor\n ref=\"editorRef\"\n :model-value=\"modelValue\"\n :height=\"height\"\n :placeholder=\"placeholder\"\n :toolbar=\"toolbar\"\n :mode=\"mode\"\n :upload-image-config=\"computedUploadImageConfig\"\n :toc-nav-position=\"tocNavPosition\"\n :default-fullscreen=\"defaultFullscreen\"\n :autofocus=\"autofocus\"\n :include-level=\"includeLevel\"\n :left-toolbar=\"leftToolbar\"\n :right-toolbar=\"rightToolbar\"\n :default-show-toc=\"true\"\n @update:model-value=\"handleInput\"\n @change=\"handleChange\"\n @save=\"handleSave\"\n @upload-image=\"handleUploadImage\"\n @fullscreen-change=\"handleFullscreenChange\"\n @copy-code-success=\"handleCopyCodeSuccess\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref, computed, watch, onMounted } from 'vue'\n import VMdEditor from '@kangc/v-md-editor'\n\n defineOptions({ name: 'C_Markdown' })\n\n export type InsertImageFunction = (config: {\n url: string\n desc?: string\n width?: string | number\n height?: string | number\n }) => void\n\n interface Props {\n modelValue?: string\n height?: string | number\n disabled?: boolean\n placeholder?: string\n mode?: 'edit' | 'editable' | 'preview'\n toolbar?: object\n uploadImageConfig?: {\n accept?: string\n multiple?: boolean\n [key: string]: any\n }\n tocNavPosition?: 'left' | 'right'\n defaultFullscreen?: boolean\n autofocus?: boolean\n includeLevel?: number[]\n leftToolbar?: string\n rightToolbar?: string\n maxLength?: number\n showWordCount?: boolean\n autoSave?: boolean\n autoSaveInterval?: number\n /** 是否为暗色主题(外部传入) */\n isDark?: boolean\n }\n\n const props = withDefaults(defineProps<Props>(), {\n modelValue: '',\n height: '400px',\n disabled: false,\n placeholder: '请输入 Markdown 内容...',\n mode: 'editable',\n tocNavPosition: 'right',\n defaultFullscreen: false,\n autofocus: false,\n includeLevel: () => [1, 2, 3, 4, 5, 6],\n leftToolbar:\n 'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save',\n rightToolbar: 'preview toc sync-scroll fullscreen',\n maxLength: 50000,\n showWordCount: true,\n autoSave: false,\n autoSaveInterval: 30000,\n isDark: false,\n })\n\n interface Emits {\n 'update:modelValue': [value: string]\n change: [text: string, html: string]\n save: [text: string, html: string]\n 'upload-image': [\n event: Event,\n insertImage: InsertImageFunction,\n files: FileList,\n ]\n 'fullscreen-change': [isFullscreen: boolean]\n 'copy-code-success': [text: string]\n 'word-count-change': [count: number]\n 'auto-save': [text: string]\n 'max-length-exceeded': [currentLength: number, maxLength: number]\n }\n\n const emit = defineEmits<Emits>()\n\n const editorRef = ref<any>(null)\n const cachedHtml = ref('')\n\n const wordCount = computed(() => {\n return props.modelValue?.length || 0\n })\n\n const computedUploadImageConfig = computed(() => {\n const defaultConfig = {\n accept: 'image/*',\n multiple: false,\n }\n return props.uploadImageConfig\n ? { ...defaultConfig, ...props.uploadImageConfig }\n : defaultConfig\n })\n\n onMounted(() => {\n if (props.showWordCount && props.modelValue) {\n emit('word-count-change', props.modelValue.length)\n }\n })\n\n watch(\n () => props.modelValue,\n newValue => {\n if (props.showWordCount) {\n emit('word-count-change', newValue?.length || 0)\n }\n },\n { immediate: true }\n )\n\n const handleInput = (value: string) => {\n if (value.length > props.maxLength) {\n emit('max-length-exceeded', value.length, props.maxLength)\n return\n }\n emit('update:modelValue', value)\n if (props.showWordCount) {\n emit('word-count-change', value.length)\n }\n }\n\n const handleChange = (text: string, html: string) => {\n cachedHtml.value = html\n emit('change', text, html)\n if (props.autoSave) {\n autoSave(text)\n }\n }\n\n const handleSave = (text: string, html: string) => {\n emit('save', text, html)\n }\n\n const handleUploadImage = (\n event: Event,\n insertImage: InsertImageFunction,\n files: FileList\n ) => {\n emit('upload-image', event, insertImage, files)\n }\n\n const handleFullscreenChange = (isFullscreen: boolean) => {\n emit('fullscreen-change', isFullscreen)\n }\n\n const handleCopyCodeSuccess = (text: string) => {\n emit('copy-code-success', text)\n }\n\n let autoSaveTimer: ReturnType<typeof setTimeout> | null = null\n\n const autoSave = (text: string) => {\n if (autoSaveTimer) clearTimeout(autoSaveTimer)\n autoSaveTimer = setTimeout(() => {\n emit('auto-save', text)\n }, props.autoSaveInterval)\n }\n\n const focus = () => {\n editorRef.value?.focus()\n }\n\n const getHtml = (): string => {\n return cachedHtml.value\n }\n\n const insertText = (text: string) => {\n editorRef.value?.insert((selected: string) => ({\n text: `${selected}${text}`,\n selected: text,\n }))\n }\n\n defineExpose({\n focus,\n getHtml,\n insertText,\n wordCount,\n })\n</script>\n\n<style lang=\"scss\" scoped>\n @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-20\n * @Description: Markdown 编辑器封装组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n class=\"c-markdown-wrapper\"\n :class=\"{ 'is-dark': isDark }\"\n >\n <VMdEditor\n ref=\"editorRef\"\n :model-value=\"modelValue\"\n :height=\"height\"\n :placeholder=\"placeholder\"\n :toolbar=\"toolbar\"\n :mode=\"mode\"\n :upload-image-config=\"computedUploadImageConfig\"\n :toc-nav-position=\"tocNavPosition\"\n :default-fullscreen=\"defaultFullscreen\"\n :autofocus=\"autofocus\"\n :include-level=\"includeLevel\"\n :left-toolbar=\"leftToolbar\"\n :right-toolbar=\"rightToolbar\"\n :default-show-toc=\"true\"\n @update:model-value=\"handleInput\"\n @change=\"handleChange\"\n @save=\"handleSave\"\n @upload-image=\"handleUploadImage\"\n @fullscreen-change=\"handleFullscreenChange\"\n @copy-code-success=\"handleCopyCodeSuccess\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref, computed, watch, onMounted } from 'vue'\n import VMdEditor from '@kangc/v-md-editor'\n\n defineOptions({ name: 'C_Markdown' })\n\n export type InsertImageFunction = (config: {\n url: string\n desc?: string\n width?: string | number\n height?: string | number\n }) => void\n\n interface Props {\n modelValue?: string\n height?: string | number\n disabled?: boolean\n placeholder?: string\n mode?: 'edit' | 'editable' | 'preview'\n toolbar?: object\n uploadImageConfig?: {\n accept?: string\n multiple?: boolean\n [key: string]: any\n }\n tocNavPosition?: 'left' | 'right'\n defaultFullscreen?: boolean\n autofocus?: boolean\n includeLevel?: number[]\n leftToolbar?: string\n rightToolbar?: string\n maxLength?: number\n showWordCount?: boolean\n autoSave?: boolean\n autoSaveInterval?: number\n /** 是否为暗色主题(外部传入) */\n isDark?: boolean\n }\n\n const props = withDefaults(defineProps<Props>(), {\n modelValue: '',\n height: '400px',\n disabled: false,\n placeholder: '请输入 Markdown 内容...',\n mode: 'editable',\n tocNavPosition: 'right',\n defaultFullscreen: false,\n autofocus: false,\n includeLevel: () => [1, 2, 3, 4, 5, 6],\n leftToolbar:\n 'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save',\n rightToolbar: 'preview toc sync-scroll fullscreen',\n maxLength: 50000,\n showWordCount: true,\n autoSave: false,\n autoSaveInterval: 30000,\n isDark: false,\n })\n\n interface Emits {\n 'update:modelValue': [value: string]\n change: [text: string, html: string]\n save: [text: string, html: string]\n 'upload-image': [\n event: Event,\n insertImage: InsertImageFunction,\n files: FileList,\n ]\n 'fullscreen-change': [isFullscreen: boolean]\n 'copy-code-success': [text: string]\n 'word-count-change': [count: number]\n 'auto-save': [text: string]\n 'max-length-exceeded': [currentLength: number, maxLength: number]\n }\n\n const emit = defineEmits<Emits>()\n\n const editorRef = ref<any>(null)\n const cachedHtml = ref('')\n\n const wordCount = computed(() => {\n return props.modelValue?.length || 0\n })\n\n const computedUploadImageConfig = computed(() => {\n const defaultConfig = {\n accept: 'image/*',\n multiple: false,\n }\n return props.uploadImageConfig\n ? { ...defaultConfig, ...props.uploadImageConfig }\n : defaultConfig\n })\n\n onMounted(() => {\n if (props.showWordCount && props.modelValue) {\n emit('word-count-change', props.modelValue.length)\n }\n })\n\n watch(\n () => props.modelValue,\n newValue => {\n if (props.showWordCount) {\n emit('word-count-change', newValue?.length || 0)\n }\n },\n { immediate: true }\n )\n\n const handleInput = (value: string) => {\n if (value.length > props.maxLength) {\n emit('max-length-exceeded', value.length, props.maxLength)\n return\n }\n emit('update:modelValue', value)\n if (props.showWordCount) {\n emit('word-count-change', value.length)\n }\n }\n\n const handleChange = (text: string, html: string) => {\n cachedHtml.value = html\n emit('change', text, html)\n if (props.autoSave) {\n autoSave(text)\n }\n }\n\n const handleSave = (text: string, html: string) => {\n emit('save', text, html)\n }\n\n const handleUploadImage = (\n event: Event,\n insertImage: InsertImageFunction,\n files: FileList\n ) => {\n emit('upload-image', event, insertImage, files)\n }\n\n const handleFullscreenChange = (isFullscreen: boolean) => {\n emit('fullscreen-change', isFullscreen)\n }\n\n const handleCopyCodeSuccess = (text: string) => {\n emit('copy-code-success', text)\n }\n\n let autoSaveTimer: ReturnType<typeof setTimeout> | null = null\n\n const autoSave = (text: string) => {\n if (autoSaveTimer) clearTimeout(autoSaveTimer)\n autoSaveTimer = setTimeout(() => {\n emit('auto-save', text)\n }, props.autoSaveInterval)\n }\n\n const focus = () => {\n editorRef.value?.focus()\n }\n\n const getHtml = (): string => {\n return cachedHtml.value\n }\n\n const insertText = (text: string) => {\n editorRef.value?.insert((selected: string) => ({\n text: `${selected}${text}`,\n selected: text,\n }))\n }\n\n defineExpose({\n focus,\n getHtml,\n insertText,\n wordCount,\n })\n</script>\n\n<style lang=\"scss\" scoped>\n @use './index.scss';\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-20\n * @Description: Markdown 编辑器封装组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n class=\"c-markdown-wrapper\"\n :class=\"{ 'is-dark': isDark }\"\n >\n <VMdEditor\n ref=\"editorRef\"\n :model-value=\"modelValue\"\n :height=\"height\"\n :placeholder=\"placeholder\"\n :toolbar=\"toolbar\"\n :mode=\"mode\"\n :upload-image-config=\"computedUploadImageConfig\"\n :toc-nav-position=\"tocNavPosition\"\n :default-fullscreen=\"defaultFullscreen\"\n :autofocus=\"autofocus\"\n :include-level=\"includeLevel\"\n :left-toolbar=\"leftToolbar\"\n :right-toolbar=\"rightToolbar\"\n :default-show-toc=\"true\"\n @update:model-value=\"handleInput\"\n @change=\"handleChange\"\n @save=\"handleSave\"\n @upload-image=\"handleUploadImage\"\n @fullscreen-change=\"handleFullscreenChange\"\n @copy-code-success=\"handleCopyCodeSuccess\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref, computed, watch, onMounted } from 'vue'\n import VMdEditor from '@kangc/v-md-editor'\n\n defineOptions({ name: 'C_Markdown' })\n\n export type InsertImageFunction = (config: {\n url: string\n desc?: string\n width?: string | number\n height?: string | number\n }) => void\n\n interface Props {\n modelValue?: string\n height?: string | number\n disabled?: boolean\n placeholder?: string\n mode?: 'edit' | 'editable' | 'preview'\n toolbar?: object\n uploadImageConfig?: {\n accept?: string\n multiple?: boolean\n [key: string]: any\n }\n tocNavPosition?: 'left' | 'right'\n defaultFullscreen?: boolean\n autofocus?: boolean\n includeLevel?: number[]\n leftToolbar?: string\n rightToolbar?: string\n maxLength?: number\n showWordCount?: boolean\n autoSave?: boolean\n autoSaveInterval?: number\n /** 是否为暗色主题(外部传入) */\n isDark?: boolean\n }\n\n const props = withDefaults(defineProps<Props>(), {\n modelValue: '',\n height: '400px',\n disabled: false,\n placeholder: '请输入 Markdown 内容...',\n mode: 'editable',\n tocNavPosition: 'right',\n defaultFullscreen: false,\n autofocus: false,\n includeLevel: () => [1, 2, 3, 4, 5, 6],\n leftToolbar:\n 'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save',\n rightToolbar: 'preview toc sync-scroll fullscreen',\n maxLength: 50000,\n showWordCount: true,\n autoSave: false,\n autoSaveInterval: 30000,\n isDark: false,\n })\n\n interface Emits {\n 'update:modelValue': [value: string]\n change: [text: string, html: string]\n save: [text: string, html: string]\n 'upload-image': [\n event: Event,\n insertImage: InsertImageFunction,\n files: FileList,\n ]\n 'fullscreen-change': [isFullscreen: boolean]\n 'copy-code-success': [text: string]\n 'word-count-change': [count: number]\n 'auto-save': [text: string]\n 'max-length-exceeded': [currentLength: number, maxLength: number]\n }\n\n const emit = defineEmits<Emits>()\n\n const editorRef = ref<any>(null)\n const cachedHtml = ref('')\n\n const wordCount = computed(() => {\n return props.modelValue?.length || 0\n })\n\n const computedUploadImageConfig = computed(() => {\n const defaultConfig = {\n accept: 'image/*',\n multiple: false,\n }\n return props.uploadImageConfig\n ? { ...defaultConfig, ...props.uploadImageConfig }\n : defaultConfig\n })\n\n onMounted(() => {\n if (props.showWordCount && props.modelValue) {\n emit('word-count-change', props.modelValue.length)\n }\n })\n\n watch(\n () => props.modelValue,\n newValue => {\n if (props.showWordCount) {\n emit('word-count-change', newValue?.length || 0)\n }\n },\n { immediate: true }\n )\n\n const handleInput = (value: string) => {\n if (value.length > props.maxLength) {\n emit('max-length-exceeded', value.length, props.maxLength)\n return\n }\n emit('update:modelValue', value)\n if (props.showWordCount) {\n emit('word-count-change', value.length)\n }\n }\n\n const handleChange = (text: string, html: string) => {\n cachedHtml.value = html\n emit('change', text, html)\n if (props.autoSave) {\n autoSave(text)\n }\n }\n\n const handleSave = (text: string, html: string) => {\n emit('save', text, html)\n }\n\n const handleUploadImage = (\n event: Event,\n insertImage: InsertImageFunction,\n files: FileList\n ) => {\n emit('upload-image', event, insertImage, files)\n }\n\n const handleFullscreenChange = (isFullscreen: boolean) => {\n emit('fullscreen-change', isFullscreen)\n }\n\n const handleCopyCodeSuccess = (text: string) => {\n emit('copy-code-success', text)\n }\n\n let autoSaveTimer: ReturnType<typeof setTimeout> | null = null\n\n const autoSave = (text: string) => {\n if (autoSaveTimer) clearTimeout(autoSaveTimer)\n autoSaveTimer = setTimeout(() => {\n emit('auto-save', text)\n }, props.autoSaveInterval)\n }\n\n const focus = () => {\n editorRef.value?.focus()\n }\n\n const getHtml = (): string => {\n return cachedHtml.value\n }\n\n const insertText = (text: string) => {\n editorRef.value?.insert((selected: string) => ({\n text: `${selected}${text}`,\n selected: text,\n }))\n }\n\n defineExpose({\n focus,\n getHtml,\n insertText,\n wordCount,\n })\n</script>\n\n<style lang=\"scss\" scoped>\n @use './index.scss';\n</style>\n"],"mappings":"uoCE4EE,IAAM,EAAQ,EAoCR,EAAO,EAEP,EAAY,EAAS,KAAI,CACzB,EAAa,EAAI,GAAE,CAEnB,EAAY,MACT,EAAM,YAAY,QAAU,EACpC,CAEK,EAA4B,MAAe,CAC/C,IAAM,EAAgB,CACpB,OAAQ,UACR,SAAU,GACZ,CACA,OAAO,EAAM,kBACT,CAAE,GAAG,EAAe,GAAG,EAAM,kBAAkB,CAC/C,GACL,CAED,MAAgB,CACV,EAAM,eAAiB,EAAM,YAC/B,EAAK,oBAAqB,EAAM,WAAW,OAAM,EAEpD,CAED,MACQ,EAAM,WACZ,GAAY,CACN,EAAM,eACR,EAAK,oBAAqB,GAAU,QAAU,EAAC,EAGnD,CAAE,UAAW,GAAK,CACpB,CAEA,IAAM,EAAe,GAAkB,CACrC,GAAI,EAAM,OAAS,EAAM,UAAW,CAClC,EAAK,sBAAuB,EAAM,OAAQ,EAAM,UAAS,CACzD,OAEF,EAAK,oBAAqB,EAAK,CAC3B,EAAM,eACR,EAAK,oBAAqB,EAAM,OAAM,EAIpC,GAAgB,EAAc,IAAiB,CACnD,EAAW,MAAQ,EACnB,EAAK,SAAU,EAAM,EAAI,CACrB,EAAM,UACR,EAAS,EAAI,EAIX,GAAc,EAAc,IAAiB,CACjD,EAAK,OAAQ,EAAM,EAAI,EAGnB,GACJ,EACA,EACA,IACG,CACH,EAAK,eAAgB,EAAO,EAAa,EAAK,EAG1C,EAA0B,GAA0B,CACxD,EAAK,oBAAqB,EAAY,EAGlC,EAAyB,GAAiB,CAC9C,EAAK,oBAAqB,EAAI,EAG5B,EAAsD,KAEpD,EAAY,GAAiB,CAC7B,GAAe,aAAa,EAAa,CAC7C,EAAgB,eAAiB,CAC/B,EAAK,YAAa,EAAI,EACrB,EAAM,iBAAgB,SAkB3B,EAAa,CACX,UAhBkB,CAClB,EAAU,OAAO,OAAM,EAgBvB,YAZO,EAAW,MAalB,WAVkB,GAAiB,CACnC,EAAU,OAAO,OAAQ,IAAsB,CAC7C,KAAM,GAAG,IAAW,IACpB,SAAU,EACX,EAAC,EAOF,YACD,CAAA,aA/MD,EA0BM,MAAA,CAzBJ,MAAK,EAAA,CAAC,qBAAoB,CAAA,UACLA,EAAAA,OAAM,CAAA,CAAA,CAAA,CAAA,CAE3B,EAqBE,EAAA,EAAA,CAAA,SApBI,YAAJ,IAAI,EACH,cAAaC,EAAAA,WACb,OAAQC,EAAAA,OACR,YAAaC,EAAAA,YACb,QAASC,EAAAA,QACT,KAAMC,EAAAA,KACN,sBAAqB,EAAA,MACrB,mBAAkBC,EAAAA,eAClB,qBAAoBC,EAAAA,kBACpB,UAAWC,EAAAA,UACX,gBAAeC,EAAAA,aACf,eAAcC,EAAAA,YACd,gBAAeC,EAAAA,aACf,mBAAkB,GAClB,sBAAoB,EACpB,SAAQ,EACR,OAAM,EACN,cAAc,EACd,mBAAmB,EACnB,kBAAmB"}
1
+ {"version":3,"file":"C_Markdown2.js","names":["isDark","modelValue","height","placeholder","toolbar","mode","tocNavPosition","defaultFullscreen","autofocus","includeLevel","leftToolbar","rightToolbar"],"sources":["../src/components/C_Markdown/index.vue","../src/components/C_Markdown/index.vue","../src/components/C_Markdown/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-20\r\n * @Description: Markdown 编辑器封装组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n class=\"c-markdown-wrapper\"\r\n :class=\"{ 'is-dark': isDark }\"\r\n >\r\n <VMdEditor\r\n ref=\"editorRef\"\r\n :model-value=\"modelValue\"\r\n :height=\"height\"\r\n :placeholder=\"placeholder\"\r\n :toolbar=\"toolbar\"\r\n :mode=\"mode\"\r\n :upload-image-config=\"computedUploadImageConfig\"\r\n :toc-nav-position=\"tocNavPosition\"\r\n :default-fullscreen=\"defaultFullscreen\"\r\n :autofocus=\"autofocus\"\r\n :include-level=\"includeLevel\"\r\n :left-toolbar=\"leftToolbar\"\r\n :right-toolbar=\"rightToolbar\"\r\n :default-show-toc=\"true\"\r\n @update:model-value=\"handleInput\"\r\n @change=\"handleChange\"\r\n @save=\"handleSave\"\r\n @upload-image=\"handleUploadImage\"\r\n @fullscreen-change=\"handleFullscreenChange\"\r\n @copy-code-success=\"handleCopyCodeSuccess\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { ref, computed, watch, onMounted } from 'vue'\r\n import VMdEditor from '@kangc/v-md-editor'\r\n\r\n defineOptions({ name: 'C_Markdown' })\r\n\r\n export type InsertImageFunction = (config: {\r\n url: string\r\n desc?: string\r\n width?: string | number\r\n height?: string | number\r\n }) => void\r\n\r\n interface Props {\r\n modelValue?: string\r\n height?: string | number\r\n disabled?: boolean\r\n placeholder?: string\r\n mode?: 'edit' | 'editable' | 'preview'\r\n toolbar?: object\r\n uploadImageConfig?: {\r\n accept?: string\r\n multiple?: boolean\r\n [key: string]: any\r\n }\r\n tocNavPosition?: 'left' | 'right'\r\n defaultFullscreen?: boolean\r\n autofocus?: boolean\r\n includeLevel?: number[]\r\n leftToolbar?: string\r\n rightToolbar?: string\r\n maxLength?: number\r\n showWordCount?: boolean\r\n autoSave?: boolean\r\n autoSaveInterval?: number\r\n /** 是否为暗色主题(外部传入) */\r\n isDark?: boolean\r\n }\r\n\r\n const props = withDefaults(defineProps<Props>(), {\r\n modelValue: '',\r\n height: '400px',\r\n disabled: false,\r\n placeholder: '请输入 Markdown 内容...',\r\n mode: 'editable',\r\n tocNavPosition: 'right',\r\n defaultFullscreen: false,\r\n autofocus: false,\r\n includeLevel: () => [1, 2, 3, 4, 5, 6],\r\n leftToolbar:\r\n 'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save',\r\n rightToolbar: 'preview toc sync-scroll fullscreen',\r\n maxLength: 50000,\r\n showWordCount: true,\r\n autoSave: false,\r\n autoSaveInterval: 30000,\r\n isDark: false,\r\n })\r\n\r\n interface Emits {\r\n 'update:modelValue': [value: string]\r\n change: [text: string, html: string]\r\n save: [text: string, html: string]\r\n 'upload-image': [\r\n event: Event,\r\n insertImage: InsertImageFunction,\r\n files: FileList,\r\n ]\r\n 'fullscreen-change': [isFullscreen: boolean]\r\n 'copy-code-success': [text: string]\r\n 'word-count-change': [count: number]\r\n 'auto-save': [text: string]\r\n 'max-length-exceeded': [currentLength: number, maxLength: number]\r\n }\r\n\r\n const emit = defineEmits<Emits>()\r\n\r\n const editorRef = ref<any>(null)\r\n const cachedHtml = ref('')\r\n\r\n const wordCount = computed(() => {\r\n return props.modelValue?.length || 0\r\n })\r\n\r\n const computedUploadImageConfig = computed(() => {\r\n const defaultConfig = {\r\n accept: 'image/*',\r\n multiple: false,\r\n }\r\n return props.uploadImageConfig\r\n ? { ...defaultConfig, ...props.uploadImageConfig }\r\n : defaultConfig\r\n })\r\n\r\n onMounted(() => {\r\n if (props.showWordCount && props.modelValue) {\r\n emit('word-count-change', props.modelValue.length)\r\n }\r\n })\r\n\r\n watch(\r\n () => props.modelValue,\r\n newValue => {\r\n if (props.showWordCount) {\r\n emit('word-count-change', newValue?.length || 0)\r\n }\r\n },\r\n { immediate: true }\r\n )\r\n\r\n const handleInput = (value: string) => {\r\n if (value.length > props.maxLength) {\r\n emit('max-length-exceeded', value.length, props.maxLength)\r\n return\r\n }\r\n emit('update:modelValue', value)\r\n if (props.showWordCount) {\r\n emit('word-count-change', value.length)\r\n }\r\n }\r\n\r\n const handleChange = (text: string, html: string) => {\r\n cachedHtml.value = html\r\n emit('change', text, html)\r\n if (props.autoSave) {\r\n autoSave(text)\r\n }\r\n }\r\n\r\n const handleSave = (text: string, html: string) => {\r\n emit('save', text, html)\r\n }\r\n\r\n const handleUploadImage = (\r\n event: Event,\r\n insertImage: InsertImageFunction,\r\n files: FileList\r\n ) => {\r\n emit('upload-image', event, insertImage, files)\r\n }\r\n\r\n const handleFullscreenChange = (isFullscreen: boolean) => {\r\n emit('fullscreen-change', isFullscreen)\r\n }\r\n\r\n const handleCopyCodeSuccess = (text: string) => {\r\n emit('copy-code-success', text)\r\n }\r\n\r\n let autoSaveTimer: ReturnType<typeof setTimeout> | null = null\r\n\r\n const autoSave = (text: string) => {\r\n if (autoSaveTimer) clearTimeout(autoSaveTimer)\r\n autoSaveTimer = setTimeout(() => {\r\n emit('auto-save', text)\r\n }, props.autoSaveInterval)\r\n }\r\n\r\n const focus = () => {\r\n editorRef.value?.focus()\r\n }\r\n\r\n const getHtml = (): string => {\r\n return cachedHtml.value\r\n }\r\n\r\n const insertText = (text: string) => {\r\n editorRef.value?.insert((selected: string) => ({\r\n text: `${selected}${text}`,\r\n selected: text,\r\n }))\r\n }\r\n\r\n defineExpose({\r\n focus,\r\n getHtml,\r\n insertText,\r\n wordCount,\r\n })\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n @use './index.scss';\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-20\r\n * @Description: Markdown 编辑器封装组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n class=\"c-markdown-wrapper\"\r\n :class=\"{ 'is-dark': isDark }\"\r\n >\r\n <VMdEditor\r\n ref=\"editorRef\"\r\n :model-value=\"modelValue\"\r\n :height=\"height\"\r\n :placeholder=\"placeholder\"\r\n :toolbar=\"toolbar\"\r\n :mode=\"mode\"\r\n :upload-image-config=\"computedUploadImageConfig\"\r\n :toc-nav-position=\"tocNavPosition\"\r\n :default-fullscreen=\"defaultFullscreen\"\r\n :autofocus=\"autofocus\"\r\n :include-level=\"includeLevel\"\r\n :left-toolbar=\"leftToolbar\"\r\n :right-toolbar=\"rightToolbar\"\r\n :default-show-toc=\"true\"\r\n @update:model-value=\"handleInput\"\r\n @change=\"handleChange\"\r\n @save=\"handleSave\"\r\n @upload-image=\"handleUploadImage\"\r\n @fullscreen-change=\"handleFullscreenChange\"\r\n @copy-code-success=\"handleCopyCodeSuccess\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { ref, computed, watch, onMounted } from 'vue'\r\n import VMdEditor from '@kangc/v-md-editor'\r\n\r\n defineOptions({ name: 'C_Markdown' })\r\n\r\n export type InsertImageFunction = (config: {\r\n url: string\r\n desc?: string\r\n width?: string | number\r\n height?: string | number\r\n }) => void\r\n\r\n interface Props {\r\n modelValue?: string\r\n height?: string | number\r\n disabled?: boolean\r\n placeholder?: string\r\n mode?: 'edit' | 'editable' | 'preview'\r\n toolbar?: object\r\n uploadImageConfig?: {\r\n accept?: string\r\n multiple?: boolean\r\n [key: string]: any\r\n }\r\n tocNavPosition?: 'left' | 'right'\r\n defaultFullscreen?: boolean\r\n autofocus?: boolean\r\n includeLevel?: number[]\r\n leftToolbar?: string\r\n rightToolbar?: string\r\n maxLength?: number\r\n showWordCount?: boolean\r\n autoSave?: boolean\r\n autoSaveInterval?: number\r\n /** 是否为暗色主题(外部传入) */\r\n isDark?: boolean\r\n }\r\n\r\n const props = withDefaults(defineProps<Props>(), {\r\n modelValue: '',\r\n height: '400px',\r\n disabled: false,\r\n placeholder: '请输入 Markdown 内容...',\r\n mode: 'editable',\r\n tocNavPosition: 'right',\r\n defaultFullscreen: false,\r\n autofocus: false,\r\n includeLevel: () => [1, 2, 3, 4, 5, 6],\r\n leftToolbar:\r\n 'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save',\r\n rightToolbar: 'preview toc sync-scroll fullscreen',\r\n maxLength: 50000,\r\n showWordCount: true,\r\n autoSave: false,\r\n autoSaveInterval: 30000,\r\n isDark: false,\r\n })\r\n\r\n interface Emits {\r\n 'update:modelValue': [value: string]\r\n change: [text: string, html: string]\r\n save: [text: string, html: string]\r\n 'upload-image': [\r\n event: Event,\r\n insertImage: InsertImageFunction,\r\n files: FileList,\r\n ]\r\n 'fullscreen-change': [isFullscreen: boolean]\r\n 'copy-code-success': [text: string]\r\n 'word-count-change': [count: number]\r\n 'auto-save': [text: string]\r\n 'max-length-exceeded': [currentLength: number, maxLength: number]\r\n }\r\n\r\n const emit = defineEmits<Emits>()\r\n\r\n const editorRef = ref<any>(null)\r\n const cachedHtml = ref('')\r\n\r\n const wordCount = computed(() => {\r\n return props.modelValue?.length || 0\r\n })\r\n\r\n const computedUploadImageConfig = computed(() => {\r\n const defaultConfig = {\r\n accept: 'image/*',\r\n multiple: false,\r\n }\r\n return props.uploadImageConfig\r\n ? { ...defaultConfig, ...props.uploadImageConfig }\r\n : defaultConfig\r\n })\r\n\r\n onMounted(() => {\r\n if (props.showWordCount && props.modelValue) {\r\n emit('word-count-change', props.modelValue.length)\r\n }\r\n })\r\n\r\n watch(\r\n () => props.modelValue,\r\n newValue => {\r\n if (props.showWordCount) {\r\n emit('word-count-change', newValue?.length || 0)\r\n }\r\n },\r\n { immediate: true }\r\n )\r\n\r\n const handleInput = (value: string) => {\r\n if (value.length > props.maxLength) {\r\n emit('max-length-exceeded', value.length, props.maxLength)\r\n return\r\n }\r\n emit('update:modelValue', value)\r\n if (props.showWordCount) {\r\n emit('word-count-change', value.length)\r\n }\r\n }\r\n\r\n const handleChange = (text: string, html: string) => {\r\n cachedHtml.value = html\r\n emit('change', text, html)\r\n if (props.autoSave) {\r\n autoSave(text)\r\n }\r\n }\r\n\r\n const handleSave = (text: string, html: string) => {\r\n emit('save', text, html)\r\n }\r\n\r\n const handleUploadImage = (\r\n event: Event,\r\n insertImage: InsertImageFunction,\r\n files: FileList\r\n ) => {\r\n emit('upload-image', event, insertImage, files)\r\n }\r\n\r\n const handleFullscreenChange = (isFullscreen: boolean) => {\r\n emit('fullscreen-change', isFullscreen)\r\n }\r\n\r\n const handleCopyCodeSuccess = (text: string) => {\r\n emit('copy-code-success', text)\r\n }\r\n\r\n let autoSaveTimer: ReturnType<typeof setTimeout> | null = null\r\n\r\n const autoSave = (text: string) => {\r\n if (autoSaveTimer) clearTimeout(autoSaveTimer)\r\n autoSaveTimer = setTimeout(() => {\r\n emit('auto-save', text)\r\n }, props.autoSaveInterval)\r\n }\r\n\r\n const focus = () => {\r\n editorRef.value?.focus()\r\n }\r\n\r\n const getHtml = (): string => {\r\n return cachedHtml.value\r\n }\r\n\r\n const insertText = (text: string) => {\r\n editorRef.value?.insert((selected: string) => ({\r\n text: `${selected}${text}`,\r\n selected: text,\r\n }))\r\n }\r\n\r\n defineExpose({\r\n focus,\r\n getHtml,\r\n insertText,\r\n wordCount,\r\n })\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n @use './index.scss';\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-20\r\n * @Description: Markdown 编辑器封装组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n class=\"c-markdown-wrapper\"\r\n :class=\"{ 'is-dark': isDark }\"\r\n >\r\n <VMdEditor\r\n ref=\"editorRef\"\r\n :model-value=\"modelValue\"\r\n :height=\"height\"\r\n :placeholder=\"placeholder\"\r\n :toolbar=\"toolbar\"\r\n :mode=\"mode\"\r\n :upload-image-config=\"computedUploadImageConfig\"\r\n :toc-nav-position=\"tocNavPosition\"\r\n :default-fullscreen=\"defaultFullscreen\"\r\n :autofocus=\"autofocus\"\r\n :include-level=\"includeLevel\"\r\n :left-toolbar=\"leftToolbar\"\r\n :right-toolbar=\"rightToolbar\"\r\n :default-show-toc=\"true\"\r\n @update:model-value=\"handleInput\"\r\n @change=\"handleChange\"\r\n @save=\"handleSave\"\r\n @upload-image=\"handleUploadImage\"\r\n @fullscreen-change=\"handleFullscreenChange\"\r\n @copy-code-success=\"handleCopyCodeSuccess\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { ref, computed, watch, onMounted } from 'vue'\r\n import VMdEditor from '@kangc/v-md-editor'\r\n\r\n defineOptions({ name: 'C_Markdown' })\r\n\r\n export type InsertImageFunction = (config: {\r\n url: string\r\n desc?: string\r\n width?: string | number\r\n height?: string | number\r\n }) => void\r\n\r\n interface Props {\r\n modelValue?: string\r\n height?: string | number\r\n disabled?: boolean\r\n placeholder?: string\r\n mode?: 'edit' | 'editable' | 'preview'\r\n toolbar?: object\r\n uploadImageConfig?: {\r\n accept?: string\r\n multiple?: boolean\r\n [key: string]: any\r\n }\r\n tocNavPosition?: 'left' | 'right'\r\n defaultFullscreen?: boolean\r\n autofocus?: boolean\r\n includeLevel?: number[]\r\n leftToolbar?: string\r\n rightToolbar?: string\r\n maxLength?: number\r\n showWordCount?: boolean\r\n autoSave?: boolean\r\n autoSaveInterval?: number\r\n /** 是否为暗色主题(外部传入) */\r\n isDark?: boolean\r\n }\r\n\r\n const props = withDefaults(defineProps<Props>(), {\r\n modelValue: '',\r\n height: '400px',\r\n disabled: false,\r\n placeholder: '请输入 Markdown 内容...',\r\n mode: 'editable',\r\n tocNavPosition: 'right',\r\n defaultFullscreen: false,\r\n autofocus: false,\r\n includeLevel: () => [1, 2, 3, 4, 5, 6],\r\n leftToolbar:\r\n 'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save',\r\n rightToolbar: 'preview toc sync-scroll fullscreen',\r\n maxLength: 50000,\r\n showWordCount: true,\r\n autoSave: false,\r\n autoSaveInterval: 30000,\r\n isDark: false,\r\n })\r\n\r\n interface Emits {\r\n 'update:modelValue': [value: string]\r\n change: [text: string, html: string]\r\n save: [text: string, html: string]\r\n 'upload-image': [\r\n event: Event,\r\n insertImage: InsertImageFunction,\r\n files: FileList,\r\n ]\r\n 'fullscreen-change': [isFullscreen: boolean]\r\n 'copy-code-success': [text: string]\r\n 'word-count-change': [count: number]\r\n 'auto-save': [text: string]\r\n 'max-length-exceeded': [currentLength: number, maxLength: number]\r\n }\r\n\r\n const emit = defineEmits<Emits>()\r\n\r\n const editorRef = ref<any>(null)\r\n const cachedHtml = ref('')\r\n\r\n const wordCount = computed(() => {\r\n return props.modelValue?.length || 0\r\n })\r\n\r\n const computedUploadImageConfig = computed(() => {\r\n const defaultConfig = {\r\n accept: 'image/*',\r\n multiple: false,\r\n }\r\n return props.uploadImageConfig\r\n ? { ...defaultConfig, ...props.uploadImageConfig }\r\n : defaultConfig\r\n })\r\n\r\n onMounted(() => {\r\n if (props.showWordCount && props.modelValue) {\r\n emit('word-count-change', props.modelValue.length)\r\n }\r\n })\r\n\r\n watch(\r\n () => props.modelValue,\r\n newValue => {\r\n if (props.showWordCount) {\r\n emit('word-count-change', newValue?.length || 0)\r\n }\r\n },\r\n { immediate: true }\r\n )\r\n\r\n const handleInput = (value: string) => {\r\n if (value.length > props.maxLength) {\r\n emit('max-length-exceeded', value.length, props.maxLength)\r\n return\r\n }\r\n emit('update:modelValue', value)\r\n if (props.showWordCount) {\r\n emit('word-count-change', value.length)\r\n }\r\n }\r\n\r\n const handleChange = (text: string, html: string) => {\r\n cachedHtml.value = html\r\n emit('change', text, html)\r\n if (props.autoSave) {\r\n autoSave(text)\r\n }\r\n }\r\n\r\n const handleSave = (text: string, html: string) => {\r\n emit('save', text, html)\r\n }\r\n\r\n const handleUploadImage = (\r\n event: Event,\r\n insertImage: InsertImageFunction,\r\n files: FileList\r\n ) => {\r\n emit('upload-image', event, insertImage, files)\r\n }\r\n\r\n const handleFullscreenChange = (isFullscreen: boolean) => {\r\n emit('fullscreen-change', isFullscreen)\r\n }\r\n\r\n const handleCopyCodeSuccess = (text: string) => {\r\n emit('copy-code-success', text)\r\n }\r\n\r\n let autoSaveTimer: ReturnType<typeof setTimeout> | null = null\r\n\r\n const autoSave = (text: string) => {\r\n if (autoSaveTimer) clearTimeout(autoSaveTimer)\r\n autoSaveTimer = setTimeout(() => {\r\n emit('auto-save', text)\r\n }, props.autoSaveInterval)\r\n }\r\n\r\n const focus = () => {\r\n editorRef.value?.focus()\r\n }\r\n\r\n const getHtml = (): string => {\r\n return cachedHtml.value\r\n }\r\n\r\n const insertText = (text: string) => {\r\n editorRef.value?.insert((selected: string) => ({\r\n text: `${selected}${text}`,\r\n selected: text,\r\n }))\r\n }\r\n\r\n defineExpose({\r\n focus,\r\n getHtml,\r\n insertText,\r\n wordCount,\r\n })\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n @use './index.scss';\r\n</style>\r\n"],"mappings":"uoCE4EE,IAAM,EAAQ,EAoCR,EAAO,EAEP,EAAY,EAAS,KAAK,CAC1B,EAAa,EAAI,GAAG,CAEpB,EAAY,MACT,EAAM,YAAY,QAAU,EACnC,CAEI,EAA4B,MAAe,CAC/C,IAAM,EAAgB,CACpB,OAAQ,UACR,SAAU,GACX,CACD,OAAO,EAAM,kBACT,CAAE,GAAG,EAAe,GAAG,EAAM,kBAAmB,CAChD,GACJ,CAEF,MAAgB,CACV,EAAM,eAAiB,EAAM,YAC/B,EAAK,oBAAqB,EAAM,WAAW,OAAO,EAEpD,CAEF,MACQ,EAAM,WACZ,GAAY,CACN,EAAM,eACR,EAAK,oBAAqB,GAAU,QAAU,EAAE,EAGpD,CAAE,UAAW,GAAM,CACpB,CAED,IAAM,EAAe,GAAkB,CACrC,GAAI,EAAM,OAAS,EAAM,UAAW,CAClC,EAAK,sBAAuB,EAAM,OAAQ,EAAM,UAAU,CAC1D,OAEF,EAAK,oBAAqB,EAAM,CAC5B,EAAM,eACR,EAAK,oBAAqB,EAAM,OAAO,EAIrC,GAAgB,EAAc,IAAiB,CACnD,EAAW,MAAQ,EACnB,EAAK,SAAU,EAAM,EAAK,CACtB,EAAM,UACR,EAAS,EAAK,EAIZ,GAAc,EAAc,IAAiB,CACjD,EAAK,OAAQ,EAAM,EAAK,EAGpB,GACJ,EACA,EACA,IACG,CACH,EAAK,eAAgB,EAAO,EAAa,EAAM,EAG3C,EAA0B,GAA0B,CACxD,EAAK,oBAAqB,EAAa,EAGnC,EAAyB,GAAiB,CAC9C,EAAK,oBAAqB,EAAK,EAG7B,EAAsD,KAEpD,EAAY,GAAiB,CAC7B,GAAe,aAAa,EAAc,CAC9C,EAAgB,eAAiB,CAC/B,EAAK,YAAa,EAAK,EACtB,EAAM,iBAAiB,SAkB5B,EAAa,CACX,UAhBkB,CAClB,EAAU,OAAO,OAAO,EAgBxB,YAZO,EAAW,MAalB,WAVkB,GAAiB,CACnC,EAAU,OAAO,OAAQ,IAAsB,CAC7C,KAAM,GAAG,IAAW,IACpB,SAAU,EACX,EAAE,EAOH,YACD,CAAC,aA/MF,EA0BM,MAAA,CAzBJ,MAAK,EAAA,CAAC,qBAAoB,CAAA,UACLA,EAAAA,OAAM,CAAA,CAAA,CAAA,CAAA,CAE3B,EAqBE,EAAA,EAAA,CAAA,SApBI,YAAJ,IAAI,EACH,cAAaC,EAAAA,WACb,OAAQC,EAAAA,OACR,YAAaC,EAAAA,YACb,QAASC,EAAAA,QACT,KAAMC,EAAAA,KACN,sBAAqB,EAAA,MACrB,mBAAkBC,EAAAA,eAClB,qBAAoBC,EAAAA,kBACpB,UAAWC,EAAAA,UACX,gBAAeC,EAAAA,aACf,eAAcC,EAAAA,YACd,gBAAeC,EAAAA,aACf,mBAAkB,GAClB,sBAAoB,EACpB,SAAQ,EACR,OAAM,EACN,cAAc,EACd,mBAAmB,EACnB,kBAAmB"}
@@ -1 +1 @@
1
- {"version":3,"file":"C_QRCode-CFNTda_1.css","names":[],"sources":["../src/components/C_QRCode/index.vue?vue&type=style&index=0&scoped=fe18e0fe&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* C_QRCode styles */\n.c-qrcode[data-v-fe18e0fe] {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper[data-v-fe18e0fe] {\n display: inline-block;\n padding: 8px;\n background: var(--c-bg-content, #fff);\n border-radius: 6px;\n transition: all 0.3s ease;\n overflow: hidden;\n max-width: 100%;\n line-height: 0;\n}\n.c-qrcode .qrcode-wrapper.with-border[data-v-fe18e0fe] {\n border: 1px dashed var(--c-border-default, #e0e0e6);\n}\n.c-qrcode .qrcode-wrapper[data-v-fe18e0fe]:hover {\n border-color: var(--primary-color, #409eff);\n box-shadow: var(--c-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.08));\n}\n.c-qrcode .qrcode-wrapper canvas[data-v-fe18e0fe] {\n display: block;\n max-width: 100%;\n height: auto;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-fe18e0fe] {\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-fe18e0fe] svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n.c-qrcode .qrcode-label[data-v-fe18e0fe] {\n font-size: 14px;\n color: var(--c-text-secondary, #999);\n text-align: center;\n font-weight: 500;\n word-break: break-all;\n max-width: 100%;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
1
+ {"version":3,"file":"C_QRCode-DMxSyogU.css","names":[],"sources":["../src/components/C_QRCode/index.vue?vue&type=style&index=0&scoped=7a4201b5&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* C_QRCode styles */\n.c-qrcode[data-v-7a4201b5] {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper[data-v-7a4201b5] {\n display: inline-block;\n padding: 8px;\n background: var(--c-bg-content, #fff);\n border-radius: 6px;\n transition: all 0.3s ease;\n overflow: hidden;\n max-width: 100%;\n line-height: 0;\n}\n.c-qrcode .qrcode-wrapper.with-border[data-v-7a4201b5] {\n border: 1px dashed var(--c-border-default, #e0e0e6);\n}\n.c-qrcode .qrcode-wrapper[data-v-7a4201b5]:hover {\n border-color: var(--primary-color, #409eff);\n box-shadow: var(--c-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.08));\n}\n.c-qrcode .qrcode-wrapper canvas[data-v-7a4201b5] {\n display: block;\n max-width: 100%;\n height: auto;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-7a4201b5] {\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-7a4201b5] svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n.c-qrcode .qrcode-label[data-v-7a4201b5] {\n font-size: 14px;\n color: var(--c-text-secondary, #999);\n text-align: center;\n font-weight: 500;\n word-break: break-all;\n max-width: 100%;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
@@ -1 +1 @@
1
- {"version":3,"file":"C_QRCode-CmWr9lK-.css","names":[],"sources":["../src/components/C_QRCode/index.vue?vue&type=style&index=0&scoped=fe18e0fe&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* C_QRCode styles */\n.c-qrcode[data-v-fe18e0fe] {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper[data-v-fe18e0fe] {\n display: inline-block;\n padding: 8px;\n background: var(--c-bg-content, #fff);\n border-radius: 6px;\n transition: all 0.3s ease;\n overflow: hidden;\n max-width: 100%;\n line-height: 0;\n}\n.c-qrcode .qrcode-wrapper.with-border[data-v-fe18e0fe] {\n border: 1px dashed var(--c-border-default, #e0e0e6);\n}\n.c-qrcode .qrcode-wrapper[data-v-fe18e0fe]:hover {\n border-color: var(--primary-color, #409eff);\n box-shadow: var(--c-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.08));\n}\n.c-qrcode .qrcode-wrapper canvas[data-v-fe18e0fe] {\n display: block;\n max-width: 100%;\n height: auto;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-fe18e0fe] {\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-fe18e0fe] svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n.c-qrcode .qrcode-label[data-v-fe18e0fe] {\n font-size: 14px;\n color: var(--c-text-secondary, #999);\n text-align: center;\n font-weight: 500;\n word-break: break-all;\n max-width: 100%;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
1
+ {"version":3,"file":"C_QRCode-G7fiAkm4.css","names":[],"sources":["../src/components/C_QRCode/index.vue?vue&type=style&index=0&scoped=7a4201b5&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* C_QRCode styles */\n.c-qrcode[data-v-7a4201b5] {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper[data-v-7a4201b5] {\n display: inline-block;\n padding: 8px;\n background: var(--c-bg-content, #fff);\n border-radius: 6px;\n transition: all 0.3s ease;\n overflow: hidden;\n max-width: 100%;\n line-height: 0;\n}\n.c-qrcode .qrcode-wrapper.with-border[data-v-7a4201b5] {\n border: 1px dashed var(--c-border-default, #e0e0e6);\n}\n.c-qrcode .qrcode-wrapper[data-v-7a4201b5]:hover {\n border-color: var(--primary-color, #409eff);\n box-shadow: var(--c-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.08));\n}\n.c-qrcode .qrcode-wrapper canvas[data-v-7a4201b5] {\n display: block;\n max-width: 100%;\n height: auto;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-7a4201b5] {\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-7a4201b5] svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n.c-qrcode .qrcode-label[data-v-7a4201b5] {\n font-size: 14px;\n color: var(--c-text-secondary, #999);\n text-align: center;\n font-weight: 500;\n word-break: break-all;\n max-width: 100%;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
package/dist/C_QRCode.css CHANGED
@@ -1,12 +1,12 @@
1
1
  /* unplugin-vue-components disabled *//* C_QRCode styles */
2
- .c-qrcode[data-v-fe18e0fe] {
2
+ .c-qrcode[data-v-7a4201b5] {
3
3
  display: inline-flex;
4
4
  flex-direction: column;
5
5
  align-items: center;
6
6
  gap: 8px;
7
7
  max-width: 100%;
8
8
  }
9
- .c-qrcode .qrcode-wrapper[data-v-fe18e0fe] {
9
+ .c-qrcode .qrcode-wrapper[data-v-7a4201b5] {
10
10
  display: inline-block;
11
11
  padding: 8px;
12
12
  background: var(--c-bg-content, #fff);
@@ -16,30 +16,30 @@
16
16
  max-width: 100%;
17
17
  line-height: 0;
18
18
  }
19
- .c-qrcode .qrcode-wrapper.with-border[data-v-fe18e0fe] {
19
+ .c-qrcode .qrcode-wrapper.with-border[data-v-7a4201b5] {
20
20
  border: 1px dashed var(--c-border-default, #e0e0e6);
21
21
  }
22
- .c-qrcode .qrcode-wrapper[data-v-fe18e0fe]:hover {
22
+ .c-qrcode .qrcode-wrapper[data-v-7a4201b5]:hover {
23
23
  border-color: var(--primary-color, #409eff);
24
24
  box-shadow: var(--c-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.08));
25
25
  }
26
- .c-qrcode .qrcode-wrapper canvas[data-v-fe18e0fe] {
26
+ .c-qrcode .qrcode-wrapper canvas[data-v-7a4201b5] {
27
27
  display: block;
28
28
  max-width: 100%;
29
29
  height: auto;
30
30
  }
31
- .c-qrcode .qrcode-wrapper .qrcode-svg[data-v-fe18e0fe] {
31
+ .c-qrcode .qrcode-wrapper .qrcode-svg[data-v-7a4201b5] {
32
32
  display: flex;
33
33
  align-items: center;
34
34
  justify-content: center;
35
35
  max-width: 100%;
36
36
  }
37
- .c-qrcode .qrcode-wrapper .qrcode-svg[data-v-fe18e0fe] svg {
37
+ .c-qrcode .qrcode-wrapper .qrcode-svg[data-v-7a4201b5] svg {
38
38
  width: 100%;
39
39
  height: 100%;
40
40
  display: block;
41
41
  }
42
- .c-qrcode .qrcode-label[data-v-fe18e0fe] {
42
+ .c-qrcode .qrcode-label[data-v-7a4201b5] {
43
43
  font-size: 14px;
44
44
  color: var(--c-text-secondary, #999);
45
45
  text-align: center;
@@ -48,4 +48,4 @@
48
48
  max-width: 100%;
49
49
  }
50
50
 
51
- /*# sourceMappingURL=C_QRCode-CFNTda_1.css.map*/
51
+ /*# sourceMappingURL=C_QRCode-DMxSyogU.css.map*/
@@ -1 +1 @@
1
- {"version":3,"file":"C_QRCode.js","names":["QRCode","showBorder","mode","size","showLabel","label"],"sources":["../src/components/C_QRCode/composables/useQRCode.ts","../src/components/C_QRCode/index.vue","../src/components/C_QRCode/index.vue","../src/components/C_QRCode/index.vue"],"sourcesContent":["import { ref, computed, watch } from \"vue\";\r\nimport QRCode from \"qrcode\";\r\nimport type { Ref } from \"vue\";\r\nimport type {\r\n ErrorCorrectionLevel,\r\n ExportType,\r\n LogoOptions,\r\n RenderMode,\r\n} from \"../types\";\r\n\r\ninterface UseQRCodeOptions {\r\n value: Ref<string>;\r\n size: Ref<number>;\r\n color: Ref<string>;\r\n bgColor: Ref<string>;\r\n errorCorrectionLevel: Ref<ErrorCorrectionLevel>;\r\n margin: Ref<number>;\r\n mode: Ref<RenderMode>;\r\n logo: Ref<LogoOptions | undefined>;\r\n}\r\n\r\nfunction drawLogo(\r\n canvas: HTMLCanvasElement,\r\n logo: LogoOptions,\r\n qrSize: number,\r\n): Promise<void> {\r\n return new Promise((resolve, reject) => {\r\n const ctx = canvas.getContext(\"2d\");\r\n if (!ctx) return reject(new Error(\"Canvas context 不可用\"));\r\n\r\n const img = new Image();\r\n img.crossOrigin = \"anonymous\";\r\n img.onload = () => {\r\n const ratio = logo.size ?? 0.2;\r\n const logoSize = Math.floor(qrSize * ratio);\r\n const padding = logo.padding ?? 4;\r\n const borderRadius = logo.borderRadius ?? 4;\r\n\r\n const x = (canvas.width - logoSize) / 2;\r\n const y = (canvas.height - logoSize) / 2;\r\n\r\n ctx.save();\r\n const bgX = x - padding;\r\n const bgY = y - padding;\r\n const bgSize = logoSize + padding * 2;\r\n const r = borderRadius + padding;\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(bgX + r, bgY);\r\n ctx.arcTo(bgX + bgSize, bgY, bgX + bgSize, bgY + bgSize, r);\r\n ctx.arcTo(bgX + bgSize, bgY + bgSize, bgX, bgY + bgSize, r);\r\n ctx.arcTo(bgX, bgY + bgSize, bgX, bgY, r);\r\n ctx.arcTo(bgX, bgY, bgX + bgSize, bgY, r);\r\n ctx.closePath();\r\n ctx.fillStyle = logo.bgColor ?? \"#ffffff\";\r\n ctx.fill();\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(x + borderRadius, y);\r\n ctx.arcTo(x + logoSize, y, x + logoSize, y + logoSize, borderRadius);\r\n ctx.arcTo(x + logoSize, y + logoSize, x, y + logoSize, borderRadius);\r\n ctx.arcTo(x, y + logoSize, x, y, borderRadius);\r\n ctx.arcTo(x, y, x + logoSize, y, borderRadius);\r\n ctx.closePath();\r\n ctx.clip();\r\n ctx.drawImage(img, x, y, logoSize, logoSize);\r\n ctx.restore();\r\n\r\n resolve();\r\n };\r\n img.onerror = () => reject(new Error(`Logo 加载失败: ${logo.src}`));\r\n img.src = logo.src;\r\n });\r\n}\r\n\r\nexport function useQRCode(\r\n canvasRef: Ref<HTMLCanvasElement | null>,\r\n options: UseQRCodeOptions,\r\n) {\r\n const svgHtml = ref(\"\");\r\n const error = ref<Error | null>(null);\r\n const loading = ref(false);\r\n\r\n const effectiveLevel = computed<ErrorCorrectionLevel>(() => {\r\n if (options.logo.value) {\r\n const level = options.errorCorrectionLevel.value;\r\n if (level === \"L\" || level === \"M\") return \"Q\";\r\n return level;\r\n }\r\n return options.errorCorrectionLevel.value;\r\n });\r\n\r\n const qrOptions = computed(() => ({\r\n width: options.size.value,\r\n margin: options.margin.value,\r\n errorCorrectionLevel: effectiveLevel.value,\r\n color: {\r\n dark: options.color.value,\r\n light: options.bgColor.value,\r\n },\r\n }));\r\n\r\n async function renderCanvas() {\r\n const canvas = canvasRef.value;\r\n if (!canvas || !options.value.value) return;\r\n await QRCode.toCanvas(canvas, options.value.value, qrOptions.value);\r\n if (options.logo.value) {\r\n await drawLogo(canvas, options.logo.value, options.size.value);\r\n }\r\n }\r\n\r\n async function renderSvg() {\r\n if (!options.value.value) {\r\n svgHtml.value = \"\";\r\n return;\r\n }\r\n const svgString = await QRCode.toString(options.value.value, {\r\n ...qrOptions.value,\r\n type: \"svg\",\r\n });\r\n svgHtml.value = svgString;\r\n }\r\n\r\n async function render() {\r\n if (!options.value.value) return;\r\n loading.value = true;\r\n error.value = null;\r\n try {\r\n if (options.mode.value === \"canvas\") {\r\n await renderCanvas();\r\n } else {\r\n await renderSvg();\r\n }\r\n } catch (e) {\r\n error.value = e instanceof Error ? e : new Error(String(e));\r\n console.error(\"二维码渲染失败:\", e);\r\n } finally {\r\n loading.value = false;\r\n }\r\n }\r\n\r\n async function toDataURL(\r\n type: ExportType = \"png\",\r\n quality = 0.92,\r\n ): Promise<string> {\r\n if (type === \"svg\") {\r\n const svgStr = await QRCode.toString(options.value.value, {\r\n ...qrOptions.value,\r\n type: \"svg\",\r\n });\r\n return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;\r\n }\r\n const tempCanvas = document.createElement(\"canvas\");\r\n await QRCode.toCanvas(tempCanvas, options.value.value, qrOptions.value);\r\n if (options.logo.value) {\r\n await drawLogo(tempCanvas, options.logo.value, options.size.value);\r\n }\r\n const mimeType = type === \"jpeg\" ? \"image/jpeg\" : \"image/png\";\r\n return tempCanvas.toDataURL(mimeType, quality);\r\n }\r\n\r\n async function download(filename = \"qrcode\", type: ExportType = \"png\") {\r\n const dataUrl = await toDataURL(type);\r\n const link = document.createElement(\"a\");\r\n link.download = `${filename}.${type}`;\r\n link.href = dataUrl;\r\n link.click();\r\n }\r\n\r\n watch(\r\n [\r\n options.value,\r\n options.size,\r\n options.color,\r\n options.bgColor,\r\n options.errorCorrectionLevel,\r\n options.margin,\r\n options.mode,\r\n options.logo,\r\n ],\r\n () => render(),\r\n { deep: true },\r\n );\r\n\r\n return { svgHtml, error, loading, render, toDataURL, download };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-16\n * @Description: 二维码组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-qrcode\">\n <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\n <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\n <div\n v-if=\"mode === 'svg'\"\n class=\"qrcode-svg\"\n :style=\"{ width: `${size}px`, height: `${size}px` }\"\n v-html=\"svgHtml\"\n />\n </div>\n <div v-if=\"showLabel && label\" class=\"qrcode-label\">\n {{ label }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, toRef, watch, onMounted } from \"vue\";\nimport { useQRCode } from \"./composables/useQRCode\";\nimport type {\n ErrorCorrectionLevel,\n ExportType,\n LogoOptions,\n QRCodeExpose,\n RenderMode,\n} from \"./types\";\n\ndefineOptions({ name: \"C_QRCode\" });\n\ninterface Props {\n value: string;\n size?: number;\n color?: string;\n bgColor?: string;\n errorCorrectionLevel?: ErrorCorrectionLevel;\n margin?: number;\n mode?: RenderMode;\n logo?: LogoOptions;\n showBorder?: boolean;\n label?: string;\n showLabel?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n size: 200,\n color: \"#000000\",\n bgColor: \"#FFFFFF\",\n errorCorrectionLevel: \"M\",\n margin: 2,\n mode: \"canvas\",\n logo: undefined,\n showBorder: true,\n label: \"\",\n showLabel: false,\n});\n\nconst emit = defineEmits<{\n error: [error: Error];\n}>();\n\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\n\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\n value: toRef(props, \"value\"),\n size: toRef(props, \"size\"),\n color: toRef(props, \"color\"),\n bgColor: toRef(props, \"bgColor\"),\n errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\n margin: toRef(props, \"margin\"),\n mode: toRef(props, \"mode\"),\n logo: toRef(props, \"logo\"),\n});\n\nwatch(error, (e) => {\n if (e) emit(\"error\", e);\n});\n\nonMounted(() => render());\n\ndefineExpose<QRCodeExpose>({\n toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\n download: (filename?: string, type?: ExportType) => download(filename, type),\n refresh: () => render(),\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-16\n * @Description: 二维码组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-qrcode\">\n <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\n <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\n <div\n v-if=\"mode === 'svg'\"\n class=\"qrcode-svg\"\n :style=\"{ width: `${size}px`, height: `${size}px` }\"\n v-html=\"svgHtml\"\n />\n </div>\n <div v-if=\"showLabel && label\" class=\"qrcode-label\">\n {{ label }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, toRef, watch, onMounted } from \"vue\";\nimport { useQRCode } from \"./composables/useQRCode\";\nimport type {\n ErrorCorrectionLevel,\n ExportType,\n LogoOptions,\n QRCodeExpose,\n RenderMode,\n} from \"./types\";\n\ndefineOptions({ name: \"C_QRCode\" });\n\ninterface Props {\n value: string;\n size?: number;\n color?: string;\n bgColor?: string;\n errorCorrectionLevel?: ErrorCorrectionLevel;\n margin?: number;\n mode?: RenderMode;\n logo?: LogoOptions;\n showBorder?: boolean;\n label?: string;\n showLabel?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n size: 200,\n color: \"#000000\",\n bgColor: \"#FFFFFF\",\n errorCorrectionLevel: \"M\",\n margin: 2,\n mode: \"canvas\",\n logo: undefined,\n showBorder: true,\n label: \"\",\n showLabel: false,\n});\n\nconst emit = defineEmits<{\n error: [error: Error];\n}>();\n\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\n\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\n value: toRef(props, \"value\"),\n size: toRef(props, \"size\"),\n color: toRef(props, \"color\"),\n bgColor: toRef(props, \"bgColor\"),\n errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\n margin: toRef(props, \"margin\"),\n mode: toRef(props, \"mode\"),\n logo: toRef(props, \"logo\"),\n});\n\nwatch(error, (e) => {\n if (e) emit(\"error\", e);\n});\n\nonMounted(() => render());\n\ndefineExpose<QRCodeExpose>({\n toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\n download: (filename?: string, type?: ExportType) => download(filename, type),\n refresh: () => render(),\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-16\n * @Description: 二维码组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-qrcode\">\n <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\n <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\n <div\n v-if=\"mode === 'svg'\"\n class=\"qrcode-svg\"\n :style=\"{ width: `${size}px`, height: `${size}px` }\"\n v-html=\"svgHtml\"\n />\n </div>\n <div v-if=\"showLabel && label\" class=\"qrcode-label\">\n {{ label }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, toRef, watch, onMounted } from \"vue\";\nimport { useQRCode } from \"./composables/useQRCode\";\nimport type {\n ErrorCorrectionLevel,\n ExportType,\n LogoOptions,\n QRCodeExpose,\n RenderMode,\n} from \"./types\";\n\ndefineOptions({ name: \"C_QRCode\" });\n\ninterface Props {\n value: string;\n size?: number;\n color?: string;\n bgColor?: string;\n errorCorrectionLevel?: ErrorCorrectionLevel;\n margin?: number;\n mode?: RenderMode;\n logo?: LogoOptions;\n showBorder?: boolean;\n label?: string;\n showLabel?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n size: 200,\n color: \"#000000\",\n bgColor: \"#FFFFFF\",\n errorCorrectionLevel: \"M\",\n margin: 2,\n mode: \"canvas\",\n logo: undefined,\n showBorder: true,\n label: \"\",\n showLabel: false,\n});\n\nconst emit = defineEmits<{\n error: [error: Error];\n}>();\n\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\n\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\n value: toRef(props, \"value\"),\n size: toRef(props, \"size\"),\n color: toRef(props, \"color\"),\n bgColor: toRef(props, \"bgColor\"),\n errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\n margin: toRef(props, \"margin\"),\n mode: toRef(props, \"mode\"),\n logo: toRef(props, \"logo\"),\n});\n\nwatch(error, (e) => {\n if (e) emit(\"error\", e);\n});\n\nonMounted(() => render());\n\ndefineExpose<QRCodeExpose>({\n toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\n download: (filename?: string, type?: ExportType) => download(filename, type),\n refresh: () => render(),\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n"],"mappings":"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"}
1
+ {"version":3,"file":"C_QRCode.js","names":["QRCode","showBorder","mode","size","showLabel","label"],"sources":["../src/components/C_QRCode/composables/useQRCode.ts","../src/components/C_QRCode/index.vue","../src/components/C_QRCode/index.vue","../src/components/C_QRCode/index.vue"],"sourcesContent":["import { ref, computed, watch } from \"vue\";\r\nimport QRCode from \"qrcode\";\r\nimport type { Ref } from \"vue\";\r\nimport type {\r\n ErrorCorrectionLevel,\r\n ExportType,\r\n LogoOptions,\r\n RenderMode,\r\n} from \"../types\";\r\n\r\ninterface UseQRCodeOptions {\r\n value: Ref<string>;\r\n size: Ref<number>;\r\n color: Ref<string>;\r\n bgColor: Ref<string>;\r\n errorCorrectionLevel: Ref<ErrorCorrectionLevel>;\r\n margin: Ref<number>;\r\n mode: Ref<RenderMode>;\r\n logo: Ref<LogoOptions | undefined>;\r\n}\r\n\r\nfunction drawLogo(\r\n canvas: HTMLCanvasElement,\r\n logo: LogoOptions,\r\n qrSize: number,\r\n): Promise<void> {\r\n return new Promise((resolve, reject) => {\r\n const ctx = canvas.getContext(\"2d\");\r\n if (!ctx) return reject(new Error(\"Canvas context 不可用\"));\r\n\r\n const img = new Image();\r\n img.crossOrigin = \"anonymous\";\r\n img.onload = () => {\r\n const ratio = logo.size ?? 0.2;\r\n const logoSize = Math.floor(qrSize * ratio);\r\n const padding = logo.padding ?? 4;\r\n const borderRadius = logo.borderRadius ?? 4;\r\n\r\n const x = (canvas.width - logoSize) / 2;\r\n const y = (canvas.height - logoSize) / 2;\r\n\r\n ctx.save();\r\n const bgX = x - padding;\r\n const bgY = y - padding;\r\n const bgSize = logoSize + padding * 2;\r\n const r = borderRadius + padding;\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(bgX + r, bgY);\r\n ctx.arcTo(bgX + bgSize, bgY, bgX + bgSize, bgY + bgSize, r);\r\n ctx.arcTo(bgX + bgSize, bgY + bgSize, bgX, bgY + bgSize, r);\r\n ctx.arcTo(bgX, bgY + bgSize, bgX, bgY, r);\r\n ctx.arcTo(bgX, bgY, bgX + bgSize, bgY, r);\r\n ctx.closePath();\r\n ctx.fillStyle = logo.bgColor ?? \"#ffffff\";\r\n ctx.fill();\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(x + borderRadius, y);\r\n ctx.arcTo(x + logoSize, y, x + logoSize, y + logoSize, borderRadius);\r\n ctx.arcTo(x + logoSize, y + logoSize, x, y + logoSize, borderRadius);\r\n ctx.arcTo(x, y + logoSize, x, y, borderRadius);\r\n ctx.arcTo(x, y, x + logoSize, y, borderRadius);\r\n ctx.closePath();\r\n ctx.clip();\r\n ctx.drawImage(img, x, y, logoSize, logoSize);\r\n ctx.restore();\r\n\r\n resolve();\r\n };\r\n img.onerror = () => reject(new Error(`Logo 加载失败: ${logo.src}`));\r\n img.src = logo.src;\r\n });\r\n}\r\n\r\nexport function useQRCode(\r\n canvasRef: Ref<HTMLCanvasElement | null>,\r\n options: UseQRCodeOptions,\r\n) {\r\n const svgHtml = ref(\"\");\r\n const error = ref<Error | null>(null);\r\n const loading = ref(false);\r\n\r\n const effectiveLevel = computed<ErrorCorrectionLevel>(() => {\r\n if (options.logo.value) {\r\n const level = options.errorCorrectionLevel.value;\r\n if (level === \"L\" || level === \"M\") return \"Q\";\r\n return level;\r\n }\r\n return options.errorCorrectionLevel.value;\r\n });\r\n\r\n const qrOptions = computed(() => ({\r\n width: options.size.value,\r\n margin: options.margin.value,\r\n errorCorrectionLevel: effectiveLevel.value,\r\n color: {\r\n dark: options.color.value,\r\n light: options.bgColor.value,\r\n },\r\n }));\r\n\r\n async function renderCanvas() {\r\n const canvas = canvasRef.value;\r\n if (!canvas || !options.value.value) return;\r\n await QRCode.toCanvas(canvas, options.value.value, qrOptions.value);\r\n if (options.logo.value) {\r\n await drawLogo(canvas, options.logo.value, options.size.value);\r\n }\r\n }\r\n\r\n async function renderSvg() {\r\n if (!options.value.value) {\r\n svgHtml.value = \"\";\r\n return;\r\n }\r\n const svgString = await QRCode.toString(options.value.value, {\r\n ...qrOptions.value,\r\n type: \"svg\",\r\n });\r\n svgHtml.value = svgString;\r\n }\r\n\r\n async function render() {\r\n if (!options.value.value) return;\r\n loading.value = true;\r\n error.value = null;\r\n try {\r\n if (options.mode.value === \"canvas\") {\r\n await renderCanvas();\r\n } else {\r\n await renderSvg();\r\n }\r\n } catch (e) {\r\n error.value = e instanceof Error ? e : new Error(String(e));\r\n console.error(\"二维码渲染失败:\", e);\r\n } finally {\r\n loading.value = false;\r\n }\r\n }\r\n\r\n async function toDataURL(\r\n type: ExportType = \"png\",\r\n quality = 0.92,\r\n ): Promise<string> {\r\n if (type === \"svg\") {\r\n const svgStr = await QRCode.toString(options.value.value, {\r\n ...qrOptions.value,\r\n type: \"svg\",\r\n });\r\n return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;\r\n }\r\n const tempCanvas = document.createElement(\"canvas\");\r\n await QRCode.toCanvas(tempCanvas, options.value.value, qrOptions.value);\r\n if (options.logo.value) {\r\n await drawLogo(tempCanvas, options.logo.value, options.size.value);\r\n }\r\n const mimeType = type === \"jpeg\" ? \"image/jpeg\" : \"image/png\";\r\n return tempCanvas.toDataURL(mimeType, quality);\r\n }\r\n\r\n async function download(filename = \"qrcode\", type: ExportType = \"png\") {\r\n const dataUrl = await toDataURL(type);\r\n const link = document.createElement(\"a\");\r\n link.download = `${filename}.${type}`;\r\n link.href = dataUrl;\r\n link.click();\r\n }\r\n\r\n watch(\r\n [\r\n options.value,\r\n options.size,\r\n options.color,\r\n options.bgColor,\r\n options.errorCorrectionLevel,\r\n options.margin,\r\n options.mode,\r\n options.logo,\r\n ],\r\n () => render(),\r\n { deep: true },\r\n );\r\n\r\n return { svgHtml, error, loading, render, toDataURL, download };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 二维码组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-qrcode\">\r\n <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\r\n <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\r\n <div\r\n v-if=\"mode === 'svg'\"\r\n class=\"qrcode-svg\"\r\n :style=\"{ width: `${size}px`, height: `${size}px` }\"\r\n v-html=\"svgHtml\"\r\n />\r\n </div>\r\n <div v-if=\"showLabel && label\" class=\"qrcode-label\">\r\n {{ label }}\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, onMounted } from \"vue\";\r\nimport { useQRCode } from \"./composables/useQRCode\";\r\nimport type {\r\n ErrorCorrectionLevel,\r\n ExportType,\r\n LogoOptions,\r\n QRCodeExpose,\r\n RenderMode,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_QRCode\" });\r\n\r\ninterface Props {\r\n value: string;\r\n size?: number;\r\n color?: string;\r\n bgColor?: string;\r\n errorCorrectionLevel?: ErrorCorrectionLevel;\r\n margin?: number;\r\n mode?: RenderMode;\r\n logo?: LogoOptions;\r\n showBorder?: boolean;\r\n label?: string;\r\n showLabel?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n size: 200,\r\n color: \"#000000\",\r\n bgColor: \"#FFFFFF\",\r\n errorCorrectionLevel: \"M\",\r\n margin: 2,\r\n mode: \"canvas\",\r\n logo: undefined,\r\n showBorder: true,\r\n label: \"\",\r\n showLabel: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n error: [error: Error];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\n\r\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\r\n value: toRef(props, \"value\"),\r\n size: toRef(props, \"size\"),\r\n color: toRef(props, \"color\"),\r\n bgColor: toRef(props, \"bgColor\"),\r\n errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\r\n margin: toRef(props, \"margin\"),\r\n mode: toRef(props, \"mode\"),\r\n logo: toRef(props, \"logo\"),\r\n});\r\n\r\nwatch(error, (e) => {\r\n if (e) emit(\"error\", e);\r\n});\r\n\r\nonMounted(() => render());\r\n\r\ndefineExpose<QRCodeExpose>({\r\n toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\r\n download: (filename?: string, type?: ExportType) => download(filename, type),\r\n refresh: () => render(),\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 二维码组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-qrcode\">\r\n <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\r\n <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\r\n <div\r\n v-if=\"mode === 'svg'\"\r\n class=\"qrcode-svg\"\r\n :style=\"{ width: `${size}px`, height: `${size}px` }\"\r\n v-html=\"svgHtml\"\r\n />\r\n </div>\r\n <div v-if=\"showLabel && label\" class=\"qrcode-label\">\r\n {{ label }}\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, onMounted } from \"vue\";\r\nimport { useQRCode } from \"./composables/useQRCode\";\r\nimport type {\r\n ErrorCorrectionLevel,\r\n ExportType,\r\n LogoOptions,\r\n QRCodeExpose,\r\n RenderMode,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_QRCode\" });\r\n\r\ninterface Props {\r\n value: string;\r\n size?: number;\r\n color?: string;\r\n bgColor?: string;\r\n errorCorrectionLevel?: ErrorCorrectionLevel;\r\n margin?: number;\r\n mode?: RenderMode;\r\n logo?: LogoOptions;\r\n showBorder?: boolean;\r\n label?: string;\r\n showLabel?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n size: 200,\r\n color: \"#000000\",\r\n bgColor: \"#FFFFFF\",\r\n errorCorrectionLevel: \"M\",\r\n margin: 2,\r\n mode: \"canvas\",\r\n logo: undefined,\r\n showBorder: true,\r\n label: \"\",\r\n showLabel: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n error: [error: Error];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\n\r\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\r\n value: toRef(props, \"value\"),\r\n size: toRef(props, \"size\"),\r\n color: toRef(props, \"color\"),\r\n bgColor: toRef(props, \"bgColor\"),\r\n errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\r\n margin: toRef(props, \"margin\"),\r\n mode: toRef(props, \"mode\"),\r\n logo: toRef(props, \"logo\"),\r\n});\r\n\r\nwatch(error, (e) => {\r\n if (e) emit(\"error\", e);\r\n});\r\n\r\nonMounted(() => render());\r\n\r\ndefineExpose<QRCodeExpose>({\r\n toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\r\n download: (filename?: string, type?: ExportType) => download(filename, type),\r\n refresh: () => render(),\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 二维码组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-qrcode\">\r\n <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\r\n <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\r\n <div\r\n v-if=\"mode === 'svg'\"\r\n class=\"qrcode-svg\"\r\n :style=\"{ width: `${size}px`, height: `${size}px` }\"\r\n v-html=\"svgHtml\"\r\n />\r\n </div>\r\n <div v-if=\"showLabel && label\" class=\"qrcode-label\">\r\n {{ label }}\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, onMounted } from \"vue\";\r\nimport { useQRCode } from \"./composables/useQRCode\";\r\nimport type {\r\n ErrorCorrectionLevel,\r\n ExportType,\r\n LogoOptions,\r\n QRCodeExpose,\r\n RenderMode,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_QRCode\" });\r\n\r\ninterface Props {\r\n value: string;\r\n size?: number;\r\n color?: string;\r\n bgColor?: string;\r\n errorCorrectionLevel?: ErrorCorrectionLevel;\r\n margin?: number;\r\n mode?: RenderMode;\r\n logo?: LogoOptions;\r\n showBorder?: boolean;\r\n label?: string;\r\n showLabel?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n size: 200,\r\n color: \"#000000\",\r\n bgColor: \"#FFFFFF\",\r\n errorCorrectionLevel: \"M\",\r\n margin: 2,\r\n mode: \"canvas\",\r\n logo: undefined,\r\n showBorder: true,\r\n label: \"\",\r\n showLabel: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n error: [error: Error];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\n\r\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\r\n value: toRef(props, \"value\"),\r\n size: toRef(props, \"size\"),\r\n color: toRef(props, \"color\"),\r\n bgColor: toRef(props, \"bgColor\"),\r\n errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\r\n margin: toRef(props, \"margin\"),\r\n mode: toRef(props, \"mode\"),\r\n logo: toRef(props, \"logo\"),\r\n});\r\n\r\nwatch(error, (e) => {\r\n if (e) emit(\"error\", e);\r\n});\r\n\r\nonMounted(() => render());\r\n\r\ndefineExpose<QRCodeExpose>({\r\n toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\r\n download: (filename?: string, type?: ExportType) => download(filename, type),\r\n refresh: () => render(),\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
package/dist/C_QRCode2.js CHANGED
@@ -1,2 +1,2 @@
1
- import{t as e}from"./export-helper.js";import{computed as t,createCommentVNode as n,createElementBlock as r,createElementVNode as i,defineComponent as a,normalizeClass as o,normalizeStyle as s,onMounted as c,openBlock as l,ref as u,toDisplayString as d,toRef as f,unref as p,vShow as m,watch as h,withDirectives as g}from"vue";import _ from"qrcode";function v(e,t,n){return new Promise((r,i)=>{let a=e.getContext(`2d`);if(!a)return i(Error(`Canvas context 不可用`));let o=new Image;o.crossOrigin=`anonymous`,o.onload=()=>{let i=t.size??.2,s=Math.floor(n*i),c=t.padding??4,l=t.borderRadius??4,u=(e.width-s)/2,d=(e.height-s)/2;a.save();let f=u-c,p=d-c,m=s+c*2,h=l+c;a.beginPath(),a.moveTo(f+h,p),a.arcTo(f+m,p,f+m,p+m,h),a.arcTo(f+m,p+m,f,p+m,h),a.arcTo(f,p+m,f,p,h),a.arcTo(f,p,f+m,p,h),a.closePath(),a.fillStyle=t.bgColor??`#ffffff`,a.fill(),a.beginPath(),a.moveTo(u+l,d),a.arcTo(u+s,d,u+s,d+s,l),a.arcTo(u+s,d+s,u,d+s,l),a.arcTo(u,d+s,u,d,l),a.arcTo(u,d,u+s,d,l),a.closePath(),a.clip(),a.drawImage(o,u,d,s,s),a.restore(),r()},o.onerror=()=>i(Error(`Logo 加载失败: ${t.src}`)),o.src=t.src})}function y(e,n){let r=u(``),i=u(null),a=u(!1),o=t(()=>{if(n.logo.value){let e=n.errorCorrectionLevel.value;return e===`L`||e===`M`?`Q`:e}return n.errorCorrectionLevel.value}),s=t(()=>({width:n.size.value,margin:n.margin.value,errorCorrectionLevel:o.value,color:{dark:n.color.value,light:n.bgColor.value}}));async function c(){let t=e.value;!t||!n.value.value||(await _.toCanvas(t,n.value.value,s.value),n.logo.value&&await v(t,n.logo.value,n.size.value))}async function l(){if(!n.value.value){r.value=``;return}r.value=await _.toString(n.value.value,{...s.value,type:`svg`})}async function d(){if(n.value.value){a.value=!0,i.value=null;try{n.mode.value===`canvas`?await c():await l()}catch(e){i.value=e instanceof Error?e:Error(String(e)),console.error(`二维码渲染失败:`,e)}finally{a.value=!1}}}async function f(e=`png`,t=.92){if(e===`svg`){let e=await _.toString(n.value.value,{...s.value,type:`svg`});return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(e)}`}let r=document.createElement(`canvas`);await _.toCanvas(r,n.value.value,s.value),n.logo.value&&await v(r,n.logo.value,n.size.value);let i=e===`jpeg`?`image/jpeg`:`image/png`;return r.toDataURL(i,t)}async function p(e=`qrcode`,t=`png`){let n=await f(t),r=document.createElement(`a`);r.download=`${e}.${t}`,r.href=n,r.click()}return h([n.value,n.size,n.color,n.bgColor,n.errorCorrectionLevel,n.margin,n.mode,n.logo],()=>d(),{deep:!0}),{svgHtml:r,error:i,loading:a,render:d,toDataURL:f,download:p}}const b={class:`c-qrcode`},x=[`innerHTML`],S={key:0,class:`qrcode-label`};var C=e(a({name:`C_QRCode`,__name:`index`,props:{value:{},size:{default:200},color:{default:`#000000`},bgColor:{default:`#FFFFFF`},errorCorrectionLevel:{default:`M`},margin:{default:2},mode:{default:`canvas`},logo:{default:void 0},showBorder:{type:Boolean,default:!0},label:{default:``},showLabel:{type:Boolean,default:!1}},emits:[`error`],setup(e,{expose:t,emit:a}){let _=e,v=a,C=u(null),{svgHtml:w,error:T,render:E,toDataURL:D,download:O}=y(C,{value:f(_,`value`),size:f(_,`size`),color:f(_,`color`),bgColor:f(_,`bgColor`),errorCorrectionLevel:f(_,`errorCorrectionLevel`),margin:f(_,`margin`),mode:f(_,`mode`),logo:f(_,`logo`)});return h(T,e=>{e&&v(`error`,e)}),c(()=>E()),t({toDataURL:(e,t)=>D(e,t),download:(e,t)=>O(e,t),refresh:()=>E()}),(e,t)=>(l(),r(`div`,b,[i(`div`,{class:o([`qrcode-wrapper`,{"with-border":e.showBorder}])},[g(i(`canvas`,{ref_key:`canvasRef`,ref:C},null,512),[[m,e.mode===`canvas`]]),e.mode===`svg`?(l(),r(`div`,{key:0,class:`qrcode-svg`,style:s({width:`${e.size}px`,height:`${e.size}px`}),innerHTML:p(w)},null,12,x)):n(`v-if`,!0)],2),e.showLabel&&e.label?(l(),r(`div`,S,d(e.label),1)):n(`v-if`,!0)]))}}),[[`__scopeId`,`data-v-fe18e0fe`]]);export{y as n,C as t};
1
+ import{t as e}from"./export-helper.js";import{computed as t,createCommentVNode as n,createElementBlock as r,createElementVNode as i,defineComponent as a,normalizeClass as o,normalizeStyle as s,onMounted as c,openBlock as l,ref as u,toDisplayString as d,toRef as f,unref as p,vShow as m,watch as h,withDirectives as g}from"vue";import _ from"qrcode";function v(e,t,n){return new Promise((r,i)=>{let a=e.getContext(`2d`);if(!a)return i(Error(`Canvas context 不可用`));let o=new Image;o.crossOrigin=`anonymous`,o.onload=()=>{let i=t.size??.2,s=Math.floor(n*i),c=t.padding??4,l=t.borderRadius??4,u=(e.width-s)/2,d=(e.height-s)/2;a.save();let f=u-c,p=d-c,m=s+c*2,h=l+c;a.beginPath(),a.moveTo(f+h,p),a.arcTo(f+m,p,f+m,p+m,h),a.arcTo(f+m,p+m,f,p+m,h),a.arcTo(f,p+m,f,p,h),a.arcTo(f,p,f+m,p,h),a.closePath(),a.fillStyle=t.bgColor??`#ffffff`,a.fill(),a.beginPath(),a.moveTo(u+l,d),a.arcTo(u+s,d,u+s,d+s,l),a.arcTo(u+s,d+s,u,d+s,l),a.arcTo(u,d+s,u,d,l),a.arcTo(u,d,u+s,d,l),a.closePath(),a.clip(),a.drawImage(o,u,d,s,s),a.restore(),r()},o.onerror=()=>i(Error(`Logo 加载失败: ${t.src}`)),o.src=t.src})}function y(e,n){let r=u(``),i=u(null),a=u(!1),o=t(()=>{if(n.logo.value){let e=n.errorCorrectionLevel.value;return e===`L`||e===`M`?`Q`:e}return n.errorCorrectionLevel.value}),s=t(()=>({width:n.size.value,margin:n.margin.value,errorCorrectionLevel:o.value,color:{dark:n.color.value,light:n.bgColor.value}}));async function c(){let t=e.value;!t||!n.value.value||(await _.toCanvas(t,n.value.value,s.value),n.logo.value&&await v(t,n.logo.value,n.size.value))}async function l(){if(!n.value.value){r.value=``;return}r.value=await _.toString(n.value.value,{...s.value,type:`svg`})}async function d(){if(n.value.value){a.value=!0,i.value=null;try{n.mode.value===`canvas`?await c():await l()}catch(e){i.value=e instanceof Error?e:Error(String(e)),console.error(`二维码渲染失败:`,e)}finally{a.value=!1}}}async function f(e=`png`,t=.92){if(e===`svg`){let e=await _.toString(n.value.value,{...s.value,type:`svg`});return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(e)}`}let r=document.createElement(`canvas`);await _.toCanvas(r,n.value.value,s.value),n.logo.value&&await v(r,n.logo.value,n.size.value);let i=e===`jpeg`?`image/jpeg`:`image/png`;return r.toDataURL(i,t)}async function p(e=`qrcode`,t=`png`){let n=await f(t),r=document.createElement(`a`);r.download=`${e}.${t}`,r.href=n,r.click()}return h([n.value,n.size,n.color,n.bgColor,n.errorCorrectionLevel,n.margin,n.mode,n.logo],()=>d(),{deep:!0}),{svgHtml:r,error:i,loading:a,render:d,toDataURL:f,download:p}}const b={class:`c-qrcode`},x=[`innerHTML`],S={key:0,class:`qrcode-label`};var C=e(a({name:`C_QRCode`,__name:`index`,props:{value:{},size:{default:200},color:{default:`#000000`},bgColor:{default:`#FFFFFF`},errorCorrectionLevel:{default:`M`},margin:{default:2},mode:{default:`canvas`},logo:{default:void 0},showBorder:{type:Boolean,default:!0},label:{default:``},showLabel:{type:Boolean,default:!1}},emits:[`error`],setup(e,{expose:t,emit:a}){let _=e,v=a,C=u(null),{svgHtml:w,error:T,render:E,toDataURL:D,download:O}=y(C,{value:f(_,`value`),size:f(_,`size`),color:f(_,`color`),bgColor:f(_,`bgColor`),errorCorrectionLevel:f(_,`errorCorrectionLevel`),margin:f(_,`margin`),mode:f(_,`mode`),logo:f(_,`logo`)});return h(T,e=>{e&&v(`error`,e)}),c(()=>E()),t({toDataURL:(e,t)=>D(e,t),download:(e,t)=>O(e,t),refresh:()=>E()}),(e,t)=>(l(),r(`div`,b,[i(`div`,{class:o([`qrcode-wrapper`,{"with-border":e.showBorder}])},[g(i(`canvas`,{ref_key:`canvasRef`,ref:C},null,512),[[m,e.mode===`canvas`]]),e.mode===`svg`?(l(),r(`div`,{key:0,class:`qrcode-svg`,style:s({width:`${e.size}px`,height:`${e.size}px`}),innerHTML:p(w)},null,12,x)):n(`v-if`,!0)],2),e.showLabel&&e.label?(l(),r(`div`,S,d(e.label),1)):n(`v-if`,!0)]))}}),[[`__scopeId`,`data-v-7a4201b5`]]);export{y as n,C as t};
2
2
  //# sourceMappingURL=C_QRCode2.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"C_QRCode2.js","names":["showBorder","mode","size","showLabel","label"],"sources":["../src/components/C_QRCode/composables/useQRCode.ts","../src/components/C_QRCode/index.vue","../src/components/C_QRCode/index.vue","../src/components/C_QRCode/index.vue"],"sourcesContent":["import { ref, computed, watch } from \"vue\";\r\nimport QRCode from \"qrcode\";\r\nimport type { Ref } from \"vue\";\r\nimport type {\r\n ErrorCorrectionLevel,\r\n ExportType,\r\n LogoOptions,\r\n RenderMode,\r\n} from \"../types\";\r\n\r\ninterface UseQRCodeOptions {\r\n value: Ref<string>;\r\n size: Ref<number>;\r\n color: Ref<string>;\r\n bgColor: Ref<string>;\r\n errorCorrectionLevel: Ref<ErrorCorrectionLevel>;\r\n margin: Ref<number>;\r\n mode: Ref<RenderMode>;\r\n logo: Ref<LogoOptions | undefined>;\r\n}\r\n\r\nfunction drawLogo(\r\n canvas: HTMLCanvasElement,\r\n logo: LogoOptions,\r\n qrSize: number,\r\n): Promise<void> {\r\n return new Promise((resolve, reject) => {\r\n const ctx = canvas.getContext(\"2d\");\r\n if (!ctx) return reject(new Error(\"Canvas context 不可用\"));\r\n\r\n const img = new Image();\r\n img.crossOrigin = \"anonymous\";\r\n img.onload = () => {\r\n const ratio = logo.size ?? 0.2;\r\n const logoSize = Math.floor(qrSize * ratio);\r\n const padding = logo.padding ?? 4;\r\n const borderRadius = logo.borderRadius ?? 4;\r\n\r\n const x = (canvas.width - logoSize) / 2;\r\n const y = (canvas.height - logoSize) / 2;\r\n\r\n ctx.save();\r\n const bgX = x - padding;\r\n const bgY = y - padding;\r\n const bgSize = logoSize + padding * 2;\r\n const r = borderRadius + padding;\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(bgX + r, bgY);\r\n ctx.arcTo(bgX + bgSize, bgY, bgX + bgSize, bgY + bgSize, r);\r\n ctx.arcTo(bgX + bgSize, bgY + bgSize, bgX, bgY + bgSize, r);\r\n ctx.arcTo(bgX, bgY + bgSize, bgX, bgY, r);\r\n ctx.arcTo(bgX, bgY, bgX + bgSize, bgY, r);\r\n ctx.closePath();\r\n ctx.fillStyle = logo.bgColor ?? \"#ffffff\";\r\n ctx.fill();\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(x + borderRadius, y);\r\n ctx.arcTo(x + logoSize, y, x + logoSize, y + logoSize, borderRadius);\r\n ctx.arcTo(x + logoSize, y + logoSize, x, y + logoSize, borderRadius);\r\n ctx.arcTo(x, y + logoSize, x, y, borderRadius);\r\n ctx.arcTo(x, y, x + logoSize, y, borderRadius);\r\n ctx.closePath();\r\n ctx.clip();\r\n ctx.drawImage(img, x, y, logoSize, logoSize);\r\n ctx.restore();\r\n\r\n resolve();\r\n };\r\n img.onerror = () => reject(new Error(`Logo 加载失败: ${logo.src}`));\r\n img.src = logo.src;\r\n });\r\n}\r\n\r\nexport function useQRCode(\r\n canvasRef: Ref<HTMLCanvasElement | null>,\r\n options: UseQRCodeOptions,\r\n) {\r\n const svgHtml = ref(\"\");\r\n const error = ref<Error | null>(null);\r\n const loading = ref(false);\r\n\r\n const effectiveLevel = computed<ErrorCorrectionLevel>(() => {\r\n if (options.logo.value) {\r\n const level = options.errorCorrectionLevel.value;\r\n if (level === \"L\" || level === \"M\") return \"Q\";\r\n return level;\r\n }\r\n return options.errorCorrectionLevel.value;\r\n });\r\n\r\n const qrOptions = computed(() => ({\r\n width: options.size.value,\r\n margin: options.margin.value,\r\n errorCorrectionLevel: effectiveLevel.value,\r\n color: {\r\n dark: options.color.value,\r\n light: options.bgColor.value,\r\n },\r\n }));\r\n\r\n async function renderCanvas() {\r\n const canvas = canvasRef.value;\r\n if (!canvas || !options.value.value) return;\r\n await QRCode.toCanvas(canvas, options.value.value, qrOptions.value);\r\n if (options.logo.value) {\r\n await drawLogo(canvas, options.logo.value, options.size.value);\r\n }\r\n }\r\n\r\n async function renderSvg() {\r\n if (!options.value.value) {\r\n svgHtml.value = \"\";\r\n return;\r\n }\r\n const svgString = await QRCode.toString(options.value.value, {\r\n ...qrOptions.value,\r\n type: \"svg\",\r\n });\r\n svgHtml.value = svgString;\r\n }\r\n\r\n async function render() {\r\n if (!options.value.value) return;\r\n loading.value = true;\r\n error.value = null;\r\n try {\r\n if (options.mode.value === \"canvas\") {\r\n await renderCanvas();\r\n } else {\r\n await renderSvg();\r\n }\r\n } catch (e) {\r\n error.value = e instanceof Error ? e : new Error(String(e));\r\n console.error(\"二维码渲染失败:\", e);\r\n } finally {\r\n loading.value = false;\r\n }\r\n }\r\n\r\n async function toDataURL(\r\n type: ExportType = \"png\",\r\n quality = 0.92,\r\n ): Promise<string> {\r\n if (type === \"svg\") {\r\n const svgStr = await QRCode.toString(options.value.value, {\r\n ...qrOptions.value,\r\n type: \"svg\",\r\n });\r\n return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;\r\n }\r\n const tempCanvas = document.createElement(\"canvas\");\r\n await QRCode.toCanvas(tempCanvas, options.value.value, qrOptions.value);\r\n if (options.logo.value) {\r\n await drawLogo(tempCanvas, options.logo.value, options.size.value);\r\n }\r\n const mimeType = type === \"jpeg\" ? \"image/jpeg\" : \"image/png\";\r\n return tempCanvas.toDataURL(mimeType, quality);\r\n }\r\n\r\n async function download(filename = \"qrcode\", type: ExportType = \"png\") {\r\n const dataUrl = await toDataURL(type);\r\n const link = document.createElement(\"a\");\r\n link.download = `${filename}.${type}`;\r\n link.href = dataUrl;\r\n link.click();\r\n }\r\n\r\n watch(\r\n [\r\n options.value,\r\n options.size,\r\n options.color,\r\n options.bgColor,\r\n options.errorCorrectionLevel,\r\n options.margin,\r\n options.mode,\r\n options.logo,\r\n ],\r\n () => render(),\r\n { deep: true },\r\n );\r\n\r\n return { svgHtml, error, loading, render, toDataURL, download };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-16\n * @Description: 二维码组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-qrcode\">\n <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\n <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\n <div\n v-if=\"mode === 'svg'\"\n class=\"qrcode-svg\"\n :style=\"{ width: `${size}px`, height: `${size}px` }\"\n v-html=\"svgHtml\"\n />\n </div>\n <div v-if=\"showLabel && label\" class=\"qrcode-label\">\n {{ label }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, toRef, watch, onMounted } from \"vue\";\nimport { useQRCode } from \"./composables/useQRCode\";\nimport type {\n ErrorCorrectionLevel,\n ExportType,\n LogoOptions,\n QRCodeExpose,\n RenderMode,\n} from \"./types\";\n\ndefineOptions({ name: \"C_QRCode\" });\n\ninterface Props {\n value: string;\n size?: number;\n color?: string;\n bgColor?: string;\n errorCorrectionLevel?: ErrorCorrectionLevel;\n margin?: number;\n mode?: RenderMode;\n logo?: LogoOptions;\n showBorder?: boolean;\n label?: string;\n showLabel?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n size: 200,\n color: \"#000000\",\n bgColor: \"#FFFFFF\",\n errorCorrectionLevel: \"M\",\n margin: 2,\n mode: \"canvas\",\n logo: undefined,\n showBorder: true,\n label: \"\",\n showLabel: false,\n});\n\nconst emit = defineEmits<{\n error: [error: Error];\n}>();\n\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\n\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\n value: toRef(props, \"value\"),\n size: toRef(props, \"size\"),\n color: toRef(props, \"color\"),\n bgColor: toRef(props, \"bgColor\"),\n errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\n margin: toRef(props, \"margin\"),\n mode: toRef(props, \"mode\"),\n logo: toRef(props, \"logo\"),\n});\n\nwatch(error, (e) => {\n if (e) emit(\"error\", e);\n});\n\nonMounted(() => render());\n\ndefineExpose<QRCodeExpose>({\n toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\n download: (filename?: string, type?: ExportType) => download(filename, type),\n refresh: () => render(),\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-16\n * @Description: 二维码组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-qrcode\">\n <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\n <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\n <div\n v-if=\"mode === 'svg'\"\n class=\"qrcode-svg\"\n :style=\"{ width: `${size}px`, height: `${size}px` }\"\n v-html=\"svgHtml\"\n />\n </div>\n <div v-if=\"showLabel && label\" class=\"qrcode-label\">\n {{ label }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, toRef, watch, onMounted } from \"vue\";\nimport { useQRCode } from \"./composables/useQRCode\";\nimport type {\n ErrorCorrectionLevel,\n ExportType,\n LogoOptions,\n QRCodeExpose,\n RenderMode,\n} from \"./types\";\n\ndefineOptions({ name: \"C_QRCode\" });\n\ninterface Props {\n value: string;\n size?: number;\n color?: string;\n bgColor?: string;\n errorCorrectionLevel?: ErrorCorrectionLevel;\n margin?: number;\n mode?: RenderMode;\n logo?: LogoOptions;\n showBorder?: boolean;\n label?: string;\n showLabel?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n size: 200,\n color: \"#000000\",\n bgColor: \"#FFFFFF\",\n errorCorrectionLevel: \"M\",\n margin: 2,\n mode: \"canvas\",\n logo: undefined,\n showBorder: true,\n label: \"\",\n showLabel: false,\n});\n\nconst emit = defineEmits<{\n error: [error: Error];\n}>();\n\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\n\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\n value: toRef(props, \"value\"),\n size: toRef(props, \"size\"),\n color: toRef(props, \"color\"),\n bgColor: toRef(props, \"bgColor\"),\n errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\n margin: toRef(props, \"margin\"),\n mode: toRef(props, \"mode\"),\n logo: toRef(props, \"logo\"),\n});\n\nwatch(error, (e) => {\n if (e) emit(\"error\", e);\n});\n\nonMounted(() => render());\n\ndefineExpose<QRCodeExpose>({\n toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\n download: (filename?: string, type?: ExportType) => download(filename, type),\n refresh: () => render(),\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-16\n * @Description: 二维码组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-qrcode\">\n <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\n <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\n <div\n v-if=\"mode === 'svg'\"\n class=\"qrcode-svg\"\n :style=\"{ width: `${size}px`, height: `${size}px` }\"\n v-html=\"svgHtml\"\n />\n </div>\n <div v-if=\"showLabel && label\" class=\"qrcode-label\">\n {{ label }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, toRef, watch, onMounted } from \"vue\";\nimport { useQRCode } from \"./composables/useQRCode\";\nimport type {\n ErrorCorrectionLevel,\n ExportType,\n LogoOptions,\n QRCodeExpose,\n RenderMode,\n} from \"./types\";\n\ndefineOptions({ name: \"C_QRCode\" });\n\ninterface Props {\n value: string;\n size?: number;\n color?: string;\n bgColor?: string;\n errorCorrectionLevel?: ErrorCorrectionLevel;\n margin?: number;\n mode?: RenderMode;\n logo?: LogoOptions;\n showBorder?: boolean;\n label?: string;\n showLabel?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n size: 200,\n color: \"#000000\",\n bgColor: \"#FFFFFF\",\n errorCorrectionLevel: \"M\",\n margin: 2,\n mode: \"canvas\",\n logo: undefined,\n showBorder: true,\n label: \"\",\n showLabel: false,\n});\n\nconst emit = defineEmits<{\n error: [error: Error];\n}>();\n\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\n\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\n value: toRef(props, \"value\"),\n size: toRef(props, \"size\"),\n color: toRef(props, \"color\"),\n bgColor: toRef(props, \"bgColor\"),\n errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\n margin: toRef(props, \"margin\"),\n mode: toRef(props, \"mode\"),\n logo: toRef(props, \"logo\"),\n});\n\nwatch(error, (e) => {\n if (e) emit(\"error\", e);\n});\n\nonMounted(() => render());\n\ndefineExpose<QRCodeExpose>({\n toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\n download: (filename?: string, type?: ExportType) => download(filename, type),\n refresh: () => render(),\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n"],"mappings":"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"}
1
+ {"version":3,"file":"C_QRCode2.js","names":["showBorder","mode","size","showLabel","label"],"sources":["../src/components/C_QRCode/composables/useQRCode.ts","../src/components/C_QRCode/index.vue","../src/components/C_QRCode/index.vue","../src/components/C_QRCode/index.vue"],"sourcesContent":["import { ref, computed, watch } from \"vue\";\r\nimport QRCode from \"qrcode\";\r\nimport type { Ref } from \"vue\";\r\nimport type {\r\n ErrorCorrectionLevel,\r\n ExportType,\r\n LogoOptions,\r\n RenderMode,\r\n} from \"../types\";\r\n\r\ninterface UseQRCodeOptions {\r\n value: Ref<string>;\r\n size: Ref<number>;\r\n color: Ref<string>;\r\n bgColor: Ref<string>;\r\n errorCorrectionLevel: Ref<ErrorCorrectionLevel>;\r\n margin: Ref<number>;\r\n mode: Ref<RenderMode>;\r\n logo: Ref<LogoOptions | undefined>;\r\n}\r\n\r\nfunction drawLogo(\r\n canvas: HTMLCanvasElement,\r\n logo: LogoOptions,\r\n qrSize: number,\r\n): Promise<void> {\r\n return new Promise((resolve, reject) => {\r\n const ctx = canvas.getContext(\"2d\");\r\n if (!ctx) return reject(new Error(\"Canvas context 不可用\"));\r\n\r\n const img = new Image();\r\n img.crossOrigin = \"anonymous\";\r\n img.onload = () => {\r\n const ratio = logo.size ?? 0.2;\r\n const logoSize = Math.floor(qrSize * ratio);\r\n const padding = logo.padding ?? 4;\r\n const borderRadius = logo.borderRadius ?? 4;\r\n\r\n const x = (canvas.width - logoSize) / 2;\r\n const y = (canvas.height - logoSize) / 2;\r\n\r\n ctx.save();\r\n const bgX = x - padding;\r\n const bgY = y - padding;\r\n const bgSize = logoSize + padding * 2;\r\n const r = borderRadius + padding;\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(bgX + r, bgY);\r\n ctx.arcTo(bgX + bgSize, bgY, bgX + bgSize, bgY + bgSize, r);\r\n ctx.arcTo(bgX + bgSize, bgY + bgSize, bgX, bgY + bgSize, r);\r\n ctx.arcTo(bgX, bgY + bgSize, bgX, bgY, r);\r\n ctx.arcTo(bgX, bgY, bgX + bgSize, bgY, r);\r\n ctx.closePath();\r\n ctx.fillStyle = logo.bgColor ?? \"#ffffff\";\r\n ctx.fill();\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(x + borderRadius, y);\r\n ctx.arcTo(x + logoSize, y, x + logoSize, y + logoSize, borderRadius);\r\n ctx.arcTo(x + logoSize, y + logoSize, x, y + logoSize, borderRadius);\r\n ctx.arcTo(x, y + logoSize, x, y, borderRadius);\r\n ctx.arcTo(x, y, x + logoSize, y, borderRadius);\r\n ctx.closePath();\r\n ctx.clip();\r\n ctx.drawImage(img, x, y, logoSize, logoSize);\r\n ctx.restore();\r\n\r\n resolve();\r\n };\r\n img.onerror = () => reject(new Error(`Logo 加载失败: ${logo.src}`));\r\n img.src = logo.src;\r\n });\r\n}\r\n\r\nexport function useQRCode(\r\n canvasRef: Ref<HTMLCanvasElement | null>,\r\n options: UseQRCodeOptions,\r\n) {\r\n const svgHtml = ref(\"\");\r\n const error = ref<Error | null>(null);\r\n const loading = ref(false);\r\n\r\n const effectiveLevel = computed<ErrorCorrectionLevel>(() => {\r\n if (options.logo.value) {\r\n const level = options.errorCorrectionLevel.value;\r\n if (level === \"L\" || level === \"M\") return \"Q\";\r\n return level;\r\n }\r\n return options.errorCorrectionLevel.value;\r\n });\r\n\r\n const qrOptions = computed(() => ({\r\n width: options.size.value,\r\n margin: options.margin.value,\r\n errorCorrectionLevel: effectiveLevel.value,\r\n color: {\r\n dark: options.color.value,\r\n light: options.bgColor.value,\r\n },\r\n }));\r\n\r\n async function renderCanvas() {\r\n const canvas = canvasRef.value;\r\n if (!canvas || !options.value.value) return;\r\n await QRCode.toCanvas(canvas, options.value.value, qrOptions.value);\r\n if (options.logo.value) {\r\n await drawLogo(canvas, options.logo.value, options.size.value);\r\n }\r\n }\r\n\r\n async function renderSvg() {\r\n if (!options.value.value) {\r\n svgHtml.value = \"\";\r\n return;\r\n }\r\n const svgString = await QRCode.toString(options.value.value, {\r\n ...qrOptions.value,\r\n type: \"svg\",\r\n });\r\n svgHtml.value = svgString;\r\n }\r\n\r\n async function render() {\r\n if (!options.value.value) return;\r\n loading.value = true;\r\n error.value = null;\r\n try {\r\n if (options.mode.value === \"canvas\") {\r\n await renderCanvas();\r\n } else {\r\n await renderSvg();\r\n }\r\n } catch (e) {\r\n error.value = e instanceof Error ? e : new Error(String(e));\r\n console.error(\"二维码渲染失败:\", e);\r\n } finally {\r\n loading.value = false;\r\n }\r\n }\r\n\r\n async function toDataURL(\r\n type: ExportType = \"png\",\r\n quality = 0.92,\r\n ): Promise<string> {\r\n if (type === \"svg\") {\r\n const svgStr = await QRCode.toString(options.value.value, {\r\n ...qrOptions.value,\r\n type: \"svg\",\r\n });\r\n return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;\r\n }\r\n const tempCanvas = document.createElement(\"canvas\");\r\n await QRCode.toCanvas(tempCanvas, options.value.value, qrOptions.value);\r\n if (options.logo.value) {\r\n await drawLogo(tempCanvas, options.logo.value, options.size.value);\r\n }\r\n const mimeType = type === \"jpeg\" ? \"image/jpeg\" : \"image/png\";\r\n return tempCanvas.toDataURL(mimeType, quality);\r\n }\r\n\r\n async function download(filename = \"qrcode\", type: ExportType = \"png\") {\r\n const dataUrl = await toDataURL(type);\r\n const link = document.createElement(\"a\");\r\n link.download = `${filename}.${type}`;\r\n link.href = dataUrl;\r\n link.click();\r\n }\r\n\r\n watch(\r\n [\r\n options.value,\r\n options.size,\r\n options.color,\r\n options.bgColor,\r\n options.errorCorrectionLevel,\r\n options.margin,\r\n options.mode,\r\n options.logo,\r\n ],\r\n () => render(),\r\n { deep: true },\r\n );\r\n\r\n return { svgHtml, error, loading, render, toDataURL, download };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 二维码组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-qrcode\">\r\n <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\r\n <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\r\n <div\r\n v-if=\"mode === 'svg'\"\r\n class=\"qrcode-svg\"\r\n :style=\"{ width: `${size}px`, height: `${size}px` }\"\r\n v-html=\"svgHtml\"\r\n />\r\n </div>\r\n <div v-if=\"showLabel && label\" class=\"qrcode-label\">\r\n {{ label }}\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, onMounted } from \"vue\";\r\nimport { useQRCode } from \"./composables/useQRCode\";\r\nimport type {\r\n ErrorCorrectionLevel,\r\n ExportType,\r\n LogoOptions,\r\n QRCodeExpose,\r\n RenderMode,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_QRCode\" });\r\n\r\ninterface Props {\r\n value: string;\r\n size?: number;\r\n color?: string;\r\n bgColor?: string;\r\n errorCorrectionLevel?: ErrorCorrectionLevel;\r\n margin?: number;\r\n mode?: RenderMode;\r\n logo?: LogoOptions;\r\n showBorder?: boolean;\r\n label?: string;\r\n showLabel?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n size: 200,\r\n color: \"#000000\",\r\n bgColor: \"#FFFFFF\",\r\n errorCorrectionLevel: \"M\",\r\n margin: 2,\r\n mode: \"canvas\",\r\n logo: undefined,\r\n showBorder: true,\r\n label: \"\",\r\n showLabel: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n error: [error: Error];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\n\r\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\r\n value: toRef(props, \"value\"),\r\n size: toRef(props, \"size\"),\r\n color: toRef(props, \"color\"),\r\n bgColor: toRef(props, \"bgColor\"),\r\n errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\r\n margin: toRef(props, \"margin\"),\r\n mode: toRef(props, \"mode\"),\r\n logo: toRef(props, \"logo\"),\r\n});\r\n\r\nwatch(error, (e) => {\r\n if (e) emit(\"error\", e);\r\n});\r\n\r\nonMounted(() => render());\r\n\r\ndefineExpose<QRCodeExpose>({\r\n toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\r\n download: (filename?: string, type?: ExportType) => download(filename, type),\r\n refresh: () => render(),\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 二维码组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-qrcode\">\r\n <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\r\n <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\r\n <div\r\n v-if=\"mode === 'svg'\"\r\n class=\"qrcode-svg\"\r\n :style=\"{ width: `${size}px`, height: `${size}px` }\"\r\n v-html=\"svgHtml\"\r\n />\r\n </div>\r\n <div v-if=\"showLabel && label\" class=\"qrcode-label\">\r\n {{ label }}\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, onMounted } from \"vue\";\r\nimport { useQRCode } from \"./composables/useQRCode\";\r\nimport type {\r\n ErrorCorrectionLevel,\r\n ExportType,\r\n LogoOptions,\r\n QRCodeExpose,\r\n RenderMode,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_QRCode\" });\r\n\r\ninterface Props {\r\n value: string;\r\n size?: number;\r\n color?: string;\r\n bgColor?: string;\r\n errorCorrectionLevel?: ErrorCorrectionLevel;\r\n margin?: number;\r\n mode?: RenderMode;\r\n logo?: LogoOptions;\r\n showBorder?: boolean;\r\n label?: string;\r\n showLabel?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n size: 200,\r\n color: \"#000000\",\r\n bgColor: \"#FFFFFF\",\r\n errorCorrectionLevel: \"M\",\r\n margin: 2,\r\n mode: \"canvas\",\r\n logo: undefined,\r\n showBorder: true,\r\n label: \"\",\r\n showLabel: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n error: [error: Error];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\n\r\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\r\n value: toRef(props, \"value\"),\r\n size: toRef(props, \"size\"),\r\n color: toRef(props, \"color\"),\r\n bgColor: toRef(props, \"bgColor\"),\r\n errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\r\n margin: toRef(props, \"margin\"),\r\n mode: toRef(props, \"mode\"),\r\n logo: toRef(props, \"logo\"),\r\n});\r\n\r\nwatch(error, (e) => {\r\n if (e) emit(\"error\", e);\r\n});\r\n\r\nonMounted(() => render());\r\n\r\ndefineExpose<QRCodeExpose>({\r\n toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\r\n download: (filename?: string, type?: ExportType) => download(filename, type),\r\n refresh: () => render(),\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 二维码组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-qrcode\">\r\n <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\r\n <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\r\n <div\r\n v-if=\"mode === 'svg'\"\r\n class=\"qrcode-svg\"\r\n :style=\"{ width: `${size}px`, height: `${size}px` }\"\r\n v-html=\"svgHtml\"\r\n />\r\n </div>\r\n <div v-if=\"showLabel && label\" class=\"qrcode-label\">\r\n {{ label }}\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, onMounted } from \"vue\";\r\nimport { useQRCode } from \"./composables/useQRCode\";\r\nimport type {\r\n ErrorCorrectionLevel,\r\n ExportType,\r\n LogoOptions,\r\n QRCodeExpose,\r\n RenderMode,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_QRCode\" });\r\n\r\ninterface Props {\r\n value: string;\r\n size?: number;\r\n color?: string;\r\n bgColor?: string;\r\n errorCorrectionLevel?: ErrorCorrectionLevel;\r\n margin?: number;\r\n mode?: RenderMode;\r\n logo?: LogoOptions;\r\n showBorder?: boolean;\r\n label?: string;\r\n showLabel?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n size: 200,\r\n color: \"#000000\",\r\n bgColor: \"#FFFFFF\",\r\n errorCorrectionLevel: \"M\",\r\n margin: 2,\r\n mode: \"canvas\",\r\n logo: undefined,\r\n showBorder: true,\r\n label: \"\",\r\n showLabel: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n error: [error: Error];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\n\r\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\r\n value: toRef(props, \"value\"),\r\n size: toRef(props, \"size\"),\r\n color: toRef(props, \"color\"),\r\n bgColor: toRef(props, \"bgColor\"),\r\n errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\r\n margin: toRef(props, \"margin\"),\r\n mode: toRef(props, \"mode\"),\r\n logo: toRef(props, \"logo\"),\r\n});\r\n\r\nwatch(error, (e) => {\r\n if (e) emit(\"error\", e);\r\n});\r\n\r\nonMounted(() => render());\r\n\r\ndefineExpose<QRCodeExpose>({\r\n toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\r\n download: (filename?: string, type?: ExportType) => download(filename, type),\r\n refresh: () => render(),\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"C_Signature-PN4GOLRX.css","names":[],"sources":["../src/components/C_Signature/index.vue?vue&type=style&index=0&scoped=fbc647a9&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 电子签名组件样式 */\n.c-signature[data-v-fbc647a9] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n width: 100%;\n}\n.c-signature .signature-toolbar[data-v-fbc647a9] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: var(--c-bg-card, #fff);\n border: 1px solid var(--c-border, #e1e4e8);\n border-radius: var(--c-radius, 6px);\n flex-wrap: wrap;\n}\n.c-signature .signature-toolbar .toolbar-section[data-v-fbc647a9] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.c-signature .signature-toolbar .toolbar-section.divider[data-v-fbc647a9] {\n width: 1px;\n height: 24px;\n background: var(--c-border, #e1e4e8);\n margin: 0 4px;\n}\n.c-signature .signature-toolbar .toolbar-section .section-label[data-v-fbc647a9] {\n font-size: 13px;\n color: var(--c-text-3, #999);\n font-weight: 500;\n}\n.c-signature .signature-canvas-wrapper[data-v-fbc647a9] {\n position: relative;\n border: 1px solid var(--c-border, #e1e4e8);\n border-radius: var(--c-radius, 6px);\n overflow: hidden;\n background: var(--c-bg, #fff);\n transition: border-color 0.3s;\n}\n.c-signature .signature-canvas-wrapper[data-v-fbc647a9]:hover {\n border-color: var(--c-primary, #409eff);\n}\n.c-signature .signature-canvas-wrapper.disabled[data-v-fbc647a9] {\n opacity: 0.6;\n cursor: not-allowed;\n border-color: var(--c-border, #e1e4e8);\n}\n.c-signature .signature-canvas-wrapper.readonly[data-v-fbc647a9] {\n cursor: default;\n}\n.c-signature .signature-canvas-wrapper .signature-canvas[data-v-fbc647a9] {\n display: block;\n width: 100%;\n height: 100%;\n cursor: crosshair;\n touch-action: none;\n}\n.c-signature .signature-canvas-wrapper .signature-canvas.disabled[data-v-fbc647a9], .c-signature .signature-canvas-wrapper .signature-canvas.readonly[data-v-fbc647a9] {\n cursor: not-allowed;\n}\n.c-signature .signature-canvas-wrapper .canvas-placeholder[data-v-fbc647a9] {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: var(--c-text-4, #ccc);\n font-size: 14px;\n pointer-events: none;\n user-select: none;\n}\n.c-signature .signature-actions[data-v-fbc647a9] {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
1
+ {"version":3,"file":"C_Signature-B5fFz6RD.css","names":[],"sources":["../src/components/C_Signature/index.vue?vue&type=style&index=0&scoped=1c733bfe&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 电子签名组件样式 */\n.c-signature[data-v-1c733bfe] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n width: 100%;\n}\n.c-signature .signature-toolbar[data-v-1c733bfe] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: var(--c-bg-card, #fff);\n border: 1px solid var(--c-border, #e1e4e8);\n border-radius: var(--c-radius, 6px);\n flex-wrap: wrap;\n}\n.c-signature .signature-toolbar .toolbar-section[data-v-1c733bfe] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.c-signature .signature-toolbar .toolbar-section.divider[data-v-1c733bfe] {\n width: 1px;\n height: 24px;\n background: var(--c-border, #e1e4e8);\n margin: 0 4px;\n}\n.c-signature .signature-toolbar .toolbar-section .section-label[data-v-1c733bfe] {\n font-size: 13px;\n color: var(--c-text-3, #999);\n font-weight: 500;\n}\n.c-signature .signature-canvas-wrapper[data-v-1c733bfe] {\n position: relative;\n border: 1px solid var(--c-border, #e1e4e8);\n border-radius: var(--c-radius, 6px);\n overflow: hidden;\n background: var(--c-bg, #fff);\n transition: border-color 0.3s;\n}\n.c-signature .signature-canvas-wrapper[data-v-1c733bfe]:hover {\n border-color: var(--c-primary, #409eff);\n}\n.c-signature .signature-canvas-wrapper.disabled[data-v-1c733bfe] {\n opacity: 0.6;\n cursor: not-allowed;\n border-color: var(--c-border, #e1e4e8);\n}\n.c-signature .signature-canvas-wrapper.readonly[data-v-1c733bfe] {\n cursor: default;\n}\n.c-signature .signature-canvas-wrapper .signature-canvas[data-v-1c733bfe] {\n display: block;\n width: 100%;\n height: 100%;\n cursor: crosshair;\n touch-action: none;\n}\n.c-signature .signature-canvas-wrapper .signature-canvas.disabled[data-v-1c733bfe], .c-signature .signature-canvas-wrapper .signature-canvas.readonly[data-v-1c733bfe] {\n cursor: not-allowed;\n}\n.c-signature .signature-canvas-wrapper .canvas-placeholder[data-v-1c733bfe] {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: var(--c-text-4, #ccc);\n font-size: 14px;\n pointer-events: none;\n user-select: none;\n}\n.c-signature .signature-actions[data-v-1c733bfe] {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
@@ -1 +1 @@
1
- {"version":3,"file":"C_Signature-fWQqGIZ-.css","names":[],"sources":["../src/components/C_Signature/index.vue?vue&type=style&index=0&scoped=fbc647a9&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 电子签名组件样式 */\n.c-signature[data-v-fbc647a9] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n width: 100%;\n}\n.c-signature .signature-toolbar[data-v-fbc647a9] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: var(--c-bg-card, #fff);\n border: 1px solid var(--c-border, #e1e4e8);\n border-radius: var(--c-radius, 6px);\n flex-wrap: wrap;\n}\n.c-signature .signature-toolbar .toolbar-section[data-v-fbc647a9] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.c-signature .signature-toolbar .toolbar-section.divider[data-v-fbc647a9] {\n width: 1px;\n height: 24px;\n background: var(--c-border, #e1e4e8);\n margin: 0 4px;\n}\n.c-signature .signature-toolbar .toolbar-section .section-label[data-v-fbc647a9] {\n font-size: 13px;\n color: var(--c-text-3, #999);\n font-weight: 500;\n}\n.c-signature .signature-canvas-wrapper[data-v-fbc647a9] {\n position: relative;\n border: 1px solid var(--c-border, #e1e4e8);\n border-radius: var(--c-radius, 6px);\n overflow: hidden;\n background: var(--c-bg, #fff);\n transition: border-color 0.3s;\n}\n.c-signature .signature-canvas-wrapper[data-v-fbc647a9]:hover {\n border-color: var(--c-primary, #409eff);\n}\n.c-signature .signature-canvas-wrapper.disabled[data-v-fbc647a9] {\n opacity: 0.6;\n cursor: not-allowed;\n border-color: var(--c-border, #e1e4e8);\n}\n.c-signature .signature-canvas-wrapper.readonly[data-v-fbc647a9] {\n cursor: default;\n}\n.c-signature .signature-canvas-wrapper .signature-canvas[data-v-fbc647a9] {\n display: block;\n width: 100%;\n height: 100%;\n cursor: crosshair;\n touch-action: none;\n}\n.c-signature .signature-canvas-wrapper .signature-canvas.disabled[data-v-fbc647a9], .c-signature .signature-canvas-wrapper .signature-canvas.readonly[data-v-fbc647a9] {\n cursor: not-allowed;\n}\n.c-signature .signature-canvas-wrapper .canvas-placeholder[data-v-fbc647a9] {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: var(--c-text-4, #ccc);\n font-size: 14px;\n pointer-events: none;\n user-select: none;\n}\n.c-signature .signature-actions[data-v-fbc647a9] {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
1
+ {"version":3,"file":"C_Signature-es-ZNPzr.css","names":[],"sources":["../src/components/C_Signature/index.vue?vue&type=style&index=0&scoped=1c733bfe&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 电子签名组件样式 */\n.c-signature[data-v-1c733bfe] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n width: 100%;\n}\n.c-signature .signature-toolbar[data-v-1c733bfe] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: var(--c-bg-card, #fff);\n border: 1px solid var(--c-border, #e1e4e8);\n border-radius: var(--c-radius, 6px);\n flex-wrap: wrap;\n}\n.c-signature .signature-toolbar .toolbar-section[data-v-1c733bfe] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.c-signature .signature-toolbar .toolbar-section.divider[data-v-1c733bfe] {\n width: 1px;\n height: 24px;\n background: var(--c-border, #e1e4e8);\n margin: 0 4px;\n}\n.c-signature .signature-toolbar .toolbar-section .section-label[data-v-1c733bfe] {\n font-size: 13px;\n color: var(--c-text-3, #999);\n font-weight: 500;\n}\n.c-signature .signature-canvas-wrapper[data-v-1c733bfe] {\n position: relative;\n border: 1px solid var(--c-border, #e1e4e8);\n border-radius: var(--c-radius, 6px);\n overflow: hidden;\n background: var(--c-bg, #fff);\n transition: border-color 0.3s;\n}\n.c-signature .signature-canvas-wrapper[data-v-1c733bfe]:hover {\n border-color: var(--c-primary, #409eff);\n}\n.c-signature .signature-canvas-wrapper.disabled[data-v-1c733bfe] {\n opacity: 0.6;\n cursor: not-allowed;\n border-color: var(--c-border, #e1e4e8);\n}\n.c-signature .signature-canvas-wrapper.readonly[data-v-1c733bfe] {\n cursor: default;\n}\n.c-signature .signature-canvas-wrapper .signature-canvas[data-v-1c733bfe] {\n display: block;\n width: 100%;\n height: 100%;\n cursor: crosshair;\n touch-action: none;\n}\n.c-signature .signature-canvas-wrapper .signature-canvas.disabled[data-v-1c733bfe], .c-signature .signature-canvas-wrapper .signature-canvas.readonly[data-v-1c733bfe] {\n cursor: not-allowed;\n}\n.c-signature .signature-canvas-wrapper .canvas-placeholder[data-v-1c733bfe] {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: var(--c-text-4, #ccc);\n font-size: 14px;\n pointer-events: none;\n user-select: none;\n}\n.c-signature .signature-actions[data-v-1c733bfe] {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
@@ -1,11 +1,11 @@
1
1
  /* unplugin-vue-components disabled *//* 电子签名组件样式 */
2
- .c-signature[data-v-fbc647a9] {
2
+ .c-signature[data-v-1c733bfe] {
3
3
  display: flex;
4
4
  flex-direction: column;
5
5
  gap: 12px;
6
6
  width: 100%;
7
7
  }
8
- .c-signature .signature-toolbar[data-v-fbc647a9] {
8
+ .c-signature .signature-toolbar[data-v-1c733bfe] {
9
9
  display: flex;
10
10
  align-items: center;
11
11
  gap: 12px;
@@ -15,23 +15,23 @@
15
15
  border-radius: var(--c-radius, 6px);
16
16
  flex-wrap: wrap;
17
17
  }
18
- .c-signature .signature-toolbar .toolbar-section[data-v-fbc647a9] {
18
+ .c-signature .signature-toolbar .toolbar-section[data-v-1c733bfe] {
19
19
  display: flex;
20
20
  align-items: center;
21
21
  gap: 8px;
22
22
  }
23
- .c-signature .signature-toolbar .toolbar-section.divider[data-v-fbc647a9] {
23
+ .c-signature .signature-toolbar .toolbar-section.divider[data-v-1c733bfe] {
24
24
  width: 1px;
25
25
  height: 24px;
26
26
  background: var(--c-border, #e1e4e8);
27
27
  margin: 0 4px;
28
28
  }
29
- .c-signature .signature-toolbar .toolbar-section .section-label[data-v-fbc647a9] {
29
+ .c-signature .signature-toolbar .toolbar-section .section-label[data-v-1c733bfe] {
30
30
  font-size: 13px;
31
31
  color: var(--c-text-3, #999);
32
32
  font-weight: 500;
33
33
  }
34
- .c-signature .signature-canvas-wrapper[data-v-fbc647a9] {
34
+ .c-signature .signature-canvas-wrapper[data-v-1c733bfe] {
35
35
  position: relative;
36
36
  border: 1px solid var(--c-border, #e1e4e8);
37
37
  border-radius: var(--c-radius, 6px);
@@ -39,28 +39,28 @@
39
39
  background: var(--c-bg, #fff);
40
40
  transition: border-color 0.3s;
41
41
  }
42
- .c-signature .signature-canvas-wrapper[data-v-fbc647a9]:hover {
42
+ .c-signature .signature-canvas-wrapper[data-v-1c733bfe]:hover {
43
43
  border-color: var(--c-primary, #409eff);
44
44
  }
45
- .c-signature .signature-canvas-wrapper.disabled[data-v-fbc647a9] {
45
+ .c-signature .signature-canvas-wrapper.disabled[data-v-1c733bfe] {
46
46
  opacity: 0.6;
47
47
  cursor: not-allowed;
48
48
  border-color: var(--c-border, #e1e4e8);
49
49
  }
50
- .c-signature .signature-canvas-wrapper.readonly[data-v-fbc647a9] {
50
+ .c-signature .signature-canvas-wrapper.readonly[data-v-1c733bfe] {
51
51
  cursor: default;
52
52
  }
53
- .c-signature .signature-canvas-wrapper .signature-canvas[data-v-fbc647a9] {
53
+ .c-signature .signature-canvas-wrapper .signature-canvas[data-v-1c733bfe] {
54
54
  display: block;
55
55
  width: 100%;
56
56
  height: 100%;
57
57
  cursor: crosshair;
58
58
  touch-action: none;
59
59
  }
60
- .c-signature .signature-canvas-wrapper .signature-canvas.disabled[data-v-fbc647a9], .c-signature .signature-canvas-wrapper .signature-canvas.readonly[data-v-fbc647a9] {
60
+ .c-signature .signature-canvas-wrapper .signature-canvas.disabled[data-v-1c733bfe], .c-signature .signature-canvas-wrapper .signature-canvas.readonly[data-v-1c733bfe] {
61
61
  cursor: not-allowed;
62
62
  }
63
- .c-signature .signature-canvas-wrapper .canvas-placeholder[data-v-fbc647a9] {
63
+ .c-signature .signature-canvas-wrapper .canvas-placeholder[data-v-1c733bfe] {
64
64
  position: absolute;
65
65
  top: 50%;
66
66
  left: 50%;
@@ -70,10 +70,10 @@
70
70
  pointer-events: none;
71
71
  user-select: none;
72
72
  }
73
- .c-signature .signature-actions[data-v-fbc647a9] {
73
+ .c-signature .signature-actions[data-v-1c733bfe] {
74
74
  display: flex;
75
75
  justify-content: flex-end;
76
76
  gap: 8px;
77
77
  }
78
78
 
79
- /*# sourceMappingURL=C_Signature-PN4GOLRX.css.map*/
79
+ /*# sourceMappingURL=C_Signature-B5fFz6RD.css.map*/