fix:登录界面框架修改

src/locales/langs/en-us.ts

@@ -1,4 +1,4 @@
-const local: App.I18n.Schema = {
+const local: any = {
   system: {
     title: 'Vue-AntD-Web'
   },
@@ -179,7 +179,8 @@ const local: App.I18n.Schema = {
         validateSuccess: 'Verification passed',
         loginSuccess: 'Login successfully',
         welcomeBack: 'Welcome back, {username} !',
-        checkCode: 'Please check the verification code'
+        checkCode: 'Please check the verification code',
+        emailPlaceholder:'Please enter the email'
       },
       pwdLogin: {
         title: 'Password Login',
@@ -203,7 +204,26 @@ const local: App.I18n.Schema = {
         title: 'Register',
         agreement: 'I have read and agree to',
         protocol: '《User Agreement》',
-        policy: '《Privacy Policy》'
+        policy: '《Privacy Policy》',
+        agreeTermsFirst: 'Please agree to the User Agreement and Privacy Policy first',
+        agreeTerms: 'I have read and agree to the User Agreement and Privacy Policy',
+        code:'Code',
+        password:'Password',
+        confirmPassword:'ConfirmPassword',
+        basicInfo: 'BasicInfo',
+        terms: 'Terms',
+        security: 'Security',
+        username: 'User Name',
+        fullName: 'Full Name',
+        age: 'Age',
+        gender: 'Gender',
+        male: 'Male',
+        female: 'Female',
+        phone: 'Phone',
+        email: 'Email',
+        address: 'Address',
+        next: 'Next',
+        prev: 'Prev',
       },
       resetPwd: {
         title: 'Reset Password'
@@ -212,6 +232,7 @@ const local: App.I18n.Schema = {
         title: 'Bind WeChat'
       }
     },
+
     about: {
       title: 'About',
       introduction: `Soybean Admin is an elegant and powerful admin template, based on the latest front-end technology stack, including Vue3, Vite5, TypeScript, Pinia and UnoCSS. It has built-in rich theme configuration and components, strict code specifications, and an automated file routing system. In addition, it also uses the online mock data solution based on ApiFox. Soybean Admin provides you with a one-stop admin solution, no additional configuration, and out of the box. It is also a best practice for learning cutting-edge technologies quickly.`,

src/locales/langs/zh-cn.ts

@@ -1,4 +1,4 @@
-const local: App.I18n.Schema = {
+const local:any = {
   system: {
     title: 'Vue-AntD-Web'
   },
@@ -179,7 +179,8 @@ const local: App.I18n.Schema = {
         validateSuccess: '验证成功',
         loginSuccess: '登录成功',
         welcomeBack: '欢迎回来，{username} ！',
-        checkCode: '请输入验证码'
+        checkCode: '请输入验证码',
+        emailPlaceholder:'请输入邮箱'
       },
       pwdLogin: {
         title: '密码登录',
@@ -203,7 +204,26 @@ const local: App.I18n.Schema = {
         title: '注册账号',
         agreement: '我已经仔细阅读并接受',
         protocol: '《用户协议》',
-        policy: '《隐私权政策》'
+        policy: '《隐私权政策》',
+        agreeTermsFirst: '请先同意用户协议和隐私政策',
+        agreeTerms: '我已阅读并同意用户协议和隐私政策',
+        code:'验证码',
+        password:'密码',
+        confirmPassword:'再次输入密码',
+        basicInfo: '基本信息',
+        terms: '协议条款',
+        security: '安全信息',
+        username: '用户名',
+        fullName: '姓名',
+        age: '年龄',
+        gender: '性别',
+        male: '男',
+        female: '女',
+        phone: '电话',
+        email: '邮箱',
+        address: '地址',
+        next: '下一步',
+        prev: '上一步',
       },
       resetPwd: {
         title: '重置密码'
@@ -212,6 +232,7 @@ const local: App.I18n.Schema = {
         title: '绑定微信'
       }
     },
+
     about: {
       title: '关于',
       introduction: `Soybean Admin 是一个优雅且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。Soybean Admin 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。`,

src/typings/components.d.ts

@@ -46,6 +46,8 @@ declare module 'vue' {
     ASpace: typeof import('ant-design-vue/es')['Space']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     AStatistic: typeof import('ant-design-vue/es')['Statistic']
+    AStep: typeof import('ant-design-vue/es')['Step']
+    ASteps: typeof import('ant-design-vue/es')['Steps']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATable: typeof import('ant-design-vue/es')['Table']
     ATag: typeof import('ant-design-vue/es')['Tag']

src/views/_builtin/login/index.vue

@@ -2,7 +2,6 @@
 import { computed } from 'vue';
 import type { Component } from 'vue';
 import { getColorPalette, mixColor } from '@sa/utils';
-import { $t } from '@/locales';
 import { useThemeStore } from '@/store/modules/theme';
 import { loginModuleRecord } from '@/constants/app';
 import PwdLogin from './modules/pwd-login.vue';
@@ -10,6 +9,8 @@ import CodeLogin from './modules/code-login.vue';
 import Register from './modules/register.vue';
 import ResetPwd from './modules/reset-pwd.vue';
 import BindWechat from './modules/bind-wechat.vue';
+import { WifiOutlined } from '@ant-design/icons-vue';
+import {useI18n} from "vue-i18n";
 
 interface Props {
   /** The login module */
@@ -17,7 +18,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-
+const { t } = useI18n();
 const themeStore = useThemeStore();
 
 interface LoginModule {
@@ -54,12 +55,12 @@ const bgColor = computed(() => {
     <ACard class="relative z-4">
       <div class="w-400px lt-sm:w-300px">
         <header class="flex-y-center justify-between">
-          <SystemLogo class="text-64px text-primary lt-sm:text-48px" />
-          <h3 class="text-28px text-primary font-500 lt-sm:text-22px">{{ $t('system.title') }}</h3>
+          <WifiOutlined class="text-64px text-primary lt-sm:text-48px" />
+          <h3 class="text-28px text-primary font-500 lt-sm:text-22px">{{ "WANFi" }}</h3>
         </header>
-        <main class="pt-24px">
-          <h3 class="text-18px text-primary font-medium">{{ $t(activeModule.label) }}</h3>
-          <div class="animation-slide-in-left pt-24px">
+        <main >
+          <h3 class="text-18px text-primary font-medium">{{ t('activeModule.label') }}</h3>
+          <div class="animation-slide-in-left ">
             <Transition :name="themeStore.page.animateMode" mode="out-in" appear>
               <component :is="activeModule.component" />
             </Transition>