oxy-uni-ui 2.1.0 → 2.1.2

package/devTools/page/components/mixins/animationControl.js

@@ -0,0 +1,91 @@
+// #ifdef APP-PLUS
+const animation = weex.requireModule('animation')
+// #endif
+export default {
+  methods: {
+    /**
+     * 显示面板
+     */
+    panelShow() {
+      let that = this;
+
+      let sys = uni.getSystemInfoSync();
+
+      animation.transition(
+        that.$refs.mask,
+        {
+          styles: {
+            opacity: 1,
+            height: sys.windowHeight + 'px'
+          },
+          duration: 200, //ms
+          timingFunction: 'linear',
+          delay: 0 //ms
+        }
+      )
+
+      let height = Math.ceil(sys.windowHeight * 0.8);
+
+      animation.transition(
+        that.$refs.panel,
+        {
+          styles: {
+            opacity: 1,
+            transform: `transform: translate(0px,${height}px)`
+          },
+          duration: 1, //ms
+          timingFunction: 'linear',
+          delay: 0 //ms
+        },
+        (res) => {
+
+          animation.transition(
+            that.$refs.panel,
+            {
+              styles: {
+                transform: `transform: translate(0px,0px)`
+              },
+              duration: 200, //ms
+              timingFunction: 'linear',
+              delay: 0 //ms
+            }
+          )
+
+        }
+      )
+    },
+    /**
+     * 关闭面板
+     */
+    panelHide() {
+      let that = this;
+
+      animation.transition(
+        that.$refs.mask,
+        {
+          styles: {
+            opacity: 0,
+          },
+          duration: 200, //ms
+          timingFunction: 'linear',
+          delay: 0 //ms
+        }
+      )
+      let height = uni.upx2px(1000);
+      animation.transition(
+        that.$refs.panel,
+        {
+          styles: {
+            transform: `transform: translate(0px,${height}px)`
+          },
+          duration: 200, //ms
+          timingFunction: 'linear',
+          delay: 0 //ms
+        },
+        () => {
+          uni.$emit("devTools_panelHideSuccess")
+        }
+      )
+    },
+  }
+}

package/devTools/page/components/mixins/mp.js

@@ -0,0 +1,83 @@
+export default {
+  data() {
+    return {
+      windowInfo: getWindowInfo(),
+    }
+  },
+  computed: {
+    /**
+     * 小程序和H5的标题
+     */
+    navbarStyle() {
+      let windowInfo = getWindowInfo();
+      return {
+        statusBarHeightPx: windowInfo.system.statusBarHeight + 'px',
+        navbarHeightPx: windowInfo.navbar.bodyHeightPx + 'px',
+      }
+    },
+  },
+  methods: {
+    back() {
+      uni.$dev.hide()
+    }
+  }
+}
+
+
+
+
+
+
+
+
+/**
+ * 获取当前窗口数据
+ * 
+ */
+function getWindowInfo() {
+  let systemInfo = uni.getSystemInfoSync();
+  systemInfo.pixelRatio = Math.round(systemInfo.pixelRatio * 100) / 100;
+
+  let windowInfo = {
+    system: systemInfo,
+    capsule: {
+      bottom: 78,
+      height: 30,
+      left: 283,
+      right: 363,
+      top: 48,
+      width: 0,
+    },
+    navbar: {
+      heightPx: uni.upx2px(100) + systemInfo.statusBarHeight,
+      bodyHeightPx: uni.upx2px(100),
+      bodyWidthPx: systemInfo.windowWidth,
+      capsuleWidthPx: 0,
+      capsuleRightPx: 0,
+    },
+
+    height: systemInfo.windowHeight * (750 / systemInfo.windowWidth),
+    width: 750,
+    statusBarHeight: systemInfo.statusBarHeight * (750 / systemInfo.windowWidth),
+    safeBottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
+    safeBottomRpx: (systemInfo.windowHeight - systemInfo.safeArea.bottom) * (750 / systemInfo.windowWidth),
+    /**
+     * 原生端 底部导航栏高度
+     */
+    footNavbarHeight: uni.upx2px(100) + (systemInfo.windowHeight - systemInfo.safeArea.bottom),
+  }
+
+  // #ifdef MP-QQ || MP-WEIXIN
+  let capsuleInfo = uni.getMenuButtonBoundingClientRect();
+  windowInfo.capsule = capsuleInfo;
+  let capsuleToStatusBarPx = capsuleInfo.top - systemInfo.statusBarHeight; //胶囊和状态栏之间的高度
+  windowInfo.navbar.bodyHeightPx = capsuleInfo.height + (capsuleToStatusBarPx * 2);
+  windowInfo.navbar.heightPx = windowInfo.navbar.bodyHeightPx + systemInfo.statusBarHeight;
+  let capsuleWidthPx = (systemInfo.windowWidth - capsuleInfo.right) * 2 + capsuleInfo.width;
+  windowInfo.navbar.bodyWidthPx = systemInfo.windowWidth - capsuleWidthPx;
+  windowInfo.navbar.capsuleWidthPx = capsuleWidthPx;
+  windowInfo.navbar.capsuleRightPx = capsuleWidthPx - (systemInfo.windowWidth - capsuleInfo.right);
+  // #endif
+
+  return windowInfo;
+}

