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

<script setup lang="ts">
import { isClient } from '@vueuse/core'
import pkg from '~/../package.json'
import { icp, links } from '~/constants'

const displayICP = ref(true)

const commitSha = (import.meta.env.VITE_COMMIT_REF || '').slice(0, 7)
const date = import.meta.env.VITE_APP_BUILD_DATE
const buildDate = (new Date(date)).toLocaleDateString()

onBeforeMount(() => {
  if (isClient)
    displayICP.value = ['cook.yunyoujun.cn', 'localhost', '127.0.0.1'].includes(window.location.hostname)
})
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button default-href="/my" />
        </ion-buttons>
        <ion-title>关于</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <div class="ledger-desktop-block">
        <PageHead title="关于" subtitle="食用手册是什么，从哪儿来" />

        <div class="ledger-menu-grid">
          <section class="ledger-section">
            <div class="ledger-section-head">
              <h2>版本信息</h2>
            </div>
            <div class="ledger-card">
              <div class="ledger-setting-row">
                <div class="label">
                  <b>当前版本</b>
                </div>
                <span class="value">v{{ pkg.version }}</span>
              </div>
              <div class="ledger-setting-row">
                <div class="label">
                  <b>构建时间</b>
                </div>
                <span class="value">{{ buildDate }}</span>
              </div>
              <div v-if="commitSha" class="ledger-setting-row">
                <div class="label">
                  <b>Commit Hash</b>
                </div>
                <a
                  class="value"
                  :href="`https://github.com/YunYouJun/cook/commit/${commitSha}`"
                  target="_blank"
                  rel="noopener"
                >
                  {{ commitSha }}
                </a>
              </div>
              <div v-if="displayICP" class="ledger-setting-row">
                <div class="label">
                  <b>备案号</b>
                </div>
                <a class="value" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">
                  {{ icp }}
                </a>
              </div>
            </div>
          </section>

          <section class="ledger-section">
            <div class="ledger-section-head">
              <h2>项目</h2>
            </div>
            <div class="ledger-menu">
              <a href="https://www.bilibili.com/blackboard/dynamic/306882" target="_blank" rel="noopener">
                <span class="ico"><ion-icon :icon="ioniconsPlayOutline" aria-hidden="true" /></span>
                <span class="label">数据来源</span>
                <span class="value">哔哩哔哩</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </a>
              <a href="https://github.com/YunYouJun/cook" target="_blank" rel="noopener">
                <span class="ico"><ion-icon :icon="ioniconsLogoGithub" aria-hidden="true" /></span>
                <span class="label">开源代码</span>
                <span class="value">GitHub</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </a>
              <NuxtLink to="/about/me">
                <span class="ico"><ion-icon :icon="ioniconsPersonOutline" aria-hidden="true" /></span>
                <span class="label">项目作者</span>
                <span class="value">云游君</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </NuxtLink>
              <NuxtLink to="/about/acknowledgements">
                <span class="ico"><ion-icon :icon="ioniconsHeartOutline" aria-hidden="true" /></span>
                <span class="label">致谢名单</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </NuxtLink>
              <a :href="links.cook" target="_blank" rel="noopener">
                <span class="ico"><ion-icon :icon="ioniconsGlobeOutline" aria-hidden="true" /></span>
                <span class="label">网页版本</span>
                <span class="value">cook.yunyoujun.cn</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </a>
              <a :href="links.yyj.bilibiliOpus" target="_blank" rel="noopener">
                <span class="ico"><ion-icon :icon="ioniconsMicOutline" aria-hidden="true" /></span>
                <span class="label">旅程的起点</span>
                <span class="value">动态</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </a>
              <a :href="links.yyj.mpArticle" target="_blank" rel="noopener">
                <span class="ico"><ion-icon :icon="ioniconsDocumentTextOutline" aria-hidden="true" /></span>
                <span class="label">关于食用手册的前世今生</span>
                <span class="value">文章</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </a>
            </div>
          </section>
        </div>
      </div>

      <div class="ledger-mobile-only">
        <TheAboutList />

        <ion-list :inset="true">
          <ion-item :href="links.cook" target="_blank">
            <ion-label>网页版本</ion-label>
            <ion-text class="inline-flex items-center justify-center">
              <div class="inline-flex" i-ri-global-line />
              <span m="l-1" class="inline-flex">cook.yunyoujun.cn</span>
            </ion-text>
          </ion-item>

          <ion-item :href="links.yyj.bilibiliOpus" target="_blank">
            <ion-label>旅程的起点</ion-label>
            <ion-text class="inline-flex items-center justify-center">
              <div class="inline-flex" i-ri-bilibili-line />
              <span m="l-1" class="inline-flex">动态</span>
            </ion-text>
          </ion-item>

          <ion-item :href="links.yyj.mpArticle" target="_blank">
            <ion-label>关于食用手册的前世今生</ion-label>
            <ion-text class="inline-flex items-center justify-center">
              <div class="inline-flex" i-ri-wechat-2-line />
              <span m="l-1" class="inline-flex">文章</span>
            </ion-text>
          </ion-item>
        </ion-list>
      </div>
    </ion-content>
  </ion-page>
</template>