sweet-hut-ui/src/layout/TabBar.vue

<template>
  <div class="tab-bar">
    <router-link to="/home" @click="routerClick()" class="item">
      <i class="fa-solid fa-house"></i>
      <span>主页</span>
    </router-link>

    <router-link v-if="path.includes('bill')" to="/bill/data"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-calendar-days"></i>
      <span>日常</span>
    </router-link>
    <router-link v-if="path.includes('bill')" to="/bill/chart"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-chart-pie"></i>
      <span>统计</span>
    </router-link>
    <router-link v-if="path.includes('bill')" to="/bill/setting"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-gear"></i>
      <span>设置</span>
    </router-link>

    <router-link v-if="path.includes('food')" to="/food/recipe"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-utensils"></i>
      <span>菜谱</span>
    </router-link>
    <router-link v-if="path.includes('food')" to="/food/record"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-calendar-days"></i>
      <span>记录</span>
    </router-link>

    <router-link v-if="path.includes('travel')" to="/travel/spot"
                 @click="routerClick()" class="item">
      <i class="iconfont icon-jingdian"></i>
      <span>景点</span>
    </router-link>
    <router-link v-if="path.includes('travel')" to="/travel/record"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-calendar-days"></i>
      <span>记录</span>
    </router-link>

    <router-link v-if="path.includes('health')" to="/health/calendar"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-calendar-days"></i>
      <span>记录</span>
    </router-link>

    <router-link v-if="path.includes('plan')" to="/plan/calendar"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-calendar-days"></i>
      <span>日程</span>
    </router-link>
    <router-link v-if="path.includes('plan')" to="/plan/list"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-list"></i>
      <span>清单</span>
    </router-link>

    <router-link v-if="path.includes('anniversary')" to="/anniversary/list"
                 @click="routerClick()" class="item">
      <i class="fa-regular fa-calendar-check"></i>
      <span>纪念日</span>
    </router-link>
    <router-link v-if="path.includes('anniversary')" to="/anniversary/category"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-table-cells"></i>
      <span>分类</span>
    </router-link>

    <router-link v-if="path.includes('period')" to="/period/calendar"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-calendar-days"></i>
      <span>记录</span>
    </router-link>
    <router-link v-if="path.includes('period')" to="/period/status"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-chart-pie"></i>
      <span>统计</span>
    </router-link>
    <router-link v-if="path.includes('period')" to="/period/setting"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-gear"></i>
      <span>设置</span>
    </router-link>

    <router-link v-if="path.includes('product')" to="/product/list"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-list-ul"></i>
      <span>清单</span>
    </router-link>

    <router-link v-if="path.includes('journal')" to="/journal/record"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-calendar-days"></i>
      <span>记录</span>
    </router-link>
    <router-link v-if="path.includes('journal')" to="/journal/timeline"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-timeline"></i>
      <span>时间轴</span>
    </router-link>

    <router-link v-if="path.includes('kpi')" to="/kpi/record"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-calendar-days"></i>
      <span>记录</span>
    </router-link>

    <router-link v-if="path.includes('asset')" to="/asset/list"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-list-ul"></i>
      <span>清单</span>
    </router-link>

    <router-link v-if="path.includes('ledger')" to="/ledger/list"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-list-ul"></i>
      <span>清单</span>
    </router-link>
    <router-link v-if="path.includes('ledger')" to="/ledger/stats"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-chart-pie"></i>
      <span>统计</span>
    </router-link>

    <router-link v-if="path.includes('password')" to="/password/list"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-list-ul"></i>
      <span>清单</span>
    </router-link>

    <router-link v-if="path.includes('server')" to="/server/monitor"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-desktop"></i>
      <span>监控</span>
    </router-link>
    <router-link v-if="path.includes('server')" to="/server/file"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-folder"></i>
      <span>文件</span>
    </router-link>

    <router-link v-if="path.includes('blog')" to="/blog/overview"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-book-open"></i>
      <span>列表</span>
    </router-link>
    <router-link v-if="path.includes('blog')" to="/blog/category"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-table-cells"></i>
      <span>分类</span>
    </router-link>
    <router-link v-if="path.includes('blog')" to="/blog/archive"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-box-archive"></i>
      <span>归档</span>
    </router-link>

    <router-link to="/profile/index"
                 @click="routerClick()" class="item">
      <i class="fa-solid fa-user"></i>
      <span>我的</span>
    </router-link>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useAppStore } from '@/store/app.ts'
import { computed } from 'vue'

const router = useRouter()
const appStore = useAppStore()
const path = computed(() => router.currentRoute.value.path)

const routerClick = () => {
  appStore.isShowMobileBack = false
}
</script>