chore: upgrade deps & fix lint

.gitignore

@@ -1,5 +1,5 @@
 # auto generate
-src/data/recipe.json
+data/recipe.json
 
 .DS_Store
 .vite-ssg-dist
@@ -7,6 +7,7 @@ src/data/recipe.json
 *.local
 
 esbuild-kit
+tsx-*
 
 # nuxt
 node_modules

.vscode/settings.json

@@ -1,11 +1,69 @@
 {
   "cSpell.words": ["Vitesse", "Vite", "unocss", "vitest", "vueuse", "pinia", "demi", "antfu", "iconify", "intlify", "vitejs", "unplugin", "pnpm"],
-  "prettier.enable": false,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-  },
   "files.associations": {
-    "*.css": "postcss",
+    "*.css": "postcss"
   },
+
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
   "editor.formatOnSave": false,
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    {
+      "rule": "style/*",
+      "severity": "off"
+    },
+    {
+      "rule": "*-indent",
+      "severity": "off"
+    },
+    {
+      "rule": "*-spacing",
+      "severity": "off"
+    },
+    {
+      "rule": "*-spaces",
+      "severity": "off"
+    },
+    {
+      "rule": "*-order",
+      "severity": "off"
+    },
+    {
+      "rule": "*-dangle",
+      "severity": "off"
+    },
+    {
+      "rule": "*-newline",
+      "severity": "off"
+    },
+    {
+      "rule": "*quotes",
+      "severity": "off"
+    },
+    {
+      "rule": "*semi",
+      "severity": "off"
+    }
+  ],
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
 }

components/ChooseFood.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import type { StuffItem } from '~/data/food'
+import type { StuffItem } from '~/types'
 import { meat, staple, tools, vegetable } from '~/data/food'
 
 import { useEmojiAnimation } from '~/composables/animation'

components/RecipePanel.vue

