From 0d4fe313b499289e01d97e429f4515728934d5db Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 27 Jul 2022 21:10:36 +0800
Subject: [PATCH] fix: update

---
 src/layout/components/navbar.vue        |   2 +-
 src/layout/components/search/index.vue  |   2 +-
 src/layout/components/setting/index.vue |   6 +-
 src/layout/hooks/useBoolean.ts          |   2 +-
 src/layout/hooks/useDataThemeChange.ts  |   4 +-
 src/layout/hooks/useLayout.ts           |   4 +-
 src/layout/hooks/useTranslationLang.ts  |   2 +-
 src/layout/index.vue                    |   2 +-
 src/views/login/index.vue               | 320 ++++++++++++------------
 9 files changed, 175 insertions(+), 169 deletions(-)

diff --git a/src/layout/components/navbar.vue b/src/layout/components/navbar.vue
index 9d705c7d6..e42ec7e19 100644
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -7,7 +7,7 @@ import avatars from "/@/assets/avatars.jpg";
 import Breadcrumb from "./sidebar/breadCrumb.vue";
 import { deviceDetection } from "@pureadmin/utils";
 import screenfull from "../components/screenfull/index.vue";
-import useTranslationLang from "../hooks/useTranslationLang";
+import { useTranslationLang } from "../hooks/useTranslationLang";
 import globalization from "/@/assets/svg/globalization.svg?component";
 
 const {
diff --git a/src/layout/components/search/index.vue b/src/layout/components/search/index.vue
index 86880a186..7b04d9eb2 100644
--- a/src/layout/components/search/index.vue
+++ b/src/layout/components/search/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { SearchModal } from "./components";
-import useBoolean from "../../hooks/useBoolean";
+import { useBoolean } from "../../hooks/useBoolean";
 const { bool: show, toggle } = useBoolean();
 function handleSearch() {
   toggle();
diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index 65a1e9e0c..bd9b7917c 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -15,9 +15,8 @@ import { emitter } from "/@/utils/mitt";
 import { templateRef } from "@vueuse/core";
 import { routerArrays } from "/@/layout/types";
 import { useAppStoreHook } from "/@/store/modules/app";
-import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
-import useDataThemeChange from "/@/layout/hooks/useDataThemeChange";
+import { useDataThemeChange } from "/@/layout/hooks/useDataThemeChange";
 import {
   useDark,
   debounce,
@@ -44,6 +43,7 @@ const {
   layoutTheme,
   themeColors,
   dataThemeChange,
+  setEpThemeColor,
   setLayoutThemeColor
 } = useDataThemeChange();
 
@@ -130,7 +130,7 @@ function onReset() {
   router.push("/login");
   const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
   useAppStoreHook().setLayout(Layout);
-  useEpThemeStoreHook().setEpThemeColor(EpThemeColor);
+  setEpThemeColor(EpThemeColor);
   useMultiTagsStoreHook().multiTagsCacheChange(MultiTagsCache);
   toggleClass(Grey, "html-grey", document.querySelector("html"));
   toggleClass(Weak, "html-weakness", document.querySelector("html"));
diff --git a/src/layout/hooks/useBoolean.ts b/src/layout/hooks/useBoolean.ts
index 39b314ac6..1d1403172 100644
--- a/src/layout/hooks/useBoolean.ts
+++ b/src/layout/hooks/useBoolean.ts
@@ -1,6 +1,6 @@
 import { ref } from "vue";
 
-export default function useBoolean(initValue = false) {
+export function useBoolean(initValue = false) {
   const bool = ref(initValue);
 
   function setBool(value: boolean) {
diff --git a/src/layout/hooks/useDataThemeChange.ts b/src/layout/hooks/useDataThemeChange.ts
index cbae683f1..36a156b7b 100644
--- a/src/layout/hooks/useDataThemeChange.ts
+++ b/src/layout/hooks/useDataThemeChange.ts
@@ -1,6 +1,6 @@
 import { getConfig } from "/@/config";
 import { find } from "lodash-unified";
-import useLayout from "./useLayout";
+import { useLayout } from "./useLayout";
 import { themeColorsType } from "../types";
 import { TinyColor } from "@ctrl/tinycolor";
 import { ref, getCurrentInstance } from "vue";
@@ -12,7 +12,7 @@ import {
   toggleTheme
 } from "@pureadmin/theme/dist/browser-utils";
 
-export default function useDataThemeChange() {
+export function useDataThemeChange() {
   const { layoutTheme } = useLayout();
   const themeColors = ref<Array<themeColorsType>>([
     /* 道奇蓝（默认） */
diff --git a/src/layout/hooks/useLayout.ts b/src/layout/hooks/useLayout.ts
index 28795a16a..6f7c3f84a 100644
--- a/src/layout/hooks/useLayout.ts
+++ b/src/layout/hooks/useLayout.ts
@@ -1,9 +1,9 @@
-import { computed, getCurrentInstance } from "vue";
 import { useI18n } from "vue-i18n";
 import { routerArrays } from "../types";
+import { computed, getCurrentInstance } from "vue";
 import { useMultiTagsStore } from "/@/store/modules/multiTags";
 
-export default function useLayout() {
+export function useLayout() {
   const instance = getCurrentInstance().appContext.app.config.globalProperties;
 
   const initStorage = () => {
diff --git a/src/layout/hooks/useTranslationLang.ts b/src/layout/hooks/useTranslationLang.ts
index 65c087da5..c3b8915f9 100644
--- a/src/layout/hooks/useTranslationLang.ts
+++ b/src/layout/hooks/useTranslationLang.ts
@@ -3,7 +3,7 @@ import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import { watch, getCurrentInstance } from "vue";
 
-export default function useTranslationLang() {
+export function useTranslationLang() {
   const { changeTitle, changeWangeditorLanguage } = useNav();
   const { locale, t } = useI18n();
   const route = useRoute();
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 89c806005..6a0266d79 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { setType } from "./types";
 import { emitter } from "/@/utils/mitt";
+import { useLayout } from "./hooks/useLayout";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { deviceDetection, useDark } from "@pureadmin/utils";
 import { useSettingStoreHook } from "/@/store/modules/settings";
@@ -10,7 +11,6 @@ import backTop from "/@/assets/svg/back_top.svg?component";
 import fullScreen from "/@/assets/svg/full_screen.svg?component";
 import exitScreen from "/@/assets/svg/exit_screen.svg?component";
 
-import useLayout from "./hooks/useLayout";
 import navbar from "./components/navbar.vue";
 import tag from "./components/tag/index.vue";
 import appMain from "./components/appMain.vue";
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4ba2f0441..ce6c84e6f 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -10,15 +10,15 @@ import { initRouter } from "/@/router/utils";
 import { useNav } from "/@/layout/hooks/nav";
 import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
-import useLayout from "/@/layout/hooks/useLayout";
 import { storageSession } from "@pureadmin/utils";
 import { operates, thirdParty } from "./utils/enums";
+import { useLayout } from "/@/layout/hooks/useLayout";
 import { useUserStoreHook } from "/@/store/modules/user";
 import { bg, avatar, currentWeek } from "./utils/static";
 import { ReImageVerify } from "/@/components/ReImageVerify";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
-import useDataThemeChange from "/@/layout/hooks/useDataThemeChange";
-import useTranslationLang from "/@/layout/hooks/useTranslationLang";
+import { useTranslationLang } from "/@/layout/hooks/useTranslationLang";
+import { useDataThemeChange } from "/@/layout/hooks/useDataThemeChange";
 import { ref, reactive, watch, computed, getCurrentInstance } from "vue";
 
 import dayIcon from "/@/assets/svg/day.svg?component";
@@ -82,178 +82,184 @@ function onHandle(value) {
 watch(imgCode, value => {
   useUserStoreHook().SET_VERIFYCODE(value);
 });
+
+dataThemeChange();
 </script>
 
 <template>
-  <div class="flex-c absolute right-5">
-    <!-- 主题 -->
-    <el-switch
-      v-model="dataTheme"
-      inline-prompt
-      :active-icon="dayIcon"
-      :inactive-icon="darkIcon"
-      @change="dataThemeChange"
-    />
-    <!-- 国际化 -->
-    <el-dropdown trigger="click">
-      <globalization class="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"
-          >
-            <IconifyIconOffline
-              class="check-zh"
-              v-show="locale === 'zh'"
-              icon="check"
-            />
-            简体中文
-          </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'">
-              <IconifyIconOffline icon="check" />
-            </span>
-            English
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </template>
-    </el-dropdown>
-  </div>
-  <img :src="bg" class="wave" />
-  <div class="login-container">
-    <div class="img">
-      <component :is="currentWeek" />
+  <div class="wh-full select-none">
+    <img :src="bg" class="wave" />
+    <div class="flex-c absolute right-5 top-3">
+      <!-- 主题 -->
+      <el-switch
+        v-model="dataTheme"
+        inline-prompt
+        :active-icon="dayIcon"
+        :inactive-icon="darkIcon"
+        @change="dataThemeChange"
+      />
+      <!-- 国际化 -->
+      <el-dropdown trigger="click">
+        <globalization
+          class="hover:color-primary !hover:bg-transparent w-20px h-20px ml-1.5 cursor-pointer outline-none duration-300"
+        />
+        <template #dropdown>
+          <el-dropdown-menu class="translation">
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'zh')"
+              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
+              @click="translationCh"
+            >
+              <IconifyIconOffline
+                class="check-zh"
+                v-show="locale === 'zh'"
+                icon="check"
+              />
+              简体中文
+            </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'">
+                <IconifyIconOffline icon="check" />
+              </span>
+              English
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </div>
-    <div class="login-box">
-      <div class="login-form">
-        <avatar class="avatar" />
-        <Motion>
-          <h2>{{ title }}</h2>
-        </Motion>
-
-        <el-form
-          v-if="currentPage === 0"
-          ref="ruleFormRef"
-          :model="ruleForm"
-          :rules="loginRules"
-          size="large"
-          @keyup.enter="onLogin(ruleFormRef)"
-        >
-          <Motion :delay="100">
-            <el-form-item prop="username">
-              <el-input
-                clearable
-                v-model="ruleForm.username"
-                placeholder="账号"
-                :prefix-icon="useRenderIcon('user')"
-              />
-            </el-form-item>
+    <div class="login-container">
+      <div class="img">
+        <component :is="currentWeek" />
+      </div>
+      <div class="login-box">
+        <div class="login-form">
+          <avatar class="avatar" />
+          <Motion>
+            <h2 class="outline-none">{{ title }}</h2>
           </Motion>
 
-          <Motion :delay="150">
-            <el-form-item prop="password">
-              <el-input
-                clearable
-                show-password
-                v-model="ruleForm.password"
-                placeholder="密码"
-                :prefix-icon="useRenderIcon('lock')"
-              />
-            </el-form-item>
-          </Motion>
+          <el-form
+            v-if="currentPage === 0"
+            ref="ruleFormRef"
+            :model="ruleForm"
+            :rules="loginRules"
+            size="large"
+            @keyup.enter="onLogin(ruleFormRef)"
+          >
+            <Motion :delay="100">
+              <el-form-item prop="username">
+                <el-input
+                  clearable
+                  v-model="ruleForm.username"
+                  placeholder="账号"
+                  :prefix-icon="useRenderIcon('user')"
+                />
+              </el-form-item>
+            </Motion>
 
-          <Motion :delay="200">
-            <el-form-item prop="verifyCode">
-              <el-input
-                clearable
-                v-model="ruleForm.verifyCode"
-                placeholder="验证码"
-                :prefix-icon="
-                  useRenderIcon('ri:shield-keyhole-line', { online: true })
-                "
-              >
-                <template v-slot:append>
-                  <ReImageVerify v-model:code="imgCode" />
-                </template>
-              </el-input>
-            </el-form-item>
-          </Motion>
+            <Motion :delay="150">
+              <el-form-item prop="password">
+                <el-input
+                  clearable
+                  show-password
+                  v-model="ruleForm.password"
+                  placeholder="密码"
+                  :prefix-icon="useRenderIcon('lock')"
+                />
+              </el-form-item>
+            </Motion>
 
-          <Motion :delay="250">
-            <el-form-item>
-              <div class="w-full h-20px flex justify-between items-center">
-                <el-checkbox v-model="checked">记住密码</el-checkbox>
-                <el-button
-                  link
-                  type="primary"
-                  @click="useUserStoreHook().SET_CURRENTPAGE(4)"
+            <Motion :delay="200">
+              <el-form-item prop="verifyCode">
+                <el-input
+                  clearable
+                  v-model="ruleForm.verifyCode"
+                  placeholder="验证码"
+                  :prefix-icon="
+                    useRenderIcon('ri:shield-keyhole-line', { online: true })
+                  "
                 >
-                  忘记密码?
-                </el-button>
-              </div>
-              <el-button
-                class="w-full mt-4"
-                size="default"
-                type="primary"
-                :loading="loading"
-                @click="onLogin(ruleFormRef)"
-              >
-                登录
-              </el-button>
-            </el-form-item>
-          </Motion>
+                  <template v-slot:append>
+                    <ReImageVerify v-model:code="imgCode" />
+                  </template>
+                </el-input>
+              </el-form-item>
+            </Motion>
 
-          <Motion :delay="300">
-            <el-form-item>
-              <div class="w-full h-20px flex justify-between items-center">
+            <Motion :delay="250">
+              <el-form-item>
+                <div class="w-full h-20px flex justify-between items-center">
+                  <el-checkbox v-model="checked">记住密码</el-checkbox>
+                  <el-button
+                    link
+                    type="primary"
+                    @click="useUserStoreHook().SET_CURRENTPAGE(4)"
+                  >
+                    忘记密码?
+                  </el-button>
+                </div>
                 <el-button
-                  v-for="(item, index) in operates"
-                  :key="index"
                   class="w-full mt-4"
                   size="default"
-                  @click="onHandle(index + 1)"
+                  type="primary"
+                  :loading="loading"
+                  @click="onLogin(ruleFormRef)"
                 >
-                  {{ item.title }}
+                  登录
                 </el-button>
+              </el-form-item>
+            </Motion>
+
+            <Motion :delay="300">
+              <el-form-item>
+                <div class="w-full h-20px flex justify-between items-center">
+                  <el-button
+                    v-for="(item, index) in operates"
+                    :key="index"
+                    class="w-full mt-4"
+                    size="default"
+                    @click="onHandle(index + 1)"
+                  >
+                    {{ item.title }}
+                  </el-button>
+                </div>
+              </el-form-item>
+            </Motion>
+          </el-form>
+
+          <Motion v-if="currentPage === 0" :delay="350">
+            <el-form-item>
+              <el-divider>
+                <p class="text-gray-500 text-xs">第三方登录</p>
+              </el-divider>
+              <div class="w-full flex justify-evenly">
+                <span
+                  v-for="(item, index) in thirdParty"
+                  :key="index"
+                  :title="`${item.title}登录`"
+                >
+                  <IconifyIconOnline
+                    :icon="`ri:${item.icon}-fill`"
+                    width="20"
+                    class="cursor-pointer text-gray-500 hover:text-blue-400"
+                  />
+                </span>
               </div>
             </el-form-item>
           </Motion>
-        </el-form>
-
-        <Motion v-if="currentPage === 0" :delay="350">
-          <el-form-item>
-            <el-divider>
-              <p class="text-gray-500 text-xs">第三方登录</p>
-            </el-divider>
-            <div class="w-full flex justify-evenly">
-              <span
-                v-for="(item, index) in thirdParty"
-                :key="index"
-                :title="`${item.title}登录`"
-              >
-                <IconifyIconOnline
-                  :icon="`ri:${item.icon}-fill`"
-                  width="20"
-                  class="cursor-pointer text-gray-500 hover:text-blue-400"
-                />
-              </span>
-            </div>
-          </el-form-item>
-        </Motion>
-        <!-- 手机号登录 -->
-        <phone v-if="currentPage === 1" />
-        <!-- 二维码登录 -->
-        <qrCode v-if="currentPage === 2" />
-        <!-- 注册 -->
-        <regist v-if="currentPage === 3" />
-        <!-- 忘记密码 -->
-        <update v-if="currentPage === 4" />
+          <!-- 手机号登录 -->
+          <phone v-if="currentPage === 1" />
+          <!-- 二维码登录 -->
+          <qrCode v-if="currentPage === 2" />
+          <!-- 注册 -->
+          <regist v-if="currentPage === 3" />
+          <!-- 忘记密码 -->
+          <update v-if="currentPage === 4" />
+        </div>
       </div>
     </div>
   </div>