oxy-uni-ui 2.1.0 → 2.1.2

package/devTools/page/components/listItem/setting.vue

@@ -0,0 +1,734 @@
+<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>