oxy-uni-ui 2.1.1 → 2.1.2

package/oxy-dev-tools/page/components/libs/getRuntimeInfo.js

@@ -0,0 +1,132 @@
+/**
+ * 获取当前运行时环境信息
+ */
+export default function getRuntimeInfo() {
+  return new Promise(async (yes) => {
+    let data = {
+      系统信息: uni.getSystemInfoSync(),
+      设备基础信息: uni.getDeviceInfo ? uni.getDeviceInfo() : null,
+      窗口信息: uni.getWindowInfo ? uni.getWindowInfo() : null,
+      APP基础信息: uni.getAppBaseInfo ? uni.getAppBaseInfo() : null,
+      APP授权设置: uni.getAppAuthorizeSetting ? uni.getAppAuthorizeSetting() : null,
+      设备设置: uni.getSystemSetting ? uni.getSystemSetting() : null,
+      网络状态: await getNetworkType(),
+      启动参数: uni.getLaunchOptionsSync(),
+      // #ifdef APP-PLUS
+      其他信息: await getAppOtherInfo()
+      // #endif
+    }
+    yes(data)
+  })
+}
+
+/**
+ * 获取网络状态
+ */
+function getNetworkType() {
+  return new Promise((yes, err) => {
+    if (!uni.getNetworkType) {
+      return yes(null)
+    }
+    uni.getNetworkType({
+      success(res) {
+        yes(res.networkType)
+      },
+      fail() {
+        yes('error')
+      }
+    })
+  })
+}
+/**
+ * 获取APP端设备其他信息
+ */
+function getAppOtherInfo() {
+  return new Promise(async (yes) => {
+    let info = {}
+
+    let getDevice = () =>
+      new Promise((yes) => {
+        plus.device.getInfo({
+          success: yes,
+          fail() {
+            yes('plus.device.getInfo() fail')
+          }
+        })
+      })
+
+    let getOAID = () =>
+      new Promise((yes) => {
+        plus.device.getOAID({
+          success: yes,
+          fail() {
+            yes('plus.device.getOAID() fail')
+          }
+        })
+      })
+
+    let getAAID = () =>
+      new Promise((yes) => {
+        plus.device.getOAID({
+          success: yes,
+          fail() {
+            yes('plus.device.getOAID() fail')
+          }
+        })
+      })
+
+    let getDeviceId = () =>
+      new Promise((yes) => {
+        try {
+          let id = plus.device.getDeviceId()
+          yes(id)
+        } catch (error) {
+          yes('plus.device.getDeviceId() fail')
+        }
+      })
+
+    try {
+      info.getDevice = await getDevice()
+      info.getOAID = await getOAID()
+      info.getAAID = await getAAID()
+      info.getDeviceId = await getDeviceId()
+      yes(info)
+    } catch (error) {
+      console.log('getDeviceInfoFail', error)
+      yes('获取设备信息失败！')
+    }
+
+    plus.device.getInfo({
+      success(e) {
+        info = Object.assign(info, e)
+
+        plus.device.getOAID({
+          success(e) {
+            info = Object.assign(info, e)
+
+            plus.device.getVAID({
+              success(e) {},
+              fail() {
+                yes(
+                  Object.assign(info, {
+                    errMsg: 'plus.device.getVAID 获取失败！'
+                  })
+                )
+              }
+            })
+          },
+          fail() {
+            yes(
+              Object.assign(info, {
+                errMsg: 'plus.device.getOAID 获取失败！'
+              })
+            )
+          }
+        })
+      },
+      fail() {
+        yes({ errMsg: 'plus.device.getInfo 获取失败！' })
+      }
+    })
+  })
+}

package/oxy-dev-tools/page/components/listItem/consoleItem.vue

