feat: 增加环境切换

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

@@ -66,13 +66,21 @@
     margin-top: 4rpx;
 }
 
+.nav-bar__title-group {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    flex: 1;
+    min-width: 0;
+}
+
 .nav-bar__title {
     font-size: @fs-nav-title;
     font-weight: @fw-nav-title;
     color: @color-nav-title;
     letter-spacing: @ls-nav-title;
     line-height: 1;
-    flex: 1;
+    flex: 0 1 auto;
     min-width: 0;
 }
 
@@ -86,4 +94,14 @@
 .nav-bar__placeholder {
     width: 100%;
     flex-shrink: 0;
-}
+}
+.nav-bar__environment {
+    margin-right: 16rpx;
+    padding: 6rpx 12rpx;
+    border-radius: 12rpx;
+    background: @brand;
+    color: @text-title;
+    font-size: 20rpx;
+    line-height: 1.2;
+    flex-shrink: 0;
+}

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

@@ -1,4 +1,5 @@
 import { getNavInnerPx } from '../../utils/navMetrics';
+import { getApiEnvironment } from '../../config/api';
 
 const HOME_TAB_URL = '/pages/home/home';
 const HOME_ROUTE = 'pages/home/home';
@@ -24,6 +25,7 @@ Component({
         leftActionType: 'none' as 'none' | 'back' | 'home' | 'brand',
         /** 仅首页（Tab 根页）在 logo 旁展示「涂鸦丫」；其余主 Tab 只展示 logo */
         showBrandName: false,
+        apiEnvironment: '',
     },
     lifetimes: {
         attached() {
@@ -44,6 +46,12 @@ Component({
     },
     methods: {
         syncLeftAction() {
+            this.setData({
+                apiEnvironment:
+                    wx.getAccountInfoSync().miniProgram.envVersion === 'develop'
+                        ? getApiEnvironment()
+                        : '',
+            });
             const pages = getCurrentPages();
             const currentRoute = pages[pages.length - 1]?.route || '';
             const isTabBarPage = TAB_BAR_ROUTES.has(currentRoute);

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

@@ -22,7 +22,12 @@
                 wx:elif="{{leftActionType === 'home'}}"
                 class="toy-icon toy-icon-home-o nav-bar__back-icon"></text>
         </view>
-        <text class="nav-bar__title">{{title}}</text>
+        <view class="nav-bar__title-group">
+            <text class="nav-bar__title">{{title}}</text>
+            <text wx:if="{{apiEnvironment}}" class="nav-bar__environment"
+                >{{apiEnvironment}}</text
+            >
+        </view>
         <view class="nav-bar__right">
             <slot name="right"></slot>
         </view>