feat:重构按钮和icon组件

miniprogram/components3.0/nav-bar/nav-bar.json

@@ -1,3 +1,5 @@
 {
-    "component": true
+    "component": true,
+    "styleIsolation": "apply-shared",
+    "addGlobalClass": true
 }

miniprogram/components3.0/nav-bar/nav-bar.less

@@ -1,4 +1,5 @@
-@import '../../style/theme3.less';
+@import '../../style/theme.less';
+@import '../../assets/fonts/iconfont.less';
 
 .nav-bar {
     position: fixed;
@@ -22,6 +23,21 @@
     box-sizing: border-box;
 }
 
+.nav-bar__back {
+    width: 64rpx;
+    height: 64rpx;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-shrink: 0;
+}
+
+.nav-bar__back-icon {
+    font-size: 40rpx;
+    color: @color-nav-title;
+    line-height: 1;
+}
+
 .nav-bar__title {
     font-size: @fs-nav-title;
     font-weight: @fw-nav-title;
@@ -41,4 +57,4 @@
 .nav-bar__placeholder {
     width: 100%;
     flex-shrink: 0;
-}
+}

miniprogram/components3.0/nav-bar/nav-bar.ts

@@ -9,13 +9,25 @@ Component({
     data: {
         statusBarHeight: 0,
         navBlockHeight: 0,
+        showBackButton: false,
     },
     lifetimes: {
         attached() {
             const { statusBarHeight } = wx.getWindowInfo();
+            const pages = getCurrentPages();
             this.setData({
                 statusBarHeight,
                 navBlockHeight: statusBarHeight + NAV_INNER_PX,
+                showBackButton: pages.length > 1,
+            });
+        },
+    },
+    methods: {
+        handleBack() {
+            wx.navigateBack({
+                fail: () => {
+                    wx.switchTab({ url: '/pages/home/home' });
+                },
             });
         },
     },

miniprogram/components3.0/nav-bar/nav-bar.wxml

@@ -1,5 +1,11 @@
 <view class="nav-bar" style="padding-top: {{statusBarHeight}}px; {{background ? 'background:' + background + ';' : ''}}">
     <view class="nav-bar__inner">
+        <view
+            wx:if="{{showBackButton}}"
+            class="nav-bar__back"
+            bindtap="handleBack">
+            <text class="toy-icon toy-icon-arrow-left nav-bar__back-icon"></text>
+        </view>
         <slot name="left"></slot>
         <text class="nav-bar__title">{{title}}</text>
         <view class="nav-bar__right">

miniprogram/components3.0/preview-footer-actions/preview-footer-actions.json

@@ -0,0 +1,8 @@
+{
+    "component": true,
+    "usingComponents": {
+        "toy-button": "/toy/button/button"
+    },
+    "styleIsolation": "apply-shared",
+    "addGlobalClass": true
+}

miniprogram/components3.0/preview-footer-actions/preview-footer-actions.less

@@ -0,0 +1,44 @@
+@import '../../style/theme.less';
+
+.preview-footer-actions {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    padding: 0 24rpx;
+    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+    box-sizing: border-box;
+    z-index: 60;
+
+    &__bar {
+        max-width: 686rpx;
+        margin: 0 auto;
+        background: @bg-white;
+        border-radius: 48rpx;
+        padding: 20rpx;
+        box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
+        border: 1rpx solid #f0e7d6;
+        display: flex;
+        gap: 16rpx;
+    }
+
+    &__secondary {
+        flex: 4;
+    }
+
+    &__primary {
+        flex: 6;
+    }
+
+    &__secondary .toy-btn,
+    &__primary .toy-btn {
+        width: 100%;
+        height: 88rpx;
+        border-radius: 28rpx;
+        font-size: 30rpx;
+    }
+
+    &__primary .toy-btn--primary {
+        box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
+    }
+}

miniprogram/components3.0/preview-footer-actions/preview-footer-actions.ts

@@ -0,0 +1,40 @@
+/**
+ * 预览页底部悬浮操作条：左为次级操作（分享，toy-button type=secondary），右为主操作（保存等，primary）。
+ */
+Component({
+    options: {
+        styleIsolation: 'apply-shared',
+        addGlobalClass: true,
+    },
+    properties: {
+        primaryText: {
+            type: String,
+            value: '保存到作品库',
+        },
+        secondaryText: {
+            type: String,
+            value: '分享',
+        },
+        disabled: {
+            type: Boolean,
+            value: false,
+        },
+        loading: {
+            type: Boolean,
+            value: false,
+        },
+        shareOpenType: {
+            type: String,
+            value: 'share',
+        },
+    },
+    methods: {
+        onPrimaryTap() {
+            if (this.data.disabled || this.data.loading) return;
+            this.triggerEvent('primary');
+        },
+        onSecondaryTap() {
+            this.triggerEvent('secondary');
+        },
+    },
+});

miniprogram/components3.0/preview-footer-actions/preview-footer-actions.wxml

@@ -0,0 +1,23 @@
+<view class="preview-footer-actions">
+    <view class="preview-footer-actions__bar">
+        <toy-button
+            class="preview-footer-actions__secondary"
+            type="secondary"
+            icon="line-share"
+            icon-size="40rpx"
+            open-type="{{ shareOpenType }}"
+            bind:click="onSecondaryTap">
+            {{ secondaryText }}
+        </toy-button>
+        <toy-button
+            class="preview-footer-actions__primary"
+            type="primary"
+            icon="download"
+            icon-size="40rpx"
+            disabled="{{ disabled }}"
+            loading="{{ loading }}"
+            bind:click="onPrimaryTap">
+            {{ primaryText }}
+        </toy-button>
+    </view>
+</view>