2 lines
16 KiB
JavaScript
2 lines
16 KiB
JavaScript
import{d as at,B as rt,g as dt,f as ut,C as pt,G as mt,F as ct,ak as ft,h as bt,D as _t,i as gt,E as m}from"./element-plus-CWHdHlgZ.js";import{s as z}from"./@vue/runtime-dom-DDAG46FW.js";import{ae as yt,d as L,_ as wt,u as vt,af as kt,ag as G,ah as xt,ai as R}from"./@element-plus/icons-vue-CbYn5zW9.js";import{B as Vt}from"./first_visit-D-MWTUc_.js";import{f as Ct,w as Et,ak as v,I as V,J as e,a as l,aN as a,O as _,F as ht,ap as At,G as St,H as T,N as Tt,A as O}from"./@vue/runtime-core-C6bnekPw.js";import{r as Ot,n as B,y as c}from"./@vue/reactivity-DiY1c2vO.js";import{o as C,Q as f,p as Bt}from"./@vue/shared-mAAVTE9n.js";import{_ as Nt}from"./index-dDVfDL1w.js";import"./lodash-es-C2A-Pj28.js";import"./@popperjs/core-C5az9QE8.js";import"./dayjs-DG77mNTn.js";import"./lodash-D3kF6u-c.js";import"./@ctrl/tinycolor-BuyEbX8F.js";import"./async-validator-CFA_igpM.js";import"./normalize-wheel-es-BQoi3Ox2.js";import"./jspdf-BsthCvR5.js";import"./@babel/runtime-BanGtE2-.js";import"./fflate-_ayOYiT1.js";import"./vue-router-QlpZ4wdW.js";import"./pinia-B8cvXbiZ.js";import"./axios-C80V62Fs.js";import"./@vueuse/core-1S4fJlii.js";import"./@vueuse/shared-Cl3lVqjz.js";import"./css-color-function-DI01JAaZ.js";import"./balanced-match-BdS7OldZ.js";import"./color-B2zxaWkI.js";import"./clone-DBZ6_OiU.js";import"./color-convert-OrFsTA_V.js";import"./color-name-Dju3oUBS.js";import"./color-string-pUQDDJII.js";import"./ms-CzQ2E3wO.js";import"./vue-clipboard3-DByT_rEQ.js";import"./clipboard-CHgxszqY.js";import"./echarts-CNLwa9wG.js";import"./tslib-BDyQ-Jie.js";import"./zrender-DRNXw7y3.js";import"./highlight.js-Bxt7hFFy.js";import"./@highlightjs/vue-plugin-C4onkBvW.js";const Wt=["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}),N=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:"移动端页面"}]),Ut=new Set(Wt),It=new Set(["bottom-right","bottom-left"]),Dt=/^#[0-9A-F]{6}$/i;function Ft(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 W(n,r,d){return n==null?r:Array.from(String(n).trim()).slice(0,d).join("")}function U(n){const r=Ft(n),d=String(r.template||""),A=String(r.position||""),o=String(r.primary_color||"").trim().toUpperCase(),b=Number(r.bottom_offset),k=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:Ut.has(d)?d:y.template,position:It.has(A)?A:y.position,title:W(r.title,y.title,24),subtitle:W(r.subtitle,y.subtitle,48),button_text:W(r.button_text,y.button_text,12),primary_color:Dt.test(o)?o:y.primary_color,bottom_offset:k,show_mobile:j(r.show_mobile,y.show_mobile)}}function I(){return{...y}}const $t={class:"widget-builder","aria-label":"企业微信浮窗客服配置"},Mt={class:"builder-header"},zt={class:"builder-intro"},Lt={class:"builder-icon"},Gt={class:"publish-state"},Rt={class:"builder-layout"},jt={class:"builder-controls"},Pt={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"},Qt={class:"control-heading"},Xt={key:0,class:"dirty-state"},Yt={class:"form-grid"},Zt={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"},pe={class:"widget-title"},me={key:0,class:"widget-subtitle"},ce={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=Ct({__name:"WecomFloatingWidgetBuilder",props:{pool:{}},emits:["saved"],setup(n,{emit:r}){const d=n,A=r,o=Ot(I()),b=B(I()),k=B("desktop"),S=B(!1),P=["#139A8C","#168C74","#2878D0","#C76A2B","#BA4E68","#43546A"],H=O(()=>({"--widget-primary":o.primary_color,"--widget-bottom":`${o.bottom_offset}px`})),J=O(()=>JSON.stringify(o)!==JSON.stringify(b.value)),K=O(()=>o.enabled?b.value.enabled?"保存更新":"保存并启用":b.value.enabled?"保存并停用":"保存配置");function q(){return d.pool.widget_config??d.pool.widget??d.pool.widgetConfig}function Q(){const i=U(q());Object.assign(o,i),b.value={...i}}Et(()=>[d.pool.id,d.pool.widget_config,d.pool.widget,d.pool.widgetConfig],Q,{immediate:!0,deep:!0});function X(i,t){if(!["ArrowRight","ArrowDown","ArrowLeft","ArrowUp","Home","End"].includes(i.key))return;i.preventDefault();const g=N.length-1;let p=t;(i.key==="ArrowRight"||i.key==="ArrowDown")&&(p=t===g?0:t+1),(i.key==="ArrowLeft"||i.key==="ArrowUp")&&(p=t===0?g:t-1),i.key==="Home"&&(p=0),i.key==="End"&&(p=g),o.template=N[p].id;const E=i.currentTarget.closest(".template-grid"),w=E==null?void 0:E.querySelectorAll(".template-option");window.requestAnimationFrame(()=>{var x;return(x=w==null?void 0:w[p])==null?void 0:x.focus()})}function Y(){o.primary_color=U({...o,primary_color:typeof o.primary_color=="string"?o.primary_color:""}).primary_color}function Z(){Object.assign(o,I()),m.info("已恢复默认配置，保存后生效")}function tt(){if(!o.title.trim())return m.warning("请输入浮窗标题"),!1;if(!o.button_text.trim())return m.warning("请输入按钮文字"),!1;const i=typeof o.primary_color=="string"?o.primary_color.trim():"";return/^#[0-9A-F]{6}$/i.test(i)?!0:(m.warning("主题色请输入 #RRGGBB 格式"),!1)}async function et(){if(!tt())return;const i=b.value.enabled,t=o.enabled,u=U({...o,enabled:t});S.value=!0;try{await Vt({pool_id:Number(d.pool.id),...u}),Object.assign(o,u),b.value={...u},!t&&i?m.success("浮窗已停用，最多 60 秒生效"):t?i?m.success("浮窗配置已保存，最多 60 秒生效"):m.success("浮窗已启用，最多 60 秒生效"):m.success("浮窗配置已保存，当前保持未启用"),A("saved",u)}catch(g){m.error((g==null?void 0:g.message)||"浮窗配置保存失败")}finally{S.value=!1}}function D(i){const t=document.createElement("textarea");t.value=i,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 F(i,t){var u;if(!i){m.warning(`${t}暂无内容`);return}try{if(window.isSecureContext&&((u=navigator.clipboard)!=null&&u.writeText))try{await navigator.clipboard.writeText(i)}catch{D(i)}else D(i);m.success(`${t}已复制`)}catch{m.error(`${t}复制失败，请手动选择代码复制`)}}function ot(){const i=d.pool.main_url||d.pool.go_url||d.pool.compat_go_url;if(!i){m.warning("当前方案暂无测试链接");return}window.open(i,"_blank","noopener,noreferrer")}return(i,t)=>{const u=at,g=dt,p=rt,E=ut,w=pt,x=ct,$=mt,lt=ft,st=bt,nt=_t,h=gt;return v(),V("section",$t,[e("header",Mt,[e("div",zt,[e("span",Lt,[l(u,null,{default:a(()=>[l(c(yt))]),_:1})]),t[15]||(t[15]=e("div",null,[e("h3",null,"浮窗客服模板"),e("p",null,"选择模板并调整内容，保存后基础脚本会自动在推广页展示浮窗。")],-1))]),e("div",Gt,[e("span",{class:C(["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",Rt,[e("div",jt,[e("section",Pt,[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),V(ht,null,At(c(N),(s,it)=>(v(),V("button",{key:s.id,type:"button",class:C(["template-option",{active:o.template===s.id}]),role:"radio","aria-checked":o.template===s.id,onClick:M=>o.template=s.id,onKeydown:M=>X(M,it)},[e("span",{class:C(["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(),St(u,{key:0,class:"selected-check"},{default:a(()=>[l(c(L))]),_:1})):T("",!0)],42,Jt))),128))])]),e("section",qt,[e("div",Qt,[t[20]||(t[20]=e("div",null,[e("span",{class:"section-index"},"02"),e("h4",null,"调整浮窗内容")],-1)),J.value?(v(),V("span",Xt,"有未保存更改")):T("",!0)]),l(nt,{class:"widget-form","label-position":"top",onSubmit:t[10]||(t[10]=z(()=>{},["prevent"]))},{default:a(()=>[e("div",Yt,[l(p,{label:"显示浮窗"},{default:a(()=>[e("div",Zt,[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(p,{label:"移动端展示"},{default:a(()=>[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(p,{label:"主题色"},{default:a(()=>[e("div",ee,[l(E,{modelValue:o.primary_color,"onUpdate:modelValue":t[2]||(t[2]=s=>o.primary_color=s),predefine:P},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:Y},null,8,["modelValue"])])]),_:1}),l(p,{label:"左右位置"},{default:a(()=>[l($,{modelValue:o.position,"onUpdate:modelValue":t[4]||(t[4]=s=>o.position=s),class:"position-control"},{default:a(()=>[l(x,{value:"bottom-left"},{default:a(()=>[...t[23]||(t[23]=[_("左下角",-1)])]),_:1}),l(x,{value:"bottom-right"},{default:a(()=>[...t[24]||(t[24]=[_("右下角",-1)])]),_:1})]),_:1},8,["modelValue"])]),_:1}),l(p,{label:"距底距离",class:"is-wide"},{default:a(()=>[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(p,{label:"标题",class:"is-wide"},{default:a(()=>[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(p,{label:"副文案",class:"is-wide"},{default:a(()=>[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(p,{label:"按钮文字",class:"is-wide"},{default:a(()=>[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(u,null,{default:a(()=>[l(c(wt))]),_:1}),e("span",null,"当前方案："+f(n.pool.name||`方案 ${n.pool.id}`),1)]),e("div",ne,[l(h,{icon:c(vt),onClick:Z},{default:a(()=>[...t[26]||(t[26]=[_("恢复默认",-1)])]),_:1},8,["icon"]),l(h,{type:"primary",loading:S.value,onClick:et},{default:a(()=>[_(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($,{modelValue:k.value,"onUpdate:modelValue":t[11]||(t[11]=s=>k.value=s),size:"small","aria-label":"预览设备"},{default:a(()=>[l(x,{value:"desktop"},{default:a(()=>[l(u,null,{default:a(()=>[l(c(kt))]),_:1}),t[28]||(t[28]=_("桌面",-1))]),_:1}),l(x,{value:"mobile"},{default:a(()=>[l(u,null,{default:a(()=>[l(c(G))]),_:1}),t[29]||(t[29]=_("手机",-1))]),_:1})]),_:1},8,["modelValue"])]),e("div",{class:C(["preview-canvas",`is-${k.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:C(["preview-stage",[`position-${o.position}`,{"is-mobile-hidden":k.value==="mobile"&&!o.show_mobile}]]),style:Bt(H.value)},[t[33]||(t[33]=Tt('<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)),k.value==="mobile"&&!o.show_mobile?(v(),V("div",re,[l(u,null,{default:a(()=>[l(c(G))]),_:1}),t[30]||(t[30]=e("strong",null,"移动端已隐藏",-1)),t[31]||(t[31]=e("span",null,"开启“移动端展示”后可查看效果",-1))])):(v(),V("button",{key:1,type:"button",class:C(["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",pe,f(o.title),1),o.subtitle?(v(),V("small",me,f(o.subtitle),1)):T("",!0)]),e("span",ce,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:c(xt),disabled:!n.pool.go_url,onClick:ot},{default:a(()=>[...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:c(R),onClick:t[13]||(t[13]=s=>F(n.pool.install_code,"基础脚本"))},{default:a(()=>[...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:c(R),onClick:t[14]||(t[14]=s=>F(n.pool.trigger_code,"手动触发代码"))},{default:a(()=>[...t[39]||(t[39]=[_(" 复制触发代码 ",-1)])]),_:1},8,["icon"])])]),e("div",we,[l(u,null,{default:a(()=>[l(c(L))]),_:1}),t[41]||(t[41]=e("span",null,[e("strong",null,"一个方案，一个官方链接"),_("浮窗会直接打开企业微信链接，多名医助由企业微信执行均衡分流。")],-1))])])])}}}),no=Nt(ve,[["__scopeId","data-v-51ceed15"]]);export{no as default};
|