package/devTools/page/components/ui/btnTabs.vue

@@ -0,0 +1,90 @@
+<template>
+  <view
+    class="btnTabs"
+    v-if="list.length > 0"
+  >
+    <block v-for="(item, index) in list" :key="item.title">
+      <view
+        class="btnTabsItem"
+        :class="{ active: index == value }"
+        @click="$emit('indexChange', index)"
+      >
+        <text
+          class="tabsText"
+          :class="{ active: index == value }"
+        >
+          {{ item.title }}
+        </text>
+      </view>
+      <view
+        v-if="index != list.length - 1"
+        class="splitLine"
+      ></view>
+    </block>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    /**
+     * 按钮列表
+     */
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 当前选中的按钮索引
+     */
+    value: {
+      type: Number,
+      default: 0,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.btnTabs {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 14rpx;
+  overflow: hidden;
+  transform: translateZ(0);
+  height: 54rpx;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  background: #eef2f7;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  .btnTabsItem {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+    height: 54rpx;
+    padding: 0 16rpx;
+    background-color: transparent;
+    &.active {
+      background-color: #fff;
+    }
+    &:active {
+      opacity: 0.92;
+    }
+    .tabsText {
+      font-size: 24rpx;
+      line-height: 54rpx;
+      height: 54rpx;
+      white-space: nowrap;
+      color: #64748b;
+      &.active {
+        color: #2563eb;
+      }
+    }
+  }
+  .splitLine {
+    width: 1px;
+    height: 30rpx;
+    background-color: rgba(15, 23, 42, 0.12);
+  }
+}
+</style>

package/devTools/page/components/ui/codeHisPicker.vue

