feat: 完成分类页开发

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

@@ -19,10 +19,34 @@
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
+    gap: 10px;
     padding: 0 @page-padding-x;
     box-sizing: border-box;
 }
 
+.nav-bar__brand {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+}
+
+.nav-bar__logo {
+    width: 32px;
+    height: 32px;
+    border-radius: 16px;
+    flex-shrink: 0;
+}
+
+.nav-bar__brand-name {
+    font-size: @fs-nav-title;
+    font-weight: @fw-nav-title;
+    color: @color-nav-title;
+    letter-spacing: @ls-nav-title;
+    line-height: 1;
+}
+
 .nav-bar__back {
     width: 64rpx;
     height: 64rpx;

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

@@ -1,8 +1,11 @@
 import { NAV_INNER_PX } from '../../utils/navMetrics';
 
 const HOME_TAB_URL = '/pages/home/home';
+const HOME_ROUTE = 'pages/home/home';
+
 const TAB_BAR_ROUTES = new Set([
-    'pages/home/home',
+    HOME_ROUTE,
+    'pages/category/category',
     'pages/age/age',
     'pages/favorites/favorites',
     'pages/profile/profile',
@@ -17,7 +20,9 @@ Component({
     data: {
         statusBarHeight: 0,
         navBlockHeight: 0,
-        leftActionType: 'none',
+        leftActionType: 'none' as 'none' | 'back' | 'home' | 'brand',
+        /** 仅首页（Tab 根页）在 logo 旁展示「涂鸦丫」；其余主 Tab 只展示 logo */
+        showBrandName: false,
     },
     lifetimes: {
         attached() {
@@ -40,15 +45,19 @@ Component({
             const currentRoute = pages[pages.length - 1]?.route || '';
             const isTabBarPage = TAB_BAR_ROUTES.has(currentRoute);
 
-            let leftActionType: 'none' | 'back' | 'home' = 'none';
+            let leftActionType: 'none' | 'back' | 'home' | 'brand' = 'none';
+            const showBrandName = currentRoute === HOME_ROUTE;
 
             if (pages.length > 1) {
                 leftActionType = 'back';
             } else if (!isTabBarPage) {
                 leftActionType = 'home';
+            } else {
+                // 五个主 Tab 根页：仅展示品牌区（左 logo；首页另见 showBrandName）
+                leftActionType = 'brand';
             }
 
-            this.setData({ leftActionType });
+            this.setData({ leftActionType, showBrandName });
         },
 
         handleLeftAction() {

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

@@ -2,7 +2,17 @@
     class="nav-bar"
     style="padding-top: {{statusBarHeight}}px; {{background ? 'background:' + background + ';' : ''}}">
     <view class="nav-bar__inner">
+        <view wx:if="{{leftActionType === 'brand'}}" class="nav-bar__brand">
+            <image
+                class="nav-bar__logo"
+                src="/assets/imgs/doodle-logo.png"
+                mode="aspectFill" />
+            <text wx:if="{{showBrandName}}" class="nav-bar__brand-name"
+                >涂鸦丫</text
+            >
+        </view>
         <view
+            wx:else
             class="nav-bar__back {{leftActionType === 'none' ? 'nav-bar__back--hidden' : ''}}"
             bindtap="handleLeftAction">
             <text
@@ -12,7 +22,6 @@
                 wx:elif="{{leftActionType === 'home'}}"
                 class="toy-icon toy-icon-home-o nav-bar__back-icon"></text>
         </view>
-        <slot name="left"></slot>
         <text class="nav-bar__title">{{title}}</text>
         <view class="nav-bar__right">
             <slot name="right"></slot>