擅长不必要的库,减少体积,去除nuxt-image

web/.gitignore

@@ -1,5 +1,6 @@
 # Nuxt dev/build outputs
 .output
+output
 .data
 .nuxt
 .nitro

web/components/Notification.vue

@@ -1,134 +0,0 @@
-<script lang="ts" setup>
-import type {PropType} from "vue";
-
-const props = defineProps({
-  label: String,
-  cardType: String as PropType<'Error' | 'Informative' | 'Success' | 'Warning'>,
-  time: Number,
-  text: String,
-})
-
-const notificationBoxClass = computed(() => ({
-  'Notification-Box': true,
-  'Notification-Box-Error': props.cardType === 'Error',
-  'Notification-Box-Informative': props.cardType === 'Informative',
-  'Notification-Box-Success': props.cardType === 'Success',
-  'Notification-Box-Warning': props.cardType === 'Warning'
-}));
-</script>
-
-<template>
-  <div :class="notificationBoxClass">
-    <div class="Icon">
-      <NuxtImg v-if="cardType==='Success'" src="/Success.svg" width="24"></NuxtImg>
-      <NuxtImg v-if="cardType==='Informative'" src="/Informative.svg" width="24"></NuxtImg>
-      <NuxtImg v-if="cardType==='Warning'" src="/Warning.svg" width="24"></NuxtImg>
-      <NuxtImg v-if="cardType==='Error'" src="/Error.svg" width="24"></NuxtImg>
-    </div>
-    <div class="Text">
-      <h3>{{ label }}</h3>
-      <p>{{ text }}</p>
-    </div>
-    <Icon :stroke-width="1.2" name="X"></Icon>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-@import "base";
-
-.Notification-Box {
-  padding: $padding;
-  display: grid;
-  grid-template-columns: 24px 1fr 18px;
-  gap: $gap*2;
-  grid-template-rows: 1fr;
-  border-radius: 12px;
-
-  > svg {
-    stroke: #979FA9;
-
-    .dark-mode & {
-      stroke: #FFF;
-    }
-  }
-}
-
-.Icon {
-  .dark-mode & {
-    filter: grayscale(30%) brightness(100%);
-  }
-}
-
-.Text {
-  display: flex;
-  flex-direction: column;
-  gap: $gap*.5;
-
-  .dark-mode & {
-    > h3, p {
-      color: #FFF;
-    }
-
-  }
-
-  > h3 {
-    color: #27303A;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 140%; /* 19.6px */
-    text-transform: capitalize;
-  }
-
-  > p {
-    color: #2F3F53;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 160%; /* 19.2px */
-  }
-}
-
-
-.Notification-Box-Success {
-  border: 1.3px solid #48C1B5;
-  background: #F6FFF9;
-
-  .dark-mode & {
-    border: 1.3px solid #43D590;
-    background: unset;
-  }
-
-}
-
-.Notification-Box-Informative {
-
-  border: 1.3px solid #9DC0EE;
-  background: #F5F9FF;
-
-  .dark-mode & {
-    border: 1.3px solid #7BCFED;
-    background: unset;
-  }
-}
-
-.Notification-Box-Warning {
-  border: 1.3px solid #F7D9A4;
-  background: #FFF8EC;
-
-  .dark-mode & {
-    border: 1.3px solid #FFDF8D;
-    background: unset;
-  }
-}
-
-.Notification-Box-Error {
-  border: 1.3px solid #F4B0A1;
-  background: #FFF5F3;
-
-  .dark-mode & {
-    border: 1.3px solid #F0863A;
-    background: unset;
-  }
-}
-</style>

web/components/UserMini.vue

@@ -8,7 +8,11 @@ const userInfo = toRef(MainLayoutStore.UserInfo)
 
 <template>
   <div class="User-Mini-Box">
-    <NuxtImg :src="userInfo.avatar" alt="Avatar" height="45" width="45"/>
+    <n-avatar
+        round
+        :size="45"
+        :src="userInfo.avatar"
+    />
   </div>
 </template>
 

web/nuxt.config.ts

@@ -10,12 +10,10 @@ export default defineNuxtConfig({
   modules: [
       '@nuxtjs/color-mode',
       '@hypernym/nuxt-gsap',
-      "@nuxt/image",
       "@nuxtjs/google-fonts",
       'nuxt-lucide-icons',
       '@pinia/nuxt',
       '@pinia-plugin-persistedstate/nuxt',
-      "@vite-pwa/nuxt",
       "@vueuse/nuxt",
       "nuxtjs-naive-ui"
   ],
@@ -38,25 +36,25 @@ export default defineNuxtConfig({
             })
         ]
     },