@@ -0,0 +1,172 @@
+<template>
+  <view
+    class="codeHisPicker"
+    v-if="isShow"
+    @click="close"
+    :style="{
+      height: height + 'px',
+    }"
+  >
+    <view
+      class="codeList"
+      @click.stop
+    >
+      <view class="head">
+        <view class="title">
+          <text class="titleText">历史运行代码：</text>
+        </view>
+        <view class="subTitle">
+          <text class="subTitleText">(保留100条运行记录)</text>
+        </view>
+      </view>
+      <scroll-view
+        scroll-y
+        class="codeScroll"
+      >
+        <view
+          class="hisItem"
+          v-for="(item, index) in list"
+          :key="index"
+          @click="selectedRow(item)"
+        >
+          <text class="hisItemCode">
+            {{ item }}
+          </text>
+        </view>
+        <view style="height: 100rpx"></view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      /**
+       * 是否展示
+       */
+      isShow: false,
+      /**
+       * 筛选的列表
+       */
+      list: [],
+      /**
+       * 默认选中的索引
+       */
+      index: 0,
+      /**
+       * 选中的回调事件
+       */
+      callback: null,
+      /**
+       * 屏幕高度
+       */
+      height: uni.getSystemInfoSync().screenHeight,
+    };
+  },
+  methods: {
+    /**
+     * 展示弹窗
+     */
+    show(list = []) {
+      let that = this;
+      that.index = 0;
+      that.list = list;
+      that.isShow = true;
+      return new Promise((yes) => {
+        that.callback = yes;
+      });
+    },
+    /**
+     * 选择改变事件
+     */
+    pickerChange(e) {
+      that.callback = "";
+      console.log("e", e);
+    },
+    /**
+     * 关闭弹窗
+     */
+    close() {
+      this.isShow = false;
+    },
+    /**
+     * 选择单行代码
+     */
+    selectedRow(row) {
+      this.callback(row);
+      this.close();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.codeHisPicker {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 750rpx;
+  background-color: rgba(0, 0, 0, 0.3);
+  /* #ifndef APP-PLUS */
+  backdrop-filter: blur(1px);
+  /* #endif */
+  display: flex;
+  flex-direction: column-reverse;
+  z-index: 999;
+  .codeList {
+    width: 750rpx;
+    border-radius: 20rpx 20rpx 0 0;
+    background-color: #fff;
+    .head {
+      padding: 20rpx;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      .title {
+        .titleText {
+          font-size: 24rpx;
+          line-height: 28rpx;
+          color: #333;
+        }
+      }
+      .subTitle {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        .subTitleText {
+          font-size: 20rpx;
+          line-height: 28rpx;
+          color: #777;
+        }
+      }
+    }
+    .codeScroll {
+      height: 750rpx;
+      width: 750rpx;
+      .hisItem {
+        width: 750rpx;
+        padding: 10rpx 20rpx;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        .hisItemCode {
+          font-size: 20rpx;
+          color: #333;
+          line-height: 26rpx;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          /* #ifdef H5 */
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          /* #endif */
+          lines: 3;
+        }
+      }
+      .hisItem:active {
+        background-color: rgba(0, 0, 0, 0.03);
+      }
+    }
+  }
+}
+</style>

package/devTools/page/components/ui/h5Cell.vue

@@ -0,0 +1,13 @@
+<template>
+  <view><slot></slot></view>
+</template>
+<script>
+export default {};
+</script>
+<style scoped>
+view {
+  width: 100%;
+  display: block;
+  box-sizing: border-box;
+}
+</style>

package/devTools/page/components/ui/menuBtn.vue

@@ -0,0 +1,94 @@
+<template>
+  <view>
+    <view
+      class="menuBtn"
+      v-if="list.length > 0"
+      @click="showMenu"
+    >
+      <text class="menuText">{{ title }}</text>
+      <text class="menuText">{{ list[value] ? list[value].title : "" }}</text>
+      <image
+        src="@/devTools/page/static/menu.png"
+        class="menuIcon"
+      />
+    </view>
+  </view>
+</template>
+<script>
+import devUi from "../../../core/libs/devUi.js";
+
+export default {
+  props: {
+    /**
+     * 按钮列表
+     */
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 当前选中的按钮索引
+     */
+    value: {
+      type: Number,
+      default: 0,
+    },
+    /**
+     * 标题
+     */
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  methods: {
+    /**
+     * 展示菜单
+     */
+    async showMenu() {
+      const list = this.list.map((item) => ({
+        title: String(item.title || ""),
+        msg: item.msg ? String(item.msg) : "",
+      }));
+
+      const res = await devUi.showActionSheet({
+        itemList: list,
+        itemColor: "#334155",
+        selectedIndex: this.value,
+        selectedColor: "#2563eb",
+      });
+
+      if (res && typeof res.tapIndex === "number" && res.tapIndex > -1) {
+        this.$emit("indexChange", res.tapIndex);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.menuBtn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: 14rpx;
+  height: 54rpx;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  padding: 0 14rpx;
+  background-color: #fff;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  &:active {
+    background-color: rgba(59, 130, 246, 0.10);
+  }
+  .menuText {
+    font-size: 24rpx;
+    line-height: 54rpx;
+    color: #475569;
+  }
+  .menuIcon {
+    margin-left: 10rpx;
+    width: 30rpx;
+    height: 30rpx;
+  }
+}
+</style>

package/devTools/page/components/ui/mobileSwiperScroll.vue

@@ -0,0 +1,74 @@
+<template>
+  <view class="mobileSwiperScroll">
+    <scroll-view
+      class="mobileSwiperScrollView"
+      scroll-y
+      :style="{
+        height: scrollHeight + 'px',
+      }"
+      :scroll-top="scrollTop"
+    >
+      <slot
+        :item="tabList[tabIndex]"
+        :index="tabIndex"
+      ></slot>
+    </scroll-view>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    /**
+     * 分类索引
+     */
+    tabIndex: {
+      type: Number,
+      default: 0,
+    },
+    /**
+     * tab列表
+     */
+    tabList: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 滚动高度
+     */
+    scrollHeight: {
+      type: Number,
+      default: 1000,
+    },
+  },
+  data() {
+    return {
+      /**
+       * 滚动位置
+       */
+      scrollTop: 0,
+    };
+  },
+  methods: {
+    /**
+     * 滚动到列表底部
+     */
+    scrollToBottom() {
+      this.scrollTop = 999999999 + Math.random();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.mobileSwiperScroll {
+  width: 100%;
+  overflow-x: hidden;
+}
+
+.mobileSwiperScrollView {
+  width: 100%;
+}
+
+.mobileSwiperScrollView ::v-deep .uni-scroll-view-content {
+  width: 100%;
+}
+</style>

package/devTools/page/components/ui/requestSpeedLimit.vue

@@ -0,0 +1,52 @@
+<template>
+  <view>
+    <MenuBtn
+      :list="typeList"
+      :value="index"
+      @indexChange="change"
+      title="网速:"
+    />
+  </view>
+</template>
+<script>
+import MenuBtn from "./menuBtn.vue";
+export default {
+  components: {
+    MenuBtn,
+  },
+  data() {
+    return {
+      /**
+       * 弱网模拟状态
+       */
+      typeList: [
+        { title: "不限", type: "", msg: "正常响应请求" },
+        { title: "2G龟速", type: "2g", msg: "随机延迟30~60秒后响应" },
+        { title: "3G慢速", type: "3g-", msg: "随机延迟10~30秒后响应" },
+        { title: "3G略快", type: "3g", msg: "随机延迟3~10秒后响应" },
+        { title: "4G弱网", type: "4g", msg: "随机延迟0.5~3秒后响应" },
+      ],
+      /**
+       * 当前选中的索引
+       */
+      index: 0,
+    };
+  },
+  mounted() {
+    let cache = uni.getStorageSync("devtools_uniResLimitType");
+    let index = this.typeList.findIndex((x) => x.type == cache);
+    if (index == -1) index = 0;
+    this.index = index;
+  },
+  methods: {
+    /**
+     * 选项发生改变事件
+     */
+    change(index) {
+      uni.setStorageSync("devtools_uniResLimitType", this.typeList[index].type);
+      this.index = index;
+    },
+  },
+};
+</script>
+<style lang="scss"></style>