feat: basic interactive & tags

src/components/ChooseFood.vue

@@ -1,11 +1,80 @@
 <script lang="ts" setup>
+import MeatTag from './MeatTag.vue'
+import StapleTag from './StapleTag.vue'
+import DishTag from './DishTag.vue'
+import { meat, staple, vegetable } from '~/data/foot'
 import recipeData from '~/data/recipe.json'
 import type { Recipe } from '~/types'
+import { useRecipeStore } from '~/stores/recipe'
 const recipe = ref(recipeData as Recipe)
+
+const rStore = useRecipeStore()
+
+const displayedRecipe = computed(() => {
+  return recipe.value.filter((item) => {
+    return Array.from(rStore.curStuff).some(stuff => item.stuff.includes(stuff))
+  })
+})
 </script>
 
 <template>
+  <div m="y-4">
+    <h2 text="xl" font="bold" p="1">
+      🥬 蔬菜区
+    </h2>
+    <VegetableTag
+      v-for="item, i in vegetable" :key="i"
+      :active="rStore.curStuff.has(item.name)"
+      @click="rStore.toggleStuff(item.name)"
+    >
+      <span v-if="item.emoji">{{ item.emoji }}</span>
+      <img v-else-if="item.image" class="inline-flex" w="3" :src="item.image">
+      <span m="l-1">
+        {{
+          item.name
+        }}
+      </span>
+    </VegetableTag>
+  </div>
+  <div m="y-4">
+    <h2 text="xl" font="bold" p="1">
+      🥩 荤菜区
+    </h2>
+    <MeatTag
+      v-for="item, i in meat" :key="i"
+      :active="rStore.curStuff.has(item.name)"
+      @click="rStore.toggleStuff(item.name)"
+    >
+      <span>{{ item.emoji }}</span>
+      <span m="l-1">
+        {{
+          item.name
+        }}
+      </span>
+    </MeatTag>
+  </div>
+  <div m="y-4">
+    <h2 text="xl" font="bold" p="1">
+      🍚 主食区
+    </h2>
+    <StapleTag
+      v-for="item, i in staple" :key="i"
+      :active="rStore.curStuff.has(item.name)"
+      @click="rStore.toggleStuff(item.name)"
+    >
+      <span>{{ item.emoji }}</span>
+      <span m="l-1">
+        {{
+          item.name
+        }}
+      </span>
+    </StapleTag>
+  </div>
+  <hr p="2" opacity="10">
   <div>
-    <span v-for="item, i in recipe" :key="i" class="tag">{{ item.name }}</span>
+    <h2 text="xl" font="bold" p="1">
+      📄 菜谱
+    </h2>
+    <DishTag v-for="item, i in displayedRecipe" :key="i" :dish="item" />
   </div>
 </template>

src/components/DishTag.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { RecipeItem } from '~/types'
+defineProps<{
+  dish: RecipeItem
+}>()
+</script>
+
+<template>
+  <a
+    :href="dish.link" target="_blank" class="tag rounded" p="x-2"
+    border="~ blue-200 dark:blue-800"
+    bg="blue-300 opacity-20"
+  >
+    <span text="sm blue-700 dark:blue-200">{{ dish.name }}</span>
+  </a>
+</template>

src/components/MeatTag.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+defineProps<{
+  active: boolean
+}>()
+</script>
+
+<template>
+  <span
+    class="tag rounded" p="x-2"
+    border="~ red-200 dark:red-800"
+    :bg="active ? 'red-500 opacity-90' : 'red-300 opacity-20'"
+    :text="active ? 'red-100' : 'red-800 dark:red-200'"
+  >
+    <slot />
+  </span>
+</template>

src/components/Menu.vue

@@ -3,7 +3,7 @@ import { toggleDark } from '~/composables'
 </script>
 
 <template>
-  <nav text-xl mt-6>
+  <nav text-xl p="t-6">
     <RouterLink class="icon-btn mx-2" to="/" title="首页">
       <div i-ri-home-2-line />
     </RouterLink>

src/components/StapleTag.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+defineProps<{
+  active: boolean
+}>()
+</script>
+
+<template>
+  <span
+    class="tag rounded" p="x-2" border="~ yellow-200 dark:yellow-800"
+    :bg="active ? 'yellow-500 dark:yellow-600 opacity-100' : 'yellow-300 opacity-20'"
+    :text="active ? 'yellow-100' : 'yellow-800 dark:yellow-200'"
+  >
+    <slot />
+  </span>
+</template>

src/components/VegetableTag.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+defineProps<{
+  active: boolean
+}>()
+</script>
+
+<template>
+  <span
+    class="tag rounded" p="x-2"
+    border="~ green-200 dark:green-800"
+    :bg="active ? 'green-600 opacity-90' : 'green-300 opacity-20'"
+    :text="active ? 'green-100' : 'green-800 dark:green-200'"
+  >
+    <slot />
+  </span>
+</template>