⛳ perf: unplugin & unocss background-image (#305)

components.d.ts

@@ -23,8 +23,8 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    Footer: typeof import('./src/components/Footer/index.vue')['default']
-    FooterOctocat: typeof import('./src/components/Footer/octocat.vue')['default']
+    FooterCustom: typeof import('./src/components/FooterCustom/index.vue')['default']
+    FooterCustomOctocat: typeof import('./src/components/FooterCustom/octocat.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld/index.vue')['default']
     IconFont: typeof import('./src/components/IconFont/index.vue')['default']
     Layout: typeof import('./src/components/Layout/index.vue')['default']
@@ -39,7 +39,7 @@ declare module 'vue' {
     OptionsMenu: typeof import('./src/components/OptionsMenu/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    Tooltip: typeof import('./src/components/Tooltip.vue')['default']
+    TooltipCustom: typeof import('./src/components/TooltipCustom/index.vue')['default']
   }
   export interface ComponentCustomProperties {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']

eslint.config.js

@@ -124,7 +124,7 @@ export default defineFlatConfig([
       'no-compare-neg-zero': 'error',
       'no-cond-assign': ['error', 'always'],
       'no-console': ['error', {
-        allow: ['log', 'warn', 'error']
+        allow: ['log', 'dir', 'warn', 'error']
       }],
       'no-const-assign': 'error',
       'no-control-regex': 'error',

src/components/Footer/index.vue → src/components/FooterCustom/index.vue

@@ -23,27 +23,20 @@
     </div>
   </footer>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import Octocat from './octocat.vue'
 
-export default defineComponent({
-  name: 'MyFooter',
-  components: {
-    Octocat
-  },
-  props: {
-    showBorder: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup() {
-    const link = ref('https://github.com/pdsuwwz')
-    return {
-      link
-    }
+withDefaults(
+  defineProps<{
+    showBorder?: boolean
+  }>(),
+  {
+    showBorder: false
   }
-})
+)
+
+const link = ref('https://github.com/pdsuwwz')
+
 </script>
 <style lang="scss" scoped>
 .footer {

src/components/Layout/LayoutArea.vue

@@ -24,7 +24,7 @@
         </section>
       </div>
     </div>
-    <MyFooter show-border />
+    <FooterCustom show-border />
   </div>
 </template>
 

src/components/Tooltip.vue → src/components/TooltipCustom/index.vue

@@ -21,20 +21,21 @@
   </el-tooltip>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  name: 'TooltipCustom',
-  props: {
-    content: {
-      type: String,
-      default: ''
-    },
-    placement: {
-      type: String,
-      default: 'top'
-    }
+<script lang="ts" setup>
+import type { Placement } from 'element-plus'
+
+interface Props {
+  content: string
+  placement: Placement
+}
+
+withDefaults(
+  defineProps<Props>(),
+  {
+    content: '',
+    placement: 'top'
   }
-})
+)
 </script>
 
 <style lang="scss" scoped>

src/main.ts

@@ -8,15 +8,13 @@ import App from '@/App.vue'
 
 import '@/assets/fonts'
 
-import GlobalComponents from '@/components'
 import Mixin from '@/mixins'
 import Widgets from '@/widgets'
 
 const app = createApp(App)
 
 function setupPlugins() {
   app
-    .use(GlobalComponents)
     .use(Widgets)
     .mixin(Mixin)
 }

src/modules/UserAccount/pages/login.vue

@@ -1,8 +1,20 @@
 <template>
-  <div class="user-account-login">
+  <div
+    class="user-account-login"
+    :class="[
+      'bgimage-images-logo-background-jpg',
+      'bg-no-repeat bg-cover'
+    ]"
+  >
     <div class="user-account-nav">
       <div class="nav-left">
-        <div class="nav-logo"></div>
+        <div
+          class="nav-logo"
+          :class="[
+            'bgimage-images-i18n-svg',
+            'bg-no-repeat bg-contain bg-center',
+          ]"
+        ></div>
         <div class="nav-circle"></div>
         <div class="nav-title">
           {{ _t('base.systemTitle') }}
@@ -31,7 +43,7 @@
         </template>
       </UserAccountContainerLayout>
     </div>
-    <MyFooter />
+    <FooterCustom />
   </div>
 </template>
 
@@ -203,9 +215,6 @@ export default defineComponent({
   flex-direction: column;
   min-height: 100vh;
   background-color: #f0f2f5;
-  background-image: url("@/assets/images/logo-background.jpg");
-  background-repeat: no-repeat;
-  background-size: cover;
 
   .user-account-nav {
     display: flex;
@@ -229,10 +238,6 @@ export default defineComponent({
       width: 32px;
       height: 32px;
       border-radius: 3px;
-      background-image: url("@/assets/images/i18n.svg");
-      background-repeat: no-repeat;
-      background-size: contain;
-      background-position: center;
     }
 
     .nav-circle {

uno.config.ts

@@ -1,5 +1,6 @@
 import {
   defineConfig,
+  presetAttributify,
   presetIcons,
   presetUno,
   transformerDirectives
@@ -8,6 +9,7 @@ import {
 export default defineConfig({
   presets: [
     presetUno(),
+    presetAttributify(),
     presetIcons()
   ],
   transformers: [
@@ -28,6 +30,14 @@ export default defineConfig({
       'login-navbar-shadow', {
         'box-shadow': '0 -3px 8px 3px #727272'
       }
+    ],
+    [
+      /^bgimage-(\w+)-(.+)-(svg|png|jpg|gif)$/,
+      ([, dir, fname, fext]) => {
+        return {
+          'background-image': `url(@/assets/${ dir }/${ fname }.${ fext })`
+        }
+      }
     ]
   ]
 })