@ajaxjs/ui 1.1.8 → 1.2.0

package/src/util/utils.ts

@@ -0,0 +1,184 @@
+/**
+ * 通用工具类
+ */
+
+const env = process.env.NODE_ENV;
+
+/**
+ * 是否调试模式中
+ * 
+ * 打包成组件之后不能用
+ * 
+ * @returns 
+ */
+export function isDebug(): boolean {
+    return env === 'development';
+}
+
+export function isDev(): boolean {
+    let currentHostname: string = window.location.hostname;
+
+    // 判断主机名是否是内网地址
+    return (currentHostname.startsWith('192.168.') || currentHostname.startsWith('10.') || currentHostname === 'localhost');
+}
+
+/**
+* 日期格式化。详见博客文章：http://blog.csdn.net/zhangxin09/archive/2011/01/01/6111294.aspx
+* e.g: new Date().format("yyyy-MM-dd hh:mm:ss")
+*
+* @param 	{String} format
+* @return	{String}
+*/
+export function dateFormat(this: Date, format: string): string {
+    let $1, o: any = {
+        "M+": this.getMonth() + 1,		// 月份，从0开始算
+        "d+": this.getDate(),   		// 日期
+        "h+": this.getHours(),   		// 小时
+        "m+": this.getMinutes(), 		// 分钟
+        "s+": this.getSeconds(), 		// 秒钟
+        // 季度 quarter
+        "q+": Math.floor((this.getMonth() + 3) / 3),
+        "S": this.getMilliseconds()	// 千秒
+    };
+
+    if (/(y+)/.test(format)) {
+        $1 = RegExp.$1, format = format.replace($1, String(this.getFullYear()).substr(4 - $1));
+    }
+
+    let key: string, value: string;
+    for (key in o) { // 如果没有指定该参数，则子字符串将延续到 stringvar 的最后。
+        if (new RegExp("(" + key + ")").test(format)) {
+            $1 = RegExp.$1,
+                value = String(o[key]),
+                value = $1.length == 1 ? value : ("00" + value).substr(value.length),
+                format = format.replace($1, value);
+        }
+    }
+
+    return format;
+}
+
+/**
+ * 日期格式化
+ * @author meizz
+ * @param date  日期，必须为 Date 类型
+ * @param fmt   格式模板
+ * @returns 格式化后的字符串
+ */
+export function dateFormat2(date: Date, fmt: string): string {
+    let o: { [key: string]: number } = {
+        "M+": date.getMonth() + 1,                  // 月份   
+        "d+": date.getDate(),                       // 日   
+        "h+": date.getHours(),                      // 小时   
+        "m+": date.getMinutes(),                    // 分   
+        "s+": date.getSeconds(),                    // 秒   
+        "q+": Math.floor((date.getMonth() + 3) / 3),// 季度   
+        "S": date.getMilliseconds()                 // 毫秒   
+    };
+
+    if (/(y+)/.test(fmt))
+        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+
+    for (var k in o)
+        if (new RegExp("(" + k + ")").test(fmt)) {
+            let obj = (RegExp.$1.length == 1) ? o[k] : ("00" + o[k]).substr(("" + o[k]).length);
+            // @ts-ignore
+            fmt = fmt.replace(RegExp.$1, obj);
+        }
+
+    return fmt;
+}
+
+/**
+ * 并行和串行任务 
+ * 
+ * @author https://segmentfault.com/a/1190000013265925
+ * @param arr 
+ * @param finnaly 
+ */
+export function parallel(arr: [], _finally: Function) {
+    let fn: Function, index: number = 0;
+    // @ts-ignore
+    let statusArr = Array(arr.length).fill().map(() => ({ isActive: false, data: null }));
+
+    let isFinished = function () {
+        return statusArr.every((item: any) => item.isActive === true);
+    }
+
+    let resolve = function (index: number): Function {
+        return function (data: any) {
+            statusArr[index].data = data;
+            statusArr[index].isActive = true;
+            let isFinish = isFinished();
+
+            if (isFinish) {
+                let datas = statusArr.map((item: any) => item.data);
+
+                _finally(datas);
+            }
+        };
+    };
+
+    // @ts-ignore
+    while ((fn = arr.shift())) {
+        fn(resolve(index));// 给 resolve 函数追加参数,可以使用 bind 函数实现,这里使用了柯里化
+        index++;
+    }
+}
+
+/**
+ * 函数节流
+ * 
+ * @author https://www.cnblogs.com/moqiutao/p/6875955.html
+ * @param fn 
+ * @param delay 
+ * @param mustRunDelay 
+ */
+export function throttle(fn: Function, delay: number, mustRunDelay: number): Function {
+    var timer: number, t_start: number;
+
+    return function () {
+        var t_curr = +new Date();
+        window.clearTimeout(timer);
+
+        if (!t_start)
+            t_start = t_curr;
+
+        if (t_curr - t_start >= mustRunDelay) {
+            // @ts-ignore
+            fn.apply(this, arguments);
+            t_start = t_curr;
+        } else {
+            var args = arguments;
+            // @ts-ignore
+            timer = window.setTimeout(() => fn.apply(this, args), delay);
+        }
+    };
+}
+
+/**
+* 复制文字到剪切板
+* 
+* @param {*} text 
+*/
+export function copyToClipboard(text) {
+    if (navigator.clipboard) {
+        // clipboard api 复制
+        navigator.clipboard.writeText(text);
+    } else {
+        let textarea = document.createElement('textarea');
+        document.body.appendChild(textarea);
+        // 隐藏此输入框
+        textarea.style.position = 'fixed';
+        textarea.style.clip = 'rect(0 0 0 0)';
+        textarea.style.top = '10px';
+        // 赋值
+        textarea.value = text;
+        // 选中
+        textarea.select();
+        // 复制
+        document.execCommand('copy', true);
+        // 移除输入框
+        document.body.removeChild(textarea);
+    }
+}

