feat: add ai generate recipe

components/ai/AiChooseFood.vue

@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import type { StuffItem } from '~/types'
+import { meat, staple, vegetable } from '~/data/food'
+
+import { useEmojiAnimation } from '~/composables/animation'
+import { getRecipeImage } from '~/utils/api'
+
+const rStore = useRecipeStore()
+const curStuff = computed(() => rStore.selectedStuff)
+
+const recipeBtnRef = ref<HTMLButtonElement>()
+const { playAnimation } = useEmojiAnimation(recipeBtnRef)
+
+const gtm = useGtm()
+const recipePanelRef = ref()
+const { isVisible, show } = useInvisibleElement(recipePanelRef)
+
+function toggleStuff(item: StuffItem, category = '', _e?: Event) {
+  rStore.toggleStuff(item.name)
+
+  if (curStuff.value.includes(item.name))
+    playAnimation(item.emoji)
+
+  gtm?.trackEvent({
+    event: 'click',
+    category: `${category}_${item.name}`,
+    action: 'click_stuff',
+    label: '食材',
+  })
+  gtm?.trackEvent({
+    event: 'click_stuff',
+    action: item.name,
+  })
+}
+
+// cook recipe
+const recipeImg = ref('')
+async function cook() {
+  const foods = rStore.selectedStuff
+  const img = await getRecipeImage(foods)
+  recipeImg.value = img
+}
+</script>
+
+<template>
+  <div>
+    <h2 m="t-4" text="xl" font="bold" p="1">
+      🥘 先选一下食材
+    </h2>
+    <div>
+      <h2 opacity="90" text="base" font="bold" p="1">
+        🥬 菜菜们
+      </h2>
+      <div>
+        <VegetableTag
+          v-for="item, i in vegetable" :key="i"
+          :active="curStuff.includes(item.name)"
+          @click="toggleStuff(item, 'vegetable')"
+        >
+          <span v-if="item.emoji" class="inline-flex">{{ item.emoji }}</span>
+          <span v-else-if="item.image" class="inline-flex">
+            <img class="inline-flex" w="2" h="2" width="10" height="10" :src="item.image" :alt="item.name">
+          </span>
+          <span class="inline-flex" m="l-1">{{ item.name }}</span>
+        </VegetableTag>
+      </div>
+    </div>
+    <div m="y-4">
+      <h2 opacity="90" text="base" font="bold" p="1">
+        🥩 肉肉们
+      </h2>
+      <div>
+        <MeatTag
+          v-for="item, i in meat" :key="i"
+          :active="curStuff.includes(item.name)"
+          @click="toggleStuff(item, 'meat')"
+        >
+          <span>{{ item.emoji }}</span>
+          <span m="l-1">{{ item.name }}</span>
+        </MeatTag>
+      </div>
+    </div>
+    <div m="y-4">
+      <h2 opacity="90" text="base" font="bold" p="1">
+        🍚 主食也要一起下锅吗？（不选也行）
+      </h2>
+      <div>
+        <StapleTag
+          v-for="item, i in staple" :key="i"
+          :active="curStuff.includes(item.name)"
+          @click="toggleStuff(item, 'staple')"
+        >
+          <span>{{ item.emoji }}</span>
+          <span m="l-1">{{ item.name }}</span>
+        </StapleTag>
+      </div>
+    </div>
+    <!-- <div m="t-4">
+      <h2 text="xl" font="bold" p="1">
+        🍳 再选一下厨具
+      </h2>
+      <div>
+        <ToolTag
+          v-for="item, i in tools" :key="i"
+          :active="curTool === item.name"
+          @click="rStore.clickTool(item)"
+        >
+          <span v-if="item.emoji" class="inline-flex">
+            {{ item.emoji }}
+          </span>
+          <span v-else-if="item.icon" class="inline-flex">
+            <div :class="item.icon" />
+          </span>
+          <span class="inline-flex" m="l-1">{{ item.label || item.name }}</span>
+        </ToolTag>
+      </div>
+    </div> -->
+
+    <Transition>
+      <BasketButton ref="recipeBtnRef" :is-visible="isVisible" @click="show" />
+    </Transition>
+
+    <button
+      class="rounded bg-yellow px-4 py-2 text-orange-900 font-black shadow hover:shadow-md active:shadow-inset"
+      @click="cook()"
+    >
+      做美食 🥘
+    </button>
+
+    <div
+      class="recipe-panel relative shadow transition"
+      m="x-2 y-4" p="2"
+      bg="gray-400/8"
+    >
+      <div text="xl" font="bold" p="1">
+        🍲 来看看制作出的美食吧！
+      </div>
+
+      <div class="cook-recipes text-center" p="2">
+        <img class="m-auto w-25 rounded shadow transition hover:shadow-md" src="https://yunyoujun.cn/images/avatar.jpg" alt="recipes">
+      </div>
+    </div>
+  </div>
+</template>

components/common/SearchRecipe.vue

@@ -25,7 +25,7 @@ const filteredRecipes = computedAsync(async () => {
 
 <template>
   <YlfIconButton
-    absolute right-3 top-5
+    absolute right-3 top-4
     class="icon-btn hover:text-yellow-400 !outline-none"
     text-xl
     title="切换" @click="openModal"