perf: 全局样式调整

src/components/AppProvider/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-config-provider :theme-overrides="useTheme.naiveThemeOverrides">
+  <n-config-provider :theme-overrides="themStore.naiveThemeOverrides">
     <n-loading-bar-provider>
       <LoadingBar />
       <n-dialog-provider>
@@ -17,11 +17,22 @@
 </template>
 
 <script setup>
+import { watch } from 'vue'
+import { useCssVar } from '@vueuse/core'
 import MessageContent from './MessageContent.vue'
 import DialogContent from './DialogContent.vue'
 import LoadingBar from './LoadingBar.vue'
 import NotificationContent from './NotificationContent.vue'
 import { useThemeStore } from '@/store/modules/theme'
 
-const useTheme = useThemeStore()
+const themStore = useThemeStore()
+watch(
+  () => themStore.naiveThemeOverrides.common,
+  (vars) => {
+    for (const key in vars) {
+      useCssVar(`--${key}`, document.documentElement).value = vars[key]
+    }
+  },
+  { immediate: true }
+)
 </script>

src/layout/components/sidebar/components/SideLogo.vue

@@ -1,9 +1,11 @@
 <template>
-  <router-link to="/" class="logo">
+  <router-link h-60 f-c-c to="/">
     <n-icon size="36" color="#316c72">
       <IconLogo />
     </n-icon>
-    <n-gradient-text v-show="!appStore.collapsed" type="primary">{{ title }}</n-gradient-text>
+    <h2 v-show="!appStore.collapsed" ml-10 color-primary text-16 font-bold max-w-140 flex-shrink-0>
+      {{ title }}
+    </h2>
   </router-link>
 </template>
 
@@ -14,20 +16,3 @@ const title = import.meta.env.VITE_APP_TITLE
 
 const appStore = useAppStore()
 </script>
-
-<style lang="scss" scoped>
-.logo {
-  padding: 15px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .n-gradient-text {
-    margin-left: 15px;
-    font-size: 16px;
-    font-weight: bold;
-    max-width: 140px;
-    flex-shrink: 0;
-    white-space: normal;
-  }
-}
-</style>

src/layout/components/sidebar/components/SideMenu.vue

@@ -2,8 +2,9 @@
   <n-menu
     class="side-menu"
     accordion
-    :indent="12"
-    :root-indent="12"
+    :indent="18"
+    :collapsed-icon-size="22"
+    :collapsed-width="64"
     :options="menuOptions"
     :value="(currentRoute.meta && currentRoute.meta.activeMenu) || currentRoute.name"
     @update:value="handleMenuSelect"
@@ -96,40 +97,18 @@ function handleMenuSelect(key, item) {
 </script>
 
 <style lang="scss">
-.n-menu {
-  margin-top: 10px;
-  padding-left: 10px;
+.side-menu:not(.n-menu--collapsed) {
   .n-menu-item-content {
     &::before {
-      left: 0;
-      right: 0;
-      border-radius: 0;
-      background-color: unset !important;
+      left: 5px;
+      right: 5px;
     }
-    &:hover,
-    &.n-menu-item-content--selected {
-      border-radius: 0 !important;
-
+    &.n-menu-item-content--selected,
+    &:hover {
       &::before {
-        border-right: 3px solid $primaryColor;
-        background-color: #16243a;
-        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba($primaryColor, 0.3) 100%);
+        border-left: 4px solid var(--primaryColor);
       }
     }
   }
-
-  .n-menu-item-content-header {
-    font-size: 14px;
-    font-weight: bold;
-  }
-
-  .n-submenu-children {
-    .n-menu-item-content-header {
-      font-size: 14px;
-      font-weight: normal;
-      position: relative;
-      overflow: visible !important;
-    }
-  }
 }
 </style>

src/layout/components/sidebar/index.vue

@@ -5,6 +5,5 @@ import SideMenu from './components/SideMenu.vue'
 
 <template>
   <SideLogo />
-  <div h-1 bg-gray-200></div>
   <SideMenu />
 </template>

src/layout/components/tags/index.vue

@@ -99,11 +99,11 @@ async function handleContextMenu(e, tagItem) {
     transition: all 0.7s;
     &:hover {
       color: #fff;
-      background-color: $primaryColor;
+      background-color: var(--primaryColor);
     }
   }
   &:hover {
-    color: $primaryColor;
+    color: var(--primaryColor);
   }
 }
 </style>

src/layout/index.vue

@@ -46,6 +46,5 @@ const appStore = useAppStore()
   height: 60px;
   background-color: #fff;
   border-bottom: 1px solid #eee;
-  border-left: 1px solid #eee;
 }
 </style>

src/main.js

