@ajaxjs/ui 1.2.9 → 1.3.1

package/dist/api-helper/index.js

@@ -1,142 +0,0 @@
-import RequestBody from "./request-body.vue";
-import Document from "./document/document.vue";
-import InputTable from "./common/input-table.vue";
-
-import { codemirror } from "vue-codemirror";
-import "codemirror/addon/selection/active-line.js";
-import "codemirror/addon/edit/closebrackets.js";
-import "codemirror/mode/javascript/javascript";
-import "codemirror/addon/lint/json-lint";
-import "codemirror/lib/codemirror.css";
-import "codemirror/addon/hint/show-hint.css";
-import "codemirror/theme/base16-light.css";
-
-import xhr from "./xhr";
-
-export default {
-    components: { RequestBody, Document, InputTable, codemirror },
-    mixins: [xhr],
-    data() {
-        return {
-            mainTab: 'form',
-            url: {
-                prefix: "https://dd.com",
-                // main: "https://jsonplaceholder.typicode.com/posts",
-                main: "https://httpbin.org/post",
-            },
-            httpMethod: "POST",
-
-            cmOption: {
-                tabSize: 4,
-                styleActiveLine: true,
-                lineNumbers: true,
-                mode: "application/json",
-                // theme: "monokai"
-            },
-
-            requestParams: {
-                form: {
-                    contentType: 'application/x-www-form-urlencoded',
-                    data: [
-                        {
-                            enable: true,
-                            key: "param1",
-                            value: "bar",
-                            desc: "",
-                        },
-                        {
-                            enable: true,
-                            key: "param2",
-                            value: "foo",
-                            desc: "",
-                        },
-                        // {
-                        //     enable: true,
-                        //     key: "",
-                        //     value: "",
-                        //     desc: "",
-                        // },
-                    ]
-                },
-                head: [
-                    {
-                        enable: true,
-                        key: "",
-                        value: "",
-                        desc: "",
-                    },
-                ],
-                raw: {
-                    contentType: 'application/json',
-                    json: '{ "title": "My post title", "body": "This is the body of my post." }',
-                },
-                queryString: [
-                    {
-                        enable: true,
-                        key: "",
-                        value: "",
-                        desc: "",
-                    },
-                ],
-            },
-
-            requestAll: "",
-            responseHead: "",
-            responseBody: "",
-        };
-    },
-    mounted() {
-
-    },
-    methods: {
-        load() {
-            let params, contentType;
-
-            if ('form' === this.mainTab) {
-                contentType = this.requestParams.form.contentType;
-                params = json2fromParams(this.requestParams.form.data);
-            } else if ('raw' === this.mainTab) {
-                contentType = this.requestParams.raw.contentType;
-                params = this.requestParams.raw.json;
-            }
-
-            this.doRequest(this.httpMethod, this.url.main, params, {
-                header: {
-                    'content-type': contentType
-                }
-            });
-        },
-        authToken() {
-            // 读取粘贴板
-            try {
-                navigator.clipboard.readText().then((v) => {
-                    console.log("获取剪贴板成功：", v);
-                    this.requestParams.head.unshift({
-                        enable: true,
-                        key: "Authorization",
-                        value: "Bearer " + v,
-                        desc: "认证用的 token",
-                    });
-                }).catch((v) => {
-                    console.log("获取剪贴板失败: ", v);
-                });
-            } catch (e) {
-                console.log(e);
-                this.$Message.error('不支持读取粘贴板');
-            }
-        },
-
-        formatJs() {
-            let json = this.requestParams.raw.json;
-            json = JSON.stringify(JSON.parse(json), null, 4);
-            this.requestParams.raw.json = json;
-        }
-    },
-};
-
-function json2fromParams(arr) {
-    let _arr = [];
-    arr.forEach(({ key, value }) => _arr.push(key + '=' + encodeURIComponent(value)));
-
-    return _arr.join('&');
-}

package/dist/api-helper/index.vue

