feat: revert strict mode
This commit is contained in:
@@ -1,6 +1,8 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useGtm } from '@gtm-support/vue-gtm'
|
import { useGtm } from '@gtm-support/vue-gtm'
|
||||||
import { isClient } from '@vueuse/core'
|
import { isClient } from '@vueuse/core'
|
||||||
|
import { storeToRefs } from 'pinia'
|
||||||
|
import Switch from './Switch.vue'
|
||||||
import type { StuffItem } from '~/data/food'
|
import type { StuffItem } from '~/data/food'
|
||||||
import { meat, staple, tools, vegetable } from '~/data/food'
|
import { meat, staple, tools, vegetable } from '~/data/food'
|
||||||
import recipeData from '~/data/recipe.json'
|
import recipeData from '~/data/recipe.json'
|
||||||
@@ -12,11 +14,11 @@ import { useInvisibleElement } from '~/composables/helper'
|
|||||||
const recipe = ref<Recipe>(recipeData as Recipe)
|
const recipe = ref<Recipe>(recipeData as Recipe)
|
||||||
|
|
||||||
const rStore = useRecipeStore()
|
const rStore = useRecipeStore()
|
||||||
|
const { strict } = storeToRefs(rStore)
|
||||||
const curStuff = computed(() => rStore.selectedStuff)
|
const curStuff = computed(() => rStore.selectedStuff)
|
||||||
const curTools = computed(() => rStore.selectedTools)
|
const curTools = computed(() => rStore.selectedTools)
|
||||||
|
|
||||||
// 默认严格模式
|
// 默认严格模式
|
||||||
const strict = ref(true)
|
|
||||||
const displayedRecipe = computed(() => {
|
const displayedRecipe = computed(() => {
|
||||||
return recipe.value.filter((item) => {
|
return recipe.value.filter((item) => {
|
||||||
if (strict.value) {
|
if (strict.value) {
|
||||||
@@ -207,6 +209,7 @@ const { isVisible, show } = useInvisibleElement(recipePanel)
|
|||||||
<h2 text="xl" font="bold" p="1">
|
<h2 text="xl" font="bold" p="1">
|
||||||
🍲 来看看组合出的菜谱吧!
|
🍲 来看看组合出的菜谱吧!
|
||||||
</h2>
|
</h2>
|
||||||
|
<Switch />
|
||||||
<Transition mode="out-in">
|
<Transition mode="out-in">
|
||||||
<div p="2">
|
<div p="2">
|
||||||
<span v-if="!curStuff.length && !curTools.length" text="sm" p="2">
|
<span v-if="!curStuff.length && !curTools.length" text="sm" p="2">
|
||||||
|
|||||||
@@ -6,16 +6,16 @@ const { strict } = storeToRefs(rStore)
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="inline-flex justify-center items-center" m="y-4">
|
<div class="inline-flex justify-center items-center" m="t-2">
|
||||||
<span :class="!strict && 'text-green-600'" font="bold" m="x-1" @click="strict = false">
|
<span :class="!strict && 'text-green-600'" font="bold" m="x-1" @click="strict = false">
|
||||||
可做的所有菜
|
模糊匹配
|
||||||
</span>
|
</span>
|
||||||
<label m="x-1" class="switch">
|
<label m="x-1" class="switch">
|
||||||
<input v-model="strict" type="checkbox">
|
<input v-model="strict" type="checkbox">
|
||||||
<span class="inline-flex justify-center items-center slider round" />
|
<span class="inline-flex justify-center items-center slider round" />
|
||||||
</label>
|
</label>
|
||||||
<span :class="strict && 'text-green-600'" font="bold" m="x-1" @click="strict = true">
|
<span :class="strict && 'text-green-600'" font="bold" m="x-1" @click="strict = true">
|
||||||
一起做一道菜
|
精准匹配
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { acceptHMRUpdate, defineStore } from 'pinia'
|
import { acceptHMRUpdate, defineStore } from 'pinia'
|
||||||
|
|
||||||
export const useRecipeStore = defineStore('recipe', () => {
|
export const useRecipeStore = defineStore('recipe', () => {
|
||||||
const strict = ref(true)
|
const strict = ref(false)
|
||||||
|
|
||||||
const curStuff = ref(new Set<string>())
|
const curStuff = ref(new Set<string>())
|
||||||
const curTools = ref(new Set<string>())
|
const curTools = ref(new Set<string>())
|
||||||
|
|||||||
Reference in New Issue
Block a user