From cf58e820c9752986b1d21a2a8d5c65d2d16c8647 Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Mon, 6 Oct 2025 18:43:58 +0800
Subject: [PATCH] feat: refactor more ui with app

---
 app/components/BasketButton.vue | 61 +++++++++++++---------
 app/components/ChooseFood.vue   | 29 ++++++++---
 app/components/RandomRecipe.vue | 20 ++++----
 app/components/RecipePanel.vue  | 10 ++--
 app/components/TheAboutList.vue | 65 ++++++++++++++++++++++++
 app/composables/global.ts       |  1 +
 app/composables/helper.ts       |  2 +
 app/constants/index.ts          |  2 +
 app/constants/links.ts          |  2 +
 app/data/incompatible-foods.csv | 10 ++--
 app/pages/about.vue             | 17 +++++--
 app/pages/help.vue              | 35 +++++++------
 app/pages/tabs/home/index.vue   |  4 +-
 app/pages/tabs/my/index.vue     | 90 +++++++++++++++++++++------------
 app/pages/tabs/random/index.vue |  6 ++-
 nuxt.config.ts                  |  2 +-
 16 files changed, 255 insertions(+), 101 deletions(-)
 create mode 100644 app/components/TheAboutList.vue
 create mode 100644 app/composables/global.ts

diff --git a/app/components/BasketButton.vue b/app/components/BasketButton.vue
index a0bbbfa..0e3af10 100644
--- a/app/components/BasketButton.vue
+++ b/app/components/BasketButton.vue
@@ -1,35 +1,50 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
 
-const props = defineProps({
-  isVisible: Boolean,
-})
-
 const rStore = useRecipeStore()
 const { displayedRecipe } = storeToRefs(rStore)
 
 /**
- * Show basket button if there are recipes in the basket
+ * scroll into view
  */
