what-to-eat/apps/web/app/pages/tabs/my/index.vue

<script lang="ts" setup>
import { customRecipes } from '~/composables/store/customRecipe'
import { favoriteEntries } from '~/composables/store/favorite'
import { recipeHistories } from '~/composables/store/history'
import { links } from '~/constants'

definePageMeta({
  alias: ['/my'],
})

const rStore = useRecipeStore()

const favCount = computed(() => favoriteEntries.value.length)
const historyCount = computed(() => recipeHistories.value.length)
const mineCount = computed(() => customRecipes.value.length)
const pantryText = computed(() => rStore.selectedPantry.join('、') || '无')
const avoidText = computed(() => rStore.selectedAvoid.join('、') || '无')
const spicyText = computed(() => rStore.noSpicy ? '开' : '关')
</script>

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>我的</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">
            我的
          </ion-title>
        </ion-toolbar>
      </ion-header>

      <div class="ledger-desktop-block">
        <PageHead title="我的" subtitle="收藏、历史和自己记的菜谱都在这儿" />

        <div class="ledger-menu-grid">
          <section class="ledger-section">
            <div class="ledger-section-head">
              <h2>我的菜谱</h2>
              <span class="hint">共 {{ favCount + historyCount + mineCount }} 条记录</span>
            </div>
            <div class="ledger-menu">
              <NuxtLink to="/recipes/favorites">
                <span class="ico"><ion-icon :icon="ioniconsStarOutline" aria-hidden="true" /></span>
                <span class="label">收藏的菜谱</span>
                <span class="value">{{ favCount }}</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </NuxtLink>
              <NuxtLink to="/recipes/history">
                <span class="ico"><ion-icon :icon="ioniconsTimeOutline" aria-hidden="true" /></span>
                <span class="label">浏览历史</span>
                <span class="value">{{ historyCount }}</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </NuxtLink>
              <NuxtLink to="/recipes/mine">
                <span class="ico"><ion-icon :icon="ioniconsBookOutline" aria-hidden="true" /></span>
                <span class="label">自己记的菜谱</span>
                <span class="value">{{ mineCount }}</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </NuxtLink>
            </div>
          </section>

          <section class="ledger-section">
            <div class="ledger-section-head">
              <h2>偏好</h2>
            </div>
            <div class="ledger-menu">
              <NuxtLink to="/home">
                <span class="ico"><ion-icon :icon="ioniconsRestaurantOutline" aria-hidden="true" /></span>
                <span class="label">常备调料</span>
                <span class="value">{{ pantryText }}</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </NuxtLink>
              <NuxtLink to="/home">
                <span class="ico"><ion-icon :icon="ioniconsAlertCircleOutline" aria-hidden="true" /></span>
                <span class="label">忌口</span>
                <span class="value">{{ avoidText }}</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </NuxtLink>
              <NuxtLink to="/home">
                <span class="ico"><ion-icon :icon="ioniconsFlameOutline" aria-hidden="true" /></span>
                <span class="label">不吃辣</span>
                <span class="value">{{ spicyText }}</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </NuxtLink>
            </div>
          </section>

          <section class="ledger-section">
            <div class="ledger-section-head">
              <h2>应用</h2>
            </div>
            <div class="ledger-menu">
              <NuxtLink to="/settings">
                <span class="ico"><ion-icon :icon="ioniconsSettingsOutline" aria-hidden="true" /></span>
                <span class="label">设置</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </NuxtLink>
              <NuxtLink to="/help">
                <span class="ico"><ion-icon :icon="ioniconsHelpCircleOutline" aria-hidden="true" /></span>
                <span class="label">帮助</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </NuxtLink>
              <NuxtLink to="/about">
                <span class="ico"><ion-icon :icon="ioniconsInformationCircleOutline" aria-hidden="true" /></span>
                <span class="label">关于</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </NuxtLink>
              <a :href="links.githubIssue" target="_blank" rel="noopener">
                <span class="ico"><ion-icon :icon="ioniconsChatbubbleEllipsesOutline" aria-hidden="true" /></span>
                <span class="label">反馈问题</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </a>
            </div>
          </section>
        </div>
      </div>

      <div class="ledger-mobile-only">
        <ion-list :inset="true">
          <ion-item router-link="/recipes/history">
            <CookListIcon slot="start" :icon="ioniconsTimeOutline" color="#5856d6" />
            <ion-label>历史记录</ion-label>
          </ion-item>
          <ion-item router-link="/recipes/favorites">
            <CookListIcon slot="start" :icon="ioniconsStarOutline" color="#ff9500" />
            <ion-label>我的收藏</ion-label>
          </ion-item>
          <ion-item router-link="/recipes/mine">
            <CookListIcon slot="start" :icon="ioniconsBookOutline" color="#a2845e" />
            <ion-label>我的菜谱</ion-label>
            <ion-note v-if="customRecipes.length" slot="end">
              {{ customRecipes.length }}
            </ion-note>
          </ion-item>
        </ion-list>

        <ion-list :inset="true">
          <ion-item :href="links.githubIssue" target="_blank" :detail-icon="ioniconsOpenOutline">
            <CookListIcon slot="start" :icon="ioniconsChatbubbleEllipsesOutline" color="#34c759" />
            <ion-label>问题反馈</ion-label>
          </ion-item>
          <ion-item :href="links.githubDiscussions" target="_blank" :detail-icon="ioniconsOpenOutline">
            <CookListIcon slot="start" :icon="ioniconsChatbubblesOutline" color="#30b0c7" />
            <ion-label>参与讨论</ion-label>
          </ion-item>
          <ion-item :href="links.contribute" target="_blank" :detail-icon="ioniconsOpenOutline">
            <CookListIcon slot="start" :icon="ioniconsMailOutline" color="#ff2d55" />
            <ion-label>菜谱投稿</ion-label>
          </ion-item>
        </ion-list>

        <ion-list :inset="true">
          <ion-item router-link="/settings">
            <CookListIcon slot="start" :icon="ioniconsSettingsOutline" color="#8e8e93" />
            <ion-label>设置</ion-label>
          </ion-item>
        </ion-list>

        <ion-list :inset="true">
          <ion-item router-link="/changelog">
            <CookListIcon slot="start" :icon="ioniconsDocumentTextOutline" color="#af52de" />
            <ion-label>更新日志</ion-label>
          </ion-item>
          <ion-item router-link="/help">
            <CookListIcon slot="start" :icon="ioniconsHelpCircleOutline" color="#007aff" />
            <ion-label>帮助</ion-label>
          </ion-item>
          <ion-item router-link="/about">
            <CookListIcon slot="start" :icon="ioniconsInformationCircleOutline" color="#5ac8fa" />
            <ion-label>关于</ion-label>
          </ion-item>
        </ion-list>
      </div>
    </ion-content>
  </ion-page>
</template>