From eb68f1d919e13c07b7d200e9aec53804b2a6dc7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=87=AF=E9=BE=99?= <502431556@qq.com>
Date: Fri, 7 Jan 2022 09:12:32 +0800
Subject: [PATCH] style(Login): update login styles

---
 src/App.vue                                   | 16 +---------
 .../ConfigGlobal/src/ConfigGlobal.vue         | 29 +++++++++++--------
 src/hooks/web/useI18n.ts                      |  2 +-
 src/hooks/web/useLocale.ts                    |  4 +--
 src/main.ts                                   |  6 ++--
 src/plugins/{animate => animate.css}/index.ts |  0
 src/plugins/{i18n => vueI18n}/helper.ts       |  0
 src/plugins/{i18n => vueI18n}/index.ts        |  0
 src/plugins/{windicss => windi.css}/index.ts  |  0
 src/views/Login/Login.vue                     |  9 ++++--
 src/views/Login/components/LoginForm.vue      | 10 +++++++
 11 files changed, 40 insertions(+), 36 deletions(-)
 rename src/plugins/{animate => animate.css}/index.ts (100%)
 rename src/plugins/{i18n => vueI18n}/helper.ts (100%)
 rename src/plugins/{i18n => vueI18n}/index.ts (100%)
 rename src/plugins/{windicss => windi.css}/index.ts (100%)

diff --git a/src/App.vue b/src/App.vue
index 23c4a1bdb..02a009d98 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppStore } from '@/store/modules/app'
-import { useLocaleStore } from '@/store/modules/locale'
-import { ElConfigProvider } from 'element-plus'
 import { ConfigGlobal } from '@/components/ConfigGlobal'
 import { isDark } from '@/utils/is'
 
 const appStore = useAppStore()
 
-const localeStore = useLocaleStore()
-
-const locale = computed(() => localeStore.locale)
-
 const size = computed(() => appStore.size)
 
 function initDark() {
@@ -24,15 +18,7 @@ initDark()
 
 <template>
   <ConfigGlobal :size="size">
-    <ElConfigProvider
-      :locale="locale.elLocale"
-      :size="size"
-      :button="{
-        autoInsertSpace: true
-      }"
-    >
-      <RouterView />
-    </ElConfigProvider>
+    <RouterView />
   </ConfigGlobal>
 </template>
 
diff --git a/src/components/ConfigGlobal/src/ConfigGlobal.vue b/src/components/ConfigGlobal/src/ConfigGlobal.vue
index 35f37c3bc..8684ab7fe 100644
--- a/src/components/ConfigGlobal/src/ConfigGlobal.vue
+++ b/src/components/ConfigGlobal/src/ConfigGlobal.vue
@@ -1,17 +1,22 @@
-<script lang="tsx">
-import { provide, defineComponent } from 'vue'
+<script setup lang="ts">
+import { provide, computed } from 'vue'
 import { propTypes } from '@/utils/propTypes'
+import { ElConfigProvider } from 'element-plus'
+import { useLocaleStore } from '@/store/modules/locale'
 