-const showBasketBtn = computed(() => {
-  return displayedRecipe.value.length !== rStore.recipesLength && props.isVisible
-})
+function recipePanelScrollIntoView() {
+  const panel = recipePanelRef.value as HTMLElement
+  if (panel) {
+    panel.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+}
 </script>
 
 <template>
-  <button
-    v-show="showBasketBtn"
-    class="rounded rounded-full inline-flex cursor-pointer shadow items-center justify-center fixed z-9 hover:shadow-md"
-    bg="green-50 dark:green-900" w="10" h="10"
-    bottom="22"
-    right="4"
-    text="green-600 dark:green-300"
-  >
-    <span v-if="displayedRecipe.length > 0">
-      <div i-mdi-bowl-mix-outline />
-    </span>
-    <span v-else>
-      <div i-mdi-bowl-outline />
-    </span>
-  </button>
+  <ion-fab slot="fixed" horizontal="end" vertical="bottom">
+    <!-- <button
+      v-show="showBasketBtn"
+      class="rounded rounded-full inline-flex cursor-pointer shadow items-center justify-center fixed z-9 hover:shadow-md"
+      bg="green-50 dark:green-900" w="10" h="10"
+      bottom="22"
+      right="4"
+      text="green-600 dark:green-300"
+    >
+
+    </button> -->
+
+    <ion-fab-button size="small">
+      <!-- <ion-icon :icon="add" /> -->
+      <span v-if="displayedRecipe.length > 0">
+        <div i-mdi-bowl-mix-outline />
+      </span>
+      <span v-else>
+        <div i-mdi-bowl-outline />
+      </span>
+    </ion-fab-button>
+
+    <ion-fab-list side="top">
+      <ion-fab-button @click="rStore.reset">
+        <ion-icon :icon="ioniconsTrashOutline" />
+      </ion-fab-button>
+      <ion-fab-button @click="recipePanelScrollIntoView">
+        <ion-icon :icon="ioniconsListOutline" />
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
 </template>
diff --git a/app/components/ChooseFood.vue b/app/components/ChooseFood.vue
index 3f1dcb4..30df3b4 100644
--- a/app/components/ChooseFood.vue
+++ b/app/components/ChooseFood.vue
@@ -19,7 +19,6 @@ const { playAnimation } = useEmojiAnimation(recipeBtnRef)
 const { proxy } = useScriptGoogleTagManager()
 
 const recipePanelRef = ref()
-const { isVisible, show } = useInvisibleElement(recipePanelRef)
 
 // 监听食材变化，自动检测相克
 watch(curStuff, (newIngredients) => {
@@ -59,7 +58,14 @@ function toggleStuff(item: StuffItem, category = '', _e?: Event) {
     </h2>
 
     <!-- 食物相克警告提示 -->
-    <Transition name="incompatible-warning">
+    <ion-toast
+      class="incompatible-warning-toast"
+      :message="warningMessage"
+      :is-open="hasWarning"
+      position="top"
+      :icon="ioniconsWarningOutline"
+      animated
+    >
       <div
         v-if="hasWarning"
         class="incompatible-warning-box"
@@ -84,7 +90,7 @@ function toggleStuff(item: StuffItem, category = '', _e?: Event) {
           </div>
         </div>
       </div>
-    </Transition>
+    </ion-toast>
 
     <div>
       <h2 opacity="90" text="base" font="bold" p="1">
@@ -155,9 +161,20 @@ function toggleStuff(item: StuffItem, category = '', _e?: Event) {
       </div>
     </div>
 
-    <Transition>
-      <BasketButton ref="recipeBtnRef" :is-visible="isVisible" @click="show" />
-    </Transition>
     <RecipePanel ref="recipePanelRef" />
   </div>
+
+  <Transition>
+    <BasketButton ref="recipeBtnRef" />
+  </Transition>
 </template>
+
+<style>
+ion-toast.incompatible-warning-toast {
+  /* --background: #f4f4fa; */
+  --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+  /* --color: #4b4a50; */
+  --background: rgba(254, 202, 202, 0.95);
+  --color: #7f1d1d;
+}
+</style>
diff --git a/app/components/RandomRecipe.vue b/app/components/RandomRecipe.vue
index f41bf37..b53872a 100644
--- a/app/components/RandomRecipe.vue
+++ b/app/components/RandomRecipe.vue
@@ -5,24 +5,24 @@ const { random, randomRecipes } = useRandomRecipe(count)
 
 <template>
   <div inline-flex m="y-3">
-    <button btn p-2 rounded-full @click="dec()">
-      <div i-carbon-subtract />
-    </button>
-    <div font="mono" w="15" m-auto inline-block>
+    <ion-button shape="round" @click="dec()">
+      <ion-icon slot="icon-only" :icon="ioniconsRemoveOutline" />
+    </ion-button>
+    <div font="mono" class="w-15 text-center text-2xl" m-auto>
       {{ count }}
     </div>
-    <button btn p-2 rounded-full @click="inc()">
-      <div i-carbon-add />
-    </button>
+    <ion-button shape="round" @click="inc()">
+      <ion-icon slot="icon-only" :icon="ioniconsAddOutline" />
+    </ion-button>
   </div>
 
-  <button cursor-pointer class="text-sm text-white leading-6 font-semibold px-3 py-1.5 rounded-md border-none bg-blue-600 inline-flex inline-flex shadow-sm items-center justify-center focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline hover:bg-blue-500" @click="random">
+  <ion-button @click="random">
     <div class="transition" hover="text-blue-500" i-ri-refresh-line mr-1 inline-flex />
     <div>随机一下</div>
-  </button>
+  </ion-button>
 
   <div v-show="randomRecipes.length > 0">
-    <div m="t-8" flex="~ col">
+    <div m="t-4" flex="~ col">
       <template v-for="recipe, i in randomRecipes" :key="i">
         <DishTag v-if="recipe" :dish="recipe" />
       </template>
diff --git a/app/components/RecipePanel.vue b/app/components/RecipePanel.vue
index ec59d48..31898a6 100644
--- a/app/components/RecipePanel.vue
+++ b/app/components/RecipePanel.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
+import { recipePanelRef } from '~/composables/global'
 
 const rStore = useRecipeStore()
 
@@ -12,15 +13,16 @@ const showTooltip = computed(() => !selectedStuff.value.length && !curTool.value
 
 <template>
   <div
-    class="recipe-panel shadow transition relative hover:shadow-md"
-    m="x-2 y-4" p="2"
+    ref="recipePanelRef"
+    class="recipe-panel relative shadow transition hover:shadow-md" m="x-2 y-4"
+    p="2"
     bg="gray-400/8"
   >
     <RecipePanelTitle />
 
     <ToggleMode />
 
-    <button right-4 top-4 absolute @click="showSearchInput = !showSearchInput">
+    <button absolute right-4 top-4 @click="showSearchInput = !showSearchInput">
       <div v-if="!showSearchInput" i-ri-search-line />
       <div v-else i-ri-search-fill />
     </button>
@@ -36,7 +38,7 @@ const showTooltip = computed(() => !selectedStuff.value.length && !curTool.value
         <div
           v-else-if="rStore.isSearching"
 
-          text-xl p-6 flex items-center justify-center relative
+          relative flex items-center justify-center p-6 text-xl
         >
           <div class="magnifying-glass" i-ri-search-line inline-flex />
         </div>
diff --git a/app/components/TheAboutList.vue b/app/components/TheAboutList.vue
new file mode 100644
index 0000000..ded79cb
--- /dev/null
+++ b/app/components/TheAboutList.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+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-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-item href="https://www.yunyoujun.cn" target="_blank">
+      <ion-label>项目作者</ion-label>
+      <ion-text class="inline-flex items-center justify-center">
+        云游君
+      </ion-text>
+    </ion-item>
+  </ion-list>
+</template>
diff --git a/app/composables/global.ts b/app/composables/global.ts
new file mode 100644
index 0000000..63b2a9b
--- /dev/null
+++ b/app/composables/global.ts
@@ -0,0 +1 @@
+export const recipePanelRef = ref()
diff --git a/app/composables/helper.ts b/app/composables/helper.ts
index f8234ea..a6499ee 100644
--- a/app/composables/helper.ts
+++ b/app/composables/helper.ts
@@ -4,6 +4,8 @@ import { isClient, useElementBounding } from '@vueuse/core'
 /**
  * trigger show invisible element
  * @param target
+ *
+ * @deprecated use scrollIntoView instead
  */
 export function useInvisibleElement(target: MaybeComputedElementRef<HTMLElement>) {
   const { top } = useElementBounding(target)
diff --git a/app/constants/index.ts b/app/constants/index.ts
index 68213f3..874d475 100644
--- a/app/constants/index.ts
+++ b/app/constants/index.ts
@@ -4,4 +4,6 @@ export const appDescription = '好的，今天我们来做菜！'
 export const namespace = 'cook'
 export const lastDbUpdated = '2023-11-11 19:51:02'
 
+export const icp = '苏ICP备17038157号'
+
 export * from './links'
diff --git a/app/constants/links.ts b/app/constants/links.ts
index c897da8..4a6058a 100644
--- a/app/constants/links.ts
+++ b/app/constants/links.ts
@@ -7,6 +7,8 @@ export const links = {
    * 兔小巢反馈
    */
   feedback: 'https://support.qq.com/product/507827',
+  githubIssue: 'https://github.com/YunYouJun/cook/issues',
+  githubDiscussions: 'https://github.com/YunYouJun/cook/discussions',
 
   /**
    * changelog
diff --git a/app/data/incompatible-foods.csv b/app/data/incompatible-foods.csv
index a098c67..93f353b 100644
--- a/app/data/incompatible-foods.csv
+++ b/app/data/incompatible-foods.csv
@@ -1,6 +1,6 @@
 foodA,foodB,reason
-番茄,黄瓜,黄瓜中含有维生素C分解酶，会破坏番茄中的维生素C，营养流失严重
-牛奶,韭菜,牛奶与韭菜同食会影响钙的吸收，降低营养价值
-土豆,番茄,土豆会产生大量的盐酸，番茄在较强的酸性环境中会产生不溶于水的沉淀
-白萝卜,胡萝卜,白萝卜中的维生素C会被胡萝卜中的抗坏血酸酵素破坏
-芹菜,黄瓜,芹菜中的维生素C会被黄瓜中的维生素C分解酶破坏
+番茄,黄瓜,黄瓜中含有维生素C分解酶，会破坏番茄中的维生素C，营养流失严重。
+牛奶,韭菜,牛奶与韭菜同食会影响钙的吸收，降低营养价值。
+土豆,番茄,土豆会产生大量的盐酸，番茄在较强的酸性环境中会产生不溶于水的沉淀。
+白萝卜,胡萝卜,白萝卜中的维生素C会被胡萝卜中的抗坏血酸酵素破坏。
+芹菜,黄瓜,芹菜中的维生素C会被黄瓜中的维生素C分解酶破坏。
diff --git a/app/pages/about.vue b/app/pages/about.vue
index a7b8be0..6960541 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -1,5 +1,16 @@
 <template>
-  <div>
-    关于
-  </div>
+  <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>
+      <TheAboutList />
+    </ion-content>
+  </ion-page>
 </template>
diff --git a/app/pages/help.vue b/app/pages/help.vue
index 6553f42..a95e0b8 100644
--- a/app/pages/help.vue
+++ b/app/pages/help.vue
@@ -1,15 +1,20 @@
+<script setup lang="ts">
+// help
+</script>
+
 <template>
-  <div>
-    <div class="w-full">
-      <CommonHeader>
-        帮助
-      </CommonHeader>
+  <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>
 
-      <InstallPwa />
-
-      <FeedbackActions />
-
-      <div class="mx-auto p-2 rounded-2xl max-w-md w-full" text-left>
+    <ion-content class="w-full">
+      <div class="mx-auto max-w-md w-full rounded-2xl p-2" text-left>
         <FAQItem title="未来计划？">
           计划增加新功能，如自定义菜谱，与使用其他用户分享的菜谱。
         </FAQItem>
@@ -96,7 +101,7 @@
               小玩具们
             </a>。
 
-            <a py-4 inline-flex href="https://cdn.yunyoujun.cn/img/about/white-qrcode-and-search.jpg" target="_blank">
+            <a inline-flex py-4 href="https://cdn.yunyoujun.cn/img/about/white-qrcode-and-search.jpg" target="_blank">
               <img src="https://cdn.yunyoujun.cn/img/about/white-qrcode-and-search.jpg">
             </a>
           </div>
@@ -108,7 +113,7 @@
             感谢以下小伙伴为本项目提供的数据支持和 QA ！
           </p>
 
-          <ul text-sm mt-2 text-left>
+          <ul mt-2 text-left text-sm>
             <li>
               <a href="https://weibo.com/runny" target="_blank">Runny</a>
             </li>
@@ -135,7 +140,7 @@
           </div>
         </FAQItem>
       </div>
-    </div>
-    <BaseFooter mt-4 />
-  </div>
+      <BaseFooter mt-4 />
+    </ion-content>
+  </ion-page>
 </template>
diff --git a/app/pages/tabs/home/index.vue b/app/pages/tabs/home/index.vue
index 81113bd..3c11900 100644
--- a/app/pages/tabs/home/index.vue
+++ b/app/pages/tabs/home/index.vue
@@ -7,6 +7,8 @@ useHead({
   title: '食用手册',
 })
 
+const ionContentRef = ref<HTMLElement>()
+
 const rStore = useRecipeStore()
 </script>
 
@@ -30,7 +32,7 @@ const rStore = useRecipeStore()
         </ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="text-center">
+    <ion-content ref="ionContentRef" class="text-center">
       <ChooseFood />
       <SimpleCopyright />
     </ion-content>
diff --git a/app/pages/tabs/my/index.vue b/app/pages/tabs/my/index.vue
index 55e14d6..61cd593 100644
--- a/app/pages/tabs/my/index.vue
+++ b/app/pages/tabs/my/index.vue
@@ -8,44 +8,72 @@ definePageMeta({
 
 <template>
   <ion-page>
-    <CommonHeader>
-      我的
-    </CommonHeader>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>我的</ion-title>
+      </ion-toolbar>
+    </ion-header>
 
-    <div
-      class="mx-auto max-w-md w-full"
-      px-2
-      text-left
-    >
-      <div mt-2 gap="3" grid="~ cols-3">
-        <YlfIconItem to="/recipes/history" icon="i-ri-history-line" label="历史记录" />
-        <YlfIconItem to="/recipes/collect" icon="i-ri-star-line" label="我的收藏" />
-        <YlfIconItem to="/cookbooks" icon="i-ri-article-line" label="自定义菜谱" />
-      </div>
+    <ion-content>
+      <!-- TODO -->
+      <!-- <ion-list :inset="true">
+        <ion-item router-link="/recipes/history">
+          <ion-icon slot="start" :icon="ioniconsTimeOutline" />
+          <ion-label>历史记录</ion-label>
+        </ion-item>
+        <ion-item router-link="/recipes/collect">
+          <ion-icon slot="start" :icon="ioniconsStarOutline" />
+          <ion-label>我的收藏</ion-label>
+        </ion-item>
+        <ion-item router-link="/cookbooks">
+          <ion-icon slot="start" :icon="ioniconsBookOutline" />
+          <ion-label>自定义菜谱</ion-label>
+        </ion-item>
+      </ion-list> -->
 
-      <YlfForm>
-        <YlfFormItem icon="i-ri-feedback-line" label="立即反馈" :to="links.feedback" target="_blank" />
-        <YlfFormItem icon="i-ri-mail-send-line" label="立即投稿" :to="links.contribute" target="_blank" />
-      </YlfForm>
+      <ion-list :inset="true">
+        <ion-item :href="links.githubIssue" target="_blank">
+          <ion-icon slot="start" :icon="ioniconsChatbubbleEllipsesOutline" />
+          <ion-label>问题反馈</ion-label>
+        </ion-item>
+        <ion-item :href="links.githubDiscussions" target="_blank">
+          <ion-icon slot="start" :icon="ioniconsChatbubblesOutline" />
+          <ion-label>参与讨论</ion-label>
+        </ion-item>
+        <ion-item :href="links.contribute" target="_blank">
+          <ion-icon slot="start" :icon="ioniconsMailOutline" />
+          <ion-label>菜谱投稿</ion-label>
+        </ion-item>
+      </ion-list>
 
-      <YlfForm>
-        <YlfFormItem icon="i-ri-file-history-line" label="更新日志" :to="links.changelog" target="_blank" />
-      </YlfForm>
+      <ion-list :inset="true">
+        <ion-item :href="links.changelog" target="_blank">
+          <ion-icon slot="start" :icon="ioniconsDocumentTextOutline" />
+          <ion-label>更新日志</ion-label>
+        </ion-item>
+      </ion-list>
 
-      <YlfForm>
-        <YlfFormItem icon="i-ri-settings-line" label="设置" to="/settings" />
-      </YlfForm>
+      <ion-list :inset="true">
+        <ion-item router-link="/settings">
+          <ion-icon slot="start" :icon="ioniconsSettingsOutline" />
+          <ion-label>设置</ion-label>
+        </ion-item>
+      </ion-list>
+
+      <ion-list :inset="true">
+        <ion-item router-link="/help">
+          <ion-icon slot="start" :icon="ioniconsHelpCircleOutline" />
+          <ion-label>帮助</ion-label>
+        </ion-item>
+        <ion-item router-link="/about">
+          <ion-icon slot="start" :icon="ioniconsInformationCircleOutline" />
+          <ion-label>关于</ion-label>
+        </ion-item>
+      </ion-list>
 
       <!-- <YlfForm>
         <YlfFormItem icon="i-ri-article-line" label="自定义菜谱 TODO" to="/cookbooks/" />
       </YlfForm> -->
-
-      <YlfForm>
-        <YlfFormItem icon="i-ri-question-line" label="帮助" to="/help" />
-        <YlfFormItem icon="i-ri-information-line" label="关于" to="/help" />
-      </YlfForm>
-    </div>
-
-    <BaseFooter mt-4 />
+    </ion-content>
   </ion-page>
 </template>
diff --git a/app/pages/tabs/random/index.vue b/app/pages/tabs/random/index.vue
index 0ce28bf..4627004 100644
--- a/app/pages/tabs/random/index.vue
+++ b/app/pages/tabs/random/index.vue
@@ -17,8 +17,10 @@ useHead({
         </ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content flex flex-grow flex-col items-center justify-center>
-      <RandomRecipe />
+    <ion-content>
+      <div class="flex flex-grow flex-col items-center justify-center">
+        <RandomRecipe />
+      </div>
     </ion-content>
   </ion-page>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 96ff941..0054ace 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -117,7 +117,7 @@ export default defineNuxtConfig({
     css: {
       core: true,
       basic: true,
-      utilities: true,
+      // utilities: true,
     },
   },