2 lines
15 KiB
JavaScript
2 lines
15 KiB
JavaScript
import{o as ae,ba as re,M as T,R as de,q as v,r as V,s as t,v as l,D as a,u as m,cX as ue,w as ce,ae as E,L as _,T as f,F as pe,G as me,O as fe,at as L,P as O,b6 as be,I as _e,H as ge,b7 as ye,bc as we,bb as ve,cY as xe,J as ke,aw as z,b9 as Ve,co as Ee,cZ as Ce,K as he,c_ as Ae,c$ as R,t as Se,cA as Te,d0 as Oe,d1 as P,p as W,E as p}from"./.pnpm-BSw4l71J.js";import{B as We}from"./first_visit-D3BuRLUy.js";import{_ as Be}from"./index-B533BOtK.js";const Ue=["bubble","pill","card","message","edge","bar"],y=Object.freeze({v:1,enabled:!1,template:"bubble",position:"bottom-right",title:"专属顾问在线",subtitle:"点击添加企业微信，获取一对一服务",button_text:"立即咨询",primary_color:"#139A8C",bottom_offset:28,show_mobile:!0}),B=Object.freeze([{id:"bubble",name:"轻巧气泡",description:"圆形入口，占用空间最少",scene:"内容型页面"},{id:"pill",name:"行动胶囊",description:"图标与按钮文案同时露出",scene:"营销落地页"},{id:"card",name:"顾问名片",description:"完整呈现标题、说明与行动按钮",scene:"高意向咨询"},{id:"message",name:"消息提醒",description:"模拟新消息，视觉提醒更明确",scene:"活动推广页"},{id:"edge",name:"贴边咨询",description:"沿浏览器边缘停靠，干扰更低",scene:"工具与内容页"},{id:"bar",name:"底部咨询条",description:"宽幅行动区，移动端更醒目",scene:"移动端页面"}]),Ie=new Set(Ue),Ne=new Set(["bottom-right","bottom-left"]),$e=/^#[0-9A-F]{6}$/i;function De(n){if(n&&typeof n=="object"&&!Array.isArray(n))return n;if(typeof n!="string"||!n.trim())return{};try{const r=JSON.parse(n);return r&&typeof r=="object"&&!Array.isArray(r)?r:{}}catch{return{}}}function j(n,r){return n===!0||n===1||n==="1"||n==="true"?!0:n===!1||n===0||n==="0"||n==="false"?!1:r}function U(n,r,d){return n==null?r:Array.from(String(n).trim()).slice(0,d).join("")}function I(n){const r=De(n),d=String(r.template||""),A=String(r.position||""),o=String(r.primary_color||"").trim().toUpperCase(),b=Number(r.bottom_offset),x=Number.isFinite(b)?Math.min(160,Math.max(16,Math.round(b))):y.bottom_offset;return{v:1,enabled:j(r.enabled,y.enabled),template:Ie.has(d)?d:y.template,position:Ne.has(A)?A:y.position,title:U(r.title,y.title,24),subtitle:U(r.subtitle,y.subtitle,48),button_text:U(r.button_text,y.button_text,12),primary_color:$e.test(o)?o:y.primary_color,bottom_offset:x,show_mobile:j(r.show_mobile,y.show_mobile)}}function N(){return{...y}}const Fe={class:"widget-builder","aria-label":"企业微信浮窗客服配置"},Me={class:"builder-header"},Le={class:"builder-intro"},ze={class:"builder-icon"},Re={class:"publish-state"},Pe={class:"builder-layout"},je={class:"builder-controls"},Ge={class:"control-section template-section"},He={class:"template-grid",role:"radiogroup","aria-label":"浮窗客服模板"},Je=["aria-checked","onClick","onKeydown"],Ke={class:"template-copy"},qe={class:"control-section config-section"},Xe={class:"control-heading"},Ye={key:0,class:"dirty-state"},Ze={class:"form-grid"},Qe={class:"switch-control"},et={class:"switch-control"},tt={class:"color-control"},ot={class:"offset-control"},lt={class:"form-actions"},st={class:"action-note"},nt={class:"action-buttons"},it={class:"preview-panel","aria-label":"浮窗实时预览"},at={class:"preview-header"},rt={key:0,class:"mobile-hidden-note"},dt=["aria-label"],ut={class:"widget-copy"},ct={class:"widget-title"},pt={key:0,class:"widget-subtitle"},mt={class:"widget-cta"},ft={class:"install-section"},bt={class:"install-heading"},_t={class:"code-grid"},gt={class:"code-card"},yt={class:"code-card"},wt={class:"install-tip"},vt=ae({__name:"WecomFloatingWidgetBuilder",props:{pool:{}},emits:["saved"],setup(n,{emit:r}){const d=n,A=r,o=re(N()),b=T(N()),x=T("desktop"),S=T(!1),G=["#139A8C","#168C74","#2878D0","#C76A2B","#BA4E68","#43546A"],H=W(()=>({"--widget-primary":o.primary_color,"--widget-bottom":`${o.bottom_offset}px`})),J=W(()=>JSON.stringify(o)!==JSON.stringify(b.value)),K=W(()=>o.enabled?b.value.enabled?"保存更新":"保存并启用":b.value.enabled?"保存并停用":"保存配置");function q(){return d.pool.widget_config??d.pool.widget??d.pool.widgetConfig}function X(){const i=I(q());Object.assign(o,i),b.value={...i}}de(()=>[d.pool.id,d.pool.widget_config,d.pool.widget,d.pool.widgetConfig],X,{immediate:!0,deep:!0});function Y(i,e){if(!["ArrowRight","ArrowDown","ArrowLeft","ArrowUp","Home","End"].includes(i.key))return;i.preventDefault();const g=B.length-1;let c=e;(i.key==="ArrowRight"||i.key==="ArrowDown")&&(c=e===g?0:e+1),(i.key==="ArrowLeft"||i.key==="ArrowUp")&&(c=e===0?g:e-1),i.key==="Home"&&(c=0),i.key==="End"&&(c=g),o.template=B[c].id;const C=i.currentTarget.closest(".template-grid"),w=C==null?void 0:C.querySelectorAll(".template-option");window.requestAnimationFrame(()=>{var k;return(k=w==null?void 0:w[c])==null?void 0:k.focus()})}function Z(){o.primary_color=I({...o,primary_color:typeof o.primary_color=="string"?o.primary_color:""}).primary_color}function Q(){Object.assign(o,N()),p.info("已恢复默认配置，保存后生效")}function ee(){if(!o.title.trim())return p.warning("请输入浮窗标题"),!1;if(!o.button_text.trim())return p.warning("请输入按钮文字"),!1;const i=typeof o.primary_color=="string"?o.primary_color.trim():"";return/^#[0-9A-F]{6}$/i.test(i)?!0:(p.warning("主题色请输入 #RRGGBB 格式"),!1)}async function te(){if(!ee())return;const i=b.value.enabled,e=o.enabled,u=I({...o,enabled:e});S.value=!0;try{await We({pool_id:Number(d.pool.id),...u}),Object.assign(o,u),b.value={...u},!e&&i?p.success("浮窗已停用，最多 60 秒生效"):e?i?p.success("浮窗配置已保存，最多 60 秒生效"):p.success("浮窗已启用，最多 60 秒生效"):p.success("浮窗配置已保存，当前保持未启用"),A("saved",u)}catch(g){p.error((g==null?void 0:g.message)||"浮窗配置保存失败")}finally{S.value=!1}}function $(i){const e=document.createElement("textarea");e.value=i,e.setAttribute("readonly",""),e.style.position="fixed",e.style.left="-9999px",e.style.opacity="0",document.body.appendChild(e);try{if(e.focus(),e.select(),!document.execCommand("copy"))throw new Error("copy command failed")}finally{e.remove()}}async function D(i,e){var u;if(!i){p.warning(`${e}暂无内容`);return}try{if(window.isSecureContext&&((u=navigator.clipboard)!=null&&u.writeText))try{await navigator.clipboard.writeText(i)}catch{$(i)}else $(i);p.success(`${e}已复制`)}catch{p.error(`${e}复制失败，请手动选择代码复制`)}}function oe(){const i=d.pool.main_url||d.pool.go_url||d.pool.compat_go_url;if(!i){p.warning("当前方案暂无测试链接");return}window.open(i,"_blank","noopener,noreferrer")}return(i,e)=>{const u=ce,g=_e,c=be,C=ge,w=ye,k=ve,F=we,le=xe,se=ke,ne=Ve,h=he;return v(),V("section",Fe,[t("header",Me,[t("div",Le,[t("span",ze,[l(u,null,{default:a(()=>[l(m(ue))]),_:1})]),e[15]||(e[15]=t("div",null,[t("h3",null,"浮窗客服模板"),t("p",null,"选择模板并调整内容，保存后基础脚本会自动在推广页展示浮窗。")],-1))]),t("div",Re,[t("span",{class:E(["state-badge",b.value.enabled?"is-enabled":"is-disabled"])},[e[16]||(e[16]=t("i",{"aria-hidden":"true"},null,-1)),_(f(b.value.enabled?"已启用":"未启用"),1)],2),e[17]||(e[17]=t("small",null,"配置保存后最多 60 秒生效",-1))])]),t("div",Pe,[t("div",je,[t("section",Ge,[e[19]||(e[19]=t("div",{class:"control-heading"},[t("div",null,[t("span",{class:"section-index"},"01"),t("h4",null,"选择展示模板")]),t("span",null,"支持方向键切换")],-1)),t("div",He,[(v(!0),V(pe,null,me(m(B),(s,ie)=>(v(),V("button",{key:s.id,type:"button",class:E(["template-option",{active:o.template===s.id}]),role:"radio","aria-checked":o.template===s.id,onClick:M=>o.template=s.id,onKeydown:M=>Y(M,ie)},[t("span",{class:E(["template-swatch",`is-${s.id}`]),"aria-hidden":"true"},[...e[18]||(e[18]=[t("i",{class:"swatch-icon"},null,-1),t("i",{class:"swatch-line is-long"},null,-1),t("i",{class:"swatch-line is-short"},null,-1),t("i",{class:"swatch-action"},null,-1)])],2),t("span",Ke,[t("strong",null,f(s.name),1),t("small",null,f(s.description),1),t("em",null,f(s.scene),1)]),o.template===s.id?(v(),fe(u,{key:0,class:"selected-check"},{default:a(()=>[l(m(L))]),_:1})):O("",!0)],42,Je))),128))])]),t("section",qe,[t("div",Xe,[e[20]||(e[20]=t("div",null,[t("span",{class:"section-index"},"02"),t("h4",null,"调整浮窗内容")],-1)),J.value?(v(),V("span",Ye,"有未保存更改")):O("",!0)]),l(ne,{class:"widget-form","label-position":"top",onSubmit:e[10]||(e[10]=z(()=>{},["prevent"]))},{default:a(()=>[t("div",Ze,[l(c,{label:"显示浮窗"},{default:a(()=>[t("div",Qe,[l(g,{modelValue:o.enabled,"onUpdate:modelValue":e[0]||(e[0]=s=>o.enabled=s),"active-text":"显示","inactive-text":"隐藏"},null,8,["modelValue"]),e[21]||(e[21]=t("small",null,"保存后应用到推广页",-1))])]),_:1}),l(c,{label:"移动端展示"},{default:a(()=>[t("div",et,[l(g,{modelValue:o.show_mobile,"onUpdate:modelValue":e[1]||(e[1]=s=>o.show_mobile=s),"active-text":"展示","inactive-text":"隐藏"},null,8,["modelValue"]),e[22]||(e[22]=t("small",null,"关闭后仅在桌面端出现",-1))])]),_:1}),l(c,{label:"主题色"},{default:a(()=>[t("div",tt,[l(C,{modelValue:o.primary_color,"onUpdate:modelValue":e[2]||(e[2]=s=>o.primary_color=s),predefine:G},null,8,["modelValue"]),l(w,{modelValue:o.primary_color,"onUpdate:modelValue":e[3]||(e[3]=s=>o.primary_color=s),maxlength:"7","aria-label":"主题色十六进制值",onBlur:Z},null,8,["modelValue"])])]),_:1}),l(c,{label:"左右位置"},{default:a(()=>[l(F,{modelValue:o.position,"onUpdate:modelValue":e[4]||(e[4]=s=>o.position=s),class:"position-control"},{default:a(()=>[l(k,{value:"bottom-left"},{default:a(()=>[...e[23]||(e[23]=[_("左下角",-1)])]),_:1}),l(k,{value:"bottom-right"},{default:a(()=>[...e[24]||(e[24]=[_("右下角",-1)])]),_:1})]),_:1},8,["modelValue"])]),_:1}),l(c,{label:"距底距离",class:"is-wide"},{default:a(()=>[t("div",ot,[l(le,{modelValue:o.bottom_offset,"onUpdate:modelValue":e[5]||(e[5]=s=>o.bottom_offset=s),min:16,max:160,step:4},null,8,["modelValue"]),l(se,{modelValue:o.bottom_offset,"onUpdate:modelValue":e[6]||(e[6]=s=>o.bottom_offset=s),min:16,max:160,step:4,"controls-position":"right","aria-label":"距底距离，单位像素"},null,8,["modelValue"]),e[25]||(e[25]=t("span",null,"px",-1))])]),_:1}),l(c,{label:"标题",class:"is-wide"},{default:a(()=>[l(w,{modelValue:o.title,"onUpdate:modelValue":e[7]||(e[7]=s=>o.title=s),maxlength:"24","show-word-limit":"",placeholder:"例如：专属顾问在线"},null,8,["modelValue"])]),_:1}),l(c,{label:"副文案",class:"is-wide"},{default:a(()=>[l(w,{modelValue:o.subtitle,"onUpdate:modelValue":e[8]||(e[8]=s=>o.subtitle=s),maxlength:"48","show-word-limit":"",placeholder:"说明点击后可以获得什么服务"},null,8,["modelValue"])]),_:1}),l(c,{label:"按钮文字",class:"is-wide"},{default:a(()=>[l(w,{modelValue:o.button_text,"onUpdate:modelValue":e[9]||(e[9]=s=>o.button_text=s),maxlength:"12","show-word-limit":"",placeholder:"例如：立即咨询"},null,8,["modelValue"])]),_:1})])]),_:1}),t("footer",lt,[t("div",st,[l(u,null,{default:a(()=>[l(m(Ee))]),_:1}),t("span",null,"当前方案："+f(n.pool.name||`方案 ${n.pool.id}`),1)]),t("div",nt,[l(h,{icon:m(Ce),onClick:Q},{default:a(()=>[...e[26]||(e[26]=[_("恢复默认",-1)])]),_:1},8,["icon"]),l(h,{type:"primary",loading:S.value,onClick:te},{default:a(()=>[_(f(K.value),1)]),_:1},8,["loading"])])])])]),t("aside",it,[t("header",at,[t("div",null,[e[27]||(e[27]=t("strong",null,"实时预览",-1)),t("span",null,f(o.enabled?"保存后按此样式展示":"配置预览，当前尚未启用"),1)]),l(F,{modelValue:x.value,"onUpdate:modelValue":e[11]||(e[11]=s=>x.value=s),size:"small","aria-label":"预览设备"},{default:a(()=>[l(k,{value:"desktop"},{default:a(()=>[l(u,null,{default:a(()=>[l(m(Ae))]),_:1}),e[28]||(e[28]=_("桌面",-1))]),_:1}),l(k,{value:"mobile"},{default:a(()=>[l(u,null,{default:a(()=>[l(m(R))]),_:1}),e[29]||(e[29]=_("手机",-1))]),_:1})]),_:1},8,["modelValue"])]),t("div",{class:E(["preview-canvas",`is-${x.value}`])},[e[34]||(e[34]=t("div",{class:"browser-chrome","aria-hidden":"true"},[t("span"),t("span"),t("span"),t("i",null,"promotion.example.com")],-1)),t("div",{class:E(["preview-stage",[`position-${o.position}`,{"is-mobile-hidden":x.value==="mobile"&&!o.show_mobile}]]),style:Se(H.value)},[e[33]||(e[33]=Te('<div class="sample-page" aria-hidden="true" data-v-51ceed15><span class="sample-brand" data-v-51ceed15></span><span class="sample-nav" data-v-51ceed15></span><span class="sample-kicker" data-v-51ceed15></span><span class="sample-title" data-v-51ceed15></span><span class="sample-copy" data-v-51ceed15></span><span class="sample-button" data-v-51ceed15></span><span class="sample-visual" data-v-51ceed15></span></div>',1)),x.value==="mobile"&&!o.show_mobile?(v(),V("div",rt,[l(u,null,{default:a(()=>[l(m(R))]),_:1}),e[30]||(e[30]=t("strong",null,"移动端已隐藏",-1)),e[31]||(e[31]=t("span",null,"开启“移动端展示”后可查看效果",-1))])):(v(),V("button",{key:1,type:"button",class:E(["live-widget",`template-${o.template}`]),"aria-label":o.button_text||o.title||"企业微信咨询",onClick:e[12]||(e[12]=z(()=>{},["prevent"]))},[e[32]||(e[32]=t("span",{class:"consult-icon","aria-hidden":"true"},"企",-1)),t("span",ut,[t("strong",ct,f(o.title),1),o.subtitle?(v(),V("small",pt,f(o.subtitle),1)):O("",!0)]),t("span",mt,f(o.button_text),1)],10,dt))],6)],2)])]),t("section",ft,[t("div",bt,[e[36]||(e[36]=t("div",null,[t("span",{class:"section-index"},"03"),t("h4",null,"安装与手动触发"),t("p",null,"基础脚本只需安装一次；启用浮窗后，脚本会自动读取本方案的最新配置。")],-1)),l(h,{type:"primary",plain:"",icon:m(Oe),disabled:!n.pool.go_url,onClick:oe},{default:a(()=>[...e[35]||(e[35]=[_(" 打开测试链接 ",-1)])]),_:1},8,["icon","disabled"])]),t("div",_t,[t("article",gt,[e[38]||(e[38]=t("div",{class:"code-title"},[t("span",null,"1"),t("div",null,[t("strong",null,"安装基础脚本"),t("small",null,"放在页面 </head> 之前，只需一次。")])],-1)),t("pre",null,[t("code",null,f(n.pool.install_code||"暂无基础脚本"),1)]),l(h,{type:"primary",plain:"",icon:m(P),onClick:e[13]||(e[13]=s=>D(n.pool.install_code,"基础脚本"))},{default:a(()=>[...e[37]||(e[37]=[_(" 复制基础脚本 ",-1)])]),_:1},8,["icon"])]),t("article",yt,[e[40]||(e[40]=t("div",{class:"code-title"},[t("span",null,"2"),t("div",null,[t("strong",null,"手动触发代码"),t("small",null,"需要额外入口时，将属性放到按钮或链接上。")])],-1)),t("pre",null,[t("code",null,f(n.pool.trigger_code||"暂无手动触发代码"),1)]),l(h,{type:"primary",plain:"",icon:m(P),onClick:e[14]||(e[14]=s=>D(n.pool.trigger_code,"手动触发代码"))},{default:a(()=>[...e[39]||(e[39]=[_(" 复制触发代码 ",-1)])]),_:1},8,["icon"])])]),t("div",wt,[l(u,null,{default:a(()=>[l(m(L))]),_:1}),e[41]||(e[41]=t("span",null,[t("strong",null,"一个方案，一个官方链接"),_("浮窗会直接打开企业微信链接，多名医助由企业微信执行均衡分流。")],-1))])])])}}}),Et=Be(vt,[["__scopeId","data-v-51ceed15"]]);export{Et as default};
|