vue-api-request-builder 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -24,9 +24,9 @@ export declare const defaultRequestSchema: RequestSchema;
 
 export declare function executeRequest(schema: RequestSchema, method?: RequestMethod): Promise<ResponseData>;
 
-export declare const KeyValueInput: DefineComponent<Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const KeyValueInput: DefineComponent<Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
     "update:modelValue": (value: KeyValueItem[]) => any;
-}, string, PublicProps, Readonly<Props_2> & Readonly<{
+}, string, PublicProps, Readonly<Props_3> & Readonly<{
     "onUpdate:modelValue"?: ((value: KeyValueItem[]) => any) | undefined;
 }>, {
     addButtonText: string;
@@ -49,6 +49,10 @@ declare interface Props {
 }
 
 declare interface Props_2 {
+    modelValue: RequestSchema;
+}
+
+declare interface Props_3 {
     modelValue: KeyValueItem[];
     addButtonText?: string;
     showPreview?: boolean;
@@ -81,4 +85,6 @@ export declare interface ResponseData {
     timing?: number;
 }
 
+export declare const ResponseSection: DefineComponent<Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
 export { }

package/dist/index.es.js

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

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/dist/vue-api-request-builder.css

@@ -1 +1 @@
-.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}
+.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/index.ts

@@ -1,4 +1,5 @@
 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';
@@ -6,6 +7,7 @@ import { executeRequest } from './utils/request';
 
 export {
   RequestForm,
+  ResponseSection,
   KeyValueInput,
   type RequestSchema,
   type KeyValuePair,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-api-request-builder",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -21,7 +21,8 @@
   },
   "dependencies": {
     "ant-design-vue": "4.x",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-api-request-builder": "^0.1.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",