HarmonyOS 鸿蒙Next中使用 Navigation 跳转后 Detail 页面仍显示底部 Tabs，如何隐藏？还是我的代码结构有问题？

HarmonyOS 鸿蒙Next中使用 Navigation 跳转后 Detail 页面仍显示底部 Tabs，如何隐藏？还是我的代码结构有问题？ 代码仓库：https://github.com/llds66/study_harmonyos

1.项目结构：

2.products/default/src/main/ets/TabPage.ets

import { HomePage } from 'home'
import { MyPage } from 'my'
import { ShoppingPage } from 'shopping'

@Entry
@Component
struct TabPage {
  @State currentIndex: number = 0; // 控制TabContent显示页签
  @State selectedIndex: number = 0; // 控制自定义TabBar内Image和Text颜色切换
  private tabsController: TabsController = new TabsController();

  @Builder
  tabBarBuilder(title: string, targetIndex: number, selectedIcon: Resource, unselectIcon: Resource) {
    Column() {
      SymbolGlyph(this.selectedIndex === targetIndex ? selectedIcon : unselectIcon)
        .fontColor(
          [this.selectedIndex === targetIndex ? '#0A59F7' : 'rgba(0,0,0,0.60)']
        )
      Text(title)
        .fontFamily('HarmonyHeiTi-Medium')
        .fontSize(10)
        .fontColor(this.selectedIndex === targetIndex ? '#0A59F7' : 'rgba(0,0,0,0.60)')
        .textAlign(TextAlign.Center)
        .lineHeight(14)
        .fontWeight(500)
    }
    .height(56)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
      TabContent() {
        HomePage()
      }.tabBar(this.tabBarBuilder('首页', 0, $r('sys.symbol.house_fill'), $r('sys.symbol.house')))

      TabContent() {
        MyPage()
      }.tabBar(this.tabBarBuilder('发现', 1, $r('sys.symbol.puzzle_fill'), $r('sys.symbol.puzzle')))

      TabContent() {
        ShoppingPage()
      }.tabBar(this.tabBarBuilder('我的', 2, $r('sys.symbol.checkmark_circle'), $r('sys.symbol.circle')))
    }
    .vertical(false)
    .backgroundColor('#F1F3F5')
    .divider({ strokeWidth: 0.5, color: '0D182431' })
    .onChange(index => {
      this.currentIndex = index;
      this.selectedIndex = index;
    })
    .onAnimationStart((index: number, targetIndex: number, _event: TabsAnimationEvent) => {
      if (index === targetIndex) {
        return;
      }
      this.selectedIndex = targetIndex;
    })
  }
}

3.用 shopping举例， features/shopping/src/main/ets/pages/index.ets,这里跳转到detail详情页，但是tabs底部导航栏还会存在，如何隐藏 还是我的代码结构不对？

import { Detail } from "./detail";
import { Merchant } from "./merchant";

interface Shop {
  id: number;
  name: string;
}

@Preview
@Component
export default struct Index {
  // 创建一个导航控制器对象
  @Provide('shopPathStack') shopPathStack: NavPathStack = new NavPathStack();
  @State shopList: Array<Shop> = [
    {
      id: 1,
      name: '商品-1'
    },
    {
      id: 2,
      name: '商品-2'
    },
    {
      id: 3,
      name: '商品-3'
    }
  ];

  @Builder
  quickStartRouter(name: string) {
    if (name === 'detail') {
      Detail()
    } else if (name === 'merchant') {
      Merchant()
    }
  }

  build() {
    Navigation(this.shopPathStack) {
      Column({space: 10}) {
        ForEach(this.shopList, (shop: Shop) => {
          ShopItem({ shop })
            .onClick(() => {
              this.shopPathStack.pushPathByName('detail', shop.id)
            })
        })
      }
      .padding(10)
    }
    .navDestination(this.quickStartRouter)
    .title('购物')
    .mode(NavigationMode.Stack)
  }
}

@Component
struct ShopItem {
  @Prop shop: Shop;

  build() {
    Row(){
      Text(this.shop.name)
    }
    .width('100%')
    .padding(10)
    .backgroundColor('#ffcfcfcf')
    .borderRadius(10)
  }
}

这里跳转到detail详情页，但是tabs底部导航栏还会存在，如何隐藏 还是我的代码结构不对？我想要的效果是features的一级页面底部有tabs导航栏，但是features的二级页面 或者在子级页面 没有tabs底部导航栏，如何解决？