api-render-ui 1.1.0 → 1.1.2

package/src/api-render-ui.ts

@@ -1,11 +1,15 @@
 import { GLOBAL_STYLES } from './inlined-styles';
 import { OpenAPIV3 } from 'openapi-types';
 
-type OpenAPIV3CustomDoc = OpenAPIV3.Document & { swagger: string }
+type OpenAPIV3CustomDoc = OpenAPIV3.Document & { swagger: string; definitions: any } //Compatible with version 2.0
 
 export class ApiRenderer {
     options: any;
     container: any;
+
+    // 静态标志：记录是否已注入全局样式
+    private static globalStyleInjected = false;
+
     constructor(options: any) {
         this.options = Object.assign({
             mountPoint: document?.body, // 默认挂载到body
@@ -19,10 +23,13 @@ export class ApiRenderer {
     render(apiSpec: OpenAPIV3CustomDoc, renderUnit: boolean = false) {
 
         const appendInlineStyle = (text: string) => {
-            // 动态创建 <style> 标签并插入全局样式
-            const styleEl = document.createElement('style');
-            styleEl.textContent = text;
-            document.head.appendChild(styleEl);
+            if (!ApiRenderer.globalStyleInjected) {
+                // 动态创建 <style> 标签并插入全局样式
+                const styleEl = document.createElement('style');
+                styleEl.textContent = text;
+                document.head.appendChild(styleEl);
+                ApiRenderer.globalStyleInjected = true; // 标记已注入
+            }
         };
         // 使用
         appendInlineStyle(GLOBAL_STYLES);
@@ -131,14 +138,53 @@ export class ApiRenderer {
 }
 
 
+const auths = [
+    {
+        value: "No Auth"
+    },
+    {
+        value: "Basic Auth",
+        parameters: [
+            {
+                name: "userName",
+                value: ""
+            },
+            {
+                name: "password",
+                value: ""
+            }
+        ]
+    },
+    {
+        value: "OAuth 2.0",
+    }
+]
+
+const grantTypes = [
+    { value: "authorization_code" },
+    { value: "Implicit" },
+    { value: "Resource Owner Password Credentials" },
+    { value: "client_credentials" }
+]
+
+const clientAuthenticationOpts = [
+    { value: "Headers", displayName: "Send credentials in headers" },
+    { value: "Body", displayName: "Send credentials in body" }
+]
+
+// ========== 数据定义 ==========
+const 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: any, containerRef: any, elementMap: any) {
     return function (evt: any) {
-        console.log('点击的API操作：');
-        console.log('方法:', apiOperator.method);
-        console.log('URL:', apiOperator.url);
-        console.log('------------------------');
-
         const currentTarget = evt.currentTarget;
         // 检查是否已存在对应的新元素
         if (elementMap.has(currentTarget)) {
@@ -186,7 +232,7 @@ function createApiUnit(apiOperator: any) {
     // 授权部分
     const authSection = createSectionAuth(apiOperator);
     // 请求体部分
-    const bodySection = createSectionRequestBody(apiOperator.requestBody);
+    const bodySection = createSectionRequestBody(apiOperator);
 
     reqContent.append(paramSection, headerSection, authSection, bodySection);
     apiContainer.appendChild(reqContent);
@@ -226,7 +272,6 @@ function createReqOperator(apiOperator: any) {
     reqUrl.value = apiOperator.url; // 绑定初始值
     // 可选：添加输入事件监听（根据需求）
     reqUrl.addEventListener('input', (e: any) => {
-        console.log('当前值:', e.target.value);
         // 这里可以添加保存逻辑（如更新状态/发送请求
         apiOperator.url = e.target.value
     });
@@ -242,7 +287,6 @@ function createReqOperator(apiOperator: any) {
     sendButton.appendChild(sendText);
 
     sendButton.addEventListener('click', (e: any) => {
-        console.log('当前值:', e.target.value);
         // 这里可以添加保存逻辑（如更新状态/发送请求
         // responseSectionRef 在渲染时会被挂载到 apiOperator._responseSectionRef 上
         const respRef = apiOperator._responseSectionRef || null;
@@ -324,19 +368,191 @@ function createSectionAuth(apiOperator: any) {
     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: any) => createRow(parameter));
-        authValues.append(authTypeRow, ...authRows);
-    }
+    const authTypeRow = createSelectRow('Authorization Type', auths)
+    // 添加选择事件监听
+    authTypeRow.children[1].addEventListener('change', function (event: any) {
+        //切换前先移除掉原来的元素
+        authValues && Array.from(authValues.children).slice(1).forEach((el: any) => 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: any) => 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: any) {
+// 工具函数：创建带 class 和属性的元素
+function createElement(tag: string, props: Record<string, string> = {}, classes: string[] = []): HTMLElement {
+    const el = document.createElement(tag);
+    Object.entries(props).forEach(([key, value]) => el.setAttribute(key, value));
+    if (classes.length) el.classList.add(...classes);
+    return el;
+}
+
+// 工具函数：创建 label + input 结构
+function createLabeledInput(apiOperator: any,
+    labelText: string,
+    inputId: string,
+    inputName: string,
+    modelKey: string,
+    required: boolean = false
+): HTMLElement {
+    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']) as HTMLInputElement;
+
+    // 双向绑定模拟：初始化值 + 监听输入
+    input.value = apiOperator.auth[modelKey] || '';
+    input.addEventListener('input', (e) => {
+        apiOperator.auth[modelKey] = (e.target as HTMLInputElement).value;
+    });
+
+    wrapper.appendChild(label);
+    wrapper.appendChild(input);
+    return wrapper;
+}
+
+// 创建下拉选择框（替代 ast-select）
+function createSelect(apiOperator: any, 
+    labelText: string,
+    selectId: string,
+    options: { value: string; displayName?: string }[],
+    modelKey: string,
+    changeHandler: (value: string) => void
+): HTMLElement {
+    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
+    }, []) as HTMLSelectElement;
+
+    options.forEach(opt => {
+        const option = createElement('option', { value: opt.value }) as HTMLOptionElement;
+        option.textContent = opt.displayName || opt.value;
+        select.appendChild(option);
+    });
+
+    // 初始化选中值
+    select.value = apiOperator.auth[modelKey] || options[0]?.value || '';
+    // changeHandler(select.value); // 触发初始设置
+
+    select.addEventListener('change', (e) => {
+        const val = (e.target as HTMLSelectElement).value;
+        changeHandler(val);
+    });
+
+    wrapper.appendChild(label);
+    wrapper.appendChild(select);
+    return wrapper;
+}
+
+// 重新渲染整个表单（基于当前 apiOperator.auth.grantType）
+function renderAuthForm(apiOperator: any, authValues: any, authTypeRow: any) {
+    authValues.innerHTML = ''; // 清空
+
+    authValues.append(authTypeRow);
+    // Token
+    authValues.appendChild(createLabeledInput(apiOperator, 'Token', 'token', 'token', 'token', true));
+
+    // Grant Type
+    authValues.appendChild(
+        createSelect(apiOperator,
+            'Grant Type',
+            'grantType',
+            grantTypes,
+            'grantType',
+            (value: string) => {
+                apiOperator.auth.grantType = value;
+                renderAuthForm(apiOperator, authValues, authTypeRow); // 重新渲染以反映条件字段
+            }
+        )
+    );
+
+    const gt = apiOperator.auth.grantType || 'authorization_code';
+
+    // Conditional: Authorization Code or Implicit
+    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));
+    }
+
+    // Conditional: Token Endpoint needed
+    if (gt === 'authorization_code' || gt === 'client_credentials' || gt === 'Resource Owner Password Credentials') {
+        authValues.appendChild(createLabeledInput(apiOperator, 'Token Endpoint', 'TokenEndpoint', 'TokenEndpoint', 'tokenEndpoint', true));
+    }
+
+    // Client ID (always shown)
+    authValues.appendChild(createLabeledInput(apiOperator, 'Client ID', 'ClientID', 'ClientID', 'clientId', true));
+
+    // Conditional: Client Secret
+    if (gt === 'authorization_code' || gt === 'client_credentials' || gt === 'Resource Owner Password Credentials') {
+        authValues.appendChild(createLabeledInput(apiOperator, 'Client Secret', 'ClientSecret', 'ClientSecret', 'clientSecret', true));
+    }
+
+    // Conditional: Username & Password
+    if (gt === 'Resource Owner Password Credentials') {
+        authValues.appendChild(createLabeledInput(apiOperator, 'Username', 'Username', 'Username', 'username', true));
+        authValues.appendChild(createLabeledInput(apiOperator, 'Password', 'Password', 'Password', 'password', true));
+    }
+
+    // Scopes (always shown)
+    authValues.appendChild(createLabeledInput(apiOperator, 'Scopes', 'Scopes', 'Scopes', 'scopes', true));
+
+    // Client Authentication
+    authValues.appendChild(
+        createSelect(apiOperator,
+            'Client Authentication',
+            'clientAuthentication',
+            clientAuthenticationOpts,
+            'clientAuthentication',
+            (value: string) => {
+                apiOperator.auth.clientAuthentication = value;
+                // 不需要重新渲染整个表单，除非 UI 依赖此值
+            }
+        )
+    );
+
+    // --- 新增：Generate Token 按钮 ---
+    const buttonWrapper = createElement('div', {}, ['parameter-item']);
+    const generateBtn = createElement('button', {}, ['parameter-button']) as HTMLButtonElement;
+    generateBtn.type = 'button';
+    generateBtn.textContent = 'Generate Token';
+    generateBtn.addEventListener('click', () => generateOAuth2Token(apiOperator)); // 绑定点击事件
+
+    buttonWrapper.appendChild(generateBtn);
+    authValues.appendChild(buttonWrapper);
+}
+
+function createSectionRequestBody(apiOperator: any) {
     const bodySection = document.createElement('div');
     bodySection.setAttribute('data-layer', 'request-body-section');
     bodySection.className = 'RequestBodySection codigma-apiunit-request-body-section';
@@ -351,14 +567,170 @@ function createSectionRequestBody(requestBody: any) {
     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: any, container: HTMLElement, bodyCnr: any) {
+    const wrapper = createElement('div');
+    const label = createElement('label');
+    label.style.margin = '0 1rem';
+    label.textContent = 'Content-Type';
+
+    const select = createElement('select') as HTMLSelectElement;
+    select.style.width = '18rem'; // 模拟 [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);
+
+    // 监听 change
+    select.addEventListener('change', (e) => {
+        const newValue = (e.target as HTMLSelectElement).value;
+        if (apiOperator.currentConsume !== newValue) {
+            apiOperator.currentConsume = newValue;
+            renderConsumeSection(apiOperator, container, bodyCnr); // 重新渲染整个区域
+        }
+    });
+
+    wrapper.appendChild(label);
+    wrapper.appendChild(select);
+    return wrapper;
+}
+
+// ========== 渲染请求体到指定容器（无 ID 依赖） ==========
+function renderRequestBodyInto(apiOperator: any, targetDiv: HTMLElement) {
+    targetDiv.innerHTML = ''; // 清空目标区域
+
+    // 确保 requestBody 和 content 存在
+    const ct = apiOperator.currentConsume || getCurrentConsume(apiOperator);
+    // ✅ 情况 1: 使用 textarea（JSON/XML/None/text/plain）
+    if (
+        ct === null ||
+        ct === 'None' ||
+        ct === 'application/json' ||
+        ct === 'application/xml' ||
+        ct === 'text/plain'
+    ) {
+        // 决定使用哪个 key：'None' 也视为一种 content 类型（或可映射为 ''，但这里直接用 'None'）
+        const mimeType = ct || 'None';
+
+        // 从 content[mimeType] 读取，若无则默认空字符串
+        let rawValue = apiOperator.requestBody.content[mimeType];
+        if (rawValue == null) {
+            rawValue = '';
+            apiOperator.requestBody.content[mimeType] = rawValue; // 初始化
+        }
+
+        const textarea = createElement('textarea', {}, []) as HTMLTextAreaElement;
+        textarea.style.width = '100%';
+        textarea.style.height = '200px';
+        textarea.style.fontFamily = 'monospace';
+        textarea.style.fontSize = '14px';
+        textarea.placeholder = `Enter ${mimeType} body...`;
+
+        textarea.value = rawValue;
+
+        // 监听输入 → 写回 content[mimeType]
+        textarea.addEventListener('input', () => {
+            apiOperator.requestBody.content[mimeType] = textarea.value;
+            console.log(`Content updated for ${mimeType}:`, textarea.value);
+        });
+
+        targetDiv.appendChild(textarea);
+
+    }
+    // ✅ 情况 2: 表单参数
+    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: any, index: number) => {
+            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']) as HTMLInputElement;
+
+            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: any) {
+    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;
+}
+
+// ========== 模拟 setEditStatus（你原有逻辑） ==========
+function setEditStatus(event: KeyboardEvent, status: boolean) {
+    // TODO: 根据你的业务逻辑实现
+    console.log('setEditStatus called:', event.key, status);
+}
+
+// ========== 主渲染函数 ==========
+function renderConsumeSection(apiOperator: any, container: HTMLElement, bodyCnr: any) {
+    container.innerHTML = '';
+
+    container.appendChild(bodyCnr);
+
+    // 创建外层包裹 div
+    const wrapperDiv = createElement('div', {}, ['codigma-apiunit-parakeyvalues']);
+
+    // 1. Content-Type 选择器
+    const selectWrapper = createConsumeSelect(apiOperator, container, bodyCnr);
+    wrapperDiv.appendChild(selectWrapper);
+
+    // 2. 请求体区域（不再使用固定 ID）
+    const reqBodyContainer = createElement('div', {}, ['codigma-apiunit-request-body-info']); // 无 id，避免冲突
+    renderRequestBodyInto(apiOperator, reqBodyContainer);        // 改为传入目标容器
+    wrapperDiv.appendChild(reqBodyContainer);
+
+    // 将整个包裹 div 添加到外部容器
+    container.appendChild(wrapperDiv);
+}
+
+
 function createSectionResponse(apiOperator: any) {
     const responseSection = document.createElement('div');
     responseSection.setAttribute('data-layer', 'reqresponse');
@@ -398,6 +770,11 @@ function createTimeStatusElement(apiOperator: any) {
     return timeStatus;
 }
 
+function updateTimeStatus(timeStatus: any, apiOperator: any) {
+    timeStatus.textContent
+        = `Status: ${apiOperator.response.status || ""} ${apiOperator.response.statusText || ""}  Time: ${apiOperator.requestDuration || ""}`;
+}
+
 function createRow(parameter: any) {
     const petIdRow = document.createElement('div');
     petIdRow.setAttribute('data-layer', 'keyValue');
@@ -413,7 +790,6 @@ function createRow(parameter: any) {
 
     // 可选：添加输入事件监听（根据需求）
     petIdValue.addEventListener('input', (e: any) => {
-        console.log('当前值:', e.target.value);
         // 这里可以添加保存逻辑（如更新状态/发送请求
         parameter["value"] = e.target.value
     });
@@ -430,7 +806,7 @@ function createInputElement() {
     return inputText;
 }
 
-function createSelectRow(auths: any, authValues: any) {
+function createSelectRow(name: string, args: any) {
     // 创建外层容器div
     const container = document.createElement('div');
     container.setAttribute('data-layer', 'keyValue');
@@ -438,9 +814,9 @@ function createSelectRow(auths: any, authValues: any) {
 
     // 创建type显示div
     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 + ":";
 
     // 创建select元素
     const selectElement: any = document.createElement('select');
@@ -449,22 +825,13 @@ function createSelectRow(auths: any, authValues: any) {
     selectElement.setAttribute('data-layer', 'valueText');
 
     // 示例选项（可根据实际需求添加
-    auths.forEach((auth: any) => {
+    args.forEach((auth: any) => {
         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: any) {
-        //切换前先移除掉原来的元素
-        authValues && Array.from(authValues.children).slice(1).forEach((el: any) => el.remove());
-        const auth = auths[event.target.selectedIndex];
-        let parameters = auth.parameters || [];
-        const authRows = parameters.map((parameter: any) => createRow(parameter));
-        authValues.append(...authRows);
-    });
     // 组装DOM结构
     container.appendChild(typeLabel);
     container.appendChild(selectElement);
@@ -479,6 +846,179 @@ function isHeaderParam(param: any) {
     return param.in === 'header';
 }
 
+
+async function generateOAuth2Token(apiInfo: any) {
+    // TODO 生成OAuth2.0 Token
+    // 1. 获取访问令牌
+    const accessToken = await getAccessToken(apiInfo);
+    apiInfo.auth.token = accessToken
+}
+
+
+  /**
+   * 获取 OAuth 2.0 访问令牌
+   * @returns {Promise<string>} 访问令牌
+   */
+async function getAccessToken(apiInfo: any) {
+    const auth = apiInfo.auth;
+    if (auth == null) {
+        throw new Error('OAuth2.0认证信息未配置');
+    }
+    const CLIENT_ID = auth.clientId;
+    const CLIENT_SECRET = auth.clientSecret;
+    const SCOPE = auth.scopes;
+
+    if (apiInfo.auth.grantType == 'client_credentials') {
+        try {
+            console.log('正在获取访问令牌...');
+
+            // 构造请求头
+            const headerParams: any = {
+                'Content-Type': 'application/x-www-form-urlencoded'
+            };
+            // 构造请求体 (使用 client_credentials 流)
+            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 {
+                // 如果是 Headers 方式，则在后续的 fetch 请求中添加 Authorization 头
+                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(`获取令牌失败: ${response.status} ${response.statusText}. ${JSON.stringify(errorData)}`);
+            }
+
+            const tokenData = await response.json();
+            console.log('令牌获取成功:', tokenData);
+            return tokenData.access_token;
+        } catch (error) {
+            console.error('获取访问令牌时出错:', error);
+            throw error;
+        }
+    } else if (apiInfo.auth.grantType == 'Resource Owner Password Credentials') {
+
+    } else if (apiInfo.auth.grantType == 'authorization_code') {
+        // ========== 配置：替换为你在本地 OAuth 服务注册的客户端信息 ==========
+        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' 如果服务支持
+        };
+
+        // 从 URL 获取参数
+        function getUrlParams() {
+            const params = new URLSearchParams(window.location.search);
+            return Object.fromEntries(params.entries());
+        }
+
+        // 构建授权 URL 并跳转
+        function redirectToAuth() {
+            const state = Math.random().toString(36).substring(2);
+            const nonce = Math.random().toString(36).substring(2); // OpenID Connect 推荐使用 nonce
+            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); // 用于 ID Token 验证
+            authUrl.searchParams.append('access_type', 'offline'); // 请求 refresh_token（如果支持）
+
+            const newTab = window.open(authUrl.toString(), '_blank');
+        }
+
+        // // 使用授权码换取 Token
+        // async function exchangeCodeForToken(code: any) {
+        //     try {
+        //         const response = await fetch(config.tokenUrl, {
+        //             method: 'POST',
+        //             headers: {
+        //                 'Content-Type': 'application/x-www-form-urlencoded',
+        //                 'Authorization': 'Basic ' + btoa(config.clientId + ':' + config.clientSecret)
+        //             },
+        //             body: new URLSearchParams({
+        //                 // 'client_id': config.clientId,
+        //                 // 'client_secret': config.clientSecret,
+        //                 'code': code,
+        //                 'redirect_uri': config.redirectUri,
+        //                 'grant_type': 'authorization_code'
+        //             })
+        //         });
+
+        //         if (!response.ok) {
+        //             const errorText = await response.text();
+        //             throw new Error(`HTTP ${response.status}: ${errorText}`);
+        //         }
+
+        //         const tokenData = await response.json();
+        //         console.log('Token Response:', tokenData);
+
+        //         // 可选：清除 URL 参数
+        //         // history.replaceState({}, document.title, window.location.pathname);
+        //     } catch (error) {
+        //         console.error('Token Exchange Error:', error);
+        //     }
+        // }
+
+        // // 页面初始化
+        // document.addEventListener('DOMContentLoaded', () => {
+        //     const loginBtn = document.getElementById('loginBtn');
+        //     const urlParams = getUrlParams();
+
+        //     if (urlParams.code) {
+        //         // 已收到授权码
+        //         loginBtn.style.display = 'none';
+        //         exchangeCodeForToken(urlParams.code);
+        //     } else {
+
+        //     }
+        // });
+
+        redirectToAuth();
+    } else if (apiInfo.auth.grantType == 'Implicit') {
+
+    } else {
+
+    }
+}
+
+
+function getBodyEditorContent(apiOperator: any): string {
+    const ct = apiOperator.currentConsume || 'None';
+    return apiOperator.requestBody.content[ct];
+}
+
+
+
+let gotResponse = false;
+
+let ifSendingRequest = false;
+let requestDuration: string = "0";
+let responseObj: {
+    status ?: number | string;
+    statusText ?: string;
+    body ?: string;//响应体统一转换成字符串
+} = { };
+// 创建一个新的 AbortController 实例  
+let controller: AbortController | undefined;
+
 /**
  * 
  * 
@@ -493,43 +1033,45 @@ function isHeaderParam(param: any) {
  * @param {*} apiOperator
  * @param {*} apiInfo 
  */
-
 function sendRequest(apiOperator: any, responseSectionRef: any) {
-    // 防御性检查：确保传入了 responseSectionRef，避免后续调用 querySelector 时抛出错误
-    if (!responseSectionRef) {
-        console.error('sendRequest: missing responseSectionRef. Aborting request to avoid runtime errors.');
-        return;
-    }
-    let reuqestUrl = getRequestUrl(apiOperator);
-    const result = checkIfParameter(apiOperator);
+    const apiInfo = apiOperator
+    let reuqestUrl = getRequestUrl(apiInfo);
+
+    //TODO 根据参数类型构造请求头和请求体,apiInfo['parameterHasFormDataVer2']表示有formData参数，暂时未区分具体的content-type，待改造
+    let header = apiInfo['parameterHasFormDataVer2'] ? 'application/x-www-form-urlencoded' :
+        ((apiInfo['parameterHasBody']) ? apiInfo['currentConsume'] : 'application/json');
 
-    let header = result.hasRequestBody ? 'application/json' :
-        (result.hasRequestFormData ? 'application/x-www-form-urlencoded' : 'application/json');
     let headers: any = {
         'Content-Type': header
     }
-
-    //TODO
-    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);
+    // 构造 Basic Auth 头
+    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);
-
-    //TODO
-    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();
@@ -540,32 +1082,32 @@ function sendRequest(apiOperator: any, responseSectionRef: any) {
 
     // 使用 fetch 发送请求，并传递 signal  
     fetch(reuqestUrl, {
-        method: apiOperator.method.toUpperCase(),
+        method: apiInfo.method.toUpperCase(),
         headers: headers,
-        body: body != null ? JSON.stringify(body) : null,
+        body: body,
         signal: signal
     })
         .then(response => {
             if (!response.ok) {
-                apiOperator.response = {
+                responseObj = {
                     status: response.status,
-                    statusText: response.statusText
+                    statusText: response.statusText,
+                    body: ""
                 }
 
                 const endTime = Date.now(); // 即使在错误的情况下也记录结束时间  
-                apiOperator.requestDuration = formatDuration(endTime - startTime);
-                apiOperator.ifSendingRequest = false;
-                // apiOperator.responseJsoneditor.value = "";
+                requestDuration = formatDuration(endTime - 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
             }
@@ -586,18 +1128,19 @@ function sendRequest(apiOperator: any, responseSectionRef: any) {
                 });
         })
         .then(data => {
-            apiOperator.gotResponse = true;
+            gotResponse = true;
             const responsebodyElement = responseSectionRef.querySelector('[data-layer="responsebody"]');
             // 此时 data 可能是 JSON 对象，也可能是文本字符串  
             if (typeof data === 'object') {
                 // 假设 data 是 JSON 对象，你可以在这里处理它  
                 console.log('Received JSON:', data);
-                responsebodyElement.textContent = JSON.stringify(data, null, 4)
+                responseObj.body = JSON.stringify(data, null, 4);
             } else {
                 // 假设 data 是文本字符串，你可以在这里处理它  
                 console.log('Received text:', data);
-                responsebodyElement.textContent = data;
+                responseObj.body = data;
             }
+            responsebodyElement.textContent = responseObj.body;
         })
         .catch(error => {
             // 错误处理  
@@ -605,11 +1148,6 @@ function sendRequest(apiOperator: any, responseSectionRef: any) {
         });
 }
 
-function updateTimeStatus(timeStatus: any, apiOperator: any) {
-    timeStatus.textContent
-        = `Status: ${apiOperator.response.status || ""} ${apiOperator.response.statusText || ""}  Time: ${apiOperator.requestDuration || ""}`;
-}
-
 function createRequestOverlayLayer(apiOperator: any, responseSectionRef: any) {
     // 创建主容器  
     const container = document.createElement('div');
@@ -666,40 +1204,15 @@ function createRequestOverlayLayer(apiOperator: any, responseSectionRef: any) {
     return container
 }
 
-function checkIfParameter(apiOperator: any) {
-    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;
-            }
-        }
-    }
-
-    //support openapi 3.0
-    const requestBody = apiOperator.rawApiInfo.requestBody;
-    if (requestBody) {
-        hasRequestBody = true;
-    }
-    // 返回包含两个状态的对象
-    return { hasRequestBody, hasRequestFormData };
-}
 
 function formatDuration(milliseconds: number) {
-    let totalSeconds: string | number = Math.floor(milliseconds / 1000);
-    let seconds: string | number = totalSeconds % 60;
-    let minutes: string | number = Math.floor(totalSeconds / 60) % 60;
-    let hours: string | number = Math.floor(totalSeconds / (60 * 60));
+    let totalSeconds = Math.floor(milliseconds / 1000);
+    let seconds: any = totalSeconds % 60;
+    let minutes: any = Math.floor(totalSeconds / 60) % 60;
+    let hours: any = Math.floor(totalSeconds / (60 * 60));
 
     // 毫秒部分  
-    let millisecondsPart: string | number = Math.floor(milliseconds % 1000);
+    let millisecondsPart: any = Math.floor(milliseconds % 1000);
     // 毫秒不足三位时前面补0  
     millisecondsPart = millisecondsPart.toString().padStart(3, '0');
 
@@ -712,10 +1225,18 @@ function formatDuration(milliseconds: number) {
     return `${hours}h${minutes}m${seconds}s${millisecondsPart}ms`;
 }
 
-function getRequestUrl(apiOperator: any) {
-    let reuqestUrl = apiOperator.url;
+function clickAbortRequest() {
+    // 如果你想取消请求，调用 controller 的 abort 方法
+    if (controller) {
+        controller.abort();
+        ifSendingRequest = false;
+    }
+}
+
+function getRequestUrl(apiInfo: any) {
+    let reuqestUrl = apiInfo.url;
 
-    const requestParameters = apiOperator.rawApiInfo.parameters || [];
+    const requestParameters = apiInfo.rawApiInfo.parameters || [];
     if (requestParameters == null) {
         return reuqestUrl;
     }
@@ -726,13 +1247,51 @@ function getRequestUrl(apiOperator: any) {
         }
     }
 
-    let queryParams = getQueryParams(apiOperator, requestParameters);
+    let queryParams = getQueryParams(apiInfo, requestParameters);
     reuqestUrl = queryParams.length > 0 ? (reuqestUrl + "?" + queryParams.join("&")) : reuqestUrl;
 
     return reuqestUrl;
 }
 
-function getQueryParams(apiOperator: any, requestParameters: any) {
+function addAuthHeader(apiInfo: any, headers: any) {
+    const env = isBrowserEnvironment();
+    if (apiInfo.auth.authType == "Basic Auth" && apiInfo.auth != null) {
+        if (env) {
+            const credentials = btoa(`${apiInfo.auth.username}:${apiInfo.auth.passWord}`); // btoa 是浏览器内置的 Base64 编码函数
+            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: any, requestParameters: any) {
+    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: any, requestParameters: any) {
     let queryParams = [];
     for (const element of requestParameters) {
         if (element.in == "query") {
@@ -748,9 +1307,9 @@ function getQueryParams(apiOperator: any, requestParameters: any) {
         }
     }
 
-    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)
             }
@@ -781,6 +1340,16 @@ function getRequestFormData(rawApiInfo: any) {
     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;    // Node.js 环境
+    } else {
+        return false;
+    }
+}
+
 
 function createSvg() {
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -803,20 +1372,17 @@ function createSvg() {
 
 function parseParaModel(parameterObj: any, dataDef: any) {
     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;
 }
 
@@ -849,10 +1415,69 @@ function parseModel(modelDef: any, apiDef: any) {
     return model;
 }
 
+function parseFormDataModel(modelDef: any, apiDef: any) {
+    const model: any = [];
+    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: any;
+                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: any, dataDef: any) {
+    let bodyModel: any = [];
+    if (parameterObj.schema['$ref']) { // 对象类型
+        bodyModel = parseFormDataModel(parameterObj.schema['$ref'], dataDef);
+    }
+    return bodyModel;
+}
+
 function parseElement(element: any) {
     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')) {
@@ -863,6 +1488,12 @@ function parseElement(element: any) {
         }
     }
 
+    // 如果有default则用default的值
+    if (element['default']) {
+        elementValue = element['default'];
+    }
+
+    //如果有example则用example的值
     if (element['example']) {
         elementValue = element['example'];
     }
@@ -870,6 +1501,18 @@ function parseElement(element: any) {
     return elementValue;
 }
 
+function parseElementType(element: any) {
+    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';
+}
+
+
 const HTTP_METHODS = ['get', 'put', 'post', 'delete', 'options', 'head', 'patch', 'trace'] as const;
 type HttpMethod = typeof HTTP_METHODS[number]; // 等价于你的 HttpMethods 的值类型
 
@@ -909,56 +1552,123 @@ function parseOpenAPI(openapiSpec: OpenAPIV3CustomDoc) {
             const apiOperator: any = {
                 method: method.toUpperCase(),
                 url: path,
-                rawApiInfo: null,
+                rawApiInfo: operation,
                 requestBody: null,
                 response: {},
-                auths: [
-                    {
-                        type: "No Auth"
-                    },
-                    {
-                        type: "Basic Auth",
-                        parameters: [
-                            {
-                                name: "userName",
-                                value: ""
-                            },
-                            {
-                                name: "password",
-                                value: ""
-                            }
-                        ]
-                    }
-                ]
+                auth: {}
             };
 
             if (operation) {
                 // requestBody
                 // support openapi 2.0
-                if (operation.parameters) {
-                    const parameter = operation.parameters.filter((val: any) => val.in == 'body');
-                    if (parameter && parameter.length > 0) {
-                        // let requestBody = parseParaModel(parameter[0], data['definitions']);
-                        // apiOperator.requestBody = requestBody;
+                // if (operation.parameters) {
+                //     const parameter = operation.parameters.filter((val: any) => val.in == 'body');
+                //     if (parameter && parameter.length > 0) {
+                //         // let requestBody = parseParaModel(parameter[0], data['definitions']);
+                //         // apiOperator.requestBody = requestBody;
+                //     }
+                // }
+
+                // //support openapi 3.0
+                // if (operation.requestBody) {
+                //     const requestBodyObject = operation.requestBody as OpenAPIV3.RequestBodyObject //目前只支持对象类型  TODO 引用类型待支持
+                //     const content = requestBodyObject.content;
+                //     for (const key in content) {
+                //         if (Object.prototype.hasOwnProperty.call(content, key)) {
+                //             const element: OpenAPIV3.MediaTypeObject = content[key];
+                //             if (element) {
+                //                 let requestBody = parseParaModel(element, openapiSpec["components"]!["schemas"]);
+                //                 apiOperator.requestBody = requestBody;
+                //             }
+                //         }
+                //     }
+                // }
+
+
+                if (apiOperator.rawApiInfo.parameters) {
+                    const parameterBody = apiOperator.rawApiInfo.parameters.filter((val: any) => 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" //TODO 简化处理暂时取第一个
+                        apiOperator['currentConsume'] = currentConsume
+                        let requestBody: any = parseParaModel(parameterBody[0], openapiSpec['definitions']); // support openapi 2.0
+                        apiOperator["requestBody"]["content"][currentConsume] = JSON.stringify(requestBody, null, 4);
+                        apiOperator["parameterHasBody"] = true;//标记该接口有body参数，仅适用于openapi 2.0
+                    } 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';// TODO 未来可以改成checkbox
+                                }
+                            }
+                        }
+                        const parameterFormData = apiOperator.rawApiInfo.parameters.filter((val: any) => val.in == 'formData');
+                        if (parameterFormData && parameterFormData.length > 0) {
+                            apiOperator["parameterHasFormDataVer2"] = true;//标记该接口有formData参数，仅适用于openapi 2.0  body参数和formData参数互斥
+                        }
+                        // support openapi 3.0 enum parameter parsing
+                        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);
+                                }
+                            }
+                        }
                     }
                 }
 
                 //support openapi 3.0
-                if (operation.requestBody) {
-                    const requestBodyObject = operation.requestBody as OpenAPIV3.RequestBodyObject //目前只支持对象类型  TODO 引用类型待支持
-                    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: OpenAPIV3.MediaTypeObject = 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 == undefined) {
+                                    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') {//TODO 支持更多的content-type
+                                    let requestBody: any = parseParaModel(element, openapiSpec["components"]!["schemas"]);
+                                    apiOperator["requestBody"]["content"][key] = JSON.stringify(requestBody, null, 4)
+                                } else {
+                                    let requestFormDataBody: any = parseFormDataParaModel(element, openapiSpec["components"]!["schemas"]);
+                                    apiOperator["requestBody"]["content"][key] = requestFormDataBody;
+                                }
+                                apiOperator["parameterHasBody"] = true;//标记该接口有body参数，仅适用于openapi 3.0
                             }
                         }
                     }
+                    if (apiOperator.consumes) {
+                        if (apiOperator.consumes.length > 0) {
+                            apiOperator['currentConsume'] = apiOperator['consumes'][0]
+                        }
+                    }
                 }
 
-                apiOperator.rawApiInfo = operation;
                 // 添加到结果列表
                 apiOperatorList.push(apiOperator);
             }