feat:优化 debug 页

miniprogram/app.json

@@ -26,7 +26,7 @@
     },
     "tabBar": {
         "color": "#323232",
-        "selectedColor": "#FCD200",
+        "selectedColor": "#F5BC00",
         "backgroundColor": "#fff",
         "list": [
             {

miniprogram/app.ts

@@ -1,15 +1,22 @@
 // app.ts
 App<IAppOption>({
     globalData: {
-        env: 'release'
+        env: 'release',
+        printConfig: {
+            header: 'wechat',
+            appName: '涂鸦丫小程序'
+        }
     },
     onLaunch() {
         const accountInfo = wx.getAccountInfoSync();
         const env = accountInfo.miniProgram.envVersion || 'release';
         this.globalData.env = env;
         if (env !== 'release') {
-            const printHeader = wx.getStorageSync('printHeader') || 'wechat';
+            const printConfig = wx.getStorageSync('printConfig') || {
-            this.globalData.printHeader = printHeader;
+                header: 'wechat',
+                appName: '涂鸦丫小程序'
+            };
+            this.globalData.printConfig = printConfig;
         }
     },
 
@@ -21,13 +28,15 @@ App<IAppOption>({
         // 小程序隐藏时的生命周期  
     },
 
-    getPrintHeader(): PrintHeader {
+    getPrintConfig(): PrintConfig {
-        return this.globalData.printHeader || 'wechat';
+        return this.globalData.printConfig || {
+            header: 'wechat',
+            appName: '涂鸦丫小程序'
+        };
     },
 
-    setPrintHeader(header: PrintHeader) {
+    setPrintConfig(config: PrintConfig) {
-        header = header || 'wechat';
+        this.globalData.printConfig = config;
-        this.globalData.printHeader = header;
+        wx.setStorageSync('printConfig', config);
-        wx.setStorageSync('printHeader', header);
     }
 });

miniprogram/assets/fonts/iconfont.less

@@ -85,3 +85,7 @@
 .toy-icon-wechat-o:before {
   content: "\e727";
 }
+
+.toy-icon-wechat:before {
+  content: "\e727";
+}

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: {
+        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);
+    box-shadow: 0px -3.9rpx 5.2rpx rgba(0, 0, 0, 0.15);
-    padding-top: 24rpx;
+    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: [

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">

miniprogram/service/textDrawService.ts

@@ -80,10 +80,17 @@ class TextDrawService {
         this.currentY = 0;
         this.colors = ['#000'];
         this.characters = ['王'];
+        this.setPrintConfig();
+    }
+
+    setPrintConfig() {
+        const printConfig = getApp().getPrintConfig();
+        this.headerType = printConfig.header;
+        this.options.appName = printConfig.appName;
     }
 
     draw(list: Array<{ color: string; word: string }>) {
-        this.headerType = getApp().getPrintHeader() || 'wechat';
+        this.setPrintConfig();
 
         this.colors = list.map((item) => item.color || '#000');
         this.characters = list.map((item) => item.word || '日');

miniprogram/ui/button/button.less

@@ -88,6 +88,49 @@ wx-button:not([size=mini]) {
         }
     }
 
+    &--flat {
+        box-shadow: none !important;
+        border: none;
+        transition: background 0.1s;
+
+        // 覆盖所有颜色变体
+        &.toy-button--primary,
+        &.toy-button--green,
+        &.toy-button--white {
+            box-shadow: none !important;
+            border: none !important;
+
+            &.active {
+                transform: none !important;
+                box-shadow: none !important;
+            }
+        }
+
+        // 特殊处理白色plain模式
+        &.toy-button--white.plain {
+            background: transparent !important;
+            border: none !important;
+            box-shadow: none !important;
+        }
+
+        // 重置active变换
+        &.active {
+            transform: none !important;
+        }
+
+        // 彩色按钮active背景变化
+        &.toy-button--primary.active {
+            background: rgba(255, 215, 25, 0.7);
+        }
+
+        &.toy-button--green.active {
+            background: rgba(147, 211, 51, 0.7);
+        }
+
+        &.toy-button--white.active {
+            background: rgba(255, 255, 255, 0.7);
+        }
+    }
 
 
     .loading-class,

miniprogram/ui/button/button.wxml

@@ -4,7 +4,7 @@
 
 <button
     data-id="test-toy-button-id"
-    class="toy-button toy-button--{{type}} {{Utils.classNames({disabled: disabled, loading: loading, plain: plain })}} custom-class"
+    class="toy-button toy-button--{{type}} {{flat ? 'toy-button--flat' : ''}} {{Utils.classNames({disabled: disabled, loading: loading, plain: plain })}} custom-class"
     data-disabled="{{disabled}}"
     data-loading="{{loading}}"
     style="{{style}};{{width ? 'width:' + width + ';' : ''}};{{height ? 'height:' + height + ';' : ''}}"

typings/common.d.ts

@@ -5,3 +5,8 @@ type WordCard = {
 };
 
 interface CardList extends Array<WordCard> { }
+
+interface PrintConfig {
+    header: PrintHeader;
+    appName: string;
+}

typings/index.d.ts

@@ -5,7 +5,7 @@ interface IAppOption {
     globalData: {
         userInfo?: WechatMiniprogram.UserInfo;
         env: string;
-        printHeader?: PrintHeader;
+        printConfig?: PrintConfig;
     };
     userInfoReadyCallback?: WechatMiniprogram.GetUserInfoSuccessCallback;
     [key: string]: any;