style: use unocss rewrite css

src/layout/components/header/components/GithubSite.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-icon mr20 size="18" style="cursor: pointer" @click="handleLinkClick">
+  <n-icon mr-20 size="18" style="cursor: pointer" @click="handleLinkClick">
     <icon-mdi:github />
   </n-icon>
 </template>
@@ -9,5 +9,3 @@ function handleLinkClick() {
   window.open('https://github.com/zclzone/vue-naive-admin')
 }
 </script>
-
-<style lang="scss" scoped></style>

src/layout/components/header/components/MenuCollapse.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-icon size="20" style="cursor: pointer" @click="appStore.switchCollapsed">
+  <n-icon size="20" cursor-pointer @click="appStore.switchCollapsed">
     <icon-mdi:format-indent-increase v-if="appStore.collapsed" />
     <icon-mdi:format-indent-decrease v-else />
   </n-icon>

src/layout/components/header/components/UserAvatar.vue

@@ -1,7 +1,7 @@
 <template>
   <n-dropdown :options="options" @select="handleSelect">
-    <div class="avatar">
-      <img :src="userStore.avatar" />
+    <div flex items-center cursor-pointer>
+      <img :src="userStore.avatar" mr10 w-35 h-35 rounded-full />
       <span>{{ userStore.name }}</span>
     </div>
   </n-dropdown>
@@ -35,18 +35,3 @@ function handleSelect(key) {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.avatar {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  img {
-    width: 100%;
-    width: 35px;
-    height: 35px;
-    border-radius: 50%;
-    margin-right: 10px;
-  }
-}
-</style>

src/layout/components/header/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <header class="header">
-    <div class="h-left">
+  <header px-15 h-full flex items-center>
+    <div flex items-center>
       <MenuCollapse />
       <BreadCrumb ml-15 />
     </div>
-    <div class="h-right">
+    <div ml-auto flex items-center>
       <GithubSite />
       <FullScreen />
       <UserAvatar />
@@ -19,21 +19,3 @@ import FullScreen from './components/FullScreen.vue'
 import UserAvatar from './components/UserAvatar.vue'
 import GithubSite from './components/GithubSite.vue'
 </script>
-
-<style lang="scss" scoped>
-.header {
-  padding: 0 15px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .h-left {
-    display: flex;
-    align-items: center;
-  }
-  .h-right {
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

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

@@ -7,7 +7,8 @@
     :collapsed-width="64"
     :options="menuOptions"
     :value="(currentRoute.meta && currentRoute.meta.activeMenu) || currentRoute.name"
-    @update:value="handleMenuSelect" />
+    @update:value="handleMenuSelect"
+  />
 </template>
 
 <script setup>

src/layout/components/tags/ContextMenu.vue

@@ -6,7 +6,8 @@
     :y="y"
     placement="bottom-start"
     @clickoutside="handleHideDropdown"
-    @select="handleSelect" />
+    @select="handleSelect"
+  />
 </template>
 
 <script setup>

src/layout/components/tags/index.vue

@@ -3,11 +3,13 @@
     <n-tag
       v-for="tag in tagsStore.tags"
       :key="tag.path"
+      class="px-15 mx-5 cursor-pointer hover:color-primary"
       :type="tagsStore.activeTag === tag.path ? 'primary' : 'default'"
       :closable="tagsStore.tags.length > 1"
       @click="handleTagClick(tag.path)"
       @close.stop="tagsStore.removeTag(tag.path)"
-      @contextmenu.prevent="handleContextMenu($event, tag)">
+      @contextmenu.prevent="handleContextMenu($event, tag)"
+    >
       {{ tag.title }}
     </n-tag>
   </ScrollX>
@@ -16,7 +18,8 @@
     v-model:show="contextMenuOption.show"
     :current-path="contextMenuOption.currentPath"
     :x="contextMenuOption.x"
-    :y="contextMenuOption.y" />
+    :y="contextMenuOption.y"
+  />
 </template>
 
 <script setup name="Tags">
@@ -73,24 +76,16 @@ async function handleContextMenu(e, tagItem) {
 </script>
 
 <style lang="scss">
-.n-tag {
-  padding: 0 15px;
-  margin: 0 5px;
-  cursor: pointer;
-  .n-tag__close {
-    margin-left: 5px;
-    box-sizing: content-box;
-    font-size: 12px;
-    padding: 2px;
-    border-radius: 50%;
-    transition: all 0.7s;
-    &:hover {
-      color: #fff;
-      background-color: var(--primaryColor);
-    }
-  }
+.n-tag__close {
+  margin-left: 5px;
+  box-sizing: content-box;
+  font-size: 12px;
+  padding: 2px;
+  border-radius: 50%;
+  transition: all 0.7s;
   &:hover {
-    color: var(--primaryColor);
+    color: #fff;
+    background-color: var(--primaryColor);
   }
 }
 </style>

src/layout/index.vue

@@ -1,27 +1,29 @@
 <template>
-  <n-layout has-sider style="height: 100%">
+  <n-layout has-sider h-full>
     <n-layout-sider
       bordered
       collapse-mode="width"
       :collapsed-width="64"
       :width="220"
       :native-scrollbar="false"
-      :collapsed="appStore.collapsed">
+      :collapsed="appStore.collapsed"
+    >
       <SideBar />
     </n-layout-sider>
     <n-layout>
-      <n-layout-header :style="{ height: useTheme.header.height + 'px' }">
+      <n-layout-header bg-white border-b bc-eee :style="`height: ${useTheme.header.height ?? 60}px`">
         <AppHeader />
       </n-layout-header>
 
-      <n-layout style="background-color: #f5f6fb" :style="`height: calc(100% - ${useTheme.header.height}px)`">
+      <n-layout bg="#f5f6fb" :style="`height: calc(100% - ${useTheme.header.height ?? 60}px)`">
         <AppTags v-if="useTheme.tags.visible" />
         <AppMain
           class="cur-scroll border-t bc-eee"
           :style="{
-            height: `calc(100% - ${useTheme.tags.visible ? useTheme.tags.height : 0}px)`,
+            height: `calc(100% - ${useTheme.tags.visible ? useTheme.tags.height ?? 50 : 0}px)`,
             overflow: 'auto',
-          }" />
+          }"
+        />
       </n-layout>
     </n-layout>
   </n-layout>
@@ -38,11 +40,3 @@ import { useAppStore } from '@/store/modules/app'
 const useTheme = useThemeStore()
 const appStore = useAppStore()
 </script>
-
-<style lang="scss" scoped>
-.n-layout-header {
-  height: 60px;
-  background-color: #fff;
-  border-bottom: 1px solid #eee;
-}
-</style>