-  pwa: {
+  // pwa: {
-      manifest: {
+  //     manifest: {
-          name: "pwa nuxt 3",
+  //         name: "pwa nuxt 3",
-          short_name: "pwa nuxt",
+  //         short_name: "pwa nuxt",
-          theme_color: '#FFFFFF',
+  //         theme_color: '#FFFFFF',
-          description: "Arman Abi r.man.abi@gmail.com",
+  //         description: "Arman Abi r.man.abi@gmail.com",
-          icons: [{
+  //         icons: [{
-              src: '/pwa-192x192.png', sizes: "192x192", type: "image/png"
+  //             src: '/pwa-192x192.png', sizes: "192x192", type: "image/png"
-          },]
+  //         },]
-
+  //
-
+  //
-      }, workbox: {
+  //     }, workbox: {
-          navigateFallback: "/SignIn",
+  //         navigateFallback: "/SignIn",
-
+  //
-      }, devOptions: {
+  //     }, devOptions: {
-          enabled: true, type: "module"
+  //         enabled: true, type: "module"
-      }
+  //     }
-
+  //
-  },
+  // },
 
   gsap: {
       autoImport: true,

web/package.json

@@ -12,30 +12,28 @@
     "start": "nuxt start"
   },
   "dependencies": {
-    "@nuxt/image": "^1.7.0",
     "@nuxtjs/google-fonts": "^3.2.0",
     "@types/lodash": "^4.17.5",
     "@vite-pwa/nuxt": "^0.8.0",
     "@vueuse/components": "^10.10.1",
     "@xterm/xterm": "^5.5.0",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.12",
     "echarts": "^5.5.0",
     "grid-layout-plus": "^1.0.5",
     "lodash": "^4.17.21",
     "md-editor-v3": "^4.17.0",
     "naive-ui": "^2.39.0",
     "nuxt": "^3.11.2",
-    "nuxt-primevue": "^3.0.0",
     "nuxtjs-naive-ui": "^1.0.2",
     "patch-package": "^8.0.0",
-    "primeicons": "^7.0.0",
+    "pinia": "^2.2.0",
-    "unplugin-auto-import": "^0.18.0",
+    "unplugin-auto-import": "^0.18.2",
     "unplugin-vue-components": "^0.27.3",
-    "uuid": "^9.0.1",
+    "uuid": "^10.0.0",
-    "vue": "^3.4.27",
+    "vue": "^3.4.35",
     "vue-drag-resize": "^1.5.4",
-    "vue-echarts": "^6.7.3",
+    "vue-echarts": "^7.0.0-beta.0",
-    "vue-router": "^4.3.2",
+    "vue-router": "^4.4.2",
     "vue-toastification": "^2.0.0-rc.5",
     "vue3-apexcharts": "^1.5.3",
     "vue3-auth-code-input": "^1.0.10",
@@ -47,15 +45,13 @@
     "@microsoft/signalr": "^8.0.0",
     "@nuxtjs/color-mode": "^3.4.1",
     "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
-    "@pinia/nuxt": "^0.5.1",
+    "@pinia/nuxt": "^0.5.2",
-    "@types/uuid": "^9.0.8",
+    "@types/uuid": "^10.0.0",
-    "@vite-pwa/assets-generator": "^0.2.4",
     "@vueuse/core": "^10.11.0",
     "@vueuse/nuxt": "^10.10.0",
     "nuxt-gsap-module": "^2.0.0",
     "nuxt-lucide-icons": "^1.0.4",
     "sass": "^1.77.4",
-    "vue3-draggable-grid": "^0.0.6",
     "vue3-puzzle-vcode": "^1.1.7"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"

web/pages/signIn.vue

@@ -107,11 +107,11 @@ const onSuccess = () => {
       </div>
       <div class="social-button">
         <button>
-          <NuxtImg src="/Google.svg"></NuxtImg>
+          <img src="/Google.svg" alt=""/>
           <p>使用 Google 帐号登录</p>
         </button>
         <button>
-          <NuxtImg src="/Facebook.svg"></NuxtImg>
+          <img src="/Facebook.svg" alt=""/>
          <p>使用 Facebook 登录</p></button>
       </div>
     </div>