package/src/util/xhr-config.ts

@@ -0,0 +1,25 @@
+/**
+ * XHR 请求配置
+ */
+export interface XhrConfig {
+    /**
+     * 请求头里面的 Content-Type 字段
+     */
+    contentType?: string;
+
+    /**
+     * XHR 响应结果的类型
+     */
+    parseContentType?: 'text' | 'xml' | 'json';
+
+    /**
+     * 超时时间，单位是毫秒
+     * 设为 0 适合不控制超时
+     */
+    timeout?: number;
+
+    /**
+     * 是否跨域
+     */
+    withCredentials?: boolean;
+}

package/src/util/xhr.ts

@@ -0,0 +1,296 @@
+import { XhrConfig } from './xhr-config';
+
+/**
+ * 默认的请求配置
+ */
+const DEFAULT_XHR_CFG: XhrConfig = {
+    timeout: 5000,
+    withCredentials: false,
+    parseContentType: 'json'
+};
+
+/**
+ * 处理响应的回调函数
+ */
+type XhrCallback = (json: {}, text: string) => void;
+
+/**
+ * 全局请求的 head 参数
+ */
+let BASE_HEAD_PARAMS = null;
+
+/**
+ * 设置全局请求的 head 参数
+ * 
+ * @param param 
+ */
+export function setBaseHeadParams(params: any): void {
+    if (BASE_HEAD_PARAMS === null)
+        BASE_HEAD_PARAMS = {};
+
+    Object.assign(BASE_HEAD_PARAMS, params);
+}
+
+/**
+ * 
+ * @param getOrDel 
+ * @param url 
+ * @param cb 
+ * @param params 
+ * @param cfg 
+ */
+function getOrDel(getOrDel: 'get' | 'delete', url: string, cb: XhrCallback, params?: {}, cfg: XhrConfig = DEFAULT_XHR_CFG): void {
+    let xhr: XMLHttpRequest = initXhr(cfg);
+
+    if (params != null) {
+        if (url.indexOf('?') != -1)
+            url += '&' + toParams(params);
+        else
+            url += '?' + toParams(params);
+    }
+
+    xhr.open(getOrDel.toUpperCase(), url, true);
+    xhr.onreadystatechange = function () {
+        responseHandle(this, cb, cfg);
+    }
+
+    if (BASE_HEAD_PARAMS)// 设置自定义请求头
+        for (let key in BASE_HEAD_PARAMS)
+            xhr.setRequestHeader(key, BASE_HEAD_PARAMS[key]);
+
+    xhr.send();
+}
+
+/**
+ * 
+ * @param method 
+ * @param url 
+ * @param cb 
+ * @param params 
+ * @param cfg 
+ */
+function postOrPut(method: 'post' | 'put', url: string, cb: XhrCallback, params: string | {}, cfg: XhrConfig = DEFAULT_XHR_CFG): void {
+    let xhr: XMLHttpRequest = initXhr(cfg);
+    xhr.open(method, url, true);
+    xhr.onreadystatechange = function () {
+        responseHandle(this, cb, cfg);
+    }
+
+    if (BASE_HEAD_PARAMS) // 设置自定义请求头
+        for (let key in BASE_HEAD_PARAMS)
+            xhr.setRequestHeader(key, BASE_HEAD_PARAMS[key]);
+
+    // 此方法必须在 open() 方法和 send() 之间调用
+
+    if (!cfg.contentType) // 如未设置，默认为表单请求
+        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+    else
+        xhr.setRequestHeader("Content-Type", cfg.contentType);
+
+
+    let _params: string = typeof params != 'string' ? toParams(params) : <string>params;
+
+    if (_params)
+        xhr.send(_params);
+    else
+        xhr.send();
+}
+
+/**
+ * 
+ * @param url 
+ * @param cb 
+ * @param params 
+ * @param cfg 
+ */
+export function xhr_post_upload(url: string, cb: XhrCallback, params: Document | XMLHttpRequestBodyInit, cfg: XhrConfig = DEFAULT_XHR_CFG): void {
+    let xhr: XMLHttpRequest = initXhr(cfg);
+    xhr.open('post', url, true);
+    xhr.onreadystatechange = function () {
+        responseHandle(this, cb, cfg);
+    }
+
+    if (BASE_HEAD_PARAMS) // 设置自定义请求头
+        for (let key in BASE_HEAD_PARAMS)
+            xhr.setRequestHeader(key, BASE_HEAD_PARAMS[key]);
+
+    // 什么 Content-Type 都不设置
+
+    xhr.send(params);
+}
+
+/**
+ * XHR GET 请求
+ * 
+ * @param url       请求地址
+ * @param cb        回调函数 @example (json: {}, text: string) => void;
+ * @param params    参数，必填，如无填空字符串 ""；参数类型是json；参数值会进行 URL 编码，最后附加到 QueryString 中
+ * @param cfg       配置，可选的
+ */
+export function xhr_get(url: string, cb: XhrCallback, params?: {}, cfg: XhrConfig = DEFAULT_XHR_CFG): void {
+    getOrDel('get', url, cb, params, cfg);
+}
+
+/**
+ * XHR DELETE 请求
+ * 
+ * @param url       请求地址
+ * @param cb        回调函数 @example (json: {}, text: string) => void;
+ * @param params    参数，必填，如无填空字符串 ""；参数类型是json；参数值会进行 URL 编码，最后附加到 QueryString 中
+ * @param cfg       配置，可选的
+ */
+export function xhr_del(url: string, cb: XhrCallback, params?: {}, cfg: XhrConfig = DEFAULT_XHR_CFG): void {
+    getOrDel('delete', url, cb, params, cfg);
+}
+
+/**
+ * XHR POST 请求
+ * 
+ * @param url       请求地址
+ * @param cb        回调函数 @example (json: {}, text: string) => void;
+ * @param params    参数，必填，如无填空字符串 ""；参数类型可以是字符串或 json；参数值会进行 URL 编码
+ * @param cfg       配置，可选的
+ */
+export function xhr_post(url: string, cb: XhrCallback, params: string | {}, cfg: XhrConfig = DEFAULT_XHR_CFG): void {
+    postOrPut('post', url, cb, params, cfg);
+}
+
+/**
+ * XHR PUT 请求
+ * 
+ * @param url       请求地址
+ * @param cb        回调函数 @example (json: {}, text: string) => void;
+ * @param params    参数，必填，如无填空字符串 ""；参数类型可以是字符串或 json；参数值会进行 URL 编码
+ * @param cfg       配置，可选的
+ */
+export function xhr_put(url: string, cb: XhrCallback, params: string | {}, cfg: XhrConfig = DEFAULT_XHR_CFG): void {
+    postOrPut('put', url, cb, params, cfg);
+}
+
+/**
+ * 初始化 XHR
+ * 
+ * @param cfg 
+ * @returns 
+ */
+function initXhr(cfg: XhrConfig): XMLHttpRequest {
+    let xhr: XMLHttpRequest = new XMLHttpRequest();
+
+    if (cfg && cfg.timeout) {
+        xhr.timeout = cfg.timeout;
+        xhr.ontimeout = (e: ProgressEvent<EventTarget>) => console.error('系统异常，XHR 连接服务超时');
+    }
+
+    if (cfg && cfg.withCredentials)
+        xhr.withCredentials = true;
+
+    return xhr;
+}
+
+/**
+ * 错误处理 
+ * 
+ * @param xhr 
+ */
+function errHandle(xhr: XMLHttpRequest): void {
+    let msg: string;
+
+    if (xhr.status <= 400)
+        msg = '请求参数错误或者权限不足。';
+    else if (xhr.status <= 500)
+        msg = '服务端异常。';
+    else
+        msg = `未知异常，HTTP code:${xhr.status}。`;
+
+    if (!xhr.responseText)
+        msg += " 服务端返回空的字符串！";
+
+    console.error(msg, xhr.responseText);
+}
+
+/**
+ * 响应处理
+ * 
+ * @param xhr 
+ * @param cb 
+ * @param cfg 
+ */
+function responseHandle(xhr: XMLHttpRequest, cb: XhrCallback, cfg: XhrConfig): void {
+    if (xhr.readyState == 4) {
+        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
+            let text: string = xhr.responseText;
+            let json: any;
+
+            if (!text)
+                console.warn('服务端没有返回任何字符串');
+
+            switch (cfg.parseContentType) {
+                case 'text':
+                    break;
+                case 'xml':
+                    json = xhr.responseXML;
+                    break;
+                case 'json':
+                default:
+                    try {
+                        json = JSON.parse(text);
+                    } catch (e) {
+                        console.error('解析 JSON 时候发生错误，非法 JSON');
+                        console.warn(e);
+                    }
+            }
+
+            cb && cb(json, text);
+        } else errHandle(xhr);
+    }
+}
+
+/**
+ * 对象转换为 URL 参数列表，用 & 分隔
+ * 
+ * @param {Object} param JSON 对象 
+ * @returns URL 参数列表
+ */
+export function toParams(param: any): string {
+    let result: string = "";
+
+    for (let name in param) {
+        if (typeof param[name] != "function")
+            result += "&" + name + "=" + encodeURIComponent(param[name]);
+    }
+
+    return result.substring(1);
+}
+
+/**
+ * 获取 QueryString 的某个参数
+ * 
+ * @param val 
+ * @returns 
+*/
+export function getQuery(val: string): string {
+    const w: number = location.hash.indexOf('?');
+    const query: string = location.hash.substring(w + 1);
+    let vars: string[] = query.split('&');
+
+    for (let i = 0; i < vars.length; i++) {
+        const pair = vars[i].split('=');
+
+        if (pair[0] == val)
+            return pair[1];
+    }
+
+    return '';
+}
+
+export function getPageList(self: any, listArray: any, callback?: Function): XhrCallback {
+    return (j: any) => {
+        if (j.status) {
+            listArray.total = j.total;
+            listArray.data = j.data;
+
+            callback && callback();
+        } else
+            self.$Message.warning(j.message || '获取数据失败');
+    }
+}

