简单可爱的隔离食用手册，你值得收藏！

发布日期: 2022-04-17

大家好呀，今天的我是中华小当家开源小妹~🍗🍖🍤🍳

疫情期间，大家一定要注意防护呀。小妹也有朋友因为防控升级，不得不居家监测和居家隔离。外出好吃好喝的日子姑且要盼望一段时间了，眼下要解决的问题是：如何用手头简单的食材烹饪出健康美味的饭菜呢？小妹这就给大家推荐一个新鲜出炉的开源项目——隔离食用手册。

隔离食用手册

隔离食用手册是一个非常简约可爱的开源项目，使用 Vue 进行开发。它本质上是个简单实用的菜谱。你可以在网站的页面上选择家里有的蔬菜、肉蛋、主食以及可用的厨具，便可以筛选出使用这些食材烹饪的美食菜谱。点击菜谱就可以跳转到 B 站上该美食 up 主的烹饪教学视频。

实现原理

筛选菜谱的逻辑很简单。首先项目会保存一份 csv 文档，存储了菜谱名、食材、菜谱链接、制作厨具等信息，如图：

项目初始化时会将这个文档里的信息加载到列表里。

之后，在点击不同类型的食材时，都会触发toggleStuff方法，让选中的食材参与到列表的过滤当中，主要是这两段逻辑：

function toggleStuff(name: string) {
  if (!curStuff)
    return
  if (curStuff.value.has(name))
    curStuff.value.delete(name)
  else
    curStuff.value.add(name)
}

const displayedRecipe = computed(() => {
  const recipes = recipe.value.filter((item) => {
    if (strict.value) {
      const stuffFlag = curStuff.value.every(stuff => item.stuff.includes(stuff))
      const toolFlag = item.tools?.includes(curTool.value)
      return curTool.value ? stuffFlag && toolFlag : stuffFlag
    }
    else {
      const stuffFlag = curStuff.value.some(stuff => item.stuff.includes(stuff))
      const toolFlag = item.tools?.includes(curTool.value)

      // 同时存在 厨具和材料，则同时判断
      if (curTool.value && curStuff.value.length) {
        return stuffFlag && toolFlag
      }
      else {
        if (curStuff.value.length)
          return stuffFlag
        else if (curTool.value)
          return toolFlag

        return false
      }
    }
  })
  return recipes
})