2 lines
15 KiB
JavaScript
2 lines
15 KiB
JavaScript
import{o as at,ba as rt,M as T,R as dt,q as v,r as k,s as e,v as l,D as i,u as m,cV as ut,w as ct,ae as E,L as _,T as f,F as pt,G as mt,O as ft,at as L,P as O,b6 as bt,I as _t,H as gt,b7 as yt,bc as wt,bb as vt,cW as xt,J as Vt,aw as z,b9 as kt,co as Et,cX as Ct,K as ht,cY as At,cZ as R,t as St,cA as Tt,c_ as Ot,c$ as P,p as W,E as p}from"./.pnpm-Dwh6tNxD.js";import{x as Wt}from"./first_visit-C8RwWSjD.js";import{_ as Bt}from"./index-C9ilrjDr.js";const It=["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:"移动端页面"}]),Nt=new Set(It),Ut=new Set(["bottom-right","bottom-left"]),$t=/^#[0-9A-F]{6}$/i;function Dt(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 I(n,r,u){return n==null?r:Array.from(String(n).trim()).slice(0,u).join("")}function N(n){const r=Dt(n),u=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:Nt.has(u)?u:y.template,position:Ut.has(A)?A:y.position,title:I(r.title,y.title,24),subtitle:I(r.subtitle,y.subtitle,48),button_text:I(r.button_text,y.button_text,12),primary_color:$t.test(o)?o:y.primary_color,bottom_offset:x,show_mobile:j(r.show_mobile,y.show_mobile)}}function U(){return{...y}}const Ft={class:"widget-builder","aria-label":"企业微信浮窗客服配置"},Mt={class:"builder-header"},Lt={class:"builder-intro"},zt={class:"builder-icon"},Rt={class:"publish-state"},Pt={class:"builder-layout"},jt={class:"builder-controls"},Gt={class:"control-section template-section"},Ht={class:"template-grid",role:"radiogroup","aria-label":"浮窗客服模板"},Jt=["aria-checked","onClick","onKeydown"],Kt={class:"template-copy"},qt={class:"control-section config-section"},Xt={class:"control-heading"},Yt={key:0,class:"dirty-state"},Zt={class:"form-grid"},Qt={class:"switch-control"},te={class:"switch-control"},ee={class:"color-control"},oe={class:"offset-control"},le={class:"form-actions"},se={class:"action-note"},ne={class:"action-buttons"},ie={class:"preview-panel","aria-label":"浮窗实时预览"},ae={class:"preview-header"},re={key:0,class:"mobile-hidden-note"},de=["aria-label"],ue={class:"widget-copy"},ce={class:"widget-title"},pe={key:0,class:"widget-subtitle"},me={class:"widget-cta"},fe={class:"install-section"},be={class:"install-heading"},_e={class:"code-grid"},ge={class:"code-card"},ye={class:"code-card"},we={class:"install-tip"},ve=at({__name:"WecomFloatingWidgetBuilder",props:{pool:{}},emits:["saved"],setup(n,{emit:r}){const u=n,A=r,o=rt(U()),b=T(U()),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 u.pool.widget_config??u.pool.widget??u.pool.widgetConfig}function X(){const a=N(q());Object.assign(o,a),b.value={...a}}dt(()=>[u.pool.id,u.pool.widget_config,u.pool.widget,u.pool.widgetConfig],X,{immediate:!0,deep:!0});function Y(a,t){if(!["ArrowRight","ArrowDown","ArrowLeft","ArrowUp","Home","End"].includes(a.key))return;a.preventDefault();const g=B.length-1;let c=t;(a.key==="ArrowRight"||a.key==="ArrowDown")&&(c=t===g?0:t+1),(a.key==="ArrowLeft"||a.key==="ArrowUp")&&(c=t===0?g:t-1),a.key==="Home"&&(c=0),a.key==="End"&&(c=g),o.template=B[c].id;const C=a.currentTarget.closest(".template-grid"),w=C==null?void 0:C.querySelectorAll(".template-option");window.requestAnimationFrame(()=>{var V;return(V=w==null?void 0:w[c])==null?void 0:V.focus()})}function Z(){o.primary_color=N({...o,primary_color:typeof o.primary_color=="string"?o.primary_color:""}).primary_color}function Q(){Object.assign(o,U()),p.info("已恢复默认配置，保存后生效")}function tt(){if(!o.title.trim())return p.warning("请输入浮窗标题"),!1;if(!o.button_text.trim())return p.warning("请输入按钮文字"),!1;const a=typeof o.primary_color=="string"?o.primary_color.trim():"";return/^#[0-9A-F]{6}$/i.test(a)?!0:(p.warning("主题色请输入 #RRGGBB 格式"),!1)}async function et(){if(!tt())return;const a=b.value.enabled,t=o.enabled,d=N({...o,enabled:t});S.value=!0;try{await Wt({pool_id:Number(u.pool.id),...d}),Object.assign(o,d),b.value={...d},!t&&a?p.success("浮窗已停用，最多 60 秒生效"):t?a?p.success("浮窗配置已保存，最多 60 秒生效"):p.success("浮窗已启用，最多 60 秒生效"):p.success("浮窗配置已保存，当前保持未启用"),A("saved",d)}catch(g){p.error((g==null?void 0:g.message)||"浮窗配置保存失败")}finally{S.value=!1}}function $(a){const t=document.createElement("textarea");t.value=a,t.setAttribute("readonly",""),t.style.position="fixed",t.style.left="-9999px",t.style.opacity="0",document.body.appendChild(t);try{if(t.focus(),t.select(),!document.execCommand("copy"))throw new Error("copy command failed")}finally{t.remove()}}async function D(a,t){var d;if(!a){p.warning(`${t}暂无内容`);return}try{if(window.isSecureContext&&((d=navigator.clipboard)!=null&&d.writeText))try{await navigator.clipboard.writeText(a)}catch{$(a)}else $(a);p.success(`${t}已复制`)}catch{p.error(`${t}复制失败，请手动选择代码复制`)}}function ot(){if(!u.pool.go_url){p.warning("当前方案暂无测试链接");return}window.open(u.pool.go_url,"_blank","noopener,noreferrer")}return(a,t)=>{const d=ct,g=_t,c=bt,C=gt,w=yt,V=vt,F=wt,lt=xt,st=Vt,nt=kt,h=ht;return v(),k("section",Ft,[e("header",Mt,[e("div",Lt,[e("span",zt,[l(d,null,{default:i(()=>[l(m(ut))]),_:1})]),t[15]||(t[15]=e("div",null,[e("h3",null,"浮窗客服模板"),e("p",null,"选择模板并调整内容，保存后基础脚本会自动在推广页展示浮窗。")],-1))]),e("div",Rt,[e("span",{class:E(["state-badge",b.value.enabled?"is-enabled":"is-disabled"])},[t[16]||(t[16]=e("i",{"aria-hidden":"true"},null,-1)),_(f(b.value.enabled?"已启用":"未启用"),1)],2),t[17]||(t[17]=e("small",null,"配置保存后最多 60 秒生效",-1))])]),e("div",Pt,[e("div",jt,[e("section",Gt,[t[19]||(t[19]=e("div",{class:"control-heading"},[e("div",null,[e("span",{class:"section-index"},"01"),e("h4",null,"选择展示模板")]),e("span",null,"支持方向键切换")],-1)),e("div",Ht,[(v(!0),k(pt,null,mt(m(B),(s,it)=>(v(),k("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,it)},[e("span",{class:E(["template-swatch",`is-${s.id}`]),"aria-hidden":"true"},[...t[18]||(t[18]=[e("i",{class:"swatch-icon"},null,-1),e("i",{class:"swatch-line is-long"},null,-1),e("i",{class:"swatch-line is-short"},null,-1),e("i",{class:"swatch-action"},null,-1)])],2),e("span",Kt,[e("strong",null,f(s.name),1),e("small",null,f(s.description),1),e("em",null,f(s.scene),1)]),o.template===s.id?(v(),ft(d,{key:0,class:"selected-check"},{default:i(()=>[l(m(L))]),_:1})):O("",!0)],42,Jt))),128))])]),e("section",qt,[e("div",Xt,[t[20]||(t[20]=e("div",null,[e("span",{class:"section-index"},"02"),e("h4",null,"调整浮窗内容")],-1)),J.value?(v(),k("span",Yt,"有未保存更改")):O("",!0)]),l(nt,{class:"widget-form","label-position":"top",onSubmit:t[10]||(t[10]=z(()=>{},["prevent"]))},{default:i(()=>[e("div",Zt,[l(c,{label:"显示浮窗"},{default:i(()=>[e("div",Qt,[l(g,{modelValue:o.enabled,"onUpdate:modelValue":t[0]||(t[0]=s=>o.enabled=s),"active-text":"显示","inactive-text":"隐藏"},null,8,["modelValue"]),t[21]||(t[21]=e("small",null,"保存后应用到推广页",-1))])]),_:1}),l(c,{label:"移动端展示"},{default:i(()=>[e("div",te,[l(g,{modelValue:o.show_mobile,"onUpdate:modelValue":t[1]||(t[1]=s=>o.show_mobile=s),"active-text":"展示","inactive-text":"隐藏"},null,8,["modelValue"]),t[22]||(t[22]=e("small",null,"关闭后仅在桌面端出现",-1))])]),_:1}),l(c,{label:"主题色"},{default:i(()=>[e("div",ee,[l(C,{modelValue:o.primary_color,"onUpdate:modelValue":t[2]||(t[2]=s=>o.primary_color=s),predefine:G},null,8,["modelValue"]),l(w,{modelValue:o.primary_color,"onUpdate:modelValue":t[3]||(t[3]=s=>o.primary_color=s),maxlength:"7","aria-label":"主题色十六进制值",onBlur:Z},null,8,["modelValue"])])]),_:1}),l(c,{label:"左右位置"},{default:i(()=>[l(F,{modelValue:o.position,"onUpdate:modelValue":t[4]||(t[4]=s=>o.position=s),class:"position-control"},{default:i(()=>[l(V,{value:"bottom-left"},{default:i(()=>[...t[23]||(t[23]=[_("左下角",-1)])]),_:1}),l(V,{value:"bottom-right"},{default:i(()=>[...t[24]||(t[24]=[_("右下角",-1)])]),_:1})]),_:1},8,["modelValue"])]),_:1}),l(c,{label:"距底距离",class:"is-wide"},{default:i(()=>[e("div",oe,[l(lt,{modelValue:o.bottom_offset,"onUpdate:modelValue":t[5]||(t[5]=s=>o.bottom_offset=s),min:16,max:160,step:4},null,8,["modelValue"]),l(st,{modelValue:o.bottom_offset,"onUpdate:modelValue":t[6]||(t[6]=s=>o.bottom_offset=s),min:16,max:160,step:4,"controls-position":"right","aria-label":"距底距离，单位像素"},null,8,["modelValue"]),t[25]||(t[25]=e("span",null,"px",-1))])]),_:1}),l(c,{label:"标题",class:"is-wide"},{default:i(()=>[l(w,{modelValue:o.title,"onUpdate:modelValue":t[7]||(t[7]=s=>o.title=s),maxlength:"24","show-word-limit":"",placeholder:"例如：专属顾问在线"},null,8,["modelValue"])]),_:1}),l(c,{label:"副文案",class:"is-wide"},{default:i(()=>[l(w,{modelValue:o.subtitle,"onUpdate:modelValue":t[8]||(t[8]=s=>o.subtitle=s),maxlength:"48","show-word-limit":"",placeholder:"说明点击后可以获得什么服务"},null,8,["modelValue"])]),_:1}),l(c,{label:"按钮文字",class:"is-wide"},{default:i(()=>[l(w,{modelValue:o.button_text,"onUpdate:modelValue":t[9]||(t[9]=s=>o.button_text=s),maxlength:"12","show-word-limit":"",placeholder:"例如：立即咨询"},null,8,["modelValue"])]),_:1})])]),_:1}),e("footer",le,[e("div",se,[l(d,null,{default:i(()=>[l(m(Et))]),_:1}),e("span",null,"当前方案："+f(n.pool.name||`方案 ${n.pool.id}`),1)]),e("div",ne,[l(h,{icon:m(Ct),onClick:Q},{default:i(()=>[...t[26]||(t[26]=[_("恢复默认",-1)])]),_:1},8,["icon"]),l(h,{type:"primary",loading:S.value,onClick:et},{default:i(()=>[_(f(K.value),1)]),_:1},8,["loading"])])])])]),e("aside",ie,[e("header",ae,[e("div",null,[t[27]||(t[27]=e("strong",null,"实时预览",-1)),e("span",null,f(o.enabled?"保存后按此样式展示":"配置预览，当前尚未启用"),1)]),l(F,{modelValue:x.value,"onUpdate:modelValue":t[11]||(t[11]=s=>x.value=s),size:"small","aria-label":"预览设备"},{default:i(()=>[l(V,{value:"desktop"},{default:i(()=>[l(d,null,{default:i(()=>[l(m(At))]),_:1}),t[28]||(t[28]=_("桌面",-1))]),_:1}),l(V,{value:"mobile"},{default:i(()=>[l(d,null,{default:i(()=>[l(m(R))]),_:1}),t[29]||(t[29]=_("手机",-1))]),_:1})]),_:1},8,["modelValue"])]),e("div",{class:E(["preview-canvas",`is-${x.value}`])},[t[34]||(t[34]=e("div",{class:"browser-chrome","aria-hidden":"true"},[e("span"),e("span"),e("span"),e("i",null,"promotion.example.com")],-1)),e("div",{class:E(["preview-stage",[`position-${o.position}`,{"is-mobile-hidden":x.value==="mobile"&&!o.show_mobile}]]),style:St(H.value)},[t[33]||(t[33]=Tt('<div class="sample-page" aria-hidden="true" data-v-8421b435><span class="sample-brand" data-v-8421b435></span><span class="sample-nav" data-v-8421b435></span><span class="sample-kicker" data-v-8421b435></span><span class="sample-title" data-v-8421b435></span><span class="sample-copy" data-v-8421b435></span><span class="sample-button" data-v-8421b435></span><span class="sample-visual" data-v-8421b435></span></div>',1)),x.value==="mobile"&&!o.show_mobile?(v(),k("div",re,[l(d,null,{default:i(()=>[l(m(R))]),_:1}),t[30]||(t[30]=e("strong",null,"移动端已隐藏",-1)),t[31]||(t[31]=e("span",null,"开启“移动端展示”后可查看效果",-1))])):(v(),k("button",{key:1,type:"button",class:E(["live-widget",`template-${o.template}`]),"aria-label":o.button_text||o.title||"企业微信咨询",onClick:t[12]||(t[12]=z(()=>{},["prevent"]))},[t[32]||(t[32]=e("span",{class:"consult-icon","aria-hidden":"true"},"企",-1)),e("span",ue,[e("strong",ce,f(o.title),1),o.subtitle?(v(),k("small",pe,f(o.subtitle),1)):O("",!0)]),e("span",me,f(o.button_text),1)],10,de))],6)],2)])]),e("section",fe,[e("div",be,[t[36]||(t[36]=e("div",null,[e("span",{class:"section-index"},"03"),e("h4",null,"安装与手动触发"),e("p",null,"基础脚本只需安装一次；启用浮窗后，脚本会自动读取本方案的最新配置。")],-1)),l(h,{type:"primary",plain:"",icon:m(Ot),disabled:!n.pool.go_url,onClick:ot},{default:i(()=>[...t[35]||(t[35]=[_(" 打开测试链接 ",-1)])]),_:1},8,["icon","disabled"])]),e("div",_e,[e("article",ge,[t[38]||(t[38]=e("div",{class:"code-title"},[e("span",null,"1"),e("div",null,[e("strong",null,"安装基础脚本"),e("small",null,"放在页面 </head> 之前，只需一次。")])],-1)),e("pre",null,[e("code",null,f(n.pool.install_code||"暂无基础脚本"),1)]),l(h,{type:"primary",plain:"",icon:m(P),onClick:t[13]||(t[13]=s=>D(n.pool.install_code,"基础脚本"))},{default:i(()=>[...t[37]||(t[37]=[_(" 复制基础脚本 ",-1)])]),_:1},8,["icon"])]),e("article",ye,[t[40]||(t[40]=e("div",{class:"code-title"},[e("span",null,"2"),e("div",null,[e("strong",null,"手动触发代码"),e("small",null,"需要额外入口时，将属性放到按钮或链接上。")])],-1)),e("pre",null,[e("code",null,f(n.pool.trigger_code||"暂无手动触发代码"),1)]),l(h,{type:"primary",plain:"",icon:m(P),onClick:t[14]||(t[14]=s=>D(n.pool.trigger_code,"手动触发代码"))},{default:i(()=>[...t[39]||(t[39]=[_(" 复制触发代码 ",-1)])]),_:1},8,["icon"])])]),e("div",we,[l(d,null,{default:i(()=>[l(m(L))]),_:1}),t[41]||(t[41]=e("span",null,[e("strong",null,"无需暴露链接池"),_("浮窗点击后仍由服务端执行可用性筛选、权重随机和访问统计。")],-1))])])])}}}),Ee=Bt(ve,[["__scopeId","data-v-8421b435"]]);export{Ee as default};
|