@ajaxjs/ui 1.2.2 → 1.2.4

package/dist/api-helper/document/document.vue

@@ -0,0 +1,78 @@
+<template>
+  <!-- 渲染文档内容 -->
+  <div>
+    <!-- <Button @click="value3 = true" type="primary">编辑文档</Button> -->
+    <Drawer title="编辑文档" v-model="value3" width="1090" :mask-closable="false" :styles="styles">
+      <Form :model="documnetObj">
+        <Row :gutter="32">
+          <Col span="16">
+          <FormItem label="接口名称" label-position="top">
+            <Input v-model="documnetObj.name" placeholder="请输入接口名称" />
+          </FormItem>
+          </Col>
+          <Col span="8">
+          <FormItem label="分类" label-position="top">
+            <Select v-model="documnetObj.catalogId" placeholder="接口分类">
+              <Option value="private">Private</Option>
+              <Option value="public">Public</Option>
+            </Select>
+          </FormItem>
+          </Col>
+        </Row>
+
+        <FormItem label="接口说明" label-position="top">
+          <Input type="textarea" v-model="documnetObj.description" :rows="4" placeholder="接口说明" />
+        </FormItem>
+
+        <Row :gutter="32">
+          <Col span="15">
+          <FormItem label="对应 UI" label-position="top">
+            <!-- <FileUploader :is-img-upload="true" :is-show-btn="false" ref="imgUploader" /> -->
+          </FormItem>
+
+          </Col>
+          <Col span="6">
+
+          <FormItem label="接口编码状态" label-position="top">
+            <Select v-model="documnetObj.codeState" placeholder="请选择接口状态">
+              <Option value="INITED">初始化</Option>
+              <Option value="DEFINED">已定义</Option>
+              <Option value="DONE">已完成</Option>
+            </Select>
+          </FormItem>
+
+          <FormItem label="是否在文档汇总中展示" label-position="right">
+            <i-Switch v-model="documnetObj.isShow" />
+          </FormItem>
+          </Col>
+        </Row>
+      </Form>
+      <div class="demo-drawer-footer">
+        <Button type="success" style="margin-right: 8px" @click="perview = true" icon="ios-eye">预览文档</Button>
+        <Button type="primary" style="margin-right: 8px" @click="save" icon="md-create">保存</Button>
+        <Button @click="value3 = false">关闭</Button>
+      </div>
+    </Drawer>
+
+    <Modal v-model="perview" title="预览文档" width="1200" ok-text="关闭" cancel-text="">
+      <div style="max-height: 600px;overflow-y:scroll;">
+        <Render />
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script lang="ts" src="./document.ts"></script>
+
+<style lang="less" scoped>
+.demo-drawer-footer {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: right;
+  background: #fff;
+}
+</style>

package/dist/api-helper/index.js

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

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

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

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

package/dist/api-helper/table.js

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

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

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

package/dist/api-helper/table.vue

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

@@ -0,0 +1,100 @@
+//  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);
+}