Refactor/themes (#311)

* refactor: theme

src/layout/components/sidebar/mixNav.vue

@@ -10,11 +10,17 @@ import screenfull from "../screenfull/index.vue";
 import { useRoute, useRouter } from "vue-router";
 import { deviceDetection } from "@pureadmin/utils";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
-import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 import { getParentPaths, findRouteByPath } from "/@/router/utils";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import globalization from "/@/assets/svg/globalization.svg?component";
-import { ref, watch, nextTick, onMounted, getCurrentInstance } from "vue";
+import {
+  ref,
+  toRaw,
+  watch,
+  nextTick,
+  onMounted,
+  getCurrentInstance
+} from "vue";
 
 const route = useRoute();
 const { locale, t } = useI18n();
@@ -27,14 +33,13 @@ const {
   logout,
   onPanel,
   changeTitle,
-  toggleSideBar,
   handleResize,
   menuSelect,
   resolvePath,
-  pureApp,
   username,
   avatarsStyle,
   getDropdownItemStyle,
+  getDropdownItemClass,
   changeWangeditorLanguage
 } = useNav();
 
@@ -89,33 +94,12 @@ function translationEn() {
 
 <template>
   <div class="horizontal-header">
-    <div
-      :class="classes.container"
-      :title="pureApp.sidebar.opened ? '点击折叠' : '点击展开'"
-      @click="toggleSideBar"
-    >
-      <svg
-        :fill="useEpThemeStoreHook().fill"
-        :class="[
-          'hamburger',
-          pureApp.sidebar.opened ? 'is-active-hamburger' : ''
-        ]"
-        viewBox="0 0 1024 1024"
-        xmlns="http://www.w3.org/2000/svg"
-        width="64"
-        height="64"
-      >
-        <path
-          d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
-        />
-      </svg>
-    </div>
     <el-menu
-      ref="menu"
-      class="horizontal-header-menu"
-      mode="horizontal"
-      :default-active="defaultActive"
       router
+      ref="menu"
+      mode="horizontal"
+      class="horizontal-header-menu"
+      :default-active="defaultActive"
       @select="indexPath => menuSelect(indexPath, routers)"
     >
       <el-menu-item
@@ -124,10 +108,15 @@ function translationEn() {
         :index="resolvePath(route) || route.redirect"
       >
         <template #title>
-          <div v-show="route.meta.icon" :class="['el-icon', route.meta.icon]">
-            <component :is="useRenderIcon(route.meta && route.meta.icon)" />
+          <div
+            v-if="toRaw(route.meta.icon)"
+            :class="['sub-menu-icon', route.meta.icon]"
+          >
+            <component
+              :is="useRenderIcon(route.meta && toRaw(route.meta.icon))"
+            />
           </div>
-          <span>{{ transformI18n(route.meta.title) }}</span>
+          <span class="select-none">{{ transformI18n(route.meta.title) }}</span>
           <FontIcon
             v-if="route.meta.extraIcon"
             width="30px"
@@ -148,11 +137,14 @@ function translationEn() {
       <screenfull id="header-screenfull" v-show="!deviceDetection()" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
-        <globalization />
+        <globalization
+          class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
+        />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
+              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
             >
               <span class="check-zh" v-show="locale === 'zh'">
@@ -162,6 +154,7 @@ function translationEn() {
             </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
+              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
             >
               <span class="check-en" v-show="locale === 'en'">
@@ -174,9 +167,9 @@ function translationEn() {
       </el-dropdown>
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
-        <span class="el-dropdown-link">
+        <span class="el-dropdown-link navbar-bg-hover">
           <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p v-if="username">{{ username }}</p>
+          <p v-if="username" class="dark:color-white">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">
@@ -191,7 +184,7 @@ function translationEn() {
         </template>
       </el-dropdown>
       <span
-        class="el-icon-setting"
+        class="el-icon-setting navbar-bg-hover"
         :title="t('buttons.hssystemSet')"
         @click="onPanel"
       >
@@ -201,26 +194,7 @@ function translationEn() {
   </div>
 </template>
 
-<style module="classes" scoped>
-.container {
-  padding: 0 15px;
-}
-</style>
-
 <style lang="scss" scoped>
-.hamburger {
-  width: 20px;
-  height: 20px;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.is-active-hamburger {
-  transform: rotate(180deg);
-}
-
 .translation {
   ::v-deep(.el-dropdown-menu__item) {
     padding: 5px 40px;