@robot-admin/naive-ui-components 0.6.29 → 0.6.31
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/CHANGELOG.md +48 -48
- package/README.md +277 -277
- package/dist/C_ActionBar-jZPsiXtT.css.map +1 -0
- package/dist/C_ActionBar-nnfbZCea.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-A3NXx_sF.css.map} +1 -1
- package/dist/{C_AntV-BbkHc-_a.css.map → C_AntV-D2Zp2qQF.css.map} +1 -1
- package/dist/C_AntV.css +78 -78
- package/dist/C_AntV.js.map +1 -1
- package/dist/C_AntV2.js +2 -2
- package/dist/C_AntV2.js.map +1 -1
- package/dist/{C_AudioPlayer-DKRIGhi7.css.map → C_AudioPlayer-CXl4yP_m.css.map} +1 -1
- package/dist/{C_AudioPlayer-DlB6eNsa.css.map → C_AudioPlayer-CcBtt71m.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-CtPhfH9h.css.map} +1 -1
- package/dist/{C_AvatarGroup-DatHaUlY.css.map → C_AvatarGroup-M1dNPH3E.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-DjTmDkbQ.css.map} +1 -1
- package/dist/{C_Barcode-muJdc_O4.css.map → C_Barcode-Do1Ozsmh.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.map +1 -1
- package/dist/{C_Captcha-9_hk6VmY.css.map → C_Captcha-CZmAETly.css.map} +1 -1
- package/dist/{C_Captcha-MtASlJ0f.css.map → C_Captcha-Ccq3DMrR.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_Chat-CJ8KESTM.css.map +1 -0
- package/dist/C_Chat-DzV4AFLd.css.map +1 -0
- package/dist/C_Chat.css +78 -72
- 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-Cv5BESaN.css.map} +1 -1
- package/dist/{C_City-Bb3W-KaN.css.map → C_City-DNKv4MpH.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-DPZlNSxL.css.map +1 -0
- package/dist/C_Code-avZjAnHD.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-BkOivqn3.css.map} +1 -1
- package/dist/{C_CollapsePanel-pcVJA_4z.css.map → C_CollapsePanel-CedsEM0N.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-CCsCeI39.css.map} +1 -1
- package/dist/{C_ContextMenu-u1LixF3_.css.map → C_ContextMenu-DOTBeltf.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-C0-8b5af.css.map} +1 -1
- package/dist/{C_Cron-iw3qpMsy.css.map → C_Cron-DqHQ92LN.css.map} +1 -1
- package/dist/C_Cron.css +37 -37
- 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.map +1 -1
- package/dist/{C_Draggable-BCjIvIwT.css.map → C_Draggable-Bq6o0qXn.css.map} +1 -1
- package/dist/{C_Draggable-DwkSlCOS.css.map → C_Draggable-r6nhx3yM.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-C49qURgb.css.map +1 -0
- package/dist/C_Editor-DuxBD9Qg.css.map +1 -0
- package/dist/C_Editor.css +60 -29
- 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-BVarVvnD.css.map} +1 -1
- package/dist/{C_FilePreview-DJudcIbW.css.map → C_FilePreview-DHGlV4OR.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-BciQUPpS.css.map} +1 -1
- package/dist/{C_Form-D_gwQ7hC.css.map → C_Form-CKHvXL3O.css.map} +1 -1
- package/dist/C_Form.css +222 -222
- 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-Bmd2CmG6.css.map} +1 -1
- package/dist/{C_FormSearch-DUGOoX0u.css.map → C_FormSearch-DBNtnjaL.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-3WG2vtQl.css.map} +1 -1
- package/dist/{C_FormulaEditor-Cy7mjfVO.css.map → C_FormulaEditor-Cm0CokN5.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-1U4VlG7X.css.map +1 -0
- package/dist/C_FullCalendar-DLUdCtqf.css.map +1 -0
- package/dist/C_FullCalendar.css +3 -3
- 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-BNtNpLLD.css.map → C_GlobalSearch-B6wK3m3k.css.map} +1 -1
- package/dist/{C_GlobalSearch-BlMeQ2D9.css.map → C_GlobalSearch-DoPjldFm.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.d.cts +2 -2
- package/dist/C_Guide.d.ts +2 -2
- 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-D3L2-J_J.css.map} +1 -1
- package/dist/{C_ImageCropper-CylwGuzS.css.map → C_ImageCropper-DrmUlaLi.css.map} +1 -1
- package/dist/C_ImageCropper.css +10 -10
- 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.map +1 -1
- package/dist/{C_Login-BkdnkBKX.css.map → C_Login-Cst_W1XC.css.map} +1 -1
- package/dist/{C_Login-VkMM6OJ2.css.map → C_Login-DWZ_6K1x.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-BCJmDnJT.css.map} +1 -1
- package/dist/{C_Map-LEXIx6zM.css.map → C_Map-WUMXSAfy.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-7J0uPEuk.css.map +1 -0
- package/dist/C_Markdown-C7Lg0_9z.css.map +1 -0
- package/dist/C_Markdown.css +48 -42
- 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_OrgChart-ChZu346B.css.map +1 -0
- package/dist/C_OrgChart-DqBufOv5.css.map +1 -0
- package/dist/C_OrgChart.cjs +1 -0
- package/dist/C_OrgChart.css +282 -0
- package/dist/C_OrgChart.d.cts +2 -0
- package/dist/C_OrgChart.d.ts +2 -0
- package/dist/C_OrgChart.js +1 -0
- package/dist/C_OrgChart.js.map +1 -0
- package/dist/C_OrgChart2.js +2 -0
- package/dist/C_OrgChart2.js.map +1 -0
- package/dist/C_Progress.d.cts +1 -1
- package/dist/C_Progress.d.ts +1 -1
- package/dist/{C_QRCode-CFNTda_1.css.map → C_QRCode-DMxSyogU.css.map} +1 -1
- package/dist/{C_QRCode-CmWr9lK-.css.map → C_QRCode-G7fiAkm4.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-BJMvVPWT.css.map} +1 -1
- package/dist/{C_Signature-Bz_uNbwv.css.map → C_Signature-BJUHx2BF.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-BNPbaut7.css.map +1 -0
- package/dist/C_Skeleton-Djsjw8XY.css.map +1 -0
- package/dist/C_Skeleton.cjs +1 -0
- package/dist/C_Skeleton.css +253 -0
- package/dist/C_Skeleton.d.cts +2 -0
- package/dist/C_Skeleton.d.ts +2 -0
- package/dist/C_Skeleton.js +1 -0
- package/dist/C_Skeleton.js.map +1 -0
- package/dist/C_Skeleton2.js +2 -0
- package/dist/C_Skeleton2.js.map +1 -0
- package/dist/{C_SplitPane-BOwr1C7K.css.map → C_SplitPane-Br2eK8IG.css.map} +1 -1
- package/dist/{C_SplitPane-N-a_D-7F.css.map → C_SplitPane-DuyzUhKB.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-BHYNJI1l.css.map +1 -0
- package/dist/C_Steps-DY7vl-4I.css.map +1 -0
- package/dist/C_Steps.css +38 -38
- package/dist/C_Steps.d.cts +1 -1
- package/dist/C_Steps.d.ts +1 -1
- 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-B8hpzOcR.css.map +1 -0
- package/dist/C_Table-CGP3n_u0.css.map +1 -0
- package/dist/C_Table.css +118 -93
- package/dist/C_Table.d.cts +2 -2
- package/dist/C_Table.d.ts +2 -2
- package/dist/C_Table.js.map +1 -1
- package/dist/C_Table2.js +1 -1
- package/dist/C_Table2.js.map +1 -1
- package/dist/{C_TagsView-JIkRrAHT.css.map → C_TagsView-BsutyC3U.css.map} +1 -1
- package/dist/{C_TagsView-mrh0FN4H.css.map → C_TagsView-Crm7yWg9.css.map} +1 -1
- package/dist/C_TagsView.css +36 -36
- package/dist/C_TagsView.d.cts +1 -1
- package/dist/C_TagsView.d.ts +1 -1
- 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.d.cts +1 -1
- package/dist/C_Theme.d.ts +1 -1
- package/dist/C_Time-Bd_e1YDN.css.map +1 -0
- package/dist/C_Time-CKb_fwdm.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-DG70WtJP.css.map} +1 -1
- package/dist/{C_Timeline-DTuSCX6p.css.map → C_Timeline-Dzxmmdjg.css.map} +1 -1
- package/dist/C_Timeline.css +45 -45
- package/dist/C_Timeline.d.cts +1 -1
- package/dist/C_Timeline.d.ts +1 -1
- 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-CCEqnC-v.css.map} +1 -1
- package/dist/{C_Transfer-Dpq7ezWC.css.map → C_Transfer-CStPm4NP.css.map} +1 -1
- package/dist/C_Transfer.css +31 -31
- package/dist/C_Transfer.d.cts +1 -1
- package/dist/C_Transfer.d.ts +1 -1
- 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-B-Le4hjQ.css.map} +1 -1
- package/dist/{C_Tree-ulfm7b-P.css.map → C_Tree-DnGc_MPb.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-S30RmC9t.css.map → C_Upload-CFAxVGVz.css.map} +1 -1
- package/dist/{C_Upload-i8LB_29U.css.map → C_Upload-D8_QeSV0.css.map} +1 -1
- package/dist/C_Upload.css +14 -9
- package/dist/C_Upload.js.map +1 -1
- package/dist/C_Upload2.js +1 -1
- package/dist/C_Upload2.js.map +1 -1
- package/dist/{C_VideoPlayer-4J96tKfK.css.map → C_VideoPlayer-Cdgv4Zq0.css.map} +1 -1
- package/dist/{C_VideoPlayer-D35seHkm.css.map → C_VideoPlayer-rm0MODUv.css.map} +1 -1
- package/dist/C_VideoPlayer.css +13 -13
- package/dist/C_VideoPlayer.js.map +1 -1
- package/dist/C_VideoPlayer2.js +1 -1
- package/dist/C_VideoPlayer2.js.map +1 -1
- package/dist/{C_VtableGantt-C2lxFmWg.css.map → C_VtableGantt-BpY-Rng3.css.map} +1 -1
- package/dist/{C_VtableGantt-Dwnkw_WL.css.map → C_VtableGantt-DB87-jdS.css.map} +1 -1
- package/dist/C_VtableGantt.css +15 -15
- package/dist/C_VtableGantt.d.cts +1 -1
- package/dist/C_VtableGantt.d.ts +1 -1
- 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_WorkFlow-2hJfvvTK.css.map → C_WorkFlow-7F6op6qN.css.map} +1 -1
- package/dist/{C_WorkFlow-DHoNjl8-.css.map → C_WorkFlow-Cy3HWA6A.css.map} +1 -1
- package/dist/C_WorkFlow.css +108 -108
- 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 +2 -2
- package/dist/data.d.ts +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +22 -20
- package/dist/index.d.ts +22 -20
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.vue.d.ts +1 -1
- package/dist/index10.vue.d.ts +4 -4
- package/dist/index11.vue.d.ts +3 -3
- package/dist/index13.vue.d.ts +1 -1
- package/dist/index14.vue.d.ts +85 -7
- package/dist/index15.vue.d.ts +5 -5
- package/dist/index17.vue.d.ts +1 -1
- package/dist/index18.vue.d.ts +2 -2
- package/dist/index2.vue.d.ts +5 -5
- package/dist/index20.vue.d.ts +87 -40
- package/dist/index21.vue.d.ts +47 -27
- package/dist/index22.vue.d.ts +95 -79
- package/dist/index23.vue.d.ts +24 -7
- package/dist/index24.vue.d.ts +76 -100
- package/dist/index25.vue.d.ts +7 -70
- package/dist/index26.vue.d.ts +99 -649
- package/dist/index27.vue.d.ts +81 -0
- package/dist/index28.vue.d.ts +662 -0
- package/dist/index3.vue.d.ts +3 -3
- package/dist/index4.vue.d.ts +6 -6
- package/dist/index8.vue.d.ts +2 -2
- package/dist/menuAdapter.js.map +1 -1
- package/dist/resolver.cjs +1 -1
- package/dist/resolver.cjs.map +1 -1
- package/dist/resolver.d.cts +1 -1
- package/dist/resolver.d.ts +1 -1
- package/dist/resolver.js +1 -1
- package/dist/resolver.js.map +1 -1
- package/dist/style.css +2305 -1693
- package/dist/useCalendarEvents.d.ts +1 -1
- package/dist/useCollapsePanel.d.ts +2 -2
- package/dist/useCropperCore.d.ts +4 -4
- package/dist/useDraggableLayout.d.ts +10 -10
- package/dist/useDynamicFormState.d.ts +10 -10
- package/dist/useInfiniteScroll.d.ts +2 -2
- package/dist/useModalEdit.d.ts +47 -1
- package/dist/useQRCode.d.ts +3 -3
- package/dist/useSplitResize.d.ts +7 -7
- package/dist/useTimeSelection.d.ts +2 -2
- package/dist/useTreeOperations.d.ts +4 -4
- package/dist/useWorkflowValidation.d.ts +2 -2
- package/package.json +5 -1
- package/dist/C_ActionBar-DYG0Yf3A.css.map +0 -1
- package/dist/C_ActionBar-MAjRhqcI.css.map +0 -1
- package/dist/C_Chat-CcjZdAwu.css.map +0 -1
- package/dist/C_Chat-Diq7tyWU.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_Editor-D0_6UhIa.css.map +0 -1
- package/dist/C_Editor-OlxIF9-5.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_Markdown-Kujzx1qG.css.map +0 -1
- package/dist/C_Markdown-YCAmBbNF.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_Table-BV1wUw6f.css.map +0 -1
- package/dist/C_Table-LlJ-JEdm.css.map +0 -1
- package/dist/C_Time-BzyQVvTS.css.map +0 -1
- package/dist/C_Time-DmpKLQHc.css.map +0 -1
package/dist/C_TagsView2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_TagsView2.js","names":[],"sources":["../src/components/C_TagsView/useTagsView.ts","../src/components/C_TagsView/index.vue","../src/components/C_TagsView/index.vue","../src/components/C_TagsView/index.vue"],"sourcesContent":["import { ref, type Ref } from 'vue'\nimport type { TagItem } from '../_shared'\n\nexport interface UseTagsViewOptions {\n /** localStorage 持久化 key,传空字符串则不持久化 */\n persistKey?: string\n /** 首页路径,用于 removeAll 后的回退 */\n homePath?: string\n}\n\nconst STORAGE_KEY_DEFAULT = '__tags_view_list__'\n\n/**\n * 标签页管理 composable\n *\n * 独立于组件使用 — 可在任何地方管理标签状态\n *\n * @example 独立使用\n * ```ts\n * const tags = useTagsView({ persistKey: 'my-tags' })\n * tags.addTag({ path: '/home', title: '首页', meta: { affix: true } })\n * ```\n */\nexport function useTagsView(options: UseTagsViewOptions = {}) {\n const { persistKey = STORAGE_KEY_DEFAULT, homePath = '/home' } = options\n\n // ====== 持久化 ======\n const loadPersistedTags = (): TagItem[] => {\n if (!persistKey) return []\n try {\n const raw = localStorage.getItem(persistKey)\n return raw ? JSON.parse(raw) : []\n } catch {\n return []\n }\n }\n\n const persistTags = (tags: TagItem[]) => {\n if (!persistKey) return\n try {\n localStorage.setItem(persistKey, JSON.stringify(tags))\n } catch {\n /* silently fail */\n }\n }\n\n // ====== State ======\n const tagsViewList: Ref<TagItem[]> = ref(loadPersistedTags())\n const activeTag = ref('')\n\n const syncPersist = () => persistTags(tagsViewList.value)\n\n // ====== Actions ======\n\n const initTags = (tags?: TagItem[]) => {\n if (tags) {\n tagsViewList.value = tags\n } else {\n // 去重\n tagsViewList.value = [\n ...new Map(tagsViewList.value.map(tag => [tag.path, tag])).values(),\n ]\n }\n syncPersist()\n }\n\n const setActiveTag = (path: string) => {\n activeTag.value = path\n }\n\n const addTag = (tag: TagItem) => {\n const existingIndex = tagsViewList.value.findIndex(\n item => item.path === tag.path\n )\n\n if (existingIndex === -1) {\n tagsViewList.value.push(tag)\n } else {\n const existing = tagsViewList.value[existingIndex]\n if (existing.title !== tag.title || !existing.originalTitle) {\n existing.title = tag.title\n existing.originalTitle = tag.originalTitle || existing.originalTitle\n }\n }\n\n setActiveTag(tag.path)\n syncPersist()\n }\n\n const removeTag = (index: number): string | null => {\n if (index >= 0 && index < tagsViewList.value.length) {\n const removed = tagsViewList.value.splice(index, 1)[0]?.path ?? null\n syncPersist()\n return removed\n }\n return null\n }\n\n const removeOtherTags = (index: number) => {\n if (index === 0) {\n tagsViewList.value = [tagsViewList.value[0]].filter(Boolean)\n } else {\n tagsViewList.value = [\n tagsViewList.value[0],\n tagsViewList.value[index],\n ].filter(Boolean)\n }\n syncPersist()\n }\n\n const removeLeftTags = (index: number) => {\n tagsViewList.value = [\n tagsViewList.value[0],\n ...tagsViewList.value.slice(index),\n ]\n syncPersist()\n }\n\n const removeRightTags = (index: number) => {\n tagsViewList.value = tagsViewList.value.slice(0, index + 1)\n syncPersist()\n }\n\n const removeAllTags = () => {\n tagsViewList.value = tagsViewList.value.filter(tag => tag.meta?.affix)\n syncPersist()\n }\n\n return {\n tagsViewList,\n activeTag,\n homePath,\n initTags,\n setActiveTag,\n addTag,\n removeTag,\n removeOtherTags,\n removeLeftTags,\n removeRightTags,\n removeAllTags,\n }\n}\n","/* unplugin-vue-components disabled */<!--\n * @Description: 通用标签页导航组件 — 路由感知的多标签管理\n *\n * 内置功能:\n * - 路由变化自动添加标签\n * - 持久化(localStorage,可关闭)\n * - 右键菜单(关闭/关闭其他/关闭左侧/关闭右侧/关闭所有)\n * - 水平滚轮滚动\n * - i18n 支持(labelFormatter)\n *\n * @example 基础用法\n * ```vue\n * <C_TagsView\n * :label-formatter=\"$t\"\n * @select=\"router.push\"\n * />\n * ```\n *\n * @example 自定义首页 + 菜单文案\n * ```vue\n * <C_TagsView\n * home-path=\"/dashboard\"\n * home-title=\"Dashboard\"\n * :context-menu-labels=\"{ close: 'Close', closeAll: 'Close All', ... }\"\n * />\n * ```\n *\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"tags-view-container\">\n <div\n class=\"tags-track\"\n ref=\"tagsTrack\"\n @wheel=\"handleWheel\"\n >\n <div\n class=\"tags-container\"\n ref=\"tagsContainer\"\n >\n <NTag\n v-for=\"(tag, index) in tags.tagsViewList.value\"\n :key=\"tag.path\"\n :type=\"isActive(tag) ? 'primary' : 'default'\"\n :closable=\"!isAffix(tag)\"\n :data-path=\"tag.path\"\n @close.stop=\"handleClose(tag, index)\"\n @click=\"navigateToTag(tag)\"\n @contextmenu.prevent=\"\n (e: MouseEvent) => showContextMenu(e, tag, index)\n \"\n >\n <template #icon>\n <C_Icon\n :name=\"tag.icon\"\n :size=\"12\"\n />\n </template>\n {{ tag.title }}\n </NTag>\n </div>\n </div>\n <NDropdown\n v-if=\"contextMenuVisible\"\n :show=\"contextMenuVisible\"\n :options=\"contextMenuOptions\"\n :x=\"contextMenuX\"\n :y=\"contextMenuY\"\n @clickoutside=\"closeContextMenu\"\n @select=\"handleContextMenuSelect\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref, computed, watch, nextTick, h } from 'vue'\n import { useRoute, useRouter } from 'vue-router'\n import { C_Icon } from '../C_Icon'\n import type { TagItem } from '../_shared'\n import { useTagsView, type UseTagsViewOptions } from './useTagsView'\n\n defineOptions({ name: 'C_TagsView' })\n\n export interface ContextMenuLabels {\n close?: string\n closeOthers?: string\n closeLeft?: string\n closeRight?: string\n closeAll?: string\n }\n\n const props = withDefaults(\n defineProps<{\n /**\n * 标签文本格式化函数(用于 i18n)\n */\n labelFormatter?: (label: string) => string\n /** 首页路径 */\n homePath?: string\n /** 首页标题(原始文本) */\n homeTitle?: string\n /** 首页图标 */\n homeIcon?: string\n /** 持久化 localStorage key,传空字符串禁用 */\n persistKey?: string\n /** 右键菜单文案(国际化适配) */\n contextMenuLabels?: ContextMenuLabels\n /** useTagsView 配置项(优先级最高) */\n tagsViewOptions?: UseTagsViewOptions\n }>(),\n {\n homePath: '/home',\n homeTitle: '首页',\n homeIcon: 'mdi:home',\n persistKey: '__tags_view_list__',\n contextMenuLabels: () => ({\n close: '关闭',\n closeOthers: '关闭其他',\n closeLeft: '关闭左侧',\n closeRight: '关闭右侧',\n closeAll: '关闭所有',\n }),\n }\n )\n\n const emit = defineEmits<{\n /** 标签被关闭后跳转 */\n close: [fallbackPath: string]\n /** 关闭全部后 */\n closeAll: []\n }>()\n\n const route = useRoute()\n const router = useRouter()\n\n // ====== Tags composable ======\n const tags = useTagsView(\n props.tagsViewOptions ?? {\n persistKey: props.persistKey,\n homePath: props.homePath,\n }\n )\n\n // ====== 首次渲染前重新翻译持久化标签 ======\n if (tags.tagsViewList.value.length > 0 && props.labelFormatter) {\n const allRoutes = router.getRoutes()\n const translatedTags = tags.tagsViewList.value.map(tag => {\n const matchedRoute = allRoutes.find(r => r.path === tag.path)\n const originalTitle =\n tag.originalTitle || (matchedRoute?.meta?.title as string) || tag.title\n return {\n ...tag,\n originalTitle,\n title: props.labelFormatter!(originalTitle),\n }\n })\n tags.initTags(translatedTags)\n }\n\n const formatLabel = (title: string): string =>\n props.labelFormatter ? props.labelFormatter(title) : title\n\n // ====== UI State ======\n\n const contextMenuVisible = ref(false)\n const contextMenuX = ref(0)\n const contextMenuY = ref(0)\n const selectedTag = ref<TagItem | null>(null)\n const selectedIndex = ref(-1)\n const tagsTrack = ref<HTMLElement>()\n const tagsContainer = ref<HTMLElement>()\n\n // ====== Helpers ======\n const isActive = (tag: TagItem): boolean => tag.path === route.path\n const isAffix = (tag: TagItem) => tag.meta?.affix\n\n const handleWheel = (e: WheelEvent) => {\n const container = tagsContainer.value\n if (!container) return\n e.preventDefault()\n container.scrollTo({\n left: container.scrollLeft + e.deltaY,\n behavior: 'smooth',\n })\n }\n\n const scrollToTag = (path: string) => {\n nextTick(() => {\n const targetTag = tagsContainer.value?.querySelector(\n `[data-path=\"${path}\"]`\n ) as HTMLElement\n if (targetTag) {\n targetTag.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n })\n }\n })\n }\n\n // ====== Actions ======\n\n const navigateToTag = (tag: TagItem) => {\n if (tag.path !== route.path) {\n router.push(tag.path)\n }\n scrollToTag(tag.path)\n }\n\n const handleClose = (tag: TagItem, index: number) => {\n if (isAffix(tag)) return\n\n const wasActive = isActive(tag)\n const tagsBeforeRemove = tags.tagsViewList.value.length\n tags.removeTag(index)\n\n if (wasActive) {\n const remaining = tags.tagsViewList.value\n const wasLastTag = index === tagsBeforeRemove - 1\n let fallbackPath: string\n\n if (wasLastTag) {\n fallbackPath = remaining[index - 1]?.path || props.homePath\n } else {\n fallbackPath = remaining[remaining.length - 1]?.path || props.homePath\n }\n\n router.push(fallbackPath)\n emit('close', fallbackPath)\n }\n }\n\n const showContextMenu = (event: MouseEvent, tag: TagItem, index: number) => {\n event.preventDefault()\n selectedTag.value = tag\n selectedIndex.value = index\n contextMenuVisible.value = true\n contextMenuX.value = event.clientX\n contextMenuY.value = event.clientY\n }\n\n const closeContextMenu = () => (contextMenuVisible.value = false)\n\n const contextMenuOptions = computed(() => {\n const labels = props.contextMenuLabels\n return [\n {\n type: 'option' as const,\n label: labels.close ?? '关闭',\n key: 'close',\n disabled: isAffix(selectedTag.value as TagItem),\n icon: () => h(C_Icon, { name: 'mdi:close', size: 16 }),\n },\n {\n type: 'option' as const,\n label: labels.closeOthers ?? '关闭其他',\n key: 'closeOthers',\n icon: () => h(C_Icon, { name: 'mdi:arrow-left-right-bold', size: 16 }),\n },\n {\n type: 'option' as const,\n label: labels.closeLeft ?? '关闭左侧',\n key: 'closeLeft',\n icon: () => h(C_Icon, { name: 'mdi:align-horizontal-left', size: 16 }),\n },\n {\n type: 'option' as const,\n label: labels.closeRight ?? '关闭右侧',\n key: 'closeRight',\n icon: () => h(C_Icon, { name: 'mdi:align-horizontal-right', size: 16 }),\n },\n {\n type: 'option' as const,\n label: labels.closeAll ?? '关闭所有',\n key: 'closeAll',\n icon: () => h(C_Icon, { name: 'mdi:tally-mark-5', size: 16 }),\n },\n ]\n })\n\n const handleContextMenuSelect = (key: string) => {\n if (!selectedTag.value || selectedIndex.value === -1) return\n\n switch (key) {\n case 'close':\n handleClose(selectedTag.value, selectedIndex.value)\n break\n case 'closeOthers':\n tags.removeOtherTags(selectedIndex.value)\n break\n case 'closeLeft':\n tags.removeLeftTags(selectedIndex.value)\n break\n case 'closeRight':\n tags.removeRightTags(selectedIndex.value)\n break\n case 'closeAll':\n tags.removeAllTags()\n router.push(props.homePath)\n emit('closeAll')\n break\n }\n closeContextMenu()\n }\n\n // ====== 路由自动跟踪 ======\n watch(\n () => route.path,\n (newPath: string) => {\n const originalTitle =\n newPath === props.homePath\n ? props.homeTitle\n : (route.meta.title as string) || 'Unnamed Page'\n\n tags.addTag({\n path: newPath,\n originalTitle,\n title: formatLabel(originalTitle),\n icon:\n newPath === props.homePath\n ? props.homeIcon\n : (route.meta.icon as string),\n meta: { affix: route.meta.affix as boolean },\n })\n\n tags.setActiveTag(newPath)\n scrollToTag(newPath)\n },\n { immediate: true }\n )\n\n // ====== 暴露 ======\n defineExpose({\n /** useTagsView composable 实例 */\n tags,\n /** 滚动到指定标签 */\n scrollToTag,\n })\n</script>\n\n<style lang=\"scss\" scoped>\n @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Description: 通用标签页导航组件 — 路由感知的多标签管理\n *\n * 内置功能:\n * - 路由变化自动添加标签\n * - 持久化(localStorage,可关闭)\n * - 右键菜单(关闭/关闭其他/关闭左侧/关闭右侧/关闭所有)\n * - 水平滚轮滚动\n * - i18n 支持(labelFormatter)\n *\n * @example 基础用法\n * ```vue\n * <C_TagsView\n * :label-formatter=\"$t\"\n * @select=\"router.push\"\n * />\n * ```\n *\n * @example 自定义首页 + 菜单文案\n * ```vue\n * <C_TagsView\n * home-path=\"/dashboard\"\n * home-title=\"Dashboard\"\n * :context-menu-labels=\"{ close: 'Close', closeAll: 'Close All', ... }\"\n * />\n * ```\n *\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"tags-view-container\">\n <div\n class=\"tags-track\"\n ref=\"tagsTrack\"\n @wheel=\"handleWheel\"\n >\n <div\n class=\"tags-container\"\n ref=\"tagsContainer\"\n >\n <NTag\n v-for=\"(tag, index) in tags.tagsViewList.value\"\n :key=\"tag.path\"\n :type=\"isActive(tag) ? 'primary' : 'default'\"\n :closable=\"!isAffix(tag)\"\n :data-path=\"tag.path\"\n @close.stop=\"handleClose(tag, index)\"\n @click=\"navigateToTag(tag)\"\n @contextmenu.prevent=\"\n (e: MouseEvent) => showContextMenu(e, tag, index)\n \"\n >\n <template #icon>\n <C_Icon\n :name=\"tag.icon\"\n :size=\"12\"\n />\n </template>\n {{ tag.title }}\n </NTag>\n </div>\n </div>\n <NDropdown\n v-if=\"contextMenuVisible\"\n :show=\"contextMenuVisible\"\n :options=\"contextMenuOptions\"\n :x=\"contextMenuX\"\n :y=\"contextMenuY\"\n @clickoutside=\"closeContextMenu\"\n @select=\"handleContextMenuSelect\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref, computed, watch, nextTick, h } from 'vue'\n import { useRoute, useRouter } from 'vue-router'\n import { C_Icon } from '../C_Icon'\n import type { TagItem } from '../_shared'\n import { useTagsView, type UseTagsViewOptions } from './useTagsView'\n\n defineOptions({ name: 'C_TagsView' })\n\n export interface ContextMenuLabels {\n close?: string\n closeOthers?: string\n closeLeft?: string\n closeRight?: string\n closeAll?: string\n }\n\n const props = withDefaults(\n defineProps<{\n /**\n * 标签文本格式化函数(用于 i18n)\n */\n labelFormatter?: (label: string) => string\n /** 首页路径 */\n homePath?: string\n /** 首页标题(原始文本) */\n homeTitle?: string\n /** 首页图标 */\n homeIcon?: string\n /** 持久化 localStorage key,传空字符串禁用 */\n persistKey?: string\n /** 右键菜单文案(国际化适配) */\n contextMenuLabels?: ContextMenuLabels\n /** useTagsView 配置项(优先级最高) */\n tagsViewOptions?: UseTagsViewOptions\n }>(),\n {\n homePath: '/home',\n homeTitle: '首页',\n homeIcon: 'mdi:home',\n persistKey: '__tags_view_list__',\n contextMenuLabels: () => ({\n close: '关闭',\n closeOthers: '关闭其他',\n closeLeft: '关闭左侧',\n closeRight: '关闭右侧',\n closeAll: '关闭所有',\n }),\n }\n )\n\n const emit = defineEmits<{\n /** 标签被关闭后跳转 */\n close: [fallbackPath: string]\n /** 关闭全部后 */\n closeAll: []\n }>()\n\n const route = useRoute()\n const router = useRouter()\n\n // ====== Tags composable ======\n const tags = useTagsView(\n props.tagsViewOptions ?? {\n persistKey: props.persistKey,\n homePath: props.homePath,\n }\n )\n\n // ====== 首次渲染前重新翻译持久化标签 ======\n if (tags.tagsViewList.value.length > 0 && props.labelFormatter) {\n const allRoutes = router.getRoutes()\n const translatedTags = tags.tagsViewList.value.map(tag => {\n const matchedRoute = allRoutes.find(r => r.path === tag.path)\n const originalTitle =\n tag.originalTitle || (matchedRoute?.meta?.title as string) || tag.title\n return {\n ...tag,\n originalTitle,\n title: props.labelFormatter!(originalTitle),\n }\n })\n tags.initTags(translatedTags)\n }\n\n const formatLabel = (title: string): string =>\n props.labelFormatter ? props.labelFormatter(title) : title\n\n // ====== UI State ======\n\n const contextMenuVisible = ref(false)\n const contextMenuX = ref(0)\n const contextMenuY = ref(0)\n const selectedTag = ref<TagItem | null>(null)\n const selectedIndex = ref(-1)\n const tagsTrack = ref<HTMLElement>()\n const tagsContainer = ref<HTMLElement>()\n\n // ====== Helpers ======\n const isActive = (tag: TagItem): boolean => tag.path === route.path\n const isAffix = (tag: TagItem) => tag.meta?.affix\n\n const handleWheel = (e: WheelEvent) => {\n const container = tagsContainer.value\n if (!container) return\n e.preventDefault()\n container.scrollTo({\n left: container.scrollLeft + e.deltaY,\n behavior: 'smooth',\n })\n }\n\n const scrollToTag = (path: string) => {\n nextTick(() => {\n const targetTag = tagsContainer.value?.querySelector(\n `[data-path=\"${path}\"]`\n ) as HTMLElement\n if (targetTag) {\n targetTag.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n })\n }\n })\n }\n\n // ====== Actions ======\n\n const navigateToTag = (tag: TagItem) => {\n if (tag.path !== route.path) {\n router.push(tag.path)\n }\n scrollToTag(tag.path)\n }\n\n const handleClose = (tag: TagItem, index: number) => {\n if (isAffix(tag)) return\n\n const wasActive = isActive(tag)\n const tagsBeforeRemove = tags.tagsViewList.value.length\n tags.removeTag(index)\n\n if (wasActive) {\n const remaining = tags.tagsViewList.value\n const wasLastTag = index === tagsBeforeRemove - 1\n let fallbackPath: string\n\n if (wasLastTag) {\n fallbackPath = remaining[index - 1]?.path || props.homePath\n } else {\n fallbackPath = remaining[remaining.length - 1]?.path || props.homePath\n }\n\n router.push(fallbackPath)\n emit('close', fallbackPath)\n }\n }\n\n const showContextMenu = (event: MouseEvent, tag: TagItem, index: number) => {\n event.preventDefault()\n selectedTag.value = tag\n selectedIndex.value = index\n contextMenuVisible.value = true\n contextMenuX.value = event.clientX\n contextMenuY.value = event.clientY\n }\n\n const closeContextMenu = () => (contextMenuVisible.value = false)\n\n const contextMenuOptions = computed(() => {\n const labels = props.contextMenuLabels\n return [\n {\n type: 'option' as const,\n label: labels.close ?? '关闭',\n key: 'close',\n disabled: isAffix(selectedTag.value as TagItem),\n icon: () => h(C_Icon, { name: 'mdi:close', size: 16 }),\n },\n {\n type: 'option' as const,\n label: labels.closeOthers ?? '关闭其他',\n key: 'closeOthers',\n icon: () => h(C_Icon, { name: 'mdi:arrow-left-right-bold', size: 16 }),\n },\n {\n type: 'option' as const,\n label: labels.closeLeft ?? '关闭左侧',\n key: 'closeLeft',\n icon: () => h(C_Icon, { name: 'mdi:align-horizontal-left', size: 16 }),\n },\n {\n type: 'option' as const,\n label: labels.closeRight ?? '关闭右侧',\n key: 'closeRight',\n icon: () => h(C_Icon, { name: 'mdi:align-horizontal-right', size: 16 }),\n },\n {\n type: 'option' as const,\n label: labels.closeAll ?? '关闭所有',\n key: 'closeAll',\n icon: () => h(C_Icon, { name: 'mdi:tally-mark-5', size: 16 }),\n },\n ]\n })\n\n const handleContextMenuSelect = (key: string) => {\n if (!selectedTag.value || selectedIndex.value === -1) return\n\n switch (key) {\n case 'close':\n handleClose(selectedTag.value, selectedIndex.value)\n break\n case 'closeOthers':\n tags.removeOtherTags(selectedIndex.value)\n break\n case 'closeLeft':\n tags.removeLeftTags(selectedIndex.value)\n break\n case 'closeRight':\n tags.removeRightTags(selectedIndex.value)\n break\n case 'closeAll':\n tags.removeAllTags()\n router.push(props.homePath)\n emit('closeAll')\n break\n }\n closeContextMenu()\n }\n\n // ====== 路由自动跟踪 ======\n watch(\n () => route.path,\n (newPath: string) => {\n const originalTitle =\n newPath === props.homePath\n ? props.homeTitle\n : (route.meta.title as string) || 'Unnamed Page'\n\n tags.addTag({\n path: newPath,\n originalTitle,\n title: formatLabel(originalTitle),\n icon:\n newPath === props.homePath\n ? props.homeIcon\n : (route.meta.icon as string),\n meta: { affix: route.meta.affix as boolean },\n })\n\n tags.setActiveTag(newPath)\n scrollToTag(newPath)\n },\n { immediate: true }\n )\n\n // ====== 暴露 ======\n defineExpose({\n /** useTagsView composable 实例 */\n tags,\n /** 滚动到指定标签 */\n scrollToTag,\n })\n</script>\n\n<style lang=\"scss\" scoped>\n @use './index.scss';\n</style>\n","<!--\n * @Description: 通用标签页导航组件 — 路由感知的多标签管理\n *\n * 内置功能:\n * - 路由变化自动添加标签\n * - 持久化(localStorage,可关闭)\n * - 右键菜单(关闭/关闭其他/关闭左侧/关闭右侧/关闭所有)\n * - 水平滚轮滚动\n * - i18n 支持(labelFormatter)\n *\n * @example 基础用法\n * ```vue\n * <C_TagsView\n * :label-formatter=\"$t\"\n * @select=\"router.push\"\n * />\n * ```\n *\n * @example 自定义首页 + 菜单文案\n * ```vue\n * <C_TagsView\n * home-path=\"/dashboard\"\n * home-title=\"Dashboard\"\n * :context-menu-labels=\"{ close: 'Close', closeAll: 'Close All', ... }\"\n * />\n * ```\n *\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"tags-view-container\">\n <div\n class=\"tags-track\"\n ref=\"tagsTrack\"\n @wheel=\"handleWheel\"\n >\n <div\n class=\"tags-container\"\n ref=\"tagsContainer\"\n >\n <NTag\n v-for=\"(tag, index) in tags.tagsViewList.value\"\n :key=\"tag.path\"\n :type=\"isActive(tag) ? 'primary' : 'default'\"\n :closable=\"!isAffix(tag)\"\n :data-path=\"tag.path\"\n @close.stop=\"handleClose(tag, index)\"\n @click=\"navigateToTag(tag)\"\n @contextmenu.prevent=\"\n (e: MouseEvent) => showContextMenu(e, tag, index)\n \"\n >\n <template #icon>\n <C_Icon\n :name=\"tag.icon\"\n :size=\"12\"\n />\n </template>\n {{ tag.title }}\n </NTag>\n </div>\n </div>\n <NDropdown\n v-if=\"contextMenuVisible\"\n :show=\"contextMenuVisible\"\n :options=\"contextMenuOptions\"\n :x=\"contextMenuX\"\n :y=\"contextMenuY\"\n @clickoutside=\"closeContextMenu\"\n @select=\"handleContextMenuSelect\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref, computed, watch, nextTick, h } from 'vue'\n import { useRoute, useRouter } from 'vue-router'\n import { C_Icon } from '../C_Icon'\n import type { TagItem } from '../_shared'\n import { useTagsView, type UseTagsViewOptions } from './useTagsView'\n\n defineOptions({ name: 'C_TagsView' })\n\n export interface ContextMenuLabels {\n close?: string\n closeOthers?: string\n closeLeft?: string\n closeRight?: string\n closeAll?: string\n }\n\n const props = withDefaults(\n defineProps<{\n /**\n * 标签文本格式化函数(用于 i18n)\n */\n labelFormatter?: (label: string) => string\n /** 首页路径 */\n homePath?: string\n /** 首页标题(原始文本) */\n homeTitle?: string\n /** 首页图标 */\n homeIcon?: string\n /** 持久化 localStorage key,传空字符串禁用 */\n persistKey?: string\n /** 右键菜单文案(国际化适配) */\n contextMenuLabels?: ContextMenuLabels\n /** useTagsView 配置项(优先级最高) */\n tagsViewOptions?: UseTagsViewOptions\n }>(),\n {\n homePath: '/home',\n homeTitle: '首页',\n homeIcon: 'mdi:home',\n persistKey: '__tags_view_list__',\n contextMenuLabels: () => ({\n close: '关闭',\n closeOthers: '关闭其他',\n closeLeft: '关闭左侧',\n closeRight: '关闭右侧',\n closeAll: '关闭所有',\n }),\n }\n )\n\n const emit = defineEmits<{\n /** 标签被关闭后跳转 */\n close: [fallbackPath: string]\n /** 关闭全部后 */\n closeAll: []\n }>()\n\n const route = useRoute()\n const router = useRouter()\n\n // ====== Tags composable ======\n const tags = useTagsView(\n props.tagsViewOptions ?? {\n persistKey: props.persistKey,\n homePath: props.homePath,\n }\n )\n\n // ====== 首次渲染前重新翻译持久化标签 ======\n if (tags.tagsViewList.value.length > 0 && props.labelFormatter) {\n const allRoutes = router.getRoutes()\n const translatedTags = tags.tagsViewList.value.map(tag => {\n const matchedRoute = allRoutes.find(r => r.path === tag.path)\n const originalTitle =\n tag.originalTitle || (matchedRoute?.meta?.title as string) || tag.title\n return {\n ...tag,\n originalTitle,\n title: props.labelFormatter!(originalTitle),\n }\n })\n tags.initTags(translatedTags)\n }\n\n const formatLabel = (title: string): string =>\n props.labelFormatter ? props.labelFormatter(title) : title\n\n // ====== UI State ======\n\n const contextMenuVisible = ref(false)\n const contextMenuX = ref(0)\n const contextMenuY = ref(0)\n const selectedTag = ref<TagItem | null>(null)\n const selectedIndex = ref(-1)\n const tagsTrack = ref<HTMLElement>()\n const tagsContainer = ref<HTMLElement>()\n\n // ====== Helpers ======\n const isActive = (tag: TagItem): boolean => tag.path === route.path\n const isAffix = (tag: TagItem) => tag.meta?.affix\n\n const handleWheel = (e: WheelEvent) => {\n const container = tagsContainer.value\n if (!container) return\n e.preventDefault()\n container.scrollTo({\n left: container.scrollLeft + e.deltaY,\n behavior: 'smooth',\n })\n }\n\n const scrollToTag = (path: string) => {\n nextTick(() => {\n const targetTag = tagsContainer.value?.querySelector(\n `[data-path=\"${path}\"]`\n ) as HTMLElement\n if (targetTag) {\n targetTag.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n })\n }\n })\n }\n\n // ====== Actions ======\n\n const navigateToTag = (tag: TagItem) => {\n if (tag.path !== route.path) {\n router.push(tag.path)\n }\n scrollToTag(tag.path)\n }\n\n const handleClose = (tag: TagItem, index: number) => {\n if (isAffix(tag)) return\n\n const wasActive = isActive(tag)\n const tagsBeforeRemove = tags.tagsViewList.value.length\n tags.removeTag(index)\n\n if (wasActive) {\n const remaining = tags.tagsViewList.value\n const wasLastTag = index === tagsBeforeRemove - 1\n let fallbackPath: string\n\n if (wasLastTag) {\n fallbackPath = remaining[index - 1]?.path || props.homePath\n } else {\n fallbackPath = remaining[remaining.length - 1]?.path || props.homePath\n }\n\n router.push(fallbackPath)\n emit('close', fallbackPath)\n }\n }\n\n const showContextMenu = (event: MouseEvent, tag: TagItem, index: number) => {\n event.preventDefault()\n selectedTag.value = tag\n selectedIndex.value = index\n contextMenuVisible.value = true\n contextMenuX.value = event.clientX\n contextMenuY.value = event.clientY\n }\n\n const closeContextMenu = () => (contextMenuVisible.value = false)\n\n const contextMenuOptions = computed(() => {\n const labels = props.contextMenuLabels\n return [\n {\n type: 'option' as const,\n label: labels.close ?? '关闭',\n key: 'close',\n disabled: isAffix(selectedTag.value as TagItem),\n icon: () => h(C_Icon, { name: 'mdi:close', size: 16 }),\n },\n {\n type: 'option' as const,\n label: labels.closeOthers ?? '关闭其他',\n key: 'closeOthers',\n icon: () => h(C_Icon, { name: 'mdi:arrow-left-right-bold', size: 16 }),\n },\n {\n type: 'option' as const,\n label: labels.closeLeft ?? '关闭左侧',\n key: 'closeLeft',\n icon: () => h(C_Icon, { name: 'mdi:align-horizontal-left', size: 16 }),\n },\n {\n type: 'option' as const,\n label: labels.closeRight ?? '关闭右侧',\n key: 'closeRight',\n icon: () => h(C_Icon, { name: 'mdi:align-horizontal-right', size: 16 }),\n },\n {\n type: 'option' as const,\n label: labels.closeAll ?? '关闭所有',\n key: 'closeAll',\n icon: () => h(C_Icon, { name: 'mdi:tally-mark-5', size: 16 }),\n },\n ]\n })\n\n const handleContextMenuSelect = (key: string) => {\n if (!selectedTag.value || selectedIndex.value === -1) return\n\n switch (key) {\n case 'close':\n handleClose(selectedTag.value, selectedIndex.value)\n break\n case 'closeOthers':\n tags.removeOtherTags(selectedIndex.value)\n break\n case 'closeLeft':\n tags.removeLeftTags(selectedIndex.value)\n break\n case 'closeRight':\n tags.removeRightTags(selectedIndex.value)\n break\n case 'closeAll':\n tags.removeAllTags()\n router.push(props.homePath)\n emit('closeAll')\n break\n }\n closeContextMenu()\n }\n\n // ====== 路由自动跟踪 ======\n watch(\n () => route.path,\n (newPath: string) => {\n const originalTitle =\n newPath === props.homePath\n ? props.homeTitle\n : (route.meta.title as string) || 'Unnamed Page'\n\n tags.addTag({\n path: newPath,\n originalTitle,\n title: formatLabel(originalTitle),\n icon:\n newPath === props.homePath\n ? props.homeIcon\n : (route.meta.icon as string),\n meta: { affix: route.meta.affix as boolean },\n })\n\n tags.setActiveTag(newPath)\n scrollToTag(newPath)\n },\n { immediate: true }\n )\n\n // ====== 暴露 ======\n defineExpose({\n /** useTagsView composable 实例 */\n tags,\n /** 滚动到指定标签 */\n scrollToTag,\n })\n</script>\n\n<style lang=\"scss\" scoped>\n @use './index.scss';\n</style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"C_TagsView2.js","names":[],"sources":["../src/components/C_TagsView/useTagsView.ts","../src/components/C_TagsView/index.vue","../src/components/C_TagsView/index.vue","../src/components/C_TagsView/index.vue"],"sourcesContent":["import { ref, type Ref } from 'vue'\r\nimport type { TagItem } from '../_shared'\r\n\r\nexport interface UseTagsViewOptions {\r\n /** localStorage 持久化 key,传空字符串则不持久化 */\r\n persistKey?: string\r\n /** 首页路径,用于 removeAll 后的回退 */\r\n homePath?: string\r\n}\r\n\r\nconst STORAGE_KEY_DEFAULT = '__tags_view_list__'\r\n\r\n/**\r\n * 标签页管理 composable\r\n *\r\n * 独立于组件使用 — 可在任何地方管理标签状态\r\n *\r\n * @example 独立使用\r\n * ```ts\r\n * const tags = useTagsView({ persistKey: 'my-tags' })\r\n * tags.addTag({ path: '/home', title: '首页', meta: { affix: true } })\r\n * ```\r\n */\r\nexport function useTagsView(options: UseTagsViewOptions = {}) {\r\n const { persistKey = STORAGE_KEY_DEFAULT, homePath = '/home' } = options\r\n\r\n // ====== 持久化 ======\r\n const loadPersistedTags = (): TagItem[] => {\r\n if (!persistKey) return []\r\n try {\r\n const raw = localStorage.getItem(persistKey)\r\n return raw ? JSON.parse(raw) : []\r\n } catch {\r\n return []\r\n }\r\n }\r\n\r\n const persistTags = (tags: TagItem[]) => {\r\n if (!persistKey) return\r\n try {\r\n localStorage.setItem(persistKey, JSON.stringify(tags))\r\n } catch {\r\n /* silently fail */\r\n }\r\n }\r\n\r\n // ====== State ======\r\n const tagsViewList: Ref<TagItem[]> = ref(loadPersistedTags())\r\n const activeTag = ref('')\r\n\r\n const syncPersist = () => persistTags(tagsViewList.value)\r\n\r\n // ====== Actions ======\r\n\r\n const initTags = (tags?: TagItem[]) => {\r\n if (tags) {\r\n tagsViewList.value = tags\r\n } else {\r\n // 去重\r\n tagsViewList.value = [\r\n ...new Map(tagsViewList.value.map(tag => [tag.path, tag])).values(),\r\n ]\r\n }\r\n syncPersist()\r\n }\r\n\r\n const setActiveTag = (path: string) => {\r\n activeTag.value = path\r\n }\r\n\r\n const addTag = (tag: TagItem) => {\r\n const existingIndex = tagsViewList.value.findIndex(\r\n item => item.path === tag.path\r\n )\r\n\r\n if (existingIndex === -1) {\r\n tagsViewList.value.push(tag)\r\n } else {\r\n const existing = tagsViewList.value[existingIndex]\r\n if (existing.title !== tag.title || !existing.originalTitle) {\r\n existing.title = tag.title\r\n existing.originalTitle = tag.originalTitle || existing.originalTitle\r\n }\r\n }\r\n\r\n setActiveTag(tag.path)\r\n syncPersist()\r\n }\r\n\r\n const removeTag = (index: number): string | null => {\r\n if (index >= 0 && index < tagsViewList.value.length) {\r\n const removed = tagsViewList.value.splice(index, 1)[0]?.path ?? null\r\n syncPersist()\r\n return removed\r\n }\r\n return null\r\n }\r\n\r\n const removeOtherTags = (index: number) => {\r\n if (index === 0) {\r\n tagsViewList.value = [tagsViewList.value[0]].filter(Boolean)\r\n } else {\r\n tagsViewList.value = [\r\n tagsViewList.value[0],\r\n tagsViewList.value[index],\r\n ].filter(Boolean)\r\n }\r\n syncPersist()\r\n }\r\n\r\n const removeLeftTags = (index: number) => {\r\n tagsViewList.value = [\r\n tagsViewList.value[0],\r\n ...tagsViewList.value.slice(index),\r\n ]\r\n syncPersist()\r\n }\r\n\r\n const removeRightTags = (index: number) => {\r\n tagsViewList.value = tagsViewList.value.slice(0, index + 1)\r\n syncPersist()\r\n }\r\n\r\n const removeAllTags = () => {\r\n tagsViewList.value = tagsViewList.value.filter(tag => tag.meta?.affix)\r\n syncPersist()\r\n }\r\n\r\n return {\r\n tagsViewList,\r\n activeTag,\r\n homePath,\r\n initTags,\r\n setActiveTag,\r\n addTag,\r\n removeTag,\r\n removeOtherTags,\r\n removeLeftTags,\r\n removeRightTags,\r\n removeAllTags,\r\n }\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Description: 通用标签页导航组件 — 路由感知的多标签管理\r\n *\r\n * 内置功能:\r\n * - 路由变化自动添加标签\r\n * - 持久化(localStorage,可关闭)\r\n * - 右键菜单(关闭/关闭其他/关闭左侧/关闭右侧/关闭所有)\r\n * - 水平滚轮滚动\r\n * - i18n 支持(labelFormatter)\r\n *\r\n * @example 基础用法\r\n * ```vue\r\n * <C_TagsView\r\n * :label-formatter=\"$t\"\r\n * @select=\"router.push\"\r\n * />\r\n * ```\r\n *\r\n * @example 自定义首页 + 菜单文案\r\n * ```vue\r\n * <C_TagsView\r\n * home-path=\"/dashboard\"\r\n * home-title=\"Dashboard\"\r\n * :context-menu-labels=\"{ close: 'Close', closeAll: 'Close All', ... }\"\r\n * />\r\n * ```\r\n *\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"tags-view-container\">\r\n <div\r\n class=\"tags-track\"\r\n ref=\"tagsTrack\"\r\n @wheel=\"handleWheel\"\r\n >\r\n <div\r\n class=\"tags-container\"\r\n ref=\"tagsContainer\"\r\n >\r\n <NTag\r\n v-for=\"(tag, index) in tags.tagsViewList.value\"\r\n :key=\"tag.path\"\r\n :type=\"isActive(tag) ? 'primary' : 'default'\"\r\n :closable=\"!isAffix(tag)\"\r\n :data-path=\"tag.path\"\r\n @close.stop=\"handleClose(tag, index)\"\r\n @click=\"navigateToTag(tag)\"\r\n @contextmenu.prevent=\"\r\n (e: MouseEvent) => showContextMenu(e, tag, index)\r\n \"\r\n >\r\n <template #icon>\r\n <C_Icon\r\n :name=\"tag.icon\"\r\n :size=\"12\"\r\n />\r\n </template>\r\n {{ tag.title }}\r\n </NTag>\r\n </div>\r\n </div>\r\n <NDropdown\r\n v-if=\"contextMenuVisible\"\r\n :show=\"contextMenuVisible\"\r\n :options=\"contextMenuOptions\"\r\n :x=\"contextMenuX\"\r\n :y=\"contextMenuY\"\r\n @clickoutside=\"closeContextMenu\"\r\n @select=\"handleContextMenuSelect\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { ref, computed, watch, nextTick, h } from 'vue'\r\n import { useRoute, useRouter } from 'vue-router'\r\n import { C_Icon } from '../C_Icon'\r\n import type { TagItem } from '../_shared'\r\n import { useTagsView, type UseTagsViewOptions } from './useTagsView'\r\n\r\n defineOptions({ name: 'C_TagsView' })\r\n\r\n export interface ContextMenuLabels {\r\n close?: string\r\n closeOthers?: string\r\n closeLeft?: string\r\n closeRight?: string\r\n closeAll?: string\r\n }\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n /**\r\n * 标签文本格式化函数(用于 i18n)\r\n */\r\n labelFormatter?: (label: string) => string\r\n /** 首页路径 */\r\n homePath?: string\r\n /** 首页标题(原始文本) */\r\n homeTitle?: string\r\n /** 首页图标 */\r\n homeIcon?: string\r\n /** 持久化 localStorage key,传空字符串禁用 */\r\n persistKey?: string\r\n /** 右键菜单文案(国际化适配) */\r\n contextMenuLabels?: ContextMenuLabels\r\n /** useTagsView 配置项(优先级最高) */\r\n tagsViewOptions?: UseTagsViewOptions\r\n }>(),\r\n {\r\n homePath: '/home',\r\n homeTitle: '首页',\r\n homeIcon: 'mdi:home',\r\n persistKey: '__tags_view_list__',\r\n contextMenuLabels: () => ({\r\n close: '关闭',\r\n closeOthers: '关闭其他',\r\n closeLeft: '关闭左侧',\r\n closeRight: '关闭右侧',\r\n closeAll: '关闭所有',\r\n }),\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n /** 标签被关闭后跳转 */\r\n close: [fallbackPath: string]\r\n /** 关闭全部后 */\r\n closeAll: []\r\n }>()\r\n\r\n const route = useRoute()\r\n const router = useRouter()\r\n\r\n // ====== Tags composable ======\r\n const tags = useTagsView(\r\n props.tagsViewOptions ?? {\r\n persistKey: props.persistKey,\r\n homePath: props.homePath,\r\n }\r\n )\r\n\r\n // ====== 首次渲染前重新翻译持久化标签 ======\r\n if (tags.tagsViewList.value.length > 0 && props.labelFormatter) {\r\n const allRoutes = router.getRoutes()\r\n const translatedTags = tags.tagsViewList.value.map(tag => {\r\n const matchedRoute = allRoutes.find(r => r.path === tag.path)\r\n const originalTitle =\r\n tag.originalTitle || (matchedRoute?.meta?.title as string) || tag.title\r\n return {\r\n ...tag,\r\n originalTitle,\r\n title: props.labelFormatter!(originalTitle),\r\n }\r\n })\r\n tags.initTags(translatedTags)\r\n }\r\n\r\n const formatLabel = (title: string): string =>\r\n props.labelFormatter ? props.labelFormatter(title) : title\r\n\r\n // ====== UI State ======\r\n\r\n const contextMenuVisible = ref(false)\r\n const contextMenuX = ref(0)\r\n const contextMenuY = ref(0)\r\n const selectedTag = ref<TagItem | null>(null)\r\n const selectedIndex = ref(-1)\r\n const tagsTrack = ref<HTMLElement>()\r\n const tagsContainer = ref<HTMLElement>()\r\n\r\n // ====== Helpers ======\r\n const isActive = (tag: TagItem): boolean => tag.path === route.path\r\n const isAffix = (tag: TagItem) => tag.meta?.affix\r\n\r\n const handleWheel = (e: WheelEvent) => {\r\n const container = tagsContainer.value\r\n if (!container) return\r\n e.preventDefault()\r\n container.scrollTo({\r\n left: container.scrollLeft + e.deltaY,\r\n behavior: 'smooth',\r\n })\r\n }\r\n\r\n const scrollToTag = (path: string) => {\r\n nextTick(() => {\r\n const targetTag = tagsContainer.value?.querySelector(\r\n `[data-path=\"${path}\"]`\r\n ) as HTMLElement\r\n if (targetTag) {\r\n targetTag.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'nearest',\r\n inline: 'center',\r\n })\r\n }\r\n })\r\n }\r\n\r\n // ====== Actions ======\r\n\r\n const navigateToTag = (tag: TagItem) => {\r\n if (tag.path !== route.path) {\r\n router.push(tag.path)\r\n }\r\n scrollToTag(tag.path)\r\n }\r\n\r\n const handleClose = (tag: TagItem, index: number) => {\r\n if (isAffix(tag)) return\r\n\r\n const wasActive = isActive(tag)\r\n const tagsBeforeRemove = tags.tagsViewList.value.length\r\n tags.removeTag(index)\r\n\r\n if (wasActive) {\r\n const remaining = tags.tagsViewList.value\r\n const wasLastTag = index === tagsBeforeRemove - 1\r\n let fallbackPath: string\r\n\r\n if (wasLastTag) {\r\n fallbackPath = remaining[index - 1]?.path || props.homePath\r\n } else {\r\n fallbackPath = remaining[remaining.length - 1]?.path || props.homePath\r\n }\r\n\r\n router.push(fallbackPath)\r\n emit('close', fallbackPath)\r\n }\r\n }\r\n\r\n const showContextMenu = (event: MouseEvent, tag: TagItem, index: number) => {\r\n event.preventDefault()\r\n selectedTag.value = tag\r\n selectedIndex.value = index\r\n contextMenuVisible.value = true\r\n contextMenuX.value = event.clientX\r\n contextMenuY.value = event.clientY\r\n }\r\n\r\n const closeContextMenu = () => (contextMenuVisible.value = false)\r\n\r\n const contextMenuOptions = computed(() => {\r\n const labels = props.contextMenuLabels\r\n return [\r\n {\r\n type: 'option' as const,\r\n label: labels.close ?? '关闭',\r\n key: 'close',\r\n disabled: isAffix(selectedTag.value as TagItem),\r\n icon: () => h('span', { class: 'i-mdi:close' }),\r\n },\r\n {\r\n type: 'option' as const,\r\n label: labels.closeOthers ?? '关闭其他',\r\n key: 'closeOthers',\r\n icon: () => h('span', { class: 'i-mdi:arrow-left-right-bold' }),\r\n },\r\n {\r\n type: 'option' as const,\r\n label: labels.closeLeft ?? '关闭左侧',\r\n key: 'closeLeft',\r\n icon: () => h('span', { class: 'i-mdi:align-horizontal-left' }),\r\n },\r\n {\r\n type: 'option' as const,\r\n label: labels.closeRight ?? '关闭右侧',\r\n key: 'closeRight',\r\n icon: () => h('span', { class: 'i-mdi:align-horizontal-right' }),\r\n },\r\n {\r\n type: 'option' as const,\r\n label: labels.closeAll ?? '关闭所有',\r\n key: 'closeAll',\r\n icon: () => h('span', { class: 'i-mdi:tally-mark-5' }),\r\n },\r\n ]\r\n })\r\n\r\n const handleContextMenuSelect = (key: string) => {\r\n if (!selectedTag.value || selectedIndex.value === -1) return\r\n\r\n switch (key) {\r\n case 'close':\r\n handleClose(selectedTag.value, selectedIndex.value)\r\n break\r\n case 'closeOthers':\r\n tags.removeOtherTags(selectedIndex.value)\r\n break\r\n case 'closeLeft':\r\n tags.removeLeftTags(selectedIndex.value)\r\n break\r\n case 'closeRight':\r\n tags.removeRightTags(selectedIndex.value)\r\n break\r\n case 'closeAll':\r\n tags.removeAllTags()\r\n router.push(props.homePath)\r\n emit('closeAll')\r\n break\r\n }\r\n closeContextMenu()\r\n }\r\n\r\n // ====== 路由自动跟踪 ======\r\n watch(\r\n () => route.path,\r\n (newPath: string) => {\r\n const originalTitle =\r\n newPath === props.homePath\r\n ? props.homeTitle\r\n : (route.meta.title as string) || 'Unnamed Page'\r\n\r\n tags.addTag({\r\n path: newPath,\r\n originalTitle,\r\n title: formatLabel(originalTitle),\r\n icon:\r\n newPath === props.homePath\r\n ? props.homeIcon\r\n : (route.meta.icon as string),\r\n meta: { affix: route.meta.affix as boolean },\r\n })\r\n\r\n tags.setActiveTag(newPath)\r\n scrollToTag(newPath)\r\n },\r\n { immediate: true }\r\n )\r\n\r\n // ====== 暴露 ======\r\n defineExpose({\r\n /** useTagsView composable 实例 */\r\n tags,\r\n /** 滚动到指定标签 */\r\n scrollToTag,\r\n })\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n @use './index.scss';\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Description: 通用标签页导航组件 — 路由感知的多标签管理\r\n *\r\n * 内置功能:\r\n * - 路由变化自动添加标签\r\n * - 持久化(localStorage,可关闭)\r\n * - 右键菜单(关闭/关闭其他/关闭左侧/关闭右侧/关闭所有)\r\n * - 水平滚轮滚动\r\n * - i18n 支持(labelFormatter)\r\n *\r\n * @example 基础用法\r\n * ```vue\r\n * <C_TagsView\r\n * :label-formatter=\"$t\"\r\n * @select=\"router.push\"\r\n * />\r\n * ```\r\n *\r\n * @example 自定义首页 + 菜单文案\r\n * ```vue\r\n * <C_TagsView\r\n * home-path=\"/dashboard\"\r\n * home-title=\"Dashboard\"\r\n * :context-menu-labels=\"{ close: 'Close', closeAll: 'Close All', ... }\"\r\n * />\r\n * ```\r\n *\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"tags-view-container\">\r\n <div\r\n class=\"tags-track\"\r\n ref=\"tagsTrack\"\r\n @wheel=\"handleWheel\"\r\n >\r\n <div\r\n class=\"tags-container\"\r\n ref=\"tagsContainer\"\r\n >\r\n <NTag\r\n v-for=\"(tag, index) in tags.tagsViewList.value\"\r\n :key=\"tag.path\"\r\n :type=\"isActive(tag) ? 'primary' : 'default'\"\r\n :closable=\"!isAffix(tag)\"\r\n :data-path=\"tag.path\"\r\n @close.stop=\"handleClose(tag, index)\"\r\n @click=\"navigateToTag(tag)\"\r\n @contextmenu.prevent=\"\r\n (e: MouseEvent) => showContextMenu(e, tag, index)\r\n \"\r\n >\r\n <template #icon>\r\n <C_Icon\r\n :name=\"tag.icon\"\r\n :size=\"12\"\r\n />\r\n </template>\r\n {{ tag.title }}\r\n </NTag>\r\n </div>\r\n </div>\r\n <NDropdown\r\n v-if=\"contextMenuVisible\"\r\n :show=\"contextMenuVisible\"\r\n :options=\"contextMenuOptions\"\r\n :x=\"contextMenuX\"\r\n :y=\"contextMenuY\"\r\n @clickoutside=\"closeContextMenu\"\r\n @select=\"handleContextMenuSelect\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { ref, computed, watch, nextTick, h } from 'vue'\r\n import { useRoute, useRouter } from 'vue-router'\r\n import { C_Icon } from '../C_Icon'\r\n import type { TagItem } from '../_shared'\r\n import { useTagsView, type UseTagsViewOptions } from './useTagsView'\r\n\r\n defineOptions({ name: 'C_TagsView' })\r\n\r\n export interface ContextMenuLabels {\r\n close?: string\r\n closeOthers?: string\r\n closeLeft?: string\r\n closeRight?: string\r\n closeAll?: string\r\n }\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n /**\r\n * 标签文本格式化函数(用于 i18n)\r\n */\r\n labelFormatter?: (label: string) => string\r\n /** 首页路径 */\r\n homePath?: string\r\n /** 首页标题(原始文本) */\r\n homeTitle?: string\r\n /** 首页图标 */\r\n homeIcon?: string\r\n /** 持久化 localStorage key,传空字符串禁用 */\r\n persistKey?: string\r\n /** 右键菜单文案(国际化适配) */\r\n contextMenuLabels?: ContextMenuLabels\r\n /** useTagsView 配置项(优先级最高) */\r\n tagsViewOptions?: UseTagsViewOptions\r\n }>(),\r\n {\r\n homePath: '/home',\r\n homeTitle: '首页',\r\n homeIcon: 'mdi:home',\r\n persistKey: '__tags_view_list__',\r\n contextMenuLabels: () => ({\r\n close: '关闭',\r\n closeOthers: '关闭其他',\r\n closeLeft: '关闭左侧',\r\n closeRight: '关闭右侧',\r\n closeAll: '关闭所有',\r\n }),\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n /** 标签被关闭后跳转 */\r\n close: [fallbackPath: string]\r\n /** 关闭全部后 */\r\n closeAll: []\r\n }>()\r\n\r\n const route = useRoute()\r\n const router = useRouter()\r\n\r\n // ====== Tags composable ======\r\n const tags = useTagsView(\r\n props.tagsViewOptions ?? {\r\n persistKey: props.persistKey,\r\n homePath: props.homePath,\r\n }\r\n )\r\n\r\n // ====== 首次渲染前重新翻译持久化标签 ======\r\n if (tags.tagsViewList.value.length > 0 && props.labelFormatter) {\r\n const allRoutes = router.getRoutes()\r\n const translatedTags = tags.tagsViewList.value.map(tag => {\r\n const matchedRoute = allRoutes.find(r => r.path === tag.path)\r\n const originalTitle =\r\n tag.originalTitle || (matchedRoute?.meta?.title as string) || tag.title\r\n return {\r\n ...tag,\r\n originalTitle,\r\n title: props.labelFormatter!(originalTitle),\r\n }\r\n })\r\n tags.initTags(translatedTags)\r\n }\r\n\r\n const formatLabel = (title: string): string =>\r\n props.labelFormatter ? props.labelFormatter(title) : title\r\n\r\n // ====== UI State ======\r\n\r\n const contextMenuVisible = ref(false)\r\n const contextMenuX = ref(0)\r\n const contextMenuY = ref(0)\r\n const selectedTag = ref<TagItem | null>(null)\r\n const selectedIndex = ref(-1)\r\n const tagsTrack = ref<HTMLElement>()\r\n const tagsContainer = ref<HTMLElement>()\r\n\r\n // ====== Helpers ======\r\n const isActive = (tag: TagItem): boolean => tag.path === route.path\r\n const isAffix = (tag: TagItem) => tag.meta?.affix\r\n\r\n const handleWheel = (e: WheelEvent) => {\r\n const container = tagsContainer.value\r\n if (!container) return\r\n e.preventDefault()\r\n container.scrollTo({\r\n left: container.scrollLeft + e.deltaY,\r\n behavior: 'smooth',\r\n })\r\n }\r\n\r\n const scrollToTag = (path: string) => {\r\n nextTick(() => {\r\n const targetTag = tagsContainer.value?.querySelector(\r\n `[data-path=\"${path}\"]`\r\n ) as HTMLElement\r\n if (targetTag) {\r\n targetTag.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'nearest',\r\n inline: 'center',\r\n })\r\n }\r\n })\r\n }\r\n\r\n // ====== Actions ======\r\n\r\n const navigateToTag = (tag: TagItem) => {\r\n if (tag.path !== route.path) {\r\n router.push(tag.path)\r\n }\r\n scrollToTag(tag.path)\r\n }\r\n\r\n const handleClose = (tag: TagItem, index: number) => {\r\n if (isAffix(tag)) return\r\n\r\n const wasActive = isActive(tag)\r\n const tagsBeforeRemove = tags.tagsViewList.value.length\r\n tags.removeTag(index)\r\n\r\n if (wasActive) {\r\n const remaining = tags.tagsViewList.value\r\n const wasLastTag = index === tagsBeforeRemove - 1\r\n let fallbackPath: string\r\n\r\n if (wasLastTag) {\r\n fallbackPath = remaining[index - 1]?.path || props.homePath\r\n } else {\r\n fallbackPath = remaining[remaining.length - 1]?.path || props.homePath\r\n }\r\n\r\n router.push(fallbackPath)\r\n emit('close', fallbackPath)\r\n }\r\n }\r\n\r\n const showContextMenu = (event: MouseEvent, tag: TagItem, index: number) => {\r\n event.preventDefault()\r\n selectedTag.value = tag\r\n selectedIndex.value = index\r\n contextMenuVisible.value = true\r\n contextMenuX.value = event.clientX\r\n contextMenuY.value = event.clientY\r\n }\r\n\r\n const closeContextMenu = () => (contextMenuVisible.value = false)\r\n\r\n const contextMenuOptions = computed(() => {\r\n const labels = props.contextMenuLabels\r\n return [\r\n {\r\n type: 'option' as const,\r\n label: labels.close ?? '关闭',\r\n key: 'close',\r\n disabled: isAffix(selectedTag.value as TagItem),\r\n icon: () => h('span', { class: 'i-mdi:close' }),\r\n },\r\n {\r\n type: 'option' as const,\r\n label: labels.closeOthers ?? '关闭其他',\r\n key: 'closeOthers',\r\n icon: () => h('span', { class: 'i-mdi:arrow-left-right-bold' }),\r\n },\r\n {\r\n type: 'option' as const,\r\n label: labels.closeLeft ?? '关闭左侧',\r\n key: 'closeLeft',\r\n icon: () => h('span', { class: 'i-mdi:align-horizontal-left' }),\r\n },\r\n {\r\n type: 'option' as const,\r\n label: labels.closeRight ?? '关闭右侧',\r\n key: 'closeRight',\r\n icon: () => h('span', { class: 'i-mdi:align-horizontal-right' }),\r\n },\r\n {\r\n type: 'option' as const,\r\n label: labels.closeAll ?? '关闭所有',\r\n key: 'closeAll',\r\n icon: () => h('span', { class: 'i-mdi:tally-mark-5' }),\r\n },\r\n ]\r\n })\r\n\r\n const handleContextMenuSelect = (key: string) => {\r\n if (!selectedTag.value || selectedIndex.value === -1) return\r\n\r\n switch (key) {\r\n case 'close':\r\n handleClose(selectedTag.value, selectedIndex.value)\r\n break\r\n case 'closeOthers':\r\n tags.removeOtherTags(selectedIndex.value)\r\n break\r\n case 'closeLeft':\r\n tags.removeLeftTags(selectedIndex.value)\r\n break\r\n case 'closeRight':\r\n tags.removeRightTags(selectedIndex.value)\r\n break\r\n case 'closeAll':\r\n tags.removeAllTags()\r\n router.push(props.homePath)\r\n emit('closeAll')\r\n break\r\n }\r\n closeContextMenu()\r\n }\r\n\r\n // ====== 路由自动跟踪 ======\r\n watch(\r\n () => route.path,\r\n (newPath: string) => {\r\n const originalTitle =\r\n newPath === props.homePath\r\n ? props.homeTitle\r\n : (route.meta.title as string) || 'Unnamed Page'\r\n\r\n tags.addTag({\r\n path: newPath,\r\n originalTitle,\r\n title: formatLabel(originalTitle),\r\n icon:\r\n newPath === props.homePath\r\n ? props.homeIcon\r\n : (route.meta.icon as string),\r\n meta: { affix: route.meta.affix as boolean },\r\n })\r\n\r\n tags.setActiveTag(newPath)\r\n scrollToTag(newPath)\r\n },\r\n { immediate: true }\r\n )\r\n\r\n // ====== 暴露 ======\r\n defineExpose({\r\n /** useTagsView composable 实例 */\r\n tags,\r\n /** 滚动到指定标签 */\r\n scrollToTag,\r\n })\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n @use './index.scss';\r\n</style>\r\n","<!--\r\n * @Description: 通用标签页导航组件 — 路由感知的多标签管理\r\n *\r\n * 内置功能:\r\n * - 路由变化自动添加标签\r\n * - 持久化(localStorage,可关闭)\r\n * - 右键菜单(关闭/关闭其他/关闭左侧/关闭右侧/关闭所有)\r\n * - 水平滚轮滚动\r\n * - i18n 支持(labelFormatter)\r\n *\r\n * @example 基础用法\r\n * ```vue\r\n * <C_TagsView\r\n * :label-formatter=\"$t\"\r\n * @select=\"router.push\"\r\n * />\r\n * ```\r\n *\r\n * @example 自定义首页 + 菜单文案\r\n * ```vue\r\n * <C_TagsView\r\n * home-path=\"/dashboard\"\r\n * home-title=\"Dashboard\"\r\n * :context-menu-labels=\"{ close: 'Close', closeAll: 'Close All', ... }\"\r\n * />\r\n * ```\r\n *\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"tags-view-container\">\r\n <div\r\n class=\"tags-track\"\r\n ref=\"tagsTrack\"\r\n @wheel=\"handleWheel\"\r\n >\r\n <div\r\n class=\"tags-container\"\r\n ref=\"tagsContainer\"\r\n >\r\n <NTag\r\n v-for=\"(tag, index) in tags.tagsViewList.value\"\r\n :key=\"tag.path\"\r\n :type=\"isActive(tag) ? 'primary' : 'default'\"\r\n :closable=\"!isAffix(tag)\"\r\n :data-path=\"tag.path\"\r\n @close.stop=\"handleClose(tag, index)\"\r\n @click=\"navigateToTag(tag)\"\r\n @contextmenu.prevent=\"\r\n (e: MouseEvent) => showContextMenu(e, tag, index)\r\n \"\r\n >\r\n <template #icon>\r\n <C_Icon\r\n :name=\"tag.icon\"\r\n :size=\"12\"\r\n />\r\n </template>\r\n {{ tag.title }}\r\n </NTag>\r\n </div>\r\n </div>\r\n <NDropdown\r\n v-if=\"contextMenuVisible\"\r\n :show=\"contextMenuVisible\"\r\n :options=\"contextMenuOptions\"\r\n :x=\"contextMenuX\"\r\n :y=\"contextMenuY\"\r\n @clickoutside=\"closeContextMenu\"\r\n @select=\"handleContextMenuSelect\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { ref, computed, watch, nextTick, h } from 'vue'\r\n import { useRoute, useRouter } from 'vue-router'\r\n import { C_Icon } from '../C_Icon'\r\n import type { TagItem } from '../_shared'\r\n import { useTagsView, type UseTagsViewOptions } from './useTagsView'\r\n\r\n defineOptions({ name: 'C_TagsView' })\r\n\r\n export interface ContextMenuLabels {\r\n close?: string\r\n closeOthers?: string\r\n closeLeft?: string\r\n closeRight?: string\r\n closeAll?: string\r\n }\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n /**\r\n * 标签文本格式化函数(用于 i18n)\r\n */\r\n labelFormatter?: (label: string) => string\r\n /** 首页路径 */\r\n homePath?: string\r\n /** 首页标题(原始文本) */\r\n homeTitle?: string\r\n /** 首页图标 */\r\n homeIcon?: string\r\n /** 持久化 localStorage key,传空字符串禁用 */\r\n persistKey?: string\r\n /** 右键菜单文案(国际化适配) */\r\n contextMenuLabels?: ContextMenuLabels\r\n /** useTagsView 配置项(优先级最高) */\r\n tagsViewOptions?: UseTagsViewOptions\r\n }>(),\r\n {\r\n homePath: '/home',\r\n homeTitle: '首页',\r\n homeIcon: 'mdi:home',\r\n persistKey: '__tags_view_list__',\r\n contextMenuLabels: () => ({\r\n close: '关闭',\r\n closeOthers: '关闭其他',\r\n closeLeft: '关闭左侧',\r\n closeRight: '关闭右侧',\r\n closeAll: '关闭所有',\r\n }),\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n /** 标签被关闭后跳转 */\r\n close: [fallbackPath: string]\r\n /** 关闭全部后 */\r\n closeAll: []\r\n }>()\r\n\r\n const route = useRoute()\r\n const router = useRouter()\r\n\r\n // ====== Tags composable ======\r\n const tags = useTagsView(\r\n props.tagsViewOptions ?? {\r\n persistKey: props.persistKey,\r\n homePath: props.homePath,\r\n }\r\n )\r\n\r\n // ====== 首次渲染前重新翻译持久化标签 ======\r\n if (tags.tagsViewList.value.length > 0 && props.labelFormatter) {\r\n const allRoutes = router.getRoutes()\r\n const translatedTags = tags.tagsViewList.value.map(tag => {\r\n const matchedRoute = allRoutes.find(r => r.path === tag.path)\r\n const originalTitle =\r\n tag.originalTitle || (matchedRoute?.meta?.title as string) || tag.title\r\n return {\r\n ...tag,\r\n originalTitle,\r\n title: props.labelFormatter!(originalTitle),\r\n }\r\n })\r\n tags.initTags(translatedTags)\r\n }\r\n\r\n const formatLabel = (title: string): string =>\r\n props.labelFormatter ? props.labelFormatter(title) : title\r\n\r\n // ====== UI State ======\r\n\r\n const contextMenuVisible = ref(false)\r\n const contextMenuX = ref(0)\r\n const contextMenuY = ref(0)\r\n const selectedTag = ref<TagItem | null>(null)\r\n const selectedIndex = ref(-1)\r\n const tagsTrack = ref<HTMLElement>()\r\n const tagsContainer = ref<HTMLElement>()\r\n\r\n // ====== Helpers ======\r\n const isActive = (tag: TagItem): boolean => tag.path === route.path\r\n const isAffix = (tag: TagItem) => tag.meta?.affix\r\n\r\n const handleWheel = (e: WheelEvent) => {\r\n const container = tagsContainer.value\r\n if (!container) return\r\n e.preventDefault()\r\n container.scrollTo({\r\n left: container.scrollLeft + e.deltaY,\r\n behavior: 'smooth',\r\n })\r\n }\r\n\r\n const scrollToTag = (path: string) => {\r\n nextTick(() => {\r\n const targetTag = tagsContainer.value?.querySelector(\r\n `[data-path=\"${path}\"]`\r\n ) as HTMLElement\r\n if (targetTag) {\r\n targetTag.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'nearest',\r\n inline: 'center',\r\n })\r\n }\r\n })\r\n }\r\n\r\n // ====== Actions ======\r\n\r\n const navigateToTag = (tag: TagItem) => {\r\n if (tag.path !== route.path) {\r\n router.push(tag.path)\r\n }\r\n scrollToTag(tag.path)\r\n }\r\n\r\n const handleClose = (tag: TagItem, index: number) => {\r\n if (isAffix(tag)) return\r\n\r\n const wasActive = isActive(tag)\r\n const tagsBeforeRemove = tags.tagsViewList.value.length\r\n tags.removeTag(index)\r\n\r\n if (wasActive) {\r\n const remaining = tags.tagsViewList.value\r\n const wasLastTag = index === tagsBeforeRemove - 1\r\n let fallbackPath: string\r\n\r\n if (wasLastTag) {\r\n fallbackPath = remaining[index - 1]?.path || props.homePath\r\n } else {\r\n fallbackPath = remaining[remaining.length - 1]?.path || props.homePath\r\n }\r\n\r\n router.push(fallbackPath)\r\n emit('close', fallbackPath)\r\n }\r\n }\r\n\r\n const showContextMenu = (event: MouseEvent, tag: TagItem, index: number) => {\r\n event.preventDefault()\r\n selectedTag.value = tag\r\n selectedIndex.value = index\r\n contextMenuVisible.value = true\r\n contextMenuX.value = event.clientX\r\n contextMenuY.value = event.clientY\r\n }\r\n\r\n const closeContextMenu = () => (contextMenuVisible.value = false)\r\n\r\n const contextMenuOptions = computed(() => {\r\n const labels = props.contextMenuLabels\r\n return [\r\n {\r\n type: 'option' as const,\r\n label: labels.close ?? '关闭',\r\n key: 'close',\r\n disabled: isAffix(selectedTag.value as TagItem),\r\n icon: () => h('span', { class: 'i-mdi:close' }),\r\n },\r\n {\r\n type: 'option' as const,\r\n label: labels.closeOthers ?? '关闭其他',\r\n key: 'closeOthers',\r\n icon: () => h('span', { class: 'i-mdi:arrow-left-right-bold' }),\r\n },\r\n {\r\n type: 'option' as const,\r\n label: labels.closeLeft ?? '关闭左侧',\r\n key: 'closeLeft',\r\n icon: () => h('span', { class: 'i-mdi:align-horizontal-left' }),\r\n },\r\n {\r\n type: 'option' as const,\r\n label: labels.closeRight ?? '关闭右侧',\r\n key: 'closeRight',\r\n icon: () => h('span', { class: 'i-mdi:align-horizontal-right' }),\r\n },\r\n {\r\n type: 'option' as const,\r\n label: labels.closeAll ?? '关闭所有',\r\n key: 'closeAll',\r\n icon: () => h('span', { class: 'i-mdi:tally-mark-5' }),\r\n },\r\n ]\r\n })\r\n\r\n const handleContextMenuSelect = (key: string) => {\r\n if (!selectedTag.value || selectedIndex.value === -1) return\r\n\r\n switch (key) {\r\n case 'close':\r\n handleClose(selectedTag.value, selectedIndex.value)\r\n break\r\n case 'closeOthers':\r\n tags.removeOtherTags(selectedIndex.value)\r\n break\r\n case 'closeLeft':\r\n tags.removeLeftTags(selectedIndex.value)\r\n break\r\n case 'closeRight':\r\n tags.removeRightTags(selectedIndex.value)\r\n break\r\n case 'closeAll':\r\n tags.removeAllTags()\r\n router.push(props.homePath)\r\n emit('closeAll')\r\n break\r\n }\r\n closeContextMenu()\r\n }\r\n\r\n // ====== 路由自动跟踪 ======\r\n watch(\r\n () => route.path,\r\n (newPath: string) => {\r\n const originalTitle =\r\n newPath === props.homePath\r\n ? props.homeTitle\r\n : (route.meta.title as string) || 'Unnamed Page'\r\n\r\n tags.addTag({\r\n path: newPath,\r\n originalTitle,\r\n title: formatLabel(originalTitle),\r\n icon:\r\n newPath === props.homePath\r\n ? props.homeIcon\r\n : (route.meta.icon as string),\r\n meta: { affix: route.meta.affix as boolean },\r\n })\r\n\r\n tags.setActiveTag(newPath)\r\n scrollToTag(newPath)\r\n },\r\n { immediate: true }\r\n )\r\n\r\n // ====== 暴露 ======\r\n defineExpose({\r\n /** useTagsView composable 实例 */\r\n tags,\r\n /** 滚动到指定标签 */\r\n scrollToTag,\r\n })\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n @use './index.scss';\r\n</style>\r\n"],"mappings":"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"}
|
package/dist/C_Theme.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as _default, t as ThemeMode } from "./
|
|
1
|
+
import { n as _default, t as ThemeMode } from "./index25.vue.js";
|
|
2
2
|
export { _default as C_Theme, type ThemeMode };
|
package/dist/C_Theme.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as _default, t as ThemeMode } from "./
|
|
1
|
+
import { n as _default, t as ThemeMode } from "./index25.vue.js";
|
|
2
2
|
export { _default as C_Theme, type ThemeMode };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_Time-Bd_e1YDN.css","names":[],"sources":["../src/components/C_Time/index.vue?vue&type=style&index=0&scoped=beaeb169&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 时间选择器组件样式 */\n.c-time-wrapper[data-v-beaeb169] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n.time-range-container[data-v-beaeb169] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.time-single-container[data-v-beaeb169] {\n display: flex;\n align-items: center;\n}\n.range-separator[data-v-beaeb169] {\n color: var(--c-text-3, #666);\n font-size: 14px;\n white-space: nowrap;\n user-select: none;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_Time-CKb_fwdm.css","names":[],"sources":["../src/components/C_Time/index.vue?vue&type=style&index=0&scoped=beaeb169&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 时间选择器组件样式 */\n.c-time-wrapper[data-v-beaeb169] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n.time-range-container[data-v-beaeb169] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.time-single-container[data-v-beaeb169] {\n display: flex;\n align-items: center;\n}\n.range-separator[data-v-beaeb169] {\n color: var(--c-text-3, #666);\n font-size: 14px;\n white-space: nowrap;\n user-select: none;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
package/dist/C_Time.css
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
/* unplugin-vue-components disabled *//* 时间选择器组件样式 */
|
|
2
|
-
.c-time-wrapper[data-v-
|
|
2
|
+
.c-time-wrapper[data-v-beaeb169] {
|
|
3
3
|
display: inline-flex;
|
|
4
4
|
align-items: center;
|
|
5
5
|
gap: 8px;
|
|
6
6
|
}
|
|
7
|
-
.time-range-container[data-v-
|
|
7
|
+
.time-range-container[data-v-beaeb169] {
|
|
8
8
|
display: flex;
|
|
9
9
|
align-items: center;
|
|
10
10
|
gap: 8px;
|
|
11
11
|
}
|
|
12
|
-
.time-single-container[data-v-
|
|
12
|
+
.time-single-container[data-v-beaeb169] {
|
|
13
13
|
display: flex;
|
|
14
14
|
align-items: center;
|
|
15
15
|
}
|
|
16
|
-
.range-separator[data-v-
|
|
16
|
+
.range-separator[data-v-beaeb169] {
|
|
17
17
|
color: var(--c-text-3, #666);
|
|
18
18
|
font-size: 14px;
|
|
19
19
|
white-space: nowrap;
|
|
20
20
|
user-select: none;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
/*# sourceMappingURL=C_Time-
|
|
23
|
+
/*# sourceMappingURL=C_Time-Bd_e1YDN.css.map*/
|
package/dist/C_Time.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Time.js","names":["mode","startPlaceholder","endPlaceholder","placeholder"],"sources":["../src/components/C_Time/composables/useTimeSelection.ts","../src/components/C_Time/index.vue","../src/components/C_Time/index.vue","../src/components/C_Time/index.vue"],"sourcesContent":["import { ref, computed, watch } from 'vue'\r\nimport type { TimeProps } from '../types'\r\n\r\ntype EmitFn = {\r\n (\r\n event: 'change-range',\r\n startTime: number | null,\r\n endTime: number | null\r\n ): void\r\n (event: 'change-single', time: number | null): void\r\n (event: 'change-start', time: number | null): void\r\n (event: 'change-end', time: number | null): void\r\n}\r\n\r\n/** 时间选择器逻辑 — 管理时间段/单选模式、智能限制 */\r\nexport function useTimeSelection(props: TimeProps, emit: EmitFn) {\r\n /* ==================== 响应式状态 ==================== */\r\n const startTime = ref<number | null>(props.defaultStartTime ?? null)\r\n const endTime = ref<number | null>(props.defaultEndTime ?? null)\r\n const singleTime = ref<number | null>(props.defaultSingleTime ?? null)\r\n\r\n /* ==================== 计算属性 ==================== */\r\n const timeFormat = computed(() => {\r\n if (props.useSeconds) {\r\n return props.format?.includes('ss') ? props.format : 'HH:mm:ss'\r\n }\r\n return props.format ?? 'HH:mm'\r\n })\r\n\r\n const endTimeDisabled = computed(\r\n () => props.mode === 'range' && !startTime.value\r\n )\r\n\r\n const mergedStartAttrs = computed(() => ({\r\n ...props.attrs,\r\n ...props.startTimeProps,\r\n }))\r\n\r\n const mergedEndAttrs = computed(() => ({\r\n ...props.attrs,\r\n ...props.endTimeProps,\r\n }))\r\n\r\n const mergedAttrs = computed(() => ({ ...props.attrs }))\r\n\r\n /* ==================== 时间限制函数 ==================== */\r\n const isEndHourDisabled = (hour: number): boolean => {\r\n if (!startTime.value) return false\r\n return hour < new Date(startTime.value).getHours()\r\n }\r\n\r\n const isEndMinuteDisabled = (\r\n minute: number,\r\n selectedHour: number | null\r\n ): boolean => {\r\n if (!startTime.value || selectedHour === null) return false\r\n const startDate = new Date(startTime.value)\r\n return (\r\n selectedHour === startDate.getHours() && minute < startDate.getMinutes()\r\n )\r\n }\r\n\r\n const isEndSecondDisabled = (\r\n second: number,\r\n selectedMinute: number | null,\r\n selectedHour: number | null\r\n ): boolean => {\r\n if (\r\n !startTime.value ||\r\n !props.useSeconds ||\r\n selectedHour === null ||\r\n selectedMinute === null\r\n )\r\n return false\r\n const startDate = new Date(startTime.value)\r\n return (\r\n selectedHour === startDate.getHours() &&\r\n selectedMinute === startDate.getMinutes() &&\r\n second <= startDate.getSeconds()\r\n )\r\n }\r\n\r\n /* ==================== 事件处理 ==================== */\r\n const handleStartTimeChange = (value: number | null) => {\r\n startTime.value = value\r\n if (!value) {\r\n endTime.value = null\r\n } else if (\r\n props.enableTimeRestriction &&\r\n endTime.value &&\r\n endTime.value <= value\r\n ) {\r\n endTime.value = null\r\n }\r\n emit('change-start', value)\r\n if (props.mode === 'range') emit('change-range', value, endTime.value)\r\n }\r\n\r\n const handleEndTimeChange = (value: number | null) => {\r\n endTime.value = value\r\n emit('change-end', value)\r\n if (props.mode === 'range') emit('change-range', startTime.value, value)\r\n }\r\n\r\n const handleSingleTimeChange = (value: number | null) => {\r\n singleTime.value = value\r\n emit('change-single', value)\r\n }\r\n\r\n /* ==================== 模式切换监听 ==================== */\r\n watch(\r\n () => props.mode,\r\n () => {\r\n startTime.value = props.defaultStartTime ?? null\r\n endTime.value = props.defaultEndTime ?? null\r\n singleTime.value = props.defaultSingleTime ?? null\r\n }\r\n )\r\n\r\n /* ==================== 暴露方法 ==================== */\r\n const reset = () => {\r\n startTime.value = null\r\n endTime.value = null\r\n singleTime.value = null\r\n }\r\n\r\n return {\r\n startTime,\r\n endTime,\r\n singleTime,\r\n timeFormat,\r\n endTimeDisabled,\r\n mergedStartAttrs,\r\n mergedEndAttrs,\r\n mergedAttrs,\r\n isEndHourDisabled,\r\n isEndMinuteDisabled,\r\n isEndSecondDisabled,\r\n handleStartTimeChange,\r\n handleEndTimeChange,\r\n handleSingleTimeChange,\r\n reset,\r\n }\r\n}\r\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-29\n * @Description: 时间选择器 — 薄 UI 壳,逻辑由 useTimeSelection 驱动\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-time-wrapper\">\n <!-- 时间段选择模式 -->\n <div v-if=\"mode === 'range'\" class=\"time-range-container\">\n <NTimePicker\n v-model:value=\"startTime\"\n :placeholder=\"startPlaceholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n v-bind=\"mergedStartAttrs\"\n @update:value=\"handleStartTimeChange\"\n />\n <span class=\"range-separator\">至</span>\n <NTimePicker\n v-model:value=\"endTime\"\n :placeholder=\"endPlaceholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n :is-hour-disabled=\"\n props.enableTimeRestriction ? isEndHourDisabled : undefined\n \"\n :is-minute-disabled=\"\n props.enableTimeRestriction ? isEndMinuteDisabled : undefined\n \"\n :is-second-disabled=\"\n props.enableTimeRestriction ? isEndSecondDisabled : undefined\n \"\n :disabled=\"endTimeDisabled\"\n v-bind=\"mergedEndAttrs\"\n @update:value=\"handleEndTimeChange\"\n />\n </div>\n\n <!-- 单个时间选择模式 -->\n <div v-else class=\"time-single-container\">\n <NTimePicker\n v-model:value=\"singleTime\"\n :placeholder=\"placeholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n v-bind=\"mergedAttrs\"\n @update:value=\"handleSingleTimeChange\"\n />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { NTimePicker } from \"naive-ui\";\nimport { useTimeSelection } from \"./composables/useTimeSelection\";\nimport type { TimeProps, TimeEmits, TimeExpose } from \"./types\";\n\ndefineOptions({ name: \"C_Time\" });\n\nconst props = withDefaults(defineProps<TimeProps>(), {\n mode: \"range\",\n startPlaceholder: \"请选择开始时间\",\n endPlaceholder: \"请选择结束时间\",\n placeholder: \"请选择时间\",\n format: \"HH:mm\",\n useHours: true,\n useMinutes: true,\n useSeconds: false,\n hourStep: 1,\n minuteStep: 30,\n secondStep: 1,\n startTimeProps: () => ({}),\n endTimeProps: () => ({}),\n attrs: () => ({}),\n defaultStartTime: null,\n defaultEndTime: null,\n defaultSingleTime: null,\n enableTimeRestriction: false,\n});\n\nconst emit = defineEmits<TimeEmits>();\n\nconst {\n startTime,\n endTime,\n singleTime,\n timeFormat,\n endTimeDisabled,\n mergedStartAttrs,\n mergedEndAttrs,\n mergedAttrs,\n isEndHourDisabled,\n isEndMinuteDisabled,\n isEndSecondDisabled,\n handleStartTimeChange,\n handleEndTimeChange,\n handleSingleTimeChange,\n reset,\n} = useTimeSelection(props, emit);\n\ndefineExpose<TimeExpose>({\n reset,\n startTime,\n endTime,\n singleTime,\n});\n</script>\n\n<style scoped lang=\"scss\">\n@use \"./index.scss\";\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-29\n * @Description: 时间选择器 — 薄 UI 壳,逻辑由 useTimeSelection 驱动\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-time-wrapper\">\n <!-- 时间段选择模式 -->\n <div v-if=\"mode === 'range'\" class=\"time-range-container\">\n <NTimePicker\n v-model:value=\"startTime\"\n :placeholder=\"startPlaceholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n v-bind=\"mergedStartAttrs\"\n @update:value=\"handleStartTimeChange\"\n />\n <span class=\"range-separator\">至</span>\n <NTimePicker\n v-model:value=\"endTime\"\n :placeholder=\"endPlaceholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n :is-hour-disabled=\"\n props.enableTimeRestriction ? isEndHourDisabled : undefined\n \"\n :is-minute-disabled=\"\n props.enableTimeRestriction ? isEndMinuteDisabled : undefined\n \"\n :is-second-disabled=\"\n props.enableTimeRestriction ? isEndSecondDisabled : undefined\n \"\n :disabled=\"endTimeDisabled\"\n v-bind=\"mergedEndAttrs\"\n @update:value=\"handleEndTimeChange\"\n />\n </div>\n\n <!-- 单个时间选择模式 -->\n <div v-else class=\"time-single-container\">\n <NTimePicker\n v-model:value=\"singleTime\"\n :placeholder=\"placeholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n v-bind=\"mergedAttrs\"\n @update:value=\"handleSingleTimeChange\"\n />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { NTimePicker } from \"naive-ui\";\nimport { useTimeSelection } from \"./composables/useTimeSelection\";\nimport type { TimeProps, TimeEmits, TimeExpose } from \"./types\";\n\ndefineOptions({ name: \"C_Time\" });\n\nconst props = withDefaults(defineProps<TimeProps>(), {\n mode: \"range\",\n startPlaceholder: \"请选择开始时间\",\n endPlaceholder: \"请选择结束时间\",\n placeholder: \"请选择时间\",\n format: \"HH:mm\",\n useHours: true,\n useMinutes: true,\n useSeconds: false,\n hourStep: 1,\n minuteStep: 30,\n secondStep: 1,\n startTimeProps: () => ({}),\n endTimeProps: () => ({}),\n attrs: () => ({}),\n defaultStartTime: null,\n defaultEndTime: null,\n defaultSingleTime: null,\n enableTimeRestriction: false,\n});\n\nconst emit = defineEmits<TimeEmits>();\n\nconst {\n startTime,\n endTime,\n singleTime,\n timeFormat,\n endTimeDisabled,\n mergedStartAttrs,\n mergedEndAttrs,\n mergedAttrs,\n isEndHourDisabled,\n isEndMinuteDisabled,\n isEndSecondDisabled,\n handleStartTimeChange,\n handleEndTimeChange,\n handleSingleTimeChange,\n reset,\n} = useTimeSelection(props, emit);\n\ndefineExpose<TimeExpose>({\n reset,\n startTime,\n endTime,\n singleTime,\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-05-29\n * @Description: 时间选择器 — 薄 UI 壳,逻辑由 useTimeSelection 驱动\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-time-wrapper\">\n <!-- 时间段选择模式 -->\n <div v-if=\"mode === 'range'\" class=\"time-range-container\">\n <NTimePicker\n v-model:value=\"startTime\"\n :placeholder=\"startPlaceholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n v-bind=\"mergedStartAttrs\"\n @update:value=\"handleStartTimeChange\"\n />\n <span class=\"range-separator\">至</span>\n <NTimePicker\n v-model:value=\"endTime\"\n :placeholder=\"endPlaceholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n :is-hour-disabled=\"\n props.enableTimeRestriction ? isEndHourDisabled : undefined\n \"\n :is-minute-disabled=\"\n props.enableTimeRestriction ? isEndMinuteDisabled : undefined\n \"\n :is-second-disabled=\"\n props.enableTimeRestriction ? isEndSecondDisabled : undefined\n \"\n :disabled=\"endTimeDisabled\"\n v-bind=\"mergedEndAttrs\"\n @update:value=\"handleEndTimeChange\"\n />\n </div>\n\n <!-- 单个时间选择模式 -->\n <div v-else class=\"time-single-container\">\n <NTimePicker\n v-model:value=\"singleTime\"\n :placeholder=\"placeholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n v-bind=\"mergedAttrs\"\n @update:value=\"handleSingleTimeChange\"\n />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { NTimePicker } from \"naive-ui\";\nimport { useTimeSelection } from \"./composables/useTimeSelection\";\nimport type { TimeProps, TimeEmits, TimeExpose } from \"./types\";\n\ndefineOptions({ name: \"C_Time\" });\n\nconst props = withDefaults(defineProps<TimeProps>(), {\n mode: \"range\",\n startPlaceholder: \"请选择开始时间\",\n endPlaceholder: \"请选择结束时间\",\n placeholder: \"请选择时间\",\n format: \"HH:mm\",\n useHours: true,\n useMinutes: true,\n useSeconds: false,\n hourStep: 1,\n minuteStep: 30,\n secondStep: 1,\n startTimeProps: () => ({}),\n endTimeProps: () => ({}),\n attrs: () => ({}),\n defaultStartTime: null,\n defaultEndTime: null,\n defaultSingleTime: null,\n enableTimeRestriction: false,\n});\n\nconst emit = defineEmits<TimeEmits>();\n\nconst {\n startTime,\n endTime,\n singleTime,\n timeFormat,\n endTimeDisabled,\n mergedStartAttrs,\n mergedEndAttrs,\n mergedAttrs,\n isEndHourDisabled,\n isEndMinuteDisabled,\n isEndSecondDisabled,\n handleStartTimeChange,\n handleEndTimeChange,\n handleSingleTimeChange,\n reset,\n} = useTimeSelection(props, emit);\n\ndefineExpose<TimeExpose>({\n reset,\n startTime,\n endTime,\n singleTime,\n});\n</script>\n\n<style scoped lang=\"scss\">\n@use \"./index.scss\";\n</style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"C_Time.js","names":["mode","startPlaceholder","endPlaceholder","placeholder"],"sources":["../src/components/C_Time/composables/useTimeSelection.ts","../src/components/C_Time/index.vue","../src/components/C_Time/index.vue","../src/components/C_Time/index.vue"],"sourcesContent":["import { ref, computed, watch } from 'vue'\r\nimport type { TimeProps } from '../types'\r\n\r\ntype EmitFn = {\r\n (\r\n event: 'change-range',\r\n startTime: number | null,\r\n endTime: number | null\r\n ): void\r\n (event: 'change-single', time: number | null): void\r\n (event: 'change-start', time: number | null): void\r\n (event: 'change-end', time: number | null): void\r\n}\r\n\r\n/** 时间选择器逻辑 — 管理时间段/单选模式、智能限制 */\r\nexport function useTimeSelection(props: TimeProps, emit: EmitFn) {\r\n /* ==================== 响应式状态 ==================== */\r\n const startTime = ref<number | null>(props.defaultStartTime ?? null)\r\n const endTime = ref<number | null>(props.defaultEndTime ?? null)\r\n const singleTime = ref<number | null>(props.defaultSingleTime ?? null)\r\n\r\n /* ==================== 计算属性 ==================== */\r\n const timeFormat = computed(() => {\r\n if (props.useSeconds) {\r\n return props.format?.includes('ss') ? props.format : 'HH:mm:ss'\r\n }\r\n return props.format ?? 'HH:mm'\r\n })\r\n\r\n const endTimeDisabled = computed(\r\n () => props.mode === 'range' && !startTime.value\r\n )\r\n\r\n const mergedStartAttrs = computed(() => ({\r\n ...props.attrs,\r\n ...props.startTimeProps,\r\n }))\r\n\r\n const mergedEndAttrs = computed(() => ({\r\n ...props.attrs,\r\n ...props.endTimeProps,\r\n }))\r\n\r\n const mergedAttrs = computed(() => ({ ...props.attrs }))\r\n\r\n /* ==================== 时间限制函数 ==================== */\r\n const isEndHourDisabled = (hour: number): boolean => {\r\n if (!startTime.value) return false\r\n return hour < new Date(startTime.value).getHours()\r\n }\r\n\r\n const isEndMinuteDisabled = (\r\n minute: number,\r\n selectedHour: number | null\r\n ): boolean => {\r\n if (!startTime.value || selectedHour === null) return false\r\n const startDate = new Date(startTime.value)\r\n return (\r\n selectedHour === startDate.getHours() && minute < startDate.getMinutes()\r\n )\r\n }\r\n\r\n const isEndSecondDisabled = (\r\n second: number,\r\n selectedMinute: number | null,\r\n selectedHour: number | null\r\n ): boolean => {\r\n if (\r\n !startTime.value ||\r\n !props.useSeconds ||\r\n selectedHour === null ||\r\n selectedMinute === null\r\n )\r\n return false\r\n const startDate = new Date(startTime.value)\r\n return (\r\n selectedHour === startDate.getHours() &&\r\n selectedMinute === startDate.getMinutes() &&\r\n second <= startDate.getSeconds()\r\n )\r\n }\r\n\r\n /* ==================== 事件处理 ==================== */\r\n const handleStartTimeChange = (value: number | null) => {\r\n startTime.value = value\r\n if (!value) {\r\n endTime.value = null\r\n } else if (\r\n props.enableTimeRestriction &&\r\n endTime.value &&\r\n endTime.value <= value\r\n ) {\r\n endTime.value = null\r\n }\r\n emit('change-start', value)\r\n if (props.mode === 'range') emit('change-range', value, endTime.value)\r\n }\r\n\r\n const handleEndTimeChange = (value: number | null) => {\r\n endTime.value = value\r\n emit('change-end', value)\r\n if (props.mode === 'range') emit('change-range', startTime.value, value)\r\n }\r\n\r\n const handleSingleTimeChange = (value: number | null) => {\r\n singleTime.value = value\r\n emit('change-single', value)\r\n }\r\n\r\n /* ==================== 模式切换监听 ==================== */\r\n watch(\r\n () => props.mode,\r\n () => {\r\n startTime.value = props.defaultStartTime ?? null\r\n endTime.value = props.defaultEndTime ?? null\r\n singleTime.value = props.defaultSingleTime ?? null\r\n }\r\n )\r\n\r\n /* ==================== 暴露方法 ==================== */\r\n const reset = () => {\r\n startTime.value = null\r\n endTime.value = null\r\n singleTime.value = null\r\n }\r\n\r\n return {\r\n startTime,\r\n endTime,\r\n singleTime,\r\n timeFormat,\r\n endTimeDisabled,\r\n mergedStartAttrs,\r\n mergedEndAttrs,\r\n mergedAttrs,\r\n isEndHourDisabled,\r\n isEndMinuteDisabled,\r\n isEndSecondDisabled,\r\n handleStartTimeChange,\r\n handleEndTimeChange,\r\n handleSingleTimeChange,\r\n reset,\r\n }\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-29\r\n * @Description: 时间选择器 — 薄 UI 壳,逻辑由 useTimeSelection 驱动\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-time-wrapper\">\r\n <!-- 时间段选择模式 -->\r\n <div v-if=\"mode === 'range'\" class=\"time-range-container\">\r\n <NTimePicker\r\n v-model:value=\"startTime\"\r\n :placeholder=\"startPlaceholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n v-bind=\"mergedStartAttrs\"\r\n @update:value=\"handleStartTimeChange\"\r\n />\r\n <span class=\"range-separator\">至</span>\r\n <NTimePicker\r\n v-model:value=\"endTime\"\r\n :placeholder=\"endPlaceholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n :is-hour-disabled=\"\r\n props.enableTimeRestriction ? isEndHourDisabled : undefined\r\n \"\r\n :is-minute-disabled=\"\r\n props.enableTimeRestriction ? isEndMinuteDisabled : undefined\r\n \"\r\n :is-second-disabled=\"\r\n props.enableTimeRestriction ? isEndSecondDisabled : undefined\r\n \"\r\n :disabled=\"endTimeDisabled\"\r\n v-bind=\"mergedEndAttrs\"\r\n @update:value=\"handleEndTimeChange\"\r\n />\r\n </div>\r\n\r\n <!-- 单个时间选择模式 -->\r\n <div v-else class=\"time-single-container\">\r\n <NTimePicker\r\n v-model:value=\"singleTime\"\r\n :placeholder=\"placeholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n v-bind=\"mergedAttrs\"\r\n @update:value=\"handleSingleTimeChange\"\r\n />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { NTimePicker } from \"naive-ui\";\r\nimport { useTimeSelection } from \"./composables/useTimeSelection\";\r\nimport type { TimeProps, TimeEmits, TimeExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Time\" });\r\n\r\nconst props = withDefaults(defineProps<TimeProps>(), {\r\n mode: \"range\",\r\n startPlaceholder: \"请选择开始时间\",\r\n endPlaceholder: \"请选择结束时间\",\r\n placeholder: \"请选择时间\",\r\n format: \"HH:mm\",\r\n useHours: true,\r\n useMinutes: true,\r\n useSeconds: false,\r\n hourStep: 1,\r\n minuteStep: 30,\r\n secondStep: 1,\r\n startTimeProps: () => ({}),\r\n endTimeProps: () => ({}),\r\n attrs: () => ({}),\r\n defaultStartTime: null,\r\n defaultEndTime: null,\r\n defaultSingleTime: null,\r\n enableTimeRestriction: false,\r\n});\r\n\r\nconst emit = defineEmits<TimeEmits>();\r\n\r\nconst {\r\n startTime,\r\n endTime,\r\n singleTime,\r\n timeFormat,\r\n endTimeDisabled,\r\n mergedStartAttrs,\r\n mergedEndAttrs,\r\n mergedAttrs,\r\n isEndHourDisabled,\r\n isEndMinuteDisabled,\r\n isEndSecondDisabled,\r\n handleStartTimeChange,\r\n handleEndTimeChange,\r\n handleSingleTimeChange,\r\n reset,\r\n} = useTimeSelection(props, emit);\r\n\r\ndefineExpose<TimeExpose>({\r\n reset,\r\n startTime,\r\n endTime,\r\n singleTime,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-29\r\n * @Description: 时间选择器 — 薄 UI 壳,逻辑由 useTimeSelection 驱动\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-time-wrapper\">\r\n <!-- 时间段选择模式 -->\r\n <div v-if=\"mode === 'range'\" class=\"time-range-container\">\r\n <NTimePicker\r\n v-model:value=\"startTime\"\r\n :placeholder=\"startPlaceholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n v-bind=\"mergedStartAttrs\"\r\n @update:value=\"handleStartTimeChange\"\r\n />\r\n <span class=\"range-separator\">至</span>\r\n <NTimePicker\r\n v-model:value=\"endTime\"\r\n :placeholder=\"endPlaceholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n :is-hour-disabled=\"\r\n props.enableTimeRestriction ? isEndHourDisabled : undefined\r\n \"\r\n :is-minute-disabled=\"\r\n props.enableTimeRestriction ? isEndMinuteDisabled : undefined\r\n \"\r\n :is-second-disabled=\"\r\n props.enableTimeRestriction ? isEndSecondDisabled : undefined\r\n \"\r\n :disabled=\"endTimeDisabled\"\r\n v-bind=\"mergedEndAttrs\"\r\n @update:value=\"handleEndTimeChange\"\r\n />\r\n </div>\r\n\r\n <!-- 单个时间选择模式 -->\r\n <div v-else class=\"time-single-container\">\r\n <NTimePicker\r\n v-model:value=\"singleTime\"\r\n :placeholder=\"placeholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n v-bind=\"mergedAttrs\"\r\n @update:value=\"handleSingleTimeChange\"\r\n />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { NTimePicker } from \"naive-ui\";\r\nimport { useTimeSelection } from \"./composables/useTimeSelection\";\r\nimport type { TimeProps, TimeEmits, TimeExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Time\" });\r\n\r\nconst props = withDefaults(defineProps<TimeProps>(), {\r\n mode: \"range\",\r\n startPlaceholder: \"请选择开始时间\",\r\n endPlaceholder: \"请选择结束时间\",\r\n placeholder: \"请选择时间\",\r\n format: \"HH:mm\",\r\n useHours: true,\r\n useMinutes: true,\r\n useSeconds: false,\r\n hourStep: 1,\r\n minuteStep: 30,\r\n secondStep: 1,\r\n startTimeProps: () => ({}),\r\n endTimeProps: () => ({}),\r\n attrs: () => ({}),\r\n defaultStartTime: null,\r\n defaultEndTime: null,\r\n defaultSingleTime: null,\r\n enableTimeRestriction: false,\r\n});\r\n\r\nconst emit = defineEmits<TimeEmits>();\r\n\r\nconst {\r\n startTime,\r\n endTime,\r\n singleTime,\r\n timeFormat,\r\n endTimeDisabled,\r\n mergedStartAttrs,\r\n mergedEndAttrs,\r\n mergedAttrs,\r\n isEndHourDisabled,\r\n isEndMinuteDisabled,\r\n isEndSecondDisabled,\r\n handleStartTimeChange,\r\n handleEndTimeChange,\r\n handleSingleTimeChange,\r\n reset,\r\n} = useTimeSelection(props, emit);\r\n\r\ndefineExpose<TimeExpose>({\r\n reset,\r\n startTime,\r\n endTime,\r\n singleTime,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-29\r\n * @Description: 时间选择器 — 薄 UI 壳,逻辑由 useTimeSelection 驱动\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-time-wrapper\">\r\n <!-- 时间段选择模式 -->\r\n <div v-if=\"mode === 'range'\" class=\"time-range-container\">\r\n <NTimePicker\r\n v-model:value=\"startTime\"\r\n :placeholder=\"startPlaceholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n v-bind=\"mergedStartAttrs\"\r\n @update:value=\"handleStartTimeChange\"\r\n />\r\n <span class=\"range-separator\">至</span>\r\n <NTimePicker\r\n v-model:value=\"endTime\"\r\n :placeholder=\"endPlaceholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n :is-hour-disabled=\"\r\n props.enableTimeRestriction ? isEndHourDisabled : undefined\r\n \"\r\n :is-minute-disabled=\"\r\n props.enableTimeRestriction ? isEndMinuteDisabled : undefined\r\n \"\r\n :is-second-disabled=\"\r\n props.enableTimeRestriction ? isEndSecondDisabled : undefined\r\n \"\r\n :disabled=\"endTimeDisabled\"\r\n v-bind=\"mergedEndAttrs\"\r\n @update:value=\"handleEndTimeChange\"\r\n />\r\n </div>\r\n\r\n <!-- 单个时间选择模式 -->\r\n <div v-else class=\"time-single-container\">\r\n <NTimePicker\r\n v-model:value=\"singleTime\"\r\n :placeholder=\"placeholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n v-bind=\"mergedAttrs\"\r\n @update:value=\"handleSingleTimeChange\"\r\n />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { NTimePicker } from \"naive-ui\";\r\nimport { useTimeSelection } from \"./composables/useTimeSelection\";\r\nimport type { TimeProps, TimeEmits, TimeExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Time\" });\r\n\r\nconst props = withDefaults(defineProps<TimeProps>(), {\r\n mode: \"range\",\r\n startPlaceholder: \"请选择开始时间\",\r\n endPlaceholder: \"请选择结束时间\",\r\n placeholder: \"请选择时间\",\r\n format: \"HH:mm\",\r\n useHours: true,\r\n useMinutes: true,\r\n useSeconds: false,\r\n hourStep: 1,\r\n minuteStep: 30,\r\n secondStep: 1,\r\n startTimeProps: () => ({}),\r\n endTimeProps: () => ({}),\r\n attrs: () => ({}),\r\n defaultStartTime: null,\r\n defaultEndTime: null,\r\n defaultSingleTime: null,\r\n enableTimeRestriction: false,\r\n});\r\n\r\nconst emit = defineEmits<TimeEmits>();\r\n\r\nconst {\r\n startTime,\r\n endTime,\r\n singleTime,\r\n timeFormat,\r\n endTimeDisabled,\r\n mergedStartAttrs,\r\n mergedEndAttrs,\r\n mergedAttrs,\r\n isEndHourDisabled,\r\n isEndMinuteDisabled,\r\n isEndSecondDisabled,\r\n handleStartTimeChange,\r\n handleEndTimeChange,\r\n handleSingleTimeChange,\r\n reset,\r\n} = useTimeSelection(props, emit);\r\n\r\ndefineExpose<TimeExpose>({\r\n reset,\r\n startTime,\r\n endTime,\r\n singleTime,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
|
package/dist/C_Time2.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{t as e}from"./export-helper.js";import{NTimePicker as t}from"naive-ui";import{Fragment as n,computed as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createVNode as s,defineComponent as c,isRef as l,mergeProps as u,openBlock as d,ref as f,unref as p,watch as m}from"vue";function h(e,t){let n=f(e.defaultStartTime??null),i=f(e.defaultEndTime??null),a=f(e.defaultSingleTime??null),o=r(()=>e.useSeconds?e.format?.includes(`ss`)?e.format:`HH:mm:ss`:e.format??`HH:mm`),s=r(()=>e.mode===`range`&&!n.value),c=r(()=>({...e.attrs,...e.startTimeProps})),l=r(()=>({...e.attrs,...e.endTimeProps})),u=r(()=>({...e.attrs}));return m(()=>e.mode,()=>{n.value=e.defaultStartTime??null,i.value=e.defaultEndTime??null,a.value=e.defaultSingleTime??null}),{startTime:n,endTime:i,singleTime:a,timeFormat:o,endTimeDisabled:s,mergedStartAttrs:c,mergedEndAttrs:l,mergedAttrs:u,isEndHourDisabled:e=>n.value?e<new Date(n.value).getHours():!1,isEndMinuteDisabled:(e,t)=>{if(!n.value||t===null)return!1;let r=new Date(n.value);return t===r.getHours()&&e<r.getMinutes()},isEndSecondDisabled:(t,r,i)=>{if(!n.value||!e.useSeconds||i===null||r===null)return!1;let a=new Date(n.value);return i===a.getHours()&&r===a.getMinutes()&&t<=a.getSeconds()},handleStartTimeChange:r=>{n.value=r,r?e.enableTimeRestriction&&i.value&&i.value<=r&&(i.value=null):i.value=null,t(`change-start`,r),e.mode===`range`&&t(`change-range`,r,i.value)},handleEndTimeChange:r=>{i.value=r,t(`change-end`,r),e.mode===`range`&&t(`change-range`,n.value,r)},handleSingleTimeChange:e=>{a.value=e,t(`change-single`,e)},reset:()=>{n.value=null,i.value=null,a.value=null}}}const g={class:`c-time-wrapper`},_={key:0,class:`time-range-container`},v={class:`time-single-container`};var y=e(c({name:`C_Time`,__name:`index`,props:{mode:{default:`range`},startPlaceholder:{default:`请选择开始时间`},endPlaceholder:{default:`请选择结束时间`},placeholder:{default:`请选择时间`},format:{default:`HH:mm`},useHours:{type:Boolean,default:!0},useMinutes:{type:Boolean,default:!0},useSeconds:{type:Boolean,default:!1},hourStep:{default:1},minuteStep:{default:30},secondStep:{default:1},startTimeProps:{default:()=>({})},endTimeProps:{default:()=>({})},attrs:{default:()=>({})},defaultStartTime:{default:null},defaultEndTime:{default:null},defaultSingleTime:{default:null},enableTimeRestriction:{type:Boolean,default:!1}},emits:[`change-range`,`change-single`,`change-start`,`change-end`],setup(e,{expose:r,emit:c}){let f=e,{startTime:m,endTime:y,singleTime:b,timeFormat:x,endTimeDisabled:S,mergedStartAttrs:C,mergedEndAttrs:w,mergedAttrs:T,isEndHourDisabled:E,isEndMinuteDisabled:D,isEndSecondDisabled:O,handleStartTimeChange:k,handleEndTimeChange:A,handleSingleTimeChange:j,reset:M}=h(f,c);return r({reset:M,startTime:m,endTime:y,singleTime:b}),(e,r)=>(d(),a(`div`,g,[i(` 时间段选择模式 `),e.mode===`range`?(d(),a(`div`,_,[s(p(t),u({value:p(m),"onUpdate:value":r[0]||=e=>l(m)?m.value=e:null,placeholder:e.startPlaceholder,format:p(x),actions:[`now`,`confirm`]},p(C),{"onUpdate:value":p(k)}),null,16,[`value`,`placeholder`,`format`,`onUpdate:value`]),r[3]||=o(`span`,{class:`range-separator`},`至`,-1),s(p(t),u({value:p(y),"onUpdate:value":r[1]||=e=>l(y)?y.value=e:null,placeholder:e.endPlaceholder,format:p(x),actions:[`now`,`confirm`],"is-hour-disabled":f.enableTimeRestriction?p(E):void 0,"is-minute-disabled":f.enableTimeRestriction?p(D):void 0,"is-second-disabled":f.enableTimeRestriction?p(O):void 0,disabled:p(S)},p(w),{"onUpdate:value":p(A)}),null,16,[`value`,`placeholder`,`format`,`is-hour-disabled`,`is-minute-disabled`,`is-second-disabled`,`disabled`,`onUpdate:value`])])):(d(),a(n,{key:1},[i(` 单个时间选择模式 `),o(`div`,v,[s(p(t),u({value:p(b),"onUpdate:value":r[2]||=e=>l(b)?b.value=e:null,placeholder:e.placeholder,format:p(x),actions:[`now`,`confirm`]},p(T),{"onUpdate:value":p(j)}),null,16,[`value`,`placeholder`,`format`,`onUpdate:value`])])],2112))]))}}),[[`__scopeId`,`data-v-
|
|
1
|
+
import{t as e}from"./export-helper.js";import{NTimePicker as t}from"naive-ui";import{Fragment as n,computed as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createVNode as s,defineComponent as c,isRef as l,mergeProps as u,openBlock as d,ref as f,unref as p,watch as m}from"vue";function h(e,t){let n=f(e.defaultStartTime??null),i=f(e.defaultEndTime??null),a=f(e.defaultSingleTime??null),o=r(()=>e.useSeconds?e.format?.includes(`ss`)?e.format:`HH:mm:ss`:e.format??`HH:mm`),s=r(()=>e.mode===`range`&&!n.value),c=r(()=>({...e.attrs,...e.startTimeProps})),l=r(()=>({...e.attrs,...e.endTimeProps})),u=r(()=>({...e.attrs}));return m(()=>e.mode,()=>{n.value=e.defaultStartTime??null,i.value=e.defaultEndTime??null,a.value=e.defaultSingleTime??null}),{startTime:n,endTime:i,singleTime:a,timeFormat:o,endTimeDisabled:s,mergedStartAttrs:c,mergedEndAttrs:l,mergedAttrs:u,isEndHourDisabled:e=>n.value?e<new Date(n.value).getHours():!1,isEndMinuteDisabled:(e,t)=>{if(!n.value||t===null)return!1;let r=new Date(n.value);return t===r.getHours()&&e<r.getMinutes()},isEndSecondDisabled:(t,r,i)=>{if(!n.value||!e.useSeconds||i===null||r===null)return!1;let a=new Date(n.value);return i===a.getHours()&&r===a.getMinutes()&&t<=a.getSeconds()},handleStartTimeChange:r=>{n.value=r,r?e.enableTimeRestriction&&i.value&&i.value<=r&&(i.value=null):i.value=null,t(`change-start`,r),e.mode===`range`&&t(`change-range`,r,i.value)},handleEndTimeChange:r=>{i.value=r,t(`change-end`,r),e.mode===`range`&&t(`change-range`,n.value,r)},handleSingleTimeChange:e=>{a.value=e,t(`change-single`,e)},reset:()=>{n.value=null,i.value=null,a.value=null}}}const g={class:`c-time-wrapper`},_={key:0,class:`time-range-container`},v={class:`time-single-container`};var y=e(c({name:`C_Time`,__name:`index`,props:{mode:{default:`range`},startPlaceholder:{default:`请选择开始时间`},endPlaceholder:{default:`请选择结束时间`},placeholder:{default:`请选择时间`},format:{default:`HH:mm`},useHours:{type:Boolean,default:!0},useMinutes:{type:Boolean,default:!0},useSeconds:{type:Boolean,default:!1},hourStep:{default:1},minuteStep:{default:30},secondStep:{default:1},startTimeProps:{default:()=>({})},endTimeProps:{default:()=>({})},attrs:{default:()=>({})},defaultStartTime:{default:null},defaultEndTime:{default:null},defaultSingleTime:{default:null},enableTimeRestriction:{type:Boolean,default:!1}},emits:[`change-range`,`change-single`,`change-start`,`change-end`],setup(e,{expose:r,emit:c}){let f=e,{startTime:m,endTime:y,singleTime:b,timeFormat:x,endTimeDisabled:S,mergedStartAttrs:C,mergedEndAttrs:w,mergedAttrs:T,isEndHourDisabled:E,isEndMinuteDisabled:D,isEndSecondDisabled:O,handleStartTimeChange:k,handleEndTimeChange:A,handleSingleTimeChange:j,reset:M}=h(f,c);return r({reset:M,startTime:m,endTime:y,singleTime:b}),(e,r)=>(d(),a(`div`,g,[i(` 时间段选择模式 `),e.mode===`range`?(d(),a(`div`,_,[s(p(t),u({value:p(m),"onUpdate:value":r[0]||=e=>l(m)?m.value=e:null,placeholder:e.startPlaceholder,format:p(x),actions:[`now`,`confirm`]},p(C),{"onUpdate:value":p(k)}),null,16,[`value`,`placeholder`,`format`,`onUpdate:value`]),r[3]||=o(`span`,{class:`range-separator`},`至`,-1),s(p(t),u({value:p(y),"onUpdate:value":r[1]||=e=>l(y)?y.value=e:null,placeholder:e.endPlaceholder,format:p(x),actions:[`now`,`confirm`],"is-hour-disabled":f.enableTimeRestriction?p(E):void 0,"is-minute-disabled":f.enableTimeRestriction?p(D):void 0,"is-second-disabled":f.enableTimeRestriction?p(O):void 0,disabled:p(S)},p(w),{"onUpdate:value":p(A)}),null,16,[`value`,`placeholder`,`format`,`is-hour-disabled`,`is-minute-disabled`,`is-second-disabled`,`disabled`,`onUpdate:value`])])):(d(),a(n,{key:1},[i(` 单个时间选择模式 `),o(`div`,v,[s(p(t),u({value:p(b),"onUpdate:value":r[2]||=e=>l(b)?b.value=e:null,placeholder:e.placeholder,format:p(x),actions:[`now`,`confirm`]},p(T),{"onUpdate:value":p(j)}),null,16,[`value`,`placeholder`,`format`,`onUpdate:value`])])],2112))]))}}),[[`__scopeId`,`data-v-beaeb169`]]);export{h as n,y as t};
|
|
2
2
|
//# sourceMappingURL=C_Time2.js.map
|
package/dist/C_Time2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Time2.js","names":["mode","startPlaceholder","endPlaceholder","placeholder"],"sources":["../src/components/C_Time/composables/useTimeSelection.ts","../src/components/C_Time/index.vue","../src/components/C_Time/index.vue","../src/components/C_Time/index.vue"],"sourcesContent":["import { ref, computed, watch } from 'vue'\r\nimport type { TimeProps } from '../types'\r\n\r\ntype EmitFn = {\r\n (\r\n event: 'change-range',\r\n startTime: number | null,\r\n endTime: number | null\r\n ): void\r\n (event: 'change-single', time: number | null): void\r\n (event: 'change-start', time: number | null): void\r\n (event: 'change-end', time: number | null): void\r\n}\r\n\r\n/** 时间选择器逻辑 — 管理时间段/单选模式、智能限制 */\r\nexport function useTimeSelection(props: TimeProps, emit: EmitFn) {\r\n /* ==================== 响应式状态 ==================== */\r\n const startTime = ref<number | null>(props.defaultStartTime ?? null)\r\n const endTime = ref<number | null>(props.defaultEndTime ?? null)\r\n const singleTime = ref<number | null>(props.defaultSingleTime ?? null)\r\n\r\n /* ==================== 计算属性 ==================== */\r\n const timeFormat = computed(() => {\r\n if (props.useSeconds) {\r\n return props.format?.includes('ss') ? props.format : 'HH:mm:ss'\r\n }\r\n return props.format ?? 'HH:mm'\r\n })\r\n\r\n const endTimeDisabled = computed(\r\n () => props.mode === 'range' && !startTime.value\r\n )\r\n\r\n const mergedStartAttrs = computed(() => ({\r\n ...props.attrs,\r\n ...props.startTimeProps,\r\n }))\r\n\r\n const mergedEndAttrs = computed(() => ({\r\n ...props.attrs,\r\n ...props.endTimeProps,\r\n }))\r\n\r\n const mergedAttrs = computed(() => ({ ...props.attrs }))\r\n\r\n /* ==================== 时间限制函数 ==================== */\r\n const isEndHourDisabled = (hour: number): boolean => {\r\n if (!startTime.value) return false\r\n return hour < new Date(startTime.value).getHours()\r\n }\r\n\r\n const isEndMinuteDisabled = (\r\n minute: number,\r\n selectedHour: number | null\r\n ): boolean => {\r\n if (!startTime.value || selectedHour === null) return false\r\n const startDate = new Date(startTime.value)\r\n return (\r\n selectedHour === startDate.getHours() && minute < startDate.getMinutes()\r\n )\r\n }\r\n\r\n const isEndSecondDisabled = (\r\n second: number,\r\n selectedMinute: number | null,\r\n selectedHour: number | null\r\n ): boolean => {\r\n if (\r\n !startTime.value ||\r\n !props.useSeconds ||\r\n selectedHour === null ||\r\n selectedMinute === null\r\n )\r\n return false\r\n const startDate = new Date(startTime.value)\r\n return (\r\n selectedHour === startDate.getHours() &&\r\n selectedMinute === startDate.getMinutes() &&\r\n second <= startDate.getSeconds()\r\n )\r\n }\r\n\r\n /* ==================== 事件处理 ==================== */\r\n const handleStartTimeChange = (value: number | null) => {\r\n startTime.value = value\r\n if (!value) {\r\n endTime.value = null\r\n } else if (\r\n props.enableTimeRestriction &&\r\n endTime.value &&\r\n endTime.value <= value\r\n ) {\r\n endTime.value = null\r\n }\r\n emit('change-start', value)\r\n if (props.mode === 'range') emit('change-range', value, endTime.value)\r\n }\r\n\r\n const handleEndTimeChange = (value: number | null) => {\r\n endTime.value = value\r\n emit('change-end', value)\r\n if (props.mode === 'range') emit('change-range', startTime.value, value)\r\n }\r\n\r\n const handleSingleTimeChange = (value: number | null) => {\r\n singleTime.value = value\r\n emit('change-single', value)\r\n }\r\n\r\n /* ==================== 模式切换监听 ==================== */\r\n watch(\r\n () => props.mode,\r\n () => {\r\n startTime.value = props.defaultStartTime ?? null\r\n endTime.value = props.defaultEndTime ?? null\r\n singleTime.value = props.defaultSingleTime ?? null\r\n }\r\n )\r\n\r\n /* ==================== 暴露方法 ==================== */\r\n const reset = () => {\r\n startTime.value = null\r\n endTime.value = null\r\n singleTime.value = null\r\n }\r\n\r\n return {\r\n startTime,\r\n endTime,\r\n singleTime,\r\n timeFormat,\r\n endTimeDisabled,\r\n mergedStartAttrs,\r\n mergedEndAttrs,\r\n mergedAttrs,\r\n isEndHourDisabled,\r\n isEndMinuteDisabled,\r\n isEndSecondDisabled,\r\n handleStartTimeChange,\r\n handleEndTimeChange,\r\n handleSingleTimeChange,\r\n reset,\r\n }\r\n}\r\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-29\n * @Description: 时间选择器 — 薄 UI 壳,逻辑由 useTimeSelection 驱动\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-time-wrapper\">\n <!-- 时间段选择模式 -->\n <div v-if=\"mode === 'range'\" class=\"time-range-container\">\n <NTimePicker\n v-model:value=\"startTime\"\n :placeholder=\"startPlaceholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n v-bind=\"mergedStartAttrs\"\n @update:value=\"handleStartTimeChange\"\n />\n <span class=\"range-separator\">至</span>\n <NTimePicker\n v-model:value=\"endTime\"\n :placeholder=\"endPlaceholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n :is-hour-disabled=\"\n props.enableTimeRestriction ? isEndHourDisabled : undefined\n \"\n :is-minute-disabled=\"\n props.enableTimeRestriction ? isEndMinuteDisabled : undefined\n \"\n :is-second-disabled=\"\n props.enableTimeRestriction ? isEndSecondDisabled : undefined\n \"\n :disabled=\"endTimeDisabled\"\n v-bind=\"mergedEndAttrs\"\n @update:value=\"handleEndTimeChange\"\n />\n </div>\n\n <!-- 单个时间选择模式 -->\n <div v-else class=\"time-single-container\">\n <NTimePicker\n v-model:value=\"singleTime\"\n :placeholder=\"placeholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n v-bind=\"mergedAttrs\"\n @update:value=\"handleSingleTimeChange\"\n />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { NTimePicker } from \"naive-ui\";\nimport { useTimeSelection } from \"./composables/useTimeSelection\";\nimport type { TimeProps, TimeEmits, TimeExpose } from \"./types\";\n\ndefineOptions({ name: \"C_Time\" });\n\nconst props = withDefaults(defineProps<TimeProps>(), {\n mode: \"range\",\n startPlaceholder: \"请选择开始时间\",\n endPlaceholder: \"请选择结束时间\",\n placeholder: \"请选择时间\",\n format: \"HH:mm\",\n useHours: true,\n useMinutes: true,\n useSeconds: false,\n hourStep: 1,\n minuteStep: 30,\n secondStep: 1,\n startTimeProps: () => ({}),\n endTimeProps: () => ({}),\n attrs: () => ({}),\n defaultStartTime: null,\n defaultEndTime: null,\n defaultSingleTime: null,\n enableTimeRestriction: false,\n});\n\nconst emit = defineEmits<TimeEmits>();\n\nconst {\n startTime,\n endTime,\n singleTime,\n timeFormat,\n endTimeDisabled,\n mergedStartAttrs,\n mergedEndAttrs,\n mergedAttrs,\n isEndHourDisabled,\n isEndMinuteDisabled,\n isEndSecondDisabled,\n handleStartTimeChange,\n handleEndTimeChange,\n handleSingleTimeChange,\n reset,\n} = useTimeSelection(props, emit);\n\ndefineExpose<TimeExpose>({\n reset,\n startTime,\n endTime,\n singleTime,\n});\n</script>\n\n<style scoped lang=\"scss\">\n@use \"./index.scss\";\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-29\n * @Description: 时间选择器 — 薄 UI 壳,逻辑由 useTimeSelection 驱动\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-time-wrapper\">\n <!-- 时间段选择模式 -->\n <div v-if=\"mode === 'range'\" class=\"time-range-container\">\n <NTimePicker\n v-model:value=\"startTime\"\n :placeholder=\"startPlaceholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n v-bind=\"mergedStartAttrs\"\n @update:value=\"handleStartTimeChange\"\n />\n <span class=\"range-separator\">至</span>\n <NTimePicker\n v-model:value=\"endTime\"\n :placeholder=\"endPlaceholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n :is-hour-disabled=\"\n props.enableTimeRestriction ? isEndHourDisabled : undefined\n \"\n :is-minute-disabled=\"\n props.enableTimeRestriction ? isEndMinuteDisabled : undefined\n \"\n :is-second-disabled=\"\n props.enableTimeRestriction ? isEndSecondDisabled : undefined\n \"\n :disabled=\"endTimeDisabled\"\n v-bind=\"mergedEndAttrs\"\n @update:value=\"handleEndTimeChange\"\n />\n </div>\n\n <!-- 单个时间选择模式 -->\n <div v-else class=\"time-single-container\">\n <NTimePicker\n v-model:value=\"singleTime\"\n :placeholder=\"placeholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n v-bind=\"mergedAttrs\"\n @update:value=\"handleSingleTimeChange\"\n />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { NTimePicker } from \"naive-ui\";\nimport { useTimeSelection } from \"./composables/useTimeSelection\";\nimport type { TimeProps, TimeEmits, TimeExpose } from \"./types\";\n\ndefineOptions({ name: \"C_Time\" });\n\nconst props = withDefaults(defineProps<TimeProps>(), {\n mode: \"range\",\n startPlaceholder: \"请选择开始时间\",\n endPlaceholder: \"请选择结束时间\",\n placeholder: \"请选择时间\",\n format: \"HH:mm\",\n useHours: true,\n useMinutes: true,\n useSeconds: false,\n hourStep: 1,\n minuteStep: 30,\n secondStep: 1,\n startTimeProps: () => ({}),\n endTimeProps: () => ({}),\n attrs: () => ({}),\n defaultStartTime: null,\n defaultEndTime: null,\n defaultSingleTime: null,\n enableTimeRestriction: false,\n});\n\nconst emit = defineEmits<TimeEmits>();\n\nconst {\n startTime,\n endTime,\n singleTime,\n timeFormat,\n endTimeDisabled,\n mergedStartAttrs,\n mergedEndAttrs,\n mergedAttrs,\n isEndHourDisabled,\n isEndMinuteDisabled,\n isEndSecondDisabled,\n handleStartTimeChange,\n handleEndTimeChange,\n handleSingleTimeChange,\n reset,\n} = useTimeSelection(props, emit);\n\ndefineExpose<TimeExpose>({\n reset,\n startTime,\n endTime,\n singleTime,\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-05-29\n * @Description: 时间选择器 — 薄 UI 壳,逻辑由 useTimeSelection 驱动\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-time-wrapper\">\n <!-- 时间段选择模式 -->\n <div v-if=\"mode === 'range'\" class=\"time-range-container\">\n <NTimePicker\n v-model:value=\"startTime\"\n :placeholder=\"startPlaceholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n v-bind=\"mergedStartAttrs\"\n @update:value=\"handleStartTimeChange\"\n />\n <span class=\"range-separator\">至</span>\n <NTimePicker\n v-model:value=\"endTime\"\n :placeholder=\"endPlaceholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n :is-hour-disabled=\"\n props.enableTimeRestriction ? isEndHourDisabled : undefined\n \"\n :is-minute-disabled=\"\n props.enableTimeRestriction ? isEndMinuteDisabled : undefined\n \"\n :is-second-disabled=\"\n props.enableTimeRestriction ? isEndSecondDisabled : undefined\n \"\n :disabled=\"endTimeDisabled\"\n v-bind=\"mergedEndAttrs\"\n @update:value=\"handleEndTimeChange\"\n />\n </div>\n\n <!-- 单个时间选择模式 -->\n <div v-else class=\"time-single-container\">\n <NTimePicker\n v-model:value=\"singleTime\"\n :placeholder=\"placeholder\"\n :format=\"timeFormat\"\n :actions=\"['now', 'confirm']\"\n v-bind=\"mergedAttrs\"\n @update:value=\"handleSingleTimeChange\"\n />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { NTimePicker } from \"naive-ui\";\nimport { useTimeSelection } from \"./composables/useTimeSelection\";\nimport type { TimeProps, TimeEmits, TimeExpose } from \"./types\";\n\ndefineOptions({ name: \"C_Time\" });\n\nconst props = withDefaults(defineProps<TimeProps>(), {\n mode: \"range\",\n startPlaceholder: \"请选择开始时间\",\n endPlaceholder: \"请选择结束时间\",\n placeholder: \"请选择时间\",\n format: \"HH:mm\",\n useHours: true,\n useMinutes: true,\n useSeconds: false,\n hourStep: 1,\n minuteStep: 30,\n secondStep: 1,\n startTimeProps: () => ({}),\n endTimeProps: () => ({}),\n attrs: () => ({}),\n defaultStartTime: null,\n defaultEndTime: null,\n defaultSingleTime: null,\n enableTimeRestriction: false,\n});\n\nconst emit = defineEmits<TimeEmits>();\n\nconst {\n startTime,\n endTime,\n singleTime,\n timeFormat,\n endTimeDisabled,\n mergedStartAttrs,\n mergedEndAttrs,\n mergedAttrs,\n isEndHourDisabled,\n isEndMinuteDisabled,\n isEndSecondDisabled,\n handleStartTimeChange,\n handleEndTimeChange,\n handleSingleTimeChange,\n reset,\n} = useTimeSelection(props, emit);\n\ndefineExpose<TimeExpose>({\n reset,\n startTime,\n endTime,\n singleTime,\n});\n</script>\n\n<style scoped lang=\"scss\">\n@use \"./index.scss\";\n</style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"C_Time2.js","names":["mode","startPlaceholder","endPlaceholder","placeholder"],"sources":["../src/components/C_Time/composables/useTimeSelection.ts","../src/components/C_Time/index.vue","../src/components/C_Time/index.vue","../src/components/C_Time/index.vue"],"sourcesContent":["import { ref, computed, watch } from 'vue'\r\nimport type { TimeProps } from '../types'\r\n\r\ntype EmitFn = {\r\n (\r\n event: 'change-range',\r\n startTime: number | null,\r\n endTime: number | null\r\n ): void\r\n (event: 'change-single', time: number | null): void\r\n (event: 'change-start', time: number | null): void\r\n (event: 'change-end', time: number | null): void\r\n}\r\n\r\n/** 时间选择器逻辑 — 管理时间段/单选模式、智能限制 */\r\nexport function useTimeSelection(props: TimeProps, emit: EmitFn) {\r\n /* ==================== 响应式状态 ==================== */\r\n const startTime = ref<number | null>(props.defaultStartTime ?? null)\r\n const endTime = ref<number | null>(props.defaultEndTime ?? null)\r\n const singleTime = ref<number | null>(props.defaultSingleTime ?? null)\r\n\r\n /* ==================== 计算属性 ==================== */\r\n const timeFormat = computed(() => {\r\n if (props.useSeconds) {\r\n return props.format?.includes('ss') ? props.format : 'HH:mm:ss'\r\n }\r\n return props.format ?? 'HH:mm'\r\n })\r\n\r\n const endTimeDisabled = computed(\r\n () => props.mode === 'range' && !startTime.value\r\n )\r\n\r\n const mergedStartAttrs = computed(() => ({\r\n ...props.attrs,\r\n ...props.startTimeProps,\r\n }))\r\n\r\n const mergedEndAttrs = computed(() => ({\r\n ...props.attrs,\r\n ...props.endTimeProps,\r\n }))\r\n\r\n const mergedAttrs = computed(() => ({ ...props.attrs }))\r\n\r\n /* ==================== 时间限制函数 ==================== */\r\n const isEndHourDisabled = (hour: number): boolean => {\r\n if (!startTime.value) return false\r\n return hour < new Date(startTime.value).getHours()\r\n }\r\n\r\n const isEndMinuteDisabled = (\r\n minute: number,\r\n selectedHour: number | null\r\n ): boolean => {\r\n if (!startTime.value || selectedHour === null) return false\r\n const startDate = new Date(startTime.value)\r\n return (\r\n selectedHour === startDate.getHours() && minute < startDate.getMinutes()\r\n )\r\n }\r\n\r\n const isEndSecondDisabled = (\r\n second: number,\r\n selectedMinute: number | null,\r\n selectedHour: number | null\r\n ): boolean => {\r\n if (\r\n !startTime.value ||\r\n !props.useSeconds ||\r\n selectedHour === null ||\r\n selectedMinute === null\r\n )\r\n return false\r\n const startDate = new Date(startTime.value)\r\n return (\r\n selectedHour === startDate.getHours() &&\r\n selectedMinute === startDate.getMinutes() &&\r\n second <= startDate.getSeconds()\r\n )\r\n }\r\n\r\n /* ==================== 事件处理 ==================== */\r\n const handleStartTimeChange = (value: number | null) => {\r\n startTime.value = value\r\n if (!value) {\r\n endTime.value = null\r\n } else if (\r\n props.enableTimeRestriction &&\r\n endTime.value &&\r\n endTime.value <= value\r\n ) {\r\n endTime.value = null\r\n }\r\n emit('change-start', value)\r\n if (props.mode === 'range') emit('change-range', value, endTime.value)\r\n }\r\n\r\n const handleEndTimeChange = (value: number | null) => {\r\n endTime.value = value\r\n emit('change-end', value)\r\n if (props.mode === 'range') emit('change-range', startTime.value, value)\r\n }\r\n\r\n const handleSingleTimeChange = (value: number | null) => {\r\n singleTime.value = value\r\n emit('change-single', value)\r\n }\r\n\r\n /* ==================== 模式切换监听 ==================== */\r\n watch(\r\n () => props.mode,\r\n () => {\r\n startTime.value = props.defaultStartTime ?? null\r\n endTime.value = props.defaultEndTime ?? null\r\n singleTime.value = props.defaultSingleTime ?? null\r\n }\r\n )\r\n\r\n /* ==================== 暴露方法 ==================== */\r\n const reset = () => {\r\n startTime.value = null\r\n endTime.value = null\r\n singleTime.value = null\r\n }\r\n\r\n return {\r\n startTime,\r\n endTime,\r\n singleTime,\r\n timeFormat,\r\n endTimeDisabled,\r\n mergedStartAttrs,\r\n mergedEndAttrs,\r\n mergedAttrs,\r\n isEndHourDisabled,\r\n isEndMinuteDisabled,\r\n isEndSecondDisabled,\r\n handleStartTimeChange,\r\n handleEndTimeChange,\r\n handleSingleTimeChange,\r\n reset,\r\n }\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-29\r\n * @Description: 时间选择器 — 薄 UI 壳,逻辑由 useTimeSelection 驱动\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-time-wrapper\">\r\n <!-- 时间段选择模式 -->\r\n <div v-if=\"mode === 'range'\" class=\"time-range-container\">\r\n <NTimePicker\r\n v-model:value=\"startTime\"\r\n :placeholder=\"startPlaceholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n v-bind=\"mergedStartAttrs\"\r\n @update:value=\"handleStartTimeChange\"\r\n />\r\n <span class=\"range-separator\">至</span>\r\n <NTimePicker\r\n v-model:value=\"endTime\"\r\n :placeholder=\"endPlaceholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n :is-hour-disabled=\"\r\n props.enableTimeRestriction ? isEndHourDisabled : undefined\r\n \"\r\n :is-minute-disabled=\"\r\n props.enableTimeRestriction ? isEndMinuteDisabled : undefined\r\n \"\r\n :is-second-disabled=\"\r\n props.enableTimeRestriction ? isEndSecondDisabled : undefined\r\n \"\r\n :disabled=\"endTimeDisabled\"\r\n v-bind=\"mergedEndAttrs\"\r\n @update:value=\"handleEndTimeChange\"\r\n />\r\n </div>\r\n\r\n <!-- 单个时间选择模式 -->\r\n <div v-else class=\"time-single-container\">\r\n <NTimePicker\r\n v-model:value=\"singleTime\"\r\n :placeholder=\"placeholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n v-bind=\"mergedAttrs\"\r\n @update:value=\"handleSingleTimeChange\"\r\n />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { NTimePicker } from \"naive-ui\";\r\nimport { useTimeSelection } from \"./composables/useTimeSelection\";\r\nimport type { TimeProps, TimeEmits, TimeExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Time\" });\r\n\r\nconst props = withDefaults(defineProps<TimeProps>(), {\r\n mode: \"range\",\r\n startPlaceholder: \"请选择开始时间\",\r\n endPlaceholder: \"请选择结束时间\",\r\n placeholder: \"请选择时间\",\r\n format: \"HH:mm\",\r\n useHours: true,\r\n useMinutes: true,\r\n useSeconds: false,\r\n hourStep: 1,\r\n minuteStep: 30,\r\n secondStep: 1,\r\n startTimeProps: () => ({}),\r\n endTimeProps: () => ({}),\r\n attrs: () => ({}),\r\n defaultStartTime: null,\r\n defaultEndTime: null,\r\n defaultSingleTime: null,\r\n enableTimeRestriction: false,\r\n});\r\n\r\nconst emit = defineEmits<TimeEmits>();\r\n\r\nconst {\r\n startTime,\r\n endTime,\r\n singleTime,\r\n timeFormat,\r\n endTimeDisabled,\r\n mergedStartAttrs,\r\n mergedEndAttrs,\r\n mergedAttrs,\r\n isEndHourDisabled,\r\n isEndMinuteDisabled,\r\n isEndSecondDisabled,\r\n handleStartTimeChange,\r\n handleEndTimeChange,\r\n handleSingleTimeChange,\r\n reset,\r\n} = useTimeSelection(props, emit);\r\n\r\ndefineExpose<TimeExpose>({\r\n reset,\r\n startTime,\r\n endTime,\r\n singleTime,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-29\r\n * @Description: 时间选择器 — 薄 UI 壳,逻辑由 useTimeSelection 驱动\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-time-wrapper\">\r\n <!-- 时间段选择模式 -->\r\n <div v-if=\"mode === 'range'\" class=\"time-range-container\">\r\n <NTimePicker\r\n v-model:value=\"startTime\"\r\n :placeholder=\"startPlaceholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n v-bind=\"mergedStartAttrs\"\r\n @update:value=\"handleStartTimeChange\"\r\n />\r\n <span class=\"range-separator\">至</span>\r\n <NTimePicker\r\n v-model:value=\"endTime\"\r\n :placeholder=\"endPlaceholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n :is-hour-disabled=\"\r\n props.enableTimeRestriction ? isEndHourDisabled : undefined\r\n \"\r\n :is-minute-disabled=\"\r\n props.enableTimeRestriction ? isEndMinuteDisabled : undefined\r\n \"\r\n :is-second-disabled=\"\r\n props.enableTimeRestriction ? isEndSecondDisabled : undefined\r\n \"\r\n :disabled=\"endTimeDisabled\"\r\n v-bind=\"mergedEndAttrs\"\r\n @update:value=\"handleEndTimeChange\"\r\n />\r\n </div>\r\n\r\n <!-- 单个时间选择模式 -->\r\n <div v-else class=\"time-single-container\">\r\n <NTimePicker\r\n v-model:value=\"singleTime\"\r\n :placeholder=\"placeholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n v-bind=\"mergedAttrs\"\r\n @update:value=\"handleSingleTimeChange\"\r\n />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { NTimePicker } from \"naive-ui\";\r\nimport { useTimeSelection } from \"./composables/useTimeSelection\";\r\nimport type { TimeProps, TimeEmits, TimeExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Time\" });\r\n\r\nconst props = withDefaults(defineProps<TimeProps>(), {\r\n mode: \"range\",\r\n startPlaceholder: \"请选择开始时间\",\r\n endPlaceholder: \"请选择结束时间\",\r\n placeholder: \"请选择时间\",\r\n format: \"HH:mm\",\r\n useHours: true,\r\n useMinutes: true,\r\n useSeconds: false,\r\n hourStep: 1,\r\n minuteStep: 30,\r\n secondStep: 1,\r\n startTimeProps: () => ({}),\r\n endTimeProps: () => ({}),\r\n attrs: () => ({}),\r\n defaultStartTime: null,\r\n defaultEndTime: null,\r\n defaultSingleTime: null,\r\n enableTimeRestriction: false,\r\n});\r\n\r\nconst emit = defineEmits<TimeEmits>();\r\n\r\nconst {\r\n startTime,\r\n endTime,\r\n singleTime,\r\n timeFormat,\r\n endTimeDisabled,\r\n mergedStartAttrs,\r\n mergedEndAttrs,\r\n mergedAttrs,\r\n isEndHourDisabled,\r\n isEndMinuteDisabled,\r\n isEndSecondDisabled,\r\n handleStartTimeChange,\r\n handleEndTimeChange,\r\n handleSingleTimeChange,\r\n reset,\r\n} = useTimeSelection(props, emit);\r\n\r\ndefineExpose<TimeExpose>({\r\n reset,\r\n startTime,\r\n endTime,\r\n singleTime,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-29\r\n * @Description: 时间选择器 — 薄 UI 壳,逻辑由 useTimeSelection 驱动\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-time-wrapper\">\r\n <!-- 时间段选择模式 -->\r\n <div v-if=\"mode === 'range'\" class=\"time-range-container\">\r\n <NTimePicker\r\n v-model:value=\"startTime\"\r\n :placeholder=\"startPlaceholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n v-bind=\"mergedStartAttrs\"\r\n @update:value=\"handleStartTimeChange\"\r\n />\r\n <span class=\"range-separator\">至</span>\r\n <NTimePicker\r\n v-model:value=\"endTime\"\r\n :placeholder=\"endPlaceholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n :is-hour-disabled=\"\r\n props.enableTimeRestriction ? isEndHourDisabled : undefined\r\n \"\r\n :is-minute-disabled=\"\r\n props.enableTimeRestriction ? isEndMinuteDisabled : undefined\r\n \"\r\n :is-second-disabled=\"\r\n props.enableTimeRestriction ? isEndSecondDisabled : undefined\r\n \"\r\n :disabled=\"endTimeDisabled\"\r\n v-bind=\"mergedEndAttrs\"\r\n @update:value=\"handleEndTimeChange\"\r\n />\r\n </div>\r\n\r\n <!-- 单个时间选择模式 -->\r\n <div v-else class=\"time-single-container\">\r\n <NTimePicker\r\n v-model:value=\"singleTime\"\r\n :placeholder=\"placeholder\"\r\n :format=\"timeFormat\"\r\n :actions=\"['now', 'confirm']\"\r\n v-bind=\"mergedAttrs\"\r\n @update:value=\"handleSingleTimeChange\"\r\n />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { NTimePicker } from \"naive-ui\";\r\nimport { useTimeSelection } from \"./composables/useTimeSelection\";\r\nimport type { TimeProps, TimeEmits, TimeExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Time\" });\r\n\r\nconst props = withDefaults(defineProps<TimeProps>(), {\r\n mode: \"range\",\r\n startPlaceholder: \"请选择开始时间\",\r\n endPlaceholder: \"请选择结束时间\",\r\n placeholder: \"请选择时间\",\r\n format: \"HH:mm\",\r\n useHours: true,\r\n useMinutes: true,\r\n useSeconds: false,\r\n hourStep: 1,\r\n minuteStep: 30,\r\n secondStep: 1,\r\n startTimeProps: () => ({}),\r\n endTimeProps: () => ({}),\r\n attrs: () => ({}),\r\n defaultStartTime: null,\r\n defaultEndTime: null,\r\n defaultSingleTime: null,\r\n enableTimeRestriction: false,\r\n});\r\n\r\nconst emit = defineEmits<TimeEmits>();\r\n\r\nconst {\r\n startTime,\r\n endTime,\r\n singleTime,\r\n timeFormat,\r\n endTimeDisabled,\r\n mergedStartAttrs,\r\n mergedEndAttrs,\r\n mergedAttrs,\r\n isEndHourDisabled,\r\n isEndMinuteDisabled,\r\n isEndSecondDisabled,\r\n handleStartTimeChange,\r\n handleEndTimeChange,\r\n handleSingleTimeChange,\r\n reset,\r\n} = useTimeSelection(props, emit);\r\n\r\ndefineExpose<TimeExpose>({\r\n reset,\r\n startTime,\r\n endTime,\r\n singleTime,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Timeline-BKkimrZx.css","names":[],"sources":["../src/components/C_Timeline/index.vue?vue&type=style&index=0&scoped=7e1acecc&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-timeline[data-v-7e1acecc] {\n --tl-bg: transparent;\n --tl-text-primary: var(--app-text-primary);\n --tl-text-secondary: var(--text-color-2);\n --tl-text-time: var(--text-color-3);\n --tl-line-color: color-mix(in srgb, var(--primary-color) 20%, var(--border-color));\n --tl-line-width: 2px;\n --tl-dot-size: 12px;\n --tl-icon-size: 32px;\n --tl-item-gap: 0px;\n --tl-track-spacing: 24px;\n --tl-track-width: 48px;\n --tl-content-gap: 12px;\n --tl-dot-size-sm: 8px;\n --tl-dot-size-lg: 16px;\n --tl-icon-size-sm: 24px;\n --tl-icon-size-lg: 40px;\n --tl-track-width-sm: 36px;\n --tl-track-width-lg: 60px;\n --tl-track-spacing-sm: 16px;\n --tl-track-spacing-lg: 32px;\n --tl-dot-default: var(--text-color-3);\n --tl-dot-success: #18a058;\n --tl-dot-warning: #f0a020;\n --tl-dot-error: #d03050;\n --tl-dot-info: #2080f0;\n --tl-icon-bg: var(--card-color);\n --tl-content-bg: var(--card-color);\n --tl-content-radius: 8px;\n --tl-content-padding: 12px 16px;\n --tl-tag-radius: 4px;\n --tl-h-item-width: 200px;\n --tl-h-track-height: 56px;\n position: relative;\n background: var(--tl-bg);\n}\n.c-timeline.is-small[data-v-7e1acecc] {\n --tl-dot-size: var(--tl-dot-size-sm);\n --tl-icon-size: var(--tl-icon-size-sm);\n --tl-track-width: var(--tl-track-width-sm);\n --tl-track-spacing: var(--tl-track-spacing-sm);\n}\n.c-timeline.is-large[data-v-7e1acecc] {\n --tl-dot-size: var(--tl-dot-size-lg);\n --tl-icon-size: var(--tl-icon-size-lg);\n --tl-track-width: var(--tl-track-width-lg);\n --tl-track-spacing: var(--tl-track-spacing-lg);\n}\n.c-timeline.is-vertical[data-v-7e1acecc] {\n display: flex;\n flex-direction: column;\n}\n.c-timeline.is-vertical .c-timeline__item[data-v-7e1acecc] {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n}\n.c-timeline.is-vertical .c-timeline__track[data-v-7e1acecc] {\n flex: 0 0 var(--tl-track-width);\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-right: var(--tl-content-gap);\n}\n.c-timeline.is-vertical .c-timeline__dot[data-v-7e1acecc] {\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n}\n.c-timeline.is-vertical .c-timeline__dot.is-dot[data-v-7e1acecc] {\n width: var(--tl-dot-size);\n height: var(--tl-dot-size);\n margin-top: calc((var(--tl-icon-size) - var(--tl-dot-size)) / 2);\n background: var(--tl-dot-default);\n border: 2px solid var(--card-color);\n box-shadow: 0 0 0 2px var(--tl-dot-default);\n}\n.c-timeline.is-vertical .c-timeline__dot.is-icon[data-v-7e1acecc] {\n width: var(--tl-icon-size);\n height: var(--tl-icon-size);\n background: var(--tl-icon-bg);\n border: 1.5px solid var(--tl-line-color);\n box-shadow: 0 0 0 3px var(--card-color), 0 2px 8px rgba(0, 0, 0, 0.08);\n font-size: calc(var(--tl-icon-size) * 0.5);\n}\n.c-timeline.is-vertical .c-timeline__line[data-v-7e1acecc] {\n flex: 1;\n min-height: var(--tl-track-spacing);\n width: 0;\n box-sizing: content-box;\n border-left-width: var(--tl-line-width);\n border-left-style: solid;\n border-left-color: var(--tl-line-color);\n margin: 4px 0;\n}\n.c-timeline.is-vertical.is-line-dashed .c-timeline__line[data-v-7e1acecc] {\n border-left-style: dashed;\n}\n.c-timeline.is-vertical.is-line-dotted .c-timeline__line[data-v-7e1acecc] {\n border-left-style: dotted;\n}\n.c-timeline.is-vertical .c-timeline__body[data-v-7e1acecc] {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding-bottom: var(--tl-track-spacing);\n}\n.c-timeline.is-vertical .c-timeline__item:last-child .c-timeline__body[data-v-7e1acecc] {\n padding-bottom: 0;\n}\n.c-timeline.is-horizontal[data-v-7e1acecc] {\n display: flex;\n flex-direction: row;\n overflow-x: auto;\n scrollbar-width: thin;\n scrollbar-color: var(--border-color) transparent;\n}\n.c-timeline.is-horizontal[data-v-7e1acecc]::-webkit-scrollbar {\n height: 4px;\n}\n.c-timeline.is-horizontal[data-v-7e1acecc]::-webkit-scrollbar-thumb {\n background: var(--border-color);\n border-radius: 2px;\n}\n.c-timeline.is-horizontal .c-timeline__item[data-v-7e1acecc] {\n flex: 0 0 var(--tl-h-item-width);\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.c-timeline.is-horizontal .c-timeline__track[data-v-7e1acecc] {\n position: relative;\n width: 100%;\n height: var(--tl-h-track-height);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: visible;\n}\n.c-timeline.is-horizontal .c-timeline__dot[data-v-7e1acecc] {\n position: relative;\n z-index: 1;\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--tl-icon-bg);\n}\n.c-timeline.is-horizontal .c-timeline__dot.is-dot[data-v-7e1acecc] {\n width: var(--tl-dot-size);\n height: var(--tl-dot-size);\n background: var(--tl-dot-default);\n border: 2px solid var(--card-color);\n box-shadow: 0 0 0 2px var(--tl-dot-default);\n}\n.c-timeline.is-horizontal .c-timeline__dot.is-icon[data-v-7e1acecc] {\n width: var(--tl-icon-size);\n height: var(--tl-icon-size);\n background: var(--tl-icon-bg);\n border: 1.5px solid var(--tl-line-color);\n box-shadow: 0 0 0 3px var(--card-color), 0 2px 8px rgba(0, 0, 0, 0.08);\n font-size: calc(var(--tl-icon-size) * 0.5);\n}\n.c-timeline.is-horizontal .c-timeline__line[data-v-7e1acecc] {\n display: none;\n}\n.c-timeline.is-horizontal .c-timeline__body[data-v-7e1acecc] {\n width: 100%;\n padding: 8px 12px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n text-align: center;\n}\n.c-timeline.is-horizontal .c-timeline__header[data-v-7e1acecc] {\n justify-content: center;\n flex-wrap: wrap;\n}\n.c-timeline.is-horizontal .c-timeline__content[data-v-7e1acecc] {\n text-align: left;\n font-size: 12px;\n}\n.c-timeline__header[data-v-7e1acecc] {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n}\n.c-timeline__title[data-v-7e1acecc] {\n font-size: 14px;\n font-weight: 600;\n color: var(--tl-text-primary);\n line-height: 1.5;\n}\n.c-timeline__time[data-v-7e1acecc] {\n display: inline-flex;\n align-items: center;\n padding: 1px 7px;\n font-size: 11px;\n color: var(--tl-text-time);\n white-space: nowrap;\n background: color-mix(in srgb, var(--border-color) 40%, transparent);\n border-radius: 4px;\n line-height: 1.6;\n}\n.c-timeline__tags[data-v-7e1acecc] {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n}\n.c-timeline__tag[data-v-7e1acecc] {\n display: inline-flex;\n align-items: center;\n padding: 1px 8px;\n font-size: 11px;\n font-weight: 500;\n border-radius: var(--tl-tag-radius);\n background: color-mix(in srgb, var(--primary-color) 10%, var(--card-color));\n color: var(--primary-color);\n border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);\n}\n.c-timeline__content[data-v-7e1acecc] {\n padding: var(--tl-content-padding);\n background: var(--tl-content-bg);\n border-radius: var(--tl-content-radius);\n border: 1px solid var(--border-color);\n font-size: 13px;\n color: var(--tl-text-secondary);\n line-height: 1.7;\n}\n.c-timeline__detail[data-v-7e1acecc] {\n overflow: hidden;\n transition: max-height 0.3s ease, opacity 0.3s ease;\n}\n.c-timeline__detail.is-collapsed[data-v-7e1acecc] {\n max-height: 0;\n opacity: 0;\n}\n.c-timeline__detail.is-expanded[data-v-7e1acecc] {\n max-height: 800px;\n opacity: 1;\n}\n.c-timeline__collapse-trigger[data-v-7e1acecc] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: var(--primary-color);\n cursor: pointer;\n user-select: none;\n transition: opacity 0.2s;\n}\n.c-timeline__collapse-trigger[data-v-7e1acecc]:hover {\n opacity: 0.75;\n}\n.c-timeline__collapse-trigger .collapse-arrow[data-v-7e1acecc] {\n transition: transform 0.25s;\n}\n.c-timeline__collapse-trigger.is-expanded .collapse-arrow[data-v-7e1acecc] {\n transform: rotate(180deg);\n}\n.c-timeline__pending[data-v-7e1acecc] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 13px;\n color: var(--tl-text-time);\n padding: 8px 0 0 var(--tl-track-width);\n}\n.c-timeline__pending .pending-dot[data-v-7e1acecc] {\n width: 10px;\n height: 10px;\n flex-shrink: 0;\n border-radius: 50%;\n background: var(--tl-dot-info);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-dot-info) 20%, transparent);\n animation: tl-pulse-7e1acecc 1.4s infinite;\n}\n.c-timeline.is-horizontal .c-timeline__pending[data-v-7e1acecc] {\n padding-left: 0;\n}\n@keyframes tl-pulse-7e1acecc {\n0%, 100% {\n opacity: 0.4;\n transform: scale(1);\n}\n50% {\n opacity: 1;\n transform: scale(1.15);\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
1
|
+
{"version":3,"file":"C_Timeline-DG70WtJP.css","names":[],"sources":["../src/components/C_Timeline/index.vue?vue&type=style&index=0&scoped=509f7cd5&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-timeline[data-v-509f7cd5] {\n --tl-bg: transparent;\n --tl-text-primary: var(--app-text-primary);\n --tl-text-secondary: var(--text-color-2);\n --tl-text-time: var(--text-color-3);\n --tl-line-color: color-mix(in srgb, var(--primary-color) 20%, var(--border-color));\n --tl-line-width: 2px;\n --tl-dot-size: 12px;\n --tl-icon-size: 32px;\n --tl-item-gap: 0px;\n --tl-track-spacing: 24px;\n --tl-track-width: 48px;\n --tl-content-gap: 12px;\n --tl-dot-size-sm: 8px;\n --tl-dot-size-lg: 16px;\n --tl-icon-size-sm: 24px;\n --tl-icon-size-lg: 40px;\n --tl-track-width-sm: 36px;\n --tl-track-width-lg: 60px;\n --tl-track-spacing-sm: 16px;\n --tl-track-spacing-lg: 32px;\n --tl-dot-default: var(--text-color-3);\n --tl-dot-success: #18a058;\n --tl-dot-warning: #f0a020;\n --tl-dot-error: #d03050;\n --tl-dot-info: #2080f0;\n --tl-icon-bg: var(--card-color);\n --tl-content-bg: var(--card-color);\n --tl-content-radius: 8px;\n --tl-content-padding: 12px 16px;\n --tl-tag-radius: 4px;\n --tl-h-item-width: 200px;\n --tl-h-track-height: 56px;\n position: relative;\n background: var(--tl-bg);\n}\n.c-timeline.is-small[data-v-509f7cd5] {\n --tl-dot-size: var(--tl-dot-size-sm);\n --tl-icon-size: var(--tl-icon-size-sm);\n --tl-track-width: var(--tl-track-width-sm);\n --tl-track-spacing: var(--tl-track-spacing-sm);\n}\n.c-timeline.is-large[data-v-509f7cd5] {\n --tl-dot-size: var(--tl-dot-size-lg);\n --tl-icon-size: var(--tl-icon-size-lg);\n --tl-track-width: var(--tl-track-width-lg);\n --tl-track-spacing: var(--tl-track-spacing-lg);\n}\n.c-timeline.is-vertical[data-v-509f7cd5] {\n display: flex;\n flex-direction: column;\n}\n.c-timeline.is-vertical .c-timeline__item[data-v-509f7cd5] {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n}\n.c-timeline.is-vertical .c-timeline__track[data-v-509f7cd5] {\n flex: 0 0 var(--tl-track-width);\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-right: var(--tl-content-gap);\n}\n.c-timeline.is-vertical .c-timeline__dot[data-v-509f7cd5] {\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n}\n.c-timeline.is-vertical .c-timeline__dot.is-dot[data-v-509f7cd5] {\n width: var(--tl-dot-size);\n height: var(--tl-dot-size);\n margin-top: calc((var(--tl-icon-size) - var(--tl-dot-size)) / 2);\n background: var(--tl-dot-default);\n border: 2px solid var(--card-color);\n box-shadow: 0 0 0 2px var(--tl-dot-default);\n}\n.c-timeline.is-vertical .c-timeline__dot.is-icon[data-v-509f7cd5] {\n width: var(--tl-icon-size);\n height: var(--tl-icon-size);\n background: var(--tl-icon-bg);\n border: 1.5px solid var(--tl-line-color);\n box-shadow: 0 0 0 3px var(--card-color), 0 2px 8px rgba(0, 0, 0, 0.08);\n font-size: calc(var(--tl-icon-size) * 0.5);\n}\n.c-timeline.is-vertical .c-timeline__line[data-v-509f7cd5] {\n flex: 1;\n min-height: var(--tl-track-spacing);\n width: 0;\n box-sizing: content-box;\n border-left-width: var(--tl-line-width);\n border-left-style: solid;\n border-left-color: var(--tl-line-color);\n margin: 4px 0;\n}\n.c-timeline.is-vertical.is-line-dashed .c-timeline__line[data-v-509f7cd5] {\n border-left-style: dashed;\n}\n.c-timeline.is-vertical.is-line-dotted .c-timeline__line[data-v-509f7cd5] {\n border-left-style: dotted;\n}\n.c-timeline.is-vertical .c-timeline__body[data-v-509f7cd5] {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding-bottom: var(--tl-track-spacing);\n}\n.c-timeline.is-vertical .c-timeline__item:last-child .c-timeline__body[data-v-509f7cd5] {\n padding-bottom: 0;\n}\n.c-timeline.is-horizontal[data-v-509f7cd5] {\n display: flex;\n flex-direction: row;\n overflow-x: auto;\n scrollbar-width: thin;\n scrollbar-color: var(--border-color) transparent;\n}\n.c-timeline.is-horizontal[data-v-509f7cd5]::-webkit-scrollbar {\n height: 4px;\n}\n.c-timeline.is-horizontal[data-v-509f7cd5]::-webkit-scrollbar-thumb {\n background: var(--border-color);\n border-radius: 2px;\n}\n.c-timeline.is-horizontal .c-timeline__item[data-v-509f7cd5] {\n flex: 0 0 var(--tl-h-item-width);\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.c-timeline.is-horizontal .c-timeline__track[data-v-509f7cd5] {\n position: relative;\n width: 100%;\n height: var(--tl-h-track-height);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: visible;\n}\n.c-timeline.is-horizontal .c-timeline__dot[data-v-509f7cd5] {\n position: relative;\n z-index: 1;\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--tl-icon-bg);\n}\n.c-timeline.is-horizontal .c-timeline__dot.is-dot[data-v-509f7cd5] {\n width: var(--tl-dot-size);\n height: var(--tl-dot-size);\n background: var(--tl-dot-default);\n border: 2px solid var(--card-color);\n box-shadow: 0 0 0 2px var(--tl-dot-default);\n}\n.c-timeline.is-horizontal .c-timeline__dot.is-icon[data-v-509f7cd5] {\n width: var(--tl-icon-size);\n height: var(--tl-icon-size);\n background: var(--tl-icon-bg);\n border: 1.5px solid var(--tl-line-color);\n box-shadow: 0 0 0 3px var(--card-color), 0 2px 8px rgba(0, 0, 0, 0.08);\n font-size: calc(var(--tl-icon-size) * 0.5);\n}\n.c-timeline.is-horizontal .c-timeline__line[data-v-509f7cd5] {\n display: none;\n}\n.c-timeline.is-horizontal .c-timeline__body[data-v-509f7cd5] {\n width: 100%;\n padding: 8px 12px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n text-align: center;\n}\n.c-timeline.is-horizontal .c-timeline__header[data-v-509f7cd5] {\n justify-content: center;\n flex-wrap: wrap;\n}\n.c-timeline.is-horizontal .c-timeline__content[data-v-509f7cd5] {\n text-align: left;\n font-size: 12px;\n}\n.c-timeline__header[data-v-509f7cd5] {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n}\n.c-timeline__title[data-v-509f7cd5] {\n font-size: 14px;\n font-weight: 600;\n color: var(--tl-text-primary);\n line-height: 1.5;\n}\n.c-timeline__time[data-v-509f7cd5] {\n display: inline-flex;\n align-items: center;\n padding: 1px 7px;\n font-size: 11px;\n color: var(--tl-text-time);\n white-space: nowrap;\n background: color-mix(in srgb, var(--border-color) 40%, transparent);\n border-radius: 4px;\n line-height: 1.6;\n}\n.c-timeline__tags[data-v-509f7cd5] {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n}\n.c-timeline__tag[data-v-509f7cd5] {\n display: inline-flex;\n align-items: center;\n padding: 1px 8px;\n font-size: 11px;\n font-weight: 500;\n border-radius: var(--tl-tag-radius);\n background: color-mix(in srgb, var(--primary-color) 10%, var(--card-color));\n color: var(--primary-color);\n border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);\n}\n.c-timeline__content[data-v-509f7cd5] {\n padding: var(--tl-content-padding);\n background: var(--tl-content-bg);\n border-radius: var(--tl-content-radius);\n border: 1px solid var(--border-color);\n font-size: 13px;\n color: var(--tl-text-secondary);\n line-height: 1.7;\n}\n.c-timeline__detail[data-v-509f7cd5] {\n overflow: hidden;\n transition: max-height 0.3s ease, opacity 0.3s ease;\n}\n.c-timeline__detail.is-collapsed[data-v-509f7cd5] {\n max-height: 0;\n opacity: 0;\n}\n.c-timeline__detail.is-expanded[data-v-509f7cd5] {\n max-height: 800px;\n opacity: 1;\n}\n.c-timeline__collapse-trigger[data-v-509f7cd5] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: var(--primary-color);\n cursor: pointer;\n user-select: none;\n transition: opacity 0.2s;\n}\n.c-timeline__collapse-trigger[data-v-509f7cd5]:hover {\n opacity: 0.75;\n}\n.c-timeline__collapse-trigger .collapse-arrow[data-v-509f7cd5] {\n transition: transform 0.25s;\n}\n.c-timeline__collapse-trigger.is-expanded .collapse-arrow[data-v-509f7cd5] {\n transform: rotate(180deg);\n}\n.c-timeline__pending[data-v-509f7cd5] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 13px;\n color: var(--tl-text-time);\n padding: 8px 0 0 var(--tl-track-width);\n}\n.c-timeline__pending .pending-dot[data-v-509f7cd5] {\n width: 10px;\n height: 10px;\n flex-shrink: 0;\n border-radius: 50%;\n background: var(--tl-dot-info);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-dot-info) 20%, transparent);\n animation: tl-pulse-509f7cd5 1.4s infinite;\n}\n.c-timeline.is-horizontal .c-timeline__pending[data-v-509f7cd5] {\n padding-left: 0;\n}\n@keyframes tl-pulse-509f7cd5 {\n0%, 100% {\n opacity: 0.4;\n transform: scale(1);\n}\n50% {\n opacity: 1;\n transform: scale(1.15);\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_Timeline-DTuSCX6p.css","names":[],"sources":["../src/components/C_Timeline/index.vue?vue&type=style&index=0&scoped=7e1acecc&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-timeline[data-v-7e1acecc] {\n --tl-bg: transparent;\n --tl-text-primary: var(--app-text-primary);\n --tl-text-secondary: var(--text-color-2);\n --tl-text-time: var(--text-color-3);\n --tl-line-color: color-mix(in srgb, var(--primary-color) 20%, var(--border-color));\n --tl-line-width: 2px;\n --tl-dot-size: 12px;\n --tl-icon-size: 32px;\n --tl-item-gap: 0px;\n --tl-track-spacing: 24px;\n --tl-track-width: 48px;\n --tl-content-gap: 12px;\n --tl-dot-size-sm: 8px;\n --tl-dot-size-lg: 16px;\n --tl-icon-size-sm: 24px;\n --tl-icon-size-lg: 40px;\n --tl-track-width-sm: 36px;\n --tl-track-width-lg: 60px;\n --tl-track-spacing-sm: 16px;\n --tl-track-spacing-lg: 32px;\n --tl-dot-default: var(--text-color-3);\n --tl-dot-success: #18a058;\n --tl-dot-warning: #f0a020;\n --tl-dot-error: #d03050;\n --tl-dot-info: #2080f0;\n --tl-icon-bg: var(--card-color);\n --tl-content-bg: var(--card-color);\n --tl-content-radius: 8px;\n --tl-content-padding: 12px 16px;\n --tl-tag-radius: 4px;\n --tl-h-item-width: 200px;\n --tl-h-track-height: 56px;\n position: relative;\n background: var(--tl-bg);\n}\n.c-timeline.is-small[data-v-7e1acecc] {\n --tl-dot-size: var(--tl-dot-size-sm);\n --tl-icon-size: var(--tl-icon-size-sm);\n --tl-track-width: var(--tl-track-width-sm);\n --tl-track-spacing: var(--tl-track-spacing-sm);\n}\n.c-timeline.is-large[data-v-7e1acecc] {\n --tl-dot-size: var(--tl-dot-size-lg);\n --tl-icon-size: var(--tl-icon-size-lg);\n --tl-track-width: var(--tl-track-width-lg);\n --tl-track-spacing: var(--tl-track-spacing-lg);\n}\n.c-timeline.is-vertical[data-v-7e1acecc] {\n display: flex;\n flex-direction: column;\n}\n.c-timeline.is-vertical .c-timeline__item[data-v-7e1acecc] {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n}\n.c-timeline.is-vertical .c-timeline__track[data-v-7e1acecc] {\n flex: 0 0 var(--tl-track-width);\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-right: var(--tl-content-gap);\n}\n.c-timeline.is-vertical .c-timeline__dot[data-v-7e1acecc] {\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n}\n.c-timeline.is-vertical .c-timeline__dot.is-dot[data-v-7e1acecc] {\n width: var(--tl-dot-size);\n height: var(--tl-dot-size);\n margin-top: calc((var(--tl-icon-size) - var(--tl-dot-size)) / 2);\n background: var(--tl-dot-default);\n border: 2px solid var(--card-color);\n box-shadow: 0 0 0 2px var(--tl-dot-default);\n}\n.c-timeline.is-vertical .c-timeline__dot.is-icon[data-v-7e1acecc] {\n width: var(--tl-icon-size);\n height: var(--tl-icon-size);\n background: var(--tl-icon-bg);\n border: 1.5px solid var(--tl-line-color);\n box-shadow: 0 0 0 3px var(--card-color), 0 2px 8px rgba(0, 0, 0, 0.08);\n font-size: calc(var(--tl-icon-size) * 0.5);\n}\n.c-timeline.is-vertical .c-timeline__line[data-v-7e1acecc] {\n flex: 1;\n min-height: var(--tl-track-spacing);\n width: 0;\n box-sizing: content-box;\n border-left-width: var(--tl-line-width);\n border-left-style: solid;\n border-left-color: var(--tl-line-color);\n margin: 4px 0;\n}\n.c-timeline.is-vertical.is-line-dashed .c-timeline__line[data-v-7e1acecc] {\n border-left-style: dashed;\n}\n.c-timeline.is-vertical.is-line-dotted .c-timeline__line[data-v-7e1acecc] {\n border-left-style: dotted;\n}\n.c-timeline.is-vertical .c-timeline__body[data-v-7e1acecc] {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding-bottom: var(--tl-track-spacing);\n}\n.c-timeline.is-vertical .c-timeline__item:last-child .c-timeline__body[data-v-7e1acecc] {\n padding-bottom: 0;\n}\n.c-timeline.is-horizontal[data-v-7e1acecc] {\n display: flex;\n flex-direction: row;\n overflow-x: auto;\n scrollbar-width: thin;\n scrollbar-color: var(--border-color) transparent;\n}\n.c-timeline.is-horizontal[data-v-7e1acecc]::-webkit-scrollbar {\n height: 4px;\n}\n.c-timeline.is-horizontal[data-v-7e1acecc]::-webkit-scrollbar-thumb {\n background: var(--border-color);\n border-radius: 2px;\n}\n.c-timeline.is-horizontal .c-timeline__item[data-v-7e1acecc] {\n flex: 0 0 var(--tl-h-item-width);\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.c-timeline.is-horizontal .c-timeline__track[data-v-7e1acecc] {\n position: relative;\n width: 100%;\n height: var(--tl-h-track-height);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: visible;\n}\n.c-timeline.is-horizontal .c-timeline__dot[data-v-7e1acecc] {\n position: relative;\n z-index: 1;\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--tl-icon-bg);\n}\n.c-timeline.is-horizontal .c-timeline__dot.is-dot[data-v-7e1acecc] {\n width: var(--tl-dot-size);\n height: var(--tl-dot-size);\n background: var(--tl-dot-default);\n border: 2px solid var(--card-color);\n box-shadow: 0 0 0 2px var(--tl-dot-default);\n}\n.c-timeline.is-horizontal .c-timeline__dot.is-icon[data-v-7e1acecc] {\n width: var(--tl-icon-size);\n height: var(--tl-icon-size);\n background: var(--tl-icon-bg);\n border: 1.5px solid var(--tl-line-color);\n box-shadow: 0 0 0 3px var(--card-color), 0 2px 8px rgba(0, 0, 0, 0.08);\n font-size: calc(var(--tl-icon-size) * 0.5);\n}\n.c-timeline.is-horizontal .c-timeline__line[data-v-7e1acecc] {\n display: none;\n}\n.c-timeline.is-horizontal .c-timeline__body[data-v-7e1acecc] {\n width: 100%;\n padding: 8px 12px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n text-align: center;\n}\n.c-timeline.is-horizontal .c-timeline__header[data-v-7e1acecc] {\n justify-content: center;\n flex-wrap: wrap;\n}\n.c-timeline.is-horizontal .c-timeline__content[data-v-7e1acecc] {\n text-align: left;\n font-size: 12px;\n}\n.c-timeline__header[data-v-7e1acecc] {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n}\n.c-timeline__title[data-v-7e1acecc] {\n font-size: 14px;\n font-weight: 600;\n color: var(--tl-text-primary);\n line-height: 1.5;\n}\n.c-timeline__time[data-v-7e1acecc] {\n display: inline-flex;\n align-items: center;\n padding: 1px 7px;\n font-size: 11px;\n color: var(--tl-text-time);\n white-space: nowrap;\n background: color-mix(in srgb, var(--border-color) 40%, transparent);\n border-radius: 4px;\n line-height: 1.6;\n}\n.c-timeline__tags[data-v-7e1acecc] {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n}\n.c-timeline__tag[data-v-7e1acecc] {\n display: inline-flex;\n align-items: center;\n padding: 1px 8px;\n font-size: 11px;\n font-weight: 500;\n border-radius: var(--tl-tag-radius);\n background: color-mix(in srgb, var(--primary-color) 10%, var(--card-color));\n color: var(--primary-color);\n border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);\n}\n.c-timeline__content[data-v-7e1acecc] {\n padding: var(--tl-content-padding);\n background: var(--tl-content-bg);\n border-radius: var(--tl-content-radius);\n border: 1px solid var(--border-color);\n font-size: 13px;\n color: var(--tl-text-secondary);\n line-height: 1.7;\n}\n.c-timeline__detail[data-v-7e1acecc] {\n overflow: hidden;\n transition: max-height 0.3s ease, opacity 0.3s ease;\n}\n.c-timeline__detail.is-collapsed[data-v-7e1acecc] {\n max-height: 0;\n opacity: 0;\n}\n.c-timeline__detail.is-expanded[data-v-7e1acecc] {\n max-height: 800px;\n opacity: 1;\n}\n.c-timeline__collapse-trigger[data-v-7e1acecc] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: var(--primary-color);\n cursor: pointer;\n user-select: none;\n transition: opacity 0.2s;\n}\n.c-timeline__collapse-trigger[data-v-7e1acecc]:hover {\n opacity: 0.75;\n}\n.c-timeline__collapse-trigger .collapse-arrow[data-v-7e1acecc] {\n transition: transform 0.25s;\n}\n.c-timeline__collapse-trigger.is-expanded .collapse-arrow[data-v-7e1acecc] {\n transform: rotate(180deg);\n}\n.c-timeline__pending[data-v-7e1acecc] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 13px;\n color: var(--tl-text-time);\n padding: 8px 0 0 var(--tl-track-width);\n}\n.c-timeline__pending .pending-dot[data-v-7e1acecc] {\n width: 10px;\n height: 10px;\n flex-shrink: 0;\n border-radius: 50%;\n background: var(--tl-dot-info);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-dot-info) 20%, transparent);\n animation: tl-pulse-7e1acecc 1.4s infinite;\n}\n.c-timeline.is-horizontal .c-timeline__pending[data-v-7e1acecc] {\n padding-left: 0;\n}\n@keyframes tl-pulse-7e1acecc {\n0%, 100% {\n opacity: 0.4;\n transform: scale(1);\n}\n50% {\n opacity: 1;\n transform: scale(1.15);\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
1
|
+
{"version":3,"file":"C_Timeline-Dzxmmdjg.css","names":[],"sources":["../src/components/C_Timeline/index.vue?vue&type=style&index=0&scoped=509f7cd5&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-timeline[data-v-509f7cd5] {\n --tl-bg: transparent;\n --tl-text-primary: var(--app-text-primary);\n --tl-text-secondary: var(--text-color-2);\n --tl-text-time: var(--text-color-3);\n --tl-line-color: color-mix(in srgb, var(--primary-color) 20%, var(--border-color));\n --tl-line-width: 2px;\n --tl-dot-size: 12px;\n --tl-icon-size: 32px;\n --tl-item-gap: 0px;\n --tl-track-spacing: 24px;\n --tl-track-width: 48px;\n --tl-content-gap: 12px;\n --tl-dot-size-sm: 8px;\n --tl-dot-size-lg: 16px;\n --tl-icon-size-sm: 24px;\n --tl-icon-size-lg: 40px;\n --tl-track-width-sm: 36px;\n --tl-track-width-lg: 60px;\n --tl-track-spacing-sm: 16px;\n --tl-track-spacing-lg: 32px;\n --tl-dot-default: var(--text-color-3);\n --tl-dot-success: #18a058;\n --tl-dot-warning: #f0a020;\n --tl-dot-error: #d03050;\n --tl-dot-info: #2080f0;\n --tl-icon-bg: var(--card-color);\n --tl-content-bg: var(--card-color);\n --tl-content-radius: 8px;\n --tl-content-padding: 12px 16px;\n --tl-tag-radius: 4px;\n --tl-h-item-width: 200px;\n --tl-h-track-height: 56px;\n position: relative;\n background: var(--tl-bg);\n}\n.c-timeline.is-small[data-v-509f7cd5] {\n --tl-dot-size: var(--tl-dot-size-sm);\n --tl-icon-size: var(--tl-icon-size-sm);\n --tl-track-width: var(--tl-track-width-sm);\n --tl-track-spacing: var(--tl-track-spacing-sm);\n}\n.c-timeline.is-large[data-v-509f7cd5] {\n --tl-dot-size: var(--tl-dot-size-lg);\n --tl-icon-size: var(--tl-icon-size-lg);\n --tl-track-width: var(--tl-track-width-lg);\n --tl-track-spacing: var(--tl-track-spacing-lg);\n}\n.c-timeline.is-vertical[data-v-509f7cd5] {\n display: flex;\n flex-direction: column;\n}\n.c-timeline.is-vertical .c-timeline__item[data-v-509f7cd5] {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n}\n.c-timeline.is-vertical .c-timeline__track[data-v-509f7cd5] {\n flex: 0 0 var(--tl-track-width);\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-right: var(--tl-content-gap);\n}\n.c-timeline.is-vertical .c-timeline__dot[data-v-509f7cd5] {\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n}\n.c-timeline.is-vertical .c-timeline__dot.is-dot[data-v-509f7cd5] {\n width: var(--tl-dot-size);\n height: var(--tl-dot-size);\n margin-top: calc((var(--tl-icon-size) - var(--tl-dot-size)) / 2);\n background: var(--tl-dot-default);\n border: 2px solid var(--card-color);\n box-shadow: 0 0 0 2px var(--tl-dot-default);\n}\n.c-timeline.is-vertical .c-timeline__dot.is-icon[data-v-509f7cd5] {\n width: var(--tl-icon-size);\n height: var(--tl-icon-size);\n background: var(--tl-icon-bg);\n border: 1.5px solid var(--tl-line-color);\n box-shadow: 0 0 0 3px var(--card-color), 0 2px 8px rgba(0, 0, 0, 0.08);\n font-size: calc(var(--tl-icon-size) * 0.5);\n}\n.c-timeline.is-vertical .c-timeline__line[data-v-509f7cd5] {\n flex: 1;\n min-height: var(--tl-track-spacing);\n width: 0;\n box-sizing: content-box;\n border-left-width: var(--tl-line-width);\n border-left-style: solid;\n border-left-color: var(--tl-line-color);\n margin: 4px 0;\n}\n.c-timeline.is-vertical.is-line-dashed .c-timeline__line[data-v-509f7cd5] {\n border-left-style: dashed;\n}\n.c-timeline.is-vertical.is-line-dotted .c-timeline__line[data-v-509f7cd5] {\n border-left-style: dotted;\n}\n.c-timeline.is-vertical .c-timeline__body[data-v-509f7cd5] {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding-bottom: var(--tl-track-spacing);\n}\n.c-timeline.is-vertical .c-timeline__item:last-child .c-timeline__body[data-v-509f7cd5] {\n padding-bottom: 0;\n}\n.c-timeline.is-horizontal[data-v-509f7cd5] {\n display: flex;\n flex-direction: row;\n overflow-x: auto;\n scrollbar-width: thin;\n scrollbar-color: var(--border-color) transparent;\n}\n.c-timeline.is-horizontal[data-v-509f7cd5]::-webkit-scrollbar {\n height: 4px;\n}\n.c-timeline.is-horizontal[data-v-509f7cd5]::-webkit-scrollbar-thumb {\n background: var(--border-color);\n border-radius: 2px;\n}\n.c-timeline.is-horizontal .c-timeline__item[data-v-509f7cd5] {\n flex: 0 0 var(--tl-h-item-width);\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.c-timeline.is-horizontal .c-timeline__track[data-v-509f7cd5] {\n position: relative;\n width: 100%;\n height: var(--tl-h-track-height);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: visible;\n}\n.c-timeline.is-horizontal .c-timeline__dot[data-v-509f7cd5] {\n position: relative;\n z-index: 1;\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--tl-icon-bg);\n}\n.c-timeline.is-horizontal .c-timeline__dot.is-dot[data-v-509f7cd5] {\n width: var(--tl-dot-size);\n height: var(--tl-dot-size);\n background: var(--tl-dot-default);\n border: 2px solid var(--card-color);\n box-shadow: 0 0 0 2px var(--tl-dot-default);\n}\n.c-timeline.is-horizontal .c-timeline__dot.is-icon[data-v-509f7cd5] {\n width: var(--tl-icon-size);\n height: var(--tl-icon-size);\n background: var(--tl-icon-bg);\n border: 1.5px solid var(--tl-line-color);\n box-shadow: 0 0 0 3px var(--card-color), 0 2px 8px rgba(0, 0, 0, 0.08);\n font-size: calc(var(--tl-icon-size) * 0.5);\n}\n.c-timeline.is-horizontal .c-timeline__line[data-v-509f7cd5] {\n display: none;\n}\n.c-timeline.is-horizontal .c-timeline__body[data-v-509f7cd5] {\n width: 100%;\n padding: 8px 12px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n text-align: center;\n}\n.c-timeline.is-horizontal .c-timeline__header[data-v-509f7cd5] {\n justify-content: center;\n flex-wrap: wrap;\n}\n.c-timeline.is-horizontal .c-timeline__content[data-v-509f7cd5] {\n text-align: left;\n font-size: 12px;\n}\n.c-timeline__header[data-v-509f7cd5] {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n}\n.c-timeline__title[data-v-509f7cd5] {\n font-size: 14px;\n font-weight: 600;\n color: var(--tl-text-primary);\n line-height: 1.5;\n}\n.c-timeline__time[data-v-509f7cd5] {\n display: inline-flex;\n align-items: center;\n padding: 1px 7px;\n font-size: 11px;\n color: var(--tl-text-time);\n white-space: nowrap;\n background: color-mix(in srgb, var(--border-color) 40%, transparent);\n border-radius: 4px;\n line-height: 1.6;\n}\n.c-timeline__tags[data-v-509f7cd5] {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n}\n.c-timeline__tag[data-v-509f7cd5] {\n display: inline-flex;\n align-items: center;\n padding: 1px 8px;\n font-size: 11px;\n font-weight: 500;\n border-radius: var(--tl-tag-radius);\n background: color-mix(in srgb, var(--primary-color) 10%, var(--card-color));\n color: var(--primary-color);\n border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);\n}\n.c-timeline__content[data-v-509f7cd5] {\n padding: var(--tl-content-padding);\n background: var(--tl-content-bg);\n border-radius: var(--tl-content-radius);\n border: 1px solid var(--border-color);\n font-size: 13px;\n color: var(--tl-text-secondary);\n line-height: 1.7;\n}\n.c-timeline__detail[data-v-509f7cd5] {\n overflow: hidden;\n transition: max-height 0.3s ease, opacity 0.3s ease;\n}\n.c-timeline__detail.is-collapsed[data-v-509f7cd5] {\n max-height: 0;\n opacity: 0;\n}\n.c-timeline__detail.is-expanded[data-v-509f7cd5] {\n max-height: 800px;\n opacity: 1;\n}\n.c-timeline__collapse-trigger[data-v-509f7cd5] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: var(--primary-color);\n cursor: pointer;\n user-select: none;\n transition: opacity 0.2s;\n}\n.c-timeline__collapse-trigger[data-v-509f7cd5]:hover {\n opacity: 0.75;\n}\n.c-timeline__collapse-trigger .collapse-arrow[data-v-509f7cd5] {\n transition: transform 0.25s;\n}\n.c-timeline__collapse-trigger.is-expanded .collapse-arrow[data-v-509f7cd5] {\n transform: rotate(180deg);\n}\n.c-timeline__pending[data-v-509f7cd5] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 13px;\n color: var(--tl-text-time);\n padding: 8px 0 0 var(--tl-track-width);\n}\n.c-timeline__pending .pending-dot[data-v-509f7cd5] {\n width: 10px;\n height: 10px;\n flex-shrink: 0;\n border-radius: 50%;\n background: var(--tl-dot-info);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-dot-info) 20%, transparent);\n animation: tl-pulse-509f7cd5 1.4s infinite;\n}\n.c-timeline.is-horizontal .c-timeline__pending[data-v-509f7cd5] {\n padding-left: 0;\n}\n@keyframes tl-pulse-509f7cd5 {\n0%, 100% {\n opacity: 0.4;\n transform: scale(1);\n}\n50% {\n opacity: 1;\n transform: scale(1.15);\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|