vue-api-request-builder 0.2.0 → 0.2.2

package/README.md

@@ -19,26 +19,6 @@ pnpm add vue-api-request-builder
 
 ### Basic Usage
 
-```vue
-<template>
-  <RequestForm v-model="requestSchema" @update:modelValue="handleSchemaChange" />
-  <ResponseSection v-model="requestSchema" />
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { RequestForm, ResponseSection, type RequestSchema, defaultRequestSchema } from 'vue-api-request-builder';
-
-const requestSchema = ref<RequestSchema>(defaultRequestSchema);
-
-const handleSchemaChange = (newSchema: RequestSchema) => {
-  console.log("Schema changed:", newSchema);
-};
-</script>
-```
-
-### Advanced Usage with Preview
-
 ```vue
 <template>
   <div class="app-container">
@@ -48,7 +28,7 @@ const handleSchemaChange = (newSchema: RequestSchema) => {
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref } from 'vue';
 import { RequestForm, ResponseSection, type RequestSchema, defaultRequestSchema } from 'vue-api-request-builder';
 
 const requestSchema = ref<RequestSchema>(defaultRequestSchema);

package/dist/index.css

@@ -0,0 +1 @@
+*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }[rows~="4"]{grid-template-rows:repeat(4,minmax(0,1fr))}[rows~="5"]{grid-template-rows:repeat(5,minmax(0,1fr))}[rows~="6"]{grid-template-rows:repeat(6,minmax(0,1fr))}.\!m-0{margin:0!important}.m-0{margin:0}.mb-1{margin-bottom:.25rem}.ms{margin-inline-start:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.h-6{height:1.5rem}.h-full{height:100%}.max-w-50\%{max-width:50%}.w-16{width:4rem}.w-40{width:10rem}.w-full{width:100%}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.table{display:table}.items-center{align-items:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.border{border-width:1px}.border-gray-300{--un-border-opacity:1;border-color:rgb(209 213 219 / var(--un-border-opacity))}.border-solid{border-style:solid}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.key-value-input[data-v-eef3e490]{width:100%}.empty-state[data-v-eef3e490]{color:#999;text-align:center;padding:8px 0}.key-value-input[data-v-eef3e490] .ant-typography pre{background-color:#f5f5f5;padding:4px 8px;border-radius:4px;margin:0;width:100%;overflow-x:auto}.key-value-input[data-v-eef3e490] .ant-space-item{flex:1}.key-value-input[data-v-eef3e490] .ant-space-item:first-child{flex:0 0 100px}.key-value-input[data-v-eef3e490] .ant-space-item:nth-child(2){flex:0 0 200px}.key-value-input[data-v-eef3e490] .ant-list-item{padding:4px 0}[data-v-eef3e490] .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}.form-section[data-v-1dd2b288]{margin-bottom:8px}.response-section[data-v-1dd2b288]{margin-bottom:16px}.section-title[data-v-1dd2b288]{font-size:14px;font-weight:500;color:#1f1f1f;margin-bottom:8px;padding-left:4px;border-left:3px solid #1890ff}[data-v-1dd2b288] .ant-card-head{background-color:#fafafa}[data-v-1dd2b288] .ant-card-head-title{font-weight:500;padding:4px 0}[data-v-1dd2b288] .ant-card-body{padding:8px 12px}[data-v-1dd2b288] .ant-descriptions-item-label{font-weight:500}

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as H, ref as w, watch as C, resolveComponent as c, createElementBlock as $, openBlock as _, createElementVNode as p, createCommentVNode as R, createBlock as O, createVNode as s, withCtx as r, createTextVNode as b, toDisplayString as z, Fragment as F, renderList as K, computed as J } from "vue";
+import { defineComponent as H, ref as x, watch as C, resolveComponent as c, createElementBlock as $, openBlock as _, createElementVNode as p, createCommentVNode as R, createBlock as O, createVNode as s, withCtx as r, createTextVNode as b, toDisplayString as z, Fragment as F, renderList as K, computed as J } from "vue";
 const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex gap-2" }, ne = {
   key: 0,
   class: "flex flex-col gap-1"
@@ -12,7 +12,7 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
   },
   emits: ["update:modelValue"],
   setup(a, { emit: g }) {
-    const d = a, o = g, n = w(d.modelValue);
+    const d = a, o = g, n = x(d.modelValue);
     C(
       () => d.modelValue,
       (u) => {
@@ -33,13 +33,13 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
       n.value = [];
     };
     return (u, t) => {
-      const v = c("a-button"), x = c("a-popconfirm"), j = c("a-input"), B = c("a-typography-paragraph"), U = c("a-typography");
+      const v = c("a-button"), w = c("a-popconfirm"), j = c("a-input"), B = c("a-typography-paragraph"), U = c("a-typography");
       return _(), $("div", le, [
         p("div", se, [
           s(v, {
             type: "primary",
             onClick: y,
-            class: "w-40 max-w-full",
+            class: "w-full max-w-50%",
             size: "small"
           }, {
             default: r(() => [
@@ -47,7 +47,8 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
             ]),
             _: 1
           }),
-          s(x, {
+          s(w, {
+            class: "w-full max-w-50%",
             title: "确认清空",
             description: "确定要清空所有参数吗？",
             "ok-text": "确认",
@@ -58,8 +59,8 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
               s(v, {
                 type: "primary",
                 danger: "",
-                class: "w-40 max-w-full",
                 size: "small",
+                class: "w-full",
                 disabled: n.value.length === 0
               }, {
                 default: r(() => t[0] || (t[0] = [
@@ -128,7 +129,7 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
   for (const [o, n] of g)
     d[o] = n;
   return d;
-}, L = /* @__PURE__ */ M(re, [["__scopeId", "data-v-1e5ef051"]]), de = {
+}, L = /* @__PURE__ */ M(re, [["__scopeId", "data-v-eef3e490"]]), de = {
   method: "GET",
   url: "https://yesno.wtf",
   path: "/api",
@@ -146,14 +147,14 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
 }, ye = { class: "flex flex-row gap-1 h-6" }, _e = { class: "flex flex-row gap-1" }, be = {
   key: 1,
   class: "flex flex-col gap-1 mt-1"
-}, xe = { class: "flex flex-row gap-1 items-center" }, we = /* @__PURE__ */ H({
+}, we = { class: "flex flex-row gap-1 items-center" }, xe = /* @__PURE__ */ H({
   __name: "RequestForm",
   props: {
     modelValue: { default: () => de }
   },
   emits: ["update:modelValue"],
   setup(a, { emit: g }) {
-    const d = a, o = g, n = w(d.modelValue.method), y = w(d.modelValue.url), l = w(d.modelValue.auth.type), f = w(d.modelValue.path), u = w(d.modelValue.auth.username || ""), t = w(d.modelValue.auth.password || ""), v = w(d.modelValue.auth.token || ""), x = w(d.modelValue.params), j = w(d.modelValue.headers), B = w(d.modelValue.body.formData || []), U = w(d.modelValue.body.type), k = w(d.modelValue.body.json || ""), S = w(d.modelValue.body.raw || ""), h = w("");
+    const d = a, o = g, n = x(d.modelValue.method), y = x(d.modelValue.url), l = x(d.modelValue.auth.type), f = x(d.modelValue.path), u = x(d.modelValue.auth.username || ""), t = x(d.modelValue.auth.password || ""), v = x(d.modelValue.auth.token || ""), w = x(d.modelValue.params), j = x(d.modelValue.headers), B = x(d.modelValue.body.formData || []), U = x(d.modelValue.body.type), k = x(d.modelValue.body.json || ""), S = x(d.modelValue.body.raw || ""), h = x("");
     function N(i, e) {
       let T;
       return function(...E) {
@@ -173,7 +174,7 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
           token: v.value
         } : {}
       },
-      params: x.value,
+      params: w.value,
       headers: j.value,
       body: {
         type: U.value,
@@ -191,7 +192,7 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
         u,
         t,
         v,
-        x,
+        w,
         j,
         U,
         B,
@@ -206,12 +207,12 @@ const le = { class: "key-value-input flex flex-col gap-1" }, se = { class: "flex
       () => d.modelValue,
       (i) => {
         const e = A();
-        JSON.stringify(i) !== JSON.stringify(e) && (n.value = i.method, y.value = i.url, f.value = i.path, l.value = i.auth.type, u.value = i.auth.username || "", t.value = i.auth.password || "", v.value = i.auth.token || "", x.value = i.params, j.value = i.headers, U.value = i.body.type, B.value = i.body.formData || [], k.value = i.body.json || "", S.value = i.body.raw || "");
+        JSON.stringify(i) !== JSON.stringify(e) && (n.value = i.method, y.value = i.url, f.value = i.path, l.value = i.auth.type, u.value = i.auth.username || "", t.value = i.auth.password || "", v.value = i.auth.token || "", w.value = i.params, j.value = i.headers, U.value = i.body.type, B.value = i.body.formData || [], k.value = i.body.json || "", S.value = i.body.raw || "");
       },
       { deep: !0 }
     );
     const X = J(() => {
-      const i = x.value.filter((e) => !!e.key).map((e) => e.key + "=" + encodeURIComponent(e.value)).join("&");
+      const i = w.value.filter((e) => !!e.key).map((e) => e.key + "=" + encodeURIComponent(e.value)).join("&");
       return i === "" ? "" : "?" + i;
     }), Q = J(() => {
       switch (U.value) {
@@ -249,7 +250,7 @@ ${T.value}\r
         const T = new URLSearchParams(e.search), E = [];
         T.forEach((V, D) => {
           E.push({ key: D, value: V });
-        }), x.value = E;
+        }), w.value = E;
       } catch (i) {
         console.error("URL解析失败:", i);
       }
@@ -344,8 +345,8 @@ ${T.value}\r
                 ]),
                 p("div", fe, [
                   s(L, {
-                    modelValue: x.value,
-                    "onUpdate:modelValue": e[3] || (e[3] = (m) => x.value = m),
+                    modelValue: w.value,
+                    "onUpdate:modelValue": e[3] || (e[3] = (m) => w.value = m),
                     "add-button-text": "添加参数",
                     "show-preview": !0,
                     "preview-text": y.value + f.value + X.value
@@ -407,7 +408,7 @@ ${T.value}\r
                   ])
                 ])) : R("", !0),
                 l.value === "Bearer" ? (_(), $("div", be, [
-                  p("div", xe, [
+                  p("div", we, [
                     e[24] || (e[24] = p("p", { class: "m-0 w-16 h-full" }, "Token", -1)),
                     s(I, {
                       value: v.value,
@@ -513,7 +514,7 @@ ${T.value}\r
       ]);
     };
   }
-}), Ee = /* @__PURE__ */ M(we, [["__scopeId", "data-v-c9f65487"]]);
+}), Ee = /* @__PURE__ */ M(xe, [["__scopeId", "data-v-c9f65487"]]);
 async function ge(a, g = "xhr") {
   return g === "fetch" ? ke(a) : he(a);
 }
@@ -549,8 +550,8 @@ async function ke(a) {
     }
   try {
     const l = await fetch(d, n), f = {};
-    l.headers.forEach((v, x) => {
-      f[x.toLowerCase()] = v;
+    l.headers.forEach((v, w) => {
+      f[w.toLowerCase()] = v;
     });
     let u = "";
     if ((f["content-type"] || "").startsWith("application/json"))
@@ -585,8 +586,8 @@ async function he(a) {
           break;
         case "multipart/form-data":
           const v = new FormData();
-          (u = a.body.formData) == null || u.forEach((x) => {
-            x.key && v.append(x.key, x.value);
+          (u = a.body.formData) == null || u.forEach((w) => {
+            w.key && v.append(w.key, w.value);
           }), t = v;
           break;
         case "text/plain":
@@ -633,12 +634,12 @@ const Te = { style: { display: "flex", "align-items": "center", gap: "8px", "mar
     modelValue: {}
   },
   setup(a) {
-    const g = a, d = w("xhr"), o = w({
+    const g = a, d = x("xhr"), o = x({
       status: "",
       headers: {},
       body: "",
       timing: 0
-    }), n = w(""), y = (u) => {
+    }), n = x(""), y = (u) => {
       const t = Number(u);
       return t >= 200 && t < 300 ? "success" : t >= 300 && t < 400 ? "warning" : t >= 400 && t < 500 || t >= 500 ? "error" : "default";
     }, l = (u) => u instanceof Error ? u.message : "请求失败", f = async () => {
@@ -656,7 +657,7 @@ const Te = { style: { display: "flex", "align-items": "center", gap: "8px", "mar
       }
     };
     return (u, t) => {
-      const v = c("a-radio-button"), x = c("a-radio-group"), j = c("a-button"), B = c("a-alert"), U = c("a-tag"), k = c("a-textarea"), S = c("a-card");
+      const v = c("a-radio-button"), w = c("a-radio-group"), j = c("a-button"), B = c("a-alert"), U = c("a-tag"), k = c("a-textarea"), S = c("a-card");
       return _(), O(S, {
         title: "响应",
         class: "form-section",
@@ -664,7 +665,7 @@ const Te = { style: { display: "flex", "align-items": "center", gap: "8px", "mar
       }, {
         default: r(() => [
           p("div", Te, [
-            s(x, {
+            s(w, {
               value: d.value,
               "onUpdate:value": t[0] || (t[0] = (h) => d.value = h),
               "button-style": "solid",

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(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
+(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-full max-w-50%",size:"small"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.addButtonText),1)]),_:1}),e.createVNode(f,{class:"w-full max-w-50%",title:"确认清空",description:"确定要清空所有参数吗？","ok-text":"确认","cancel-text":"取消",onConfirm:m},{default:e.withCtx(()=>[e.createVNode(p,{type:"primary",danger:"",size:"small",class:"w-full",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-eef3e490"]]),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
 ${w.value}\r

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "vue-api-request-builder",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist",
-    "lib"
+    "dist"
   ],
   "scripts": {
     "dev": "vite",
+    "test": "vite --config vite.test.config.ts",
+    "build:all": "npm run build && npm run build:static",
     "build": "vue-tsc -b && vite build --config vite.lib.config.ts",
     "build:static": "vue-tsc -b && vite build",
     "preview": "vite preview"
@@ -22,7 +23,7 @@
   "dependencies": {
     "ant-design-vue": "4.x",
     "vue": "^3.5.13",
-    "vue-api-request-builder": "^0.1.0"
+    "vue-api-request-builder": "^0.2.1"
   },
   "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}.form-section[data-v-1dd2b288]{margin-bottom:8px}.response-section[data-v-1dd2b288]{margin-bottom:16px}.section-title[data-v-1dd2b288]{font-size:14px;font-weight:500;color:#1f1f1f;margin-bottom:8px;padding-left:4px;border-left:3px solid #1890ff}[data-v-1dd2b288] .ant-card-head{background-color:#fafafa}[data-v-1dd2b288] .ant-card-head-title{font-weight:500;padding:4px 0}[data-v-1dd2b288] .ant-card-body{padding:8px 12px}[data-v-1dd2b288] .ant-descriptions-item-label{font-weight:500}

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>

package/lib/components/ResponseSection.vue

@@ -1,144 +0,0 @@
-<template>
-  <a-card title="响应" class="form-section" size="small">
-    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
-      <a-radio-group v-model:value="requestMethod" button-style="solid" size="small">
-        <a-radio-button value="xhr">XMLHttpRequest</a-radio-button>
-        <a-radio-button value="fetch">Fetch</a-radio-button>
-      </a-radio-group>
-      <a-button type="primary" @click="sendRequest" size="small">发送</a-button>
-    </div>
-
-    <a-alert
-      v-if="errorMessage"
-      :message="errorMessage"
-      type="error"
-      show-icon
-      style="margin-bottom: 8px"
-    />
-
-    <div class="flex flex-col gap-2">
-      <div class="text-sm font-bold">基本信息</div>
-      <div class="flex flex-col gap-1">
-        <div>
-          <span>状态码:</span>
-          <a-tag :color="getStatusColor(response.status)">{{ response.status }}</a-tag>
-        </div>
-        <div>
-          <span>耗时:</span>
-          <span>{{ response.timing ? `${response.timing}ms` : "-" }}</span>
-        </div>
-      </div>
-      <div class="text-sm font-bold">响应头</div>
-      <template v-if="Object.keys(response.headers).length > 0">
-        <table class="border border-solid border-gray-300 w-full">
-          <tbody>
-            <tr v-for="[key, value] in Object.entries(response.headers)" :key="key">
-              <td class="border border-gray-300">{{ key }}</td>
-              <td class="border border-gray-300">{{ value }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </template>
-      <p v-else>无响应头</p>
-      <div class="text-sm font-bold">响应体</div>
-      <a-textarea
-        v-model:value="response.body"
-        :rows="5"
-        readonly
-        style="width: 100%"
-        size="small"
-      />
-    </div>
-  </a-card>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import type { RequestSchema, ResponseData } from "../types/request";
-import { executeRequest, type RequestMethod } from "../utils/request";
-
-interface Props {
-  modelValue: RequestSchema;
-}
-
-const props = defineProps<Props>();
-
-const requestMethod = ref<RequestMethod>("xhr");
-const response = ref<ResponseData>({
-  status: "",
-  headers: {},
-  body: "",
-  timing: 0,
-});
-const errorMessage = ref<string>("");
-
-const getStatusColor = (status: string | number): string => {
-  const statusNum = Number(status);
-  if (statusNum >= 200 && statusNum < 300) return "success";
-  if (statusNum >= 300 && statusNum < 400) return "warning";
-  if (statusNum >= 400 && statusNum < 500) return "error";
-  if (statusNum >= 500) return "error";
-  return "default";
-};
-
-const getErrorMessage = (error: unknown): string => {
-  if (error instanceof Error) {
-    return error.message;
-  }
-
-  return "请求失败";
-};
-
-const sendRequest = async () => {
-  errorMessage.value = "";
-  const startTime = Date.now();
-  try {
-    response.value = await executeRequest(props.modelValue, requestMethod.value);
-    response.value.timing = Date.now() - startTime;
-  } catch (error) {
-    errorMessage.value = getErrorMessage(error);
-    response.value = {
-      status: "Error",
-      headers: {},
-      body: error instanceof Error ? error.message : "Request failed",
-      timing: Date.now() - startTime,
-    };
-  }
-};
-</script>
-
-<style scoped>
-.form-section {
-  margin-bottom: 8px;
-}
-
-.response-section {
-  margin-bottom: 16px;
-}
-
-.section-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: #1f1f1f;
-  margin-bottom: 8px;
-  padding-left: 4px;
-  border-left: 3px solid #1890ff;
-}
-
-: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-descriptions-item-label) {
-  font-weight: 500;
-}
-</style>

package/lib/index.ts

@@ -1,19 +0,0 @@
-import RequestForm from './components/RequestForm.vue';
-import ResponseSection from './components/ResponseSection.vue';
-import KeyValueInput from './components/KeyValueInput.vue';
-import type { RequestSchema, KeyValuePair, ResponseData } from './types/request';
-import { defaultRequestSchema } from './types/request';
-import { executeRequest } from './utils/request';
-
-export {
-  RequestForm,
-  ResponseSection,
-  KeyValueInput,
-  type RequestSchema,
-  type KeyValuePair,
-  type ResponseData,
-  defaultRequestSchema,
-  executeRequest
-};
-
-export default RequestForm; 

package/lib/types/request.ts

@@ -1,55 +0,0 @@
-// 基础键值对类型
-export interface KeyValuePair {
-  key: string;
-  value: string;
-}
-
-// 认证相关类型
-export interface AuthConfig {
-  type: 'none' | 'Basic' | 'Bearer';
-  username?: string;
-  password?: string;
-  token?: string;
-}
-
-// 请求体类型
-export interface RequestBody {
-  type: 'application/json' | 'multipart/form-data' | 'text/plain';
-  json?: string;
-  formData?: KeyValuePair[];
-  raw?: string;
-}
-
-// 响应类型
-export interface ResponseData {
-  status: string;
-  headers: Record<string, string>;
-  body: string;
-  timing?: number;
-}
-
-// 完整的请求Schema类型
-export interface RequestSchema {
-  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'OPTIONS';
-  url: string;
-  path: string;
-  auth: AuthConfig;
-  params: KeyValuePair[];
-  headers: KeyValuePair[];
-  body: RequestBody;
-}
-
-// 默认的请求Schema
-export const defaultRequestSchema: RequestSchema = {
-  method: 'GET',
-  url: 'https://yesno.wtf',
-  path: '/api',
-  auth: {
-    type: 'none'
-  },
-  params: [],
-  headers: [],
-  body: {
-    type: 'application/json'
-  },
-};

package/lib/utils/request.ts

@@ -1,194 +0,0 @@
-import type { RequestSchema, ResponseData } from '../types/request';
-
-export type RequestMethod = 'fetch' | 'xhr';
-
-export async function executeRequest(schema: RequestSchema, method: RequestMethod = 'xhr'): Promise<ResponseData> {
-  if (method === 'fetch') {
-    return executeFetchRequest(schema);
-  } else {
-    return executeXHRRequest(schema);
-  }
-}
-
-async function executeFetchRequest(schema: RequestSchema): Promise<ResponseData> {
-  // Build URL with query parameters
-  const queryString = schema.params
-    .filter(p => !!p.key)
-    .map(p => `${p.key}=${encodeURIComponent(p.value)}`)
-    .join('&');
-  const fullUrl = `${schema.url}${schema.path}${queryString ? '?' + queryString : ''}`;
-
-  // Prepare headers
-  const headers = new Headers();
-  schema.headers.forEach(header => {
-    if (header.key) {
-      headers.append(header.key, header.value);
-    }
-  });
-
-  // Prepare request options
-  const options: RequestInit = {
-    method: schema.method,
-    headers,
-    credentials: 'omit'
-  };
-
-  // Handle authentication
-  if (schema.auth.type === 'Basic' && schema.auth.username && schema.auth.password) {
-    const auth = btoa(`${schema.auth.username}:${schema.auth.password}`);
-    headers.append('Authorization', `Basic ${auth}`);
-  } else if (schema.auth.type === 'Bearer' && schema.auth.token) {
-    headers.append('Authorization', `Bearer ${schema.auth.token}`);
-  }
-
-  // Handle request body for POST/PUT methods
-  if (schema.method === 'POST' || schema.method === 'PUT') {
-    switch (schema.body.type) {
-      case 'application/json':
-        options.body = schema.body.json || '';
-        headers.set('Content-Type', 'application/json; charset=utf-8');
-        break;
-      case 'multipart/form-data':
-        const formData = new FormData();
-        schema.body.formData?.forEach(param => {
-          if (param.key) {
-            formData.append(param.key, param.value);
-          }
-        });
-        options.body = formData;
-        break;
-      case 'text/plain':
-        options.body = schema.body.raw || '';
-        headers.set('Content-Type', 'text/plain; charset=utf-8');
-        break;
-    }
-  }
-
-  try {
-    const response = await fetch(fullUrl, options);
-    const headers: Record<string, string> = {};
-    response.headers.forEach((value, key) => {
-      headers[key.toLowerCase()] = value;
-    });
-
-    let body = '';
-    const contentType = headers['content-type'] || '';
-    if (contentType.startsWith('application/json')) {
-      try {
-        const json = await response.json();
-        body = JSON.stringify(json, null, 2);
-      } catch (e) {
-        body = await response.text();
-      }
-    } else {
-      body = await response.text();
-    }
-
-    return {
-      status: response.status.toString(),
-      headers,
-      body
-    };
-  } catch (error) {
-    throw new Error('Request failed');
-  }
-}
-
-async function executeXHRRequest(schema: RequestSchema): Promise<ResponseData> {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    const user = schema.auth.type === 'Basic' ? schema.auth.username : null;
-    const pswd = schema.auth.type === 'Basic' ? schema.auth.password : null;
-
-    // Build URL with query parameters
-    const queryString = schema.params
-      .filter(p => !!p.key)
-      .map(p => `${p.key}=${encodeURIComponent(p.value)}`)
-      .join('&');
-    const fullUrl = `${schema.url}${schema.path}${queryString ? '?' + queryString : ''}`;
-
-    xhr.open(schema.method, fullUrl, true, user, pswd);
-
-    // Add headers
-    schema.headers.forEach(header => {
-      if (header.key) {
-        xhr.setRequestHeader(header.key, header.value);
-      }
-    });
-
-    // Add Bearer token if present
-    if (schema.auth.type === 'Bearer' && schema.auth.token) {
-      xhr.setRequestHeader('Authorization', `Bearer ${schema.auth.token}`);
-    }
-
-    // Handle request body for POST/PUT methods
-    if (schema.method === 'POST' || schema.method === 'PUT') {
-      let requestBody = '';
-      
-      switch (schema.body.type) {
-        case 'application/json':
-          requestBody = schema.body.json || '';
-          xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
-          break;
-        case 'multipart/form-data':
-          const formData = new FormData();
-          schema.body.formData?.forEach(param => {
-            if (param.key) {
-              formData.append(param.key, param.value);
-            }
-          });
-          requestBody = formData as any;
-          // Let browser handle multipart/form-data Content-Type and boundary
-          break;
-        case 'text/plain':
-          requestBody = schema.body.raw || '';
-          xhr.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
-          break;
-      }
-
-      xhr.send(requestBody);
-    } else {
-      xhr.send();
-    }
-
-    xhr.onload = () => {
-      const headers = parseHeaders(xhr);
-      const response: ResponseData = {
-        status: xhr.status.toString(),
-        headers,
-        body: ''
-      };
-
-      if ((headers['content-type'] || '').startsWith('application/json')) {
-        try {
-          response.body = JSON.stringify(JSON.parse(xhr.responseText), null, 2);
-        } catch (e) {
-          response.body = xhr.responseText;
-        }
-      } else {
-        response.body = xhr.responseText;
-      }
-
-      resolve(response);
-    };
-
-    xhr.onerror = () => {
-      reject(new Error('Request failed'));
-    };
-  });
-}
-
-function parseHeaders(xhr: XMLHttpRequest): Record<string, string> {
-  const headers = xhr
-    .getAllResponseHeaders()
-    .trim()
-    .split(/[\r\n]+/);
-  const headerMap: Record<string, string> = {};
-  headers.forEach(function (line) {
-    const parts = line.split(': ');
-    const header = parts.shift()?.toLowerCase() || '';
-    const value = parts.join(': ');
-    headerMap[header] = value;
-  });
-  return headerMap;
-}