fix

src/views/login/login copy.vue

@@ -1,222 +0,0 @@
-<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
-
-<template>
-  <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-white" 
-    :style="{
-      backgroundImage: `url(${bgImage})`,
-      backgroundSize: 'cover',
-      backgroundPosition: 'center',
-      backgroundRepeat: 'no-repeat'
-    }">
-    <div class="w-[480px] p-8">
-      <div class="text-center mb-8">
-        <el-icon class="text-primary" style="width: 48px;height: 48px;font-size: 48px">
-          <Headset />
-        </el-icon>
-        <h1 class="text-3xl font-bold text-primary mt-4">智能质检管理平台</h1>
-      </div>
-      <div class="bg-white rounded-lg p-8 shadow-md">
-        <div class="space-y-6 mb-6">
-          <div class="relative">
-            <el-input v-model="username" placeholder="请输入用户名/手机号" :prefix-icon="User" size="large"
-              class="!rounded-button" />
-          </div>
-          <div class="relative">
-            <el-input v-model="password" :type="showPassword ? 'text' : 'password'" placeholder="请输入密码"
-              :prefix-icon="Lock" size="large" class="!rounded-button">
-              <template #suffix>
-                <el-icon class="cursor-pointer" @click="showPassword = !showPassword">
-                  <component :is="showPassword ? 'View' : 'Hide'" />
-                </el-icon>
-              </template>
-            </el-input>
-          </div>
-          <div class="relative flex space-x-4">
-            <el-input v-model="captcha" placeholder="请输入验证码" size="large" class="!rounded-button" />
-            <img :src="codeUrl" alt="验证码" class="h-[40px] w-[120px] cursor-pointer rounded"
-              @click="refreshCaptcha" />
-          </div>
-        </div>
-        <div class="flex items-center mb-6">
-          <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
-        </div>
-        <el-button type="primary" :loading="loading"
-          class="w-full !h-[44px] !text-base !rounded-button whitespace-nowrap" @click="handleLogin">
-          登录
-        </el-button>
-        <!-- <div class="flex justify-between my-4">
-          <el-button link type="primary" @click="handleRegister" class="whitespace-nowrap">
-            快速注册
-          </el-button>
-          <el-button link type="primary" @click="handleForgetPassword" class="whitespace-nowrap">
-            忘记密码
-          </el-button>
-        </div> -->
-        <!-- <div class="relative text-center my-8">
-          <span class="px-4 bg-white text-gray-400 text-sm relative z-10">
-            其他登录方式
-          </span>
-          <div class="absolute top-1/2 left-0 w-full h-[1px] bg-gray-200 -z-0"></div>
-        </div>
-        <el-button class="w-full !h-[44px] !rounded-button whitespace-nowrap flex items-center justify-center"
-          @click="handlePhoneLogin">
-          <el-icon class="mr-2">
-            <Iphone />
-          </el-icon>
-          手机号一键登录
-        </el-button> -->
-      </div>
-      <div class="text-center mt-8">
-        <!-- <p class="text-gray-400 text-sm mb-2">
-          登录即表示同意
-          <el-button link type="primary" @click="handleUserAgreement" class="whitespace-nowrap">
-            《用户协议》
-          </el-button>
-          和
-          <el-button link type="primary" @click="handlePrivacyPolicy" class="whitespace-nowrap">
-            《隐私政策》
-          </el-button>
-        </p> -->
-        <p class="text-gray-400 text-sm">Copyright © 2024 智能质检管理平台</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { ElMessage } from 'element-plus';
-import { getCodeImg } from '@/api/login'
-import { User, Lock, View, Hide, Key } from '@element-plus/icons-vue';
-import Cookies from 'js-cookie'
-import { encrypt } from '@/utils/jsencrypt'
-import useUserStore from '@/store/modules/user'
-import bgImage from '@/assets/logo/logoBj.jpg'; // 导入背景图
-
-const userStore = useUserStore()
-const router = useRouter()
-const { proxy } = getCurrentInstance()
-const redirect = ref(undefined)
-
-const username = ref('');
-const password = ref('');
-const captcha = ref('');
-const showPassword = ref(false);
-const rememberMe = ref(false);
-const captchaText = ref('ABCD1234');
-
-const refreshCaptcha = () => {
-  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
-  let result = '';
-  for (let i = 0; i < 8; i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length));
-  }
-  captchaText.value = result;
-};
-
-const codeUrl = ref('')
-const loading = ref(false)
-// 验证码开关
-const captchaEnabled = ref(true)
-const uuid = ref('');
-const getCode = () => {
-  getCodeImg().then((res) => {
-    captchaEnabled.value =
-      res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled
-    if (captchaEnabled.value) {
-      codeUrl.value = 'data:image/gif;base64,' + res.data.img
-      uuid.value = res.data.uuid
-    }
-  })
-}
-
-const handleLogin = () => {
-  if (!username.value) {
-    ElMessage.warning('请输入用户名');
-    return;
-  }
-  if (!password.value) {
-    ElMessage.warning('请输入密码');
-    return;
-  }
-  if (!captcha.value) {
-    ElMessage.warning('请输入验证码');
-    return;
-  }
-  loading.value = true
-
-  if (rememberMe.value) {
-    Cookies.set('username', username.value, { expires: 30 })
-    Cookies.set('password', encrypt(password.value), {
-      expires: 30
-    })
-    Cookies.set('rememberMe', rememberMe.value, { expires: 30 })
-  } else {
-    // 否则移除
-    Cookies.remove('username')
-    Cookies.remove('password')
-    Cookies.remove('rememberMe')
-  }
-  loading.value = true
-  // 调用action的登录方法
-  userStore
-    .login({
-      username: username.value,
-      password: password.value,
-      rememberMe: rememberMe.value,
-      code: captcha.value,
-      uuid: uuid.value
-    })
-    .then(() => {
-      router.push({ path: redirect.value || '/' })
-    })
-    .catch(() => {
-      loading.value = false
-      // 重新获取验证码
-      if (captchaEnabled.value) {
-        getCode()
-      }
-    })
-
-};
-
-getCode();
-</script>
-
-<style scoped>
-/* .el-input :deep(.el-input__wrapper) {
-  background-color: #f8fafc;
-  border: 1px solid #e2e8f0;
-  box-shadow: none !important;
-}
-
-.el-input :deep(.el-input__wrapper.is-focus) {
-  border-color: #409eff;
-}
-
-.el-input :deep(.el-input__inner) {
-  height: 100%;
-}
-
-.el-input :deep(.el-input__prefix) {
-  font-size: 1.25rem;
-  color: #64748b;
-} */
-
-.text-primary {
-color: #409EFF;
-
-}
-/* 淡入动画 */
-@keyframes fadeIn {
-from {
-opacity: 0;
-transform: translateY(20px);
-}
-to {
-opacity: 1;
-transform: translateY(0);
-}
-}
-
-</style>