@@ -1,108 +0,0 @@
-<template>
-  <div style="clear: both;margin: 30px; border:1px solid lightgray;padding:10px 5px">
-    <section class="url-bar">
-      <Input v-model="url.main" style="width: 70%">
-        <span slot="prepend">
-          <Select v-model="httpMethod" style="width: 80px">
-            <Option value="GET">GET</Option>
-            <Option value="POST">POST</Option>
-            <Option value="PUT">PUT</Option>
-            <Option value="DELETE">DELETE</Option>
-            <Option value="PATCH">PATCH</Option>
-            <Option value="HEAD">HEAD</Option>
-            <Option value="OPTION">OPTION</Option>
-          </Select>
-        <!--   <Divider type="vertical" />
-          {{ url.prefix }} -->
-        </span>
-      </Input>
-      <Button style="width: 8%" type="primary" @click="load" :disabled="loading">发送</Button>
-     <!--  <Button style="width: 8%">保存</Button> -->
-    </section>
-
-   <!--  <Document /> -->
-
-    <Tabs name="request" class="request" v-model="mainTab" :animated="false">
-      <TabPane label="请求体 Form" name="form" tab="request">
-        <div style="margin:10px 0;">
-          content-type
-          <Select
-            style="width:260px;"
-            size="small"
-            transfer
-            v-model="requestParams.form.contentType"
-          >
-            <Option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</Option>
-            <Option value="multipart/form-data">multipart/form-data</Option>
-          </Select>
-        </div>
-        <InputTable :data="requestParams.form.data" />
-      </TabPane>
-      <TabPane label="请求体 Raw" name="raw" tab="request">
-        <div style="margin:10px 0;">
-          <a style="float:right;" @click="formatJs">格式化</a>
-          content-type
-          <Select
-            style="width:260px;"
-            size="small"
-            transfer
-            v-model="requestParams.raw.contentType"
-          >
-            <Option value="application/json">application/json</Option>
-            <Option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</Option>
-            <Option value="multipart/form-data">multipart/form-data</Option>
-            <Option value="text/plain">text/plain</Option>
-            <Option value="text/plain">text/xml</Option>
-          </Select>
-        </div>
-
-        <!-- JSON 源码编辑器-->
-        <codemirror
-          class="code-editor"
-          ref="cm"
-          v-model="requestParams.raw.json"
-          :options="cmOption"
-          style="height:200px;"
-        ></codemirror>
-      </TabPane>
-      <TabPane tab="request" label="查询参数 Query" name="name3">
-        <InputTable :data="requestParams.queryString" />
-      </TabPane>
-      <TabPane label="头部参数" name="head" tab="request">
-        <InputTable :data="requestParams.head" />
-        <div style="float:right;margin-top:10px;">
-          <a @click="authToken">一键生成 Bear Token</a>
-        </div>
-      </TabPane>
-    </Tabs>
-
-    <Tabs class="response" name="response" value="responseContent" :animated="false">
-      <TabPane tab="response" label="返回内容" name="responseContent">
-        <div style="clear:both;height:30px;font-size:8pt;">
-          <div style="float:right;height:30px;">Elapsed: {{this.response.elapsed}}ms HTTP status code: <span v-html="formatStatusCode()"></span></div>
-        </div>
-        <!-- JSON 源码编辑器-->
-        <codemirror class="code-editor" v-model="responseBody" :options="cmOption" style="height:300px;"></codemirror>
-      </TabPane>
-      <TabPane tab="response" label="返回头部" name="responseHead">
-        <Input type="textarea" :rows="8" :readonly="true" v-model="responseHead" />
-      </TabPane>
-      <TabPane tab="response" label="请求信息" name="requestHead">
-        <Input type="textarea" :rows="8" :readonly="true" v-model="requestAll" />
-      </TabPane>
-    </Tabs>
-  </div>
-</template>
-
-<script src="./index.js"></script>
-
-<style lang="less" scoped>
-.request {
-  clear: both;
-}
-
-.url-bar > * {
-  float: left;
-  margin-right: 10px;
-}
-</style>

package/dist/api-helper/request-body.vue

