oxy-uni-ui 2.1.1 → 2.1.2

package/oxy-dev-tools/core/components/mpDevBubble.vue

@@ -0,0 +1,176 @@
+<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/oxy-dev-tools/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/oxy-dev-tools/core/libs/devCache.js

@@ -0,0 +1,149 @@
+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
+    }
+    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/oxy-dev-tools/core/libs/devOptions.js

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