style: use unocss rewrite css

src/App.vue

@@ -9,12 +9,3 @@
 <script setup>
 import AppProvider from '@/components/common/AppProvider.vue'
 </script>
-
-<style lang="scss">
-#app {
-  height: 100%;
-  .n-config-provider {
-    height: inherit;
-  }
-}
-</style>

src/components/common/AppProvider.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-config-provider :theme-overrides="themStore.naiveThemeOverrides">
+  <n-config-provider wh-full :theme-overrides="themStore.naiveThemeOverrides">
     <n-loading-bar-provider>
       <n-dialog-provider>
         <n-notification-provider>

src/components/common/ScrollX.vue

@@ -15,7 +15,8 @@
       :class="{ overflow: isOverflow && showArrow }"
       :style="{
         transform: `translateX(${translateX}px)`,
-      }">
+      }"
+    >
       <slot />
     </div>
   </div>

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">
+    <div flex items-center cursor-pointer>
-      <img :src="userStore.avatar" />
+      <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">
+  <header px-15 h-full flex items-center>
-    <div class="h-left">
+    <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 {
+.n-tag__close {
-  padding: 0 15px;
+  margin-left: 5px;
-  margin: 0 5px;
+  box-sizing: content-box;
-  cursor: pointer;
+  font-size: 12px;
-  .n-tag__close {
+  padding: 2px;
-    margin-left: 5px;
+  border-radius: 50%;
-    box-sizing: content-box;
+  transition: all 0.7s;
-    font-size: 12px;
-    padding: 2px;
-    border-radius: 50%;
-    transition: all 0.7s;
-    &:hover {
-      color: #fff;
-      background-color: var(--primaryColor);
-    }
-  }
   &: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>

src/styles/index.scss

@@ -11,6 +11,11 @@ body {
   font-family: 'Encode Sans Condensed', sans-serif;
 }
 
+#app {
+  width: 100%;
+  height: 100%;
+}
+
 /* router view transition fade-slide */
 .fade-slide-leave-active,
 .fade-slide-enter-active {

src/views/dashboard/index.vue

@@ -36,7 +36,8 @@
           class="w-300 flex-shrink-0 mt-10 mb-10 cursor-pointer"
           hover:card-shadow
           title="Vue Naive Admin"
-          size="small">
+          size="small"
+        >
           <p op-60>一个基于 Vue3.0、Vite、Naive UI 的轻量级后台管理模板</p>
         </n-card>
         <div w-300 h-0></div>

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

@@ -5,7 +5,8 @@
         v-model="post.title"
         class="flex-1 pt-15 pb-15 mr-20 text-20 font-bold color-primary"
         type="text"
-        placeholder="输入文章标题..." />
+        placeholder="输入文章标题..."
+      />
       <n-button type="primary" style="width: 80px" :loading="btnLoading" @click="handleSavePost">保存</n-button>
     </div>
     <MdEditor v-model="post.content" style="height: calc(100vh - 220px)" />

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

@@ -11,7 +11,8 @@
       :columns="columns"
       :pagination="pagination"
       :row-key="(row) => row.id"
-      @update:checked-row-keys="handleCheck" />
+      @update:checked-row-keys="handleCheck"
+    />
   </div>
 </template>
 

src/views/login/index.vue

@@ -16,7 +16,8 @@
             autofocus
             class="text-16 items-center h-50 pl-10"
             placeholder="admin"
-            :maxlength="20">
+            :maxlength="20"
+          >
           </n-input>
         </div>
         <div mt-30 w-full max-w-360>
@@ -27,7 +28,8 @@
             show-password-on="mousedown"
             placeholder="123456"
             :maxlength="20"
-            @keydown.enter="handleLogin" />
+            @keydown.enter="handleLogin"
+          />
         </div>
 
         <div mt-20 w-full max-w-360>