@robot-admin/naive-ui-components 0.8.0 → 0.8.2

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 (376) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/README.md +279 -279
  3. package/dist/C_ActionBar-DYG0Yf3A.css.map +1 -0
  4. package/dist/C_ActionBar-MAjRhqcI.css.map +1 -0
  5. package/dist/C_ActionBar.cjs +1 -1
  6. package/dist/C_ActionBar.css +47 -47
  7. package/dist/C_ActionBar.js +1 -1
  8. package/dist/C_ActionBar.js.map +1 -1
  9. package/dist/C_ActionBar2.js +1 -1
  10. package/dist/C_ActionBar2.js.map +1 -1
  11. package/dist/{C_AntV-A3NXx_sF.css.map → C_AntV-BY8jqqmi.css.map} +1 -1
  12. package/dist/{C_AntV-D2Zp2qQF.css.map → C_AntV-BbkHc-_a.css.map} +1 -1
  13. package/dist/C_AntV.cjs +1 -1
  14. package/dist/C_AntV.css +78 -78
  15. package/dist/C_AntV.js +1 -1
  16. package/dist/C_AntV.js.map +1 -1
  17. package/dist/C_AntV2.js +3 -3
  18. package/dist/C_AntV2.js.map +1 -1
  19. package/dist/{C_AudioPlayer-CXl4yP_m.css.map → C_AudioPlayer-DKRIGhi7.css.map} +1 -1
  20. package/dist/{C_AudioPlayer-CcBtt71m.css.map → C_AudioPlayer-DlB6eNsa.css.map} +1 -1
  21. package/dist/C_AudioPlayer.cjs +1 -1
  22. package/dist/C_AudioPlayer.css +47 -47
  23. package/dist/C_AudioPlayer.js +1 -1
  24. package/dist/C_AudioPlayer.js.map +1 -1
  25. package/dist/C_AudioPlayer2.js +1 -1
  26. package/dist/C_AudioPlayer2.js.map +1 -1
  27. package/dist/{C_AvatarGroup-CtPhfH9h.css.map → C_AvatarGroup-D02zci-i.css.map} +1 -1
  28. package/dist/{C_AvatarGroup-M1dNPH3E.css.map → C_AvatarGroup-DatHaUlY.css.map} +1 -1
  29. package/dist/C_AvatarGroup.css +21 -21
  30. package/dist/C_AvatarGroup.js.map +1 -1
  31. package/dist/C_AvatarGroup2.js +1 -1
  32. package/dist/C_AvatarGroup2.js.map +1 -1
  33. package/dist/{C_Barcode-DjTmDkbQ.css.map → C_Barcode-DYDRDe2O.css.map} +1 -1
  34. package/dist/{C_Barcode-Do1Ozsmh.css.map → C_Barcode-muJdc_O4.css.map} +1 -1
  35. package/dist/C_Barcode.css +7 -7
  36. package/dist/C_Barcode.js.map +1 -1
  37. package/dist/C_Barcode2.js +1 -1
  38. package/dist/C_Barcode2.js.map +1 -1
  39. package/dist/C_Breadcrumb.cjs +1 -1
  40. package/dist/C_Breadcrumb.js +1 -1
  41. package/dist/C_Breadcrumb.js.map +1 -1
  42. package/dist/C_Breadcrumb2.js +1 -1
  43. package/dist/C_Breadcrumb2.js.map +1 -1
  44. package/dist/{C_Captcha-CZmAETly.css.map → C_Captcha-9_hk6VmY.css.map} +1 -1
  45. package/dist/{C_Captcha-Ccq3DMrR.css.map → C_Captcha-MtASlJ0f.css.map} +1 -1
  46. package/dist/C_Captcha.css +19 -19
  47. package/dist/C_Captcha.js.map +1 -1
  48. package/dist/C_Captcha2.js +1 -1
  49. package/dist/C_Captcha2.js.map +1 -1
  50. package/dist/C_Cascade.js.map +1 -1
  51. package/dist/C_Cascade2.js +1 -1
  52. package/dist/C_Cascade2.js.map +1 -1
  53. package/dist/{C_Chat-CJ8KESTM.css.map → C_Chat-Csjz_BFw.css.map} +1 -1
  54. package/dist/{C_Chat-DzV4AFLd.css.map → C_Chat-DO1ZBA_0.css.map} +1 -1
  55. package/dist/C_Chat.cjs +1 -1
  56. package/dist/C_Chat.css +65 -65
  57. package/dist/C_Chat.js +1 -1
  58. package/dist/C_Chat.js.map +1 -1
  59. package/dist/C_Chat2.js +1 -1
  60. package/dist/C_Chat2.js.map +1 -1
  61. package/dist/{C_City-Cv5BESaN.css.map → C_City-Bam08Qv3.css.map} +1 -1
  62. package/dist/{C_City-DNKv4MpH.css.map → C_City-Bb3W-KaN.css.map} +1 -1
  63. package/dist/C_City.css +29 -29
  64. package/dist/C_City.js.map +1 -1
  65. package/dist/C_City2.js +1 -1
  66. package/dist/C_City2.js.map +1 -1
  67. package/dist/C_Code-BFi5xxnM.css.map +1 -0
  68. package/dist/C_Code-CZ7yfnri.css.map +1 -0
  69. package/dist/C_Code.cjs +1 -1
  70. package/dist/C_Code.css +3 -3
  71. package/dist/C_Code.js +1 -1
  72. package/dist/C_Code.js.map +1 -1
  73. package/dist/C_Code2.js +1 -1
  74. package/dist/C_Code2.js.map +1 -1
  75. package/dist/{C_CollapsePanel-CedsEM0N.css.map → C_CollapsePanel-CWkFCqNQ.css.map} +1 -1
  76. package/dist/{C_CollapsePanel-BkOivqn3.css.map → C_CollapsePanel-pcVJA_4z.css.map} +1 -1
  77. package/dist/C_CollapsePanel.cjs +1 -1
  78. package/dist/C_CollapsePanel.css +35 -35
  79. package/dist/C_CollapsePanel.js +1 -1
  80. package/dist/C_CollapsePanel.js.map +1 -1
  81. package/dist/C_CollapsePanel2.js +1 -1
  82. package/dist/C_CollapsePanel2.js.map +1 -1
  83. package/dist/{C_ContextMenu-CCsCeI39.css.map → C_ContextMenu-B3Cgz_wJ.css.map} +1 -1
  84. package/dist/{C_ContextMenu-DOTBeltf.css.map → C_ContextMenu-u1LixF3_.css.map} +1 -1
  85. package/dist/C_ContextMenu.cjs +1 -1
  86. package/dist/C_ContextMenu.css +17 -17
  87. package/dist/C_ContextMenu.js +1 -1
  88. package/dist/C_ContextMenu.js.map +1 -1
  89. package/dist/C_ContextMenu2.js +1 -1
  90. package/dist/C_ContextMenu2.js.map +1 -1
  91. package/dist/{C_Cron-C0-8b5af.css.map → C_Cron-Civir5-I.css.map} +1 -1
  92. package/dist/{C_Cron-DqHQ92LN.css.map → C_Cron-iw3qpMsy.css.map} +1 -1
  93. package/dist/C_Cron.cjs +1 -1
  94. package/dist/C_Cron.css +37 -37
  95. package/dist/C_Cron.js +1 -1
  96. package/dist/C_Cron.js.map +1 -1
  97. package/dist/C_Cron2.js +1 -1
  98. package/dist/C_Cron2.js.map +1 -1
  99. package/dist/C_Date.js.map +1 -1
  100. package/dist/C_Date2.js +1 -1
  101. package/dist/C_Date2.js.map +1 -1
  102. package/dist/{C_Draggable-Bq6o0qXn.css.map → C_Draggable-BCjIvIwT.css.map} +1 -1
  103. package/dist/{C_Draggable-r6nhx3yM.css.map → C_Draggable-DwkSlCOS.css.map} +1 -1
  104. package/dist/C_Draggable.css +46 -46
  105. package/dist/C_Draggable.js.map +1 -1
  106. package/dist/C_Draggable2.js +1 -1
  107. package/dist/C_Draggable2.js.map +1 -1
  108. package/dist/C_Editor-BfjjYQ9B.css.map +1 -0
  109. package/dist/C_Editor-Do2StvoJ.css.map +1 -0
  110. package/dist/C_Editor.css +55 -55
  111. package/dist/C_Editor.js.map +1 -1
  112. package/dist/C_Editor2.js +1 -1
  113. package/dist/C_Editor2.js.map +1 -1
  114. package/dist/{C_FilePreview-BVarVvnD.css.map → C_FilePreview-BhcbiXsV.css.map} +1 -1
  115. package/dist/{C_FilePreview-DHGlV4OR.css.map → C_FilePreview-DJudcIbW.css.map} +1 -1
  116. package/dist/C_FilePreview.cjs +1 -1
  117. package/dist/C_FilePreview.css +91 -91
  118. package/dist/C_FilePreview.js +1 -1
  119. package/dist/C_FilePreview.js.map +1 -1
  120. package/dist/C_FilePreview2.js +1 -1
  121. package/dist/C_FilePreview2.js.map +1 -1
  122. package/dist/{C_Form-BciQUPpS.css.map → C_Form-BtcAPIRi.css.map} +1 -1
  123. package/dist/{C_Form-CKHvXL3O.css.map → C_Form-D_gwQ7hC.css.map} +1 -1
  124. package/dist/C_Form.cjs +1 -1
  125. package/dist/C_Form.css +222 -222
  126. package/dist/C_Form.js +1 -1
  127. package/dist/C_Form.js.map +1 -1
  128. package/dist/C_Form2.js +1 -1
  129. package/dist/C_Form2.js.map +1 -1
  130. package/dist/{C_FormSearch-Bmd2CmG6.css.map → C_FormSearch-Bi4XYjjk.css.map} +1 -1
  131. package/dist/{C_FormSearch-DBNtnjaL.css.map → C_FormSearch-DUGOoX0u.css.map} +1 -1
  132. package/dist/C_FormSearch.css +45 -45
  133. package/dist/C_FormSearch.js.map +1 -1
  134. package/dist/C_FormSearch2.js +1 -1
  135. package/dist/C_FormSearch2.js.map +1 -1
  136. package/dist/{C_FormulaEditor-3WG2vtQl.css.map → C_FormulaEditor-CJk3SSUJ.css.map} +1 -1
  137. package/dist/{C_FormulaEditor-Cm0CokN5.css.map → C_FormulaEditor-Cy7mjfVO.css.map} +1 -1
  138. package/dist/C_FormulaEditor.cjs +1 -1
  139. package/dist/C_FormulaEditor.css +78 -78
  140. package/dist/C_FormulaEditor.js +1 -1
  141. package/dist/C_FormulaEditor.js.map +1 -1
  142. package/dist/C_FormulaEditor2.js +1 -1
  143. package/dist/C_FormulaEditor2.js.map +1 -1
  144. package/dist/C_FullCalendar-BQA0OjGB.css.map +1 -0
  145. package/dist/C_FullCalendar-ChJUosAi.css.map +1 -0
  146. package/dist/C_FullCalendar.css +3 -3
  147. package/dist/C_FullCalendar.js.map +1 -1
  148. package/dist/C_FullCalendar2.js +1 -1
  149. package/dist/C_FullCalendar2.js.map +1 -1
  150. package/dist/C_GlobalSearch.js.map +1 -1
  151. package/dist/C_GlobalSearch2.js.map +1 -1
  152. package/dist/C_Guide.cjs +1 -1
  153. package/dist/C_Guide.js +1 -1
  154. package/dist/C_Guide.js.map +1 -1
  155. package/dist/C_Guide2.js +1 -1
  156. package/dist/C_Guide2.js.map +1 -1
  157. package/dist/C_Icon.js.map +1 -1
  158. package/dist/C_Icon2.js +1 -1
  159. package/dist/C_Icon2.js.map +1 -1
  160. package/dist/{C_ImageCropper-D3L2-J_J.css.map → C_ImageCropper-BqZpkZfU.css.map} +1 -1
  161. package/dist/{C_ImageCropper-DrmUlaLi.css.map → C_ImageCropper-CylwGuzS.css.map} +1 -1
  162. package/dist/C_ImageCropper.cjs +1 -1
  163. package/dist/C_ImageCropper.css +10 -10
  164. package/dist/C_ImageCropper.js +1 -1
  165. package/dist/C_ImageCropper.js.map +1 -1
  166. package/dist/C_ImageCropper2.js +1 -1
  167. package/dist/C_ImageCropper2.js.map +1 -1
  168. package/dist/C_Language.cjs +1 -1
  169. package/dist/C_Language.js +1 -1
  170. package/dist/C_Language.js.map +1 -1
  171. package/dist/C_Language2.js +1 -1
  172. package/dist/C_Language2.js.map +1 -1
  173. package/dist/{C_Login-Cst_W1XC.css.map → C_Login-BkdnkBKX.css.map} +1 -1
  174. package/dist/{C_Login-DWZ_6K1x.css.map → C_Login-VkMM6OJ2.css.map} +1 -1
  175. package/dist/C_Login.cjs +1 -1
  176. package/dist/C_Login.css +72 -72
  177. package/dist/C_Login.js +1 -1
  178. package/dist/C_Login.js.map +1 -1
  179. package/dist/C_Login2.js +1 -1
  180. package/dist/C_Login2.js.map +1 -1
  181. package/dist/{C_Map-BCJmDnJT.css.map → C_Map-DNnBcY70.css.map} +1 -1
  182. package/dist/{C_Map-WUMXSAfy.css.map → C_Map-LEXIx6zM.css.map} +1 -1
  183. package/dist/C_Map.css +4 -4
  184. package/dist/C_Map.js.map +1 -1
  185. package/dist/C_Map2.js +1 -1
  186. package/dist/C_Map2.js.map +1 -1
  187. package/dist/{C_Markdown-7J0uPEuk.css.map → C_Markdown-DwmI0_0Q.css.map} +1 -1
  188. package/dist/{C_Markdown-C7Lg0_9z.css.map → C_Markdown-k0794RW0.css.map} +1 -1
  189. package/dist/C_Markdown.css +33 -33
  190. package/dist/C_Markdown.js.map +1 -1
  191. package/dist/C_Markdown2.js +1 -1
  192. package/dist/C_Markdown2.js.map +1 -1
  193. package/dist/C_Menu.js.map +1 -1
  194. package/dist/C_Menu2.js +1 -1
  195. package/dist/C_Menu2.js.map +1 -1
  196. package/dist/C_NotificationCenter.cjs +1 -1
  197. package/dist/C_NotificationCenter.js +1 -1
  198. package/dist/C_NotificationCenter.js.map +1 -1
  199. package/dist/C_NotificationCenter2.js +1 -1
  200. package/dist/C_NotificationCenter2.js.map +1 -1
  201. package/dist/C_OrgChart.js.map +1 -1
  202. package/dist/C_OrgChart2.js +1 -1
  203. package/dist/C_OrgChart2.js.map +1 -1
  204. package/dist/C_Progress.js.map +1 -1
  205. package/dist/C_Progress2.js +1 -1
  206. package/dist/C_Progress2.js.map +1 -1
  207. package/dist/{C_QRCode-DMxSyogU.css.map → C_QRCode-CFNTda_1.css.map} +1 -1
  208. package/dist/{C_QRCode-G7fiAkm4.css.map → C_QRCode-CmWr9lK-.css.map} +1 -1
  209. package/dist/C_QRCode.css +9 -9
  210. package/dist/C_QRCode.js.map +1 -1
  211. package/dist/C_QRCode2.js +1 -1
  212. package/dist/C_QRCode2.js.map +1 -1
  213. package/dist/{C_Signature-BJMvVPWT.css.map → C_Signature-BDx4ctsE.css.map} +1 -1
  214. package/dist/{C_Signature-BJUHx2BF.css.map → C_Signature-Bz_uNbwv.css.map} +1 -1
  215. package/dist/C_Signature.cjs +1 -1
  216. package/dist/C_Signature.css +15 -15
  217. package/dist/C_Signature.js +1 -1
  218. package/dist/C_Signature.js.map +1 -1
  219. package/dist/C_Signature2.js +1 -1
  220. package/dist/C_Signature2.js.map +1 -1
  221. package/dist/C_Skeleton.js.map +1 -1
  222. package/dist/C_Skeleton2.js +1 -1
  223. package/dist/C_Skeleton2.js.map +1 -1
  224. package/dist/{C_SplitPane-Br2eK8IG.css.map → C_SplitPane-BOwr1C7K.css.map} +1 -1
  225. package/dist/{C_SplitPane-DuyzUhKB.css.map → C_SplitPane-N-a_D-7F.css.map} +1 -1
  226. package/dist/C_SplitPane.cjs +1 -1
  227. package/dist/C_SplitPane.css +31 -31
  228. package/dist/C_SplitPane.js +1 -1
  229. package/dist/C_SplitPane.js.map +1 -1
  230. package/dist/C_SplitPane2.js +1 -1
  231. package/dist/C_SplitPane2.js.map +1 -1
  232. package/dist/C_Steps-Bk1krgiR.css.map +1 -0
  233. package/dist/C_Steps-Dn2CMpy1.css.map +1 -0
  234. package/dist/C_Steps.css +38 -38
  235. package/dist/C_Steps.js.map +1 -1
  236. package/dist/C_Steps2.js +1 -1
  237. package/dist/C_Steps2.js.map +1 -1
  238. package/dist/C_Table.cjs +1 -1
  239. package/dist/C_Table.js +1 -1
  240. package/dist/C_Table.js.map +1 -1
  241. package/dist/C_Table2.js +2 -2
  242. package/dist/C_Table2.js.map +1 -1
  243. package/dist/{C_TagsView-BsutyC3U.css.map → C_TagsView-DX3LecK1.css.map} +1 -1
  244. package/dist/{C_TagsView-Crm7yWg9.css.map → C_TagsView-DqOTa8bL.css.map} +1 -1
  245. package/dist/C_TagsView.cjs +1 -1
  246. package/dist/C_TagsView.css +36 -36
  247. package/dist/C_TagsView.js +1 -1
  248. package/dist/C_TagsView.js.map +1 -1
  249. package/dist/C_TagsView2.js +1 -1
  250. package/dist/C_TagsView2.js.map +1 -1
  251. package/dist/C_Theme.cjs +1 -1
  252. package/dist/C_Theme.js +1 -1
  253. package/dist/C_Theme.js.map +1 -1
  254. package/dist/C_Theme2.js +1 -1
  255. package/dist/C_Theme2.js.map +1 -1
  256. package/dist/C_Time-BzyQVvTS.css.map +1 -0
  257. package/dist/C_Time-DmpKLQHc.css.map +1 -0
  258. package/dist/C_Time.css +5 -5
  259. package/dist/C_Time.js.map +1 -1
  260. package/dist/C_Time2.js +1 -1
  261. package/dist/C_Time2.js.map +1 -1
  262. package/dist/{C_Timeline-DG70WtJP.css.map → C_Timeline-BKkimrZx.css.map} +1 -1
  263. package/dist/{C_Timeline-Dzxmmdjg.css.map → C_Timeline-DTuSCX6p.css.map} +1 -1
  264. package/dist/C_Timeline.cjs +1 -1
  265. package/dist/C_Timeline.css +45 -45
  266. package/dist/C_Timeline.js +1 -1
  267. package/dist/C_Timeline.js.map +1 -1
  268. package/dist/C_Timeline2.js +1 -1
  269. package/dist/C_Timeline2.js.map +1 -1
  270. package/dist/{C_Transfer-CCEqnC-v.css.map → C_Transfer-BOB6OBqS.css.map} +1 -1
  271. package/dist/{C_Transfer-CStPm4NP.css.map → C_Transfer-Dpq7ezWC.css.map} +1 -1
  272. package/dist/C_Transfer.cjs +1 -1
  273. package/dist/C_Transfer.css +31 -31
  274. package/dist/C_Transfer.js +1 -1
  275. package/dist/C_Transfer.js.map +1 -1
  276. package/dist/C_Transfer2.js +1 -1
  277. package/dist/C_Transfer2.js.map +1 -1
  278. package/dist/{C_Tree-B-Le4hjQ.css.map → C_Tree-D98nX9qT.css.map} +1 -1
  279. package/dist/{C_Tree-DnGc_MPb.css.map → C_Tree-ulfm7b-P.css.map} +1 -1
  280. package/dist/C_Tree.cjs +1 -1
  281. package/dist/C_Tree.css +33 -33
  282. package/dist/C_Tree.js +1 -1
  283. package/dist/C_Tree.js.map +1 -1
  284. package/dist/C_Tree2.js +1 -1
  285. package/dist/C_Tree2.js.map +1 -1
  286. package/dist/{C_Upload-CFAxVGVz.css.map → C_Upload-BR9fg5r4.css.map} +1 -1
  287. package/dist/{C_Upload-D8_QeSV0.css.map → C_Upload-CPqf74Ea.css.map} +1 -1
  288. package/dist/C_Upload.cjs +1 -1
  289. package/dist/C_Upload.css +4 -4
  290. package/dist/C_Upload.js +1 -1
  291. package/dist/C_Upload.js.map +1 -1
  292. package/dist/C_Upload2.js +2 -2
  293. package/dist/C_Upload2.js.map +1 -1
  294. package/dist/{C_VideoPlayer-Cdgv4Zq0.css.map → C_VideoPlayer-4J96tKfK.css.map} +1 -1
  295. package/dist/{C_VideoPlayer-rm0MODUv.css.map → C_VideoPlayer-D35seHkm.css.map} +1 -1
  296. package/dist/C_VideoPlayer.css +13 -13
  297. package/dist/C_VideoPlayer.js.map +1 -1
  298. package/dist/C_VideoPlayer2.js +3 -3
  299. package/dist/C_VideoPlayer2.js.map +1 -1
  300. package/dist/{C_VtableGantt-BpY-Rng3.css.map → C_VtableGantt-C2lxFmWg.css.map} +1 -1
  301. package/dist/{C_VtableGantt-DB87-jdS.css.map → C_VtableGantt-Dwnkw_WL.css.map} +1 -1
  302. package/dist/C_VtableGantt.cjs +1 -1
  303. package/dist/C_VtableGantt.css +15 -15
  304. package/dist/C_VtableGantt.js +1 -1
  305. package/dist/C_VtableGantt.js.map +1 -1
  306. package/dist/C_VtableGantt2.js +1 -1
  307. package/dist/C_VtableGantt2.js.map +1 -1
  308. package/dist/C_WaterFall.js.map +1 -1
  309. package/dist/C_WaterFall2.js +1 -1
  310. package/dist/C_WaterFall2.js.map +1 -1
  311. package/dist/{C_WorkFlow-7F6op6qN.css.map → C_WorkFlow-2hJfvvTK.css.map} +1 -1
  312. package/dist/{C_WorkFlow-Cy3HWA6A.css.map → C_WorkFlow-DHoNjl8-.css.map} +1 -1
  313. package/dist/C_WorkFlow.cjs +1 -1
  314. package/dist/C_WorkFlow.css +108 -108
  315. package/dist/C_WorkFlow.js +1 -1
  316. package/dist/C_WorkFlow.js.map +1 -1
  317. package/dist/C_WorkFlow2.js +1 -1
  318. package/dist/C_WorkFlow2.js.map +1 -1
  319. package/dist/constants2.d.ts +3 -3
  320. package/dist/constants3.d.ts +3 -3
  321. package/dist/constants4.d.ts +5 -5
  322. package/dist/constants5.d.ts +2 -2
  323. package/dist/data.d.ts +1 -1
  324. package/dist/index.cjs.map +1 -1
  325. package/dist/index.js.map +1 -1
  326. package/dist/index.vue.d.ts +1 -1
  327. package/dist/index11.vue.d.ts +5 -5
  328. package/dist/index12.vue.d.ts +4 -4
  329. package/dist/index13.vue.d.ts +3 -3
  330. package/dist/index14.vue.d.ts +1 -1
  331. package/dist/index15.vue.d.ts +5 -5
  332. package/dist/index18.vue.d.ts +3 -3
  333. package/dist/index2.vue.d.ts +6 -6
  334. package/dist/index20.vue.d.ts +2 -2
  335. package/dist/index21.vue.d.ts +1 -1
  336. package/dist/index22.vue.d.ts +2 -2
  337. package/dist/index26.vue.d.ts +3 -3
  338. package/dist/index27.vue.d.ts +3 -3
  339. package/dist/index28.vue.d.ts +2 -2
  340. package/dist/index3.vue.d.ts +1 -1
  341. package/dist/index4.vue.d.ts +4 -4
  342. package/dist/index6.vue.d.ts +1 -1
  343. package/dist/index8.vue.d.ts +2 -2
  344. package/dist/menuAdapter.js.map +1 -1
  345. package/dist/resolver.cjs.map +1 -1
  346. package/dist/resolver.js.map +1 -1
  347. package/dist/style.css +1483 -1483
  348. package/dist/useCalendarEvents.d.ts +1 -1
  349. package/dist/useCollapsePanel.d.ts +3 -3
  350. package/dist/useCropperCore.d.ts +5 -5
  351. package/dist/useDraggableLayout.d.ts +5 -5
  352. package/dist/useDynamicFormState.d.ts +17 -17
  353. package/dist/useEdgeInteraction.d.ts +2 -2
  354. package/dist/useFullscreen.d.ts +2 -2
  355. package/dist/useInfiniteScroll.d.ts +3 -3
  356. package/dist/useModalEdit.d.ts +6 -6
  357. package/dist/useQRCode.d.ts +3 -3
  358. package/dist/useSearchState.d.ts +2 -2
  359. package/dist/useSignatureHistory.d.ts +3 -3
  360. package/dist/useSplitResize.d.ts +5 -5
  361. package/dist/useTimeSelection.d.ts +2 -2
  362. package/dist/useTreeOperations.d.ts +1 -1
  363. package/dist/useWorkflowValidation.d.ts +3 -3
  364. package/package.json +5 -5
  365. package/dist/C_ActionBar-jZPsiXtT.css.map +0 -1
  366. package/dist/C_ActionBar-nnfbZCea.css.map +0 -1
  367. package/dist/C_Code-DPZlNSxL.css.map +0 -1
  368. package/dist/C_Code-avZjAnHD.css.map +0 -1
  369. package/dist/C_Editor-C49qURgb.css.map +0 -1
  370. package/dist/C_Editor-DuxBD9Qg.css.map +0 -1
  371. package/dist/C_FullCalendar-1U4VlG7X.css.map +0 -1
  372. package/dist/C_FullCalendar-DLUdCtqf.css.map +0 -1
  373. package/dist/C_Steps-BHYNJI1l.css.map +0 -1
  374. package/dist/C_Steps-DY7vl-4I.css.map +0 -1
  375. package/dist/C_Time-Bd_e1YDN.css.map +0 -1
  376. package/dist/C_Time-CKb_fwdm.css.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"C_SplitPane-Br2eK8IG.css","names":[],"sources":["../src/components/C_SplitPane/index.vue?vue&type=style&index=0&scoped=396d0f5b&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 分割面板组件样式 */\n.c-split-pane[data-v-396d0f5b] {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n position: relative;\n /* ─── 方向 ────────────────────────────────── */\n /* ─── 拖拽中 ──────────────────────────────── */\n /* ─── 禁用 ────────────────────────────────── */\n /* ─── 折叠过渡 ────────────────────────────── */\n}\n.c-split-pane--horizontal[data-v-396d0f5b] {\n flex-direction: row;\n}\n.c-split-pane--vertical[data-v-396d0f5b] {\n flex-direction: column;\n}\n.c-split-pane--dragging .split-panel__content[data-v-396d0f5b] {\n pointer-events: none;\n user-select: none;\n}\n.c-split-pane--disabled .split-gutter[data-v-396d0f5b] {\n cursor: default !important;\n opacity: 0.5;\n}\n.c-split-pane--disabled .split-gutter[data-v-396d0f5b]:hover {\n background: transparent;\n}\n.c-split-pane--collapsed-first .split-panel[data-v-396d0f5b], .c-split-pane--collapsed-second .split-panel[data-v-396d0f5b] {\n transition: width 0.3s ease, height 0.3s ease;\n}\n\n/* ─── 面板 ──────────────────────────────────── */\n.split-panel[data-v-396d0f5b] {\n overflow: hidden;\n position: relative;\n}\n.split-panel__content[data-v-396d0f5b] {\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n\n/* ─── 分割线手柄 ────────────────────────────── */\n.split-gutter[data-v-396d0f5b] {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n z-index: 1;\n background: var(--c-border, #e1e4e8);\n transition: background-color 0.2s ease;\n outline: none;\n /* 水平方向 */\n /* 垂直方向 */\n /* focus 轮廓 */\n /* ─── 视觉指示条 ──────────────────────────── */\n /* ─── 折叠按钮 ────────────────────────────── */\n}\n.c-split-pane--horizontal .split-gutter[data-v-396d0f5b] {\n cursor: col-resize;\n min-width: 4px;\n}\n.c-split-pane--horizontal .split-gutter[data-v-396d0f5b]:hover, .c-split-pane--horizontal .split-gutter[data-v-396d0f5b]:focus-visible {\n background: var(--c-primary, #409eff);\n}\n.c-split-pane--vertical .split-gutter[data-v-396d0f5b] {\n cursor: row-resize;\n min-height: 4px;\n}\n.c-split-pane--vertical .split-gutter[data-v-396d0f5b]:hover, .c-split-pane--vertical .split-gutter[data-v-396d0f5b]:focus-visible {\n background: var(--c-primary, #409eff);\n}\n.split-gutter[data-v-396d0f5b]:focus-visible {\n box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);\n}\n.split-gutter__visual[data-v-396d0f5b] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.split-gutter__dots[data-v-396d0f5b] {\n display: flex;\n gap: 2px;\n}\n.c-split-pane--horizontal .split-gutter__dots[data-v-396d0f5b] {\n flex-direction: column;\n}\n.c-split-pane--vertical .split-gutter__dots[data-v-396d0f5b] {\n flex-direction: row;\n}\n.split-gutter__dot[data-v-396d0f5b] {\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background: var(--c-text-4, #ccc);\n transition: background-color 0.2s ease;\n}\n.split-gutter:hover .split-gutter__dot[data-v-396d0f5b] {\n background: #fff;\n}\n.split-gutter__collapse-btn[data-v-396d0f5b] {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n padding: 0;\n border: 1px solid var(--c-border, #e1e4e8);\n border-radius: 50%;\n background: var(--c-bg-card, #fff);\n color: var(--c-text-3, #999);\n font-size: 12px;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;\n z-index: 2;\n /* 水平方向的定位 */\n /* 垂直方向的定位 */\n}\n.split-gutter:hover .split-gutter__collapse-btn[data-v-396d0f5b] {\n opacity: 1;\n}\n.split-gutter__collapse-btn[data-v-396d0f5b]:hover {\n color: var(--c-primary, #409eff);\n background: var(--c-bg, #fff);\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn[data-v-396d0f5b] {\n left: 50%;\n transform: translateX(-50%);\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn--first[data-v-396d0f5b] {\n top: 8px;\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn--second[data-v-396d0f5b] {\n bottom: 8px;\n}\n.c-split-pane--vertical .split-gutter__collapse-btn[data-v-396d0f5b] {\n top: 50%;\n transform: translateY(-50%);\n}\n.c-split-pane--vertical .split-gutter__collapse-btn--first[data-v-396d0f5b] {\n left: 8px;\n}\n.c-split-pane--vertical .split-gutter__collapse-btn--second[data-v-396d0f5b] {\n right: 8px;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
1
+ {"version":3,"file":"C_SplitPane-BOwr1C7K.css","names":[],"sources":["../src/components/C_SplitPane/index.vue?vue&type=style&index=0&scoped=83a6f647&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 分割面板组件样式 */\n.c-split-pane[data-v-83a6f647] {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n position: relative;\n /* ─── 方向 ────────────────────────────────── */\n /* ─── 拖拽中 ──────────────────────────────── */\n /* ─── 禁用 ────────────────────────────────── */\n /* ─── 折叠过渡 ────────────────────────────── */\n}\n.c-split-pane--horizontal[data-v-83a6f647] {\n flex-direction: row;\n}\n.c-split-pane--vertical[data-v-83a6f647] {\n flex-direction: column;\n}\n.c-split-pane--dragging .split-panel__content[data-v-83a6f647] {\n pointer-events: none;\n user-select: none;\n}\n.c-split-pane--disabled .split-gutter[data-v-83a6f647] {\n cursor: default !important;\n opacity: 0.5;\n}\n.c-split-pane--disabled .split-gutter[data-v-83a6f647]:hover {\n background: transparent;\n}\n.c-split-pane--collapsed-first .split-panel[data-v-83a6f647], .c-split-pane--collapsed-second .split-panel[data-v-83a6f647] {\n transition: width 0.3s ease, height 0.3s ease;\n}\n\n/* ─── 面板 ──────────────────────────────────── */\n.split-panel[data-v-83a6f647] {\n overflow: hidden;\n position: relative;\n}\n.split-panel__content[data-v-83a6f647] {\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n\n/* ─── 分割线手柄 ────────────────────────────── */\n.split-gutter[data-v-83a6f647] {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n z-index: 1;\n background: var(--c-border, #e1e4e8);\n transition: background-color 0.2s ease;\n outline: none;\n /* 水平方向 */\n /* 垂直方向 */\n /* focus 轮廓 */\n /* ─── 视觉指示条 ──────────────────────────── */\n /* ─── 折叠按钮 ────────────────────────────── */\n}\n.c-split-pane--horizontal .split-gutter[data-v-83a6f647] {\n cursor: col-resize;\n min-width: 4px;\n}\n.c-split-pane--horizontal .split-gutter[data-v-83a6f647]:hover, .c-split-pane--horizontal .split-gutter[data-v-83a6f647]:focus-visible {\n background: var(--c-primary, #409eff);\n}\n.c-split-pane--vertical .split-gutter[data-v-83a6f647] {\n cursor: row-resize;\n min-height: 4px;\n}\n.c-split-pane--vertical .split-gutter[data-v-83a6f647]:hover, .c-split-pane--vertical .split-gutter[data-v-83a6f647]:focus-visible {\n background: var(--c-primary, #409eff);\n}\n.split-gutter[data-v-83a6f647]:focus-visible {\n box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);\n}\n.split-gutter__visual[data-v-83a6f647] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.split-gutter__dots[data-v-83a6f647] {\n display: flex;\n gap: 2px;\n}\n.c-split-pane--horizontal .split-gutter__dots[data-v-83a6f647] {\n flex-direction: column;\n}\n.c-split-pane--vertical .split-gutter__dots[data-v-83a6f647] {\n flex-direction: row;\n}\n.split-gutter__dot[data-v-83a6f647] {\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background: var(--c-text-4, #ccc);\n transition: background-color 0.2s ease;\n}\n.split-gutter:hover .split-gutter__dot[data-v-83a6f647] {\n background: #fff;\n}\n.split-gutter__collapse-btn[data-v-83a6f647] {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n padding: 0;\n border: 1px solid var(--c-border, #e1e4e8);\n border-radius: 50%;\n background: var(--c-bg-card, #fff);\n color: var(--c-text-3, #999);\n font-size: 12px;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;\n z-index: 2;\n /* 水平方向的定位 */\n /* 垂直方向的定位 */\n}\n.split-gutter:hover .split-gutter__collapse-btn[data-v-83a6f647] {\n opacity: 1;\n}\n.split-gutter__collapse-btn[data-v-83a6f647]:hover {\n color: var(--c-primary, #409eff);\n background: var(--c-bg, #fff);\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn[data-v-83a6f647] {\n left: 50%;\n transform: translateX(-50%);\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn--first[data-v-83a6f647] {\n top: 8px;\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn--second[data-v-83a6f647] {\n bottom: 8px;\n}\n.c-split-pane--vertical .split-gutter__collapse-btn[data-v-83a6f647] {\n top: 50%;\n transform: translateY(-50%);\n}\n.c-split-pane--vertical .split-gutter__collapse-btn--first[data-v-83a6f647] {\n left: 8px;\n}\n.c-split-pane--vertical .split-gutter__collapse-btn--second[data-v-83a6f647] {\n right: 8px;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
@@ -1 +1 @@
1
- {"version":3,"file":"C_SplitPane-DuyzUhKB.css","names":[],"sources":["../src/components/C_SplitPane/index.vue?vue&type=style&index=0&scoped=396d0f5b&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 分割面板组件样式 */\n.c-split-pane[data-v-396d0f5b] {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n position: relative;\n /* ─── 方向 ────────────────────────────────── */\n /* ─── 拖拽中 ──────────────────────────────── */\n /* ─── 禁用 ────────────────────────────────── */\n /* ─── 折叠过渡 ────────────────────────────── */\n}\n.c-split-pane--horizontal[data-v-396d0f5b] {\n flex-direction: row;\n}\n.c-split-pane--vertical[data-v-396d0f5b] {\n flex-direction: column;\n}\n.c-split-pane--dragging .split-panel__content[data-v-396d0f5b] {\n pointer-events: none;\n user-select: none;\n}\n.c-split-pane--disabled .split-gutter[data-v-396d0f5b] {\n cursor: default !important;\n opacity: 0.5;\n}\n.c-split-pane--disabled .split-gutter[data-v-396d0f5b]:hover {\n background: transparent;\n}\n.c-split-pane--collapsed-first .split-panel[data-v-396d0f5b], .c-split-pane--collapsed-second .split-panel[data-v-396d0f5b] {\n transition: width 0.3s ease, height 0.3s ease;\n}\n\n/* ─── 面板 ──────────────────────────────────── */\n.split-panel[data-v-396d0f5b] {\n overflow: hidden;\n position: relative;\n}\n.split-panel__content[data-v-396d0f5b] {\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n\n/* ─── 分割线手柄 ────────────────────────────── */\n.split-gutter[data-v-396d0f5b] {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n z-index: 1;\n background: var(--c-border, #e1e4e8);\n transition: background-color 0.2s ease;\n outline: none;\n /* 水平方向 */\n /* 垂直方向 */\n /* focus 轮廓 */\n /* ─── 视觉指示条 ──────────────────────────── */\n /* ─── 折叠按钮 ────────────────────────────── */\n}\n.c-split-pane--horizontal .split-gutter[data-v-396d0f5b] {\n cursor: col-resize;\n min-width: 4px;\n}\n.c-split-pane--horizontal .split-gutter[data-v-396d0f5b]:hover, .c-split-pane--horizontal .split-gutter[data-v-396d0f5b]:focus-visible {\n background: var(--c-primary, #409eff);\n}\n.c-split-pane--vertical .split-gutter[data-v-396d0f5b] {\n cursor: row-resize;\n min-height: 4px;\n}\n.c-split-pane--vertical .split-gutter[data-v-396d0f5b]:hover, .c-split-pane--vertical .split-gutter[data-v-396d0f5b]:focus-visible {\n background: var(--c-primary, #409eff);\n}\n.split-gutter[data-v-396d0f5b]:focus-visible {\n box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);\n}\n.split-gutter__visual[data-v-396d0f5b] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.split-gutter__dots[data-v-396d0f5b] {\n display: flex;\n gap: 2px;\n}\n.c-split-pane--horizontal .split-gutter__dots[data-v-396d0f5b] {\n flex-direction: column;\n}\n.c-split-pane--vertical .split-gutter__dots[data-v-396d0f5b] {\n flex-direction: row;\n}\n.split-gutter__dot[data-v-396d0f5b] {\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background: var(--c-text-4, #ccc);\n transition: background-color 0.2s ease;\n}\n.split-gutter:hover .split-gutter__dot[data-v-396d0f5b] {\n background: #fff;\n}\n.split-gutter__collapse-btn[data-v-396d0f5b] {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n padding: 0;\n border: 1px solid var(--c-border, #e1e4e8);\n border-radius: 50%;\n background: var(--c-bg-card, #fff);\n color: var(--c-text-3, #999);\n font-size: 12px;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;\n z-index: 2;\n /* 水平方向的定位 */\n /* 垂直方向的定位 */\n}\n.split-gutter:hover .split-gutter__collapse-btn[data-v-396d0f5b] {\n opacity: 1;\n}\n.split-gutter__collapse-btn[data-v-396d0f5b]:hover {\n color: var(--c-primary, #409eff);\n background: var(--c-bg, #fff);\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn[data-v-396d0f5b] {\n left: 50%;\n transform: translateX(-50%);\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn--first[data-v-396d0f5b] {\n top: 8px;\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn--second[data-v-396d0f5b] {\n bottom: 8px;\n}\n.c-split-pane--vertical .split-gutter__collapse-btn[data-v-396d0f5b] {\n top: 50%;\n transform: translateY(-50%);\n}\n.c-split-pane--vertical .split-gutter__collapse-btn--first[data-v-396d0f5b] {\n left: 8px;\n}\n.c-split-pane--vertical .split-gutter__collapse-btn--second[data-v-396d0f5b] {\n right: 8px;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
1
+ {"version":3,"file":"C_SplitPane-N-a_D-7F.css","names":[],"sources":["../src/components/C_SplitPane/index.vue?vue&type=style&index=0&scoped=83a6f647&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 分割面板组件样式 */\n.c-split-pane[data-v-83a6f647] {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n position: relative;\n /* ─── 方向 ────────────────────────────────── */\n /* ─── 拖拽中 ──────────────────────────────── */\n /* ─── 禁用 ────────────────────────────────── */\n /* ─── 折叠过渡 ────────────────────────────── */\n}\n.c-split-pane--horizontal[data-v-83a6f647] {\n flex-direction: row;\n}\n.c-split-pane--vertical[data-v-83a6f647] {\n flex-direction: column;\n}\n.c-split-pane--dragging .split-panel__content[data-v-83a6f647] {\n pointer-events: none;\n user-select: none;\n}\n.c-split-pane--disabled .split-gutter[data-v-83a6f647] {\n cursor: default !important;\n opacity: 0.5;\n}\n.c-split-pane--disabled .split-gutter[data-v-83a6f647]:hover {\n background: transparent;\n}\n.c-split-pane--collapsed-first .split-panel[data-v-83a6f647], .c-split-pane--collapsed-second .split-panel[data-v-83a6f647] {\n transition: width 0.3s ease, height 0.3s ease;\n}\n\n/* ─── 面板 ──────────────────────────────────── */\n.split-panel[data-v-83a6f647] {\n overflow: hidden;\n position: relative;\n}\n.split-panel__content[data-v-83a6f647] {\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n\n/* ─── 分割线手柄 ────────────────────────────── */\n.split-gutter[data-v-83a6f647] {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n z-index: 1;\n background: var(--c-border, #e1e4e8);\n transition: background-color 0.2s ease;\n outline: none;\n /* 水平方向 */\n /* 垂直方向 */\n /* focus 轮廓 */\n /* ─── 视觉指示条 ──────────────────────────── */\n /* ─── 折叠按钮 ────────────────────────────── */\n}\n.c-split-pane--horizontal .split-gutter[data-v-83a6f647] {\n cursor: col-resize;\n min-width: 4px;\n}\n.c-split-pane--horizontal .split-gutter[data-v-83a6f647]:hover, .c-split-pane--horizontal .split-gutter[data-v-83a6f647]:focus-visible {\n background: var(--c-primary, #409eff);\n}\n.c-split-pane--vertical .split-gutter[data-v-83a6f647] {\n cursor: row-resize;\n min-height: 4px;\n}\n.c-split-pane--vertical .split-gutter[data-v-83a6f647]:hover, .c-split-pane--vertical .split-gutter[data-v-83a6f647]:focus-visible {\n background: var(--c-primary, #409eff);\n}\n.split-gutter[data-v-83a6f647]:focus-visible {\n box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);\n}\n.split-gutter__visual[data-v-83a6f647] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.split-gutter__dots[data-v-83a6f647] {\n display: flex;\n gap: 2px;\n}\n.c-split-pane--horizontal .split-gutter__dots[data-v-83a6f647] {\n flex-direction: column;\n}\n.c-split-pane--vertical .split-gutter__dots[data-v-83a6f647] {\n flex-direction: row;\n}\n.split-gutter__dot[data-v-83a6f647] {\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background: var(--c-text-4, #ccc);\n transition: background-color 0.2s ease;\n}\n.split-gutter:hover .split-gutter__dot[data-v-83a6f647] {\n background: #fff;\n}\n.split-gutter__collapse-btn[data-v-83a6f647] {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n padding: 0;\n border: 1px solid var(--c-border, #e1e4e8);\n border-radius: 50%;\n background: var(--c-bg-card, #fff);\n color: var(--c-text-3, #999);\n font-size: 12px;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;\n z-index: 2;\n /* 水平方向的定位 */\n /* 垂直方向的定位 */\n}\n.split-gutter:hover .split-gutter__collapse-btn[data-v-83a6f647] {\n opacity: 1;\n}\n.split-gutter__collapse-btn[data-v-83a6f647]:hover {\n color: var(--c-primary, #409eff);\n background: var(--c-bg, #fff);\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn[data-v-83a6f647] {\n left: 50%;\n transform: translateX(-50%);\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn--first[data-v-83a6f647] {\n top: 8px;\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn--second[data-v-83a6f647] {\n bottom: 8px;\n}\n.c-split-pane--vertical .split-gutter__collapse-btn[data-v-83a6f647] {\n top: 50%;\n transform: translateY(-50%);\n}\n.c-split-pane--vertical .split-gutter__collapse-btn--first[data-v-83a6f647] {\n left: 8px;\n}\n.c-split-pane--vertical .split-gutter__collapse-btn--second[data-v-83a6f647] {\n right: 8px;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
@@ -1 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./C_Icon.js`);const e=require(`./C_SplitPane.js`);exports.C_SplitPane=e.t,exports.useSplitResize=e.n;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./C_SplitPane.js`);exports.C_SplitPane=e.t,exports.useSplitResize=e.n;
@@ -1,5 +1,5 @@
1
1
  /* unplugin-vue-components disabled *//* 分割面板组件样式 */
2
- .c-split-pane[data-v-396d0f5b] {
2
+ .c-split-pane[data-v-83a6f647] {
3
3
  display: flex;
4
4
  width: 100%;
5
5
  height: 100%;
@@ -10,40 +10,40 @@
10
10
  /* ─── 禁用 ────────────────────────────────── */
11
11
  /* ─── 折叠过渡 ────────────────────────────── */
12
12
  }
13
- .c-split-pane--horizontal[data-v-396d0f5b] {
13
+ .c-split-pane--horizontal[data-v-83a6f647] {
14
14
  flex-direction: row;
15
15
  }
16
- .c-split-pane--vertical[data-v-396d0f5b] {
16
+ .c-split-pane--vertical[data-v-83a6f647] {
17
17
  flex-direction: column;
18
18
  }
19
- .c-split-pane--dragging .split-panel__content[data-v-396d0f5b] {
19
+ .c-split-pane--dragging .split-panel__content[data-v-83a6f647] {
20
20
  pointer-events: none;
21
21
  user-select: none;
22
22
  }
23
- .c-split-pane--disabled .split-gutter[data-v-396d0f5b] {
23
+ .c-split-pane--disabled .split-gutter[data-v-83a6f647] {
24
24
  cursor: default !important;
25
25
  opacity: 0.5;
26
26
  }
27
- .c-split-pane--disabled .split-gutter[data-v-396d0f5b]:hover {
27
+ .c-split-pane--disabled .split-gutter[data-v-83a6f647]:hover {
28
28
  background: transparent;
29
29
  }
30
- .c-split-pane--collapsed-first .split-panel[data-v-396d0f5b], .c-split-pane--collapsed-second .split-panel[data-v-396d0f5b] {
30
+ .c-split-pane--collapsed-first .split-panel[data-v-83a6f647], .c-split-pane--collapsed-second .split-panel[data-v-83a6f647] {
31
31
  transition: width 0.3s ease, height 0.3s ease;
32
32
  }
33
33
 
34
34
  /* ─── 面板 ──────────────────────────────────── */
35
- .split-panel[data-v-396d0f5b] {
35
+ .split-panel[data-v-83a6f647] {
36
36
  overflow: hidden;
37
37
  position: relative;
38
38
  }
39
- .split-panel__content[data-v-396d0f5b] {
39
+ .split-panel__content[data-v-83a6f647] {
40
40
  width: 100%;
41
41
  height: 100%;
42
42
  overflow: auto;
43
43
  }
44
44
 
45
45
  /* ─── 分割线手柄 ────────────────────────────── */
46
- .split-gutter[data-v-396d0f5b] {
46
+ .split-gutter[data-v-83a6f647] {
47
47
  position: relative;
48
48
  display: flex;
49
49
  align-items: center;
@@ -59,49 +59,49 @@
59
59
  /* ─── 视觉指示条 ──────────────────────────── */
60
60
  /* ─── 折叠按钮 ────────────────────────────── */
61
61
  }
62
- .c-split-pane--horizontal .split-gutter[data-v-396d0f5b] {
62
+ .c-split-pane--horizontal .split-gutter[data-v-83a6f647] {
63
63
  cursor: col-resize;
64
64
  min-width: 4px;
65
65
  }
66
- .c-split-pane--horizontal .split-gutter[data-v-396d0f5b]:hover, .c-split-pane--horizontal .split-gutter[data-v-396d0f5b]:focus-visible {
66
+ .c-split-pane--horizontal .split-gutter[data-v-83a6f647]:hover, .c-split-pane--horizontal .split-gutter[data-v-83a6f647]:focus-visible {
67
67
  background: var(--c-primary, #409eff);
68
68
  }
69
- .c-split-pane--vertical .split-gutter[data-v-396d0f5b] {
69
+ .c-split-pane--vertical .split-gutter[data-v-83a6f647] {
70
70
  cursor: row-resize;
71
71
  min-height: 4px;
72
72
  }
73
- .c-split-pane--vertical .split-gutter[data-v-396d0f5b]:hover, .c-split-pane--vertical .split-gutter[data-v-396d0f5b]:focus-visible {
73
+ .c-split-pane--vertical .split-gutter[data-v-83a6f647]:hover, .c-split-pane--vertical .split-gutter[data-v-83a6f647]:focus-visible {
74
74
  background: var(--c-primary, #409eff);
75
75
  }
76
- .split-gutter[data-v-396d0f5b]:focus-visible {
76
+ .split-gutter[data-v-83a6f647]:focus-visible {
77
77
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);
78
78
  }
79
- .split-gutter__visual[data-v-396d0f5b] {
79
+ .split-gutter__visual[data-v-83a6f647] {
80
80
  display: flex;
81
81
  align-items: center;
82
82
  justify-content: center;
83
83
  }
84
- .split-gutter__dots[data-v-396d0f5b] {
84
+ .split-gutter__dots[data-v-83a6f647] {
85
85
  display: flex;
86
86
  gap: 2px;
87
87
  }
88
- .c-split-pane--horizontal .split-gutter__dots[data-v-396d0f5b] {
88
+ .c-split-pane--horizontal .split-gutter__dots[data-v-83a6f647] {
89
89
  flex-direction: column;
90
90
  }
91
- .c-split-pane--vertical .split-gutter__dots[data-v-396d0f5b] {
91
+ .c-split-pane--vertical .split-gutter__dots[data-v-83a6f647] {
92
92
  flex-direction: row;
93
93
  }
94
- .split-gutter__dot[data-v-396d0f5b] {
94
+ .split-gutter__dot[data-v-83a6f647] {
95
95
  width: 3px;
96
96
  height: 3px;
97
97
  border-radius: 50%;
98
98
  background: var(--c-text-4, #ccc);
99
99
  transition: background-color 0.2s ease;
100
100
  }
101
- .split-gutter:hover .split-gutter__dot[data-v-396d0f5b] {
101
+ .split-gutter:hover .split-gutter__dot[data-v-83a6f647] {
102
102
  background: #fff;
103
103
  }
104
- .split-gutter__collapse-btn[data-v-396d0f5b] {
104
+ .split-gutter__collapse-btn[data-v-83a6f647] {
105
105
  position: absolute;
106
106
  display: flex;
107
107
  align-items: center;
@@ -121,32 +121,32 @@
121
121
  /* 水平方向的定位 */
122
122
  /* 垂直方向的定位 */
123
123
  }
124
- .split-gutter:hover .split-gutter__collapse-btn[data-v-396d0f5b] {
124
+ .split-gutter:hover .split-gutter__collapse-btn[data-v-83a6f647] {
125
125
  opacity: 1;
126
126
  }
127
- .split-gutter__collapse-btn[data-v-396d0f5b]:hover {
127
+ .split-gutter__collapse-btn[data-v-83a6f647]:hover {
128
128
  color: var(--c-primary, #409eff);
129
129
  background: var(--c-bg, #fff);
130
130
  }
131
- .c-split-pane--horizontal .split-gutter__collapse-btn[data-v-396d0f5b] {
131
+ .c-split-pane--horizontal .split-gutter__collapse-btn[data-v-83a6f647] {
132
132
  left: 50%;
133
133
  transform: translateX(-50%);
134
134
  }
135
- .c-split-pane--horizontal .split-gutter__collapse-btn--first[data-v-396d0f5b] {
135
+ .c-split-pane--horizontal .split-gutter__collapse-btn--first[data-v-83a6f647] {
136
136
  top: 8px;
137
137
  }
138
- .c-split-pane--horizontal .split-gutter__collapse-btn--second[data-v-396d0f5b] {
138
+ .c-split-pane--horizontal .split-gutter__collapse-btn--second[data-v-83a6f647] {
139
139
  bottom: 8px;
140
140
  }
141
- .c-split-pane--vertical .split-gutter__collapse-btn[data-v-396d0f5b] {
141
+ .c-split-pane--vertical .split-gutter__collapse-btn[data-v-83a6f647] {
142
142
  top: 50%;
143
143
  transform: translateY(-50%);
144
144
  }
145
- .c-split-pane--vertical .split-gutter__collapse-btn--first[data-v-396d0f5b] {
145
+ .c-split-pane--vertical .split-gutter__collapse-btn--first[data-v-83a6f647] {
146
146
  left: 8px;
147
147
  }
148
- .c-split-pane--vertical .split-gutter__collapse-btn--second[data-v-396d0f5b] {
148
+ .c-split-pane--vertical .split-gutter__collapse-btn--second[data-v-83a6f647] {
149
149
  right: 8px;
150
150
  }
151
151
 
152
- /*# sourceMappingURL=C_SplitPane-Br2eK8IG.css.map*/
152
+ /*# sourceMappingURL=C_SplitPane-BOwr1C7K.css.map*/
@@ -1 +1 @@
1
- import"./C_Icon2.js";import{n as e,t}from"./C_SplitPane2.js";export{t as C_SplitPane,e as useSplitResize};
1
+ import{n as e,t}from"./C_SplitPane2.js";export{t as C_SplitPane,e as useSplitResize};
@@ -1 +1 @@
1
- {"version":3,"file":"C_SplitPane.js","names":["direction","disabled","showCollapseButton","collapsible"],"sources":["../src/components/C_SplitPane/composables/useSplitResize.ts","../src/components/C_SplitPane/index.vue","../src/components/C_SplitPane/index.vue","../src/components/C_SplitPane/index.vue"],"sourcesContent":["import { ref, computed, onUnmounted } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { CollapseTarget, SplitDirection } from \"../types\";\r\n\r\ninterface UseSplitResizeOptions {\r\n /** 容器引用 */\r\n containerRef: Ref<HTMLElement | null>;\r\n /** 分割方向 */\r\n direction: Ref<SplitDirection>;\r\n /** 首面板默认大小(百分比) */\r\n defaultSize: number;\r\n /** 首面板最小大小(百分比) */\r\n minSize: number;\r\n /** 首面板最大大小(百分比) */\r\n maxSize: number;\r\n /** 是否禁用 */\r\n disabled: Ref<boolean>;\r\n /** 是否可折叠 */\r\n collapsible: Ref<boolean>;\r\n /** 键盘微调步长(百分比) */\r\n step: number;\r\n /** resize 回调 */\r\n onResize?: (firstSize: number, secondSize: number) => void;\r\n /** 折叠回调 */\r\n onCollapse?: (target: CollapseTarget) => void;\r\n /** 展开回调 */\r\n onExpand?: (target: CollapseTarget) => void;\r\n /** 拖拽开始回调 */\r\n onDragStart?: (size: number) => void;\r\n /** 拖拽结束回调 */\r\n onDragEnd?: (size: number) => void;\r\n}\r\n\r\n/**\r\n * 分割面板拖拽调整逻辑\r\n */\r\nexport function useSplitResize(options: UseSplitResizeOptions) {\r\n const {\r\n containerRef,\r\n direction,\r\n defaultSize,\r\n minSize,\r\n maxSize,\r\n disabled,\r\n collapsible,\r\n step,\r\n onResize,\r\n onCollapse,\r\n onExpand,\r\n onDragStart,\r\n onDragEnd,\r\n } = options;\r\n\r\n /** 首面板当前大小(百分比) */\r\n const panelSize = ref(defaultSize);\r\n /** 是否正在拖拽 */\r\n const isDragging = ref(false);\r\n /** 折叠状态 */\r\n const collapsedTarget = ref<CollapseTarget | null>(null);\r\n /** 折叠前记住的面板大小 */\r\n const sizeBeforeCollapse = ref(defaultSize);\r\n\r\n /** 首面板是否折叠 */\r\n const isFirstCollapsed = computed(() => collapsedTarget.value === \"first\");\r\n /** 第二面板是否折叠 */\r\n const isSecondCollapsed = computed(() => collapsedTarget.value === \"second\");\r\n\r\n /**\r\n * 将大小限制在 min/max 范围内\r\n */\r\n const clampSize = (size: number): number => {\r\n return Math.min(maxSize, Math.max(minSize, size));\r\n };\r\n\r\n /**\r\n * 获取容器在分割方向上的总长度(px)\r\n */\r\n const getContainerLength = (): number => {\r\n const container = containerRef.value;\r\n if (!container) return 0;\r\n return direction.value === \"horizontal\"\r\n ? container.offsetWidth\r\n : container.offsetHeight;\r\n };\r\n\r\n /**\r\n * 获取容器在分割方向上的起始坐标\r\n */\r\n const getContainerStart = (): number => {\r\n const container = containerRef.value;\r\n if (!container) return 0;\r\n const rect = container.getBoundingClientRect();\r\n return direction.value === \"horizontal\" ? rect.left : rect.top;\r\n };\r\n\r\n /**\r\n * 根据鼠标/触摸位置计算面板大小(百分比)\r\n */\r\n const calcSizeFromPosition = (clientPos: number): number => {\r\n const containerLength = getContainerLength();\r\n if (containerLength === 0) return panelSize.value;\r\n\r\n const containerStart = getContainerStart();\r\n const offset = clientPos - containerStart;\r\n const percentage = (offset / containerLength) * 100;\r\n\r\n return clampSize(percentage);\r\n };\r\n\r\n /**\r\n * 获取事件的位置坐标\r\n */\r\n const getClientPos = (e: MouseEvent | TouchEvent): number => {\r\n if (e instanceof TouchEvent) {\r\n return direction.value === \"horizontal\"\r\n ? e.touches[0].clientX\r\n : e.touches[0].clientY;\r\n }\r\n return direction.value === \"horizontal\" ? e.clientX : e.clientY;\r\n };\r\n\r\n /**\r\n * 更新面板大小\r\n */\r\n const updateSize = (newSize: number) => {\r\n const clamped = clampSize(newSize);\r\n panelSize.value = clamped;\r\n onResize?.(clamped, 100 - clamped);\r\n };\r\n\r\n /* ─── 拖拽逻辑 ──────────────────────────────── */\r\n const handleMouseMove = (e: MouseEvent | TouchEvent) => {\r\n if (!isDragging.value || disabled.value) return;\r\n\r\n e.preventDefault();\r\n const pos = getClientPos(e);\r\n const newSize = calcSizeFromPosition(pos);\r\n\r\n /* 拖拽过程中取消折叠状态 */\r\n if (collapsedTarget.value) {\r\n collapsedTarget.value = null;\r\n }\r\n updateSize(newSize);\r\n };\r\n\r\n const handleMouseUp = () => {\r\n if (!isDragging.value) return;\r\n\r\n isDragging.value = false;\r\n document.body.style.cursor = \"\";\r\n document.body.style.userSelect = \"\";\r\n\r\n onDragEnd?.(panelSize.value);\r\n\r\n document.removeEventListener(\"mousemove\", handleMouseMove);\r\n document.removeEventListener(\"mouseup\", handleMouseUp);\r\n document.removeEventListener(\"touchmove\", handleMouseMove);\r\n document.removeEventListener(\"touchend\", handleMouseUp);\r\n };\r\n\r\n const handleMouseDown = (e: MouseEvent | TouchEvent) => {\r\n if (disabled.value) return;\r\n\r\n e.preventDefault();\r\n /* preventDefault 会阻止默认聚焦行为,需手动 focus 以支持键盘控制 */\r\n (e.currentTarget as HTMLElement)?.focus();\r\n isDragging.value = true;\r\n\r\n document.body.style.cursor =\r\n direction.value === \"horizontal\" ? \"col-resize\" : \"row-resize\";\r\n document.body.style.userSelect = \"none\";\r\n\r\n onDragStart?.(panelSize.value);\r\n\r\n document.addEventListener(\"mousemove\", handleMouseMove);\r\n document.addEventListener(\"mouseup\", handleMouseUp);\r\n document.addEventListener(\"touchmove\", handleMouseMove, { passive: false });\r\n document.addEventListener(\"touchend\", handleMouseUp);\r\n };\r\n\r\n /* ─── 双击折叠 ──────────────────────────────── */\r\n const handleDoubleClick = () => {\r\n if (disabled.value || !collapsible.value) return;\r\n toggle(\"first\");\r\n };\r\n\r\n /* ─── 折叠 / 展开 ───────────────────────────── */\r\n const collapse = (target: CollapseTarget = \"first\") => {\r\n if (!collapsible.value || collapsedTarget.value === target) return;\r\n\r\n /* 记住折叠前的大小 */\r\n if (!collapsedTarget.value) {\r\n sizeBeforeCollapse.value = panelSize.value;\r\n }\r\n\r\n collapsedTarget.value = target;\r\n\r\n if (target === \"first\") {\r\n panelSize.value = 0;\r\n } else {\r\n panelSize.value = 100;\r\n }\r\n\r\n onCollapse?.(target);\r\n onResize?.(panelSize.value, 100 - panelSize.value);\r\n };\r\n\r\n const expand = () => {\r\n if (!collapsedTarget.value) return;\r\n\r\n const target = collapsedTarget.value;\r\n collapsedTarget.value = null;\r\n panelSize.value = sizeBeforeCollapse.value;\r\n\r\n onExpand?.(target);\r\n onResize?.(panelSize.value, 100 - panelSize.value);\r\n };\r\n\r\n const toggle = (target: CollapseTarget = \"first\") => {\r\n if (collapsedTarget.value) {\r\n expand();\r\n } else {\r\n collapse(target);\r\n }\r\n };\r\n\r\n /* ─── 键盘微调 ──────────────────────────────── */\r\n /**\r\n * 根据按键获取增量\r\n */\r\n const getKeyDelta = (key: string, isHorizontal: boolean): number | null => {\r\n const keyMap: Record<string, number | null> = {\r\n ArrowLeft: isHorizontal ? -step : 0,\r\n ArrowRight: isHorizontal ? step : 0,\r\n ArrowUp: !isHorizontal ? -step : 0,\r\n ArrowDown: !isHorizontal ? step : 0,\r\n };\r\n return keyMap[key] ?? null;\r\n };\r\n\r\n const handleKeyDown = (e: KeyboardEvent) => {\r\n if (disabled.value) return;\r\n\r\n /* Home / End 直接跳到极值 */\r\n if (e.key === \"Home\") {\r\n updateSize(minSize);\r\n e.preventDefault();\r\n return;\r\n }\r\n if (e.key === \"End\") {\r\n updateSize(maxSize);\r\n e.preventDefault();\r\n return;\r\n }\r\n\r\n const delta = getKeyDelta(e.key, direction.value === \"horizontal\");\r\n if (delta === null || delta === 0) return;\r\n\r\n e.preventDefault();\r\n if (collapsedTarget.value) collapsedTarget.value = null;\r\n updateSize(panelSize.value + delta);\r\n };\r\n\r\n /* ─── 重置 / 查询 ───────────────────────────── */\r\n const resetSize = () => {\r\n collapsedTarget.value = null;\r\n panelSize.value = defaultSize;\r\n onResize?.(defaultSize, 100 - defaultSize);\r\n };\r\n\r\n const setSize = (size: number) => {\r\n collapsedTarget.value = null;\r\n updateSize(size);\r\n };\r\n\r\n const getPanelInfo = () => ({\r\n first: {\r\n size: panelSize.value,\r\n collapsed: isFirstCollapsed.value,\r\n },\r\n second: {\r\n size: 100 - panelSize.value,\r\n collapsed: isSecondCollapsed.value,\r\n },\r\n });\r\n\r\n /* 清理 */\r\n onUnmounted(() => {\r\n document.removeEventListener(\"mousemove\", handleMouseMove);\r\n document.removeEventListener(\"mouseup\", handleMouseUp);\r\n document.removeEventListener(\"touchmove\", handleMouseMove);\r\n document.removeEventListener(\"touchend\", handleMouseUp);\r\n });\r\n\r\n return {\r\n panelSize,\r\n isDragging,\r\n collapsedTarget,\r\n isFirstCollapsed,\r\n isSecondCollapsed,\r\n handleMouseDown,\r\n handleDoubleClick,\r\n handleKeyDown,\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n setSize,\r\n getPanelInfo,\r\n };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"containerRef\"\r\n class=\"c-split-pane\"\r\n :class=\"[\r\n `c-split-pane--${direction}`,\r\n {\r\n 'c-split-pane--dragging': isDragging,\r\n 'c-split-pane--disabled': disabled,\r\n 'c-split-pane--collapsed-first': isFirstCollapsed,\r\n 'c-split-pane--collapsed-second': isSecondCollapsed,\r\n },\r\n ]\"\r\n >\r\n <!-- 首面板 -->\r\n <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n <div class=\"split-panel__content\">\r\n <slot name=\"first\" />\r\n </div>\r\n </div>\r\n\r\n <!-- 分割线手柄 -->\r\n <div\r\n class=\"split-gutter\"\r\n :style=\"gutterStyle\"\r\n role=\"separator\"\r\n :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n :aria-valuenow=\"Math.round(panelSize)\"\r\n :aria-valuemin=\"0\"\r\n :aria-valuemax=\"100\"\r\n tabindex=\"0\"\r\n @mousedown=\"handleMouseDown\"\r\n @touchstart.prevent=\"handleMouseDown\"\r\n @dblclick=\"handleDoubleClick\"\r\n @keydown=\"handleKeyDown\"\r\n >\r\n <div class=\"split-gutter__visual\">\r\n <div class=\"split-gutter__dots\">\r\n <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n </div>\r\n </div>\r\n\r\n <!-- 折叠按钮 -->\r\n <template v-if=\"showCollapseButton && collapsible\">\r\n <button\r\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n @click.stop=\"toggle('first')\"\r\n @mousedown.stop\r\n >\r\n <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n </button>\r\n <button\r\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n @click.stop=\"toggle('second')\"\r\n @mousedown.stop\r\n >\r\n <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n </button>\r\n </template>\r\n </div>\r\n\r\n <!-- 第二面板 -->\r\n <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n <div class=\"split-panel__content\">\r\n <slot name=\"second\" />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n /** 分割方向 */\r\n direction?: SplitDirection;\r\n /** 首面板默认大小(百分比 0-100) */\r\n defaultSize?: number;\r\n /** 首面板最小大小(百分比 0-100) */\r\n minSize?: number;\r\n /** 首面板最大大小(百分比 0-100) */\r\n maxSize?: number;\r\n /** 是否禁用拖拽调整 */\r\n disabled?: boolean;\r\n /** 是否可折叠 */\r\n collapsible?: boolean;\r\n /** 是否显示折叠按钮 */\r\n showCollapseButton?: boolean;\r\n /** 分割线宽度(px) */\r\n gutterSize?: number;\r\n /** 键盘微调步长(百分比) */\r\n step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n direction: \"horizontal\",\r\n defaultSize: 50,\r\n minSize: 0,\r\n maxSize: 100,\r\n disabled: false,\r\n collapsible: true,\r\n showCollapseButton: true,\r\n gutterSize: 6,\r\n step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n resize: [firstSize: number, secondSize: number];\r\n collapse: [target: CollapseTarget];\r\n expand: [target: CollapseTarget];\r\n \"drag-start\": [size: number];\r\n \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n panelSize,\r\n isDragging,\r\n isFirstCollapsed,\r\n isSecondCollapsed,\r\n handleMouseDown,\r\n handleDoubleClick,\r\n handleKeyDown,\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n setSize,\r\n getPanelInfo,\r\n} = useSplitResize({\r\n containerRef,\r\n direction: toRef(props, \"direction\"),\r\n defaultSize: props.defaultSize,\r\n minSize: props.minSize,\r\n maxSize: props.maxSize,\r\n disabled: toRef(props, \"disabled\"),\r\n collapsible: toRef(props, \"collapsible\"),\r\n step: props.step,\r\n onResize: (first, second) => emit(\"resize\", first, second),\r\n onCollapse: (target) => emit(\"collapse\", target),\r\n onExpand: (target) => emit(\"expand\", target),\r\n onDragStart: (size) => emit(\"drag-start\", size),\r\n onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n return props.direction === \"horizontal\"\r\n ? { width: sizeValue }\r\n : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n return props.direction === \"horizontal\"\r\n ? { width: sizeValue }\r\n : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n return props.direction === \"horizontal\"\r\n ? { width: `${props.gutterSize}px` }\r\n : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n if (props.direction === \"horizontal\") {\r\n return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n }\r\n return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n if (props.direction === \"horizontal\") {\r\n return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n }\r\n return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n getPanelInfo,\r\n setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"containerRef\"\r\n class=\"c-split-pane\"\r\n :class=\"[\r\n `c-split-pane--${direction}`,\r\n {\r\n 'c-split-pane--dragging': isDragging,\r\n 'c-split-pane--disabled': disabled,\r\n 'c-split-pane--collapsed-first': isFirstCollapsed,\r\n 'c-split-pane--collapsed-second': isSecondCollapsed,\r\n },\r\n ]\"\r\n >\r\n <!-- 首面板 -->\r\n <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n <div class=\"split-panel__content\">\r\n <slot name=\"first\" />\r\n </div>\r\n </div>\r\n\r\n <!-- 分割线手柄 -->\r\n <div\r\n class=\"split-gutter\"\r\n :style=\"gutterStyle\"\r\n role=\"separator\"\r\n :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n :aria-valuenow=\"Math.round(panelSize)\"\r\n :aria-valuemin=\"0\"\r\n :aria-valuemax=\"100\"\r\n tabindex=\"0\"\r\n @mousedown=\"handleMouseDown\"\r\n @touchstart.prevent=\"handleMouseDown\"\r\n @dblclick=\"handleDoubleClick\"\r\n @keydown=\"handleKeyDown\"\r\n >\r\n <div class=\"split-gutter__visual\">\r\n <div class=\"split-gutter__dots\">\r\n <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n </div>\r\n </div>\r\n\r\n <!-- 折叠按钮 -->\r\n <template v-if=\"showCollapseButton && collapsible\">\r\n <button\r\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n @click.stop=\"toggle('first')\"\r\n @mousedown.stop\r\n >\r\n <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n </button>\r\n <button\r\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n @click.stop=\"toggle('second')\"\r\n @mousedown.stop\r\n >\r\n <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n </button>\r\n </template>\r\n </div>\r\n\r\n <!-- 第二面板 -->\r\n <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n <div class=\"split-panel__content\">\r\n <slot name=\"second\" />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n /** 分割方向 */\r\n direction?: SplitDirection;\r\n /** 首面板默认大小(百分比 0-100) */\r\n defaultSize?: number;\r\n /** 首面板最小大小(百分比 0-100) */\r\n minSize?: number;\r\n /** 首面板最大大小(百分比 0-100) */\r\n maxSize?: number;\r\n /** 是否禁用拖拽调整 */\r\n disabled?: boolean;\r\n /** 是否可折叠 */\r\n collapsible?: boolean;\r\n /** 是否显示折叠按钮 */\r\n showCollapseButton?: boolean;\r\n /** 分割线宽度(px) */\r\n gutterSize?: number;\r\n /** 键盘微调步长(百分比) */\r\n step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n direction: \"horizontal\",\r\n defaultSize: 50,\r\n minSize: 0,\r\n maxSize: 100,\r\n disabled: false,\r\n collapsible: true,\r\n showCollapseButton: true,\r\n gutterSize: 6,\r\n step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n resize: [firstSize: number, secondSize: number];\r\n collapse: [target: CollapseTarget];\r\n expand: [target: CollapseTarget];\r\n \"drag-start\": [size: number];\r\n \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n panelSize,\r\n isDragging,\r\n isFirstCollapsed,\r\n isSecondCollapsed,\r\n handleMouseDown,\r\n handleDoubleClick,\r\n handleKeyDown,\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n setSize,\r\n getPanelInfo,\r\n} = useSplitResize({\r\n containerRef,\r\n direction: toRef(props, \"direction\"),\r\n defaultSize: props.defaultSize,\r\n minSize: props.minSize,\r\n maxSize: props.maxSize,\r\n disabled: toRef(props, \"disabled\"),\r\n collapsible: toRef(props, \"collapsible\"),\r\n step: props.step,\r\n onResize: (first, second) => emit(\"resize\", first, second),\r\n onCollapse: (target) => emit(\"collapse\", target),\r\n onExpand: (target) => emit(\"expand\", target),\r\n onDragStart: (size) => emit(\"drag-start\", size),\r\n onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n return props.direction === \"horizontal\"\r\n ? { width: sizeValue }\r\n : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n return props.direction === \"horizontal\"\r\n ? { width: sizeValue }\r\n : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n return props.direction === \"horizontal\"\r\n ? { width: `${props.gutterSize}px` }\r\n : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n if (props.direction === \"horizontal\") {\r\n return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n }\r\n return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n if (props.direction === \"horizontal\") {\r\n return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n }\r\n return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n getPanelInfo,\r\n setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"containerRef\"\r\n class=\"c-split-pane\"\r\n :class=\"[\r\n `c-split-pane--${direction}`,\r\n {\r\n 'c-split-pane--dragging': isDragging,\r\n 'c-split-pane--disabled': disabled,\r\n 'c-split-pane--collapsed-first': isFirstCollapsed,\r\n 'c-split-pane--collapsed-second': isSecondCollapsed,\r\n },\r\n ]\"\r\n >\r\n <!-- 首面板 -->\r\n <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n <div class=\"split-panel__content\">\r\n <slot name=\"first\" />\r\n </div>\r\n </div>\r\n\r\n <!-- 分割线手柄 -->\r\n <div\r\n class=\"split-gutter\"\r\n :style=\"gutterStyle\"\r\n role=\"separator\"\r\n :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n :aria-valuenow=\"Math.round(panelSize)\"\r\n :aria-valuemin=\"0\"\r\n :aria-valuemax=\"100\"\r\n tabindex=\"0\"\r\n @mousedown=\"handleMouseDown\"\r\n @touchstart.prevent=\"handleMouseDown\"\r\n @dblclick=\"handleDoubleClick\"\r\n @keydown=\"handleKeyDown\"\r\n >\r\n <div class=\"split-gutter__visual\">\r\n <div class=\"split-gutter__dots\">\r\n <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n </div>\r\n </div>\r\n\r\n <!-- 折叠按钮 -->\r\n <template v-if=\"showCollapseButton && collapsible\">\r\n <button\r\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n @click.stop=\"toggle('first')\"\r\n @mousedown.stop\r\n >\r\n <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n </button>\r\n <button\r\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n @click.stop=\"toggle('second')\"\r\n @mousedown.stop\r\n >\r\n <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n </button>\r\n </template>\r\n </div>\r\n\r\n <!-- 第二面板 -->\r\n <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n <div class=\"split-panel__content\">\r\n <slot name=\"second\" />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n /** 分割方向 */\r\n direction?: SplitDirection;\r\n /** 首面板默认大小(百分比 0-100) */\r\n defaultSize?: number;\r\n /** 首面板最小大小(百分比 0-100) */\r\n minSize?: number;\r\n /** 首面板最大大小(百分比 0-100) */\r\n maxSize?: number;\r\n /** 是否禁用拖拽调整 */\r\n disabled?: boolean;\r\n /** 是否可折叠 */\r\n collapsible?: boolean;\r\n /** 是否显示折叠按钮 */\r\n showCollapseButton?: boolean;\r\n /** 分割线宽度(px) */\r\n gutterSize?: number;\r\n /** 键盘微调步长(百分比) */\r\n step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n direction: \"horizontal\",\r\n defaultSize: 50,\r\n minSize: 0,\r\n maxSize: 100,\r\n disabled: false,\r\n collapsible: true,\r\n showCollapseButton: true,\r\n gutterSize: 6,\r\n step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n resize: [firstSize: number, secondSize: number];\r\n collapse: [target: CollapseTarget];\r\n expand: [target: CollapseTarget];\r\n \"drag-start\": [size: number];\r\n \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n panelSize,\r\n isDragging,\r\n isFirstCollapsed,\r\n isSecondCollapsed,\r\n handleMouseDown,\r\n handleDoubleClick,\r\n handleKeyDown,\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n setSize,\r\n getPanelInfo,\r\n} = useSplitResize({\r\n containerRef,\r\n direction: toRef(props, \"direction\"),\r\n defaultSize: props.defaultSize,\r\n minSize: props.minSize,\r\n maxSize: props.maxSize,\r\n disabled: toRef(props, \"disabled\"),\r\n collapsible: toRef(props, \"collapsible\"),\r\n step: props.step,\r\n onResize: (first, second) => emit(\"resize\", first, second),\r\n onCollapse: (target) => emit(\"collapse\", target),\r\n onExpand: (target) => emit(\"expand\", target),\r\n onDragStart: (size) => emit(\"drag-start\", size),\r\n onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n return props.direction === \"horizontal\"\r\n ? { width: sizeValue }\r\n : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n return props.direction === \"horizontal\"\r\n ? { width: sizeValue }\r\n : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n return props.direction === \"horizontal\"\r\n ? { width: `${props.gutterSize}px` }\r\n : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n if (props.direction === \"horizontal\") {\r\n return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n }\r\n return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n if (props.direction === \"horizontal\") {\r\n return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n }\r\n return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n getPanelInfo,\r\n setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
1
+ {"version":3,"file":"C_SplitPane.js","names":[],"sources":["../src/components/C_SplitPane/composables/useSplitResize.ts","../src/components/C_SplitPane/index.vue"],"sourcesContent":["import { ref, computed, onUnmounted } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { CollapseTarget, SplitDirection } from \"../types\";\r\n\r\ninterface UseSplitResizeOptions {\r\n /** 容器引用 */\r\n containerRef: Ref<HTMLElement | null>;\r\n /** 分割方向 */\r\n direction: Ref<SplitDirection>;\r\n /** 首面板默认大小(百分比) */\r\n defaultSize: number;\r\n /** 首面板最小大小(百分比) */\r\n minSize: number;\r\n /** 首面板最大大小(百分比) */\r\n maxSize: number;\r\n /** 是否禁用 */\r\n disabled: Ref<boolean>;\r\n /** 是否可折叠 */\r\n collapsible: Ref<boolean>;\r\n /** 键盘微调步长(百分比) */\r\n step: number;\r\n /** resize 回调 */\r\n onResize?: (firstSize: number, secondSize: number) => void;\r\n /** 折叠回调 */\r\n onCollapse?: (target: CollapseTarget) => void;\r\n /** 展开回调 */\r\n onExpand?: (target: CollapseTarget) => void;\r\n /** 拖拽开始回调 */\r\n onDragStart?: (size: number) => void;\r\n /** 拖拽结束回调 */\r\n onDragEnd?: (size: number) => void;\r\n}\r\n\r\n/**\r\n * 分割面板拖拽调整逻辑\r\n */\r\nexport function useSplitResize(options: UseSplitResizeOptions) {\r\n const {\r\n containerRef,\r\n direction,\r\n defaultSize,\r\n minSize,\r\n maxSize,\r\n disabled,\r\n collapsible,\r\n step,\r\n onResize,\r\n onCollapse,\r\n onExpand,\r\n onDragStart,\r\n onDragEnd,\r\n } = options;\r\n\r\n /** 首面板当前大小(百分比) */\r\n const panelSize = ref(defaultSize);\r\n /** 是否正在拖拽 */\r\n const isDragging = ref(false);\r\n /** 折叠状态 */\r\n const collapsedTarget = ref<CollapseTarget | null>(null);\r\n /** 折叠前记住的面板大小 */\r\n const sizeBeforeCollapse = ref(defaultSize);\r\n\r\n /** 首面板是否折叠 */\r\n const isFirstCollapsed = computed(() => collapsedTarget.value === \"first\");\r\n /** 第二面板是否折叠 */\r\n const isSecondCollapsed = computed(() => collapsedTarget.value === \"second\");\r\n\r\n /**\r\n * 将大小限制在 min/max 范围内\r\n */\r\n const clampSize = (size: number): number => {\r\n return Math.min(maxSize, Math.max(minSize, size));\r\n };\r\n\r\n /**\r\n * 获取容器在分割方向上的总长度(px)\r\n */\r\n const getContainerLength = (): number => {\r\n const container = containerRef.value;\r\n if (!container) return 0;\r\n return direction.value === \"horizontal\"\r\n ? container.offsetWidth\r\n : container.offsetHeight;\r\n };\r\n\r\n /**\r\n * 获取容器在分割方向上的起始坐标\r\n */\r\n const getContainerStart = (): number => {\r\n const container = containerRef.value;\r\n if (!container) return 0;\r\n const rect = container.getBoundingClientRect();\r\n return direction.value === \"horizontal\" ? rect.left : rect.top;\r\n };\r\n\r\n /**\r\n * 根据鼠标/触摸位置计算面板大小(百分比)\r\n */\r\n const calcSizeFromPosition = (clientPos: number): number => {\r\n const containerLength = getContainerLength();\r\n if (containerLength === 0) return panelSize.value;\r\n\r\n const containerStart = getContainerStart();\r\n const offset = clientPos - containerStart;\r\n const percentage = (offset / containerLength) * 100;\r\n\r\n return clampSize(percentage);\r\n };\r\n\r\n /**\r\n * 获取事件的位置坐标\r\n */\r\n const getClientPos = (e: MouseEvent | TouchEvent): number => {\r\n if (e instanceof TouchEvent) {\r\n return direction.value === \"horizontal\"\r\n ? e.touches[0].clientX\r\n : e.touches[0].clientY;\r\n }\r\n return direction.value === \"horizontal\" ? e.clientX : e.clientY;\r\n };\r\n\r\n /**\r\n * 更新面板大小\r\n */\r\n const updateSize = (newSize: number) => {\r\n const clamped = clampSize(newSize);\r\n panelSize.value = clamped;\r\n onResize?.(clamped, 100 - clamped);\r\n };\r\n\r\n /* ─── 拖拽逻辑 ──────────────────────────────── */\r\n const handleMouseMove = (e: MouseEvent | TouchEvent) => {\r\n if (!isDragging.value || disabled.value) return;\r\n\r\n e.preventDefault();\r\n const pos = getClientPos(e);\r\n const newSize = calcSizeFromPosition(pos);\r\n\r\n /* 拖拽过程中取消折叠状态 */\r\n if (collapsedTarget.value) {\r\n collapsedTarget.value = null;\r\n }\r\n updateSize(newSize);\r\n };\r\n\r\n const handleMouseUp = () => {\r\n if (!isDragging.value) return;\r\n\r\n isDragging.value = false;\r\n document.body.style.cursor = \"\";\r\n document.body.style.userSelect = \"\";\r\n\r\n onDragEnd?.(panelSize.value);\r\n\r\n document.removeEventListener(\"mousemove\", handleMouseMove);\r\n document.removeEventListener(\"mouseup\", handleMouseUp);\r\n document.removeEventListener(\"touchmove\", handleMouseMove);\r\n document.removeEventListener(\"touchend\", handleMouseUp);\r\n };\r\n\r\n const handleMouseDown = (e: MouseEvent | TouchEvent) => {\r\n if (disabled.value) return;\r\n\r\n e.preventDefault();\r\n /* preventDefault 会阻止默认聚焦行为,需手动 focus 以支持键盘控制 */\r\n (e.currentTarget as HTMLElement)?.focus();\r\n isDragging.value = true;\r\n\r\n document.body.style.cursor =\r\n direction.value === \"horizontal\" ? \"col-resize\" : \"row-resize\";\r\n document.body.style.userSelect = \"none\";\r\n\r\n onDragStart?.(panelSize.value);\r\n\r\n document.addEventListener(\"mousemove\", handleMouseMove);\r\n document.addEventListener(\"mouseup\", handleMouseUp);\r\n document.addEventListener(\"touchmove\", handleMouseMove, { passive: false });\r\n document.addEventListener(\"touchend\", handleMouseUp);\r\n };\r\n\r\n /* ─── 双击折叠 ──────────────────────────────── */\r\n const handleDoubleClick = () => {\r\n if (disabled.value || !collapsible.value) return;\r\n toggle(\"first\");\r\n };\r\n\r\n /* ─── 折叠 / 展开 ───────────────────────────── */\r\n const collapse = (target: CollapseTarget = \"first\") => {\r\n if (!collapsible.value || collapsedTarget.value === target) return;\r\n\r\n /* 记住折叠前的大小 */\r\n if (!collapsedTarget.value) {\r\n sizeBeforeCollapse.value = panelSize.value;\r\n }\r\n\r\n collapsedTarget.value = target;\r\n\r\n if (target === \"first\") {\r\n panelSize.value = 0;\r\n } else {\r\n panelSize.value = 100;\r\n }\r\n\r\n onCollapse?.(target);\r\n onResize?.(panelSize.value, 100 - panelSize.value);\r\n };\r\n\r\n const expand = () => {\r\n if (!collapsedTarget.value) return;\r\n\r\n const target = collapsedTarget.value;\r\n collapsedTarget.value = null;\r\n panelSize.value = sizeBeforeCollapse.value;\r\n\r\n onExpand?.(target);\r\n onResize?.(panelSize.value, 100 - panelSize.value);\r\n };\r\n\r\n const toggle = (target: CollapseTarget = \"first\") => {\r\n if (collapsedTarget.value) {\r\n expand();\r\n } else {\r\n collapse(target);\r\n }\r\n };\r\n\r\n /* ─── 键盘微调 ──────────────────────────────── */\r\n /**\r\n * 根据按键获取增量\r\n */\r\n const getKeyDelta = (key: string, isHorizontal: boolean): number | null => {\r\n const keyMap: Record<string, number | null> = {\r\n ArrowLeft: isHorizontal ? -step : 0,\r\n ArrowRight: isHorizontal ? step : 0,\r\n ArrowUp: !isHorizontal ? -step : 0,\r\n ArrowDown: !isHorizontal ? step : 0,\r\n };\r\n return keyMap[key] ?? null;\r\n };\r\n\r\n const handleKeyDown = (e: KeyboardEvent) => {\r\n if (disabled.value) return;\r\n\r\n /* Home / End 直接跳到极值 */\r\n if (e.key === \"Home\") {\r\n updateSize(minSize);\r\n e.preventDefault();\r\n return;\r\n }\r\n if (e.key === \"End\") {\r\n updateSize(maxSize);\r\n e.preventDefault();\r\n return;\r\n }\r\n\r\n const delta = getKeyDelta(e.key, direction.value === \"horizontal\");\r\n if (delta === null || delta === 0) return;\r\n\r\n e.preventDefault();\r\n if (collapsedTarget.value) collapsedTarget.value = null;\r\n updateSize(panelSize.value + delta);\r\n };\r\n\r\n /* ─── 重置 / 查询 ───────────────────────────── */\r\n const resetSize = () => {\r\n collapsedTarget.value = null;\r\n panelSize.value = defaultSize;\r\n onResize?.(defaultSize, 100 - defaultSize);\r\n };\r\n\r\n const setSize = (size: number) => {\r\n collapsedTarget.value = null;\r\n updateSize(size);\r\n };\r\n\r\n const getPanelInfo = () => ({\r\n first: {\r\n size: panelSize.value,\r\n collapsed: isFirstCollapsed.value,\r\n },\r\n second: {\r\n size: 100 - panelSize.value,\r\n collapsed: isSecondCollapsed.value,\r\n },\r\n });\r\n\r\n /* 清理 */\r\n onUnmounted(() => {\r\n document.removeEventListener(\"mousemove\", handleMouseMove);\r\n document.removeEventListener(\"mouseup\", handleMouseUp);\r\n document.removeEventListener(\"touchmove\", handleMouseMove);\r\n document.removeEventListener(\"touchend\", handleMouseUp);\r\n });\r\n\r\n return {\r\n panelSize,\r\n isDragging,\r\n collapsedTarget,\r\n isFirstCollapsed,\r\n isSecondCollapsed,\r\n handleMouseDown,\r\n handleDoubleClick,\r\n handleKeyDown,\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n setSize,\r\n getPanelInfo,\r\n };\r\n}\r\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-16\n * @Description: 分割面板组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n ref=\"containerRef\"\n class=\"c-split-pane\"\n :class=\"[\n `c-split-pane--${direction}`,\n {\n 'c-split-pane--dragging': isDragging,\n 'c-split-pane--disabled': disabled,\n 'c-split-pane--collapsed-first': isFirstCollapsed,\n 'c-split-pane--collapsed-second': isSecondCollapsed,\n },\n ]\"\n >\n <!-- 首面板 -->\n <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\n <div class=\"split-panel__content\">\n <slot name=\"first\" />\n </div>\n </div>\n\n <!-- 分割线手柄 -->\n <div\n class=\"split-gutter\"\n :style=\"gutterStyle\"\n role=\"separator\"\n :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\n :aria-valuenow=\"Math.round(panelSize)\"\n :aria-valuemin=\"0\"\n :aria-valuemax=\"100\"\n tabindex=\"0\"\n @mousedown=\"handleMouseDown\"\n @touchstart.prevent=\"handleMouseDown\"\n @dblclick=\"handleDoubleClick\"\n @keydown=\"handleKeyDown\"\n >\n <div class=\"split-gutter__visual\">\n <div class=\"split-gutter__dots\">\n <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\n </div>\n </div>\n\n <!-- 折叠按钮 -->\n <template v-if=\"showCollapseButton && collapsible\">\n <button\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\n :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\n @click.stop=\"toggle('first')\"\n @mousedown.stop\n >\n <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\n </button>\n <button\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\n :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\n @click.stop=\"toggle('second')\"\n @mousedown.stop\n >\n <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\n </button>\n </template>\n </div>\n\n <!-- 第二面板 -->\n <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\n <div class=\"split-panel__content\">\n <slot name=\"second\" />\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, toRef } from \"vue\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport { useSplitResize } from \"./composables/useSplitResize\";\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\n\ndefineOptions({ name: \"C_SplitPane\" });\n\ninterface Props {\n /** 分割方向 */\n direction?: SplitDirection;\n /** 首面板默认大小(百分比 0-100) */\n defaultSize?: number;\n /** 首面板最小大小(百分比 0-100) */\n minSize?: number;\n /** 首面板最大大小(百分比 0-100) */\n maxSize?: number;\n /** 是否禁用拖拽调整 */\n disabled?: boolean;\n /** 是否可折叠 */\n collapsible?: boolean;\n /** 是否显示折叠按钮 */\n showCollapseButton?: boolean;\n /** 分割线宽度(px) */\n gutterSize?: number;\n /** 键盘微调步长(百分比) */\n step?: number;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n direction: \"horizontal\",\n defaultSize: 50,\n minSize: 0,\n maxSize: 100,\n disabled: false,\n collapsible: true,\n showCollapseButton: true,\n gutterSize: 6,\n step: 2,\n});\n\nconst emit = defineEmits<{\n resize: [firstSize: number, secondSize: number];\n collapse: [target: CollapseTarget];\n expand: [target: CollapseTarget];\n \"drag-start\": [size: number];\n \"drag-end\": [size: number];\n}>();\n\nconst containerRef = ref<HTMLElement | null>(null);\n\nconst {\n panelSize,\n isDragging,\n isFirstCollapsed,\n isSecondCollapsed,\n handleMouseDown,\n handleDoubleClick,\n handleKeyDown,\n collapse,\n expand,\n toggle,\n resetSize,\n setSize,\n getPanelInfo,\n} = useSplitResize({\n containerRef,\n direction: toRef(props, \"direction\"),\n defaultSize: props.defaultSize,\n minSize: props.minSize,\n maxSize: props.maxSize,\n disabled: toRef(props, \"disabled\"),\n collapsible: toRef(props, \"collapsible\"),\n step: props.step,\n onResize: (first, second) => emit(\"resize\", first, second),\n onCollapse: (target) => emit(\"collapse\", target),\n onExpand: (target) => emit(\"expand\", target),\n onDragStart: (size) => emit(\"drag-start\", size),\n onDragEnd: (size) => emit(\"drag-end\", size),\n});\n\n/* ─── 计算样式 ──────────────────────────────── */\nconst firstPanelStyle = computed(() => {\n const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\n return props.direction === \"horizontal\"\n ? { width: sizeValue }\n : { height: sizeValue };\n});\n\nconst secondPanelStyle = computed(() => {\n const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\n return props.direction === \"horizontal\"\n ? { width: sizeValue }\n : { height: sizeValue };\n});\n\nconst gutterStyle = computed(() => {\n return props.direction === \"horizontal\"\n ? { width: `${props.gutterSize}px` }\n : { height: `${props.gutterSize}px` };\n});\n\n/* ─── 折叠按钮图标 ──────────────────────────── */\nconst collapseFirstIcon = computed(() => {\n if (props.direction === \"horizontal\") {\n return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\n }\n return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\n});\n\nconst collapseSecondIcon = computed(() => {\n if (props.direction === \"horizontal\") {\n return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\n }\n return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\n});\n\n/* ─── 暴露方法 ──────────────────────────────── */\ndefineExpose<SplitPaneExpose>({\n collapse,\n expand,\n toggle,\n resetSize,\n getPanelInfo,\n setSize,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,computed as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createVNode as s,defineComponent as c,normalizeClass as l,normalizeStyle as u,onUnmounted as d,openBlock as f,ref as p,renderList as m,renderSlot as h,toRef as g,unref as _,withModifiers as v}from"vue";function y(e){let{containerRef:t,direction:n,defaultSize:i,minSize:a,maxSize:o,disabled:s,collapsible:c,step:l,onResize:u,onCollapse:f,onExpand:m,onDragStart:h,onDragEnd:g}=e,_=p(i),v=p(!1),y=p(null),b=p(i),x=r(()=>y.value===`first`),S=r(()=>y.value===`second`),C=e=>Math.min(o,Math.max(a,e)),w=()=>{let e=t.value;return e?n.value===`horizontal`?e.offsetWidth:e.offsetHeight:0},T=()=>{let e=t.value;if(!e)return 0;let r=e.getBoundingClientRect();return n.value===`horizontal`?r.left:r.top},E=e=>{let t=w();return t===0?_.value:C((e-T())/t*100)},D=e=>e instanceof TouchEvent?n.value===`horizontal`?e.touches[0].clientX:e.touches[0].clientY:n.value===`horizontal`?e.clientX:e.clientY,O=e=>{let t=C(e);_.value=t,u?.(t,100-t)},k=e=>{if(!v.value||s.value)return;e.preventDefault();let t=E(D(e));y.value&&=null,O(t)},A=()=>{v.value&&(v.value=!1,document.body.style.cursor=``,document.body.style.userSelect=``,g?.(_.value),document.removeEventListener(`mousemove`,k),document.removeEventListener(`mouseup`,A),document.removeEventListener(`touchmove`,k),document.removeEventListener(`touchend`,A))},j=e=>{s.value||(e.preventDefault(),e.currentTarget?.focus(),v.value=!0,document.body.style.cursor=n.value===`horizontal`?`col-resize`:`row-resize`,document.body.style.userSelect=`none`,h?.(_.value),document.addEventListener(`mousemove`,k),document.addEventListener(`mouseup`,A),document.addEventListener(`touchmove`,k,{passive:!1}),document.addEventListener(`touchend`,A))},M=()=>{s.value||!c.value||F(`first`)},N=(e=`first`)=>{!c.value||y.value===e||(y.value||(b.value=_.value),y.value=e,e===`first`?_.value=0:_.value=100,f?.(e),u?.(_.value,100-_.value))},P=()=>{if(!y.value)return;let e=y.value;y.value=null,_.value=b.value,m?.(e),u?.(_.value,100-_.value)},F=(e=`first`)=>{y.value?P():N(e)},I=(e,t)=>({ArrowLeft:t?-l:0,ArrowRight:t?l:0,ArrowUp:t?0:-l,ArrowDown:t?0:l})[e]??null;return d(()=>{document.removeEventListener(`mousemove`,k),document.removeEventListener(`mouseup`,A),document.removeEventListener(`touchmove`,k),document.removeEventListener(`touchend`,A)}),{panelSize:_,isDragging:v,collapsedTarget:y,isFirstCollapsed:x,isSecondCollapsed:S,handleMouseDown:j,handleDoubleClick:M,handleKeyDown:e=>{if(s.value)return;if(e.key===`Home`){O(a),e.preventDefault();return}if(e.key===`End`){O(o),e.preventDefault();return}let t=I(e.key,n.value===`horizontal`);t===null||t===0||(e.preventDefault(),y.value&&=null,O(_.value+t))},collapse:N,expand:P,toggle:F,resetSize:()=>{y.value=null,_.value=i,u?.(i,100-i)},setSize:e=>{y.value=null,O(e)},getPanelInfo:()=>({first:{size:_.value,collapsed:x.value},second:{size:100-_.value,collapsed:S.value}})}}const b={class:`split-panel__content`},x=[`aria-orientation`,`aria-valuenow`],S={class:`split-gutter__visual`},C={class:`split-gutter__dots`},w=[`title`],T=[`title`],E={class:`split-panel__content`};var D=t(c({name:`C_SplitPane`,__name:`index`,props:{direction:{default:`horizontal`},defaultSize:{default:50},minSize:{default:0},maxSize:{default:100},disabled:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!0},showCollapseButton:{type:Boolean,default:!0},gutterSize:{default:6},step:{default:2}},emits:[`resize`,`collapse`,`expand`,`drag-start`,`drag-end`],setup(t,{expose:c,emit:d}){let D=t,O=d,k=p(null),{panelSize:A,isDragging:j,isFirstCollapsed:M,isSecondCollapsed:N,handleMouseDown:P,handleDoubleClick:F,handleKeyDown:I,collapse:L,expand:R,toggle:z,resetSize:B,setSize:V,getPanelInfo:H}=y({containerRef:k,direction:g(D,`direction`),defaultSize:D.defaultSize,minSize:D.minSize,maxSize:D.maxSize,disabled:g(D,`disabled`),collapsible:g(D,`collapsible`),step:D.step,onResize:(e,t)=>O(`resize`,e,t),onCollapse:e=>O(`collapse`,e),onExpand:e=>O(`expand`,e),onDragStart:e=>O(`drag-start`,e),onDragEnd:e=>O(`drag-end`,e)}),U=r(()=>{let e=`calc(${A.value}% - ${D.gutterSize/2}px)`;return D.direction===`horizontal`?{width:e}:{height:e}}),W=r(()=>{let e=`calc(${100-A.value}% - ${D.gutterSize/2}px)`;return D.direction===`horizontal`?{width:e}:{height:e}}),G=r(()=>D.direction===`horizontal`?{width:`${D.gutterSize}px`}:{height:`${D.gutterSize}px`}),K=r(()=>D.direction===`horizontal`?M.value?`mdi:chevron-right`:`mdi:chevron-left`:M.value?`mdi:chevron-down`:`mdi:chevron-up`),q=r(()=>D.direction===`horizontal`?N.value?`mdi:chevron-left`:`mdi:chevron-right`:N.value?`mdi:chevron-up`:`mdi:chevron-down`);return c({collapse:L,expand:R,toggle:z,resetSize:B,getPanelInfo:H,setSize:V}),(t,r)=>(f(),a(`div`,{ref_key:`containerRef`,ref:k,class:l([`c-split-pane`,[`c-split-pane--${t.direction}`,{"c-split-pane--dragging":_(j),"c-split-pane--disabled":t.disabled,"c-split-pane--collapsed-first":_(M),"c-split-pane--collapsed-second":_(N)}]])},[i(` 首面板 `),o(`div`,{class:`split-panel split-panel--first`,style:u(U.value)},[o(`div`,b,[h(t.$slots,`first`,{},void 0,!0)])],4),i(` 分割线手柄 `),o(`div`,{class:`split-gutter`,style:u(G.value),role:`separator`,"aria-orientation":t.direction===`horizontal`?`vertical`:`horizontal`,"aria-valuenow":Math.round(_(A)),"aria-valuemin":0,"aria-valuemax":100,tabindex:`0`,onMousedown:r[4]||=(...e)=>_(P)&&_(P)(...e),onTouchstart:r[5]||=v((...e)=>_(P)&&_(P)(...e),[`prevent`]),onDblclick:r[6]||=(...e)=>_(F)&&_(F)(...e),onKeydown:r[7]||=(...e)=>_(I)&&_(I)(...e)},[o(`div`,S,[o(`div`,C,[(f(),a(n,null,m(3,e=>o(`span`,{key:e,class:`split-gutter__dot`})),64))])]),i(` 折叠按钮 `),t.showCollapseButton&&t.collapsible?(f(),a(n,{key:0},[o(`button`,{class:`split-gutter__collapse-btn split-gutter__collapse-btn--first`,title:_(M)?`展开首面板`:`折叠首面板`,onClick:r[0]||=v(e=>_(z)(`first`),[`stop`]),onMousedown:r[1]||=v(()=>{},[`stop`])},[s(e,{name:K.value,size:16,color:`currentColor`},null,8,[`name`])],40,w),o(`button`,{class:`split-gutter__collapse-btn split-gutter__collapse-btn--second`,title:_(N)?`展开第二面板`:`折叠第二面板`,onClick:r[2]||=v(e=>_(z)(`second`),[`stop`]),onMousedown:r[3]||=v(()=>{},[`stop`])},[s(e,{name:q.value,size:16,color:`currentColor`},null,8,[`name`])],40,T)],64)):i(`v-if`,!0)],44,x),i(` 第二面板 `),o(`div`,{class:`split-panel split-panel--second`,style:u(W.value)},[o(`div`,E,[h(t.$slots,`second`,{},void 0,!0)])],4)],2))}}),[[`__scopeId`,`data-v-396d0f5b`]]);export{y as n,D as t};
1
+ import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,computed as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createVNode as s,defineComponent as c,normalizeClass as l,normalizeStyle as u,onUnmounted as d,openBlock as f,ref as p,renderList as m,renderSlot as h,toRef as g,unref as _,withModifiers as v}from"vue";function y(e){let{containerRef:t,direction:n,defaultSize:i,minSize:a,maxSize:o,disabled:s,collapsible:c,step:l,onResize:u,onCollapse:f,onExpand:m,onDragStart:h,onDragEnd:g}=e,_=p(i),v=p(!1),y=p(null),b=p(i),x=r(()=>y.value===`first`),S=r(()=>y.value===`second`),C=e=>Math.min(o,Math.max(a,e)),w=()=>{let e=t.value;return e?n.value===`horizontal`?e.offsetWidth:e.offsetHeight:0},T=()=>{let e=t.value;if(!e)return 0;let r=e.getBoundingClientRect();return n.value===`horizontal`?r.left:r.top},E=e=>{let t=w();return t===0?_.value:C((e-T())/t*100)},D=e=>e instanceof TouchEvent?n.value===`horizontal`?e.touches[0].clientX:e.touches[0].clientY:n.value===`horizontal`?e.clientX:e.clientY,O=e=>{let t=C(e);_.value=t,u?.(t,100-t)},k=e=>{if(!v.value||s.value)return;e.preventDefault();let t=E(D(e));y.value&&=null,O(t)},A=()=>{v.value&&(v.value=!1,document.body.style.cursor=``,document.body.style.userSelect=``,g?.(_.value),document.removeEventListener(`mousemove`,k),document.removeEventListener(`mouseup`,A),document.removeEventListener(`touchmove`,k),document.removeEventListener(`touchend`,A))},j=e=>{s.value||(e.preventDefault(),e.currentTarget?.focus(),v.value=!0,document.body.style.cursor=n.value===`horizontal`?`col-resize`:`row-resize`,document.body.style.userSelect=`none`,h?.(_.value),document.addEventListener(`mousemove`,k),document.addEventListener(`mouseup`,A),document.addEventListener(`touchmove`,k,{passive:!1}),document.addEventListener(`touchend`,A))},M=()=>{s.value||!c.value||F(`first`)},N=(e=`first`)=>{!c.value||y.value===e||(y.value||(b.value=_.value),y.value=e,e===`first`?_.value=0:_.value=100,f?.(e),u?.(_.value,100-_.value))},P=()=>{if(!y.value)return;let e=y.value;y.value=null,_.value=b.value,m?.(e),u?.(_.value,100-_.value)},F=(e=`first`)=>{y.value?P():N(e)},I=(e,t)=>({ArrowLeft:t?-l:0,ArrowRight:t?l:0,ArrowUp:t?0:-l,ArrowDown:t?0:l})[e]??null;return d(()=>{document.removeEventListener(`mousemove`,k),document.removeEventListener(`mouseup`,A),document.removeEventListener(`touchmove`,k),document.removeEventListener(`touchend`,A)}),{panelSize:_,isDragging:v,collapsedTarget:y,isFirstCollapsed:x,isSecondCollapsed:S,handleMouseDown:j,handleDoubleClick:M,handleKeyDown:e=>{if(s.value)return;if(e.key===`Home`){O(a),e.preventDefault();return}if(e.key===`End`){O(o),e.preventDefault();return}let t=I(e.key,n.value===`horizontal`);t===null||t===0||(e.preventDefault(),y.value&&=null,O(_.value+t))},collapse:N,expand:P,toggle:F,resetSize:()=>{y.value=null,_.value=i,u?.(i,100-i)},setSize:e=>{y.value=null,O(e)},getPanelInfo:()=>({first:{size:_.value,collapsed:x.value},second:{size:100-_.value,collapsed:S.value}})}}const b={class:`split-panel__content`},x=[`aria-orientation`,`aria-valuenow`],S={class:`split-gutter__visual`},C={class:`split-gutter__dots`},w=[`title`],T=[`title`],E={class:`split-panel__content`};var D=t(c({name:`C_SplitPane`,__name:`index`,props:{direction:{default:`horizontal`},defaultSize:{default:50},minSize:{default:0},maxSize:{default:100},disabled:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!0},showCollapseButton:{type:Boolean,default:!0},gutterSize:{default:6},step:{default:2}},emits:[`resize`,`collapse`,`expand`,`drag-start`,`drag-end`],setup(t,{expose:c,emit:d}){let D=t,O=d,k=p(null),{panelSize:A,isDragging:j,isFirstCollapsed:M,isSecondCollapsed:N,handleMouseDown:P,handleDoubleClick:F,handleKeyDown:I,collapse:L,expand:R,toggle:z,resetSize:B,setSize:V,getPanelInfo:H}=y({containerRef:k,direction:g(D,`direction`),defaultSize:D.defaultSize,minSize:D.minSize,maxSize:D.maxSize,disabled:g(D,`disabled`),collapsible:g(D,`collapsible`),step:D.step,onResize:(e,t)=>O(`resize`,e,t),onCollapse:e=>O(`collapse`,e),onExpand:e=>O(`expand`,e),onDragStart:e=>O(`drag-start`,e),onDragEnd:e=>O(`drag-end`,e)}),U=r(()=>{let e=`calc(${A.value}% - ${D.gutterSize/2}px)`;return D.direction===`horizontal`?{width:e}:{height:e}}),W=r(()=>{let e=`calc(${100-A.value}% - ${D.gutterSize/2}px)`;return D.direction===`horizontal`?{width:e}:{height:e}}),G=r(()=>D.direction===`horizontal`?{width:`${D.gutterSize}px`}:{height:`${D.gutterSize}px`}),K=r(()=>D.direction===`horizontal`?M.value?`mdi:chevron-right`:`mdi:chevron-left`:M.value?`mdi:chevron-down`:`mdi:chevron-up`),q=r(()=>D.direction===`horizontal`?N.value?`mdi:chevron-left`:`mdi:chevron-right`:N.value?`mdi:chevron-up`:`mdi:chevron-down`);return c({collapse:L,expand:R,toggle:z,resetSize:B,getPanelInfo:H,setSize:V}),(t,r)=>(f(),a(`div`,{ref_key:`containerRef`,ref:k,class:l([`c-split-pane`,[`c-split-pane--${t.direction}`,{"c-split-pane--dragging":_(j),"c-split-pane--disabled":t.disabled,"c-split-pane--collapsed-first":_(M),"c-split-pane--collapsed-second":_(N)}]])},[i(` 首面板 `),o(`div`,{class:`split-panel split-panel--first`,style:u(U.value)},[o(`div`,b,[h(t.$slots,`first`,{},void 0,!0)])],4),i(` 分割线手柄 `),o(`div`,{class:`split-gutter`,style:u(G.value),role:`separator`,"aria-orientation":t.direction===`horizontal`?`vertical`:`horizontal`,"aria-valuenow":Math.round(_(A)),"aria-valuemin":0,"aria-valuemax":100,tabindex:`0`,onMousedown:r[4]||=(...e)=>_(P)&&_(P)(...e),onTouchstart:r[5]||=v((...e)=>_(P)&&_(P)(...e),[`prevent`]),onDblclick:r[6]||=(...e)=>_(F)&&_(F)(...e),onKeydown:r[7]||=(...e)=>_(I)&&_(I)(...e)},[o(`div`,S,[o(`div`,C,[(f(),a(n,null,m(3,e=>o(`span`,{key:e,class:`split-gutter__dot`})),64))])]),i(` 折叠按钮 `),t.showCollapseButton&&t.collapsible?(f(),a(n,{key:0},[o(`button`,{class:`split-gutter__collapse-btn split-gutter__collapse-btn--first`,title:_(M)?`展开首面板`:`折叠首面板`,onClick:r[0]||=v(e=>_(z)(`first`),[`stop`]),onMousedown:r[1]||=v(()=>{},[`stop`])},[s(e,{name:K.value,size:16,color:`currentColor`},null,8,[`name`])],40,w),o(`button`,{class:`split-gutter__collapse-btn split-gutter__collapse-btn--second`,title:_(N)?`展开第二面板`:`折叠第二面板`,onClick:r[2]||=v(e=>_(z)(`second`),[`stop`]),onMousedown:r[3]||=v(()=>{},[`stop`])},[s(e,{name:q.value,size:16,color:`currentColor`},null,8,[`name`])],40,T)],64)):i(`v-if`,!0)],44,x),i(` 第二面板 `),o(`div`,{class:`split-panel split-panel--second`,style:u(W.value)},[o(`div`,E,[h(t.$slots,`second`,{},void 0,!0)])],4)],2))}}),[[`__scopeId`,`data-v-83a6f647`]]);export{y as n,D as t};
2
2
  //# sourceMappingURL=C_SplitPane2.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"C_SplitPane2.js","names":["direction","disabled","showCollapseButton","collapsible"],"sources":["../src/components/C_SplitPane/composables/useSplitResize.ts","../src/components/C_SplitPane/index.vue","../src/components/C_SplitPane/index.vue","../src/components/C_SplitPane/index.vue"],"sourcesContent":["import { ref, computed, onUnmounted } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { CollapseTarget, SplitDirection } from \"../types\";\r\n\r\ninterface UseSplitResizeOptions {\r\n /** 容器引用 */\r\n containerRef: Ref<HTMLElement | null>;\r\n /** 分割方向 */\r\n direction: Ref<SplitDirection>;\r\n /** 首面板默认大小(百分比) */\r\n defaultSize: number;\r\n /** 首面板最小大小(百分比) */\r\n minSize: number;\r\n /** 首面板最大大小(百分比) */\r\n maxSize: number;\r\n /** 是否禁用 */\r\n disabled: Ref<boolean>;\r\n /** 是否可折叠 */\r\n collapsible: Ref<boolean>;\r\n /** 键盘微调步长(百分比) */\r\n step: number;\r\n /** resize 回调 */\r\n onResize?: (firstSize: number, secondSize: number) => void;\r\n /** 折叠回调 */\r\n onCollapse?: (target: CollapseTarget) => void;\r\n /** 展开回调 */\r\n onExpand?: (target: CollapseTarget) => void;\r\n /** 拖拽开始回调 */\r\n onDragStart?: (size: number) => void;\r\n /** 拖拽结束回调 */\r\n onDragEnd?: (size: number) => void;\r\n}\r\n\r\n/**\r\n * 分割面板拖拽调整逻辑\r\n */\r\nexport function useSplitResize(options: UseSplitResizeOptions) {\r\n const {\r\n containerRef,\r\n direction,\r\n defaultSize,\r\n minSize,\r\n maxSize,\r\n disabled,\r\n collapsible,\r\n step,\r\n onResize,\r\n onCollapse,\r\n onExpand,\r\n onDragStart,\r\n onDragEnd,\r\n } = options;\r\n\r\n /** 首面板当前大小(百分比) */\r\n const panelSize = ref(defaultSize);\r\n /** 是否正在拖拽 */\r\n const isDragging = ref(false);\r\n /** 折叠状态 */\r\n const collapsedTarget = ref<CollapseTarget | null>(null);\r\n /** 折叠前记住的面板大小 */\r\n const sizeBeforeCollapse = ref(defaultSize);\r\n\r\n /** 首面板是否折叠 */\r\n const isFirstCollapsed = computed(() => collapsedTarget.value === \"first\");\r\n /** 第二面板是否折叠 */\r\n const isSecondCollapsed = computed(() => collapsedTarget.value === \"second\");\r\n\r\n /**\r\n * 将大小限制在 min/max 范围内\r\n */\r\n const clampSize = (size: number): number => {\r\n return Math.min(maxSize, Math.max(minSize, size));\r\n };\r\n\r\n /**\r\n * 获取容器在分割方向上的总长度(px)\r\n */\r\n const getContainerLength = (): number => {\r\n const container = containerRef.value;\r\n if (!container) return 0;\r\n return direction.value === \"horizontal\"\r\n ? container.offsetWidth\r\n : container.offsetHeight;\r\n };\r\n\r\n /**\r\n * 获取容器在分割方向上的起始坐标\r\n */\r\n const getContainerStart = (): number => {\r\n const container = containerRef.value;\r\n if (!container) return 0;\r\n const rect = container.getBoundingClientRect();\r\n return direction.value === \"horizontal\" ? rect.left : rect.top;\r\n };\r\n\r\n /**\r\n * 根据鼠标/触摸位置计算面板大小(百分比)\r\n */\r\n const calcSizeFromPosition = (clientPos: number): number => {\r\n const containerLength = getContainerLength();\r\n if (containerLength === 0) return panelSize.value;\r\n\r\n const containerStart = getContainerStart();\r\n const offset = clientPos - containerStart;\r\n const percentage = (offset / containerLength) * 100;\r\n\r\n return clampSize(percentage);\r\n };\r\n\r\n /**\r\n * 获取事件的位置坐标\r\n */\r\n const getClientPos = (e: MouseEvent | TouchEvent): number => {\r\n if (e instanceof TouchEvent) {\r\n return direction.value === \"horizontal\"\r\n ? e.touches[0].clientX\r\n : e.touches[0].clientY;\r\n }\r\n return direction.value === \"horizontal\" ? e.clientX : e.clientY;\r\n };\r\n\r\n /**\r\n * 更新面板大小\r\n */\r\n const updateSize = (newSize: number) => {\r\n const clamped = clampSize(newSize);\r\n panelSize.value = clamped;\r\n onResize?.(clamped, 100 - clamped);\r\n };\r\n\r\n /* ─── 拖拽逻辑 ──────────────────────────────── */\r\n const handleMouseMove = (e: MouseEvent | TouchEvent) => {\r\n if (!isDragging.value || disabled.value) return;\r\n\r\n e.preventDefault();\r\n const pos = getClientPos(e);\r\n const newSize = calcSizeFromPosition(pos);\r\n\r\n /* 拖拽过程中取消折叠状态 */\r\n if (collapsedTarget.value) {\r\n collapsedTarget.value = null;\r\n }\r\n updateSize(newSize);\r\n };\r\n\r\n const handleMouseUp = () => {\r\n if (!isDragging.value) return;\r\n\r\n isDragging.value = false;\r\n document.body.style.cursor = \"\";\r\n document.body.style.userSelect = \"\";\r\n\r\n onDragEnd?.(panelSize.value);\r\n\r\n document.removeEventListener(\"mousemove\", handleMouseMove);\r\n document.removeEventListener(\"mouseup\", handleMouseUp);\r\n document.removeEventListener(\"touchmove\", handleMouseMove);\r\n document.removeEventListener(\"touchend\", handleMouseUp);\r\n };\r\n\r\n const handleMouseDown = (e: MouseEvent | TouchEvent) => {\r\n if (disabled.value) return;\r\n\r\n e.preventDefault();\r\n /* preventDefault 会阻止默认聚焦行为,需手动 focus 以支持键盘控制 */\r\n (e.currentTarget as HTMLElement)?.focus();\r\n isDragging.value = true;\r\n\r\n document.body.style.cursor =\r\n direction.value === \"horizontal\" ? \"col-resize\" : \"row-resize\";\r\n document.body.style.userSelect = \"none\";\r\n\r\n onDragStart?.(panelSize.value);\r\n\r\n document.addEventListener(\"mousemove\", handleMouseMove);\r\n document.addEventListener(\"mouseup\", handleMouseUp);\r\n document.addEventListener(\"touchmove\", handleMouseMove, { passive: false });\r\n document.addEventListener(\"touchend\", handleMouseUp);\r\n };\r\n\r\n /* ─── 双击折叠 ──────────────────────────────── */\r\n const handleDoubleClick = () => {\r\n if (disabled.value || !collapsible.value) return;\r\n toggle(\"first\");\r\n };\r\n\r\n /* ─── 折叠 / 展开 ───────────────────────────── */\r\n const collapse = (target: CollapseTarget = \"first\") => {\r\n if (!collapsible.value || collapsedTarget.value === target) return;\r\n\r\n /* 记住折叠前的大小 */\r\n if (!collapsedTarget.value) {\r\n sizeBeforeCollapse.value = panelSize.value;\r\n }\r\n\r\n collapsedTarget.value = target;\r\n\r\n if (target === \"first\") {\r\n panelSize.value = 0;\r\n } else {\r\n panelSize.value = 100;\r\n }\r\n\r\n onCollapse?.(target);\r\n onResize?.(panelSize.value, 100 - panelSize.value);\r\n };\r\n\r\n const expand = () => {\r\n if (!collapsedTarget.value) return;\r\n\r\n const target = collapsedTarget.value;\r\n collapsedTarget.value = null;\r\n panelSize.value = sizeBeforeCollapse.value;\r\n\r\n onExpand?.(target);\r\n onResize?.(panelSize.value, 100 - panelSize.value);\r\n };\r\n\r\n const toggle = (target: CollapseTarget = \"first\") => {\r\n if (collapsedTarget.value) {\r\n expand();\r\n } else {\r\n collapse(target);\r\n }\r\n };\r\n\r\n /* ─── 键盘微调 ──────────────────────────────── */\r\n /**\r\n * 根据按键获取增量\r\n */\r\n const getKeyDelta = (key: string, isHorizontal: boolean): number | null => {\r\n const keyMap: Record<string, number | null> = {\r\n ArrowLeft: isHorizontal ? -step : 0,\r\n ArrowRight: isHorizontal ? step : 0,\r\n ArrowUp: !isHorizontal ? -step : 0,\r\n ArrowDown: !isHorizontal ? step : 0,\r\n };\r\n return keyMap[key] ?? null;\r\n };\r\n\r\n const handleKeyDown = (e: KeyboardEvent) => {\r\n if (disabled.value) return;\r\n\r\n /* Home / End 直接跳到极值 */\r\n if (e.key === \"Home\") {\r\n updateSize(minSize);\r\n e.preventDefault();\r\n return;\r\n }\r\n if (e.key === \"End\") {\r\n updateSize(maxSize);\r\n e.preventDefault();\r\n return;\r\n }\r\n\r\n const delta = getKeyDelta(e.key, direction.value === \"horizontal\");\r\n if (delta === null || delta === 0) return;\r\n\r\n e.preventDefault();\r\n if (collapsedTarget.value) collapsedTarget.value = null;\r\n updateSize(panelSize.value + delta);\r\n };\r\n\r\n /* ─── 重置 / 查询 ───────────────────────────── */\r\n const resetSize = () => {\r\n collapsedTarget.value = null;\r\n panelSize.value = defaultSize;\r\n onResize?.(defaultSize, 100 - defaultSize);\r\n };\r\n\r\n const setSize = (size: number) => {\r\n collapsedTarget.value = null;\r\n updateSize(size);\r\n };\r\n\r\n const getPanelInfo = () => ({\r\n first: {\r\n size: panelSize.value,\r\n collapsed: isFirstCollapsed.value,\r\n },\r\n second: {\r\n size: 100 - panelSize.value,\r\n collapsed: isSecondCollapsed.value,\r\n },\r\n });\r\n\r\n /* 清理 */\r\n onUnmounted(() => {\r\n document.removeEventListener(\"mousemove\", handleMouseMove);\r\n document.removeEventListener(\"mouseup\", handleMouseUp);\r\n document.removeEventListener(\"touchmove\", handleMouseMove);\r\n document.removeEventListener(\"touchend\", handleMouseUp);\r\n });\r\n\r\n return {\r\n panelSize,\r\n isDragging,\r\n collapsedTarget,\r\n isFirstCollapsed,\r\n isSecondCollapsed,\r\n handleMouseDown,\r\n handleDoubleClick,\r\n handleKeyDown,\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n setSize,\r\n getPanelInfo,\r\n };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"containerRef\"\r\n class=\"c-split-pane\"\r\n :class=\"[\r\n `c-split-pane--${direction}`,\r\n {\r\n 'c-split-pane--dragging': isDragging,\r\n 'c-split-pane--disabled': disabled,\r\n 'c-split-pane--collapsed-first': isFirstCollapsed,\r\n 'c-split-pane--collapsed-second': isSecondCollapsed,\r\n },\r\n ]\"\r\n >\r\n <!-- 首面板 -->\r\n <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n <div class=\"split-panel__content\">\r\n <slot name=\"first\" />\r\n </div>\r\n </div>\r\n\r\n <!-- 分割线手柄 -->\r\n <div\r\n class=\"split-gutter\"\r\n :style=\"gutterStyle\"\r\n role=\"separator\"\r\n :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n :aria-valuenow=\"Math.round(panelSize)\"\r\n :aria-valuemin=\"0\"\r\n :aria-valuemax=\"100\"\r\n tabindex=\"0\"\r\n @mousedown=\"handleMouseDown\"\r\n @touchstart.prevent=\"handleMouseDown\"\r\n @dblclick=\"handleDoubleClick\"\r\n @keydown=\"handleKeyDown\"\r\n >\r\n <div class=\"split-gutter__visual\">\r\n <div class=\"split-gutter__dots\">\r\n <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n </div>\r\n </div>\r\n\r\n <!-- 折叠按钮 -->\r\n <template v-if=\"showCollapseButton && collapsible\">\r\n <button\r\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n @click.stop=\"toggle('first')\"\r\n @mousedown.stop\r\n >\r\n <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n </button>\r\n <button\r\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n @click.stop=\"toggle('second')\"\r\n @mousedown.stop\r\n >\r\n <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n </button>\r\n </template>\r\n </div>\r\n\r\n <!-- 第二面板 -->\r\n <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n <div class=\"split-panel__content\">\r\n <slot name=\"second\" />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n /** 分割方向 */\r\n direction?: SplitDirection;\r\n /** 首面板默认大小(百分比 0-100) */\r\n defaultSize?: number;\r\n /** 首面板最小大小(百分比 0-100) */\r\n minSize?: number;\r\n /** 首面板最大大小(百分比 0-100) */\r\n maxSize?: number;\r\n /** 是否禁用拖拽调整 */\r\n disabled?: boolean;\r\n /** 是否可折叠 */\r\n collapsible?: boolean;\r\n /** 是否显示折叠按钮 */\r\n showCollapseButton?: boolean;\r\n /** 分割线宽度(px) */\r\n gutterSize?: number;\r\n /** 键盘微调步长(百分比) */\r\n step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n direction: \"horizontal\",\r\n defaultSize: 50,\r\n minSize: 0,\r\n maxSize: 100,\r\n disabled: false,\r\n collapsible: true,\r\n showCollapseButton: true,\r\n gutterSize: 6,\r\n step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n resize: [firstSize: number, secondSize: number];\r\n collapse: [target: CollapseTarget];\r\n expand: [target: CollapseTarget];\r\n \"drag-start\": [size: number];\r\n \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n panelSize,\r\n isDragging,\r\n isFirstCollapsed,\r\n isSecondCollapsed,\r\n handleMouseDown,\r\n handleDoubleClick,\r\n handleKeyDown,\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n setSize,\r\n getPanelInfo,\r\n} = useSplitResize({\r\n containerRef,\r\n direction: toRef(props, \"direction\"),\r\n defaultSize: props.defaultSize,\r\n minSize: props.minSize,\r\n maxSize: props.maxSize,\r\n disabled: toRef(props, \"disabled\"),\r\n collapsible: toRef(props, \"collapsible\"),\r\n step: props.step,\r\n onResize: (first, second) => emit(\"resize\", first, second),\r\n onCollapse: (target) => emit(\"collapse\", target),\r\n onExpand: (target) => emit(\"expand\", target),\r\n onDragStart: (size) => emit(\"drag-start\", size),\r\n onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n return props.direction === \"horizontal\"\r\n ? { width: sizeValue }\r\n : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n return props.direction === \"horizontal\"\r\n ? { width: sizeValue }\r\n : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n return props.direction === \"horizontal\"\r\n ? { width: `${props.gutterSize}px` }\r\n : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n if (props.direction === \"horizontal\") {\r\n return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n }\r\n return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n if (props.direction === \"horizontal\") {\r\n return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n }\r\n return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n getPanelInfo,\r\n setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"containerRef\"\r\n class=\"c-split-pane\"\r\n :class=\"[\r\n `c-split-pane--${direction}`,\r\n {\r\n 'c-split-pane--dragging': isDragging,\r\n 'c-split-pane--disabled': disabled,\r\n 'c-split-pane--collapsed-first': isFirstCollapsed,\r\n 'c-split-pane--collapsed-second': isSecondCollapsed,\r\n },\r\n ]\"\r\n >\r\n <!-- 首面板 -->\r\n <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n <div class=\"split-panel__content\">\r\n <slot name=\"first\" />\r\n </div>\r\n </div>\r\n\r\n <!-- 分割线手柄 -->\r\n <div\r\n class=\"split-gutter\"\r\n :style=\"gutterStyle\"\r\n role=\"separator\"\r\n :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n :aria-valuenow=\"Math.round(panelSize)\"\r\n :aria-valuemin=\"0\"\r\n :aria-valuemax=\"100\"\r\n tabindex=\"0\"\r\n @mousedown=\"handleMouseDown\"\r\n @touchstart.prevent=\"handleMouseDown\"\r\n @dblclick=\"handleDoubleClick\"\r\n @keydown=\"handleKeyDown\"\r\n >\r\n <div class=\"split-gutter__visual\">\r\n <div class=\"split-gutter__dots\">\r\n <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n </div>\r\n </div>\r\n\r\n <!-- 折叠按钮 -->\r\n <template v-if=\"showCollapseButton && collapsible\">\r\n <button\r\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n @click.stop=\"toggle('first')\"\r\n @mousedown.stop\r\n >\r\n <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n </button>\r\n <button\r\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n @click.stop=\"toggle('second')\"\r\n @mousedown.stop\r\n >\r\n <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n </button>\r\n </template>\r\n </div>\r\n\r\n <!-- 第二面板 -->\r\n <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n <div class=\"split-panel__content\">\r\n <slot name=\"second\" />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n /** 分割方向 */\r\n direction?: SplitDirection;\r\n /** 首面板默认大小(百分比 0-100) */\r\n defaultSize?: number;\r\n /** 首面板最小大小(百分比 0-100) */\r\n minSize?: number;\r\n /** 首面板最大大小(百分比 0-100) */\r\n maxSize?: number;\r\n /** 是否禁用拖拽调整 */\r\n disabled?: boolean;\r\n /** 是否可折叠 */\r\n collapsible?: boolean;\r\n /** 是否显示折叠按钮 */\r\n showCollapseButton?: boolean;\r\n /** 分割线宽度(px) */\r\n gutterSize?: number;\r\n /** 键盘微调步长(百分比) */\r\n step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n direction: \"horizontal\",\r\n defaultSize: 50,\r\n minSize: 0,\r\n maxSize: 100,\r\n disabled: false,\r\n collapsible: true,\r\n showCollapseButton: true,\r\n gutterSize: 6,\r\n step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n resize: [firstSize: number, secondSize: number];\r\n collapse: [target: CollapseTarget];\r\n expand: [target: CollapseTarget];\r\n \"drag-start\": [size: number];\r\n \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n panelSize,\r\n isDragging,\r\n isFirstCollapsed,\r\n isSecondCollapsed,\r\n handleMouseDown,\r\n handleDoubleClick,\r\n handleKeyDown,\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n setSize,\r\n getPanelInfo,\r\n} = useSplitResize({\r\n containerRef,\r\n direction: toRef(props, \"direction\"),\r\n defaultSize: props.defaultSize,\r\n minSize: props.minSize,\r\n maxSize: props.maxSize,\r\n disabled: toRef(props, \"disabled\"),\r\n collapsible: toRef(props, \"collapsible\"),\r\n step: props.step,\r\n onResize: (first, second) => emit(\"resize\", first, second),\r\n onCollapse: (target) => emit(\"collapse\", target),\r\n onExpand: (target) => emit(\"expand\", target),\r\n onDragStart: (size) => emit(\"drag-start\", size),\r\n onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n return props.direction === \"horizontal\"\r\n ? { width: sizeValue }\r\n : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n return props.direction === \"horizontal\"\r\n ? { width: sizeValue }\r\n : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n return props.direction === \"horizontal\"\r\n ? { width: `${props.gutterSize}px` }\r\n : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n if (props.direction === \"horizontal\") {\r\n return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n }\r\n return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n if (props.direction === \"horizontal\") {\r\n return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n }\r\n return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n getPanelInfo,\r\n setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"containerRef\"\r\n class=\"c-split-pane\"\r\n :class=\"[\r\n `c-split-pane--${direction}`,\r\n {\r\n 'c-split-pane--dragging': isDragging,\r\n 'c-split-pane--disabled': disabled,\r\n 'c-split-pane--collapsed-first': isFirstCollapsed,\r\n 'c-split-pane--collapsed-second': isSecondCollapsed,\r\n },\r\n ]\"\r\n >\r\n <!-- 首面板 -->\r\n <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n <div class=\"split-panel__content\">\r\n <slot name=\"first\" />\r\n </div>\r\n </div>\r\n\r\n <!-- 分割线手柄 -->\r\n <div\r\n class=\"split-gutter\"\r\n :style=\"gutterStyle\"\r\n role=\"separator\"\r\n :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n :aria-valuenow=\"Math.round(panelSize)\"\r\n :aria-valuemin=\"0\"\r\n :aria-valuemax=\"100\"\r\n tabindex=\"0\"\r\n @mousedown=\"handleMouseDown\"\r\n @touchstart.prevent=\"handleMouseDown\"\r\n @dblclick=\"handleDoubleClick\"\r\n @keydown=\"handleKeyDown\"\r\n >\r\n <div class=\"split-gutter__visual\">\r\n <div class=\"split-gutter__dots\">\r\n <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n </div>\r\n </div>\r\n\r\n <!-- 折叠按钮 -->\r\n <template v-if=\"showCollapseButton && collapsible\">\r\n <button\r\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n @click.stop=\"toggle('first')\"\r\n @mousedown.stop\r\n >\r\n <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n </button>\r\n <button\r\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n @click.stop=\"toggle('second')\"\r\n @mousedown.stop\r\n >\r\n <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n </button>\r\n </template>\r\n </div>\r\n\r\n <!-- 第二面板 -->\r\n <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n <div class=\"split-panel__content\">\r\n <slot name=\"second\" />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n /** 分割方向 */\r\n direction?: SplitDirection;\r\n /** 首面板默认大小(百分比 0-100) */\r\n defaultSize?: number;\r\n /** 首面板最小大小(百分比 0-100) */\r\n minSize?: number;\r\n /** 首面板最大大小(百分比 0-100) */\r\n maxSize?: number;\r\n /** 是否禁用拖拽调整 */\r\n disabled?: boolean;\r\n /** 是否可折叠 */\r\n collapsible?: boolean;\r\n /** 是否显示折叠按钮 */\r\n showCollapseButton?: boolean;\r\n /** 分割线宽度(px) */\r\n gutterSize?: number;\r\n /** 键盘微调步长(百分比) */\r\n step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n direction: \"horizontal\",\r\n defaultSize: 50,\r\n minSize: 0,\r\n maxSize: 100,\r\n disabled: false,\r\n collapsible: true,\r\n showCollapseButton: true,\r\n gutterSize: 6,\r\n step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n resize: [firstSize: number, secondSize: number];\r\n collapse: [target: CollapseTarget];\r\n expand: [target: CollapseTarget];\r\n \"drag-start\": [size: number];\r\n \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n panelSize,\r\n isDragging,\r\n isFirstCollapsed,\r\n isSecondCollapsed,\r\n handleMouseDown,\r\n handleDoubleClick,\r\n handleKeyDown,\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n setSize,\r\n getPanelInfo,\r\n} = useSplitResize({\r\n containerRef,\r\n direction: toRef(props, \"direction\"),\r\n defaultSize: props.defaultSize,\r\n minSize: props.minSize,\r\n maxSize: props.maxSize,\r\n disabled: toRef(props, \"disabled\"),\r\n collapsible: toRef(props, \"collapsible\"),\r\n step: props.step,\r\n onResize: (first, second) => emit(\"resize\", first, second),\r\n onCollapse: (target) => emit(\"collapse\", target),\r\n onExpand: (target) => emit(\"expand\", target),\r\n onDragStart: (size) => emit(\"drag-start\", size),\r\n onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n return props.direction === \"horizontal\"\r\n ? { width: sizeValue }\r\n : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n return props.direction === \"horizontal\"\r\n ? { width: sizeValue }\r\n : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n return props.direction === \"horizontal\"\r\n ? { width: `${props.gutterSize}px` }\r\n : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n if (props.direction === \"horizontal\") {\r\n return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n }\r\n return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n if (props.direction === \"horizontal\") {\r\n return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n }\r\n return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n getPanelInfo,\r\n setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
1
+ {"version":3,"file":"C_SplitPane2.js","names":[],"sources":["../src/components/C_SplitPane/composables/useSplitResize.ts","../src/components/C_SplitPane/index.vue"],"sourcesContent":["import { ref, computed, onUnmounted } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { CollapseTarget, SplitDirection } from \"../types\";\r\n\r\ninterface UseSplitResizeOptions {\r\n /** 容器引用 */\r\n containerRef: Ref<HTMLElement | null>;\r\n /** 分割方向 */\r\n direction: Ref<SplitDirection>;\r\n /** 首面板默认大小(百分比) */\r\n defaultSize: number;\r\n /** 首面板最小大小(百分比) */\r\n minSize: number;\r\n /** 首面板最大大小(百分比) */\r\n maxSize: number;\r\n /** 是否禁用 */\r\n disabled: Ref<boolean>;\r\n /** 是否可折叠 */\r\n collapsible: Ref<boolean>;\r\n /** 键盘微调步长(百分比) */\r\n step: number;\r\n /** resize 回调 */\r\n onResize?: (firstSize: number, secondSize: number) => void;\r\n /** 折叠回调 */\r\n onCollapse?: (target: CollapseTarget) => void;\r\n /** 展开回调 */\r\n onExpand?: (target: CollapseTarget) => void;\r\n /** 拖拽开始回调 */\r\n onDragStart?: (size: number) => void;\r\n /** 拖拽结束回调 */\r\n onDragEnd?: (size: number) => void;\r\n}\r\n\r\n/**\r\n * 分割面板拖拽调整逻辑\r\n */\r\nexport function useSplitResize(options: UseSplitResizeOptions) {\r\n const {\r\n containerRef,\r\n direction,\r\n defaultSize,\r\n minSize,\r\n maxSize,\r\n disabled,\r\n collapsible,\r\n step,\r\n onResize,\r\n onCollapse,\r\n onExpand,\r\n onDragStart,\r\n onDragEnd,\r\n } = options;\r\n\r\n /** 首面板当前大小(百分比) */\r\n const panelSize = ref(defaultSize);\r\n /** 是否正在拖拽 */\r\n const isDragging = ref(false);\r\n /** 折叠状态 */\r\n const collapsedTarget = ref<CollapseTarget | null>(null);\r\n /** 折叠前记住的面板大小 */\r\n const sizeBeforeCollapse = ref(defaultSize);\r\n\r\n /** 首面板是否折叠 */\r\n const isFirstCollapsed = computed(() => collapsedTarget.value === \"first\");\r\n /** 第二面板是否折叠 */\r\n const isSecondCollapsed = computed(() => collapsedTarget.value === \"second\");\r\n\r\n /**\r\n * 将大小限制在 min/max 范围内\r\n */\r\n const clampSize = (size: number): number => {\r\n return Math.min(maxSize, Math.max(minSize, size));\r\n };\r\n\r\n /**\r\n * 获取容器在分割方向上的总长度(px)\r\n */\r\n const getContainerLength = (): number => {\r\n const container = containerRef.value;\r\n if (!container) return 0;\r\n return direction.value === \"horizontal\"\r\n ? container.offsetWidth\r\n : container.offsetHeight;\r\n };\r\n\r\n /**\r\n * 获取容器在分割方向上的起始坐标\r\n */\r\n const getContainerStart = (): number => {\r\n const container = containerRef.value;\r\n if (!container) return 0;\r\n const rect = container.getBoundingClientRect();\r\n return direction.value === \"horizontal\" ? rect.left : rect.top;\r\n };\r\n\r\n /**\r\n * 根据鼠标/触摸位置计算面板大小(百分比)\r\n */\r\n const calcSizeFromPosition = (clientPos: number): number => {\r\n const containerLength = getContainerLength();\r\n if (containerLength === 0) return panelSize.value;\r\n\r\n const containerStart = getContainerStart();\r\n const offset = clientPos - containerStart;\r\n const percentage = (offset / containerLength) * 100;\r\n\r\n return clampSize(percentage);\r\n };\r\n\r\n /**\r\n * 获取事件的位置坐标\r\n */\r\n const getClientPos = (e: MouseEvent | TouchEvent): number => {\r\n if (e instanceof TouchEvent) {\r\n return direction.value === \"horizontal\"\r\n ? e.touches[0].clientX\r\n : e.touches[0].clientY;\r\n }\r\n return direction.value === \"horizontal\" ? e.clientX : e.clientY;\r\n };\r\n\r\n /**\r\n * 更新面板大小\r\n */\r\n const updateSize = (newSize: number) => {\r\n const clamped = clampSize(newSize);\r\n panelSize.value = clamped;\r\n onResize?.(clamped, 100 - clamped);\r\n };\r\n\r\n /* ─── 拖拽逻辑 ──────────────────────────────── */\r\n const handleMouseMove = (e: MouseEvent | TouchEvent) => {\r\n if (!isDragging.value || disabled.value) return;\r\n\r\n e.preventDefault();\r\n const pos = getClientPos(e);\r\n const newSize = calcSizeFromPosition(pos);\r\n\r\n /* 拖拽过程中取消折叠状态 */\r\n if (collapsedTarget.value) {\r\n collapsedTarget.value = null;\r\n }\r\n updateSize(newSize);\r\n };\r\n\r\n const handleMouseUp = () => {\r\n if (!isDragging.value) return;\r\n\r\n isDragging.value = false;\r\n document.body.style.cursor = \"\";\r\n document.body.style.userSelect = \"\";\r\n\r\n onDragEnd?.(panelSize.value);\r\n\r\n document.removeEventListener(\"mousemove\", handleMouseMove);\r\n document.removeEventListener(\"mouseup\", handleMouseUp);\r\n document.removeEventListener(\"touchmove\", handleMouseMove);\r\n document.removeEventListener(\"touchend\", handleMouseUp);\r\n };\r\n\r\n const handleMouseDown = (e: MouseEvent | TouchEvent) => {\r\n if (disabled.value) return;\r\n\r\n e.preventDefault();\r\n /* preventDefault 会阻止默认聚焦行为,需手动 focus 以支持键盘控制 */\r\n (e.currentTarget as HTMLElement)?.focus();\r\n isDragging.value = true;\r\n\r\n document.body.style.cursor =\r\n direction.value === \"horizontal\" ? \"col-resize\" : \"row-resize\";\r\n document.body.style.userSelect = \"none\";\r\n\r\n onDragStart?.(panelSize.value);\r\n\r\n document.addEventListener(\"mousemove\", handleMouseMove);\r\n document.addEventListener(\"mouseup\", handleMouseUp);\r\n document.addEventListener(\"touchmove\", handleMouseMove, { passive: false });\r\n document.addEventListener(\"touchend\", handleMouseUp);\r\n };\r\n\r\n /* ─── 双击折叠 ──────────────────────────────── */\r\n const handleDoubleClick = () => {\r\n if (disabled.value || !collapsible.value) return;\r\n toggle(\"first\");\r\n };\r\n\r\n /* ─── 折叠 / 展开 ───────────────────────────── */\r\n const collapse = (target: CollapseTarget = \"first\") => {\r\n if (!collapsible.value || collapsedTarget.value === target) return;\r\n\r\n /* 记住折叠前的大小 */\r\n if (!collapsedTarget.value) {\r\n sizeBeforeCollapse.value = panelSize.value;\r\n }\r\n\r\n collapsedTarget.value = target;\r\n\r\n if (target === \"first\") {\r\n panelSize.value = 0;\r\n } else {\r\n panelSize.value = 100;\r\n }\r\n\r\n onCollapse?.(target);\r\n onResize?.(panelSize.value, 100 - panelSize.value);\r\n };\r\n\r\n const expand = () => {\r\n if (!collapsedTarget.value) return;\r\n\r\n const target = collapsedTarget.value;\r\n collapsedTarget.value = null;\r\n panelSize.value = sizeBeforeCollapse.value;\r\n\r\n onExpand?.(target);\r\n onResize?.(panelSize.value, 100 - panelSize.value);\r\n };\r\n\r\n const toggle = (target: CollapseTarget = \"first\") => {\r\n if (collapsedTarget.value) {\r\n expand();\r\n } else {\r\n collapse(target);\r\n }\r\n };\r\n\r\n /* ─── 键盘微调 ──────────────────────────────── */\r\n /**\r\n * 根据按键获取增量\r\n */\r\n const getKeyDelta = (key: string, isHorizontal: boolean): number | null => {\r\n const keyMap: Record<string, number | null> = {\r\n ArrowLeft: isHorizontal ? -step : 0,\r\n ArrowRight: isHorizontal ? step : 0,\r\n ArrowUp: !isHorizontal ? -step : 0,\r\n ArrowDown: !isHorizontal ? step : 0,\r\n };\r\n return keyMap[key] ?? null;\r\n };\r\n\r\n const handleKeyDown = (e: KeyboardEvent) => {\r\n if (disabled.value) return;\r\n\r\n /* Home / End 直接跳到极值 */\r\n if (e.key === \"Home\") {\r\n updateSize(minSize);\r\n e.preventDefault();\r\n return;\r\n }\r\n if (e.key === \"End\") {\r\n updateSize(maxSize);\r\n e.preventDefault();\r\n return;\r\n }\r\n\r\n const delta = getKeyDelta(e.key, direction.value === \"horizontal\");\r\n if (delta === null || delta === 0) return;\r\n\r\n e.preventDefault();\r\n if (collapsedTarget.value) collapsedTarget.value = null;\r\n updateSize(panelSize.value + delta);\r\n };\r\n\r\n /* ─── 重置 / 查询 ───────────────────────────── */\r\n const resetSize = () => {\r\n collapsedTarget.value = null;\r\n panelSize.value = defaultSize;\r\n onResize?.(defaultSize, 100 - defaultSize);\r\n };\r\n\r\n const setSize = (size: number) => {\r\n collapsedTarget.value = null;\r\n updateSize(size);\r\n };\r\n\r\n const getPanelInfo = () => ({\r\n first: {\r\n size: panelSize.value,\r\n collapsed: isFirstCollapsed.value,\r\n },\r\n second: {\r\n size: 100 - panelSize.value,\r\n collapsed: isSecondCollapsed.value,\r\n },\r\n });\r\n\r\n /* 清理 */\r\n onUnmounted(() => {\r\n document.removeEventListener(\"mousemove\", handleMouseMove);\r\n document.removeEventListener(\"mouseup\", handleMouseUp);\r\n document.removeEventListener(\"touchmove\", handleMouseMove);\r\n document.removeEventListener(\"touchend\", handleMouseUp);\r\n });\r\n\r\n return {\r\n panelSize,\r\n isDragging,\r\n collapsedTarget,\r\n isFirstCollapsed,\r\n isSecondCollapsed,\r\n handleMouseDown,\r\n handleDoubleClick,\r\n handleKeyDown,\r\n collapse,\r\n expand,\r\n toggle,\r\n resetSize,\r\n setSize,\r\n getPanelInfo,\r\n };\r\n}\r\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-16\n * @Description: 分割面板组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n ref=\"containerRef\"\n class=\"c-split-pane\"\n :class=\"[\n `c-split-pane--${direction}`,\n {\n 'c-split-pane--dragging': isDragging,\n 'c-split-pane--disabled': disabled,\n 'c-split-pane--collapsed-first': isFirstCollapsed,\n 'c-split-pane--collapsed-second': isSecondCollapsed,\n },\n ]\"\n >\n <!-- 首面板 -->\n <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\n <div class=\"split-panel__content\">\n <slot name=\"first\" />\n </div>\n </div>\n\n <!-- 分割线手柄 -->\n <div\n class=\"split-gutter\"\n :style=\"gutterStyle\"\n role=\"separator\"\n :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\n :aria-valuenow=\"Math.round(panelSize)\"\n :aria-valuemin=\"0\"\n :aria-valuemax=\"100\"\n tabindex=\"0\"\n @mousedown=\"handleMouseDown\"\n @touchstart.prevent=\"handleMouseDown\"\n @dblclick=\"handleDoubleClick\"\n @keydown=\"handleKeyDown\"\n >\n <div class=\"split-gutter__visual\">\n <div class=\"split-gutter__dots\">\n <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\n </div>\n </div>\n\n <!-- 折叠按钮 -->\n <template v-if=\"showCollapseButton && collapsible\">\n <button\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\n :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\n @click.stop=\"toggle('first')\"\n @mousedown.stop\n >\n <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\n </button>\n <button\n class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\n :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\n @click.stop=\"toggle('second')\"\n @mousedown.stop\n >\n <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\n </button>\n </template>\n </div>\n\n <!-- 第二面板 -->\n <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\n <div class=\"split-panel__content\">\n <slot name=\"second\" />\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, toRef } from \"vue\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport { useSplitResize } from \"./composables/useSplitResize\";\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\n\ndefineOptions({ name: \"C_SplitPane\" });\n\ninterface Props {\n /** 分割方向 */\n direction?: SplitDirection;\n /** 首面板默认大小(百分比 0-100) */\n defaultSize?: number;\n /** 首面板最小大小(百分比 0-100) */\n minSize?: number;\n /** 首面板最大大小(百分比 0-100) */\n maxSize?: number;\n /** 是否禁用拖拽调整 */\n disabled?: boolean;\n /** 是否可折叠 */\n collapsible?: boolean;\n /** 是否显示折叠按钮 */\n showCollapseButton?: boolean;\n /** 分割线宽度(px) */\n gutterSize?: number;\n /** 键盘微调步长(百分比) */\n step?: number;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n direction: \"horizontal\",\n defaultSize: 50,\n minSize: 0,\n maxSize: 100,\n disabled: false,\n collapsible: true,\n showCollapseButton: true,\n gutterSize: 6,\n step: 2,\n});\n\nconst emit = defineEmits<{\n resize: [firstSize: number, secondSize: number];\n collapse: [target: CollapseTarget];\n expand: [target: CollapseTarget];\n \"drag-start\": [size: number];\n \"drag-end\": [size: number];\n}>();\n\nconst containerRef = ref<HTMLElement | null>(null);\n\nconst {\n panelSize,\n isDragging,\n isFirstCollapsed,\n isSecondCollapsed,\n handleMouseDown,\n handleDoubleClick,\n handleKeyDown,\n collapse,\n expand,\n toggle,\n resetSize,\n setSize,\n getPanelInfo,\n} = useSplitResize({\n containerRef,\n direction: toRef(props, \"direction\"),\n defaultSize: props.defaultSize,\n minSize: props.minSize,\n maxSize: props.maxSize,\n disabled: toRef(props, \"disabled\"),\n collapsible: toRef(props, \"collapsible\"),\n step: props.step,\n onResize: (first, second) => emit(\"resize\", first, second),\n onCollapse: (target) => emit(\"collapse\", target),\n onExpand: (target) => emit(\"expand\", target),\n onDragStart: (size) => emit(\"drag-start\", size),\n onDragEnd: (size) => emit(\"drag-end\", size),\n});\n\n/* ─── 计算样式 ──────────────────────────────── */\nconst firstPanelStyle = computed(() => {\n const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\n return props.direction === \"horizontal\"\n ? { width: sizeValue }\n : { height: sizeValue };\n});\n\nconst secondPanelStyle = computed(() => {\n const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\n return props.direction === \"horizontal\"\n ? { width: sizeValue }\n : { height: sizeValue };\n});\n\nconst gutterStyle = computed(() => {\n return props.direction === \"horizontal\"\n ? { width: `${props.gutterSize}px` }\n : { height: `${props.gutterSize}px` };\n});\n\n/* ─── 折叠按钮图标 ──────────────────────────── */\nconst collapseFirstIcon = computed(() => {\n if (props.direction === \"horizontal\") {\n return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\n }\n return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\n});\n\nconst collapseSecondIcon = computed(() => {\n if (props.direction === \"horizontal\") {\n return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\n }\n return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\n});\n\n/* ─── 暴露方法 ──────────────────────────────── */\ndefineExpose<SplitPaneExpose>({\n collapse,\n expand,\n toggle,\n resetSize,\n getPanelInfo,\n setSize,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n"],"mappings":"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"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"C_Steps-Bk1krgiR.css","names":[],"sources":["../src/components/C_Steps/index.vue?vue&type=style&index=0&scoped=100f392a&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-steps[data-v-100f392a] {\n --step-gap: 24px;\n --icon-size: 32px;\n --line-width: 2px;\n --line-gap: 4px;\n --primary: var(--c-primary, #18a058);\n --success: var(--c-success, #18a058);\n --warning: var(--c-warning, #f0a020);\n --error: var(--c-error, #d03050);\n --border: var(--c-border, rgba(0, 0, 0, 0.09));\n --bg-hover: rgba(0, 0, 0, 0.04);\n display: flex;\n}\n.steps-connected[data-v-100f392a] {\n --line-gap: 0px;\n}\n.steps-horizontal[data-v-100f392a] {\n flex-direction: row;\n align-items: flex-start;\n}\n.steps-vertical[data-v-100f392a] {\n flex-direction: column;\n}\n.step-item[data-v-100f392a] {\n display: flex;\n position: relative;\n flex: 1;\n gap: 12px;\n}\n.steps-horizontal .step-item[data-v-100f392a] {\n flex-direction: column;\n align-items: center;\n text-align: center;\n min-width: 0;\n}\n.steps-vertical .step-item[data-v-100f392a] {\n flex-direction: row;\n min-height: 72px;\n flex: none;\n width: 100%;\n}\n.step-indicator[data-v-100f392a] {\n position: relative;\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n.steps-horizontal .step-indicator[data-v-100f392a] {\n width: 100%;\n justify-content: center;\n}\n.steps-vertical .step-indicator[data-v-100f392a] {\n flex-direction: column;\n}\n.step-icon[data-v-100f392a] {\n width: var(--icon-size);\n height: var(--icon-size);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: var(--line-width) solid var(--border);\n background: var(--c-bg-card, #fff);\n position: relative;\n z-index: 2;\n transition: all 0.2s ease;\n font-size: 16px;\n}\n.step-finish .step-icon[data-v-100f392a] {\n border-color: var(--success);\n color: var(--success);\n}\n.step-process .step-icon[data-v-100f392a] {\n border-color: var(--primary);\n background: var(--primary);\n color: white;\n}\n.step-error .step-icon[data-v-100f392a] {\n border-color: var(--error);\n color: var(--error);\n}\n.step-index[data-v-100f392a] {\n font-size: 14px;\n font-weight: 500;\n}\n.step-line[data-v-100f392a] {\n background: var(--border);\n position: absolute;\n transition: background 0.2s ease;\n}\n.steps-horizontal .step-line[data-v-100f392a] {\n height: var(--line-width);\n left: calc(50% + var(--icon-size) / 2 + var(--line-gap));\n right: calc(-50% + var(--icon-size) / 2 + var(--line-gap));\n top: calc(var(--icon-size) / 2);\n}\n.steps-vertical .step-line[data-v-100f392a] {\n width: var(--line-width);\n top: var(--icon-size);\n bottom: 0;\n left: calc(var(--icon-size) / 2 - 1px);\n}\n.step-finish .step-line[data-v-100f392a] {\n background: var(--success);\n}\n.step-content[data-v-100f392a] {\n flex: 1;\n min-width: 0;\n}\n.steps-vertical .step-content[data-v-100f392a] {\n padding-top: 4px;\n}\n.step-title[data-v-100f392a] {\n font-size: 14px;\n font-weight: 500;\n line-height: 22px;\n margin-bottom: 2px;\n word-break: break-word;\n}\n.step-time[data-v-100f392a] {\n font-size: 12px;\n line-height: 20px;\n margin-bottom: 2px;\n opacity: 0.65;\n}\n.step-finish .step-time[data-v-100f392a] {\n color: var(--success);\n}\n.step-description[data-v-100f392a] {\n font-size: 12px;\n line-height: 20px;\n opacity: 0.65;\n}\n.step-wait .step-title[data-v-100f392a] {\n opacity: 0.65;\n}\n.step-process .step-title[data-v-100f392a] {\n color: var(--primary);\n font-weight: 600;\n}\n.step-error .step-title[data-v-100f392a] {\n color: var(--error);\n}\n.step-clickable[data-v-100f392a] {\n cursor: pointer;\n}\n.step-clickable:hover .step-icon[data-v-100f392a] {\n transform: scale(1.05);\n}\n.step-clickable:not(.step-process):hover .step-icon[data-v-100f392a] {\n background: var(--bg-hover);\n}\n.step-clickable:hover .step-title[data-v-100f392a] {\n color: var(--primary);\n}\n@media (max-width: 768px) {\n.steps-horizontal[data-v-100f392a] {\n flex-wrap: wrap;\n}\n.steps-horizontal .step-item[data-v-100f392a] {\n flex: 0 0 50%;\n margin-bottom: 24px;\n}\n.steps-horizontal .step-line[data-v-100f392a] {\n display: none;\n}\n}\n@media (prefers-reduced-motion: reduce) {\n.step-icon[data-v-100f392a],\n .step-line[data-v-100f392a] {\n transition: none;\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}