擅长不必要的库,减少体积,去除nuxt-image
This commit is contained in:
parent
009f46879c
commit
a93d42b61b
|
|
@ -1,5 +1,6 @@
|
|||
# Nuxt dev/build outputs
|
||||
.output
|
||||
output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
manifest: {
|
||||
name: "pwa nuxt 3",
|
||||
short_name: "pwa nuxt",
|
||||
theme_color: '#FFFFFF',
|
||||
description: "Arman Abi r.man.abi@gmail.com",
|
||||
icons: [{
|
||||
src: '/pwa-192x192.png', sizes: "192x192", type: "image/png"
|
||||
},]
|
||||
|
||||
|
||||
}, workbox: {
|
||||
navigateFallback: "/SignIn",
|
||||
|
||||
}, devOptions: {
|
||||
enabled: true, type: "module"
|
||||
}
|
||||
|
||||
},
|
||||
// pwa: {
|
||||
// manifest: {
|
||||
// name: "pwa nuxt 3",
|
||||
// short_name: "pwa nuxt",
|
||||
// theme_color: '#FFFFFF',
|
||||
// description: "Arman Abi r.man.abi@gmail.com",
|
||||
// icons: [{
|
||||
// src: '/pwa-192x192.png', sizes: "192x192", type: "image/png"
|
||||
// },]
|
||||
//
|
||||
//
|
||||
// }, workbox: {
|
||||
// navigateFallback: "/SignIn",
|
||||
//
|
||||
// }, devOptions: {
|
||||
// enabled: true, type: "module"
|
||||
// }
|
||||
//
|
||||
// },
|
||||
|
||||
gsap: {
|
||||
autoImport: true,
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
"unplugin-auto-import": "^0.18.0",
|
||||
"pinia": "^2.2.0",
|
||||
"unplugin-auto-import": "^0.18.2",
|
||||
"unplugin-vue-components": "^0.27.3",
|
||||
"uuid": "^9.0.1",
|
||||
"vue": "^3.4.27",
|
||||
"uuid": "^10.0.0",
|
||||
"vue": "^3.4.35",
|
||||
"vue-drag-resize": "^1.5.4",
|
||||
"vue-echarts": "^6.7.3",
|
||||
"vue-router": "^4.3.2",
|
||||
"vue-echarts": "^7.0.0-beta.0",
|
||||
"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",
|
||||
"@types/uuid": "^9.0.8",
|
||||
"@vite-pwa/assets-generator": "^0.2.4",
|
||||
"@pinia/nuxt": "^0.5.2",
|
||||
"@types/uuid": "^10.0.0",
|
||||
"@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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
2773
web/yarn.lock
2773
web/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue