vue-api-request-builder 0.2.0 → 0.2.1

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-full{max-width:100%}.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-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/package.json

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

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

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