oxy-uni-ui 2.1.1 → 2.1.2

package/oxy-dev-tools/page/components/mixins/animationControl.js

@@ -0,0 +1,80 @@
+// #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/oxy-dev-tools/page/components/mixins/mp.js

@@ -0,0 +1,76 @@
+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/oxy-dev-tools/page/components/ui/btnTabs.vue

@@ -0,0 +1,77 @@
+<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/oxy-dev-tools/page/components/ui/codeHisPicker.vue

@@ -0,0 +1,161 @@
+<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/oxy-dev-tools/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/oxy-dev-tools/page/components/ui/menuBtn.vue

@@ -0,0 +1,87 @@
+<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="../../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.1);
+  }
+  .menuText {
+    font-size: 24rpx;
+    line-height: 54rpx;
+    color: #475569;
+  }
+  .menuIcon {
+    margin-left: 10rpx;
+    width: 30rpx;
+    height: 30rpx;
+  }
+}
+</style>

package/oxy-dev-tools/page/components/ui/mobileSwiperScroll.vue

@@ -0,0 +1,71 @@
+<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/oxy-dev-tools/page/components/ui/requestSpeedLimit.vue

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

package/oxy-dev-tools/page/components/ui/requestTimeoutMock.vue

@@ -0,0 +1,50 @@
+<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: '5%', type: '5', msg: '随机5%的概率请求响应超时或报错' },
+        { title: '10%', type: '10', msg: '随机10%的概率请求响应超时或报错' },
+        { title: '30%', type: '30', msg: '随机30%的概率请求响应超时或报错' },
+        { title: '50%', type: '50', msg: '随机50%的概率请求响应超时或报错' },
+        { title: '70%', type: '70', msg: '随机70%的概率请求响应超时或报错' },
+        { title: '90%', type: '90', msg: '随机90%的概率请求响应超时或报错' },
+        { title: '100%', type: '100', msg: '所有请求均响应超时或报错' }
+      ],
+      /**
+       * 当前选中的索引
+       */
+      index: 0
+    }
+  },
+  mounted() {
+    let cache = uni.getStorageSync('devtools_uniResTimeout')
+    let index = this.typeList.findIndex((x) => x.type == cache)
+    if (index == -1) index = 0
+    this.index = index
+  },
+  methods: {
+    /**
+     * 选项发生改变事件
+     */
+    change(index) {
+      uni.setStorageSync('devtools_uniResTimeout', this.typeList[index].type)
+      this.index = index
+    }
+  }
+}
+</script>
+<style lang="scss"></style>