oxy-uni-ui 2.1.1 → 2.1.2

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

@@ -0,0 +1,687 @@
+<template>
+  <view class="settingView">
+    <view v-if="loading" class="loading">
+      <text class="loadingText">加载中</text>
+    </view>
+    <template v-else>
+      <subTitleBar :isOpen="exportIsShow" @click="exportIsShow = !exportIsShow" title="导出全部日志" />
+      <template v-if="exportIsShow">
+        <view class="delBtn exportBtn" @click="exportJsonFile">
+          <text class="delBtnText">导出日志文件(.json)</text>
+        </view>
+      </template>
+      <view class="divisionLine"></view>
+
+      <subTitleBar :isOpen="cacheListIsShow" title="清空全部缓存" @click="cacheListIsShow = !cacheListIsShow" />
+      <template v-if="cacheListIsShow">
+        <view v-for="(item, index) in cacheSelectList" :key="index" @click.stop="doSelectCache(index)" class="checkboxItem">
+          <checkbox :value="item.check ? '1' : '0'" :checked="item.check" color="#3b82f6" />
+          <text
+            class="name"
+            :style="{
+              color: item.count ? '#333' : '#888'
+            }"
+          >
+            {{ item.name }}
+          </text>
+
+          <text v-if="item.key == 'file'"></text>
+          <text v-else-if="item.count" class="count">({{ item.count }})</text>
+          <text v-else class="empty">(空)</text>
+        </view>
+        <view class="delBtn" @click="delCache">
+          <text class="delBtnText">清空选中</text>
+        </view>
+      </template>
+      <view class="divisionLine"></view>
+
+      <subTitleBar :isOpen="configIsShow" title="DevTools当前配置参数" @click="configIsShow = !configIsShow" />
+      <view v-if="configIsShow" class="objectAnalysisView">
+        <objectAnalysis :isOpenFirst="true" :data="config" :width="710" />
+      </view>
+
+      <view style="height: 100rpx"></view>
+    </template>
+  </view>
+</template>
+<script>
+import devCache from '../../../core/libs/devCache'
+import devOptions from '../../../core/libs/devOptions'
+import jsonCompress from '../../../core/libs/jsonCompress'
+import appDelDir from '../libs/appDelDir'
+import subTitleBar from '../ui/subTitleBar.vue'
+import objectAnalysis from './objectAnalysis.vue'
+import getRuntimeInfo from '../libs/getRuntimeInfo'
+import devUi from '../../../core/libs/devUi.js'
+export default {
+  components: {
+    subTitleBar,
+    objectAnalysis
+  },
+  data() {
+    return {
+      /**
+       * 是否加载中
+       */
+      loading: false,
+      /**
+       * 缓存列表是否展示
+       */
+      cacheListIsShow: false,
+      /**
+       * 缓存列表
+       */
+      cacheSelectList: [],
+      /**
+       * 配置文件是否显示
+       */
+      configIsShow: false,
+      /**
+       * 当前配置
+       */
+      config: devOptions.getOptions(),
+      /**
+       * 是否显示导出日志按钮
+       */
+      exportIsShow: false
+    }
+  },
+  methods: {
+    /**
+     * 加载页面
+     */
+    async getPage() {
+      let that = this
+      that.loading = true
+      that.cacheSelectList = await that.countCache()
+      that.loading = false
+    },
+    /**
+     * 统计缓存信息
+     */
+    countCache() {
+      let that = this
+      return new Promise(async (yes) => {
+        let cacheSelectList = []
+
+        // dev 工具日志
+        let keys = {
+          errorReport: 'Error错误日志',
+          console: 'Console打印日志',
+          request: 'Request请求日志',
+          logReport: 'Logs日志',
+          uniBus: 'UniBus函数日志'
+        }
+        Object.keys(keys).map((key) => {
+          let logs = devCache.get(key)
+          cacheSelectList.push({
+            name: keys[key],
+            check: logs.length > 0,
+            count: logs.length,
+            key
+          })
+        })
+        // #ifdef H5
+        let indexDBList = await this.getIndexDBList()
+        let cookieLength = document.cookie.split(';').length
+        if (document.cookie == '') {
+          cookieLength = 0
+        }
+        // #endif
+
+        cacheSelectList = cacheSelectList.concat([
+          that.countStorageCache(),
+          // #ifdef H5
+          {
+            key: 'sessionStorage',
+            name: 'SessionStorage临时缓存',
+            check: sessionStorage.length > 0,
+            count: sessionStorage.length
+          },
+          // #endif
+          // #ifdef APP-PLUS
+          {
+            key: 'file',
+            name: 'FileSys本地文件(_doc)',
+            check: false,
+            count: '未知 // TODO'
+          },
+          // #endif
+          // #ifdef MP-WEIXIN
+          {
+            name: 'FileSys本地文件(FileSystemManager)',
+            check: false,
+            key: 'file',
+            count: '未知 // TODO'
+          },
+          // #endif
+          // #ifdef H5
+          {
+            key: 'cookie',
+            name: 'Cookie',
+            check: cookieLength > 0,
+            count: cookieLength
+          },
+          {
+            key: 'IndexDB',
+            name: 'IndexDB',
+            check: indexDBList.length > 0,
+            count: indexDBList.length
+          }
+          // #endif
+        ])
+
+        yes(cacheSelectList)
+      })
+    },
+    /**
+     * 统计本地缓存
+     */
+    countStorageCache() {
+      let n = 0
+      // #ifdef APP-PLUS
+      let keys = plus.storage.getAllKeys()
+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i]
+        if (key.indexOf('devTools_') == 0) {
+          // 忽略以 devTools_ 开头的key
+          continue
+        }
+        n++
+      }
+      // #endif
+      // #ifdef H5
+      for (let i = 0; i < localStorage.length; i++) {
+        let key = localStorage.key(i)
+        if (key.indexOf('devTools_') == 0) {
+          continue
+        }
+        n++
+      }
+      // #endif
+      // #ifdef MP
+      let keyList = devCache.get('storage')
+      if (!keyList) keyList = []
+      for (let i = 0; i < keyList.length; i++) {
+        const key = keyList[i]
+        if (key.indexOf('devTools_') == 0) {
+          continue
+        }
+        n++
+      }
+      // #endif
+      return {
+        key: 'localStorage',
+        name: 'localStorage本地缓存',
+        check: n > 0,
+        count: n
+      }
+    },
+    /**
+     * 获取indexDB列表
+     */
+    getIndexDBList() {
+      return new Promise((yes) => {
+        try {
+          indexedDB.databases().then((list) => {
+            yes(list)
+          })
+        } catch (error) {
+          console.log('getIndexDBList error', error)
+          yes([])
+        }
+      })
+    },
+    /**
+     * 选择清空的缓存项目
+     */
+    doSelectCache(index) {
+      this.cacheSelectList[index].check = !this.cacheSelectList[index].check
+    },
+    /**
+     * 清空缓存
+     */
+    delCache() {
+      let that = this
+
+      let selectedKey = []
+      that.cacheSelectList.map((item) => {
+        if (item.check) {
+          selectedKey.push(item.key)
+        }
+      })
+
+      let keyDelFun = {
+        errorReport() {
+          devCache.clearItem('errorReport')
+        },
+        console() {
+          uni.$emit('devTools_delConsoleAll')
+        },
+        request() {
+          uni.$emit('devTools_delNetworkAll')
+        },
+        logReport() {
+          devCache.clearItem('logReport')
+        },
+        uniBus() {
+          uni.$emit('devTools_delUniBusAll')
+        },
+        localStorage() {
+          // #ifdef APP-PLUS
+          let keys = plus.storage.getAllKeys()
+          for (let i = 0; i < keys.length; i++) {
+            const key = String(keys[i])
+            if (key.indexOf('devTools_') == 0) {
+              continue
+            }
+            uni.removeStorageSync(key)
+          }
+          // #endif
+
+          // #ifdef H5
+          for (let i = 0; i < localStorage.length; i++) {
+            let key = String(localStorage.key(i))
+            if (key.indexOf('devTools_') == 0) {
+              continue
+            }
+            setTimeout(() => {
+              localStorage.removeItem(key)
+            }, i * 2 + 1)
+          }
+          // #endif
+
+          // #ifdef MP
+          let keyList = devCache.get('storage')
+          if (!keyList) keyList = []
+          for (let i = 0; i < keyList.length; i++) {
+            const key = keyList[i]
+            if (key.indexOf('devTools_') == 0) {
+              continue
+            }
+            uni.removeStorageSync(key)
+          }
+          // #endif
+        },
+        sessionStorage() {
+          for (let i = 0; i < sessionStorage.length; i++) {
+            let key = String(sessionStorage.key(i))
+            if (key.indexOf('devTools_') == 0) {
+              continue
+            }
+            sessionStorage.removeItem(key)
+          }
+        },
+        file() {
+          // #ifdef APP-PLUS
+          appDelDir('_doc/')
+          // #endif
+          // #ifdef MP-WEIXIN
+          let fs = wx.getFileSystemManager()
+          fs.rmdir({
+            dirPath: wx.env.USER_DATA_PATH + '/',
+            recursive: true
+          })
+          // #endif
+        },
+        cookie() {
+          let keys = []
+          document.cookie.split(';').forEach((cookieStr) => {
+            const [name, value] = cookieStr.trim().split('=')
+            keys.push(name)
+          })
+          keys.map((k) => {
+            document.cookie = `${k}=;expires=` + new Date(new Date().getTime() + 200).toGMTString() + ';path=/'
+          })
+        },
+        IndexDB() {
+          indexedDB.databases().then((list) => {
+            list.map((item) => {
+              indexedDB.deleteDatabase(item.name)
+            })
+          })
+        }
+      }
+
+      if (selectedKey.length == 0) {
+        return devUi.showToast({
+          title: '请先勾选需要清空的项目!',
+          icon: 'none'
+        })
+      }
+      devUi.showLoading({
+        title: '清空中...',
+        mask: true
+      })
+
+      setTimeout(() => {
+        devUi.hideLoading()
+        devUi.showToast({
+          title: '清空成功！',
+          icon: 'success'
+        })
+        that.getPage()
+      }, 5100)
+
+      selectedKey.map((key) => {
+        keyDelFun[key]()
+      })
+    },
+    /**
+     * 导出日志文件到json
+     */
+    async exportJsonFile() {
+      let that = this
+
+      // #ifdef MP
+      if (1) {
+        devUi.showToast({
+          title: '小程序平台不支持导出日志，建议直接上传至服务器！',
+          icon: 'none'
+        })
+        return
+      }
+      // #endif
+
+      devUi.showLoading({
+        title: '打包中...'
+      })
+
+      try {
+        let devOp = devOptions.getOptions()
+        let waitExportObject = {
+          exportOptions: {
+            version: devOp.version,
+            config: devOp,
+            exportTime: new Date().getTime(),
+            // #ifdef APP-PLUS
+            platform: 'app',
+            // #endif
+            // #ifdef H5
+            platform: 'h5',
+            // #endif
+            // #ifdef MP
+            platform: 'mp',
+            // #endif
+            // #ifdef MP-WEIXIN
+            platform: 'wx',
+            // #endif
+            // #ifdef MP-QQ
+            platform: 'qq'
+            // #endif
+          },
+          error: devCache.get('errorReport'),
+          console: devCache.get('console'),
+          network: devCache.get('request'),
+          logs: devCache.get('logReport'), // ! 运行日志
+          info: await getRuntimeInfo(), // ! 当前运行的系统信息
+          uniBus: devCache.get('uniBus'),
+          busCount: devCache.get('busCount'),
+          pageRouteMap: devCache.get('pageRouteMap'),
+          pageRouteKeyMap: devCache.get('pageRouteKeyMap'),
+          storage: {},
+          sessionStorage: {},
+          cookie: {},
+          ...that.getCache()
+        }
+
+        try {
+          if (that.$store.state) {
+            waitExportObject.vuex = that.$store.state
+          }
+        } catch (error) {}
+        try {
+          if (uni.Pinia) {
+            waitExportObject.pinia = uni.Pinia.getActivePinia().state.value
+          } else if (that.$pinia.state.value) {
+            waitExportObject.pinia = that.$pinia.state.value
+          }
+        } catch (error) {}
+        try {
+          if (getApp().globalData) {
+            waitExportObject.globalData = getApp().globalData
+          }
+        } catch (error) {}
+
+        let data = jsonCompress.safeJsonStringify(waitExportObject)
+        data = JSON.parse(data)
+        data = JSON.stringify(data, null, 2)
+        let t = new Date().getTime()
+        let exportFileName = `export_devtools_log_${t}.json`
+
+        // #ifdef H5
+        const blob = new Blob([data], { type: 'application/json' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.style = 'display: none'
+        a.download = exportFileName
+        a.href = url
+        document.body.appendChild(a)
+        a.click()
+        devUi.showToast({
+          title: '导出成功！',
+          icon: 'success'
+        })
+        // #endif
+
+        // #ifdef APP-PLUS
+        plus.io.resolveLocalFileSystemURL(
+          '_downloads/',
+          (entry) => {
+            entry.getFile(
+              exportFileName,
+              {
+                create: true
+              },
+              (fileEntry) => {
+                fileEntry.createWriter((writer) => {
+                  writer.onwrite = (e) => {
+                    devUi.hideLoading()
+                    devUi.showModal({
+                      title: '导出成功',
+                      content: '文件导出成功！已保存至公共下载路径，文件名称：' + exportFileName
+                    })
+                  }
+                  writer.onerror = () => {
+                    devUi.hideLoading()
+                    devUi.showToast({
+                      title: '日志导出失败！_写入文件失败',
+                      icon: 'none'
+                    })
+                  }
+                  writer.write(data)
+                })
+              }
+            )
+          },
+          (err) => {
+            console.log('err', err)
+            devUi.hideLoading()
+            devUi.showToast({
+              title: '文件保存失败！_打开目录失败',
+              icon: 'none'
+            })
+          }
+        )
+        // #endif
+
+        devUi.hideLoading()
+      } catch (error) {
+        if (error && error.message) {
+          console.log('导出失败！', error.message)
+        } else {
+          console.log('导出失败！', error)
+        }
+
+        devUi.hideLoading()
+        devUi.showToast({
+          title: '导出失败！',
+          icon: 'error'
+        })
+      }
+    },
+    /**
+     * 获取缓存数据
+     */
+    getCache() {
+      let data = {
+        storage: {},
+        sessionStorage: {},
+        cookie: {}
+      }
+
+      // #ifdef APP-PLUS
+      let keys = plus.storage.getAllKeys()
+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i]
+        if (key.indexOf('devTools_') == 0) {
+          // 忽略以 devTools_ 开头的key
+          continue
+        }
+        data.storage[key] = uni.getStorageSync(key)
+      }
+      // #endif
+
+      // #ifdef H5
+
+      for (let i = 0; i < localStorage.length; i++) {
+        let key = localStorage.key(i)
+        if (key.indexOf('devTools_') == 0) {
+          continue
+        }
+        let value = uni.getStorageSync(key)
+        data.storage[key] = value
+      }
+
+      for (let i = 0; i < sessionStorage.length; i++) {
+        let key = sessionStorage.key(i)
+        if (key.indexOf('devTools_') == 0) {
+          continue
+        }
+        let value = sessionStorage.getItem(key)
+        data.sessionStorage[key] = value
+      }
+
+      document.cookie.split(';').forEach((cookieStr) => {
+        const [name, value] = cookieStr.trim().split('=')
+        data.cookie[name] = value
+      })
+      // #endif
+
+      // #ifdef MP
+      let keyList = devCache.get('storage')
+      if (!keyList) keyList = []
+      for (let i = 0; i < keyList.length; i++) {
+        const key = keyList[i]
+        if (key.indexOf('devTools_') == 0) {
+          continue
+        }
+        let value = uni.getStorageSync(key)
+        if (value) {
+          data.storage[key] = value
+        }
+      }
+      // #endif
+
+      return data
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.settingView {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 20rpx;
+  .loading {
+    width: 100%;
+    margin: 10rpx 0;
+    height: 220rpx;
+    border-radius: 16rpx;
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    background: #f8fafc;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    .loadingText {
+      font-size: 24rpx;
+      color: #64748b;
+    }
+  }
+  .divisionLine {
+    width: 100%;
+    margin: 8rpx 0;
+    height: 12rpx;
+    border-radius: 999rpx;
+    background-color: #f1f5f9;
+  }
+  .checkboxItem {
+    display: flex;
+    flex-direction: row;
+    padding: 12rpx 16rpx;
+    width: 100%;
+    box-sizing: border-box;
+    margin-left: 0;
+    margin-bottom: 8rpx;
+    border-radius: 14rpx;
+    border: 1px solid rgba(148, 163, 184, 0.18);
+    background: #fff;
+    box-shadow: 0 2rpx 10rpx rgba(15, 23, 42, 0.04);
+    align-items: center;
+    &:active {
+      background-color: rgba(59, 130, 246, 0.04);
+    }
+    .name {
+      font-size: 24rpx;
+      margin-left: 10rpx;
+      line-height: 32rpx;
+    }
+    .count {
+      font-size: 22rpx;
+      margin-left: 10rpx;
+      color: #3b82f6;
+    }
+    .empty {
+      font-size: 22rpx;
+      margin-left: 10rpx;
+      color: #94a3b8;
+    }
+  }
+  .delBtn {
+    width: 100%;
+    margin-left: 0;
+    border-radius: 14rpx;
+    height: 64rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background-color: #dc2626;
+    margin-top: 14rpx;
+    margin-bottom: 30rpx;
+    &:active {
+      background-color: rgba(220, 38, 38, 0.85);
+    }
+    .delBtnText {
+      font-size: 23rpx;
+      color: #fff;
+    }
+  }
+  .exportBtn {
+    background-color: rgb(59, 130, 246);
+    &:active {
+      background-color: rgba(59, 130, 246, 0.85);
+    }
+  }
+}
+.objectAnalysisView {
+  width: 100%;
+  box-sizing: border-box;
+  margin-left: 0;
+  margin-top: 8rpx;
+  margin-bottom: 20rpx;
+}
+</style>