fix: useStorage in ssr & extract random

components/ChooseFood.vue

@@ -13,8 +13,8 @@ const recipeBtn = ref<HTMLButtonElement>()
 const { playAnimation } = useEmojiAnimation(recipeBtn)
 
 const gtm = useGtm()
-const recipePanel = ref()
-const { isVisible, show } = useInvisibleElement(recipePanel)
+const recipePanelRef = ref()
+const { isVisible, show } = useInvisibleElement(recipePanelRef)
 
 function toggleStuff(item: StuffItem, category = '', _e?: Event) {
   rStore.toggleStuff(item.name)
@@ -36,86 +36,76 @@ function toggleStuff(item: StuffItem, category = '', _e?: Event) {
 </script>
 
 <template>
-  <h2 m="t-4" text="xl" font="bold" p="1">
-    🥘 先选一下食材
-  </h2>
   <div>
-    <h2 opacity="90" text="base" font="bold" p="1">
-      🥬 菜菜们
+    <h2 m="t-4" text="xl" font="bold" p="1">
+      🥘 先选一下食材
     </h2>
-    <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 m="y-4">
-    <h2 opacity="90" text="base" font="bold" p="1">
-      🥩 肉肉们
-    </h2>
-    <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 m="y-4">
-    <h2 opacity="90" text="base" font="bold" p="1">
-      🍚 主食也要一起下锅吗？（不选也行）
-    </h2>
-    <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 m="t-4">
-    <h2 text="xl" font="bold" p="1">
-      🍳 再选一下厨具
-    </h2>
-    <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>
+      <h2 opacity="90" text="base" font="bold" p="1">
+        🥬 菜菜们
+      </h2>
+      <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 m="y-4">
+      <h2 opacity="90" text="base" font="bold" p="1">
+        🥩 肉肉们
+      </h2>
+      <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 m="y-4">
+      <h2 opacity="90" text="base" font="bold" p="1">
+        🍚 主食也要一起下锅吗？（不选也行）
+      </h2>
+      <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 m="t-4">
+      <h2 text="xl" font="bold" p="1">
+        🍳 再选一下厨具
+      </h2>
+      <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>
 
-  <Transition>
-    <BasketButton ref="recipeBtn" :is-visible="isVisible" @click="show" />
-  </Transition>
-  <RecipePanel ref="recipePanel" />
+    <Transition>
+      <BasketButton ref="recipeBtn" :is-visible="isVisible" @click="show" />
+    </Transition>
+    <div ref="recipePanelRef">
+      <RecipePanel />
+    </div>
+  </div>
 </template>