vue-api-request-builder 0.1.0

package/lib/components/KeyValueInput.vue

@@ -0,0 +1,144 @@
+<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

@@ -0,0 +1,388 @@
+<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

@@ -0,0 +1,144 @@
+<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

@@ -0,0 +1,17 @@
+import RequestForm from './components/RequestForm.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,
+  KeyValueInput,
+  type RequestSchema,
+  type KeyValuePair,
+  type ResponseData,
+  defaultRequestSchema,
+  executeRequest
+};
+
+export default RequestForm;