oxy-uni-ui 2.1.1 → 2.1.2

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

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