oxy-uni-ui 2.1.1 → 2.1.2

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

@@ -0,0 +1,642 @@
+<template>
+  <view
+    class="objectAnalysis"
+    :style="{
+      width: width + 'rpx'
+    }"
+  >
+    <view class="objectTitle objectTitleActive" @click="titleClick">
+      <image class="foldItem" v-if="isOpen" src="../../static/fold.png" />
+      <image class="foldItem" v-else src="../../static/unfold.png" />
+      <text
+        class="title"
+        :style="{
+          width: width - 50 + 'rpx'
+        }"
+      >
+        {{ title }}
+      </text>
+    </view>
+
+    <view
+      class="objectList"
+      v-if="isOpen"
+      :style="{
+        width: width + 'rpx'
+      }"
+    >
+      <view
+        v-for="(item, index) in list"
+        :key="item.i"
+        class="listItem"
+        :style="{
+          marginLeft: item.l + 'rpx'
+        }"
+        @click="rowClick(item, index)"
+      >
+        <template v-if="item.t == 'array' || item.t == 'object'">
+          <image class="foldItem" v-if="item.o" src="../../static/fold.png" />
+          <image class="foldItem" v-else src="../../static/unfold.png" />
+        </template>
+        <view v-else class="emptyFold"></view>
+        <text
+          class="objKey"
+          :class="'t-' + item.t"
+          :style="{
+            maxWidth: (width - item.l - 40) / 2 + 'rpx'
+          }"
+        >
+          {{ item.k }}:
+        </text>
+        <text class="objValue" :class="'t-' + item.t">
+          {{ item.vt }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import jsonCompress from '../../../core/libs/jsonCompress'
+function getType(v) {
+  return Object.prototype.toString.call(v).slice(8, -1).toLocaleLowerCase()
+}
+function randId() {
+  return Math.ceil(Math.random() * 1000000000000000)
+}
+export default {
+  props: {
+    /**
+     * 需要解析的对象数据
+     */
+    data: '',
+    /**
+     * 组件宽度 rpx
+     */
+    width: {
+      type: Number,
+      default: 610
+    },
+    /**
+     * 是否默认展开第一层
+     */
+    isOpenFirst: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 是否展示完整的对象类型
+     */
+    showObjProto: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      /**
+       * 对象类型 array object map unknown
+       */
+      type: 'unknown',
+      /**
+       * 对象标题
+       */
+      title: '',
+      /**
+       * 是否为开启节点状态
+       */
+      isOpen: false,
+      /**
+       * 渲染的列表
+       */
+      list: [
+        {
+          t: 'text', // 类型
+          k: '键名', // key
+          v: '名称', // value
+          vt: '', //view层渲染的文字
+          i: 's', //节点id
+          p: '0', //父节点id
+          o: true, //是否开启下级
+          l: 0, // 距离左侧长度
+          d: null //原对象
+        }
+      ]
+    }
+  },
+  mounted() {
+    let that = this
+
+    try {
+      let { title } = that.getObjType(this.data)
+      that.list = []
+      that.title = title
+      if (that.isOpenFirst) {
+        that.titleClick()
+      }
+    } catch (error) {
+      console.log('objectAnalysis error', error)
+    }
+  },
+  methods: {
+    /**
+     * 标题点击事件
+     */
+    titleClick() {
+      if (this.isOpen) {
+        this.isOpen = false
+      } else {
+        if (this.list.length == 0) {
+          this.analysisData(this.data)
+        }
+        this.isOpen = true
+      }
+    },
+    /**
+     * 解析渲染数组
+     */
+    analysisData(data, pid = 0) {
+      let list = []
+      let l = this.getParentNum(pid)
+
+      let keys = []
+      keys = Reflect.ownKeys(data)
+
+      for (let i = 0; i < keys.length; i++) {
+        let key = keys[i]
+        let value = data[key]
+
+        if (key == '__proto__' || key == '__ob__') {
+          continue
+        }
+
+        let o = {
+          t: typeof value,
+          k: key,
+          v: value,
+          vt: '',
+          i: randId(),
+          p: pid,
+          o: false,
+          l: l * 5,
+          d: value
+        }
+
+        try {
+          let t = typeof value
+          if (t == 'function') {
+            try {
+              o.vt = value.toString()
+            } catch (error) {
+              if (error && error.message) {
+                o.vt = '[js:function]' + error.message
+              } else {
+                o.vt = '[js:function]'
+              }
+            }
+            o.v = o.vt
+            o.d = ''
+          } else if (t == 'object') {
+            if (this.showObjProto) {
+              let str = 'unknown'
+              if (value === null) {
+                o.t = 'null'
+                str = 'null'
+              } else if (Array.isArray(value)) {
+                o.t = 'array'
+                let l = 0
+                try {
+                  l = value.length
+                } catch (error) {}
+                str = Object.prototype.toString.call(value).slice(8, -1) + (l > 0 ? ` (${l})[...]` : ' (0)[]')
+              } else {
+                o.t = 'object'
+                let childList = []
+                try {
+                  childList = Reflect.ownKeys(value)
+                } catch (error) {}
+                str = Object.prototype.toString.call(value).slice(8, -1) + (childList.length == 0 ? ' {}' : ' {...}')
+              }
+              o.vt = str
+            } else {
+              let type = getType(value)
+              let title = ''
+              try {
+                title = JSON.stringify(value)
+                if (title.length > 50) {
+                  title = title.slice(0, 50) + '...'
+                }
+                if (type == 'array' && value.length > 0) {
+                  title = '(' + value.length + ')' + title
+                }
+              } catch (error) {
+                title = '对象解析失败：' + error
+              }
+              o.t = type
+              o.vt = title
+              o.v = value
+            }
+          } else if (t == 'symbol') {
+            o.t = 'symbol'
+            try {
+              if (value.toString) {
+                o.vt = value.toString()
+              } else {
+                o.vt = '[js:symbol]'
+              }
+            } catch (error) {
+              let msg = ''
+              if (error && error.message) {
+                msg = error.message
+              } else {
+                msg = '[js:symbol解析失败]'
+              }
+              o.vt = msg
+            }
+          } else if (t == 'string') {
+            if (value.length > 200) {
+              o.vt = '"' + value.slice(0, 200) + '...' + '"'
+            } else {
+              o.vt = `"${value}"`
+            }
+          } else if (t == 'number') {
+            if (Number.isFinite(value)) {
+              o.vt = value.toString()
+            } else {
+              o.vt = isNaN(value) ? 'NaN' : 'Infinity'
+            }
+          } else if (t == 'boolean') {
+            o.vt = value ? 'true' : 'false'
+          } else if (t == 'undefined') {
+            o.vt = 'undefined'
+          } else {
+            o.vt = '[js:unknown type]'
+          }
+        } catch (error) {
+          let msg = ''
+          if (error && error.message) {
+            msg = error.message
+          } else {
+            msg = '[js对象解析失败]'
+          }
+          o.vt = msg
+        }
+        list.push(o)
+      }
+
+      if (pid == 0) {
+        this.list = list
+      } else {
+        let faIndex = this.list.findIndex((x) => x.i == pid) + 1
+        for (let i = 0; i < list.length; i++) {
+          this.list.splice(faIndex, 0, list[i])
+          faIndex++
+        }
+      }
+    },
+    /**
+     * 获取节点的父类数量
+     */
+    getParentNum(pid) {
+      let that = this
+      let count = 0
+      if (pid == 0) {
+        return count
+      } else {
+        let p = Number(pid)
+        while (true) {
+          count = count + 1
+          let fa = that.list.find((x) => x.i == p)
+          if (!fa || fa.i == 0) {
+            break
+          } else {
+            p = Number(fa.p)
+          }
+        }
+      }
+      return count
+    },
+    /**
+     * 行对象点击事件
+     */
+    rowClick(item, index) {
+      let that = this
+      const nodeItem = that.list[index]
+      if (item.t == 'object' || item.t == 'array') {
+        if (item.o) {
+          nodeItem.o = false
+          that.hideListByPid(item.i)
+        } else {
+          nodeItem.o = true
+          that.analysisData(nodeItem.d, item.i)
+        }
+      } else if (item.t == 'string' && item.v.length > 100) {
+        // 长文本点击时默认打开文本编辑器
+        uni.$emit('devTools_showTextEditDialog', {
+          title: item.k,
+          canSave: false,
+          isFileEdit: false,
+          value: item.v
+        })
+      }
+    },
+    /**
+     * 根据父类id删除数组内元素
+     */
+    hideListByPid(pid = 0) {
+      let that = this
+      while (true) {
+        let i = that.list.findIndex((x) => x.p == pid)
+        if (i == -1) {
+          break
+        }
+        if (that.list[i].o) {
+          that.hideListByPid(that.list[i].i)
+        }
+        that.list.splice(i, 1)
+      }
+    },
+    /**
+     * 获取列表
+     */
+    getList() {
+      return this.list
+    },
+    /**
+     * 获取父级key类别
+     */
+    getFaKeyList(itemId) {
+      let keyList = []
+      let item = this.list.find((x) => x.i == itemId)
+      if (!item) return keyList
+      keyList = [item.k]
+      if (item.p == 0) return keyList
+
+      while (true) {
+        item = this.list.find((x) => x.i == item.p)
+        if (!item) break
+        keyList.unshift(item.k)
+        if (item.p == 0) {
+          break
+        }
+      }
+
+      return keyList
+    },
+    /**
+     * 获取对象单行数据
+     */
+    getObjType(obj) {
+      try {
+        let title = 'unknown'
+        let type = typeof obj
+        let data = obj
+        switch (typeof data) {
+          case 'symbol':
+            title = '[js:symbol]'
+            try {
+              if (data.toString) {
+                title = data.toString()
+              } else {
+                title = '[js:symbol]'
+              }
+            } catch (error) {
+              let msg = ''
+              if (error && error.message) {
+                msg = error.message
+              } else {
+                msg = '[js:symbol解析失败]'
+              }
+              title = msg
+            }
+            break
+          case 'string':
+            title = data
+            break
+          case 'object':
+            if (this.showObjProto) {
+              try {
+                let objType = Object.prototype.toString.call(data).slice(8, -1)
+                title = {}
+                let keys = Reflect.ownKeys(data)
+
+                for (let i = 0; i < keys.length; i++) {
+                  let key = keys[i]
+                  if (key == '__proto__' || key == '__ob__') {
+                    continue
+                  }
+                  try {
+                    let value = data[key]
+                    let t = typeof value
+                    if (t == 'function') {
+                      continue
+                    }
+                    if (t == 'object') {
+                      let str = 'unknown'
+                      if (value === null) {
+                        str = 'null'
+                      } else if (Array.isArray(value)) {
+                        str = Object.prototype.toString.call(value).slice(8, -1) + ' [...]'
+                      } else {
+                        str = Object.prototype.toString.call(value).slice(8, -1) + ' {...}'
+                      }
+                      title[key] = str
+                      continue
+                    }
+                    title[key] = data[key]
+                  } catch (error) {
+                    if (error && error.message) {
+                      title[key] = error.message
+                    } else {
+                      title[key] = '[js对象解析失败]'
+                    }
+                  }
+                }
+
+                for (let i = 0; i < keys.length; i++) {
+                  let key = keys[i]
+                  try {
+                    let value = data[key]
+                    let t = typeof value
+                    if (t == 'function') {
+                      try {
+                        title[key] = value.toString()
+                      } catch (error) {
+                        if (error && error.message) {
+                          title[key] = '[js:function]' + error.message
+                        } else {
+                          title[key] = '[js:function]'
+                        }
+                      }
+                    }
+                  } catch (error) {
+                    if (error && error.message) {
+                      title[key] = error.message
+                    }
+                  }
+                }
+                if (title.toJSON) {
+                  title.toJSON = '[js:function]'
+                }
+
+                if (objType == 'Array') {
+                  title = objType + ' ' + jsonCompress.safeJsonStringify(title)
+                } else {
+                  title = objType + ' ' + jsonCompress.safeJsonStringify(title)
+                }
+
+                if (Array.isArray(data)) {
+                  type = 'array'
+                } else {
+                  type = 'object'
+                }
+              } catch (error) {
+                let msg = 'unknown'
+                if (error && error.message) {
+                  msg = error.message
+                }
+                title = '对象解析出错:' + msg
+              }
+            } else {
+              try {
+                title = JSON.stringify(data)
+                if (title.length > 50) {
+                  title = title.slice(0, 50) + '...'
+                }
+              } catch (error) {
+                title = '对象解析失败：' + error
+              }
+            }
+
+            break
+          case 'function':
+            try {
+              title = data.toString()
+            } catch (error) {
+              title = '[js:function]'
+            }
+            break
+          default:
+            title = data
+            break
+        }
+        return { title, type }
+      } catch (error) {
+        console.log('getObjType error', error)
+        return {
+          title: 'unknown',
+          type: 'unknown'
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.objectAnalysis {
+  display: flex;
+  flex-direction: column;
+  .objectTitle {
+    min-height: 40rpx;
+    padding: 4rpx 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .title {
+      font-size: 22rpx;
+      line-height: 32rpx;
+      color: #1e3a8a;
+      lines: 1;
+      overflow: hidden;
+      /* #ifdef H5 */
+      // 限制行数
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      /* #endif */
+    }
+  }
+  .objectTitleActive:active {
+    background-color: rgba(59, 130, 246, 0.08);
+    border-radius: 10rpx;
+  }
+  .objectList {
+    background-color: #f8fafc;
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    border-radius: 12rpx;
+    /* #ifndef APP-PLUS */
+    min-height: 50rpx;
+    /* #endif */
+    padding: 10rpx 12rpx;
+    .listItem:active {
+      background-color: rgba(59, 130, 246, 0.08);
+      border-radius: 8rpx;
+    }
+    .listItem {
+      min-height: 36rpx;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .emptyFold {
+        width: 20rpx;
+        height: 20rpx;
+        margin-right: 6rpx;
+      }
+      .objKey {
+        font-size: 22rpx;
+        line-height: 32rpx;
+        color: #7c3aed;
+        lines: 1;
+        overflow: hidden;
+        /* #ifdef H5 */
+        // 限制行数
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        /* #endif */
+      }
+      .objValue {
+        line-height: 32rpx;
+        margin-left: 5rpx;
+        color: #333;
+        font-size: 22rpx;
+        lines: 1;
+        overflow: hidden;
+        /* #ifdef H5 */
+        // 限制行数
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        /* #endif */
+        &.t-number {
+          color: rgb(8, 66, 160);
+        }
+        &.t-boolean {
+          color: rgb(133, 2, 255);
+        }
+        &.t-string {
+          color: rgb(227, 54, 46);
+        }
+        &.t-array {
+          color: rgba(0, 0, 0, 0.5);
+        }
+        &.t-object {
+          color: rgba(0, 0, 0, 0.5);
+        }
+        &.t-undefined {
+          color: rgba(0, 0, 0, 0.2);
+        }
+        &.t-null {
+          color: rgba(0, 0, 0, 0.2);
+        }
+      }
+    }
+  }
+}
+.foldItem {
+  width: 22rpx;
+  height: 22rpx;
+  background-color: #e2e8f0;
+  border-radius: 4rpx;
+  margin-right: 6rpx;
+}
+</style>