feat: add toggle icon detail

src/components/ChooseFood.vue

@@ -154,7 +154,7 @@ const clickTool = (item: StuffItem) => {
 
   <div m="2 t-4" p="2" class="transition shadow hover:shadow-md" bg="gray-400/8">
     <h2 text="xl" font="bold" p="1">
-      🍲 今天的菜
+      🍲 今天的饭菜
       <br>
       <small class="inline-flex justify-center items-center" text="xs">菜谱数据来源：
         <a class="inline-flex justify-center items-center" style="color: #ea7a99" href="https://www.bilibili.com/v/food" target="_blank">

src/pages/index.vue

@@ -1,7 +1,18 @@
+<script lang="ts" setup>
+import { useRecipeStore } from '~/stores/recipe'
+const rStore = useRecipeStore()
+</script>
+
 <template>
   <div>
     <div text-4xl m="t-4">
-      <div class="bg-gradient-to-b from-dark-100 to-black-900 dark:(from-stone-200 to-light-900)" i-mdi-pot-steam-outline inline-block />
+      <button
+        class="cursor-pointer transition hover:(text-green-600) active:text-green-800"
+        @click="rStore.reset"
+      >
+        <div v-if="rStore.selectedStuff.length" i-mdi-pot-steam-outline />
+        <div v-else i-mdi-pot-mix-outline />
+      </button>
     </div>
     <p text="sm" m="b-4">
       好的，今天我们来做菜！

src/stores/recipe.ts

@@ -25,11 +25,21 @@ export const useRecipeStore = defineStore('recipe', () => {
       curTools.value.add(name)
   }
 
+  /**
+   * 重置
+   */
+  function reset() {
+    curStuff.value.clear()
+    curTools.value.clear()
+    curTools.value.add('一口大锅')
+  }
+
   return {
     selectedTools,
     selectedStuff,
     toggleStuff,
     toggleTools,
+    reset,
   }
 })