@ajaxjs/ui 1.2.3 → 1.2.5

package/README.md

@@ -1,7 +1,23 @@
+[![NPM](https://img.shields.io/npm/v/@ajaxjs/ui.svg?sanitize=true)](https://www.npmjs.com/package/@ajaxjs/ui)
+[![Vue.js](https://img.shields.io/badge/Vue.js-2.6.14-brightgreen.svg?style=flat&logo=vuedotjs&logoColor=white)](https://vuejs.org)
+[![TypeScript](https://img.shields.io/badge/TypeScript-4.9.4-blue.svg?style=flat&logo=Typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![License](https://img.shields.io/badge/license-Apache--2.0-green.svg?longCache=true&style=flat)](http://www.apache.org/licenses/LICENSE-2.0.txt)
+[![Email](https://img.shields.io/badge/Contact--me-Email-orange.svg)](mailto:frank@ajaxjs.com)
+[![QQ群](https://framework.ajaxjs.com/static/qq.svg)](https://shang.qq.com/wpa/qunwpa?idkey=3877893a4ed3a5f0be01e809e7ac120e346102bd550deb6692239bb42de38e22)
+
 # Widgets based on iView.js
 
 for Vue2 & iView.js v2
 
+NPM: https://www.npmjs.com/package/@ajaxjs/ui.
+
+```shell
+npm i @ajaxjs/ui # install
+npm run dev # do coding
+npm run build # output js
+npm run release # deploy to NPM
+```
+
 ## API Selector API 选择器
 
 ## API Helper 可视化 HTTP 请求工具

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

@@ -0,0 +1,194 @@
+/**
+ * 表格定义
+ */
+declare type API_HELPER_TABLE = {
+    mode: 'SIMPLE' | 'SCHEME';
+};
+
+/**
+ * 环境
+ */
+declare type API_HELPER_ENV = {
+    id: number;
+    name: string;
+
+    /**
+     * URL 前缀
+     */
+    urlPrefix: string;
+
+    /**
+     * 
+     */
+    actived: boolean;
+};
+
+/**
+ * HTTP 方法
+ */
+declare type API_HELPER_HTTP_METHOD = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'OPTION';
+
+/**
+ * 历史记录
+ */
+declare type API_HELPER_HISTORY = {
+    id: number;
+
+    /**
+     * 任务名称，可选
+     */
+    name?: string;
+
+    /**
+     * 任务 id，可选
+     */
+    nameId: number;
+
+    httpMethod: API_HELPER_HTTP_METHOD;
+
+    url: string;
+
+    /**
+     * 请求日期
+     */
+    date: string;
+
+    /**
+     * 耗时
+     */
+    time: number;
+
+    stateCode: number;
+};
+
+/**
+ * 参数的枚举值
+ */
+declare type API_HELPER_ARGUMENT_ENU = {
+    /**
+     * 是否默认
+     */
+    isDefault?: boolean;
+
+    /**
+     * 值
+     */
+    value: any;
+
+    /**
+     * 值是什么含义
+     */
+    comment: string;
+};
+
+/**
+ * 参数
+ */
+declare type API_HELPER_ARGUMENT = {
+    /**
+     * 是否使用
+     */
+    isEnable: boolean;
+
+    /**
+     * 变量
+     */
+    name: string;
+
+    /**
+     * 参数说明
+     */
+    desc: string;
+
+    /**
+     * 参数位置
+     */
+    type: 'HEADER' | 'PATH' | 'QUERY' | 'BODY' | 'FORM';
+
+    /**
+     * 数据类型
+     */
+    dataType: any;
+
+    /**
+     * 对应后端语言的类型或者枚举
+     */
+    mappingType?: any;
+
+    /**
+     * 值，枚举值
+     */
+    values?: API_HELPER_ARGUMENT_ENU[];
+
+    /**
+     * 是否必填
+     */
+    isRequired: boolean;
+
+    /**
+     * 说明，描述
+     */
+    comment: string;
+};
+
+/**
+ * JSON 类型参数
+ */
+declare type API_HELPER_JSON_ARGUMENT = API_HELPER_ARGUMENT & {
+    /**
+     * 类型
+     */
+    dataType: number | string | boolean | null | array | object;
+};
+
+/**
+ * 文档
+ */
+declare type API_HELPER_DOCUMENT = {
+    /**
+     * ID
+     */
+    id: any;
+
+    /**
+     * 名称
+     */
+    name: string;
+
+    /**
+     * 分组
+     */
+    catalogId: any;
+
+    /**
+     * 说明
+     */
+    description: string;
+
+    /**
+     * HTTP 请求方法
+     */
+    httpMethod: API_HELPER_HTTP_METHOD;
+
+    url: string;
+
+    /**
+     * 对应 UI，图片地址
+     */
+    ui: string;
+
+    /**
+     * 请求示例
+     */
+    demoUrl: string;
+
+    /**
+     * 接口编码状态
+     */
+    codeState: 'INITED' | 'DEFINED' | 'DONE';
+
+    /**
+     * 是否在文档汇总中展示
+     */
+    isShow: boolean;
+};

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

@@ -0,0 +1,144 @@
+<template>
+  <div class="container">
+    <div class="left">
+      <Tabs value="history" :animated="false">
+        <TabPane label="收藏" name="bookmark">
+          <Bookmark />
+        </TabPane>
+        <TabPane label="历史" name="history">
+          <History />
+        </TabPane>
+      </Tabs>
+    </div>
+
+    <div class="right">
+      <nav>
+        MyAPI
+        <Icon type="md-help-circle" style="margin: 10px 10px 0 10px; float: right; cursor: pointer" size="19" @click="isShowAbout = true" />
+        <Dropdown style="margin-left: 10px; float: right" @on-click="onSelectEnvClk" on-click="onSelectEnvClk">
+          <Button size="small" style="width: 150px">
+            选择环境...
+            <Icon type="ios-arrow-down"></Icon>
+          </Button>
+          <DropdownMenu slot="list" style="width: 150px">
+            <DropdownItem>驴打滚</DropdownItem>
+            <DropdownItem>炸酱面</DropdownItem>
+            <DropdownItem disabled>豆汁儿</DropdownItem>
+            <DropdownItem>冰糖葫芦</DropdownItem>
+            <DropdownItem name="config" divided style="color: #2d8cf0">配置环境...</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      </nav>
+      <Tabs class="mainTab" name="mainTab" :value="activeTab" :animated="false" type="card" @on-click="ifAdd">
+        <TabPane v-for="tab in mainTabs" :key="tab.label" :label="tab.label" :name="tab.name" :index="tab.index" :closable="tab.closable" tab="mainTab" style="padding: 0 10px">
+          <Main />
+        </TabPane>
+      </Tabs>
+    </div>
+    <Modal title="配置环境" v-model="isShowEnv" ok-text="保存" cancel-text="" width="900">
+      <Env />
+    </Modal>
+
+    <Modal v-model="isShowAbout" title="关于" cancel-text="">
+      ajaxjs.com 倾情奉献
+    </Modal>
+    <Modal v-model="isShowArgs" title="参数详情" cancel-text="">
+      <Argument />
+    </Modal>
+  </div>
+</template>
+
+<script lang="ts">
+import RequestBody from "./request-body.vue";
+import Main from "./main.vue";
+import Env from "./env.vue";
+import History from "./history.vue";
+import Argument from "./common/arg.vue";
+import Bookmark from "./bookmark.vue";
+
+const addTabBtn: any = { label: "+", name: "addTab", closable: false };
+
+export default {
+  components: { RequestBody, Main, Env, History, Argument, Bookmark },
+  data() {
+    return {
+      activeTab: "tab1",
+      mainTabs: [
+        {
+          label: "获取新闻详情",
+          name: "tab1",
+          closable: true,
+        },
+        addTabBtn,
+      ],
+      isShowEnv: false,
+      isShowAbout: false,
+      isShowArgs: false,
+    };
+  },
+  methods: {
+    ifAdd(name: string): void {
+      if (name === "addTab") {
+        this.mainTabs.pop(); // 先删除，再增加
+
+        let tabName: string = "tab" + (this.mainTabs.length + 1);
+        this.mainTabs.push({
+          label: "新 API",
+          name: tabName,
+          closable: true,
+        });
+
+        setTimeout(() => {
+          this.mainTabs.push(addTabBtn);
+          this.activeTab = tabName;
+        }, 100);
+      }
+    },
+
+    onSelectEnvClk(name: string): void {
+      if (name === "config") {
+        this.isShowEnv = true;
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.mainTab
+  > .ivu-tabs-bar
+  > .ivu-tabs-nav-container
+  > .ivu-tabs-nav-wrap
+  > .ivu-tabs-nav-scroll {
+  padding-left: 20px;
+  margin-top: 3px;
+}
+</style>
+
+<style lang="less" scoped>
+nav {
+  height: 36px;
+  line-height: 36px;
+  padding: 0 10px;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid lightgray;
+}
+
+// left-right-layout
+.container {
+    display: flex;
+    height: 100%;
+
+    .left {
+        height: 100%;
+        flex: 0 0 300px;
+        border-right: 1px solid lightgray;
+    }
+
+    .right {
+        height: 100%;
+        flex: 1;
+        /*div占据所有剩余宽度 */
+    }
+}
+</style>

package/dist/api-helper2/bookmark.vue

@@ -0,0 +1,168 @@
+<template>
+  <Tree :data="data5" :render="renderContent" class="demo-tree-render"></Tree>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      data5: [
+        {
+          title: "parent 1",
+          expand: true,
+          render: (h, { root, node, data }) => {
+            return h(
+              "span",
+              {
+                style: {
+                  display: "inline-block",
+                  width: "100%",
+                },
+              },
+              [
+                h("span", [
+                  h("Icon", {
+                    props: {
+                      type: "ios-folder-outline",
+                    },
+                    style: {
+                      marginRight: "8px",
+                    },
+                  }),
+                  h("span", data.title),
+                ]),
+                h(
+                  "span",
+                  {
+                    style: {
+                      display: "inline-block",
+                      float: "right",
+                      marginRight: "32px",
+                    },
+                  },
+                  [
+                    h("Button", {
+                      props: Object.assign({}, this.buttonProps, {
+                        icon: "ios-add",
+                        type: "primary",
+                      }),
+                      style: {
+                        width: "64px",
+                      },
+                      on: {
+                        click: () => {
+                          this.append(data);
+                        },
+                      },
+                    }),
+                  ]
+                ),
+              ]
+            );
+          },
+          children: [
+            {
+              title: "child 1-1",
+              expand: true,
+              children: [
+                {
+                  title: "leaf 1-1-1",
+                  expand: true,
+                },
+                {
+                  title: "leaf 1-1-2",
+                  expand: true,
+                },
+              ],
+            },
+            {
+              title: "child 1-2",
+              expand: true,
+              children: [
+                {
+                  title: "leaf 1-2-1",
+                  expand: true,
+                },
+                {
+                  title: "leaf 1-2-1",
+                  expand: true,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      buttonProps: {
+        type: "default",
+        size: "small",
+      },
+    };
+  },
+  methods: {
+    renderContent(h, { root, node, data }) {
+      return h(
+        "span",
+        {
+          style: { display: "inline-block", width: "100%" },
+        },
+        [
+          h("span", [
+            h("Icon", {
+              props: { type: "ios-paper-outline" },
+              style: { marginRight: "8px" },
+            }),
+            h("span", data.title),
+          ]),
+          h(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                float: "right",
+                marginRight: "32px",
+              },
+            },
+            [
+              h("Button", {
+                props: Object.assign({}, this.buttonProps, { icon: "ios-add" }),
+                style: { marginRight: "8px" },
+                on: {
+                  click: () => {
+                    this.append(data);
+                  },
+                },
+              }),
+              h("Button", {
+                props: Object.assign({}, this.buttonProps, {
+                  icon: "ios-remove",
+                }),
+                on: {
+                  click: () => {
+                    this.remove(root, node, data);
+                  },
+                },
+              }),
+            ]
+          ),
+        ]
+      );
+    },
+    append(data) {
+      const children = data.children || [];
+      children.push({ title: "appended node", expand: true });
+      this.$set(data, "children", children);
+    },
+    remove(root, node, data) {
+      const parentKey = root.find((el) => el === node).parent;
+      const parent = root.find((el) => el.nodeKey === parentKey).node;
+      const index = parent.children.indexOf(data);
+      parent.children.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style>
+.demo-tree-render .ivu-tree-title {
+  width: 100%;
+}
+</style>

package/dist/api-helper2/common/arg.vue

@@ -0,0 +1,46 @@
+<template>
+  <!-- 参数控制 -->
+  <Form :label-width="80">
+    <FormItem label="参数名称">
+      <Input v-model="args.name" placeholder="请输入参数的变量名，必填" />
+    </FormItem>
+
+    <FormItem label="参数类型">
+      <Select>
+        <Option></Option>
+      </Select>
+    </FormItem>
+
+    <FormItem label="是否必填">
+      <Checkbox v-model="single">必填</Checkbox>
+    </FormItem>
+
+    <FormItem label="参数值">
+      <Select>
+        <Option></Option>
+      </Select>
+    </FormItem>
+
+    <FormItem label="校验正则">
+      <Input v-model="args.name" placeholder="请输入参数的变量名，必填" />
+    </FormItem>
+
+    <FormItem label="参数说明">
+      <Input v-model="args.name" type="textarea" :rows="4" placeholder="请输入参数的变量名，必填" />
+    </FormItem>
+
+  </Form>
+</template>
+
+<script lang="ts">
+export default {
+  data(): {} {
+    return {
+      args: {} as API_HELPER_ARGUMENT,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+</style>

package/dist/api-helper2/common/http-method.vue

@@ -0,0 +1,53 @@
+<template>
+  <span><span class="httpMethod" :class="type">{{type}}</span></span>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.httpMethod {
+  border: 1px solid;
+  border-radius: 3px;
+  padding: 0 3px;
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin-right: 3px;
+  font-size: 5px;
+  line-height: 15px;
+  height: 14px;
+}
+
+.GET {
+  border-color: #19be6b;
+  background-color: #f5fffa;
+  color: #19be6b;
+}
+
+.POST {
+  border-color: #2db7f5;
+  background-color: #e8f2fc;
+  color: #2db7f5;
+}
+
+.PUT {
+  border-color: #f90;
+  background-color: #fcf3e8;
+  color: #f90;
+}
+
+.DELETE {
+  border-color: #ff4f4f;
+  background-color: #ffeeee;
+  color: #ff4f4f;
+}
+</style>