dlhandsome · Fang0408 · Nov 27, 2021 · Nov 27, 2021
diff --git a/packages/runtime/core/src/api/init.js b/packages/runtime/core/src/api/init.js
@@ -3,7 +3,7 @@ import ErrorPlugin from '@we-debug/plugin-error';
 import RouterPlugin from '@we-debug/plugin-router';
 import LauncherPlugin from '@we-debug/plugin-launcher';
 import networkPlugin from '@we-debug/plugin-network';
-import uiCheckPlugin from '@we-debug/plugin-ui-check/plugin';
+import uiCheckPlugin from '@we-debug/plugin-ui-check';
 import merge from 'deepmerge';
 
 /**

diff --git a/packages/runtime/miniprogram/src/index/index.json b/packages/runtime/miniprogram/src/index/index.json
@@ -11,6 +11,6 @@
     "w-cell": "../cell/index",
     "w-rule": "../rule/index",
     "w-badge": "../badge/index",
-    "w-ui-check": "@we-debug/plugin-ui-check/index"
+    "w-ui-check": "../ui-check/index"
   }
 }
diff --git a/packages/runtime/miniprogram/src/less/ui-check.less b/packages/runtime/miniprogram/src/less/ui-check.less
@@ -0,0 +1,77 @@
+@import "./_variable.less";
+
+.@{prefix}-ui-check {
+  position: fixed;
+  z-index: @zindex-ui-check;
+
+  &__operation-bar {
+    display: flex;
+    position: fixed;
+    justify-content: space-between;
+    left: 20rpx;
+    width: 710rpx;
+    height: 196rpx;
+    padding: 0 @padding-sm;
+    box-sizing: border-box;
+    background-color: fade(#000, 85%);
+    align-items: center;
+    border-radius: @border-radius-md;
+  }
+
+  &__operation-bar-hd {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 500rpx;
+    height: 160rpx;
+    align-items: left;
+  }
+
+  &__hd-title {
+    color: fade(@white, 50%);
+    padding-top: @border-radius-md;
+    padding-left: @border-radius-md;
+  }
+
+  &__hd-slider {
+    width: 100%;
+  }
+
+  &__operation-bar-ft {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 160rpx;
+    align-items: center;
+  }
+
+  &__ft-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 72rpx;
+    background-color: fade(#fff, 9%);
+
+    &.active{
+      opacity: @active-opacity;
+    }
+
+    .triangle {
+      width: 16rpx;
+      height: 28rpx;
+      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAABABAMAAACEvhjaAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAVUExURUdwTMzMzP///83NzdjY2M/Pz8zMzF/cqpMAAAAGdFJOUwCmA8UNSje3QCEAAABFSURBVDjLY2BgCFRgQAesaUIYYmFpiQoYytIwFDIDxdAVsphhUeg8qnBUoRBhMSx6R5WNDGXYyhJsZQ62sglrGYZZ1gEA+XNnGTClJnIAAAAASUVORK5CYII=');
+      background-repeat: no-repeat;
+      background-size: 16rpx 28rpx;
+
+      &.up {
+        transform: rotate(-90deg)
+      }
+
+      &.down {
+        transform: rotate(90deg)
+      }
+    }
+  }
+}
diff --git a/packages/runtime/miniprogram/src/ui-check/index.js b/packages/runtime/miniprogram/src/ui-check/index.js
@@ -0,0 +1,202 @@
+import { Debug, prefix, closeBadge, MoveAreaHelper } from '@we-debug/plugin-ui-check';
+
+let _timer;
+let _pixelTimer;
+let _y = 0;
+let _maHelper;
+// 滑块容器的头尾预留高度
+const reservedDistance = 150;
+
+Component({
+  properties: {},
+  data: {
+    safeArea: null,
+    url: '',
+    moveArea: {
+      // 滑块容器的头尾预留高度
+      reservedDistance,
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0
+    },
+    moveView: {
+      y: _y,
+      width: 0,
+      height: 0,
+      opacity: 0.3,
+      direction: 'vertical'
+    },
+    operationBar: {
+      visible: false,
+      slider: {
+        min: 0,
+        max: 100,
+        blockColor: 'rgba(255,255,255,0.09)',
+        activeColor: '#ffffff',
+        backgroundColor: 'rgba(255,255,255,0.25)'
+      }
+    }
+  },
+  methods: {
+    badges({ show = false } = {}) {
+      const badges = Debug.getBadge();
+      badges
+        .filter(badge => badge !== closeBadge)
+        .forEach(badge => {
+          badge.emit({ show });
+        });
+    },
+    closeBadge({ show = false } = {}) {
+      closeBadge.emit({ show });
+    },
+    getMaHelper() {
+      if (!_maHelper) {
+        _maHelper = new MoveAreaHelper(Debug);
+      }
+      return _maHelper;
+    },
+    initSafeArea() {
+      const maHelper = this.getMaHelper();
+      const { safeArea } = maHelper.systemInfo;
+
+      this.setData({ safeArea });
+    },
+    initMoveArea() {
+      const maHelper = this.getMaHelper();
+
+      this.setData({
+        // 滑块容器的头尾预留高度
+        reservedDistance,
+        top: maHelper.getTop(reservedDistance),
+        left: maHelper.getLeft(),
+        width: maHelper.getWidth(),
+        height: maHelper.getHeight(reservedDistance)
+      });
+    },
+    imgLoad(e) {
+      const maHelper = this.getMaHelper();
+
+      const { width, height } = e.detail;
+      const safeAreaWidth = this.data.safeArea.width;
+      const ratio = safeAreaWidth / width;
+      const moveViewHeight = height * ratio;
+
+      const deltaHeight = moveViewHeight - maHelper.systemInfo.windowHeight;
+      const newReservedDistance = deltaHeight > reservedDistance ? deltaHeight : reservedDistance;
+
+      this.setData({
+        'moveView.width': safeAreaWidth,
+        'moveView.height': moveViewHeight,
+        'moveArea.top': maHelper.getTop(newReservedDistance),
+        'moveArea.height': maHelper.getHeight(newReservedDistance)
+      });
+    },
+    removeImg() {
+      this.setData({ url: '' });
+    },
+    addImg(url) {
+      this.setData({ url });
+    },
+    slideChanging(e) {
+      const opacity = e.detail.value;
+      this.setData({
+        'moveView.opacity': opacity / 100
+      });
+      this.toggleOperationBar({ immediate: false });
+    },
+    showOperationBar() {
+      this.setData({
+        'operationBar.visible': true
+      });
+    },
+    hideOperationBar() {
+      this.setData({
+        'operationBar.visible': false
+      });
+    },
+    moveViewChange(e) {
+      // 更新偏移量
+      _y = e.detail.y;
+    },
+    toggleOperationBar({ immediate = true } = {}) {
+      if (!this.data.operationBar.visible) {
+        this.showOperationBar();
+      } else {
+        immediate && this.hideOperationBar();
+      }
+      clearTimeout(_timer);
+      _timer = setTimeout(() => {
+        this.hideOperationBar();
+      }, 5000);
+    },
+    moveViewRising() {
+      clearTimeout(_pixelTimer);
+      this.setData({
+        'moveView.y': --_y
+      });
+      this.toggleOperationBar({ immediate: false });
+      // 60fps
+      _pixelTimer = setTimeout(() => {
+        this.moveViewRising();
+      }, 16);
+    },
+    moveViewFalling() {
+      clearTimeout(_pixelTimer);
+      this.setData({
+        'moveView.y': ++_y
+      });
+      this.toggleOperationBar({ immediate: false });
+      // 60fps
+      _pixelTimer = setTimeout(() => {
+        this.moveViewFalling();
+      }, 16);
+    },
+    increaseTouchstart() {
+      this.moveViewRising();
+    },
+    increaseTouchend() {
+      clearTimeout(_pixelTimer);
+    },
+    decreaseTouchstart() {
+      this.moveViewFalling();
+    },
+    decreaseTouchend() {
+      clearTimeout(_pixelTimer);
+    },
+    init(url) {
+      this.initSafeArea();
+      this.initMoveArea();
+      this.addImg(url);
+      this.badges({ show: false });
+      this.closeBadge({ show: true });
+      Debug.store.event.emit('debug:mask:hide-modal');
+    },
+    destory() {
+      this.removeImg();
+      this.badges({ show: true });
+      this.closeBadge({ show: false });
+    },
+    addListeners() {
+      if (Debug) {
+        Debug.store.event.on(prefix + 'init', this.init.bind(this));
+        Debug.store.event.on(prefix + 'destory', this.destory.bind(this));
+      } else {
+        console.warn(`[we-debug]: please init before component attached`);
+      }
+    },
+
+    removeListeners() {
+      if (Debug) {
+        Debug.store.event.off(prefix + 'init', this.init.bind(this));
+        Debug.store.event.off(prefix + 'destory', this.destory.bind(this));
+      }
+    }
+  },
+  attached() {
+    this.addListeners();
+  },
+  detached() {
+    this.removeListeners();
+  }
+});
diff --git a/packages/runtime/miniprogram/src/ui-check/index.json b/packages/runtime/miniprogram/src/ui-check/index.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
diff --git a/packages/runtime/miniprogram/src/ui-check/index.less b/packages/runtime/miniprogram/src/ui-check/index.less
@@ -0,0 +1 @@
+@import '../less/ui-check.less';
diff --git a/packages/runtime/miniprogram/src/ui-check/index.wxml b/packages/runtime/miniprogram/src/ui-check/index.wxml
@@ -0,0 +1,42 @@
+<movable-area class="w-ui-check" wx:if="{{url}}" style="top: {{moveArea.top}}px; left: {{moveArea.left}}px; width: {{moveArea.width}}px; height: {{moveArea.height}}px;">
+  <movable-view direction="{{moveView.direction}}"
+    y="{{moveView.y}}"
+    animation="{{false}}"
+    out-of-bounds="{{true}}"
+    inertia="{{true}}"
+    bindchange="moveViewChange"
+    bindtap="toggleOperationBar"
+    style="width: {{moveView.width}}px; height: {{moveView.height}}px;">
+    <image src="{{url}}" style="width: {{safeArea.width}}px; opacity: {{moveView.opacity}}" mode="widthFix" bindload="imgLoad"/>
+  </movable-view>
+  <block wx:if="{{operationBar.visible}}">
+    <view class="w-ui-check__operation-bar" style="top: {{safeArea.height - safeArea.top - 100 }}px;">
+      <view class="w-ui-check__operation-bar-hd">
+        <view class="w-ui-check__hd-title">UI 透明度</view>
+        <slider class="w-ui-check__hd-slider"
+          show-value
+          bindchanging="slideChanging"
+          value="{{moveView.opacity * 100}}"
+          min="{{operationBar.slider.min}}"
+          max="{{operationBar.slider.max}}"
+          block-color="{{operationBar.slider.blockColor}}"
+          activeColor="{{operationBar.slider.activeColor}}"
+          backgroundColor="{{operationBar.slider.backgroundColor}}" />
+      </view>
+      <view class="w-ui-check__operation-bar-ft">
+        <view class="w-ui-check__ft-btn"
+          hover-class="active"
+          catchtouchstart="increaseTouchstart"
+          catchtouchend="increaseTouchend">
+          <view class="triangle up"></view>
+        </view>
+        <view class="w-ui-check__ft-btn"
+          hover-class="active"
+          catchtouchstart="decreaseTouchstart"
+          bindtouchend="decreaseTouchend">
+          <view class="triangle down"></view>
+        </view>
+      </view>
+    </view>
+  </block>
+</movable-area>
diff --git a/packages/runtime/plugin-ui-check/package.json b/packages/runtime/plugin-ui-check/package.json
@@ -2,7 +2,6 @@
   "name": "@we-debug/plugin-ui-check",
   "version": "0.17.0",
   "description": "we-debug ui-check plugin",
-  "miniprogram": "dist",
   "main": "dist/plugin.js",
   "publishConfig": {
     "access": "public"

diff --git a/packages/runtime/plugin-ui-check/src/plugin.js b/packages/runtime/plugin-ui-check/src/plugin.js
@@ -1,3 +1,7 @@
+import { MoveAreaHelper } from './utils';
+
+export { MoveAreaHelper };
+
 const uiCheckPlugin = {};
 
 export const prefix = 'debug:ui-check:';