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 } 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>
                <span class="value">{{ commitSha }}</span>
              </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="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>
            </div>
          </section>
        </div>
      </div>

      <div class="ledger-mobile-only">
        <ion-list :inset="true">
          <ion-item>
            <ion-label>当前版本</ion-label>
            <ion-text>v{{ pkg.version }}</ion-text>
          </ion-item>

          <ion-item>
            <ion-label>构建时间</ion-label>
            <ion-text>{{ buildDate }}</ion-text>
          </ion-item>

          <ion-item v-if="commitSha" :href="`https://github.com/YunYouJun/cook/commit/${commitSha}`" target="_blank">
            <ion-label>Commit Hash</ion-label>
            <ion-text>{{ commitSha }}</ion-text>
          </ion-item>

          <ion-item v-if="displayICP" href="https://beian.miit.gov.cn/" target="_blank">
            <ion-label>备案号</ion-label>
            <ion-text>{{ icp }}</ion-text>
          </ion-item>
        </ion-list>

        <ion-list :inset="true">
          <ion-item href="https://www.bilibili.com/blackboard/dynamic/306882" 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="https://github.com/YunYouJun/cook" target="_blank">
            <ion-label>开源代码</ion-label>
            <ion-text class="inline-flex items-center justify-center">
              <div class="inline-flex" i-ri-github-line />
              <span m="l-1" class="inline-flex">GitHub</span>
            </ion-text>
          </ion-item>
        </ion-list>
      </div>
    </ion-content>
  </ion-page>
</template>