vue-api-request-builder 0.1.0 → 0.2.1

package/dist/index.umd.js

@@ -1,6 +1,6 @@
-(function(h,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(h=typeof globalThis<"u"?globalThis:h||self,e(h.ApiRequestBuilder={},h.Vue))})(this,function(h,e){"use strict";const q={class:"key-value-input flex flex-col gap-1"},P={class:"flex gap-2"},z={key:0,class:"flex flex-col gap-1"},D={class:"flex w-full gap-1 items-center"},I=e.defineComponent({__name:"KeyValueInput",props:{modelValue:{},addButtonText:{default:"添加参数"},showPreview:{type:Boolean,default:!1},previewText:{default:""}},emits:["update:modelValue"],setup(o,{emit:y}){const d=o,n=y,r=e.ref(d.modelValue);e.watch(()=>d.modelValue,i=>{r.value=i}),e.watch(r,i=>{n("update:modelValue",i)},{deep:!0});const m=()=>{r.value.push({key:"",value:""})},a=i=>{r.value.splice(i,1)},u=()=>{r.value=[]};return(i,s)=>{const c=e.resolveComponent("a-button"),f=e.resolveComponent("a-popconfirm"),C=e.resolveComponent("a-input"),_=e.resolveComponent("a-typography-paragraph"),w=e.resolveComponent("a-typography");return e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("div",P,[e.createVNode(c,{type:"primary",onClick:m,class:"w-40 max-w-full",size:"small"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.addButtonText),1)]),_:1}),e.createVNode(f,{title:"确认清空",description:"确定要清空所有参数吗？","ok-text":"确认","cancel-text":"取消",onConfirm:u},{default:e.withCtx(()=>[e.createVNode(c,{type:"primary",danger:"",class:"w-40 max-w-full",size:"small",disabled:r.value.length===0},{default:e.withCtx(()=>s[0]||(s[0]=[e.createTextVNode(" 清空 ")])),_:1},8,["disabled"])]),_:1})]),r.value.length>0?(e.openBlock(),e.createElementBlock("div",z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,(x,N)=>(e.openBlock(),e.createElementBlock("div",{key:N,class:"flex"},[e.createElementVNode("div",D,[e.createVNode(c,{type:"primary",danger:"",onClick:k=>a(N),class:"w-16",size:"small"},{default:e.withCtx(()=>s[1]||(s[1]=[e.createTextVNode(" 删除 ")])),_:2},1032,["onClick"]),e.createVNode(C,{value:x.key,"onUpdate:value":k=>x.key=k,placeholder:"键",style:{width:"60%"},size:"small"},null,8,["value","onUpdate:value"]),e.createVNode(C,{value:x.value,"onUpdate:value":k=>x.value=k,placeholder:"值",style:{width:"100%"},size:"small"},null,8,["value","onUpdate:value"])])]))),128))])):e.createCommentVNode("",!0),i.showPreview?(e.openBlock(),e.createBlock(w,{key:1,class:"m-0"},{default:e.withCtx(()=>[e.createVNode(_,{class:"!m-0"},{default:e.withCtx(()=>[e.createElementVNode("pre",null,e.toDisplayString(i.previewText),1)]),_:1})]),_:1})):e.createCommentVNode("",!0)])}}}),S=(o,y)=>{const d=o.__vccOpts||o;for(const[n,r]of y)d[n]=r;return d},g=S(I,[["__scopeId","data-v-1e5ef051"]]),j={method:"GET",url:"https://yesno.wtf",path:"/api",auth:{type:"none"},params:[],headers:[],body:{type:"application/json"}},J={class:"request-form"},L={class:"flex flex-col gap-1"},F={class:"flex flex-row gap-1"},H={class:"flex flex-row gap-1"},A={class:"mt-1"},K={key:0,class:"flex flex-col gap-1 mt-2"},M={class:"flex flex-row gap-1 h-6"},G={class:"flex flex-row gap-1"},W={key:1,class:"flex flex-col gap-1 mt-1"},X={class:"flex flex-row gap-1 items-center"},R=S(e.defineComponent({__name:"RequestForm",props:{modelValue:{default:()=>j}},emits:["update:modelValue"],setup(o,{emit:y}){const d=o,n=y,r=e.ref(d.modelValue.method),m=e.ref(d.modelValue.url),a=e.ref(d.modelValue.auth.type),u=e.ref(d.modelValue.path),i=e.ref(d.modelValue.auth.username||""),s=e.ref(d.modelValue.auth.password||""),c=e.ref(d.modelValue.auth.token||""),f=e.ref(d.modelValue.params),C=e.ref(d.modelValue.headers),_=e.ref(d.modelValue.body.formData||[]),w=e.ref(d.modelValue.body.type),x=e.ref(d.modelValue.body.json||""),N=e.ref(d.modelValue.body.raw||""),k=e.ref("");function te(l,t){let V;return function(...T){clearTimeout(V),V=setTimeout(()=>l.apply(this,T),t)}}const $=()=>({method:r.value,url:m.value,path:u.value,auth:{type:a.value,...a.value==="Basic"?{username:i.value,password:s.value}:a.value==="Bearer"?{token:c.value}:{}},params:f.value,headers:C.value,body:{type:w.value,...w.value==="application/json"?{json:x.value}:w.value==="multipart/form-data"?{formData:_.value}:{raw:N.value}}}),oe=te(()=>{n("update:modelValue",$())},100);e.watch([r,m,u,a,i,s,c,f,C,w,_,x,N],()=>{oe()},{deep:!0}),e.watch(()=>d.modelValue,l=>{const t=$();JSON.stringify(l)!==JSON.stringify(t)&&(r.value=l.method,m.value=l.url,u.value=l.path,a.value=l.auth.type,i.value=l.auth.username||"",s.value=l.auth.password||"",c.value=l.auth.token||"",f.value=l.params,C.value=l.headers,w.value=l.body.type,_.value=l.body.formData||[],x.value=l.body.json||"",N.value=l.body.raw||"")},{deep:!0});const ae=e.computed(()=>{const l=f.value.filter(t=>!!t.key).map(t=>t.key+"="+encodeURIComponent(t.value)).join("&");return l===""?"":"?"+l}),le=e.computed(()=>{switch(w.value){case"application/json":try{return x.value?JSON.stringify(JSON.parse(x.value),null,2):"-空-"}catch{return"Invalid JSON"}case"multipart/form-data":const l="----WebKitFormBoundaryPreview";return _.value.filter(V=>!!V.key).map(V=>`--${l}\r
-Content-Disposition: form-data; name="${V.key}"\r
+(function(_,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(_=typeof globalThis<"u"?globalThis:_||self,e(_.ApiRequestBuilder={},_.Vue))})(this,function(_,e){"use strict";const P={class:"key-value-input flex flex-col gap-1"},v={class:"flex gap-2"},I={key:0,class:"flex flex-col gap-1"},L={class:"flex w-full gap-1 items-center"},J=e.defineComponent({__name:"KeyValueInput",props:{modelValue:{},addButtonText:{default:"添加参数"},showPreview:{type:Boolean,default:!1},previewText:{default:""}},emits:["update:modelValue"],setup(a,{emit:y}){const d=a,l=y,r=e.ref(d.modelValue);e.watch(()=>d.modelValue,s=>{r.value=s}),e.watch(r,s=>{l("update:modelValue",s)},{deep:!0});const u=()=>{r.value.push({key:"",value:""})},n=s=>{r.value.splice(s,1)},m=()=>{r.value=[]};return(s,o)=>{const p=e.resolveComponent("a-button"),f=e.resolveComponent("a-popconfirm"),h=e.resolveComponent("a-input"),C=e.resolveComponent("a-typography-paragraph"),N=e.resolveComponent("a-typography");return e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("div",v,[e.createVNode(p,{type:"primary",onClick:u,class:"w-40 max-w-full",size:"small"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.addButtonText),1)]),_:1}),e.createVNode(f,{title:"确认清空",description:"确定要清空所有参数吗？","ok-text":"确认","cancel-text":"取消",onConfirm:m},{default:e.withCtx(()=>[e.createVNode(p,{type:"primary",danger:"",class:"w-40 max-w-full",size:"small",disabled:r.value.length===0},{default:e.withCtx(()=>o[0]||(o[0]=[e.createTextVNode(" 清空 ")])),_:1},8,["disabled"])]),_:1})]),r.value.length>0?(e.openBlock(),e.createElementBlock("div",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,(V,k)=>(e.openBlock(),e.createElementBlock("div",{key:k,class:"flex"},[e.createElementVNode("div",L,[e.createVNode(p,{type:"primary",danger:"",onClick:x=>n(k),class:"w-16",size:"small"},{default:e.withCtx(()=>o[1]||(o[1]=[e.createTextVNode(" 删除 ")])),_:2},1032,["onClick"]),e.createVNode(h,{value:V.key,"onUpdate:value":x=>V.key=x,placeholder:"键",style:{width:"60%"},size:"small"},null,8,["value","onUpdate:value"]),e.createVNode(h,{value:V.value,"onUpdate:value":x=>V.value=x,placeholder:"值",style:{width:"100%"},size:"small"},null,8,["value","onUpdate:value"])])]))),128))])):e.createCommentVNode("",!0),s.showPreview?(e.openBlock(),e.createBlock(N,{key:1,class:"m-0"},{default:e.withCtx(()=>[e.createVNode(C,{class:"!m-0"},{default:e.withCtx(()=>[e.createElementVNode("pre",null,e.toDisplayString(s.previewText),1)]),_:1})]),_:1})):e.createCommentVNode("",!0)])}}}),S=(a,y)=>{const d=a.__vccOpts||a;for(const[l,r]of y)d[l]=r;return d},E=S(J,[["__scopeId","data-v-1e5ef051"]]),j={method:"GET",url:"https://yesno.wtf",path:"/api",auth:{type:"none"},params:[],headers:[],body:{type:"application/json"}},F={class:"request-form"},H={class:"flex flex-col gap-1"},M={class:"flex flex-row gap-1"},A={class:"flex flex-row gap-1"},K={class:"mt-1"},G={key:0,class:"flex flex-col gap-1 mt-2"},W={class:"flex flex-row gap-1 h-6"},X={class:"flex flex-row gap-1"},Q={key:1,class:"flex flex-col gap-1 mt-1"},Y={class:"flex flex-row gap-1 items-center"},q=S(e.defineComponent({__name:"RequestForm",props:{modelValue:{default:()=>j}},emits:["update:modelValue"],setup(a,{emit:y}){const d=a,l=y,r=e.ref(d.modelValue.method),u=e.ref(d.modelValue.url),n=e.ref(d.modelValue.auth.type),m=e.ref(d.modelValue.path),s=e.ref(d.modelValue.auth.username||""),o=e.ref(d.modelValue.auth.password||""),p=e.ref(d.modelValue.auth.token||""),f=e.ref(d.modelValue.params),h=e.ref(d.modelValue.headers),C=e.ref(d.modelValue.body.formData||[]),N=e.ref(d.modelValue.body.type),V=e.ref(d.modelValue.body.json||""),k=e.ref(d.modelValue.body.raw||""),x=e.ref("");function U(i,t){let w;return function(...g){clearTimeout(w),w=setTimeout(()=>i.apply(this,g),t)}}const z=()=>({method:r.value,url:u.value,path:m.value,auth:{type:n.value,...n.value==="Basic"?{username:s.value,password:o.value}:n.value==="Bearer"?{token:p.value}:{}},params:f.value,headers:h.value,body:{type:N.value,...N.value==="application/json"?{json:V.value}:N.value==="multipart/form-data"?{formData:C.value}:{raw:k.value}}}),pe=U(()=>{l("update:modelValue",z())},100);e.watch([r,u,m,n,s,o,p,f,h,N,C,V,k],()=>{pe()},{deep:!0}),e.watch(()=>d.modelValue,i=>{const t=z();JSON.stringify(i)!==JSON.stringify(t)&&(r.value=i.method,u.value=i.url,m.value=i.path,n.value=i.auth.type,s.value=i.auth.username||"",o.value=i.auth.password||"",p.value=i.auth.token||"",f.value=i.params,h.value=i.headers,N.value=i.body.type,C.value=i.body.formData||[],V.value=i.body.json||"",k.value=i.body.raw||"")},{deep:!0});const ce=e.computed(()=>{const i=f.value.filter(t=>!!t.key).map(t=>t.key+"="+encodeURIComponent(t.value)).join("&");return i===""?"":"?"+i}),me=e.computed(()=>{switch(N.value){case"application/json":try{return V.value?JSON.stringify(JSON.parse(V.value),null,2):"-空-"}catch{return"Invalid JSON"}case"multipart/form-data":const i="----WebKitFormBoundaryPreview";return C.value.filter(w=>!!w.key).map(w=>`--${i}\r
+Content-Disposition: form-data; name="${w.key}"\r
 \r
-${V.value}\r
-`).join("")+`--${l}--\r
-`;case"text/plain":return N.value||"-空-";default:return"-空-"}}),ne=()=>{try{x.value&&(JSON.parse(x.value),k.value="")}catch{k.value="Invalid JSON format"}},re=()=>{try{const l=m.value,t=new URL(l);m.value=`${t.protocol}//${t.host}`,u.value=t.pathname;const V=new URLSearchParams(t.search),T=[];V.forEach((b,v)=>{T.push({key:v,value:b})}),f.value=T}catch(l){console.error("URL解析失败:",l)}},se=e.computed(()=>{if(!m.value)return!1;try{const l=m.value,t=new URL(l);return t.search!==""||t.pathname!=="/"}catch{return!1}});return(l,t)=>{const V=e.resolveComponent("a-input"),T=e.resolveComponent("a-button"),b=e.resolveComponent("a-select-option"),v=e.resolveComponent("a-select"),E=e.resolveComponent("a-card"),B=e.resolveComponent("a-radio-button"),O=e.resolveComponent("a-radio-group"),de=e.resolveComponent("a-input-password"),U=e.resolveComponent("a-textarea"),pe=e.resolveComponent("a-alert"),ie=e.resolveComponent("a-form");return e.openBlock(),e.createElementBlock("div",J,[e.createVNode(ie,{layout:"vertical"},{default:e.withCtx(()=>[e.createVNode(E,{title:"URL配置",class:"form-section",size:"small"},{default:e.withCtx(()=>[e.createElementVNode("div",L,[e.createElementVNode("div",F,[e.createVNode(V,{value:m.value,"onUpdate:value":t[0]||(t[0]=p=>m.value=p),placeholder:"基础URL",size:"small"},null,8,["value"]),se.value?(e.openBlock(),e.createBlock(T,{key:0,type:"primary",size:"small",onClick:re},{default:e.withCtx(()=>t[13]||(t[13]=[e.createTextVNode("拆解")])),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",H,[e.createVNode(v,{value:r.value,"onUpdate:value":t[1]||(t[1]=p=>r.value=p),class:"w-40",size:"small"},{default:e.withCtx(()=>[e.createVNode(b,{value:"GET"},{default:e.withCtx(()=>t[14]||(t[14]=[e.createTextVNode("GET")])),_:1}),e.createVNode(b,{value:"POST"},{default:e.withCtx(()=>t[15]||(t[15]=[e.createTextVNode("POST")])),_:1}),e.createVNode(b,{value:"PUT"},{default:e.withCtx(()=>t[16]||(t[16]=[e.createTextVNode("PUT")])),_:1}),e.createVNode(b,{value:"DELETE"},{default:e.withCtx(()=>t[17]||(t[17]=[e.createTextVNode("DELETE")])),_:1}),e.createVNode(b,{value:"OPTIONS"},{default:e.withCtx(()=>t[18]||(t[18]=[e.createTextVNode("OPTIONS")])),_:1})]),_:1},8,["value"]),e.createVNode(V,{value:u.value,"onUpdate:value":t[2]||(t[2]=p=>u.value=p),placeholder:"路径",size:"small"},null,8,["value"])])]),e.createElementVNode("div",A,[e.createVNode(g,{modelValue:f.value,"onUpdate:modelValue":t[3]||(t[3]=p=>f.value=p),"add-button-text":"添加参数","show-preview":!0,"preview-text":m.value+u.value+ae.value},null,8,["modelValue","preview-text"])])]),_:1}),e.createVNode(E,{title:"认证方案",class:"form-section",size:"small"},{default:e.withCtx(()=>[e.createVNode(O,{value:a.value,"onUpdate:value":t[4]||(t[4]=p=>a.value=p),"button-style":"solid",size:"small"},{default:e.withCtx(()=>[e.createVNode(B,{value:"none"},{default:e.withCtx(()=>t[19]||(t[19]=[e.createTextVNode("无认证")])),_:1}),e.createVNode(B,{value:"Basic"},{default:e.withCtx(()=>t[20]||(t[20]=[e.createTextVNode("Basic认证")])),_:1}),e.createVNode(B,{value:"Bearer"},{default:e.withCtx(()=>t[21]||(t[21]=[e.createTextVNode("Bearer认证")])),_:1})]),_:1},8,["value"]),a.value==="Basic"?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",M,[t[22]||(t[22]=e.createElementVNode("p",{class:"m-0 w-16"},"用户名",-1)),e.createVNode(V,{value:i.value,"onUpdate:value":t[5]||(t[5]=p=>i.value=p),size:"small"},null,8,["value"])]),e.createElementVNode("div",G,[t[23]||(t[23]=e.createElementVNode("p",{class:"m-0 w-16"},"密码",-1)),e.createVNode(de,{value:s.value,"onUpdate:value":t[6]||(t[6]=p=>s.value=p),size:"small"},null,8,["value"])])])):e.createCommentVNode("",!0),a.value==="Bearer"?(e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("div",X,[t[24]||(t[24]=e.createElementVNode("p",{class:"m-0 w-16 h-full"},"Token",-1)),e.createVNode(U,{value:c.value,"onUpdate:value":t[7]||(t[7]=p=>c.value=p),size:"small",class:"mt-1",rows:"4",placeholder:"请输入Token"},null,8,["value"])])])):e.createCommentVNode("",!0)]),_:1}),e.createVNode(E,{title:"请求头",class:"form-section",size:"small"},{default:e.withCtx(()=>[e.createVNode(g,{modelValue:C.value,"onUpdate:modelValue":t[8]||(t[8]=p=>C.value=p),"add-button-text":"添加请求头","show-preview":!1},null,8,["modelValue"])]),_:1}),r.value==="POST"||r.value==="PUT"?(e.openBlock(),e.createBlock(E,{key:0,title:"请求体",class:"form-section",size:"small"},{default:e.withCtx(()=>[e.createVNode(O,{value:w.value,"onUpdate:value":t[9]||(t[9]=p=>w.value=p),"button-style":"solid",size:"small",class:"mb-1"},{default:e.withCtx(()=>[e.createVNode(B,{value:"application/json"},{default:e.withCtx(()=>t[25]||(t[25]=[e.createTextVNode("JSON")])),_:1}),e.createVNode(B,{value:"multipart/form-data"},{default:e.withCtx(()=>t[26]||(t[26]=[e.createTextVNode("Form Data")])),_:1}),e.createVNode(B,{value:"text/plain"},{default:e.withCtx(()=>t[27]||(t[27]=[e.createTextVNode("Raw")])),_:1})]),_:1},8,["value"]),w.value==="application/json"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(U,{value:x.value,"onUpdate:value":t[10]||(t[10]=p=>x.value=p),rows:6,placeholder:"请输入 JSON 数据",onInput:ne},null,8,["value"]),k.value?(e.openBlock(),e.createBlock(pe,{key:0,type:"error",message:k.value,banner:"",style:{"margin-bottom":"8px"}},null,8,["message"])):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0),w.value==="multipart/form-data"?(e.openBlock(),e.createBlock(g,{key:1,modelValue:_.value,"onUpdate:modelValue":t[11]||(t[11]=p=>_.value=p),"add-button-text":"添加表单字段","show-preview":!1},null,8,["modelValue"])):e.createCommentVNode("",!0),w.value==="text/plain"?(e.openBlock(),e.createBlock(U,{key:2,value:N.value,"onUpdate:value":t[12]||(t[12]=p=>N.value=p),rows:6,placeholder:"请输入原始数据"},null,8,["value"])):e.createCommentVNode("",!0),e.createElementVNode("pre",null,e.toDisplayString(le.value),1)]),_:1})):e.createCommentVNode("",!0)]),_:1})])}}}),[["__scopeId","data-v-c9f65487"]]);async function Q(o,y="xhr"){return y==="fetch"?Y(o):Z(o)}async function Y(o){var m;const y=o.params.filter(a=>!!a.key).map(a=>`${a.key}=${encodeURIComponent(a.value)}`).join("&"),d=`${o.url}${o.path}${y?"?"+y:""}`,n=new Headers;o.headers.forEach(a=>{a.key&&n.append(a.key,a.value)});const r={method:o.method,headers:n,credentials:"omit"};if(o.auth.type==="Basic"&&o.auth.username&&o.auth.password){const a=btoa(`${o.auth.username}:${o.auth.password}`);n.append("Authorization",`Basic ${a}`)}else o.auth.type==="Bearer"&&o.auth.token&&n.append("Authorization",`Bearer ${o.auth.token}`);if(o.method==="POST"||o.method==="PUT")switch(o.body.type){case"application/json":r.body=o.body.json||"",n.set("Content-Type","application/json; charset=utf-8");break;case"multipart/form-data":const a=new FormData;(m=o.body.formData)==null||m.forEach(u=>{u.key&&a.append(u.key,u.value)}),r.body=a;break;case"text/plain":r.body=o.body.raw||"",n.set("Content-Type","text/plain; charset=utf-8");break}try{const a=await fetch(d,r),u={};a.headers.forEach((c,f)=>{u[f.toLowerCase()]=c});let i="";if((u["content-type"]||"").startsWith("application/json"))try{const c=await a.json();i=JSON.stringify(c,null,2)}catch{i=await a.text()}else i=await a.text();return{status:a.status.toString(),headers:u,body:i}}catch{throw new Error("Request failed")}}async function Z(o){return new Promise((y,d)=>{var i;const n=new XMLHttpRequest,r=o.auth.type==="Basic"?o.auth.username:null,m=o.auth.type==="Basic"?o.auth.password:null,a=o.params.filter(s=>!!s.key).map(s=>`${s.key}=${encodeURIComponent(s.value)}`).join("&"),u=`${o.url}${o.path}${a?"?"+a:""}`;if(n.open(o.method,u,!0,r,m),o.headers.forEach(s=>{s.key&&n.setRequestHeader(s.key,s.value)}),o.auth.type==="Bearer"&&o.auth.token&&n.setRequestHeader("Authorization",`Bearer ${o.auth.token}`),o.method==="POST"||o.method==="PUT"){let s="";switch(o.body.type){case"application/json":s=o.body.json||"",n.setRequestHeader("Content-Type","application/json; charset=utf-8");break;case"multipart/form-data":const c=new FormData;(i=o.body.formData)==null||i.forEach(f=>{f.key&&c.append(f.key,f.value)}),s=c;break;case"text/plain":s=o.body.raw||"",n.setRequestHeader("Content-Type","text/plain; charset=utf-8");break}n.send(s)}else n.send();n.onload=()=>{const s=ee(n),c={status:n.status.toString(),headers:s,body:""};if((s["content-type"]||"").startsWith("application/json"))try{c.body=JSON.stringify(JSON.parse(n.responseText),null,2)}catch{c.body=n.responseText}else c.body=n.responseText;y(c)},n.onerror=()=>{d(new Error("Request failed"))}})}function ee(o){const y=o.getAllResponseHeaders().trim().split(/[\r\n]+/),d={};return y.forEach(function(n){var u;const r=n.split(": "),m=((u=r.shift())==null?void 0:u.toLowerCase())||"",a=r.join(": ");d[m]=a}),d}h.KeyValueInput=g,h.RequestForm=R,h.default=R,h.defaultRequestSchema=j,h.executeRequest=Q,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+${w.value}\r
+`).join("")+`--${i}--\r
+`;case"text/plain":return k.value||"-空-";default:return"-空-"}}),ue=()=>{try{V.value&&(JSON.parse(V.value),x.value="")}catch{x.value="Invalid JSON format"}},fe=()=>{try{const i=u.value,t=new URL(i);u.value=`${t.protocol}//${t.host}`,m.value=t.pathname;const w=new URLSearchParams(t.search),g=[];w.forEach((b,$)=>{g.push({key:$,value:b})}),f.value=g}catch(i){console.error("URL解析失败:",i)}},ye=e.computed(()=>{if(!u.value)return!1;try{const i=u.value,t=new URL(i);return t.search!==""||t.pathname!=="/"}catch{return!1}});return(i,t)=>{const w=e.resolveComponent("a-input"),g=e.resolveComponent("a-button"),b=e.resolveComponent("a-select-option"),$=e.resolveComponent("a-select"),T=e.resolveComponent("a-card"),B=e.resolveComponent("a-radio-button"),D=e.resolveComponent("a-radio-group"),Ve=e.resolveComponent("a-input-password"),R=e.resolveComponent("a-textarea"),xe=e.resolveComponent("a-alert"),Ne=e.resolveComponent("a-form");return e.openBlock(),e.createElementBlock("div",F,[e.createVNode(Ne,{layout:"vertical"},{default:e.withCtx(()=>[e.createVNode(T,{title:"URL配置",class:"form-section",size:"small"},{default:e.withCtx(()=>[e.createElementVNode("div",H,[e.createElementVNode("div",M,[e.createVNode(w,{value:u.value,"onUpdate:value":t[0]||(t[0]=c=>u.value=c),placeholder:"基础URL",size:"small"},null,8,["value"]),ye.value?(e.openBlock(),e.createBlock(g,{key:0,type:"primary",size:"small",onClick:fe},{default:e.withCtx(()=>t[13]||(t[13]=[e.createTextVNode("拆解")])),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",A,[e.createVNode($,{value:r.value,"onUpdate:value":t[1]||(t[1]=c=>r.value=c),class:"w-40",size:"small"},{default:e.withCtx(()=>[e.createVNode(b,{value:"GET"},{default:e.withCtx(()=>t[14]||(t[14]=[e.createTextVNode("GET")])),_:1}),e.createVNode(b,{value:"POST"},{default:e.withCtx(()=>t[15]||(t[15]=[e.createTextVNode("POST")])),_:1}),e.createVNode(b,{value:"PUT"},{default:e.withCtx(()=>t[16]||(t[16]=[e.createTextVNode("PUT")])),_:1}),e.createVNode(b,{value:"DELETE"},{default:e.withCtx(()=>t[17]||(t[17]=[e.createTextVNode("DELETE")])),_:1}),e.createVNode(b,{value:"OPTIONS"},{default:e.withCtx(()=>t[18]||(t[18]=[e.createTextVNode("OPTIONS")])),_:1})]),_:1},8,["value"]),e.createVNode(w,{value:m.value,"onUpdate:value":t[2]||(t[2]=c=>m.value=c),placeholder:"路径",size:"small"},null,8,["value"])])]),e.createElementVNode("div",K,[e.createVNode(E,{modelValue:f.value,"onUpdate:modelValue":t[3]||(t[3]=c=>f.value=c),"add-button-text":"添加参数","show-preview":!0,"preview-text":u.value+m.value+ce.value},null,8,["modelValue","preview-text"])])]),_:1}),e.createVNode(T,{title:"认证方案",class:"form-section",size:"small"},{default:e.withCtx(()=>[e.createVNode(D,{value:n.value,"onUpdate:value":t[4]||(t[4]=c=>n.value=c),"button-style":"solid",size:"small"},{default:e.withCtx(()=>[e.createVNode(B,{value:"none"},{default:e.withCtx(()=>t[19]||(t[19]=[e.createTextVNode("无认证")])),_:1}),e.createVNode(B,{value:"Basic"},{default:e.withCtx(()=>t[20]||(t[20]=[e.createTextVNode("Basic认证")])),_:1}),e.createVNode(B,{value:"Bearer"},{default:e.withCtx(()=>t[21]||(t[21]=[e.createTextVNode("Bearer认证")])),_:1})]),_:1},8,["value"]),n.value==="Basic"?(e.openBlock(),e.createElementBlock("div",G,[e.createElementVNode("div",W,[t[22]||(t[22]=e.createElementVNode("p",{class:"m-0 w-16"},"用户名",-1)),e.createVNode(w,{value:s.value,"onUpdate:value":t[5]||(t[5]=c=>s.value=c),size:"small"},null,8,["value"])]),e.createElementVNode("div",X,[t[23]||(t[23]=e.createElementVNode("p",{class:"m-0 w-16"},"密码",-1)),e.createVNode(Ve,{value:o.value,"onUpdate:value":t[6]||(t[6]=c=>o.value=c),size:"small"},null,8,["value"])])])):e.createCommentVNode("",!0),n.value==="Bearer"?(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",Y,[t[24]||(t[24]=e.createElementVNode("p",{class:"m-0 w-16 h-full"},"Token",-1)),e.createVNode(R,{value:p.value,"onUpdate:value":t[7]||(t[7]=c=>p.value=c),size:"small",class:"mt-1",rows:"4",placeholder:"请输入Token"},null,8,["value"])])])):e.createCommentVNode("",!0)]),_:1}),e.createVNode(T,{title:"请求头",class:"form-section",size:"small"},{default:e.withCtx(()=>[e.createVNode(E,{modelValue:h.value,"onUpdate:modelValue":t[8]||(t[8]=c=>h.value=c),"add-button-text":"添加请求头","show-preview":!1},null,8,["modelValue"])]),_:1}),r.value==="POST"||r.value==="PUT"?(e.openBlock(),e.createBlock(T,{key:0,title:"请求体",class:"form-section",size:"small"},{default:e.withCtx(()=>[e.createVNode(D,{value:N.value,"onUpdate:value":t[9]||(t[9]=c=>N.value=c),"button-style":"solid",size:"small",class:"mb-1"},{default:e.withCtx(()=>[e.createVNode(B,{value:"application/json"},{default:e.withCtx(()=>t[25]||(t[25]=[e.createTextVNode("JSON")])),_:1}),e.createVNode(B,{value:"multipart/form-data"},{default:e.withCtx(()=>t[26]||(t[26]=[e.createTextVNode("Form Data")])),_:1}),e.createVNode(B,{value:"text/plain"},{default:e.withCtx(()=>t[27]||(t[27]=[e.createTextVNode("Raw")])),_:1})]),_:1},8,["value"]),N.value==="application/json"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(R,{value:V.value,"onUpdate:value":t[10]||(t[10]=c=>V.value=c),rows:6,placeholder:"请输入 JSON 数据",onInput:ue},null,8,["value"]),x.value?(e.openBlock(),e.createBlock(xe,{key:0,type:"error",message:x.value,banner:"",style:{"margin-bottom":"8px"}},null,8,["message"])):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0),N.value==="multipart/form-data"?(e.openBlock(),e.createBlock(E,{key:1,modelValue:C.value,"onUpdate:modelValue":t[11]||(t[11]=c=>C.value=c),"add-button-text":"添加表单字段","show-preview":!1},null,8,["modelValue"])):e.createCommentVNode("",!0),N.value==="text/plain"?(e.openBlock(),e.createBlock(R,{key:2,value:k.value,"onUpdate:value":t[12]||(t[12]=c=>k.value=c),rows:6,placeholder:"请输入原始数据"},null,8,["value"])):e.createCommentVNode("",!0),e.createElementVNode("pre",null,e.toDisplayString(me.value),1)]),_:1})):e.createCommentVNode("",!0)]),_:1})])}}}),[["__scopeId","data-v-c9f65487"]]);async function O(a,y="xhr"){return y==="fetch"?Z(a):ee(a)}async function Z(a){var u;const y=a.params.filter(n=>!!n.key).map(n=>`${n.key}=${encodeURIComponent(n.value)}`).join("&"),d=`${a.url}${a.path}${y?"?"+y:""}`,l=new Headers;a.headers.forEach(n=>{n.key&&l.append(n.key,n.value)});const r={method:a.method,headers:l,credentials:"omit"};if(a.auth.type==="Basic"&&a.auth.username&&a.auth.password){const n=btoa(`${a.auth.username}:${a.auth.password}`);l.append("Authorization",`Basic ${n}`)}else a.auth.type==="Bearer"&&a.auth.token&&l.append("Authorization",`Bearer ${a.auth.token}`);if(a.method==="POST"||a.method==="PUT")switch(a.body.type){case"application/json":r.body=a.body.json||"",l.set("Content-Type","application/json; charset=utf-8");break;case"multipart/form-data":const n=new FormData;(u=a.body.formData)==null||u.forEach(m=>{m.key&&n.append(m.key,m.value)}),r.body=n;break;case"text/plain":r.body=a.body.raw||"",l.set("Content-Type","text/plain; charset=utf-8");break}try{const n=await fetch(d,r),m={};n.headers.forEach((p,f)=>{m[f.toLowerCase()]=p});let s="";if((m["content-type"]||"").startsWith("application/json"))try{const p=await n.json();s=JSON.stringify(p,null,2)}catch{s=await n.text()}else s=await n.text();return{status:n.status.toString(),headers:m,body:s}}catch{throw new Error("Request failed")}}async function ee(a){return new Promise((y,d)=>{var s;const l=new XMLHttpRequest,r=a.auth.type==="Basic"?a.auth.username:null,u=a.auth.type==="Basic"?a.auth.password:null,n=a.params.filter(o=>!!o.key).map(o=>`${o.key}=${encodeURIComponent(o.value)}`).join("&"),m=`${a.url}${a.path}${n?"?"+n:""}`;if(l.open(a.method,m,!0,r,u),a.headers.forEach(o=>{o.key&&l.setRequestHeader(o.key,o.value)}),a.auth.type==="Bearer"&&a.auth.token&&l.setRequestHeader("Authorization",`Bearer ${a.auth.token}`),a.method==="POST"||a.method==="PUT"){let o="";switch(a.body.type){case"application/json":o=a.body.json||"",l.setRequestHeader("Content-Type","application/json; charset=utf-8");break;case"multipart/form-data":const p=new FormData;(s=a.body.formData)==null||s.forEach(f=>{f.key&&p.append(f.key,f.value)}),o=p;break;case"text/plain":o=a.body.raw||"",l.setRequestHeader("Content-Type","text/plain; charset=utf-8");break}l.send(o)}else l.send();l.onload=()=>{const o=te(l),p={status:l.status.toString(),headers:o,body:""};if((o["content-type"]||"").startsWith("application/json"))try{p.body=JSON.stringify(JSON.parse(l.responseText),null,2)}catch{p.body=l.responseText}else p.body=l.responseText;y(p)},l.onerror=()=>{d(new Error("Request failed"))}})}function te(a){const y=a.getAllResponseHeaders().trim().split(/[\r\n]+/),d={};return y.forEach(function(l){var m;const r=l.split(": "),u=((m=r.shift())==null?void 0:m.toLowerCase())||"",n=r.join(": ");d[u]=n}),d}const oe={style:{display:"flex","align-items":"center",gap:"8px","margin-bottom":"8px"}},ae={class:"flex flex-col gap-2"},le={class:"flex flex-col gap-1"},ne={key:0,class:"border border-solid border-gray-300 w-full"},re={class:"border border-gray-300"},se={class:"border border-gray-300"},de={key:1},ie=S(e.defineComponent({__name:"ResponseSection",props:{modelValue:{}},setup(a){const y=a,d=e.ref("xhr"),l=e.ref({status:"",headers:{},body:"",timing:0}),r=e.ref(""),u=s=>{const o=Number(s);return o>=200&&o<300?"success":o>=300&&o<400?"warning":o>=400&&o<500||o>=500?"error":"default"},n=s=>s instanceof Error?s.message:"请求失败",m=async()=>{r.value="";const s=Date.now();try{l.value=await O(y.modelValue,d.value),l.value.timing=Date.now()-s}catch(o){r.value=n(o),l.value={status:"Error",headers:{},body:o instanceof Error?o.message:"Request failed",timing:Date.now()-s}}};return(s,o)=>{const p=e.resolveComponent("a-radio-button"),f=e.resolveComponent("a-radio-group"),h=e.resolveComponent("a-button"),C=e.resolveComponent("a-alert"),N=e.resolveComponent("a-tag"),V=e.resolveComponent("a-textarea"),k=e.resolveComponent("a-card");return e.openBlock(),e.createBlock(k,{title:"响应",class:"form-section",size:"small"},{default:e.withCtx(()=>[e.createElementVNode("div",oe,[e.createVNode(f,{value:d.value,"onUpdate:value":o[0]||(o[0]=x=>d.value=x),"button-style":"solid",size:"small"},{default:e.withCtx(()=>[e.createVNode(p,{value:"xhr"},{default:e.withCtx(()=>o[2]||(o[2]=[e.createTextVNode("XMLHttpRequest")])),_:1}),e.createVNode(p,{value:"fetch"},{default:e.withCtx(()=>o[3]||(o[3]=[e.createTextVNode("Fetch")])),_:1})]),_:1},8,["value"]),e.createVNode(h,{type:"primary",onClick:m,size:"small"},{default:e.withCtx(()=>o[4]||(o[4]=[e.createTextVNode("发送")])),_:1})]),r.value?(e.openBlock(),e.createBlock(C,{key:0,message:r.value,type:"error","show-icon":"",style:{"margin-bottom":"8px"}},null,8,["message"])):e.createCommentVNode("",!0),e.createElementVNode("div",ae,[o[7]||(o[7]=e.createElementVNode("div",{class:"text-sm font-bold"},"基本信息",-1)),e.createElementVNode("div",le,[e.createElementVNode("div",null,[o[5]||(o[5]=e.createElementVNode("span",null,"状态码:",-1)),e.createVNode(N,{color:u(l.value.status)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.value.status),1)]),_:1},8,["color"])]),e.createElementVNode("div",null,[o[6]||(o[6]=e.createElementVNode("span",null,"耗时:",-1)),e.createElementVNode("span",null,e.toDisplayString(l.value.timing?`${l.value.timing}ms`:"-"),1)])]),o[8]||(o[8]=e.createElementVNode("div",{class:"text-sm font-bold"},"响应头",-1)),Object.keys(l.value.headers).length>0?(e.openBlock(),e.createElementBlock("table",ne,[e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.entries(l.value.headers),([x,U])=>(e.openBlock(),e.createElementBlock("tr",{key:x},[e.createElementVNode("td",re,e.toDisplayString(x),1),e.createElementVNode("td",se,e.toDisplayString(U),1)]))),128))])])):(e.openBlock(),e.createElementBlock("p",de,"无响应头")),o[9]||(o[9]=e.createElementVNode("div",{class:"text-sm font-bold"},"响应体",-1)),e.createVNode(V,{value:l.value.body,"onUpdate:value":o[1]||(o[1]=x=>l.value.body=x),rows:5,readonly:"",style:{width:"100%"},size:"small"},null,8,["value"])])]),_:1})}}}),[["__scopeId","data-v-1dd2b288"]]);_.KeyValueInput=E,_.RequestForm=q,_.ResponseSection=ie,_.default=q,_.defaultRequestSchema=j,_.executeRequest=O,Object.defineProperties(_,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "vue-api-request-builder",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist",
-    "lib"
+    "dist"
   ],
   "scripts": {
     "dev": "vite",
@@ -21,7 +20,8 @@
   },
   "dependencies": {
     "ant-design-vue": "4.x",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-api-request-builder": "^0.2.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",

package/dist/vue-api-request-builder.css

@@ -1 +0,0 @@
-.key-value-input[data-v-1e5ef051]{width:100%}.empty-state[data-v-1e5ef051]{color:#999;text-align:center;padding:8px 0}.key-value-input[data-v-1e5ef051] .ant-typography pre{background-color:#f5f5f5;padding:4px 8px;border-radius:4px;margin:0;width:100%;overflow-x:auto}.key-value-input[data-v-1e5ef051] .ant-space-item{flex:1}.key-value-input[data-v-1e5ef051] .ant-space-item:first-child{flex:0 0 100px}.key-value-input[data-v-1e5ef051] .ant-space-item:nth-child(2){flex:0 0 200px}.key-value-input[data-v-1e5ef051] .ant-list-item{padding:4px 0}[data-v-1e5ef051] .ant-typography pre{background-color:#f5f5f5;padding:8px;border-radius:4px;margin:0;width:100%;overflow-x:auto;max-height:60px;font-size:12px;line-height:1.5}.request-form[data-v-c9f65487]{margin:0;padding:0}.request-form[data-v-c9f65487] *{font-size:.9rem}.form-section[data-v-c9f65487]{margin-bottom:8px;width:100%}[data-v-c9f65487] .ant-card-head{background-color:#fafafa}[data-v-c9f65487] .ant-card-head-title{font-weight:500;padding:4px 0}[data-v-c9f65487] .ant-card-body{padding:8px 12px}[data-v-c9f65487] .ant-space{width:100%;display:flex;gap:8px;align-items:center}pre[data-v-c9f65487]{background-color:#f5f5f5;padding:8px;border-radius:4px;margin:0;width:100%;overflow-x:auto}

package/lib/components/KeyValueInput.vue

@@ -1,144 +0,0 @@
-<template>
-  <div class="key-value-input flex flex-col gap-1">
-    <div class="flex gap-2">
-      <a-button type="primary" @click="addItem" class="w-40 max-w-full" size="small">
-        {{ addButtonText }}
-      </a-button>
-      <a-popconfirm
-        title="确认清空"
-        description="确定要清空所有参数吗？"
-        ok-text="确认"
-        cancel-text="取消"
-        @confirm="clearItems"
-      >
-        <a-button type="primary" danger class="w-40 max-w-full" size="small" :disabled="items.length === 0">
-          清空
-        </a-button>
-      </a-popconfirm>
-    </div>
-
-    <template v-if="items.length > 0">
-      <div class="flex flex-col gap-1">
-        <div v-for="(item, index) in items" :key="index" class="flex">
-          <div class="flex w-full gap-1 items-center">
-            <a-button type="primary" danger @click="removeItem(index)" class="w-16" size="small">
-              删除
-            </a-button>
-            <a-input v-model:value="item.key" placeholder="键" style="width: 60%" size="small" />
-            <a-input v-model:value="item.value" placeholder="值" style="width: 100%" size="small" />
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <a-typography v-if="showPreview" class="m-0">
-      <a-typography-paragraph class="!m-0">
-        <pre>{{ previewText }}</pre>
-      </a-typography-paragraph>
-    </a-typography>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from "vue";
-
-interface KeyValueItem {
-  key: string;
-  value: string;
-}
-
-interface Props {
-  modelValue: KeyValueItem[];
-  addButtonText?: string;
-  showPreview?: boolean;
-  previewText?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  addButtonText: "添加参数",
-  showPreview: false,
-  previewText: "",
-});
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: KeyValueItem[]): void;
-}>();
-
-const items = ref<KeyValueItem[]>(props.modelValue);
-
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    items.value = newValue;
-  }
-);
-
-watch(
-  items,
-  (newValue) => {
-    emit("update:modelValue", newValue);
-  },
-  { deep: true }
-);
-
-const addItem = () => {
-  items.value.push({ key: "", value: "" });
-};
-
-const removeItem = (index: number) => {
-  items.value.splice(index, 1);
-};
-
-const clearItems = () => {
-  items.value = [];
-};
-</script>
-
-<style scoped>
-.key-value-input {
-  width: 100%;
-}
-
-.empty-state {
-  color: #999;
-  text-align: center;
-  padding: 8px 0;
-}
-
-.key-value-input :deep(.ant-typography pre) {
-  background-color: #f5f5f5;
-  padding: 4px 8px;
-  border-radius: 4px;
-  margin: 0;
-  width: 100%;
-  overflow-x: auto;
-}
-
-.key-value-input :deep(.ant-space-item) {
-  flex: 1;
-}
-
-.key-value-input :deep(.ant-space-item:first-child) {
-  flex: 0 0 100px;
-}
-
-.key-value-input :deep(.ant-space-item:nth-child(2)) {
-  flex: 0 0 200px;
-}
-
-.key-value-input :deep(.ant-list-item) {
-  padding: 4px 0;
-}
-
-:deep(.ant-typography pre) {
-  background-color: #f5f5f5;
-  padding: 8px;
-  border-radius: 4px;
-  margin: 0;
-  width: 100%;
-  overflow-x: auto;
-  max-height: 60px;
-  font-size: 12px;
-  line-height: 1.5;
-}
-</style>

package/lib/components/RequestForm.vue

@@ -1,388 +0,0 @@
-<template>
-  <div class="request-form">
-    <a-form layout="vertical">
-      <!-- 请求部分 -->
-      <a-card title="URL配置" class="form-section" size="small">
-        <div class="flex flex-col gap-1">
-          <div class="flex flex-row gap-1">
-            <a-input v-model:value="url" placeholder="基础URL" size="small" />
-            <a-button v-if="canParseUrl" type="primary" size="small" @click="parseUrl"
-              >拆解</a-button
-            >
-          </div>
-          <div class="flex flex-row gap-1">
-            <a-select v-model:value="method" class="w-40" size="small">
-              <a-select-option value="GET">GET</a-select-option>
-              <a-select-option value="POST">POST</a-select-option>
-              <a-select-option value="PUT">PUT</a-select-option>
-              <a-select-option value="DELETE">DELETE</a-select-option>
-              <a-select-option value="OPTIONS">OPTIONS</a-select-option>
-            </a-select>
-            <a-input v-model:value="path" placeholder="路径" size="small" />
-          </div>
-        </div>
-
-        <!-- URL参数拼接部分 -->
-        <div class="mt-1">
-          <KeyValueInput
-            v-model="params"
-            add-button-text="添加参数"
-            :show-preview="true"
-            :preview-text="url + path + queryString"
-          />
-        </div>
-      </a-card>
-
-      <!-- 认证部分 -->
-      <a-card title="认证方案" class="form-section" size="small">
-        <a-radio-group v-model:value="auth" button-style="solid" size="small">
-          <a-radio-button value="none">无认证</a-radio-button>
-          <a-radio-button value="Basic">Basic认证</a-radio-button>
-          <a-radio-button value="Bearer">Bearer认证</a-radio-button>
-        </a-radio-group>
-
-        <template v-if="auth === 'Basic'">
-          <div class="flex flex-col gap-1 mt-2">
-            <div class="flex flex-row gap-1 h-6">
-              <p class="m-0 w-16">用户名</p>
-              <a-input v-model:value="httpUser" size="small" />
-            </div>
-            <div class="flex flex-row gap-1">
-              <p class="m-0 w-16">密码</p>
-              <a-input-password v-model:value="httpPassword" size="small" />
-            </div>
-          </div>
-        </template>
-        <template v-if="auth === 'Bearer'">
-          <div class="flex flex-col gap-1 mt-1">
-            <div class="flex flex-row gap-1 items-center">
-              <p class="m-0 w-16 h-full">Token</p>
-              <a-textarea
-                v-model:value="httpToken"
-                size="small"
-                class="mt-1"
-                rows="4"
-                placeholder="请输入Token"
-              />
-            </div>
-          </div>
-        </template>
-      </a-card>
-
-      <!-- 请求头部分 -->
-      <a-card title="请求头" class="form-section" size="small">
-        <KeyValueInput v-model="headers" add-button-text="添加请求头" :show-preview="false" />
-      </a-card>
-
-      <!-- 请求体部分 -->
-      <a-card
-        v-if="method === 'POST' || method === 'PUT'"
-        title="请求体"
-        class="form-section"
-        size="small"
-      >
-        <a-radio-group v-model:value="contentType" button-style="solid" size="small" class="mb-1">
-          <a-radio-button value="application/json">JSON</a-radio-button>
-          <a-radio-button value="multipart/form-data">Form Data</a-radio-button>
-          <a-radio-button value="text/plain">Raw</a-radio-button>
-        </a-radio-group>
-
-        <!-- JSON 输入 -->
-        <template v-if="contentType === 'application/json'">
-          <a-textarea
-            v-model:value="jsonBody"
-            :rows="6"
-            placeholder="请输入 JSON 数据"
-            @input="handleJsonInput"
-          />
-          <a-alert
-            v-if="jsonError"
-            type="error"
-            :message="jsonError"
-            banner
-            style="margin-bottom: 8px"
-          />
-        </template>
-
-        <!-- Form Data 输入 -->
-        <template v-if="contentType === 'multipart/form-data'">
-          <KeyValueInput
-            v-model="bodyParams"
-            add-button-text="添加表单字段"
-            :show-preview="false"
-          />
-        </template>
-
-        <!-- Raw 输入 -->
-        <template v-if="contentType === 'text/plain'">
-          <a-textarea v-model:value="rawBody" :rows="6" placeholder="请输入原始数据" />
-        </template>
-
-        <!-- 预览部分 -->
-        <pre>{{ requestBodyPreview }}</pre>
-      </a-card>
-    </a-form>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from "vue";
-import KeyValueInput from "./KeyValueInput.vue";
-import type { RequestSchema, KeyValuePair } from "../types/request";
-import { defaultRequestSchema } from "../types/request";
-
-interface Props {
-  modelValue?: RequestSchema;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => defaultRequestSchema,
-});
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: RequestSchema): void;
-}>();
-
-// 响应式状态
-const method = ref(props.modelValue.method);
-const url = ref(props.modelValue.url);
-const auth = ref(props.modelValue.auth.type);
-const path = ref(props.modelValue.path);
-const httpUser = ref(props.modelValue.auth.username || "");
-const httpPassword = ref(props.modelValue.auth.password || "");
-const httpToken = ref(props.modelValue.auth.token || "");
-const params = ref<KeyValuePair[]>(props.modelValue.params);
-const headers = ref<KeyValuePair[]>(props.modelValue.headers);
-const bodyParams = ref<KeyValuePair[]>(props.modelValue.body.formData || []);
-const contentType = ref(props.modelValue.body.type);
-const jsonBody = ref(props.modelValue.body.json || "");
-const rawBody = ref(props.modelValue.body.raw || "");
-const jsonError = ref("");
-
-// 创建一个防抖函数
-function debounce<T extends (...args: any[]) => any>(fn: T, delay: number) {
-  let timeoutId: ReturnType<typeof setTimeout>;
-  return function (this: any, ...args: Parameters<T>) {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => fn.apply(this, args), delay);
-  };
-}
-
-// 创建一个生成schema的函数
-const generateSchema = () => {
-  return {
-    method: method.value,
-    url: url.value,
-    path: path.value,
-    auth: {
-      type: auth.value,
-      ...(auth.value === "Basic"
-        ? {
-            username: httpUser.value,
-            password: httpPassword.value,
-          }
-        : auth.value === "Bearer"
-        ? {
-            token: httpToken.value,
-          }
-        : {}),
-    },
-    params: params.value,
-    headers: headers.value,
-    body: {
-      type: contentType.value,
-      ...(contentType.value === "application/json"
-        ? { json: jsonBody.value }
-        : contentType.value === "multipart/form-data"
-        ? { formData: bodyParams.value }
-        : { raw: rawBody.value }),
-    },
-  };
-};
-
-// 创建一个更新schema的函数
-const updateSchema = debounce(() => {
-  emit("update:modelValue", generateSchema());
-}, 100);
-
-// 监听内部状态变化
-watch(
-  [
-    method,
-    url,
-    path,
-    auth,
-    httpUser,
-    httpPassword,
-    httpToken,
-    params,
-    headers,
-    contentType,
-    bodyParams,
-    jsonBody,
-    rawBody,
-  ],
-  () => {
-    updateSchema();
-  },
-  { deep: true }
-);
-
-// 监听外部变化
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    const currentSchema = generateSchema();
-    // 防止循环更新
-    if (JSON.stringify(newValue) === JSON.stringify(currentSchema)) {
-      return;
-    }
-
-    method.value = newValue.method;
-    url.value = newValue.url;
-    path.value = newValue.path;
-    auth.value = newValue.auth.type;
-    httpUser.value = newValue.auth.username || "";
-    httpPassword.value = newValue.auth.password || "";
-    httpToken.value = newValue.auth.token || "";
-    params.value = newValue.params;
-    headers.value = newValue.headers;
-    contentType.value = newValue.body.type;
-    bodyParams.value = newValue.body.formData || [];
-    jsonBody.value = newValue.body.json || "";
-    rawBody.value = newValue.body.raw || "";
-  },
-  { deep: true }
-);
-
-// 计算属性
-const queryString = computed(() => {
-  const result = params.value
-    .filter((p) => !!p.key)
-    .map((p) => p.key + "=" + encodeURIComponent(p.value))
-    .join("&");
-  return result === "" ? "" : "?" + result;
-});
-
-const requestBodyPreview = computed(() => {
-  switch (contentType.value) {
-    case "application/json":
-      try {
-        if (!jsonBody.value) {
-          return "-空-";
-        }
-        return JSON.stringify(JSON.parse(jsonBody.value), null, 2);
-      } catch (e) {
-        return "Invalid JSON";
-      }
-    case "multipart/form-data":
-      const boundary = "----WebKitFormBoundaryPreview";
-      const formData = bodyParams.value
-        .filter((p) => !!p.key)
-        .map(
-          (p) =>
-            `--${boundary}\r\nContent-Disposition: form-data; name="${p.key}"\r\n\r\n${p.value}\r\n`
-        )
-        .join("");
-      return formData + `--${boundary}--\r\n`;
-    case "text/plain":
-      return rawBody.value || "-空-";
-    default:
-      return "-空-";
-  }
-});
-
-const handleJsonInput = () => {
-  try {
-    if (jsonBody.value) {
-      JSON.parse(jsonBody.value);
-      jsonError.value = "";
-    }
-  } catch (e) {
-    jsonError.value = "Invalid JSON format";
-  }
-};
-
-const parseUrl = () => {
-  try {
-    const fullUrl = url.value;
-    const urlObj = new URL(fullUrl);
-
-    // 设置基础URL
-    url.value = `${urlObj.protocol}//${urlObj.host}`;
-
-    // 设置路径
-    path.value = urlObj.pathname;
-
-    // 解析查询参数
-    const searchParams = new URLSearchParams(urlObj.search);
-    const newParams: KeyValuePair[] = [];
-    searchParams.forEach((value, key) => {
-      newParams.push({ key, value });
-    });
-    params.value = newParams;
-  } catch (error) {
-    // 如果URL解析失败，显示错误提示
-    console.error("URL解析失败:", error);
-  }
-};
-
-const canParseUrl = computed(() => {
-  if (!url.value) return false;
-
-  try {
-    const fullUrl = url.value;
-    const urlObj = new URL(fullUrl);
-
-    // 检查是否有查询参数或路径
-    return urlObj.search !== "" || urlObj.pathname !== "/";
-  } catch {
-    return false;
-  }
-});
-</script>
-
-<style scoped>
-.request-form {
-  margin: 0;
-  padding: 0px;
-}
-
-.request-form * {
-  font-size: 0.9rem;
-}
-
-.form-section {
-  margin-bottom: 8px;
-  width: 100%;
-}
-
-:deep(.ant-card-head) {
-  background-color: #fafafa;
-}
-
-:deep(.ant-card-head-title) {
-  font-weight: 500;
-  padding: 4px 0;
-}
-
-:deep(.ant-card-body) {
-  padding: 8px 12px;
-}
-
-:deep(.ant-space) {
-  width: 100%;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-pre {
-  background-color: #f5f5f5;
-  padding: 8px;
-  border-radius: 4px;
-  margin: 0;
-  width: 100%;
-  overflow-x: auto;
-}
-</style>