api-render-ui 1.1.1 → 1.1.3

package/dist/index.js

@@ -186,10 +186,12 @@ var GLOBAL_STYLES = `.codigma-apioperatorlist {
     align-items: center;
     align-self: stretch;
     display: inline-flex;
-    height: 114px;
     justify-content: flex-start;
     padding-right: 5px
 }
+.codigma-apiunit-request-body-info {
+    align-self: stretch;
+}
 .codigma-apiunit-parakeyvalues {
     align-items: flex-start;
     align-self: stretch;
@@ -263,7 +265,7 @@ var ApiRenderer = class _ApiRenderer {
     }, options);
     this.container = null;
   }
-  render(apiSpec, renderUnit = false) {
+  render(apiSpec, currentServer, serviceName, renderUnit = false) {
     const appendInlineStyle = (text) => {
       if (!_ApiRenderer.globalStyleInjected) {
         const styleEl = document.createElement("style");
@@ -280,7 +282,7 @@ var ApiRenderer = class _ApiRenderer {
     }
     if (apiSpec["openapi"] && apiSpec["openapi"].startsWith("3.") || apiSpec["swagger"] && apiSpec["swagger"].startsWith("2.")) {
       const countApi = countOpenAPI(apiSpec);
-      const apiOperatorList = parseOpenAPI(apiSpec);
+      const apiOperatorList = parseOpenApiSpec(apiSpec, currentServer, serviceName);
       if (countApi == 1 && renderUnit) {
         this.container = createApiUnit(apiOperatorList[0]);
       } else {
@@ -345,12 +347,47 @@ var ApiRenderer = class _ApiRenderer {
     mountElement.appendChild(this.container);
   }
 };
+var auths = [
+  {
+    value: "No Auth"
+  },
+  {
+    value: "Basic Auth",
+    parameters: [
+      {
+        name: "userName",
+        value: ""
+      },
+      {
+        name: "password",
+        value: ""
+      }
+    ]
+  },
+  {
+    value: "OAuth 2.0"
+  }
+];
+var grantTypes = [
+  { value: "authorization_code" },
+  { value: "Implicit" },
+  { value: "Resource Owner Password Credentials" },
+  { value: "client_credentials" }
+];
+var clientAuthenticationOpts = [
+  { value: "Headers", displayName: "Send credentials in headers" },
+  { value: "Body", displayName: "Send credentials in body" }
+];
+var consumeOpts = [
+  { value: "None" },
+  { value: "application/json" },
+  { value: "application/xml" },
+  { value: "application/x-www-form-urlencoded" },
+  { value: "multipart/form-data" },
+  { value: "text/plain" }
+];
 function renderApiUnit(apiOperator, containerRef, elementMap) {
   return function(evt) {
-    console.log("\u70B9\u51FB\u7684API\u64CD\u4F5C\uFF1A");
-    console.log("\u65B9\u6CD5:", apiOperator.method);
-    console.log("URL:", apiOperator.url);
-    console.log("------------------------");
     const currentTarget = evt.currentTarget;
     if (elementMap.has(currentTarget)) {
       const newElement = elementMap.get(currentTarget);
@@ -381,7 +418,7 @@ function createApiUnit(apiOperator) {
   const paramSection = createParamSection(apiOperator);
   const headerSection = createSectionHeader(apiOperator);
   const authSection = createSectionAuth(apiOperator);
-  const bodySection = createSectionRequestBody(apiOperator.requestBody);
+  const bodySection = createSectionRequestBody(apiOperator);
   reqContent.append(paramSection, headerSection, authSection, bodySection);
   apiContainer.appendChild(reqContent);
   apiContainer.appendChild(responseSection);
@@ -412,7 +449,6 @@ function createReqOperator(apiOperator) {
   reqUrl.className = "Requrl codigma-apiunit-requrl";
   reqUrl.value = apiOperator.url;
   reqUrl.addEventListener("input", (e) => {
-    console.log("\u5F53\u524D\u503C:", e.target.value);
     apiOperator.url = e.target.value;
   });
   reqOperator.appendChild(reqUrl);
@@ -425,7 +461,6 @@ function createReqOperator(apiOperator) {
   sendText.textContent = "Send";
   sendButton.appendChild(sendText);
   sendButton.addEventListener("click", (e) => {
-    console.log("\u5F53\u524D\u503C:", e.target.value);
     const respRef = apiOperator._responseSectionRef || null;
     sendRequest(apiOperator, respRef);
   });
@@ -492,17 +527,135 @@ function createSectionAuth(apiOperator) {
   const authValues = document.createElement("div");
   authValues.setAttribute("data-layer", "paraKeyValues");
   authValues.className = "Parakeyvalues codigma-apiunit-parakeyvalues";
-  let auths = apiOperator.auths || [];
-  const authTypeRow = createSelectRow(auths, authValues);
-  if (auths.length > 0) {
-    let parameters = apiOperator.auths[0].parameters || [];
-    const authRows = parameters.map((parameter) => createRow(parameter));
-    authValues.append(authTypeRow, ...authRows);
-  }
+  const authTypeRow = createSelectRow("Authorization Type", auths);
+  authTypeRow.children[1].addEventListener("change", function(event) {
+    authValues && Array.from(authValues.children).slice(1).forEach((el) => el.remove());
+    const auth = auths[event.target.selectedIndex];
+    if (auth.value == "No Auth") {
+    } else if (auth.value == "Basic Auth") {
+      apiOperator.auth = [
+        {
+          name: "userName",
+          value: ""
+        },
+        {
+          name: "password",
+          value: ""
+        }
+      ];
+      const authRows = apiOperator.auth.map((parameter) => createRow(parameter));
+      authValues.append(...authRows);
+    } else if (auth.value == "OAuth 2.0") {
+      apiOperator.auth = {};
+      renderAuthForm(apiOperator, authValues, authTypeRow);
+    }
+  });
+  authValues.append(authTypeRow);
   authSection.append(authCnr, authValues);
   return authSection;
 }
-function createSectionRequestBody(requestBody) {
+function createElement(tag, props = {}, classes = []) {
+  const el = document.createElement(tag);
+  Object.entries(props).forEach(([key, value]) => el.setAttribute(key, value));
+  if (classes.length) el.classList.add(...classes);
+  return el;
+}
+function createLabeledInput(apiOperator, labelText, inputId, inputName, modelKey, required = false) {
+  const wrapper = createElement("div", {}, ["Keyvalue", "codigma-apiunit-keyvalue"]);
+  const label = createElement("label", { for: inputId }, ["type", "codigma-apiunit-send"]);
+  label.textContent = labelText + ":";
+  const input = createElement("input", {
+    type: "text",
+    id: inputId,
+    name: inputName,
+    autocomplete: "off",
+    ...required ? { required: "true" } : {}
+  }, ["Valuetext", "codigma-apiunit-valuetext"]);
+  input.value = apiOperator.auth[modelKey] || "";
+  input.addEventListener("input", (e) => {
+    apiOperator.auth[modelKey] = e.target.value;
+  });
+  wrapper.appendChild(label);
+  wrapper.appendChild(input);
+  return wrapper;
+}
+function createSelect(apiOperator, labelText, selectId, options, modelKey, changeHandler) {
+  const wrapper = createElement("div", {}, ["Keyvalue", "codigma-apiunit-keyvalue"]);
+  const label = createElement("label", { for: selectId }, ["type", "codigma-apiunit-send"]);
+  label.textContent = labelText + ":";
+  const select = createElement("select", {
+    id: selectId,
+    name: selectId
+  }, []);
+  options.forEach((opt) => {
+    const option = createElement("option", { value: opt.value });
+    option.textContent = opt.displayName || opt.value;
+    select.appendChild(option);
+  });
+  select.value = apiOperator.auth[modelKey] || options[0]?.value || "";
+  select.addEventListener("change", (e) => {
+    const val = e.target.value;
+    changeHandler(val);
+  });
+  wrapper.appendChild(label);
+  wrapper.appendChild(select);
+  return wrapper;
+}
+function renderAuthForm(apiOperator, authValues, authTypeRow) {
+  authValues.innerHTML = "";
+  authValues.append(authTypeRow);
+  authValues.appendChild(createLabeledInput(apiOperator, "Token", "token", "token", "token", true));
+  authValues.appendChild(
+    createSelect(
+      apiOperator,
+      "Grant Type",
+      "grantType",
+      grantTypes,
+      "grantType",
+      (value) => {
+        apiOperator.auth.grantType = value;
+        renderAuthForm(apiOperator, authValues, authTypeRow);
+      }
+    )
+  );
+  const gt = apiOperator.auth.grantType || "authorization_code";
+  if (gt === "authorization_code" || gt === "Implicit") {
+    authValues.appendChild(createLabeledInput(apiOperator, "Authorization Endpoint", "authorizationEndpoint", "authorizationEndpoint", "authorizationEndpoint", true));
+    authValues.appendChild(createLabeledInput(apiOperator, "Redirect URL", "RedirectURI", "RedirectURI", "redirectURI", true));
+  }
+  if (gt === "authorization_code" || gt === "client_credentials" || gt === "Resource Owner Password Credentials") {
+    authValues.appendChild(createLabeledInput(apiOperator, "Token Endpoint", "TokenEndpoint", "TokenEndpoint", "tokenEndpoint", true));
+  }
+  authValues.appendChild(createLabeledInput(apiOperator, "Client ID", "ClientID", "ClientID", "clientId", true));
+  if (gt === "authorization_code" || gt === "client_credentials" || gt === "Resource Owner Password Credentials") {
+    authValues.appendChild(createLabeledInput(apiOperator, "Client Secret", "ClientSecret", "ClientSecret", "clientSecret", true));
+  }
+  if (gt === "Resource Owner Password Credentials") {
+    authValues.appendChild(createLabeledInput(apiOperator, "Username", "Username", "Username", "username", true));
+    authValues.appendChild(createLabeledInput(apiOperator, "Password", "Password", "Password", "password", true));
+  }
+  authValues.appendChild(createLabeledInput(apiOperator, "Scopes", "Scopes", "Scopes", "scopes", true));
+  authValues.appendChild(
+    createSelect(
+      apiOperator,
+      "Client Authentication",
+      "clientAuthentication",
+      clientAuthenticationOpts,
+      "clientAuthentication",
+      (value) => {
+        apiOperator.auth.clientAuthentication = value;
+      }
+    )
+  );
+  const buttonWrapper = createElement("div", {}, ["parameter-item"]);
+  const generateBtn = createElement("button", {}, ["parameter-button"]);
+  generateBtn.type = "button";
+  generateBtn.textContent = "Generate Token";
+  generateBtn.addEventListener("click", () => generateOAuth2Token(apiOperator));
+  buttonWrapper.appendChild(generateBtn);
+  authValues.appendChild(buttonWrapper);
+}
+function createSectionRequestBody(apiOperator) {
   const bodySection = document.createElement("div");
   bodySection.setAttribute("data-layer", "request-body-section");
   bodySection.className = "RequestBodySection codigma-apiunit-request-body-section";
@@ -515,13 +668,108 @@ function createSectionRequestBody(requestBody) {
   bodyText.textContent = "Body";
   bodyCnr.appendChild(bodyText);
   bodySection.appendChild(bodyCnr);
-  const bodyValue = document.createElement("textarea");
-  bodyValue.setAttribute("data-layer", "bodyTextValue");
-  bodyValue.className = "Id0CategoryId0NameNamePhotourlsTagsId0NameStatusAvailable codigma-apiunit-parakeyvalues";
-  bodyValue.value = JSON.stringify(requestBody);
-  bodySection.appendChild(bodyValue);
+  renderConsumeSection(apiOperator, bodySection, bodyCnr);
   return bodySection;
 }
+function createConsumeSelect(apiOperator, container, bodyCnr) {
+  const wrapper = createElement("div");
+  const label = createElement("label");
+  label.style.margin = "0 1rem";
+  label.textContent = "Content-Type";
+  const select = createElement("select");
+  select.style.width = "18rem";
+  consumeOpts.forEach((opt) => {
+    const option = document.createElement("option");
+    option.value = opt.value;
+    option.textContent = opt.value;
+    select.appendChild(option);
+  });
+  select.value = apiOperator.currentConsume || getCurrentConsume(apiOperator);
+  select.addEventListener("change", (e) => {
+    const newValue = e.target.value;
+    if (apiOperator.currentConsume !== newValue) {
+      apiOperator.currentConsume = newValue;
+      renderConsumeSection(apiOperator, container, bodyCnr);
+    }
+  });
+  wrapper.appendChild(label);
+  wrapper.appendChild(select);
+  return wrapper;
+}
+function renderRequestBodyInto(apiOperator, targetDiv) {
+  targetDiv.innerHTML = "";
+  const ct = apiOperator.currentConsume || getCurrentConsume(apiOperator);
+  if (ct === null || ct === "None" || ct === "application/json" || ct === "application/xml" || ct === "text/plain") {
+    const mimeType = ct || "None";
+    let rawValue = apiOperator.requestBody.content[mimeType];
+    if (rawValue == null) {
+      rawValue = "";
+      apiOperator.requestBody.content[mimeType] = rawValue;
+    }
+    const textarea = createElement("textarea", {}, []);
+    textarea.style.width = "100%";
+    textarea.style.height = "200px";
+    textarea.style.fontFamily = "monospace";
+    textarea.style.fontSize = "14px";
+    textarea.placeholder = `Enter ${mimeType} body...`;
+    textarea.value = rawValue;
+    textarea.addEventListener("input", () => {
+      apiOperator.requestBody.content[mimeType] = textarea.value;
+      console.log(`Content updated for ${mimeType}:`, textarea.value);
+    });
+    targetDiv.appendChild(textarea);
+  } else if ((ct === "application/x-www-form-urlencoded" || ct === "multipart/form-data") && apiOperator.requestBody.content && Array.isArray(apiOperator.requestBody.content[ct])) {
+    const params = apiOperator.requestBody.content[ct];
+    params.forEach((param, index) => {
+      const item = createElement("div", {}, ["Keyvalue", "codigma-apiunit-keyvalue"]);
+      const label = createElement("label", { for: `param-${Date.now()}-${index}` }, ["petId", "codigma-apiunit-send"]);
+      label.textContent = `${param.name}:`;
+      const input = createElement("input", {
+        type: param.uiType || "text",
+        // 使用时间戳+索引避免 id 冲突（仅用于 label for）
+        id: `param-${Date.now()}-${index}`,
+        name: "name"
+      }, ["Valuetext", "codigma-apiunit-valuetext"]);
+      input.value = param.value || "";
+      input.autocomplete = "off";
+      input.required = true;
+      input.addEventListener("keydown", (e) => {
+        setEditStatus(e, true);
+      });
+      input.addEventListener("input", () => {
+        param.value = input.value;
+      });
+      item.appendChild(label);
+      item.appendChild(input);
+      targetDiv.appendChild(item);
+    });
+  }
+}
+function getCurrentConsume(apiOperator) {
+  if (!apiOperator.requestBody) {
+    apiOperator.requestBody = { content: {} };
+  }
+  if (!apiOperator.requestBody.content) {
+    apiOperator.requestBody.content = {};
+  }
+  const keys = Object.keys(apiOperator.requestBody.content);
+  const ct = apiOperator.currentConsume = keys.length > 0 ? keys[0] : "None";
+  return ct;
+}
+function setEditStatus(event, status) {
+  console.log("setEditStatus called:", event.key, status);
+}
+function renderConsumeSection(apiOperator, container, bodyCnr) {
+  container.innerHTML = "";
+  container.appendChild(bodyCnr);
+  const wrapperDiv = createElement("div", {}, ["codigma-apiunit-parakeyvalues"]);
+  const selectWrapper = createConsumeSelect(apiOperator, container, bodyCnr);
+  wrapperDiv.appendChild(selectWrapper);
+  const reqBodyContainer = createElement("div", {}, ["codigma-apiunit-request-body-info"]);
+  renderRequestBodyInto(apiOperator, reqBodyContainer);
+  wrapperDiv.appendChild(reqBodyContainer);
+  container.appendChild(wrapperDiv);
+}
 function createSectionResponse(apiOperator) {
   const responseSection = document.createElement("div");
   responseSection.setAttribute("data-layer", "reqresponse");
@@ -556,6 +804,9 @@ function createTimeStatusElement(apiOperator) {
   updateTimeStatus(timeStatus, apiOperator);
   return timeStatus;
 }
+function updateTimeStatus(timeStatus, apiOperator) {
+  timeStatus.textContent = `Status: ${apiOperator.response.status || ""} ${apiOperator.response.statusText || ""}  Time: ${apiOperator.requestDuration || ""}`;
+}
 function createRow(parameter) {
   const petIdRow = document.createElement("div");
   petIdRow.setAttribute("data-layer", "keyValue");
@@ -569,7 +820,6 @@ function createRow(parameter) {
   petIdValue.className = "Valuetext codigma-apiunit-valuetext";
   petIdValue.value = parameter["value"] || "";
   petIdValue.addEventListener("input", (e) => {
-    console.log("\u5F53\u524D\u503C:", e.target.value);
     parameter["value"] = e.target.value;
   });
   petIdRow.append(petIdLabel, petIdValue);
@@ -583,31 +833,24 @@ function createInputElement() {
   inputText.setAttribute("autocomplete", "off");
   return inputText;
 }
-function createSelectRow(auths, authValues) {
+function createSelectRow(name, args) {
   const container = document.createElement("div");
   container.setAttribute("data-layer", "keyValue");
   container.className = "Keyvalue codigma-apiunit-keyvalue";
   const typeLabel = document.createElement("div");
-  typeLabel.setAttribute("data-layer", "type");
+  typeLabel.setAttribute("data-layer", name);
   typeLabel.className = "type codigma-apiunit-send";
-  typeLabel.textContent = "Type:";
+  typeLabel.textContent = name + ":";
   const selectElement = document.createElement("select");
   selectElement.name = "text-select";
   selectElement.label = "text-select";
   selectElement.setAttribute("data-layer", "valueText");
-  auths.forEach((auth) => {
+  args.forEach((auth) => {
     const option1 = document.createElement("option");
-    option1.value = auth["type"];
-    option1.textContent = auth["type"];
+    option1.value = auth["value"];
+    option1.textContent = auth["displayName"] != null || auth["label"] != null ? auth["displayName"] || auth["label"] : auth["value"];
     selectElement.appendChild(option1);
   });
-  selectElement.addEventListener("change", function(event) {
-    authValues && Array.from(authValues.children).slice(1).forEach((el) => el.remove());
-    const auth = auths[event.target.selectedIndex];
-    let parameters = auth.parameters || [];
-    const authRows = parameters.map((parameter) => createRow(parameter));
-    authValues.append(...authRows);
-  });
   container.appendChild(typeLabel);
   container.appendChild(selectElement);
   return container;
@@ -618,58 +861,153 @@ function isPathOrQueryParam(param) {
 function isHeaderParam(param) {
   return param.in === "header";
 }
-function sendRequest(apiOperator, responseSectionRef) {
-  if (!responseSectionRef) {
-    console.error("sendRequest: missing responseSectionRef. Aborting request to avoid runtime errors.");
-    return;
+async function generateOAuth2Token(apiInfo) {
+  const accessToken = await getAccessToken(apiInfo);
+  apiInfo.auth.token = accessToken;
+}
+async function getAccessToken(apiInfo) {
+  const auth = apiInfo.auth;
+  if (auth == null) {
+    throw new Error("OAuth2.0\u8BA4\u8BC1\u4FE1\u606F\u672A\u914D\u7F6E");
+  }
+  const CLIENT_ID = auth.clientId;
+  const CLIENT_SECRET = auth.clientSecret;
+  const SCOPE = auth.scopes;
+  if (apiInfo.auth.grantType == "client_credentials") {
+    try {
+      console.log("\u6B63\u5728\u83B7\u53D6\u8BBF\u95EE\u4EE4\u724C...");
+      const headerParams = {
+        "Content-Type": "application/x-www-form-urlencoded"
+      };
+      const bodyParams = new URLSearchParams();
+      bodyParams.append("grant_type", "client_credentials");
+      if (SCOPE) {
+        bodyParams.append("scope", SCOPE);
+      }
+      if (apiInfo.auth.clientAuthentication == "Body") {
+        bodyParams.append("client_id", CLIENT_ID);
+        bodyParams.append("client_secret", CLIENT_SECRET);
+      } else {
+        headerParams["Authorization"] = "Basic " + btoa(CLIENT_ID + ":" + CLIENT_SECRET);
+      }
+      const response = await fetch(auth.tokenEndpoint, {
+        method: "POST",
+        headers: headerParams,
+        body: bodyParams.toString()
+      });
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(`\u83B7\u53D6\u4EE4\u724C\u5931\u8D25: ${response.status} ${response.statusText}. ${JSON.stringify(errorData)}`);
+      }
+      const tokenData = await response.json();
+      console.log("\u4EE4\u724C\u83B7\u53D6\u6210\u529F:", tokenData);
+      return tokenData.access_token;
+    } catch (error) {
+      console.error("\u83B7\u53D6\u8BBF\u95EE\u4EE4\u724C\u65F6\u51FA\u9519:", error);
+      throw error;
+    }
+  } else if (apiInfo.auth.grantType == "Resource Owner Password Credentials") {
+  } else if (apiInfo.auth.grantType == "authorization_code") {
+    let getUrlParams2 = function() {
+      const params = new URLSearchParams(window.location.search);
+      return Object.fromEntries(params.entries());
+    }, redirectToAuth2 = function() {
+      const state = Math.random().toString(36).substring(2);
+      const nonce = Math.random().toString(36).substring(2);
+      const authUrl = new URL(config.authUrl);
+      authUrl.searchParams.append("client_id", config.clientId);
+      authUrl.searchParams.append("redirect_uri", config.redirectUri);
+      authUrl.searchParams.append("response_type", "code");
+      authUrl.searchParams.append("scope", config.scope);
+      authUrl.searchParams.append("state", state);
+      authUrl.searchParams.append("nonce", nonce);
+      authUrl.searchParams.append("access_type", "offline");
+      const newTab = window.open(authUrl.toString(), "_blank");
+    };
+    var getUrlParams = getUrlParams2, redirectToAuth = redirectToAuth2;
+    const config = {
+      clientId: apiInfo.auth.clientId,
+      // 替换为你的 client_id
+      clientSecret: apiInfo.auth.clientSecret,
+      // 替换为你的 client_secret
+      redirectUri: apiInfo.auth.redirectURI,
+      // 必须与注册的 redirect_uri 一致
+      authUrl: apiInfo.auth.authorizationEndpoint,
+      tokenUrl: apiInfo.auth.tokenEndpoint,
+      scope: apiInfo.auth.scopes
+      // 可选: 'openid profile email' 如果服务支持
+    };
+    redirectToAuth2();
+  } else if (apiInfo.auth.grantType == "Implicit") {
+  } else {
   }
-  let reuqestUrl = getRequestUrl(apiOperator);
-  const result = checkIfParameter(apiOperator);
-  let header = result.hasRequestBody ? "application/json" : result.hasRequestFormData ? "application/x-www-form-urlencoded" : "application/json";
+}
+function getBodyEditorContent(apiOperator) {
+  const ct = apiOperator.currentConsume || "None";
+  return apiOperator.requestBody.content[ct];
+}
+var gotResponse = false;
+var ifSendingRequest = false;
+var requestDuration = "0";
+var responseObj = {};
+function sendRequest(apiOperator, responseSectionRef) {
+  const apiInfo = apiOperator;
+  let reuqestUrl = getRequestUrl(apiInfo);
+  let header = apiInfo["parameterHasFormDataVer2"] ? "application/x-www-form-urlencoded" : apiInfo["parameterHasBody"] ? apiInfo["currentConsume"] : "application/json";
   let headers = {
     "Content-Type": header
   };
-  if (apiOperator.custom) {
-    for (let index = 0; index < apiOperator.customHeaderparameters.length; index++) {
-      const paras = apiOperator.customHeaderparameters[index];
-      if (paras.name != "" && paras.value != "" && paras.name != null && paras.value != null) {
-        headers[paras.name] = paras.value;
+  const headerParas = getHeadersParams(apiInfo, apiInfo.rawApiInfo.parameters || []);
+  Object.assign(headers, headerParas);
+  addAuthHeader(apiInfo, headers);
+  let body;
+  if (apiInfo.method.toUpperCase() == "POST" || apiInfo.method.toUpperCase() == "PUT") {
+    if (apiInfo["currentConsume"] == "application/json" && apiInfo.requestBody != null) {
+      body = getBodyEditorContent(apiOperator);
+    } else if (apiInfo["parameterHasFormDataVer2"]) {
+      body = getRequestFormData(apiInfo.rawApiInfo);
+    } else if (apiInfo["currentConsume"] == "application/x-www-form-urlencoded") {
+      for (const key of apiInfo["requestBody"]["content"][apiInfo["currentConsume"]]) {
+        if (body == null || body == "") {
+          body = key.name + "=" + key.value;
+        } else {
+          body = body + "&" + key.name + "=" + key.value;
+        }
       }
+    } else {
+      body = "";
     }
+  } else {
+    body = "";
   }
-  let body = result.hasRequestBody ? apiOperator.requestBody : result.hasRequestFormData ? getRequestFormData(apiOperator.rawApiInfo) : null;
-  if (apiOperator.custom) {
-    if (apiOperator.method.toUpperCase() == "POST" || apiOperator.method.toUpperCase() == "PUT") {
-      body = apiOperator.requestBody;
-    }
-  }
-  apiOperator.ifSendingRequest = true;
+  ifSendingRequest = true;
   const startTime = Date.now();
   apiOperator.controller = new AbortController();
   const signal = apiOperator.controller.signal;
   const overlayLayerContainer = createRequestOverlayLayer(apiOperator, responseSectionRef);
   fetch(reuqestUrl, {
-    method: apiOperator.method.toUpperCase(),
+    method: apiInfo.method.toUpperCase(),
     headers,
-    body: body != null ? JSON.stringify(body) : null,
+    body,
     signal
   }).then((response) => {
     if (!response.ok) {
-      apiOperator.response = {
+      responseObj = {
         status: response.status,
-        statusText: response.statusText
+        statusText: response.statusText,
+        body: ""
       };
       const endTime2 = Date.now();
-      apiOperator.requestDuration = formatDuration(endTime2 - startTime);
-      apiOperator.ifSendingRequest = false;
+      requestDuration = formatDuration(endTime2 - startTime);
+      ifSendingRequest = false;
       throw new Error("Network response was not ok.");
     }
     const endTime = Date.now();
-    apiOperator.requestDuration = formatDuration(endTime - startTime);
+    requestDuration = formatDuration(endTime - startTime);
     const responsebodyElement = responseSectionRef.querySelector('[data-layer="responsebody"]');
     responsebodyElement.removeChild(overlayLayerContainer);
-    apiOperator.ifSendingRequest = false;
-    apiOperator.response = {
+    ifSendingRequest = false;
+    responseObj = {
       status: response.status,
       statusText: response.statusText
     };
@@ -684,22 +1022,20 @@ function sendRequest(apiOperator, responseSectionRef) {
       return responseClone.text();
     });
   }).then((data) => {
-    apiOperator.gotResponse = true;
+    gotResponse = true;
     const responsebodyElement = responseSectionRef.querySelector('[data-layer="responsebody"]');
     if (typeof data === "object") {
       console.log("Received JSON:", data);
-      responsebodyElement.textContent = JSON.stringify(data, null, 4);
+      responseObj.body = JSON.stringify(data, null, 4);
     } else {
       console.log("Received text:", data);
-      responsebodyElement.textContent = data;
+      responseObj.body = data;
     }
+    responsebodyElement.textContent = responseObj.body;
   }).catch((error) => {
     console.error("There has been a problem with your fetch operation:", error);
   });
 }
-function updateTimeStatus(timeStatus, apiOperator) {
-  timeStatus.textContent = `Status: ${apiOperator.response.status || ""} ${apiOperator.response.statusText || ""}  Time: ${apiOperator.requestDuration || ""}`;
-}
 function createRequestOverlayLayer(apiOperator, responseSectionRef) {
   const container = document.createElement("div");
   Object.assign(container.style, {
@@ -742,28 +1078,6 @@ function createRequestOverlayLayer(apiOperator, responseSectionRef) {
   });
   return container;
 }
-function checkIfParameter(apiOperator) {
-  let hasRequestBody = false;
-  let hasRequestFormData = false;
-  const parameters = apiOperator.rawApiInfo.parameters;
-  if (parameters) {
-    for (let index = 0; index < parameters.length; index++) {
-      const parameter = parameters[index];
-      if (parameter.in == "query" || parameter.in == "path") {
-      } else if (parameter.in == "body") {
-        hasRequestBody = true;
-        parameter.name = parameter.name.charAt(0).toUpperCase() + parameter.name.slice(1);
-      } else if (parameter.in == "formData") {
-        hasRequestFormData = true;
-      }
-    }
-  }
-  const requestBody = apiOperator.rawApiInfo.requestBody;
-  if (requestBody) {
-    hasRequestBody = true;
-  }
-  return { hasRequestBody, hasRequestFormData };
-}
 function formatDuration(milliseconds) {
   let totalSeconds = Math.floor(milliseconds / 1e3);
   let seconds = totalSeconds % 60;
@@ -776,9 +1090,9 @@ function formatDuration(milliseconds) {
   seconds = seconds.toString().padStart(2, "0");
   return `${hours}h${minutes}m${seconds}s${millisecondsPart}ms`;
 }
-function getRequestUrl(apiOperator) {
-  let reuqestUrl = apiOperator.url;
-  const requestParameters = apiOperator.rawApiInfo.parameters || [];
+function getRequestUrl(apiInfo) {
+  let reuqestUrl = apiInfo.url;
+  const requestParameters = apiInfo.rawApiInfo.parameters || [];
   if (requestParameters == null) {
     return reuqestUrl;
   }
@@ -787,11 +1101,45 @@ function getRequestUrl(apiOperator) {
       reuqestUrl = reuqestUrl.replace("{" + element.name + "}", element.value);
     }
   }
-  let queryParams = getQueryParams(apiOperator, requestParameters);
+  let queryParams = getQueryParams(apiInfo, requestParameters);
   reuqestUrl = queryParams.length > 0 ? reuqestUrl + "?" + queryParams.join("&") : reuqestUrl;
   return reuqestUrl;
 }
-function getQueryParams(apiOperator, requestParameters) {
+function addAuthHeader(apiInfo, headers) {
+  const env = isBrowserEnvironment();
+  if (apiInfo.auth.authType == "Basic Auth" && apiInfo.auth != null) {
+    if (env) {
+      const credentials = btoa(`${apiInfo.auth.username}:${apiInfo.auth.passWord}`);
+      headers["Authorization"] = `Basic ${credentials}`;
+    } else {
+      const buffer = Buffer.from(`${apiInfo.auth.username}:${apiInfo.auth.passWord}`);
+      const credentials = buffer.toString("base64");
+      headers["Authorization"] = `Basic ${credentials}`;
+    }
+  } else if (apiInfo.auth.authType == "OAuth 2.0" && apiInfo.auth != null) {
+    if (apiInfo.auth.token != null || apiInfo.auth.token != "") {
+      headers["Authorization"] = `Bearer ${apiInfo.auth.token}`;
+    }
+  }
+}
+function getHeadersParams(apiInfo, requestParameters) {
+  let headersParams = [];
+  for (const element of requestParameters) {
+    if (element.in == "header") {
+      headersParams[element.name] = element.value;
+    }
+  }
+  if (apiInfo.customHeaderparameters) {
+    for (let index = 0; index < apiInfo.customHeaderparameters.length; index++) {
+      const paras = apiInfo.customHeaderparameters[index];
+      if (paras.name != "" && paras.value != "" && paras.name != null && paras.value != null) {
+        headersParams[paras.name] = paras.value;
+      }
+    }
+  }
+  return headersParams;
+}
+function getQueryParams(apiInfo, requestParameters) {
   let queryParams = [];
   for (const element of requestParameters) {
     if (element.in == "query") {
@@ -806,9 +1154,9 @@ function getQueryParams(apiOperator, requestParameters) {
       }
     }
   }
-  if (apiOperator.custom) {
-    for (let index = 0; index < apiOperator.customQueryparameters.length; index++) {
-      const paras = apiOperator.customQueryparameters[index];
+  if (apiInfo.customQueryparameters) {
+    for (let index = 0; index < apiInfo.customQueryparameters.length; index++) {
+      const paras = apiInfo.customQueryparameters[index];
       if (paras.name != "" && paras.value != "" && paras.name != null && paras.value != null) {
         queryParams.push(paras.name + "=" + paras.value);
       }
@@ -835,6 +1183,15 @@ function getRequestFormData(rawApiInfo) {
   }
   return formData;
 }
+function isBrowserEnvironment() {
+  if (typeof window !== "undefined" && typeof document !== "undefined") {
+    return true;
+  } else if (typeof process !== "undefined" && process.versions && process.versions.node) {
+    return false;
+  } else {
+    return false;
+  }
+}
 function createSvg() {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.setAttribute("width", "21");
@@ -853,18 +1210,16 @@ function createSvg() {
 }
 function parseParaModel(parameterObj, dataDef) {
   let bodyModel;
-  if (parameterObj && parameterObj.schema) {
-    if (parameterObj.schema["$ref"]) {
-      bodyModel = parseModel(parameterObj.schema["$ref"], dataDef);
-    } else if (parameterObj.schema["type"] == "array") {
-      const itemObj = parameterObj.schema["items"];
-      if (itemObj["$ref"]) {
-        bodyModel = parseModel(itemObj["$ref"], dataDef);
-      } else if (itemObj["type"]) {
-        bodyModel = parseElement(itemObj);
-      }
-      bodyModel = [bodyModel];
+  if (parameterObj.schema["$ref"]) {
+    bodyModel = parseModel(parameterObj.schema["$ref"], dataDef);
+  } else if (parameterObj.schema["type"] == "array") {
+    const itemObj = parameterObj.schema["items"];
+    if (itemObj["$ref"]) {
+      bodyModel = parseModel(itemObj["$ref"], dataDef);
+    } else if (itemObj["type"]) {
+      bodyModel = parseElement(itemObj);
     }
+    bodyModel = [bodyModel];
   }
   return bodyModel;
 }
@@ -895,10 +1250,66 @@ function parseModel(modelDef, apiDef) {
   }
   return model;
 }
+function parseFormDataModel(modelDef, apiDef) {
+  const model = [];
+  const bodyName = modelDef.substring(modelDef.lastIndexOf("/") + 1);
+  const def = apiDef[bodyName];
+  const props = def["properties"];
+  if (props) {
+    for (const key in props) {
+      if (Object.prototype.hasOwnProperty.call(props, key)) {
+        const element = props[key];
+        let modelEle;
+        if (element.hasOwnProperty("items") && element["type"] == "array") {
+          if (element["items"]["$ref"]) {
+            modelEle = [parseModel(element["items"]["$ref"], apiDef)];
+          } else if (element["items"]["type"]) {
+            modelEle = [parseElement(element["items"])];
+          }
+          if (modelEle) {
+            model.push({
+              type: "string",
+              uiType: "text",
+              name: key,
+              value: JSON.stringify(modelEle)
+            });
+          }
+        } else if (element["type"]) {
+          model.push({
+            type: element["type"],
+            uiType: element["type"] == "integer" || element["type"] == "number" ? "number" : "text",
+            name: key,
+            value: parseElement(element)
+          });
+        } else if (element["$ref"]) {
+          const bodyModel = parseModel(element["$ref"], apiDef);
+          model.push({
+            type: "string",
+            uiType: "text",
+            name: key,
+            value: JSON.stringify(bodyModel)
+          });
+        }
+      }
+    }
+  }
+  return model;
+}
+function parseFormDataParaModel(parameterObj, dataDef) {
+  let bodyModel = [];
+  if (parameterObj.schema["$ref"]) {
+    bodyModel = parseFormDataModel(parameterObj.schema["$ref"], dataDef);
+  }
+  return bodyModel;
+}
 function parseElement(element) {
   let elementValue;
   if (element["type"].includes("integer")) {
-    elementValue = 0;
+    if (element["enum"]) {
+      elementValue = element["enum"][0];
+    } else {
+      elementValue = 0;
+    }
   } else if (element["type"].includes("boolean")) {
     elementValue = false;
   } else if (element["type"].includes("string")) {
@@ -908,16 +1319,29 @@ function parseElement(element) {
       elementValue = "";
     }
   }
+  if (element["default"]) {
+    elementValue = element["default"];
+  }
   if (element["example"]) {
     elementValue = element["example"];
   }
   return elementValue;
 }
+function parseElementType(element) {
+  if (element["type"].includes("integer")) {
+    return "integer";
+  } else if (element["type"].includes("boolean")) {
+    return "boolean";
+  } else if (element["type"].includes("string")) {
+    return "string";
+  }
+  return "string";
+}
 var HTTP_METHODS = ["get", "put", "post", "delete", "options", "head", "patch", "trace"];
 function isHttpMethod(method) {
   return HTTP_METHODS.includes(method);
 }
-function parseOpenAPI(openapiSpec) {
+function parseOpenApiSpec(openapiSpec, currentServer, serviceName) {
   const apiOperatorList = [];
   const pathEntries = [];
   for (const path in openapiSpec.paths) {
@@ -938,51 +1362,99 @@ function parseOpenAPI(openapiSpec) {
       }
     }
     pathItemEntries.forEach(([method, operation]) => {
+      let url = path;
+      if (currentServer) {
+        url = currentServer.value + "/api/" + serviceName + "/v1" + path;
+      } else if (openapiSpec.servers && openapiSpec.servers.length > 0) {
+        url = openapiSpec.servers[0].url + path;
+      }
       const apiOperator = {
         method: method.toUpperCase(),
-        url: path,
-        rawApiInfo: null,
+        url,
+        rawApiInfo: operation,
         requestBody: null,
         response: {},
-        auths: [
-          {
-            type: "No Auth"
-          },
-          {
-            type: "Basic Auth",
-            parameters: [
-              {
-                name: "userName",
-                value: ""
-              },
-              {
-                name: "password",
-                value: ""
-              }
-            ]
-          }
-        ]
+        auth: {}
       };
       if (operation) {
-        if (operation.parameters) {
-          const parameter = operation.parameters.filter((val) => val.in == "body");
-          if (parameter && parameter.length > 0) {
+        if (apiOperator.rawApiInfo.parameters) {
+          const parameterBody = apiOperator.rawApiInfo.parameters.filter((val) => val.in == "body");
+          if (parameterBody && parameterBody.length > 0) {
+            apiOperator["requestBody"] = {
+              content: {}
+            };
+            apiOperator["consumes"] = apiOperator.rawApiInfo["consumes"];
+            const currentConsume = apiOperator.rawApiInfo["consumes"].length > 0 ? apiOperator.rawApiInfo["consumes"][0] : "application/json";
+            apiOperator["currentConsume"] = currentConsume;
+            let requestBody = parseParaModel(parameterBody[0], openapiSpec["definitions"]);
+            apiOperator["requestBody"]["content"][currentConsume] = JSON.stringify(requestBody, null, 4);
+            apiOperator["parameterHasBody"] = true;
+          } else {
+            for (const parameter of apiOperator.rawApiInfo.parameters) {
+              if (parameter.in == "query" || parameter.in == "header" || parameter.in == "path" || parameter.in == "formData") {
+                if (parameter.type == "integer" || parameter.schema != null && parameter.schema.type == "integer" || parameter.type == "number" || parameter.schema != null && parameter.schema.type == "number") {
+                  parameter.uiType = "number";
+                }
+                if (parameter.type == "string" || parameter.schema != null && parameter.schema.type == "string") {
+                  parameter.uiType = "text";
+                }
+                if (parameter.type == "boolean" || parameter.schema != null && parameter.schema.type == "boolean") {
+                  parameter.uiType = "text";
+                }
+              }
+            }
+            const parameterFormData = apiOperator.rawApiInfo.parameters.filter((val) => val.in == "formData");
+            if (parameterFormData && parameterFormData.length > 0) {
+              apiOperator["parameterHasFormDataVer2"] = true;
+            }
+            for (const param of apiOperator.rawApiInfo.parameters) {
+              const paramSchema = param.schema;
+              if (paramSchema && paramSchema["$ref"]) {
+                const bodyName = paramSchema["$ref"].substring(paramSchema["$ref"].lastIndexOf("/") + 1);
+                if (openapiSpec && openapiSpec["components"] != null && openapiSpec["components"]["schemas"] != null) {
+                  const def = openapiSpec["components"] != null ? openapiSpec["components"]["schemas"][bodyName] : { type: "" };
+                  param.type = parseElementType(def);
+                  param.uiType = param.type == "integer" || param.type == "number" ? "number" : "text";
+                  param.value = parseElement(def);
+                }
+              }
+            }
           }
         }
-        if (operation.requestBody) {
-          const requestBodyObject = operation.requestBody;
-          const content = requestBodyObject.content;
+        if (apiOperator.rawApiInfo.requestBody) {
+          const content = apiOperator.rawApiInfo.requestBody.content;
+          apiOperator["requestBody"] = {
+            content: {}
+          };
           for (const key in content) {
             if (Object.prototype.hasOwnProperty.call(content, key)) {
               const element = content[key];
+              apiOperator["consumes"]?.push(key);
               if (element) {
-                let requestBody = parseParaModel(element, openapiSpec["components"]["schemas"]);
-                apiOperator.requestBody = requestBody;
+                if (element.schema == void 0) {
+                  console.log("pathKey is:", path);
+                  console.log("key is:", key);
+                  console.log("content is:", content);
+                  console.log("Unsupported requestBody schema format:", element);
+                  continue;
+                }
+                if (key != "application/x-www-form-urlencoded" && key != "multipart/form-data") {
+                  let requestBody = parseParaModel(element, openapiSpec["components"]["schemas"]);
+                  apiOperator["requestBody"]["content"][key] = JSON.stringify(requestBody, null, 4);
+                } else {
+                  let requestFormDataBody = parseFormDataParaModel(element, openapiSpec["components"]["schemas"]);
+                  apiOperator["requestBody"]["content"][key] = requestFormDataBody;
+                }
+                apiOperator["parameterHasBody"] = true;
               }
             }
           }
+          if (apiOperator.consumes) {
+            if (apiOperator.consumes.length > 0) {
+              apiOperator["currentConsume"] = apiOperator["consumes"][0];
+            }
+          }
         }
-        apiOperator.rawApiInfo = operation;
         apiOperatorList.push(apiOperator);
       }
     });