@robot-admin/naive-ui-components 0.10.2 → 0.11.0

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 (652) hide show
  1. package/CHANGELOG.md +111 -94
  2. package/LICENSE +21 -21
  3. package/README.md +463 -315
  4. package/README_EN.md +404 -0
  5. package/SECURITY.md +23 -0
  6. package/dist/C_ActionBar.cjs +1 -1
  7. package/dist/C_ActionBar.css +46 -48
  8. package/dist/C_ActionBar.d.cts +1 -1
  9. package/dist/C_ActionBar.js +1 -1
  10. package/dist/C_ActionBar2.cjs +1 -0
  11. package/dist/C_ActionBar2.js +1 -2
  12. package/dist/C_AntV.cjs +1 -1
  13. package/dist/C_AntV.css +3 -3
  14. package/dist/C_AntV.d.cts +1 -1
  15. package/dist/C_AntV.js +1 -1
  16. package/dist/C_AntV2.cjs +4 -0
  17. package/dist/C_AntV2.js +3 -4
  18. package/dist/C_AudioPlayer.cjs +1 -1
  19. package/dist/C_AudioPlayer.css +15 -7
  20. package/dist/C_AudioPlayer.d.cts +1 -1
  21. package/dist/C_AudioPlayer.js +1 -1
  22. package/dist/C_AudioPlayer2.cjs +1 -0
  23. package/dist/C_AudioPlayer2.js +1 -2
  24. package/dist/C_AvatarGroup.cjs +1 -1
  25. package/dist/C_AvatarGroup.css +15 -7
  26. package/dist/C_AvatarGroup.d.cts +1 -1
  27. package/dist/C_AvatarGroup2.cjs +1 -0
  28. package/dist/C_AvatarGroup2.js +1 -2
  29. package/dist/C_Barcode.cjs +1 -1
  30. package/dist/C_Barcode.css +0 -2
  31. package/dist/C_Barcode.d.cts +1 -1
  32. package/dist/C_Barcode2.cjs +1 -0
  33. package/dist/C_Barcode2.js +1 -2
  34. package/dist/C_Breadcrumb.cjs +1 -1
  35. package/dist/C_Breadcrumb.css +0 -2
  36. package/dist/C_Breadcrumb.d.cts +2 -2
  37. package/dist/C_Breadcrumb.d.ts +1 -1
  38. package/dist/C_Breadcrumb.js +1 -1
  39. package/dist/C_Breadcrumb2.cjs +1 -0
  40. package/dist/C_Breadcrumb2.js +1 -2
  41. package/dist/C_Captcha.cjs +1 -1
  42. package/dist/C_Captcha.css +46 -21
  43. package/dist/C_Captcha.d.cts +3 -2
  44. package/dist/C_Captcha.d.ts +3 -2
  45. package/dist/C_Captcha.js +1 -1
  46. package/dist/C_Captcha2.cjs +1 -0
  47. package/dist/C_Captcha2.js +1 -2
  48. package/dist/C_Cascade.cjs +1 -1
  49. package/dist/C_Cascade.css +0 -2
  50. package/dist/C_Cascade.d.cts +1 -1
  51. package/dist/C_Cascade.d.ts +1 -1
  52. package/dist/C_Cascade2.cjs +1 -0
  53. package/dist/C_Cascade2.js +1 -2
  54. package/dist/C_Chat.cjs +1 -1
  55. package/dist/C_Chat.css +0 -2
  56. package/dist/C_Chat.d.cts +1 -1
  57. package/dist/C_Chat.d.ts +1 -1
  58. package/dist/C_Chat.js +1 -1
  59. package/dist/C_Chat2.cjs +1 -0
  60. package/dist/C_Chat2.js +1 -2
  61. package/dist/C_City.cjs +1 -1
  62. package/dist/C_City.css +28 -30
  63. package/dist/C_City.d.cts +1 -1
  64. package/dist/C_City.d.ts +1 -1
  65. package/dist/C_City2.cjs +1 -0
  66. package/dist/C_City2.js +1 -2
  67. package/dist/C_Code.cjs +1 -1
  68. package/dist/C_Code.css +241 -4
  69. package/dist/C_Code.d.cts +1 -1
  70. package/dist/C_Code.d.ts +1 -1
  71. package/dist/C_Code.js +1 -1
  72. package/dist/C_Code2.cjs +1 -0
  73. package/dist/C_Code2.js +1 -2
  74. package/dist/C_CollapsePanel.cjs +1 -1
  75. package/dist/C_CollapsePanel.css +12 -6
  76. package/dist/C_CollapsePanel.d.cts +1 -1
  77. package/dist/C_CollapsePanel.js +1 -1
  78. package/dist/C_CollapsePanel2.cjs +1 -0
  79. package/dist/C_CollapsePanel2.js +1 -2
  80. package/dist/C_ContextMenu.cjs +1 -1
  81. package/dist/C_ContextMenu.css +16 -18
  82. package/dist/C_ContextMenu.d.cts +1 -1
  83. package/dist/C_ContextMenu.d.ts +1 -1
  84. package/dist/C_ContextMenu.js +1 -1
  85. package/dist/C_ContextMenu2.cjs +1 -0
  86. package/dist/C_ContextMenu2.js +1 -2
  87. package/dist/C_Cron.cjs +1 -1
  88. package/dist/C_Cron.css +18 -8
  89. package/dist/C_Cron.d.cts +1 -1
  90. package/dist/C_Cron.js +1 -1
  91. package/dist/C_Cron2.cjs +1 -0
  92. package/dist/C_Cron2.js +1 -2
  93. package/dist/C_Date.cjs +1 -1
  94. package/dist/C_Date.css +1 -0
  95. package/dist/C_Date.d.cts +2 -2
  96. package/dist/C_Date.d.ts +2 -2
  97. package/dist/C_Date2.cjs +1 -0
  98. package/dist/C_Date2.js +1 -2
  99. package/dist/C_Draggable.cjs +1 -1
  100. package/dist/C_Draggable.css +9 -5
  101. package/dist/C_Draggable.d.cts +1 -1
  102. package/dist/C_Draggable2.cjs +1 -0
  103. package/dist/C_Draggable2.js +1 -2
  104. package/dist/C_Editor.cjs +1 -1
  105. package/dist/C_Editor.css +80 -67
  106. package/dist/C_Editor.d.cts +1 -1
  107. package/dist/C_Editor.d.ts +1 -1
  108. package/dist/C_Editor2.cjs +1 -0
  109. package/dist/C_Editor2.js +1 -2
  110. package/dist/C_FilePreview.cjs +1 -1
  111. package/dist/C_FilePreview.css +0 -2
  112. package/dist/C_FilePreview.d.cts +1 -1
  113. package/dist/C_FilePreview.js +1 -1
  114. package/dist/C_FilePreview2.cjs +1 -0
  115. package/dist/C_FilePreview2.js +1 -2
  116. package/dist/C_Form.base.css +980 -0
  117. package/dist/C_Form.cjs +1 -1
  118. package/dist/C_Form.css +256 -155
  119. package/dist/C_Form.d.cts +2 -2
  120. package/dist/C_Form.d.ts +2 -2
  121. package/dist/C_Form.js +1 -1
  122. package/dist/C_Form2.cjs +1 -0
  123. package/dist/C_Form2.js +1 -2
  124. package/dist/C_FormSearch.cjs +1 -1
  125. package/dist/C_FormSearch.css +47 -47
  126. package/dist/C_FormSearch.d.cts +2 -2
  127. package/dist/C_FormSearch.d.ts +2 -2
  128. package/dist/C_FormSearch2.cjs +1 -0
  129. package/dist/C_FormSearch2.js +1 -2
  130. package/dist/C_FormulaEditor.cjs +1 -1
  131. package/dist/C_FormulaEditor.css +64 -38
  132. package/dist/C_FormulaEditor.d.cts +1 -1
  133. package/dist/C_FormulaEditor.js +1 -1
  134. package/dist/C_FormulaEditor2.cjs +2 -0
  135. package/dist/C_FormulaEditor2.js +2 -2
  136. package/dist/C_FullCalendar.cjs +1 -1
  137. package/dist/C_FullCalendar.css +0 -2
  138. package/dist/C_FullCalendar.d.cts +1 -1
  139. package/dist/C_FullCalendar2.cjs +1 -0
  140. package/dist/C_FullCalendar2.js +1 -2
  141. package/dist/C_GlobalSearch.cjs +1 -1
  142. package/dist/C_GlobalSearch.css +111 -113
  143. package/dist/C_GlobalSearch.d.cts +1 -1
  144. package/dist/C_GlobalSearch2.cjs +1 -0
  145. package/dist/C_GlobalSearch2.js +1 -2
  146. package/dist/C_Guide.cjs +1 -1
  147. package/dist/C_Guide.css +1 -0
  148. package/dist/C_Guide.d.cts +1 -1
  149. package/dist/C_Guide.d.ts +1 -1
  150. package/dist/C_Guide.js +1 -1
  151. package/dist/C_Guide2.cjs +1 -0
  152. package/dist/C_Guide2.js +1 -2
  153. package/dist/C_Icon.cjs +1 -1
  154. package/dist/C_Icon.css +58 -0
  155. package/dist/C_Icon.d.cts +1 -1
  156. package/dist/C_Icon.d.ts +1 -1
  157. package/dist/C_Icon2.cjs +1 -0
  158. package/dist/C_Icon2.js +1 -2
  159. package/dist/C_ImageCropper.cjs +1 -1
  160. package/dist/C_ImageCropper.css +0 -2
  161. package/dist/C_ImageCropper.d.cts +1 -1
  162. package/dist/C_ImageCropper.js +1 -1
  163. package/dist/C_ImageCropper2.cjs +1 -0
  164. package/dist/C_ImageCropper2.js +1 -2
  165. package/dist/C_Language.cjs +1 -1
  166. package/dist/C_Language.css +1 -0
  167. package/dist/C_Language.d.cts +1 -1
  168. package/dist/C_Language.d.ts +1 -1
  169. package/dist/C_Language.js +1 -1
  170. package/dist/C_Language2.cjs +1 -0
  171. package/dist/C_Language2.js +1 -2
  172. package/dist/C_Login.cjs +1 -1
  173. package/dist/C_Login.css +92 -76
  174. package/dist/C_Login.d.cts +1 -1
  175. package/dist/C_Login.d.ts +1 -1
  176. package/dist/C_Login.js +1 -1
  177. package/dist/C_Login2.cjs +1 -0
  178. package/dist/C_Login2.js +1 -2
  179. package/dist/C_Map.cjs +1 -1
  180. package/dist/C_Map.css +665 -5
  181. package/dist/C_Map.d.cts +1 -1
  182. package/dist/C_Map2.cjs +1 -0
  183. package/dist/C_Map2.js +1 -2
  184. package/dist/C_Markdown.cjs +1 -1
  185. package/dist/C_Markdown.css +940 -35
  186. package/dist/C_Markdown.d.cts +1 -1
  187. package/dist/C_Markdown.d.ts +1 -1
  188. package/dist/C_Markdown2.cjs +1 -0
  189. package/dist/C_Markdown2.js +1 -2
  190. package/dist/C_Menu.cjs +1 -1
  191. package/dist/C_Menu.css +1 -0
  192. package/dist/C_Menu.d.cts +3 -3
  193. package/dist/C_Menu.d.ts +3 -3
  194. package/dist/C_Menu2.cjs +1 -0
  195. package/dist/C_Menu2.js +1 -2
  196. package/dist/C_NotificationCenter.cjs +1 -1
  197. package/dist/C_NotificationCenter.css +95 -47
  198. package/dist/C_NotificationCenter.d.cts +1 -1
  199. package/dist/C_NotificationCenter.js +1 -1
  200. package/dist/C_NotificationCenter2.cjs +1 -0
  201. package/dist/C_NotificationCenter2.js +1 -2
  202. package/dist/C_OrgChart.cjs +1 -1
  203. package/dist/C_OrgChart.css +6 -4
  204. package/dist/C_OrgChart.d.cts +1 -1
  205. package/dist/C_OrgChart.d.ts +1 -1
  206. package/dist/C_OrgChart2.cjs +1 -0
  207. package/dist/C_OrgChart2.js +1 -2
  208. package/dist/C_Progress.cjs +1 -1
  209. package/dist/C_Progress.css +1 -0
  210. package/dist/C_Progress.d.cts +1 -1
  211. package/dist/C_Progress.d.ts +1 -1
  212. package/dist/C_Progress2.cjs +1 -0
  213. package/dist/C_Progress2.js +1 -2
  214. package/dist/C_QRCode.cjs +1 -1
  215. package/dist/C_QRCode.css +8 -10
  216. package/dist/C_QRCode.d.cts +1 -1
  217. package/dist/C_QRCode2.cjs +1 -0
  218. package/dist/C_QRCode2.js +1 -2
  219. package/dist/C_Signature.cjs +1 -1
  220. package/dist/C_Signature.css +0 -2
  221. package/dist/C_Signature.d.cts +1 -1
  222. package/dist/C_Signature.js +1 -1
  223. package/dist/C_Signature2.cjs +1 -0
  224. package/dist/C_Signature2.js +1 -2
  225. package/dist/C_Skeleton.cjs +1 -1
  226. package/dist/C_Skeleton.css +0 -2
  227. package/dist/C_Skeleton.d.cts +1 -1
  228. package/dist/C_Skeleton.d.ts +1 -1
  229. package/dist/C_Skeleton2.cjs +1 -0
  230. package/dist/C_Skeleton2.js +1 -2
  231. package/dist/C_SplitPane.cjs +1 -1
  232. package/dist/C_SplitPane.css +27 -11
  233. package/dist/C_SplitPane.d.cts +1 -1
  234. package/dist/C_SplitPane.js +1 -1
  235. package/dist/C_SplitPane2.cjs +1 -0
  236. package/dist/C_SplitPane2.js +1 -2
  237. package/dist/C_Steps.cjs +1 -1
  238. package/dist/C_Steps.css +37 -39
  239. package/dist/C_Steps.d.cts +1 -1
  240. package/dist/C_Steps.d.ts +1 -1
  241. package/dist/C_Steps2.cjs +1 -0
  242. package/dist/C_Steps2.js +1 -2
  243. package/dist/C_Table.base.css +1588 -0
  244. package/dist/C_Table.cjs +1 -1
  245. package/dist/C_Table.css +1202 -112
  246. package/dist/C_Table.d.cts +2 -2
  247. package/dist/C_Table.d.ts +11 -2
  248. package/dist/C_Table.js +1 -1
  249. package/dist/C_TagsView.cjs +1 -1
  250. package/dist/C_TagsView.css +44 -40
  251. package/dist/C_TagsView.d.cts +2 -2
  252. package/dist/C_TagsView.d.ts +2 -2
  253. package/dist/C_TagsView.js +1 -1
  254. package/dist/C_TagsView2.cjs +1 -0
  255. package/dist/C_TagsView2.js +1 -2
  256. package/dist/C_Theme.cjs +1 -1
  257. package/dist/C_Theme.css +1 -0
  258. package/dist/C_Theme.d.cts +1 -1
  259. package/dist/C_Theme.d.ts +1 -1
  260. package/dist/C_Theme.js +1 -1
  261. package/dist/C_Theme2.cjs +1 -0
  262. package/dist/C_Theme2.js +1 -2
  263. package/dist/C_Time.cjs +1 -1
  264. package/dist/C_Time.css +0 -2
  265. package/dist/C_Time.d.cts +2 -2
  266. package/dist/C_Time.d.ts +2 -2
  267. package/dist/C_Time2.cjs +1 -0
  268. package/dist/C_Time2.js +1 -2
  269. package/dist/C_Timeline.cjs +1 -1
  270. package/dist/C_Timeline.css +44 -46
  271. package/dist/C_Timeline.d.cts +1 -1
  272. package/dist/C_Timeline.js +1 -1
  273. package/dist/C_Timeline2.cjs +1 -0
  274. package/dist/C_Timeline2.js +1 -2
  275. package/dist/C_Transfer.cjs +1 -1
  276. package/dist/C_Transfer.css +21 -9
  277. package/dist/C_Transfer.d.cts +1 -1
  278. package/dist/C_Transfer.js +1 -1
  279. package/dist/C_Transfer2.cjs +1 -0
  280. package/dist/C_Transfer2.js +1 -2
  281. package/dist/C_Tree.cjs +1 -1
  282. package/dist/C_Tree.css +0 -2
  283. package/dist/C_Tree.d.cts +1 -1
  284. package/dist/C_Tree.js +1 -1
  285. package/dist/C_Tree2.cjs +1 -0
  286. package/dist/C_Tree2.js +1 -2
  287. package/dist/C_Upload.cjs +1 -1
  288. package/dist/C_Upload.css +17 -17
  289. package/dist/C_Upload.d.cts +1 -1
  290. package/dist/C_Upload.js +1 -1
  291. package/dist/C_Upload2.cjs +1 -0
  292. package/dist/C_Upload2.js +1 -25
  293. package/dist/C_VideoPlayer.cjs +1 -1
  294. package/dist/C_VideoPlayer.css +35 -24
  295. package/dist/C_VideoPlayer.d.cts +2 -2
  296. package/dist/C_VideoPlayer.d.ts +2 -2
  297. package/dist/C_VideoPlayer.js +1 -1
  298. package/dist/C_VideoPlayer2.cjs +3 -0
  299. package/dist/C_VideoPlayer2.js +3 -4
  300. package/dist/C_VtableGantt.cjs +1 -1
  301. package/dist/C_VtableGantt.css +15 -7
  302. package/dist/C_VtableGantt.d.cts +1 -1
  303. package/dist/C_VtableGantt.d.ts +1 -1
  304. package/dist/C_VtableGantt.js +1 -1
  305. package/dist/C_VtableGantt2.cjs +1 -0
  306. package/dist/C_VtableGantt2.js +1 -2
  307. package/dist/C_WaterFall.cjs +1 -1
  308. package/dist/C_WaterFall.css +15 -17
  309. package/dist/C_WaterFall.d.cts +1 -1
  310. package/dist/C_WaterFall2.cjs +1 -0
  311. package/dist/C_WaterFall2.js +1 -2
  312. package/dist/C_WorkFlow.cjs +1 -1
  313. package/dist/C_WorkFlow.css +257 -197
  314. package/dist/C_WorkFlow.d.cts +1 -1
  315. package/dist/C_WorkFlow.js +1 -1
  316. package/dist/C_WorkFlow2.cjs +1 -0
  317. package/dist/C_WorkFlow2.js +1 -2
  318. package/dist/city.cjs +1 -0
  319. package/dist/city.js +1 -2
  320. package/dist/config.cjs +1 -0
  321. package/dist/config.d.cts +33 -0
  322. package/dist/config.d.ts +33 -0
  323. package/dist/config.js +1 -0
  324. package/dist/constants.d.cts +272 -0
  325. package/dist/constants.d.ts +2 -3
  326. package/dist/constants2.d.cts +177 -0
  327. package/dist/constants2.d.ts +3 -4
  328. package/dist/constants3.d.cts +479 -0
  329. package/dist/constants3.d.ts +16 -12
  330. package/dist/constants4.d.cts +420 -0
  331. package/dist/constants4.d.ts +27 -37
  332. package/dist/constants5.d.cts +491 -0
  333. package/dist/constants5.d.ts +20 -4
  334. package/dist/data.cjs +1 -0
  335. package/dist/data.d.cts +67 -0
  336. package/dist/data.d.ts +12 -12
  337. package/dist/data.js +1 -0
  338. package/dist/export-helper.cjs +1 -0
  339. package/dist/helpers.cjs +1 -0
  340. package/dist/helpers.js +1 -0
  341. package/dist/html.cjs +1 -0
  342. package/dist/html.js +1 -0
  343. package/dist/images/marker-icon-2x.png +0 -0
  344. package/dist/images/marker-icon.png +0 -0
  345. package/dist/images/marker-shadow.png +0 -0
  346. package/dist/index.cjs +1 -2
  347. package/dist/index.d.cts +60 -99
  348. package/dist/index.d.ts +75 -164
  349. package/dist/index.js +1 -2
  350. package/dist/index.vue.d.cts +79 -0
  351. package/dist/index.vue.d.ts +3 -4
  352. package/dist/index10.vue.d.cts +47 -0
  353. package/dist/index10.vue.d.ts +80 -40
  354. package/dist/index11.vue.d.cts +88 -0
  355. package/dist/index11.vue.d.ts +68 -78
  356. package/dist/index12.vue.d.cts +79 -0
  357. package/dist/index12.vue.d.ts +49 -45
  358. package/dist/index13.vue.d.cts +64 -0
  359. package/dist/index13.vue.d.ts +99 -34
  360. package/dist/index14.vue.d.cts +106 -0
  361. package/dist/index14.vue.d.ts +82 -99
  362. package/dist/index15.vue.d.cts +91 -0
  363. package/dist/index15.vue.d.ts +25 -83
  364. package/dist/index16.vue.d.cts +34 -0
  365. package/dist/index16.vue.d.ts +113 -24
  366. package/dist/index17.vue.d.cts +124 -0
  367. package/dist/index17.vue.d.ts +76 -110
  368. package/dist/index18.vue.d.cts +83 -0
  369. package/dist/index18.vue.d.ts +67 -73
  370. package/dist/index19.vue.d.cts +101 -0
  371. package/dist/index19.vue.d.ts +93 -59
  372. package/dist/index2.vue.d.cts +82 -0
  373. package/dist/index2.vue.d.ts +7 -8
  374. package/dist/index20.vue.d.cts +54 -0
  375. package/dist/index20.vue.d.ts +40 -88
  376. package/dist/index21.vue.d.cts +103 -0
  377. package/dist/index21.vue.d.ts +89 -41
  378. package/dist/index22.vue.d.cts +45 -0
  379. package/dist/index22.vue.d.ts +37 -96
  380. package/dist/index23.vue.d.cts +19 -0
  381. package/dist/index23.vue.d.ts +8 -35
  382. package/dist/{index28.vue.d.ts → index24.vue.d.cts} +4 -5
  383. package/dist/index24.vue.d.ts +650 -86
  384. package/dist/index25.vue.d.cts +96 -0
  385. package/dist/index25.vue.d.ts +86 -10
  386. package/dist/index26.vue.d.cts +111 -0
  387. package/dist/index26.vue.d.ts +4 -5
  388. package/dist/index27.vue.d.cts +80 -0
  389. package/dist/index27.vue.d.ts +2 -3
  390. package/dist/index3.vue.d.cts +87 -0
  391. package/dist/index3.vue.d.ts +4 -5
  392. package/dist/index4.vue.d.cts +37 -0
  393. package/dist/index4.vue.d.ts +6 -7
  394. package/dist/index5.vue.d.cts +133 -0
  395. package/dist/index5.vue.d.ts +2 -3
  396. package/dist/index6.vue.d.cts +29 -0
  397. package/dist/index6.vue.d.ts +25 -38
  398. package/dist/index7.vue.d.cts +32 -0
  399. package/dist/index7.vue.d.ts +117 -23
  400. package/dist/index8.vue.d.cts +127 -0
  401. package/dist/index8.vue.d.ts +17 -111
  402. package/dist/index9.vue.d.cts +34 -0
  403. package/dist/index9.vue.d.ts +38 -26
  404. package/dist/public.d.ts +166 -0
  405. package/dist/resolver.cjs +1 -2
  406. package/dist/resolver.d.cts +6 -4
  407. package/dist/resolver.d.ts +6 -4
  408. package/dist/resolver.js +1 -2
  409. package/dist/storage.cjs +1 -0
  410. package/dist/storage.js +1 -2
  411. package/dist/style.css +9864 -7702
  412. package/dist/types.d.cts +107 -0
  413. package/dist/types.d.ts +52 -102
  414. package/dist/types2.d.cts +58 -0
  415. package/dist/useCalendarEvents.d.cts +150 -0
  416. package/dist/useCalendarEvents.d.ts +3 -4
  417. package/dist/useCollapsePanel.d.cts +133 -0
  418. package/dist/useCollapsePanel.d.ts +2 -3
  419. package/dist/useCropperCore.d.cts +104 -0
  420. package/dist/useCropperCore.d.ts +11 -9
  421. package/dist/useDraggableLayout.d.cts +196 -0
  422. package/dist/useDraggableLayout.d.ts +17 -15
  423. package/dist/useDynamicFormState.d.cts +749 -0
  424. package/dist/useDynamicFormState.d.ts +234 -112
  425. package/dist/useEdgeInteraction.d.cts +324 -0
  426. package/dist/useEdgeInteraction.d.ts +6 -7
  427. package/dist/useFullscreen.d.cts +165 -0
  428. package/dist/useFullscreen.d.ts +1 -2
  429. package/dist/useGlobalSearch.d.cts +110 -0
  430. package/dist/useGlobalSearch.d.ts +17 -9
  431. package/dist/useInfiniteScroll.d.cts +177 -0
  432. package/dist/useInfiniteScroll.d.ts +13 -5
  433. package/dist/useQRCode.d.cts +89 -0
  434. package/dist/useQRCode.d.ts +5 -3
  435. package/dist/useSearchState.d.cts +871 -0
  436. package/dist/useSearchState.d.ts +830 -30
  437. package/dist/useSignatureHistory.d.cts +197 -0
  438. package/dist/useSignatureHistory.d.ts +10 -5
  439. package/dist/useSplitResize.d.cts +157 -0
  440. package/dist/useSplitResize.d.ts +3 -4
  441. package/dist/useTableQuery.cjs +3 -0
  442. package/dist/{useModalEdit.d.ts → useTableQuery.d.cts} +624 -211
  443. package/dist/useTableQuery.d.ts +1721 -0
  444. package/dist/useTableQuery.js +3 -0
  445. package/dist/useTimeSelection.d.cts +116 -0
  446. package/dist/useTimeSelection.d.ts +20 -9
  447. package/dist/useTreeOperations.d.cts +185 -0
  448. package/dist/useTreeOperations.d.ts +13 -11
  449. package/dist/useWorkflowValidation.d.cts +1051 -0
  450. package/dist/useWorkflowValidation.d.ts +62 -63
  451. package/dist/verification.d.cts +58 -0
  452. package/dist/verification.d.ts +58 -0
  453. package/package.json +102 -69
  454. package/dist/C_ActionBar-BAcfOfRw.css.map +0 -1
  455. package/dist/C_ActionBar-DG2HW7t5.css.map +0 -1
  456. package/dist/C_ActionBar.js.map +0 -1
  457. package/dist/C_ActionBar2.js.map +0 -1
  458. package/dist/C_AntV-D_jTK8oZ.css.map +0 -1
  459. package/dist/C_AntV-DanTAq22.css.map +0 -1
  460. package/dist/C_AntV.js.map +0 -1
  461. package/dist/C_AntV2.js.map +0 -1
  462. package/dist/C_AudioPlayer-BnYIJXPD.css.map +0 -1
  463. package/dist/C_AudioPlayer-Cj4lUdZo.css.map +0 -1
  464. package/dist/C_AudioPlayer.js.map +0 -1
  465. package/dist/C_AudioPlayer2.js.map +0 -1
  466. package/dist/C_AvatarGroup-B9d-GJ9c.css.map +0 -1
  467. package/dist/C_AvatarGroup-D3PwsKME.css.map +0 -1
  468. package/dist/C_AvatarGroup.js.map +0 -1
  469. package/dist/C_AvatarGroup2.js.map +0 -1
  470. package/dist/C_Barcode-CAU2mFcx.css.map +0 -1
  471. package/dist/C_Barcode-D2oJaEg3.css.map +0 -1
  472. package/dist/C_Barcode.js.map +0 -1
  473. package/dist/C_Barcode2.js.map +0 -1
  474. package/dist/C_Breadcrumb-BiH0d9AI.css.map +0 -1
  475. package/dist/C_Breadcrumb-DOcLt9uX.css.map +0 -1
  476. package/dist/C_Breadcrumb.js.map +0 -1
  477. package/dist/C_Breadcrumb2.js.map +0 -1
  478. package/dist/C_Captcha-B3yrtG7t.css.map +0 -1
  479. package/dist/C_Captcha-D4hDdWDu.css.map +0 -1
  480. package/dist/C_Captcha.js.map +0 -1
  481. package/dist/C_Captcha2.js.map +0 -1
  482. package/dist/C_Cascade-CmCrLVft.css.map +0 -1
  483. package/dist/C_Cascade-U6A5AJJb.css.map +0 -1
  484. package/dist/C_Cascade.js.map +0 -1
  485. package/dist/C_Cascade2.js.map +0 -1
  486. package/dist/C_Chat-DeUv6uuI.css.map +0 -1
  487. package/dist/C_Chat-DwatUQqu.css.map +0 -1
  488. package/dist/C_Chat.js.map +0 -1
  489. package/dist/C_Chat2.js.map +0 -1
  490. package/dist/C_City-DdkX6u64.css.map +0 -1
  491. package/dist/C_City-iP-dIvui.css.map +0 -1
  492. package/dist/C_City.js.map +0 -1
  493. package/dist/C_City2.js.map +0 -1
  494. package/dist/C_Code-BWmJMNS7.css.map +0 -1
  495. package/dist/C_Code-k14vjgVl.css.map +0 -1
  496. package/dist/C_Code.js.map +0 -1
  497. package/dist/C_Code2.js.map +0 -1
  498. package/dist/C_CollapsePanel-BSKcWSmY.css.map +0 -1
  499. package/dist/C_CollapsePanel-DRvRq8tB.css.map +0 -1
  500. package/dist/C_CollapsePanel.js.map +0 -1
  501. package/dist/C_CollapsePanel2.js.map +0 -1
  502. package/dist/C_ContextMenu-C9iuxG2n.css.map +0 -1
  503. package/dist/C_ContextMenu-CD0iaSju.css.map +0 -1
  504. package/dist/C_ContextMenu.js.map +0 -1
  505. package/dist/C_ContextMenu2.js.map +0 -1
  506. package/dist/C_Cron-BIQ2By9v.css.map +0 -1
  507. package/dist/C_Cron-BNSAGD6A.css.map +0 -1
  508. package/dist/C_Cron.js.map +0 -1
  509. package/dist/C_Cron2.js.map +0 -1
  510. package/dist/C_Date.js.map +0 -1
  511. package/dist/C_Date2.js.map +0 -1
  512. package/dist/C_Draggable-BDAbk4s5.css.map +0 -1
  513. package/dist/C_Draggable-UhfDLXop.css.map +0 -1
  514. package/dist/C_Draggable.js.map +0 -1
  515. package/dist/C_Draggable2.js.map +0 -1
  516. package/dist/C_Editor-CZOaChru.css.map +0 -1
  517. package/dist/C_Editor-kJAQq5z6.css.map +0 -1
  518. package/dist/C_Editor.js.map +0 -1
  519. package/dist/C_Editor2.js.map +0 -1
  520. package/dist/C_FilePreview-Bs_omgJS.css.map +0 -1
  521. package/dist/C_FilePreview-DbwoyF2j.css.map +0 -1
  522. package/dist/C_FilePreview.js.map +0 -1
  523. package/dist/C_FilePreview2.js.map +0 -1
  524. package/dist/C_Form-B_2ql62V.css.map +0 -1
  525. package/dist/C_Form-CX-7xsz3.css.map +0 -1
  526. package/dist/C_Form.js.map +0 -1
  527. package/dist/C_Form2.js.map +0 -1
  528. package/dist/C_FormSearch-C3F8peAY.css.map +0 -1
  529. package/dist/C_FormSearch-qW56bJPo.css.map +0 -1
  530. package/dist/C_FormSearch.js.map +0 -1
  531. package/dist/C_FormSearch2.js.map +0 -1
  532. package/dist/C_FormulaEditor-ChOvDbsZ.css.map +0 -1
  533. package/dist/C_FormulaEditor-mfiIUDY4.css.map +0 -1
  534. package/dist/C_FormulaEditor.js.map +0 -1
  535. package/dist/C_FormulaEditor2.js.map +0 -1
  536. package/dist/C_FullCalendar-C2nsqrgS.css.map +0 -1
  537. package/dist/C_FullCalendar-DdFtXVhy.css.map +0 -1
  538. package/dist/C_FullCalendar.js.map +0 -1
  539. package/dist/C_FullCalendar2.js.map +0 -1
  540. package/dist/C_GlobalSearch-Dq4Wo01K.css.map +0 -1
  541. package/dist/C_GlobalSearch-RB7J43gu.css.map +0 -1
  542. package/dist/C_GlobalSearch.js.map +0 -1
  543. package/dist/C_GlobalSearch2.js.map +0 -1
  544. package/dist/C_Guide.js.map +0 -1
  545. package/dist/C_Guide2.js.map +0 -1
  546. package/dist/C_Icon.js.map +0 -1
  547. package/dist/C_Icon2.js.map +0 -1
  548. package/dist/C_ImageCropper-CdTX2nxU.css.map +0 -1
  549. package/dist/C_ImageCropper-ilOqPklJ.css.map +0 -1
  550. package/dist/C_ImageCropper.js.map +0 -1
  551. package/dist/C_ImageCropper2.js.map +0 -1
  552. package/dist/C_Language.js.map +0 -1
  553. package/dist/C_Language2.js.map +0 -1
  554. package/dist/C_Login-BrQBs_m4.css.map +0 -1
  555. package/dist/C_Login-xMI1_ojE.css.map +0 -1
  556. package/dist/C_Login.js.map +0 -1
  557. package/dist/C_Login2.js.map +0 -1
  558. package/dist/C_Map-CWMMN58_.css.map +0 -1
  559. package/dist/C_Map-xSR2H-9o.css.map +0 -1
  560. package/dist/C_Map.js.map +0 -1
  561. package/dist/C_Map2.js.map +0 -1
  562. package/dist/C_Markdown-C7lTVJ1S.css.map +0 -1
  563. package/dist/C_Markdown-CZDm_baQ.css.map +0 -1
  564. package/dist/C_Markdown.js.map +0 -1
  565. package/dist/C_Markdown2.js.map +0 -1
  566. package/dist/C_Menu.js.map +0 -1
  567. package/dist/C_Menu2.js.map +0 -1
  568. package/dist/C_NotificationCenter-D7GGGWg7.css.map +0 -1
  569. package/dist/C_NotificationCenter-SSmeHA45.css.map +0 -1
  570. package/dist/C_NotificationCenter.js.map +0 -1
  571. package/dist/C_NotificationCenter2.js.map +0 -1
  572. package/dist/C_OrgChart-BXEp4i4w.css.map +0 -1
  573. package/dist/C_OrgChart-DqBufOv5.css.map +0 -1
  574. package/dist/C_OrgChart.js.map +0 -1
  575. package/dist/C_OrgChart2.js.map +0 -1
  576. package/dist/C_Progress.js.map +0 -1
  577. package/dist/C_Progress2.js.map +0 -1
  578. package/dist/C_QRCode-B_1lHUdx.css.map +0 -1
  579. package/dist/C_QRCode-CuQRYu0s.css.map +0 -1
  580. package/dist/C_QRCode.js.map +0 -1
  581. package/dist/C_QRCode2.js.map +0 -1
  582. package/dist/C_Signature-Bp-RBpAl.css.map +0 -1
  583. package/dist/C_Signature-Cb2VW1ok.css.map +0 -1
  584. package/dist/C_Signature.js.map +0 -1
  585. package/dist/C_Signature2.js.map +0 -1
  586. package/dist/C_Skeleton-BJoFYwrF.css.map +0 -1
  587. package/dist/C_Skeleton-Djsjw8XY.css.map +0 -1
  588. package/dist/C_Skeleton.js.map +0 -1
  589. package/dist/C_Skeleton2.js.map +0 -1
  590. package/dist/C_SplitPane-CgGWYsRE.css.map +0 -1
  591. package/dist/C_SplitPane-DGf6WEeR.css.map +0 -1
  592. package/dist/C_SplitPane.js.map +0 -1
  593. package/dist/C_SplitPane2.js.map +0 -1
  594. package/dist/C_Steps-27Exh7PM.css.map +0 -1
  595. package/dist/C_Steps-DU9ZsFrs.css.map +0 -1
  596. package/dist/C_Steps.js.map +0 -1
  597. package/dist/C_Steps2.js.map +0 -1
  598. package/dist/C_Table--kbQaaBv.css.map +0 -1
  599. package/dist/C_Table-D631kdXC.css.map +0 -1
  600. package/dist/C_Table.js.map +0 -1
  601. package/dist/C_Table2.js +0 -4
  602. package/dist/C_Table2.js.map +0 -1
  603. package/dist/C_TagsView-DtGtYhBH.css.map +0 -1
  604. package/dist/C_TagsView-s1dnSJAV.css.map +0 -1
  605. package/dist/C_TagsView.js.map +0 -1
  606. package/dist/C_TagsView2.js.map +0 -1
  607. package/dist/C_Theme.js.map +0 -1
  608. package/dist/C_Theme2.js.map +0 -1
  609. package/dist/C_Time-BQ9PGy8B.css.map +0 -1
  610. package/dist/C_Time-CO73krC6.css.map +0 -1
  611. package/dist/C_Time.js.map +0 -1
  612. package/dist/C_Time2.js.map +0 -1
  613. package/dist/C_Timeline-DdESmqwL.css.map +0 -1
  614. package/dist/C_Timeline-irQcO-b7.css.map +0 -1
  615. package/dist/C_Timeline.js.map +0 -1
  616. package/dist/C_Timeline2.js.map +0 -1
  617. package/dist/C_Transfer-11y3k-WD.css.map +0 -1
  618. package/dist/C_Transfer-EzdHzZNv.css.map +0 -1
  619. package/dist/C_Transfer.js.map +0 -1
  620. package/dist/C_Transfer2.js.map +0 -1
  621. package/dist/C_Tree-CsXgGfhn.css.map +0 -1
  622. package/dist/C_Tree-P7eRpnOa.css.map +0 -1
  623. package/dist/C_Tree.js.map +0 -1
  624. package/dist/C_Tree2.js.map +0 -1
  625. package/dist/C_Upload-CHjiVVh7.css.map +0 -1
  626. package/dist/C_Upload-DE3OLsZD.css.map +0 -1
  627. package/dist/C_Upload.js.map +0 -1
  628. package/dist/C_Upload2.js.map +0 -1
  629. package/dist/C_VideoPlayer-CnaNOFtW.css.map +0 -1
  630. package/dist/C_VideoPlayer-cnP88zNV.css.map +0 -1
  631. package/dist/C_VideoPlayer.js.map +0 -1
  632. package/dist/C_VideoPlayer2.js.map +0 -1
  633. package/dist/C_VtableGantt-CZlJgvpC.css.map +0 -1
  634. package/dist/C_VtableGantt-DKfQkql0.css.map +0 -1
  635. package/dist/C_VtableGantt.js.map +0 -1
  636. package/dist/C_VtableGantt2.js.map +0 -1
  637. package/dist/C_WaterFall-BJ_39ext.css.map +0 -1
  638. package/dist/C_WaterFall-cYc1vntE.css.map +0 -1
  639. package/dist/C_WaterFall.js.map +0 -1
  640. package/dist/C_WaterFall2.js.map +0 -1
  641. package/dist/C_WorkFlow-BFzRGGhJ.css.map +0 -1
  642. package/dist/C_WorkFlow-DSyCOvRp.css.map +0 -1
  643. package/dist/C_WorkFlow.js.map +0 -1
  644. package/dist/C_WorkFlow2.js.map +0 -1
  645. package/dist/city.js.map +0 -1
  646. package/dist/index.cjs.map +0 -1
  647. package/dist/index.js.map +0 -1
  648. package/dist/index2.d.ts +0 -120
  649. package/dist/resolver.cjs.map +0 -1
  650. package/dist/resolver.js.map +0 -1
  651. package/dist/storage.js.map +0 -1
  652. /package/dist/{chunk.js → chunk.cjs} +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"file":"C_ImageCropper.js","names":["ratioPresets","currentRatio","$emit","circular","previewData"],"sources":["../src/components/C_ImageCropper/composables/useCropperCore.ts","../src/components/C_ImageCropper/components/CropperToolbar.vue","../src/components/C_ImageCropper/components/CropperToolbar.vue","../src/components/C_ImageCropper/components/CropperPreview.vue","../src/components/C_ImageCropper/components/CropperPreview.vue","../src/components/C_ImageCropper/index.vue","../src/components/C_ImageCropper/index.vue"],"sourcesContent":["import { ref } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { CropOutputFormat, CropResult } from \"../types\";\r\n\r\ninterface UseCropperCoreOptions {\r\n format?: Ref<CropOutputFormat>;\r\n quality?: Ref<number>;\r\n maxWidth?: Ref<number>;\r\n maxHeight?: Ref<number>;\r\n}\r\n\r\nexport function useCropperCore(options: UseCropperCoreOptions = {}) {\r\n const cropperRef = ref<any>(null);\r\n\r\n function rotateLeft() {\r\n cropperRef.value?.rotateLeft();\r\n }\r\n\r\n function rotateRight() {\r\n cropperRef.value?.rotateRight();\r\n }\r\n\r\n function rotate(angle: number) {\r\n const steps = Math.round(angle / 90);\r\n const fn = steps > 0 ? rotateRight : rotateLeft;\r\n for (let i = 0; i < Math.abs(steps); i++) fn();\r\n }\r\n\r\n function zoom(scale: number) {\r\n cropperRef.value?.changeScale(scale > 0 ? 1 : -1);\r\n }\r\n\r\n function flipX() {\r\n const el = cropperRef.value?.$refs?.img;\r\n if (!el) return;\r\n const current = el.style.transform || \"\";\r\n if (current.includes(\"scaleX(-1)\")) {\r\n el.style.transform = current.replace(\"scaleX(-1)\", \"scaleX(1)\");\r\n } else {\r\n el.style.transform =\r\n current.replace(/scaleX\\([^)]*\\)/, \"\") + \" scaleX(-1)\";\r\n }\r\n }\r\n\r\n function flipY() {\r\n const el = cropperRef.value?.$refs?.img;\r\n if (!el) return;\r\n const current = el.style.transform || \"\";\r\n if (current.includes(\"scaleY(-1)\")) {\r\n el.style.transform = current.replace(\"scaleY(-1)\", \"scaleY(1)\");\r\n } else {\r\n el.style.transform =\r\n current.replace(/scaleY\\([^)]*\\)/, \"\") + \" scaleY(-1)\";\r\n }\r\n }\r\n\r\n function reset() {\r\n cropperRef.value?.refresh();\r\n }\r\n\r\n function constrainSize(w: number, h: number) {\r\n let ow = w;\r\n let oh = h;\r\n const maxW = options.maxWidth?.value ?? 0;\r\n const maxH = options.maxHeight?.value ?? 0;\r\n\r\n if (maxW > 0 && ow > maxW) {\r\n const ratio = maxW / ow;\r\n ow = maxW;\r\n oh = Math.round(oh * ratio);\r\n }\r\n if (maxH > 0 && oh > maxH) {\r\n const ratio = maxH / oh;\r\n oh = maxH;\r\n ow = Math.round(ow * ratio);\r\n }\r\n return { width: ow, height: oh };\r\n }\r\n\r\n function getCropResult(): Promise<CropResult> {\r\n return new Promise((resolve, reject) => {\r\n const cropper = cropperRef.value;\r\n if (!cropper) return reject(new Error(\"Cropper not initialized\"));\r\n\r\n const format = options.format?.value ?? \"png\";\r\n const quality = options.quality?.value ?? 0.92;\r\n const mime =\r\n format === \"jpeg\"\r\n ? \"image/jpeg\"\r\n : format === \"webp\"\r\n ? \"image/webp\"\r\n : \"image/png\";\r\n\r\n cropper.getCropData((base64: string) => {\r\n cropper.getCropBlob((blob: Blob) => {\r\n const img = new Image();\r\n img.onload = () => {\r\n const { width, height } = constrainSize(img.width, img.height);\r\n\r\n if (width !== img.width || height !== img.height) {\r\n const canvas = document.createElement(\"canvas\");\r\n canvas.width = width;\r\n canvas.height = height;\r\n const ctx = canvas.getContext(\"2d\")!;\r\n ctx.drawImage(img, 0, 0, width, height);\r\n const constrainedBase64 = canvas.toDataURL(mime, quality);\r\n canvas.toBlob(\r\n (constrainedBlob) => {\r\n resolve({\r\n base64: constrainedBase64,\r\n blob: constrainedBlob!,\r\n width,\r\n height,\r\n format,\r\n });\r\n },\r\n mime,\r\n format === \"png\" ? undefined : quality,\r\n );\r\n } else {\r\n resolve({\r\n base64,\r\n blob,\r\n width: img.width,\r\n height: img.height,\r\n format,\r\n });\r\n }\r\n };\r\n img.onerror = () => reject(new Error(\"Failed to load crop result\"));\r\n img.src = base64;\r\n });\r\n });\r\n });\r\n }\r\n\r\n return {\r\n cropperRef,\r\n rotate,\r\n rotateLeft,\r\n rotateRight,\r\n zoom,\r\n flipX,\r\n flipY,\r\n reset,\r\n getCropResult,\r\n };\r\n}\r\n","<template>\r\n <div class=\"cropper-toolbar\">\r\n <NButtonGroup size=\"small\">\r\n <NButton\r\n v-for=\"item in ratioPresets\"\r\n :key=\"item.value\"\r\n :type=\"currentRatio === item.value ? 'primary' : 'default'\"\r\n @click=\"$emit('ratio', item.value)\"\r\n >\r\n {{ item.label }}\r\n </NButton>\r\n </NButtonGroup>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('rotate', -90)\">\r\n <template #icon><C_Icon name=\"mdi:rotate-left\" /></template>\r\n </NButton>\r\n </template>\r\n 逆时针旋转 90°\r\n </NTooltip>\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('rotate', 90)\">\r\n <template #icon><C_Icon name=\"mdi:rotate-right\" /></template>\r\n </NButton>\r\n </template>\r\n 顺时针旋转 90°\r\n </NTooltip>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('flipX')\">\r\n <template #icon><C_Icon name=\"mdi:flip-horizontal\" /></template>\r\n </NButton>\r\n </template>\r\n 水平翻转\r\n </NTooltip>\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('flipY')\">\r\n <template #icon><C_Icon name=\"mdi:flip-vertical\" /></template>\r\n </NButton>\r\n </template>\r\n 垂直翻转\r\n </NTooltip>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('zoom', 0.1)\">\r\n <template #icon><C_Icon name=\"mdi:magnify-plus-outline\" /></template>\r\n </NButton>\r\n </template>\r\n 放大\r\n </NTooltip>\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('zoom', -0.1)\">\r\n <template #icon><C_Icon name=\"mdi:magnify-minus-outline\" /></template>\r\n </NButton>\r\n </template>\r\n 缩小\r\n </NTooltip>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('reset')\">\r\n <template #icon><C_Icon name=\"mdi:refresh\" /></template>\r\n </NButton>\r\n </template>\r\n 重置\r\n </NTooltip>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { NButton, NButtonGroup, NDivider, NTooltip } from \"naive-ui\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\nimport type { AspectRatioPreset } from \"../types\";\r\n\r\ndefineProps<{\r\n currentRatio: number;\r\n ratioPresets: AspectRatioPreset[];\r\n}>();\r\n\r\ndefineEmits<{\r\n ratio: [value: number];\r\n rotate: [angle: number];\r\n flipX: [];\r\n flipY: [];\r\n zoom: [scale: number];\r\n reset: [];\r\n}>();\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-toolbar {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 4px;\r\n align-items: center;\r\n padding: 8px 0;\r\n}\r\n</style>\r\n","<template>\r\n <div class=\"cropper-toolbar\">\r\n <NButtonGroup size=\"small\">\r\n <NButton\r\n v-for=\"item in ratioPresets\"\r\n :key=\"item.value\"\r\n :type=\"currentRatio === item.value ? 'primary' : 'default'\"\r\n @click=\"$emit('ratio', item.value)\"\r\n >\r\n {{ item.label }}\r\n </NButton>\r\n </NButtonGroup>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('rotate', -90)\">\r\n <template #icon><C_Icon name=\"mdi:rotate-left\" /></template>\r\n </NButton>\r\n </template>\r\n 逆时针旋转 90°\r\n </NTooltip>\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('rotate', 90)\">\r\n <template #icon><C_Icon name=\"mdi:rotate-right\" /></template>\r\n </NButton>\r\n </template>\r\n 顺时针旋转 90°\r\n </NTooltip>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('flipX')\">\r\n <template #icon><C_Icon name=\"mdi:flip-horizontal\" /></template>\r\n </NButton>\r\n </template>\r\n 水平翻转\r\n </NTooltip>\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('flipY')\">\r\n <template #icon><C_Icon name=\"mdi:flip-vertical\" /></template>\r\n </NButton>\r\n </template>\r\n 垂直翻转\r\n </NTooltip>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('zoom', 0.1)\">\r\n <template #icon><C_Icon name=\"mdi:magnify-plus-outline\" /></template>\r\n </NButton>\r\n </template>\r\n 放大\r\n </NTooltip>\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('zoom', -0.1)\">\r\n <template #icon><C_Icon name=\"mdi:magnify-minus-outline\" /></template>\r\n </NButton>\r\n </template>\r\n 缩小\r\n </NTooltip>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('reset')\">\r\n <template #icon><C_Icon name=\"mdi:refresh\" /></template>\r\n </NButton>\r\n </template>\r\n 重置\r\n </NTooltip>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { NButton, NButtonGroup, NDivider, NTooltip } from \"naive-ui\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\nimport type { AspectRatioPreset } from \"../types\";\r\n\r\ndefineProps<{\r\n currentRatio: number;\r\n ratioPresets: AspectRatioPreset[];\r\n}>();\r\n\r\ndefineEmits<{\r\n ratio: [value: number];\r\n rotate: [angle: number];\r\n flipX: [];\r\n flipY: [];\r\n zoom: [scale: number];\r\n reset: [];\r\n}>();\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-toolbar {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 4px;\r\n align-items: center;\r\n padding: 8px 0;\r\n}\r\n</style>\r\n","<template>\r\n <div class=\"cropper-preview\">\r\n <div class=\"preview-label\">\r\n <C_Icon name=\"mdi:eye-outline\" />\r\n <span>裁剪预览</span>\r\n </div>\r\n\r\n <div\r\n ref=\"mainBoxRef\"\r\n class=\"preview-main\"\r\n :class=\"{ 'preview-main--circular': circular }\"\r\n >\r\n <template v-if=\"hasValidPreview\">\r\n <div class=\"preview-main__viewport\" :style=\"mainViewportStyle\">\r\n <div :style=\"previewData.div\">\r\n <img\r\n :src=\"previewData.url\"\r\n :style=\"previewData.img\"\r\n alt=\"preview\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n <div v-else class=\"preview-empty\">\r\n <C_Icon\r\n name=\"mdi:image-outline\"\r\n style=\"font-size: 32px; opacity: 0.2\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"preview-thumbs\">\r\n <div v-for=\"item in thumbSizes\" :key=\"item.label\" class=\"preview-thumb\">\r\n <div\r\n class=\"preview-thumb__box\"\r\n :class=\"{ 'preview-thumb__box--circular': circular }\"\r\n :style=\"{ width: `${item.size}px`, height: `${item.size}px` }\"\r\n >\r\n <template v-if=\"hasValidPreview\">\r\n <div\r\n class=\"preview-thumb__viewport\"\r\n :style=\"getThumbViewportStyle(item.size)\"\r\n >\r\n <div :style=\"previewData.div\">\r\n <img\r\n :src=\"previewData.url\"\r\n :style=\"previewData.img\"\r\n alt=\"thumb\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n </div>\r\n <span class=\"preview-thumb__label\">{{ item.label }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted, onBeforeUnmount } from \"vue\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\n\r\nconst props = defineProps<{\r\n previewData: any;\r\n circular?: boolean;\r\n}>();\r\n\r\nconst mainBoxRef = ref<HTMLElement | null>(null);\r\nconst mainBoxWidth = ref(200);\r\n\r\nconst thumbSizes = [\r\n { label: \"80px\", size: 80 },\r\n { label: \"48px\", size: 48 },\r\n { label: \"32px\", size: 32 },\r\n];\r\n\r\nconst hasValidPreview = computed(() => {\r\n const d = props.previewData;\r\n return d && d.url && d.w > 0 && d.h > 0;\r\n});\r\n\r\nconst mainViewportStyle = computed(() => {\r\n if (!hasValidPreview.value) return {};\r\n const { w } = props.previewData;\r\n const zoom = mainBoxWidth.value / w;\r\n return { zoom, overflow: \"hidden\" };\r\n});\r\n\r\nfunction getThumbViewportStyle(size: number) {\r\n if (!hasValidPreview.value) return {};\r\n const { w } = props.previewData;\r\n return { zoom: size / w, overflow: \"hidden\" };\r\n}\r\n\r\nlet resizeObserver: ResizeObserver | null = null;\r\n\r\nonMounted(() => {\r\n if (mainBoxRef.value) {\r\n mainBoxWidth.value = mainBoxRef.value.clientWidth;\r\n resizeObserver = new ResizeObserver((entries) => {\r\n requestAnimationFrame(() => {\r\n for (const entry of entries) {\r\n mainBoxWidth.value = entry.contentRect.width;\r\n }\r\n });\r\n });\r\n resizeObserver.observe(mainBoxRef.value);\r\n }\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n resizeObserver?.disconnect();\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-preview {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n\r\n .preview-label {\r\n display: flex;\r\n gap: 6px;\r\n align-items: center;\r\n font-size: 13px;\r\n font-weight: 500;\r\n color: var(--text-color-2);\r\n }\r\n\r\n .preview-main {\r\n width: 100%;\r\n overflow: hidden;\r\n border: 1px solid var(--border-color);\r\n border-radius: 6px;\r\n background:\r\n linear-gradient(45deg, #f0f0f0 25%, transparent 25%),\r\n linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),\r\n linear-gradient(45deg, transparent 75%, #f0f0f0 75%),\r\n linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\r\n background-position:\r\n 0 0,\r\n 0 8px,\r\n 8px -8px,\r\n -8px 0;\r\n background-size: 16px 16px;\r\n\r\n &--circular {\r\n border-radius: 50%;\r\n }\r\n\r\n &__viewport img {\r\n display: block;\r\n max-width: none !important;\r\n }\r\n }\r\n\r\n .preview-empty {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n min-height: 120px;\r\n }\r\n\r\n .preview-thumbs {\r\n display: flex;\r\n gap: 12px;\r\n align-items: flex-end;\r\n justify-content: center;\r\n }\r\n\r\n .preview-thumb {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n align-items: center;\r\n\r\n &__box {\r\n overflow: hidden;\r\n border: 1px solid var(--border-color);\r\n border-radius: 4px;\r\n background: var(--body-color);\r\n\r\n &--circular {\r\n border-radius: 50%;\r\n }\r\n }\r\n\r\n &__viewport img {\r\n display: block;\r\n max-width: none !important;\r\n }\r\n\r\n &__label {\r\n font-size: 11px;\r\n color: var(--text-color-3);\r\n }\r\n }\r\n}\r\n</style>\r\n","<template>\r\n <div class=\"cropper-preview\">\r\n <div class=\"preview-label\">\r\n <C_Icon name=\"mdi:eye-outline\" />\r\n <span>裁剪预览</span>\r\n </div>\r\n\r\n <div\r\n ref=\"mainBoxRef\"\r\n class=\"preview-main\"\r\n :class=\"{ 'preview-main--circular': circular }\"\r\n >\r\n <template v-if=\"hasValidPreview\">\r\n <div class=\"preview-main__viewport\" :style=\"mainViewportStyle\">\r\n <div :style=\"previewData.div\">\r\n <img\r\n :src=\"previewData.url\"\r\n :style=\"previewData.img\"\r\n alt=\"preview\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n <div v-else class=\"preview-empty\">\r\n <C_Icon\r\n name=\"mdi:image-outline\"\r\n style=\"font-size: 32px; opacity: 0.2\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"preview-thumbs\">\r\n <div v-for=\"item in thumbSizes\" :key=\"item.label\" class=\"preview-thumb\">\r\n <div\r\n class=\"preview-thumb__box\"\r\n :class=\"{ 'preview-thumb__box--circular': circular }\"\r\n :style=\"{ width: `${item.size}px`, height: `${item.size}px` }\"\r\n >\r\n <template v-if=\"hasValidPreview\">\r\n <div\r\n class=\"preview-thumb__viewport\"\r\n :style=\"getThumbViewportStyle(item.size)\"\r\n >\r\n <div :style=\"previewData.div\">\r\n <img\r\n :src=\"previewData.url\"\r\n :style=\"previewData.img\"\r\n alt=\"thumb\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n </div>\r\n <span class=\"preview-thumb__label\">{{ item.label }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted, onBeforeUnmount } from \"vue\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\n\r\nconst props = defineProps<{\r\n previewData: any;\r\n circular?: boolean;\r\n}>();\r\n\r\nconst mainBoxRef = ref<HTMLElement | null>(null);\r\nconst mainBoxWidth = ref(200);\r\n\r\nconst thumbSizes = [\r\n { label: \"80px\", size: 80 },\r\n { label: \"48px\", size: 48 },\r\n { label: \"32px\", size: 32 },\r\n];\r\n\r\nconst hasValidPreview = computed(() => {\r\n const d = props.previewData;\r\n return d && d.url && d.w > 0 && d.h > 0;\r\n});\r\n\r\nconst mainViewportStyle = computed(() => {\r\n if (!hasValidPreview.value) return {};\r\n const { w } = props.previewData;\r\n const zoom = mainBoxWidth.value / w;\r\n return { zoom, overflow: \"hidden\" };\r\n});\r\n\r\nfunction getThumbViewportStyle(size: number) {\r\n if (!hasValidPreview.value) return {};\r\n const { w } = props.previewData;\r\n return { zoom: size / w, overflow: \"hidden\" };\r\n}\r\n\r\nlet resizeObserver: ResizeObserver | null = null;\r\n\r\nonMounted(() => {\r\n if (mainBoxRef.value) {\r\n mainBoxWidth.value = mainBoxRef.value.clientWidth;\r\n resizeObserver = new ResizeObserver((entries) => {\r\n requestAnimationFrame(() => {\r\n for (const entry of entries) {\r\n mainBoxWidth.value = entry.contentRect.width;\r\n }\r\n });\r\n });\r\n resizeObserver.observe(mainBoxRef.value);\r\n }\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n resizeObserver?.disconnect();\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-preview {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n\r\n .preview-label {\r\n display: flex;\r\n gap: 6px;\r\n align-items: center;\r\n font-size: 13px;\r\n font-weight: 500;\r\n color: var(--text-color-2);\r\n }\r\n\r\n .preview-main {\r\n width: 100%;\r\n overflow: hidden;\r\n border: 1px solid var(--border-color);\r\n border-radius: 6px;\r\n background:\r\n linear-gradient(45deg, #f0f0f0 25%, transparent 25%),\r\n linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),\r\n linear-gradient(45deg, transparent 75%, #f0f0f0 75%),\r\n linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\r\n background-position:\r\n 0 0,\r\n 0 8px,\r\n 8px -8px,\r\n -8px 0;\r\n background-size: 16px 16px;\r\n\r\n &--circular {\r\n border-radius: 50%;\r\n }\r\n\r\n &__viewport img {\r\n display: block;\r\n max-width: none !important;\r\n }\r\n }\r\n\r\n .preview-empty {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n min-height: 120px;\r\n }\r\n\r\n .preview-thumbs {\r\n display: flex;\r\n gap: 12px;\r\n align-items: flex-end;\r\n justify-content: center;\r\n }\r\n\r\n .preview-thumb {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n align-items: center;\r\n\r\n &__box {\r\n overflow: hidden;\r\n border: 1px solid var(--border-color);\r\n border-radius: 4px;\r\n background: var(--body-color);\r\n\r\n &--circular {\r\n border-radius: 50%;\r\n }\r\n }\r\n\r\n &__viewport img {\r\n display: block;\r\n max-width: none !important;\r\n }\r\n\r\n &__label {\r\n font-size: 11px;\r\n color: var(--text-color-3);\r\n }\r\n }\r\n}\r\n</style>\r\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-02-25\n * @Description: 图片裁剪组件(基于 vue-cropper)\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\n-->\n<template>\n <NModal\n v-if=\"props.modal\"\n v-model:show=\"modalVisible\"\n preset=\"card\"\n :title=\"props.modalTitle || '图片裁剪'\"\n :style=\"{ width: '860px' }\"\n :mask-closable=\"false\"\n :closable=\"true\"\n >\n <div class=\"c-image-cropper__body\">\n <CropperToolbar\n v-if=\"props.showToolbar\"\n :current-ratio=\"currentRatio\"\n :ratio-presets=\"ratioPresets\"\n @ratio=\"handleRatio\"\n @rotate=\"rotate\"\n @flip-x=\"core.flipX\"\n @flip-y=\"core.flipY\"\n @zoom=\"core.zoom\"\n @reset=\"handleReset\"\n />\n <div class=\"c-image-cropper__workspace\">\n <div\n class=\"c-image-cropper__canvas\"\n :style=\"{ height: containerHeight }\"\n >\n <VueCropper\n v-if=\"imgSrc\"\n ref=\"modalCropperRef\"\n :img=\"imgSrc\"\n :output-size=\"props.outputQuality\"\n :output-type=\"vueCropperOutputType\"\n :can-scale=\"false\"\n :auto-crop=\"true\"\n :auto-crop-width=\"autoCropSize.width\"\n :auto-crop-height=\"autoCropSize.height\"\n :fixed=\"isFixed\"\n :fixed-number=\"fixedNumber\"\n :center-box=\"true\"\n :info=\"true\"\n :info-true=\"true\"\n :can-move=\"true\"\n :can-move-box=\"true\"\n :original=\"false\"\n :high=\"true\"\n :full=\"false\"\n :mode=\"'contain'\"\n @real-time=\"handleRealTimePreview\"\n @img-load=\"onImgLoad\"\n />\n <div v-else class=\"c-image-cropper__placeholder\">\n <C_Icon\n name=\"mdi:image-plus-outline\"\n style=\"font-size: 48px; opacity: 0.3\"\n />\n <span>请选择图片</span>\n </div>\n </div>\n <div\n v-if=\"props.showPreview && imgSrc\"\n class=\"c-image-cropper__preview-panel\"\n >\n <CropperPreview\n :preview-data=\"previewData\"\n :circular=\"props.circular\"\n />\n </div>\n </div>\n </div>\n <template #footer>\n <NSpace justify=\"end\">\n <NButton @click=\"handleCancel\">取消</NButton>\n <NButton type=\"primary\" :loading=\"exporting\" @click=\"handleConfirm\"\n >确认裁剪</NButton\n >\n </NSpace>\n </template>\n </NModal>\n\n <div v-else class=\"c-image-cropper\">\n <div class=\"c-image-cropper__body\">\n <CropperToolbar\n v-if=\"props.showToolbar\"\n :current-ratio=\"currentRatio\"\n :ratio-presets=\"ratioPresets\"\n @ratio=\"handleRatio\"\n @rotate=\"rotate\"\n @flip-x=\"core.flipX\"\n @flip-y=\"core.flipY\"\n @zoom=\"core.zoom\"\n @reset=\"handleReset\"\n />\n <div class=\"c-image-cropper__workspace\">\n <div\n class=\"c-image-cropper__canvas\"\n :style=\"{ height: containerHeight }\"\n >\n <VueCropper\n v-if=\"imgSrc\"\n ref=\"inlineCropperRef\"\n :img=\"imgSrc\"\n :output-size=\"props.outputQuality\"\n :output-type=\"vueCropperOutputType\"\n :can-scale=\"false\"\n :auto-crop=\"true\"\n :auto-crop-width=\"autoCropSize.width\"\n :auto-crop-height=\"autoCropSize.height\"\n :fixed=\"isFixed\"\n :fixed-number=\"fixedNumber\"\n :center-box=\"true\"\n :info=\"true\"\n :info-true=\"true\"\n :can-move=\"true\"\n :can-move-box=\"true\"\n :original=\"false\"\n :high=\"true\"\n :full=\"false\"\n :mode=\"'contain'\"\n @real-time=\"handleRealTimePreview\"\n @img-load=\"onImgLoad\"\n />\n <div v-else class=\"c-image-cropper__placeholder\">\n <C_Icon\n name=\"mdi:image-plus-outline\"\n style=\"font-size: 48px; opacity: 0.3\"\n />\n <span>请选择图片</span>\n </div>\n </div>\n <div\n v-if=\"props.showPreview && imgSrc\"\n class=\"c-image-cropper__preview-panel\"\n >\n <CropperPreview\n :preview-data=\"previewData\"\n :circular=\"props.circular\"\n />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch } from \"vue\";\nimport { NModal, NButton, NSpace } from \"naive-ui\";\nimport { VueCropper } from \"vue-cropper\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport type {\n AspectRatioPreset,\n CropOutputFormat,\n ImageCropperExpose,\n ImageCropperProps,\n} from \"./types\";\nimport { useCropperCore } from \"./composables/useCropperCore\";\nimport CropperToolbar from \"./components/CropperToolbar.vue\";\nimport CropperPreview from \"./components/CropperPreview.vue\";\n\ndefineOptions({ name: \"C_ImageCropper\" });\n\nconst props = withDefaults(defineProps<ImageCropperProps>(), {\n src: \"\",\n aspectRatio: 0,\n outputFormat: \"png\",\n outputQuality: 0.92,\n maxOutputWidth: 0,\n maxOutputHeight: 0,\n showPreview: true,\n showToolbar: true,\n circular: false,\n disabled: false,\n height: \"400px\",\n modal: false,\n modalTitle: \"图片裁剪\",\n});\n\nconst emit = defineEmits<{\n crop: [result: any];\n ready: [];\n error: [error: Event];\n confirm: [result: any];\n cancel: [];\n}>();\n\nconst imgSrc = ref(props.src);\nconst currentRatio = ref(props.aspectRatio);\nconst modalVisible = ref(false);\nconst exporting = ref(false);\nconst previewData = ref<any>(null);\n\nconst inlineCropperRef = ref<any>(null);\nconst modalCropperRef = ref<any>(null);\n\nconst activeCropperRef = computed(() =>\n props.modal ? modalCropperRef.value : inlineCropperRef.value,\n);\n\nconst containerHeight = computed(() =>\n typeof props.height === \"number\" ? `${props.height}px` : props.height,\n);\n\nconst vueCropperOutputType = computed(() => {\n const map: Record<CropOutputFormat, string> = {\n png: \"png\",\n jpeg: \"jpeg\",\n webp: \"webp\",\n };\n return map[props.outputFormat as CropOutputFormat] || \"png\";\n});\n\nconst isFixed = computed(() => currentRatio.value > 0);\n\nconst fixedNumber = computed(() => {\n if (currentRatio.value <= 0) return [1, 1];\n if (currentRatio.value === 1) return [1, 1];\n if (Math.abs(currentRatio.value - 16 / 9) < 0.01) return [16, 9];\n if (Math.abs(currentRatio.value - 4 / 3) < 0.01) return [4, 3];\n if (Math.abs(currentRatio.value - 3 / 2) < 0.01) return [3, 2];\n return [Math.round(currentRatio.value * 100), 100];\n});\n\nconst autoCropSize = computed(() => ({\n width: 300,\n height: currentRatio.value > 0 ? 300 / currentRatio.value : 200,\n}));\n\nconst ratioPresets: AspectRatioPreset[] = [\n { label: \"自由\", value: 0 },\n { label: \"1:1\", value: 1 },\n { label: \"16:9\", value: 16 / 9 },\n { label: \"4:3\", value: 4 / 3 },\n { label: \"3:2\", value: 3 / 2 },\n];\n\nconst formatRef = computed(() => props.outputFormat as CropOutputFormat);\nconst qualityRef = computed(() => props.outputQuality);\nconst maxWRef = computed(() => props.maxOutputWidth);\nconst maxHRef = computed(() => props.maxOutputHeight);\n\nconst core = useCropperCore({\n format: formatRef,\n quality: qualityRef,\n maxWidth: maxWRef,\n maxHeight: maxHRef,\n});\n\nwatch(activeCropperRef, (v) => {\n core.cropperRef.value = v;\n});\n\nfunction handleRealTimePreview(data: any) {\n previewData.value = data;\n}\nfunction onImgLoad(status: string) {\n if (status === \"success\") emit(\"ready\");\n}\nfunction rotate(angle: number) {\n core.rotate(angle);\n}\nfunction handleRatio(v: number) {\n currentRatio.value = v;\n}\nfunction handleReset() {\n core.reset();\n}\n\nasync function handleConfirm() {\n exporting.value = true;\n try {\n const result = await core.getCropResult();\n emit(\"confirm\", result);\n emit(\"crop\", result);\n modalVisible.value = false;\n } finally {\n exporting.value = false;\n }\n}\n\nfunction handleCancel() {\n modalVisible.value = false;\n emit(\"cancel\");\n}\n\nfunction loadFile(file: File) {\n const reader = new FileReader();\n reader.onload = (e) => {\n imgSrc.value = e.target?.result as string;\n };\n reader.readAsDataURL(file);\n}\n\nwatch(\n () => props.src,\n (v) => {\n imgSrc.value = v;\n },\n);\nwatch(\n () => props.aspectRatio,\n (v) => {\n currentRatio.value = v;\n },\n);\n\ndefineExpose<ImageCropperExpose>({\n getCropResult: core.getCropResult,\n rotate: core.rotate,\n zoom: core.zoom,\n flipX: core.flipX,\n flipY: core.flipY,\n reset: core.reset,\n setAspectRatio: (r: number) => {\n currentRatio.value = r;\n },\n loadFile,\n open: (src?: string) => {\n if (src) imgSrc.value = src;\n modalVisible.value = true;\n },\n close: () => {\n modalVisible.value = false;\n },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-02-25\n * @Description: 图片裁剪组件(基于 vue-cropper)\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\n-->\n<template>\n <NModal\n v-if=\"props.modal\"\n v-model:show=\"modalVisible\"\n preset=\"card\"\n :title=\"props.modalTitle || '图片裁剪'\"\n :style=\"{ width: '860px' }\"\n :mask-closable=\"false\"\n :closable=\"true\"\n >\n <div class=\"c-image-cropper__body\">\n <CropperToolbar\n v-if=\"props.showToolbar\"\n :current-ratio=\"currentRatio\"\n :ratio-presets=\"ratioPresets\"\n @ratio=\"handleRatio\"\n @rotate=\"rotate\"\n @flip-x=\"core.flipX\"\n @flip-y=\"core.flipY\"\n @zoom=\"core.zoom\"\n @reset=\"handleReset\"\n />\n <div class=\"c-image-cropper__workspace\">\n <div\n class=\"c-image-cropper__canvas\"\n :style=\"{ height: containerHeight }\"\n >\n <VueCropper\n v-if=\"imgSrc\"\n ref=\"modalCropperRef\"\n :img=\"imgSrc\"\n :output-size=\"props.outputQuality\"\n :output-type=\"vueCropperOutputType\"\n :can-scale=\"false\"\n :auto-crop=\"true\"\n :auto-crop-width=\"autoCropSize.width\"\n :auto-crop-height=\"autoCropSize.height\"\n :fixed=\"isFixed\"\n :fixed-number=\"fixedNumber\"\n :center-box=\"true\"\n :info=\"true\"\n :info-true=\"true\"\n :can-move=\"true\"\n :can-move-box=\"true\"\n :original=\"false\"\n :high=\"true\"\n :full=\"false\"\n :mode=\"'contain'\"\n @real-time=\"handleRealTimePreview\"\n @img-load=\"onImgLoad\"\n />\n <div v-else class=\"c-image-cropper__placeholder\">\n <C_Icon\n name=\"mdi:image-plus-outline\"\n style=\"font-size: 48px; opacity: 0.3\"\n />\n <span>请选择图片</span>\n </div>\n </div>\n <div\n v-if=\"props.showPreview && imgSrc\"\n class=\"c-image-cropper__preview-panel\"\n >\n <CropperPreview\n :preview-data=\"previewData\"\n :circular=\"props.circular\"\n />\n </div>\n </div>\n </div>\n <template #footer>\n <NSpace justify=\"end\">\n <NButton @click=\"handleCancel\">取消</NButton>\n <NButton type=\"primary\" :loading=\"exporting\" @click=\"handleConfirm\"\n >确认裁剪</NButton\n >\n </NSpace>\n </template>\n </NModal>\n\n <div v-else class=\"c-image-cropper\">\n <div class=\"c-image-cropper__body\">\n <CropperToolbar\n v-if=\"props.showToolbar\"\n :current-ratio=\"currentRatio\"\n :ratio-presets=\"ratioPresets\"\n @ratio=\"handleRatio\"\n @rotate=\"rotate\"\n @flip-x=\"core.flipX\"\n @flip-y=\"core.flipY\"\n @zoom=\"core.zoom\"\n @reset=\"handleReset\"\n />\n <div class=\"c-image-cropper__workspace\">\n <div\n class=\"c-image-cropper__canvas\"\n :style=\"{ height: containerHeight }\"\n >\n <VueCropper\n v-if=\"imgSrc\"\n ref=\"inlineCropperRef\"\n :img=\"imgSrc\"\n :output-size=\"props.outputQuality\"\n :output-type=\"vueCropperOutputType\"\n :can-scale=\"false\"\n :auto-crop=\"true\"\n :auto-crop-width=\"autoCropSize.width\"\n :auto-crop-height=\"autoCropSize.height\"\n :fixed=\"isFixed\"\n :fixed-number=\"fixedNumber\"\n :center-box=\"true\"\n :info=\"true\"\n :info-true=\"true\"\n :can-move=\"true\"\n :can-move-box=\"true\"\n :original=\"false\"\n :high=\"true\"\n :full=\"false\"\n :mode=\"'contain'\"\n @real-time=\"handleRealTimePreview\"\n @img-load=\"onImgLoad\"\n />\n <div v-else class=\"c-image-cropper__placeholder\">\n <C_Icon\n name=\"mdi:image-plus-outline\"\n style=\"font-size: 48px; opacity: 0.3\"\n />\n <span>请选择图片</span>\n </div>\n </div>\n <div\n v-if=\"props.showPreview && imgSrc\"\n class=\"c-image-cropper__preview-panel\"\n >\n <CropperPreview\n :preview-data=\"previewData\"\n :circular=\"props.circular\"\n />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch } from \"vue\";\nimport { NModal, NButton, NSpace } from \"naive-ui\";\nimport { VueCropper } from \"vue-cropper\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport type {\n AspectRatioPreset,\n CropOutputFormat,\n ImageCropperExpose,\n ImageCropperProps,\n} from \"./types\";\nimport { useCropperCore } from \"./composables/useCropperCore\";\nimport CropperToolbar from \"./components/CropperToolbar.vue\";\nimport CropperPreview from \"./components/CropperPreview.vue\";\n\ndefineOptions({ name: \"C_ImageCropper\" });\n\nconst props = withDefaults(defineProps<ImageCropperProps>(), {\n src: \"\",\n aspectRatio: 0,\n outputFormat: \"png\",\n outputQuality: 0.92,\n maxOutputWidth: 0,\n maxOutputHeight: 0,\n showPreview: true,\n showToolbar: true,\n circular: false,\n disabled: false,\n height: \"400px\",\n modal: false,\n modalTitle: \"图片裁剪\",\n});\n\nconst emit = defineEmits<{\n crop: [result: any];\n ready: [];\n error: [error: Event];\n confirm: [result: any];\n cancel: [];\n}>();\n\nconst imgSrc = ref(props.src);\nconst currentRatio = ref(props.aspectRatio);\nconst modalVisible = ref(false);\nconst exporting = ref(false);\nconst previewData = ref<any>(null);\n\nconst inlineCropperRef = ref<any>(null);\nconst modalCropperRef = ref<any>(null);\n\nconst activeCropperRef = computed(() =>\n props.modal ? modalCropperRef.value : inlineCropperRef.value,\n);\n\nconst containerHeight = computed(() =>\n typeof props.height === \"number\" ? `${props.height}px` : props.height,\n);\n\nconst vueCropperOutputType = computed(() => {\n const map: Record<CropOutputFormat, string> = {\n png: \"png\",\n jpeg: \"jpeg\",\n webp: \"webp\",\n };\n return map[props.outputFormat as CropOutputFormat] || \"png\";\n});\n\nconst isFixed = computed(() => currentRatio.value > 0);\n\nconst fixedNumber = computed(() => {\n if (currentRatio.value <= 0) return [1, 1];\n if (currentRatio.value === 1) return [1, 1];\n if (Math.abs(currentRatio.value - 16 / 9) < 0.01) return [16, 9];\n if (Math.abs(currentRatio.value - 4 / 3) < 0.01) return [4, 3];\n if (Math.abs(currentRatio.value - 3 / 2) < 0.01) return [3, 2];\n return [Math.round(currentRatio.value * 100), 100];\n});\n\nconst autoCropSize = computed(() => ({\n width: 300,\n height: currentRatio.value > 0 ? 300 / currentRatio.value : 200,\n}));\n\nconst ratioPresets: AspectRatioPreset[] = [\n { label: \"自由\", value: 0 },\n { label: \"1:1\", value: 1 },\n { label: \"16:9\", value: 16 / 9 },\n { label: \"4:3\", value: 4 / 3 },\n { label: \"3:2\", value: 3 / 2 },\n];\n\nconst formatRef = computed(() => props.outputFormat as CropOutputFormat);\nconst qualityRef = computed(() => props.outputQuality);\nconst maxWRef = computed(() => props.maxOutputWidth);\nconst maxHRef = computed(() => props.maxOutputHeight);\n\nconst core = useCropperCore({\n format: formatRef,\n quality: qualityRef,\n maxWidth: maxWRef,\n maxHeight: maxHRef,\n});\n\nwatch(activeCropperRef, (v) => {\n core.cropperRef.value = v;\n});\n\nfunction handleRealTimePreview(data: any) {\n previewData.value = data;\n}\nfunction onImgLoad(status: string) {\n if (status === \"success\") emit(\"ready\");\n}\nfunction rotate(angle: number) {\n core.rotate(angle);\n}\nfunction handleRatio(v: number) {\n currentRatio.value = v;\n}\nfunction handleReset() {\n core.reset();\n}\n\nasync function handleConfirm() {\n exporting.value = true;\n try {\n const result = await core.getCropResult();\n emit(\"confirm\", result);\n emit(\"crop\", result);\n modalVisible.value = false;\n } finally {\n exporting.value = false;\n }\n}\n\nfunction handleCancel() {\n modalVisible.value = false;\n emit(\"cancel\");\n}\n\nfunction loadFile(file: File) {\n const reader = new FileReader();\n reader.onload = (e) => {\n imgSrc.value = e.target?.result as string;\n };\n reader.readAsDataURL(file);\n}\n\nwatch(\n () => props.src,\n (v) => {\n imgSrc.value = v;\n },\n);\nwatch(\n () => props.aspectRatio,\n (v) => {\n currentRatio.value = v;\n },\n);\n\ndefineExpose<ImageCropperExpose>({\n getCropResult: core.getCropResult,\n rotate: core.rotate,\n zoom: core.zoom,\n flipX: core.flipX,\n flipY: core.flipY,\n reset: core.reset,\n setAspectRatio: (r: number) => {\n currentRatio.value = r;\n },\n loadFile,\n open: (src?: string) => {\n if (src) imgSrc.value = src;\n modalVisible.value = true;\n },\n close: () => {\n modalVisible.value = false;\n },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n"],"mappings":"yJAWA,SAAgB,EAAe,EAAiC,EAAE,CAAE,CAClE,IAAM,GAAA,EAAA,EAAA,KAAsB,KAAK,CAEjC,SAAS,GAAa,CACpB,EAAW,OAAO,YAAY,CAGhC,SAAS,GAAc,CACrB,EAAW,OAAO,aAAa,CAGjC,SAAS,EAAO,EAAe,CAC7B,IAAM,EAAQ,KAAK,MAAM,EAAQ,GAAG,CAC9B,EAAK,EAAQ,EAAI,EAAc,EACrC,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,IAAI,EAAM,CAAE,IAAK,GAAI,CAGhD,SAAS,EAAK,EAAe,CAC3B,EAAW,OAAO,YAAY,EAAQ,EAAI,EAAI,GAAG,CAGnD,SAAS,GAAQ,CACf,IAAM,EAAK,EAAW,OAAO,OAAO,IACpC,GAAI,CAAC,EAAI,OACT,IAAM,EAAU,EAAG,MAAM,WAAa,GAClC,EAAQ,SAAS,aAAa,CAChC,EAAG,MAAM,UAAY,EAAQ,QAAQ,aAAc,YAAY,CAE/D,EAAG,MAAM,UACP,EAAQ,QAAQ,kBAAmB,GAAG,CAAG,cAI/C,SAAS,GAAQ,CACf,IAAM,EAAK,EAAW,OAAO,OAAO,IACpC,GAAI,CAAC,EAAI,OACT,IAAM,EAAU,EAAG,MAAM,WAAa,GAClC,EAAQ,SAAS,aAAa,CAChC,EAAG,MAAM,UAAY,EAAQ,QAAQ,aAAc,YAAY,CAE/D,EAAG,MAAM,UACP,EAAQ,QAAQ,kBAAmB,GAAG,CAAG,cAI/C,SAAS,GAAQ,CACf,EAAW,OAAO,SAAS,CAG7B,SAAS,EAAc,EAAW,EAAW,CAC3C,IAAI,EAAK,EACL,EAAK,EACH,EAAO,EAAQ,UAAU,OAAS,EAClC,EAAO,EAAQ,WAAW,OAAS,EAEzC,GAAI,EAAO,GAAK,EAAK,EAAM,CACzB,IAAM,EAAQ,EAAO,EACrB,EAAK,EACL,EAAK,KAAK,MAAM,EAAK,EAAM,CAE7B,GAAI,EAAO,GAAK,EAAK,EAAM,CACzB,IAAM,EAAQ,EAAO,EACrB,EAAK,EACL,EAAK,KAAK,MAAM,EAAK,EAAM,CAE7B,MAAO,CAAE,MAAO,EAAI,OAAQ,EAAI,CAGlC,SAAS,GAAqC,CAC5C,OAAO,IAAI,SAAS,EAAS,IAAW,CACtC,IAAM,EAAU,EAAW,MAC3B,GAAI,CAAC,EAAS,OAAO,EAAW,MAAM,0BAA0B,CAAC,CAEjE,IAAM,EAAS,EAAQ,QAAQ,OAAS,MAClC,EAAU,EAAQ,SAAS,OAAS,IACpC,EACJ,IAAW,OACP,aACA,IAAW,OACT,aACA,YAER,EAAQ,YAAa,GAAmB,CACtC,EAAQ,YAAa,GAAe,CAClC,IAAM,EAAM,IAAI,MAChB,EAAI,WAAe,CACjB,GAAM,CAAE,QAAO,UAAW,EAAc,EAAI,MAAO,EAAI,OAAO,CAE9D,GAAI,IAAU,EAAI,OAAS,IAAW,EAAI,OAAQ,CAChD,IAAM,EAAS,SAAS,cAAc,SAAS,CAC/C,EAAO,MAAQ,EACf,EAAO,OAAS,EACJ,EAAO,WAAW,KAAK,CAC/B,UAAU,EAAK,EAAG,EAAG,EAAO,EAAO,CACvC,IAAM,EAAoB,EAAO,UAAU,EAAM,EAAQ,CACzD,EAAO,OACJ,GAAoB,CACnB,EAAQ,CACN,OAAQ,EACR,KAAM,EACN,QACA,SACA,SACD,CAAC,EAEJ,EACA,IAAW,MAAQ,IAAA,GAAY,EAChC,MAED,EAAQ,CACN,SACA,OACA,MAAO,EAAI,MACX,OAAQ,EAAI,OACZ,SACD,CAAC,EAGN,EAAI,YAAgB,EAAW,MAAM,6BAA6B,CAAC,CACnE,EAAI,IAAM,GACV,EACF,EACF,CAGJ,MAAO,CACL,aACA,SACA,aACA,cACA,OACA,QACA,QACA,QACA,gBACD,sPElEK,MA/EN,EA+EM,+BArEW,EAAA,aAAA,CAAA,CATD,KAAK,QAAO,CAAA,2BAEM,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBAMpB,EAAA,SAAA,MAAA,EAAA,EAAA,YANOA,EAAAA,aAAR,oDAMC,EAAA,QAAA,CAAA,CALP,IAAK,EAAK,MACV,KAAMC,EAAAA,eAAiB,EAAK,MAAK,UAAA,UACjC,QAAK,GAAEC,EAAAA,MAAK,QAAU,EAAK,MAAA,6BAEZ,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAb,EAAK,MAAK,CAAA,EAAA,CAAA,CAAA,6EAII,EAAA,SAAA,CAAA,CAAX,SAAA,GAAQ,CAAA,+BASP,EAAA,SAAA,CAAA,KAAA,CANE,SAAA,EAAA,EAAA,aAGC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CAFD,KAAK,QAAQ,WAAA,GAAY,QAAK,AAAA,EAAA,KAAA,GAAEA,EAAAA,MAAK,SAAA,IAAA,GACjC,MAAA,EAAA,EAAA,aAAsC,EAAA,EAAA,EAAA,aAAA,EAAA,EAAA,CAAzB,KAAK,kBAAiB,CAAA,CAAA,CAAA,mCAIpD,CAAA,AAAA,EAAA,MAAA,EAAA,EAAA,iBAFa,cAEb,GAAA,CAAA,CAAA,4CAQW,EAAA,SAAA,CAAA,KAAA,CANE,SAAA,EAAA,EAAA,aAGC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CAFD,KAAK,QAAQ,WAAA,GAAY,QAAK,AAAA,EAAA,KAAA,GAAEA,EAAAA,MAAK,SAAA,GAAA,GACjC,MAAA,EAAA,EAAA,aAAuC,EAAA,EAAA,EAAA,aAAA,EAAA,EAAA,CAA1B,KAAK,mBAAkB,CAAA,CAAA,CAAA,mCAIrD,CAAA,AAAA,EAAA,MAAA,EAAA,EAAA,iBAFa,cAEb,GAAA,CAAA,CAAA,4CAEqB,EAAA,SAAA,CAAA,CAAX,SAAA,GAAQ,CAAA,+BASP,EAAA,SAAA,CAAA,KAAA,CANE,SAAA,EAAA,EAAA,aAGC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CAFD,KAAK,QAAQ,WAAA,GAAY,QAAK,AAAA,EAAA,KAAA,GAAEA,EAAAA,MAAK,QAAA,GACjC,MAAA,EAAA,EAAA,aAA0C,EAAA,EAAA,EAAA,aAAA,EAAA,EAAA,CAA7B,KAAK,sBAAqB,CAAA,CAAA,CAAA,mCAIxD,CAAA,AAAA,EAAA,MAAA,EAAA,EAAA,iBAFa,SAEb,GAAA,CAAA,CAAA,4CAQW,EAAA,SAAA,CAAA,KAAA,CANE,SAAA,EAAA,EAAA,aAGC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CAFD,KAAK,QAAQ,WAAA,GAAY,QAAK,AAAA,EAAA,KAAA,GAAEA,EAAAA,MAAK,QAAA,GACjC,MAAA,EAAA,EAAA,aAAwC,EAAA,EAAA,EAAA,aAAA,EAAA,EAAA,CAA3B,KAAK,oBAAmB,CAAA,CAAA,CAAA,mCAItD,CAAA,AAAA,EAAA,OAAA,EAAA,EAAA,iBAFa,SAEb,GAAA,CAAA,CAAA,6CAEqB,EAAA,SAAA,CAAA,CAAX,SAAA,GAAQ,CAAA,+BASP,EAAA,SAAA,CAAA,KAAA,CANE,SAAA,EAAA,EAAA,aAGC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CAFD,KAAK,QAAQ,WAAA,GAAY,QAAK,AAAA,EAAA,KAAA,GAAEA,EAAAA,MAAK,OAAA,GAAA,GACjC,MAAA,EAAA,EAAA,aAA+C,EAAA,EAAA,EAAA,aAAA,EAAA,EAAA,CAAlC,KAAK,2BAA0B,CAAA,CAAA,CAAA,mCAI7D,CAAA,AAAA,EAAA,OAAA,EAAA,EAAA,iBAFa,OAEb,GAAA,CAAA,CAAA,6CAQW,EAAA,SAAA,CAAA,KAAA,CANE,SAAA,EAAA,EAAA,aAGC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CAFD,KAAK,QAAQ,WAAA,GAAY,QAAK,AAAA,EAAA,KAAA,GAAEA,EAAAA,MAAK,OAAA,IAAA,GACjC,MAAA,EAAA,EAAA,aAAgD,EAAA,EAAA,EAAA,aAAA,EAAA,EAAA,CAAnC,KAAK,4BAA2B,CAAA,CAAA,CAAA,mCAI9D,CAAA,AAAA,EAAA,OAAA,EAAA,EAAA,iBAFa,OAEb,GAAA,CAAA,CAAA,6CAEqB,EAAA,SAAA,CAAA,CAAX,SAAA,GAAQ,CAAA,+BASP,EAAA,SAAA,CAAA,KAAA,CANE,SAAA,EAAA,EAAA,aAGC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CAFD,KAAK,QAAQ,WAAA,GAAY,QAAK,AAAA,EAAA,KAAA,GAAEA,EAAAA,MAAK,QAAA,GACjC,MAAA,EAAA,EAAA,aAAkC,EAAA,EAAA,EAAA,aAAA,EAAA,EAAA,CAArB,KAAK,cAAa,CAAA,CAAA,CAAA,mCAIhD,CAAA,AAAA,EAAA,OAAA,EAAA,EAAA,iBAFa,OAEb,GAAA,CAAA,CAAA,yVChBJ,IAAM,EAAQ,EAKR,GAAA,EAAA,EAAA,KAAqC,KAAK,CAC1C,GAAA,EAAA,EAAA,KAAmB,IAAI,CAEvB,EAAa,CACjB,CAAE,MAAO,OAAQ,KAAM,GAAI,CAC3B,CAAE,MAAO,OAAQ,KAAM,GAAI,CAC3B,CAAE,MAAO,OAAQ,KAAM,IACxB,CAEK,GAAA,EAAA,EAAA,cAAiC,CACrC,IAAM,EAAI,EAAM,YAChB,OAAO,GAAK,EAAE,KAAO,EAAE,EAAI,GAAK,EAAE,EAAI,GACtC,CAEI,GAAA,EAAA,EAAA,cAAmC,CACvC,GAAI,CAAC,EAAgB,MAAO,MAAO,EAAE,CACrC,GAAM,CAAE,KAAM,EAAM,YAEpB,MAAO,CAAE,KADI,EAAa,MAAQ,EACnB,SAAU,SAAU,EACnC,CAEF,SAAS,EAAsB,EAAc,CAC3C,GAAI,CAAC,EAAgB,MAAO,MAAO,EAAE,CACrC,GAAM,CAAE,KAAM,EAAM,YACpB,MAAO,CAAE,KAAM,EAAO,EAAG,SAAU,SAAU,CAG/C,IAAI,EAAwC,YAE5C,EAAA,EAAA,eAAgB,CACV,EAAW,QACb,EAAa,MAAQ,EAAW,MAAM,YACtC,EAAiB,IAAI,eAAgB,GAAY,CAC/C,0BAA4B,CAC1B,IAAK,IAAM,KAAS,EAClB,EAAa,MAAQ,EAAM,YAAY,OAEzC,EACF,CACF,EAAe,QAAQ,EAAW,MAAM,GAE1C,EAEF,EAAA,EAAA,qBAAsB,CACpB,GAAgB,YAAY,EAC5B,oDCzDM,MAvDN,EAuDM,0BAnDE,MAHN,EAGM,EAAA,EAAA,EAAA,aAF6B,EAAA,EAAA,CAAzB,KAAK,kBAAiB,CAAA,CAAA,AAAA,EAAA,MAAA,EAAA,EAAA,oBACb,OAAA,KAAX,OAAI,GAAA,CAAA,CAAA,0BAyBN,MAAA,SArBA,aAAJ,IAAI,EACJ,OAAA,EAAA,EAAA,gBAAK,CAAC,eAAc,CAAA,yBACgBC,EAAAA,SAAQ,CAAA,CAAA,GAE5B,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBASR,MAAA,OARD,MAAM,yBAA0B,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAA,4BAOpC,MAAA,CANA,OAAA,EAAA,EAAA,gBAAOC,EAAAA,YAAY,IAAG,CAAA,CAAA,EAAA,EAAA,EAAA,oBAKxB,MAAA,CAHC,IAAKA,EAAAA,YAAY,IACjB,OAAA,EAAA,EAAA,gBAAOA,EAAAA,YAAY,IAAG,CACvB,IAAI,2EAUN,MALN,EAKM,EAAA,EAAA,EAAA,aADF,EAAA,EAAA,CAFA,KAAK,oBACL,MAAA,CAAA,YAAA,OAAA,QAAA,yCA6BA,MAxBN,EAwBM,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBADE,EAAA,SAAA,MAAA,EAAA,EAAA,YAtBc,EAAR,4BAsBN,MAAA,CAtB2B,IAAK,EAAK,MAAO,MAAM,2CAoBhD,MAAA,CAlBJ,OAAA,EAAA,EAAA,gBAAK,CAAC,qBAAoB,CAAA,+BACgBD,EAAAA,SAAQ,CAAA,CAAA,CACjD,OAAA,EAAA,EAAA,gBAAK,CAAA,MAAA,GAAc,EAAK,KAAI,IAAA,OAAA,GAAiB,EAAK,KAAI,IAAA,CAAA,GAEvC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAYR,MAAA,OAVJ,MAAM,0BACL,OAAA,EAAA,EAAA,gBAAO,EAAsB,EAAK,KAAI,CAAA,4BAQjC,MAAA,CANA,OAAA,EAAA,EAAA,gBAAOC,EAAAA,YAAY,IAAG,CAAA,CAAA,EAAA,EAAA,EAAA,oBAKxB,MAAA,CAHC,IAAKA,EAAAA,YAAY,IACjB,OAAA,EAAA,EAAA,gBAAOA,EAAAA,YAAY,IAAG,CACvB,IAAI,8FAM4C,OAA1D,GAAA,EAAA,EAAA,iBAAsC,EAAK,MAAK,CAAA,EAAA,CAAA,CAAA,28BCmHxD,IAAM,EAAQ,EAgBR,EAAO,EAQP,GAAA,EAAA,EAAA,KAAa,EAAM,IAAI,CACvB,GAAA,EAAA,EAAA,KAAmB,EAAM,YAAY,CACrC,GAAA,EAAA,EAAA,KAAmB,GAAM,CACzB,GAAA,EAAA,EAAA,KAAgB,GAAM,CACtB,GAAA,EAAA,EAAA,KAAuB,KAAK,CAE5B,GAAA,EAAA,EAAA,KAA4B,KAAK,CACjC,GAAA,EAAA,EAAA,KAA2B,KAAK,CAEhC,GAAA,EAAA,EAAA,cACJ,EAAM,MAAQ,EAAgB,MAAQ,EAAiB,MACxD,CAEK,GAAA,EAAA,EAAA,cACJ,OAAO,EAAM,QAAW,SAAW,GAAG,EAAM,OAAO,IAAM,EAAM,OAChE,CAEK,GAAA,EAAA,EAAA,eAC0C,CAC5C,IAAK,MACL,KAAM,OACN,KAAM,OACP,EACU,EAAM,eAAqC,MACtD,CAEI,GAAA,EAAA,EAAA,cAAyB,EAAa,MAAQ,EAAE,CAEhD,GAAA,EAAA,EAAA,cACA,EAAa,OAAS,GACtB,EAAa,QAAU,EAAU,CAAC,EAAG,EAAE,CACvC,KAAK,IAAI,EAAa,MAAQ,GAAK,EAAE,CAAG,IAAa,CAAC,GAAI,EAAE,CAC5D,KAAK,IAAI,EAAa,MAAQ,EAAI,EAAE,CAAG,IAAa,CAAC,EAAG,EAAE,CAC1D,KAAK,IAAI,EAAa,MAAQ,EAAI,EAAE,CAAG,IAAa,CAAC,EAAG,EAAE,CACvD,CAAC,KAAK,MAAM,EAAa,MAAQ,IAAI,CAAE,IAAI,CAClD,CAEI,GAAA,EAAA,EAAA,eAA+B,CACnC,MAAO,IACP,OAAQ,EAAa,MAAQ,EAAI,IAAM,EAAa,MAAQ,IAC7D,EAAE,CAEG,EAAoC,CACxC,CAAE,MAAO,KAAM,MAAO,EAAG,CACzB,CAAE,MAAO,MAAO,MAAO,EAAG,CAC1B,CAAE,MAAO,OAAQ,MAAO,GAAK,EAAG,CAChC,CAAE,MAAO,MAAO,MAAO,EAAI,EAAG,CAC9B,CAAE,MAAO,MAAO,MAAO,EAAI,GAC5B,CAOK,EAAO,EAAe,CAC1B,QAAA,EAAA,EAAA,cAN+B,EAAM,aAAiC,CAOtE,SAAA,EAAA,EAAA,cANgC,EAAM,cAAc,CAOpD,UAAA,EAAA,EAAA,cAN6B,EAAM,eAAe,CAOlD,WAAA,EAAA,EAAA,cAN6B,EAAM,gBAAgB,CAOpD,CAAC,EAEF,EAAA,EAAA,OAAM,EAAmB,GAAM,CAC7B,EAAK,WAAW,MAAQ,GACxB,CAEF,SAAS,EAAsB,EAAW,CACxC,EAAY,MAAQ,EAEtB,SAAS,EAAU,EAAgB,CAC7B,IAAW,WAAW,EAAK,QAAQ,CAEzC,SAAS,EAAO,EAAe,CAC7B,EAAK,OAAO,EAAM,CAEpB,SAAS,EAAY,EAAW,CAC9B,EAAa,MAAQ,EAEvB,SAAS,GAAc,CACrB,EAAK,OAAO,CAGd,eAAe,GAAgB,CAC7B,EAAU,MAAQ,GAClB,GAAI,CACF,IAAM,EAAS,MAAM,EAAK,eAAe,CACzC,EAAK,UAAW,EAAO,CACvB,EAAK,OAAQ,EAAO,CACpB,EAAa,MAAQ,UACb,CACR,EAAU,MAAQ,IAItB,SAAS,GAAe,CACtB,EAAa,MAAQ,GACrB,EAAK,SAAS,CAGhB,SAAS,EAAS,EAAY,CAC5B,IAAM,EAAS,IAAI,WACnB,EAAO,OAAU,GAAM,CACrB,EAAO,MAAQ,EAAE,QAAQ,QAE3B,EAAO,cAAc,EAAK,QAG5B,EAAA,EAAA,WACQ,EAAM,IACX,GAAM,CACL,EAAO,MAAQ,GAElB,EACD,EAAA,EAAA,WACQ,EAAM,YACX,GAAM,CACL,EAAa,MAAQ,GAExB,CAED,EAAiC,CAC/B,cAAe,EAAK,cACpB,OAAQ,EAAK,OACb,KAAM,EAAK,KACX,MAAO,EAAK,MACZ,MAAO,EAAK,MACZ,MAAO,EAAK,MACZ,eAAiB,GAAc,CAC7B,EAAa,MAAQ,GAEvB,WACA,KAAO,GAAiB,CAClB,IAAK,EAAO,MAAQ,GACxB,EAAa,MAAQ,IAEvB,UAAa,CACX,EAAa,MAAQ,IAExB,CAAC,QCjUQ,EAAM,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OA4EL,EAAA,OAAA,CAAA,OA3EC,KAAM,EAAA,gCAAA,EAAY,MAAA,EAC1B,OAAO,OACN,MAAO,EAAM,YAAU,OACvB,MAAO,CAAA,MAAA,QAAkB,CACzB,gBAAe,GACf,SAAU,KA8DA,QAAA,EAAA,EAAA,aAMA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,OAAA,CAAA,CALD,QAAQ,MAAK,CAAA,2BACwB,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CAAjC,QAAO,EAAY,CAAA,2BAAI,AAAA,EAAA,KAAA,EAAA,EAAA,EAAA,iBAAF,KAAE,GAAA,CAAA,CAAA,4CAGhC,EAAA,QAAA,CAAA,CAFQ,KAAK,UAAW,QAAS,EAAA,MAAY,QAAO,8BAC9C,AAAA,EAAA,KAAA,EAAA,EAAA,EAAA,iBAAJ,OAAI,GAAA,CAAA,CAAA,gEALL,EAAA,EAAA,EAAA,oBAAA,MA3DN,EA2DM,CAzDI,EAAM,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aASZ,EAAA,OARC,gBAAe,EAAA,MACf,gBAAe,EACf,QAAO,EACP,SAAQ,EACR,SAAA,EAAA,EAAA,OAAQ,EAAI,CAAC,MACb,SAAA,EAAA,EAAA,OAAQ,EAAI,CAAC,MACb,QAAA,EAAA,EAAA,OAAM,EAAI,CAAC,KACX,QAAO,wHAgDJ,MA9CN,EA8CM,EAAA,EAAA,EAAA,oBAVE,MAAA,CAlCJ,MAAM,0BACL,OAAA,EAAA,EAAA,gBAAK,CAAA,OAAY,EAAA,MAAe,CAAA,GAGzB,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAsBN,EAAA,WAAA,CAAA,eArBI,kBAAJ,IAAI,EACH,IAAK,EAAA,MACL,cAAa,EAAM,cACnB,cAAa,EAAA,MACb,YAAW,GACX,YAAW,GACX,kBAAiB,EAAA,MAAa,MAC9B,mBAAkB,EAAA,MAAa,OAC/B,MAAO,EAAA,MACP,eAAc,EAAA,MACd,aAAY,GACZ,KAAM,GACN,YAAW,GACX,WAAU,GACV,eAAc,GACd,SAAU,GACV,KAAM,GACN,KAAM,GACN,KAAM,UACN,WAAW,EACD,kKAQP,MANN,EAMM,EAAA,EAAA,EAAA,aAFF,EAAA,EAAA,CAFA,KAAK,yBACL,MAAA,CAAA,YAAA,OAAA,QAAA,yCAEgB,OAAA,KAAZ,QAAK,GAAA,CAAA,CAAA,EAAA,CAAA,EAAA,CAIP,EAAM,aAAe,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAOvB,MARN,EAQM,EAAA,EAAA,EAAA,aADF,EAAA,CAFC,eAAc,EAAA,MACd,SAAU,EAAM,iKA4ErB,MA7DN,EA6DM,EAAA,EAAA,EAAA,oBADE,MA3DN,EA2DM,CAzDI,EAAM,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aASZ,EAAA,OARC,gBAAe,EAAA,MACf,gBAAe,EACf,QAAO,EACP,SAAQ,EACR,SAAA,EAAA,EAAA,OAAQ,EAAI,CAAC,MACb,SAAA,EAAA,EAAA,OAAQ,EAAI,CAAC,MACb,QAAA,EAAA,EAAA,OAAM,EAAI,CAAC,KACX,QAAO,wHAgDJ,MA9CN,EA8CM,EAAA,EAAA,EAAA,oBAVE,MAAA,CAlCJ,MAAM,0BACL,OAAA,EAAA,EAAA,gBAAK,CAAA,OAAY,EAAA,MAAe,CAAA,GAGzB,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAsBN,EAAA,WAAA,CAAA,eArBI,mBAAJ,IAAI,EACH,IAAK,EAAA,MACL,cAAa,EAAM,cACnB,cAAa,EAAA,MACb,YAAW,GACX,YAAW,GACX,kBAAiB,EAAA,MAAa,MAC9B,mBAAkB,EAAA,MAAa,OAC/B,MAAO,EAAA,MACP,eAAc,EAAA,MACd,aAAY,GACZ,KAAM,GACN,YAAW,GACX,WAAU,GACV,eAAc,GACd,SAAU,GACV,KAAM,GACN,KAAM,GACN,KAAM,UACN,WAAW,EACD,kKAQP,MANN,EAMM,EAAA,EAAA,EAAA,aAFF,EAAA,EAAA,CAFA,KAAK,yBACL,MAAA,CAAA,YAAA,OAAA,QAAA,yCAEgB,OAAA,KAAZ,QAAK,GAAA,CAAA,CAAA,EAAA,CAAA,EAAA,CAIP,EAAM,aAAe,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAOvB,MARN,EAQM,EAAA,EAAA,EAAA,aADF,EAAA,CAFC,eAAc,EAAA,MACd,SAAU,EAAM"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"C_ImageCropper2.js","names":["ratioPresets","currentRatio","$emit","circular","previewData"],"sources":["../src/components/C_ImageCropper/composables/useCropperCore.ts","../src/components/C_ImageCropper/components/CropperToolbar.vue","../src/components/C_ImageCropper/components/CropperToolbar.vue","../src/components/C_ImageCropper/components/CropperPreview.vue","../src/components/C_ImageCropper/components/CropperPreview.vue","../src/components/C_ImageCropper/index.vue","../src/components/C_ImageCropper/index.vue"],"sourcesContent":["import { ref } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { CropOutputFormat, CropResult } from \"../types\";\r\n\r\ninterface UseCropperCoreOptions {\r\n format?: Ref<CropOutputFormat>;\r\n quality?: Ref<number>;\r\n maxWidth?: Ref<number>;\r\n maxHeight?: Ref<number>;\r\n}\r\n\r\nexport function useCropperCore(options: UseCropperCoreOptions = {}) {\r\n const cropperRef = ref<any>(null);\r\n\r\n function rotateLeft() {\r\n cropperRef.value?.rotateLeft();\r\n }\r\n\r\n function rotateRight() {\r\n cropperRef.value?.rotateRight();\r\n }\r\n\r\n function rotate(angle: number) {\r\n const steps = Math.round(angle / 90);\r\n const fn = steps > 0 ? rotateRight : rotateLeft;\r\n for (let i = 0; i < Math.abs(steps); i++) fn();\r\n }\r\n\r\n function zoom(scale: number) {\r\n cropperRef.value?.changeScale(scale > 0 ? 1 : -1);\r\n }\r\n\r\n function flipX() {\r\n const el = cropperRef.value?.$refs?.img;\r\n if (!el) return;\r\n const current = el.style.transform || \"\";\r\n if (current.includes(\"scaleX(-1)\")) {\r\n el.style.transform = current.replace(\"scaleX(-1)\", \"scaleX(1)\");\r\n } else {\r\n el.style.transform =\r\n current.replace(/scaleX\\([^)]*\\)/, \"\") + \" scaleX(-1)\";\r\n }\r\n }\r\n\r\n function flipY() {\r\n const el = cropperRef.value?.$refs?.img;\r\n if (!el) return;\r\n const current = el.style.transform || \"\";\r\n if (current.includes(\"scaleY(-1)\")) {\r\n el.style.transform = current.replace(\"scaleY(-1)\", \"scaleY(1)\");\r\n } else {\r\n el.style.transform =\r\n current.replace(/scaleY\\([^)]*\\)/, \"\") + \" scaleY(-1)\";\r\n }\r\n }\r\n\r\n function reset() {\r\n cropperRef.value?.refresh();\r\n }\r\n\r\n function constrainSize(w: number, h: number) {\r\n let ow = w;\r\n let oh = h;\r\n const maxW = options.maxWidth?.value ?? 0;\r\n const maxH = options.maxHeight?.value ?? 0;\r\n\r\n if (maxW > 0 && ow > maxW) {\r\n const ratio = maxW / ow;\r\n ow = maxW;\r\n oh = Math.round(oh * ratio);\r\n }\r\n if (maxH > 0 && oh > maxH) {\r\n const ratio = maxH / oh;\r\n oh = maxH;\r\n ow = Math.round(ow * ratio);\r\n }\r\n return { width: ow, height: oh };\r\n }\r\n\r\n function getCropResult(): Promise<CropResult> {\r\n return new Promise((resolve, reject) => {\r\n const cropper = cropperRef.value;\r\n if (!cropper) return reject(new Error(\"Cropper not initialized\"));\r\n\r\n const format = options.format?.value ?? \"png\";\r\n const quality = options.quality?.value ?? 0.92;\r\n const mime =\r\n format === \"jpeg\"\r\n ? \"image/jpeg\"\r\n : format === \"webp\"\r\n ? \"image/webp\"\r\n : \"image/png\";\r\n\r\n cropper.getCropData((base64: string) => {\r\n cropper.getCropBlob((blob: Blob) => {\r\n const img = new Image();\r\n img.onload = () => {\r\n const { width, height } = constrainSize(img.width, img.height);\r\n\r\n if (width !== img.width || height !== img.height) {\r\n const canvas = document.createElement(\"canvas\");\r\n canvas.width = width;\r\n canvas.height = height;\r\n const ctx = canvas.getContext(\"2d\")!;\r\n ctx.drawImage(img, 0, 0, width, height);\r\n const constrainedBase64 = canvas.toDataURL(mime, quality);\r\n canvas.toBlob(\r\n (constrainedBlob) => {\r\n resolve({\r\n base64: constrainedBase64,\r\n blob: constrainedBlob!,\r\n width,\r\n height,\r\n format,\r\n });\r\n },\r\n mime,\r\n format === \"png\" ? undefined : quality,\r\n );\r\n } else {\r\n resolve({\r\n base64,\r\n blob,\r\n width: img.width,\r\n height: img.height,\r\n format,\r\n });\r\n }\r\n };\r\n img.onerror = () => reject(new Error(\"Failed to load crop result\"));\r\n img.src = base64;\r\n });\r\n });\r\n });\r\n }\r\n\r\n return {\r\n cropperRef,\r\n rotate,\r\n rotateLeft,\r\n rotateRight,\r\n zoom,\r\n flipX,\r\n flipY,\r\n reset,\r\n getCropResult,\r\n };\r\n}\r\n","<template>\r\n <div class=\"cropper-toolbar\">\r\n <NButtonGroup size=\"small\">\r\n <NButton\r\n v-for=\"item in ratioPresets\"\r\n :key=\"item.value\"\r\n :type=\"currentRatio === item.value ? 'primary' : 'default'\"\r\n @click=\"$emit('ratio', item.value)\"\r\n >\r\n {{ item.label }}\r\n </NButton>\r\n </NButtonGroup>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('rotate', -90)\">\r\n <template #icon><C_Icon name=\"mdi:rotate-left\" /></template>\r\n </NButton>\r\n </template>\r\n 逆时针旋转 90°\r\n </NTooltip>\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('rotate', 90)\">\r\n <template #icon><C_Icon name=\"mdi:rotate-right\" /></template>\r\n </NButton>\r\n </template>\r\n 顺时针旋转 90°\r\n </NTooltip>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('flipX')\">\r\n <template #icon><C_Icon name=\"mdi:flip-horizontal\" /></template>\r\n </NButton>\r\n </template>\r\n 水平翻转\r\n </NTooltip>\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('flipY')\">\r\n <template #icon><C_Icon name=\"mdi:flip-vertical\" /></template>\r\n </NButton>\r\n </template>\r\n 垂直翻转\r\n </NTooltip>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('zoom', 0.1)\">\r\n <template #icon><C_Icon name=\"mdi:magnify-plus-outline\" /></template>\r\n </NButton>\r\n </template>\r\n 放大\r\n </NTooltip>\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('zoom', -0.1)\">\r\n <template #icon><C_Icon name=\"mdi:magnify-minus-outline\" /></template>\r\n </NButton>\r\n </template>\r\n 缩小\r\n </NTooltip>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('reset')\">\r\n <template #icon><C_Icon name=\"mdi:refresh\" /></template>\r\n </NButton>\r\n </template>\r\n 重置\r\n </NTooltip>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { NButton, NButtonGroup, NDivider, NTooltip } from \"naive-ui\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\nimport type { AspectRatioPreset } from \"../types\";\r\n\r\ndefineProps<{\r\n currentRatio: number;\r\n ratioPresets: AspectRatioPreset[];\r\n}>();\r\n\r\ndefineEmits<{\r\n ratio: [value: number];\r\n rotate: [angle: number];\r\n flipX: [];\r\n flipY: [];\r\n zoom: [scale: number];\r\n reset: [];\r\n}>();\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-toolbar {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 4px;\r\n align-items: center;\r\n padding: 8px 0;\r\n}\r\n</style>\r\n","<template>\r\n <div class=\"cropper-toolbar\">\r\n <NButtonGroup size=\"small\">\r\n <NButton\r\n v-for=\"item in ratioPresets\"\r\n :key=\"item.value\"\r\n :type=\"currentRatio === item.value ? 'primary' : 'default'\"\r\n @click=\"$emit('ratio', item.value)\"\r\n >\r\n {{ item.label }}\r\n </NButton>\r\n </NButtonGroup>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('rotate', -90)\">\r\n <template #icon><C_Icon name=\"mdi:rotate-left\" /></template>\r\n </NButton>\r\n </template>\r\n 逆时针旋转 90°\r\n </NTooltip>\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('rotate', 90)\">\r\n <template #icon><C_Icon name=\"mdi:rotate-right\" /></template>\r\n </NButton>\r\n </template>\r\n 顺时针旋转 90°\r\n </NTooltip>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('flipX')\">\r\n <template #icon><C_Icon name=\"mdi:flip-horizontal\" /></template>\r\n </NButton>\r\n </template>\r\n 水平翻转\r\n </NTooltip>\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('flipY')\">\r\n <template #icon><C_Icon name=\"mdi:flip-vertical\" /></template>\r\n </NButton>\r\n </template>\r\n 垂直翻转\r\n </NTooltip>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('zoom', 0.1)\">\r\n <template #icon><C_Icon name=\"mdi:magnify-plus-outline\" /></template>\r\n </NButton>\r\n </template>\r\n 放大\r\n </NTooltip>\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('zoom', -0.1)\">\r\n <template #icon><C_Icon name=\"mdi:magnify-minus-outline\" /></template>\r\n </NButton>\r\n </template>\r\n 缩小\r\n </NTooltip>\r\n\r\n <NDivider vertical />\r\n\r\n <NTooltip>\r\n <template #trigger>\r\n <NButton size=\"small\" quaternary @click=\"$emit('reset')\">\r\n <template #icon><C_Icon name=\"mdi:refresh\" /></template>\r\n </NButton>\r\n </template>\r\n 重置\r\n </NTooltip>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { NButton, NButtonGroup, NDivider, NTooltip } from \"naive-ui\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\nimport type { AspectRatioPreset } from \"../types\";\r\n\r\ndefineProps<{\r\n currentRatio: number;\r\n ratioPresets: AspectRatioPreset[];\r\n}>();\r\n\r\ndefineEmits<{\r\n ratio: [value: number];\r\n rotate: [angle: number];\r\n flipX: [];\r\n flipY: [];\r\n zoom: [scale: number];\r\n reset: [];\r\n}>();\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-toolbar {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 4px;\r\n align-items: center;\r\n padding: 8px 0;\r\n}\r\n</style>\r\n","<template>\r\n <div class=\"cropper-preview\">\r\n <div class=\"preview-label\">\r\n <C_Icon name=\"mdi:eye-outline\" />\r\n <span>裁剪预览</span>\r\n </div>\r\n\r\n <div\r\n ref=\"mainBoxRef\"\r\n class=\"preview-main\"\r\n :class=\"{ 'preview-main--circular': circular }\"\r\n >\r\n <template v-if=\"hasValidPreview\">\r\n <div class=\"preview-main__viewport\" :style=\"mainViewportStyle\">\r\n <div :style=\"previewData.div\">\r\n <img\r\n :src=\"previewData.url\"\r\n :style=\"previewData.img\"\r\n alt=\"preview\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n <div v-else class=\"preview-empty\">\r\n <C_Icon\r\n name=\"mdi:image-outline\"\r\n style=\"font-size: 32px; opacity: 0.2\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"preview-thumbs\">\r\n <div v-for=\"item in thumbSizes\" :key=\"item.label\" class=\"preview-thumb\">\r\n <div\r\n class=\"preview-thumb__box\"\r\n :class=\"{ 'preview-thumb__box--circular': circular }\"\r\n :style=\"{ width: `${item.size}px`, height: `${item.size}px` }\"\r\n >\r\n <template v-if=\"hasValidPreview\">\r\n <div\r\n class=\"preview-thumb__viewport\"\r\n :style=\"getThumbViewportStyle(item.size)\"\r\n >\r\n <div :style=\"previewData.div\">\r\n <img\r\n :src=\"previewData.url\"\r\n :style=\"previewData.img\"\r\n alt=\"thumb\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n </div>\r\n <span class=\"preview-thumb__label\">{{ item.label }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted, onBeforeUnmount } from \"vue\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\n\r\nconst props = defineProps<{\r\n previewData: any;\r\n circular?: boolean;\r\n}>();\r\n\r\nconst mainBoxRef = ref<HTMLElement | null>(null);\r\nconst mainBoxWidth = ref(200);\r\n\r\nconst thumbSizes = [\r\n { label: \"80px\", size: 80 },\r\n { label: \"48px\", size: 48 },\r\n { label: \"32px\", size: 32 },\r\n];\r\n\r\nconst hasValidPreview = computed(() => {\r\n const d = props.previewData;\r\n return d && d.url && d.w > 0 && d.h > 0;\r\n});\r\n\r\nconst mainViewportStyle = computed(() => {\r\n if (!hasValidPreview.value) return {};\r\n const { w } = props.previewData;\r\n const zoom = mainBoxWidth.value / w;\r\n return { zoom, overflow: \"hidden\" };\r\n});\r\n\r\nfunction getThumbViewportStyle(size: number) {\r\n if (!hasValidPreview.value) return {};\r\n const { w } = props.previewData;\r\n return { zoom: size / w, overflow: \"hidden\" };\r\n}\r\n\r\nlet resizeObserver: ResizeObserver | null = null;\r\n\r\nonMounted(() => {\r\n if (mainBoxRef.value) {\r\n mainBoxWidth.value = mainBoxRef.value.clientWidth;\r\n resizeObserver = new ResizeObserver((entries) => {\r\n requestAnimationFrame(() => {\r\n for (const entry of entries) {\r\n mainBoxWidth.value = entry.contentRect.width;\r\n }\r\n });\r\n });\r\n resizeObserver.observe(mainBoxRef.value);\r\n }\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n resizeObserver?.disconnect();\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-preview {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n\r\n .preview-label {\r\n display: flex;\r\n gap: 6px;\r\n align-items: center;\r\n font-size: 13px;\r\n font-weight: 500;\r\n color: var(--text-color-2);\r\n }\r\n\r\n .preview-main {\r\n width: 100%;\r\n overflow: hidden;\r\n border: 1px solid var(--border-color);\r\n border-radius: 6px;\r\n background:\r\n linear-gradient(45deg, #f0f0f0 25%, transparent 25%),\r\n linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),\r\n linear-gradient(45deg, transparent 75%, #f0f0f0 75%),\r\n linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\r\n background-position:\r\n 0 0,\r\n 0 8px,\r\n 8px -8px,\r\n -8px 0;\r\n background-size: 16px 16px;\r\n\r\n &--circular {\r\n border-radius: 50%;\r\n }\r\n\r\n &__viewport img {\r\n display: block;\r\n max-width: none !important;\r\n }\r\n }\r\n\r\n .preview-empty {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n min-height: 120px;\r\n }\r\n\r\n .preview-thumbs {\r\n display: flex;\r\n gap: 12px;\r\n align-items: flex-end;\r\n justify-content: center;\r\n }\r\n\r\n .preview-thumb {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n align-items: center;\r\n\r\n &__box {\r\n overflow: hidden;\r\n border: 1px solid var(--border-color);\r\n border-radius: 4px;\r\n background: var(--body-color);\r\n\r\n &--circular {\r\n border-radius: 50%;\r\n }\r\n }\r\n\r\n &__viewport img {\r\n display: block;\r\n max-width: none !important;\r\n }\r\n\r\n &__label {\r\n font-size: 11px;\r\n color: var(--text-color-3);\r\n }\r\n }\r\n}\r\n</style>\r\n","<template>\r\n <div class=\"cropper-preview\">\r\n <div class=\"preview-label\">\r\n <C_Icon name=\"mdi:eye-outline\" />\r\n <span>裁剪预览</span>\r\n </div>\r\n\r\n <div\r\n ref=\"mainBoxRef\"\r\n class=\"preview-main\"\r\n :class=\"{ 'preview-main--circular': circular }\"\r\n >\r\n <template v-if=\"hasValidPreview\">\r\n <div class=\"preview-main__viewport\" :style=\"mainViewportStyle\">\r\n <div :style=\"previewData.div\">\r\n <img\r\n :src=\"previewData.url\"\r\n :style=\"previewData.img\"\r\n alt=\"preview\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n <div v-else class=\"preview-empty\">\r\n <C_Icon\r\n name=\"mdi:image-outline\"\r\n style=\"font-size: 32px; opacity: 0.2\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"preview-thumbs\">\r\n <div v-for=\"item in thumbSizes\" :key=\"item.label\" class=\"preview-thumb\">\r\n <div\r\n class=\"preview-thumb__box\"\r\n :class=\"{ 'preview-thumb__box--circular': circular }\"\r\n :style=\"{ width: `${item.size}px`, height: `${item.size}px` }\"\r\n >\r\n <template v-if=\"hasValidPreview\">\r\n <div\r\n class=\"preview-thumb__viewport\"\r\n :style=\"getThumbViewportStyle(item.size)\"\r\n >\r\n <div :style=\"previewData.div\">\r\n <img\r\n :src=\"previewData.url\"\r\n :style=\"previewData.img\"\r\n alt=\"thumb\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n </div>\r\n <span class=\"preview-thumb__label\">{{ item.label }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, onMounted, onBeforeUnmount } from \"vue\";\r\nimport C_Icon from \"../../C_Icon/index.vue\";\r\n\r\nconst props = defineProps<{\r\n previewData: any;\r\n circular?: boolean;\r\n}>();\r\n\r\nconst mainBoxRef = ref<HTMLElement | null>(null);\r\nconst mainBoxWidth = ref(200);\r\n\r\nconst thumbSizes = [\r\n { label: \"80px\", size: 80 },\r\n { label: \"48px\", size: 48 },\r\n { label: \"32px\", size: 32 },\r\n];\r\n\r\nconst hasValidPreview = computed(() => {\r\n const d = props.previewData;\r\n return d && d.url && d.w > 0 && d.h > 0;\r\n});\r\n\r\nconst mainViewportStyle = computed(() => {\r\n if (!hasValidPreview.value) return {};\r\n const { w } = props.previewData;\r\n const zoom = mainBoxWidth.value / w;\r\n return { zoom, overflow: \"hidden\" };\r\n});\r\n\r\nfunction getThumbViewportStyle(size: number) {\r\n if (!hasValidPreview.value) return {};\r\n const { w } = props.previewData;\r\n return { zoom: size / w, overflow: \"hidden\" };\r\n}\r\n\r\nlet resizeObserver: ResizeObserver | null = null;\r\n\r\nonMounted(() => {\r\n if (mainBoxRef.value) {\r\n mainBoxWidth.value = mainBoxRef.value.clientWidth;\r\n resizeObserver = new ResizeObserver((entries) => {\r\n requestAnimationFrame(() => {\r\n for (const entry of entries) {\r\n mainBoxWidth.value = entry.contentRect.width;\r\n }\r\n });\r\n });\r\n resizeObserver.observe(mainBoxRef.value);\r\n }\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n resizeObserver?.disconnect();\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cropper-preview {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n\r\n .preview-label {\r\n display: flex;\r\n gap: 6px;\r\n align-items: center;\r\n font-size: 13px;\r\n font-weight: 500;\r\n color: var(--text-color-2);\r\n }\r\n\r\n .preview-main {\r\n width: 100%;\r\n overflow: hidden;\r\n border: 1px solid var(--border-color);\r\n border-radius: 6px;\r\n background:\r\n linear-gradient(45deg, #f0f0f0 25%, transparent 25%),\r\n linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),\r\n linear-gradient(45deg, transparent 75%, #f0f0f0 75%),\r\n linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\r\n background-position:\r\n 0 0,\r\n 0 8px,\r\n 8px -8px,\r\n -8px 0;\r\n background-size: 16px 16px;\r\n\r\n &--circular {\r\n border-radius: 50%;\r\n }\r\n\r\n &__viewport img {\r\n display: block;\r\n max-width: none !important;\r\n }\r\n }\r\n\r\n .preview-empty {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n min-height: 120px;\r\n }\r\n\r\n .preview-thumbs {\r\n display: flex;\r\n gap: 12px;\r\n align-items: flex-end;\r\n justify-content: center;\r\n }\r\n\r\n .preview-thumb {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n align-items: center;\r\n\r\n &__box {\r\n overflow: hidden;\r\n border: 1px solid var(--border-color);\r\n border-radius: 4px;\r\n background: var(--body-color);\r\n\r\n &--circular {\r\n border-radius: 50%;\r\n }\r\n }\r\n\r\n &__viewport img {\r\n display: block;\r\n max-width: none !important;\r\n }\r\n\r\n &__label {\r\n font-size: 11px;\r\n color: var(--text-color-3);\r\n }\r\n }\r\n}\r\n</style>\r\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-02-25\n * @Description: 图片裁剪组件(基于 vue-cropper)\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\n-->\n<template>\n <NModal\n v-if=\"props.modal\"\n v-model:show=\"modalVisible\"\n preset=\"card\"\n :title=\"props.modalTitle || '图片裁剪'\"\n :style=\"{ width: '860px' }\"\n :mask-closable=\"false\"\n :closable=\"true\"\n >\n <div class=\"c-image-cropper__body\">\n <CropperToolbar\n v-if=\"props.showToolbar\"\n :current-ratio=\"currentRatio\"\n :ratio-presets=\"ratioPresets\"\n @ratio=\"handleRatio\"\n @rotate=\"rotate\"\n @flip-x=\"core.flipX\"\n @flip-y=\"core.flipY\"\n @zoom=\"core.zoom\"\n @reset=\"handleReset\"\n />\n <div class=\"c-image-cropper__workspace\">\n <div\n class=\"c-image-cropper__canvas\"\n :style=\"{ height: containerHeight }\"\n >\n <VueCropper\n v-if=\"imgSrc\"\n ref=\"modalCropperRef\"\n :img=\"imgSrc\"\n :output-size=\"props.outputQuality\"\n :output-type=\"vueCropperOutputType\"\n :can-scale=\"false\"\n :auto-crop=\"true\"\n :auto-crop-width=\"autoCropSize.width\"\n :auto-crop-height=\"autoCropSize.height\"\n :fixed=\"isFixed\"\n :fixed-number=\"fixedNumber\"\n :center-box=\"true\"\n :info=\"true\"\n :info-true=\"true\"\n :can-move=\"true\"\n :can-move-box=\"true\"\n :original=\"false\"\n :high=\"true\"\n :full=\"false\"\n :mode=\"'contain'\"\n @real-time=\"handleRealTimePreview\"\n @img-load=\"onImgLoad\"\n />\n <div v-else class=\"c-image-cropper__placeholder\">\n <C_Icon\n name=\"mdi:image-plus-outline\"\n style=\"font-size: 48px; opacity: 0.3\"\n />\n <span>请选择图片</span>\n </div>\n </div>\n <div\n v-if=\"props.showPreview && imgSrc\"\n class=\"c-image-cropper__preview-panel\"\n >\n <CropperPreview\n :preview-data=\"previewData\"\n :circular=\"props.circular\"\n />\n </div>\n </div>\n </div>\n <template #footer>\n <NSpace justify=\"end\">\n <NButton @click=\"handleCancel\">取消</NButton>\n <NButton type=\"primary\" :loading=\"exporting\" @click=\"handleConfirm\"\n >确认裁剪</NButton\n >\n </NSpace>\n </template>\n </NModal>\n\n <div v-else class=\"c-image-cropper\">\n <div class=\"c-image-cropper__body\">\n <CropperToolbar\n v-if=\"props.showToolbar\"\n :current-ratio=\"currentRatio\"\n :ratio-presets=\"ratioPresets\"\n @ratio=\"handleRatio\"\n @rotate=\"rotate\"\n @flip-x=\"core.flipX\"\n @flip-y=\"core.flipY\"\n @zoom=\"core.zoom\"\n @reset=\"handleReset\"\n />\n <div class=\"c-image-cropper__workspace\">\n <div\n class=\"c-image-cropper__canvas\"\n :style=\"{ height: containerHeight }\"\n >\n <VueCropper\n v-if=\"imgSrc\"\n ref=\"inlineCropperRef\"\n :img=\"imgSrc\"\n :output-size=\"props.outputQuality\"\n :output-type=\"vueCropperOutputType\"\n :can-scale=\"false\"\n :auto-crop=\"true\"\n :auto-crop-width=\"autoCropSize.width\"\n :auto-crop-height=\"autoCropSize.height\"\n :fixed=\"isFixed\"\n :fixed-number=\"fixedNumber\"\n :center-box=\"true\"\n :info=\"true\"\n :info-true=\"true\"\n :can-move=\"true\"\n :can-move-box=\"true\"\n :original=\"false\"\n :high=\"true\"\n :full=\"false\"\n :mode=\"'contain'\"\n @real-time=\"handleRealTimePreview\"\n @img-load=\"onImgLoad\"\n />\n <div v-else class=\"c-image-cropper__placeholder\">\n <C_Icon\n name=\"mdi:image-plus-outline\"\n style=\"font-size: 48px; opacity: 0.3\"\n />\n <span>请选择图片</span>\n </div>\n </div>\n <div\n v-if=\"props.showPreview && imgSrc\"\n class=\"c-image-cropper__preview-panel\"\n >\n <CropperPreview\n :preview-data=\"previewData\"\n :circular=\"props.circular\"\n />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch } from \"vue\";\nimport { NModal, NButton, NSpace } from \"naive-ui\";\nimport { VueCropper } from \"vue-cropper\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport type {\n AspectRatioPreset,\n CropOutputFormat,\n ImageCropperExpose,\n ImageCropperProps,\n} from \"./types\";\nimport { useCropperCore } from \"./composables/useCropperCore\";\nimport CropperToolbar from \"./components/CropperToolbar.vue\";\nimport CropperPreview from \"./components/CropperPreview.vue\";\n\ndefineOptions({ name: \"C_ImageCropper\" });\n\nconst props = withDefaults(defineProps<ImageCropperProps>(), {\n src: \"\",\n aspectRatio: 0,\n outputFormat: \"png\",\n outputQuality: 0.92,\n maxOutputWidth: 0,\n maxOutputHeight: 0,\n showPreview: true,\n showToolbar: true,\n circular: false,\n disabled: false,\n height: \"400px\",\n modal: false,\n modalTitle: \"图片裁剪\",\n});\n\nconst emit = defineEmits<{\n crop: [result: any];\n ready: [];\n error: [error: Event];\n confirm: [result: any];\n cancel: [];\n}>();\n\nconst imgSrc = ref(props.src);\nconst currentRatio = ref(props.aspectRatio);\nconst modalVisible = ref(false);\nconst exporting = ref(false);\nconst previewData = ref<any>(null);\n\nconst inlineCropperRef = ref<any>(null);\nconst modalCropperRef = ref<any>(null);\n\nconst activeCropperRef = computed(() =>\n props.modal ? modalCropperRef.value : inlineCropperRef.value,\n);\n\nconst containerHeight = computed(() =>\n typeof props.height === \"number\" ? `${props.height}px` : props.height,\n);\n\nconst vueCropperOutputType = computed(() => {\n const map: Record<CropOutputFormat, string> = {\n png: \"png\",\n jpeg: \"jpeg\",\n webp: \"webp\",\n };\n return map[props.outputFormat as CropOutputFormat] || \"png\";\n});\n\nconst isFixed = computed(() => currentRatio.value > 0);\n\nconst fixedNumber = computed(() => {\n if (currentRatio.value <= 0) return [1, 1];\n if (currentRatio.value === 1) return [1, 1];\n if (Math.abs(currentRatio.value - 16 / 9) < 0.01) return [16, 9];\n if (Math.abs(currentRatio.value - 4 / 3) < 0.01) return [4, 3];\n if (Math.abs(currentRatio.value - 3 / 2) < 0.01) return [3, 2];\n return [Math.round(currentRatio.value * 100), 100];\n});\n\nconst autoCropSize = computed(() => ({\n width: 300,\n height: currentRatio.value > 0 ? 300 / currentRatio.value : 200,\n}));\n\nconst ratioPresets: AspectRatioPreset[] = [\n { label: \"自由\", value: 0 },\n { label: \"1:1\", value: 1 },\n { label: \"16:9\", value: 16 / 9 },\n { label: \"4:3\", value: 4 / 3 },\n { label: \"3:2\", value: 3 / 2 },\n];\n\nconst formatRef = computed(() => props.outputFormat as CropOutputFormat);\nconst qualityRef = computed(() => props.outputQuality);\nconst maxWRef = computed(() => props.maxOutputWidth);\nconst maxHRef = computed(() => props.maxOutputHeight);\n\nconst core = useCropperCore({\n format: formatRef,\n quality: qualityRef,\n maxWidth: maxWRef,\n maxHeight: maxHRef,\n});\n\nwatch(activeCropperRef, (v) => {\n core.cropperRef.value = v;\n});\n\nfunction handleRealTimePreview(data: any) {\n previewData.value = data;\n}\nfunction onImgLoad(status: string) {\n if (status === \"success\") emit(\"ready\");\n}\nfunction rotate(angle: number) {\n core.rotate(angle);\n}\nfunction handleRatio(v: number) {\n currentRatio.value = v;\n}\nfunction handleReset() {\n core.reset();\n}\n\nasync function handleConfirm() {\n exporting.value = true;\n try {\n const result = await core.getCropResult();\n emit(\"confirm\", result);\n emit(\"crop\", result);\n modalVisible.value = false;\n } finally {\n exporting.value = false;\n }\n}\n\nfunction handleCancel() {\n modalVisible.value = false;\n emit(\"cancel\");\n}\n\nfunction loadFile(file: File) {\n const reader = new FileReader();\n reader.onload = (e) => {\n imgSrc.value = e.target?.result as string;\n };\n reader.readAsDataURL(file);\n}\n\nwatch(\n () => props.src,\n (v) => {\n imgSrc.value = v;\n },\n);\nwatch(\n () => props.aspectRatio,\n (v) => {\n currentRatio.value = v;\n },\n);\n\ndefineExpose<ImageCropperExpose>({\n getCropResult: core.getCropResult,\n rotate: core.rotate,\n zoom: core.zoom,\n flipX: core.flipX,\n flipY: core.flipY,\n reset: core.reset,\n setAspectRatio: (r: number) => {\n currentRatio.value = r;\n },\n loadFile,\n open: (src?: string) => {\n if (src) imgSrc.value = src;\n modalVisible.value = true;\n },\n close: () => {\n modalVisible.value = false;\n },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-02-25\n * @Description: 图片裁剪组件(基于 vue-cropper)\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\n-->\n<template>\n <NModal\n v-if=\"props.modal\"\n v-model:show=\"modalVisible\"\n preset=\"card\"\n :title=\"props.modalTitle || '图片裁剪'\"\n :style=\"{ width: '860px' }\"\n :mask-closable=\"false\"\n :closable=\"true\"\n >\n <div class=\"c-image-cropper__body\">\n <CropperToolbar\n v-if=\"props.showToolbar\"\n :current-ratio=\"currentRatio\"\n :ratio-presets=\"ratioPresets\"\n @ratio=\"handleRatio\"\n @rotate=\"rotate\"\n @flip-x=\"core.flipX\"\n @flip-y=\"core.flipY\"\n @zoom=\"core.zoom\"\n @reset=\"handleReset\"\n />\n <div class=\"c-image-cropper__workspace\">\n <div\n class=\"c-image-cropper__canvas\"\n :style=\"{ height: containerHeight }\"\n >\n <VueCropper\n v-if=\"imgSrc\"\n ref=\"modalCropperRef\"\n :img=\"imgSrc\"\n :output-size=\"props.outputQuality\"\n :output-type=\"vueCropperOutputType\"\n :can-scale=\"false\"\n :auto-crop=\"true\"\n :auto-crop-width=\"autoCropSize.width\"\n :auto-crop-height=\"autoCropSize.height\"\n :fixed=\"isFixed\"\n :fixed-number=\"fixedNumber\"\n :center-box=\"true\"\n :info=\"true\"\n :info-true=\"true\"\n :can-move=\"true\"\n :can-move-box=\"true\"\n :original=\"false\"\n :high=\"true\"\n :full=\"false\"\n :mode=\"'contain'\"\n @real-time=\"handleRealTimePreview\"\n @img-load=\"onImgLoad\"\n />\n <div v-else class=\"c-image-cropper__placeholder\">\n <C_Icon\n name=\"mdi:image-plus-outline\"\n style=\"font-size: 48px; opacity: 0.3\"\n />\n <span>请选择图片</span>\n </div>\n </div>\n <div\n v-if=\"props.showPreview && imgSrc\"\n class=\"c-image-cropper__preview-panel\"\n >\n <CropperPreview\n :preview-data=\"previewData\"\n :circular=\"props.circular\"\n />\n </div>\n </div>\n </div>\n <template #footer>\n <NSpace justify=\"end\">\n <NButton @click=\"handleCancel\">取消</NButton>\n <NButton type=\"primary\" :loading=\"exporting\" @click=\"handleConfirm\"\n >确认裁剪</NButton\n >\n </NSpace>\n </template>\n </NModal>\n\n <div v-else class=\"c-image-cropper\">\n <div class=\"c-image-cropper__body\">\n <CropperToolbar\n v-if=\"props.showToolbar\"\n :current-ratio=\"currentRatio\"\n :ratio-presets=\"ratioPresets\"\n @ratio=\"handleRatio\"\n @rotate=\"rotate\"\n @flip-x=\"core.flipX\"\n @flip-y=\"core.flipY\"\n @zoom=\"core.zoom\"\n @reset=\"handleReset\"\n />\n <div class=\"c-image-cropper__workspace\">\n <div\n class=\"c-image-cropper__canvas\"\n :style=\"{ height: containerHeight }\"\n >\n <VueCropper\n v-if=\"imgSrc\"\n ref=\"inlineCropperRef\"\n :img=\"imgSrc\"\n :output-size=\"props.outputQuality\"\n :output-type=\"vueCropperOutputType\"\n :can-scale=\"false\"\n :auto-crop=\"true\"\n :auto-crop-width=\"autoCropSize.width\"\n :auto-crop-height=\"autoCropSize.height\"\n :fixed=\"isFixed\"\n :fixed-number=\"fixedNumber\"\n :center-box=\"true\"\n :info=\"true\"\n :info-true=\"true\"\n :can-move=\"true\"\n :can-move-box=\"true\"\n :original=\"false\"\n :high=\"true\"\n :full=\"false\"\n :mode=\"'contain'\"\n @real-time=\"handleRealTimePreview\"\n @img-load=\"onImgLoad\"\n />\n <div v-else class=\"c-image-cropper__placeholder\">\n <C_Icon\n name=\"mdi:image-plus-outline\"\n style=\"font-size: 48px; opacity: 0.3\"\n />\n <span>请选择图片</span>\n </div>\n </div>\n <div\n v-if=\"props.showPreview && imgSrc\"\n class=\"c-image-cropper__preview-panel\"\n >\n <CropperPreview\n :preview-data=\"previewData\"\n :circular=\"props.circular\"\n />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch } from \"vue\";\nimport { NModal, NButton, NSpace } from \"naive-ui\";\nimport { VueCropper } from \"vue-cropper\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport type {\n AspectRatioPreset,\n CropOutputFormat,\n ImageCropperExpose,\n ImageCropperProps,\n} from \"./types\";\nimport { useCropperCore } from \"./composables/useCropperCore\";\nimport CropperToolbar from \"./components/CropperToolbar.vue\";\nimport CropperPreview from \"./components/CropperPreview.vue\";\n\ndefineOptions({ name: \"C_ImageCropper\" });\n\nconst props = withDefaults(defineProps<ImageCropperProps>(), {\n src: \"\",\n aspectRatio: 0,\n outputFormat: \"png\",\n outputQuality: 0.92,\n maxOutputWidth: 0,\n maxOutputHeight: 0,\n showPreview: true,\n showToolbar: true,\n circular: false,\n disabled: false,\n height: \"400px\",\n modal: false,\n modalTitle: \"图片裁剪\",\n});\n\nconst emit = defineEmits<{\n crop: [result: any];\n ready: [];\n error: [error: Event];\n confirm: [result: any];\n cancel: [];\n}>();\n\nconst imgSrc = ref(props.src);\nconst currentRatio = ref(props.aspectRatio);\nconst modalVisible = ref(false);\nconst exporting = ref(false);\nconst previewData = ref<any>(null);\n\nconst inlineCropperRef = ref<any>(null);\nconst modalCropperRef = ref<any>(null);\n\nconst activeCropperRef = computed(() =>\n props.modal ? modalCropperRef.value : inlineCropperRef.value,\n);\n\nconst containerHeight = computed(() =>\n typeof props.height === \"number\" ? `${props.height}px` : props.height,\n);\n\nconst vueCropperOutputType = computed(() => {\n const map: Record<CropOutputFormat, string> = {\n png: \"png\",\n jpeg: \"jpeg\",\n webp: \"webp\",\n };\n return map[props.outputFormat as CropOutputFormat] || \"png\";\n});\n\nconst isFixed = computed(() => currentRatio.value > 0);\n\nconst fixedNumber = computed(() => {\n if (currentRatio.value <= 0) return [1, 1];\n if (currentRatio.value === 1) return [1, 1];\n if (Math.abs(currentRatio.value - 16 / 9) < 0.01) return [16, 9];\n if (Math.abs(currentRatio.value - 4 / 3) < 0.01) return [4, 3];\n if (Math.abs(currentRatio.value - 3 / 2) < 0.01) return [3, 2];\n return [Math.round(currentRatio.value * 100), 100];\n});\n\nconst autoCropSize = computed(() => ({\n width: 300,\n height: currentRatio.value > 0 ? 300 / currentRatio.value : 200,\n}));\n\nconst ratioPresets: AspectRatioPreset[] = [\n { label: \"自由\", value: 0 },\n { label: \"1:1\", value: 1 },\n { label: \"16:9\", value: 16 / 9 },\n { label: \"4:3\", value: 4 / 3 },\n { label: \"3:2\", value: 3 / 2 },\n];\n\nconst formatRef = computed(() => props.outputFormat as CropOutputFormat);\nconst qualityRef = computed(() => props.outputQuality);\nconst maxWRef = computed(() => props.maxOutputWidth);\nconst maxHRef = computed(() => props.maxOutputHeight);\n\nconst core = useCropperCore({\n format: formatRef,\n quality: qualityRef,\n maxWidth: maxWRef,\n maxHeight: maxHRef,\n});\n\nwatch(activeCropperRef, (v) => {\n core.cropperRef.value = v;\n});\n\nfunction handleRealTimePreview(data: any) {\n previewData.value = data;\n}\nfunction onImgLoad(status: string) {\n if (status === \"success\") emit(\"ready\");\n}\nfunction rotate(angle: number) {\n core.rotate(angle);\n}\nfunction handleRatio(v: number) {\n currentRatio.value = v;\n}\nfunction handleReset() {\n core.reset();\n}\n\nasync function handleConfirm() {\n exporting.value = true;\n try {\n const result = await core.getCropResult();\n emit(\"confirm\", result);\n emit(\"crop\", result);\n modalVisible.value = false;\n } finally {\n exporting.value = false;\n }\n}\n\nfunction handleCancel() {\n modalVisible.value = false;\n emit(\"cancel\");\n}\n\nfunction loadFile(file: File) {\n const reader = new FileReader();\n reader.onload = (e) => {\n imgSrc.value = e.target?.result as string;\n };\n reader.readAsDataURL(file);\n}\n\nwatch(\n () => props.src,\n (v) => {\n imgSrc.value = v;\n },\n);\nwatch(\n () => props.aspectRatio,\n (v) => {\n currentRatio.value = v;\n },\n);\n\ndefineExpose<ImageCropperExpose>({\n getCropResult: core.getCropResult,\n rotate: core.rotate,\n zoom: core.zoom,\n flipX: core.flipX,\n flipY: core.flipY,\n reset: core.reset,\n setAspectRatio: (r: number) => {\n currentRatio.value = r;\n },\n loadFile,\n open: (src?: string) => {\n if (src) imgSrc.value = src;\n modalVisible.value = true;\n },\n close: () => {\n modalVisible.value = false;\n },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"C_Language.js","names":["modelValue"],"sources":["../src/components/C_Language/index.vue","../src/components/C_Language/index.vue"],"sourcesContent":["<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-19\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 <NDropdown\r\n size=\"small\"\r\n trigger=\"hover\"\r\n :options=\"finalOptions\"\r\n :value=\"modelValue\"\r\n @select=\"handleLanguageChange\"\r\n >\r\n <NButton text>\r\n <div class=\"flex items-center\">\r\n <C_Icon\r\n name=\"mdi:language\"\r\n :size=\"18\"\r\n :title=\"tooltipText\"\r\n />\r\n </div>\r\n </NButton>\r\n </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { computed, h } from 'vue'\r\n import { NDropdown, NButton } from 'naive-ui'\r\n import C_Icon from '../C_Icon/index.vue'\r\n import type { LanguageOption } from './types'\r\n\r\n defineOptions({ name: 'C_Language' })\r\n\r\n interface LegacyLanguageOption extends LanguageOption {\r\n key: string\r\n label: string\r\n iconClass?: string\r\n }\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n modelValue?: string\r\n options?: LegacyLanguageOption[]\r\n /** Tooltip 文案,默认 \"语言切换\" */\r\n tooltip?: string\r\n }>(),\r\n {\r\n modelValue: 'zh-cn',\r\n tooltip: '语言切换',\r\n options: () => [\r\n { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n ],\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n 'update:modelValue': [key: string]\r\n change: [key: string]\r\n }>()\r\n\r\n /** 当前语言显示名 */\r\n const currentLabel = computed(() => {\r\n const opt = props.options.find(o => o.key === props.modelValue)\r\n return opt?.label ?? props.modelValue\r\n })\r\n\r\n const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n const finalOptions = computed(() =>\r\n props.options.map(opt => ({\r\n key: opt.key,\r\n label: opt.label,\r\n icon: opt.iconClass\r\n ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n : undefined,\r\n }))\r\n )\r\n\r\n const handleLanguageChange = (key: string) => {\r\n if (key === props.modelValue) return\r\n emit('update:modelValue', key)\r\n emit('change', key)\r\n }\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-19\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 <NDropdown\r\n size=\"small\"\r\n trigger=\"hover\"\r\n :options=\"finalOptions\"\r\n :value=\"modelValue\"\r\n @select=\"handleLanguageChange\"\r\n >\r\n <NButton text>\r\n <div class=\"flex items-center\">\r\n <C_Icon\r\n name=\"mdi:language\"\r\n :size=\"18\"\r\n :title=\"tooltipText\"\r\n />\r\n </div>\r\n </NButton>\r\n </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { computed, h } from 'vue'\r\n import { NDropdown, NButton } from 'naive-ui'\r\n import C_Icon from '../C_Icon/index.vue'\r\n import type { LanguageOption } from './types'\r\n\r\n defineOptions({ name: 'C_Language' })\r\n\r\n interface LegacyLanguageOption extends LanguageOption {\r\n key: string\r\n label: string\r\n iconClass?: string\r\n }\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n modelValue?: string\r\n options?: LegacyLanguageOption[]\r\n /** Tooltip 文案,默认 \"语言切换\" */\r\n tooltip?: string\r\n }>(),\r\n {\r\n modelValue: 'zh-cn',\r\n tooltip: '语言切换',\r\n options: () => [\r\n { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n ],\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n 'update:modelValue': [key: string]\r\n change: [key: string]\r\n }>()\r\n\r\n /** 当前语言显示名 */\r\n const currentLabel = computed(() => {\r\n const opt = props.options.find(o => o.key === props.modelValue)\r\n return opt?.label ?? props.modelValue\r\n })\r\n\r\n const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n const finalOptions = computed(() =>\r\n props.options.map(opt => ({\r\n key: opt.key,\r\n label: opt.label,\r\n icon: opt.iconClass\r\n ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n : undefined,\r\n }))\r\n )\r\n\r\n const handleLanguageChange = (key: string) => {\r\n if (key === props.modelValue) return\r\n emit('update:modelValue', key)\r\n emit('change', key)\r\n }\r\n</script>\r\n"],"mappings":"+gBAyCE,IAAM,EAAQ,EAmBR,EAAO,EAMP,GAAA,EAAA,EAAA,cACQ,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAW,EACnD,OAAS,EAAM,WAC3B,CAEI,GAAA,EAAA,EAAA,cAA6B,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAG,CAExE,GAAA,EAAA,EAAA,cACJ,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,eAAA,EAAA,EAAA,GACE,EAAA,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAC,CAClD,IAAA,GACL,EAAE,CACJ,CAEK,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAI,CAC9B,EAAK,SAAU,EAAI,iEC9DT,EAAA,UAAA,CAAA,CAfV,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAOA,EAAAA,WACP,SAAQ,8BAUC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CARD,KAAA,GAAI,CAAA,2BAOL,EAAA,EAAA,EAAA,oBAAA,MANN,EAMM,EAAA,EAAA,EAAA,aADF,EAAA,EAAA,CAHA,KAAK,eACJ,KAAM,GACN,MAAO,EAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"C_Language2.js","names":["modelValue"],"sources":["../src/components/C_Language/index.vue","../src/components/C_Language/index.vue"],"sourcesContent":["<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-19\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 <NDropdown\r\n size=\"small\"\r\n trigger=\"hover\"\r\n :options=\"finalOptions\"\r\n :value=\"modelValue\"\r\n @select=\"handleLanguageChange\"\r\n >\r\n <NButton text>\r\n <div class=\"flex items-center\">\r\n <C_Icon\r\n name=\"mdi:language\"\r\n :size=\"18\"\r\n :title=\"tooltipText\"\r\n />\r\n </div>\r\n </NButton>\r\n </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { computed, h } from 'vue'\r\n import { NDropdown, NButton } from 'naive-ui'\r\n import C_Icon from '../C_Icon/index.vue'\r\n import type { LanguageOption } from './types'\r\n\r\n defineOptions({ name: 'C_Language' })\r\n\r\n interface LegacyLanguageOption extends LanguageOption {\r\n key: string\r\n label: string\r\n iconClass?: string\r\n }\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n modelValue?: string\r\n options?: LegacyLanguageOption[]\r\n /** Tooltip 文案,默认 \"语言切换\" */\r\n tooltip?: string\r\n }>(),\r\n {\r\n modelValue: 'zh-cn',\r\n tooltip: '语言切换',\r\n options: () => [\r\n { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n ],\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n 'update:modelValue': [key: string]\r\n change: [key: string]\r\n }>()\r\n\r\n /** 当前语言显示名 */\r\n const currentLabel = computed(() => {\r\n const opt = props.options.find(o => o.key === props.modelValue)\r\n return opt?.label ?? props.modelValue\r\n })\r\n\r\n const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n const finalOptions = computed(() =>\r\n props.options.map(opt => ({\r\n key: opt.key,\r\n label: opt.label,\r\n icon: opt.iconClass\r\n ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n : undefined,\r\n }))\r\n )\r\n\r\n const handleLanguageChange = (key: string) => {\r\n if (key === props.modelValue) return\r\n emit('update:modelValue', key)\r\n emit('change', key)\r\n }\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-19\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 <NDropdown\r\n size=\"small\"\r\n trigger=\"hover\"\r\n :options=\"finalOptions\"\r\n :value=\"modelValue\"\r\n @select=\"handleLanguageChange\"\r\n >\r\n <NButton text>\r\n <div class=\"flex items-center\">\r\n <C_Icon\r\n name=\"mdi:language\"\r\n :size=\"18\"\r\n :title=\"tooltipText\"\r\n />\r\n </div>\r\n </NButton>\r\n </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { computed, h } from 'vue'\r\n import { NDropdown, NButton } from 'naive-ui'\r\n import C_Icon from '../C_Icon/index.vue'\r\n import type { LanguageOption } from './types'\r\n\r\n defineOptions({ name: 'C_Language' })\r\n\r\n interface LegacyLanguageOption extends LanguageOption {\r\n key: string\r\n label: string\r\n iconClass?: string\r\n }\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n modelValue?: string\r\n options?: LegacyLanguageOption[]\r\n /** Tooltip 文案,默认 \"语言切换\" */\r\n tooltip?: string\r\n }>(),\r\n {\r\n modelValue: 'zh-cn',\r\n tooltip: '语言切换',\r\n options: () => [\r\n { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n ],\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n 'update:modelValue': [key: string]\r\n change: [key: string]\r\n }>()\r\n\r\n /** 当前语言显示名 */\r\n const currentLabel = computed(() => {\r\n const opt = props.options.find(o => o.key === props.modelValue)\r\n return opt?.label ?? props.modelValue\r\n })\r\n\r\n const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n const finalOptions = computed(() =>\r\n props.options.map(opt => ({\r\n key: opt.key,\r\n label: opt.label,\r\n icon: opt.iconClass\r\n ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n : undefined,\r\n }))\r\n )\r\n\r\n const handleLanguageChange = (key: string) => {\r\n if (key === props.modelValue) return\r\n emit('update:modelValue', key)\r\n emit('change', key)\r\n }\r\n</script>\r\n"],"mappings":"0oBAyCE,IAAM,EAAQ,EAmBR,EAAO,EAMP,EAAe,MACP,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAW,EACnD,OAAS,EAAM,WAC3B,CAEI,EAAc,MAAe,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAG,CAExE,EAAe,MACnB,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,cACA,EAAE,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAC,CAClD,IAAA,GACL,EAAE,CACJ,CAEK,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAI,CAC9B,EAAK,SAAU,EAAI,qBC9ErB,EAgBY,EAAA,EAAA,CAAA,CAfV,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAOA,EAAAA,WACP,SAAQ,kBAUC,CARV,EAQU,EAAA,EAAA,CAAA,CARD,KAAA,GAAI,CAAA,eAOL,CANN,EAMM,MANN,EAMM,CALJ,EAIE,EAAA,CAHA,KAAK,eACJ,KAAM,GACN,MAAO,EAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"C_Login-BrQBs_m4.css","names":[],"sources":["../src/components/C_Login/index.vue?vue&type=style&index=0&scoped=c3995da6&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//**\n * C_Login 组件样式\n * 通过 CSS 变量覆盖主题,示例:\n * .my-login-wrapper .c-login-panel {\n * --cl-panel-bg: rgba(255,255,255,0.95);\n * --cl-text-color: #1a1a1a;\n * }\n */\n/* ===== CSS 变量默认值(暗色玻璃风格) ===== */\n.c-login-panel[data-v-c3995da6] {\n /* 面板 */\n --cl-panel-bg: rgba(255, 255, 255, 0.1);\n --cl-panel-border: rgba(255, 255, 255, 0.18);\n --cl-panel-radius: 16px;\n --cl-panel-padding: 20px 26px 16px;\n --cl-panel-width: 400px;\n --cl-panel-backdrop: blur(20px);\n --cl-panel-shadow: 0 8px 32px rgba(0, 10, 60, 0.12), 0 2px 8px rgba(0, 10, 40, 0.06);\n /* 文字 */\n --cl-text-primary: rgba(255, 255, 255, 0.95);\n --cl-text-secondary: rgba(255, 255, 255, 0.55);\n --cl-text-hint: rgba(255, 255, 255, 0.4);\n /* 输入框 */\n --cl-input-bg: transparent;\n --cl-input-border: none;\n --cl-input-underline: rgba(255, 255, 255, 0.25);\n --cl-input-underline-hover: rgba(255, 255, 255, 0.5);\n --cl-input-underline-focus: rgba(24, 89, 233, 0.85);\n --cl-input-text: rgba(255, 255, 255, 0.95);\n --cl-input-placeholder: rgba(255, 255, 255, 0.45);\n --cl-input-icon: rgba(255, 255, 255, 0.6);\n /* Tab */\n --cl-tab-text: rgba(255, 255, 255, 0.55);\n --cl-tab-active: rgba(255, 255, 255, 0.95);\n --cl-tab-bar: #1859e9;\n /* 按钮 */\n --cl-btn-bg: linear-gradient(135deg, #1859e9, #1040a0);\n --cl-btn-bg-hover: linear-gradient(135deg, #2464f0, #1545ad);\n --cl-btn-shadow: 0 4px 15px rgba(24, 89, 233, 0.3);\n --cl-btn-shadow-hover: 0 6px 20px rgba(24, 89, 233, 0.4);\n --cl-btn-height: 40px;\n --cl-btn-radius: 8px;\n /* 社交按钮 */\n --cl-social-btn-bg: rgba(255, 255, 255, 0.08);\n --cl-social-btn-border: rgba(255, 255, 255, 0.18);\n --cl-social-btn-hover-bg: rgba(255, 255, 255, 0.16);\n --cl-social-size: 36px;\n /* 分割线 */\n --cl-divider-color: rgba(255, 255, 255, 0.15);\n /* 链接 */\n --cl-link-color: rgba(255, 255, 255, 0.6);\n --cl-link-hover: rgba(255, 255, 255, 0.95);\n /* 间距 */\n --cl-gap: 10px;\n --cl-gap-sm: 6px;\n}\n\n/* ===== 面板容器 ===== */\n.c-login-panel[data-v-c3995da6] {\n width: var(--cl-panel-width);\n background: var(--cl-panel-bg);\n border: 1px solid var(--cl-panel-border);\n border-radius: var(--cl-panel-radius);\n padding: var(--cl-panel-padding);\n backdrop-filter: var(--cl-panel-backdrop);\n box-shadow: var(--cl-panel-shadow);\n overflow: hidden;\n position: relative;\n transition: box-shadow 0.3s ease;\n /* 顶部光泽线 */\n /* 玻璃内衬 */\n}\n.c-login-panel[data-v-c3995da6]::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -50%;\n width: 200%;\n height: 1px;\n background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);\n pointer-events: none;\n}\n.c-login-panel[data-v-c3995da6]::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(24, 89, 233, 0.04) 100%);\n pointer-events: none;\n border-radius: inherit;\n z-index: 0;\n}\n.c-login-panel[data-v-c3995da6] > * {\n position: relative;\n z-index: 1;\n}\n\n/* ===== Header ===== */\n.c-login__header[data-v-c3995da6] {\n text-align: center;\n margin-bottom: 10px;\n}\n\n/* ===== 返回按钮(登录/注册下方块级按钮) ===== */\n.c-login__back-btn[data-v-c3995da6] {\n margin-top: 10px;\n height: var(--cl-btn-height) !important;\n border-radius: var(--cl-btn-radius) !important;\n background: transparent !important;\n border: 1px solid var(--cl-input-underline) !important;\n color: var(--cl-text-secondary) !important;\n font-size: 14px;\n font-weight: 400;\n letter-spacing: 2px;\n transition: all 0.25s ease !important;\n}\n.c-login__back-btn[data-v-c3995da6]:hover {\n background: rgba(255, 255, 255, 0.06) !important;\n border-color: var(--cl-input-underline-hover) !important;\n color: var(--cl-text-primary) !important;\n}\n.c-login__logo[data-v-c3995da6] {\n display: flex;\n justify-content: center;\n margin-bottom: 4px;\n}\n.c-login__logo .c-login__logo-icon[data-v-c3995da6] {\n color: var(--cl-text-primary);\n filter: drop-shadow(0 2px 8px rgba(24, 89, 233, 0.4));\n}\n.c-login__title[data-v-c3995da6] {\n margin: 0 0 2px;\n font-size: 20px;\n font-weight: 600;\n color: var(--cl-text-primary);\n letter-spacing: 0.5px;\n}\n.c-login__subtitle[data-v-c3995da6] {\n margin: 0;\n font-size: 13px;\n color: var(--cl-text-secondary);\n}\n\n/* ===== 登录方式切换(底部) ===== */\n.c-login__mode-switch[data-v-c3995da6] {\n margin-top: 14px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n}\n.c-login__mode-btn[data-v-c3995da6] {\n --n-border: none !important;\n --n-border-hover: none !important;\n --n-border-pressed: none !important;\n --n-border-focus: none !important;\n --n-box-shadow-focus: none !important;\n border-radius: 9px !important;\n border: none !important;\n box-shadow: none !important;\n background: rgba(255, 255, 255, 0.04) !important;\n color: var(--cl-text-secondary) !important;\n transition: all 0.2s ease !important;\n}\n.c-login__mode-btn[data-v-c3995da6]:hover {\n background: rgba(255, 255, 255, 0.1) !important;\n color: var(--cl-text-primary) !important;\n}\n.c-login__mode-btn.is-active[data-v-c3995da6] {\n background: color-mix(in srgb, var(--cl-tab-bar) 22%, transparent) !important;\n color: var(--cl-tab-active) !important;\n}\n\n/* ===== 表单 ===== */\n.c-login__form[data-v-c3995da6] {\n margin-top: 6px;\n}\n.c-login__form-item[data-v-c3995da6] {\n margin-bottom: 6px !important;\n /* 彻底干掉 NaiveUI FormItem 内置间距 CSS 变量 */\n /* 校验信息减少占用 */\n /* 底线风格输入框 */\n}\n.c-login__form-item[data-v-c3995da6] .n-form-item {\n --n-feedback-padding: 2px 0 0 0 !important;\n --n-feedback-height: 0 !important;\n --n-blank-height: 0 !important;\n --n-label-height: 0 !important;\n}\n.c-login__form-item[data-v-c3995da6] .n-form-item-label {\n display: none;\n}\n.c-login__form-item[data-v-c3995da6] .n-form-item-feedback-wrapper {\n min-height: 0 !important;\n padding-top: 0 !important;\n line-height: 1.4;\n}\n.c-login__form-item[data-v-c3995da6] .n-form-item-feedback {\n font-size: 11px !important;\n line-height: 1.4;\n}\n.c-login__form-item[data-v-c3995da6] .n-form-item-blank {\n min-height: 0 !important;\n}\n.c-login__form-item[data-v-c3995da6] .n-input {\n --n-border: none !important;\n --n-border-hover: none !important;\n --n-border-focus: none !important;\n --n-border-disabled: none !important;\n --n-box-shadow: none !important;\n --n-color: var(--cl-input-bg) !important;\n --n-text-color: var(--cl-input-text) !important;\n --n-placeholder-color: var(--cl-input-placeholder) !important;\n --n-caret-color: var(--cl-tab-bar) !important;\n background: var(--cl-input-bg) !important;\n border-bottom: 1px solid var(--cl-input-underline) !important;\n border-radius: 0 !important;\n padding: 5px 2px !important;\n transition: border-color 0.25s ease;\n}\n.c-login__form-item[data-v-c3995da6] .n-input:hover {\n border-bottom-color: var(--cl-input-underline-hover) !important;\n}\n.c-login__form-item[data-v-c3995da6] .n-input:focus-within {\n border-bottom-color: var(--cl-input-underline-focus) !important;\n}\n.c-login__form-item[data-v-c3995da6] .n-input .n-input__input-el {\n color: var(--cl-input-text) !important;\n}\n.c-login__form-item[data-v-c3995da6] .n-input .n-input__input-el::placeholder {\n color: var(--cl-input-placeholder) !important;\n}\n.c-login__form-item[data-v-c3995da6] .n-input .n-input__prefix,\n.c-login__form-item[data-v-c3995da6] .n-input .n-input__suffix {\n color: var(--cl-input-icon) !important;\n}\n\n/* ===== 辅助行:记住我 + 忘记密码 ===== */\n.c-login__aux-row[data-v-c3995da6] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 8px;\n margin-bottom: 14px;\n}\n.c-login__remember[data-v-c3995da6] .n-checkbox__label {\n color: var(--cl-text-secondary) !important;\n font-size: 13px;\n}\n.c-login__remember[data-v-c3995da6] .n-checkbox-box {\n --n-border: 1px solid var(--cl-input-underline) !important;\n}\n.c-login__forgot[data-v-c3995da6] {\n font-size: 13px;\n color: var(--cl-link-color);\n cursor: pointer;\n transition: color 0.2s ease;\n}\n.c-login__forgot[data-v-c3995da6]:hover {\n color: var(--cl-link-hover);\n}\n\n/* ===== 验证码行 ===== */\n.c-login__code-row[data-v-c3995da6] {\n display: flex;\n gap: 10px;\n width: 100%;\n}\n.c-login__code-input[data-v-c3995da6] {\n flex: 1;\n}\n.c-login__send-code-btn[data-v-c3995da6] {\n flex-shrink: 0;\n white-space: nowrap;\n background: rgba(255, 255, 255, 0.08) !important;\n border: 1px solid var(--cl-input-underline) !important;\n color: var(--cl-text-secondary) !important;\n border-radius: 6px !important;\n font-size: 13px;\n transition: all 0.25s ease;\n}\n.c-login__send-code-btn[data-v-c3995da6]:not(:disabled):hover {\n background: rgba(255, 255, 255, 0.16) !important;\n color: var(--cl-text-primary) !important;\n}\n\n/* ===== 登录按钮 ===== */\n.c-login__submit-btn[data-v-c3995da6] {\n height: var(--cl-btn-height) !important;\n background: var(--cl-btn-bg) !important;\n border: none !important;\n border-radius: var(--cl-btn-radius) !important;\n font-weight: 500;\n letter-spacing: 2px;\n font-size: 15px;\n box-shadow: var(--cl-btn-shadow) !important;\n transition: all 0.3s ease !important;\n overflow: hidden;\n position: relative;\n margin-top: 14px;\n /* 光泽扫过动画 */\n}\n.c-login__submit-btn[data-v-c3995da6]::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 50%;\n height: 100%;\n background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);\n transform: skewX(-25deg);\n transition: left 0.6s ease;\n}\n.c-login__submit-btn[data-v-c3995da6]:not(:disabled):hover {\n background: var(--cl-btn-bg-hover) !important;\n transform: translateY(-1px);\n box-shadow: var(--cl-btn-shadow-hover) !important;\n}\n.c-login__submit-btn[data-v-c3995da6]:not(:disabled):hover::before {\n left: 150%;\n}\n.c-login__submit-btn[data-v-c3995da6]:active {\n transform: translateY(0) !important;\n}\n\n/* ===== 人机验证 ===== */\n.c-login__captcha-wrap[data-v-c3995da6] {\n margin-top: 10px;\n display: flex;\n justify-content: center;\n}\n\n/* ===== 扫码登录面板 ===== */\n.c-login__qr-panel[data-v-c3995da6] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 8px 0 4px;\n gap: 14px;\n}\n.c-login__qr-frame[data-v-c3995da6] {\n position: relative;\n width: 164px;\n height: 164px;\n border-radius: 12px;\n overflow: hidden;\n background: rgba(0, 0, 0, 0.35);\n box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 28px rgba(0, 0, 0, 0.4);\n /* 扫描动画线 */\n}\n@keyframes qr-scan-c3995da6 {\n0% {\n transform: translateY(0);\n opacity: 1;\n}\n90% {\n transform: translateY(144px);\n opacity: 1;\n}\n100% {\n transform: translateY(144px);\n opacity: 0;\n}\n}\n\n/* C_QRCode 居中在 frame 内 */\n.c-login__qr-frame[data-v-c3995da6] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.c-login__qr-scan-line[data-v-c3995da6] {\n position: absolute;\n top: 10px;\n left: 10px;\n right: 10px;\n height: 2px;\n background: linear-gradient(90deg, transparent 0%, rgba(24, 89, 233, 0.7) 30%, rgb(100, 160, 255) 50%, rgba(24, 89, 233, 0.7) 70%, transparent 100%);\n border-radius: 1px;\n box-shadow: 0 0 6px rgba(24, 89, 233, 0.8);\n animation: qr-scan-c3995da6 2.4s ease-in-out infinite;\n pointer-events: none;\n}\n\n/* 四角刻度装饰 */\n.c-login__qr-corner[data-v-c3995da6] {\n position: absolute;\n width: 14px;\n height: 14px;\n border-color: rgba(24, 89, 233, 0.9);\n border-style: solid;\n pointer-events: none;\n}\n.c-login__qr-corner--tl[data-v-c3995da6] {\n top: 6px;\n left: 6px;\n border-width: 2px 0 0 2px;\n border-radius: 3px 0 0 0;\n}\n.c-login__qr-corner--tr[data-v-c3995da6] {\n top: 6px;\n right: 6px;\n border-width: 2px 2px 0 0;\n border-radius: 0 3px 0 0;\n}\n.c-login__qr-corner--bl[data-v-c3995da6] {\n bottom: 6px;\n left: 6px;\n border-width: 0 0 2px 2px;\n border-radius: 0 0 0 3px;\n}\n.c-login__qr-corner--br[data-v-c3995da6] {\n bottom: 6px;\n right: 6px;\n border-width: 0 2px 2px 0;\n border-radius: 0 0 3px 0;\n}\n.c-login__qr-hint[data-v-c3995da6] {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 12px;\n color: var(--cl-text-hint);\n letter-spacing: 0.3px;\n}\n.c-login__qr-refresh[data-v-c3995da6] {\n color: var(--cl-text-secondary) !important;\n font-size: 11px !important;\n}\n.c-login__qr-refresh[data-v-c3995da6]:hover {\n color: var(--cl-tab-bar) !important;\n}\n\n/* ===== 分割线 ===== */\n.c-login__divider[data-v-c3995da6] {\n margin: 12px 10px 10px !important;\n}\n.c-login__divider[data-v-c3995da6] .n-divider__line {\n background: var(--cl-divider-color) !important;\n}\n.c-login__divider[data-v-c3995da6] .n-divider__title {\n color: var(--cl-text-hint) !important;\n font-size: 12px;\n white-space: nowrap;\n padding: 0 14px;\n}\n\n/* ===== 社交登录 ===== */\n.c-login__social-row[data-v-c3995da6] {\n display: flex;\n justify-content: center;\n gap: 14px;\n margin-bottom: 6px;\n}\n.c-login__social-btn[data-v-c3995da6] {\n width: var(--cl-social-size) !important;\n height: var(--cl-social-size) !important;\n background: var(--cl-social-btn-bg) !important;\n border: 1px solid var(--cl-social-btn-border) !important;\n color: var(--cl-text-secondary) !important;\n transition: all 0.25s ease !important;\n}\n.c-login__social-btn[data-v-c3995da6]:hover {\n background: var(--cl-social-btn-hover-bg) !important;\n color: var(--cl-text-primary) !important;\n transform: translateY(-2px);\n}\n\n/* ===== 注册 ===== */\n.c-login__register-row[data-v-c3995da6] {\n text-align: center;\n margin-top: 14px;\n font-size: 13px;\n}\n.c-login__register-hint[data-v-c3995da6] {\n color: var(--cl-text-hint);\n}\n.c-login__register-link[data-v-c3995da6] {\n color: var(--cl-tab-bar);\n cursor: pointer;\n margin-left: 4px;\n transition: opacity 0.2s ease;\n}\n.c-login__register-link[data-v-c3995da6]:hover {\n opacity: 0.8;\n}\n\n/* ===== 输入图标 ===== */\n.c-login__input-icon[data-v-c3995da6] {\n color: var(--cl-input-icon);\n}\n\n/* ===== 亮色主题预设(父级加 .c-login--light 类可切换) ===== */\n.c-login--light .c-login-panel[data-v-c3995da6] {\n --cl-panel-bg: rgba(255, 255, 255, 0.96);\n --cl-panel-border: rgba(0, 0, 0, 0.08);\n --cl-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n --cl-text-primary: #1a1a1a;\n --cl-text-secondary: #666;\n --cl-text-hint: #999;\n --cl-input-underline: rgba(0, 0, 0, 0.2);\n --cl-input-underline-hover: rgba(0, 0, 0, 0.4);\n --cl-input-text: #1a1a1a;\n --cl-input-placeholder: #aaa;\n --cl-input-icon: #aaa;\n --cl-tab-text: #888;\n --cl-tab-active: #1a1a1a;\n --cl-social-btn-bg: rgba(0, 0, 0, 0.04);\n --cl-social-btn-border: rgba(0, 0, 0, 0.12);\n --cl-social-btn-hover-bg: rgba(0, 0, 0, 0.08);\n --cl-divider-color: rgba(0, 0, 0, 0.1);\n --cl-link-color: #888;\n --cl-link-hover: #1a1a1a;\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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"C_Login-xMI1_ojE.css","names":[],"sources":["../src/components/C_Login/index.vue?vue&type=style&index=0&scoped=c3995da6&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//**\n * C_Login 组件样式\n * 通过 CSS 变量覆盖主题,示例:\n * .my-login-wrapper .c-login-panel {\n * --cl-panel-bg: rgba(255,255,255,0.95);\n * --cl-text-color: #1a1a1a;\n * }\n */\n/* ===== CSS 变量默认值(暗色玻璃风格) ===== */\n.c-login-panel[data-v-c3995da6] {\n /* 面板 */\n --cl-panel-bg: rgba(255, 255, 255, 0.1);\n --cl-panel-border: rgba(255, 255, 255, 0.18);\n --cl-panel-radius: 16px;\n --cl-panel-padding: 20px 26px 16px;\n --cl-panel-width: 400px;\n --cl-panel-backdrop: blur(20px);\n --cl-panel-shadow: 0 8px 32px rgba(0, 10, 60, 0.12), 0 2px 8px rgba(0, 10, 40, 0.06);\n /* 文字 */\n --cl-text-primary: rgba(255, 255, 255, 0.95);\n --cl-text-secondary: rgba(255, 255, 255, 0.55);\n --cl-text-hint: rgba(255, 255, 255, 0.4);\n /* 输入框 */\n --cl-input-bg: transparent;\n --cl-input-border: none;\n --cl-input-underline: rgba(255, 255, 255, 0.25);\n --cl-input-underline-hover: rgba(255, 255, 255, 0.5);\n --cl-input-underline-focus: rgba(24, 89, 233, 0.85);\n --cl-input-text: rgba(255, 255, 255, 0.95);\n --cl-input-placeholder: rgba(255, 255, 255, 0.45);\n --cl-input-icon: rgba(255, 255, 255, 0.6);\n /* Tab */\n --cl-tab-text: rgba(255, 255, 255, 0.55);\n --cl-tab-active: rgba(255, 255, 255, 0.95);\n --cl-tab-bar: #1859e9;\n /* 按钮 */\n --cl-btn-bg: linear-gradient(135deg, #1859e9, #1040a0);\n --cl-btn-bg-hover: linear-gradient(135deg, #2464f0, #1545ad);\n --cl-btn-shadow: 0 4px 15px rgba(24, 89, 233, 0.3);\n --cl-btn-shadow-hover: 0 6px 20px rgba(24, 89, 233, 0.4);\n --cl-btn-height: 40px;\n --cl-btn-radius: 8px;\n /* 社交按钮 */\n --cl-social-btn-bg: rgba(255, 255, 255, 0.08);\n --cl-social-btn-border: rgba(255, 255, 255, 0.18);\n --cl-social-btn-hover-bg: rgba(255, 255, 255, 0.16);\n --cl-social-size: 36px;\n /* 分割线 */\n --cl-divider-color: rgba(255, 255, 255, 0.15);\n /* 链接 */\n --cl-link-color: rgba(255, 255, 255, 0.6);\n --cl-link-hover: rgba(255, 255, 255, 0.95);\n /* 间距 */\n --cl-gap: 10px;\n --cl-gap-sm: 6px;\n}\n\n/* ===== 面板容器 ===== */\n.c-login-panel[data-v-c3995da6] {\n width: var(--cl-panel-width);\n background: var(--cl-panel-bg);\n border: 1px solid var(--cl-panel-border);\n border-radius: var(--cl-panel-radius);\n padding: var(--cl-panel-padding);\n backdrop-filter: var(--cl-panel-backdrop);\n box-shadow: var(--cl-panel-shadow);\n overflow: hidden;\n position: relative;\n transition: box-shadow 0.3s ease;\n /* 顶部光泽线 */\n /* 玻璃内衬 */\n}\n.c-login-panel[data-v-c3995da6]::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -50%;\n width: 200%;\n height: 1px;\n background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);\n pointer-events: none;\n}\n.c-login-panel[data-v-c3995da6]::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(24, 89, 233, 0.04) 100%);\n pointer-events: none;\n border-radius: inherit;\n z-index: 0;\n}\n.c-login-panel[data-v-c3995da6] > * {\n position: relative;\n z-index: 1;\n}\n\n/* ===== Header ===== */\n.c-login__header[data-v-c3995da6] {\n text-align: center;\n margin-bottom: 10px;\n}\n\n/* ===== 返回按钮(登录/注册下方块级按钮) ===== */\n.c-login__back-btn[data-v-c3995da6] {\n margin-top: 10px;\n height: var(--cl-btn-height) !important;\n border-radius: var(--cl-btn-radius) !important;\n background: transparent !important;\n border: 1px solid var(--cl-input-underline) !important;\n color: var(--cl-text-secondary) !important;\n font-size: 14px;\n font-weight: 400;\n letter-spacing: 2px;\n transition: all 0.25s ease !important;\n}\n.c-login__back-btn[data-v-c3995da6]:hover {\n background: rgba(255, 255, 255, 0.06) !important;\n border-color: var(--cl-input-underline-hover) !important;\n color: var(--cl-text-primary) !important;\n}\n.c-login__logo[data-v-c3995da6] {\n display: flex;\n justify-content: center;\n margin-bottom: 4px;\n}\n.c-login__logo .c-login__logo-icon[data-v-c3995da6] {\n color: var(--cl-text-primary);\n filter: drop-shadow(0 2px 8px rgba(24, 89, 233, 0.4));\n}\n.c-login__title[data-v-c3995da6] {\n margin: 0 0 2px;\n font-size: 20px;\n font-weight: 600;\n color: var(--cl-text-primary);\n letter-spacing: 0.5px;\n}\n.c-login__subtitle[data-v-c3995da6] {\n margin: 0;\n font-size: 13px;\n color: var(--cl-text-secondary);\n}\n\n/* ===== 登录方式切换(底部) ===== */\n.c-login__mode-switch[data-v-c3995da6] {\n margin-top: 14px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n}\n.c-login__mode-btn[data-v-c3995da6] {\n --n-border: none !important;\n --n-border-hover: none !important;\n --n-border-pressed: none !important;\n --n-border-focus: none !important;\n --n-box-shadow-focus: none !important;\n border-radius: 9px !important;\n border: none !important;\n box-shadow: none !important;\n background: rgba(255, 255, 255, 0.04) !important;\n color: var(--cl-text-secondary) !important;\n transition: all 0.2s ease !important;\n}\n.c-login__mode-btn[data-v-c3995da6]:hover {\n background: rgba(255, 255, 255, 0.1) !important;\n color: var(--cl-text-primary) !important;\n}\n.c-login__mode-btn.is-active[data-v-c3995da6] {\n background: color-mix(in srgb, var(--cl-tab-bar) 22%, transparent) !important;\n color: var(--cl-tab-active) !important;\n}\n\n/* ===== 表单 ===== */\n.c-login__form[data-v-c3995da6] {\n margin-top: 6px;\n}\n.c-login__form-item[data-v-c3995da6] {\n margin-bottom: 6px !important;\n /* 彻底干掉 NaiveUI FormItem 内置间距 CSS 变量 */\n /* 校验信息减少占用 */\n /* 底线风格输入框 */\n}\n.c-login__form-item[data-v-c3995da6] .n-form-item {\n --n-feedback-padding: 2px 0 0 0 !important;\n --n-feedback-height: 0 !important;\n --n-blank-height: 0 !important;\n --n-label-height: 0 !important;\n}\n.c-login__form-item[data-v-c3995da6] .n-form-item-label {\n display: none;\n}\n.c-login__form-item[data-v-c3995da6] .n-form-item-feedback-wrapper {\n min-height: 0 !important;\n padding-top: 0 !important;\n line-height: 1.4;\n}\n.c-login__form-item[data-v-c3995da6] .n-form-item-feedback {\n font-size: 11px !important;\n line-height: 1.4;\n}\n.c-login__form-item[data-v-c3995da6] .n-form-item-blank {\n min-height: 0 !important;\n}\n.c-login__form-item[data-v-c3995da6] .n-input {\n --n-border: none !important;\n --n-border-hover: none !important;\n --n-border-focus: none !important;\n --n-border-disabled: none !important;\n --n-box-shadow: none !important;\n --n-color: var(--cl-input-bg) !important;\n --n-text-color: var(--cl-input-text) !important;\n --n-placeholder-color: var(--cl-input-placeholder) !important;\n --n-caret-color: var(--cl-tab-bar) !important;\n background: var(--cl-input-bg) !important;\n border-bottom: 1px solid var(--cl-input-underline) !important;\n border-radius: 0 !important;\n padding: 5px 2px !important;\n transition: border-color 0.25s ease;\n}\n.c-login__form-item[data-v-c3995da6] .n-input:hover {\n border-bottom-color: var(--cl-input-underline-hover) !important;\n}\n.c-login__form-item[data-v-c3995da6] .n-input:focus-within {\n border-bottom-color: var(--cl-input-underline-focus) !important;\n}\n.c-login__form-item[data-v-c3995da6] .n-input .n-input__input-el {\n color: var(--cl-input-text) !important;\n}\n.c-login__form-item[data-v-c3995da6] .n-input .n-input__input-el::placeholder {\n color: var(--cl-input-placeholder) !important;\n}\n.c-login__form-item[data-v-c3995da6] .n-input .n-input__prefix,\n.c-login__form-item[data-v-c3995da6] .n-input .n-input__suffix {\n color: var(--cl-input-icon) !important;\n}\n\n/* ===== 辅助行:记住我 + 忘记密码 ===== */\n.c-login__aux-row[data-v-c3995da6] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 8px;\n margin-bottom: 14px;\n}\n.c-login__remember[data-v-c3995da6] .n-checkbox__label {\n color: var(--cl-text-secondary) !important;\n font-size: 13px;\n}\n.c-login__remember[data-v-c3995da6] .n-checkbox-box {\n --n-border: 1px solid var(--cl-input-underline) !important;\n}\n.c-login__forgot[data-v-c3995da6] {\n font-size: 13px;\n color: var(--cl-link-color);\n cursor: pointer;\n transition: color 0.2s ease;\n}\n.c-login__forgot[data-v-c3995da6]:hover {\n color: var(--cl-link-hover);\n}\n\n/* ===== 验证码行 ===== */\n.c-login__code-row[data-v-c3995da6] {\n display: flex;\n gap: 10px;\n width: 100%;\n}\n.c-login__code-input[data-v-c3995da6] {\n flex: 1;\n}\n.c-login__send-code-btn[data-v-c3995da6] {\n flex-shrink: 0;\n white-space: nowrap;\n background: rgba(255, 255, 255, 0.08) !important;\n border: 1px solid var(--cl-input-underline) !important;\n color: var(--cl-text-secondary) !important;\n border-radius: 6px !important;\n font-size: 13px;\n transition: all 0.25s ease;\n}\n.c-login__send-code-btn[data-v-c3995da6]:not(:disabled):hover {\n background: rgba(255, 255, 255, 0.16) !important;\n color: var(--cl-text-primary) !important;\n}\n\n/* ===== 登录按钮 ===== */\n.c-login__submit-btn[data-v-c3995da6] {\n height: var(--cl-btn-height) !important;\n background: var(--cl-btn-bg) !important;\n border: none !important;\n border-radius: var(--cl-btn-radius) !important;\n font-weight: 500;\n letter-spacing: 2px;\n font-size: 15px;\n box-shadow: var(--cl-btn-shadow) !important;\n transition: all 0.3s ease !important;\n overflow: hidden;\n position: relative;\n margin-top: 14px;\n /* 光泽扫过动画 */\n}\n.c-login__submit-btn[data-v-c3995da6]::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 50%;\n height: 100%;\n background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);\n transform: skewX(-25deg);\n transition: left 0.6s ease;\n}\n.c-login__submit-btn[data-v-c3995da6]:not(:disabled):hover {\n background: var(--cl-btn-bg-hover) !important;\n transform: translateY(-1px);\n box-shadow: var(--cl-btn-shadow-hover) !important;\n}\n.c-login__submit-btn[data-v-c3995da6]:not(:disabled):hover::before {\n left: 150%;\n}\n.c-login__submit-btn[data-v-c3995da6]:active {\n transform: translateY(0) !important;\n}\n\n/* ===== 人机验证 ===== */\n.c-login__captcha-wrap[data-v-c3995da6] {\n margin-top: 10px;\n display: flex;\n justify-content: center;\n}\n\n/* ===== 扫码登录面板 ===== */\n.c-login__qr-panel[data-v-c3995da6] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 8px 0 4px;\n gap: 14px;\n}\n.c-login__qr-frame[data-v-c3995da6] {\n position: relative;\n width: 164px;\n height: 164px;\n border-radius: 12px;\n overflow: hidden;\n background: rgba(0, 0, 0, 0.35);\n box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 28px rgba(0, 0, 0, 0.4);\n /* 扫描动画线 */\n}\n@keyframes qr-scan-c3995da6 {\n0% {\n transform: translateY(0);\n opacity: 1;\n}\n90% {\n transform: translateY(144px);\n opacity: 1;\n}\n100% {\n transform: translateY(144px);\n opacity: 0;\n}\n}\n\n/* C_QRCode 居中在 frame 内 */\n.c-login__qr-frame[data-v-c3995da6] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.c-login__qr-scan-line[data-v-c3995da6] {\n position: absolute;\n top: 10px;\n left: 10px;\n right: 10px;\n height: 2px;\n background: linear-gradient(90deg, transparent 0%, rgba(24, 89, 233, 0.7) 30%, rgb(100, 160, 255) 50%, rgba(24, 89, 233, 0.7) 70%, transparent 100%);\n border-radius: 1px;\n box-shadow: 0 0 6px rgba(24, 89, 233, 0.8);\n animation: qr-scan-c3995da6 2.4s ease-in-out infinite;\n pointer-events: none;\n}\n\n/* 四角刻度装饰 */\n.c-login__qr-corner[data-v-c3995da6] {\n position: absolute;\n width: 14px;\n height: 14px;\n border-color: rgba(24, 89, 233, 0.9);\n border-style: solid;\n pointer-events: none;\n}\n.c-login__qr-corner--tl[data-v-c3995da6] {\n top: 6px;\n left: 6px;\n border-width: 2px 0 0 2px;\n border-radius: 3px 0 0 0;\n}\n.c-login__qr-corner--tr[data-v-c3995da6] {\n top: 6px;\n right: 6px;\n border-width: 2px 2px 0 0;\n border-radius: 0 3px 0 0;\n}\n.c-login__qr-corner--bl[data-v-c3995da6] {\n bottom: 6px;\n left: 6px;\n border-width: 0 0 2px 2px;\n border-radius: 0 0 0 3px;\n}\n.c-login__qr-corner--br[data-v-c3995da6] {\n bottom: 6px;\n right: 6px;\n border-width: 0 2px 2px 0;\n border-radius: 0 0 3px 0;\n}\n.c-login__qr-hint[data-v-c3995da6] {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 12px;\n color: var(--cl-text-hint);\n letter-spacing: 0.3px;\n}\n.c-login__qr-refresh[data-v-c3995da6] {\n color: var(--cl-text-secondary) !important;\n font-size: 11px !important;\n}\n.c-login__qr-refresh[data-v-c3995da6]:hover {\n color: var(--cl-tab-bar) !important;\n}\n\n/* ===== 分割线 ===== */\n.c-login__divider[data-v-c3995da6] {\n margin: 12px 10px 10px !important;\n}\n.c-login__divider[data-v-c3995da6] .n-divider__line {\n background: var(--cl-divider-color) !important;\n}\n.c-login__divider[data-v-c3995da6] .n-divider__title {\n color: var(--cl-text-hint) !important;\n font-size: 12px;\n white-space: nowrap;\n padding: 0 14px;\n}\n\n/* ===== 社交登录 ===== */\n.c-login__social-row[data-v-c3995da6] {\n display: flex;\n justify-content: center;\n gap: 14px;\n margin-bottom: 6px;\n}\n.c-login__social-btn[data-v-c3995da6] {\n width: var(--cl-social-size) !important;\n height: var(--cl-social-size) !important;\n background: var(--cl-social-btn-bg) !important;\n border: 1px solid var(--cl-social-btn-border) !important;\n color: var(--cl-text-secondary) !important;\n transition: all 0.25s ease !important;\n}\n.c-login__social-btn[data-v-c3995da6]:hover {\n background: var(--cl-social-btn-hover-bg) !important;\n color: var(--cl-text-primary) !important;\n transform: translateY(-2px);\n}\n\n/* ===== 注册 ===== */\n.c-login__register-row[data-v-c3995da6] {\n text-align: center;\n margin-top: 14px;\n font-size: 13px;\n}\n.c-login__register-hint[data-v-c3995da6] {\n color: var(--cl-text-hint);\n}\n.c-login__register-link[data-v-c3995da6] {\n color: var(--cl-tab-bar);\n cursor: pointer;\n margin-left: 4px;\n transition: opacity 0.2s ease;\n}\n.c-login__register-link[data-v-c3995da6]:hover {\n opacity: 0.8;\n}\n\n/* ===== 输入图标 ===== */\n.c-login__input-icon[data-v-c3995da6] {\n color: var(--cl-input-icon);\n}\n\n/* ===== 亮色主题预设(父级加 .c-login--light 类可切换) ===== */\n.c-login--light .c-login-panel[data-v-c3995da6] {\n --cl-panel-bg: rgba(255, 255, 255, 0.96);\n --cl-panel-border: rgba(0, 0, 0, 0.08);\n --cl-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n --cl-text-primary: #1a1a1a;\n --cl-text-secondary: #666;\n --cl-text-hint: #999;\n --cl-input-underline: rgba(0, 0, 0, 0.2);\n --cl-input-underline-hover: rgba(0, 0, 0, 0.4);\n --cl-input-text: #1a1a1a;\n --cl-input-placeholder: #aaa;\n --cl-input-icon: #aaa;\n --cl-tab-text: #888;\n --cl-tab-active: #1a1a1a;\n --cl-social-btn-bg: rgba(0, 0, 0, 0.04);\n --cl-social-btn-border: rgba(0, 0, 0, 0.12);\n --cl-social-btn-hover-bg: rgba(0, 0, 0, 0.08);\n --cl-divider-color: rgba(0, 0, 0, 0.1);\n --cl-link-color: #888;\n --cl-link-hover: #1a1a1a;\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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"C_Login.js","names":[],"sources":["../src/components/C_Login/types.ts","../src/components/C_Login/index.vue","../src/components/C_Login/index.vue"],"sourcesContent":["/**\n * @Description: C_Login 通用登录组件 - 类型定义\n */\n\n// ================= 功能开关 =================\nexport interface LoginFeatures {\n /** 是否显示密码登录(默认 true) */\n passwordLogin?: boolean\n /** 是否显示验证码登录(默认 true) */\n captchaLogin?: boolean\n /** 是否显示扫码登录(默认 true) */\n qrcodeLogin?: boolean\n /** 是否显示其他账号登录(默认 true) */\n socialLogin?: boolean\n /** 是否显示注册账号(默认 true) */\n register?: boolean\n /** 是否启用人机验证拼图(默认 true) */\n captchaVerify?: boolean\n /** 是否显示记住我(默认 true) */\n rememberMe?: boolean\n /** 是否显示忘记密码(默认 true) */\n forgotPassword?: boolean\n}\n\n// ================= 社交登录 =================\nexport interface SocialProvider {\n key: string\n label: string\n /** mdi 图标名称 */\n icon: string\n}\n\n// ================= 表单数据 =================\nexport interface PasswordFormData {\n username: string\n password: string\n}\n\nexport interface CaptchaFormData {\n account: string\n code: string\n}\n\nexport interface RegisterFormData {\n phone: string\n code: string\n password: string\n confirmPassword: string\n}\n\n// ================= 组件 Props =================\nexport interface LoginProps {\n /** 标题文字 */\n title?: string\n /** 副标题 */\n subtitle?: string\n /** Logo icon 名称(mdi:xxx),不传则不显示图标 */\n logoIcon?: string\n /** 功能开关配置 */\n features?: LoginFeatures\n /** 社交登录提供商列表 */\n socialProviders?: SocialProvider[]\n /** 扫码登录二维码 URL */\n qrcodeUrl?: string\n /** localStorage key(记住我) */\n storageKey?: string\n /** 外部传入的 loading 状态 */\n loading?: boolean\n /** 表单默认用户名(Demo / 预填场景) */\n defaultUsername?: string\n /** 表单默认密码(Demo / 预填场景) */\n defaultPassword?: string\n}\n\n// ================= 默认社交登录配置 =================\nexport const DEFAULT_SOCIAL_PROVIDERS: SocialProvider[] = [\n { key: 'github', label: 'GitHub', icon: 'mdi:github' },\n { key: 'wechat', label: '微信', icon: 'mdi:wechat' },\n { key: 'qq', label: 'QQ', icon: 'mdi:qqchat' },\n]\n\n// ================= 默认功能开关 =================\nexport const DEFAULT_FEATURES: Required<LoginFeatures> = {\n passwordLogin: true,\n captchaLogin: true,\n qrcodeLogin: true,\n socialLogin: true,\n register: true,\n captchaVerify: true,\n rememberMe: true,\n forgotPassword: true,\n}\n","<!--\n * @Description: C_Login - 通用插拔式登录组件\n * 通过 features prop 控制功能模块的显隐,样式通过 CSS 变量覆盖\n-->\n<template>\n <div class=\"c-login-panel\">\n <!-- ===== Logo / 标题区 ===== -->\n <div class=\"c-login__header\">\n <slot name=\"logo\">\n <div\n v-if=\"mergedProps.logoIcon\"\n class=\"c-login__logo\"\n >\n <C_Icon\n :name=\"mergedProps.logoIcon\"\n :size=\"36\"\n class=\"c-login__logo-icon\"\n />\n </div>\n </slot>\n <h2 class=\"c-login__title\">{{ mergedProps.title }}</h2>\n <p\n v-if=\"mergedProps.subtitle && activeTab !== 'register'\"\n class=\"c-login__subtitle\"\n >\n {{ mergedProps.subtitle }}\n </p>\n <!-- 注册视图的副标题 -->\n <p\n v-if=\"activeTab === 'register'\"\n class=\"c-login__subtitle c-login__subtitle--register\"\n >\n {{ t('cl_register', '注册账号') }}\n </p>\n </div>\n\n <!-- ===== 密码登录表单(默认视图) ===== -->\n <NForm\n v-show=\"activeTab === 'password'\"\n ref=\"passwordFormRef\"\n :model=\"passwordForm\"\n :rules=\"passwordRules\"\n class=\"c-login__form\"\n >\n <NFormItem\n path=\"username\"\n class=\"c-login__form-item\"\n >\n <NInput\n v-model:value=\"passwordForm.username\"\n :placeholder=\"t('cl_username_ph', '请输入用户名')\"\n clearable\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:account-outline\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n </NFormItem>\n\n <NFormItem\n path=\"password\"\n class=\"c-login__form-item\"\n >\n <NInput\n v-model:value=\"passwordForm.password\"\n type=\"password\"\n show-password-on=\"click\"\n :placeholder=\"t('cl_password_ph', '请输入密码')\"\n clearable\n @keyup.enter=\"handlePasswordSubmit\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:lock-outline\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n </NFormItem>\n\n <!-- 记住我 + 忘记密码 -->\n <div\n v-if=\"feat.rememberMe || feat.forgotPassword\"\n class=\"c-login__aux-row\"\n >\n <NCheckbox\n v-if=\"feat.rememberMe\"\n v-model:checked=\"rememberMe\"\n class=\"c-login__remember\"\n >\n {{ t('cl_remember', '记住我') }}\n </NCheckbox>\n <NText\n v-if=\"feat.forgotPassword\"\n class=\"c-login__forgot\"\n @click=\"emit('forgot-password')\"\n >\n {{ t('cl_forgot', '忘记密码?') }}\n </NText>\n </div>\n </NForm>\n\n <!-- ===== 验证码登录表单 ===== -->\n <NForm\n v-show=\"activeTab === 'captcha'\"\n ref=\"captchaFormRef\"\n :model=\"captchaForm\"\n :rules=\"captchaRules\"\n class=\"c-login__form\"\n >\n <NFormItem\n path=\"account\"\n class=\"c-login__form-item\"\n >\n <NInput\n v-model:value=\"captchaForm.account\"\n :placeholder=\"t('cl_phone_ph', '请输入手机号')\"\n clearable\n maxlength=\"11\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:cellphone\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n </NFormItem>\n\n <NFormItem\n path=\"code\"\n class=\"c-login__form-item\"\n >\n <div class=\"c-login__code-row\">\n <NInput\n v-model:value=\"captchaForm.code\"\n :placeholder=\"t('cl_code_ph', '请输入验证码')\"\n clearable\n class=\"c-login__code-input\"\n @keyup.enter=\"handleCaptchaSubmit\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:shield-key-outline\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n <NButton\n :disabled=\"countdown > 0 || !captchaForm.account\"\n class=\"c-login__send-code-btn\"\n @click=\"handleSendCode\"\n >\n {{\n countdown > 0\n ? `${countdown}s ${t('cl_resend', '后重发')}`\n : t('cl_get_code', '获取验证码')\n }}\n </NButton>\n </div>\n </NFormItem>\n </NForm>\n\n <!-- ===== 登录按钮(密码和验证码模式) ===== -->\n <NButton\n v-if=\"activeTab === 'password' || activeTab === 'captcha'\"\n type=\"primary\"\n block\n :loading=\"props.loading\"\n :disabled=\"\n activeTab === 'password' && feat.captchaVerify && !captchaValid\n \"\n class=\"c-login__submit-btn\"\n @click=\"\n activeTab === 'password'\n ? handlePasswordSubmit()\n : handleCaptchaSubmit()\n \"\n >\n {{\n activeTab === 'password' && feat.captchaVerify && !captchaValid\n ? t('cl_verify_first', '请先完成人机验证')\n : t('cl_login_btn', '登 录')\n }}\n </NButton>\n\n <!-- ===== 人机验证拼图(仅密码登录模式) ===== -->\n <div\n v-if=\"feat.captchaVerify && activeTab === 'password'\"\n class=\"c-login__captcha-wrap\"\n >\n <C_Captcha\n ref=\"captchaRef\"\n trigger-text=\"\"\n theme=\"dark\"\n @success=\"handleCaptchaSuccess\"\n @fail=\"handleCaptchaFail\"\n @change=\"handleCaptchaChange\"\n />\n </div>\n\n <!-- ===== 返回按钮(验证码子视图) ===== -->\n <NButton\n v-if=\"activeTab === 'captcha'\"\n block\n class=\"c-login__back-btn\"\n @click=\"activeTab = 'password'\"\n >\n {{ t('cl_back', '返回') }}\n </NButton>\n\n <!-- ===== 扫码登录面板 ===== -->\n <div\n v-if=\"activeTab === 'qrcode'\"\n class=\"c-login__qr-panel\"\n >\n <div class=\"c-login__qr-frame\">\n <C_QRCode\n ref=\"qrcodeRef\"\n :value=\"qrcodeValue\"\n :size=\"148\"\n :margin=\"1\"\n :show-border=\"false\"\n color=\"#ffffff\"\n bg-color=\"#000000\"\n error-correction-level=\"M\"\n />\n <div class=\"c-login__qr-scan-line\" />\n <div class=\"c-login__qr-corner c-login__qr-corner--tl\" />\n <div class=\"c-login__qr-corner c-login__qr-corner--tr\" />\n <div class=\"c-login__qr-corner c-login__qr-corner--bl\" />\n <div class=\"c-login__qr-corner c-login__qr-corner--br\" />\n </div>\n <p class=\"c-login__qr-hint\">\n <C_Icon\n name=\"mdi:cellphone-check\"\n :size=\"13\"\n />\n {{ t('cl_qr_hint', '打开手机扫码后点击「确认」即可登录') }}\n </p>\n <NButton\n text\n size=\"tiny\"\n class=\"c-login__qr-refresh\"\n @click=\"handleQrcodeRefresh\"\n >\n <template #icon>\n <C_Icon\n name=\"mdi:refresh\"\n :size=\"12\"\n />\n </template>\n {{ t('cl_qr_refresh', '二维码已失效?点击刷新') }}\n </NButton>\n </div>\n\n <!-- ===== 返回按钮(扫码子视图,在二维码下方) ===== -->\n <NButton\n v-if=\"activeTab === 'qrcode'\"\n block\n class=\"c-login__back-btn\"\n @click=\"activeTab = 'password'\"\n >\n {{ t('cl_back', '返回') }}\n </NButton>\n\n <!-- ===== 注册表单 ===== -->\n <NForm\n v-show=\"activeTab === 'register'\"\n ref=\"registerFormRef\"\n :model=\"registerForm\"\n :rules=\"registerRules\"\n class=\"c-login__form\"\n >\n <NFormItem\n path=\"phone\"\n class=\"c-login__form-item\"\n >\n <NInput\n v-model:value=\"registerForm.phone\"\n :placeholder=\"t('cl_phone_ph', '请输入手机号')\"\n clearable\n maxlength=\"11\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:cellphone\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n </NFormItem>\n\n <NFormItem\n path=\"code\"\n class=\"c-login__form-item\"\n >\n <div class=\"c-login__code-row\">\n <NInput\n v-model:value=\"registerForm.code\"\n :placeholder=\"t('cl_code_ph', '请输入验证码')\"\n clearable\n class=\"c-login__code-input\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:shield-key-outline\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n <NButton\n :disabled=\"regCountdown > 0 || !registerForm.phone\"\n class=\"c-login__send-code-btn\"\n @click=\"handleRegSendCode\"\n >\n {{\n regCountdown > 0\n ? `${regCountdown}s ${t('cl_resend', '后重发')}`\n : t('cl_get_code', '获取验证码')\n }}\n </NButton>\n </div>\n </NFormItem>\n\n <NFormItem\n path=\"password\"\n class=\"c-login__form-item\"\n >\n <NInput\n v-model:value=\"registerForm.password\"\n type=\"password\"\n show-password-on=\"click\"\n :placeholder=\"t('cl_password_ph', '请输入密码')\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:lock-outline\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n </NFormItem>\n\n <NFormItem\n path=\"confirmPassword\"\n class=\"c-login__form-item\"\n >\n <NInput\n v-model:value=\"registerForm.confirmPassword\"\n type=\"password\"\n show-password-on=\"click\"\n :placeholder=\"t('cl_confirm_pw_ph', '请再次输入密码')\"\n @keyup.enter=\"handleRegisterSubmit\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:lock-check-outline\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n </NFormItem>\n </NForm>\n\n <!-- ===== 注册确认按钮 ===== -->\n <NButton\n v-if=\"activeTab === 'register'\"\n type=\"primary\"\n block\n :loading=\"props.loading\"\n class=\"c-login__submit-btn\"\n @click=\"handleRegisterSubmit\"\n >\n {{ t('cl_confirm', '确认') }}\n </NButton>\n\n <!-- ===== 注册视图返回按钮 ===== -->\n <NButton\n v-if=\"activeTab === 'register'\"\n block\n class=\"c-login__back-btn\"\n @click=\"activeTab = 'password'\"\n >\n {{ t('cl_back', '返回') }}\n </NButton>\n\n <!-- ===== 登录方式切换(仅密码登录默认视图显示) ===== -->\n <div\n v-if=\"activeTab === 'password' && (feat.captchaLogin || feat.qrcodeLogin)\"\n class=\"c-login__mode-switch\"\n >\n <NButton\n v-if=\"feat.captchaLogin\"\n class=\"c-login__mode-btn\"\n size=\"small\"\n @click=\"activeTab = 'captcha'\"\n >\n {{ t('cl_captcha_login', '验证码登录') }}\n </NButton>\n <NButton\n v-if=\"feat.qrcodeLogin\"\n class=\"c-login__mode-btn\"\n size=\"small\"\n @click=\"activeTab = 'qrcode'\"\n >\n {{ t('cl_qr_login', '扫码登录') }}\n </NButton>\n </div>\n\n <!-- ===== 其他登录方式(仅密码登录默认视图显示) ===== -->\n <template\n v-if=\"activeTab === 'password' && feat.socialLogin && socialList.length\"\n >\n <NDivider class=\"c-login__divider\">{{\n t('cl_social_login', '其他账号登录')\n }}</NDivider>\n <div class=\"c-login__social-row\">\n <NTooltip\n v-for=\"provider in socialList\"\n :key=\"provider.key\"\n trigger=\"hover\"\n placement=\"top\"\n >\n <template #trigger>\n <NButton\n circle\n class=\"c-login__social-btn\"\n @click=\"emit('social-login', provider.key)\"\n >\n <template #icon>\n <C_Icon\n :name=\"provider.icon\"\n :size=\"16\"\n />\n </template>\n </NButton>\n </template>\n {{ provider.label }}\n </NTooltip>\n </div>\n </template>\n\n <!-- ===== 注册入口(仅密码登录默认视图显示) ===== -->\n <div\n v-if=\"activeTab === 'password' && feat.register\"\n class=\"c-login__register-row\"\n >\n <NText class=\"c-login__register-hint\">{{\n t('cl_no_account', '还没有账号?')\n }}</NText>\n <NText\n class=\"c-login__register-link\"\n @click=\"activeTab = 'register'\"\n >\n {{ t('cl_register', '注册账号') }}\n </NText>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'\n import type { FormInst, FormRules } from 'naive-ui/es'\n import C_Icon from '../C_Icon/index.vue'\n import C_Captcha from '../C_Captcha/index.vue'\n import C_QRCode from '../C_QRCode/index.vue'\n import { RULE_COMBOS } from '@robot-admin/form-validate'\n import {\n DEFAULT_FEATURES,\n DEFAULT_SOCIAL_PROVIDERS,\n type LoginProps,\n type PasswordFormData,\n type CaptchaFormData,\n type RegisterFormData,\n } from './types'\n\n // ===== i18n helper =====\n const t = (key: string, fallback: string) =>\n typeof (globalThis as any).$t === 'function'\n ? (globalThis as any).$t(key, fallback, 'robot_admin')\n : fallback\n\n // ===== Props & Emits =====\n const props = withDefaults(defineProps<LoginProps>(), {\n title: '欢迎回来',\n loading: false,\n storageKey: 'c_login_remember',\n defaultUsername: '',\n defaultPassword: '',\n })\n\n const emit = defineEmits<{\n (\n e: 'submit',\n data: PasswordFormData & {\n captchaToken?: string\n captchaTimestamp?: number\n }\n ): void\n (e: 'captcha-submit', data: CaptchaFormData): void\n (e: 'send-code', account: string): void\n (e: 'social-login', provider: string): void\n (e: 'forgot-password'): void\n (e: 'qrcode-refresh'): void\n (e: 'register-submit', data: RegisterFormData): void\n (e: 'register-send-code', phone: string): void\n }>()\n\n // ===== 合并 Props(填充默认值) =====\n const mergedProps = computed(() => ({\n ...props,\n features: { ...DEFAULT_FEATURES, ...props.features },\n socialProviders: props.socialProviders ?? DEFAULT_SOCIAL_PROVIDERS,\n }))\n\n const feat = computed(\n () => mergedProps.value.features as Required<typeof DEFAULT_FEATURES>\n )\n const socialList = computed(() => mergedProps.value.socialProviders!)\n\n // ===== Tab(默认密码登录) =====\n const activeTab = ref<'password' | 'captcha' | 'qrcode' | 'register'>(\n 'password'\n )\n\n // ===== 密码表单 =====\n const passwordFormRef = ref<FormInst | null>(null)\n const passwordForm = reactive<PasswordFormData>({\n username: props.defaultUsername ?? '',\n password: props.defaultPassword ?? '',\n })\n\n const passwordRules: FormRules = {\n username: [\n {\n required: true,\n message: t('cl_username_rule', '请输入用户名'),\n trigger: 'blur',\n },\n ],\n password: [\n {\n required: true,\n message: t('cl_password_rule', '请输入密码'),\n trigger: 'blur',\n },\n ],\n }\n\n // ===== 记住我 =====\n const rememberMe = ref(false)\n\n watch(rememberMe, val => {\n if (val) {\n localStorage.setItem(\n props.storageKey!,\n JSON.stringify({ username: passwordForm.username })\n )\n } else {\n localStorage.removeItem(props.storageKey!)\n }\n })\n\n onMounted(() => {\n try {\n const saved = localStorage.getItem(props.storageKey!)\n if (saved) {\n const data = JSON.parse(saved)\n if (data.username) {\n passwordForm.username = data.username\n rememberMe.value = true\n }\n }\n } catch {\n /* ignore */\n }\n })\n\n // ===== 密码登录提交 =====\n const handlePasswordSubmit = async () => {\n try {\n await passwordFormRef.value?.validate()\n } catch {\n return // 校验失败,表单会显示行内错误提示\n }\n emit('submit', {\n ...passwordForm,\n ...(captchaValid.value\n ? {\n captchaToken: captchaToken.value,\n captchaTimestamp: captchaTimestamp.value,\n }\n : {}),\n })\n }\n\n // ===== 验证码表单 =====\n const captchaFormRef = ref<FormInst | null>(null)\n const captchaForm = reactive<CaptchaFormData>({ account: '', code: '' })\n const countdown = ref(0)\n let countdownTimer: ReturnType<typeof setInterval> | null = null\n\n const captchaRules: FormRules = {\n account: RULE_COMBOS.mobile('手机号') as FormRules['account'],\n code: [\n {\n required: true,\n message: t('cl_code_rule', '请输入验证码'),\n trigger: 'blur',\n },\n ],\n }\n\n // ===== 人机验证 =====\n const captchaRef = ref<InstanceType<typeof C_Captcha>>()\n const captchaValid = ref(false)\n const captchaToken = ref('')\n const captchaTimestamp = ref(0)\n\n const handleCaptchaSuccess = (data: { token: string; timestamp: number }) => {\n captchaValid.value = true\n captchaToken.value = data.token\n captchaTimestamp.value = data.timestamp\n }\n const handleCaptchaFail = () => {\n captchaValid.value = false\n }\n const handleCaptchaChange = (valid: boolean) => {\n captchaValid.value = valid\n if (!valid) {\n captchaToken.value = ''\n captchaTimestamp.value = 0\n }\n }\n\n const resetCaptcha = () => {\n captchaValid.value = false\n captchaToken.value = ''\n captchaTimestamp.value = 0\n captchaRef.value?.reset()\n }\n\n const handleCaptchaSubmit = async () => {\n try {\n await captchaFormRef.value?.validate()\n } catch {\n return\n }\n if (feat.value.captchaVerify && !captchaValid.value) return\n emit('captcha-submit', { ...captchaForm })\n }\n\n // ===== 发送验证码 =====\n const handleSendCode = () => {\n if (!captchaForm.account) return\n emit('send-code', captchaForm.account)\n if (countdownTimer) {\n clearInterval(countdownTimer)\n countdownTimer = null\n }\n countdown.value = 60\n countdownTimer = setInterval(() => {\n countdown.value--\n if (countdown.value <= 0) {\n clearInterval(countdownTimer!)\n countdownTimer = null\n }\n }, 1000)\n }\n\n // ===== 扫码登录 =====\n const qrcodeRef = ref<any>(null)\n const qrcodeValue = ref(\n `https://robot-admin.app/qrcode-login?t=${Date.now()}`\n )\n\n const handleQrcodeRefresh = () => {\n qrcodeValue.value = `https://robot-admin.app/qrcode-login?t=${Date.now()}`\n emit('qrcode-refresh')\n }\n\n // ===== 注册表单 =====\n const registerFormRef = ref<FormInst | null>(null)\n const registerForm = reactive<RegisterFormData>({\n phone: '',\n code: '',\n password: '',\n confirmPassword: '',\n })\n const regCountdown = ref(0)\n let regCountdownTimer: ReturnType<typeof setInterval> | null = null\n\n const registerRules: FormRules = {\n phone: RULE_COMBOS.mobile('手机号') as FormRules['phone'],\n code: [\n {\n required: true,\n message: t('cl_code_rule', '请输入验证码'),\n trigger: 'blur',\n },\n ],\n password: RULE_COMBOS.password('密码') as FormRules['password'],\n confirmPassword: [\n {\n required: true,\n message: t('cl_confirm_pw_rule', '请再次输入密码'),\n trigger: 'blur',\n },\n {\n validator: (_rule: any, value: string) => {\n if (value !== registerForm.password) {\n return new Error(t('cl_pw_mismatch', '两次密码输入不一致'))\n }\n return true\n },\n trigger: 'blur',\n },\n ],\n }\n\n const handleRegSendCode = () => {\n if (!registerForm.phone) return\n emit('register-send-code', registerForm.phone)\n if (regCountdownTimer) {\n clearInterval(regCountdownTimer)\n regCountdownTimer = null\n }\n regCountdown.value = 60\n regCountdownTimer = setInterval(() => {\n regCountdown.value--\n if (regCountdown.value <= 0) {\n clearInterval(regCountdownTimer!)\n regCountdownTimer = null\n }\n }, 1000)\n }\n\n const handleRegisterSubmit = async () => {\n try {\n await registerFormRef.value?.validate()\n } catch {\n return\n }\n emit('register-submit', { ...registerForm })\n }\n\n // ===== 清理定时器 =====\n onUnmounted(() => {\n if (countdownTimer) {\n clearInterval(countdownTimer)\n countdownTimer = null\n }\n if (regCountdownTimer) {\n clearInterval(regCountdownTimer)\n regCountdownTimer = null\n }\n })\n\n // ===== 暴露方法给父组件 =====\n defineExpose({ resetCaptcha })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n","<!--\n * @Description: C_Login - 通用插拔式登录组件\n * 通过 features prop 控制功能模块的显隐,样式通过 CSS 变量覆盖\n-->\n<template>\n <div class=\"c-login-panel\">\n <!-- ===== Logo / 标题区 ===== -->\n <div class=\"c-login__header\">\n <slot name=\"logo\">\n <div\n v-if=\"mergedProps.logoIcon\"\n class=\"c-login__logo\"\n >\n <C_Icon\n :name=\"mergedProps.logoIcon\"\n :size=\"36\"\n class=\"c-login__logo-icon\"\n />\n </div>\n </slot>\n <h2 class=\"c-login__title\">{{ mergedProps.title }}</h2>\n <p\n v-if=\"mergedProps.subtitle && activeTab !== 'register'\"\n class=\"c-login__subtitle\"\n >\n {{ mergedProps.subtitle }}\n </p>\n <!-- 注册视图的副标题 -->\n <p\n v-if=\"activeTab === 'register'\"\n class=\"c-login__subtitle c-login__subtitle--register\"\n >\n {{ t('cl_register', '注册账号') }}\n </p>\n </div>\n\n <!-- ===== 密码登录表单(默认视图) ===== -->\n <NForm\n v-show=\"activeTab === 'password'\"\n ref=\"passwordFormRef\"\n :model=\"passwordForm\"\n :rules=\"passwordRules\"\n class=\"c-login__form\"\n >\n <NFormItem\n path=\"username\"\n class=\"c-login__form-item\"\n >\n <NInput\n v-model:value=\"passwordForm.username\"\n :placeholder=\"t('cl_username_ph', '请输入用户名')\"\n clearable\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:account-outline\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n </NFormItem>\n\n <NFormItem\n path=\"password\"\n class=\"c-login__form-item\"\n >\n <NInput\n v-model:value=\"passwordForm.password\"\n type=\"password\"\n show-password-on=\"click\"\n :placeholder=\"t('cl_password_ph', '请输入密码')\"\n clearable\n @keyup.enter=\"handlePasswordSubmit\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:lock-outline\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n </NFormItem>\n\n <!-- 记住我 + 忘记密码 -->\n <div\n v-if=\"feat.rememberMe || feat.forgotPassword\"\n class=\"c-login__aux-row\"\n >\n <NCheckbox\n v-if=\"feat.rememberMe\"\n v-model:checked=\"rememberMe\"\n class=\"c-login__remember\"\n >\n {{ t('cl_remember', '记住我') }}\n </NCheckbox>\n <NText\n v-if=\"feat.forgotPassword\"\n class=\"c-login__forgot\"\n @click=\"emit('forgot-password')\"\n >\n {{ t('cl_forgot', '忘记密码?') }}\n </NText>\n </div>\n </NForm>\n\n <!-- ===== 验证码登录表单 ===== -->\n <NForm\n v-show=\"activeTab === 'captcha'\"\n ref=\"captchaFormRef\"\n :model=\"captchaForm\"\n :rules=\"captchaRules\"\n class=\"c-login__form\"\n >\n <NFormItem\n path=\"account\"\n class=\"c-login__form-item\"\n >\n <NInput\n v-model:value=\"captchaForm.account\"\n :placeholder=\"t('cl_phone_ph', '请输入手机号')\"\n clearable\n maxlength=\"11\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:cellphone\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n </NFormItem>\n\n <NFormItem\n path=\"code\"\n class=\"c-login__form-item\"\n >\n <div class=\"c-login__code-row\">\n <NInput\n v-model:value=\"captchaForm.code\"\n :placeholder=\"t('cl_code_ph', '请输入验证码')\"\n clearable\n class=\"c-login__code-input\"\n @keyup.enter=\"handleCaptchaSubmit\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:shield-key-outline\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n <NButton\n :disabled=\"countdown > 0 || !captchaForm.account\"\n class=\"c-login__send-code-btn\"\n @click=\"handleSendCode\"\n >\n {{\n countdown > 0\n ? `${countdown}s ${t('cl_resend', '后重发')}`\n : t('cl_get_code', '获取验证码')\n }}\n </NButton>\n </div>\n </NFormItem>\n </NForm>\n\n <!-- ===== 登录按钮(密码和验证码模式) ===== -->\n <NButton\n v-if=\"activeTab === 'password' || activeTab === 'captcha'\"\n type=\"primary\"\n block\n :loading=\"props.loading\"\n :disabled=\"\n activeTab === 'password' && feat.captchaVerify && !captchaValid\n \"\n class=\"c-login__submit-btn\"\n @click=\"\n activeTab === 'password'\n ? handlePasswordSubmit()\n : handleCaptchaSubmit()\n \"\n >\n {{\n activeTab === 'password' && feat.captchaVerify && !captchaValid\n ? t('cl_verify_first', '请先完成人机验证')\n : t('cl_login_btn', '登 录')\n }}\n </NButton>\n\n <!-- ===== 人机验证拼图(仅密码登录模式) ===== -->\n <div\n v-if=\"feat.captchaVerify && activeTab === 'password'\"\n class=\"c-login__captcha-wrap\"\n >\n <C_Captcha\n ref=\"captchaRef\"\n trigger-text=\"\"\n theme=\"dark\"\n @success=\"handleCaptchaSuccess\"\n @fail=\"handleCaptchaFail\"\n @change=\"handleCaptchaChange\"\n />\n </div>\n\n <!-- ===== 返回按钮(验证码子视图) ===== -->\n <NButton\n v-if=\"activeTab === 'captcha'\"\n block\n class=\"c-login__back-btn\"\n @click=\"activeTab = 'password'\"\n >\n {{ t('cl_back', '返回') }}\n </NButton>\n\n <!-- ===== 扫码登录面板 ===== -->\n <div\n v-if=\"activeTab === 'qrcode'\"\n class=\"c-login__qr-panel\"\n >\n <div class=\"c-login__qr-frame\">\n <C_QRCode\n ref=\"qrcodeRef\"\n :value=\"qrcodeValue\"\n :size=\"148\"\n :margin=\"1\"\n :show-border=\"false\"\n color=\"#ffffff\"\n bg-color=\"#000000\"\n error-correction-level=\"M\"\n />\n <div class=\"c-login__qr-scan-line\" />\n <div class=\"c-login__qr-corner c-login__qr-corner--tl\" />\n <div class=\"c-login__qr-corner c-login__qr-corner--tr\" />\n <div class=\"c-login__qr-corner c-login__qr-corner--bl\" />\n <div class=\"c-login__qr-corner c-login__qr-corner--br\" />\n </div>\n <p class=\"c-login__qr-hint\">\n <C_Icon\n name=\"mdi:cellphone-check\"\n :size=\"13\"\n />\n {{ t('cl_qr_hint', '打开手机扫码后点击「确认」即可登录') }}\n </p>\n <NButton\n text\n size=\"tiny\"\n class=\"c-login__qr-refresh\"\n @click=\"handleQrcodeRefresh\"\n >\n <template #icon>\n <C_Icon\n name=\"mdi:refresh\"\n :size=\"12\"\n />\n </template>\n {{ t('cl_qr_refresh', '二维码已失效?点击刷新') }}\n </NButton>\n </div>\n\n <!-- ===== 返回按钮(扫码子视图,在二维码下方) ===== -->\n <NButton\n v-if=\"activeTab === 'qrcode'\"\n block\n class=\"c-login__back-btn\"\n @click=\"activeTab = 'password'\"\n >\n {{ t('cl_back', '返回') }}\n </NButton>\n\n <!-- ===== 注册表单 ===== -->\n <NForm\n v-show=\"activeTab === 'register'\"\n ref=\"registerFormRef\"\n :model=\"registerForm\"\n :rules=\"registerRules\"\n class=\"c-login__form\"\n >\n <NFormItem\n path=\"phone\"\n class=\"c-login__form-item\"\n >\n <NInput\n v-model:value=\"registerForm.phone\"\n :placeholder=\"t('cl_phone_ph', '请输入手机号')\"\n clearable\n maxlength=\"11\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:cellphone\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n </NFormItem>\n\n <NFormItem\n path=\"code\"\n class=\"c-login__form-item\"\n >\n <div class=\"c-login__code-row\">\n <NInput\n v-model:value=\"registerForm.code\"\n :placeholder=\"t('cl_code_ph', '请输入验证码')\"\n clearable\n class=\"c-login__code-input\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:shield-key-outline\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n <NButton\n :disabled=\"regCountdown > 0 || !registerForm.phone\"\n class=\"c-login__send-code-btn\"\n @click=\"handleRegSendCode\"\n >\n {{\n regCountdown > 0\n ? `${regCountdown}s ${t('cl_resend', '后重发')}`\n : t('cl_get_code', '获取验证码')\n }}\n </NButton>\n </div>\n </NFormItem>\n\n <NFormItem\n path=\"password\"\n class=\"c-login__form-item\"\n >\n <NInput\n v-model:value=\"registerForm.password\"\n type=\"password\"\n show-password-on=\"click\"\n :placeholder=\"t('cl_password_ph', '请输入密码')\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:lock-outline\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n </NFormItem>\n\n <NFormItem\n path=\"confirmPassword\"\n class=\"c-login__form-item\"\n >\n <NInput\n v-model:value=\"registerForm.confirmPassword\"\n type=\"password\"\n show-password-on=\"click\"\n :placeholder=\"t('cl_confirm_pw_ph', '请再次输入密码')\"\n @keyup.enter=\"handleRegisterSubmit\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:lock-check-outline\"\n :size=\"16\"\n class=\"c-login__input-icon\"\n />\n </template>\n </NInput>\n </NFormItem>\n </NForm>\n\n <!-- ===== 注册确认按钮 ===== -->\n <NButton\n v-if=\"activeTab === 'register'\"\n type=\"primary\"\n block\n :loading=\"props.loading\"\n class=\"c-login__submit-btn\"\n @click=\"handleRegisterSubmit\"\n >\n {{ t('cl_confirm', '确认') }}\n </NButton>\n\n <!-- ===== 注册视图返回按钮 ===== -->\n <NButton\n v-if=\"activeTab === 'register'\"\n block\n class=\"c-login__back-btn\"\n @click=\"activeTab = 'password'\"\n >\n {{ t('cl_back', '返回') }}\n </NButton>\n\n <!-- ===== 登录方式切换(仅密码登录默认视图显示) ===== -->\n <div\n v-if=\"activeTab === 'password' && (feat.captchaLogin || feat.qrcodeLogin)\"\n class=\"c-login__mode-switch\"\n >\n <NButton\n v-if=\"feat.captchaLogin\"\n class=\"c-login__mode-btn\"\n size=\"small\"\n @click=\"activeTab = 'captcha'\"\n >\n {{ t('cl_captcha_login', '验证码登录') }}\n </NButton>\n <NButton\n v-if=\"feat.qrcodeLogin\"\n class=\"c-login__mode-btn\"\n size=\"small\"\n @click=\"activeTab = 'qrcode'\"\n >\n {{ t('cl_qr_login', '扫码登录') }}\n </NButton>\n </div>\n\n <!-- ===== 其他登录方式(仅密码登录默认视图显示) ===== -->\n <template\n v-if=\"activeTab === 'password' && feat.socialLogin && socialList.length\"\n >\n <NDivider class=\"c-login__divider\">{{\n t('cl_social_login', '其他账号登录')\n }}</NDivider>\n <div class=\"c-login__social-row\">\n <NTooltip\n v-for=\"provider in socialList\"\n :key=\"provider.key\"\n trigger=\"hover\"\n placement=\"top\"\n >\n <template #trigger>\n <NButton\n circle\n class=\"c-login__social-btn\"\n @click=\"emit('social-login', provider.key)\"\n >\n <template #icon>\n <C_Icon\n :name=\"provider.icon\"\n :size=\"16\"\n />\n </template>\n </NButton>\n </template>\n {{ provider.label }}\n </NTooltip>\n </div>\n </template>\n\n <!-- ===== 注册入口(仅密码登录默认视图显示) ===== -->\n <div\n v-if=\"activeTab === 'password' && feat.register\"\n class=\"c-login__register-row\"\n >\n <NText class=\"c-login__register-hint\">{{\n t('cl_no_account', '还没有账号?')\n }}</NText>\n <NText\n class=\"c-login__register-link\"\n @click=\"activeTab = 'register'\"\n >\n {{ t('cl_register', '注册账号') }}\n </NText>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'\n import type { FormInst, FormRules } from 'naive-ui/es'\n import C_Icon from '../C_Icon/index.vue'\n import C_Captcha from '../C_Captcha/index.vue'\n import C_QRCode from '../C_QRCode/index.vue'\n import { RULE_COMBOS } from '@robot-admin/form-validate'\n import {\n DEFAULT_FEATURES,\n DEFAULT_SOCIAL_PROVIDERS,\n type LoginProps,\n type PasswordFormData,\n type CaptchaFormData,\n type RegisterFormData,\n } from './types'\n\n // ===== i18n helper =====\n const t = (key: string, fallback: string) =>\n typeof (globalThis as any).$t === 'function'\n ? (globalThis as any).$t(key, fallback, 'robot_admin')\n : fallback\n\n // ===== Props & Emits =====\n const props = withDefaults(defineProps<LoginProps>(), {\n title: '欢迎回来',\n loading: false,\n storageKey: 'c_login_remember',\n defaultUsername: '',\n defaultPassword: '',\n })\n\n const emit = defineEmits<{\n (\n e: 'submit',\n data: PasswordFormData & {\n captchaToken?: string\n captchaTimestamp?: number\n }\n ): void\n (e: 'captcha-submit', data: CaptchaFormData): void\n (e: 'send-code', account: string): void\n (e: 'social-login', provider: string): void\n (e: 'forgot-password'): void\n (e: 'qrcode-refresh'): void\n (e: 'register-submit', data: RegisterFormData): void\n (e: 'register-send-code', phone: string): void\n }>()\n\n // ===== 合并 Props(填充默认值) =====\n const mergedProps = computed(() => ({\n ...props,\n features: { ...DEFAULT_FEATURES, ...props.features },\n socialProviders: props.socialProviders ?? DEFAULT_SOCIAL_PROVIDERS,\n }))\n\n const feat = computed(\n () => mergedProps.value.features as Required<typeof DEFAULT_FEATURES>\n )\n const socialList = computed(() => mergedProps.value.socialProviders!)\n\n // ===== Tab(默认密码登录) =====\n const activeTab = ref<'password' | 'captcha' | 'qrcode' | 'register'>(\n 'password'\n )\n\n // ===== 密码表单 =====\n const passwordFormRef = ref<FormInst | null>(null)\n const passwordForm = reactive<PasswordFormData>({\n username: props.defaultUsername ?? '',\n password: props.defaultPassword ?? '',\n })\n\n const passwordRules: FormRules = {\n username: [\n {\n required: true,\n message: t('cl_username_rule', '请输入用户名'),\n trigger: 'blur',\n },\n ],\n password: [\n {\n required: true,\n message: t('cl_password_rule', '请输入密码'),\n trigger: 'blur',\n },\n ],\n }\n\n // ===== 记住我 =====\n const rememberMe = ref(false)\n\n watch(rememberMe, val => {\n if (val) {\n localStorage.setItem(\n props.storageKey!,\n JSON.stringify({ username: passwordForm.username })\n )\n } else {\n localStorage.removeItem(props.storageKey!)\n }\n })\n\n onMounted(() => {\n try {\n const saved = localStorage.getItem(props.storageKey!)\n if (saved) {\n const data = JSON.parse(saved)\n if (data.username) {\n passwordForm.username = data.username\n rememberMe.value = true\n }\n }\n } catch {\n /* ignore */\n }\n })\n\n // ===== 密码登录提交 =====\n const handlePasswordSubmit = async () => {\n try {\n await passwordFormRef.value?.validate()\n } catch {\n return // 校验失败,表单会显示行内错误提示\n }\n emit('submit', {\n ...passwordForm,\n ...(captchaValid.value\n ? {\n captchaToken: captchaToken.value,\n captchaTimestamp: captchaTimestamp.value,\n }\n : {}),\n })\n }\n\n // ===== 验证码表单 =====\n const captchaFormRef = ref<FormInst | null>(null)\n const captchaForm = reactive<CaptchaFormData>({ account: '', code: '' })\n const countdown = ref(0)\n let countdownTimer: ReturnType<typeof setInterval> | null = null\n\n const captchaRules: FormRules = {\n account: RULE_COMBOS.mobile('手机号') as FormRules['account'],\n code: [\n {\n required: true,\n message: t('cl_code_rule', '请输入验证码'),\n trigger: 'blur',\n },\n ],\n }\n\n // ===== 人机验证 =====\n const captchaRef = ref<InstanceType<typeof C_Captcha>>()\n const captchaValid = ref(false)\n const captchaToken = ref('')\n const captchaTimestamp = ref(0)\n\n const handleCaptchaSuccess = (data: { token: string; timestamp: number }) => {\n captchaValid.value = true\n captchaToken.value = data.token\n captchaTimestamp.value = data.timestamp\n }\n const handleCaptchaFail = () => {\n captchaValid.value = false\n }\n const handleCaptchaChange = (valid: boolean) => {\n captchaValid.value = valid\n if (!valid) {\n captchaToken.value = ''\n captchaTimestamp.value = 0\n }\n }\n\n const resetCaptcha = () => {\n captchaValid.value = false\n captchaToken.value = ''\n captchaTimestamp.value = 0\n captchaRef.value?.reset()\n }\n\n const handleCaptchaSubmit = async () => {\n try {\n await captchaFormRef.value?.validate()\n } catch {\n return\n }\n if (feat.value.captchaVerify && !captchaValid.value) return\n emit('captcha-submit', { ...captchaForm })\n }\n\n // ===== 发送验证码 =====\n const handleSendCode = () => {\n if (!captchaForm.account) return\n emit('send-code', captchaForm.account)\n if (countdownTimer) {\n clearInterval(countdownTimer)\n countdownTimer = null\n }\n countdown.value = 60\n countdownTimer = setInterval(() => {\n countdown.value--\n if (countdown.value <= 0) {\n clearInterval(countdownTimer!)\n countdownTimer = null\n }\n }, 1000)\n }\n\n // ===== 扫码登录 =====\n const qrcodeRef = ref<any>(null)\n const qrcodeValue = ref(\n `https://robot-admin.app/qrcode-login?t=${Date.now()}`\n )\n\n const handleQrcodeRefresh = () => {\n qrcodeValue.value = `https://robot-admin.app/qrcode-login?t=${Date.now()}`\n emit('qrcode-refresh')\n }\n\n // ===== 注册表单 =====\n const registerFormRef = ref<FormInst | null>(null)\n const registerForm = reactive<RegisterFormData>({\n phone: '',\n code: '',\n password: '',\n confirmPassword: '',\n })\n const regCountdown = ref(0)\n let regCountdownTimer: ReturnType<typeof setInterval> | null = null\n\n const registerRules: FormRules = {\n phone: RULE_COMBOS.mobile('手机号') as FormRules['phone'],\n code: [\n {\n required: true,\n message: t('cl_code_rule', '请输入验证码'),\n trigger: 'blur',\n },\n ],\n password: RULE_COMBOS.password('密码') as FormRules['password'],\n confirmPassword: [\n {\n required: true,\n message: t('cl_confirm_pw_rule', '请再次输入密码'),\n trigger: 'blur',\n },\n {\n validator: (_rule: any, value: string) => {\n if (value !== registerForm.password) {\n return new Error(t('cl_pw_mismatch', '两次密码输入不一致'))\n }\n return true\n },\n trigger: 'blur',\n },\n ],\n }\n\n const handleRegSendCode = () => {\n if (!registerForm.phone) return\n emit('register-send-code', registerForm.phone)\n if (regCountdownTimer) {\n clearInterval(regCountdownTimer)\n regCountdownTimer = null\n }\n regCountdown.value = 60\n regCountdownTimer = setInterval(() => {\n regCountdown.value--\n if (regCountdown.value <= 0) {\n clearInterval(regCountdownTimer!)\n regCountdownTimer = null\n }\n }, 1000)\n }\n\n const handleRegisterSubmit = async () => {\n try {\n await registerFormRef.value?.validate()\n } catch {\n return\n }\n emit('register-submit', { ...registerForm })\n }\n\n // ===== 清理定时器 =====\n onUnmounted(() => {\n if (countdownTimer) {\n clearInterval(countdownTimer)\n countdownTimer = null\n }\n if (regCountdownTimer) {\n clearInterval(regCountdownTimer)\n regCountdownTimer = null\n }\n })\n\n // ===== 暴露方法给父组件 =====\n defineExpose({ resetCaptcha })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n"],"mappings":"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"}