@@ -1,66 +0,0 @@
-<template>
-  <div>
-    <RadioGroup v-model="requestType" type="button" size="small">
-      <Radio label="Form"></Radio>
-
-      <Radio label="Raw"></Radio>
-    </RadioGroup>
-    <!-- 
-    <span v-if="requestType == 'JSON'" class="jsonRootType">JSON 根类型
-      <RadioGroup v-model="json.rootType" size="small">
-        <Radio label="Object" size="small"></Radio>
-        <Radio label="Array"></Radio>
-      </RadioGroup>
-    </span>-->
-
-    <div style="margin-top: 20px">
-      <section v-if="requestType == 'Form'">
-        <Table mode="SIMPLE" />
-      </section>
-
-      <section v-if="requestType == 'JSON'">
-        <Table mode="SCHEME" />
-      </section>
-
-      <section v-if="requestType == 'Raw'">
-        <div style="width:500px;margin:10px 0;">
-          ContentType
-          <Select v-model="raw.contentType" style="width:200px;" size="small" transfer>
-            <Option value="application/json">application/json</Option>
-            <Option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</Option>
-            <Option value="multipart/form-data">multipart/form-data</Option>
-            <Option value="text/plain">text/plain</Option>
-            <Option value="text/plain">text/xml</Option>
-          </Select>
-        </div>
-        <Input type="textarea" :rows="4" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import Table from "./table.vue";
-
-export default {
-  components: { Table },
-  data() {
-    return {
-      requestType: "Form",
-      json: {
-        rootType: "Object",
-      },
-      raw: {
-        contentType: "application/json",
-      },
-    };
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.jsonRootType {
-  font-size: 9pt;
-  padding-left: 20px;
-}
-</style>

package/dist/api-helper/table.d.ts

@@ -1,7 +0,0 @@
-declare const _default: {
-    props: {
-        mode: StringConstructor;
-    };
-    data(): API_HELPER_TABLE;
-};
-export default _default;

package/dist/api-helper/table.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    props: {
-        mode: String,
-    },
-    data() {
-        return {
-        //   mode: "SCHEME",
-        };
-    },
-};
-//# sourceMappingURL=table.js.map

package/dist/api-helper/table.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../src/api-helper/table.ts"],"names":[],"mappings":";;AAAA,kBAAe;IACb,KAAK,EAAE;QACL,IAAI,EAAE,MAAM;KACb;IACD,IAAI;QACF,OAAO;QACL,oBAAoB;SACD,CAAC;IACxB,CAAC;CACF,CAAC"}

package/dist/api-helper/table.ts

@@ -1,10 +0,0 @@
-export default {
-  props: {
-    mode: String,
-  },
-  data() {
-    return {
-      //   mode: "SCHEME",
-    } as API_HELPER_TABLE;
-  },
-};

package/dist/api-helper/table.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="table" :class="mode">
-    <header>
-      <ul>
-        <li class="check"><input type="checkbox" /></li>
-        <li class="name">参数变量名</li>
-        <li class="type">类型</li>
-        <li class="value">参数值</li>
-        <li class="default">值示例</li>
-        <li class="required">必填</li>
-        <li class="comment">说明</li>
-        <li class="action">操作</li>
-      </ul>
-    </header>
-
-    <ul class="tableBody">
-      <li>
-        <div class="row check">
-          <input type="checkbox" />
-        </div>
-        <div class="row name">
-          <Input value="dfgg" size="small" />
-        </div>
-        <div class="row type">
-          <Select size="small" transfer>
-            <Option value="string">string</Option>
-            <Option value="number">number</Option>
-            <Option value="boolean">boolean</Option>
-            <Option value="object">object</Option>
-            <Option value="array">array</Option>
-            <Option value="null">null</Option>
-          </Select>
-        </div>
-        <div class="row value">
-          <Input value="dfgg" size="small" />
-        </div>
-
-        <div class="row comment">
-          <Input value="dfgg" size="small" />
-        </div>
-        <div class="row action"></div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" src="./table.ts"></script>
-
-<style lang="less" scoped>
-.table {
-  width: 100%;
-
-  .check {
-    width: 50px;
-  }
-  .name {
-    width: 200px;
-  }
-  .type {
-    width: 100px;
-  }
-  .value {
-    width: 200px;
-  }
-  .comment {
-    width: 300px;
-  }
-  .action {
-    width: 100px;
-  }
-
-  .row {
-    display: inline-block;
-    padding: 0 4px;
-    box-sizing: border-box;
-  }
-}
-
-.SCHEME {
-  .default,
-  .required {
-    display: none;
-  }
-}
-
-header {
-  background-color: #f8f8f9;
-  li {
-    // text-align: center;
-    padding: 6px 14px;
-    display: inline-block;
-    font-weight: bold;
-    box-sizing: border-box;
-  }
-}
-
-.tableBody {
-  li {
-    padding: 10px;
-    box-sizing: border-box;
-  }
-}
-</style>

package/dist/api-helper/xhr.js

@@ -1,100 +0,0 @@
-//  XHR 发送组件
-export default {
-    data() {
-        return {
-            loading: false,
-            response: {
-                readyState: 0,
-                status: 0,
-                elapsed: 0,
-            },
-        };
-    },
-
-    methods: {
-        doRequest(method, url, params, cfg) {
-            let el = new Date();
-            let xhr = new XMLHttpRequest();
-            xhr.open(method, url);
-            xhr.timeout = 5000; // 设置超时时间为5秒
-            xhr.ontimeout = () => this.loading = false;// 请求超时后的处理
-            xhr.onreadystatechange = () => {
-                this.loading = true;
-                this.response.readyState = xhr.readyState;
-                this.response.status = xhr.status;
-
-                if (xhr.readyState === 4) {
-                    try {
-                        if (!xhr.responseText) {
-                            this.$Message.error('服务端返回空的字符串');
-                            this.loading = false;
-
-                            return;
-                        }
-
-                        // 跨域可能不能获取完整的响应头 https://qzy.im/blog/2020/09/can-not-get-response-header-using-javascript-in-cors-request/
-                        let heads = xhr.getAllResponseHeaders();
-                        heads = heads.split(';').join('\n');
-                        this.responseHead = heads;
-
-                        let parseContentType = cfg && cfg.parseContentType;
-                        switch (parseContentType) {
-                            case "text":
-                                data = responseText;
-                                break;
-                            case "xml":
-                                data = xhr.responseXML;
-                                break;
-                            case "json":
-                            default:
-                                this.responseBody = JSON.stringify(JSON.parse(xhr.responseText), null, 2);
-                        }
-                    } catch (e) {
-                        alert("HTTP 请求错误:\n" + e + "\nURL: " + url); // 提示用户 异常
-                    } finally {
-                        this.loading = false;
-                        this.response.elapsed = new Date() - el;
-                    }
-                }
-            };
-
-            let requestAll = 'HEAD \n' + method.toUpperCase() + ' ' + url + '\n';
-
-            if (cfg && cfg.header) {
-                for (let i in cfg.header) {
-                    requestAll += i + " : " + cfg.header[i] + '\n';
-                    xhr.setRequestHeader(i, cfg.header[i]);
-                }
-            }
-
-            if (params)
-                requestAll += 'BODY:\n' + params;
-
-            this.requestAll = requestAll;
-            xhr.send(params || null);
-        },
-
-        formatStatusCode() {
-            let code = this.response.status;
-            let str = code + '';
-
-            if (str[0] === '2')
-                return `<span style="color:green">${code}</span>`;
-            else if (str[0] === '4' || str[0] === '5')
-                return `<span style="color:red">${code}</span>`;
-            else
-                return str;
-        }
-    },
-};
-
-function json2fromParams(param) {
-    let result = "";
-
-    for (let name in param) {
-        if (typeof param[name] != "function")
-            result += "&" + name + "=" + encodeURIComponent(param[name]);
-    }
-
-    return result.substring(1);
-}