oxy-uni-ui 2.1.0 → 2.1.2

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

@@ -0,0 +1,315 @@
+<template>
+  <view>
+    <subTitleBar
+      :isOpen="isShowSetting"
+      @click="changeStatus('isShowSetting')"
+      title="DevTools扩展配置项"
+    />
+    <template v-if="isShowSetting">
+      <!-- #ifdef APP-PLUS || H5 -->
+      <view class="settingItem">
+        <view class="settingHead">
+          <text class="settingTitle">页面自动注入Eruda调试工具</text>
+          <text class="settingSubtitle">(强大的节点选择等工具；重启APP后生效)</text>
+        </view>
+        <switch
+          :checked="isInjectEruda"
+          @change="switchChange($event, 'isInjectEruda')"
+          color="#3b82f6"
+        />
+      </view>
+      <view class="settingItem">
+        <view class="settingHead">
+          <text class="settingTitle">页面自动注入vConsole调试工具</text>
+          <text class="settingSubtitle">(腾讯开源的h5调试工具；重启APP后生效)</text>
+        </view>
+        <switch
+          :checked="isInjectVConsole"
+          @change="switchChange($event, 'isInjectVConsole')"
+          color="#3b82f6"
+        />
+      </view>
+      <!-- #endif -->
+      <!-- #ifdef MP-WEIXIN -->
+      <view class="settingItem">
+        <view class="settingHead">
+          <text class="settingTitle">小程序VConsole开关</text>
+          <text class="settingSubtitle">设置是否打开调试开关。此开关对正式版也能生效。</text>
+        </view>
+        <switch
+          :checked="isOpenMpDevTag"
+          @change="switchChange($event, 'isOpenMpDevTag')"
+          color="#3b82f6"
+        />
+      </view>
+      <!-- #endif -->
+    </template>
+    <subTitleBar
+      :isOpen="isShowBtnPanel"
+      @click="changeStatus('isShowBtnPanel')"
+      title="常用工具"
+    />
+    <view
+      v-if="isShowBtnPanel"
+      class="btnPanel"
+    >
+      <!-- #ifdef APP-PLUS || H5 -->
+      <view
+        class="btnItem btn-def"
+        @click="restart"
+      >
+        <text class="btnText">重启APP</text>
+      </view>
+      <!-- #endif -->
+
+      <view
+        class="btnItem btn-def"
+        @click="goPage"
+      >
+        <text class="btnText">跳转指定页面</text>
+      </view>
+
+      <view
+        class="btnItem btn-def"
+        @click="$emit('goOpenRequest')"
+      >
+        <text class="btnText">发起网络请求</text>
+      </view>
+
+      <view
+        class="btnItem btn-red"
+        @click="delLocalStorage"
+      >
+        <text class="btnText">清空localStorage缓存</text>
+      </view>
+    </view>
+    <subTitleBar
+      :isOpen="isShowDiyTools"
+      @click="changeStatus('isShowDiyTools')"
+      title="自定义Tools"
+    />
+    <tools
+      v-if="isShowDiyTools"
+      ref="tools"
+    />
+  </view>
+</template>
+<script>
+import devCache from "../../../core/libs/devCache";
+import tools from "../../../tools.vue";
+import subTitleBar from "../ui/subTitleBar.vue";
+import devUi from "../../../core/libs/devUi.js";
+export default {
+  components: {
+    tools,
+    subTitleBar,
+  },
+  data() {
+    return {
+      /**
+       * 是否显示系统工具栏
+       */
+      isShowSetting: false,
+      /**
+       * 是否自动注入Eruda
+       */
+      isInjectEruda: uni.getStorageSync("devTools_isInjectEruda") == "yes",
+      /**
+       * 是否自动注入vConsole
+       */
+      isInjectVConsole: uni.getStorageSync("devTools_isInjectVConsole") == "yes",
+      /**
+       * 是否显示 用户自定义tools
+       */
+      isShowDiyTools: true,
+      /**
+       * 是否打开小程序调试工具
+       */
+      isOpenMpDevTag: uni.getStorageSync("devTools_isOpenMpDevTag") == "yes",
+      /**
+       * 常用工具栏开关
+       */
+      isShowBtnPanel: true,
+    };
+  },
+  methods: {
+    /**
+     * 更改选中状态
+     */
+    changeStatus(key) {
+      this[key] = !this[key];
+    },
+    /**
+     * 开关选择器改变事件
+     */
+    switchChange(e, key) {
+      let status = e.detail.value;
+      this[key] = status;
+      uni.setStorageSync("devTools_" + key, status ? "yes" : "no");
+
+      if (key == "isOpenMpDevTag") {
+        wx.setEnableDebug({
+          enableDebug: status,
+        });
+      }
+    },
+    /**
+     * 重启APP
+     */
+    restart() {
+      // #ifdef APP-PLUS
+      plus.runtime.restart();
+      // #endif
+      // #ifdef H5
+      location.href = "/";
+      // #endif
+    },
+    /**
+     * 跳转指定页面
+     */
+    goPage() {
+      uni.$emit("devTools_showRouteDialog");
+    },
+    /**
+     * 清空LocalStorage
+     */
+    delLocalStorage() {
+      devUi.showModal({
+        title: "操作确认",
+        content: "是否确认清空LocalStorage缓存？",
+        success(res) {
+          if (res.confirm) {
+            // #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
+            devUi.showToast({
+              icon: "success",
+              title: "清空成功！",
+            });
+          }
+        },
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.padding-sm {
+  padding: 20rpx;
+}
+.settingItem:active {
+  background-color: rgba(15, 23, 42, 0.04);
+}
+.settingItem {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: calc(100% - 40rpx);
+  box-sizing: border-box;
+  margin: 10rpx 20rpx;
+  padding: 14rpx 16rpx;
+  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);
+  .settingHead {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    .settingTitle {
+      font-size: 24rpx;
+      line-height: 34rpx;
+      color: #0f172a;
+    }
+    .settingSubtitle {
+      margin-top: 4rpx;
+      font-size: 21rpx;
+      line-height: 30rpx;
+      color: #64748b;
+    }
+  }
+}
+.btnPanel {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding-left: 20rpx;
+  padding-right: 20rpx;
+  padding-top: 12rpx;
+
+  .btnItem {
+    margin-right: 10rpx;
+    margin-bottom: 10rpx;
+    border-radius: 12rpx;
+    /* #ifndef APP-PLUS */
+    min-width: 160rpx;
+    /* #endif */
+    height: 58rpx;
+    border: 1px solid #e2e8f0;
+    background-color: #fff;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 0 16rpx;
+    .btnText {
+      font-size: 22rpx;
+      line-height: 30rpx;
+      color: #334155;
+    }
+  }
+  .btn-red:active {
+    background-color: rgba(220, 38, 38, 0.85);
+  }
+  .btn-red {
+    border: 1px solid #dc2626;
+    background-color: #dc2626;
+    .btnText {
+      color: #fff;
+    }
+  }
+  .btn-def:active {
+    background-color: rgba(15, 23, 42, 0.08);
+  }
+  .btn-def {
+    border: 1px solid #e2e8f0;
+    background-color: #f8fafc;
+    .btnText {
+      color: #334155;
+    }
+  }
+}
+</style>