小程序 debugPanel

app/components/func/debugPanel/index.json

@@ -1,6 +1,7 @@
 {
     "component": true,
     "usingComponents": {
-        "t-message": "../../miniprogram_npm/tdesign/message/message"
+        "t-button": "../../../miniprogram_npm/tdesign/button/button",
+        "t-popup": "../../../miniprogram_npm/tdesign/popup/popup"
     }
 }

app/components/func/debugPanel/index.less

@@ -1,6 +1,34 @@
-.btn-container {
+
+.btn-popup {
+  position: fixed !important;
+  bottom: constant(safe-area-inset-bottom) !important;
+  /* 兼容 iOS < 11.2 */
+  bottom: env(safe-area-inset-bottom) !important;
+  right: 45%;
+}
+
+.block {
+  width: 176rpx;
+  height: 176rpx;
+  background: #fff;
+  color: #333;
+  display: flex;
+}
+
+.block--bottom {
+  width: 100vw;
+  height: 35vh;
+  border-top-left-radius: 16rpx;
+  border-top-right-radius: 16rpx;
+}
+
+.btn-box {
   display: flex;
   flex-direction: row;
+  padding: 32rpx;
   flex-wrap: wrap;
-  padding: 40rpx;
+}
+.btn-item {
+  margin-top: 32rpx;
+  margin-right: 32rpx;
 }

app/components/func/debugPanel/index.ts

@@ -12,10 +12,18 @@ export default OakComponent({
         printRunningTree() {
             console.log(this.features.runningTree.getRoot());
         },
-        setVisible(visible) {
+        setVisible(visible: boolean) {
             this.setState({
                 visible,
             });
         },
+        handlePopup() {
+            this.setVisible(true);
+        },
+        onVisibleChange(e: any) {
+            this.setData({
+                visible: e.detail.visible,
+            });
+        },
     },
 });

app/components/func/debugPanel/index.wxml

@@ -1,2 +1,10 @@
-
-<t-message id="t-message" />
+<t-button bind:tap="handlePopup" t-class="btn-popup" variant="text" theme="primary" icon="chevron-up" shape="circle"></t-button>
+<t-popup visible="{{visible}}" bind:visible-change="onVisibleChange" placement="bottom" close-btn="true">
+    <view class="block block--bottom">
+        <view class="btn-box">
+            <t-button bind:tap="printRunningTree" t-class="btn-item" theme="primary" size="small" shape="circle">R</t-button>
+            <t-button bind:tap="printDebugStore" t-class="btn-item" theme="primary" size="small" shape="circle">S</t-button>
+            <t-button bind:tap="printCachedStore" t-class="btn-item" theme="primary" size="small" shape="circle">C</t-button>
+        </view>
+    </view>
+</t-popup>