feat: 集成图标模块

layouts/vdoing.vue

@@ -10,9 +10,7 @@
 
     <div class="sidebar-mask" @click="methods.toggleSidebar(false)"></div>
 
-    <!--
     <div v-if="appConfig?.themeConfig?.sidebarHoverTriggerOpen !== false" class="sidebar-hover-trigger"></div>
-    -->
 
     <!--
     <Sidebar :items="sidebarItems" @toggle-sidebar="methods.toggleSidebar" v-show="showSidebar">
@@ -23,11 +21,14 @@
         <div class="sidebar-slot sidebar-slot-bottom" v-html="sidebarSlotBottom"></div>
       </template>
       <slot name="sidebar-top" #top />
-      <slot name="sidebar-bottom" #bottom /> 
+      <slot name="sidebar-bottom" #bottom />
     </Sidebar>
     -->
 
-    <slot />
+    <!-- 正文 -->
+    <div class="content-main">
+      <slot />
+    </div>
 
     <!-- 页脚 -->
     <Footer />
@@ -218,6 +219,9 @@ watch(
 <style lang="stylus">
 @require "../assets/vdoing/styles/index"
 
+.content-main
+  margin-top 80px
+
 .custom-html-window
   position fixed
   bottom 0

nuxt.config.ts

@@ -9,7 +9,16 @@ console.log("isDev=>", isDev)
 console.log("appBase=>", appBase)
 
 export default defineNuxtConfig({
-  modules: ["@nuxt/content", "nuxt-meilisearch"],
+  // content
+  // https://content.nuxtjs.org/guide/writing/content-directory
+
+  // meilisearch
+  // https://github.com/xlanex6/nuxt-meilisearch
+  // https://docs.meilisearch.com/learn/getting_started/quick_start.html
+
+  // unplugin-icons
+  // https://github.com/antfu/unplugin-icons
+  modules: ["@nuxt/content", "nuxt-meilisearch", ["unplugin-icons/nuxt", {}]],
   content: {
     // https://content.nuxtjs.org/api/configuration
   },
@@ -21,11 +30,11 @@ export default defineNuxtConfig({
       extends: "../tsconfig.base.json",
     },
   },
-  // vite: {
-  //   build: {
-  //     minify: false,
-  //   },
-  // },
+  vite: {
+    build: {
+      minify: !isDev,
+    },
+  },
   app: {
     baseURL: appBase,
     head: {

package.json

@@ -19,6 +19,7 @@
     "prettier": "prettier --write ."
   },
   "devDependencies": {
+    "@iconify/json": "^2.2.36",
     "@nuxt/content": "^2.5.2",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/lodash": "^4.14.191",
@@ -33,6 +34,7 @@
     "stylelint-stylus": "^0.18.0",
     "stylus": "^0.59.0",
     "typescript": "^4.9.5",
+    "unplugin-icons": "^0.15.3",
     "vue-tsc": "^1.2.0"
   },
   "dependencies": {

pages/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div>
+    <icon-accessibility />
+    <icon-account-box style="font-size: 2em; color: red" />
+
     <div style="margin-top: 100px" v-for="testItem in testItems.items">
       index
       <p>{{ testItem }}</p>
@@ -12,6 +15,8 @@ import ZhiUtil from "~/utils/zhiUtil"
 import { version } from "~/package.json"
 import Env from "zhi-env"
 import ThemeFromEnum from "~/utils/enums/themeFromEnum"
+import IconAccessibility from "~icons/carbon/accessibility"
+import IconAccountBox from "~icons/mdi/account-box"
 
 const nuxtEnv = useRuntimeConfig()
 const env = new Env(nuxtEnv)

types/custom.d.ts

@@ -1,3 +1,8 @@
 // declare module "vue-instantsearch/vue3/es"
 declare module "vue-instantsearch/vue3/es"
 declare module "good-storage"
+declare module "~icons/*" {
+  import { FunctionalComponent, SVGAttributes } from "vue"
+  const component: FunctionalComponent<SVGAttributes>
+  export default component
+}