feat: 落地 Warm Kitchen Ledger 原型，宽屏左导航 + 双栏布局
新增 ledger.css 设计令牌与桌面端布局，AppRail 左导航、PageHead 桌面页头、ResultsColumn 常驻结果栏；做菜/菜谱/发现/我的/设置/帮助/关于各页做桌面窄屏双形态适配，窄屏仍走原有底部标签栏与弹层交互。
This commit is contained in:
toor
trae-solo-agent
@@ -1,5 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import { links } from '~/constants'
|
||||
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>
|
||||
@@ -14,33 +27,131 @@ import { links } from '~/constants'
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<TheAboutList />
|
||||
<div class="ledger-desktop-block">
|
||||
<PageHead title="关于" subtitle="食用手册是什么，从哪儿来" />
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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 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>
|
||||
|
||||
Reference in New Issue
Block a user