-export default defineComponent({
-  name: 'ConfigGlobal',
-  inheritAttrs: false,
-  props: {
-    size: propTypes.oneOf(['default', 'medium', 'small', 'mini']).def('default')
-  },
-  setup(props, { slots }) {
-    provide('configGlobal', props)
+const localeStore = useLocaleStore()
 
-    return () => slots.default?.()
-  }
+const locale = computed(() => localeStore.locale)
+
+const props = defineProps({
+  size: propTypes.oneOf<ElememtPlusSzie[]>(['default', 'small', 'large']).def('default')
 })
+
+provide('configGlobal', props)
 </script>
+
+<template>
+  <ElConfigProvider :locale="locale.elLocale" :size="size">
+    <slot></slot>
+  </ElConfigProvider>
+</template>
diff --git a/src/hooks/web/useI18n.ts b/src/hooks/web/useI18n.ts
index 9ee6e2c76..f70088126 100644
--- a/src/hooks/web/useI18n.ts
+++ b/src/hooks/web/useI18n.ts
@@ -1,4 +1,4 @@
-import { i18n } from '@/plugins/i18n'
+import { i18n } from '@/plugins/vueI18n'
 
 type I18nGlobalTranslation = {
   (key: string): string
diff --git a/src/hooks/web/useLocale.ts b/src/hooks/web/useLocale.ts
index a7a5ede72..85ae28456 100644
--- a/src/hooks/web/useLocale.ts
+++ b/src/hooks/web/useLocale.ts
@@ -1,6 +1,6 @@
-import { i18n } from '@/plugins/i18n'
+import { i18n } from '@/plugins/vueI18n'
 import { useLocaleStoreWithOut } from '@/store/modules/locale'
-import { setHtmlPageLang } from '@/plugins/i18n/helper'
+import { setHtmlPageLang } from '@/plugins/vueI18n/helper'
 
 function setI18nLanguage(locale: LocaleType) {
   const localeStore = useLocaleStoreWithOut()
diff --git a/src/main.ts b/src/main.ts
index 4dec825b6..d708c66c8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,11 +1,11 @@
 // 引入windi css
-import '@/plugins/windicss'
+import '@/plugins/windi.css'
 
 // 导入全局的svg图标
 import '@/plugins/svgIcon'
 
 // 初始化多语言
-import { setupI18n } from '@/plugins/i18n'
+import { setupI18n } from '@/plugins/vueI18n'
 
 // 引入状态管理
 import { setupStore } from '@/store'
@@ -20,7 +20,7 @@ import { setupElementPlus } from '@/plugins/elementPlus'
 import '@/styles/index.less'
 
 // 引入动画
-import '@/plugins/animate'
+import '@/plugins/animate.css'
 
 // 路由
 import { setupRouter } from './router'
diff --git a/src/plugins/animate/index.ts b/src/plugins/animate.css/index.ts
similarity index 100%
rename from src/plugins/animate/index.ts
rename to src/plugins/animate.css/index.ts
diff --git a/src/plugins/i18n/helper.ts b/src/plugins/vueI18n/helper.ts
similarity index 100%
rename from src/plugins/i18n/helper.ts
rename to src/plugins/vueI18n/helper.ts
diff --git a/src/plugins/i18n/index.ts b/src/plugins/vueI18n/index.ts
similarity index 100%
rename from src/plugins/i18n/index.ts
rename to src/plugins/vueI18n/index.ts
diff --git a/src/plugins/windicss/index.ts b/src/plugins/windi.css/index.ts
similarity index 100%
rename from src/plugins/windicss/index.ts
rename to src/plugins/windi.css/index.ts
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 38052f615..3cf86f096 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -17,7 +17,10 @@ const prefixCls = getPrefixCls('login')
 </script>
 
 <template>
-  <div :class="prefixCls" class="h-[100%] relative overflow-hidden <xl:bg-v-dark <sm:px-10px">
+  <div
+    :class="prefixCls"
+    class="h-[100%] relative overflow-hidden <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px"
+  >
     <div class="relative h-full flex mx-auto">
       <div
         :class="`${prefixCls}__left`"
@@ -55,9 +58,9 @@ const prefixCls = getPrefixCls('login')
         </div>
         <Transition appear enter-active-class="animate__animated animate__bounceInRight">
           <div
-            class="h-full flex items-center m-auto w-[100%] @2xl:max-w-500px @xl:max-w-500px @md:max-w-500px"
+            class="h-full flex items-center m-auto w-[100%] @2xl:max-w-500px @xl:max-w-500px @md:max-w-500px @lg:max-w-500px"
           >
-            <LoginForm class="p-20px h-auto <xl:(bg-white rounded-3xl)" />
+            <LoginForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
           </div>
         </Transition>
       </div>
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index e85b9d101..9a524ef7d 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -13,6 +13,12 @@ const rules = {
 }
 
 const schema = reactive<FormSchema[]>([
+  {
+    field: 'title',
+    colProps: {
+      span: 24
+    }
+  },
   {
     field: 'username',
     label: t('login.username'),
@@ -69,6 +75,10 @@ const remember = ref(false)
 
 <template>
   <Form :schema="schema" :rules="rules" label-position="top" hide-required-asterisk size="large">
+    <template #title>
+      <h2 class="text-2xl font-bold text-center w-[100%]">{{ t('login.login') }}</h2>
+    </template>
+
     <template #tool>
       <div class="flex justify-between items-center w-[100%]">
         <ElCheckbox v-model="remember" :label="t('login.remember')" size="small" />