fix: 优化登录页

.env.development

@@ -1,5 +1,5 @@
 NODE_ENV=development
-VITE_APP_TITLE='润扬内控平台 开发环境(Dev)'
+VITE_APP_TITLE='Admin内控平台 开发环境(Dev)'
 VITE_APP_API_URL='/api'
 VITE_APP_FILE_URL='http://192.168.21.77:2024/upload'
 VITE_APP_API_BASE_URL='http://localhost:8081/#'

.env.localhost

@@ -1,5 +1,5 @@
 NODE_ENV=development
-VITE_APP_TITLE='润扬内控平台 本地环境(Local)'
+VITE_APP_TITLE='Admin内控平台 本地环境(Local)'
 VITE_APP_API_URL='/api'
 VITE_APP_API_CUSTOM_URL='/common-api'
 VITE_APP_DING_APP_ID='123456789'

.env.pre

@@ -1,5 +1,5 @@
 NODE_ENV=production
-VITE_APP_TITLE='润扬内控平台 预发布环境(Pre)'
+VITE_APP_TITLE='Admin内控平台 预发布环境(Pre)'
 VITE_APP_API_URL='/api'
 VITE_APP_API_CUSTOM_URL='/common-api'
 VITE_APP_DING_APP_ID='123456789'

.env.production

@@ -1,5 +1,5 @@
 NODE_ENV=production
-VITE_APP_TITLE='润扬内控平台'
+VITE_APP_TITLE='Admin内控平台'
 VITE_APP_API_URL=/prod-api
 VITE_APP_FILE_URL='http://192.168.21.77:2024/upload'
 VITE_APP_API_BASE_URL='http://27.223.11.42:9102/#'

.env.test

@@ -1,4 +1,4 @@
 NODE_ENV=production
-VITE_APP_TITLE='润扬内控平台 测试环境(Test)'
+VITE_APP_TITLE='Admin内控平台 测试环境(Test)'
 VITE_APP_API_URL='http://127.0.0.1:1024'
 VITE_APP_API_CUSTOM_URL='/common-api'

src/config/app-config.js

