style: use unocss rewrite css

2022-07-14 18:05:47 +08:00 · 2022-07-14 18:05:47 +08:00 · 5856f601fa
commit 5856f601fa
parent d10b8f0e96
16 changed files with 51 additions and 93 deletions
--- a/src/App.vue
+++ b/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>
--- a/src/components/common/AppProvider.vue
+++ b/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>
--- a/src/components/common/ScrollX.vue
+++ b/src/components/common/ScrollX.vue
@ -15,7 +15,8 @@
      :class="{ overflow: isOverflow && showArrow }"
      :style="{
        transform: `translateX(${translateX}px)`,
-      }">
+      }"
+    >
      <slot />
    </div>
  </div>
--- a/src/layout/components/header/components/GithubSite.vue
+++ b/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>
--- a/src/layout/components/header/components/MenuCollapse.vue
+++ b/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>
--- a/src/layout/components/header/components/UserAvatar.vue
+++ b/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>
--- a/src/layout/components/header/index.vue
+++ b/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>
--- a/src/layout/components/sidebar/components/SideMenu.vue
+++ b/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>
--- a/src/layout/components/tags/ContextMenu.vue
+++ b/src/layout/components/tags/ContextMenu.vue
@ -6,7 +6,8 @@
    :y="y"
    placement="bottom-start"
    @clickoutside="handleHideDropdown"
-    @select="handleSelect" />
+    @select="handleSelect"
+  />
 </template>

 <script setup>
--- a/src/layout/components/tags/index.vue
+++ b/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>
--- a/src/layout/index.vue
+++ b/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>
--- a/src/styles/index.scss
+++ b/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 {
--- a/src/views/dashboard/index.vue
+++ b/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>
--- a/src/views/examples/table/post/PostCreate.vue
+++ b/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)" />
--- a/src/views/examples/table/post/index.vue
+++ b/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>

--- a/src/views/login/index.vue
+++ b/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>