feat:优化 debug 页

miniprogram/pages/debug/debug.json

@@ -10,6 +10,7 @@
         "van-radio-group": "@vant/weapp/radio-group/index",
         "van-cell": "@vant/weapp/cell/index",
         "van-cell-group": "@vant/weapp/cell-group/index",
-        "van-switch": "@vant/weapp/switch/index"
+        "van-switch": "@vant/weapp/switch/index",
+        "van-field": "@vant/weapp/field/index"
     }
 }

miniprogram/pages/debug/debug.ts

@@ -1,27 +1,38 @@
 Page({
     data: {
-        header: 'wechat',
+        printConfig: {
+            header: 'wechat',
+            appName: '涂鸦丫小程序'
+        },
         enableDebug: false
     },
 
     onLoad() {
-        const header = getApp().getPrintHeader() || 'wechat';
+        const printConfig = getApp().getPrintConfig() || {
+            header: 'wechat',
+            appName: '涂鸦丫小程序'
+        };
         const enableDebug = wx.getStorageSync('enableDebug') || false;
-        this.setData({ header, enableDebug });
+        this.setData({ printConfig, enableDebug });
     },
 
     onChangeHeader(e: WechatMiniprogram.CustomEvent) {
         const header = e.detail.value as PrintHeader;
-        this.setData({ header });
+        this.setData({ printConfig: { ...this.data.printConfig, header } });
     },
 
     onClickHeaderSetting(e: WechatMiniprogram.CustomEvent) {
         const header = e.currentTarget.dataset.name as PrintHeader;
-        this.setData({ header });
+        this.setData({ printConfig: { ...this.data.printConfig, header } });
+    },
+
+    onAppNameChange(e: WechatMiniprogram.CustomEvent) {
+        const appName = e.detail + '';
+        this.setData({ printConfig: { ...this.data.printConfig, appName } });
     },
 
     onConfirm() {
-        getApp().setPrintHeader(this.data.header);
+        getApp().setPrintConfig(this.data.printConfig);
         const enableDebug = this.data.enableDebug;
         wx.setStorageSync('enableDebug', enableDebug);
         wx.setEnableDebug({ enableDebug });

miniprogram/pages/debug/debug.wxml

@@ -1,10 +1,12 @@
 <view class="debug-page">
     <van-cell-group custom-class="debug-wrapper">
         <van-cell
-            title="打印图片Header设置"
+            title="打印图片Header设置111"
             size="large"
             custom-class="centered-title" />
-        <van-radio-group value="{{header}}" bind:change="onChangeHeader">
+        <van-radio-group
+            value="{{printConfig.header}}"
+            bind:change="onChangeHeader">
             <van-cell
                 title="微信小程序头（wechat）（默认）"
                 clickable
@@ -35,6 +37,11 @@
                 <van-radio slot="right-icon" name="minimal" />
             </van-cell>
         </van-radio-group>
+        <van-field
+            label="appName"
+            value=""
+            placeholder="{{printConfig.appName}}"
+            bind:change="onAppNameChange" />
     </van-cell-group>
 
     <van-cell-group custom-class="debug-wrapper">

miniprogram/pages/index/index.less

@@ -85,16 +85,18 @@ page {
 //     border: 1px solid #666;
 // }
 
-.btn-area {
+.bottom-btn-box {
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
-    height: 190rpx;
+    height: 120rpx;
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
+    align-items: center;
     background-color: #fff;
-    box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25);
-    padding-top: 24rpx;
+    box-shadow: 0px -3.9rpx 5.2rpx rgba(0, 0, 0, 0.15);
+    padding: 0 24rpx;
     box-sizing: border-box;
+    border-radius: 16rpx 16rpx 0 0;
 }

miniprogram/pages/index/index.ts

@@ -18,12 +18,21 @@ Page({
         showIntroductionPopup: false,
         showSelectWordPopup: false, // 选择文字弹窗
         env: 'release',
+        isPCDevtool: false,
     },
 
     onLoad() {
         const hasShowIntroduction =
             wx.getStorageSync('hasShowIntroduction') || false;
 
+        // 判断是否在PC端开发工具上运行
+        const systemInfo = wx.getDeviceInfo();
+        if (systemInfo.platform === 'devtools') {
+            this.setData({
+                isPCDevtool: true,
+            });
+        }
+
         if (!hasShowIntroduction) {
             this.setData({
                 cardList: [
@@ -241,13 +250,13 @@ Page({
 
     onShareAppMessage() {
         return {
-            title: '涂鸦丫 - 涂色|识字|画画|打印',
+            title: '涂鸦丫-涂色|识字|画画|打印',
             path: '/pages/index/index',
         };
     },
     onShareTimeline() {
         return {
-            title: '涂鸦丫 - 涂色|识字|画画|打印',
+            title: '涂鸦丫-涂色|识字|画画|打印',
             query: '/pages/index/index',
         };
     },

miniprogram/pages/index/index.wxml

@@ -62,7 +62,10 @@
     </view>
     <view id="previewWrapper" class="wrapper">
         <text class="wrapper-title">预览打印效果</text>
-        <view id="canvasWrapper" class="canvas-wrapper">
+        <view
+            wx:if="{{!isPCDevtool}}"
+            id="canvasWrapper"
+            class="canvas-wrapper">
             <canvas
                 type="2d"
                 id="canvasContent"
@@ -88,11 +91,23 @@
         bind:onClose="closeSelectWordPopup"
         bind:onChange="onChangeWord" />
 </view>
-<view class="btn-area">
+<view class="bottom-btn-box">
     <toy-button
         type="green"
+        flat="{{true}}"
+        bind:click="onShareAppMessage"
+        width="220rpx"
+        height="80rpx"
+        icon="wechat"
+        icon-class-prefix="toy-icon">
+        分享
+    </toy-button>
+    <toy-button
+        type="primary"
+        flat="{{true}}"
         bind:click="exportToPrint"
-        width="680rpx"
+        width="420rpx"
+        height="80rpx"
         disabled="{{cardList.length <= 0}}"
         icon="download"
         icon-class-prefix="toy-icon">