package/src/widget/AccordionMenu.vue

@@ -0,0 +1,140 @@
+<template>
+  <ul class="aj-accordion-menu" @click="onClk">
+    <slot></slot>
+  </ul>
+</template>
+
+<script lang="ts">
+/**
+ * 内部子菜单的高亮
+ *
+ * @param ev
+ */
+function highlightSubItem(ev: Event) {
+  let li: Element,
+    el: Element = ev.target as Element;
+
+  if (el.tagName == "A" && el.getAttribute("target")) {
+    li = el.parentNode as Element;
+    li.querySelectorAll("li").forEach((_el: Element) => {
+      if (_el == li) _el.classList.add("selected");
+      else _el.classList.remove("selected");
+    });
+  }
+}
+
+export default {
+  methods: {
+    onClk(ev: Event): void {
+      let children: HTMLCollection = this.$el.children;
+      highlightSubItem(ev);
+      let _btn: Element = ev.target as Element;
+
+      if (
+        _btn &&
+        _btn.tagName == "H3" &&
+        (_btn.parentNode as Element).tagName == "LI"
+      ) {
+        _btn = _btn.parentNode as Element;
+
+        for (let btn: Element, i: number = 0, j = children.length; i < j; i++) {
+          btn = children[i];
+          let ul = btn.querySelector("ul");
+
+          if (btn == _btn) {
+            if (btn.className.indexOf("pressed") != -1) {
+              btn.classList.remove("pressed"); // 再次点击，隐藏！
+              if (ul) ul.style.height = "0px";
+            } else {
+              if (ul) ul.style.height = ul.scrollHeight + "px";
+              btn.classList.add("pressed");
+            }
+          } else {
+            btn.classList.remove("pressed");
+            if (ul) ul.style.height = "0px";
+          }
+        }
+      } else return;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import "../style/common-functions.less";
+
+// 折叠菜单 Accordion Menu
+.aj-accordion {
+  & > li h3 {
+    cursor: pointer;
+  }
+
+  .pressed {
+    & h3 {
+      color: black;
+    }
+  }
+
+  & > li > ul {
+    .transition (height .5s cubic-bezier(0, 1, 0.5, 1));;
+    overflow: hidden;
+  }
+
+  ul {
+    height: 0;
+  }
+}
+
+.aj-accordion-menu {
+  .aj-accordion ();
+  overflow: hidden;
+
+  & > li {
+    border-top: 1px solid white;
+    border-bottom: 1px solid lightgray;
+
+    &.pressed {
+      border-top: 0;
+      border-bottom: 1px solid lightgray;
+      box-shadow: inset 0px 10px 15px -15px gray;
+
+      h3 {
+        font-weight: bold;
+      }
+    }
+
+    ul {
+      li {
+        // list-style-type: disc;
+        padding-left: 15%;
+
+        a {
+          width: 100%;
+          display: block;
+        }
+
+        &.selected {
+          a {
+            color: black;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+
+    h3,
+    li {
+      padding: 5px 0 5px 15px;
+      letter-spacing: 2px;
+      line-height: 20px;
+      color: #939da8;
+      font-size: 12px;
+
+      &:hover,
+      a:hover {
+        color: black;
+      }
+    }
+  }
+}
+</style>

package/src/widget/AdjustFontSize.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="aj-adjust-font-size">
+    <span>字体大小</span>
+    <ul @click="onClk">
+      <li><label><input type="radio" name="fontSize" /> 小</label></li>
+      <li><label><input type="radio" name="fontSize" /> 中</label></li>
+      <li><label><input type="radio" name="fontSize" /> 大</label></li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+/**
+ * 调整正文字体大小
+ */
+export default {
+  props: {
+    articleTarget: { type: String, default: "article p" }, // 正文所在的位置，通过 CSS Selector 定位
+  },
+  methods: {
+    onClk(ev: Event): void {
+      let el: Element = ev.target as Element;
+      let setFontSize = (fontSize: string): void => {
+        document.body
+          .querySelectorAll(this.$props.articleTarget)
+          .forEach((p: HTMLParagraphElement) => (p.style.fontSize = fontSize));
+      };
+
+      if (el.tagName == "LABEL" || el.tagName == "INPUT") {
+        if (el.tagName != "LABEL") el = el.parentNode as Element;
+
+        if (el.innerHTML.indexOf("大") != -1) setFontSize("12pt");
+        else if (el.innerHTML.indexOf("中") != -1) setFontSize("10.5pt");
+        else if (el.innerHTML.indexOf("小") != -1) setFontSize("9pt");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.aj-adjust-font-size {
+  width: 210px;
+  font-size: 0.8rem;
+  padding: 2px 0;
+
+  span {
+    float: left;
+    width: 35%;
+    display: block;
+  }
+
+  ul {
+    width: 65%;
+    float: right;
+    cursor: pointer;
+
+    li {
+      display: block;
+      float: right;
+      width: 33%;
+    }
+  }
+}
+</style>