oxy-uni-ui 2.1.1 → 2.1.2

package/devTools/core/components/mpDevBubble.vue

@@ -0,0 +1,174 @@
+<template>
+  <view
+    v-if="isMp && options && options.status && options.bubble.status"
+    class="mpDevBubble"
+    :style="{
+      left: `${tagConfig.x}px`,
+      top: `${tagConfig.y}px`,
+      'background-color': options.bubble.bgColor,
+      'box-shadow': `0px 0px 6px ${options.bubble.bgColor}`,
+    }"
+    @touchstart.stop="touchstart"
+    @touchmove.stop="touchmove"
+    @touchend.stop="touchend"
+    @mousedown.stop="touchstart"
+  >
+    <text
+      class="mpDevBubbleText"
+      :style="{
+        color: options.bubble.color,
+        'font-size': '20rpx',
+      }"
+    >
+      {{ options.bubble.text }}
+    </text>
+  </view>
+</template>
+<script>
+import devOptions from "../libs/devOptions";
+import { reactive } from 'vue'
+
+let options = devOptions.getOptions();
+let sysInfo = uni.getSystemInfoSync();
+let tagConfig = uni.getStorageSync("devTools_tagConfig");
+if (!tagConfig) {
+  tagConfig = {};
+}
+
+// #ifndef VUE3
+tagConfig = Object.assign(
+  {
+    x: sysInfo.screenWidth - 150,
+    y: sysInfo.screenHeight - 240,
+  },
+  tagConfig
+);
+// #endif
+
+// #ifdef VUE3
+tagConfig = reactive(Object.assign(
+  {
+    x: sysInfo.screenWidth - 150,
+    y: sysInfo.screenHeight - 240,
+  },
+  tagConfig
+));
+// #endif
+
+// 拖动范围限制
+let dragLimit = {
+  min: { x: 0, y: 0 },
+  max: {
+    x: sysInfo.screenWidth - 70,
+    y: sysInfo.screenHeight - 24,
+  },
+};
+
+tagConfig.x = Math.min(Math.max(tagConfig.x, dragLimit.min.x), dragLimit.max.x);
+tagConfig.y = Math.min(Math.max(tagConfig.y, dragLimit.min.y), dragLimit.max.y);
+
+let isTouch = false;
+let touchStartPoint = {
+  clientX: 0,
+  clientY: 0,
+  tagX: tagConfig.x,
+  tagY: tagConfig.y,
+  hasMove: false,
+};
+
+let isMp = false;
+// #ifdef MP
+isMp = true;
+// #endif
+
+export default {
+  data() {
+    return {
+      isMp,
+      /**
+       * 标签参数
+       */
+      options,
+      /**
+       * 标签坐标信息配置
+       */
+      tagConfig,
+    };
+  },
+  mounted() {
+    // #ifdef H5
+    document.addEventListener("mousemove", this.touchmove)
+    document.addEventListener("mouseup", this.touchend)
+    // #endif
+  },
+  beforeUnmount() {
+    // #ifdef H5
+    document.removeEventListener("mousemove", this.touchmove)
+    document.addEventListener("mouseup", this.touchend)
+    // #endif
+  },
+  methods: {
+    touchstart(e) {
+      if (isTouch) return;
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      let clientX = e.clientX ? e.clientX : e.touches[0].clientX;
+      let clientY = e.clientY ? e.clientY : e.touches[0].clientY;
+      touchStartPoint.clientX = clientX;
+      touchStartPoint.clientY = clientY;
+      touchStartPoint.tagX = tagConfig.x;
+      touchStartPoint.tagY = tagConfig.y;
+      touchStartPoint.hasMove = false;
+      isTouch = true;
+    },
+    touchmove(e) {
+      if (!isTouch) return;
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      let clientX = e.clientX ? e.clientX : e.touches[0].clientX;
+      let clientY = e.clientY ? e.clientY : e.touches[0].clientY;
+      touchStartPoint.hasMove = true;
+      let offsetX = touchStartPoint.clientX - clientX;
+      let offsetY = touchStartPoint.clientY - clientY;
+      let tx = touchStartPoint.tagX - offsetX;
+      let ty = touchStartPoint.tagY - offsetY;
+      tx = Math.min(Math.max(tx, dragLimit.min.x), dragLimit.max.x);
+      ty = Math.min(Math.max(ty, dragLimit.min.y), dragLimit.max.y);
+      tagConfig.x = tx;
+      tagConfig.y = ty;
+      this.tagConfig.x = tx;
+      this.tagConfig.y = ty;
+    },
+    touchend(e) {
+      if (!isTouch) return;
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      isTouch = false;
+      uni.setStorageSync("devTools_tagConfig", tagConfig);
+      if (!touchStartPoint.hasMove) {
+        this.$devTools.show();
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.mpDevBubble {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 9999999;
+  width: 70px;
+  height: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border-radius: 6px;
+  font-size: 10px;
+  cursor: grab;
+}
+</style>

package/devTools/core/libs/createH5Bubble.js

@@ -0,0 +1,156 @@
+/**
+ *! 创建h5页面上拖动的气泡标签
+ */
+function createH5Bubble(options, devTools) {
+
+  let tagConfig = localStorage.getItem("devTools_tagConfig");
+  if (!tagConfig) {
+    tagConfig = {}
+  } else {
+    tagConfig = JSON.parse(tagConfig)
+  }
+
+  tagConfig = Object.assign({
+    show: options.bubble.status,
+    x: window.innerWidth - 90,
+    y: window.innerHeight - 90,
+  }, tagConfig);
+
+  tagConfig.show = options.bubble.status;
+
+  // 拖动范围限制
+  let dragLimit = {
+    min: { x: 0, y: 0, },
+    max: {
+      x: window.innerWidth - 70,
+      y: window.innerHeight - 24,
+    }
+  }
+
+
+  tagConfig.x = Math.min(Math.max(tagConfig.x, dragLimit.min.x), dragLimit.max.x)
+  tagConfig.y = Math.min(Math.max(tagConfig.y, dragLimit.min.y), dragLimit.max.y)
+
+  let tag = document.createElement("div");
+  tag.style = `
+    box-sizing: border-box;
+    position: fixed;
+    z-index: 9999999;
+    left: ${tagConfig.x}px;
+    top: ${tagConfig.y}px;
+    width: 70px;
+    height: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border-radius: 6px;
+    background-color: ${options.bubble.bgColor};
+    color: ${options.bubble.color};
+    font-size: 10px;
+    cursor: grab;
+    box-shadow: 0px 0px 6px ${options.bubble.bgColor};
+    backdrop-filter: blur(1px);
+  `;
+  tag.innerHTML = options.bubble.text;
+  tag.setAttribute("id", "debugTag")
+  const canShowBubble = tagConfig.show === true;
+
+  if (canShowBubble) {
+    document.body.appendChild(tag)
+  }
+
+  function hideBubble() {
+    if (!canShowBubble) return;
+    tag.style.display = "none";
+  }
+
+  function showBubble() {
+    if (!canShowBubble) return;
+    if (!document.body.contains(tag)) {
+      document.body.appendChild(tag);
+    }
+    tag.style.display = "flex";
+  }
+
+  uni.$on("devTools_overlay_show", hideBubble);
+  uni.$on("devTools_overlay_hide", showBubble);
+
+  /**
+    * 标签单击事件
+    */
+  function tagClick() {
+    devTools.show()
+  }
+
+  let isTouch = false;
+  let touchStartPoint = {
+    clientX: 0,
+    clientY: 0,
+    tagX: tagConfig.x,
+    tagY: tagConfig.y,
+    hasMove: false,
+  }
+
+  function touchStart(e) {
+    if (isTouch) return;
+    if (e.preventDefault) {
+      e.preventDefault()
+    }
+    let clientX = e.clientX ? e.clientX : e.targetTouches[0].clientX;
+    let clientY = e.clientX ? e.clientY : e.targetTouches[0].clientY;
+    touchStartPoint.clientX = clientX;
+    touchStartPoint.clientY = clientY;
+    touchStartPoint.tagX = tagConfig.x;
+    touchStartPoint.tagY = tagConfig.y;
+    touchStartPoint.hasMove = false;
+    isTouch = true;
+  }
+  function touchMove(e) {
+    if (!isTouch) return;
+    if (e.preventDefault) {
+      e.preventDefault()
+    }
+    let clientX = e.clientX ? e.clientX : e.targetTouches[0].clientX;
+    let clientY = e.clientX ? e.clientY : e.targetTouches[0].clientY;
+    let offsetX = touchStartPoint.clientX - clientX;
+    let offsetY = touchStartPoint.clientY - clientY;
+    const moveDistance = Math.sqrt(offsetX * offsetX + offsetY * offsetY);
+    if (!touchStartPoint.hasMove && moveDistance < 6) {
+      return;
+    }
+    touchStartPoint.hasMove = true;
+    let tx = touchStartPoint.tagX - offsetX;
+    let ty = touchStartPoint.tagY - offsetY;
+    tx = Math.min(Math.max(tx, dragLimit.min.x), dragLimit.max.x)
+    ty = Math.min(Math.max(ty, dragLimit.min.y), dragLimit.max.y)
+    tag.style.left = `${tx}px`;
+    tag.style.top = `${ty}px`;
+    tagConfig.x = tx;
+    tagConfig.y = ty;
+  }
+  function touchEnd(e) {
+    if (!isTouch) return;
+    if (e.preventDefault) {
+      e.preventDefault()
+    }
+    isTouch = false;
+    localStorage.setItem("devTools_tagConfig", JSON.stringify(tagConfig))
+    if (!touchStartPoint.hasMove) {
+      tagClick()
+    }
+  }
+  tag.addEventListener("touchstart", touchStart)
+  tag.addEventListener("touchmove", touchMove)
+  tag.addEventListener("touchend", touchEnd)
+
+  tag.addEventListener("mousedown", touchStart)
+  document.addEventListener("mousemove", touchMove)
+  document.addEventListener("mouseup", touchEnd)
+
+  localStorage.setItem("devTools_tagConfig", JSON.stringify(tagConfig))
+}
+
+
+export default createH5Bubble;

package/devTools/core/libs/devCache.js

@@ -0,0 +1,151 @@
+import devOptions from "./devOptions"
+/**
+ * dev工具缓存管理
+ */
+export default {
+  /**
+   * 存储的键开始名称
+   */
+  cacheKey: "devTools_v3_",
+  options: null,
+  /**
+   * 临时缓存对象
+   */
+  tempCache: {
+    errorReport: [],
+    logReport: [],
+    console: [],
+    request: [],
+    uniBus: [],
+  },
+  /**
+   * 临时数据存放
+   */
+  tempData: {},
+  /**
+   * 长列表配置缺省值
+   */
+  defaultLongListSetting: {
+    status: false,
+    cache: {
+      status: false
+    }
+  },
+  /**
+   * 向缓存内写入数据
+   */
+  set(key, value) {
+    try {
+      if (['errorReport', 'logReport', 'console', 'request', 'uniBus'].indexOf(key) != -1) {
+        const setting = this.getLongListSetting(key)
+        if (setting.status !== true) return;
+        if (!setting.cache || setting.cache.status !== true) {
+          // !不使用缓存
+          this.tempCache[key] = value;
+          return;
+        }
+      }
+      key = `${this.cacheKey}${key}`
+
+      this.tempData[key] = value;
+    } catch (error) {
+      console.log("devCache.set error", error);
+    }
+  },
+  /**
+   * 同步读取缓存数据
+   */
+  get(key) {
+    try {
+      if (['errorReport', 'logReport', 'console', 'request', 'uniBus'].indexOf(key) != -1) {
+        const setting = this.getLongListSetting(key)
+        if (setting.status !== true) return [];
+        if (!setting.cache || setting.cache.status !== true) {
+          // !不使用缓存
+          return this.tempCache[key];
+        }
+      }
+      key = `${this.cacheKey}${key}`
+
+      if (this.tempData.hasOwnProperty(key)) {
+        return this.tempData[key];
+      } else {
+        let value = uni.getStorageSync(key);
+        this.tempData[key] = value;
+        return value;
+      }
+    } catch (error) {
+      console.log("devCache.get error", error);
+      return "";
+    }
+  },
+  /**
+   * 向缓存内写入数据
+   */
+  clearItem(key) {
+    try {
+      if (['errorReport', 'logReport', 'console', 'request', 'uniBus'].indexOf(key) != -1) {
+        const setting = this.getLongListSetting(key)
+        if (setting.status !== true) return [];
+        if (!setting.cache || setting.cache.status !== true) {
+          // !不使用缓存
+          delete this.tempData[key];
+          uni.removeStorageSync(key);
+        }
+      }
+      key = `${this.cacheKey}${key}`;
+      delete this.tempData[key];
+      uni.removeStorageSync(key);
+    } catch (error) {
+      console.log("devCache.clearItem error", JSON.stringify(error));
+    }
+  },
+  getLongListSetting(key) {
+    const optionsKey = {
+      errorReport: 'error',
+      logReport: 'logs',
+      console: 'console',
+      request: 'network',
+      uniBus: 'uniBus',
+    }
+    const optionName = optionsKey[key]
+    if (!optionName) {
+      return this.defaultLongListSetting
+    }
+    if (!this.options) {
+      this.options = devOptions.getOptions() || {}
+    }
+    const setting = this.options ? this.options[optionName] : null
+    if (!setting || typeof setting !== 'object') {
+      return this.defaultLongListSetting
+    }
+    return setting
+  },
+  /**
+   * 同步本地缓存
+   */
+  syncLocalCache() {
+    let that = this;
+    setTimeout(() => {
+      try {
+        let waitSetKeys = Object.keys(that.tempData);
+        for (let i = 0; i < waitSetKeys.length; i++) {
+          const key = waitSetKeys[i];
+          uni.setStorage({
+            key,
+            data: that.tempData[key],
+            success() {
+              // console.log("set " + key + " success,length=" + that.tempData[key].length);
+              delete that.tempData[key];
+            }
+          });
+        }
+      } catch (error) {
+        console.log("devCache error: ", error);
+      }
+      setTimeout(() => {
+        that.syncLocalCache();
+      }, 500);
+    }, Math.round(Math.random() * 3 * 1000) + 2000);
+  },
+}

package/devTools/core/libs/devOptions.js

@@ -0,0 +1,163 @@
+import devCache from "./devCache";
+
+/**
+ * 设置各端大小 kb
+ */
+const defSize = (h5, app, mp) => {
+  let r = 0;
+  // #ifdef H5
+  r = h5;
+  // #endif
+  // #ifdef MP
+  r = mp;
+  // #endif
+  // #ifdef APP-PLUS
+  r = app;
+  // #endif
+  return Math.ceil(r * 1024);
+}
+
+
+
+/**
+ * 获取配置
+ */
+export default {
+  /**
+   * 配置缓存key
+   */
+  cacheKey: "options_v8",
+  /**
+   * 默认配置项
+   */
+  defaultOptions: {
+    version: 3.81,
+    status: false, //调试工具总开关
+    bubble: { //调试弹窗气泡设置
+      status: false, // 气泡标签是否显示，生产环境建议关闭
+      text: "调试工具", // 气泡上展示的文字
+      color: "#ffffff", // 气泡文字颜色
+      bgColor: "rgba(250, 53, 52,0.7)", // 气泡背景颜色
+    },
+    console: {
+      status: true, // 开关
+      isOutput: true, //打印的日志是否对外输出到浏览器调试界面，建议在生产环境时开启
+      cache: {
+        status: true, //是否启用console缓存
+        size: defSize(512, 1024 * 2, 512),
+        rowSize: defSize(5.12, 20, 10),
+      },
+    },
+    error: {
+      status: true,
+      cache: {
+        status: true,
+        size: defSize(512, 1024 * 2, 512),
+        rowSize: defSize(5.12, 20, 10),
+      },
+    },
+    network: {
+      status: true,
+      cache: {
+        status: true,
+        size: defSize(512, 1024 * 2, 512),
+        rowSize: defSize(5.12, 20, 10),
+      },
+    },
+    logs: {
+      status: true,
+      cache: {
+        status: true,
+        size: defSize(512, 1024 * 2, 512),
+        rowSize: defSize(0.4, 0.4, 0.4),
+      },
+    },
+    // uni event bus 监听设置
+    uniBus: {
+      status: true,
+      cache: {
+        status: true,
+        size: defSize(512, 1024 * 2, 512),
+        rowSize: defSize(5.12, 20, 10),
+        countMaxSize: defSize(512, 1024 * 2, 512), // bus统计上限 kb
+      },
+    },
+  },
+  /**
+   * 获取配置信息
+   */
+  getOptions() {
+    try {
+      let options = devCache.get(this.cacheKey)
+      if (!options) {
+        return {
+          status: false, //默认关闭调试工具
+        }
+      }
+      return options;
+    } catch (error) {
+      console.log("devOptions.getOptions error: ", error);
+      return {
+        status: false, //默认关闭调试工具
+      }
+    }
+  },
+  /**
+   * 保存配置项
+   */
+  setOptions(options) {
+    try {
+      if (!options) {
+        options = this.defaultOptions;
+      }
+
+      let data = deepMerge(this.defaultOptions, options)
+
+      devCache.set(this.cacheKey, data)
+    } catch (error) {
+      console.log("devOptions.setOptions error: ", error);
+    }
+  },
+  /**
+   * 弹出错误信息
+   */
+  outputError(msg) {
+    console.log('%c' + msg, `
+      padding: 4px;
+      background-color: red;
+      color: #fff;
+      font-size: 15px;
+    `)
+  },
+}
+
+
+
+
+
+
+/**
+ * 深度合并对象
+ */
+function deepMerge(target, ...sources) {
+  try {
+    if (!sources.length) return target; // 如果没有源对象则直接返回目标对象
+
+    const source = sources[0];
+
+    for (let key in source) {
+      if (source.hasOwnProperty(key)) {
+        if (typeof source[key] === 'object' && typeof target[key] !== undefined) {
+          target[key] = deepMerge({}, target[key], source[key]); // 若属性值为对象类型且目标对象已存在该属性，则递归调用deepMerge函数进行合并
+        } else {
+          target[key] = source[key]; // 否则将源对象的属性赋值到目标对象上
+        }
+      }
+    }
+
+    return deepMerge(target, ...sources.slice(1)); // 处理完第一个源对象后再次调用deepMerge函数处理其他源对象
+  } catch (error) {
+    console.log("deepMerge error", error);
+    return {}
+  }
+}