2 lines
6.1 KiB
JavaScript
2 lines
6.1 KiB
JavaScript
import{d as Q,u as W,q as X,c as p,e as s,w as n,x as Y,F as Z,l as w,y as ee,k as u,r as g,z as ae,o as m,i as D,a as d,t as P,j as te,f as j,n as se,v as le,E as ne}from"./index-CcdGGfCj.js";import{h as f,a as ie,_ as v}from"./http-CGjljVXL.js";import{_ as oe}from"./PageHeader.vue_vue_type_script_setup_true_lang-ClDoYPHj.js";import{_ as re}from"./_plugin-vue_export-helper-DlAUqK2U.js";const de={class:"page-stack management-page"},ce={class:"panel style-grid-panel"},ue={key:0,class:"style-card-grid"},me=["onDragover"],pe={class:"style-card__visual"},ge=["src"],_e=["draggable","onDragstart"],fe={class:"style-card__actions"},ve={class:"style-form__preview-column"},ye={class:"upload-preview-frame"},ke=["src"],he={key:1,class:"upload-preview-empty"},xe={class:"style-form__fields"},be=Q({__name:"StylesView",setup(De){const y=W(),C=u(!1),E=u(!1),_=u(!1),k=u(""),i=u([]),I=u(),o=te({name:"",image:"",image_key:""}),h=u(""),V=u([]),$=u(!1),O=le(()=>i.value.length>1&&!$.value),z={name:[{required:!0,message:"请填写风格名",trigger:"blur"}]};async function B(){C.value=!0;try{const{data:e}=await f.get("/resources/styles",{params:{page:1,page_size:100}});i.value=e.data.items||[]}catch(e){x(e)}finally{C.value=!1}}function T(e){k.value=(e==null?void 0:e.id)||"",Object.assign(o,{name:(e==null?void 0:e.name)||"",image:(e==null?void 0:e.image_url)||"",image_key:(e==null?void 0:e.image_key)||"",image_url:(e==null?void 0:e.image_url)||"",image_mime:(e==null?void 0:e.image_mime)||"",image_size:(e==null?void 0:e.image_size)||"",image_width:(e==null?void 0:e.image_width)||"",image_height:(e==null?void 0:e.image_height)||""})}function q(){T(),_.value=!0}function F(e){T(e),_.value=!0}async function N(e){const a=new FormData;a.append("file",e.file);try{const t=await f.post("/uploads/style-images",a,{headers:{"Content-Type":"multipart/form-data"}});Object.assign(o,t.data.data),o.image=t.data.data.image_url||t.data.data.image_key,e.onSuccess(t.data)}catch(t){const r=Object.assign(t instanceof Error?t:new Error(String(t)),{status:0,method:"POST",url:"/uploads/style-images"});e.onError(r),x(t)}}async function R(){var e;if(await((e=I.value)==null?void 0:e.validate().catch(()=>!1))){if(!o.image_key){y.warning("请先上传风格图片");return}E.value=!0;try{const a={...o};delete a.image,k.value?await f.put(`/resources/styles/${k.value}`,a):await f.post("/resources/styles",a),_.value=!1,y.success(k.value?"风格已更新":"风格已创建"),await B()}catch(a){x(a)}finally{E.value=!1}}}async function G(e){try{await ne.confirm(`确定删除风格“${e.name}”吗？`,"删除风格",{type:"warning",confirmButtonText:"删除",cancelButtonText:"取消"}),await f.delete(`/resources/styles/${e.id}`),y.success("风格已删除"),await B()}catch(a){a!=="cancel"&&a!=="close"&&x(a)}}function U(e,a){var t;O.value&&(h.value=e.id,V.value=i.value.map(r=>r.id),(t=a.dataTransfer)==null||t.setData("text/plain",e.id))}function J(e){const a=i.value.findIndex(c=>c.id===h.value),t=i.value.findIndex(c=>c.id===e);if(a<0||t<0||a===t)return;const[r]=i.value.splice(a,1);i.value.splice(t,0,r)}async function S(){if(!h.value)return;const e=i.value.map(a=>a.id);if(h.value="",!e.every((a,t)=>a===V.value[t])){$.value=!0;try{await f.put("/resources/styles/reorder",{ids:e}),y.success("风格排序已保存")}catch(a){const t=new Map(V.value.map((r,c)=>[r,c]));i.value.sort((r,c)=>(t.get(r.id)??0)-(t.get(c.id)??0)),x(a)}finally{$.value=!1}}}function x(e){const a=ie(e);y.error(a.message,a.copyText)}return X(B),(e,a)=>{const t=g("el-button"),r=g("el-empty"),c=g("el-input"),M=g("el-form-item"),L=g("el-upload"),A=g("el-form"),H=g("el-dialog"),K=ae("loading");return m(),p("div",de,[s(oe,{title:"风格管理",description:"管理项目风格、展示图片与排序"},{default:n(()=>[s(t,{type:"primary",onClick:q},{default:n(()=>[s(v,{name:"Plus"}),a[3]||(a[3]=D("新建风格",-1))]),_:1})]),_:1}),Y((m(),p("section",ce,[i.value.length?(m(),p("div",ue,[(m(!0),p(Z,null,w(i.value,l=>(m(),p("article",{key:l.id,class:se(["style-card",{"is-dragging":h.value===l.id}]),onDragover:j(b=>J(l.id),["prevent"]),onDrop:j(S,["prevent"])},[d("div",pe,[d("img",{src:l.image_url,alt:"",draggable:"false"},null,8,ge),d("span",{class:"style-card__drag",draggable:O.value,title:"拖动排序",onDragstart:b=>U(l,b),onDragend:S},[s(v,{name:"Rank"})],40,_e),d("div",fe,[s(t,{circle:"",title:"编辑风格",onClick:b=>F(l)},{default:n(()=>[s(v,{name:"EditPen"})]),_:1},8,["onClick"]),s(t,{circle:"",type:"danger",plain:"",title:"删除风格",onClick:b=>G(l)},{default:n(()=>[s(v,{name:"Delete"})]),_:1},8,["onClick"])])]),d("strong",null,P(l.name),1)],42,me))),128))])):(m(),ee(r,{key:1,description:"暂无风格"}))])),[[K,C.value]]),s(H,{modelValue:_.value,"onUpdate:modelValue":a[2]||(a[2]=l=>_.value=l),title:k.value?"编辑风格":"新建风格",class:"style-dialog",width:"min(720px, calc(100vw - 32px))","align-center":""},{footer:n(()=>[s(t,{onClick:a[1]||(a[1]=l=>_.value=!1)},{default:n(()=>[...a[7]||(a[7]=[D("取消",-1)])]),_:1}),s(t,{type:"primary",loading:E.value,onClick:R},{default:n(()=>[...a[8]||(a[8]=[D("保存",-1)])]),_:1},8,["loading"])]),default:n(()=>[s(A,{ref_key:"formRef",ref:I,model:o,rules:z,"label-position":"top",class:"style-form"},{default:n(()=>[d("div",ve,[a[5]||(a[5]=d("span",{class:"style-form__label"},"图片预览",-1)),d("div",ye,[o.image?(m(),p("img",{key:0,class:"upload-preview",src:o.image,alt:""},null,8,ke)):(m(),p("div",he,[s(v,{name:"Picture"}),a[4]||(a[4]=d("span",null,"9:16 图片预览",-1))]))])]),d("div",xe,[s(M,{label:"风格名",prop:"name"},{default:n(()=>[s(c,{modelValue:o.name,"onUpdate:modelValue":a[0]||(a[0]=l=>o.name=l),modelModifiers:{trim:!0}},null,8,["modelValue"])]),_:1}),s(M,{label:"风格图片",required:""},{default:n(()=>[s(L,{"show-file-list":!1,"http-request":N,accept:"image/jpeg,image/png,image/gif"},{default:n(()=>[s(t,null,{default:n(()=>[s(v,{name:"Upload"}),D(P(o.image?"重新上传":"上传图片"),1)]),_:1})]),_:1}),a[6]||(a[6]=d("p",{class:"field-helper"},"推荐 9:16，支持 JPEG、PNG、GIF，最大 10MB",-1))]),_:1})])]),_:1},8,["model"])]),_:1},8,["modelValue","title"])])}}}),Be=re(be,[["__scopeId","data-v-3dcbb1fc"]]);export{Be as default};
|