@@ -34,7 +34,7 @@ export const appDefaultConfig = {
   // 水印
   watermarkFlag: true,
   // 网站名称
-  websiteName: '润扬内控平台',
+  websiteName: 'Admin内控平台',
   // 主题颜色
   primaryColor: '#1677ff',
   // 紧凑

src/views/market-manage/activity-manage/activity-management/components/retention-transformation/index.vue

@@ -89,7 +89,7 @@ const {
                 },
                 {
                     field: 'knowRunyang',
-                    title: '是否了解润扬',
+                    title: '是否了解Admin',
                 },
                 {
                     field: 'companyName',

src/views/support-manage/competition/opponent/opponent-detail/components/ProjectInfo/index.vue

@@ -13,7 +13,7 @@
       </template>
       <template #toolbarLeft>
         <a-space>
-          <span>润扬项目概算金额(元)：1,348,223.89</span>
+          <span>Admin项目概算金额(元)：1,348,223.89</span>
         </a-space>
       </template>
     </bs-table>

src/views/support-manage/mobile/configuration/components/ProjectInfo/index.vue

@@ -13,7 +13,7 @@
       </template>
       <template #toolbarLeft>
         <a-space>
-          <span>润扬项目概算金额(元)：1,348,223.89</span>
+          <span>Admin项目概算金额(元)：1,348,223.89</span>
         </a-space>
       </template>
     </bs-table>

src/views/system/login2/login copy.vue

@@ -0,0 +1,604 @@
+<template>
+  <div class="login" ref="loginRef">
+    <a-carousel autoplay class="carousel" dotsClass="dots" lazyLoad :autoplaySpeed="60000" adaptiveHeight>
+      <div>
+        <img :src="loginBg1" class="img" alt="">
+      </div>
+      <div>
+        <img :src="loginBg2" class="img" alt="">
+      </div>
+    </a-carousel>
+    <div class="login-box">
+      <div class="login-left">
+        <div class="login-left-box">
+          <img class="logo" :src="logo" alt="">
+          <div class="slogan">合作共赢 · 品质第一 </div>
+          <div class="type">
+              研发设计/生产制造/工程管理/投资运营
+          </div>
+        </div>
+      </div>
+      <div class="login-right">
+        <div class="login-right-box">
+          <div class="login-right-title">
+            <span class="welcome">欢迎登录</span>Admin内控平台
+          </div>
+          <div class="login-right-form">
+
+            <a-tabs v-model:activeKey="activeKey" class="tabs">
+              <a-tab-pane key="0" tab="账号登录" force-render>
+                <div class="login-form" v-if="activeKey === '0'">
+                  <a-form ref="formRef" :model="loginForm" :rules="rules">
+                    <a-form-item name="loginName" class="form-item">
+                      <div class="label">
+                        账户
+                      </div>
+                      <a-input class="input" v-model:value.trim="loginForm.loginName" placeholder="请输入用户名">
+                        <template #prefix>
+                          <UserOutlined />
+                        </template>
+                      </a-input>
+                    </a-form-item>
+                    <a-form-item name="emailCode" class="form-item" v-if="emailCodeShowFlag" label="邮箱验证码">
+                      <a-input-group compact>
+                        <a-input style="width: calc(100% - 110px)" v-model:value="loginForm.emailCode" autocomplete="on"
+                          placeholder="请输入邮箱验证码" />
+                        <a-button @click="sendSmsCode" type="primary" :disabled="emailCodeButtonDisabled">
+                          {{ emailCodeTips }}
+                        </a-button>
+                      </a-input-group>
+                    </a-form-item>
+                    <a-form-item name="password" class="form-item">
+                      <div class="label">
+                        密码
+                      </div>
+                      <a-input-password class="input" v-model:value="loginForm.password" autocomplete="on"
+                        :type="showPassword ? 'text' : 'password'" placeholder="请输入密码">
+                        <template #prefix>
+                          <SafetyOutlined />
+                        </template>
+                      </a-input-password>
+                    </a-form-item>
+                    <a-form-item name="captchaCode" class="form-item">
+                      <div class="label">
+                        验证码
+                      </div>
+                      <div class="captchaCode-img">
+                        <a-input v-model:value.trim="loginForm.captchaCode" class="input" placeholder="请输入验证码">
+                          <template #prefix>
+                            <SafetyOutlined />
+                          </template>
+                          <template #suffix>
+                            <img :src="captchaBase64Image" class="img" @click="getCaptcha" />
+                          </template>
+                        </a-input>
+                      </div>
+                    </a-form-item>
+                    <!-- <a-form-item>
+                      <a-checkbox v-model:checked="rememberPwd">记住密码</a-checkbox>
+                    </a-form-item> -->
+                    <a-form-item class="form-item">
+                      <div class="form-btn">
+                        <a-button class="btn" @click="onLogin" type="primary" size="large">登录</a-button>
+                      </div>
+                    </a-form-item>
+                  </a-form>
+                </div>
+              </a-tab-pane>
+              <a-tab-pane key="1" tab="扫码登录" force-render>
+                <div class="qrcode-login" v-if="activeKey === '1'" :class="ratio > 0.985 ? 'margin-top' : 'flex-center'">
+                  <img class="img" :src="tip" alt="" v-if="ratio > 0.985">
+                  <div class="code" :class="{ 'absolute-right': ratio > 0.985 }">
+                    <ddLogin />
+                    <!-- <a-qrcode value="https://www.antdv.com/" :size="250" /> -->
+                  </div>
+                </div>
+              </a-tab-pane>
+            </a-tabs>
+            <div class="login-right-bottom">如有疑问请致电：营销热线0532-88988868</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { message } from 'ant-design-vue';
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { loginApi } from '/@/api/system/login-api';
+import { SmartLoading } from '/@/components/framework/smart-loading';
+import { LOGIN_DEVICE_ENUM } from '/@/constants/system/login-device-const';
+import { useUserStore } from '/@/store/modules/system/user';
+import loginBg2 from '/@/assets/images/login/login_bg2.png'
+import loginBg1 from '/@/assets/images/login/login_bg1.png'
+import tip from '/@/assets/images/login/tooltip.png'
+import logo from '/@/assets/images/login/logo1.png'
+import { buildRoutes } from '/@/router/index';
+import { smartSentry } from '/@/lib/smart-sentry';
+import { encryptData, decryptData } from '/@/lib/encrypt';
+import { localSave, localRemove, localRead } from '/@/utils/local-util.js';
+import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
+import { Form } from 'ant-design-vue';
+import useBsDict from "/@/utils/dict.js";
+import ddLogin from '/@/components/support/dd-login/index.vue'
+
+const activeKey = ref('0')
+
+//--------------------- 登录表单 ---------------------------------
+
+const loginForm = reactive({
+  loginName: 'admin',
+  password: '',
+  captchaCode: '',
+  captchaUuid: '',
+  loginDevice: LOGIN_DEVICE_ENUM.PC.value,
+});
+const rules = {
+  loginName: [{ required: true, message: '用户名不能为空' }],
+  password: [{ required: true, message: '密码不能为空' }],
+  captchaCode: [{ required: true, message: '验证码不能为空' }],
+};
+
+const showPassword = ref(false);
+const router = useRouter();
+const formRef = ref();
+// const rememberPwd = ref(false);
+
+// function readLocalRememberMe() {
+//   const rememberMe = JSON.parse(localRead('rememberMe') || null);
+//   if (rememberMe) {
+//     rememberMe.password = rememberMe.password ? decryptData(rememberMe.password) : '';
+//     loginForm.loginName = rememberMe.loginName;
+//     loginForm.password = rememberMe.password;
+//     rememberPwd.value = true;
+//     // console.log('readLocalRememberMe', rememberMe);
+//   }
+// }
+
+onMounted(() => {
+  // readLocalRememberMe();
+  document.onkeyup = (e) => {
+    if (e.keyCode === 13) {
+      onLogin();
+    }
+  };
+});
+
+onUnmounted(() => {
+  document.onkeyup = null;
+});
+
+//登录
+async function onLogin() {
+  formRef.value.validate().then(async () => {
+    try {
+      SmartLoading.show();
+      // 密码加密
+      let encryptPasswordForm = Object.assign({}, loginForm, {
+        password: encryptData(loginForm.password),
+      });
+      const res = await loginApi.login(encryptPasswordForm);
+      stopRefreshCaptchaInterval();
+
+      // if (rememberPwd.value === true) {
+      //   localSave('rememberMe', JSON.stringify({ loginName: encryptPasswordForm.loginName, password: encryptPasswordForm.password }));
+      // } else {
+      //   localRemove('rememberMe');
+      // }
+
+      localSave(LocalStorageKeyConst.USER_TOKEN, res.data.token ? res.data.token : '');
+      message.success('登录成功');
+
+      // 刷新本地缓存
+      await useBsDict.refresh();
+      //更新用户信息到pinia
+      useUserStore().setUserLoginInfo(res.data);
+      localSave('loginFrom', '0');
+      //构建系统的路由
+      buildRoutes();
+      router.push('/home');
+    } catch (e) {
+      if (e.data && e.data.code !== 0) {
+        loginForm.captchaCode = '';
+        getCaptcha();
+      }
+      smartSentry.captureError(e);
+    } finally {
+      SmartLoading.hide();
+    }
+  });
+}
+
+//--------------------- 验证码 ---------------------------------
+
+const captchaBase64Image = ref('');
+async function getCaptcha() {
+  try {
+    let captchaResult = await loginApi.getCaptcha();
+    captchaBase64Image.value = captchaResult.data.captchaBase64Image;
+    loginForm.captchaUuid = captchaResult.data.captchaUuid;
+    beginRefreshCaptchaInterval(captchaResult.data.expireSeconds);
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+let refreshCaptchaInterval = null;
+function beginRefreshCaptchaInterval(expireSeconds) {
+  if (refreshCaptchaInterval === null) {
+    refreshCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000);
+  }
+}
+
+function stopRefreshCaptchaInterval() {
+  if (refreshCaptchaInterval != null) {
+    clearInterval(refreshCaptchaInterval);
+    refreshCaptchaInterval = null;
+  }
+}
+
+onMounted(() => {
+  getCaptcha();
+  getTwoFactorLoginFlag();
+});
+//--------------------- 邮箱验证码 ---------------------------------
+const emailCodeShowFlag = ref(false);
+let emailCodeTips = ref('获取邮箱验证码');
+let emailCodeButtonDisabled = ref(false);
+// 定时器
+let countDownTimer = null;
+// 开始倒计时
+function runCountDown() {
+  emailCodeButtonDisabled.value = true;
+  let countDown = 60;
+  emailCodeTips.value = `${countDown}秒后重新获取`;
+  countDownTimer = setInterval(() => {
+    if (countDown > 1) {
+      countDown--;
+      emailCodeTips.value = `${countDown}秒后重新获取`;
+    } else {
+      clearInterval(countDownTimer);
+      emailCodeButtonDisabled.value = false;
+      emailCodeTips.value = '获取验证码';
+    }
+  }, 1000);
+}
+// 获取双因子登录标识
+async function getTwoFactorLoginFlag() {
+  try {
+    let result = await loginApi.getTwoFactorLoginFlag();
+    emailCodeShowFlag.value = result.data;
+  } catch (e) {
+    smartSentry.captureError(e);
+  }
+}
+// 发送邮箱验证码
+async function sendSmsCode() {
+  try {
+    SmartLoading.show();
+    let result = await loginApi.sendLoginEmailCode(loginForm.loginName);
+    message.success('验证码发送成功!请登录邮箱查看验证码~');
+    runCountDown();
+  } catch (e) {
+    smartSentry.captureError(e);
+  } finally {
+    SmartLoading.hide();
+  }
+}
+
+// ---------------- 适配屏幕缩放 ----------------
+const loginRef = ref(null);
+const ratio = ref(1);
+
+function reduceRatio() {
+  handleResize();
+  window.addEventListener('resize', handleResize);
+}
+
+function handleResize() {
+  ratio.value = window.innerWidth / 1920;
+  loginRef.value.style.setProperty('--fitWidthRatio', ratio.value);
+}
+watch(() => ratio.value, (value) => {
+  console.log(value);
+
+})
+onMounted(() => {
+  reduceRatio();
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<style lang="scss" scoped>
+.login {
+  height: 100vh;
+  width: 100vw;
+  // background-color: #e39f77;
+
+  .carousel {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 0;
+
+    .img {
+      height: 100vh;
+      width: 100vw;
+    }
+
+    :deep(.dots) {
+      width: 65%;
+      align-items: center;
+    }
+
+    :deep(.dots li) {
+      height: calc(var(--fitWidthRatio) * 20px);
+      width: calc(var(--fitWidthRatio) * 20px);
+    }
+
+    :deep(.dots :not(.slick-active) button) {
+      height: 100%;
+      border-radius: calc(var(--fitWidthRatio) * 20px);
+    }
+
+    :deep(.dots .slick-active) {
+      width: calc(var(--fitWidthRatio) * 52px);
+      height: calc(var(--fitWidthRatio) * 16px);
+    }
+
+    :deep(.slick-active button) {
+      background-color: #2b69f8;
+      border-radius: calc(var(--fitWidthRatio) * 20px);
+      height: 100%;
+    }
+
+  }
+
+  .login-box {
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    gap: calc(var(--fitWidthRatio) * 60px);
+    height: 100%;
+    width: 100%;
+
+    .login-left {
+      display: flex;
+      flex-direction: column;
+      height: 35%;
+      width: 55%;
+      position: absolute;
+      left: 0;
+      top: 20%;
+      background: linear-gradient(to right, #FFFFFF, #99999900);
+      z-index: 1;
+      padding: calc(var(--fitWidthRatio) * 30px);
+
+      .login-left-box {
+        // width: 46%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+
+        .logo {
+          height: calc(var(--fitWidthRatio) * 84px);
+          width: calc(var(--fitWidthRatio) * 240px);
+        }
+
+        .slogan {
+          font-size: calc(var(--fitWidthRatio) * 32px);
+          font-weight: 600;
+          font-family: 'PingFang SC';
+          color: #1C449B;
+        }
+
+        .type {
+          width: 31.5%;
+          background-color: #1c449b;
+          padding: calc(var(--fitWidthRatio) * 8px) calc(var(--fitWidthRatio) * 16px);
+          border-radius: calc(var(--fitWidthRatio) * 16px);
+          color: #FFFFFF;
+          font-size: calc(var(--fitWidthRatio) * 16px);
+          font-weight: 600;
+          font-family: 'PingFang SC';
+        }
+      }
+
+    }
+
+    .login-right {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      height: 100%;
+      width: 40%;
+      position: absolute;
+      right: 0;
+      background-color: rgba(255, 255, 255, 0.6);
+      border-radius: calc(var(--fitWidthRatio) * 20px) 0 0 calc(var(--fitWidthRatio) * 20px);
+      backdrop-filter: blur(10px);
+
+      .login-right-box {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--fitWidthRatio) * 20px);
+        position: absolute;
+        top: 12%;
+
+        .login-right-title {
+          font-size: calc(var(--fitWidthRatio) * 24px);
+          font-weight: 600;
+          width: 100%;
+          color: rgba(0, 0, 0, 1);
+          font-family: 'PingFang SC';
+
+          .welcome {
+            font-size: calc(var(--fitWidthRatio) * 32px);
+          }
+        }
+
+        .login-right-form {
+          width: 30vw;
+          height: 65vh;
+          min-height: 386px;
+          background-color: #ffffff;
+          box-shadow: 0px calc(var(--fitWidthRatio) * 6px) calc(var(--fitWidthRatio) * 4px) 0px rgba(149, 149, 149, 0.25);
+          border-radius: calc(var(--fitWidthRatio) * 8px);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .tabs {
+            height: 90%;
+            width: 100%;
+            padding: calc(var(--fitWidthRatio) * 32px) calc(var(--fitWidthRatio) * 32px) 0 calc(var(--fitWidthRatio) * 32px);
+
+            :deep(.ant-tabs-nav) {
+              margin: 0;
+              padding: 0 calc(var(--fitWidthRatio) * 24px);
+            }
+
+            :deep(.ant-tabs-tab) {
+              padding: calc(var(--fitWidthRatio) * 4px) 0;
+            }
+
+            :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
+              color: #000;
+            }
+
+            :deep(.ant-tabs-nav-list :not(.ant-tabs-tab-active) .ant-tabs-tab-btn) {
+              color: #9B9B9B;
+            }
+
+            :deep(.ant-tabs-nav::before) {
+              border: none;
+            }
+
+            :deep(.ant-tabs-tab-btn) {
+              font-size: calc(var(--fitWidthRatio) * 24px);
+            }
+
+            :deep(.ant-tabs-content) {
+              height: 100%;
+            }
+
+            .margin-top {
+              margin-top: calc(var(--fitWidthRatio) * 50px);
+            }
+
+            .flex-center {
+              margin: 0;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              height: 100%;
+              width: 100%;
+            }
+
+            .qrcode-login {
+
+              .img {
+                width: calc(var(--fitWidthRatio) * 355px);
+                height: calc(var(--fitWidthRatio) * 370px);
+                position: absolute;
+                z-index: 1;
+                right: 0;
+              }
+
+              .code {
+                left: 0;
+                top: calc(var(--fitWidthRatio) * 16px);
+              }
+
+              .absolute-right {
+                position: absolute;
+              }
+            }
+
+            .login-form {
+              width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding: 0 calc(var(--fitWidthRatio) * 32px) 0 calc(var(--fitWidthRatio) * 16px);
+
+              .label {
+                font-size: calc(var(--fitWidthRatio) * 16px);
+                font-family: 'PingFang SC';
+                font-weight: 500;
+                margin-top: calc(var(--fitWidthRatio) * 16px);
+                margin-bottom: calc(var(--fitWidthRatio) * 8px);
+              }
+
+              .input {
+                height: calc(var(--fitWidthRatio) * 44px);
+                width: 100%;
+                font-size: calc(var(--fitWidthRatio) * 16px);
+                border: 1px solid rgba(238, 238, 238, 1);
+                box-shadow: 0px calc(var(--fitWidthRatio) * 4px) calc(var(--fitWidthRatio) * 4px) 0px rgba(214, 214, 214, 0.25);
+              }
+
+              .form-item {
+                margin: 0;
+
+                .form-btn {
+                  width: 100%;
+                  height: calc(var(--fitWidthRatio) * 50px);
+                  margin-top: calc(var(--fitWidthRatio) * 24px);
+                  display: flex;
+                  justify-content: center;
+                  .btn {
+                    height: 100%;
+                    width:calc(var(--fitWidthRatio) * 410px) ;
+                    font-size: calc(var(--fitWidthRatio) * 16px);
+
+                  }
+                }
+
+                .img {
+                  width: calc(var(--fitWidthRatio) * 124px);
+                  height: calc(var(--fitWidthRatio) * 34px);
+                  border-radius: calc(var(--fitWidthRatio) * 8px);
+                }
+              }
+
+
+              :deep(.ant-form) {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+              }
+
+              :deep(.ant-form-item) {
+                margin-left: calc(var(--fitWidthRatio) * 20px);
+              }
+            }
+          }
+
+          .login-right-bottom {
+            width: 100%;
+            height: 10%;
+            text-align: center;
+            font-size: calc(var(--fitWidthRatio) * 16px);
+            padding: calc(var(--fitWidthRatio) * 16px);
+            border-top: 1px dotted #DEDEDE;
+            color: #EF2F22;
+          }
+        }
+      }
+
+    }
+  }
+}
+</style>

src/views/system/login2/login.vue

@@ -1,27 +1,27 @@
 <template>
   <div class="login" ref="loginRef">
-    <a-carousel autoplay class="carousel" dotsClass="dots" lazyLoad :autoplaySpeed="60000" adaptiveHeight>
+    <!-- <a-carousel autoplay class="carousel" dotsClass="dots" lazyLoad :autoplaySpeed="60000" adaptiveHeight>
       <div>
         <img :src="loginBg1" class="img" alt="">
       </div>
       <div>
         <img :src="loginBg2" class="img" alt="">
       </div>
-    </a-carousel>
+    </a-carousel> -->
     <div class="login-box">
       <div class="login-left">
         <div class="login-left-box">
-          <img class="logo" :src="logo" alt="">
-          <div class="slogan">合作共赢 · 品质第一 </div>
-          <div class="type">
+          <!-- <img class="logo" :src="logo" alt=""> -->
+          <!-- <div class="slogan">合作共赢 · 品质第一 </div> -->
+          <!-- <div class="type">
               研发设计/生产制造/工程管理/投资运营
-          </div>
+          </div> -->
         </div>
       </div>
       <div class="login-right">
         <div class="login-right-box">
           <div class="login-right-title">
-            <span class="welcome">欢迎登录</span>润扬内控平台
+            <span class="welcome">欢迎登录</span>Admin内控平台
           </div>
           <div class="login-right-form">
 
@@ -95,7 +95,7 @@
                 </div>
               </a-tab-pane>
             </a-tabs>
-            <div class="login-right-bottom">如有疑问请致电：营销热线0532-88988868</div>
+            <!-- <div class="login-right-bottom">如有疑问请致电：营销热线0532-88988868</div> -->
           </div>
         </div>
       </div>