@ajaxjs/ui 1.2.2 → 1.2.4

package/dist/api-helper2/document/document-render.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="document-rendered">
+    <h3>{{documnetObj.name}}</h3>
+    <p>{{documnetObj.description}}</p>
+
+    <div>
+      <h3 style="margin-top:0;">对应 UI：</h3>
+      <img class="ui small" @click="enlagrn($event)" src="https://tcs-devops.aliyuncs.com/storage/112h785d5d59567281da7b2b5f67ee7ec6b5?Signature=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJBcHBJRCI6IjVlNzQ4MmQ2MjE1MjJiZDVjN2Y5YjMzNSIsIl9hcHBJZCI6IjVlNzQ4MmQ2MjE1MjJiZDVjN2Y5YjMzNSIsIl9vcmdhbml6YXRpb25JZCI6IiIsImV4cCI6MTY1NjI0MTAzNywiaWF0IjoxNjU1NjM2MjM3LCJyZXNvdXJjZSI6Ii9zdG9yYWdlLzExMmg3ODVkNWQ1OTU2NzI4MWRhN2IyYjVmNjdlZTdlYzZiNSJ9.zKVBc_WpZmoNV2XdzQOpKRSe4Etm5w2o2HH2afZrHOg" />
+    </div>
+
+    <p style="padding-top:3px">请求 <span class=" code-font">{{documnetObj.httpMethod}}</span> <span class="code code-font">{{documnetObj.url}}</span></p>
+
+    <h3>请求参数：</h3>
+    <table class="request-arg aj-table">
+      <thead>
+        <th>参数说明</th>
+        <th>变量</th>
+        <th>类型</th>
+        <th>参数位置</th>
+        <th>必填</th>
+        <th>描述</th>
+      </thead>
+      <tbody>
+        <tr v-for="arg in args" :key="arg.name">
+          <td>{{arg.desc}}</td>
+          <td>{{arg.name}}</td>
+          <td>{{arg.dataType}}</td>
+          <td>{{arg.type}}</td>
+          <td>{{arg.isRequired?'Yes': 'No'}}</td>
+          <td>{{arg.comment}}
+
+            <ul v-if="arg.values && arg.values.length">
+              <li v-for="enu in arg.values" :key="enu.value">
+                {{enu.value}} : {{enu.comment}}
+              </li>
+            </ul>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3>请求示例：</h3>
+    <div class="note">
+      <a :href="documnetObj.demoUrl" target="_blank">{{documnetObj.demoUrl}}</a>
+    </div>
+    <h3>返回结果：</h3>
+
+    <pre class="note">
+{
+	"status": int,       // 调用接口是否成功，0：失败，1：成功
+	"errorCode": string, // 错误码，当 status=0 时，必须返回错误码
+	"message": string,   // 错误具体信息
+	"data": {            // 飞机状态信息
+		"airSpeed": 52.0,
+		"altitude": 55.5,
+		"ammeterState": "OK",
+		"compassState": "OK",
+		"flightState": "UNLOCKED", 
+		"gpsState": "OK",
+		"gpsTime": "2022-06-07 14:36:14",
+		"groundSpeed": 5.0,
+		"heading": 55.0,
+		"ip": "192.168.0.22",
+		"latitude": 39.9352,
+		"longitude": 116.354,
+		"netSignal": 98.0,
+		"netState": "OK",
+		"power": 8.0,
+		"satelliteMod": "98",
+		"satelliteNum": 98,
+		"satellitePrecision": 98.0,
+		"uavId": "10001",
+		"voltage": 5.0
+	}
+}</pre>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  data() {
+    return {
+      documnetObj: {
+        name: "解锁任务中所有的飞机",
+        description: "把 空闲、解锁失败的进行解锁",
+        httpMethod: "GET",
+        url: "/uav/{uav_id}/check_status",
+        demoUrl: "http://test.ajaxjs.com:8081/drone/uav/10001/check_status",
+        isShow: true
+      } as API_HELPER_DOCUMENT,
+      args: [
+        {
+          desc: "任务 id",
+          name: "task_id",
+          type: "FORM",
+          dataType: "string",
+          comment: "执行任务 execute | 立即返航 return | 结束任务 close 任选一",
+          isRequired: true,
+          values: [
+            { value: "execute", comment: "执行任务" },
+            { value: "return", comment: "立即返航" },
+            { value: "close", comment: "结束任务" },
+          ],
+        },
+      ] as API_HELPER_ARGUMENT[],
+    };
+  },
+  methods: {
+    enlagrn(e: Event): void {
+      let img: HTMLElement = <HTMLElement>e.target;
+      img.classList.toggle("small");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.document-rendered {
+  h3 {
+    font-weight: bold;
+    font-size: 1.2rem;
+    margin: 8px 0;
+  }
+
+  img.ui {
+    cursor: pointer;
+    max-width: 360px;
+    &.small {
+      max-width: 260px;
+    }
+  }
+}
+
+.code {
+  padding: 3px 4px;
+  //   border: 1px solid rgb(250, 167, 59);
+  background-color: rgb(253, 222, 222);
+  color: rgb(255, 35, 35);
+}
+
+.code-font {
+  font-family: "Courier New";
+}
+
+.note {
+  padding-left: 10px;
+  border-left: 4px solid lightgray;
+}
+
+.request-arg {
+  width: 98%;
+  td {
+    text-align: center;
+  }
+}
+
+// 快速制作1px 表格边框，为需要设置的 table 元素加上 border 的class即可
+.aj-table {
+  border: 1px lightgray solid;
+  border-collapse: collapse;
+  border-spacing: 0;
+
+  th {
+    // background-color: #efefef;
+    letter-spacing: 3px;
+  }
+
+  td,
+  th {
+    border: 1px lightgray solid;
+    line-height: 160%;
+    height: 120%;
+    padding: 6px;
+  }
+
+  tr {
+    // .transition (background-color 400ms ease-out);
+
+    &:nth-child(odd) {
+      //   background: #f5f5f5;
+      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
+    }
+
+    &:hover {
+      background-color: #fbf8e9;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,130 @@
+<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">
+import Render from "./document-render.vue";
+import { xhr_post_upload } from "../../../util/xhr";
+//@ts-ignore
+// import FileUploader from "./../../../widget/FileUploader/FileUploader.vue";
+
+export default {
+  // components: { Render, FileUploader },
+  components: { Render },
+  data() {
+    return {
+      perview: false,
+      value3: true,
+
+      documnetObj: {
+        name: "解锁任务中所有的飞机",
+        description: "把 空闲、解锁失败的进行解锁",
+        httpMethod: "GET",
+        url: "/uav/{uav_id}/check_status",
+        demoUrl: "http://test.ajaxjs.com:8081/drone/uav/10001/check_status",
+        codeState: "DEFINED",
+        isShow: true,
+      } as API_HELPER_DOCUMENT,
+
+      styles: {
+        height: "calc(100% - 55px)",
+        overflow: "auto",
+        paddingBottom: "53px",
+        position: "static",
+      },
+      formData: {
+        name: "",
+        url: "",
+        owner: "",
+        type: "",
+        approver: "",
+        date: "",
+        desc: "",
+      },
+    };
+  },
+  methods: {
+    enlagrn(e: Event): void {
+      let img: HTMLElement = <HTMLElement>e.target;
+      img.classList.toggle("small");
+    },
+
+    save(): void {
+      // xhr_post_upload("", (j) => {}, {}, { contentType: null });
+    },
+  },
+};
+</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-helper2/env.vue

@@ -0,0 +1,140 @@
+<template>
+  <div style="overflow: hidden">
+    <div class="left">
+      <ul>
+        <li v-for="env in envs" :key="env.id" @click="active(env.id)" :class="{ actived: env.actived }">
+          <Icon type="md-trash" style="float: right; margin-top: 3px" @click="del(env.id, $event)" />
+          {{env.name}}
+        </li>
+      </ul>
+      <a class="add" @click="add">+ 新建……</a>
+    </div>
+    <div class="right">
+      <Input v-model="editing.name" ref="inputName">
+      <span slot="prepend">环境名称</span>
+      </Input>
+      <br />
+      <Input v-model="editing.urlPrefix">
+      <span slot="prepend">URL前缀</span>
+      </Input>
+
+      <br />
+      <br />
+      <p>
+        环境变量：在接口文档或测试的过程中，使用 ${变量名} 即可引用该环境变量
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { xhr_get } from "../../util/xhr";
+
+export default {
+  props: {},
+  data() {
+    return {
+      envs: [
+        {
+          id: 1,
+          name: "本地测试",
+          urlPrefix: "https://dd.com",
+          actived: true,
+        } as API_HELPER_ENV,
+        {
+          id: 2,
+          name: "生产环境",
+          urlPrefix: "http://foo.com",
+          actived: false,
+        } as API_HELPER_ENV,
+      ],
+      editing: {} as API_HELPER_ENV,
+      isCreate: false,
+    };
+  },
+  mounted() {
+    xhr_get("http://127.0.0.1:8080/cms/api/ApiHelper/env/list", (j: RepsonseResult) => {
+        if (j.status) 
+          this.envs = j.data;
+        else this.$Message.warning(j.message);
+      }
+    );
+  },
+  methods: {
+    add(): void {
+      this.isCreate = true;
+      this.editing = {};
+      this.$refs.inputName.focus();
+    },
+    /**
+     * 点击某个环境，激活之
+     */
+    active(id: number): void {
+      for (let i = 0; i < this.envs.length; i++) {
+        let env: API_HELPER_ENV = this.envs[i];
+
+        if (env.id == id) {
+          this.editing = env;
+          env.actived = true;
+        } else env.actived = false;
+      }
+    },
+
+    /**
+     * 删除某个环境
+     */
+    del(id: number, e: Event): void {
+      e.stopPropagation();
+      let index: number;
+      
+      for (let i = 0; i < this.envs.length; i++) {
+        let env: API_HELPER_ENV = this.envs[i];
+
+        if (env.id == id) {
+          index = i;
+          break;
+        }
+      }
+
+      if (index == 0 || index) {
+        this.envs.splice(index, 1);
+        this.editing = {};
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.left {
+  float: left;
+  width: 28%;
+  height: 300px;
+  border-right: 1px solid #f5f5f5;
+}
+
+.right {
+  float: right;
+  width: 70%;
+  padding-left: 10px;
+}
+
+ul {
+  margin: 0 2%;
+}
+
+li {
+  border-bottom: 1px solid #f5f5f5;
+  padding: 5px 8px;
+  cursor: pointer;
+  &.actived {
+    font-weight: bold;
+  }
+}
+
+.add {
+  //   color: #2d8cf0;
+  display: block;
+  padding: 5px 10px;
+}
+</style>

package/dist/api-helper2/history.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div class="toolbar">
+      <Button size="small" type="error" style="float:right;" :disabled="!historyList.length" @click="historyList=[];">清空历史记录</Button>
+      <span v-if="historyList.length">共 {{historyList.length}} 笔记录</span>
+    </div>
+
+    <ul style="max-height:500px">
+      <li v-for="history in historyList" :key="history.id" @click="select(history)">
+        <span v-if="history.name">{{history.name}}
+          <br /></span>
+        <span style="font-family:Courier New">
+          <HttpMethod :type="history.httpMethod" />{{history.url}}
+        </span>
+        <br />
+        <div style="font-family:Arial;font-size:3px;color:gray;float:right;margin-top:4px;">{{history.time}}ms</div>
+        <span style="font-family:Courier New;font-size:5px;color:lightgray">{{history.date}}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import HttpMethod from "./common/http-method.vue";
+
+export default {
+  components: { HttpMethod },
+  data() {
+    return {
+      historyList: [
+        {
+          id: 1,
+          httpMethod: "GET",
+          name: "fgfgf",
+          url: "http://qq.com",
+          time: 203,
+          date: "2022-3-3 3:23",
+          stateCode: 200,
+        },
+        {
+          id: 2,
+          httpMethod: "POST",
+          url: "http://qq.com/gggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
+          time: 203,
+          date: "2022-3-3 3:23",
+          stateCode: 200,
+        },
+        {
+          id: 3,
+          httpMethod: "PUT",
+          name: "fgfgf",
+          url: "http://qq.com",
+          time: 203,
+          date: "2022-3-3 3:23",
+          stateCode: 200,
+        },
+        {
+          id: 4,
+          httpMethod: "DELETE",
+          name: "获取新闻详情",
+          url: "http://qq.com",
+          time: 203,
+          date: "2022-3-3 3:23",
+          stateCode: 200,
+        },
+      ] as API_HELPER_HISTORY[],
+    };
+  },
+
+  methods: {
+    select(h: any): void {
+      alert(h);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.toolbar {
+  padding: 0 6px 5px 6px;
+  border-bottom: 1px solid #f0f0f0;
+  box-sizing: content-box;
+  overflow: hidden;
+  margin: 0 8px;
+}
+ul {
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background: rgba(23, 35, 61, 0.15);
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 8px;
+  }
+}
+
+li {
+  padding: 10px 5px;
+  margin: 10px 5px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  overflow: hidden;
+  max-width: 290px;
+  text-overflow: ellipsis; //溢出用省略号显示
+  white-space: nowrap; //溢出不换行
+  transition: border-color ease-in 400ms;
+  cursor: pointer;
+  &:hover {
+    border-color: lightgray;
+  }
+}
+</style>

package/dist/api-helper2/main.vue

@@ -0,0 +1,70 @@
+<template>
+  <div style="clear: both">
+    <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">发送</Button>
+      <Button style="width: 8%">保存</Button>
+    </section>
+
+    <Document />
+
+    <Tabs name="request" class="request" value="name2" :animated="false">
+      <TabPane label="头部参数" name="name1" tab="request">标签一的内容</TabPane>
+      <TabPane label="请求体" name="name2" tab="request">
+        <RequestBody />
+      </TabPane>
+      <TabPane tab="request" label="查询参数" name="name3">标签三的内容</TabPane>
+      <TabPane tab="request" label="路径参数" name="name4">标签三的内容</TabPane>
+    </Tabs>
+
+    <Tabs class="response" name="response" value="requestHead" :animated="false">
+      <TabPane tab="response" label="请求头部" name="requestHead">标签一的内容</TabPane>
+      <TabPane tab="response" label="请求内容" name="requestBody">标签二的内容</TabPane>
+      <TabPane tab="response" label="返回头部" name="responseHead">标签三的内容</TabPane>
+      <TabPane tab="response" label="返回内容" name="responseContent">标签三的内容</TabPane>
+    </Tabs>
+  </div>
+</template>
+
+<script>
+import RequestBody from "./request-body.vue";
+import Document from "./document/document.vue";
+
+export default {
+  components: { RequestBody, Document },
+  data() {
+    return {
+      url: {
+        prefix: "https://dd.com",
+        main: "/dfdf",
+      },
+      httpMethod: "GET",
+    };
+  },
+};
+</script>
+
+
+<style lang="less" scoped>
+.request {
+  clear: both;
+}
+
+.url-bar > * {
+  float: left;
+  margin-right: 10px;
+}
+</style>