@robot-admin/naive-ui-components 0.9.2 → 0.9.3
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.
- package/dist/C_ActionBar-BAcfOfRw.css.map +1 -0
- package/dist/C_ActionBar-DG2HW7t5.css.map +1 -0
- package/dist/C_ActionBar.css +47 -47
- package/dist/C_ActionBar.js.map +1 -1
- package/dist/C_ActionBar2.js +1 -1
- package/dist/C_ActionBar2.js.map +1 -1
- package/dist/{C_AntV-BY8jqqmi.css.map → C_AntV-D_jTK8oZ.css.map} +1 -1
- package/dist/{C_AntV-BbkHc-_a.css.map → C_AntV-DanTAq22.css.map} +1 -1
- package/dist/C_AntV.css +79 -79
- package/dist/C_AntV.js.map +1 -1
- package/dist/C_AntV2.js +3 -3
- package/dist/C_AntV2.js.map +1 -1
- package/dist/{C_AudioPlayer-DKRIGhi7.css.map → C_AudioPlayer-BnYIJXPD.css.map} +1 -1
- package/dist/{C_AudioPlayer-DlB6eNsa.css.map → C_AudioPlayer-ldTy9Y34.css.map} +1 -1
- package/dist/C_AudioPlayer.css +47 -47
- package/dist/C_AudioPlayer.js.map +1 -1
- package/dist/C_AudioPlayer2.js +1 -1
- package/dist/C_AudioPlayer2.js.map +1 -1
- package/dist/{C_AvatarGroup-D02zci-i.css.map → C_AvatarGroup-B9d-GJ9c.css.map} +1 -1
- package/dist/{C_AvatarGroup-DatHaUlY.css.map → C_AvatarGroup-SIzxuuZr.css.map} +1 -1
- package/dist/C_AvatarGroup.css +21 -21
- package/dist/C_AvatarGroup.js.map +1 -1
- package/dist/C_AvatarGroup2.js +1 -1
- package/dist/C_AvatarGroup2.js.map +1 -1
- package/dist/{C_Barcode-DYDRDe2O.css.map → C_Barcode-CAU2mFcx.css.map} +1 -1
- package/dist/{C_Barcode-muJdc_O4.css.map → C_Barcode-D2oJaEg3.css.map} +1 -1
- package/dist/C_Barcode.css +7 -7
- package/dist/C_Barcode.js.map +1 -1
- package/dist/C_Barcode2.js +1 -1
- package/dist/C_Barcode2.js.map +1 -1
- package/dist/C_Breadcrumb.js.map +1 -1
- package/dist/C_Breadcrumb2.js +1 -1
- package/dist/C_Breadcrumb2.js.map +1 -1
- package/dist/{C_Captcha-9_hk6VmY.css.map → C_Captcha-B3yrtG7t.css.map} +1 -1
- package/dist/{C_Captcha-MtASlJ0f.css.map → C_Captcha-D4hDdWDu.css.map} +1 -1
- package/dist/C_Captcha.css +19 -19
- package/dist/C_Captcha.js.map +1 -1
- package/dist/C_Captcha2.js +1 -1
- package/dist/C_Captcha2.js.map +1 -1
- package/dist/C_Cascade-BE7t1OX5.css.map +1 -0
- package/dist/C_Cascade-CpDiau1y.css.map +1 -0
- package/dist/C_Cascade.css +3 -3
- package/dist/C_Cascade.js.map +1 -1
- package/dist/C_Cascade2.js +1 -1
- package/dist/C_Cascade2.js.map +1 -1
- package/dist/{C_Chat-Csjz_BFw.css.map → C_Chat-CF1SU7mc.css.map} +1 -1
- package/dist/{C_Chat-DO1ZBA_0.css.map → C_Chat-DeUv6uuI.css.map} +1 -1
- package/dist/C_Chat.css +65 -65
- package/dist/C_Chat.js.map +1 -1
- package/dist/C_Chat2.js +1 -1
- package/dist/C_Chat2.js.map +1 -1
- package/dist/{C_City-Bam08Qv3.css.map → C_City-DdkX6u64.css.map} +1 -1
- package/dist/{C_City-Bb3W-KaN.css.map → C_City-iP-dIvui.css.map} +1 -1
- package/dist/C_City.css +29 -29
- package/dist/C_City.js.map +1 -1
- package/dist/C_City2.js +1 -1
- package/dist/C_City2.js.map +1 -1
- package/dist/C_Code-BWmJMNS7.css.map +1 -0
- package/dist/C_Code-k14vjgVl.css.map +1 -0
- package/dist/C_Code.css +3 -3
- package/dist/C_Code.js.map +1 -1
- package/dist/C_Code2.js +1 -1
- package/dist/C_Code2.js.map +1 -1
- package/dist/{C_CollapsePanel-CWkFCqNQ.css.map → C_CollapsePanel-BSKcWSmY.css.map} +1 -1
- package/dist/{C_CollapsePanel-pcVJA_4z.css.map → C_CollapsePanel-DRvRq8tB.css.map} +1 -1
- package/dist/C_CollapsePanel.css +35 -35
- package/dist/C_CollapsePanel.js.map +1 -1
- package/dist/C_CollapsePanel2.js +1 -1
- package/dist/C_CollapsePanel2.js.map +1 -1
- package/dist/{C_ContextMenu-B3Cgz_wJ.css.map → C_ContextMenu-Bn_uhJSo.css.map} +1 -1
- package/dist/{C_ContextMenu-u1LixF3_.css.map → C_ContextMenu-C9iuxG2n.css.map} +1 -1
- package/dist/C_ContextMenu.css +17 -17
- package/dist/C_ContextMenu.js.map +1 -1
- package/dist/C_ContextMenu2.js +1 -1
- package/dist/C_ContextMenu2.js.map +1 -1
- package/dist/{C_Cron-Civir5-I.css.map → C_Cron-BIQ2By9v.css.map} +1 -1
- package/dist/{C_Cron-iw3qpMsy.css.map → C_Cron-BNSAGD6A.css.map} +1 -1
- package/dist/C_Cron.css +57 -57
- package/dist/C_Cron.js.map +1 -1
- package/dist/C_Cron2.js +1 -1
- package/dist/C_Cron2.js.map +1 -1
- package/dist/C_Date.js.map +1 -1
- package/dist/C_Date2.js +1 -1
- package/dist/C_Date2.js.map +1 -1
- package/dist/{C_Draggable-BCjIvIwT.css.map → C_Draggable-BDAbk4s5.css.map} +1 -1
- package/dist/{C_Draggable-DwkSlCOS.css.map → C_Draggable-UhfDLXop.css.map} +1 -1
- package/dist/C_Draggable.css +46 -46
- package/dist/C_Draggable.js.map +1 -1
- package/dist/C_Draggable2.js +1 -1
- package/dist/C_Draggable2.js.map +1 -1
- package/dist/{C_Editor-BfjjYQ9B.css.map → C_Editor-CZOaChru.css.map} +1 -1
- package/dist/{C_Editor-Do2StvoJ.css.map → C_Editor-kJAQq5z6.css.map} +1 -1
- package/dist/C_Editor.css +14 -14
- package/dist/C_Editor.js.map +1 -1
- package/dist/C_Editor2.js +1 -1
- package/dist/C_Editor2.js.map +1 -1
- package/dist/{C_FilePreview-BhcbiXsV.css.map → C_FilePreview-Bs_omgJS.css.map} +1 -1
- package/dist/{C_FilePreview-DJudcIbW.css.map → C_FilePreview-DbwoyF2j.css.map} +1 -1
- package/dist/C_FilePreview.css +91 -91
- package/dist/C_FilePreview.js.map +1 -1
- package/dist/C_FilePreview2.js +1 -1
- package/dist/C_FilePreview2.js.map +1 -1
- package/dist/{C_Form-BtcAPIRi.css.map → C_Form-SCq-DZaZ.css.map} +1 -1
- package/dist/{C_Form-D_gwQ7hC.css.map → C_Form-mcd1nKvF.css.map} +1 -1
- package/dist/C_Form.css +223 -223
- package/dist/C_Form.js.map +1 -1
- package/dist/C_Form2.js +1 -1
- package/dist/C_Form2.js.map +1 -1
- package/dist/{C_FormSearch-Bi4XYjjk.css.map → C_FormSearch-C3F8peAY.css.map} +1 -1
- package/dist/{C_FormSearch-DUGOoX0u.css.map → C_FormSearch-qW56bJPo.css.map} +1 -1
- package/dist/C_FormSearch.css +45 -45
- package/dist/C_FormSearch.js.map +1 -1
- package/dist/C_FormSearch2.js +1 -1
- package/dist/C_FormSearch2.js.map +1 -1
- package/dist/{C_FormulaEditor-CJk3SSUJ.css.map → C_FormulaEditor-ChOvDbsZ.css.map} +1 -1
- package/dist/{C_FormulaEditor-Cy7mjfVO.css.map → C_FormulaEditor-mfiIUDY4.css.map} +1 -1
- package/dist/C_FormulaEditor.css +78 -78
- package/dist/C_FormulaEditor.js.map +1 -1
- package/dist/C_FormulaEditor2.js +1 -1
- package/dist/C_FormulaEditor2.js.map +1 -1
- package/dist/C_FullCalendar-C2nsqrgS.css.map +1 -0
- package/dist/C_FullCalendar-DdFtXVhy.css.map +1 -0
- package/dist/C_FullCalendar.css +2 -2
- package/dist/C_FullCalendar.js.map +1 -1
- package/dist/C_FullCalendar2.js +1 -1
- package/dist/C_FullCalendar2.js.map +1 -1
- package/dist/{C_GlobalSearch-B6wK3m3k.css.map → C_GlobalSearch-Dq4Wo01K.css.map} +1 -1
- package/dist/{C_GlobalSearch-DoPjldFm.css.map → C_GlobalSearch-RB7J43gu.css.map} +1 -1
- package/dist/C_GlobalSearch.css +112 -112
- package/dist/C_GlobalSearch.js.map +1 -1
- package/dist/C_GlobalSearch2.js +1 -1
- package/dist/C_GlobalSearch2.js.map +1 -1
- package/dist/C_Guide.js.map +1 -1
- package/dist/C_Guide2.js +1 -1
- package/dist/C_Guide2.js.map +1 -1
- package/dist/C_Icon.js.map +1 -1
- package/dist/C_Icon2.js.map +1 -1
- package/dist/{C_ImageCropper-BqZpkZfU.css.map → C_ImageCropper-CdTX2nxU.css.map} +1 -1
- package/dist/{C_ImageCropper-CylwGuzS.css.map → C_ImageCropper-ilOqPklJ.css.map} +1 -1
- package/dist/C_ImageCropper.css +23 -23
- package/dist/C_ImageCropper.js.map +1 -1
- package/dist/C_ImageCropper2.js +1 -1
- package/dist/C_ImageCropper2.js.map +1 -1
- package/dist/C_Language.js.map +1 -1
- package/dist/C_Language2.js +1 -1
- package/dist/C_Language2.js.map +1 -1
- package/dist/{C_Login-BkdnkBKX.css.map → C_Login-B3qYkLrN.css.map} +1 -1
- package/dist/{C_Login-VkMM6OJ2.css.map → C_Login-xMI1_ojE.css.map} +1 -1
- package/dist/C_Login.css +72 -72
- package/dist/C_Login.js.map +1 -1
- package/dist/C_Login2.js +1 -1
- package/dist/C_Login2.js.map +1 -1
- package/dist/{C_Map-DNnBcY70.css.map → C_Map-CWMMN58_.css.map} +1 -1
- package/dist/{C_Map-LEXIx6zM.css.map → C_Map-xSR2H-9o.css.map} +1 -1
- package/dist/C_Map.css +4 -4
- package/dist/C_Map.js.map +1 -1
- package/dist/C_Map2.js +1 -1
- package/dist/C_Map2.js.map +1 -1
- package/dist/{C_Markdown-DwmI0_0Q.css.map → C_Markdown-C7lTVJ1S.css.map} +1 -1
- package/dist/{C_Markdown-k0794RW0.css.map → C_Markdown-CZDm_baQ.css.map} +1 -1
- package/dist/C_Markdown.css +33 -33
- package/dist/C_Markdown.js.map +1 -1
- package/dist/C_Markdown2.js +1 -1
- package/dist/C_Markdown2.js.map +1 -1
- package/dist/C_Menu.js.map +1 -1
- package/dist/C_Menu2.js +1 -1
- package/dist/C_Menu2.js.map +1 -1
- package/dist/{C_NotificationCenter-DT6fQ79O.css.map → C_NotificationCenter-D7GGGWg7.css.map} +1 -1
- package/dist/{C_NotificationCenter-DbgBiyqB.css.map → C_NotificationCenter-SSmeHA45.css.map} +1 -1
- package/dist/C_NotificationCenter.css +89 -89
- package/dist/C_NotificationCenter.js.map +1 -1
- package/dist/C_NotificationCenter2.js +1 -1
- package/dist/C_NotificationCenter2.js.map +1 -1
- package/dist/C_OrgChart.js.map +1 -1
- package/dist/C_OrgChart2.js.map +1 -1
- package/dist/C_Progress.js.map +1 -1
- package/dist/C_Progress2.js +1 -1
- package/dist/C_Progress2.js.map +1 -1
- package/dist/{C_QRCode-CFNTda_1.css.map → C_QRCode-B_1lHUdx.css.map} +1 -1
- package/dist/{C_QRCode-CmWr9lK-.css.map → C_QRCode-CuQRYu0s.css.map} +1 -1
- package/dist/C_QRCode.css +9 -9
- package/dist/C_QRCode.js.map +1 -1
- package/dist/C_QRCode2.js +1 -1
- package/dist/C_QRCode2.js.map +1 -1
- package/dist/{C_Signature-BDx4ctsE.css.map → C_Signature-Bp-RBpAl.css.map} +1 -1
- package/dist/{C_Signature-Bz_uNbwv.css.map → C_Signature-Cb2VW1ok.css.map} +1 -1
- package/dist/C_Signature.css +15 -15
- package/dist/C_Signature.js.map +1 -1
- package/dist/C_Signature2.js +1 -1
- package/dist/C_Signature2.js.map +1 -1
- package/dist/C_Skeleton.js.map +1 -1
- package/dist/C_Skeleton2.js.map +1 -1
- package/dist/{C_SplitPane-BOwr1C7K.css.map → C_SplitPane-CgGWYsRE.css.map} +1 -1
- package/dist/{C_SplitPane-N-a_D-7F.css.map → C_SplitPane-DGf6WEeR.css.map} +1 -1
- package/dist/C_SplitPane.css +31 -31
- package/dist/C_SplitPane.js.map +1 -1
- package/dist/C_SplitPane2.js +1 -1
- package/dist/C_SplitPane2.js.map +1 -1
- package/dist/C_Steps-Buyg7Axn.css.map +1 -0
- package/dist/C_Steps-DNY91VbQ.css.map +1 -0
- package/dist/C_Steps.css +38 -38
- package/dist/C_Steps.js.map +1 -1
- package/dist/C_Steps2.js +1 -1
- package/dist/C_Steps2.js.map +1 -1
- package/dist/{C_Table-BcM5LqAM.css.map → C_Table--kbQaaBv.css.map} +1 -1
- package/dist/{C_Table-HATVoq1F.css.map → C_Table-D631kdXC.css.map} +1 -1
- package/dist/C_Table.css +104 -104
- package/dist/C_Table.js.map +1 -1
- package/dist/C_Table2.js +2 -2
- package/dist/C_Table2.js.map +1 -1
- package/dist/{C_TagsView-DX3LecK1.css.map → C_TagsView-COjGNM9h.css.map} +1 -1
- package/dist/{C_TagsView-DqOTa8bL.css.map → C_TagsView-zUDj9S06.css.map} +1 -1
- package/dist/C_TagsView.css +36 -36
- package/dist/C_TagsView.js.map +1 -1
- package/dist/C_TagsView2.js +1 -1
- package/dist/C_TagsView2.js.map +1 -1
- package/dist/C_Theme.js.map +1 -1
- package/dist/C_Theme2.js +1 -1
- package/dist/C_Theme2.js.map +1 -1
- package/dist/C_Time-BQ9PGy8B.css.map +1 -0
- package/dist/C_Time-CO73krC6.css.map +1 -0
- package/dist/C_Time.css +5 -5
- package/dist/C_Time.js.map +1 -1
- package/dist/C_Time2.js +1 -1
- package/dist/C_Time2.js.map +1 -1
- package/dist/{C_Timeline-BKkimrZx.css.map → C_Timeline-4rk0Dzgn.css.map} +1 -1
- package/dist/{C_Timeline-DTuSCX6p.css.map → C_Timeline-DdESmqwL.css.map} +1 -1
- package/dist/C_Timeline.css +45 -45
- package/dist/C_Timeline.js.map +1 -1
- package/dist/C_Timeline2.js +1 -1
- package/dist/C_Timeline2.js.map +1 -1
- package/dist/{C_Transfer-BOB6OBqS.css.map → C_Transfer-B-vjvhjI.css.map} +1 -1
- package/dist/{C_Transfer-Dpq7ezWC.css.map → C_Transfer-EzdHzZNv.css.map} +1 -1
- package/dist/C_Transfer.css +31 -31
- package/dist/C_Transfer.js.map +1 -1
- package/dist/C_Transfer2.js +1 -1
- package/dist/C_Transfer2.js.map +1 -1
- package/dist/{C_Tree-D98nX9qT.css.map → C_Tree-CsXgGfhn.css.map} +1 -1
- package/dist/{C_Tree-ulfm7b-P.css.map → C_Tree-P7eRpnOa.css.map} +1 -1
- package/dist/C_Tree.css +33 -33
- package/dist/C_Tree.js.map +1 -1
- package/dist/C_Tree2.js +1 -1
- package/dist/C_Tree2.js.map +1 -1
- package/dist/{C_Upload-BR9fg5r4.css.map → C_Upload-CHjiVVh7.css.map} +1 -1
- package/dist/{C_Upload-CPqf74Ea.css.map → C_Upload-DE3OLsZD.css.map} +1 -1
- package/dist/C_Upload.css +50 -50
- package/dist/C_Upload.js.map +1 -1
- package/dist/C_Upload2.js +2 -2
- package/dist/C_Upload2.js.map +1 -1
- package/dist/{C_VideoPlayer-4J96tKfK.css.map → C_VideoPlayer-CnaNOFtW.css.map} +1 -1
- package/dist/{C_VideoPlayer-D35seHkm.css.map → C_VideoPlayer-cnP88zNV.css.map} +1 -1
- package/dist/C_VideoPlayer.css +68 -68
- package/dist/C_VideoPlayer.js.map +1 -1
- package/dist/C_VideoPlayer2.js +3 -3
- package/dist/C_VideoPlayer2.js.map +1 -1
- package/dist/{C_VtableGantt-C2lxFmWg.css.map → C_VtableGantt-CZlJgvpC.css.map} +1 -1
- package/dist/{C_VtableGantt-Dwnkw_WL.css.map → C_VtableGantt-DKfQkql0.css.map} +1 -1
- package/dist/C_VtableGantt.css +15 -15
- package/dist/C_VtableGantt.js.map +1 -1
- package/dist/C_VtableGantt2.js +1 -1
- package/dist/C_VtableGantt2.js.map +1 -1
- package/dist/{C_WaterFall-C4HDqf-a.css.map → C_WaterFall-BJ_39ext.css.map} +1 -1
- package/dist/{C_WaterFall-HWB-gPON.css.map → C_WaterFall-cYc1vntE.css.map} +1 -1
- package/dist/C_WaterFall.css +16 -16
- package/dist/C_WaterFall.js.map +1 -1
- package/dist/C_WaterFall2.js +1 -1
- package/dist/C_WaterFall2.js.map +1 -1
- package/dist/{C_WorkFlow-2hJfvvTK.css.map → C_WorkFlow-BFzRGGhJ.css.map} +1 -1
- package/dist/{C_WorkFlow-DHoNjl8-.css.map → C_WorkFlow-DSyCOvRp.css.map} +1 -1
- package/dist/C_WorkFlow.css +193 -193
- package/dist/C_WorkFlow.js.map +1 -1
- package/dist/C_WorkFlow2.js +1 -1
- package/dist/C_WorkFlow2.js.map +1 -1
- package/dist/constants.d.ts +1 -1
- package/dist/constants2.d.ts +1 -1
- package/dist/constants3.d.ts +3 -3
- package/dist/constants4.d.ts +3 -3
- package/dist/constants5.d.ts +2 -2
- package/dist/index.vue.d.ts +2 -2
- package/dist/index11.vue.d.ts +1 -1
- package/dist/index13.vue.d.ts +3 -3
- package/dist/index15.vue.d.ts +2 -2
- package/dist/index18.vue.d.ts +3 -3
- package/dist/index2.vue.d.ts +6 -6
- package/dist/index21.vue.d.ts +2 -2
- package/dist/index23.vue.d.ts +2 -2
- package/dist/index26.vue.d.ts +2 -2
- package/dist/index28.vue.d.ts +3 -3
- package/dist/index3.vue.d.ts +2 -2
- package/dist/index4.vue.d.ts +2 -2
- package/dist/index6.vue.d.ts +3 -3
- package/dist/index8.vue.d.ts +1 -1
- package/dist/style.css +1991 -1991
- package/dist/useCollapsePanel.d.ts +2 -2
- package/dist/useCropperCore.d.ts +7 -7
- package/dist/useDraggableLayout.d.ts +2 -2
- package/dist/useDynamicFormState.d.ts +9 -9
- package/dist/useEdgeInteraction.d.ts +1 -1
- package/dist/useInfiniteScroll.d.ts +3 -3
- package/dist/useModalEdit.d.ts +1 -1
- package/dist/useQRCode.d.ts +4 -4
- package/dist/useSignatureHistory.d.ts +1 -1
- package/dist/useSplitResize.d.ts +5 -5
- package/dist/useTimeSelection.d.ts +1 -1
- package/dist/useTreeOperations.d.ts +4 -4
- package/dist/useWorkflowValidation.d.ts +5 -5
- package/package.json +4 -7
- package/dist/C_ActionBar-DYG0Yf3A.css.map +0 -1
- package/dist/C_ActionBar-MAjRhqcI.css.map +0 -1
- package/dist/C_Cascade-Dq0S5Jkm.css.map +0 -1
- package/dist/C_Cascade-IUUHIh7r.css.map +0 -1
- package/dist/C_Code-BFi5xxnM.css.map +0 -1
- package/dist/C_Code-CZ7yfnri.css.map +0 -1
- package/dist/C_FullCalendar-BQA0OjGB.css.map +0 -1
- package/dist/C_FullCalendar-ChJUosAi.css.map +0 -1
- package/dist/C_Steps-Bk1krgiR.css.map +0 -1
- package/dist/C_Steps-Dn2CMpy1.css.map +0 -1
- package/dist/C_Time-BzyQVvTS.css.map +0 -1
- package/dist/C_Time-DmpKLQHc.css.map +0 -1
- package/dist/themes/glass-morphism.css +0 -1
package/dist/C_Breadcrumb.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Breadcrumb.js","names":[],"sources":["../src/components/C_Breadcrumb/index.vue"],"sourcesContent":["<!--\n * @Description: 通用面包屑组件 — 基于 NBreadcrumb 的路由面包屑导航\n *\n * 支持两种模式:\n * 1. 自动模式(默认)— 从 `route.matched` 自动生成面包屑\n * 2. 手动模式 — 传入 `items` 完全自定义\n *\n * @example 自动模式(零配置)\n * ```vue\n * <C_Breadcrumb\n * :label-formatter=\"$t\"\n * @select=\"router.push\"\n * />\n * ```\n *\n * @example 手动模式\n * ```vue\n * <C_Breadcrumb\n * :items=\"customBreadcrumbs\"\n * @select=\"handleSelect\"\n * />\n * ```\n *\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n class=\"c-breadcrumb flex-1 min-w-0\"\n :style=\"{\n '--c-breadcrumb-icon-size': `${iconSize}px`,\n '--c-breadcrumb-gap': `${Math.max(Math.round(iconSize / 4), 2)}px`,\n }\"\n >\n <NBreadcrumb>\n <NBreadcrumbItem\n v-for=\"(item, index) in breadcrumbItems\"\n :key=\"index\"\n >\n <NDropdown\n v-if=\"item.children?.length\"\n :options=\"item.children\"\n @select=\"handleSelect\"\n >\n <div class=\"c-breadcrumb__trigger\">\n <C_Icon\n v-if=\"showIcon\"\n :name=\"item.icon\"\n :size=\"iconSize\"\n />\n {{ item.label }}\n </div>\n </NDropdown>\n <span\n v-else\n class=\"c-breadcrumb__link\"\n @click=\"handleSelect(item.key)\"\n >\n <C_Icon\n v-if=\"showIcon\"\n :name=\"item.icon\"\n :size=\"iconSize\"\n />\n {{ item.label }}\n </span>\n </NBreadcrumbItem>\n </NBreadcrumb>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import { useRoute } from 'vue-router'\n import { C_Icon } from '../C_Icon'\n import type { BreadcrumbItem } from '../_shared'\n\n defineOptions({ name: 'C_Breadcrumb' })\n\n const props = withDefaults(\n defineProps<{\n /**\n * 手动传入面包屑数据\n * 不传时自动从 `route.matched` 生成(零配置)\n */\n items?: BreadcrumbItem[]\n /** 是否显示图标 */\n showIcon?: boolean\n /** 图标大小 (px),默认 16 */\n iconSize?: number\n /**\n * 标签文本格式化函数(用于 i18n)\n * 仅在自动模式下生效\n */\n labelFormatter?: (label: string) => string\n }>(),\n {\n showIcon: true,\n iconSize: 16,\n }\n )\n\n const emit = defineEmits<{\n /** 面包屑项被选中(返回路径 key) */\n select: [path: string]\n }>()\n\n const route = useRoute()\n\n const formatLabel = (title: string): string =>\n props.labelFormatter ? props.labelFormatter(title) : title\n\n /** 从 route.matched 自动生成面包屑 */\n const autoBreadcrumb = computed<BreadcrumbItem[]>(() => {\n return route.matched\n .filter((record: any) => record.meta?.title)\n .map((record: any) => ({\n key: record.path,\n label: formatLabel((record.meta.title || '') as string),\n icon: record.meta.icon as string | undefined,\n children: record.children?.length\n ? record.children.map((child: any) => ({\n key: child.path,\n label: formatLabel((child.meta?.title || '') as string),\n ...(child.children?.length && {\n children: child.children.map((grandChild: any) => ({\n key: grandChild.path,\n label: formatLabel((grandChild.meta?.title || '') as string),\n })),\n }),\n }))\n : [],\n }))\n })\n\n const breadcrumbItems = computed<BreadcrumbItem[]>(\n () => props.items ?? autoBreadcrumb.value\n )\n\n const handleSelect = (key: string) => {\n emit('select', key)\n }\n</script>\n\n<style lang=\"scss\">\n .c-breadcrumb {\n // 暴露 CSS 变量,方便主项目覆盖\n --c-breadcrumb-icon-size: 16px;\n --c-breadcrumb-gap: 4px;\n --c-breadcrumb-font-size: inherit;\n\n display: flex;\n align-items: center;\n height: 100%;\n\n &__trigger,\n &__link {\n display: inline-flex;\n align-items: center;\n gap: var(--c-breadcrumb-gap);\n font-size: var(--c-breadcrumb-font-size);\n line-height: 1;\n cursor: pointer;\n }\n\n // 确保 C_Icon 在面包屑中尺寸一致\n .c-icon {\n flex-shrink: 0;\n }\n\n // 修复分隔符 \"/\" 与文本/图标垂直居中对齐\n // 原因:Naive UI 分隔符默认 line-height (~1.4) 导致 \"/\" 基线偏低\n .n-breadcrumb-item {\n display: inline-flex !important;\n align-items: center;\n\n .n-breadcrumb-item__separator {\n display: inline-flex;\n align-items: center;\n line-height: 1;\n margin-top: -4px;\n }\n }\n }\n</style>\n"],"mappings":"mVA6EE,IAAM,EAAQ,EAuBR,EAAO,EAKP,GAAA,EAAA,EAAA,WAAiB,CAEjB,EAAe,GACnB,EAAM,eAAiB,EAAM,eAAe,EAAM,CAAG,EAGjD,GAAA,EAAA,EAAA,cACG,EAAM,QACV,OAAQ,GAAgB,EAAO,MAAM,MAAK,CAC1C,IAAK,IAAiB,CACrB,IAAK,EAAO,KACZ,MAAO,EAAa,EAAO,KAAK,OAAS,GAAc,CACvD,KAAM,EAAO,KAAK,KAClB,SAAU,EAAO,UAAU,OACvB,EAAO,SAAS,IAAK,IAAgB,CACnC,IAAK,EAAM,KACX,MAAO,EAAa,EAAM,MAAM,OAAS,GAAc,CACvD,GAAI,EAAM,UAAU,QAAU,CAC5B,SAAU,EAAM,SAAS,IAAK,IAAqB,CACjD,IAAK,EAAW,KAChB,MAAO,EAAa,EAAW,MAAM,OAAS,GAAc,CAC7D,EAAE,CACJ,CACF,EAAC,CACF,EAAE,CACP,EAAC,CACL,CAEK,GAAA,EAAA,EAAA,cACE,EAAM,OAAS,EAAe,MACtC,CAEM,EAAgB,GAAgB,CACpC,EAAK,SAAU,EAAG,+LAxEf,MAAA,CAvCH,MAAM,8BACL,OAAA,EAAA,EAAA,gBAAK,+BAAE,EAAA,SAAA,4BAAA,KAAA,IAAA,KAAA,MAAA,EAAA,SAAA,EAAA,CAAA,EAAA,CAAA,0BAqCK,EAAA,KAAA,2BA9B8B,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBA6BxB,EAAA,SAAA,MAAA,EAAA,EAAA,YA7BS,EAAA,OAAhB,EAAM,yCA6BC,EAAA,CA5Bd,IAAK,EAAK,CAAA,2BAkBb,CAfU,EAAK,UAAU,SAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAYZ,EAAA,OAXR,QAAS,EAAK,SACd,SAAQ,8BASJ,EAAA,EAAA,EAAA,oBAAA,MAPL,EAOK,CALK,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAGP,EAAA,EAAA,CAAA,OAFE,KAAM,EAAK,KACX,KAAM,EAAA,6FACR,KAAA,EAAA,EAAA,iBACE,EAAK,MAAK,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,qEAcX,OAAA,OATJ,MAAM,qBACL,QAAK,GAAE,EAAa,EAAK,IAAG,GAGrB,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAGP,EAAA,EAAA,CAAA,OAFE,KAAM,EAAK,KACX,KAAM,EAAA,6FACR,KAAA,EAAA,EAAA,iBACE,EAAK,MAAK,CAAA,EAAA,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA"}
|
|
1
|
+
{"version":3,"file":"C_Breadcrumb.js","names":["iconSize","showIcon"],"sources":["../src/components/C_Breadcrumb/index.vue","../src/components/C_Breadcrumb/index.vue"],"sourcesContent":["<!--\n * @Description: 通用面包屑组件 — 基于 NBreadcrumb 的路由面包屑导航\n *\n * 支持两种模式:\n * 1. 自动模式(默认)— 从 `route.matched` 自动生成面包屑\n * 2. 手动模式 — 传入 `items` 完全自定义\n *\n * @example 自动模式(零配置)\n * ```vue\n * <C_Breadcrumb\n * :label-formatter=\"$t\"\n * @select=\"router.push\"\n * />\n * ```\n *\n * @example 手动模式\n * ```vue\n * <C_Breadcrumb\n * :items=\"customBreadcrumbs\"\n * @select=\"handleSelect\"\n * />\n * ```\n *\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n class=\"c-breadcrumb flex-1 min-w-0\"\n :style=\"{\n '--c-breadcrumb-icon-size': `${iconSize}px`,\n '--c-breadcrumb-gap': `${Math.max(Math.round(iconSize / 4), 2)}px`,\n }\"\n >\n <NBreadcrumb>\n <NBreadcrumbItem\n v-for=\"(item, index) in breadcrumbItems\"\n :key=\"index\"\n >\n <NDropdown\n v-if=\"item.children?.length\"\n :options=\"item.children\"\n @select=\"handleSelect\"\n >\n <div class=\"c-breadcrumb__trigger\">\n <C_Icon\n v-if=\"showIcon\"\n :name=\"item.icon\"\n :size=\"iconSize\"\n />\n {{ item.label }}\n </div>\n </NDropdown>\n <span\n v-else\n class=\"c-breadcrumb__link\"\n @click=\"handleSelect(item.key)\"\n >\n <C_Icon\n v-if=\"showIcon\"\n :name=\"item.icon\"\n :size=\"iconSize\"\n />\n {{ item.label }}\n </span>\n </NBreadcrumbItem>\n </NBreadcrumb>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import { useRoute } from 'vue-router'\n import { C_Icon } from '../C_Icon'\n import type { BreadcrumbItem } from '../_shared'\n\n defineOptions({ name: 'C_Breadcrumb' })\n\n const props = withDefaults(\n defineProps<{\n /**\n * 手动传入面包屑数据\n * 不传时自动从 `route.matched` 生成(零配置)\n */\n items?: BreadcrumbItem[]\n /** 是否显示图标 */\n showIcon?: boolean\n /** 图标大小 (px),默认 16 */\n iconSize?: number\n /**\n * 标签文本格式化函数(用于 i18n)\n * 仅在自动模式下生效\n */\n labelFormatter?: (label: string) => string\n }>(),\n {\n showIcon: true,\n iconSize: 16,\n }\n )\n\n const emit = defineEmits<{\n /** 面包屑项被选中(返回路径 key) */\n select: [path: string]\n }>()\n\n const route = useRoute()\n\n const formatLabel = (title: string): string =>\n props.labelFormatter ? props.labelFormatter(title) : title\n\n /** 从 route.matched 自动生成面包屑 */\n const autoBreadcrumb = computed<BreadcrumbItem[]>(() => {\n return route.matched\n .filter((record: any) => record.meta?.title)\n .map((record: any) => ({\n key: record.path,\n label: formatLabel((record.meta.title || '') as string),\n icon: record.meta.icon as string | undefined,\n children: record.children?.length\n ? record.children.map((child: any) => ({\n key: child.path,\n label: formatLabel((child.meta?.title || '') as string),\n ...(child.children?.length && {\n children: child.children.map((grandChild: any) => ({\n key: grandChild.path,\n label: formatLabel((grandChild.meta?.title || '') as string),\n })),\n }),\n }))\n : [],\n }))\n })\n\n const breadcrumbItems = computed<BreadcrumbItem[]>(\n () => props.items ?? autoBreadcrumb.value\n )\n\n const handleSelect = (key: string) => {\n emit('select', key)\n }\n</script>\n\n<style lang=\"scss\">\n .c-breadcrumb {\n // 暴露 CSS 变量,方便主项目覆盖\n --c-breadcrumb-icon-size: 16px;\n --c-breadcrumb-gap: 4px;\n --c-breadcrumb-font-size: inherit;\n\n display: flex;\n align-items: center;\n height: 100%;\n\n &__trigger,\n &__link {\n display: inline-flex;\n align-items: center;\n gap: var(--c-breadcrumb-gap);\n font-size: var(--c-breadcrumb-font-size);\n line-height: 1;\n cursor: pointer;\n }\n\n // 确保 C_Icon 在面包屑中尺寸一致\n .c-icon {\n flex-shrink: 0;\n }\n\n // 修复分隔符 \"/\" 与文本/图标垂直居中对齐\n // 原因:Naive UI 分隔符默认 line-height (~1.4) 导致 \"/\" 基线偏低\n .n-breadcrumb-item {\n display: inline-flex !important;\n align-items: center;\n\n .n-breadcrumb-item__separator {\n display: inline-flex;\n align-items: center;\n line-height: 1;\n margin-top: -4px;\n }\n }\n }\n</style>\n","<!--\n * @Description: 通用面包屑组件 — 基于 NBreadcrumb 的路由面包屑导航\n *\n * 支持两种模式:\n * 1. 自动模式(默认)— 从 `route.matched` 自动生成面包屑\n * 2. 手动模式 — 传入 `items` 完全自定义\n *\n * @example 自动模式(零配置)\n * ```vue\n * <C_Breadcrumb\n * :label-formatter=\"$t\"\n * @select=\"router.push\"\n * />\n * ```\n *\n * @example 手动模式\n * ```vue\n * <C_Breadcrumb\n * :items=\"customBreadcrumbs\"\n * @select=\"handleSelect\"\n * />\n * ```\n *\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n class=\"c-breadcrumb flex-1 min-w-0\"\n :style=\"{\n '--c-breadcrumb-icon-size': `${iconSize}px`,\n '--c-breadcrumb-gap': `${Math.max(Math.round(iconSize / 4), 2)}px`,\n }\"\n >\n <NBreadcrumb>\n <NBreadcrumbItem\n v-for=\"(item, index) in breadcrumbItems\"\n :key=\"index\"\n >\n <NDropdown\n v-if=\"item.children?.length\"\n :options=\"item.children\"\n @select=\"handleSelect\"\n >\n <div class=\"c-breadcrumb__trigger\">\n <C_Icon\n v-if=\"showIcon\"\n :name=\"item.icon\"\n :size=\"iconSize\"\n />\n {{ item.label }}\n </div>\n </NDropdown>\n <span\n v-else\n class=\"c-breadcrumb__link\"\n @click=\"handleSelect(item.key)\"\n >\n <C_Icon\n v-if=\"showIcon\"\n :name=\"item.icon\"\n :size=\"iconSize\"\n />\n {{ item.label }}\n </span>\n </NBreadcrumbItem>\n </NBreadcrumb>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import { useRoute } from 'vue-router'\n import { C_Icon } from '../C_Icon'\n import type { BreadcrumbItem } from '../_shared'\n\n defineOptions({ name: 'C_Breadcrumb' })\n\n const props = withDefaults(\n defineProps<{\n /**\n * 手动传入面包屑数据\n * 不传时自动从 `route.matched` 生成(零配置)\n */\n items?: BreadcrumbItem[]\n /** 是否显示图标 */\n showIcon?: boolean\n /** 图标大小 (px),默认 16 */\n iconSize?: number\n /**\n * 标签文本格式化函数(用于 i18n)\n * 仅在自动模式下生效\n */\n labelFormatter?: (label: string) => string\n }>(),\n {\n showIcon: true,\n iconSize: 16,\n }\n )\n\n const emit = defineEmits<{\n /** 面包屑项被选中(返回路径 key) */\n select: [path: string]\n }>()\n\n const route = useRoute()\n\n const formatLabel = (title: string): string =>\n props.labelFormatter ? props.labelFormatter(title) : title\n\n /** 从 route.matched 自动生成面包屑 */\n const autoBreadcrumb = computed<BreadcrumbItem[]>(() => {\n return route.matched\n .filter((record: any) => record.meta?.title)\n .map((record: any) => ({\n key: record.path,\n label: formatLabel((record.meta.title || '') as string),\n icon: record.meta.icon as string | undefined,\n children: record.children?.length\n ? record.children.map((child: any) => ({\n key: child.path,\n label: formatLabel((child.meta?.title || '') as string),\n ...(child.children?.length && {\n children: child.children.map((grandChild: any) => ({\n key: grandChild.path,\n label: formatLabel((grandChild.meta?.title || '') as string),\n })),\n }),\n }))\n : [],\n }))\n })\n\n const breadcrumbItems = computed<BreadcrumbItem[]>(\n () => props.items ?? autoBreadcrumb.value\n )\n\n const handleSelect = (key: string) => {\n emit('select', key)\n }\n</script>\n\n<style lang=\"scss\">\n .c-breadcrumb {\n // 暴露 CSS 变量,方便主项目覆盖\n --c-breadcrumb-icon-size: 16px;\n --c-breadcrumb-gap: 4px;\n --c-breadcrumb-font-size: inherit;\n\n display: flex;\n align-items: center;\n height: 100%;\n\n &__trigger,\n &__link {\n display: inline-flex;\n align-items: center;\n gap: var(--c-breadcrumb-gap);\n font-size: var(--c-breadcrumb-font-size);\n line-height: 1;\n cursor: pointer;\n }\n\n // 确保 C_Icon 在面包屑中尺寸一致\n .c-icon {\n flex-shrink: 0;\n }\n\n // 修复分隔符 \"/\" 与文本/图标垂直居中对齐\n // 原因:Naive UI 分隔符默认 line-height (~1.4) 导致 \"/\" 基线偏低\n .n-breadcrumb-item {\n display: inline-flex !important;\n align-items: center;\n\n .n-breadcrumb-item__separator {\n display: inline-flex;\n align-items: center;\n line-height: 1;\n margin-top: -4px;\n }\n }\n }\n</style>\n"],"mappings":"yWA6EE,IAAM,EAAQ,EAuBR,EAAO,EAKP,GAAA,EAAA,EAAA,WAAiB,CAEjB,EAAe,GACnB,EAAM,eAAiB,EAAM,eAAe,EAAM,CAAG,EAGjD,GAAA,EAAA,EAAA,cACG,EAAM,QACV,OAAQ,GAAgB,EAAO,MAAM,MAAK,CAC1C,IAAK,IAAiB,CACrB,IAAK,EAAO,KACZ,MAAO,EAAa,EAAO,KAAK,OAAS,GAAc,CACvD,KAAM,EAAO,KAAK,KAClB,SAAU,EAAO,UAAU,OACvB,EAAO,SAAS,IAAK,IAAgB,CACnC,IAAK,EAAM,KACX,MAAO,EAAa,EAAM,MAAM,OAAS,GAAc,CACvD,GAAI,EAAM,UAAU,QAAU,CAC5B,SAAU,EAAM,SAAS,IAAK,IAAqB,CACjD,IAAK,EAAW,KAChB,MAAO,EAAa,EAAW,MAAM,OAAS,GAAA,CAC/C,EAAE,CAAA,CAEN,EAAC,CACF,EAAA,CACL,EAAC,CACL,CAEK,GAAA,EAAA,EAAA,cACE,EAAM,OAAS,EAAe,MACtC,CAEM,EAAgB,GAAgB,CACpC,EAAK,SAAU,EAAG,uHCxEd,MAAA,CAvCJ,MAAM,8BACL,OAAA,EAAA,EAAA,gBAAK,+BAAyCA,EAAAA,SAAQ,4BAAqC,KAAK,IAAI,KAAK,MAAMA,EAAAA,SAAQ,EAAA,CAAA,EAAA,CAAA,0BAqC1G,EAAA,KAAA,2BA9B8B,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBA6BxB,EAAA,SAAA,MAAA,EAAA,EAAA,YA7BQ,EAAA,OAAhB,EAAM,yCA6BE,EAAA,CA5Bf,IAAK,EAAK,CAAA,2BAeC,CAZJ,EAAK,UAAU,SAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAYX,EAAA,OAXT,QAAS,EAAK,SACd,SAAQ,8BASH,EAAA,EAAA,EAAA,oBAAA,MAPN,EAOM,CALIC,EAAAA,WAAAA,EAAAA,EAAAA,YAAAA,EAAAA,EAAAA,EAAAA,cAAAA,EAAAA,EAAAA,OAGN,EAAA,EAAA,CAAA,OAFC,KAAM,EAAK,KACX,KAAMD,EAAAA,6FACP,KAAA,EAAA,EAAA,iBACC,EAAK,MAAK,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,qEAcV,OAAA,OATL,MAAM,qBACL,QAAK,GAAE,EAAa,EAAK,IAAA,GAGlBC,EAAAA,WAAAA,EAAAA,EAAAA,YAAAA,EAAAA,EAAAA,EAAAA,cAAAA,EAAAA,EAAAA,OAGN,EAAA,EAAA,CAAA,OAFC,KAAM,EAAK,KACX,KAAMD,EAAAA,6FACP,KAAA,EAAA,EAAA,iBACC,EAAK,MAAK,CAAA,EAAA,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA"}
|
package/dist/C_Breadcrumb2.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{t as e}from"./C_Icon2.js";import{
|
|
1
|
+
import{t as e}from"./C_Icon2.js";import{NBreadcrumb as t,NBreadcrumbItem as n,NDropdown as r}from"naive-ui";import{Fragment as i,computed as a,createBlock as o,createCommentVNode as s,createElementBlock as c,createElementVNode as l,createTextVNode as u,createVNode as d,defineComponent as f,normalizeStyle as p,openBlock as m,renderList as h,resolveComponent as g,toDisplayString as _,unref as v,withCtx as y}from"vue";import{useRoute as b}from"vue-router";const x={class:`c-breadcrumb__trigger`},S=[`onClick`],C=f({name:`C_Breadcrumb`,__name:`index`,props:{items:{},showIcon:{type:Boolean,default:!0},iconSize:{default:16},labelFormatter:{}},emits:[`select`],setup(f,{emit:g}){let C=f,w=g,T=b(),E=e=>C.labelFormatter?C.labelFormatter(e):e,D=a(()=>T.matched.filter(e=>e.meta?.title).map(e=>({key:e.path,label:E(e.meta.title||``),icon:e.meta.icon,children:e.children?.length?e.children.map(e=>({key:e.path,label:E(e.meta?.title||``),...e.children?.length&&{children:e.children.map(e=>({key:e.path,label:E(e.meta?.title||``)}))}})):[]}))),O=a(()=>C.items??D.value),k=e=>{w(`select`,e)};return(a,f)=>{let g=r,b=n,C=t;return m(),c(`div`,{class:`c-breadcrumb flex-1 min-w-0`,style:p({"--c-breadcrumb-icon-size":`${a.iconSize}px`,"--c-breadcrumb-gap":`${Math.max(Math.round(a.iconSize/4),2)}px`})},[d(C,null,{default:y(()=>[(m(!0),c(i,null,h(O.value,(t,n)=>(m(),o(b,{key:n},{default:y(()=>[t.children?.length?(m(),o(g,{key:0,options:t.children,onSelect:k},{default:y(()=>[l(`div`,x,[a.showIcon?(m(),o(v(e),{key:0,name:t.icon,size:a.iconSize},null,8,[`name`,`size`])):s(`v-if`,!0),u(` `+_(t.label),1)])]),_:2},1032,[`options`])):(m(),c(`span`,{key:1,class:`c-breadcrumb__link`,onClick:e=>k(t.key)},[a.showIcon?(m(),o(v(e),{key:0,name:t.icon,size:a.iconSize},null,8,[`name`,`size`])):s(`v-if`,!0),u(` `+_(t.label),1)],8,S))]),_:2},1024))),128))]),_:1})],4)}}});export{C as t};
|
|
2
2
|
//# sourceMappingURL=C_Breadcrumb2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Breadcrumb2.js","names":[],"sources":["../src/components/C_Breadcrumb/index.vue"],"sourcesContent":["<!--\n * @Description: 通用面包屑组件 — 基于 NBreadcrumb 的路由面包屑导航\n *\n * 支持两种模式:\n * 1. 自动模式(默认)— 从 `route.matched` 自动生成面包屑\n * 2. 手动模式 — 传入 `items` 完全自定义\n *\n * @example 自动模式(零配置)\n * ```vue\n * <C_Breadcrumb\n * :label-formatter=\"$t\"\n * @select=\"router.push\"\n * />\n * ```\n *\n * @example 手动模式\n * ```vue\n * <C_Breadcrumb\n * :items=\"customBreadcrumbs\"\n * @select=\"handleSelect\"\n * />\n * ```\n *\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n class=\"c-breadcrumb flex-1 min-w-0\"\n :style=\"{\n '--c-breadcrumb-icon-size': `${iconSize}px`,\n '--c-breadcrumb-gap': `${Math.max(Math.round(iconSize / 4), 2)}px`,\n }\"\n >\n <NBreadcrumb>\n <NBreadcrumbItem\n v-for=\"(item, index) in breadcrumbItems\"\n :key=\"index\"\n >\n <NDropdown\n v-if=\"item.children?.length\"\n :options=\"item.children\"\n @select=\"handleSelect\"\n >\n <div class=\"c-breadcrumb__trigger\">\n <C_Icon\n v-if=\"showIcon\"\n :name=\"item.icon\"\n :size=\"iconSize\"\n />\n {{ item.label }}\n </div>\n </NDropdown>\n <span\n v-else\n class=\"c-breadcrumb__link\"\n @click=\"handleSelect(item.key)\"\n >\n <C_Icon\n v-if=\"showIcon\"\n :name=\"item.icon\"\n :size=\"iconSize\"\n />\n {{ item.label }}\n </span>\n </NBreadcrumbItem>\n </NBreadcrumb>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import { useRoute } from 'vue-router'\n import { C_Icon } from '../C_Icon'\n import type { BreadcrumbItem } from '../_shared'\n\n defineOptions({ name: 'C_Breadcrumb' })\n\n const props = withDefaults(\n defineProps<{\n /**\n * 手动传入面包屑数据\n * 不传时自动从 `route.matched` 生成(零配置)\n */\n items?: BreadcrumbItem[]\n /** 是否显示图标 */\n showIcon?: boolean\n /** 图标大小 (px),默认 16 */\n iconSize?: number\n /**\n * 标签文本格式化函数(用于 i18n)\n * 仅在自动模式下生效\n */\n labelFormatter?: (label: string) => string\n }>(),\n {\n showIcon: true,\n iconSize: 16,\n }\n )\n\n const emit = defineEmits<{\n /** 面包屑项被选中(返回路径 key) */\n select: [path: string]\n }>()\n\n const route = useRoute()\n\n const formatLabel = (title: string): string =>\n props.labelFormatter ? props.labelFormatter(title) : title\n\n /** 从 route.matched 自动生成面包屑 */\n const autoBreadcrumb = computed<BreadcrumbItem[]>(() => {\n return route.matched\n .filter((record: any) => record.meta?.title)\n .map((record: any) => ({\n key: record.path,\n label: formatLabel((record.meta.title || '') as string),\n icon: record.meta.icon as string | undefined,\n children: record.children?.length\n ? record.children.map((child: any) => ({\n key: child.path,\n label: formatLabel((child.meta?.title || '') as string),\n ...(child.children?.length && {\n children: child.children.map((grandChild: any) => ({\n key: grandChild.path,\n label: formatLabel((grandChild.meta?.title || '') as string),\n })),\n }),\n }))\n : [],\n }))\n })\n\n const breadcrumbItems = computed<BreadcrumbItem[]>(\n () => props.items ?? autoBreadcrumb.value\n )\n\n const handleSelect = (key: string) => {\n emit('select', key)\n }\n</script>\n\n<style lang=\"scss\">\n .c-breadcrumb {\n // 暴露 CSS 变量,方便主项目覆盖\n --c-breadcrumb-icon-size: 16px;\n --c-breadcrumb-gap: 4px;\n --c-breadcrumb-font-size: inherit;\n\n display: flex;\n align-items: center;\n height: 100%;\n\n &__trigger,\n &__link {\n display: inline-flex;\n align-items: center;\n gap: var(--c-breadcrumb-gap);\n font-size: var(--c-breadcrumb-font-size);\n line-height: 1;\n cursor: pointer;\n }\n\n // 确保 C_Icon 在面包屑中尺寸一致\n .c-icon {\n flex-shrink: 0;\n }\n\n // 修复分隔符 \"/\" 与文本/图标垂直居中对齐\n // 原因:Naive UI 分隔符默认 line-height (~1.4) 导致 \"/\" 基线偏低\n .n-breadcrumb-item {\n display: inline-flex !important;\n align-items: center;\n\n .n-breadcrumb-item__separator {\n display: inline-flex;\n align-items: center;\n line-height: 1;\n margin-top: -4px;\n }\n }\n }\n</style>\n"],"mappings":"2lBA6EE,IAAM,EAAQ,EAuBR,EAAO,EAKP,EAAQ,GAAS,CAEjB,EAAe,GACnB,EAAM,eAAiB,EAAM,eAAe,EAAM,CAAG,EAGjD,EAAiB,MACd,EAAM,QACV,OAAQ,GAAgB,EAAO,MAAM,MAAK,CAC1C,IAAK,IAAiB,CACrB,IAAK,EAAO,KACZ,MAAO,EAAa,EAAO,KAAK,OAAS,GAAc,CACvD,KAAM,EAAO,KAAK,KAClB,SAAU,EAAO,UAAU,OACvB,EAAO,SAAS,IAAK,IAAgB,CACnC,IAAK,EAAM,KACX,MAAO,EAAa,EAAM,MAAM,OAAS,GAAc,CACvD,GAAI,EAAM,UAAU,QAAU,CAC5B,SAAU,EAAM,SAAS,IAAK,IAAqB,CACjD,IAAK,EAAW,KAChB,MAAO,EAAa,EAAW,MAAM,OAAS,GAAc,CAC7D,EAAE,CACJ,CACF,EAAC,CACF,EAAE,CACP,EAAC,CACL,CAEK,EAAkB,MAChB,EAAM,OAAS,EAAe,MACtC,CAEM,EAAgB,GAAgB,CACpC,EAAK,SAAU,EAAG,0FAhHpB,EAwCK,MAAA,CAvCH,MAAM,8BACL,MAAK,EAAA,+BAAE,EAAA,SAAA,4BAAA,KAAA,IAAA,KAAA,MAAA,EAAA,SAAA,EAAA,CAAA,EAAA,CAAA,QAKR,EAgCa,EAAA,KAAA,eA9B8B,EAAA,EAAA,GAAA,CADzC,EA8BiB,EAAA,KAAA,EA7BS,EAAA,OAAhB,EAAM,SADhB,EA8BiB,EAAA,CA5Bd,IAAK,EAAK,CAAA,eAkBb,CAfU,EAAK,UAAU,QAAA,GAAA,CADvB,EAaW,EAAA,OAXR,QAAS,EAAK,SACd,SAAQ,kBASJ,CAPL,EAOK,MAPL,EAOK,CALK,EAAA,UAAA,GAAA,CADR,EAIC,EAAA,EAAA,CAAA,OAFE,KAAM,EAAK,KACX,KAAM,EAAA,kDACR,IACD,EAAG,EAAK,MAAK,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,8BAGjB,EAWM,OAAA,OATJ,MAAM,qBACL,QAAK,GAAE,EAAa,EAAK,IAAG,GAGrB,EAAA,UAAA,GAAA,CADR,EAIC,EAAA,EAAA,CAAA,OAFE,KAAM,EAAK,KACX,KAAM,EAAA,kDACR,IACD,EAAG,EAAK,MAAK,CAAA,EAAA,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA"}
|
|
1
|
+
{"version":3,"file":"C_Breadcrumb2.js","names":["iconSize","showIcon"],"sources":["../src/components/C_Breadcrumb/index.vue","../src/components/C_Breadcrumb/index.vue"],"sourcesContent":["<!--\n * @Description: 通用面包屑组件 — 基于 NBreadcrumb 的路由面包屑导航\n *\n * 支持两种模式:\n * 1. 自动模式(默认)— 从 `route.matched` 自动生成面包屑\n * 2. 手动模式 — 传入 `items` 完全自定义\n *\n * @example 自动模式(零配置)\n * ```vue\n * <C_Breadcrumb\n * :label-formatter=\"$t\"\n * @select=\"router.push\"\n * />\n * ```\n *\n * @example 手动模式\n * ```vue\n * <C_Breadcrumb\n * :items=\"customBreadcrumbs\"\n * @select=\"handleSelect\"\n * />\n * ```\n *\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n class=\"c-breadcrumb flex-1 min-w-0\"\n :style=\"{\n '--c-breadcrumb-icon-size': `${iconSize}px`,\n '--c-breadcrumb-gap': `${Math.max(Math.round(iconSize / 4), 2)}px`,\n }\"\n >\n <NBreadcrumb>\n <NBreadcrumbItem\n v-for=\"(item, index) in breadcrumbItems\"\n :key=\"index\"\n >\n <NDropdown\n v-if=\"item.children?.length\"\n :options=\"item.children\"\n @select=\"handleSelect\"\n >\n <div class=\"c-breadcrumb__trigger\">\n <C_Icon\n v-if=\"showIcon\"\n :name=\"item.icon\"\n :size=\"iconSize\"\n />\n {{ item.label }}\n </div>\n </NDropdown>\n <span\n v-else\n class=\"c-breadcrumb__link\"\n @click=\"handleSelect(item.key)\"\n >\n <C_Icon\n v-if=\"showIcon\"\n :name=\"item.icon\"\n :size=\"iconSize\"\n />\n {{ item.label }}\n </span>\n </NBreadcrumbItem>\n </NBreadcrumb>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import { useRoute } from 'vue-router'\n import { C_Icon } from '../C_Icon'\n import type { BreadcrumbItem } from '../_shared'\n\n defineOptions({ name: 'C_Breadcrumb' })\n\n const props = withDefaults(\n defineProps<{\n /**\n * 手动传入面包屑数据\n * 不传时自动从 `route.matched` 生成(零配置)\n */\n items?: BreadcrumbItem[]\n /** 是否显示图标 */\n showIcon?: boolean\n /** 图标大小 (px),默认 16 */\n iconSize?: number\n /**\n * 标签文本格式化函数(用于 i18n)\n * 仅在自动模式下生效\n */\n labelFormatter?: (label: string) => string\n }>(),\n {\n showIcon: true,\n iconSize: 16,\n }\n )\n\n const emit = defineEmits<{\n /** 面包屑项被选中(返回路径 key) */\n select: [path: string]\n }>()\n\n const route = useRoute()\n\n const formatLabel = (title: string): string =>\n props.labelFormatter ? props.labelFormatter(title) : title\n\n /** 从 route.matched 自动生成面包屑 */\n const autoBreadcrumb = computed<BreadcrumbItem[]>(() => {\n return route.matched\n .filter((record: any) => record.meta?.title)\n .map((record: any) => ({\n key: record.path,\n label: formatLabel((record.meta.title || '') as string),\n icon: record.meta.icon as string | undefined,\n children: record.children?.length\n ? record.children.map((child: any) => ({\n key: child.path,\n label: formatLabel((child.meta?.title || '') as string),\n ...(child.children?.length && {\n children: child.children.map((grandChild: any) => ({\n key: grandChild.path,\n label: formatLabel((grandChild.meta?.title || '') as string),\n })),\n }),\n }))\n : [],\n }))\n })\n\n const breadcrumbItems = computed<BreadcrumbItem[]>(\n () => props.items ?? autoBreadcrumb.value\n )\n\n const handleSelect = (key: string) => {\n emit('select', key)\n }\n</script>\n\n<style lang=\"scss\">\n .c-breadcrumb {\n // 暴露 CSS 变量,方便主项目覆盖\n --c-breadcrumb-icon-size: 16px;\n --c-breadcrumb-gap: 4px;\n --c-breadcrumb-font-size: inherit;\n\n display: flex;\n align-items: center;\n height: 100%;\n\n &__trigger,\n &__link {\n display: inline-flex;\n align-items: center;\n gap: var(--c-breadcrumb-gap);\n font-size: var(--c-breadcrumb-font-size);\n line-height: 1;\n cursor: pointer;\n }\n\n // 确保 C_Icon 在面包屑中尺寸一致\n .c-icon {\n flex-shrink: 0;\n }\n\n // 修复分隔符 \"/\" 与文本/图标垂直居中对齐\n // 原因:Naive UI 分隔符默认 line-height (~1.4) 导致 \"/\" 基线偏低\n .n-breadcrumb-item {\n display: inline-flex !important;\n align-items: center;\n\n .n-breadcrumb-item__separator {\n display: inline-flex;\n align-items: center;\n line-height: 1;\n margin-top: -4px;\n }\n }\n }\n</style>\n","<!--\n * @Description: 通用面包屑组件 — 基于 NBreadcrumb 的路由面包屑导航\n *\n * 支持两种模式:\n * 1. 自动模式(默认)— 从 `route.matched` 自动生成面包屑\n * 2. 手动模式 — 传入 `items` 完全自定义\n *\n * @example 自动模式(零配置)\n * ```vue\n * <C_Breadcrumb\n * :label-formatter=\"$t\"\n * @select=\"router.push\"\n * />\n * ```\n *\n * @example 手动模式\n * ```vue\n * <C_Breadcrumb\n * :items=\"customBreadcrumbs\"\n * @select=\"handleSelect\"\n * />\n * ```\n *\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n class=\"c-breadcrumb flex-1 min-w-0\"\n :style=\"{\n '--c-breadcrumb-icon-size': `${iconSize}px`,\n '--c-breadcrumb-gap': `${Math.max(Math.round(iconSize / 4), 2)}px`,\n }\"\n >\n <NBreadcrumb>\n <NBreadcrumbItem\n v-for=\"(item, index) in breadcrumbItems\"\n :key=\"index\"\n >\n <NDropdown\n v-if=\"item.children?.length\"\n :options=\"item.children\"\n @select=\"handleSelect\"\n >\n <div class=\"c-breadcrumb__trigger\">\n <C_Icon\n v-if=\"showIcon\"\n :name=\"item.icon\"\n :size=\"iconSize\"\n />\n {{ item.label }}\n </div>\n </NDropdown>\n <span\n v-else\n class=\"c-breadcrumb__link\"\n @click=\"handleSelect(item.key)\"\n >\n <C_Icon\n v-if=\"showIcon\"\n :name=\"item.icon\"\n :size=\"iconSize\"\n />\n {{ item.label }}\n </span>\n </NBreadcrumbItem>\n </NBreadcrumb>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import { useRoute } from 'vue-router'\n import { C_Icon } from '../C_Icon'\n import type { BreadcrumbItem } from '../_shared'\n\n defineOptions({ name: 'C_Breadcrumb' })\n\n const props = withDefaults(\n defineProps<{\n /**\n * 手动传入面包屑数据\n * 不传时自动从 `route.matched` 生成(零配置)\n */\n items?: BreadcrumbItem[]\n /** 是否显示图标 */\n showIcon?: boolean\n /** 图标大小 (px),默认 16 */\n iconSize?: number\n /**\n * 标签文本格式化函数(用于 i18n)\n * 仅在自动模式下生效\n */\n labelFormatter?: (label: string) => string\n }>(),\n {\n showIcon: true,\n iconSize: 16,\n }\n )\n\n const emit = defineEmits<{\n /** 面包屑项被选中(返回路径 key) */\n select: [path: string]\n }>()\n\n const route = useRoute()\n\n const formatLabel = (title: string): string =>\n props.labelFormatter ? props.labelFormatter(title) : title\n\n /** 从 route.matched 自动生成面包屑 */\n const autoBreadcrumb = computed<BreadcrumbItem[]>(() => {\n return route.matched\n .filter((record: any) => record.meta?.title)\n .map((record: any) => ({\n key: record.path,\n label: formatLabel((record.meta.title || '') as string),\n icon: record.meta.icon as string | undefined,\n children: record.children?.length\n ? record.children.map((child: any) => ({\n key: child.path,\n label: formatLabel((child.meta?.title || '') as string),\n ...(child.children?.length && {\n children: child.children.map((grandChild: any) => ({\n key: grandChild.path,\n label: formatLabel((grandChild.meta?.title || '') as string),\n })),\n }),\n }))\n : [],\n }))\n })\n\n const breadcrumbItems = computed<BreadcrumbItem[]>(\n () => props.items ?? autoBreadcrumb.value\n )\n\n const handleSelect = (key: string) => {\n emit('select', key)\n }\n</script>\n\n<style lang=\"scss\">\n .c-breadcrumb {\n // 暴露 CSS 变量,方便主项目覆盖\n --c-breadcrumb-icon-size: 16px;\n --c-breadcrumb-gap: 4px;\n --c-breadcrumb-font-size: inherit;\n\n display: flex;\n align-items: center;\n height: 100%;\n\n &__trigger,\n &__link {\n display: inline-flex;\n align-items: center;\n gap: var(--c-breadcrumb-gap);\n font-size: var(--c-breadcrumb-font-size);\n line-height: 1;\n cursor: pointer;\n }\n\n // 确保 C_Icon 在面包屑中尺寸一致\n .c-icon {\n flex-shrink: 0;\n }\n\n // 修复分隔符 \"/\" 与文本/图标垂直居中对齐\n // 原因:Naive UI 分隔符默认 line-height (~1.4) 导致 \"/\" 基线偏低\n .n-breadcrumb-item {\n display: inline-flex !important;\n align-items: center;\n\n .n-breadcrumb-item__separator {\n display: inline-flex;\n align-items: center;\n line-height: 1;\n margin-top: -4px;\n }\n }\n }\n</style>\n"],"mappings":"sqBA6EE,IAAM,EAAQ,EAuBR,EAAO,EAKP,EAAQ,GAAS,CAEjB,EAAe,GACnB,EAAM,eAAiB,EAAM,eAAe,EAAM,CAAG,EAGjD,EAAiB,MACd,EAAM,QACV,OAAQ,GAAgB,EAAO,MAAM,MAAK,CAC1C,IAAK,IAAiB,CACrB,IAAK,EAAO,KACZ,MAAO,EAAa,EAAO,KAAK,OAAS,GAAc,CACvD,KAAM,EAAO,KAAK,KAClB,SAAU,EAAO,UAAU,OACvB,EAAO,SAAS,IAAK,IAAgB,CACnC,IAAK,EAAM,KACX,MAAO,EAAa,EAAM,MAAM,OAAS,GAAc,CACvD,GAAI,EAAM,UAAU,QAAU,CAC5B,SAAU,EAAM,SAAS,IAAK,IAAqB,CACjD,IAAK,EAAW,KAChB,MAAO,EAAa,EAAW,MAAM,OAAS,GAAA,CAC/C,EAAE,CAAA,CAEN,EAAC,CACF,EAAA,CACL,EAAC,CACL,CAEK,EAAkB,MAChB,EAAM,OAAS,EAAe,MACtC,CAEM,EAAgB,GAAgB,CACpC,EAAK,SAAU,EAAG,2CChHpB,EAwCM,MAAA,CAvCJ,MAAM,8BACL,MAAK,EAAA,+BAAyCA,EAAAA,SAAQ,4BAAqC,KAAK,IAAI,KAAK,MAAMA,EAAAA,SAAQ,EAAA,CAAA,EAAA,CAAA,QAKxH,EAgCc,EAAA,KAAA,eA9B8B,EAAA,EAAA,GAAA,CAD1C,EA8BkB,EAAA,KAAA,EA7BQ,EAAA,OAAhB,EAAM,SADhB,EA8BkB,EAAA,CA5Bf,IAAK,EAAK,CAAA,eAeC,CAZJ,EAAK,UAAU,QAAA,GAAA,CADvB,EAaY,EAAA,OAXT,QAAS,EAAK,SACd,SAAQ,kBASH,CAPN,EAOM,MAPN,EAOM,CALIC,EAAAA,UAAAA,GAAAA,CADR,EAIE,EAAA,EAAA,CAAA,OAFC,KAAM,EAAK,KACX,KAAMD,EAAAA,kDACP,IACF,EAAG,EAAK,MAAK,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,8BAGjB,EAWO,OAAA,OATL,MAAM,qBACL,QAAK,GAAE,EAAa,EAAK,IAAA,GAGlBC,EAAAA,UAAAA,GAAAA,CADR,EAIE,EAAA,EAAA,CAAA,OAFC,KAAM,EAAK,KACX,KAAMD,EAAAA,kDACP,IACF,EAAG,EAAK,MAAK,CAAA,EAAA,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Captcha-
|
|
1
|
+
{"version":3,"file":"C_Captcha-B3yrtG7t.css","names":[],"sources":["../src/components/C_Captcha/index.vue?vue&type=style&index=0&scoped=a9889f51&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-captcha-modern[data-v-a9889f51] {\n width: 100%;\n font-family: inherit;\n}\n.captcha-trigger[data-v-a9889f51] {\n width: 100%;\n max-width: 280px;\n margin: 0 auto;\n padding: 12px 16px;\n cursor: pointer;\n user-select: none;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.captcha-trigger[data-v-a9889f51]:hover:not(.disabled) {\n transform: translateY(-1px);\n}\n.captcha-trigger.disabled[data-v-a9889f51] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.captcha-content[data-v-a9889f51] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n flex: 1;\n}\n.captcha-icon[data-v-a9889f51] {\n font-size: 18px;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n.captcha-text[data-v-a9889f51] {\n color: rgba(255, 255, 255, 0.8);\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.3px;\n text-align: center;\n white-space: nowrap;\n}\n.refresh-button[data-v-a9889f51] {\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s ease;\n color: rgba(255, 255, 255, 0.6);\n font-size: 14px;\n flex-shrink: 0;\n}\n.refresh-button[data-v-a9889f51]:hover {\n color: rgba(255, 255, 255, 0.9);\n transform: translateY(-50%) rotate(180deg);\n}\n.success-icon[data-v-a9889f51],\n.success-text[data-v-a9889f51] {\n color: #43c23a;\n}\n.error-icon[data-v-a9889f51],\n.error-text[data-v-a9889f51] {\n color: #f56c6c;\n}\n@keyframes shake-a9889f51 {\n0%, 100% {\n transform: translateX(0);\n}\n25% {\n transform: translateX(-4px);\n}\n75% {\n transform: translateX(4px);\n}\n}\n@media (max-width: 768px) {\n.captcha-trigger[data-v-a9889f51] {\n max-width: 240px;\n padding: 10px 14px;\n}\n.captcha-icon[data-v-a9889f51] {\n font-size: 16px;\n width: 18px;\n height: 18px;\n}\n.captcha-text[data-v-a9889f51] {\n font-size: 13px;\n}\n.refresh-button[data-v-a9889f51] {\n width: 24px;\n height: 24px;\n font-size: 12px;\n right: 10px;\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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Captcha-
|
|
1
|
+
{"version":3,"file":"C_Captcha-D4hDdWDu.css","names":[],"sources":["../src/components/C_Captcha/index.vue?vue&type=style&index=0&scoped=a9889f51&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-captcha-modern[data-v-a9889f51] {\n width: 100%;\n font-family: inherit;\n}\n.captcha-trigger[data-v-a9889f51] {\n width: 100%;\n max-width: 280px;\n margin: 0 auto;\n padding: 12px 16px;\n cursor: pointer;\n user-select: none;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.captcha-trigger[data-v-a9889f51]:hover:not(.disabled) {\n transform: translateY(-1px);\n}\n.captcha-trigger.disabled[data-v-a9889f51] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.captcha-content[data-v-a9889f51] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n flex: 1;\n}\n.captcha-icon[data-v-a9889f51] {\n font-size: 18px;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n.captcha-text[data-v-a9889f51] {\n color: rgba(255, 255, 255, 0.8);\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.3px;\n text-align: center;\n white-space: nowrap;\n}\n.refresh-button[data-v-a9889f51] {\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s ease;\n color: rgba(255, 255, 255, 0.6);\n font-size: 14px;\n flex-shrink: 0;\n}\n.refresh-button[data-v-a9889f51]:hover {\n color: rgba(255, 255, 255, 0.9);\n transform: translateY(-50%) rotate(180deg);\n}\n.success-icon[data-v-a9889f51],\n.success-text[data-v-a9889f51] {\n color: #43c23a;\n}\n.error-icon[data-v-a9889f51],\n.error-text[data-v-a9889f51] {\n color: #f56c6c;\n}\n@keyframes shake-a9889f51 {\n0%, 100% {\n transform: translateX(0);\n}\n25% {\n transform: translateX(-4px);\n}\n75% {\n transform: translateX(4px);\n}\n}\n@media (max-width: 768px) {\n.captcha-trigger[data-v-a9889f51] {\n max-width: 240px;\n padding: 10px 14px;\n}\n.captcha-icon[data-v-a9889f51] {\n font-size: 16px;\n width: 18px;\n height: 18px;\n}\n.captcha-text[data-v-a9889f51] {\n font-size: 13px;\n}\n.refresh-button[data-v-a9889f51] {\n width: 24px;\n height: 24px;\n font-size: 12px;\n right: 10px;\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"}
|
package/dist/C_Captcha.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/* unplugin-vue-components disabled */.c-captcha-modern[data-v-
|
|
1
|
+
/* unplugin-vue-components disabled */.c-captcha-modern[data-v-a9889f51] {
|
|
2
2
|
width: 100%;
|
|
3
3
|
font-family: inherit;
|
|
4
4
|
}
|
|
5
|
-
.captcha-trigger[data-v-
|
|
5
|
+
.captcha-trigger[data-v-a9889f51] {
|
|
6
6
|
width: 100%;
|
|
7
7
|
max-width: 280px;
|
|
8
8
|
margin: 0 auto;
|
|
@@ -15,21 +15,21 @@
|
|
|
15
15
|
position: relative;
|
|
16
16
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
17
17
|
}
|
|
18
|
-
.captcha-trigger[data-v-
|
|
18
|
+
.captcha-trigger[data-v-a9889f51]:hover:not(.disabled) {
|
|
19
19
|
transform: translateY(-1px);
|
|
20
20
|
}
|
|
21
|
-
.captcha-trigger.disabled[data-v-
|
|
21
|
+
.captcha-trigger.disabled[data-v-a9889f51] {
|
|
22
22
|
opacity: 0.5;
|
|
23
23
|
cursor: not-allowed;
|
|
24
24
|
}
|
|
25
|
-
.captcha-content[data-v-
|
|
25
|
+
.captcha-content[data-v-a9889f51] {
|
|
26
26
|
display: flex;
|
|
27
27
|
align-items: center;
|
|
28
28
|
justify-content: center;
|
|
29
29
|
gap: 8px;
|
|
30
30
|
flex: 1;
|
|
31
31
|
}
|
|
32
|
-
.captcha-icon[data-v-
|
|
32
|
+
.captcha-icon[data-v-a9889f51] {
|
|
33
33
|
font-size: 18px;
|
|
34
34
|
width: 20px;
|
|
35
35
|
height: 20px;
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
justify-content: center;
|
|
39
39
|
flex-shrink: 0;
|
|
40
40
|
}
|
|
41
|
-
.captcha-text[data-v-
|
|
41
|
+
.captcha-text[data-v-a9889f51] {
|
|
42
42
|
color: rgba(255, 255, 255, 0.8);
|
|
43
43
|
font-size: 14px;
|
|
44
44
|
font-weight: 500;
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
text-align: center;
|
|
47
47
|
white-space: nowrap;
|
|
48
48
|
}
|
|
49
|
-
.refresh-button[data-v-
|
|
49
|
+
.refresh-button[data-v-a9889f51] {
|
|
50
50
|
position: absolute;
|
|
51
51
|
right: 12px;
|
|
52
52
|
top: 50%;
|
|
@@ -62,19 +62,19 @@
|
|
|
62
62
|
font-size: 14px;
|
|
63
63
|
flex-shrink: 0;
|
|
64
64
|
}
|
|
65
|
-
.refresh-button[data-v-
|
|
65
|
+
.refresh-button[data-v-a9889f51]:hover {
|
|
66
66
|
color: rgba(255, 255, 255, 0.9);
|
|
67
67
|
transform: translateY(-50%) rotate(180deg);
|
|
68
68
|
}
|
|
69
|
-
.success-icon[data-v-
|
|
70
|
-
.success-text[data-v-
|
|
69
|
+
.success-icon[data-v-a9889f51],
|
|
70
|
+
.success-text[data-v-a9889f51] {
|
|
71
71
|
color: #43c23a;
|
|
72
72
|
}
|
|
73
|
-
.error-icon[data-v-
|
|
74
|
-
.error-text[data-v-
|
|
73
|
+
.error-icon[data-v-a9889f51],
|
|
74
|
+
.error-text[data-v-a9889f51] {
|
|
75
75
|
color: #f56c6c;
|
|
76
76
|
}
|
|
77
|
-
@keyframes shake-
|
|
77
|
+
@keyframes shake-a9889f51 {
|
|
78
78
|
0%, 100% {
|
|
79
79
|
transform: translateX(0);
|
|
80
80
|
}
|
|
@@ -86,19 +86,19 @@
|
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
@media (max-width: 768px) {
|
|
89
|
-
.captcha-trigger[data-v-
|
|
89
|
+
.captcha-trigger[data-v-a9889f51] {
|
|
90
90
|
max-width: 240px;
|
|
91
91
|
padding: 10px 14px;
|
|
92
92
|
}
|
|
93
|
-
.captcha-icon[data-v-
|
|
93
|
+
.captcha-icon[data-v-a9889f51] {
|
|
94
94
|
font-size: 16px;
|
|
95
95
|
width: 18px;
|
|
96
96
|
height: 18px;
|
|
97
97
|
}
|
|
98
|
-
.captcha-text[data-v-
|
|
98
|
+
.captcha-text[data-v-a9889f51] {
|
|
99
99
|
font-size: 13px;
|
|
100
100
|
}
|
|
101
|
-
.refresh-button[data-v-
|
|
101
|
+
.refresh-button[data-v-a9889f51] {
|
|
102
102
|
width: 24px;
|
|
103
103
|
height: 24px;
|
|
104
104
|
font-size: 12px;
|
|
@@ -106,4 +106,4 @@
|
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
/*# sourceMappingURL=C_Captcha-
|
|
109
|
+
/*# sourceMappingURL=C_Captcha-B3yrtG7t.css.map*/
|
package/dist/C_Captcha.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Captcha.js","names":[],"sources":["../src/components/C_Captcha/index.vue"],"sourcesContent":["<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-07-23\n * @Description: 基于 vue3-puzzle-vcode 封装的验证器组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-captcha-modern\">\n <div\n class=\"captcha-trigger\"\n @click=\"showCaptcha\"\n :class=\"{\n verified: isVerified,\n error: hasError,\n disabled: disabled,\n }\"\n >\n <div class=\"captcha-content\">\n <div class=\"captcha-icon\">\n <span v-if=\"!isVerified && !hasError\">🧩</span>\n <span v-if=\"isVerified\" class=\"success-icon\">✓</span>\n <span v-if=\"hasError\" class=\"error-icon\">⚠️</span>\n </div>\n <div class=\"captcha-text\">\n <span v-if=\"!isVerified && !hasError\">{{ triggerText }}</span>\n <span v-if=\"isVerified\" class=\"success-text\">验证成功</span>\n <span v-if=\"hasError\" class=\"error-text\">验证失败,请重试</span>\n </div>\n </div>\n <div\n v-if=\"isVerified || hasError\"\n class=\"refresh-button\"\n @click.stop=\"resetCaptcha\"\n title=\"重新验证\"\n >\n ⟲\n </div>\n </div>\n <PuzzleVcode\n :show=\"showModal\"\n :imgs=\"captchaImages\"\n @success=\"handleSuccess\"\n @close=\"handleClose\"\n @fail=\"handleFail\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onBeforeUnmount } from \"vue\";\nimport PuzzleVcode from \"vue3-puzzle-vcode\";\n\ndefineOptions({ name: \"C_Captcha\" });\n\ninterface CaptchaProps {\n triggerText?: string;\n images?: string[];\n disabled?: boolean;\n theme?: \"light\" | \"dark\";\n}\n\ninterface CaptchaEmits {\n (e: \"success\", data: { token: string; timestamp: number }): void;\n (e: \"fail\", error: string): void;\n (e: \"change\", valid: boolean): void;\n (e: \"reset\"): void;\n}\n\nconst props = withDefaults(defineProps<CaptchaProps>(), {\n triggerText: \"点击进行人机验证\",\n images: () => [],\n disabled: false,\n theme: \"dark\",\n});\n\nconst emit = defineEmits<CaptchaEmits>();\n\nconst showModal = ref(false);\nconst isVerified = ref(false);\nconst hasError = ref(false);\nconst verificationToken = ref(\"\");\nlet errorTimer: ReturnType<typeof setTimeout> | null = null;\n\nconst captchaImages = computed(() =>\n props.images.length > 0 ? props.images : undefined,\n);\n\nconst showCaptcha = () => {\n if (props.disabled || isVerified.value) return;\n hasError.value = false;\n showModal.value = true;\n};\n\nconst handleSuccess = () => {\n isVerified.value = true;\n hasError.value = false;\n showModal.value = false;\n const timestamp = Date.now();\n const token = `puzzle_${timestamp}_${Math.random().toString(36).substring(2, 9)}`;\n verificationToken.value = token;\n emit(\"success\", { token, timestamp });\n emit(\"change\", true);\n};\n\nconst handleFail = () => {\n isVerified.value = false;\n hasError.value = true;\n showModal.value = false;\n if (errorTimer) clearTimeout(errorTimer);\n errorTimer = setTimeout(() => {\n hasError.value = false;\n errorTimer = null;\n }, 3000);\n emit(\"fail\", \"拼图验证失败\");\n emit(\"change\", false);\n};\n\nconst handleClose = () => {\n showModal.value = false;\n};\n\nconst resetCaptcha = () => {\n isVerified.value = false;\n hasError.value = false;\n showModal.value = false;\n verificationToken.value = \"\";\n if (errorTimer) {\n clearTimeout(errorTimer);\n errorTimer = null;\n }\n emit(\"reset\");\n emit(\"change\", false);\n};\n\ndefineExpose({\n validate: () => isVerified.value,\n getToken: () => verificationToken.value,\n getVerificationData: () => {\n if (!isVerified.value) return null;\n return {\n token: verificationToken.value,\n timestamp: Date.now(),\n type: \"puzzle-captcha\",\n };\n },\n reset: resetCaptcha,\n show: showCaptcha,\n});\n\nonBeforeUnmount(() => {\n if (errorTimer) clearTimeout(errorTimer);\n});\n</script>\n\n<style scoped lang=\"scss\">\n@use \"./index.scss\";\n</style>\n"],"mappings":"inBAqEA,IAAM,EAAQ,EAOR,EAAO,EAEP,GAAA,EAAA,EAAA,KAAgB,GAAM,CACtB,GAAA,EAAA,EAAA,KAAiB,GAAM,CACvB,GAAA,EAAA,EAAA,KAAe,GAAM,CACrB,GAAA,EAAA,EAAA,KAAwB,GAAG,CAC7B,EAAmD,KAEjD,GAAA,EAAA,EAAA,cACJ,EAAM,OAAO,OAAS,EAAI,EAAM,OAAS,IAAA,GAC1C,CAEK,MAAoB,CACpB,EAAM,UAAY,EAAW,QACjC,EAAS,MAAQ,GACjB,EAAU,MAAQ,KAGd,MAAsB,CAC1B,EAAW,MAAQ,GACnB,EAAS,MAAQ,GACjB,EAAU,MAAQ,GAClB,IAAM,EAAY,KAAK,KAAK,CACtB,EAAQ,UAAU,EAAU,GAAG,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,UAAU,EAAG,EAAE,GAC/E,EAAkB,MAAQ,EAC1B,EAAK,UAAW,CAAE,QAAO,YAAW,CAAC,CACrC,EAAK,SAAU,GAAK,EAGhB,MAAmB,CACvB,EAAW,MAAQ,GACnB,EAAS,MAAQ,GACjB,EAAU,MAAQ,GACd,GAAY,aAAa,EAAW,CACxC,EAAa,eAAiB,CAC5B,EAAS,MAAQ,GACjB,EAAa,MACZ,IAAK,CACR,EAAK,OAAQ,SAAS,CACtB,EAAK,SAAU,GAAM,EAGjB,MAAoB,CACxB,EAAU,MAAQ,IAGd,MAAqB,CACzB,EAAW,MAAQ,GACnB,EAAS,MAAQ,GACjB,EAAU,MAAQ,GAClB,EAAkB,MAAQ,GAC1B,AAEE,KADA,aAAa,EAAW,CACX,MAEf,EAAK,QAAQ,CACb,EAAK,SAAU,GAAM,SAGvB,EAAa,CACX,aAAgB,EAAW,MAC3B,aAAgB,EAAkB,MAClC,wBACO,EAAW,MACT,CACL,MAAO,EAAkB,MACzB,UAAW,KAAK,KAAK,CACrB,KAAM,iBACP,CAL6B,KAOhC,MAAO,EACP,KAAM,EACP,CAAC,EAEF,EAAA,EAAA,qBAAsB,CAChB,GAAY,aAAa,EAAW,EACxC,oDA1GK,MAtCL,EAsCK,EAAA,EAAA,EAAA,oBARE,MAAA,CA5BH,OAAA,EAAA,EAAA,gBAAK,CAAC,kBAAgB,UAEd,EAAA,YAAA,EAAA,eAAA,EAAA,YADP,QAAO,6BAkBH,MAXL,EAWK,EAAA,EAAA,EAAA,oBANE,MAJL,EAIK,EAHU,EAAA,OAAU,CAAK,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAAkB,OAAA,EAAR,KAAE,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAC5B,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAAwC,OAApD,EAA6C,IAAC,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAClC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAAqC,OAAjD,EAAyC,KAAE,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,4BAMxC,MAJL,EAIK,EAHU,EAAA,OAAU,CAAK,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAAiC,OAAA,GAAA,EAAA,EAAA,iBAApB,EAAA,YAAW,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CACxC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAA2C,OAAvD,EAA6C,OAAI,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CACrC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAA2C,OAAvD,EAAyC,WAAQ,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,KAI7C,EAAA,OAAc,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAMjB,MAAA,OALH,MAAM,iBACL,SAAA,EAAA,EAAA,eAAY,EAAY,CAAA,OAAA,CAAA,CACzB,MAAM,QACR,MAEA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAAA,CAAA,EAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAQD,EAAA,QAAA,CAAA,CALE,KAAM,EAAA,MACN,KAAM,EAAA,MACN,UAAS,EACT,QAAO,EACP,OAAM"}
|
|
1
|
+
{"version":3,"file":"C_Captcha.js","names":["disabled","triggerText"],"sources":["../src/components/C_Captcha/index.vue","../src/components/C_Captcha/index.vue"],"sourcesContent":["<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-07-23\n * @Description: 基于 vue3-puzzle-vcode 封装的验证器组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-captcha-modern\">\n <div\n class=\"captcha-trigger\"\n @click=\"showCaptcha\"\n :class=\"{\n verified: isVerified,\n error: hasError,\n disabled: disabled,\n }\"\n >\n <div class=\"captcha-content\">\n <div class=\"captcha-icon\">\n <span v-if=\"!isVerified && !hasError\">🧩</span>\n <span v-if=\"isVerified\" class=\"success-icon\">✓</span>\n <span v-if=\"hasError\" class=\"error-icon\">⚠️</span>\n </div>\n <div class=\"captcha-text\">\n <span v-if=\"!isVerified && !hasError\">{{ triggerText }}</span>\n <span v-if=\"isVerified\" class=\"success-text\">验证成功</span>\n <span v-if=\"hasError\" class=\"error-text\">验证失败,请重试</span>\n </div>\n </div>\n <div\n v-if=\"isVerified || hasError\"\n class=\"refresh-button\"\n @click.stop=\"resetCaptcha\"\n title=\"重新验证\"\n >\n ⟲\n </div>\n </div>\n <PuzzleVcode\n :show=\"showModal\"\n :imgs=\"captchaImages\"\n @success=\"handleSuccess\"\n @close=\"handleClose\"\n @fail=\"handleFail\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onBeforeUnmount } from \"vue\";\nimport PuzzleVcode from \"vue3-puzzle-vcode\";\n\ndefineOptions({ name: \"C_Captcha\" });\n\ninterface CaptchaProps {\n triggerText?: string;\n images?: string[];\n disabled?: boolean;\n theme?: \"light\" | \"dark\";\n}\n\ninterface CaptchaEmits {\n (e: \"success\", data: { token: string; timestamp: number }): void;\n (e: \"fail\", error: string): void;\n (e: \"change\", valid: boolean): void;\n (e: \"reset\"): void;\n}\n\nconst props = withDefaults(defineProps<CaptchaProps>(), {\n triggerText: \"点击进行人机验证\",\n images: () => [],\n disabled: false,\n theme: \"dark\",\n});\n\nconst emit = defineEmits<CaptchaEmits>();\n\nconst showModal = ref(false);\nconst isVerified = ref(false);\nconst hasError = ref(false);\nconst verificationToken = ref(\"\");\nlet errorTimer: ReturnType<typeof setTimeout> | null = null;\n\nconst captchaImages = computed(() =>\n props.images.length > 0 ? props.images : undefined,\n);\n\nconst showCaptcha = () => {\n if (props.disabled || isVerified.value) return;\n hasError.value = false;\n showModal.value = true;\n};\n\nconst handleSuccess = () => {\n isVerified.value = true;\n hasError.value = false;\n showModal.value = false;\n const timestamp = Date.now();\n const token = `puzzle_${timestamp}_${Math.random().toString(36).substring(2, 9)}`;\n verificationToken.value = token;\n emit(\"success\", { token, timestamp });\n emit(\"change\", true);\n};\n\nconst handleFail = () => {\n isVerified.value = false;\n hasError.value = true;\n showModal.value = false;\n if (errorTimer) clearTimeout(errorTimer);\n errorTimer = setTimeout(() => {\n hasError.value = false;\n errorTimer = null;\n }, 3000);\n emit(\"fail\", \"拼图验证失败\");\n emit(\"change\", false);\n};\n\nconst handleClose = () => {\n showModal.value = false;\n};\n\nconst resetCaptcha = () => {\n isVerified.value = false;\n hasError.value = false;\n showModal.value = false;\n verificationToken.value = \"\";\n if (errorTimer) {\n clearTimeout(errorTimer);\n errorTimer = null;\n }\n emit(\"reset\");\n emit(\"change\", false);\n};\n\ndefineExpose({\n validate: () => isVerified.value,\n getToken: () => verificationToken.value,\n getVerificationData: () => {\n if (!isVerified.value) return null;\n return {\n token: verificationToken.value,\n timestamp: Date.now(),\n type: \"puzzle-captcha\",\n };\n },\n reset: resetCaptcha,\n show: showCaptcha,\n});\n\nonBeforeUnmount(() => {\n if (errorTimer) clearTimeout(errorTimer);\n});\n</script>\n\n<style scoped lang=\"scss\">\n@use \"./index.scss\";\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-07-23\n * @Description: 基于 vue3-puzzle-vcode 封装的验证器组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-captcha-modern\">\n <div\n class=\"captcha-trigger\"\n @click=\"showCaptcha\"\n :class=\"{\n verified: isVerified,\n error: hasError,\n disabled: disabled,\n }\"\n >\n <div class=\"captcha-content\">\n <div class=\"captcha-icon\">\n <span v-if=\"!isVerified && !hasError\">🧩</span>\n <span v-if=\"isVerified\" class=\"success-icon\">✓</span>\n <span v-if=\"hasError\" class=\"error-icon\">⚠️</span>\n </div>\n <div class=\"captcha-text\">\n <span v-if=\"!isVerified && !hasError\">{{ triggerText }}</span>\n <span v-if=\"isVerified\" class=\"success-text\">验证成功</span>\n <span v-if=\"hasError\" class=\"error-text\">验证失败,请重试</span>\n </div>\n </div>\n <div\n v-if=\"isVerified || hasError\"\n class=\"refresh-button\"\n @click.stop=\"resetCaptcha\"\n title=\"重新验证\"\n >\n ⟲\n </div>\n </div>\n <PuzzleVcode\n :show=\"showModal\"\n :imgs=\"captchaImages\"\n @success=\"handleSuccess\"\n @close=\"handleClose\"\n @fail=\"handleFail\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onBeforeUnmount } from \"vue\";\nimport PuzzleVcode from \"vue3-puzzle-vcode\";\n\ndefineOptions({ name: \"C_Captcha\" });\n\ninterface CaptchaProps {\n triggerText?: string;\n images?: string[];\n disabled?: boolean;\n theme?: \"light\" | \"dark\";\n}\n\ninterface CaptchaEmits {\n (e: \"success\", data: { token: string; timestamp: number }): void;\n (e: \"fail\", error: string): void;\n (e: \"change\", valid: boolean): void;\n (e: \"reset\"): void;\n}\n\nconst props = withDefaults(defineProps<CaptchaProps>(), {\n triggerText: \"点击进行人机验证\",\n images: () => [],\n disabled: false,\n theme: \"dark\",\n});\n\nconst emit = defineEmits<CaptchaEmits>();\n\nconst showModal = ref(false);\nconst isVerified = ref(false);\nconst hasError = ref(false);\nconst verificationToken = ref(\"\");\nlet errorTimer: ReturnType<typeof setTimeout> | null = null;\n\nconst captchaImages = computed(() =>\n props.images.length > 0 ? props.images : undefined,\n);\n\nconst showCaptcha = () => {\n if (props.disabled || isVerified.value) return;\n hasError.value = false;\n showModal.value = true;\n};\n\nconst handleSuccess = () => {\n isVerified.value = true;\n hasError.value = false;\n showModal.value = false;\n const timestamp = Date.now();\n const token = `puzzle_${timestamp}_${Math.random().toString(36).substring(2, 9)}`;\n verificationToken.value = token;\n emit(\"success\", { token, timestamp });\n emit(\"change\", true);\n};\n\nconst handleFail = () => {\n isVerified.value = false;\n hasError.value = true;\n showModal.value = false;\n if (errorTimer) clearTimeout(errorTimer);\n errorTimer = setTimeout(() => {\n hasError.value = false;\n errorTimer = null;\n }, 3000);\n emit(\"fail\", \"拼图验证失败\");\n emit(\"change\", false);\n};\n\nconst handleClose = () => {\n showModal.value = false;\n};\n\nconst resetCaptcha = () => {\n isVerified.value = false;\n hasError.value = false;\n showModal.value = false;\n verificationToken.value = \"\";\n if (errorTimer) {\n clearTimeout(errorTimer);\n errorTimer = null;\n }\n emit(\"reset\");\n emit(\"change\", false);\n};\n\ndefineExpose({\n validate: () => isVerified.value,\n getToken: () => verificationToken.value,\n getVerificationData: () => {\n if (!isVerified.value) return null;\n return {\n token: verificationToken.value,\n timestamp: Date.now(),\n type: \"puzzle-captcha\",\n };\n },\n reset: resetCaptcha,\n show: showCaptcha,\n});\n\nonBeforeUnmount(() => {\n if (errorTimer) clearTimeout(errorTimer);\n});\n</script>\n\n<style scoped lang=\"scss\">\n@use \"./index.scss\";\n</style>\n"],"mappings":"inBAqEA,IAAM,EAAQ,EAOR,EAAO,EAEP,GAAA,EAAA,EAAA,KAAgB,GAAM,CACtB,GAAA,EAAA,EAAA,KAAiB,GAAM,CACvB,GAAA,EAAA,EAAA,KAAe,GAAM,CACrB,GAAA,EAAA,EAAA,KAAwB,GAAG,CAC7B,EAAmD,KAEjD,GAAA,EAAA,EAAA,cACJ,EAAM,OAAO,OAAS,EAAI,EAAM,OAAS,IAAA,GAC1C,CAEK,MAAoB,CACpB,EAAM,UAAY,EAAW,QACjC,EAAS,MAAQ,GACjB,EAAU,MAAQ,KAGd,MAAsB,CAC1B,EAAW,MAAQ,GACnB,EAAS,MAAQ,GACjB,EAAU,MAAQ,GAClB,IAAM,EAAY,KAAK,KAAK,CACtB,EAAQ,UAAU,EAAU,GAAG,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,UAAU,EAAG,EAAE,GAC/E,EAAkB,MAAQ,EAC1B,EAAK,UAAW,CAAE,QAAO,YAAW,CAAC,CACrC,EAAK,SAAU,GAAK,EAGhB,MAAmB,CACvB,EAAW,MAAQ,GACnB,EAAS,MAAQ,GACjB,EAAU,MAAQ,GACd,GAAY,aAAa,EAAW,CACxC,EAAa,eAAiB,CAC5B,EAAS,MAAQ,GACjB,EAAa,MACZ,IAAK,CACR,EAAK,OAAQ,SAAS,CACtB,EAAK,SAAU,GAAM,EAGjB,MAAoB,CACxB,EAAU,MAAQ,IAGd,MAAqB,CACzB,EAAW,MAAQ,GACnB,EAAS,MAAQ,GACjB,EAAU,MAAQ,GAClB,EAAkB,MAAQ,GAC1B,AAEE,KADA,aAAa,EAAW,CACX,MAEf,EAAK,QAAQ,CACb,EAAK,SAAU,GAAM,SAGvB,EAAa,CACX,aAAgB,EAAW,MAC3B,aAAgB,EAAkB,MAClC,wBACO,EAAW,MACT,CACL,MAAO,EAAkB,MACzB,UAAW,KAAK,KAAK,CACrB,KAAM,iBACP,CAL6B,KAOhC,MAAO,EACP,KAAM,EACP,CAAC,EAEF,EAAA,EAAA,qBAAsB,CAChB,GAAY,aAAa,EAAW,EACxC,oDC1GM,MAtCN,EAsCM,EAAA,EAAA,EAAA,oBARE,MAAA,CA5BJ,OAAA,EAAA,EAAA,gBAAK,CAAC,kBAAiB,UAEK,EAAA,YAA2B,EAAA,eAA4BA,EAAAA,YADlF,QAAO,6BAkBF,MAXN,EAWM,EAAA,EAAA,EAAA,oBANE,MAJN,EAIM,EAHS,EAAA,OAAU,CAAK,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAAmB,OAAA,EAAT,KAAE,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAC5B,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAAyC,OAArD,EAA6C,IAAC,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAClC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAAsC,OAAlD,EAAyC,KAAE,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,4BAMvC,MAJN,EAIM,EAHS,EAAA,OAAU,CAAK,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAAkC,OAAA,GAAA,EAAA,EAAA,iBAArBC,EAAAA,YAAW,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CACxC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAA4C,OAAxD,EAA6C,OAAI,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CACrC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAA4C,OAAxD,EAAyC,WAAQ,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,KAI7C,EAAA,OAAc,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAMhB,MAAA,OALJ,MAAM,iBACL,SAAA,EAAA,EAAA,eAAY,EAAY,CAAA,OAAA,CAAA,CACzB,MAAM,QACP,MAED,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAAA,CAAA,EAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAQA,EAAA,QAAA,CAAA,CALC,KAAM,EAAA,MACN,KAAM,EAAA,MACN,UAAS,EACT,QAAO,EACP,OAAM"}
|
package/dist/C_Captcha2.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{t as e}from"./export-helper.js";import{computed as t,createCommentVNode as n,createElementBlock as r,createElementVNode as i,createVNode as a,defineComponent as o,normalizeClass as s,onBeforeUnmount as c,openBlock as l,ref as u,toDisplayString as d,unref as f,withModifiers as p}from"vue";import m from"vue3-puzzle-vcode";const h={class:`c-captcha-modern`},g={class:`captcha-content`},_={class:`captcha-icon`},v={key:0},y={key:1,class:`success-icon`},b={key:2,class:`error-icon`},x={class:`captcha-text`},S={key:0},C={key:1,class:`success-text`},w={key:2,class:`error-text`};var T=e(o({name:`C_Captcha`,__name:`index`,props:{triggerText:{default:`点击进行人机验证`},images:{default:()=>[]},disabled:{type:Boolean,default:!1},theme:{default:`dark`}},emits:[`success`,`fail`,`change`,`reset`],setup(e,{expose:o,emit:T}){let E=e,D=T,O=u(!1),k=u(!1),A=u(!1),j=u(``),M=null,N=t(()=>E.images.length>0?E.images:void 0),P=()=>{E.disabled||k.value||(A.value=!1,O.value=!0)},F=()=>{k.value=!0,A.value=!1,O.value=!1;let e=Date.now(),t=`puzzle_${e}_${Math.random().toString(36).substring(2,9)}`;j.value=t,D(`success`,{token:t,timestamp:e}),D(`change`,!0)},I=()=>{k.value=!1,A.value=!0,O.value=!1,M&&clearTimeout(M),M=setTimeout(()=>{A.value=!1,M=null},3e3),D(`fail`,`拼图验证失败`),D(`change`,!1)},L=()=>{O.value=!1},R=()=>{k.value=!1,A.value=!1,O.value=!1,j.value=``,M&&=(clearTimeout(M),null),D(`reset`),D(`change`,!1)};return o({validate:()=>k.value,getToken:()=>j.value,getVerificationData:()=>k.value?{token:j.value,timestamp:Date.now(),type:`puzzle-captcha`}:null,reset:R,show:P}),c(()=>{M&&clearTimeout(M)}),(e,t)=>(l(),r(`div`,h,[i(`div`,{class:s([`captcha-trigger`,{verified:k.value,error:A.value,disabled:e.disabled}]),onClick:P},[i(`div`,g,[i(`div`,_,[!k.value&&!A.value?(l(),r(`span`,v,`🧩`)):n(`v-if`,!0),k.value?(l(),r(`span`,y,`✓`)):n(`v-if`,!0),A.value?(l(),r(`span`,b,`⚠️`)):n(`v-if`,!0)]),i(`div`,x,[!k.value&&!A.value?(l(),r(`span`,S,d(e.triggerText),1)):n(`v-if`,!0),k.value?(l(),r(`span`,C,`验证成功`)):n(`v-if`,!0),A.value?(l(),r(`span`,w,`验证失败,请重试`)):n(`v-if`,!0)])]),k.value||A.value?(l(),r(`div`,{key:0,class:`refresh-button`,onClick:p(R,[`stop`]),title:`重新验证`},` ⟲ `)):n(`v-if`,!0)],2),a(f(m),{show:O.value,imgs:N.value,onSuccess:F,onClose:L,onFail:I},null,8,[`show`,`imgs`])]))}}),[[`__scopeId`,`data-v-
|
|
1
|
+
import{t as e}from"./export-helper.js";import{computed as t,createCommentVNode as n,createElementBlock as r,createElementVNode as i,createVNode as a,defineComponent as o,normalizeClass as s,onBeforeUnmount as c,openBlock as l,ref as u,toDisplayString as d,unref as f,withModifiers as p}from"vue";import m from"vue3-puzzle-vcode";const h={class:`c-captcha-modern`},g={class:`captcha-content`},_={class:`captcha-icon`},v={key:0},y={key:1,class:`success-icon`},b={key:2,class:`error-icon`},x={class:`captcha-text`},S={key:0},C={key:1,class:`success-text`},w={key:2,class:`error-text`};var T=e(o({name:`C_Captcha`,__name:`index`,props:{triggerText:{default:`点击进行人机验证`},images:{default:()=>[]},disabled:{type:Boolean,default:!1},theme:{default:`dark`}},emits:[`success`,`fail`,`change`,`reset`],setup(e,{expose:o,emit:T}){let E=e,D=T,O=u(!1),k=u(!1),A=u(!1),j=u(``),M=null,N=t(()=>E.images.length>0?E.images:void 0),P=()=>{E.disabled||k.value||(A.value=!1,O.value=!0)},F=()=>{k.value=!0,A.value=!1,O.value=!1;let e=Date.now(),t=`puzzle_${e}_${Math.random().toString(36).substring(2,9)}`;j.value=t,D(`success`,{token:t,timestamp:e}),D(`change`,!0)},I=()=>{k.value=!1,A.value=!0,O.value=!1,M&&clearTimeout(M),M=setTimeout(()=>{A.value=!1,M=null},3e3),D(`fail`,`拼图验证失败`),D(`change`,!1)},L=()=>{O.value=!1},R=()=>{k.value=!1,A.value=!1,O.value=!1,j.value=``,M&&=(clearTimeout(M),null),D(`reset`),D(`change`,!1)};return o({validate:()=>k.value,getToken:()=>j.value,getVerificationData:()=>k.value?{token:j.value,timestamp:Date.now(),type:`puzzle-captcha`}:null,reset:R,show:P}),c(()=>{M&&clearTimeout(M)}),(e,t)=>(l(),r(`div`,h,[i(`div`,{class:s([`captcha-trigger`,{verified:k.value,error:A.value,disabled:e.disabled}]),onClick:P},[i(`div`,g,[i(`div`,_,[!k.value&&!A.value?(l(),r(`span`,v,`🧩`)):n(`v-if`,!0),k.value?(l(),r(`span`,y,`✓`)):n(`v-if`,!0),A.value?(l(),r(`span`,b,`⚠️`)):n(`v-if`,!0)]),i(`div`,x,[!k.value&&!A.value?(l(),r(`span`,S,d(e.triggerText),1)):n(`v-if`,!0),k.value?(l(),r(`span`,C,`验证成功`)):n(`v-if`,!0),A.value?(l(),r(`span`,w,`验证失败,请重试`)):n(`v-if`,!0)])]),k.value||A.value?(l(),r(`div`,{key:0,class:`refresh-button`,onClick:p(R,[`stop`]),title:`重新验证`},` ⟲ `)):n(`v-if`,!0)],2),a(f(m),{show:O.value,imgs:N.value,onSuccess:F,onClose:L,onFail:I},null,8,[`show`,`imgs`])]))}}),[[`__scopeId`,`data-v-a9889f51`]]);export{T as t};
|
|
2
2
|
//# sourceMappingURL=C_Captcha2.js.map
|
package/dist/C_Captcha2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Captcha2.js","names":[],"sources":["../src/components/C_Captcha/index.vue"],"sourcesContent":["<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-07-23\n * @Description: 基于 vue3-puzzle-vcode 封装的验证器组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-captcha-modern\">\n <div\n class=\"captcha-trigger\"\n @click=\"showCaptcha\"\n :class=\"{\n verified: isVerified,\n error: hasError,\n disabled: disabled,\n }\"\n >\n <div class=\"captcha-content\">\n <div class=\"captcha-icon\">\n <span v-if=\"!isVerified && !hasError\">🧩</span>\n <span v-if=\"isVerified\" class=\"success-icon\">✓</span>\n <span v-if=\"hasError\" class=\"error-icon\">⚠️</span>\n </div>\n <div class=\"captcha-text\">\n <span v-if=\"!isVerified && !hasError\">{{ triggerText }}</span>\n <span v-if=\"isVerified\" class=\"success-text\">验证成功</span>\n <span v-if=\"hasError\" class=\"error-text\">验证失败,请重试</span>\n </div>\n </div>\n <div\n v-if=\"isVerified || hasError\"\n class=\"refresh-button\"\n @click.stop=\"resetCaptcha\"\n title=\"重新验证\"\n >\n ⟲\n </div>\n </div>\n <PuzzleVcode\n :show=\"showModal\"\n :imgs=\"captchaImages\"\n @success=\"handleSuccess\"\n @close=\"handleClose\"\n @fail=\"handleFail\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onBeforeUnmount } from \"vue\";\nimport PuzzleVcode from \"vue3-puzzle-vcode\";\n\ndefineOptions({ name: \"C_Captcha\" });\n\ninterface CaptchaProps {\n triggerText?: string;\n images?: string[];\n disabled?: boolean;\n theme?: \"light\" | \"dark\";\n}\n\ninterface CaptchaEmits {\n (e: \"success\", data: { token: string; timestamp: number }): void;\n (e: \"fail\", error: string): void;\n (e: \"change\", valid: boolean): void;\n (e: \"reset\"): void;\n}\n\nconst props = withDefaults(defineProps<CaptchaProps>(), {\n triggerText: \"点击进行人机验证\",\n images: () => [],\n disabled: false,\n theme: \"dark\",\n});\n\nconst emit = defineEmits<CaptchaEmits>();\n\nconst showModal = ref(false);\nconst isVerified = ref(false);\nconst hasError = ref(false);\nconst verificationToken = ref(\"\");\nlet errorTimer: ReturnType<typeof setTimeout> | null = null;\n\nconst captchaImages = computed(() =>\n props.images.length > 0 ? props.images : undefined,\n);\n\nconst showCaptcha = () => {\n if (props.disabled || isVerified.value) return;\n hasError.value = false;\n showModal.value = true;\n};\n\nconst handleSuccess = () => {\n isVerified.value = true;\n hasError.value = false;\n showModal.value = false;\n const timestamp = Date.now();\n const token = `puzzle_${timestamp}_${Math.random().toString(36).substring(2, 9)}`;\n verificationToken.value = token;\n emit(\"success\", { token, timestamp });\n emit(\"change\", true);\n};\n\nconst handleFail = () => {\n isVerified.value = false;\n hasError.value = true;\n showModal.value = false;\n if (errorTimer) clearTimeout(errorTimer);\n errorTimer = setTimeout(() => {\n hasError.value = false;\n errorTimer = null;\n }, 3000);\n emit(\"fail\", \"拼图验证失败\");\n emit(\"change\", false);\n};\n\nconst handleClose = () => {\n showModal.value = false;\n};\n\nconst resetCaptcha = () => {\n isVerified.value = false;\n hasError.value = false;\n showModal.value = false;\n verificationToken.value = \"\";\n if (errorTimer) {\n clearTimeout(errorTimer);\n errorTimer = null;\n }\n emit(\"reset\");\n emit(\"change\", false);\n};\n\ndefineExpose({\n validate: () => isVerified.value,\n getToken: () => verificationToken.value,\n getVerificationData: () => {\n if (!isVerified.value) return null;\n return {\n token: verificationToken.value,\n timestamp: Date.now(),\n type: \"puzzle-captcha\",\n };\n },\n reset: resetCaptcha,\n show: showCaptcha,\n});\n\nonBeforeUnmount(() => {\n if (errorTimer) clearTimeout(errorTimer);\n});\n</script>\n\n<style scoped lang=\"scss\">\n@use \"./index.scss\";\n</style>\n"],"mappings":"izBAqEA,IAAM,EAAQ,EAOR,EAAO,EAEP,EAAY,EAAI,GAAM,CACtB,EAAa,EAAI,GAAM,CACvB,EAAW,EAAI,GAAM,CACrB,EAAoB,EAAI,GAAG,CAC7B,EAAmD,KAEjD,EAAgB,MACpB,EAAM,OAAO,OAAS,EAAI,EAAM,OAAS,IAAA,GAC1C,CAEK,MAAoB,CACpB,EAAM,UAAY,EAAW,QACjC,EAAS,MAAQ,GACjB,EAAU,MAAQ,KAGd,MAAsB,CAC1B,EAAW,MAAQ,GACnB,EAAS,MAAQ,GACjB,EAAU,MAAQ,GAClB,IAAM,EAAY,KAAK,KAAK,CACtB,EAAQ,UAAU,EAAU,GAAG,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,UAAU,EAAG,EAAE,GAC/E,EAAkB,MAAQ,EAC1B,EAAK,UAAW,CAAE,QAAO,YAAW,CAAC,CACrC,EAAK,SAAU,GAAK,EAGhB,MAAmB,CACvB,EAAW,MAAQ,GACnB,EAAS,MAAQ,GACjB,EAAU,MAAQ,GACd,GAAY,aAAa,EAAW,CACxC,EAAa,eAAiB,CAC5B,EAAS,MAAQ,GACjB,EAAa,MACZ,IAAK,CACR,EAAK,OAAQ,SAAS,CACtB,EAAK,SAAU,GAAM,EAGjB,MAAoB,CACxB,EAAU,MAAQ,IAGd,MAAqB,CACzB,EAAW,MAAQ,GACnB,EAAS,MAAQ,GACjB,EAAU,MAAQ,GAClB,EAAkB,MAAQ,GAC1B,AAEE,KADA,aAAa,EAAW,CACX,MAEf,EAAK,QAAQ,CACb,EAAK,SAAU,GAAM,SAGvB,EAAa,CACX,aAAgB,EAAW,MAC3B,aAAgB,EAAkB,MAClC,wBACO,EAAW,MACT,CACL,MAAO,EAAkB,MACzB,UAAW,KAAK,KAAK,CACrB,KAAM,iBACP,CAL6B,KAOhC,MAAO,EACP,KAAM,EACP,CAAC,CAEF,MAAsB,CAChB,GAAY,aAAa,EAAW,EACxC,aAhJA,EAsCK,MAtCL,EAsCK,CArCH,EA6BK,MAAA,CA5BH,MAAK,EAAA,CAAC,kBAAgB,UAEd,EAAA,YAAA,EAAA,eAAA,EAAA,YADP,QAAO,IAOR,EAWK,MAXL,EAWK,CAVH,EAIK,MAJL,EAIK,EAHU,EAAA,OAAU,CAAK,EAAA,OAAA,GAAA,CAA5B,EAA8C,OAAA,EAAR,KAAE,EAAA,EAAA,OAAA,GAAA,CAC5B,EAAA,OAAA,GAAA,CAAZ,EAAoD,OAApD,EAA6C,IAAC,EAAA,EAAA,OAAA,GAAA,CAClC,EAAA,OAAA,GAAA,CAAZ,EAAiD,OAAjD,EAAyC,KAAE,EAAA,EAAA,OAAA,GAAA,GAE7C,EAIK,MAJL,EAIK,EAHU,EAAA,OAAU,CAAK,EAAA,OAAA,GAAA,CAA5B,EAA6D,OAAA,EAAA,EAApB,EAAA,YAAW,CAAA,EAAA,EAAA,EAAA,OAAA,GAAA,CACxC,EAAA,OAAA,GAAA,CAAZ,EAAuD,OAAvD,EAA6C,OAAI,EAAA,EAAA,OAAA,GAAA,CACrC,EAAA,OAAA,GAAA,CAAZ,EAAuD,OAAvD,EAAyC,WAAQ,EAAA,EAAA,OAAA,GAAA,KAI7C,EAAA,OAAc,EAAA,OAAA,GAAA,CADtB,EAOK,MAAA,OALH,MAAM,iBACL,QAAK,EAAO,EAAY,CAAA,OAAA,CAAA,CACzB,MAAM,QACR,MAEA,EAAA,EAAA,OAAA,GAAA,CAAA,CAAA,EAAA,CAEF,EAMC,EAAA,EAAA,CAAA,CALE,KAAM,EAAA,MACN,KAAM,EAAA,MACN,UAAS,EACT,QAAO,EACP,OAAM"}
|
|
1
|
+
{"version":3,"file":"C_Captcha2.js","names":["disabled","triggerText"],"sources":["../src/components/C_Captcha/index.vue","../src/components/C_Captcha/index.vue"],"sourcesContent":["<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-07-23\n * @Description: 基于 vue3-puzzle-vcode 封装的验证器组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-captcha-modern\">\n <div\n class=\"captcha-trigger\"\n @click=\"showCaptcha\"\n :class=\"{\n verified: isVerified,\n error: hasError,\n disabled: disabled,\n }\"\n >\n <div class=\"captcha-content\">\n <div class=\"captcha-icon\">\n <span v-if=\"!isVerified && !hasError\">🧩</span>\n <span v-if=\"isVerified\" class=\"success-icon\">✓</span>\n <span v-if=\"hasError\" class=\"error-icon\">⚠️</span>\n </div>\n <div class=\"captcha-text\">\n <span v-if=\"!isVerified && !hasError\">{{ triggerText }}</span>\n <span v-if=\"isVerified\" class=\"success-text\">验证成功</span>\n <span v-if=\"hasError\" class=\"error-text\">验证失败,请重试</span>\n </div>\n </div>\n <div\n v-if=\"isVerified || hasError\"\n class=\"refresh-button\"\n @click.stop=\"resetCaptcha\"\n title=\"重新验证\"\n >\n ⟲\n </div>\n </div>\n <PuzzleVcode\n :show=\"showModal\"\n :imgs=\"captchaImages\"\n @success=\"handleSuccess\"\n @close=\"handleClose\"\n @fail=\"handleFail\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onBeforeUnmount } from \"vue\";\nimport PuzzleVcode from \"vue3-puzzle-vcode\";\n\ndefineOptions({ name: \"C_Captcha\" });\n\ninterface CaptchaProps {\n triggerText?: string;\n images?: string[];\n disabled?: boolean;\n theme?: \"light\" | \"dark\";\n}\n\ninterface CaptchaEmits {\n (e: \"success\", data: { token: string; timestamp: number }): void;\n (e: \"fail\", error: string): void;\n (e: \"change\", valid: boolean): void;\n (e: \"reset\"): void;\n}\n\nconst props = withDefaults(defineProps<CaptchaProps>(), {\n triggerText: \"点击进行人机验证\",\n images: () => [],\n disabled: false,\n theme: \"dark\",\n});\n\nconst emit = defineEmits<CaptchaEmits>();\n\nconst showModal = ref(false);\nconst isVerified = ref(false);\nconst hasError = ref(false);\nconst verificationToken = ref(\"\");\nlet errorTimer: ReturnType<typeof setTimeout> | null = null;\n\nconst captchaImages = computed(() =>\n props.images.length > 0 ? props.images : undefined,\n);\n\nconst showCaptcha = () => {\n if (props.disabled || isVerified.value) return;\n hasError.value = false;\n showModal.value = true;\n};\n\nconst handleSuccess = () => {\n isVerified.value = true;\n hasError.value = false;\n showModal.value = false;\n const timestamp = Date.now();\n const token = `puzzle_${timestamp}_${Math.random().toString(36).substring(2, 9)}`;\n verificationToken.value = token;\n emit(\"success\", { token, timestamp });\n emit(\"change\", true);\n};\n\nconst handleFail = () => {\n isVerified.value = false;\n hasError.value = true;\n showModal.value = false;\n if (errorTimer) clearTimeout(errorTimer);\n errorTimer = setTimeout(() => {\n hasError.value = false;\n errorTimer = null;\n }, 3000);\n emit(\"fail\", \"拼图验证失败\");\n emit(\"change\", false);\n};\n\nconst handleClose = () => {\n showModal.value = false;\n};\n\nconst resetCaptcha = () => {\n isVerified.value = false;\n hasError.value = false;\n showModal.value = false;\n verificationToken.value = \"\";\n if (errorTimer) {\n clearTimeout(errorTimer);\n errorTimer = null;\n }\n emit(\"reset\");\n emit(\"change\", false);\n};\n\ndefineExpose({\n validate: () => isVerified.value,\n getToken: () => verificationToken.value,\n getVerificationData: () => {\n if (!isVerified.value) return null;\n return {\n token: verificationToken.value,\n timestamp: Date.now(),\n type: \"puzzle-captcha\",\n };\n },\n reset: resetCaptcha,\n show: showCaptcha,\n});\n\nonBeforeUnmount(() => {\n if (errorTimer) clearTimeout(errorTimer);\n});\n</script>\n\n<style scoped lang=\"scss\">\n@use \"./index.scss\";\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-07-23\n * @Description: 基于 vue3-puzzle-vcode 封装的验证器组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-captcha-modern\">\n <div\n class=\"captcha-trigger\"\n @click=\"showCaptcha\"\n :class=\"{\n verified: isVerified,\n error: hasError,\n disabled: disabled,\n }\"\n >\n <div class=\"captcha-content\">\n <div class=\"captcha-icon\">\n <span v-if=\"!isVerified && !hasError\">🧩</span>\n <span v-if=\"isVerified\" class=\"success-icon\">✓</span>\n <span v-if=\"hasError\" class=\"error-icon\">⚠️</span>\n </div>\n <div class=\"captcha-text\">\n <span v-if=\"!isVerified && !hasError\">{{ triggerText }}</span>\n <span v-if=\"isVerified\" class=\"success-text\">验证成功</span>\n <span v-if=\"hasError\" class=\"error-text\">验证失败,请重试</span>\n </div>\n </div>\n <div\n v-if=\"isVerified || hasError\"\n class=\"refresh-button\"\n @click.stop=\"resetCaptcha\"\n title=\"重新验证\"\n >\n ⟲\n </div>\n </div>\n <PuzzleVcode\n :show=\"showModal\"\n :imgs=\"captchaImages\"\n @success=\"handleSuccess\"\n @close=\"handleClose\"\n @fail=\"handleFail\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onBeforeUnmount } from \"vue\";\nimport PuzzleVcode from \"vue3-puzzle-vcode\";\n\ndefineOptions({ name: \"C_Captcha\" });\n\ninterface CaptchaProps {\n triggerText?: string;\n images?: string[];\n disabled?: boolean;\n theme?: \"light\" | \"dark\";\n}\n\ninterface CaptchaEmits {\n (e: \"success\", data: { token: string; timestamp: number }): void;\n (e: \"fail\", error: string): void;\n (e: \"change\", valid: boolean): void;\n (e: \"reset\"): void;\n}\n\nconst props = withDefaults(defineProps<CaptchaProps>(), {\n triggerText: \"点击进行人机验证\",\n images: () => [],\n disabled: false,\n theme: \"dark\",\n});\n\nconst emit = defineEmits<CaptchaEmits>();\n\nconst showModal = ref(false);\nconst isVerified = ref(false);\nconst hasError = ref(false);\nconst verificationToken = ref(\"\");\nlet errorTimer: ReturnType<typeof setTimeout> | null = null;\n\nconst captchaImages = computed(() =>\n props.images.length > 0 ? props.images : undefined,\n);\n\nconst showCaptcha = () => {\n if (props.disabled || isVerified.value) return;\n hasError.value = false;\n showModal.value = true;\n};\n\nconst handleSuccess = () => {\n isVerified.value = true;\n hasError.value = false;\n showModal.value = false;\n const timestamp = Date.now();\n const token = `puzzle_${timestamp}_${Math.random().toString(36).substring(2, 9)}`;\n verificationToken.value = token;\n emit(\"success\", { token, timestamp });\n emit(\"change\", true);\n};\n\nconst handleFail = () => {\n isVerified.value = false;\n hasError.value = true;\n showModal.value = false;\n if (errorTimer) clearTimeout(errorTimer);\n errorTimer = setTimeout(() => {\n hasError.value = false;\n errorTimer = null;\n }, 3000);\n emit(\"fail\", \"拼图验证失败\");\n emit(\"change\", false);\n};\n\nconst handleClose = () => {\n showModal.value = false;\n};\n\nconst resetCaptcha = () => {\n isVerified.value = false;\n hasError.value = false;\n showModal.value = false;\n verificationToken.value = \"\";\n if (errorTimer) {\n clearTimeout(errorTimer);\n errorTimer = null;\n }\n emit(\"reset\");\n emit(\"change\", false);\n};\n\ndefineExpose({\n validate: () => isVerified.value,\n getToken: () => verificationToken.value,\n getVerificationData: () => {\n if (!isVerified.value) return null;\n return {\n token: verificationToken.value,\n timestamp: Date.now(),\n type: \"puzzle-captcha\",\n };\n },\n reset: resetCaptcha,\n show: showCaptcha,\n});\n\nonBeforeUnmount(() => {\n if (errorTimer) clearTimeout(errorTimer);\n});\n</script>\n\n<style scoped lang=\"scss\">\n@use \"./index.scss\";\n</style>\n"],"mappings":"izBAqEA,IAAM,EAAQ,EAOR,EAAO,EAEP,EAAY,EAAI,GAAM,CACtB,EAAa,EAAI,GAAM,CACvB,EAAW,EAAI,GAAM,CACrB,EAAoB,EAAI,GAAG,CAC7B,EAAmD,KAEjD,EAAgB,MACpB,EAAM,OAAO,OAAS,EAAI,EAAM,OAAS,IAAA,GAC1C,CAEK,MAAoB,CACpB,EAAM,UAAY,EAAW,QACjC,EAAS,MAAQ,GACjB,EAAU,MAAQ,KAGd,MAAsB,CAC1B,EAAW,MAAQ,GACnB,EAAS,MAAQ,GACjB,EAAU,MAAQ,GAClB,IAAM,EAAY,KAAK,KAAK,CACtB,EAAQ,UAAU,EAAU,GAAG,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,UAAU,EAAG,EAAE,GAC/E,EAAkB,MAAQ,EAC1B,EAAK,UAAW,CAAE,QAAO,YAAW,CAAC,CACrC,EAAK,SAAU,GAAK,EAGhB,MAAmB,CACvB,EAAW,MAAQ,GACnB,EAAS,MAAQ,GACjB,EAAU,MAAQ,GACd,GAAY,aAAa,EAAW,CACxC,EAAa,eAAiB,CAC5B,EAAS,MAAQ,GACjB,EAAa,MACZ,IAAK,CACR,EAAK,OAAQ,SAAS,CACtB,EAAK,SAAU,GAAM,EAGjB,MAAoB,CACxB,EAAU,MAAQ,IAGd,MAAqB,CACzB,EAAW,MAAQ,GACnB,EAAS,MAAQ,GACjB,EAAU,MAAQ,GAClB,EAAkB,MAAQ,GAC1B,AAEE,KADA,aAAa,EAAW,CACX,MAEf,EAAK,QAAQ,CACb,EAAK,SAAU,GAAM,SAGvB,EAAa,CACX,aAAgB,EAAW,MAC3B,aAAgB,EAAkB,MAClC,wBACO,EAAW,MACT,CACL,MAAO,EAAkB,MACzB,UAAW,KAAK,KAAK,CACrB,KAAM,iBACP,CAL6B,KAOhC,MAAO,EACP,KAAM,EACP,CAAC,CAEF,MAAsB,CAChB,GAAY,aAAa,EAAW,EACxC,aChJA,EAsCM,MAtCN,EAsCM,CArCJ,EA6BM,MAAA,CA5BJ,MAAK,EAAA,CAAC,kBAAiB,UAEK,EAAA,YAA2B,EAAA,eAA4BA,EAAAA,YADlF,QAAO,IAOR,EAWM,MAXN,EAWM,CAVJ,EAIM,MAJN,EAIM,EAHS,EAAA,OAAU,CAAK,EAAA,OAAA,GAAA,CAA5B,EAA+C,OAAA,EAAT,KAAE,EAAA,EAAA,OAAA,GAAA,CAC5B,EAAA,OAAA,GAAA,CAAZ,EAAqD,OAArD,EAA6C,IAAC,EAAA,EAAA,OAAA,GAAA,CAClC,EAAA,OAAA,GAAA,CAAZ,EAAkD,OAAlD,EAAyC,KAAE,EAAA,EAAA,OAAA,GAAA,GAE7C,EAIM,MAJN,EAIM,EAHS,EAAA,OAAU,CAAK,EAAA,OAAA,GAAA,CAA5B,EAA8D,OAAA,EAAA,EAArBC,EAAAA,YAAW,CAAA,EAAA,EAAA,EAAA,OAAA,GAAA,CACxC,EAAA,OAAA,GAAA,CAAZ,EAAwD,OAAxD,EAA6C,OAAI,EAAA,EAAA,OAAA,GAAA,CACrC,EAAA,OAAA,GAAA,CAAZ,EAAwD,OAAxD,EAAyC,WAAQ,EAAA,EAAA,OAAA,GAAA,KAI7C,EAAA,OAAc,EAAA,OAAA,GAAA,CADtB,EAOM,MAAA,OALJ,MAAM,iBACL,QAAK,EAAO,EAAY,CAAA,OAAA,CAAA,CACzB,MAAM,QACP,MAED,EAAA,EAAA,OAAA,GAAA,CAAA,CAAA,EAAA,CAEF,EAME,EAAA,EAAA,CAAA,CALC,KAAM,EAAA,MACN,KAAM,EAAA,MACN,UAAS,EACT,QAAO,EACP,OAAM"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_Cascade-BE7t1OX5.css","names":[],"sources":["../src/components/C_Cascade/index.vue?vue&type=style&index=0&scoped=7219e099&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.n-cascade-selector[data-v-7219e099] {\n display: flex;\n gap: 12px;\n}\n.n-cascade-selector .n-select-item[data-v-7219e099] {\n min-width: 140px;\n flex: 1;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_Cascade-CpDiau1y.css","names":[],"sources":["../src/components/C_Cascade/index.vue?vue&type=style&index=0&scoped=7219e099&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.n-cascade-selector[data-v-7219e099] {\n display: flex;\n gap: 12px;\n}\n.n-cascade-selector .n-select-item[data-v-7219e099] {\n min-width: 140px;\n flex: 1;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
package/dist/C_Cascade.css
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
/* unplugin-vue-components disabled */.n-cascade-selector[data-v-
|
|
1
|
+
/* unplugin-vue-components disabled */.n-cascade-selector[data-v-7219e099] {
|
|
2
2
|
display: flex;
|
|
3
3
|
gap: 12px;
|
|
4
4
|
}
|
|
5
|
-
.n-cascade-selector .n-select-item[data-v-
|
|
5
|
+
.n-cascade-selector .n-select-item[data-v-7219e099] {
|
|
6
6
|
min-width: 140px;
|
|
7
7
|
flex: 1;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
/*# sourceMappingURL=C_Cascade-
|
|
10
|
+
/*# sourceMappingURL=C_Cascade-BE7t1OX5.css.map*/
|
package/dist/C_Cascade.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Cascade.js","names":[],"sources":["../src/components/C_Cascade/index.vue"],"sourcesContent":["<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-28\r\n * @Description: 级联选择组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"n-cascade-selector\">\r\n <NSelect\r\n v-for=\"(level, index) in levels\"\r\n :key=\"index\"\r\n v-model:value=\"selectedValues[index]\"\r\n :options=\"levelOptions[index]\"\r\n clearable\r\n :placeholder=\"placeholders[index]\"\r\n :disabled=\"index > 0 && !selectedValues[index - 1]\"\r\n @update:value=\"handleChange(index)\"\r\n class=\"n-select-item\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch } from \"vue\";\r\nimport { NSelect } from \"naive-ui\";\r\n\r\ndefineOptions({ name: \"C_Cascade\" });\r\n\r\nexport interface CascadeItem {\r\n label: string;\r\n value: string | number;\r\n children?: CascadeItem[];\r\n}\r\n\r\ninterface CascadeValue {\r\n primary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n secondary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n tertiary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n}\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n data: CascadeItem[];\r\n placeholders?: string[];\r\n modelValue?: CascadeValue;\r\n }>(),\r\n {\r\n placeholders: () => [\"请选择\", \"请选择\", \"请选择\"],\r\n },\r\n);\r\n\r\nconst emit = defineEmits<{\r\n \"update:modelValue\": [value: CascadeValue];\r\n change: [value: CascadeValue];\r\n}>();\r\n\r\nconst levels = [0, 1, 2];\r\nconst selectedValues = ref<(string | number | null)[]>([null, null, null]);\r\n\r\nconst getLevelData = (level: number): CascadeItem[] => {\r\n if (level === 0) return props.data;\r\n if (!selectedValues.value[level - 1]) return [];\r\n const parentData = getLevelData(level - 1);\r\n return (\r\n parentData.find((x) => x.value === selectedValues.value[level - 1])\r\n ?.children || []\r\n );\r\n};\r\n\r\nconst levelOptions = computed(() =>\r\n levels.map((level) =>\r\n getLevelData(level).map((item) => ({\r\n label: item.label,\r\n value: item.value,\r\n })),\r\n ),\r\n);\r\n\r\nconst handleChange = (index: number) => {\r\n selectedValues.value.splice(\r\n index + 1,\r\n levels.length - index - 1,\r\n ...Array(levels.length - index - 1).fill(null),\r\n );\r\n emitValue();\r\n};\r\n\r\nconst getSelectedItem = (index: number) => {\r\n const value = selectedValues.value[index];\r\n if (!value) return null;\r\n const data = getLevelData(index);\r\n const item = data.find((i) => i.value === value);\r\n return item ? { label: item.label, value: item.value } : null;\r\n};\r\n\r\nconst emitValue = () => {\r\n const result: CascadeValue = {\r\n primary: getSelectedItem(0),\r\n secondary: getSelectedItem(1),\r\n tertiary: getSelectedItem(2),\r\n };\r\n emit(\"update:modelValue\", result);\r\n emit(\"change\", result);\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (val) => {\r\n selectedValues.value = [\r\n val?.primary?.value ?? null,\r\n val?.secondary?.value ?? null,\r\n val?.tertiary?.value ?? null,\r\n ];\r\n },\r\n { immediate: true, deep: true },\r\n);\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.n-cascade-selector {\r\n display: flex;\r\n gap: 12px;\r\n .n-select-item {\r\n min-width: 140px;\r\n flex: 1;\r\n }\r\n}\r\n</style>\r\n"],"mappings":"yUAyCA,IAAM,EAAQ,EAWR,EAAO,EAKP,EAAS,CAAC,EAAG,EAAG,EAAE,CAClB,GAAA,EAAA,EAAA,KAAiD,CAAC,KAAM,KAAM,KAAK,CAAC,CAEpE,EAAgB,GAChB,IAAU,EAAU,EAAM,KACzB,EAAe,MAAM,EAAQ,IACf,EAAa,EAAQ,EAAE,CAE7B,KAAM,GAAM,EAAE,QAAU,EAAe,MAAM,EAAQ,GAAG,EAC/D,UAJuC,EAAE,CAQ3C,GAAA,EAAA,EAAA,cACJ,EAAO,IAAK,GACV,EAAa,EAAM,CAAC,IAAK,IAAU,CACjC,MAAO,EAAK,MACZ,MAAO,EAAK,MACb,EAAE,CACJ,CACF,CAEK,EAAgB,GAAkB,CACtC,EAAe,MAAM,OACnB,EAAQ,EACR,EAAO,OAAS,EAAQ,EACxB,GAAG,MAAM,EAAO,OAAS,EAAQ,EAAE,CAAC,KAAK,KAAK,CAC/C,CACD,GAAW,EAGP,EAAmB,GAAkB,CACzC,IAAM,EAAQ,EAAe,MAAM,GACnC,GAAI,CAAC,EAAO,OAAO,KAEnB,IAAM,EADO,EAAa,EAAM,CACd,KAAM,GAAM,EAAE,QAAU,EAAM,CAChD,OAAO,EAAO,CAAE,MAAO,EAAK,MAAO,MAAO,EAAK,MAAO,CAAG,MAGrD,MAAkB,CACtB,IAAM,EAAuB,CAC3B,QAAS,EAAgB,EAAE,CAC3B,UAAW,EAAgB,EAAE,CAC7B,SAAU,EAAgB,
|
|
1
|
+
{"version":3,"file":"C_Cascade.js","names":["placeholders"],"sources":["../src/components/C_Cascade/index.vue","../src/components/C_Cascade/index.vue"],"sourcesContent":["<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-28\r\n * @Description: 级联选择组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"n-cascade-selector\">\r\n <NSelect\r\n v-for=\"(level, index) in levels\"\r\n :key=\"index\"\r\n v-model:value=\"selectedValues[index]\"\r\n :options=\"levelOptions[index]\"\r\n clearable\r\n :placeholder=\"placeholders[index]\"\r\n :disabled=\"index > 0 && !selectedValues[index - 1]\"\r\n @update:value=\"handleChange(index)\"\r\n class=\"n-select-item\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch } from \"vue\";\r\nimport { NSelect } from \"naive-ui\";\r\n\r\ndefineOptions({ name: \"C_Cascade\" });\r\n\r\nexport interface CascadeItem {\r\n label: string;\r\n value: string | number;\r\n children?: CascadeItem[];\r\n}\r\n\r\ninterface CascadeValue {\r\n primary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n secondary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n tertiary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n}\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n data: CascadeItem[];\r\n placeholders?: string[];\r\n modelValue?: CascadeValue;\r\n }>(),\r\n {\r\n placeholders: () => [\"请选择\", \"请选择\", \"请选择\"],\r\n },\r\n);\r\n\r\nconst emit = defineEmits<{\r\n \"update:modelValue\": [value: CascadeValue];\r\n change: [value: CascadeValue];\r\n}>();\r\n\r\nconst levels = [0, 1, 2];\r\nconst selectedValues = ref<(string | number | null)[]>([null, null, null]);\r\n\r\nconst getLevelData = (level: number): CascadeItem[] => {\r\n if (level === 0) return props.data;\r\n if (!selectedValues.value[level - 1]) return [];\r\n const parentData = getLevelData(level - 1);\r\n return (\r\n parentData.find((x) => x.value === selectedValues.value[level - 1])\r\n ?.children || []\r\n );\r\n};\r\n\r\nconst levelOptions = computed(() =>\r\n levels.map((level) =>\r\n getLevelData(level).map((item) => ({\r\n label: item.label,\r\n value: item.value,\r\n })),\r\n ),\r\n);\r\n\r\nconst handleChange = (index: number) => {\r\n selectedValues.value.splice(\r\n index + 1,\r\n levels.length - index - 1,\r\n ...Array(levels.length - index - 1).fill(null),\r\n );\r\n emitValue();\r\n};\r\n\r\nconst getSelectedItem = (index: number) => {\r\n const value = selectedValues.value[index];\r\n if (!value) return null;\r\n const data = getLevelData(index);\r\n const item = data.find((i) => i.value === value);\r\n return item ? { label: item.label, value: item.value } : null;\r\n};\r\n\r\nconst emitValue = () => {\r\n const result: CascadeValue = {\r\n primary: getSelectedItem(0),\r\n secondary: getSelectedItem(1),\r\n tertiary: getSelectedItem(2),\r\n };\r\n emit(\"update:modelValue\", result);\r\n emit(\"change\", result);\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (val) => {\r\n selectedValues.value = [\r\n val?.primary?.value ?? null,\r\n val?.secondary?.value ?? null,\r\n val?.tertiary?.value ?? null,\r\n ];\r\n },\r\n { immediate: true, deep: true },\r\n);\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.n-cascade-selector {\r\n display: flex;\r\n gap: 12px;\r\n .n-select-item {\r\n min-width: 140px;\r\n flex: 1;\r\n }\r\n}\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-28\r\n * @Description: 级联选择组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"n-cascade-selector\">\r\n <NSelect\r\n v-for=\"(level, index) in levels\"\r\n :key=\"index\"\r\n v-model:value=\"selectedValues[index]\"\r\n :options=\"levelOptions[index]\"\r\n clearable\r\n :placeholder=\"placeholders[index]\"\r\n :disabled=\"index > 0 && !selectedValues[index - 1]\"\r\n @update:value=\"handleChange(index)\"\r\n class=\"n-select-item\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch } from \"vue\";\r\nimport { NSelect } from \"naive-ui\";\r\n\r\ndefineOptions({ name: \"C_Cascade\" });\r\n\r\nexport interface CascadeItem {\r\n label: string;\r\n value: string | number;\r\n children?: CascadeItem[];\r\n}\r\n\r\ninterface CascadeValue {\r\n primary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n secondary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n tertiary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n}\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n data: CascadeItem[];\r\n placeholders?: string[];\r\n modelValue?: CascadeValue;\r\n }>(),\r\n {\r\n placeholders: () => [\"请选择\", \"请选择\", \"请选择\"],\r\n },\r\n);\r\n\r\nconst emit = defineEmits<{\r\n \"update:modelValue\": [value: CascadeValue];\r\n change: [value: CascadeValue];\r\n}>();\r\n\r\nconst levels = [0, 1, 2];\r\nconst selectedValues = ref<(string | number | null)[]>([null, null, null]);\r\n\r\nconst getLevelData = (level: number): CascadeItem[] => {\r\n if (level === 0) return props.data;\r\n if (!selectedValues.value[level - 1]) return [];\r\n const parentData = getLevelData(level - 1);\r\n return (\r\n parentData.find((x) => x.value === selectedValues.value[level - 1])\r\n ?.children || []\r\n );\r\n};\r\n\r\nconst levelOptions = computed(() =>\r\n levels.map((level) =>\r\n getLevelData(level).map((item) => ({\r\n label: item.label,\r\n value: item.value,\r\n })),\r\n ),\r\n);\r\n\r\nconst handleChange = (index: number) => {\r\n selectedValues.value.splice(\r\n index + 1,\r\n levels.length - index - 1,\r\n ...Array(levels.length - index - 1).fill(null),\r\n );\r\n emitValue();\r\n};\r\n\r\nconst getSelectedItem = (index: number) => {\r\n const value = selectedValues.value[index];\r\n if (!value) return null;\r\n const data = getLevelData(index);\r\n const item = data.find((i) => i.value === value);\r\n return item ? { label: item.label, value: item.value } : null;\r\n};\r\n\r\nconst emitValue = () => {\r\n const result: CascadeValue = {\r\n primary: getSelectedItem(0),\r\n secondary: getSelectedItem(1),\r\n tertiary: getSelectedItem(2),\r\n };\r\n emit(\"update:modelValue\", result);\r\n emit(\"change\", result);\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (val) => {\r\n selectedValues.value = [\r\n val?.primary?.value ?? null,\r\n val?.secondary?.value ?? null,\r\n val?.tertiary?.value ?? null,\r\n ];\r\n },\r\n { immediate: true, deep: true },\r\n);\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.n-cascade-selector {\r\n display: flex;\r\n gap: 12px;\r\n .n-select-item {\r\n min-width: 140px;\r\n flex: 1;\r\n }\r\n}\r\n</style>\r\n"],"mappings":"yUAyCA,IAAM,EAAQ,EAWR,EAAO,EAKP,EAAS,CAAC,EAAG,EAAG,EAAE,CAClB,GAAA,EAAA,EAAA,KAAiD,CAAC,KAAM,KAAM,KAAK,CAAC,CAEpE,EAAgB,GAChB,IAAU,EAAU,EAAM,KACzB,EAAe,MAAM,EAAQ,IACf,EAAa,EAAQ,EAAE,CAE7B,KAAM,GAAM,EAAE,QAAU,EAAe,MAAM,EAAQ,GAAG,EAC/D,UAJuC,EAAE,CAQ3C,GAAA,EAAA,EAAA,cACJ,EAAO,IAAK,GACV,EAAa,EAAM,CAAC,IAAK,IAAU,CACjC,MAAO,EAAK,MACZ,MAAO,EAAK,MACb,EAAE,CACJ,CACF,CAEK,EAAgB,GAAkB,CACtC,EAAe,MAAM,OACnB,EAAQ,EACR,EAAO,OAAS,EAAQ,EACxB,GAAG,MAAM,EAAO,OAAS,EAAQ,EAAE,CAAC,KAAK,KAAK,CAC/C,CACD,GAAW,EAGP,EAAmB,GAAkB,CACzC,IAAM,EAAQ,EAAe,MAAM,GACnC,GAAI,CAAC,EAAO,OAAO,KAEnB,IAAM,EADO,EAAa,EAAM,CACd,KAAM,GAAM,EAAE,QAAU,EAAM,CAChD,OAAO,EAAO,CAAE,MAAO,EAAK,MAAO,MAAO,EAAK,MAAO,CAAG,MAGrD,MAAkB,CACtB,IAAM,EAAuB,CAC3B,QAAS,EAAgB,EAAE,CAC3B,UAAW,EAAgB,EAAE,CAC7B,SAAU,EAAgB,EAAA,CAC3B,CACD,EAAK,oBAAqB,EAAO,CACjC,EAAK,SAAU,EAAO,SAGxB,EAAA,EAAA,WACQ,EAAM,WACX,GAAQ,CACP,EAAe,MAAQ,CACrB,GAAK,SAAS,OAAS,KACvB,GAAK,WAAW,OAAS,KACzB,GAAK,UAAU,OAAS,KACzB,EAEH,CAAE,UAAW,GAAM,KAAM,GAAM,CAChC,oDChGO,MAZN,EAYM,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBADF,EAAA,SAAA,MAAA,EAAA,EAAA,YATyB,GAAjB,EAAO,kCASf,EAAA,QAAA,CAAA,CARC,IAAK,EACE,MAAO,EAAA,MAAe,wBAAf,EAAA,MAAe,GAAK,EAAA,GAKpB,EAAa,EAAK,CAAA,CAJhC,QAAS,EAAA,MAAa,GACvB,UAAA,GACC,YAAaA,EAAAA,aAAa,GAC1B,SAAU,EAAK,GAAA,CAAS,EAAA,MAAe,EAAK,GAE7C,MAAM"}
|
package/dist/C_Cascade2.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{t as e}from"./export-helper.js";import{
|
|
1
|
+
import{t as e}from"./export-helper.js";import{NSelect as t}from"naive-ui";import{Fragment as n,computed as r,createElementBlock as i,createVNode as a,defineComponent as o,openBlock as s,ref as c,renderList as l,unref as u,watch as d}from"vue";const f={class:`n-cascade-selector`};var p=e(o({name:`C_Cascade`,__name:`index`,props:{data:{},placeholders:{default:()=>[`请选择`,`请选择`,`请选择`]},modelValue:{}},emits:[`update:modelValue`,`change`],setup(e,{emit:o}){let p=e,m=o,h=[0,1,2],g=c([null,null,null]),_=e=>e===0?p.data:g.value[e-1]&&_(e-1).find(t=>t.value===g.value[e-1])?.children||[],v=r(()=>h.map(e=>_(e).map(e=>({label:e.label,value:e.value})))),y=e=>{g.value.splice(e+1,h.length-e-1,...Array(h.length-e-1).fill(null)),x()},b=e=>{let t=g.value[e];if(!t)return null;let n=_(e).find(e=>e.value===t);return n?{label:n.label,value:n.value}:null},x=()=>{let e={primary:b(0),secondary:b(1),tertiary:b(2)};m(`update:modelValue`,e),m(`change`,e)};return d(()=>p.modelValue,e=>{g.value=[e?.primary?.value??null,e?.secondary?.value??null,e?.tertiary?.value??null]},{immediate:!0,deep:!0}),(e,r)=>(s(),i(`div`,f,[(s(),i(n,null,l(h,(n,r)=>a(u(t),{key:r,value:g.value[r],"onUpdate:value":[e=>g.value[r]=e,e=>y(r)],options:v.value[r],clearable:``,placeholder:e.placeholders[r],disabled:r>0&&!g.value[r-1],class:`n-select-item`},null,8,[`value`,`onUpdate:value`,`options`,`placeholder`,`disabled`])),64))]))}}),[[`__scopeId`,`data-v-7219e099`]]);export{p as t};
|
|
2
2
|
//# sourceMappingURL=C_Cascade2.js.map
|
package/dist/C_Cascade2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Cascade2.js","names":[],"sources":["../src/components/C_Cascade/index.vue"],"sourcesContent":["<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-28\r\n * @Description: 级联选择组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"n-cascade-selector\">\r\n <NSelect\r\n v-for=\"(level, index) in levels\"\r\n :key=\"index\"\r\n v-model:value=\"selectedValues[index]\"\r\n :options=\"levelOptions[index]\"\r\n clearable\r\n :placeholder=\"placeholders[index]\"\r\n :disabled=\"index > 0 && !selectedValues[index - 1]\"\r\n @update:value=\"handleChange(index)\"\r\n class=\"n-select-item\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch } from \"vue\";\r\nimport { NSelect } from \"naive-ui\";\r\n\r\ndefineOptions({ name: \"C_Cascade\" });\r\n\r\nexport interface CascadeItem {\r\n label: string;\r\n value: string | number;\r\n children?: CascadeItem[];\r\n}\r\n\r\ninterface CascadeValue {\r\n primary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n secondary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n tertiary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n}\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n data: CascadeItem[];\r\n placeholders?: string[];\r\n modelValue?: CascadeValue;\r\n }>(),\r\n {\r\n placeholders: () => [\"请选择\", \"请选择\", \"请选择\"],\r\n },\r\n);\r\n\r\nconst emit = defineEmits<{\r\n \"update:modelValue\": [value: CascadeValue];\r\n change: [value: CascadeValue];\r\n}>();\r\n\r\nconst levels = [0, 1, 2];\r\nconst selectedValues = ref<(string | number | null)[]>([null, null, null]);\r\n\r\nconst getLevelData = (level: number): CascadeItem[] => {\r\n if (level === 0) return props.data;\r\n if (!selectedValues.value[level - 1]) return [];\r\n const parentData = getLevelData(level - 1);\r\n return (\r\n parentData.find((x) => x.value === selectedValues.value[level - 1])\r\n ?.children || []\r\n );\r\n};\r\n\r\nconst levelOptions = computed(() =>\r\n levels.map((level) =>\r\n getLevelData(level).map((item) => ({\r\n label: item.label,\r\n value: item.value,\r\n })),\r\n ),\r\n);\r\n\r\nconst handleChange = (index: number) => {\r\n selectedValues.value.splice(\r\n index + 1,\r\n levels.length - index - 1,\r\n ...Array(levels.length - index - 1).fill(null),\r\n );\r\n emitValue();\r\n};\r\n\r\nconst getSelectedItem = (index: number) => {\r\n const value = selectedValues.value[index];\r\n if (!value) return null;\r\n const data = getLevelData(index);\r\n const item = data.find((i) => i.value === value);\r\n return item ? { label: item.label, value: item.value } : null;\r\n};\r\n\r\nconst emitValue = () => {\r\n const result: CascadeValue = {\r\n primary: getSelectedItem(0),\r\n secondary: getSelectedItem(1),\r\n tertiary: getSelectedItem(2),\r\n };\r\n emit(\"update:modelValue\", result);\r\n emit(\"change\", result);\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (val) => {\r\n selectedValues.value = [\r\n val?.primary?.value ?? null,\r\n val?.secondary?.value ?? null,\r\n val?.tertiary?.value ?? null,\r\n ];\r\n },\r\n { immediate: true, deep: true },\r\n);\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.n-cascade-selector {\r\n display: flex;\r\n gap: 12px;\r\n .n-select-item {\r\n min-width: 140px;\r\n flex: 1;\r\n }\r\n}\r\n</style>\r\n"],"mappings":"ucAyCA,IAAM,EAAQ,EAWR,EAAO,EAKP,EAAS,CAAC,EAAG,EAAG,EAAE,CAClB,EAAiB,EAAgC,CAAC,KAAM,KAAM,KAAK,CAAC,CAEpE,EAAgB,GAChB,IAAU,EAAU,EAAM,KACzB,EAAe,MAAM,EAAQ,IACf,EAAa,EAAQ,EAAE,CAE7B,KAAM,GAAM,EAAE,QAAU,EAAe,MAAM,EAAQ,GAAG,EAC/D,UAJuC,EAAE,CAQ3C,EAAe,MACnB,EAAO,IAAK,GACV,EAAa,EAAM,CAAC,IAAK,IAAU,CACjC,MAAO,EAAK,MACZ,MAAO,EAAK,MACb,EAAE,CACJ,CACF,CAEK,EAAgB,GAAkB,CACtC,EAAe,MAAM,OACnB,EAAQ,EACR,EAAO,OAAS,EAAQ,EACxB,GAAG,MAAM,EAAO,OAAS,EAAQ,EAAE,CAAC,KAAK,KAAK,CAC/C,CACD,GAAW,EAGP,EAAmB,GAAkB,CACzC,IAAM,EAAQ,EAAe,MAAM,GACnC,GAAI,CAAC,EAAO,OAAO,KAEnB,IAAM,EADO,EAAa,EAAM,CACd,KAAM,GAAM,EAAE,QAAU,EAAM,CAChD,OAAO,EAAO,CAAE,MAAO,EAAK,MAAO,MAAO,EAAK,MAAO,CAAG,MAGrD,MAAkB,CACtB,IAAM,EAAuB,CAC3B,QAAS,EAAgB,EAAE,CAC3B,UAAW,EAAgB,EAAE,CAC7B,SAAU,EAAgB,
|
|
1
|
+
{"version":3,"file":"C_Cascade2.js","names":["placeholders"],"sources":["../src/components/C_Cascade/index.vue","../src/components/C_Cascade/index.vue"],"sourcesContent":["<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-28\r\n * @Description: 级联选择组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"n-cascade-selector\">\r\n <NSelect\r\n v-for=\"(level, index) in levels\"\r\n :key=\"index\"\r\n v-model:value=\"selectedValues[index]\"\r\n :options=\"levelOptions[index]\"\r\n clearable\r\n :placeholder=\"placeholders[index]\"\r\n :disabled=\"index > 0 && !selectedValues[index - 1]\"\r\n @update:value=\"handleChange(index)\"\r\n class=\"n-select-item\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch } from \"vue\";\r\nimport { NSelect } from \"naive-ui\";\r\n\r\ndefineOptions({ name: \"C_Cascade\" });\r\n\r\nexport interface CascadeItem {\r\n label: string;\r\n value: string | number;\r\n children?: CascadeItem[];\r\n}\r\n\r\ninterface CascadeValue {\r\n primary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n secondary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n tertiary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n}\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n data: CascadeItem[];\r\n placeholders?: string[];\r\n modelValue?: CascadeValue;\r\n }>(),\r\n {\r\n placeholders: () => [\"请选择\", \"请选择\", \"请选择\"],\r\n },\r\n);\r\n\r\nconst emit = defineEmits<{\r\n \"update:modelValue\": [value: CascadeValue];\r\n change: [value: CascadeValue];\r\n}>();\r\n\r\nconst levels = [0, 1, 2];\r\nconst selectedValues = ref<(string | number | null)[]>([null, null, null]);\r\n\r\nconst getLevelData = (level: number): CascadeItem[] => {\r\n if (level === 0) return props.data;\r\n if (!selectedValues.value[level - 1]) return [];\r\n const parentData = getLevelData(level - 1);\r\n return (\r\n parentData.find((x) => x.value === selectedValues.value[level - 1])\r\n ?.children || []\r\n );\r\n};\r\n\r\nconst levelOptions = computed(() =>\r\n levels.map((level) =>\r\n getLevelData(level).map((item) => ({\r\n label: item.label,\r\n value: item.value,\r\n })),\r\n ),\r\n);\r\n\r\nconst handleChange = (index: number) => {\r\n selectedValues.value.splice(\r\n index + 1,\r\n levels.length - index - 1,\r\n ...Array(levels.length - index - 1).fill(null),\r\n );\r\n emitValue();\r\n};\r\n\r\nconst getSelectedItem = (index: number) => {\r\n const value = selectedValues.value[index];\r\n if (!value) return null;\r\n const data = getLevelData(index);\r\n const item = data.find((i) => i.value === value);\r\n return item ? { label: item.label, value: item.value } : null;\r\n};\r\n\r\nconst emitValue = () => {\r\n const result: CascadeValue = {\r\n primary: getSelectedItem(0),\r\n secondary: getSelectedItem(1),\r\n tertiary: getSelectedItem(2),\r\n };\r\n emit(\"update:modelValue\", result);\r\n emit(\"change\", result);\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (val) => {\r\n selectedValues.value = [\r\n val?.primary?.value ?? null,\r\n val?.secondary?.value ?? null,\r\n val?.tertiary?.value ?? null,\r\n ];\r\n },\r\n { immediate: true, deep: true },\r\n);\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.n-cascade-selector {\r\n display: flex;\r\n gap: 12px;\r\n .n-select-item {\r\n min-width: 140px;\r\n flex: 1;\r\n }\r\n}\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-28\r\n * @Description: 级联选择组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"n-cascade-selector\">\r\n <NSelect\r\n v-for=\"(level, index) in levels\"\r\n :key=\"index\"\r\n v-model:value=\"selectedValues[index]\"\r\n :options=\"levelOptions[index]\"\r\n clearable\r\n :placeholder=\"placeholders[index]\"\r\n :disabled=\"index > 0 && !selectedValues[index - 1]\"\r\n @update:value=\"handleChange(index)\"\r\n class=\"n-select-item\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch } from \"vue\";\r\nimport { NSelect } from \"naive-ui\";\r\n\r\ndefineOptions({ name: \"C_Cascade\" });\r\n\r\nexport interface CascadeItem {\r\n label: string;\r\n value: string | number;\r\n children?: CascadeItem[];\r\n}\r\n\r\ninterface CascadeValue {\r\n primary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n secondary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n tertiary?: Pick<CascadeItem, \"label\" | \"value\"> | null;\r\n}\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n data: CascadeItem[];\r\n placeholders?: string[];\r\n modelValue?: CascadeValue;\r\n }>(),\r\n {\r\n placeholders: () => [\"请选择\", \"请选择\", \"请选择\"],\r\n },\r\n);\r\n\r\nconst emit = defineEmits<{\r\n \"update:modelValue\": [value: CascadeValue];\r\n change: [value: CascadeValue];\r\n}>();\r\n\r\nconst levels = [0, 1, 2];\r\nconst selectedValues = ref<(string | number | null)[]>([null, null, null]);\r\n\r\nconst getLevelData = (level: number): CascadeItem[] => {\r\n if (level === 0) return props.data;\r\n if (!selectedValues.value[level - 1]) return [];\r\n const parentData = getLevelData(level - 1);\r\n return (\r\n parentData.find((x) => x.value === selectedValues.value[level - 1])\r\n ?.children || []\r\n );\r\n};\r\n\r\nconst levelOptions = computed(() =>\r\n levels.map((level) =>\r\n getLevelData(level).map((item) => ({\r\n label: item.label,\r\n value: item.value,\r\n })),\r\n ),\r\n);\r\n\r\nconst handleChange = (index: number) => {\r\n selectedValues.value.splice(\r\n index + 1,\r\n levels.length - index - 1,\r\n ...Array(levels.length - index - 1).fill(null),\r\n );\r\n emitValue();\r\n};\r\n\r\nconst getSelectedItem = (index: number) => {\r\n const value = selectedValues.value[index];\r\n if (!value) return null;\r\n const data = getLevelData(index);\r\n const item = data.find((i) => i.value === value);\r\n return item ? { label: item.label, value: item.value } : null;\r\n};\r\n\r\nconst emitValue = () => {\r\n const result: CascadeValue = {\r\n primary: getSelectedItem(0),\r\n secondary: getSelectedItem(1),\r\n tertiary: getSelectedItem(2),\r\n };\r\n emit(\"update:modelValue\", result);\r\n emit(\"change\", result);\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (val) => {\r\n selectedValues.value = [\r\n val?.primary?.value ?? null,\r\n val?.secondary?.value ?? null,\r\n val?.tertiary?.value ?? null,\r\n ];\r\n },\r\n { immediate: true, deep: true },\r\n);\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.n-cascade-selector {\r\n display: flex;\r\n gap: 12px;\r\n .n-select-item {\r\n min-width: 140px;\r\n flex: 1;\r\n }\r\n}\r\n</style>\r\n"],"mappings":"ucAyCA,IAAM,EAAQ,EAWR,EAAO,EAKP,EAAS,CAAC,EAAG,EAAG,EAAE,CAClB,EAAiB,EAAgC,CAAC,KAAM,KAAM,KAAK,CAAC,CAEpE,EAAgB,GAChB,IAAU,EAAU,EAAM,KACzB,EAAe,MAAM,EAAQ,IACf,EAAa,EAAQ,EAAE,CAE7B,KAAM,GAAM,EAAE,QAAU,EAAe,MAAM,EAAQ,GAAG,EAC/D,UAJuC,EAAE,CAQ3C,EAAe,MACnB,EAAO,IAAK,GACV,EAAa,EAAM,CAAC,IAAK,IAAU,CACjC,MAAO,EAAK,MACZ,MAAO,EAAK,MACb,EAAE,CACJ,CACF,CAEK,EAAgB,GAAkB,CACtC,EAAe,MAAM,OACnB,EAAQ,EACR,EAAO,OAAS,EAAQ,EACxB,GAAG,MAAM,EAAO,OAAS,EAAQ,EAAE,CAAC,KAAK,KAAK,CAC/C,CACD,GAAW,EAGP,EAAmB,GAAkB,CACzC,IAAM,EAAQ,EAAe,MAAM,GACnC,GAAI,CAAC,EAAO,OAAO,KAEnB,IAAM,EADO,EAAa,EAAM,CACd,KAAM,GAAM,EAAE,QAAU,EAAM,CAChD,OAAO,EAAO,CAAE,MAAO,EAAK,MAAO,MAAO,EAAK,MAAO,CAAG,MAGrD,MAAkB,CACtB,IAAM,EAAuB,CAC3B,QAAS,EAAgB,EAAE,CAC3B,UAAW,EAAgB,EAAE,CAC7B,SAAU,EAAgB,EAAA,CAC3B,CACD,EAAK,oBAAqB,EAAO,CACjC,EAAK,SAAU,EAAO,SAGxB,MACQ,EAAM,WACX,GAAQ,CACP,EAAe,MAAQ,CACrB,GAAK,SAAS,OAAS,KACvB,GAAK,WAAW,OAAS,KACzB,GAAK,UAAU,OAAS,KACzB,EAEH,CAAE,UAAW,GAAM,KAAM,GAAM,CAChC,aC5GC,EAYM,MAZN,EAYM,EAAA,GAAA,CAXJ,EAUE,EAAA,KAAA,EATyB,GAAjB,EAAO,IADjB,EAUE,EAAA,EAAA,CAAA,CARC,IAAK,EACE,MAAO,EAAA,MAAe,wBAAf,EAAA,MAAe,GAAK,EAAA,GAKpB,EAAa,EAAK,CAAA,CAJhC,QAAS,EAAA,MAAa,GACvB,UAAA,GACC,YAAaA,EAAAA,aAAa,GAC1B,SAAU,EAAK,GAAA,CAAS,EAAA,MAAe,EAAK,GAE7C,MAAM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Chat-Csjz_BFw.css","names":[],"sources":["../src/components/C_Chat/index.vue?vue&type=style&index=0&scoped=2bbae884&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* ─── CSS 变量(基于项目主题变量,自动适配明暗) ───────────────────────── */\n.c-chat[data-v-2bbae884] {\n --chat-bg: var(--card-color);\n --chat-sidebar-bg: var(--body-color);\n --chat-sidebar-width: 280px;\n --chat-header-bg: var(--card-color);\n --chat-header-height: 56px;\n --chat-input-bg: var(--body-color);\n --chat-input-height: 56px;\n --chat-bubble-self: var(--primary-color);\n --chat-bubble-other: var(--body-color);\n --chat-bubble-system: transparent;\n --chat-text-primary: var(--app-text-primary);\n --chat-text-secondary: var(--text-color-3);\n --chat-text-self: #fff;\n --chat-border: var(--border-color);\n --chat-online-color: #22c55e;\n --chat-unread-bg: #ef4444;\n --chat-unread-color: #fff;\n --chat-failed-color: #ef4444;\n --chat-shadow: rgba(0, 0, 0, 0.06);\n --chat-shadow-light: rgba(0, 0, 0, 0.03);\n --chat-radius: 12px;\n --chat-avatar-size: 36px;\n --chat-scrollbar-thumb: var(--border-color);\n display: flex;\n width: 100%;\n height: 100%;\n min-height: 0;\n border-radius: var(--chat-radius);\n overflow: hidden;\n background: var(--chat-bg);\n color: var(--chat-text-primary);\n font-size: 14px;\n border: 1px solid var(--chat-border);\n box-shadow: 0 2px 12px var(--chat-shadow);\n}\n\n/* ─── 联系人侧栏 ──────────────────────────────────────── */\n.c-chat__sidebar[data-v-2bbae884] {\n display: flex;\n flex-direction: column;\n width: var(--chat-sidebar-width);\n min-width: var(--chat-sidebar-width);\n background: var(--chat-sidebar-bg);\n border-right: 1px solid var(--chat-border);\n box-shadow: 2px 0 8px var(--chat-shadow-light);\n}\n.c-chat__sidebar-header[data-v-2bbae884] {\n display: flex;\n align-items: center;\n gap: 8px;\n height: var(--chat-header-height);\n padding: 0 16px;\n border-bottom: 1px solid var(--chat-border);\n font-weight: 600;\n font-size: 15px;\n}\n.c-chat__search[data-v-2bbae884] {\n padding: 8px 12px;\n}\n.c-chat__contact-list[data-v-2bbae884] {\n flex: 1;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n.c-chat__contact-list[data-v-2bbae884]::-webkit-scrollbar {\n width: 4px;\n}\n.c-chat__contact-list[data-v-2bbae884]::-webkit-scrollbar-thumb {\n background: var(--chat-scrollbar-thumb);\n border-radius: 2px;\n}\n.c-chat__contact[data-v-2bbae884] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 16px;\n cursor: pointer;\n transition: background 0.15s;\n}\n.c-chat__contact[data-v-2bbae884]:hover {\n background: color-mix(in srgb, var(--primary-color) 6%, transparent);\n}\n.c-chat__contact.is-active[data-v-2bbae884] {\n background: color-mix(in srgb, var(--primary-color) 12%, transparent);\n}\n.c-chat__contact-avatar[data-v-2bbae884] {\n position: relative;\n flex-shrink: 0;\n}\n.c-chat__avatar[data-v-2bbae884] {\n width: var(--chat-avatar-size);\n height: var(--chat-avatar-size);\n border-radius: 50%;\n object-fit: cover;\n background: color-mix(in srgb, var(--border-color) 50%, transparent);\n}\n.c-chat__avatar-fallback[data-v-2bbae884] {\n width: var(--chat-avatar-size);\n height: var(--chat-avatar-size);\n border-radius: 50%;\n background: color-mix(in srgb, var(--primary-color) 25%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 600;\n color: var(--app-text-primary);\n}\n.c-chat__online-dot[data-v-2bbae884] {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: var(--chat-online-color);\n border: 2px solid var(--chat-sidebar-bg);\n}\n.c-chat__contact-info[data-v-2bbae884] {\n flex: 1;\n min-width: 0;\n}\n.c-chat__contact-name[data-v-2bbae884] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 13px;\n font-weight: 500;\n}\n.c-chat__contact-time[data-v-2bbae884] {\n font-size: 11px;\n color: var(--chat-text-secondary);\n margin-left: 8px;\n flex-shrink: 0;\n}\n.c-chat__contact-last[data-v-2bbae884] {\n font-size: 12px;\n color: var(--chat-text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-top: 2px;\n}\n.c-chat__unread[data-v-2bbae884] {\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n border-radius: 9px;\n background: var(--chat-unread-bg);\n color: var(--chat-unread-color);\n font-size: 11px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n/* ─── 主聊天区域 ──────────────────────────────────────── */\n.c-chat__main[data-v-2bbae884] {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.c-chat__header[data-v-2bbae884] {\n display: flex;\n align-items: center;\n gap: 10px;\n height: var(--chat-header-height);\n padding: 0 20px;\n background: var(--chat-header-bg);\n border-bottom: 1px solid var(--chat-border);\n box-shadow: 0 1px 4px var(--chat-shadow-light);\n font-weight: 600;\n font-size: 15px;\n}\n.c-chat__header-status[data-v-2bbae884] {\n font-size: 12px;\n font-weight: 400;\n color: var(--chat-text-secondary);\n}\n\n/* ─── 消息区域 ────────────────────────────────────────── */\n.c-chat__messages[data-v-2bbae884] {\n flex: 1;\n overflow-y: auto;\n overscroll-behavior: contain;\n padding: 16px 20px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n background: color-mix(in srgb, var(--body-color) 50%, var(--card-color));\n}\n.c-chat__messages[data-v-2bbae884]::-webkit-scrollbar {\n width: 4px;\n}\n.c-chat__messages[data-v-2bbae884]::-webkit-scrollbar-thumb {\n background: var(--chat-scrollbar-thumb);\n border-radius: 2px;\n}\n.c-chat__load-more[data-v-2bbae884] {\n text-align: center;\n padding: 8px;\n}\n.c-chat__empty[data-v-2bbae884] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--chat-text-secondary);\n font-size: 13px;\n}\n\n/* ─── 消息气泡 ────────────────────────────────────────── */\n.c-chat__msg[data-v-2bbae884] {\n display: flex;\n gap: 8px;\n max-width: 75%;\n}\n.c-chat__msg.is-self[data-v-2bbae884] {\n margin-left: auto;\n flex-direction: row-reverse;\n}\n.c-chat__msg.is-system[data-v-2bbae884] {\n max-width: 100%;\n justify-content: center;\n align-self: center;\n}\n.c-chat__msg-avatar[data-v-2bbae884] {\n flex-shrink: 0;\n margin-top: 2px;\n}\n.c-chat__msg-body[data-v-2bbae884] {\n display: flex;\n flex-direction: column;\n}\n.c-chat__msg-username[data-v-2bbae884] {\n font-size: 12px;\n color: var(--chat-text-secondary);\n margin-bottom: 2px;\n}\n.is-self .c-chat__msg-username[data-v-2bbae884] {\n text-align: right;\n}\n.c-chat__bubble[data-v-2bbae884] {\n padding: 10px 14px;\n border-radius: 16px;\n line-height: 1.5;\n word-break: break-word;\n white-space: pre-wrap;\n}\n.is-other .c-chat__bubble[data-v-2bbae884] {\n background: var(--chat-bubble-other);\n border: 1px solid var(--chat-border);\n border-top-left-radius: 4px;\n}\n.is-self .c-chat__bubble[data-v-2bbae884] {\n background: var(--chat-bubble-self);\n color: var(--chat-text-self);\n border-top-right-radius: 4px;\n}\n.is-system .c-chat__bubble[data-v-2bbae884] {\n background: var(--chat-bubble-system);\n color: var(--chat-text-secondary);\n font-size: 12px;\n padding: 4px 12px;\n}\n.c-chat__msg-image[data-v-2bbae884] {\n max-width: 240px;\n max-height: 180px;\n border-radius: 12px;\n cursor: pointer;\n object-fit: cover;\n}\n.is-self .c-chat__msg-image[data-v-2bbae884] {\n border-top-right-radius: 4px;\n}\n.is-other .c-chat__msg-image[data-v-2bbae884] {\n border-top-left-radius: 4px;\n}\n.c-chat__msg-file[data-v-2bbae884] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n border-radius: 12px;\n cursor: pointer;\n}\n.is-other .c-chat__msg-file[data-v-2bbae884] {\n background: var(--chat-bubble-other);\n border: 1px solid var(--chat-border);\n border-top-left-radius: 4px;\n}\n.is-self .c-chat__msg-file[data-v-2bbae884] {\n background: var(--chat-bubble-self);\n color: var(--chat-text-self);\n border-top-right-radius: 4px;\n}\n.c-chat__file-info[data-v-2bbae884] {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.c-chat__file-name[data-v-2bbae884] {\n font-size: 13px;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.c-chat__file-size[data-v-2bbae884] {\n font-size: 11px;\n opacity: 0.6;\n}\n.c-chat__msg-time[data-v-2bbae884] {\n font-size: 11px;\n color: var(--chat-text-secondary);\n margin-top: 4px;\n}\n.is-self .c-chat__msg-time[data-v-2bbae884] {\n text-align: right;\n}\n.c-chat__msg-status[data-v-2bbae884] {\n font-size: 11px;\n margin-top: 2px;\n text-align: right;\n}\n.c-chat__msg-status.is-sending[data-v-2bbae884] {\n color: var(--chat-text-secondary);\n}\n.c-chat__msg-status.is-failed[data-v-2bbae884] {\n color: var(--chat-failed-color);\n cursor: pointer;\n}\n\n/* ─── 时间分割线 ──────────────────────────────────────── */\n.c-chat__time-divider[data-v-2bbae884] {\n text-align: center;\n font-size: 11px;\n color: var(--chat-text-secondary);\n padding: 4px 0;\n}\n\n/* ─── 输入区域 ────────────────────────────────────────── */\n.c-chat__input-area[data-v-2bbae884] {\n display: flex;\n align-items: center;\n gap: 8px;\n min-height: var(--chat-input-height);\n padding: 10px 16px;\n background: var(--chat-input-bg);\n border-top: 1px solid var(--chat-border);\n}\n.c-chat__input-actions[data-v-2bbae884] {\n display: flex;\n gap: 4px;\n flex-shrink: 0;\n}\n.c-chat__input-wrap[data-v-2bbae884] {\n flex: 1;\n min-width: 0;\n}\n.c-chat__send-btn[data-v-2bbae884] {\n flex-shrink: 0;\n}\n\n/* ─── 空态 ────────────────────────────────────────────── */\n.c-chat__no-chat[data-v-2bbae884] {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 12px;\n color: var(--chat-text-secondary);\n}\n.c-chat__no-chat-icon[data-v-2bbae884] {\n font-size: 48px;\n opacity: 0.3;\n}\n\n/* ─── 响应式 ──────────────────────────────────────────── */\n@media (max-width: 640px) {\n.c-chat[data-v-2bbae884] {\n --chat-sidebar-width: 72px;\n}\n.c-chat__contact-info[data-v-2bbae884],\n .c-chat__search[data-v-2bbae884],\n .c-chat__unread[data-v-2bbae884] {\n display: none;\n}\n.c-chat__contact[data-v-2bbae884] {\n justify-content: center;\n padding: 10px 8px;\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;;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
1
|
+
{"version":3,"file":"C_Chat-CF1SU7mc.css","names":[],"sources":["../src/components/C_Chat/index.vue?vue&type=style&index=0&scoped=5b4bf8dc&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* ─── CSS 变量(基于项目主题变量,自动适配明暗) ───────────────────────── */\n.c-chat[data-v-5b4bf8dc] {\n --chat-bg: var(--card-color);\n --chat-sidebar-bg: var(--body-color);\n --chat-sidebar-width: 280px;\n --chat-header-bg: var(--card-color);\n --chat-header-height: 56px;\n --chat-input-bg: var(--body-color);\n --chat-input-height: 56px;\n --chat-bubble-self: var(--primary-color);\n --chat-bubble-other: var(--body-color);\n --chat-bubble-system: transparent;\n --chat-text-primary: var(--app-text-primary);\n --chat-text-secondary: var(--text-color-3);\n --chat-text-self: #fff;\n --chat-border: var(--border-color);\n --chat-online-color: #22c55e;\n --chat-unread-bg: #ef4444;\n --chat-unread-color: #fff;\n --chat-failed-color: #ef4444;\n --chat-shadow: rgba(0, 0, 0, 0.06);\n --chat-shadow-light: rgba(0, 0, 0, 0.03);\n --chat-radius: 12px;\n --chat-avatar-size: 36px;\n --chat-scrollbar-thumb: var(--border-color);\n display: flex;\n width: 100%;\n height: 100%;\n min-height: 0;\n border-radius: var(--chat-radius);\n overflow: hidden;\n background: var(--chat-bg);\n color: var(--chat-text-primary);\n font-size: 14px;\n border: 1px solid var(--chat-border);\n box-shadow: 0 2px 12px var(--chat-shadow);\n}\n\n/* ─── 联系人侧栏 ──────────────────────────────────────── */\n.c-chat__sidebar[data-v-5b4bf8dc] {\n display: flex;\n flex-direction: column;\n width: var(--chat-sidebar-width);\n min-width: var(--chat-sidebar-width);\n background: var(--chat-sidebar-bg);\n border-right: 1px solid var(--chat-border);\n box-shadow: 2px 0 8px var(--chat-shadow-light);\n}\n.c-chat__sidebar-header[data-v-5b4bf8dc] {\n display: flex;\n align-items: center;\n gap: 8px;\n height: var(--chat-header-height);\n padding: 0 16px;\n border-bottom: 1px solid var(--chat-border);\n font-weight: 600;\n font-size: 15px;\n}\n.c-chat__search[data-v-5b4bf8dc] {\n padding: 8px 12px;\n}\n.c-chat__contact-list[data-v-5b4bf8dc] {\n flex: 1;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n.c-chat__contact-list[data-v-5b4bf8dc]::-webkit-scrollbar {\n width: 4px;\n}\n.c-chat__contact-list[data-v-5b4bf8dc]::-webkit-scrollbar-thumb {\n background: var(--chat-scrollbar-thumb);\n border-radius: 2px;\n}\n.c-chat__contact[data-v-5b4bf8dc] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 16px;\n cursor: pointer;\n transition: background 0.15s;\n}\n.c-chat__contact[data-v-5b4bf8dc]:hover {\n background: color-mix(in srgb, var(--primary-color) 6%, transparent);\n}\n.c-chat__contact.is-active[data-v-5b4bf8dc] {\n background: color-mix(in srgb, var(--primary-color) 12%, transparent);\n}\n.c-chat__contact-avatar[data-v-5b4bf8dc] {\n position: relative;\n flex-shrink: 0;\n}\n.c-chat__avatar[data-v-5b4bf8dc] {\n width: var(--chat-avatar-size);\n height: var(--chat-avatar-size);\n border-radius: 50%;\n object-fit: cover;\n background: color-mix(in srgb, var(--border-color) 50%, transparent);\n}\n.c-chat__avatar-fallback[data-v-5b4bf8dc] {\n width: var(--chat-avatar-size);\n height: var(--chat-avatar-size);\n border-radius: 50%;\n background: color-mix(in srgb, var(--primary-color) 25%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 600;\n color: var(--app-text-primary);\n}\n.c-chat__online-dot[data-v-5b4bf8dc] {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: var(--chat-online-color);\n border: 2px solid var(--chat-sidebar-bg);\n}\n.c-chat__contact-info[data-v-5b4bf8dc] {\n flex: 1;\n min-width: 0;\n}\n.c-chat__contact-name[data-v-5b4bf8dc] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 13px;\n font-weight: 500;\n}\n.c-chat__contact-time[data-v-5b4bf8dc] {\n font-size: 11px;\n color: var(--chat-text-secondary);\n margin-left: 8px;\n flex-shrink: 0;\n}\n.c-chat__contact-last[data-v-5b4bf8dc] {\n font-size: 12px;\n color: var(--chat-text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-top: 2px;\n}\n.c-chat__unread[data-v-5b4bf8dc] {\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n border-radius: 9px;\n background: var(--chat-unread-bg);\n color: var(--chat-unread-color);\n font-size: 11px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n/* ─── 主聊天区域 ──────────────────────────────────────── */\n.c-chat__main[data-v-5b4bf8dc] {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.c-chat__header[data-v-5b4bf8dc] {\n display: flex;\n align-items: center;\n gap: 10px;\n height: var(--chat-header-height);\n padding: 0 20px;\n background: var(--chat-header-bg);\n border-bottom: 1px solid var(--chat-border);\n box-shadow: 0 1px 4px var(--chat-shadow-light);\n font-weight: 600;\n font-size: 15px;\n}\n.c-chat__header-status[data-v-5b4bf8dc] {\n font-size: 12px;\n font-weight: 400;\n color: var(--chat-text-secondary);\n}\n\n/* ─── 消息区域 ────────────────────────────────────────── */\n.c-chat__messages[data-v-5b4bf8dc] {\n flex: 1;\n overflow-y: auto;\n overscroll-behavior: contain;\n padding: 16px 20px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n background: color-mix(in srgb, var(--body-color) 50%, var(--card-color));\n}\n.c-chat__messages[data-v-5b4bf8dc]::-webkit-scrollbar {\n width: 4px;\n}\n.c-chat__messages[data-v-5b4bf8dc]::-webkit-scrollbar-thumb {\n background: var(--chat-scrollbar-thumb);\n border-radius: 2px;\n}\n.c-chat__load-more[data-v-5b4bf8dc] {\n text-align: center;\n padding: 8px;\n}\n.c-chat__empty[data-v-5b4bf8dc] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--chat-text-secondary);\n font-size: 13px;\n}\n\n/* ─── 消息气泡 ────────────────────────────────────────── */\n.c-chat__msg[data-v-5b4bf8dc] {\n display: flex;\n gap: 8px;\n max-width: 75%;\n}\n.c-chat__msg.is-self[data-v-5b4bf8dc] {\n margin-left: auto;\n flex-direction: row-reverse;\n}\n.c-chat__msg.is-system[data-v-5b4bf8dc] {\n max-width: 100%;\n justify-content: center;\n align-self: center;\n}\n.c-chat__msg-avatar[data-v-5b4bf8dc] {\n flex-shrink: 0;\n margin-top: 2px;\n}\n.c-chat__msg-body[data-v-5b4bf8dc] {\n display: flex;\n flex-direction: column;\n}\n.c-chat__msg-username[data-v-5b4bf8dc] {\n font-size: 12px;\n color: var(--chat-text-secondary);\n margin-bottom: 2px;\n}\n.is-self .c-chat__msg-username[data-v-5b4bf8dc] {\n text-align: right;\n}\n.c-chat__bubble[data-v-5b4bf8dc] {\n padding: 10px 14px;\n border-radius: 16px;\n line-height: 1.5;\n word-break: break-word;\n white-space: pre-wrap;\n}\n.is-other .c-chat__bubble[data-v-5b4bf8dc] {\n background: var(--chat-bubble-other);\n border: 1px solid var(--chat-border);\n border-top-left-radius: 4px;\n}\n.is-self .c-chat__bubble[data-v-5b4bf8dc] {\n background: var(--chat-bubble-self);\n color: var(--chat-text-self);\n border-top-right-radius: 4px;\n}\n.is-system .c-chat__bubble[data-v-5b4bf8dc] {\n background: var(--chat-bubble-system);\n color: var(--chat-text-secondary);\n font-size: 12px;\n padding: 4px 12px;\n}\n.c-chat__msg-image[data-v-5b4bf8dc] {\n max-width: 240px;\n max-height: 180px;\n border-radius: 12px;\n cursor: pointer;\n object-fit: cover;\n}\n.is-self .c-chat__msg-image[data-v-5b4bf8dc] {\n border-top-right-radius: 4px;\n}\n.is-other .c-chat__msg-image[data-v-5b4bf8dc] {\n border-top-left-radius: 4px;\n}\n.c-chat__msg-file[data-v-5b4bf8dc] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n border-radius: 12px;\n cursor: pointer;\n}\n.is-other .c-chat__msg-file[data-v-5b4bf8dc] {\n background: var(--chat-bubble-other);\n border: 1px solid var(--chat-border);\n border-top-left-radius: 4px;\n}\n.is-self .c-chat__msg-file[data-v-5b4bf8dc] {\n background: var(--chat-bubble-self);\n color: var(--chat-text-self);\n border-top-right-radius: 4px;\n}\n.c-chat__file-info[data-v-5b4bf8dc] {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.c-chat__file-name[data-v-5b4bf8dc] {\n font-size: 13px;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.c-chat__file-size[data-v-5b4bf8dc] {\n font-size: 11px;\n opacity: 0.6;\n}\n.c-chat__msg-time[data-v-5b4bf8dc] {\n font-size: 11px;\n color: var(--chat-text-secondary);\n margin-top: 4px;\n}\n.is-self .c-chat__msg-time[data-v-5b4bf8dc] {\n text-align: right;\n}\n.c-chat__msg-status[data-v-5b4bf8dc] {\n font-size: 11px;\n margin-top: 2px;\n text-align: right;\n}\n.c-chat__msg-status.is-sending[data-v-5b4bf8dc] {\n color: var(--chat-text-secondary);\n}\n.c-chat__msg-status.is-failed[data-v-5b4bf8dc] {\n color: var(--chat-failed-color);\n cursor: pointer;\n}\n\n/* ─── 时间分割线 ──────────────────────────────────────── */\n.c-chat__time-divider[data-v-5b4bf8dc] {\n text-align: center;\n font-size: 11px;\n color: var(--chat-text-secondary);\n padding: 4px 0;\n}\n\n/* ─── 输入区域 ────────────────────────────────────────── */\n.c-chat__input-area[data-v-5b4bf8dc] {\n display: flex;\n align-items: center;\n gap: 8px;\n min-height: var(--chat-input-height);\n padding: 10px 16px;\n background: var(--chat-input-bg);\n border-top: 1px solid var(--chat-border);\n}\n.c-chat__input-actions[data-v-5b4bf8dc] {\n display: flex;\n gap: 4px;\n flex-shrink: 0;\n}\n.c-chat__input-wrap[data-v-5b4bf8dc] {\n flex: 1;\n min-width: 0;\n}\n.c-chat__send-btn[data-v-5b4bf8dc] {\n flex-shrink: 0;\n}\n\n/* ─── 空态 ────────────────────────────────────────────── */\n.c-chat__no-chat[data-v-5b4bf8dc] {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 12px;\n color: var(--chat-text-secondary);\n}\n.c-chat__no-chat-icon[data-v-5b4bf8dc] {\n font-size: 48px;\n opacity: 0.3;\n}\n\n/* ─── 响应式 ──────────────────────────────────────────── */\n@media (max-width: 640px) {\n.c-chat[data-v-5b4bf8dc] {\n --chat-sidebar-width: 72px;\n}\n.c-chat__contact-info[data-v-5b4bf8dc],\n .c-chat__search[data-v-5b4bf8dc],\n .c-chat__unread[data-v-5b4bf8dc] {\n display: none;\n}\n.c-chat__contact[data-v-5b4bf8dc] {\n justify-content: center;\n padding: 10px 8px;\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;;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|