@@ -29,37 +29,35 @@ const showTooltip = computed(() => !selectedStuff.value.length && !curTool.value
       <SearchFoodInput v-if="showSearchInput" />
 
       <Transition mode="out-in">
-        <div class="cook-filter-recipes">
+        <span v-if="showTooltip" text="sm" p="2">
-          <span v-if="showTooltip" text="sm" p="2">
+          你要先选食材或工具哦～
-            你要先选食材或工具哦～
+        </span>
-          </span>
 
-          <div
+        <div
-            v-else-if="rStore.isSearching"
+          v-else-if="rStore.isSearching"
-            relative flex items-center justify-center p-6
+          relative flex items-center justify-center p-6
-            text-xl
+          text-xl
-          >
+        >
-            <div class="magnifying-glass" i-ri-search-line inline-flex />
+          <div class="magnifying-glass" i-ri-search-line inline-flex />
-          </div>
+        </div>
 
-          <div v-else-if="rStore.displayedRecipe.length">
+        <div v-else-if="rStore.displayedRecipe.length">
-            <DishTag v-for="item, i in rStore.displayedRecipe" :key="i" :dish="item" />
+          <DishTag v-for="item, i in rStore.displayedRecipe" :key="i" :dish="item" />
-          </div>
+        </div>
 
-          <div v-else text="sm">
+        <div v-else text="sm">
-            <span>还没有完美匹配的菜谱呢……</span>
+          <span>还没有完美匹配的菜谱呢……</span>
-            <br>
+          <br>
-            <span>大胆尝试一下，或者</span>
+          <span>大胆尝试一下，或者</span>
-            <a href="#" @click="rStore.reset()">
+          <a href="#" @click="rStore.reset()">
-              <strong>换个组合</strong>
+            <strong>换个组合</strong>
-            </a>
+          </a>
-            <span>？</span>
+          <span>？</span>
-            <br>
+          <br>
-            <div m="t-1">
+          <div m="t-1">
-              <span>欢迎来</span>
+            <span>欢迎来</span>
-              <a class="font-bold text-blue-600 dark:text-blue-400" href="https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=uykkic" target="_blank">这里</a>
+            <a class="font-bold text-blue-600 dark:text-blue-400" href="https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=uykkic" target="_blank">这里</a>
-              <span>反馈新的菜谱！</span>
+            <span>反馈新的菜谱！</span>
-            </div>
           </div>
         </div>
       </Transition>

components/recipe/RecipeTable.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Recipes } from 'types'
+import type { Recipes } from '~/types'
 
 defineProps<{
   recipes: Recipes

components/recipe/RecipeTableItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { RecipeItem } from 'types'
+import type { RecipeItem } from '~/types'
 
 defineProps<{
   index: number

components/tags/DishTag.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { DbRecipeItem } from 'utils/db'
+import type { DbRecipeItem } from '~/utils/db'
 import { tools } from '~/data/food'
 import type { RecipeItem } from '~/types'
 import { getEmojisFromStuff } from '~/utils'

composables/helper.ts

@@ -4,7 +4,6 @@ import { isClient, useElementBounding } from '@vueuse/core'
 /**
  * trigger show invisible element
  * @param target
- * @returns
  */
 export function useInvisibleElement(target: MaybeComputedElementRef<HTMLElement>) {
   const { top } = useElementBounding(target)

composables/recipe.ts

@@ -1,9 +1,8 @@
-import type { DbRecipeItem } from 'utils/db'
+import type { DbRecipeItem } from '~/utils/db'
 
 /**
  * 随机几道菜
  * @param total
- * @returns
  */
 export function useRandomRecipe(total: Ref<number>) {
   const randomRecipes = ref<(DbRecipeItem | undefined)[]>([])

composables/store/recipe.ts

@@ -2,9 +2,8 @@ import { acceptHMRUpdate, defineStore } from 'pinia'
 import { useStorage } from '@vueuse/core'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useGtm } from '@gtm-support/vue-gtm'
-import type { RecipeItem } from 'types'
-import type { StuffItem } from '../../data/food'
 import { db } from '../../utils/db'
+import type { RecipeItem, StuffItem } from '~/types'
 
 const namespace = 'cook'
 
@@ -74,7 +73,6 @@ export const useRecipeStore = defineStore('recipe', () => {
   const isSearching = ref(false)
   /**
    * 搜索菜谱
-   * @returns
    */
   async function searchRecipes() {
     isSearching.value = true

data/food.ts

@@ -1,29 +1,4 @@
-export interface StuffItem {
+import type { StuffItem } from '../types'
-  /**
-   * 食材名称
-   */
-  name: string
-  /**
-   * 例如：🥔
-   */
-  emoji: string
-  /**
-   * 图片链接
-   */
-  image?: string
-  /**
-   * 别名，譬如：西红柿/番茄
-   */
-  alias?: string
-  /**
-   * 图标名称
-   */
-  icon?: string
-  /**
-   * 显示标签
-   */
-  label?: string
-}
 
 /**
  * 素菜

eslint.config.js

@@ -0,0 +1,3 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu()

package.json

@@ -1,7 +1,8 @@
 {
-  "private": true,
+  "type": "module",
   "version": "1.1.6",
-  "packageManager": "pnpm@8.6.10",
+  "private": true,
+  "packageManager": "pnpm@8.10.2",
   "engines": {
     "node": ">=14"
   },
@@ -24,40 +25,40 @@
     "vue-about-me": "^1.2.7"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.40.2",
+    "@antfu/eslint-config": "^1.1.0",
     "@headlessui/vue": "^1.7.16",
-    "@iconify-json/carbon": "^1.1.19",
+    "@iconify-json/carbon": "^1.1.21",
     "@iconify-json/fe": "^1.1.7",
     "@iconify-json/gg": "^1.1.6",
     "@iconify-json/ic": "^1.1.14",
-    "@iconify-json/mdi": "^1.1.54",
+    "@iconify-json/mdi": "^1.1.55",
     "@iconify-json/ri": "^1.1.12",
     "@iconify-json/twemoji": "^1.1.12",
-    "@nuxt/devtools": "^0.8.0",
+    "@nuxt/devtools": "^1.0.0",
     "@nuxtjs/color-mode": "^3.3.0",
-    "@pinia/nuxt": "^0.4.11",
+    "@pinia/nuxt": "^0.5.1",
     "@pinia/testing": "^0.1.3",
-    "@unocss/eslint-config": "^0.55.2",
+    "@unocss/eslint-config": "^0.57.2",
-    "@unocss/nuxt": "^0.55.2",
+    "@unocss/nuxt": "^0.57.2",
-    "@vite-pwa/nuxt": "^0.1.0",
+    "@vite-pwa/nuxt": "^0.1.1",
     "@vue/test-utils": "^2.4.1",
-    "@vueuse/nuxt": "^10.3.0",
+    "@vueuse/nuxt": "^10.5.0",
     "@yunlefun/vue": "^0.0.7",
     "@zadigetvoltaire/nuxt-gtm": "^0.0.13",
     "consola": "^3.2.3",
     "cross-env": "^7.0.3",
     "dexie": "^3.2.4",
-    "eslint": "^8.47.0",
+    "eslint": "^8.53.0",
-    "fake-indexeddb": "^4.0.2",
+    "fake-indexeddb": "^5.0.1",
     "jsdom": "^22.1.0",
-    "nuxt": "^3.6.5",
+    "nuxt": "^3.8.0",
-    "pinia": "^2.1.6",
+    "pinia": "^2.1.7",
-    "sass": "^1.66.1",
+    "sass": "^1.69.5",
     "star-markdown-css": "^0.4.2",
-    "tsx": "^3.12.7",
+    "tsx": "^3.14.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
-    "unocss": "^0.55.2",
+    "unocss": "^0.57.2",
-    "vitest": "^0.34.2",
+    "vitest": "^0.34.6",
-    "vue-tsc": "^1.8.8"
+    "vue-tsc": "^1.8.22"
   }
 }

shims.d.ts

@@ -9,13 +9,15 @@ declare interface Window {
 
 // with vite-plugin-vue-markdown, markdowns can be treat as Vue components
 declare module '*.md' {
-  import { type DefineComponent } from 'vue'
+  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
+
+  const component: DefineComponent<object, object, any>
   export default component
 }
 
 declare module '*.vue' {
-  import { type DefineComponent } from 'vue'
+  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
+
+  const component: DefineComponent<object, object, any>
   export default component
 }

test/component.test.ts

@@ -5,7 +5,7 @@ import { describe, it } from 'vitest'
 // import { createTestingPinia } from '@pinia/testing'
 // import ChooseFood from '../src/components/ChooseFood.vue'
 
-describe('ChooseFood.vue', () => {
+describe('chooseFood.vue', () => {
   it('should render', async () => {
     //     const pinia = createTestingPinia({
     //       createSpy: vi.fn,

types/recipe.ts

@@ -40,3 +40,30 @@ export interface RecipeItem {
 }
 
 export type Recipes = RecipeItem[]
+
+export interface StuffItem {
+  /**
+   * 食材名称
+   */
+  name: string
+  /**
+   * 例如：🥔
+   */
+  emoji: string
+  /**
+   * 图片链接
+   */
+  image?: string
+  /**
+   * 别名，譬如：西红柿/番茄
+   */
+  alias?: string
+  /**
+   * 图标名称
+   */
+  icon?: string
+  /**
+   * 显示标签
+   */
+  label?: string
+}

utils/index.ts

@@ -9,7 +9,6 @@ foodItems.forEach((item) => {
 /**
  * get emojis from stuff name array
  * @param stuff
- * @returns
  */
 export function getEmojisFromStuff(stuff: string[]) {
   const emojis: string[] = stuff.map(name => foodEmojiMap.get(name)).filter(item => !!item)

utils/pwa.ts

@@ -3,7 +3,6 @@ import { isClient } from '@vueuse/core'
 /**
  * - https://web.dev/customize-install/#detect-install
  * - [Trigger installation from your PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Trigger_install_prompt)
- * @returns
  */
 export function installPrompt() {
   if (!isClient)

utils/random.ts

@@ -1,7 +1,5 @@
 /**
  * 生成随机数组
- * @param recipes
- * @returns
  */
 export function generateRandomArray(length: number, total = 1) {
   const randomArr: number[] = []