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

This commit is contained in:
zwb 2024-08-03 11:27:39 +08:00 committed by niyyzf
parent 009f46879c
commit a93d42b61b
7 changed files with 1208 additions and 1772 deletions

1
web/.gitignore vendored
View File

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

View File

@ -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>

View File

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

View File

@ -10,12 +10,10 @@ export default defineNuxtConfig({
modules: [ modules: [
'@nuxtjs/color-mode', '@nuxtjs/color-mode',
'@hypernym/nuxt-gsap', '@hypernym/nuxt-gsap',
"@nuxt/image",
"@nuxtjs/google-fonts", "@nuxtjs/google-fonts",
'nuxt-lucide-icons', 'nuxt-lucide-icons',
'@pinia/nuxt', '@pinia/nuxt',
'@pinia-plugin-persistedstate/nuxt', '@pinia-plugin-persistedstate/nuxt',
"@vite-pwa/nuxt",
"@vueuse/nuxt", "@vueuse/nuxt",
"nuxtjs-naive-ui" "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: { gsap: {
autoImport: true, autoImport: true,

View File

@ -12,30 +12,28 @@
"start": "nuxt start" "start": "nuxt start"
}, },
"dependencies": { "dependencies": {
"@nuxt/image": "^1.7.0",
"@nuxtjs/google-fonts": "^3.2.0", "@nuxtjs/google-fonts": "^3.2.0",
"@types/lodash": "^4.17.5", "@types/lodash": "^4.17.5",
"@vite-pwa/nuxt": "^0.8.0", "@vite-pwa/nuxt": "^0.8.0",
"@vueuse/components": "^10.10.1", "@vueuse/components": "^10.10.1",
"@xterm/xterm": "^5.5.0", "@xterm/xterm": "^5.5.0",
"dayjs": "^1.11.11", "dayjs": "^1.11.12",
"echarts": "^5.5.0", "echarts": "^5.5.0",
"grid-layout-plus": "^1.0.5", "grid-layout-plus": "^1.0.5",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"md-editor-v3": "^4.17.0", "md-editor-v3": "^4.17.0",
"naive-ui": "^2.39.0", "naive-ui": "^2.39.0",
"nuxt": "^3.11.2", "nuxt": "^3.11.2",
"nuxt-primevue": "^3.0.0",
"nuxtjs-naive-ui": "^1.0.2", "nuxtjs-naive-ui": "^1.0.2",
"patch-package": "^8.0.0", "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", "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-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", "vue-toastification": "^2.0.0-rc.5",
"vue3-apexcharts": "^1.5.3", "vue3-apexcharts": "^1.5.3",
"vue3-auth-code-input": "^1.0.10", "vue3-auth-code-input": "^1.0.10",
@ -47,15 +45,13 @@
"@microsoft/signalr": "^8.0.0", "@microsoft/signalr": "^8.0.0",
"@nuxtjs/color-mode": "^3.4.1", "@nuxtjs/color-mode": "^3.4.1",
"@pinia-plugin-persistedstate/nuxt": "^1.2.0", "@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/core": "^10.11.0",
"@vueuse/nuxt": "^10.10.0", "@vueuse/nuxt": "^10.10.0",
"nuxt-gsap-module": "^2.0.0", "nuxt-gsap-module": "^2.0.0",
"nuxt-lucide-icons": "^1.0.4", "nuxt-lucide-icons": "^1.0.4",
"sass": "^1.77.4", "sass": "^1.77.4",
"vue3-draggable-grid": "^0.0.6",
"vue3-puzzle-vcode": "^1.1.7" "vue3-puzzle-vcode": "^1.1.7"
}, },
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"

View File

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

File diff suppressed because it is too large Load Diff