@@ -1,4 +1,5 @@
 import '@/styles/reset.css'
+import '@/styles/variables.css'
 import '@/styles/index.scss'
 import 'uno.css'
 

src/styles/variables.css

@@ -0,0 +1,3 @@
+:root {
+  --primaryColor: #316c72;
+}

src/styles/variables.scss

@@ -1,5 +0,0 @@
-$primaryColor: #316c72;
-
-:root {
-  --vh100: 100vh;
-}

src/views/examples/table/post/PostCreate.vue

@@ -54,7 +54,7 @@ function handleSavePost(e) {
     margin-right: 20px;
     font-size: 20px;
     font-weight: bold;
-    color: $primaryColor;
+    color: var(--primaryColor);
   }
 }
 </style>

src/views/login/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login-bg" f-c-c h-full>
     <div class="login-wrapper" flex w-full max-w-1020>
-      <div p-40 style="border-right: 1px solid #cccccc5e">
+      <div p-40 border-r border-gray-200>
         <img src="@/assets/images/login_banner.png" height="380" alt="login_banner" />
       </div>
 
@@ -10,27 +10,29 @@
           <img mr-15 src="@/assets/images/logo.svg" width="45" alt="logo" />
           {{ title }}
         </h5>
-        <div mt-35 w-full max-w-360 h-50>
-          <input
-            v-model="loginInfo.name"
+        <div mt-35 w-full max-w-360>
+          <n-input
+            v-model:value="loginInfo.name"
             autofocus
-            type="text"
-            class="login-ipt"
-            placeholder="username"
-            @keydown.enter="handleLogin"
-          />
+            class="text-16 items-center h-50 pl-10"
+            placeholder="请输入用户名"
+            :maxlength="20"
+          >
+          </n-input>
         </div>
-        <div mt-35 w-full max-w-360 h-50>
-          <input
-            v-model="loginInfo.password"
+        <div mt-35 w-full max-w-360>
+          <n-input
+            v-model:value="loginInfo.password"
+            class="text-16 items-center h-50 pl-10"
             type="password"
-            class="login-ipt"
-            placeholder="password"
+            show-password-on="mousedown"
+            placeholder="密码"
+            :maxlength="20"
             @keydown.enter="handleLogin"
           />
         </div>
-        <div mt-35 w-full max-w-360 h-50>
-          <button class="login-btn" @click="handleLogin">登录</button>
+        <div mt-35 w-full max-w-360>
+          <n-button w-full h-50 rounded-5 text-16 type="primary" @click="handleLogin">登录</n-button>
         </div>
       </div>
     </div>
@@ -100,38 +102,6 @@ async function handleLogin() {
 
 .login-wrapper {
   box-shadow: 1.5px 3.99px 27px 0px rgb(0 0 0 / 10%);
-  background-color: rgba(255, 255, 255, 0.3);
-}
-
-.login-ipt {
-  width: 100%;
-  height: 100%;
-  padding: 0 20px;
-  border: 1px solid #6a6a6a;
-  border-radius: 5px;
-  color: $primaryColor;
-  font-size: 16px;
-  transition: 0.5s;
-  &:focus {
-    border-color: $primaryColor;
-    box-shadow: 0 0 5px $primaryColor;
-  }
-}
-.login-btn {
-  width: 100%;
-  height: 100%;
-
-  color: #fff;
-  font-size: 16px;
-  font-weight: bold;
-  border: none;
-  border-radius: 5px;
-  background-color: $primaryColor;
-
-  cursor: pointer;
-  transition: all 0.3s;
-  &:hover {
-    opacity: 0.8;
-  }
+  background-color: rgba(255, 255, 255, 0.6);
 }
 </style>

unocss.config.js

@@ -1,6 +1,13 @@
 import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
 
 export default defineConfig({
-  shortcuts: [['f-c-c', 'flex justify-center items-center']],
+  shortcuts: [
+    ['f-c-c', 'flex justify-center items-center'],
+    ['ellipsis', 'truncate'],
+  ],
+  rules: [
+    ['color-primary', { color: 'var(--primaryColor)' }],
+    ['bgc-primary', { backgroundColor: 'var(--primaryColor)' }],
+  ],
   presets: [presetUno(), presetAttributify()],
 })

vite.config.js

@@ -22,14 +22,6 @@ export default defineConfig(({ command, mode }) => {
       },
     },
     plugins: createVitePlugins(viteEnv, isBuild),
-    css: {
-      preprocessorOptions: {
-        //define global scss variable
-        scss: {
-          additionalData: `@import '@/styles/variables.scss';`,
-        },
-      },
-    },
     server: {
       host: '0.0.0.0',
       port: VITE_PORT,