From ca86612bdc9d5940d98ae90356c3308afa861692 Mon Sep 17 00:00:00 2001 From: YunYouJun Date: Thu, 14 Apr 2022 23:56:45 +0800 Subject: [PATCH] feat: add tools select --- package.json | 3 +++ pnpm-lock.yaml | 24 +++++++++++++++++++++++ src/components.d.ts | 1 + src/components/ChooseFood.vue | 36 ++++++++++++++++++++++++++++++----- src/components/ToolTag.vue | 16 ++++++++++++++++ src/data/foot.ts | 27 ++++++++++++++++++++++++++ src/stores/recipe.ts | 3 +++ unocss.config.ts | 11 ++++++++++- 8 files changed, 115 insertions(+), 6 deletions(-) create mode 100644 src/components/ToolTag.vue diff --git a/package.json b/package.json index cd9fdb2..f1e532b 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,9 @@ }, "devDependencies": { "@antfu/eslint-config": "^0.20.2", + "@iconify-json/fe": "^1.1.1", + "@iconify-json/gg": "^1.1.1", + "@iconify-json/ic": "^1.1.2", "@iconify-json/mdi": "^1.1.9", "@iconify-json/ri": "^1.1.1", "@types/markdown-it-link-attributes": "^3.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 37a618f..70c8769 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3,6 +3,9 @@ lockfileVersion: 5.3 specifiers: '@antfu/eslint-config': ^0.20.2 '@gtm-support/vue-gtm': ^1.3.0 + '@iconify-json/fe': ^1.1.1 + '@iconify-json/gg': ^1.1.1 + '@iconify-json/ic': ^1.1.2 '@iconify-json/mdi': ^1.1.9 '@iconify-json/ri': ^1.1.1 '@types/markdown-it-link-attributes': ^3.0.1 @@ -53,6 +56,9 @@ dependencies: devDependencies: '@antfu/eslint-config': 0.20.2_eslint@8.13.0+typescript@4.6.3 + '@iconify-json/fe': 1.1.1 + '@iconify-json/gg': 1.1.1 + '@iconify-json/ic': 1.1.2 '@iconify-json/mdi': 1.1.9 '@iconify-json/ri': 1.1.1 '@types/markdown-it-link-attributes': 3.0.1 @@ -1388,6 +1394,24 @@ packages: resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} dev: true + /@iconify-json/fe/1.1.1: + resolution: {integrity: sha512-FW5XldJ48Igz99Xvhfi3iYou0/JtvSvhTq1BHgftaxyirfMp12fNSqtYStvSA4QTSZkeHVOiAEi4TNeIEUPT7A==} + dependencies: + '@iconify/types': 1.1.0 + dev: true + + /@iconify-json/gg/1.1.1: + resolution: {integrity: sha512-M0DqErX7GItsiaPt9Se1JvFD5XfcCqW94CL5310dy9JunkNhnKxziNGRSwXgIc13+3bR4vaMEQeeZ+SPWyYdWA==} + dependencies: + '@iconify/types': 1.1.0 + dev: true + + /@iconify-json/ic/1.1.2: + resolution: {integrity: sha512-OXLXNMECrwg1N7HqG9z+p8eF9NleoV5tZvIH/W3ip3HdZsg1VbEWl0RpI9K5VJjT95xVn2n+gcAgLPD5HNAsXg==} + dependencies: + '@iconify/types': 1.1.0 + dev: true + /@iconify-json/mdi/1.1.9: resolution: {integrity: sha512-iZY3d7nLmEhSxLU5YBHIxVVPySqNjj6zYcf448TXGBPp2PyToITCOuLEaub0rQ9jBAPOlupQsuPX9ylBfgIJ1w==} dependencies: diff --git a/src/components.d.ts b/src/components.d.ts index 86bea61..cfa4c63 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -15,6 +15,7 @@ declare module '@vue/runtime-core' { RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] StapleTag: typeof import('./components/StapleTag.vue')['default'] + ToolTag: typeof import('./components/ToolTag.vue')['default'] VegetableTag: typeof import('./components/VegetableTag.vue')['default'] } } diff --git a/src/components/ChooseFood.vue b/src/components/ChooseFood.vue index bd49a2e..cddd0e7 100644 --- a/src/components/ChooseFood.vue +++ b/src/components/ChooseFood.vue @@ -1,9 +1,10 @@ + + diff --git a/src/data/foot.ts b/src/data/foot.ts index 15b50a9..081dc9d 100644 --- a/src/data/foot.ts +++ b/src/data/foot.ts @@ -15,6 +15,10 @@ export interface StuffItem { * 别名，譬如：西红柿/番茄 */ alias?: string + /** + * 图标名称 + */ + icon?: string } /** @@ -148,3 +152,26 @@ export const staple: StuffItem[] = [ emoji: '🍜', }, ] + +export const tools: StuffItem[] = [ + { + name: '烤箱', + emoji: '', + icon: 'i-mdi-toaster-oven', + }, + { + name: '空气炸锅', + emoji: '', + icon: 'i-fe-frying-pan', + }, + { + name: '微波炉', + emoji: '', + icon: 'i-ic-outline-microwave', + }, + { + name: '电饭煲', + emoji: '', + icon: 'i-gg-smart-home-cooker', + }, +] diff --git a/src/stores/recipe.ts b/src/stores/recipe.ts index d1283f1..3ce6652 100644 --- a/src/stores/recipe.ts +++ b/src/stores/recipe.ts @@ -2,6 +2,8 @@ import { acceptHMRUpdate, defineStore } from 'pinia' export const useRecipeStore = defineStore('recipe', () => { const curStuff = ref(new Set()) + const curTool = ref('') + const selectedStuff = computed(() => Array.from(curStuff.value)) function toggleStuff(name: string) { @@ -14,6 +16,7 @@ export const useRecipeStore = defineStore('recipe', () => { } return { + curTool, selectedStuff, toggleStuff, } diff --git a/unocss.config.ts b/unocss.config.ts index 5b94135..c9c6054 100644 --- a/unocss.config.ts +++ b/unocss.config.ts @@ -9,6 +9,15 @@ import { transformerVariantGroup, } from 'unocss' +import { tools } from './src/data/foot' + +const safelist = 'm-auto text-left'.split(' ') + +tools.forEach((item) => { + if (item.icon) + safelist.push(item.icon) +}) + export default defineConfig({ shortcuts: [ ['tag', 'text-sm cursor-pointer inline-flex justify-center items-center transition shadow hover:shadow-md'], @@ -35,5 +44,5 @@ export default defineConfig({ transformerDirectives(), transformerVariantGroup(), ], - safelist: 'prose prose-sm m-auto text-left'.split(' '), + safelist, })