@@ -0,0 +1,292 @@
+<template>
+  <view class="consoleItem" :class="['type-' + item.type]">
+    <view class="card">
+      <view class="content">
+        <view v-for="(row, index) in item.list" :key="index" class="rowWrap">
+          <template v-if="isObj(row)">
+            <objectAnalysis :data="row" :width="670" />
+          </template>
+          <template v-else>
+            <view>
+              <text class="context" :class="[getTypeClass(row)]">
+                {{ getText(row) }}
+              </text>
+            </view>
+          </template>
+        </view>
+
+        <view class="msgBar">
+          <text class="logType" :class="'type-' + item.type">
+            {{ item.type }}
+          </text>
+          <text class="time">{{ item.date }}</text>
+          <text class="page">{{ item.page }}</text>
+        </view>
+
+        <view class="actionBar">
+          <view class="actionBtn" @click.stop="copyList">
+            <text class="actionText">复制</text>
+          </view>
+          <view class="actionBtn more" @click.stop="openMenu">
+            <text class="actionText">更多</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import objectAnalysis from './objectAnalysis.vue'
+import devUi from '../../../core/libs/devUi.js'
+export default {
+  components: {
+    objectAnalysis
+  },
+  props: {
+    /**
+     * console单行数据
+     */
+    item: {
+      type: Object,
+      default() {
+        return {
+          list: [],
+          date: '', // 打印的日期
+          page: '', // 打印的页面
+          type: '' // 打印类型
+        }
+      }
+    }
+  },
+  methods: {
+    /**
+     * 是否为对象类型
+     */
+    isObj(data) {
+      return typeof data == 'object' && data != null && data != undefined
+    },
+    /**
+     * 获取对应的类型样式
+     */
+    getTypeClass(obj) {
+      try {
+        let type = typeof obj
+
+        if (type == 'string') {
+          if (obj.indexOf('at ') == 0) {
+            return 't-line'
+          } else if (obj === undefined || obj == 'undefined') {
+            return 't-undefined'
+          } else if (obj === null || obj == 'null') {
+            return 't-null'
+          } else if (obj == 'true' || obj == 'false') {
+            return 't-boolean'
+          } else if (Number.isFinite(Number(obj))) {
+            return 't-number'
+          }
+        }
+        return 't-' + type
+      } catch (error) {}
+      return 't-string'
+    },
+    /**
+     * 获取数据文字
+     */
+    getText(data) {
+      switch (typeof data) {
+        case 'string':
+          // return data.replace(/\n/g, "");
+          return data
+        case 'boolean':
+          return data ? 'true' : 'false'
+        case 'undefined':
+          return 'undefined'
+        case 'function':
+          return 'js:function'
+        case 'symbol':
+          return 'js:symbol'
+        default:
+          return data
+      }
+    },
+    /**
+     * 复制列表
+     */
+    copyList() {
+      this.copyToClipboard(JSON.stringify(this.item.list))
+    },
+    copyToClipboard(data) {
+      uni.setClipboardData({
+        data,
+        success: () => {
+          devUi.showToast({
+            title: '复制成功',
+            icon: 'success'
+          })
+        }
+      })
+    },
+    /**
+     * 更多菜单
+     */
+    openMenu() {
+      let that = this
+
+      let menu = [
+        {
+          text: '复制日志信息',
+          click() {
+            that.copyToClipboard(JSON.stringify(that.item))
+          }
+        },
+        {
+          text: '删除此记录',
+          click() {
+            uni.$emit('devTools_delConsoleItem', that.item)
+            devUi.showToast({
+              title: '删除成功！',
+              icon: 'success'
+            })
+          }
+        }
+      ]
+
+      devUi.showActionSheet({
+        itemList: menu.map((x) => x.text),
+        success({ tapIndex }) {
+          menu[tapIndex].click()
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.consoleItem {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10rpx 20rpx;
+  .card {
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 16rpx;
+    padding: 14rpx 16rpx 12rpx;
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    background: #fff;
+    box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.05);
+  }
+  &.type-info .card {
+    background: #f8fafc;
+  }
+  &.type-warn .card {
+    border-color: rgba(245, 158, 11, 0.38);
+    background: #fffaf0;
+  }
+  &.type-error .card {
+    border-color: rgba(239, 68, 68, 0.4);
+    background: #fff5f5;
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+    .rowWrap {
+      width: 100%;
+    }
+    .context {
+      font-size: 23rpx;
+      color: #1f2937;
+      line-height: 32rpx;
+      word-break: break-all;
+      &.t-number {
+        color: rgb(8, 66, 160);
+      }
+      &.t-boolean {
+        color: rgb(133, 2, 255);
+      }
+      &.t-string {
+        color: #333;
+      }
+      &.t-undefined {
+        color: rgba(0, 0, 0, 0.2);
+      }
+      &.t-null {
+        color: rgba(0, 0, 0, 0.2);
+      }
+      &.t-line {
+        color: rgba(0, 0, 0, 0.5);
+      }
+    }
+    .msgBar {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 10rpx;
+      .time {
+        font-size: 20rpx;
+        color: #64748b;
+      }
+      .page {
+        font-size: 20rpx;
+        color: #64748b;
+        max-width: 420rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .logType {
+        font-size: 20rpx;
+        line-height: 28rpx;
+        padding: 2rpx 10rpx;
+        border-radius: 999rpx;
+      }
+      .type-log {
+        color: #fff;
+        background-color: #a8abb3;
+      }
+      .type-info {
+        color: #fff;
+        background-color: #747474;
+      }
+      .type-warn {
+        color: #fff;
+        background-color: #ff9900;
+      }
+      .type-error {
+        color: #fff;
+        background-color: #fa3534;
+      }
+    }
+    .actionBar {
+      margin-top: 4rpx;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      gap: 12rpx;
+      .actionBtn {
+        height: 42rpx;
+        border-radius: 999rpx;
+        border: 1px solid #bfdbfe;
+        background: #eff6ff;
+        padding: 0 14rpx;
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        &:active {
+          background: #dbeafe;
+        }
+        &.more {
+          border-color: #cbd5e1;
+          background: #f8fafc;
+        }
+        .actionText {
+          font-size: 20rpx;
+          line-height: 20rpx;
+          color: #1e3a8a;
+        }
+      }
+    }
+  }
+}
+</style>

package/oxy-dev-tools/page/components/listItem/errorItem.vue

@@ -0,0 +1,268 @@
+<template>
+  <view class="errorItem" :class="['type-' + item.type]">
+    <view class="card">
+      <view class="content">
+        <view v-for="(row, index) in [item.m, item.tr]" :key="index" class="rowWrap">
+          <template v-if="isObj(row)">
+            <objectAnalysis :data="row" :width="670" />
+          </template>
+          <template v-else>
+            <view>
+              <text class="context">{{ getText(row) }}</text>
+            </view>
+          </template>
+        </view>
+
+        <view class="msgBar">
+          <text class="logType" :class="['type-' + item.type]">
+            {{ getType(item.type) }}
+          </text>
+          <text class="time">{{ item.date }}</text>
+          <text class="page">{{ item.p }}</text>
+        </view>
+
+        <view class="actionBar">
+          <view class="actionBtn" @click.stop="copyList">
+            <text class="actionText">复制</text>
+          </view>
+          <view class="actionBtn more" @click.stop="openMenu">
+            <text class="actionText">更多</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import devCache from '../../../core/libs/devCache'
+import objectAnalysis from './objectAnalysis.vue'
+import devUi from '../../../core/libs/devUi.js'
+export default {
+  components: {
+    objectAnalysis
+  },
+  props: {
+    /**
+     * console单行数据
+     */
+    item: {
+      type: Object,
+      default() {
+        return {
+          m: '',
+          tr: '',
+          date: '', // 打印的日期
+          p: '', // 打印的页面
+          type: '' // 打印类型
+        }
+      }
+    }
+  },
+  methods: {
+    /**
+     * 是否为对象类型
+     */
+    isObj(data) {
+      return typeof data == 'object'
+    },
+    /**
+     * 获取数据文字
+     */
+    getText(data) {
+      switch (typeof data) {
+        case 'string':
+          return data
+        case 'boolean':
+          return data ? 'true' : 'false'
+        case 'undefined':
+          return 'undefined'
+        case 'function':
+          return 'js:function'
+        case 'symbol':
+          return 'js:symbol'
+        default:
+          return data
+      }
+    },
+    /**
+     * 复制列表
+     */
+    copyList() {
+      let that = this
+      that.copyToClipboard(JSON.stringify([that.item.m, that.item.tr]))
+    },
+    copyToClipboard(data) {
+      uni.setClipboardData({
+        data,
+        success: () => {
+          devUi.showToast({
+            title: '复制成功',
+            icon: 'success'
+          })
+        }
+      })
+    },
+    /**
+     * 获取类型
+     */
+    getType(type) {
+      let t = {
+        ve: 'vue error',
+        vw: 'vue warn',
+        oe: 'App.vue onError',
+        n: 'unknown'
+      }
+      return t[type]
+    },
+    /**
+     * 更多菜单
+     */
+    openMenu() {
+      let that = this
+
+      let menu = [
+        {
+          text: '复制日志信息',
+          click() {
+            that.copyToClipboard(JSON.stringify(that.item))
+          }
+        },
+        {
+          text: '删除此记录',
+          click() {
+            uni.$emit('devTools_delError', that.item)
+            let logs = devCache.get('errorReport')
+            if (!logs) logs = []
+            let i = logs.findIndex(
+              (x) => x.type == that.item.type && x.t == that.item.t && x.m == that.item.m && x.tr == that.item.tr && x.p == that.item.p
+            )
+            if (i != -1) {
+              logs.splice(i, 1)
+              devCache.set('errorReport', logs)
+            }
+            devUi.showToast({
+              title: '删除成功！',
+              icon: 'success'
+            })
+          }
+        }
+      ]
+
+      devUi.showActionSheet({
+        itemList: menu.map((x) => x.text),
+        success({ tapIndex }) {
+          menu[tapIndex].click()
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.errorItem {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10rpx 20rpx;
+  .card {
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 16rpx;
+    padding: 14rpx 16rpx 12rpx;
+    border: 1px solid rgba(239, 68, 68, 0.32);
+    background: #fff6f6;
+    box-shadow: 0 4rpx 16rpx rgba(185, 28, 28, 0.08);
+  }
+  &.type-vw .card {
+    border-color: rgba(245, 158, 11, 0.4);
+    background: #fffaf0;
+  }
+  &.type-n .card {
+    border-color: rgba(148, 163, 184, 0.3);
+    background: #f8fafc;
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+    .rowWrap {
+      width: 100%;
+    }
+    .context {
+      font-size: 23rpx;
+      color: #7f1d1d;
+      line-height: 32rpx;
+      word-break: break-all;
+    }
+    .msgBar {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 10rpx;
+      .time {
+        font-size: 20rpx;
+        color: #64748b;
+      }
+      .page {
+        font-size: 20rpx;
+        color: #64748b;
+        max-width: 420rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .logType {
+        font-size: 20rpx;
+        line-height: 28rpx;
+        padding: 2rpx 10rpx;
+        border-radius: 999rpx;
+      }
+      .type-ve {
+        color: #fff;
+        background-color: #fd0add;
+      }
+      .type-n {
+        color: #fff;
+        background-color: #82848a;
+      }
+      .type-vw {
+        color: #fff;
+        background-color: #ff9900;
+      }
+      .type-oe {
+        color: #fff;
+        background-color: #ff0000;
+      }
+    }
+    .actionBar {
+      margin-top: 4rpx;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      gap: 12rpx;
+      .actionBtn {
+        height: 42rpx;
+        border-radius: 999rpx;
+        border: 1px solid #fecaca;
+        background: #fee2e2;
+        padding: 0 14rpx;
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        &:active {
+          background: #fecaca;
+        }
+        &.more {
+          border-color: #cbd5e1;
+          background: #f8fafc;
+        }
+        .actionText {
+          font-size: 20rpx;
+          line-height: 20rpx;
+          color: #b91c1c;
+        }
+      }
+    }
+  }
+}
+</style>