src/views/login/login.vue

@@ -1,19 +1,13 @@
 <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
 
 <template>
-  <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-white" 
-    :style="{
-      backgroundImage: `url(${bgImage})`,
-      backgroundSize: 'cover',
-      backgroundPosition: 'center',
-      backgroundRepeat: 'no-repeat'
-    }">
+  <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-white">
     <div class="w-[480px] p-8">
       <div class="text-center mb-8">
         <el-icon class="text-primary" style="width: 48px;height: 48px;font-size: 48px">
           <Headset />
         </el-icon>
-        <h1 class="text-3xl font-bold text-primary mt-4">智能质检管理平台</h1>
+        <h1 class="text-3xl font-bold text-primary mt-4">智能语音质检系统</h1>
       </div>
       <div class="bg-white rounded-lg p-8 shadow-md">
         <div class="space-y-6 mb-6">
@@ -77,21 +71,21 @@
             《隐私政策》
           </el-button>
         </p> -->
-        <p class="text-gray-400 text-sm">Copyright © 2024 智能质检管理平台</p>
+        <p class="text-gray-400 text-sm">Copyright © 2024 智能语音质检系统</p>
       </div>
     </div>
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import { getCodeImg } from '@/api/login'
 import { User, Lock, View, Hide, Key } from '@element-plus/icons-vue';
 import Cookies from 'js-cookie'
-import { encrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from '@/utils/jsencrypt'
 import useUserStore from '@/store/modules/user'
-import bgImage from '@/assets/logo/logoBj.jpg'; // 导入背景图
+import loginImage from '@/assets/images/login.jpg'; // 默认头像 @/assets/images/login.jng
 
 const userStore = useUserStore()
 const router = useRouter()
@@ -205,7 +199,6 @@ getCode();
 
 .text-primary {
 color: #409EFF;
-
 }
 /* 淡入动画 */
 @keyframes fadeIn {