style(Login): update login styles

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
+    <RouterView />
-      :locale="locale.elLocale"
-      :size="size"
-      :button="{
-        autoInsertSpace: true
-      }"
-    >
-      <RouterView />
-    </ElConfigProvider>
   </ConfigGlobal>
 </template>
 

src/components/ConfigGlobal/src/ConfigGlobal.vue

@@ -1,17 +1,22 @@
-<script lang="tsx">
+<script setup lang="ts">
-import { provide, defineComponent } from 'vue'
+import { provide, computed } from 'vue'
 import { propTypes } from '@/utils/propTypes'
+import { ElConfigProvider } from 'element-plus'
+import { useLocaleStore } from '@/store/modules/locale'
 
-export default defineComponent({
+const localeStore = useLocaleStore()
-  name: 'ConfigGlobal',
-  inheritAttrs: false,
-  props: {
-    size: propTypes.oneOf(['default', 'medium', 'small', 'mini']).def('default')
-  },
-  setup(props, { slots }) {
-    provide('configGlobal', props)
 
-    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>

src/hooks/web/useI18n.ts

@@ -1,4 +1,4 @@
-import { i18n } from '@/plugins/i18n'
+import { i18n } from '@/plugins/vueI18n'
 
 type I18nGlobalTranslation = {
   (key: string): string

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()

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'

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>

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" />