4 lines
8.3 KiB
JavaScript
4 lines
8.3 KiB
JavaScript
import{d as ae,B as re,y as le,o as c,c as u,p as $,a as d,q as U,aa as ie,O as se,s as M,f as C,e as ce,b as ue,t as b,G as de,N as me,F as X,v as q,k as y,A as W,I as A}from"./index-p1BAR2Hc.js";import{X as pe}from"./icons-CbZw_MCi.js";import{L as ve}from"./LoadingMedia-q1A6xJc7.js";import{_ as fe}from"./_plugin-vue_export-helper-DlAUqK2U.js";const ge=["contenteditable","data-placeholder"],ye=["src","alt"],he={key:0,class:"mention-flat-header"},we={key:1,class:"mention-header"},ke={class:"mention-categories"},be=["onMousedown"],Ne={class:"mention-list"},xe=["onMouseenter","onMousedown"],_e={key:1},Me={key:0},Ce=ae({__name:"AssetPromptEditor",props:{modelValue:{},assets:{},placeholder:{},expanded:{type:Boolean},readonly:{type:Boolean},variant:{},floatingPreview:{type:Boolean}},emits:["update:modelValue","blur"],setup(m,{emit:G}){const l=m,P=G,p=y(),h=y(!1),N=y(""),w=y("character"),R=y(0),x=y(0),v=y();let f=null,E=!1;const H={character:"角色",scene:"场景",prop:"道具",custom:"自定义"},S=[{key:"character",label:"角色"},{key:"voice",label:"音色"},{key:"scene",label:"场景"},{key:"prop",label:"道具"},{key:"custom",label:"自定义"}],Q=W(()=>l.variant==="media"?[{key:"character",label:"图片"},{key:"voice",label:"音频"},{key:"video",label:"视频"}]:l.variant==="redraw"?S.filter(e=>e.key==="character"||e.key==="scene"||e.key==="prop"):S),T=W(()=>{const e=N.value.trim().toLowerCase(),o=l.assets.filter(t=>(l.variant==="drama-storyboard"||(w.value==="voice"?!!t.audio_url:w.value==="video"?!!t.video_url:t.asset_type===w.value&&(l.variant!=="media"||!t.audio_url&&!t.video_url)))&&(!e||t.name.toLowerCase().includes(e)));return l.variant==="drama-storyboard"?o:o.slice(0,12)});function L(e){return l.variant==="drama-storyboard"&&e.id.startsWith("storyboard-image-")}function I(e){return L(e)?"storyboard-image":e.audio_url&&e.asset_type==="character"?"voice":e.asset_type}function D(e){return l.variant==="media"?e.video_url?"视频":e.audio_url?"音频":"图片":L(e)?"分镜图":l.variant==="drama-storyboard"&&e.asset_type==="character"&&e.audio_url?"人物 / 音色":I(e)==="voice"?"音色":H[e.asset_type]||"资产"}function O(e){const o=document.createElement("span");o.className=`mention-token mention-token--${I(e)}`,o.contentEditable="false",o.dataset.assetId=e.id,o.dataset.assetName=e.name;const t=!!e.image_url&&l.variant!=="media"&&l.variant!=="redraw",n=t?document.createElement("img"):document.createElement("b");t?(n.src=e.image_url,n.alt=e.name,o.dataset.previewUrl=e.image_url):n.textContent=D(e);const r=document.createElement("span");r.className="mention-name",r.textContent=e.name;const i=[n,r];if(!l.readonly){const a=document.createElement("button");a.type="button",a.className="mention-remove",a.dataset.removeMention="true",a.title=`移除资产 ${e.name}`,a.textContent="删除",i.push(a)}if(t&&!l.floatingPreview){const a=document.createElement("span");a.className="mention-preview",a.contentEditable="false";const s=document.createElement("img");s.src=e.image_url,s.alt=e.name,a.append(s),i.push(a)}return o.append(...i),o}function J(e){if(!l.floatingPreview||!(e.target instanceof Element))return;const o=e.target.closest(".mention-token[data-preview-url]"),t=p.value;if(!o||!t||!o.dataset.previewUrl)return;const n=o.getBoundingClientRect(),r=154,i=8,a=8,s=window.innerWidth-r-a,g=window.innerHeight-r-a,z=[{left:n.right+i,top:n.top},{left:n.left-r-i,top:n.top},{left:n.left,top:n.bottom+i},{left:n.left,top:n.top-r-i}].find(_=>_.left>=a&&_.left<=s&&_.top>=a&&_.top<=g)||{left:Math.min(Math.max(n.left,a),s),top:Math.min(Math.max(n.bottom+i,a),g)};v.value={url:o.dataset.previewUrl,alt:o.dataset.assetName||"",left:`${z.left}px`,top:`${z.top}px`}}function K(e){if(!(e.target instanceof Element))return;const o=e.target.closest(".mention-token[data-preview-url]");o&&e.relatedTarget instanceof Node&&o.contains(e.relatedTarget)||(v.value=void 0)}function k(){v.value=void 0}function F(){k();const e=p.value;if(!e||document.activeElement===e)return;E=!0,e.replaceChildren();const o=[...l.assets].filter(a=>a.name.trim()).sort((a,s)=>s.name.length-a.name.length),t=new Map(o.map(a=>[a.name,a])),n=o.map(a=>a.name.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")),r=n.length?new RegExp(`@(${n.join("|")})`,"g"):null;let i=0;if(r)for(const a of l.modelValue.matchAll(r)){const s=a.index||0;s>i&&e.append(document.createTextNode(l.modelValue.slice(i,s)));const g=t.get(a[1]);e.append(g?O(g):document.createTextNode(a[0])),i=s+a[0].length}i<l.modelValue.length&&e.append(document.createTextNode(l.modelValue.slice(i))),E=!1}function Y(){const e=p.value;if(!e)return"";const o=t=>{var i;if(t.nodeType===Node.TEXT_NODE)return t.textContent||"";const n=t;if((i=n.classList)!=null&&i.contains("mention-token"))return`@${n.dataset.assetName||""}`;if(n.tagName==="BR")return`
|
|
`;const r=Array.from(t.childNodes).map(o).join("");return n.tagName==="DIV"?`${r}
|
|
`:r};return Array.from(e.childNodes).map(o).join("").replace(/\n$/,"")}function B(){E||P("update:modelValue",Y())}function Z(){const e=p.value,o=window.getSelection();if(!e||!(o!=null&&o.rangeCount)||!e.contains(o.anchorNode)){h.value=!1;return}const t=o.getRangeAt(0).cloneRange(),n=t.cloneRange();n.selectNodeContents(e),n.setEnd(o.anchorNode,o.anchorOffset),f=t;const r=n.toString().match(/@([^@\s,。;:,.!?]*)$/);h.value=!!r,r&&(N.value=r[1]||"",R.value=r[0].length,x.value=0)}function ee(){k(),B(),Z()}async function te(){var e;h.value=!1,f=null,await A(),(e=p.value)==null||e.focus()}async function ne(e){const o=p.value,t=window.getSelection();if(!o||!(t!=null&&t.rangeCount)&&!f)return;const n=(f==null?void 0:f.cloneRange())||t.getRangeAt(0);let r=n.startContainer;r.nodeType!==Node.TEXT_NODE&&(r=document.createTextNode(""),n.insertNode(r),n.setStart(r,0));const i=r.textContent||"",a=n.startOffset,s=Math.max(0,a-R.value);r.textContent=i.slice(0,s)+i.slice(a),n.setStart(r,s),n.collapse(!0);const g=O(e),V=document.createTextNode(" ");n.insertNode(V),n.insertNode(g),n.setStartAfter(V),n.collapse(!0),t.removeAllRanges(),t.addRange(n),h.value=!1,f=null,B(),await A(),o.focus()}function oe(e){var r;const t=e.target.closest("[data-remove-mention]");if(!t)return;e.preventDefault(),e.stopPropagation(),k();const n=t.closest(".mention-token");n==null||n.remove(),B(),(r=p.value)==null||r.focus()}function j(){k(),window.setTimeout(()=>{var e;(e=document.activeElement)!=null&&e.closest(".mention-panel")||(h.value=!1,f=null)},120),P("blur")}return re(()=>[l.modelValue,l.assets],()=>A(F),{deep:!0}),le(F),(e,o)=>(c(),u("div",{class:$(["asset-prompt-editor",{expanded:m.expanded,readonly:m.readonly,media:m.variant==="media","drama-storyboard":m.variant==="drama-storyboard"}])},[d("div",{ref_key:"editor",ref:p,class:"prompt-content",contenteditable:m.readonly?"false":"true","data-placeholder":m.placeholder,onInput:ee,onMousedown:oe,onMouseover:J,onMouseout:K,onScroll:k,onBlur:j},null,40,ge),(c(),U(ie,{to:"body"},[v.value?(c(),u("span",{key:0,class:"mention-floating-preview",style:se({left:v.value.left,top:v.value.top})},[d("img",{src:v.value.url,alt:v.value.alt},null,8,ye)],4)):M("",!0)])),h.value?(c(),u("div",{key:0,class:"mention-panel",onMousedown:o[1]||(o[1]=C(()=>{},["stop"]))},[d("button",{class:"mention-close",type:"button",title:"关闭资产面板",onMousedown:C(te,["prevent","stop"])},[ce(ue(pe),{size:16})],32),m.variant==="drama-storyboard"?(c(),u("div",he,[o[2]||(o[2]=d("strong",null,"当前分镜可用资产",-1)),d("small",null,b(T.value.length)+" 项",1)])):(c(),u("div",we,[m.variant!=="media"?de((c(),u("input",{key:0,"onUpdate:modelValue":o[0]||(o[0]=t=>N.value=t),class:"mention-search",type:"search",placeholder:"搜索资产",onBlur:j},null,544)),[[me,N.value]]):M("",!0),d("div",ke,[(c(!0),u(X,null,q(Q.value,t=>(c(),u("button",{key:t.key,type:"button",class:$({active:w.value===t.key}),onMousedown:C(n=>{w.value=t.key,x.value=0},["prevent"])},b(t.label),43,be))),128))])])),d("div",Ne,[(c(!0),u(X,null,q(T.value,(t,n)=>(c(),u("button",{key:t.id,type:"button",class:$({active:n===x.value}),onMouseenter:r=>x.value=n,onMousedown:C(r=>ne(t),["prevent"])},[d("span",null,[t.image_url?(c(),U(ve,{key:0,type:"image",compact:"",src:t.image_url,alt:""},null,8,["src"])):(c(),u("i",_e,b(t.name.slice(0,1)),1))]),d("b",null,b(t.name),1),d("small",null,b(D(t)),1)],42,xe))),128)),T.value.length?M("",!0):(c(),u("div",Me,"没有匹配的资产"))])],32)):M("",!0)],2))}}),$e=fe(Ce,[["__scopeId","data-v-1a647370"]]);export{$e as A};
|