refactor: tailwindcss样式优化

Former-commit-id: 3ab444012a3b3f81929830d5c73df8c68437cb87

src/layout/components/Navbar.vue

@@ -3,20 +3,23 @@ import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessageBox } from 'element-plus';
 
-import Breadcrumb from '@/components/Breadcrumb/index.vue';
 import Hamburger from '@/components/Hamburger/index.vue';
+import Breadcrumb from '@/components/Breadcrumb/index.vue';
 import Screenfull from '@/components/Screenfull/index.vue';
 import SizeSelect from '@/components/SizeSelect/index.vue';
 import LangSelect from '@/components/LangSelect/index.vue';
+import MixNav from './Sidebar/MixNav.vue';
 import { CaretBottom } from '@element-plus/icons-vue';
 
-import { useAppStore, DeviceType } from '@/store/modules/app';
+import { useAppStore } from '@/store/modules/app';
 import { useTagsViewStore } from '@/store/modules/tagsView';
 import { useUserStore } from '@/store/modules/user';
+import { useSettingsStore } from '@/store/modules/settings';
 
 const appStore = useAppStore();
 const tagsViewStore = useTagsViewStore();
 const userStore = useUserStore();
+const settingsStore = useSettingsStore();
 
 const route = useRoute();
 const router = useRouter();
@@ -47,31 +50,44 @@ function logout() {
 
 <template>
   <div class="navbar">
-    <hamburger
-      id="hamburger-container"
-      :is-active="appStore.sidebar.opened"
-      class="hamburger-container"
-      @toggleClick="toggleSideBar"
-    />
+    <div
+      class="flex justify-start"
+      v-if="device === 'mobile' || settingsStore.layout === 'left'"
+    >
+      <hamburger
+        :is-active="appStore.sidebar.opened"
+        @toggleClick="toggleSideBar"
+      />
+      <!-- 面包屑导航栏 -->
+      <breadcrumb />
+    </div>
 
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    <mix-nav v-if="device !== 'mobile' && settingsStore.layout === 'mix'" />
 
-    <div class="right-menu">
-      <template v-if="device !== DeviceType.mobile">
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+    <div
+      v-if="device === 'mobile' || settingsStore.layout === 'left'"
+      class="flex justify-start"
+    >
+      <div v-if="device !== 'mobile'" class="flex justify-center items-center">
+        <!--全屏 -->
+        <screenfull id="screenfull" />
+
+        <!-- 布局大小 -->
         <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
+          <size-select />
         </el-tooltip>
-        <lang-select class="right-menu-item hover-effect" />
-      </template>
 
-      <el-dropdown
-        class="avatar-container right-menu-item hover-effect"
-        trigger="click"
-      >
-        <div class="avatar-wrapper">
-          <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
-          <CaretBottom style="width: 0.6em; height: 0.6em; margin-left: 5px" />
+        <!--语言选择-->
+        <lang-select />
+      </div>
+
+      <el-dropdown trigger="click">
+        <div class="flex justify-center items-center pr-[20px]">
+          <img
+            :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
+            class="w-[40px] h-[40px] rounded-lg"
+          />
+          <CaretBottom class="w-3 h-3" />
         </div>
 
         <template #dropdown>
@@ -99,85 +115,15 @@ function logout() {
 </template>
 
 <style lang="scss" scoped>
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.el-dropdown {
+  font-size: 18px;
 }
+
 .navbar {
   height: 50px;
-  overflow: hidden;
-  position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-
-  .hamburger-container {
-    line-height: 46px;
-    height: 100%;
-    float: left;
-    cursor: pointer;
-    transition: background 0.3s;
-    -webkit-tap-highlight-color: transparent;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.025);
-    }
-  }
-
-  .breadcrumb-container {
-    float: left;
-  }
-
-  .right-menu {
-    float: right;
-    height: 100%;
-    line-height: 50px;
-
-    &:focus {
-      outline: none;
-    }
-
-    .right-menu-item {
-      display: inline-block;
-      padding: 0 8px;
-      height: 100%;
-      font-size: 18px;
-      color: #5a5e66;
-      vertical-align: text-bottom;
-
-      &.hover-effect {
-        cursor: pointer;
-        transition: background 0.3s;
-
-        &:hover {
-          background: rgba(0, 0, 0, 0.025);
-        }
-      }
-    }
-
-    .avatar-container {
-      margin-right: 30px;
-
-      .avatar-wrapper {
-        margin-top: 5px;
-        position: relative;
-
-        img {
-          cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
-        }
-
-        .el-icon-caret-bottom {
-          cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
-          font-size: 12px;
-        }
-      }
-    }
-  }
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
 }
 </style>