@robot-admin/naive-ui-components 0.6.28 → 0.6.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/C_Chat-CJ8KESTM.css.map +1 -0
- package/dist/C_Chat-DzV4AFLd.css.map +1 -0
- package/dist/C_Chat.css +14 -8
- 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_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_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_Markdown-7J0uPEuk.css.map +1 -0
- package/dist/C_Markdown-C7Lg0_9z.css.map +1 -0
- package/dist/C_Markdown.css +16 -10
- 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_Signature.js.map +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_Steps.d.cts +1 -1
- package/dist/C_Steps.d.ts +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 +94 -69
- 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.d.cts +1 -1
- package/dist/C_TagsView.d.ts +1 -1
- package/dist/C_Theme.d.cts +1 -1
- package/dist/C_Theme.d.ts +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.d.cts +1 -1
- package/dist/C_Transfer.d.ts +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_VtableGantt.d.cts +1 -1
- package/dist/C_VtableGantt.d.ts +1 -1
- package/dist/constants.d.ts +1 -1
- package/dist/constants2.d.ts +2 -2
- package/dist/constants3.d.ts +3 -3
- package/dist/constants4.d.ts +5 -5
- package/dist/constants5.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/index13.vue.d.ts +3 -3
- package/dist/index14.vue.d.ts +85 -7
- package/dist/index15.vue.d.ts +6 -6
- package/dist/index17.vue.d.ts +1 -1
- package/dist/index18.vue.d.ts +4 -4
- 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/index6.vue.d.ts +2 -2
- package/dist/index8.vue.d.ts +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 +832 -220
- package/dist/useCalendarEvents.d.ts +1 -1
- package/dist/useCollapsePanel.d.ts +8 -8
- package/dist/useCropperCore.d.ts +4 -4
- package/dist/useDraggableLayout.d.ts +8 -8
- package/dist/useDynamicFormState.d.ts +10 -10
- package/dist/useEdgeInteraction.d.ts +1 -1
- package/dist/useFullscreen.d.ts +2 -2
- package/dist/useInfiniteScroll.d.ts +2 -2
- package/dist/useModalEdit.d.ts +52 -6
- package/dist/useQRCode.d.ts +5 -5
- package/dist/useSearchState.d.ts +2 -2
- package/dist/useSignatureHistory.d.ts +3 -3
- package/dist/useSplitResize.d.ts +8 -8
- 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_Chat-CcdWgVE8.css.map +0 -1
- package/dist/C_Chat-Cx0woEEe.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_Markdown-7iBnLDtL.css.map +0 -1
- package/dist/C_Markdown-BbTvdFCl.css.map +0 -1
- package/dist/C_Table-vZlcgH6x.css.map +0 -1
- package/dist/C_Table-wzAO43l0.css.map +0 -1
package/dist/C_CollapsePanel2.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,Transition as r,computed as i,createBlock as a,createCommentVNode as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,createVNode as u,defineComponent as d,normalizeClass as f,openBlock as p,ref as m,renderList as h,renderSlot as g,resolveDynamicComponent as _,toDisplayString as v,toRef as y,unref as b,vShow as x,watch as S,withCtx as C,withDirectives as w,withModifiers as T}from"vue";function E(e){let{items:t,activeKeys:n,defaultActiveKeys:r,accordion:a,persistKey:o,onChange:s,onExpand:c,onCollapse:l}=e,u=()=>{if(!o.value)return null;try{let e=localStorage.getItem(`collapse-panel:${o.value}`);return e?JSON.parse(e):null}catch{return null}},d=e=>{if(o.value)try{localStorage.setItem(`collapse-panel:${o.value}`,JSON.stringify(e))}catch{}},f=m(n.value===void 0?u()||[...r]:[...n.value]),p=m(new Set(f.value)),h=i({get:()=>n.value===void 0?f.value:n.value,set:e=>{f.value=e}}),g=e=>h.value.includes(e),_=e=>{let t=g(e.key);return e.destroyOnCollapse?t:e.lazy?p.value.has(e.key):!0},v=e=>{h.value=e,s?.(e),d(e)},y=e=>{let n=t.value.find(t=>t.key===e);if(!(!n||n.disabled))if(g(e))v(h.value.filter(t=>t!==e)),l?.(e);else{if(p.value.add(e),a.value){let t=h.value;v([e]),t.forEach(t=>{t!==e&&l?.(t)})}else v([...h.value,e]);c?.(e)}};return S(()=>n.value,e=>{e!==void 0&&(f.value=[...e],e.forEach(e=>p.value.add(e)),d(e))}),{currentKeys:h,renderedOnce:p,isExpanded:g,shouldRender:_,toggle:y,expandAll:()=>{if(a.value)return;let e=t.value.filter(e=>!e.disabled).map(e=>e.key);e.forEach(e=>p.value.add(e)),v(e)},collapseAll:()=>{v([])},getActiveKeys:()=>[...h.value],handleKeyDown:(e,t)=>{[`Enter`,` `].includes(e.key)&&(e.preventDefault(),y(t))}}}const D=[`aria-expanded`,`aria-controls`,`aria-disabled`,`tabindex`,`onClick`,`onKeydown`],O={class:`collapse-item__title-area`},k={class:`collapse-item__title-group`},A={class:`collapse-item__title`},j={key:1,class:`collapse-item__subtitle`},M=[`id`,`aria-labelledby`],N={key:0,class:`collapse-item__content`};var P=t(d({name:`C_CollapsePanel`,__name:`index`,props:{items:{},activeKeys:{default:void 0},defaultActiveKeys:{default:()=>[]},accordion:{type:Boolean,default:!1},variant:{default:`default`},expandIconPosition:{default:`left`},bordered:{type:Boolean,default:!0},persistKey:{default:void 0}},emits:[`update:activeKeys`,`expand`,`collapse`,`change`],setup(t,{expose:i,emit:d}){let S=t,P=d,F=m(null),I=m(new Map),L=(e,t)=>{t?I.value.set(e,t):I.value.delete(e)},{isExpanded:R,shouldRender:z,toggle:B,expandAll:V,collapseAll:H,getActiveKeys:U,handleKeyDown:W}=E({items:y(S,`items`),activeKeys:y(S,`activeKeys`),defaultActiveKeys:S.defaultActiveKeys,accordion:y(S,`accordion`),persistKey:y(S,`persistKey`),onChange:e=>{P(`update:activeKeys`,e),P(`change`,e)},onExpand:e=>P(`expand`,e),onCollapse:e=>P(`collapse`,e)}),G=e=>{let t=e;t.style.height=`0`,t.style.overflow=`hidden`,t.offsetHeight,t.style.height=`${t.scrollHeight}px`},K=e=>{let t=e;t.style.height=``,t.style.overflow=``},q=e=>{let t=e;t.style.height=`${t.scrollHeight}px`,t.style.overflow=`hidden`,t.offsetHeight,t.style.height=`0`},J=e=>{let t=e;t.style.height=``,t.style.overflow=``};return i({expandAll:V,collapseAll:H,toggle:B,getActiveKeys:U,scrollToPanel:e=>{let t=I.value.get(e);t&&t.scrollIntoView({behavior:`smooth`,block:`start`})}}),(t,i)=>(p(),s(`div`,{ref_key:`containerRef`,ref:F,class:f([`c-collapse-panel`,[`c-collapse-panel--${t.variant}`,{"c-collapse-panel--bordered":t.bordered,"c-collapse-panel--icon-right":t.expandIconPosition===`right`}]])},[(p(!0),s(n,null,h(t.items,d=>(p(),s(`div`,{key:d.key,ref_for:!0,ref:e=>L(d.key,e),class:f([`collapse-item`,{"collapse-item--active":b(R)(d.key),"collapse-item--disabled":d.disabled}])},[o(` 面板头部 `),c(`div`,{class:`collapse-item__header`,role:`button`,"aria-expanded":b(R)(d.key),"aria-controls":`collapse-content-${d.key}`,"aria-disabled":d.disabled,tabindex:d.disabled?-1:0,onClick:e=>!d.disabled&&b(B)(d.key),onKeydown:e=>b(W)(e,d.key)},[o(` 展开图标 `),c(`span`,{class:f([`collapse-item__arrow`,{"collapse-item__arrow--expanded":b(R)(d.key)}])},[u(e,{name:`mdi:chevron-right`,size:16,color:`currentColor`})],2),o(` 标题区域 `),c(`div`,O,[g(t.$slots,`header-${d.key}`,{item:d,expanded:b(R)(d.key)},()=>[c(`div`,k,[d.icon?(p(),a(e,{key:0,name:d.icon,size:18,color:`currentColor`,class:`collapse-item__icon`},null,8,[`name`])):o(`v-if`,!0),c(`span`,A,v(d.title),1),d.subtitle?(p(),s(`span`,j,v(d.subtitle),1)):o(`v-if`,!0)])],!0)]),o(` 头部右侧操作区 `),t.$slots[`extra-${d.key}`]?(p(),s(`div`,{key:0,class:`collapse-item__extra`,onClick:i[0]||=T(()=>{},[`stop`])},[g(t.$slots,`extra-${d.key}`,{item:d,expanded:b(R)(d.key)},void 0,!0)])):o(`v-if`,!0)],40,D),o(` 面板内容 `),u(r,{name:`collapse-slide`,onEnter:G,onAfterEnter:K,onLeave:q,onAfterLeave:J,persisted:``},{default:C(()=>[w(c(`div`,{id:`collapse-content-${d.key}`,class:`collapse-item__content-wrapper`,role:`region`,"aria-labelledby":`collapse-header-${d.key}`},[b(z)(d)?(p(),s(`div`,N,[g(t.$slots,`panel-${d.key}`,{item:d,expanded:b(R)(d.key)},()=>[d.content&&typeof d.content!=`string`?(p(),a(_(d.content),{key:0})):d.content?(p(),s(n,{key:1},[l(v(d.content),1)],64)):o(`v-if`,!0)],!0)])):o(`v-if`,!0)],8,M),[[x,b(R)(d.key)]])]),_:2},1024)],2))),128))],2))}}),[[`__scopeId`,`data-v-
|
|
1
|
+
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,Transition as r,computed as i,createBlock as a,createCommentVNode as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,createVNode as u,defineComponent as d,normalizeClass as f,openBlock as p,ref as m,renderList as h,renderSlot as g,resolveDynamicComponent as _,toDisplayString as v,toRef as y,unref as b,vShow as x,watch as S,withCtx as C,withDirectives as w,withModifiers as T}from"vue";function E(e){let{items:t,activeKeys:n,defaultActiveKeys:r,accordion:a,persistKey:o,onChange:s,onExpand:c,onCollapse:l}=e,u=()=>{if(!o.value)return null;try{let e=localStorage.getItem(`collapse-panel:${o.value}`);return e?JSON.parse(e):null}catch{return null}},d=e=>{if(o.value)try{localStorage.setItem(`collapse-panel:${o.value}`,JSON.stringify(e))}catch{}},f=m(n.value===void 0?u()||[...r]:[...n.value]),p=m(new Set(f.value)),h=i({get:()=>n.value===void 0?f.value:n.value,set:e=>{f.value=e}}),g=e=>h.value.includes(e),_=e=>{let t=g(e.key);return e.destroyOnCollapse?t:e.lazy?p.value.has(e.key):!0},v=e=>{h.value=e,s?.(e),d(e)},y=e=>{let n=t.value.find(t=>t.key===e);if(!(!n||n.disabled))if(g(e))v(h.value.filter(t=>t!==e)),l?.(e);else{if(p.value.add(e),a.value){let t=h.value;v([e]),t.forEach(t=>{t!==e&&l?.(t)})}else v([...h.value,e]);c?.(e)}};return S(()=>n.value,e=>{e!==void 0&&(f.value=[...e],e.forEach(e=>p.value.add(e)),d(e))}),{currentKeys:h,renderedOnce:p,isExpanded:g,shouldRender:_,toggle:y,expandAll:()=>{if(a.value)return;let e=t.value.filter(e=>!e.disabled).map(e=>e.key);e.forEach(e=>p.value.add(e)),v(e)},collapseAll:()=>{v([])},getActiveKeys:()=>[...h.value],handleKeyDown:(e,t)=>{[`Enter`,` `].includes(e.key)&&(e.preventDefault(),y(t))}}}const D=[`aria-expanded`,`aria-controls`,`aria-disabled`,`tabindex`,`onClick`,`onKeydown`],O={class:`collapse-item__title-area`},k={class:`collapse-item__title-group`},A={class:`collapse-item__title`},j={key:1,class:`collapse-item__subtitle`},M=[`id`,`aria-labelledby`],N={key:0,class:`collapse-item__content`};var P=t(d({name:`C_CollapsePanel`,__name:`index`,props:{items:{},activeKeys:{default:void 0},defaultActiveKeys:{default:()=>[]},accordion:{type:Boolean,default:!1},variant:{default:`default`},expandIconPosition:{default:`left`},bordered:{type:Boolean,default:!0},persistKey:{default:void 0}},emits:[`update:activeKeys`,`expand`,`collapse`,`change`],setup(t,{expose:i,emit:d}){let S=t,P=d,F=m(null),I=m(new Map),L=(e,t)=>{t?I.value.set(e,t):I.value.delete(e)},{isExpanded:R,shouldRender:z,toggle:B,expandAll:V,collapseAll:H,getActiveKeys:U,handleKeyDown:W}=E({items:y(S,`items`),activeKeys:y(S,`activeKeys`),defaultActiveKeys:S.defaultActiveKeys,accordion:y(S,`accordion`),persistKey:y(S,`persistKey`),onChange:e=>{P(`update:activeKeys`,e),P(`change`,e)},onExpand:e=>P(`expand`,e),onCollapse:e=>P(`collapse`,e)}),G=e=>{let t=e;t.style.height=`0`,t.style.overflow=`hidden`,t.offsetHeight,t.style.height=`${t.scrollHeight}px`},K=e=>{let t=e;t.style.height=``,t.style.overflow=``},q=e=>{let t=e;t.style.height=`${t.scrollHeight}px`,t.style.overflow=`hidden`,t.offsetHeight,t.style.height=`0`},J=e=>{let t=e;t.style.height=``,t.style.overflow=``};return i({expandAll:V,collapseAll:H,toggle:B,getActiveKeys:U,scrollToPanel:e=>{let t=I.value.get(e);t&&t.scrollIntoView({behavior:`smooth`,block:`start`})}}),(t,i)=>(p(),s(`div`,{ref_key:`containerRef`,ref:F,class:f([`c-collapse-panel`,[`c-collapse-panel--${t.variant}`,{"c-collapse-panel--bordered":t.bordered,"c-collapse-panel--icon-right":t.expandIconPosition===`right`}]])},[(p(!0),s(n,null,h(t.items,d=>(p(),s(`div`,{key:d.key,ref_for:!0,ref:e=>L(d.key,e),class:f([`collapse-item`,{"collapse-item--active":b(R)(d.key),"collapse-item--disabled":d.disabled}])},[o(` 面板头部 `),c(`div`,{class:`collapse-item__header`,role:`button`,"aria-expanded":b(R)(d.key),"aria-controls":`collapse-content-${d.key}`,"aria-disabled":d.disabled,tabindex:d.disabled?-1:0,onClick:e=>!d.disabled&&b(B)(d.key),onKeydown:e=>b(W)(e,d.key)},[o(` 展开图标 `),c(`span`,{class:f([`collapse-item__arrow`,{"collapse-item__arrow--expanded":b(R)(d.key)}])},[u(e,{name:`mdi:chevron-right`,size:16,color:`currentColor`})],2),o(` 标题区域 `),c(`div`,O,[g(t.$slots,`header-${d.key}`,{item:d,expanded:b(R)(d.key)},()=>[c(`div`,k,[d.icon?(p(),a(e,{key:0,name:d.icon,size:18,color:`currentColor`,class:`collapse-item__icon`},null,8,[`name`])):o(`v-if`,!0),c(`span`,A,v(d.title),1),d.subtitle?(p(),s(`span`,j,v(d.subtitle),1)):o(`v-if`,!0)])],!0)]),o(` 头部右侧操作区 `),t.$slots[`extra-${d.key}`]?(p(),s(`div`,{key:0,class:`collapse-item__extra`,onClick:i[0]||=T(()=>{},[`stop`])},[g(t.$slots,`extra-${d.key}`,{item:d,expanded:b(R)(d.key)},void 0,!0)])):o(`v-if`,!0)],40,D),o(` 面板内容 `),u(r,{name:`collapse-slide`,onEnter:G,onAfterEnter:K,onLeave:q,onAfterLeave:J,persisted:``},{default:C(()=>[w(c(`div`,{id:`collapse-content-${d.key}`,class:`collapse-item__content-wrapper`,role:`region`,"aria-labelledby":`collapse-header-${d.key}`},[b(z)(d)?(p(),s(`div`,N,[g(t.$slots,`panel-${d.key}`,{item:d,expanded:b(R)(d.key)},()=>[d.content&&typeof d.content!=`string`?(p(),a(_(d.content),{key:0})):d.content?(p(),s(n,{key:1},[l(v(d.content),1)],64)):o(`v-if`,!0)],!0)])):o(`v-if`,!0)],8,M),[[x,b(R)(d.key)]])]),_:2},1024)],2))),128))],2))}}),[[`__scopeId`,`data-v-08dc96f9`]]);export{E as n,P as t};
|
|
2
2
|
//# sourceMappingURL=C_CollapsePanel2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_CollapsePanel2.js","names":["variant","bordered","expandIconPosition","items","$slots"],"sources":["../src/components/C_CollapsePanel/composables/useCollapsePanel.ts","../src/components/C_CollapsePanel/index.vue","../src/components/C_CollapsePanel/index.vue","../src/components/C_CollapsePanel/index.vue"],"sourcesContent":["import { ref, computed, watch } from 'vue'\r\nimport type { Ref } from 'vue'\r\nimport type { CollapsePanelItem } from '../types'\r\n\r\ninterface UseCollapsePanelOptions {\r\n /** 面板项配置 */\r\n items: Ref<CollapsePanelItem[]>\r\n /** 外部 v-model activeKeys */\r\n activeKeys: Ref<string[] | undefined>\r\n /** 非受控时的默认激活 key */\r\n defaultActiveKeys: string[]\r\n /** 是否手风琴模式 */\r\n accordion: Ref<boolean>\r\n /** localStorage 持久化 key */\r\n persistKey: Ref<string | undefined>\r\n /** activeKeys 变化回调 */\r\n onChange?: (keys: string[]) => void\r\n /** 单面板展开回调 */\r\n onExpand?: (key: string) => void\r\n /** 单面板折叠回调 */\r\n onCollapse?: (key: string) => void\r\n}\r\n\r\n/**\r\n * 折叠面板展开/折叠核心逻辑\r\n */\r\nexport function useCollapsePanel(options: UseCollapsePanelOptions) {\r\n const {\r\n items,\r\n activeKeys: externalKeys,\r\n defaultActiveKeys,\r\n accordion,\r\n persistKey,\r\n onChange,\r\n onExpand,\r\n onCollapse,\r\n } = options\r\n\r\n /* ─── 持久化读取 ──────────────────────────────── */\r\n const loadPersistedKeys = (): string[] | null => {\r\n if (!persistKey.value) return null\r\n try {\r\n const raw = localStorage.getItem(`collapse-panel:${persistKey.value}`)\r\n return raw ? JSON.parse(raw) : null\r\n } catch {\r\n return null\r\n }\r\n }\r\n\r\n const savePersistedKeys = (keys: string[]) => {\r\n if (!persistKey.value) return\r\n try {\r\n localStorage.setItem(\r\n `collapse-panel:${persistKey.value}`,\r\n JSON.stringify(keys),\r\n )\r\n } catch {\r\n /* 静默失败 */\r\n }\r\n }\r\n\r\n /* ─── 内部状态 ────────────────────────────────── */\r\n const resolveInitialKeys = (): string[] => {\r\n /* 优先级:外部 v-model > 持久化 > 默认值 */\r\n if (externalKeys.value !== undefined) return [...externalKeys.value]\r\n const persisted = loadPersistedKeys()\r\n if (persisted) return persisted\r\n return [...defaultActiveKeys]\r\n }\r\n\r\n const internalKeys = ref<string[]>(resolveInitialKeys())\r\n\r\n /** 懒渲染追踪:记录哪些面板曾被展开过 */\r\n const renderedOnce = ref<Set<string>>(new Set(internalKeys.value))\r\n\r\n /* ─── 计算属性 ────────────────────────────────── */\r\n /** 当前激活的 key 数组(兼容受控 / 非受控) */\r\n const currentKeys = computed<string[]>({\r\n get: () =>\r\n externalKeys.value !== undefined\r\n ? externalKeys.value\r\n : internalKeys.value,\r\n set: (val) => {\r\n internalKeys.value = val\r\n },\r\n })\r\n\r\n /**\r\n * 判断面板是否展开\r\n */\r\n const isExpanded = (key: string): boolean => {\r\n return currentKeys.value.includes(key)\r\n }\r\n\r\n /**\r\n * 判断面板是否应该渲染内容\r\n * - lazy 面板只有被展开过至少一次后才渲染\r\n * - destroyOnCollapse 面板在折叠后销毁 DOM\r\n */\r\n const shouldRender = (item: CollapsePanelItem): boolean => {\r\n const expanded = isExpanded(item.key)\r\n\r\n if (item.destroyOnCollapse) return expanded\r\n if (item.lazy) return renderedOnce.value.has(item.key)\r\n return true\r\n }\r\n\r\n /* ─── 操作方法 ────────────────────────────────── */\r\n const updateKeys = (newKeys: string[]) => {\r\n currentKeys.value = newKeys\r\n onChange?.(newKeys)\r\n savePersistedKeys(newKeys)\r\n }\r\n\r\n const toggle = (key: string) => {\r\n const item = items.value.find((i) => i.key === key)\r\n if (!item || item.disabled) return\r\n\r\n const expanded = isExpanded(key)\r\n\r\n if (expanded) {\r\n /* 折叠 */\r\n updateKeys(currentKeys.value.filter((k) => k !== key))\r\n onCollapse?.(key)\r\n } else {\r\n /* 展开 */\r\n renderedOnce.value.add(key)\r\n\r\n if (accordion.value) {\r\n /* 手风琴模式:关闭其他面板 */\r\n const prevKeys = currentKeys.value\r\n updateKeys([key])\r\n /* 通知被折叠的面板 */\r\n prevKeys.forEach((k) => {\r\n if (k !== key) onCollapse?.(k)\r\n })\r\n } else {\r\n updateKeys([...currentKeys.value, key])\r\n }\r\n onExpand?.(key)\r\n }\r\n }\r\n\r\n const expandAll = () => {\r\n if (accordion.value) return /* 手风琴模式不支持全展开 */\r\n\r\n const allKeys = items.value.filter((i) => !i.disabled).map((i) => i.key)\r\n\r\n allKeys.forEach((k) => renderedOnce.value.add(k))\r\n updateKeys(allKeys)\r\n }\r\n\r\n const collapseAll = () => {\r\n updateKeys([])\r\n }\r\n\r\n const getActiveKeys = (): string[] => {\r\n return [...currentKeys.value]\r\n }\r\n\r\n /* ─── 键盘导航 ────────────────────────────────── */\r\n const handleKeyDown = (e: KeyboardEvent, key: string) => {\r\n if (['Enter', ' '].includes(e.key)) {\r\n e.preventDefault()\r\n toggle(key)\r\n }\r\n }\r\n\r\n /* ─── 同步外部 v-model 变化 ───────────────────── */\r\n watch(\r\n () => externalKeys.value,\r\n (newVal) => {\r\n if (newVal !== undefined) {\r\n internalKeys.value = [...newVal]\r\n newVal.forEach((k) => renderedOnce.value.add(k))\r\n savePersistedKeys(newVal)\r\n }\r\n },\r\n )\r\n\r\n return {\r\n currentKeys,\r\n renderedOnce,\r\n isExpanded,\r\n shouldRender,\r\n toggle,\r\n expandAll,\r\n collapseAll,\r\n getActiveKeys,\r\n handleKeyDown,\r\n }\r\n}\r\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-02-25\n * @Description: 折叠面板组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n ref=\"containerRef\"\n class=\"c-collapse-panel\"\n :class=\"[\n `c-collapse-panel--${variant}`,\n {\n 'c-collapse-panel--bordered': bordered,\n 'c-collapse-panel--icon-right': expandIconPosition === 'right',\n },\n ]\"\n >\n <div\n v-for=\"item in items\"\n :key=\"item.key\"\n :ref=\"el => setPanelRef(item.key, el as HTMLElement)\"\n class=\"collapse-item\"\n :class=\"{\n 'collapse-item--active': isExpanded(item.key),\n 'collapse-item--disabled': item.disabled,\n }\"\n >\n <!-- 面板头部 -->\n <div\n class=\"collapse-item__header\"\n role=\"button\"\n :aria-expanded=\"isExpanded(item.key)\"\n :aria-controls=\"`collapse-content-${item.key}`\"\n :aria-disabled=\"item.disabled\"\n :tabindex=\"item.disabled ? -1 : 0\"\n @click=\"!item.disabled && toggle(item.key)\"\n @keydown=\"handleKeyDown($event, item.key)\"\n >\n <!-- 展开图标 -->\n <span\n class=\"collapse-item__arrow\"\n :class=\"{ 'collapse-item__arrow--expanded': isExpanded(item.key) }\"\n >\n <C_Icon\n name=\"mdi:chevron-right\"\n :size=\"16\"\n color=\"currentColor\"\n />\n </span>\n\n <!-- 标题区域 -->\n <div class=\"collapse-item__title-area\">\n <slot\n :name=\"`header-${item.key}`\"\n :item=\"item\"\n :expanded=\"isExpanded(item.key)\"\n >\n <div class=\"collapse-item__title-group\">\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n :size=\"18\"\n color=\"currentColor\"\n class=\"collapse-item__icon\"\n />\n <span class=\"collapse-item__title\">{{ item.title }}</span>\n <span\n v-if=\"item.subtitle\"\n class=\"collapse-item__subtitle\"\n >\n {{ item.subtitle }}\n </span>\n </div>\n </slot>\n </div>\n\n <!-- 头部右侧操作区 -->\n <div\n v-if=\"$slots[`extra-${item.key}`]\"\n class=\"collapse-item__extra\"\n @click.stop\n >\n <slot\n :name=\"`extra-${item.key}`\"\n :item=\"item\"\n :expanded=\"isExpanded(item.key)\"\n />\n </div>\n </div>\n\n <!-- 面板内容 -->\n <Transition\n name=\"collapse-slide\"\n @enter=\"onEnter\"\n @after-enter=\"onAfterEnter\"\n @leave=\"onLeave\"\n @after-leave=\"onAfterLeave\"\n >\n <div\n v-show=\"isExpanded(item.key)\"\n :id=\"`collapse-content-${item.key}`\"\n class=\"collapse-item__content-wrapper\"\n role=\"region\"\n :aria-labelledby=\"`collapse-header-${item.key}`\"\n >\n <div\n v-if=\"shouldRender(item)\"\n class=\"collapse-item__content\"\n >\n <slot\n :name=\"`panel-${item.key}`\"\n :item=\"item\"\n :expanded=\"isExpanded(item.key)\"\n >\n <component\n :is=\"item.content\"\n v-if=\"item.content && typeof item.content !== 'string'\"\n />\n <template v-else-if=\"item.content\">{{ item.content }}</template>\n </slot>\n </div>\n </div>\n </Transition>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref, toRef } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import { useCollapsePanel } from './composables/useCollapsePanel'\n import type {\n CollapsePanelExpose,\n CollapsePanelItem,\n CollapsePanelVariant,\n ExpandIconPosition,\n } from './types'\n\n defineOptions({ name: 'C_CollapsePanel' })\n\n interface Props {\n /** 面板项配置数组 */\n items: CollapsePanelItem[]\n /** 当前激活面板的 key 数组(v-model) */\n activeKeys?: string[]\n /** 默认展开的面板 key 数组 */\n defaultActiveKeys?: string[]\n /** 是否手风琴模式 */\n accordion?: boolean\n /** 面板样式变体 */\n variant?: CollapsePanelVariant\n /** 展开图标位置 */\n expandIconPosition?: ExpandIconPosition\n /** 是否显示边框 */\n bordered?: boolean\n /** 展开状态 localStorage 持久化 key */\n persistKey?: string\n }\n\n const props = withDefaults(defineProps<Props>(), {\n activeKeys: undefined,\n defaultActiveKeys: () => [],\n accordion: false,\n variant: 'default',\n expandIconPosition: 'left',\n bordered: true,\n persistKey: undefined,\n })\n\n const emit = defineEmits<{\n 'update:activeKeys': [keys: string[]]\n expand: [key: string]\n collapse: [key: string]\n change: [activeKeys: string[]]\n }>()\n\n const containerRef = ref<HTMLElement | null>(null)\n const panelRefs = ref<Map<string, HTMLElement>>(new Map())\n\n const setPanelRef = (key: string, el: HTMLElement | null) => {\n if (el) {\n panelRefs.value.set(key, el)\n } else {\n panelRefs.value.delete(key)\n }\n }\n\n const {\n isExpanded,\n shouldRender,\n toggle,\n expandAll,\n collapseAll,\n getActiveKeys,\n handleKeyDown,\n } = useCollapsePanel({\n items: toRef(props, 'items'),\n activeKeys: toRef(props, 'activeKeys'),\n defaultActiveKeys: props.defaultActiveKeys,\n accordion: toRef(props, 'accordion'),\n persistKey: toRef(props, 'persistKey'),\n onChange: keys => {\n emit('update:activeKeys', keys)\n emit('change', keys)\n },\n onExpand: key => emit('expand', key),\n onCollapse: key => emit('collapse', key),\n })\n\n /* ─── 展开/折叠动画 ──────────────────────────── */\n const onEnter = (el: Element) => {\n const element = el as HTMLElement\n element.style.height = '0'\n element.style.overflow = 'hidden'\n /* 强制 reflow */\n void element.offsetHeight\n element.style.height = `${element.scrollHeight}px`\n }\n\n const onAfterEnter = (el: Element) => {\n const element = el as HTMLElement\n element.style.height = ''\n element.style.overflow = ''\n }\n\n const onLeave = (el: Element) => {\n const element = el as HTMLElement\n element.style.height = `${element.scrollHeight}px`\n element.style.overflow = 'hidden'\n void element.offsetHeight\n element.style.height = '0'\n }\n\n const onAfterLeave = (el: Element) => {\n const element = el as HTMLElement\n element.style.height = ''\n element.style.overflow = ''\n }\n\n /* ─── 滚动到指定面板 ─────────────────────────── */\n const scrollToPanel = (key: string) => {\n const el = panelRefs.value.get(key)\n if (el) {\n el.scrollIntoView({ behavior: 'smooth', block: 'start' })\n }\n }\n\n /* ─── 暴露方法 ──────────────────────────────── */\n defineExpose<CollapsePanelExpose>({\n expandAll,\n collapseAll,\n toggle,\n getActiveKeys,\n scrollToPanel,\n })\n</script>\n\n<style lang=\"scss\" scoped>\n @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-02-25\n * @Description: 折叠面板组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n ref=\"containerRef\"\n class=\"c-collapse-panel\"\n :class=\"[\n `c-collapse-panel--${variant}`,\n {\n 'c-collapse-panel--bordered': bordered,\n 'c-collapse-panel--icon-right': expandIconPosition === 'right',\n },\n ]\"\n >\n <div\n v-for=\"item in items\"\n :key=\"item.key\"\n :ref=\"el => setPanelRef(item.key, el as HTMLElement)\"\n class=\"collapse-item\"\n :class=\"{\n 'collapse-item--active': isExpanded(item.key),\n 'collapse-item--disabled': item.disabled,\n }\"\n >\n <!-- 面板头部 -->\n <div\n class=\"collapse-item__header\"\n role=\"button\"\n :aria-expanded=\"isExpanded(item.key)\"\n :aria-controls=\"`collapse-content-${item.key}`\"\n :aria-disabled=\"item.disabled\"\n :tabindex=\"item.disabled ? -1 : 0\"\n @click=\"!item.disabled && toggle(item.key)\"\n @keydown=\"handleKeyDown($event, item.key)\"\n >\n <!-- 展开图标 -->\n <span\n class=\"collapse-item__arrow\"\n :class=\"{ 'collapse-item__arrow--expanded': isExpanded(item.key) }\"\n >\n <C_Icon\n name=\"mdi:chevron-right\"\n :size=\"16\"\n color=\"currentColor\"\n />\n </span>\n\n <!-- 标题区域 -->\n <div class=\"collapse-item__title-area\">\n <slot\n :name=\"`header-${item.key}`\"\n :item=\"item\"\n :expanded=\"isExpanded(item.key)\"\n >\n <div class=\"collapse-item__title-group\">\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n :size=\"18\"\n color=\"currentColor\"\n class=\"collapse-item__icon\"\n />\n <span class=\"collapse-item__title\">{{ item.title }}</span>\n <span\n v-if=\"item.subtitle\"\n class=\"collapse-item__subtitle\"\n >\n {{ item.subtitle }}\n </span>\n </div>\n </slot>\n </div>\n\n <!-- 头部右侧操作区 -->\n <div\n v-if=\"$slots[`extra-${item.key}`]\"\n class=\"collapse-item__extra\"\n @click.stop\n >\n <slot\n :name=\"`extra-${item.key}`\"\n :item=\"item\"\n :expanded=\"isExpanded(item.key)\"\n />\n </div>\n </div>\n\n <!-- 面板内容 -->\n <Transition\n name=\"collapse-slide\"\n @enter=\"onEnter\"\n @after-enter=\"onAfterEnter\"\n @leave=\"onLeave\"\n @after-leave=\"onAfterLeave\"\n >\n <div\n v-show=\"isExpanded(item.key)\"\n :id=\"`collapse-content-${item.key}`\"\n class=\"collapse-item__content-wrapper\"\n role=\"region\"\n :aria-labelledby=\"`collapse-header-${item.key}`\"\n >\n <div\n v-if=\"shouldRender(item)\"\n class=\"collapse-item__content\"\n >\n <slot\n :name=\"`panel-${item.key}`\"\n :item=\"item\"\n :expanded=\"isExpanded(item.key)\"\n >\n <component\n :is=\"item.content\"\n v-if=\"item.content && typeof item.content !== 'string'\"\n />\n <template v-else-if=\"item.content\">{{ item.content }}</template>\n </slot>\n </div>\n </div>\n </Transition>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref, toRef } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import { useCollapsePanel } from './composables/useCollapsePanel'\n import type {\n CollapsePanelExpose,\n CollapsePanelItem,\n CollapsePanelVariant,\n ExpandIconPosition,\n } from './types'\n\n defineOptions({ name: 'C_CollapsePanel' })\n\n interface Props {\n /** 面板项配置数组 */\n items: CollapsePanelItem[]\n /** 当前激活面板的 key 数组(v-model) */\n activeKeys?: string[]\n /** 默认展开的面板 key 数组 */\n defaultActiveKeys?: string[]\n /** 是否手风琴模式 */\n accordion?: boolean\n /** 面板样式变体 */\n variant?: CollapsePanelVariant\n /** 展开图标位置 */\n expandIconPosition?: ExpandIconPosition\n /** 是否显示边框 */\n bordered?: boolean\n /** 展开状态 localStorage 持久化 key */\n persistKey?: string\n }\n\n const props = withDefaults(defineProps<Props>(), {\n activeKeys: undefined,\n defaultActiveKeys: () => [],\n accordion: false,\n variant: 'default',\n expandIconPosition: 'left',\n bordered: true,\n persistKey: undefined,\n })\n\n const emit = defineEmits<{\n 'update:activeKeys': [keys: string[]]\n expand: [key: string]\n collapse: [key: string]\n change: [activeKeys: string[]]\n }>()\n\n const containerRef = ref<HTMLElement | null>(null)\n const panelRefs = ref<Map<string, HTMLElement>>(new Map())\n\n const setPanelRef = (key: string, el: HTMLElement | null) => {\n if (el) {\n panelRefs.value.set(key, el)\n } else {\n panelRefs.value.delete(key)\n }\n }\n\n const {\n isExpanded,\n shouldRender,\n toggle,\n expandAll,\n collapseAll,\n getActiveKeys,\n handleKeyDown,\n } = useCollapsePanel({\n items: toRef(props, 'items'),\n activeKeys: toRef(props, 'activeKeys'),\n defaultActiveKeys: props.defaultActiveKeys,\n accordion: toRef(props, 'accordion'),\n persistKey: toRef(props, 'persistKey'),\n onChange: keys => {\n emit('update:activeKeys', keys)\n emit('change', keys)\n },\n onExpand: key => emit('expand', key),\n onCollapse: key => emit('collapse', key),\n })\n\n /* ─── 展开/折叠动画 ──────────────────────────── */\n const onEnter = (el: Element) => {\n const element = el as HTMLElement\n element.style.height = '0'\n element.style.overflow = 'hidden'\n /* 强制 reflow */\n void element.offsetHeight\n element.style.height = `${element.scrollHeight}px`\n }\n\n const onAfterEnter = (el: Element) => {\n const element = el as HTMLElement\n element.style.height = ''\n element.style.overflow = ''\n }\n\n const onLeave = (el: Element) => {\n const element = el as HTMLElement\n element.style.height = `${element.scrollHeight}px`\n element.style.overflow = 'hidden'\n void element.offsetHeight\n element.style.height = '0'\n }\n\n const onAfterLeave = (el: Element) => {\n const element = el as HTMLElement\n element.style.height = ''\n element.style.overflow = ''\n }\n\n /* ─── 滚动到指定面板 ─────────────────────────── */\n const scrollToPanel = (key: string) => {\n const el = panelRefs.value.get(key)\n if (el) {\n el.scrollIntoView({ behavior: 'smooth', block: 'start' })\n }\n }\n\n /* ─── 暴露方法 ──────────────────────────────── */\n defineExpose<CollapsePanelExpose>({\n expandAll,\n collapseAll,\n toggle,\n getActiveKeys,\n scrollToPanel,\n })\n</script>\n\n<style lang=\"scss\" scoped>\n @use './index.scss';\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-02-25\n * @Description: 折叠面板组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n ref=\"containerRef\"\n class=\"c-collapse-panel\"\n :class=\"[\n `c-collapse-panel--${variant}`,\n {\n 'c-collapse-panel--bordered': bordered,\n 'c-collapse-panel--icon-right': expandIconPosition === 'right',\n },\n ]\"\n >\n <div\n v-for=\"item in items\"\n :key=\"item.key\"\n :ref=\"el => setPanelRef(item.key, el as HTMLElement)\"\n class=\"collapse-item\"\n :class=\"{\n 'collapse-item--active': isExpanded(item.key),\n 'collapse-item--disabled': item.disabled,\n }\"\n >\n <!-- 面板头部 -->\n <div\n class=\"collapse-item__header\"\n role=\"button\"\n :aria-expanded=\"isExpanded(item.key)\"\n :aria-controls=\"`collapse-content-${item.key}`\"\n :aria-disabled=\"item.disabled\"\n :tabindex=\"item.disabled ? -1 : 0\"\n @click=\"!item.disabled && toggle(item.key)\"\n @keydown=\"handleKeyDown($event, item.key)\"\n >\n <!-- 展开图标 -->\n <span\n class=\"collapse-item__arrow\"\n :class=\"{ 'collapse-item__arrow--expanded': isExpanded(item.key) }\"\n >\n <C_Icon\n name=\"mdi:chevron-right\"\n :size=\"16\"\n color=\"currentColor\"\n />\n </span>\n\n <!-- 标题区域 -->\n <div class=\"collapse-item__title-area\">\n <slot\n :name=\"`header-${item.key}`\"\n :item=\"item\"\n :expanded=\"isExpanded(item.key)\"\n >\n <div class=\"collapse-item__title-group\">\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n :size=\"18\"\n color=\"currentColor\"\n class=\"collapse-item__icon\"\n />\n <span class=\"collapse-item__title\">{{ item.title }}</span>\n <span\n v-if=\"item.subtitle\"\n class=\"collapse-item__subtitle\"\n >\n {{ item.subtitle }}\n </span>\n </div>\n </slot>\n </div>\n\n <!-- 头部右侧操作区 -->\n <div\n v-if=\"$slots[`extra-${item.key}`]\"\n class=\"collapse-item__extra\"\n @click.stop\n >\n <slot\n :name=\"`extra-${item.key}`\"\n :item=\"item\"\n :expanded=\"isExpanded(item.key)\"\n />\n </div>\n </div>\n\n <!-- 面板内容 -->\n <Transition\n name=\"collapse-slide\"\n @enter=\"onEnter\"\n @after-enter=\"onAfterEnter\"\n @leave=\"onLeave\"\n @after-leave=\"onAfterLeave\"\n >\n <div\n v-show=\"isExpanded(item.key)\"\n :id=\"`collapse-content-${item.key}`\"\n class=\"collapse-item__content-wrapper\"\n role=\"region\"\n :aria-labelledby=\"`collapse-header-${item.key}`\"\n >\n <div\n v-if=\"shouldRender(item)\"\n class=\"collapse-item__content\"\n >\n <slot\n :name=\"`panel-${item.key}`\"\n :item=\"item\"\n :expanded=\"isExpanded(item.key)\"\n >\n <component\n :is=\"item.content\"\n v-if=\"item.content && typeof item.content !== 'string'\"\n />\n <template v-else-if=\"item.content\">{{ item.content }}</template>\n </slot>\n </div>\n </div>\n </Transition>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref, toRef } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import { useCollapsePanel } from './composables/useCollapsePanel'\n import type {\n CollapsePanelExpose,\n CollapsePanelItem,\n CollapsePanelVariant,\n ExpandIconPosition,\n } from './types'\n\n defineOptions({ name: 'C_CollapsePanel' })\n\n interface Props {\n /** 面板项配置数组 */\n items: CollapsePanelItem[]\n /** 当前激活面板的 key 数组(v-model) */\n activeKeys?: string[]\n /** 默认展开的面板 key 数组 */\n defaultActiveKeys?: string[]\n /** 是否手风琴模式 */\n accordion?: boolean\n /** 面板样式变体 */\n variant?: CollapsePanelVariant\n /** 展开图标位置 */\n expandIconPosition?: ExpandIconPosition\n /** 是否显示边框 */\n bordered?: boolean\n /** 展开状态 localStorage 持久化 key */\n persistKey?: string\n }\n\n const props = withDefaults(defineProps<Props>(), {\n activeKeys: undefined,\n defaultActiveKeys: () => [],\n accordion: false,\n variant: 'default',\n expandIconPosition: 'left',\n bordered: true,\n persistKey: undefined,\n })\n\n const emit = defineEmits<{\n 'update:activeKeys': [keys: string[]]\n expand: [key: string]\n collapse: [key: string]\n change: [activeKeys: string[]]\n }>()\n\n const containerRef = ref<HTMLElement | null>(null)\n const panelRefs = ref<Map<string, HTMLElement>>(new Map())\n\n const setPanelRef = (key: string, el: HTMLElement | null) => {\n if (el) {\n panelRefs.value.set(key, el)\n } else {\n panelRefs.value.delete(key)\n }\n }\n\n const {\n isExpanded,\n shouldRender,\n toggle,\n expandAll,\n collapseAll,\n getActiveKeys,\n handleKeyDown,\n } = useCollapsePanel({\n items: toRef(props, 'items'),\n activeKeys: toRef(props, 'activeKeys'),\n defaultActiveKeys: props.defaultActiveKeys,\n accordion: toRef(props, 'accordion'),\n persistKey: toRef(props, 'persistKey'),\n onChange: keys => {\n emit('update:activeKeys', keys)\n emit('change', keys)\n },\n onExpand: key => emit('expand', key),\n onCollapse: key => emit('collapse', key),\n })\n\n /* ─── 展开/折叠动画 ──────────────────────────── */\n const onEnter = (el: Element) => {\n const element = el as HTMLElement\n element.style.height = '0'\n element.style.overflow = 'hidden'\n /* 强制 reflow */\n void element.offsetHeight\n element.style.height = `${element.scrollHeight}px`\n }\n\n const onAfterEnter = (el: Element) => {\n const element = el as HTMLElement\n element.style.height = ''\n element.style.overflow = ''\n }\n\n const onLeave = (el: Element) => {\n const element = el as HTMLElement\n element.style.height = `${element.scrollHeight}px`\n element.style.overflow = 'hidden'\n void element.offsetHeight\n element.style.height = '0'\n }\n\n const onAfterLeave = (el: Element) => {\n const element = el as HTMLElement\n element.style.height = ''\n element.style.overflow = ''\n }\n\n /* ─── 滚动到指定面板 ─────────────────────────── */\n const scrollToPanel = (key: string) => {\n const el = panelRefs.value.get(key)\n if (el) {\n el.scrollIntoView({ behavior: 'smooth', block: 'start' })\n }\n }\n\n /* ─── 暴露方法 ──────────────────────────────── */\n defineExpose<CollapsePanelExpose>({\n expandAll,\n collapseAll,\n toggle,\n getActiveKeys,\n scrollToPanel,\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_CollapsePanel2.js","names":["variant","bordered","expandIconPosition","items","$slots"],"sources":["../src/components/C_CollapsePanel/composables/useCollapsePanel.ts","../src/components/C_CollapsePanel/index.vue","../src/components/C_CollapsePanel/index.vue","../src/components/C_CollapsePanel/index.vue"],"sourcesContent":["import { ref, computed, watch } from 'vue'\r\nimport type { Ref } from 'vue'\r\nimport type { CollapsePanelItem } from '../types'\r\n\r\ninterface UseCollapsePanelOptions {\r\n /** 面板项配置 */\r\n items: Ref<CollapsePanelItem[]>\r\n /** 外部 v-model activeKeys */\r\n activeKeys: Ref<string[] | undefined>\r\n /** 非受控时的默认激活 key */\r\n defaultActiveKeys: string[]\r\n /** 是否手风琴模式 */\r\n accordion: Ref<boolean>\r\n /** localStorage 持久化 key */\r\n persistKey: Ref<string | undefined>\r\n /** activeKeys 变化回调 */\r\n onChange?: (keys: string[]) => void\r\n /** 单面板展开回调 */\r\n onExpand?: (key: string) => void\r\n /** 单面板折叠回调 */\r\n onCollapse?: (key: string) => void\r\n}\r\n\r\n/**\r\n * 折叠面板展开/折叠核心逻辑\r\n */\r\nexport function useCollapsePanel(options: UseCollapsePanelOptions) {\r\n const {\r\n items,\r\n activeKeys: externalKeys,\r\n defaultActiveKeys,\r\n accordion,\r\n persistKey,\r\n onChange,\r\n onExpand,\r\n onCollapse,\r\n } = options\r\n\r\n /* ─── 持久化读取 ──────────────────────────────── */\r\n const loadPersistedKeys = (): string[] | null => {\r\n if (!persistKey.value) return null\r\n try {\r\n const raw = localStorage.getItem(`collapse-panel:${persistKey.value}`)\r\n return raw ? JSON.parse(raw) : null\r\n } catch {\r\n return null\r\n }\r\n }\r\n\r\n const savePersistedKeys = (keys: string[]) => {\r\n if (!persistKey.value) return\r\n try {\r\n localStorage.setItem(\r\n `collapse-panel:${persistKey.value}`,\r\n JSON.stringify(keys),\r\n )\r\n } catch {\r\n /* 静默失败 */\r\n }\r\n }\r\n\r\n /* ─── 内部状态 ────────────────────────────────── */\r\n const resolveInitialKeys = (): string[] => {\r\n /* 优先级:外部 v-model > 持久化 > 默认值 */\r\n if (externalKeys.value !== undefined) return [...externalKeys.value]\r\n const persisted = loadPersistedKeys()\r\n if (persisted) return persisted\r\n return [...defaultActiveKeys]\r\n }\r\n\r\n const internalKeys = ref<string[]>(resolveInitialKeys())\r\n\r\n /** 懒渲染追踪:记录哪些面板曾被展开过 */\r\n const renderedOnce = ref<Set<string>>(new Set(internalKeys.value))\r\n\r\n /* ─── 计算属性 ────────────────────────────────── */\r\n /** 当前激活的 key 数组(兼容受控 / 非受控) */\r\n const currentKeys = computed<string[]>({\r\n get: () =>\r\n externalKeys.value !== undefined\r\n ? externalKeys.value\r\n : internalKeys.value,\r\n set: (val) => {\r\n internalKeys.value = val\r\n },\r\n })\r\n\r\n /**\r\n * 判断面板是否展开\r\n */\r\n const isExpanded = (key: string): boolean => {\r\n return currentKeys.value.includes(key)\r\n }\r\n\r\n /**\r\n * 判断面板是否应该渲染内容\r\n * - lazy 面板只有被展开过至少一次后才渲染\r\n * - destroyOnCollapse 面板在折叠后销毁 DOM\r\n */\r\n const shouldRender = (item: CollapsePanelItem): boolean => {\r\n const expanded = isExpanded(item.key)\r\n\r\n if (item.destroyOnCollapse) return expanded\r\n if (item.lazy) return renderedOnce.value.has(item.key)\r\n return true\r\n }\r\n\r\n /* ─── 操作方法 ────────────────────────────────── */\r\n const updateKeys = (newKeys: string[]) => {\r\n currentKeys.value = newKeys\r\n onChange?.(newKeys)\r\n savePersistedKeys(newKeys)\r\n }\r\n\r\n const toggle = (key: string) => {\r\n const item = items.value.find((i) => i.key === key)\r\n if (!item || item.disabled) return\r\n\r\n const expanded = isExpanded(key)\r\n\r\n if (expanded) {\r\n /* 折叠 */\r\n updateKeys(currentKeys.value.filter((k) => k !== key))\r\n onCollapse?.(key)\r\n } else {\r\n /* 展开 */\r\n renderedOnce.value.add(key)\r\n\r\n if (accordion.value) {\r\n /* 手风琴模式:关闭其他面板 */\r\n const prevKeys = currentKeys.value\r\n updateKeys([key])\r\n /* 通知被折叠的面板 */\r\n prevKeys.forEach((k) => {\r\n if (k !== key) onCollapse?.(k)\r\n })\r\n } else {\r\n updateKeys([...currentKeys.value, key])\r\n }\r\n onExpand?.(key)\r\n }\r\n }\r\n\r\n const expandAll = () => {\r\n if (accordion.value) return /* 手风琴模式不支持全展开 */\r\n\r\n const allKeys = items.value.filter((i) => !i.disabled).map((i) => i.key)\r\n\r\n allKeys.forEach((k) => renderedOnce.value.add(k))\r\n updateKeys(allKeys)\r\n }\r\n\r\n const collapseAll = () => {\r\n updateKeys([])\r\n }\r\n\r\n const getActiveKeys = (): string[] => {\r\n return [...currentKeys.value]\r\n }\r\n\r\n /* ─── 键盘导航 ────────────────────────────────── */\r\n const handleKeyDown = (e: KeyboardEvent, key: string) => {\r\n if (['Enter', ' '].includes(e.key)) {\r\n e.preventDefault()\r\n toggle(key)\r\n }\r\n }\r\n\r\n /* ─── 同步外部 v-model 变化 ───────────────────── */\r\n watch(\r\n () => externalKeys.value,\r\n (newVal) => {\r\n if (newVal !== undefined) {\r\n internalKeys.value = [...newVal]\r\n newVal.forEach((k) => renderedOnce.value.add(k))\r\n savePersistedKeys(newVal)\r\n }\r\n },\r\n )\r\n\r\n return {\r\n currentKeys,\r\n renderedOnce,\r\n isExpanded,\r\n shouldRender,\r\n toggle,\r\n expandAll,\r\n collapseAll,\r\n getActiveKeys,\r\n handleKeyDown,\r\n }\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-25\r\n * @Description: 折叠面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"containerRef\"\r\n class=\"c-collapse-panel\"\r\n :class=\"[\r\n `c-collapse-panel--${variant}`,\r\n {\r\n 'c-collapse-panel--bordered': bordered,\r\n 'c-collapse-panel--icon-right': expandIconPosition === 'right',\r\n },\r\n ]\"\r\n >\r\n <div\r\n v-for=\"item in items\"\r\n :key=\"item.key\"\r\n :ref=\"el => setPanelRef(item.key, el as HTMLElement)\"\r\n class=\"collapse-item\"\r\n :class=\"{\r\n 'collapse-item--active': isExpanded(item.key),\r\n 'collapse-item--disabled': item.disabled,\r\n }\"\r\n >\r\n <!-- 面板头部 -->\r\n <div\r\n class=\"collapse-item__header\"\r\n role=\"button\"\r\n :aria-expanded=\"isExpanded(item.key)\"\r\n :aria-controls=\"`collapse-content-${item.key}`\"\r\n :aria-disabled=\"item.disabled\"\r\n :tabindex=\"item.disabled ? -1 : 0\"\r\n @click=\"!item.disabled && toggle(item.key)\"\r\n @keydown=\"handleKeyDown($event, item.key)\"\r\n >\r\n <!-- 展开图标 -->\r\n <span\r\n class=\"collapse-item__arrow\"\r\n :class=\"{ 'collapse-item__arrow--expanded': isExpanded(item.key) }\"\r\n >\r\n <C_Icon\r\n name=\"mdi:chevron-right\"\r\n :size=\"16\"\r\n color=\"currentColor\"\r\n />\r\n </span>\r\n\r\n <!-- 标题区域 -->\r\n <div class=\"collapse-item__title-area\">\r\n <slot\r\n :name=\"`header-${item.key}`\"\r\n :item=\"item\"\r\n :expanded=\"isExpanded(item.key)\"\r\n >\r\n <div class=\"collapse-item__title-group\">\r\n <C_Icon\r\n v-if=\"item.icon\"\r\n :name=\"item.icon\"\r\n :size=\"18\"\r\n color=\"currentColor\"\r\n class=\"collapse-item__icon\"\r\n />\r\n <span class=\"collapse-item__title\">{{ item.title }}</span>\r\n <span\r\n v-if=\"item.subtitle\"\r\n class=\"collapse-item__subtitle\"\r\n >\r\n {{ item.subtitle }}\r\n </span>\r\n </div>\r\n </slot>\r\n </div>\r\n\r\n <!-- 头部右侧操作区 -->\r\n <div\r\n v-if=\"$slots[`extra-${item.key}`]\"\r\n class=\"collapse-item__extra\"\r\n @click.stop\r\n >\r\n <slot\r\n :name=\"`extra-${item.key}`\"\r\n :item=\"item\"\r\n :expanded=\"isExpanded(item.key)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- 面板内容 -->\r\n <Transition\r\n name=\"collapse-slide\"\r\n @enter=\"onEnter\"\r\n @after-enter=\"onAfterEnter\"\r\n @leave=\"onLeave\"\r\n @after-leave=\"onAfterLeave\"\r\n >\r\n <div\r\n v-show=\"isExpanded(item.key)\"\r\n :id=\"`collapse-content-${item.key}`\"\r\n class=\"collapse-item__content-wrapper\"\r\n role=\"region\"\r\n :aria-labelledby=\"`collapse-header-${item.key}`\"\r\n >\r\n <div\r\n v-if=\"shouldRender(item)\"\r\n class=\"collapse-item__content\"\r\n >\r\n <slot\r\n :name=\"`panel-${item.key}`\"\r\n :item=\"item\"\r\n :expanded=\"isExpanded(item.key)\"\r\n >\r\n <component\r\n :is=\"item.content\"\r\n v-if=\"item.content && typeof item.content !== 'string'\"\r\n />\r\n <template v-else-if=\"item.content\">{{ item.content }}</template>\r\n </slot>\r\n </div>\r\n </div>\r\n </Transition>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { ref, toRef } from 'vue'\r\n import C_Icon from '../C_Icon/index.vue'\r\n import { useCollapsePanel } from './composables/useCollapsePanel'\r\n import type {\r\n CollapsePanelExpose,\r\n CollapsePanelItem,\r\n CollapsePanelVariant,\r\n ExpandIconPosition,\r\n } from './types'\r\n\r\n defineOptions({ name: 'C_CollapsePanel' })\r\n\r\n interface Props {\r\n /** 面板项配置数组 */\r\n items: CollapsePanelItem[]\r\n /** 当前激活面板的 key 数组(v-model) */\r\n activeKeys?: string[]\r\n /** 默认展开的面板 key 数组 */\r\n defaultActiveKeys?: string[]\r\n /** 是否手风琴模式 */\r\n accordion?: boolean\r\n /** 面板样式变体 */\r\n variant?: CollapsePanelVariant\r\n /** 展开图标位置 */\r\n expandIconPosition?: ExpandIconPosition\r\n /** 是否显示边框 */\r\n bordered?: boolean\r\n /** 展开状态 localStorage 持久化 key */\r\n persistKey?: string\r\n }\r\n\r\n const props = withDefaults(defineProps<Props>(), {\r\n activeKeys: undefined,\r\n defaultActiveKeys: () => [],\r\n accordion: false,\r\n variant: 'default',\r\n expandIconPosition: 'left',\r\n bordered: true,\r\n persistKey: undefined,\r\n })\r\n\r\n const emit = defineEmits<{\r\n 'update:activeKeys': [keys: string[]]\r\n expand: [key: string]\r\n collapse: [key: string]\r\n change: [activeKeys: string[]]\r\n }>()\r\n\r\n const containerRef = ref<HTMLElement | null>(null)\r\n const panelRefs = ref<Map<string, HTMLElement>>(new Map())\r\n\r\n const setPanelRef = (key: string, el: HTMLElement | null) => {\r\n if (el) {\r\n panelRefs.value.set(key, el)\r\n } else {\r\n panelRefs.value.delete(key)\r\n }\r\n }\r\n\r\n const {\r\n isExpanded,\r\n shouldRender,\r\n toggle,\r\n expandAll,\r\n collapseAll,\r\n getActiveKeys,\r\n handleKeyDown,\r\n } = useCollapsePanel({\r\n items: toRef(props, 'items'),\r\n activeKeys: toRef(props, 'activeKeys'),\r\n defaultActiveKeys: props.defaultActiveKeys,\r\n accordion: toRef(props, 'accordion'),\r\n persistKey: toRef(props, 'persistKey'),\r\n onChange: keys => {\r\n emit('update:activeKeys', keys)\r\n emit('change', keys)\r\n },\r\n onExpand: key => emit('expand', key),\r\n onCollapse: key => emit('collapse', key),\r\n })\r\n\r\n /* ─── 展开/折叠动画 ──────────────────────────── */\r\n const onEnter = (el: Element) => {\r\n const element = el as HTMLElement\r\n element.style.height = '0'\r\n element.style.overflow = 'hidden'\r\n /* 强制 reflow */\r\n void element.offsetHeight\r\n element.style.height = `${element.scrollHeight}px`\r\n }\r\n\r\n const onAfterEnter = (el: Element) => {\r\n const element = el as HTMLElement\r\n element.style.height = ''\r\n element.style.overflow = ''\r\n }\r\n\r\n const onLeave = (el: Element) => {\r\n const element = el as HTMLElement\r\n element.style.height = `${element.scrollHeight}px`\r\n element.style.overflow = 'hidden'\r\n void element.offsetHeight\r\n element.style.height = '0'\r\n }\r\n\r\n const onAfterLeave = (el: Element) => {\r\n const element = el as HTMLElement\r\n element.style.height = ''\r\n element.style.overflow = ''\r\n }\r\n\r\n /* ─── 滚动到指定面板 ─────────────────────────── */\r\n const scrollToPanel = (key: string) => {\r\n const el = panelRefs.value.get(key)\r\n if (el) {\r\n el.scrollIntoView({ behavior: 'smooth', block: 'start' })\r\n }\r\n }\r\n\r\n /* ─── 暴露方法 ──────────────────────────────── */\r\n defineExpose<CollapsePanelExpose>({\r\n expandAll,\r\n collapseAll,\r\n toggle,\r\n getActiveKeys,\r\n scrollToPanel,\r\n })\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n @use './index.scss';\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-25\r\n * @Description: 折叠面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"containerRef\"\r\n class=\"c-collapse-panel\"\r\n :class=\"[\r\n `c-collapse-panel--${variant}`,\r\n {\r\n 'c-collapse-panel--bordered': bordered,\r\n 'c-collapse-panel--icon-right': expandIconPosition === 'right',\r\n },\r\n ]\"\r\n >\r\n <div\r\n v-for=\"item in items\"\r\n :key=\"item.key\"\r\n :ref=\"el => setPanelRef(item.key, el as HTMLElement)\"\r\n class=\"collapse-item\"\r\n :class=\"{\r\n 'collapse-item--active': isExpanded(item.key),\r\n 'collapse-item--disabled': item.disabled,\r\n }\"\r\n >\r\n <!-- 面板头部 -->\r\n <div\r\n class=\"collapse-item__header\"\r\n role=\"button\"\r\n :aria-expanded=\"isExpanded(item.key)\"\r\n :aria-controls=\"`collapse-content-${item.key}`\"\r\n :aria-disabled=\"item.disabled\"\r\n :tabindex=\"item.disabled ? -1 : 0\"\r\n @click=\"!item.disabled && toggle(item.key)\"\r\n @keydown=\"handleKeyDown($event, item.key)\"\r\n >\r\n <!-- 展开图标 -->\r\n <span\r\n class=\"collapse-item__arrow\"\r\n :class=\"{ 'collapse-item__arrow--expanded': isExpanded(item.key) }\"\r\n >\r\n <C_Icon\r\n name=\"mdi:chevron-right\"\r\n :size=\"16\"\r\n color=\"currentColor\"\r\n />\r\n </span>\r\n\r\n <!-- 标题区域 -->\r\n <div class=\"collapse-item__title-area\">\r\n <slot\r\n :name=\"`header-${item.key}`\"\r\n :item=\"item\"\r\n :expanded=\"isExpanded(item.key)\"\r\n >\r\n <div class=\"collapse-item__title-group\">\r\n <C_Icon\r\n v-if=\"item.icon\"\r\n :name=\"item.icon\"\r\n :size=\"18\"\r\n color=\"currentColor\"\r\n class=\"collapse-item__icon\"\r\n />\r\n <span class=\"collapse-item__title\">{{ item.title }}</span>\r\n <span\r\n v-if=\"item.subtitle\"\r\n class=\"collapse-item__subtitle\"\r\n >\r\n {{ item.subtitle }}\r\n </span>\r\n </div>\r\n </slot>\r\n </div>\r\n\r\n <!-- 头部右侧操作区 -->\r\n <div\r\n v-if=\"$slots[`extra-${item.key}`]\"\r\n class=\"collapse-item__extra\"\r\n @click.stop\r\n >\r\n <slot\r\n :name=\"`extra-${item.key}`\"\r\n :item=\"item\"\r\n :expanded=\"isExpanded(item.key)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- 面板内容 -->\r\n <Transition\r\n name=\"collapse-slide\"\r\n @enter=\"onEnter\"\r\n @after-enter=\"onAfterEnter\"\r\n @leave=\"onLeave\"\r\n @after-leave=\"onAfterLeave\"\r\n >\r\n <div\r\n v-show=\"isExpanded(item.key)\"\r\n :id=\"`collapse-content-${item.key}`\"\r\n class=\"collapse-item__content-wrapper\"\r\n role=\"region\"\r\n :aria-labelledby=\"`collapse-header-${item.key}`\"\r\n >\r\n <div\r\n v-if=\"shouldRender(item)\"\r\n class=\"collapse-item__content\"\r\n >\r\n <slot\r\n :name=\"`panel-${item.key}`\"\r\n :item=\"item\"\r\n :expanded=\"isExpanded(item.key)\"\r\n >\r\n <component\r\n :is=\"item.content\"\r\n v-if=\"item.content && typeof item.content !== 'string'\"\r\n />\r\n <template v-else-if=\"item.content\">{{ item.content }}</template>\r\n </slot>\r\n </div>\r\n </div>\r\n </Transition>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { ref, toRef } from 'vue'\r\n import C_Icon from '../C_Icon/index.vue'\r\n import { useCollapsePanel } from './composables/useCollapsePanel'\r\n import type {\r\n CollapsePanelExpose,\r\n CollapsePanelItem,\r\n CollapsePanelVariant,\r\n ExpandIconPosition,\r\n } from './types'\r\n\r\n defineOptions({ name: 'C_CollapsePanel' })\r\n\r\n interface Props {\r\n /** 面板项配置数组 */\r\n items: CollapsePanelItem[]\r\n /** 当前激活面板的 key 数组(v-model) */\r\n activeKeys?: string[]\r\n /** 默认展开的面板 key 数组 */\r\n defaultActiveKeys?: string[]\r\n /** 是否手风琴模式 */\r\n accordion?: boolean\r\n /** 面板样式变体 */\r\n variant?: CollapsePanelVariant\r\n /** 展开图标位置 */\r\n expandIconPosition?: ExpandIconPosition\r\n /** 是否显示边框 */\r\n bordered?: boolean\r\n /** 展开状态 localStorage 持久化 key */\r\n persistKey?: string\r\n }\r\n\r\n const props = withDefaults(defineProps<Props>(), {\r\n activeKeys: undefined,\r\n defaultActiveKeys: () => [],\r\n accordion: false,\r\n variant: 'default',\r\n expandIconPosition: 'left',\r\n bordered: true,\r\n persistKey: undefined,\r\n })\r\n\r\n const emit = defineEmits<{\r\n 'update:activeKeys': [keys: string[]]\r\n expand: [key: string]\r\n collapse: [key: string]\r\n change: [activeKeys: string[]]\r\n }>()\r\n\r\n const containerRef = ref<HTMLElement | null>(null)\r\n const panelRefs = ref<Map<string, HTMLElement>>(new Map())\r\n\r\n const setPanelRef = (key: string, el: HTMLElement | null) => {\r\n if (el) {\r\n panelRefs.value.set(key, el)\r\n } else {\r\n panelRefs.value.delete(key)\r\n }\r\n }\r\n\r\n const {\r\n isExpanded,\r\n shouldRender,\r\n toggle,\r\n expandAll,\r\n collapseAll,\r\n getActiveKeys,\r\n handleKeyDown,\r\n } = useCollapsePanel({\r\n items: toRef(props, 'items'),\r\n activeKeys: toRef(props, 'activeKeys'),\r\n defaultActiveKeys: props.defaultActiveKeys,\r\n accordion: toRef(props, 'accordion'),\r\n persistKey: toRef(props, 'persistKey'),\r\n onChange: keys => {\r\n emit('update:activeKeys', keys)\r\n emit('change', keys)\r\n },\r\n onExpand: key => emit('expand', key),\r\n onCollapse: key => emit('collapse', key),\r\n })\r\n\r\n /* ─── 展开/折叠动画 ──────────────────────────── */\r\n const onEnter = (el: Element) => {\r\n const element = el as HTMLElement\r\n element.style.height = '0'\r\n element.style.overflow = 'hidden'\r\n /* 强制 reflow */\r\n void element.offsetHeight\r\n element.style.height = `${element.scrollHeight}px`\r\n }\r\n\r\n const onAfterEnter = (el: Element) => {\r\n const element = el as HTMLElement\r\n element.style.height = ''\r\n element.style.overflow = ''\r\n }\r\n\r\n const onLeave = (el: Element) => {\r\n const element = el as HTMLElement\r\n element.style.height = `${element.scrollHeight}px`\r\n element.style.overflow = 'hidden'\r\n void element.offsetHeight\r\n element.style.height = '0'\r\n }\r\n\r\n const onAfterLeave = (el: Element) => {\r\n const element = el as HTMLElement\r\n element.style.height = ''\r\n element.style.overflow = ''\r\n }\r\n\r\n /* ─── 滚动到指定面板 ─────────────────────────── */\r\n const scrollToPanel = (key: string) => {\r\n const el = panelRefs.value.get(key)\r\n if (el) {\r\n el.scrollIntoView({ behavior: 'smooth', block: 'start' })\r\n }\r\n }\r\n\r\n /* ─── 暴露方法 ──────────────────────────────── */\r\n defineExpose<CollapsePanelExpose>({\r\n expandAll,\r\n collapseAll,\r\n toggle,\r\n getActiveKeys,\r\n scrollToPanel,\r\n })\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n @use './index.scss';\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-25\r\n * @Description: 折叠面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"containerRef\"\r\n class=\"c-collapse-panel\"\r\n :class=\"[\r\n `c-collapse-panel--${variant}`,\r\n {\r\n 'c-collapse-panel--bordered': bordered,\r\n 'c-collapse-panel--icon-right': expandIconPosition === 'right',\r\n },\r\n ]\"\r\n >\r\n <div\r\n v-for=\"item in items\"\r\n :key=\"item.key\"\r\n :ref=\"el => setPanelRef(item.key, el as HTMLElement)\"\r\n class=\"collapse-item\"\r\n :class=\"{\r\n 'collapse-item--active': isExpanded(item.key),\r\n 'collapse-item--disabled': item.disabled,\r\n }\"\r\n >\r\n <!-- 面板头部 -->\r\n <div\r\n class=\"collapse-item__header\"\r\n role=\"button\"\r\n :aria-expanded=\"isExpanded(item.key)\"\r\n :aria-controls=\"`collapse-content-${item.key}`\"\r\n :aria-disabled=\"item.disabled\"\r\n :tabindex=\"item.disabled ? -1 : 0\"\r\n @click=\"!item.disabled && toggle(item.key)\"\r\n @keydown=\"handleKeyDown($event, item.key)\"\r\n >\r\n <!-- 展开图标 -->\r\n <span\r\n class=\"collapse-item__arrow\"\r\n :class=\"{ 'collapse-item__arrow--expanded': isExpanded(item.key) }\"\r\n >\r\n <C_Icon\r\n name=\"mdi:chevron-right\"\r\n :size=\"16\"\r\n color=\"currentColor\"\r\n />\r\n </span>\r\n\r\n <!-- 标题区域 -->\r\n <div class=\"collapse-item__title-area\">\r\n <slot\r\n :name=\"`header-${item.key}`\"\r\n :item=\"item\"\r\n :expanded=\"isExpanded(item.key)\"\r\n >\r\n <div class=\"collapse-item__title-group\">\r\n <C_Icon\r\n v-if=\"item.icon\"\r\n :name=\"item.icon\"\r\n :size=\"18\"\r\n color=\"currentColor\"\r\n class=\"collapse-item__icon\"\r\n />\r\n <span class=\"collapse-item__title\">{{ item.title }}</span>\r\n <span\r\n v-if=\"item.subtitle\"\r\n class=\"collapse-item__subtitle\"\r\n >\r\n {{ item.subtitle }}\r\n </span>\r\n </div>\r\n </slot>\r\n </div>\r\n\r\n <!-- 头部右侧操作区 -->\r\n <div\r\n v-if=\"$slots[`extra-${item.key}`]\"\r\n class=\"collapse-item__extra\"\r\n @click.stop\r\n >\r\n <slot\r\n :name=\"`extra-${item.key}`\"\r\n :item=\"item\"\r\n :expanded=\"isExpanded(item.key)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- 面板内容 -->\r\n <Transition\r\n name=\"collapse-slide\"\r\n @enter=\"onEnter\"\r\n @after-enter=\"onAfterEnter\"\r\n @leave=\"onLeave\"\r\n @after-leave=\"onAfterLeave\"\r\n >\r\n <div\r\n v-show=\"isExpanded(item.key)\"\r\n :id=\"`collapse-content-${item.key}`\"\r\n class=\"collapse-item__content-wrapper\"\r\n role=\"region\"\r\n :aria-labelledby=\"`collapse-header-${item.key}`\"\r\n >\r\n <div\r\n v-if=\"shouldRender(item)\"\r\n class=\"collapse-item__content\"\r\n >\r\n <slot\r\n :name=\"`panel-${item.key}`\"\r\n :item=\"item\"\r\n :expanded=\"isExpanded(item.key)\"\r\n >\r\n <component\r\n :is=\"item.content\"\r\n v-if=\"item.content && typeof item.content !== 'string'\"\r\n />\r\n <template v-else-if=\"item.content\">{{ item.content }}</template>\r\n </slot>\r\n </div>\r\n </div>\r\n </Transition>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { ref, toRef } from 'vue'\r\n import C_Icon from '../C_Icon/index.vue'\r\n import { useCollapsePanel } from './composables/useCollapsePanel'\r\n import type {\r\n CollapsePanelExpose,\r\n CollapsePanelItem,\r\n CollapsePanelVariant,\r\n ExpandIconPosition,\r\n } from './types'\r\n\r\n defineOptions({ name: 'C_CollapsePanel' })\r\n\r\n interface Props {\r\n /** 面板项配置数组 */\r\n items: CollapsePanelItem[]\r\n /** 当前激活面板的 key 数组(v-model) */\r\n activeKeys?: string[]\r\n /** 默认展开的面板 key 数组 */\r\n defaultActiveKeys?: string[]\r\n /** 是否手风琴模式 */\r\n accordion?: boolean\r\n /** 面板样式变体 */\r\n variant?: CollapsePanelVariant\r\n /** 展开图标位置 */\r\n expandIconPosition?: ExpandIconPosition\r\n /** 是否显示边框 */\r\n bordered?: boolean\r\n /** 展开状态 localStorage 持久化 key */\r\n persistKey?: string\r\n }\r\n\r\n const props = withDefaults(defineProps<Props>(), {\r\n activeKeys: undefined,\r\n defaultActiveKeys: () => [],\r\n accordion: false,\r\n variant: 'default',\r\n expandIconPosition: 'left',\r\n bordered: true,\r\n persistKey: undefined,\r\n })\r\n\r\n const emit = defineEmits<{\r\n 'update:activeKeys': [keys: string[]]\r\n expand: [key: string]\r\n collapse: [key: string]\r\n change: [activeKeys: string[]]\r\n }>()\r\n\r\n const containerRef = ref<HTMLElement | null>(null)\r\n const panelRefs = ref<Map<string, HTMLElement>>(new Map())\r\n\r\n const setPanelRef = (key: string, el: HTMLElement | null) => {\r\n if (el) {\r\n panelRefs.value.set(key, el)\r\n } else {\r\n panelRefs.value.delete(key)\r\n }\r\n }\r\n\r\n const {\r\n isExpanded,\r\n shouldRender,\r\n toggle,\r\n expandAll,\r\n collapseAll,\r\n getActiveKeys,\r\n handleKeyDown,\r\n } = useCollapsePanel({\r\n items: toRef(props, 'items'),\r\n activeKeys: toRef(props, 'activeKeys'),\r\n defaultActiveKeys: props.defaultActiveKeys,\r\n accordion: toRef(props, 'accordion'),\r\n persistKey: toRef(props, 'persistKey'),\r\n onChange: keys => {\r\n emit('update:activeKeys', keys)\r\n emit('change', keys)\r\n },\r\n onExpand: key => emit('expand', key),\r\n onCollapse: key => emit('collapse', key),\r\n })\r\n\r\n /* ─── 展开/折叠动画 ──────────────────────────── */\r\n const onEnter = (el: Element) => {\r\n const element = el as HTMLElement\r\n element.style.height = '0'\r\n element.style.overflow = 'hidden'\r\n /* 强制 reflow */\r\n void element.offsetHeight\r\n element.style.height = `${element.scrollHeight}px`\r\n }\r\n\r\n const onAfterEnter = (el: Element) => {\r\n const element = el as HTMLElement\r\n element.style.height = ''\r\n element.style.overflow = ''\r\n }\r\n\r\n const onLeave = (el: Element) => {\r\n const element = el as HTMLElement\r\n element.style.height = `${element.scrollHeight}px`\r\n element.style.overflow = 'hidden'\r\n void element.offsetHeight\r\n element.style.height = '0'\r\n }\r\n\r\n const onAfterLeave = (el: Element) => {\r\n const element = el as HTMLElement\r\n element.style.height = ''\r\n element.style.overflow = ''\r\n }\r\n\r\n /* ─── 滚动到指定面板 ─────────────────────────── */\r\n const scrollToPanel = (key: string) => {\r\n const el = panelRefs.value.get(key)\r\n if (el) {\r\n el.scrollIntoView({ behavior: 'smooth', block: 'start' })\r\n }\r\n }\r\n\r\n /* ─── 暴露方法 ──────────────────────────────── */\r\n defineExpose<CollapsePanelExpose>({\r\n expandAll,\r\n collapseAll,\r\n toggle,\r\n getActiveKeys,\r\n scrollToPanel,\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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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_Editor-C49qURgb.css","names":[],"sources":["../src/components/C_Editor/index.vue?vue&type=style&index=0&scoped=11d1913a&lang.css"],"sourcesContent":["/* unplugin-vue-components disabled */\r\n/* CSS 变量 — 支持外部主题覆盖 */\n[data-v-11d1913a]:root {\r\n --c-editor-toolbar-bg: #ffffff;\r\n --c-editor-toolbar-border: #e5e7eb;\r\n --c-editor-menu-color: #333333;\r\n --c-editor-menu-hover-bg: #f3f4f6;\r\n --c-editor-menu-hover-color: #333333;\r\n --c-editor-menu-active-bg: var(--c-primary, #2080f0);\r\n --c-editor-menu-active-color: #ffffff;\r\n --c-editor-container-bg: #ffffff;\r\n --c-editor-container-border: #e5e7eb;\r\n --c-editor-text-bg: #ffffff;\r\n --c-editor-text-color: #333333;\r\n --c-editor-text-focus-bg: #ffffff;\r\n --c-editor-text-focus-color: #333333;\r\n --c-editor-transition-duration: 0.3s;\n}\r\n\r\n/* 暗色主题 — 覆盖 CSS 变量 */\n.editor-dark[data-v-11d1913a] {\r\n --c-editor-toolbar-bg: #1f2937;\r\n --c-editor-toolbar-border: #374151;\r\n --c-editor-menu-color: #e5e7eb;\r\n --c-editor-menu-hover-bg: #374151;\r\n --c-editor-menu-hover-color: #ffffff;\r\n --c-editor-container-bg: #111827;\r\n --c-editor-container-border: #374151;\r\n --c-editor-text-bg: #303033;\r\n --c-editor-text-color: #e5e7eb;\r\n --c-editor-text-focus-bg: #111827;\r\n --c-editor-text-focus-color: #e5e7eb;\n}\n.editor-dark[data-v-11d1913a] .w-e-toolbar {\r\n background-color: var(--c-editor-toolbar-bg) !important;\r\n border-color: var(--c-editor-toolbar-border) !important;\n}\n.editor-dark[data-v-11d1913a] .w-e-toolbar .w-e-menu .w-e-menu-item {\r\n color: var(--c-editor-menu-color) !important;\n}\n.editor-dark[data-v-11d1913a] .w-e-toolbar .w-e-menu .w-e-menu-item:hover {\r\n background-color: var(--c-editor-menu-hover-bg) !important;\r\n color: var(--c-editor-menu-hover-color) !important;\n}\n.editor-dark[data-v-11d1913a] .w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active {\r\n background-color: var(--c-editor-menu-active-bg) !important;\r\n color: var(--c-editor-menu-active-color) !important;\n}\n.editor-dark[data-v-11d1913a] .w-e-text-container {\r\n background-color: var(--c-editor-container-bg) !important;\r\n border-color: var(--c-editor-container-border) !important;\n}\n.editor-dark[data-v-11d1913a] .w-e-text-container .w-e-text {\r\n background-color: var(--c-editor-text-bg) !important;\r\n color: var(--c-editor-text-color) !important;\n}\n.editor-dark[data-v-11d1913a] .w-e-text-container .w-e-text:focus {\r\n background-color: var(--c-editor-text-focus-bg) !important;\r\n color: var(--c-editor-text-focus-color) !important;\n}\n[data-v-11d1913a] .w-e-toolbar,[data-v-11d1913a] .w-e-text-container {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\n}\n[data-v-11d1913a] .w-e-text {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\n}\n[data-v-11d1913a] .w-e-toolbar,[data-v-11d1913a] .w-e-text-container,[data-v-11d1913a] .w-e-text {\r\n transition:\r\n background-color var(--c-editor-transition-duration) ease,\r\n border-color var(--c-editor-transition-duration) ease,\r\n color var(--c-editor-transition-duration) ease !important;\n}\n.editor-focused[data-v-11d1913a] {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\n}\r\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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_Editor-DuxBD9Qg.css","names":[],"sources":["../src/components/C_Editor/index.vue?vue&type=style&index=0&scoped=11d1913a&lang.css"],"sourcesContent":["/* unplugin-vue-components disabled */\r\n/* CSS 变量 — 支持外部主题覆盖 */\n[data-v-11d1913a]:root {\r\n --c-editor-toolbar-bg: #ffffff;\r\n --c-editor-toolbar-border: #e5e7eb;\r\n --c-editor-menu-color: #333333;\r\n --c-editor-menu-hover-bg: #f3f4f6;\r\n --c-editor-menu-hover-color: #333333;\r\n --c-editor-menu-active-bg: var(--c-primary, #2080f0);\r\n --c-editor-menu-active-color: #ffffff;\r\n --c-editor-container-bg: #ffffff;\r\n --c-editor-container-border: #e5e7eb;\r\n --c-editor-text-bg: #ffffff;\r\n --c-editor-text-color: #333333;\r\n --c-editor-text-focus-bg: #ffffff;\r\n --c-editor-text-focus-color: #333333;\r\n --c-editor-transition-duration: 0.3s;\n}\r\n\r\n/* 暗色主题 — 覆盖 CSS 变量 */\n.editor-dark[data-v-11d1913a] {\r\n --c-editor-toolbar-bg: #1f2937;\r\n --c-editor-toolbar-border: #374151;\r\n --c-editor-menu-color: #e5e7eb;\r\n --c-editor-menu-hover-bg: #374151;\r\n --c-editor-menu-hover-color: #ffffff;\r\n --c-editor-container-bg: #111827;\r\n --c-editor-container-border: #374151;\r\n --c-editor-text-bg: #303033;\r\n --c-editor-text-color: #e5e7eb;\r\n --c-editor-text-focus-bg: #111827;\r\n --c-editor-text-focus-color: #e5e7eb;\n}\n.editor-dark[data-v-11d1913a] .w-e-toolbar {\r\n background-color: var(--c-editor-toolbar-bg) !important;\r\n border-color: var(--c-editor-toolbar-border) !important;\n}\n.editor-dark[data-v-11d1913a] .w-e-toolbar .w-e-menu .w-e-menu-item {\r\n color: var(--c-editor-menu-color) !important;\n}\n.editor-dark[data-v-11d1913a] .w-e-toolbar .w-e-menu .w-e-menu-item:hover {\r\n background-color: var(--c-editor-menu-hover-bg) !important;\r\n color: var(--c-editor-menu-hover-color) !important;\n}\n.editor-dark[data-v-11d1913a] .w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active {\r\n background-color: var(--c-editor-menu-active-bg) !important;\r\n color: var(--c-editor-menu-active-color) !important;\n}\n.editor-dark[data-v-11d1913a] .w-e-text-container {\r\n background-color: var(--c-editor-container-bg) !important;\r\n border-color: var(--c-editor-container-border) !important;\n}\n.editor-dark[data-v-11d1913a] .w-e-text-container .w-e-text {\r\n background-color: var(--c-editor-text-bg) !important;\r\n color: var(--c-editor-text-color) !important;\n}\n.editor-dark[data-v-11d1913a] .w-e-text-container .w-e-text:focus {\r\n background-color: var(--c-editor-text-focus-bg) !important;\r\n color: var(--c-editor-text-focus-color) !important;\n}\n[data-v-11d1913a] .w-e-toolbar,[data-v-11d1913a] .w-e-text-container {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\n}\n[data-v-11d1913a] .w-e-text {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\n}\n[data-v-11d1913a] .w-e-toolbar,[data-v-11d1913a] .w-e-text-container,[data-v-11d1913a] .w-e-text {\r\n transition:\r\n background-color var(--c-editor-transition-duration) ease,\r\n border-color var(--c-editor-transition-duration) ease,\r\n color var(--c-editor-transition-duration) ease !important;\n}\n.editor-focused[data-v-11d1913a] {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\n}\r\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"}
|
package/dist/C_Editor.css
CHANGED
|
@@ -1,52 +1,83 @@
|
|
|
1
1
|
/* unplugin-vue-components disabled */
|
|
2
|
-
/*
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
border
|
|
2
|
+
/* CSS 变量 — 支持外部主题覆盖 */
|
|
3
|
+
[data-v-11d1913a]:root {
|
|
4
|
+
--c-editor-toolbar-bg: #ffffff;
|
|
5
|
+
--c-editor-toolbar-border: #e5e7eb;
|
|
6
|
+
--c-editor-menu-color: #333333;
|
|
7
|
+
--c-editor-menu-hover-bg: #f3f4f6;
|
|
8
|
+
--c-editor-menu-hover-color: #333333;
|
|
9
|
+
--c-editor-menu-active-bg: var(--c-primary, #2080f0);
|
|
10
|
+
--c-editor-menu-active-color: #ffffff;
|
|
11
|
+
--c-editor-container-bg: #ffffff;
|
|
12
|
+
--c-editor-container-border: #e5e7eb;
|
|
13
|
+
--c-editor-text-bg: #ffffff;
|
|
14
|
+
--c-editor-text-color: #333333;
|
|
15
|
+
--c-editor-text-focus-bg: #ffffff;
|
|
16
|
+
--c-editor-text-focus-color: #333333;
|
|
17
|
+
--c-editor-transition-duration: 0.3s;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* 暗色主题 — 覆盖 CSS 变量 */
|
|
21
|
+
.editor-dark[data-v-11d1913a] {
|
|
22
|
+
--c-editor-toolbar-bg: #1f2937;
|
|
23
|
+
--c-editor-toolbar-border: #374151;
|
|
24
|
+
--c-editor-menu-color: #e5e7eb;
|
|
25
|
+
--c-editor-menu-hover-bg: #374151;
|
|
26
|
+
--c-editor-menu-hover-color: #ffffff;
|
|
27
|
+
--c-editor-container-bg: #111827;
|
|
28
|
+
--c-editor-container-border: #374151;
|
|
29
|
+
--c-editor-text-bg: #303033;
|
|
30
|
+
--c-editor-text-color: #e5e7eb;
|
|
31
|
+
--c-editor-text-focus-bg: #111827;
|
|
32
|
+
--c-editor-text-focus-color: #e5e7eb;
|
|
33
|
+
}
|
|
34
|
+
.editor-dark[data-v-11d1913a] .w-e-toolbar {
|
|
35
|
+
background-color: var(--c-editor-toolbar-bg) !important;
|
|
36
|
+
border-color: var(--c-editor-toolbar-border) !important;
|
|
6
37
|
}
|
|
7
|
-
.editor-dark[data-v-
|
|
8
|
-
color:
|
|
38
|
+
.editor-dark[data-v-11d1913a] .w-e-toolbar .w-e-menu .w-e-menu-item {
|
|
39
|
+
color: var(--c-editor-menu-color) !important;
|
|
9
40
|
}
|
|
10
|
-
.editor-dark[data-v-
|
|
11
|
-
background-color:
|
|
12
|
-
color:
|
|
41
|
+
.editor-dark[data-v-11d1913a] .w-e-toolbar .w-e-menu .w-e-menu-item:hover {
|
|
42
|
+
background-color: var(--c-editor-menu-hover-bg) !important;
|
|
43
|
+
color: var(--c-editor-menu-hover-color) !important;
|
|
13
44
|
}
|
|
14
|
-
.editor-dark[data-v-
|
|
15
|
-
background-color:
|
|
16
|
-
color:
|
|
45
|
+
.editor-dark[data-v-11d1913a] .w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active {
|
|
46
|
+
background-color: var(--c-editor-menu-active-bg) !important;
|
|
47
|
+
color: var(--c-editor-menu-active-color) !important;
|
|
17
48
|
}
|
|
18
|
-
.editor-dark[data-v-
|
|
19
|
-
background-color:
|
|
20
|
-
border-color:
|
|
49
|
+
.editor-dark[data-v-11d1913a] .w-e-text-container {
|
|
50
|
+
background-color: var(--c-editor-container-bg) !important;
|
|
51
|
+
border-color: var(--c-editor-container-border) !important;
|
|
21
52
|
}
|
|
22
|
-
.editor-dark[data-v-
|
|
23
|
-
background-color:
|
|
24
|
-
color:
|
|
53
|
+
.editor-dark[data-v-11d1913a] .w-e-text-container .w-e-text {
|
|
54
|
+
background-color: var(--c-editor-text-bg) !important;
|
|
55
|
+
color: var(--c-editor-text-color) !important;
|
|
25
56
|
}
|
|
26
|
-
.editor-dark[data-v-
|
|
27
|
-
background-color:
|
|
28
|
-
color:
|
|
57
|
+
.editor-dark[data-v-11d1913a] .w-e-text-container .w-e-text:focus {
|
|
58
|
+
background-color: var(--c-editor-text-focus-bg) !important;
|
|
59
|
+
color: var(--c-editor-text-focus-color) !important;
|
|
29
60
|
}
|
|
30
|
-
[data-v-
|
|
61
|
+
[data-v-11d1913a] .w-e-toolbar,[data-v-11d1913a] .w-e-text-container {
|
|
31
62
|
max-width: 100% !important;
|
|
32
63
|
overflow-x: auto !important;
|
|
33
64
|
box-sizing: border-box !important;
|
|
34
65
|
}
|
|
35
|
-
[data-v-
|
|
66
|
+
[data-v-11d1913a] .w-e-text {
|
|
36
67
|
max-width: 100% !important;
|
|
37
68
|
word-wrap: break-word !important;
|
|
38
69
|
overflow-wrap: break-word !important;
|
|
39
70
|
}
|
|
40
|
-
[data-v-
|
|
71
|
+
[data-v-11d1913a] .w-e-toolbar,[data-v-11d1913a] .w-e-text-container,[data-v-11d1913a] .w-e-text {
|
|
41
72
|
transition:
|
|
42
|
-
background-color
|
|
43
|
-
border-color
|
|
44
|
-
color
|
|
73
|
+
background-color var(--c-editor-transition-duration) ease,
|
|
74
|
+
border-color var(--c-editor-transition-duration) ease,
|
|
75
|
+
color var(--c-editor-transition-duration) ease !important;
|
|
45
76
|
}
|
|
46
|
-
.editor-focused[data-v-
|
|
77
|
+
.editor-focused[data-v-11d1913a] {
|
|
47
78
|
overflow: hidden !important;
|
|
48
79
|
max-width: 100% !important;
|
|
49
80
|
}
|
|
50
81
|
|
|
51
82
|
|
|
52
|
-
/*# sourceMappingURL=C_Editor-
|
|
83
|
+
/*# sourceMappingURL=C_Editor-C49qURgb.css.map*/
|
package/dist/C_Editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Editor.js","names":["editorId"],"sources":["../src/components/C_Editor/index.vue","../src/components/C_Editor/index.vue","../src/components/C_Editor/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 富文本编辑器组件(简化主题版)\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"editorContainer\"\r\n :id=\"editorId\"\r\n v-show=\"isInitialized\"\r\n class=\"w-full\"\r\n :class=\"{ 'editor-dark': isDark }\"\r\n @focusin=\"handleEditorFocus\"\r\n @focusout=\"handleEditorBlur\"\r\n ></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n ref,\r\n computed,\r\n watch,\r\n nextTick,\r\n onMounted,\r\n onBeforeUnmount,\r\n readonly,\r\n} from \"vue\";\r\nimport E from \"wangeditor\";\r\n\r\ndefineOptions({ name: \"C_Editor\" });\r\n\r\ninterface Props {\r\n editorId: string;\r\n modelValue?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n height?: number;\r\n theme?: \"light\" | \"dark\";\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:modelValue\", value: string): void;\r\n (e: \"editor-mounted\", editor: any): void;\r\n (e: \"editor-change\", html: string): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n modelValue: \"\",\r\n placeholder: \"\",\r\n disabled: false,\r\n readonly: false,\r\n height: 240,\r\n theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst editorContainer = ref<HTMLElement | null>(null);\r\nconst editorInstance = ref<any>(null);\r\nconst isInitialized = ref<boolean>(false);\r\n\r\nconst isDark = computed(() => props.theme === \"dark\");\r\n\r\nconst initializeEditor = (): void => {\r\n if (!editorContainer.value || isInitialized.value) return;\r\n\r\n try {\r\n const editor = new E(editorContainer.value);\r\n const editorConfig = editor.config as any;\r\n editorConfig.placeholder = props.placeholder;\r\n editorConfig.height = props.height - 50;\r\n\r\n editorConfig.onchange = (html: string) => {\r\n emit(\"update:modelValue\", html);\r\n emit(\"editor-change\", html);\r\n };\r\n\r\n editor.create();\r\n\r\n nextTick(() => {\r\n if (props.modelValue) {\r\n editor.txt.html(props.modelValue);\r\n }\r\n if (props.readonly) {\r\n editor.disable();\r\n }\r\n editorInstance.value = editor;\r\n isInitialized.value = true;\r\n emit(\"editor-mounted\", editor);\r\n });\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器初始化失败: ${props.editorId}`, error);\r\n }\r\n};\r\n\r\nconst destroyEditor = (): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.destroy();\r\n editorInstance.value = null;\r\n isInitialized.value = false;\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器销毁失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst setContent = (html: string): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.txt.html(html);\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器内容失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst getContent = (): string => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n return editorInstance.value.txt.html();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 获取编辑器内容失败: ${props.editorId}`, error);\r\n return \"\";\r\n }\r\n }\r\n return \"\";\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (newValue) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n const currentContent = editorInstance.value.txt.html();\r\n if (currentContent !== newValue) {\r\n editorInstance.value.txt.html(newValue || \"\");\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.disabled,\r\n (disabled) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (disabled) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.readonly,\r\n (readonlyVal) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (readonlyVal) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器只读状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nconst handleEditorFocus = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.add(\"editor-focused\");\r\n const containerWidth = container.scrollWidth;\r\n container.style.maxWidth = `${containerWidth}px`;\r\n }\r\n};\r\n\r\nconst handleEditorBlur = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.remove(\"editor-focused\");\r\n container.style.maxWidth = \"\";\r\n }\r\n};\r\n\r\nonMounted(() => {\r\n nextTick(() => {\r\n initializeEditor();\r\n });\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n destroyEditor();\r\n});\r\n\r\ndefineExpose({\r\n initializeEditor,\r\n destroyEditor,\r\n setContent,\r\n getContent,\r\n handleEditorFocus,\r\n handleEditorBlur,\r\n editorInstance: readonly(editorInstance),\r\n isInitialized: readonly(isInitialized),\r\n});\r\n</script>\r\n\r\n<style scoped>\r\n/* 暗色主题样式 */\r\n.editor-dark :deep(.w-e-toolbar) {\r\n background-color: #1f2937 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item) {\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item:hover) {\r\n background-color: #374151 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active) {\r\n background-color: #2080f0 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container) {\r\n background-color: #111827 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text) {\r\n background-color: #303033 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text:focus) {\r\n background-color: #111827 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container) {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n:deep(.w-e-text) {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container),\r\n:deep(.w-e-text) {\r\n transition:\r\n background-color 0.3s ease,\r\n border-color 0.3s ease,\r\n color 0.3s ease !important;\r\n}\r\n\r\n.editor-focused {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\r\n}\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 富文本编辑器组件(简化主题版)\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"editorContainer\"\r\n :id=\"editorId\"\r\n v-show=\"isInitialized\"\r\n class=\"w-full\"\r\n :class=\"{ 'editor-dark': isDark }\"\r\n @focusin=\"handleEditorFocus\"\r\n @focusout=\"handleEditorBlur\"\r\n ></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n ref,\r\n computed,\r\n watch,\r\n nextTick,\r\n onMounted,\r\n onBeforeUnmount,\r\n readonly,\r\n} from \"vue\";\r\nimport E from \"wangeditor\";\r\n\r\ndefineOptions({ name: \"C_Editor\" });\r\n\r\ninterface Props {\r\n editorId: string;\r\n modelValue?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n height?: number;\r\n theme?: \"light\" | \"dark\";\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:modelValue\", value: string): void;\r\n (e: \"editor-mounted\", editor: any): void;\r\n (e: \"editor-change\", html: string): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n modelValue: \"\",\r\n placeholder: \"\",\r\n disabled: false,\r\n readonly: false,\r\n height: 240,\r\n theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst editorContainer = ref<HTMLElement | null>(null);\r\nconst editorInstance = ref<any>(null);\r\nconst isInitialized = ref<boolean>(false);\r\n\r\nconst isDark = computed(() => props.theme === \"dark\");\r\n\r\nconst initializeEditor = (): void => {\r\n if (!editorContainer.value || isInitialized.value) return;\r\n\r\n try {\r\n const editor = new E(editorContainer.value);\r\n const editorConfig = editor.config as any;\r\n editorConfig.placeholder = props.placeholder;\r\n editorConfig.height = props.height - 50;\r\n\r\n editorConfig.onchange = (html: string) => {\r\n emit(\"update:modelValue\", html);\r\n emit(\"editor-change\", html);\r\n };\r\n\r\n editor.create();\r\n\r\n nextTick(() => {\r\n if (props.modelValue) {\r\n editor.txt.html(props.modelValue);\r\n }\r\n if (props.readonly) {\r\n editor.disable();\r\n }\r\n editorInstance.value = editor;\r\n isInitialized.value = true;\r\n emit(\"editor-mounted\", editor);\r\n });\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器初始化失败: ${props.editorId}`, error);\r\n }\r\n};\r\n\r\nconst destroyEditor = (): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.destroy();\r\n editorInstance.value = null;\r\n isInitialized.value = false;\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器销毁失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst setContent = (html: string): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.txt.html(html);\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器内容失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst getContent = (): string => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n return editorInstance.value.txt.html();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 获取编辑器内容失败: ${props.editorId}`, error);\r\n return \"\";\r\n }\r\n }\r\n return \"\";\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (newValue) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n const currentContent = editorInstance.value.txt.html();\r\n if (currentContent !== newValue) {\r\n editorInstance.value.txt.html(newValue || \"\");\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.disabled,\r\n (disabled) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (disabled) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.readonly,\r\n (readonlyVal) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (readonlyVal) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器只读状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nconst handleEditorFocus = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.add(\"editor-focused\");\r\n const containerWidth = container.scrollWidth;\r\n container.style.maxWidth = `${containerWidth}px`;\r\n }\r\n};\r\n\r\nconst handleEditorBlur = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.remove(\"editor-focused\");\r\n container.style.maxWidth = \"\";\r\n }\r\n};\r\n\r\nonMounted(() => {\r\n nextTick(() => {\r\n initializeEditor();\r\n });\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n destroyEditor();\r\n});\r\n\r\ndefineExpose({\r\n initializeEditor,\r\n destroyEditor,\r\n setContent,\r\n getContent,\r\n handleEditorFocus,\r\n handleEditorBlur,\r\n editorInstance: readonly(editorInstance),\r\n isInitialized: readonly(isInitialized),\r\n});\r\n</script>\r\n\r\n<style scoped>\r\n/* 暗色主题样式 */\r\n.editor-dark :deep(.w-e-toolbar) {\r\n background-color: #1f2937 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item) {\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item:hover) {\r\n background-color: #374151 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active) {\r\n background-color: #2080f0 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container) {\r\n background-color: #111827 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text) {\r\n background-color: #303033 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text:focus) {\r\n background-color: #111827 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container) {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n:deep(.w-e-text) {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container),\r\n:deep(.w-e-text) {\r\n transition:\r\n background-color 0.3s ease,\r\n border-color 0.3s ease,\r\n color 0.3s ease !important;\r\n}\r\n\r\n.editor-focused {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\r\n}\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 富文本编辑器组件(简化主题版)\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"editorContainer\"\r\n :id=\"editorId\"\r\n v-show=\"isInitialized\"\r\n class=\"w-full\"\r\n :class=\"{ 'editor-dark': isDark }\"\r\n @focusin=\"handleEditorFocus\"\r\n @focusout=\"handleEditorBlur\"\r\n ></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n ref,\r\n computed,\r\n watch,\r\n nextTick,\r\n onMounted,\r\n onBeforeUnmount,\r\n readonly,\r\n} from \"vue\";\r\nimport E from \"wangeditor\";\r\n\r\ndefineOptions({ name: \"C_Editor\" });\r\n\r\ninterface Props {\r\n editorId: string;\r\n modelValue?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n height?: number;\r\n theme?: \"light\" | \"dark\";\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:modelValue\", value: string): void;\r\n (e: \"editor-mounted\", editor: any): void;\r\n (e: \"editor-change\", html: string): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n modelValue: \"\",\r\n placeholder: \"\",\r\n disabled: false,\r\n readonly: false,\r\n height: 240,\r\n theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst editorContainer = ref<HTMLElement | null>(null);\r\nconst editorInstance = ref<any>(null);\r\nconst isInitialized = ref<boolean>(false);\r\n\r\nconst isDark = computed(() => props.theme === \"dark\");\r\n\r\nconst initializeEditor = (): void => {\r\n if (!editorContainer.value || isInitialized.value) return;\r\n\r\n try {\r\n const editor = new E(editorContainer.value);\r\n const editorConfig = editor.config as any;\r\n editorConfig.placeholder = props.placeholder;\r\n editorConfig.height = props.height - 50;\r\n\r\n editorConfig.onchange = (html: string) => {\r\n emit(\"update:modelValue\", html);\r\n emit(\"editor-change\", html);\r\n };\r\n\r\n editor.create();\r\n\r\n nextTick(() => {\r\n if (props.modelValue) {\r\n editor.txt.html(props.modelValue);\r\n }\r\n if (props.readonly) {\r\n editor.disable();\r\n }\r\n editorInstance.value = editor;\r\n isInitialized.value = true;\r\n emit(\"editor-mounted\", editor);\r\n });\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器初始化失败: ${props.editorId}`, error);\r\n }\r\n};\r\n\r\nconst destroyEditor = (): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.destroy();\r\n editorInstance.value = null;\r\n isInitialized.value = false;\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器销毁失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst setContent = (html: string): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.txt.html(html);\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器内容失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst getContent = (): string => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n return editorInstance.value.txt.html();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 获取编辑器内容失败: ${props.editorId}`, error);\r\n return \"\";\r\n }\r\n }\r\n return \"\";\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (newValue) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n const currentContent = editorInstance.value.txt.html();\r\n if (currentContent !== newValue) {\r\n editorInstance.value.txt.html(newValue || \"\");\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.disabled,\r\n (disabled) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (disabled) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.readonly,\r\n (readonlyVal) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (readonlyVal) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器只读状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nconst handleEditorFocus = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.add(\"editor-focused\");\r\n const containerWidth = container.scrollWidth;\r\n container.style.maxWidth = `${containerWidth}px`;\r\n }\r\n};\r\n\r\nconst handleEditorBlur = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.remove(\"editor-focused\");\r\n container.style.maxWidth = \"\";\r\n }\r\n};\r\n\r\nonMounted(() => {\r\n nextTick(() => {\r\n initializeEditor();\r\n });\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n destroyEditor();\r\n});\r\n\r\ndefineExpose({\r\n initializeEditor,\r\n destroyEditor,\r\n setContent,\r\n getContent,\r\n handleEditorFocus,\r\n handleEditorBlur,\r\n editorInstance: readonly(editorInstance),\r\n isInitialized: readonly(isInitialized),\r\n});\r\n</script>\r\n\r\n<style scoped>\r\n/* 暗色主题样式 */\r\n.editor-dark :deep(.w-e-toolbar) {\r\n background-color: #1f2937 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item) {\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item:hover) {\r\n background-color: #374151 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active) {\r\n background-color: #2080f0 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container) {\r\n background-color: #111827 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text) {\r\n background-color: #303033 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text:focus) {\r\n background-color: #111827 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container) {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n:deep(.w-e-text) {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container),\r\n:deep(.w-e-text) {\r\n transition:\r\n background-color 0.3s ease,\r\n border-color 0.3s ease,\r\n color 0.3s ease !important;\r\n}\r\n\r\n.editor-focused {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\r\n}\r\n</style>\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"C_Editor.js","names":["editorId"],"sources":["../src/components/C_Editor/index.vue","../src/components/C_Editor/index.vue","../src/components/C_Editor/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 富文本编辑器组件(简化主题版)\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"editorContainer\"\r\n :id=\"editorId\"\r\n v-show=\"isInitialized\"\r\n class=\"w-full\"\r\n :class=\"{ 'editor-dark': isDark }\"\r\n @focusin=\"handleEditorFocus\"\r\n @focusout=\"handleEditorBlur\"\r\n ></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n ref,\r\n computed,\r\n watch,\r\n nextTick,\r\n onMounted,\r\n onBeforeUnmount,\r\n readonly,\r\n} from \"vue\";\r\nimport E from \"wangeditor\";\r\n\r\ndefineOptions({ name: \"C_Editor\" });\r\n\r\ninterface Props {\r\n editorId: string;\r\n modelValue?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n height?: number;\r\n theme?: \"light\" | \"dark\";\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:modelValue\", value: string): void;\r\n (e: \"editor-mounted\", editor: any): void;\r\n (e: \"editor-change\", html: string): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n modelValue: \"\",\r\n placeholder: \"\",\r\n disabled: false,\r\n readonly: false,\r\n height: 240,\r\n theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst editorContainer = ref<HTMLElement | null>(null);\r\nconst editorInstance = ref<any>(null);\r\nconst isInitialized = ref<boolean>(false);\r\n\r\nconst isDark = computed(() => props.theme === \"dark\");\r\n\r\nconst initializeEditor = (): void => {\r\n if (!editorContainer.value || isInitialized.value) return;\r\n\r\n try {\r\n const editor = new E(editorContainer.value);\r\n const editorConfig = editor.config as any;\r\n editorConfig.placeholder = props.placeholder;\r\n editorConfig.height = props.height - 50;\r\n\r\n editorConfig.onchange = (html: string) => {\r\n emit(\"update:modelValue\", html);\r\n emit(\"editor-change\", html);\r\n };\r\n\r\n editor.create();\r\n\r\n nextTick(() => {\r\n if (props.modelValue) {\r\n editor.txt.html(props.modelValue);\r\n }\r\n if (props.readonly) {\r\n editor.disable();\r\n }\r\n editorInstance.value = editor;\r\n isInitialized.value = true;\r\n emit(\"editor-mounted\", editor);\r\n });\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器初始化失败: ${props.editorId}`, error);\r\n }\r\n};\r\n\r\nconst destroyEditor = (): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.destroy();\r\n editorInstance.value = null;\r\n isInitialized.value = false;\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器销毁失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst setContent = (html: string): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.txt.html(html);\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器内容失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst getContent = (): string => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n return editorInstance.value.txt.html();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 获取编辑器内容失败: ${props.editorId}`, error);\r\n return \"\";\r\n }\r\n }\r\n return \"\";\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (newValue) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n const currentContent = editorInstance.value.txt.html();\r\n if (currentContent !== newValue) {\r\n editorInstance.value.txt.html(newValue || \"\");\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.disabled,\r\n (disabled) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (disabled) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.readonly,\r\n (readonlyVal) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (readonlyVal) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器只读状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nconst handleEditorFocus = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.add(\"editor-focused\");\r\n const containerWidth = container.scrollWidth;\r\n container.style.maxWidth = `${containerWidth}px`;\r\n }\r\n};\r\n\r\nconst handleEditorBlur = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.remove(\"editor-focused\");\r\n container.style.maxWidth = \"\";\r\n }\r\n};\r\n\r\nonMounted(() => {\r\n nextTick(() => {\r\n initializeEditor();\r\n });\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n destroyEditor();\r\n});\r\n\r\ndefineExpose({\r\n initializeEditor,\r\n destroyEditor,\r\n setContent,\r\n getContent,\r\n handleEditorFocus,\r\n handleEditorBlur,\r\n editorInstance: readonly(editorInstance),\r\n isInitialized: readonly(isInitialized),\r\n});\r\n</script>\r\n\r\n<style scoped>\r\n/* CSS 变量 — 支持外部主题覆盖 */\r\n:root {\r\n --c-editor-toolbar-bg: #ffffff;\r\n --c-editor-toolbar-border: #e5e7eb;\r\n --c-editor-menu-color: #333333;\r\n --c-editor-menu-hover-bg: #f3f4f6;\r\n --c-editor-menu-hover-color: #333333;\r\n --c-editor-menu-active-bg: var(--c-primary, #2080f0);\r\n --c-editor-menu-active-color: #ffffff;\r\n --c-editor-container-bg: #ffffff;\r\n --c-editor-container-border: #e5e7eb;\r\n --c-editor-text-bg: #ffffff;\r\n --c-editor-text-color: #333333;\r\n --c-editor-text-focus-bg: #ffffff;\r\n --c-editor-text-focus-color: #333333;\r\n --c-editor-transition-duration: 0.3s;\r\n}\r\n\r\n/* 暗色主题 — 覆盖 CSS 变量 */\r\n.editor-dark {\r\n --c-editor-toolbar-bg: #1f2937;\r\n --c-editor-toolbar-border: #374151;\r\n --c-editor-menu-color: #e5e7eb;\r\n --c-editor-menu-hover-bg: #374151;\r\n --c-editor-menu-hover-color: #ffffff;\r\n --c-editor-container-bg: #111827;\r\n --c-editor-container-border: #374151;\r\n --c-editor-text-bg: #303033;\r\n --c-editor-text-color: #e5e7eb;\r\n --c-editor-text-focus-bg: #111827;\r\n --c-editor-text-focus-color: #e5e7eb;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar) {\r\n background-color: var(--c-editor-toolbar-bg) !important;\r\n border-color: var(--c-editor-toolbar-border) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item) {\r\n color: var(--c-editor-menu-color) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item:hover) {\r\n background-color: var(--c-editor-menu-hover-bg) !important;\r\n color: var(--c-editor-menu-hover-color) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active) {\r\n background-color: var(--c-editor-menu-active-bg) !important;\r\n color: var(--c-editor-menu-active-color) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container) {\r\n background-color: var(--c-editor-container-bg) !important;\r\n border-color: var(--c-editor-container-border) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text) {\r\n background-color: var(--c-editor-text-bg) !important;\r\n color: var(--c-editor-text-color) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text:focus) {\r\n background-color: var(--c-editor-text-focus-bg) !important;\r\n color: var(--c-editor-text-focus-color) !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container) {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n:deep(.w-e-text) {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container),\r\n:deep(.w-e-text) {\r\n transition:\r\n background-color var(--c-editor-transition-duration) ease,\r\n border-color var(--c-editor-transition-duration) ease,\r\n color var(--c-editor-transition-duration) ease !important;\r\n}\r\n\r\n.editor-focused {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\r\n}\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 富文本编辑器组件(简化主题版)\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"editorContainer\"\r\n :id=\"editorId\"\r\n v-show=\"isInitialized\"\r\n class=\"w-full\"\r\n :class=\"{ 'editor-dark': isDark }\"\r\n @focusin=\"handleEditorFocus\"\r\n @focusout=\"handleEditorBlur\"\r\n ></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n ref,\r\n computed,\r\n watch,\r\n nextTick,\r\n onMounted,\r\n onBeforeUnmount,\r\n readonly,\r\n} from \"vue\";\r\nimport E from \"wangeditor\";\r\n\r\ndefineOptions({ name: \"C_Editor\" });\r\n\r\ninterface Props {\r\n editorId: string;\r\n modelValue?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n height?: number;\r\n theme?: \"light\" | \"dark\";\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:modelValue\", value: string): void;\r\n (e: \"editor-mounted\", editor: any): void;\r\n (e: \"editor-change\", html: string): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n modelValue: \"\",\r\n placeholder: \"\",\r\n disabled: false,\r\n readonly: false,\r\n height: 240,\r\n theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst editorContainer = ref<HTMLElement | null>(null);\r\nconst editorInstance = ref<any>(null);\r\nconst isInitialized = ref<boolean>(false);\r\n\r\nconst isDark = computed(() => props.theme === \"dark\");\r\n\r\nconst initializeEditor = (): void => {\r\n if (!editorContainer.value || isInitialized.value) return;\r\n\r\n try {\r\n const editor = new E(editorContainer.value);\r\n const editorConfig = editor.config as any;\r\n editorConfig.placeholder = props.placeholder;\r\n editorConfig.height = props.height - 50;\r\n\r\n editorConfig.onchange = (html: string) => {\r\n emit(\"update:modelValue\", html);\r\n emit(\"editor-change\", html);\r\n };\r\n\r\n editor.create();\r\n\r\n nextTick(() => {\r\n if (props.modelValue) {\r\n editor.txt.html(props.modelValue);\r\n }\r\n if (props.readonly) {\r\n editor.disable();\r\n }\r\n editorInstance.value = editor;\r\n isInitialized.value = true;\r\n emit(\"editor-mounted\", editor);\r\n });\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器初始化失败: ${props.editorId}`, error);\r\n }\r\n};\r\n\r\nconst destroyEditor = (): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.destroy();\r\n editorInstance.value = null;\r\n isInitialized.value = false;\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器销毁失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst setContent = (html: string): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.txt.html(html);\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器内容失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst getContent = (): string => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n return editorInstance.value.txt.html();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 获取编辑器内容失败: ${props.editorId}`, error);\r\n return \"\";\r\n }\r\n }\r\n return \"\";\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (newValue) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n const currentContent = editorInstance.value.txt.html();\r\n if (currentContent !== newValue) {\r\n editorInstance.value.txt.html(newValue || \"\");\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.disabled,\r\n (disabled) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (disabled) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.readonly,\r\n (readonlyVal) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (readonlyVal) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器只读状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nconst handleEditorFocus = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.add(\"editor-focused\");\r\n const containerWidth = container.scrollWidth;\r\n container.style.maxWidth = `${containerWidth}px`;\r\n }\r\n};\r\n\r\nconst handleEditorBlur = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.remove(\"editor-focused\");\r\n container.style.maxWidth = \"\";\r\n }\r\n};\r\n\r\nonMounted(() => {\r\n nextTick(() => {\r\n initializeEditor();\r\n });\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n destroyEditor();\r\n});\r\n\r\ndefineExpose({\r\n initializeEditor,\r\n destroyEditor,\r\n setContent,\r\n getContent,\r\n handleEditorFocus,\r\n handleEditorBlur,\r\n editorInstance: readonly(editorInstance),\r\n isInitialized: readonly(isInitialized),\r\n});\r\n</script>\r\n\r\n<style scoped>\r\n/* CSS 变量 — 支持外部主题覆盖 */\r\n:root {\r\n --c-editor-toolbar-bg: #ffffff;\r\n --c-editor-toolbar-border: #e5e7eb;\r\n --c-editor-menu-color: #333333;\r\n --c-editor-menu-hover-bg: #f3f4f6;\r\n --c-editor-menu-hover-color: #333333;\r\n --c-editor-menu-active-bg: var(--c-primary, #2080f0);\r\n --c-editor-menu-active-color: #ffffff;\r\n --c-editor-container-bg: #ffffff;\r\n --c-editor-container-border: #e5e7eb;\r\n --c-editor-text-bg: #ffffff;\r\n --c-editor-text-color: #333333;\r\n --c-editor-text-focus-bg: #ffffff;\r\n --c-editor-text-focus-color: #333333;\r\n --c-editor-transition-duration: 0.3s;\r\n}\r\n\r\n/* 暗色主题 — 覆盖 CSS 变量 */\r\n.editor-dark {\r\n --c-editor-toolbar-bg: #1f2937;\r\n --c-editor-toolbar-border: #374151;\r\n --c-editor-menu-color: #e5e7eb;\r\n --c-editor-menu-hover-bg: #374151;\r\n --c-editor-menu-hover-color: #ffffff;\r\n --c-editor-container-bg: #111827;\r\n --c-editor-container-border: #374151;\r\n --c-editor-text-bg: #303033;\r\n --c-editor-text-color: #e5e7eb;\r\n --c-editor-text-focus-bg: #111827;\r\n --c-editor-text-focus-color: #e5e7eb;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar) {\r\n background-color: var(--c-editor-toolbar-bg) !important;\r\n border-color: var(--c-editor-toolbar-border) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item) {\r\n color: var(--c-editor-menu-color) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item:hover) {\r\n background-color: var(--c-editor-menu-hover-bg) !important;\r\n color: var(--c-editor-menu-hover-color) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active) {\r\n background-color: var(--c-editor-menu-active-bg) !important;\r\n color: var(--c-editor-menu-active-color) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container) {\r\n background-color: var(--c-editor-container-bg) !important;\r\n border-color: var(--c-editor-container-border) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text) {\r\n background-color: var(--c-editor-text-bg) !important;\r\n color: var(--c-editor-text-color) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text:focus) {\r\n background-color: var(--c-editor-text-focus-bg) !important;\r\n color: var(--c-editor-text-focus-color) !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container) {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n:deep(.w-e-text) {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container),\r\n:deep(.w-e-text) {\r\n transition:\r\n background-color var(--c-editor-transition-duration) ease,\r\n border-color var(--c-editor-transition-duration) ease,\r\n color var(--c-editor-transition-duration) ease !important;\r\n}\r\n\r\n.editor-focused {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\r\n}\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 富文本编辑器组件(简化主题版)\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n ref=\"editorContainer\"\r\n :id=\"editorId\"\r\n v-show=\"isInitialized\"\r\n class=\"w-full\"\r\n :class=\"{ 'editor-dark': isDark }\"\r\n @focusin=\"handleEditorFocus\"\r\n @focusout=\"handleEditorBlur\"\r\n ></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n ref,\r\n computed,\r\n watch,\r\n nextTick,\r\n onMounted,\r\n onBeforeUnmount,\r\n readonly,\r\n} from \"vue\";\r\nimport E from \"wangeditor\";\r\n\r\ndefineOptions({ name: \"C_Editor\" });\r\n\r\ninterface Props {\r\n editorId: string;\r\n modelValue?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n height?: number;\r\n theme?: \"light\" | \"dark\";\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:modelValue\", value: string): void;\r\n (e: \"editor-mounted\", editor: any): void;\r\n (e: \"editor-change\", html: string): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n modelValue: \"\",\r\n placeholder: \"\",\r\n disabled: false,\r\n readonly: false,\r\n height: 240,\r\n theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst editorContainer = ref<HTMLElement | null>(null);\r\nconst editorInstance = ref<any>(null);\r\nconst isInitialized = ref<boolean>(false);\r\n\r\nconst isDark = computed(() => props.theme === \"dark\");\r\n\r\nconst initializeEditor = (): void => {\r\n if (!editorContainer.value || isInitialized.value) return;\r\n\r\n try {\r\n const editor = new E(editorContainer.value);\r\n const editorConfig = editor.config as any;\r\n editorConfig.placeholder = props.placeholder;\r\n editorConfig.height = props.height - 50;\r\n\r\n editorConfig.onchange = (html: string) => {\r\n emit(\"update:modelValue\", html);\r\n emit(\"editor-change\", html);\r\n };\r\n\r\n editor.create();\r\n\r\n nextTick(() => {\r\n if (props.modelValue) {\r\n editor.txt.html(props.modelValue);\r\n }\r\n if (props.readonly) {\r\n editor.disable();\r\n }\r\n editorInstance.value = editor;\r\n isInitialized.value = true;\r\n emit(\"editor-mounted\", editor);\r\n });\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器初始化失败: ${props.editorId}`, error);\r\n }\r\n};\r\n\r\nconst destroyEditor = (): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.destroy();\r\n editorInstance.value = null;\r\n isInitialized.value = false;\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器销毁失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst setContent = (html: string): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.txt.html(html);\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器内容失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst getContent = (): string => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n return editorInstance.value.txt.html();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 获取编辑器内容失败: ${props.editorId}`, error);\r\n return \"\";\r\n }\r\n }\r\n return \"\";\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (newValue) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n const currentContent = editorInstance.value.txt.html();\r\n if (currentContent !== newValue) {\r\n editorInstance.value.txt.html(newValue || \"\");\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.disabled,\r\n (disabled) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (disabled) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.readonly,\r\n (readonlyVal) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (readonlyVal) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器只读状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nconst handleEditorFocus = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.add(\"editor-focused\");\r\n const containerWidth = container.scrollWidth;\r\n container.style.maxWidth = `${containerWidth}px`;\r\n }\r\n};\r\n\r\nconst handleEditorBlur = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.remove(\"editor-focused\");\r\n container.style.maxWidth = \"\";\r\n }\r\n};\r\n\r\nonMounted(() => {\r\n nextTick(() => {\r\n initializeEditor();\r\n });\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n destroyEditor();\r\n});\r\n\r\ndefineExpose({\r\n initializeEditor,\r\n destroyEditor,\r\n setContent,\r\n getContent,\r\n handleEditorFocus,\r\n handleEditorBlur,\r\n editorInstance: readonly(editorInstance),\r\n isInitialized: readonly(isInitialized),\r\n});\r\n</script>\r\n\r\n<style scoped>\r\n/* CSS 变量 — 支持外部主题覆盖 */\r\n:root {\r\n --c-editor-toolbar-bg: #ffffff;\r\n --c-editor-toolbar-border: #e5e7eb;\r\n --c-editor-menu-color: #333333;\r\n --c-editor-menu-hover-bg: #f3f4f6;\r\n --c-editor-menu-hover-color: #333333;\r\n --c-editor-menu-active-bg: var(--c-primary, #2080f0);\r\n --c-editor-menu-active-color: #ffffff;\r\n --c-editor-container-bg: #ffffff;\r\n --c-editor-container-border: #e5e7eb;\r\n --c-editor-text-bg: #ffffff;\r\n --c-editor-text-color: #333333;\r\n --c-editor-text-focus-bg: #ffffff;\r\n --c-editor-text-focus-color: #333333;\r\n --c-editor-transition-duration: 0.3s;\r\n}\r\n\r\n/* 暗色主题 — 覆盖 CSS 变量 */\r\n.editor-dark {\r\n --c-editor-toolbar-bg: #1f2937;\r\n --c-editor-toolbar-border: #374151;\r\n --c-editor-menu-color: #e5e7eb;\r\n --c-editor-menu-hover-bg: #374151;\r\n --c-editor-menu-hover-color: #ffffff;\r\n --c-editor-container-bg: #111827;\r\n --c-editor-container-border: #374151;\r\n --c-editor-text-bg: #303033;\r\n --c-editor-text-color: #e5e7eb;\r\n --c-editor-text-focus-bg: #111827;\r\n --c-editor-text-focus-color: #e5e7eb;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar) {\r\n background-color: var(--c-editor-toolbar-bg) !important;\r\n border-color: var(--c-editor-toolbar-border) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item) {\r\n color: var(--c-editor-menu-color) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item:hover) {\r\n background-color: var(--c-editor-menu-hover-bg) !important;\r\n color: var(--c-editor-menu-hover-color) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active) {\r\n background-color: var(--c-editor-menu-active-bg) !important;\r\n color: var(--c-editor-menu-active-color) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container) {\r\n background-color: var(--c-editor-container-bg) !important;\r\n border-color: var(--c-editor-container-border) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text) {\r\n background-color: var(--c-editor-text-bg) !important;\r\n color: var(--c-editor-text-color) !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text:focus) {\r\n background-color: var(--c-editor-text-focus-bg) !important;\r\n color: var(--c-editor-text-focus-color) !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container) {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n:deep(.w-e-text) {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container),\r\n:deep(.w-e-text) {\r\n transition:\r\n background-color var(--c-editor-transition-duration) ease,\r\n border-color var(--c-editor-transition-duration) ease,\r\n color var(--c-editor-transition-duration) ease !important;\r\n}\r\n\r\n.editor-focused {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\r\n}\r\n</style>\r\n"],"mappings":"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"}
|
package/dist/C_Editor2.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{t as e}from"./export-helper.js";import{computed as t,createElementBlock as n,defineComponent as r,nextTick as i,normalizeClass as a,onBeforeUnmount as o,onMounted as s,openBlock as c,readonly as l,ref as u,vShow as d,watch as f,withDirectives as p}from"vue";import m from"wangeditor";const h=[`id`];var g=e(r({name:`C_Editor`,__name:`index`,props:{editorId:{},modelValue:{default:``},placeholder:{default:``},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},height:{default:240},theme:{default:`light`}},emits:[`update:modelValue`,`editor-mounted`,`editor-change`],setup(e,{expose:r,emit:g}){let _=e,v=g,y=u(null),b=u(null),x=u(!1),S=t(()=>_.theme===`dark`),C=()=>{if(!(!y.value||x.value))try{let e=new m(y.value),t=e.config;t.placeholder=_.placeholder,t.height=_.height-50,t.onchange=e=>{v(`update:modelValue`,e),v(`editor-change`,e)},e.create(),i(()=>{_.modelValue&&e.txt.html(_.modelValue),_.readonly&&e.disable(),b.value=e,x.value=!0,v(`editor-mounted`,e)})}catch(e){console.error(`[C_Editor] 编辑器初始化失败: ${_.editorId}`,e)}},w=()=>{if(b.value&&x.value)try{b.value.destroy(),b.value=null,x.value=!1}catch(e){console.error(`[C_Editor] 编辑器销毁失败: ${_.editorId}`,e)}},T=e=>{if(b.value&&x.value)try{b.value.txt.html(e)}catch(e){console.warn(`[C_Editor] 设置编辑器内容失败: ${_.editorId}`,e)}},E=()=>{if(b.value&&x.value)try{return b.value.txt.html()}catch(e){return console.warn(`[C_Editor] 获取编辑器内容失败: ${_.editorId}`,e),``}return``};f(()=>_.modelValue,e=>{b.value&&x.value&&b.value.txt.html()!==e&&b.value.txt.html(e||``)}),f(()=>_.disabled,e=>{if(b.value&&x.value)try{e?b.value.disable():b.value.enable()}catch(e){console.warn(`[C_Editor] 设置编辑器状态失败`,e)}}),f(()=>_.readonly,e=>{if(b.value&&x.value)try{e?b.value.disable():b.value.enable()}catch(e){console.warn(`[C_Editor] 设置编辑器只读状态失败`,e)}});let D=()=>{if(!y.value)return;let e=y.value.closest(`.form-demo`);if(e){e.classList.add(`editor-focused`);let t=e.scrollWidth;e.style.maxWidth=`${t}px`}},O=()=>{if(!y.value)return;let e=y.value.closest(`.form-demo`);e&&(e.classList.remove(`editor-focused`),e.style.maxWidth=``)};return s(()=>{i(()=>{C()})}),o(()=>{w()}),r({initializeEditor:C,destroyEditor:w,setContent:T,getContent:E,handleEditorFocus:D,handleEditorBlur:O,editorInstance:l(b),isInitialized:l(x)}),(e,t)=>p((c(),n(`div`,{ref_key:`editorContainer`,ref:y,id:e.editorId,class:a([`w-full`,{"editor-dark":S.value}]),onFocusin:D,onFocusout:O},null,42,h)),[[d,x.value]])}}),[[`__scopeId`,`data-v-
|
|
1
|
+
import{t as e}from"./export-helper.js";import{computed as t,createElementBlock as n,defineComponent as r,nextTick as i,normalizeClass as a,onBeforeUnmount as o,onMounted as s,openBlock as c,readonly as l,ref as u,vShow as d,watch as f,withDirectives as p}from"vue";import m from"wangeditor";const h=[`id`];var g=e(r({name:`C_Editor`,__name:`index`,props:{editorId:{},modelValue:{default:``},placeholder:{default:``},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},height:{default:240},theme:{default:`light`}},emits:[`update:modelValue`,`editor-mounted`,`editor-change`],setup(e,{expose:r,emit:g}){let _=e,v=g,y=u(null),b=u(null),x=u(!1),S=t(()=>_.theme===`dark`),C=()=>{if(!(!y.value||x.value))try{let e=new m(y.value),t=e.config;t.placeholder=_.placeholder,t.height=_.height-50,t.onchange=e=>{v(`update:modelValue`,e),v(`editor-change`,e)},e.create(),i(()=>{_.modelValue&&e.txt.html(_.modelValue),_.readonly&&e.disable(),b.value=e,x.value=!0,v(`editor-mounted`,e)})}catch(e){console.error(`[C_Editor] 编辑器初始化失败: ${_.editorId}`,e)}},w=()=>{if(b.value&&x.value)try{b.value.destroy(),b.value=null,x.value=!1}catch(e){console.error(`[C_Editor] 编辑器销毁失败: ${_.editorId}`,e)}},T=e=>{if(b.value&&x.value)try{b.value.txt.html(e)}catch(e){console.warn(`[C_Editor] 设置编辑器内容失败: ${_.editorId}`,e)}},E=()=>{if(b.value&&x.value)try{return b.value.txt.html()}catch(e){return console.warn(`[C_Editor] 获取编辑器内容失败: ${_.editorId}`,e),``}return``};f(()=>_.modelValue,e=>{b.value&&x.value&&b.value.txt.html()!==e&&b.value.txt.html(e||``)}),f(()=>_.disabled,e=>{if(b.value&&x.value)try{e?b.value.disable():b.value.enable()}catch(e){console.warn(`[C_Editor] 设置编辑器状态失败`,e)}}),f(()=>_.readonly,e=>{if(b.value&&x.value)try{e?b.value.disable():b.value.enable()}catch(e){console.warn(`[C_Editor] 设置编辑器只读状态失败`,e)}});let D=()=>{if(!y.value)return;let e=y.value.closest(`.form-demo`);if(e){e.classList.add(`editor-focused`);let t=e.scrollWidth;e.style.maxWidth=`${t}px`}},O=()=>{if(!y.value)return;let e=y.value.closest(`.form-demo`);e&&(e.classList.remove(`editor-focused`),e.style.maxWidth=``)};return s(()=>{i(()=>{C()})}),o(()=>{w()}),r({initializeEditor:C,destroyEditor:w,setContent:T,getContent:E,handleEditorFocus:D,handleEditorBlur:O,editorInstance:l(b),isInitialized:l(x)}),(e,t)=>p((c(),n(`div`,{ref_key:`editorContainer`,ref:y,id:e.editorId,class:a([`w-full`,{"editor-dark":S.value}]),onFocusin:D,onFocusout:O},null,42,h)),[[d,x.value]])}}),[[`__scopeId`,`data-v-11d1913a`]]);export{g as t};
|
|
2
2
|
//# sourceMappingURL=C_Editor2.js.map
|