删除登录废弃文件

package.json

@@ -128,8 +128,7 @@
   },
   "keywords": [
     "vue",
-    "naive-ui",
+    "element-plus",
-    "naive-ui-admin",
     "vue3",
     "ts",
     "tsx",

src/components/Cropper/src/CropperImage.vue

@@ -66,7 +66,7 @@
       const cropper = ref<Nullable<Cropper>>();
       const isReady = ref(false);
 
-      const prefixCls = 'naive-ui-admin';
+      const prefixCls = 'cropper';
       const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80);
 
       const getImageStyle = computed((): CSSProperties => {

src/layout/components/Footer/index.vue

@@ -5,7 +5,7 @@
       <a href="https://www.baidu.com" target="_blank"> 社区 </a>
       <a href="https://www.baidu.com/issues" target="_blank"> 交流 </a>
     </div>
-    <div class="copyright"> naive-ui-admin 1.4 · Made by Ah jung </div>
+    <div class="copyright"> 版权说明 </div>
   </div>
 </template>
 

src/router/index.ts

@@ -37,9 +37,7 @@ export const RootRoute: RouteRecordRaw = {
 export const LoginRoute: RouteRecordRaw = {
   path: '/login',
   name: 'Login',
-  // component: () => import('@/views/login/index.vue'), //v1.x 模板
+  component: () => import('@/views/login/index.vue'),
-  // component: () => import('@/views/login/newLogin.vue'), // 2.x新模板
-  component: () => import('@/views/login/newLogin2.vue'), // 2.x全新模板
   meta: {
     title: '登录',
   },

src/views/login/LoginForm.vue

@@ -8,39 +8,53 @@
     :rules="rules"
   >
     <el-form-item prop="username">
-      <el-input v-model="formInline.username" placeholder="请输入用户名">
+      <el-input v-model="formInline.username" placeholder="请输入登录账号">
         <template #prefix>
           <el-icon class="el-input__icon" size="18" color="#808695">
             <PersonOutline />
           </el-icon>
         </template>
       </el-input>
+
     </el-form-item>
     <el-form-item prop="password">
       <el-input
         v-model="formInline.password"
         type="password"
         show-password
-        placeholder="请输入密码"
+        placeholder="请输入登录密码"
         @keyup.enter="handleSubmit"
       >
         <template #prefix>
           <el-icon class="el-input__icon" size="18" color="#808695">
-            <LockClosedOutline />
+            <Lock />
           </el-icon>
         </template>
       </el-input>
     </el-form-item>
-    <div class="mb-6 default-color">
+    <el-form-item prop="code">
-      <div class="flex justify-between">
+      <div style="display: flex">
-        <div class="flex-initial">
+        <el-input
-          <el-checkbox v-model:checked="autoLogin">自动登录</el-checkbox>
+          @keyup.enter="handleSubmit"
-        </div>
+          v-model.trim="formInline.code"
-        <div class="flex-initial order-last">
+          placeholder="验证码"
-          <a href="javascript:">忘记密码</a>
+        >
-        </div>
+          <template #prefix>
+            <el-icon class="el-input__icon" size="18" color="#808695">
+              <SafetyCertificateOutlined />
+            </el-icon>
+          </template>
+        </el-input>
+        <img style="width: 108px;height:40px;border-radius: 4px;margin-left:8px;border:2px solid var(--el-border-color) ;cursor: pointer" @click="getCaptcha" v-if="captchaImg" :src="captchaImg">
+      </div>
+    </el-form-item>
+
+    <div class="flex items-center justify-between forget">
+      <div class="flex-initial">
+        <el-checkbox v-model:checked="autoLogin">记住密码</el-checkbox>
       </div>
     </div>
+
     <el-form-item :show-label="false">
       <el-button
         class="w-full"
@@ -52,31 +66,19 @@
         登录
       </el-button>
     </el-form-item>
-    <div class="mb-4 default-color">
-      <div class="flex view-account-other">
-        <div class="flex-initial">
-          <span>其它登录方式</span>
-        </div>
-        <div class="flex-initial mx-2">
-          <a href="javascript:">
-            <el-icon class="el-input__icon" size="24" color="#2d8cf0">
-              <LogoGithub />
-            </el-icon>
-          </a>
-        </div>
-        <div class="flex-initial mx-2">
-          <a href="javascript:">
-            <el-icon class="el-input__icon" size="24" color="#2d8cf0">
-              <LogoFacebook />
-            </el-icon>
-          </a>
-        </div>
-        <div class="flex-initial" style="margin-left: auto">
-          <a href="javascript:" @click="goRegister">注册账号</a>
-        </div>
-      </div>
-    </div>
   </el-form>
+  <div class="flex items-center justify-between">
+    <div class="flex items-center">
+      <span>其他登录方式</span>
+      <el-icon class="el-input__icon" size="22" color="#165DFF" style="margin:0 10px 0 10px;cursor: pointer;">
+        <GithubFilled />
+      </el-icon>
+      <el-icon class="el-input__icon" size="22" color="#165DFF" style="cursor: pointer;">
+        <AlipayCircleFilled />
+      </el-icon>
+    </div>
+    <div style="cursor: pointer;" @click="goRegister">注册账号</div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -85,15 +87,21 @@
   import { useUserStore } from '@/store/modules/user';
   import { ElMessage } from 'element-plus';
   import { ResultEnum } from '@/enums/httpEnum';
-  import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
+  import {getInfoCaptcha} from '@/api/system/user';
   import { PageEnum } from '@/enums/pageEnum';
+  import { PersonOutline } from '@vicons/ionicons5';
+  import { SafetyCertificateOutlined,GithubFilled,AlipayCircleFilled } from '@vicons/antd';
+  const captchaImg=ref('')
+  // 动态加载滑块验证码组件
 
   interface FormState {
     username: string;
     password: string;
     code:string;
+    key:string;
   }
 
+  const emit = defineEmits(['backLogin']);
   const formRef = ref();
 
   const loading = ref(false);
@@ -103,13 +111,15 @@
   const formInline = reactive({
     username: '',
     password: '',
+    code:'',
+    key:''
   });
 
   const rules = {
-    username: { required: true, message: '请输入用户名', trigger: 'blur' },
+    username: { required: true, message: '请输入登录账号', trigger: 'blur' },
     password: { required: true, message: '请输入密码', trigger: 'blur' },
+    code: { required: true, message: '请输入验证码', trigger: 'blur' }
   };
-  const emit = defineEmits(['goRegister']);
   const userStore = useUserStore();
 
   const router = useRouter();
@@ -119,17 +129,17 @@
     if (!formRef.value) return;
     formRef.value.validate(async (valid) => {
       if (valid) {
-        const { username, password } = formInline;
         loading.value = true;
 
         const params: FormState = {
-          username,
+          username:formInline.username,
-          password,
+          password:formInline.password,
-          code:'618'
+          code:formInline.code,
+          key:formInline.key
         };
 
         try {
-          const { code,msg } = await userStore.login(params);
+          const { code, msg } = await userStore.login(params);
           if (code == ResultEnum.SUCCESS) {
             const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
             ElMessage.success('登录成功，即将进入系统');
@@ -137,6 +147,7 @@
               router.replace('/');
             } else router.replace(toPath);
           } else {
+            getCaptcha()
             ElMessage.error(msg || '登录失败');
           }
         } finally {
@@ -151,7 +162,31 @@
     });
   };
 
-  function goRegister() {
+  const getCaptcha=async()=>{
-    emit('goRegister');
+    let {key,captcha}= await getInfoCaptcha();
+    formInline.key=key
+    captchaImg.value=captcha
   }
+  const goRegister =()=>{
+    emit('backLogin',false);
+  }
+
+  getCaptcha()
+
 </script>
+
+<style lang="scss" scoped>
+  .forget {
+    margin-bottom: 16px;
+    margin-top: -10px;
+  }
+</style>
+<style lang="scss">
+input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
+    background-color: transparent !important;
+    background-image: none;
+    transition: background-color 50000s ease-in-out 0s;
+    
+    }
+</style>

src/views/login/LoginForm2 copy.vue

@@ -1,201 +0,0 @@
-<template>
-  <el-form
-    ref="formRef"
-    :show-label="false"
-    :show-require-mark="false"
-    size="large"
-    :model="formInline"
-    :rules="rules"
-    class="login-form"
-  >
-    <el-form-item prop="username">
-      <el-input v-model="formInline.username" placeholder="请输入用户名">
-        <template #prefix>
-          <el-icon class="el-input__icon" size="18" color="#808695">
-            <PersonOutline />
-          </el-icon>
-        </template>
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="password">
-      <el-input
-        v-model="formInline.password"
-        type="password"
-        show-password
-        placeholder="请输入密码"
-        @keyup.enter="handleSubmit"
-      >
-        <template #prefix>
-          <el-icon class="el-input__icon" size="18" color="#808695">
-            <LockClosedOutline />
-          </el-icon>
-        </template>
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="code">
-      <div style="display: flex">
-        <el-input
-          @keyup.enter="handleSubmit"
-          v-model.trim="formInline.code"
-          placeholder="验证码"
-        >
-          <template #prefix>
-            <el-icon class="el-input__icon" size="18" color="#808695">
-              <LockClosedOutline />
-            </el-icon>
-          </template>
-        </el-input>
-        <img style="width: 140px;height:40px;cursor: pointer" @click="getCaptcha" v-if="captchaImg" :src="captchaImg">
-      </div>
-    </el-form-item>
-
-    <div class="flex items-center justify-between forget">
-      <div class="flex-initial">
-        <el-checkbox v-model:checked="autoLogin">自动登录</el-checkbox>
-      </div>
-      <div class="flex-initial order-last">
-        <a href="javascript:">忘记密码</a>
-      </div>
-    </div>
-
-    <el-form-item :show-label="false">
-      <el-button
-        class="w-full"
-        type="primary"
-        @click="handleSubmit"
-        size="large"
-        :loading="loading"
-        round
-      >
-        登录
-      </el-button>
-    </el-form-item>
-    <div class="mb-4 default-color">
-      <div class="flex view-account-other">
-        <div class="flex-initial">
-          <span>其它登录方式</span>
-        </div>
-        <div class="flex-initial mx-2">
-          <a href="javascript:">
-            <el-icon class="el-input__icon" size="24" color="#2d8cf0">
-              <LogoGithub />
-            </el-icon>
-          </a>
-        </div>
-        <div class="flex-initial mx-2">
-          <a href="javascript:">
-            <el-icon class="el-input__icon" size="24" color="#2d8cf0">
-              <LogoFacebook />
-            </el-icon>
-          </a>
-        </div>
-        <div class="flex-initial" style="margin-left: auto">
-          <a href="javascript:" @click="goRegister">注册账号</a>
-        </div>
-      </div>
-    </div>
-  </el-form>
-</template>
-
-<script lang="ts" setup>
-  import { reactive, ref,defineAsyncComponent } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
-  import { useUserStore } from '@/store/modules/user';
-  import { ElMessage } from 'element-plus';
-  import { ResultEnum } from '@/enums/httpEnum';
-  import {getInfoCaptcha} from '@/api/system/user';
-  import { PageEnum } from '@/enums/pageEnum';
-  const captchaImg=ref('')
-  // 动态加载滑块验证码组件
-
-  interface FormState {
-    username: string;
-    password: string;
-    code:string;
-    key:string;
-  }
-
-  const formRef = ref();
-
-  const loading = ref(false);
-  const autoLogin = ref(true);
-  const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
-
-  const formInline = reactive({
-    username: '',
-    password: '',
-    code:'',
-    key:''
-  });
-
-  const rules = {
-    username: { required: true, message: '请输入用户名', trigger: 'blur' },
-    password: { required: true, message: '请输入密码', trigger: 'blur' },
-    code: { required: true, message: '请输入验证码', trigger: 'blur' }
-  };
-  const emit = defineEmits(['goRegister']);
-  const userStore = useUserStore();
-
-  const router = useRouter();
-  const route = useRoute();
-
-  const handleSubmit = () => {
-    if (!formRef.value) return;
-    formRef.value.validate(async (valid) => {
-      if (valid) {
-        loading.value = true;
-
-        const params: FormState = {
-          username:formInline.username,
-          password:formInline.password,
-          code:formInline.code,
-          key:formInline.key
-        };
-
-        try {
-          const { code, msg } = await userStore.login(params);
-          if (code == ResultEnum.SUCCESS) {
-            const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
-            ElMessage.success('登录成功，即将进入系统');
-            if (route.name === LOGIN_NAME) {
-              router.replace('/');
-            } else router.replace(toPath);
-          } else {
-            ElMessage.error(msg || '登录失败');
-          }
-        } finally {
-          loading.value = false;
-        }
-      } else {
-        ElMessage({
-          message: '请填写完整信息',
-          type: 'error',
-        });
-      }
-    });
-  };
-
-  const getCaptcha=async()=>{
-    let {key,captcha}= await getInfoCaptcha();
-    formInline.key=key
-    captchaImg.value=captcha
-  }
-
-  getCaptcha()
-
-  function goRegister() {
-    emit('goRegister');
-  }
-</script>
-
-<style lang="scss" scoped>
-  .forget {
-    margin-bottom: 16px;
-    margin-top: -10px;
-  }
-  .login-form {
-    .el-input {
-      --el-input-border-radius: 20px !important;
-    }
-  }
-</style>

src/views/login/LoginForm2.vue

@@ -1,192 +0,0 @@
-<template>
-  <el-form
-    ref="formRef"
-    :show-label="false"
-    :show-require-mark="false"
-    size="large"
-    :model="formInline"
-    :rules="rules"
-  >
-    <el-form-item prop="username">
-      <el-input v-model="formInline.username" placeholder="请输入登录账号">
-        <template #prefix>
-          <el-icon class="el-input__icon" size="18" color="#808695">
-            <PersonOutline />
-          </el-icon>
-        </template>
-      </el-input>
-
-    </el-form-item>
-    <el-form-item prop="password">
-      <el-input
-        v-model="formInline.password"
-        type="password"
-        show-password
-        placeholder="请输入登录密码"
-        @keyup.enter="handleSubmit"
-      >
-        <template #prefix>
-          <el-icon class="el-input__icon" size="18" color="#808695">
-            <Lock />
-          </el-icon>
-        </template>
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="code">
-      <div style="display: flex">
-        <el-input
-          @keyup.enter="handleSubmit"
-          v-model.trim="formInline.code"
-          placeholder="验证码"
-        >
-          <template #prefix>
-            <el-icon class="el-input__icon" size="18" color="#808695">
-              <SafetyCertificateOutlined />
-            </el-icon>
-          </template>
-        </el-input>
-        <img style="width: 108px;height:40px;border-radius: 4px;margin-left:8px;border:2px solid var(--el-border-color) ;cursor: pointer" @click="getCaptcha" v-if="captchaImg" :src="captchaImg">
-      </div>
-    </el-form-item>
-
-    <div class="flex items-center justify-between forget">
-      <div class="flex-initial">
-        <el-checkbox v-model:checked="autoLogin">记住密码</el-checkbox>
-      </div>
-    </div>
-
-    <el-form-item :show-label="false">
-      <el-button
-        class="w-full"
-        type="primary"
-        @click="handleSubmit"
-        size="large"
-        :loading="loading"
-      >
-        登录
-      </el-button>
-    </el-form-item>
-  </el-form>
-  <div class="flex items-center justify-between">
-    <div class="flex items-center">
-      <span>其他登录方式</span>
-      <el-icon class="el-input__icon" size="22" color="#165DFF" style="margin:0 10px 0 10px;cursor: pointer;">
-        <GithubFilled />
-      </el-icon>
-      <el-icon class="el-input__icon" size="22" color="#165DFF" style="cursor: pointer;">
-        <AlipayCircleFilled />
-      </el-icon>
-    </div>
-    <div style="cursor: pointer;" @click="goRegister">注册账号</div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { reactive, ref } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
-  import { useUserStore } from '@/store/modules/user';
-  import { ElMessage } from 'element-plus';
-  import { ResultEnum } from '@/enums/httpEnum';
-  import {getInfoCaptcha} from '@/api/system/user';
-  import { PageEnum } from '@/enums/pageEnum';
-  import { PersonOutline } from '@vicons/ionicons5';
-  import { SafetyCertificateOutlined,GithubFilled,AlipayCircleFilled } from '@vicons/antd';
-  const captchaImg=ref('')
-  // 动态加载滑块验证码组件
-
-  interface FormState {
-    username: string;
-    password: string;
-    code:string;
-    key:string;
-  }
-
-  const emit = defineEmits(['backLogin']);
-  const formRef = ref();
-
-  const loading = ref(false);
-  const autoLogin = ref(true);
-  const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
-
-  const formInline = reactive({
-    username: '',
-    password: '',
-    code:'',
-    key:''
-  });
-
-  const rules = {
-    username: { required: true, message: '请输入登录账号', trigger: 'blur' },
-    password: { required: true, message: '请输入密码', trigger: 'blur' },
-    code: { required: true, message: '请输入验证码', trigger: 'blur' }
-  };
-  const userStore = useUserStore();
-
-  const router = useRouter();
-  const route = useRoute();
-
-  const handleSubmit = () => {
-    if (!formRef.value) return;
-    formRef.value.validate(async (valid) => {
-      if (valid) {
-        loading.value = true;
-
-        const params: FormState = {
-          username:formInline.username,
-          password:formInline.password,
-          code:formInline.code,
-          key:formInline.key
-        };
-
-        try {
-          const { code, msg } = await userStore.login(params);
-          if (code == ResultEnum.SUCCESS) {
-            const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
-            ElMessage.success('登录成功，即将进入系统');
-            if (route.name === LOGIN_NAME) {
-              router.replace('/');
-            } else router.replace(toPath);
-          } else {
-            getCaptcha()
-            ElMessage.error(msg || '登录失败');
-          }
-        } finally {
-          loading.value = false;
-        }
-      } else {
-        ElMessage({
-          message: '请填写完整信息',
-          type: 'error',
-        });
-      }
-    });
-  };
-
-  const getCaptcha=async()=>{
-    let {key,captcha}= await getInfoCaptcha();
-    formInline.key=key
-    captchaImg.value=captcha
-  }
-  const goRegister =()=>{
-    emit('backLogin',false);
-  }
-
-  getCaptcha()
-
-</script>
-
-<style lang="scss" scoped>
-  .forget {
-    margin-bottom: 16px;
-    margin-top: -10px;
-  }
-</style>
-<style lang="scss">
-input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
-    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
-    background-color: transparent !important;
-    background-image: none;
-    transition: background-color 50000s ease-in-out 0s;
-    
-    }
-</style>

src/views/login/RegisterForm.vue

@@ -1,12 +1,6 @@
 <template>
-  <el-form
+  <el-form ref="formRef" :show-label="false" :show-require-mark="false" size="large" :model="formInline" :rules="rules"
-    ref="formRef"
+    class="register-form">
-    :show-label="false"
-    :show-require-mark="false"
-    size="large"
-    :model="formInline"
-    :rules="rules"
-  >
     <el-form-item prop="username">
       <el-input v-model="formInline.username" placeholder="请输入用户名">
         <template #prefix>
@@ -17,153 +11,138 @@
       </el-input>
     </el-form-item>
     <el-form-item prop="mobile">
-      <div class="flex w-full">
+      <el-input v-model="formInline.mobile" placeholder="请输入手机号码">
-        <el-input class="order-first" v-model="formInline.mobile" placeholder="请输入手机号码">
-          <template #prefix>
-            <el-icon class="el-input__icon" size="18" color="#808695">
-              <MobileOutlined />
-            </el-icon>
-          </template>
-        </el-input>
-        <el-button class="order-last ml-3" :disabled="isGetCode?true:false" @click="getCode"
-          >{{ codeMsg }}<span v-if="isGetCode">s</span>
-        </el-button>
-      </div>
-    </el-form-item>
-    <el-form-item prop="code">
-      <el-input v-model="formInline.code" placeholder="请输入验证码">
         <template #prefix>
           <el-icon class="el-input__icon" size="18" color="#808695">
-            <SafetyOutlined />
+            <Iphone />
           </el-icon>
         </template>
       </el-input>
+
+    </el-form-item>
+    <el-form-item prop="code">
+      <el-input v-model.trim="formInline.code" placeholder="验证码">
+        <template #prefix>
+          <el-icon class="el-input__icon" size="18" color="#808695">
+            <SafetyCertificateOutlined />
+          </el-icon>
+        </template>
+        <template #suffix>
+          <el-button link :disabled="isGetCode?true:false" @click="getCode">
+          {{ codeMsg }}<span v-if="isGetCode">s</span>
+        </el-button>
+        </template>
+      </el-input>
     </el-form-item>
     <el-form-item prop="password">
-      <el-input
+      <el-input v-model="formInline.password" type="password" show-password placeholder="请输入密码">
-        v-model="formInline.password"
-        type="password"
-        show-password
-        placeholder="请输入密码"
-      >
         <template #prefix>
           <el-icon class="el-input__icon" size="18" color="#808695">
-            <LockClosedOutline />
+            <Lock />
           </el-icon>
         </template>
       </el-input>
     </el-form-item>
-
     <el-form-item prop="retPassword">
-      <el-input
+      <el-input v-model="formInline.retPassword" type="password" show-password placeholder="请再次输入密码">
-        v-model="formInline.retPassword"
-        type="password"
-        show-password
-        placeholder="请再次输入密码"
-        @keyup.enter="handleSubmit"
-      >
         <template #prefix>
           <el-icon class="el-input__icon" size="18" color="#808695">
-            <LockClosedOutline />
+            <Lock />
           </el-icon>
         </template>
       </el-input>
     </el-form-item>
-
+    <el-form-item :show-label="false" class="mb-0">
-    <el-form-item class="default-color" prop="agreement">
+      <el-button class="w-full" type="primary" @click="handleSubmit" size="large" :loading="loading">
-      <div class="flex justify-between">
-        <div class="flex-initial">
-          <el-checkbox v-model="formInline.agreement">我同意隐私协议</el-checkbox>
-        </div>
-      </div>
-    </el-form-item>
-
-    <el-form-item :show-label="false">
-      <el-button
-        class="w-full"
-        type="primary"
-        @click="handleSubmit"
-        size="large"
-        :loading="loading"
-      >
         注册
       </el-button>
     </el-form-item>
 
-    <el-form-item :show-label="false">
+    <div class="flex items-center justify-between">
-      <el-button class="w-full" size="large" block @click="backLogin">返回</el-button>
+      <div class="flex-initial">
-    </el-form-item>
+        <el-form-item prop="agreement">
+          <el-checkbox v-model="formInline.agreement">我同意隐私协议</el-checkbox>
+        </el-form-item>
+      </div>
+    </div>
   </el-form>
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref } from 'vue';
+import { reactive, ref } from 'vue';
-  import { ElMessage } from 'element-plus';
+import { ElMessage } from 'element-plus';
-  import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5';
+import { rule } from '@/utils/validate';
-  import { MobileOutlined, SafetyOutlined } from '@vicons/antd';
+import { PersonOutline } from '@vicons/ionicons5';
+import { SafetyCertificateOutlined } from '@vicons/antd';
 
-  const formRef = ref();
+const formRef = ref();
 
-  const loading = ref(false);
+const loading = ref(false);
-  const codeMsg: any = ref('获取验证码');
+const codeMsg: any = ref('获取验证码');
-  const isGetCode = ref(false);
+const isGetCode = ref(false);
 
-  const emit = defineEmits(['backLogin']);
+const emit = defineEmits(['backLogin']);
 
-  const formInline = reactive({
+const formInline = reactive({
-    username: '',
+  username: '',
-    password: '',
+  password: '',
-    retPassword: '',
+  retPassword: '',
-    mobile: '',
+  mobile: '',
-    code: '',
+  code: '',
-    agreement: false,
+  agreement: false,
+});
+
+const rules = {
+  username: { required: true, message: '请输入用户名', trigger: 'blur' },
+  mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ validator: rule.validatePhone, trigger: 'blur' }],
+  code: { required: true, message: '请输入短信验证码', trigger: 'blur' },
+  password: { required: true, message: '请输入密码', trigger: 'blur' },
+  retPassword: { required: true, message: '请输入确认密码', trigger: 'blur' },
+  agreement: {
+    required: true,
+    type: 'boolean',
+    trigger: 'change',
+    message: '请先勾选协议',
+    validator: (_, value) => value === true,
+  },
+};
+
+const handleSubmit = () => {
+  loading.value = true;
+  formRef.value.validate(async (valid) => {
+    if (valid) {
+      backLogin()
+      loading.value = false;
+    } else {
+      loading.value = false;
+      ElMessage({
+        message: '请填写完整信息',
+        type: 'error',
+      });
+    }
   });
+};
 
-  const rules = {
+const backLogin = () => {
-    username: { required: true, message: '请输入用户名', trigger: 'blur' },
+  emit('backLogin',true);
-    mobile: { required: true, message: '请输入手机号码', trigger: 'blur' },
+};
-    code: { required: true, message: '请输入短信验证码', trigger: 'blur' },
-    password: { required: true, message: '请输入密码', trigger: 'blur' },
-    retPassword: { required: true, message: '请输入确认密码', trigger: 'blur' },
-    agreement: {
-      required: true,
-      type: 'boolean',
-      trigger: 'change',
-      message: '请先勾选协议',
-      validator: (_, value) => value === true,
-    },
-  };
 
-  const handleSubmit = () => {
+function getCode() {
-    loading.value = true;
+  if (!formInline.mobile) {
-    formRef.value.validate(async (valid) => {
+    formRef.value.validateField('mobile')
-      if (valid) {
+    return
-        ElMessage.success('注册准备就绪');
-        loading.value = false;
-      } else {
-        loading.value = false;
-        ElMessage({
-          message: '请填写完整信息',
-          type: 'error',
-        });
-      }
-    });
-  };
-
-  const backLogin = () => {
-    emit('backLogin');
-  };
-
-  function getCode() {
-    codeMsg.value = 60;
-    isGetCode.value = true;
-    let time = setInterval(() => {
-      codeMsg.value--;
-      if (codeMsg.value <= 0) {
-        clearInterval(time);
-        codeMsg.value = '获取验证码';
-        isGetCode.value = false;
-      }
-    }, 1000);
   }
+  codeMsg.value = 60;
+  isGetCode.value = true;
+  let time = setInterval(() => {
+    codeMsg.value--;
+    if (codeMsg.value <= 0) {
+      clearInterval(time);
+      codeMsg.value = '获取验证码';
+      isGetCode.value = false;
+    }
+  }, 1000);
+}
 </script>
+
+<style lang="scss" scoped></style>

src/views/login/RegisterForm2 copy.vue

@@ -1,176 +0,0 @@
-<template>
-  <el-form
-    ref="formRef"
-    :show-label="false"
-    :show-require-mark="false"
-    size="large"
-    :model="formInline"
-    :rules="rules"
-    class="register-form"
-  >
-    <el-form-item prop="username">
-      <el-input v-model="formInline.username" placeholder="请输入用户名">
-        <template #prefix>
-          <el-icon class="el-input__icon" size="18" color="#808695">
-            <PersonOutline />
-          </el-icon>
-        </template>
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="mobile">
-      <div class="flex w-full">
-        <el-input class="order-first" v-model="formInline.mobile" placeholder="请输入手机号码">
-          <template #prefix>
-            <el-icon class="el-input__icon" size="18" color="#808695">
-              <MobileOutlined />
-            </el-icon>
-          </template>
-        </el-input>
-        <el-button class="order-last ml-3" :disabled="isGetCode?true:false" round @click="getCode"
-          >{{ codeMsg }}<span v-if="isGetCode">s</span>
-        </el-button>
-      </div>
-    </el-form-item>
-    <el-form-item prop="code">
-      <el-input v-model="formInline.code" placeholder="请输入验证码">
-        <template #prefix>
-          <el-icon class="el-input__icon" size="18" color="#808695">
-            <SafetyOutlined />
-          </el-icon>
-        </template>
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="password">
-      <div class="flex w-full">
-        <el-input
-          v-model="formInline.password"
-          type="password"
-          show-password
-          placeholder="请输入密码"
-        >
-          <template #prefix>
-            <el-icon class="el-input__icon" size="18" color="#808695">
-              <LockClosedOutline />
-            </el-icon>
-          </template>
-        </el-input>
-        <el-input
-          v-model="formInline.retPassword"
-          type="password"
-          show-password
-          placeholder="请再次输入密码"
-          @keyup.enter="handleSubmit"
-          class="ml-3"
-        >
-          <template #prefix>
-            <el-icon class="el-input__icon" size="18" color="#808695">
-              <LockClosedOutline />
-            </el-icon>
-          </template>
-        </el-input>
-      </div>
-    </el-form-item>
-
-    <el-form-item :show-label="false" class="mb-0">
-      <el-button
-        class="w-full"
-        type="primary"
-        @click="handleSubmit"
-        size="large"
-        :loading="loading"
-        round
-      >
-        注册
-      </el-button>
-    </el-form-item>
-
-    <div class="flex items-center justify-between">
-      <div class="flex-initial">
-        <el-checkbox v-model="formInline.agreement">我同意隐私协议</el-checkbox>
-      </div>
-      <div class="flex-initial" style="margin-left: auto">
-        <a href="javascript:" @click="backLogin">返回登录</a>
-      </div>
-    </div>
-  </el-form>
-</template>
-
-<script lang="ts" setup>
-  import { reactive, ref } from 'vue';
-  import { ElMessage } from 'element-plus';
-  import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5';
-  import { MobileOutlined, SafetyOutlined } from '@vicons/antd';
-
-  const formRef = ref();
-
-  const loading = ref(false);
-  const codeMsg: any = ref('获取验证码');
-  const isGetCode = ref(false);
-
-  const emit = defineEmits(['backLogin']);
-
-  const formInline = reactive({
-    username: '',
-    password: '',
-    retPassword: '',
-    mobile: '',
-    code: '',
-    agreement: false,
-  });
-
-  const rules = {
-    username: { required: true, message: '请输入用户名', trigger: 'blur' },
-    mobile: { required: true, message: '请输入手机号码', trigger: 'blur' },
-    code: { required: true, message: '请输入短信验证码', trigger: 'blur' },
-    password: { required: true, message: '请输入密码', trigger: 'blur' },
-    retPassword: { required: true, message: '请输入确认密码', trigger: 'blur' },
-    agreement: {
-      required: true,
-      type: 'boolean',
-      trigger: 'change',
-      message: '请先勾选协议',
-      validator: (_, value) => value === true,
-    },
-  };
-
-  const handleSubmit = () => {
-    loading.value = true;
-    formRef.value.validate(async (valid) => {
-      if (valid) {
-        ElMessage.success('注册准备就绪');
-        loading.value = false;
-      } else {
-        loading.value = false;
-        ElMessage({
-          message: '请填写完整信息',
-          type: 'error',
-        });
-      }
-    });
-  };
-
-  const backLogin = () => {
-    emit('backLogin');
-  };
-
-  function getCode() {
-    codeMsg.value = 60;
-    isGetCode.value = true;
-    let time = setInterval(() => {
-      codeMsg.value--;
-      if (codeMsg.value <= 0) {
-        clearInterval(time);
-        codeMsg.value = '获取验证码';
-        isGetCode.value = false;
-      }
-    }, 1000);
-  }
-</script>
-
-<style lang="scss" scoped>
-  .register-form {
-    .el-input {
-      --el-input-border-radius: 20px !important;
-    }
-  }
-</style>

src/views/login/RegisterForm2.vue

@@ -1,148 +0,0 @@
-<template>
-  <el-form ref="formRef" :show-label="false" :show-require-mark="false" size="large" :model="formInline" :rules="rules"
-    class="register-form">
-    <el-form-item prop="username">
-      <el-input v-model="formInline.username" placeholder="请输入用户名">
-        <template #prefix>
-          <el-icon class="el-input__icon" size="18" color="#808695">
-            <PersonOutline />
-          </el-icon>
-        </template>
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="mobile">
-      <el-input v-model="formInline.mobile" placeholder="请输入手机号码">
-        <template #prefix>
-          <el-icon class="el-input__icon" size="18" color="#808695">
-            <Iphone />
-          </el-icon>
-        </template>
-      </el-input>
-
-    </el-form-item>
-    <el-form-item prop="code">
-      <el-input v-model.trim="formInline.code" placeholder="验证码">
-        <template #prefix>
-          <el-icon class="el-input__icon" size="18" color="#808695">
-            <SafetyCertificateOutlined />
-          </el-icon>
-        </template>
-        <template #suffix>
-          <el-button link :disabled="isGetCode?true:false" @click="getCode">
-          {{ codeMsg }}<span v-if="isGetCode">s</span>
-        </el-button>
-        </template>
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="password">
-      <el-input v-model="formInline.password" type="password" show-password placeholder="请输入密码">
-        <template #prefix>
-          <el-icon class="el-input__icon" size="18" color="#808695">
-            <Lock />
-          </el-icon>
-        </template>
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="retPassword">
-      <el-input v-model="formInline.retPassword" type="password" show-password placeholder="请再次输入密码">
-        <template #prefix>
-          <el-icon class="el-input__icon" size="18" color="#808695">
-            <Lock />
-          </el-icon>
-        </template>
-      </el-input>
-    </el-form-item>
-    <el-form-item :show-label="false" class="mb-0">
-      <el-button class="w-full" type="primary" @click="handleSubmit" size="large" :loading="loading">
-        注册
-      </el-button>
-    </el-form-item>
-
-    <div class="flex items-center justify-between">
-      <div class="flex-initial">
-        <el-form-item prop="agreement">
-          <el-checkbox v-model="formInline.agreement">我同意隐私协议</el-checkbox>
-        </el-form-item>
-      </div>
-    </div>
-  </el-form>
-</template>
-
-<script lang="ts" setup>
-import { reactive, ref } from 'vue';
-import { ElMessage } from 'element-plus';
-import { rule } from '@/utils/validate';
-import { PersonOutline } from '@vicons/ionicons5';
-import { SafetyCertificateOutlined } from '@vicons/antd';
-
-const formRef = ref();
-
-const loading = ref(false);
-const codeMsg: any = ref('获取验证码');
-const isGetCode = ref(false);
-
-const emit = defineEmits(['backLogin']);
-
-const formInline = reactive({
-  username: '',
-  password: '',
-  retPassword: '',
-  mobile: '',
-  code: '',
-  agreement: false,
-});
-
-const rules = {
-  username: { required: true, message: '请输入用户名', trigger: 'blur' },
-  mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ validator: rule.validatePhone, trigger: 'blur' }],
-  code: { required: true, message: '请输入短信验证码', trigger: 'blur' },
-  password: { required: true, message: '请输入密码', trigger: 'blur' },
-  retPassword: { required: true, message: '请输入确认密码', trigger: 'blur' },
-  agreement: {
-    required: true,
-    type: 'boolean',
-    trigger: 'change',
-    message: '请先勾选协议',
-    validator: (_, value) => value === true,
-  },
-};
-
-const handleSubmit = () => {
-  loading.value = true;
-  formRef.value.validate(async (valid) => {
-    if (valid) {
-      backLogin()
-      loading.value = false;
-    } else {
-      loading.value = false;
-      ElMessage({
-        message: '请填写完整信息',
-        type: 'error',
-      });
-    }
-  });
-};
-
-const backLogin = () => {
-  emit('backLogin',true);
-};
-
-function getCode() {
-  if (!formInline.mobile) {
-    formRef.value.validateField('mobile')
-    return
-  }
-  codeMsg.value = 60;
-  isGetCode.value = true;
-  let time = setInterval(() => {
-    codeMsg.value--;
-    if (codeMsg.value <= 0) {
-      clearInterval(time);
-      codeMsg.value = '获取验证码';
-      isGetCode.value = false;
-    }
-  }, 1000);
-}
-</script>
-
-<style lang="scss" scoped></style>

src/views/login/index.vue

@@ -1,226 +1,240 @@
 <template>
-  <div class="view-account">
+  <div class="account">
-    <div class="view-account-header"></div>
+    <div class="account-container">
-    <div class="view-account-container">
+      <div class="account-wrap-login">
-      <div class="view-account-top">
+        <div class="login-pic">
-        <div class="view-account-top-logo">
+          <h1 class="login-title">数据中台管理系统</h1>
-          <img src="~@/assets/images/account-logo.png" alt="" />
+          <h4 class="login-subtitle">赋能开发者，助力企业发展，全方位提供数据中台解决方案!</h4>
         </div>
-        <div class="view-account-top-desc">Element plus Admin 中后台前端/设计解决方案</div>
+        <div class="login-form">
-      </div>
+          <div class="login-form-container">
-      <div class="view-account-form">
+            <div class="account-top">
-        <el-form
+              <div class="account-top-desc">{{loginFlag?'用户登录':'用户注册'}}</div>
-          ref="formRef"
-          label-placement="left"
-          size="large"
-          :model="formInline"
-          :rules="rules"
-        >
-          <el-form-item path="username">
-            <el-input v-model:value="formInline.username" placeholder="请输入用户名">
-              <template #prefix>
-                <el-icon class="el-input__icon" size="18" color="#808695">
-                  <PersonOutline />
-                </el-icon>
-              </template>
-            </el-input>
-          </el-form-item>
-          <el-form-item path="password">
-            <el-input
-              v-model:value="formInline.password"
-              type="password"
-              showPasswordOn="click"
-              placeholder="请输入密码"
-              @keyup.enter="handleSubmit"
-            >
-              <template #prefix>
-                <el-icon class="el-input__icon" size="18" color="#808695">
-                  <LockClosedOutline />
-                </el-icon>
-              </template>
-            </el-input>
-          </el-form-item>
-          <el-form-item path="isCaptcha">
-            <div class="w-full">
-              <mi-captcha width="384" theme-color="#2d8cf0" :logo="logo" @success="onAuthCode" />
             </div>
-          </el-form-item>
+            <template v-if="loginFlag">
-          <el-form-item class="default-color">
+              <div class="account-tab-box">
-            <div class="flex justify-between">
+                <div :class="activeIndex==index?'active':''" v-for="(item,index) in tabData" @click="handleClick(index)" :key="index">{{item}}</div>
-              <div class="flex-initial">
-                <el-checkbox v-model:checked="autoLogin">自动登录</el-checkbox>
               </div>
-              <div class="flex-initial order-last">
+              <LoginForm v-if="activeIndex === 0" @backLogin="goLogin"/>
-                <a href="javascript:">忘记密码</a>
+              <PhoneForm v-else-if="activeIndex === 1"/>
-              </div>
+              <QrcodeForm v-else-if="activeIndex === 2"></QrcodeForm>
-            </div>
+            </template>
-          </el-form-item>
+            <template v-else>
-          <el-form-item>
+              <RegisterForm @backLogin="goLogin"></RegisterForm>
-            <el-button
+          </template>
-              type="primary"
+          </div>
-              class="w-full"
+          <div class="corner-box" @click="handleCornerClick">
-              @click="handleSubmit"
+            <el-icon class="el-input__icon" size="34" color="#ffffff" v-if="loginFlag">
-              size="large"
+              <UserAddOutlined />
-              :loading="loading"
+            </el-icon>
-              block
+            <el-icon class="el-input__icon" size="34" color="#ffffff" v-else>
-            >
+              <ArrowUndoOutline />
-              登录
+            </el-icon>
-            </el-button>
+          </div>
-          </el-form-item>
+        </div>
-          <el-form-item class="default-color">
-            <div class="flex view-account-other">
-              <div class="flex-initial">
-                <span>其它登录方式</span>
-              </div>
-              <div class="flex-initial mx-2">
-                <a href="javascript:">
-                  <el-icon class="el-input__icon" size="24" color="#2d8cf0">
-                    <LogoGithub />
-                  </el-icon>
-                </a>
-              </div>
-              <div class="flex-initial mx-2">
-                <a href="javascript:">
-                  <el-icon class="el-input__icon" size="24" color="#2d8cf0">
-                    <LogoFacebook />
-                  </el-icon>
-                </a>
-              </div>
-              <div class="flex-initial" style="margin-left: auto">
-                <a href="javascript:">注册账号</a>
-              </div>
-            </div>
-          </el-form-item>
-        </el-form>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref } from 'vue';
+  import { ref ,computed} from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
+  import LoginForm from './LoginForm.vue';
-  import { useUserStore } from '@/store/modules/user';
+  import PhoneForm from './PhoneForm.vue';
-  import { ElMessage } from 'element-plus';
+  import QrcodeForm from './QrcodeForm.vue';
-  import { ResultEnum } from '@/enums/httpEnum';
+  import RegisterForm from './RegisterForm.vue';
-  import logo from '@/assets/images/logo.png';
+  import { UserAddOutlined } from '@vicons/antd';
-  import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
+  import { ArrowUndoOutline } from '@vicons/ionicons5';
-
+  import { useDesignSettingStore } from '@/store/modules/designSetting';
-  interface FormState {
+  const designStore = useDesignSettingStore();
-    username: string;
+    //获取主题风格色
-    password: string;
+  const getAppTheme = computed(() => {
-  }
+    return designStore.appTheme;
-
-  const formRef = ref();
-
-  const loading = ref(false);
-  const autoLogin = ref(true);
-
-  const formInline = reactive({
-    username: '',
-    password: '',
-    isCaptcha: false,
   });
-
+  const loginFlag = ref(true)
-  const rules = {
+  const activeIndex = ref(0)
-    username: { required: true, message: '请输入用户名', trigger: 'blur' },
+  const tabData =ref(['账号登录','手机号登录','扫码登录'])
-    password: { required: true, message: '请输入密码', trigger: 'blur' },
+  const handleClick =(index)=>{
-    isCaptcha: {
+    activeIndex.value = index
-      required: true,
+  }
-      type: 'boolean',
+  const handleCornerClick = ()=>{
-      trigger: 'change',
+    loginFlag.value  = !loginFlag.value
-      message: '请点击按钮进行验证码校验',
+  }
-      validator: (_, value) => value === true,
+  const goLogin = (type)=>{
-    },
+    loginFlag.value = type
-  };
+  }
-
-  const userStore = useUserStore();
-
-  const router = useRouter();
-  const route = useRoute();
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    formRef.value.validate(async (errors) => {
-      if (!errors) {
-        const { username, password } = formInline;
-        loading.value = true;
-        const params: FormState = {
-          username,
-          password,
-        };
-
-        const { code, msg } = await userStore.login(params);
-
-        if (code == ResultEnum.SUCCESS) {
-          const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
-          ElMessage.success('登录成功！');
-          router.replace(toPath).then((_) => {
-            if (route.name == 'login') {
-              router.replace('/');
-            }
-          });
-        } else {
-          ElMessage.info(msg || '登录失败');
-        }
-      } else {
-        ElMessage.error('请填写完整信息，并且进行验证码校验');
-      }
-    });
-  };
-
-  const onAuthCode = () => {
-    formInline.isCaptcha = true;
-  };
 </script>
 
 <style lang="scss" scoped>
-  .view-account {
+  .account {
-    display: flex;
+    width: 100%;
-    flex-direction: column;
+    margin: 0 auto;
-    height: 100vh;
-    overflow: auto;
 
     &-container {
-      flex: 1;
-      padding: 32px 0;
-      width: 384px;
-      margin: 0 auto;
-    }
-
-    &-top {
-      padding: 32px 0;
-      text-align: center;
-
-      &-desc {
-        font-size: 14px;
-        color: #808695;
-      }
-    }
-
-    &-other {
       width: 100%;
+      min-height: 100vh;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      padding: 20px;
+      box-sizing: border-box;
+      background-image:url('../../assets/images/login-bg.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+
     }
 
-    .default-color {
+    &-wrap-login {
-      color: #515a6e;
+      width: 920px;
+      height: 500px;
+      background: #fff;
+      border-radius: 10px;
+      overflow: hidden;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      .login-pic {
+        flex: 1;
+        padding: 32px 8px;
+        box-sizing: border-box;
+        background-color: #1681fd;
+        background-image: url('../../assets/images/login-img.png');
+        background-repeat: no-repeat;
+        background-position: bottom;
+        background-size: contain;
+        text-align: center;
+        .login-title {
+          color: #ffffff;
+          font-size: 28px;
+          margin: 0 0 6px;
+          font-weight: 400;
+          letter-spacing: 1.2px;
+        }
+        .login-subtitle {
+          color: #fffc;
+          font-size: 16px;
+          margin: 0;
+          font-weight: 400;
+          letter-spacing: 4px;
+          letter-spacing: 1.2px;
+        }
+    }
 
-      .ant-checkbox-wrapper {
+        img {
-        color: #515a6e;
+          max-width: 100%;
+        }
+
+      .login-form {
+        width: 400px;
+        position: relative;
+        &-container {
+          margin: auto;
+          width: 100%;
+          padding:32px 48px 0;
+          box-sizing: border-box;
+        }
+        &-title {
+          padding-bottom: 15px;
+          text-align: center;
+        }
+        .corner-box {
+          position:absolute;
+          top:0;
+          right:0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 80px;
+          height: 80px;
+          border-radius: 0 0 0 150%;
+          background: v-bind(getAppTheme);
+          cursor: pointer;
+          >i {
+            margin-right: -20px;
+            margin-top: -10px;
+          }
+        }
+      }
+
+      @media (max-width: 680px) {
+        .login-pic {
+          padding: 20px 12px 100px;
+          background-size: auto 100px;
+        }
+
+        .login-form {
+          width: 100%;
+          margin: auto;
+        }
+    }
+      .account-top {
+        &-desc {
+          font-size: 24px;
+          font-weight: bold;
+          color: #000000;
+          margin-bottom: 18px;
+        }
+      }
+      .account-tab-box {
+        display: flex;
+        height:34px;
+        margin-bottom: 18px;
+        background-color: #f5f5f5;
+        border-radius: 4px;
+        padding:3px;
+        >div {
+          flex:1;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          color:rgba(0, 0, 0, .6);
+          &.active {
+            background-color:#ffffff;
+            color:rgba(0, 0, 0, .92);
+          }
+          &:hover {
+            color:rgba(0, 0, 0, .92);
+          }
+        }
       }
     }
-  }
 
-  @media (min-width: 768px) {
+    @media (max-width: 680px) {
-    .view-account {
+      &-container {
-      background-image: url('../../assets/images/login.svg');
+          padding: 0;
-      background-repeat: no-repeat;
+          display: block;
-      background-position: 50%;
+          background: #fff;
-      background-size: 100%;
+        }
-    }
+      &-wrap-login {
-
+        display: block;
-    .page-account-container {
+        height: auto;
-      padding: 32px 0 24px 0;
+        width: 100%;
+        background: none;
+        box-shadow: none;
+        border-radius: 0;
+      }
     }
   }
 </style>
+<style lang="scss">
+  .account {
+  .el-button--primary {
+    background-color: v-bind(getAppTheme);
+  }
+  .el-button--text{
+    padding:0;
+  }
+  .el-checkbox__input.is-checked+.el-checkbox__label,.el-button--text {
+    color: v-bind(getAppTheme);
+  }
+  .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: v-bind(getAppTheme);
+    color: v-bind(getAppTheme);
+  }
+}
+</style>

src/views/login/newLogin.vue

@@ -1,166 +0,0 @@
-<template>
-  <div class="account-root">
-    <div class="account-root-item">
-      <transition name="fade-bottom" appear mode="out-in">
-        <div class="account-root-item-img">
-          <img src="~@/assets/images/login-bg.svg" alt="" />
-        </div>
-      </transition>
-    </div>
-    <div class="account-root-item root-right-item">
-      <transition name="fade-bottom" appear mode="out-in">
-        <div class="account-form">
-          <div class="account-top">
-            <div class="account-top-logo">
-              <img src="~@/assets/images/account-logo.png" alt="" />
-            </div>
-            <div class="account-top-desc">Element plus Admin 中后台前端/设计解决方案</div>
-          </div>
-
-          <el-tabs v-model="tab" class="login-tabs" justify-content="space-evenly">
-            <el-tab-pane name="login" label="登录">
-              <transition name="fade-bottom" appear mode="out-in">
-                <LoginForm ref="LoginFormRef" @go-register="changeGoRegister" />
-              </transition>
-            </el-tab-pane>
-            <el-tab-pane name="register" label="注册">
-              <transition name="fade-bottom" appear mode="out-in">
-                <RegisterForm ref="RegisterFormRef" @back-login="changeBackLogin" />
-              </transition>
-            </el-tab-pane>
-          </el-tabs>
-        </div>
-      </transition>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import LoginForm from './LoginForm.vue';
-  import RegisterForm from './RegisterForm.vue';
-
-  const tab = ref('login');
-
-  function changeBackLogin() {
-    tab.value = 'login';
-  }
-
-  function changeGoRegister() {
-    tab.value = 'register';
-  }
-</script>
-
-<style lang="scss" scoped>
-  .account-root {
-    box-sizing: border-box;
-    display: flex;
-    flex-flow: row wrap;
-    width: 100%;
-    height: 100vh;
-    justify-content: center;
-
-    &-item {
-      box-sizing: border-box;
-      margin: 0px;
-      flex-direction: row;
-      flex-basis: 100%;
-      flex-grow: 0;
-      max-width: 100%;
-      background: #2d8cf0;
-
-      &-img {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-
-        img {
-          width: 70%;
-          display: inline-block;
-          margin: 0 auto;
-        }
-      }
-    }
-
-    .root-right-item {
-      background: #fff;
-      box-sizing: border-box;
-      flex-flow: row wrap;
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .account-form {
-        flex-basis: 45%;
-        flex-grow: 0;
-        max-width: 45%;
-
-        .account-top {
-          text-align: center;
-          margin: 20px 0;
-
-          &-logo {
-            text-align: center;
-
-            img {
-              width: 100%;
-              margin: 0 auto;
-            }
-          }
-
-          &-desc {
-            font-size: 14px;
-            color: #808695;
-          }
-        }
-      }
-    }
-
-    @media (min-width: 600px) {
-      &-item {
-        flex-basis: 100%;
-        flex-grow: 0;
-        max-width: 100%;
-      }
-    }
-
-    @media (min-width: 320px) {
-      .root-right-item {
-        .account-form {
-          flex-basis: 60%;
-          flex-grow: 0;
-          max-width: 60%;
-        }
-      }
-    }
-
-    @media (min-width: 1200px) {
-      &-item {
-        flex-basis: 50%;
-        flex-grow: 0;
-        max-width: 50%;
-      }
-
-      .root-right-item {
-        .account-form {
-          flex-basis: 45%;
-          flex-grow: 0;
-          max-width: 45%;
-        }
-      }
-    }
-  }
-
-  :deep(.login-tabs .el-tabs__nav) {
-    margin-bottom: 10px;
-    width: 100%;
-    display: flex;
-    justify-content: space-around;
-  }
-
-  :deep(.login-tabs .el-tabs__nav-wrap::after) {
-    height: 0;
-  }
-</style>

src/views/login/newLogin2 copy.vue

@@ -1,155 +0,0 @@
-<template>
-  <div class="account">
-    <div class="account-container">
-      <div class="account-wrap-login">
-        <div class="login-pic">
-          <div>
-            <img src="~@/assets/images/login-pic.png" />
-          </div>
-        </div>
-        <div class="login-form">
-          <div class="login-form-container">
-            <div class="account-top">
-              <div class="account-top-logo">
-                <img src="~@/assets/images/logo.png" alt="" />
-                <span class="project-title">Naive Admin</span>
-              </div>
-              <div class="account-top-desc">Element plus 中后台前端/设计解决方案</div>
-            </div>
-            <!-- <div class="login-form-title">
-            <el-space>
-              <el-button round>登录</el-button>
-              <el-button type="primary" round>注册</el-button>
-            </el-space>
-          </div> -->
-            <LoginForm v-if="tab === 'login'" ref="LoginFormRef" @go-register="changeGoRegister" />
-            <RegisterForm v-else ref="RegisterFormRef" @back-login="changeBackLogin" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import LoginForm from './LoginForm2.vue';
-  import RegisterForm from './RegisterForm2.vue';
-
-  const tab = ref('login');
-
-  function changeBackLogin() {
-    tab.value = 'login';
-  }
-
-  function changeGoRegister() {
-    tab.value = 'register';
-  }
-</script>
-
-<style lang="scss" scoped>
-  .account {
-    width: 100%;
-    margin: 0 auto;
-
-    &-container {
-      width: 100%;
-      min-height: 100vh;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      padding: 15px;
-      background: #9053c7;
-      background: -webkit-linear-gradient(-135deg, #c850c0, #4158d0);
-      background: -o-linear-gradient(-135deg, #c850c0, #4158d0);
-      background: -moz-linear-gradient(-135deg, #c850c0, #4158d0);
-      background: linear-gradient(-135deg, #c850c0, #4158d0);
-    }
-
-    &-wrap-login {
-      width: 960px;
-      height: 554px;
-      background: #fff;
-      border-radius: 10px;
-      overflow: hidden;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      padding: 30px 95px 33px 95px;
-      .login-pic {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-
-        img {
-          max-width: 100%;
-        }
-      }
-
-      .login-form {
-        width: 350px;
-        display: flex;
-        flex-direction: column;
-        &-container {
-          margin: auto;
-          width: 100%;
-        }
-        &-title {
-          padding-bottom: 15px;
-          text-align: center;
-        }
-      }
-
-      @media (max-width: 991px) {
-        .login-pic {
-          display: none;
-        }
-
-        .login-form {
-          width: 100%;
-          margin: auto;
-        }
-      }
-
-      .account-top {
-        text-align: center;
-
-        &-logo {
-          text-align: center;
-          margin-bottom: 10px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          img {
-            width: 45px;
-          }
-          .project-title {
-            background: linear-gradient(92.06deg, #33c2ff -17.9%, #1e6fff 43.39%, #1e6fff 99.4%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            font-size: 24px;
-            line-height: 1.25;
-            font-weight: 500;
-            margin-left: 10px;
-          }
-        }
-
-        &-desc {
-          font-size: 14px;
-          color: #808695;
-          margin-bottom: 20px;
-        }
-      }
-    }
-
-    @media (max-width: 640px) {
-      &-wrap-login {
-        width: 100%;
-        padding: 30px;
-        height: auto;
-      }
-    }
-  }
-</style>

src/views/login/newLogin2.vue

@@ -1,240 +0,0 @@
-<template>
-  <div class="account">
-    <div class="account-container">
-      <div class="account-wrap-login">
-        <div class="login-pic">
-          <h1 class="login-title">数据中台管理系统</h1>
-          <h4 class="login-subtitle">赋能开发者，助力企业发展，全方位提供数据中台解决方案!</h4>
-        </div>
-        <div class="login-form">
-          <div class="login-form-container">
-            <div class="account-top">
-              <div class="account-top-desc">{{loginFlag?'用户登录':'用户注册'}}</div>
-            </div>
-            <template v-if="loginFlag">
-              <div class="account-tab-box">
-                <div :class="activeIndex==index?'active':''" v-for="(item,index) in tabData" @click="handleClick(index)" :key="index">{{item}}</div>
-              </div>
-              <LoginForm v-if="activeIndex === 0" @backLogin="goLogin"/>
-              <PhoneForm v-else-if="activeIndex === 1"/>
-              <QrcodeForm v-else-if="activeIndex === 2"></QrcodeForm>
-            </template>
-            <template v-else>
-              <RegisterForm @backLogin="goLogin"></RegisterForm>
-          </template>
-          </div>
-          <div class="corner-box" @click="handleCornerClick">
-            <el-icon class="el-input__icon" size="34" color="#ffffff" v-if="loginFlag">
-              <UserAddOutlined />
-            </el-icon>
-            <el-icon class="el-input__icon" size="34" color="#ffffff" v-else>
-              <ArrowUndoOutline />
-            </el-icon>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref ,computed} from 'vue';
-  import LoginForm from './LoginForm2.vue';
-  import PhoneForm from './PhoneForm.vue';
-  import QrcodeForm from './QrcodeForm.vue';
-  import RegisterForm from './RegisterForm2.vue';
-  import { UserAddOutlined } from '@vicons/antd';
-  import { ArrowUndoOutline } from '@vicons/ionicons5';
-  import { useDesignSettingStore } from '@/store/modules/designSetting';
-  const designStore = useDesignSettingStore();
-    //获取主题风格色
-  const getAppTheme = computed(() => {
-    return designStore.appTheme;
-  });
-  const loginFlag = ref(true)
-  const activeIndex = ref(0)
-  const tabData =ref(['账号登录','手机号登录','扫码登录'])
-  const handleClick =(index)=>{
-    activeIndex.value = index
-  }
-  const handleCornerClick = ()=>{
-    loginFlag.value  = !loginFlag.value
-  }
-  const goLogin = (type)=>{
-    loginFlag.value = type
-  }
-</script>
-
-<style lang="scss" scoped>
-  .account {
-    width: 100%;
-    margin: 0 auto;
-
-    &-container {
-      width: 100%;
-      min-height: 100vh;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      padding: 20px;
-      box-sizing: border-box;
-      background-image:url('../../assets/images/login-bg.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-
-    }
-
-    &-wrap-login {
-      width: 920px;
-      height: 500px;
-      background: #fff;
-      border-radius: 10px;
-      overflow: hidden;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      .login-pic {
-        flex: 1;
-        padding: 32px 8px;
-        box-sizing: border-box;
-        background-color: #1681fd;
-        background-image: url('../../assets/images/login-img.png');
-        background-repeat: no-repeat;
-        background-position: bottom;
-        background-size: contain;
-        text-align: center;
-        .login-title {
-          color: #ffffff;
-          font-size: 28px;
-          margin: 0 0 6px;
-          font-weight: 400;
-          letter-spacing: 1.2px;
-        }
-        .login-subtitle {
-          color: #fffc;
-          font-size: 16px;
-          margin: 0;
-          font-weight: 400;
-          letter-spacing: 4px;
-          letter-spacing: 1.2px;
-        }
-    }
-
-        img {
-          max-width: 100%;
-        }
-
-      .login-form {
-        width: 400px;
-        position: relative;
-        &-container {
-          margin: auto;
-          width: 100%;
-          padding:32px 48px 0;
-          box-sizing: border-box;
-        }
-        &-title {
-          padding-bottom: 15px;
-          text-align: center;
-        }
-        .corner-box {
-          position:absolute;
-          top:0;
-          right:0;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          position: absolute;
-          right: 0;
-          top: 0;
-          width: 80px;
-          height: 80px;
-          border-radius: 0 0 0 150%;
-          background: v-bind(getAppTheme);
-          cursor: pointer;
-          >i {
-            margin-right: -20px;
-            margin-top: -10px;
-          }
-        }
-      }
-
-      @media (max-width: 680px) {
-        .login-pic {
-          padding: 20px 12px 100px;
-          background-size: auto 100px;
-        }
-
-        .login-form {
-          width: 100%;
-          margin: auto;
-        }
-    }
-      .account-top {
-        &-desc {
-          font-size: 24px;
-          font-weight: bold;
-          color: #000000;
-          margin-bottom: 18px;
-        }
-      }
-      .account-tab-box {
-        display: flex;
-        height:34px;
-        margin-bottom: 18px;
-        background-color: #f5f5f5;
-        border-radius: 4px;
-        padding:3px;
-        >div {
-          flex:1;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          cursor: pointer;
-          color:rgba(0, 0, 0, .6);
-          &.active {
-            background-color:#ffffff;
-            color:rgba(0, 0, 0, .92);
-          }
-          &:hover {
-            color:rgba(0, 0, 0, .92);
-          }
-        }
-      }
-    }
-
-    @media (max-width: 680px) {
-      &-container {
-          padding: 0;
-          display: block;
-          background: #fff;
-        }
-      &-wrap-login {
-        display: block;
-        height: auto;
-        width: 100%;
-        background: none;
-        box-shadow: none;
-        border-radius: 0;
-      }
-    }
-  }
-</style>
-<style lang="scss">
-  .account {
-  .el-button--primary {
-    background-color: v-bind(getAppTheme);
-  }
-  .el-button--text{
-    padding:0;
-  }
-  .el-checkbox__input.is-checked+.el-checkbox__label,.el-button--text {
-    color: v-bind(getAppTheme);
-  }
-  .el-checkbox__input.is-checked .el-checkbox__inner {
-    background-color: v-bind(getAppTheme);
-    color: v-bind(getAppTheme);
-  }
-}
-</style>

src/views/setting/profile/SafetySetting.vue

@@ -15,7 +15,7 @@
           <h4>绑定手机</h4>
           <div class="description">
             <el-space>
-              <span class="text-gray-400">已绑定手机号：+86189****4877</span>
+              <span class="text-gray-400">已绑定手机号：+86 18000000001</span>
               <el-link type="primary" class="ml-4">修改</el-link>
             </el-space>
           </div>
@@ -33,7 +33,7 @@
           <h4>个性域名</h4>
           <div class="description">
             <el-space>
-              <span class="text-gray-400">已绑定域名：https://www.naiveui.com</span>
+              <span class="text-gray-400">已绑定域名：https://www.baidu.com</span>
               <el-link type="primary" class="ml-4">修改</el-link>
             </el-space>
           </div>