From 6c9238c07ceb317c31d9c5ec581dd04c4be46407 Mon Sep 17 00:00:00 2001
From: "zangch@mesnac.com" <zangch@mesnac.com>
Date: Tue, 31 Mar 2026 16:21:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(login):=20=E9=87=8D=E6=9E=84=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E4=B8=8E=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login.vue | 597 ++++++++++++++++++++++++++++----------------
 1 file changed, 379 insertions(+), 218 deletions(-)

diff --git a/src/views/login.vue b/src/views/login.vue
index a890c63..3476e75 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,86 +1,106 @@
 <template>
-  <div class="login">
-    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-      <div class="title-box">
-        <h3 class="title">{{ title }}</h3>
-        <lang-select />
-      </div>
-      <el-form-item v-if="tenantEnabled" prop="tenantId">
-        <el-select v-model="loginForm.tenantId" filterable :placeholder="proxy.$t('login.selectPlaceholder')" style="width: 100%">
-          <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option>
-          <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
-        </el-select>
-      </el-form-item>
-      <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" :placeholder="proxy.$t('login.username')">
-          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          size="large"
-          auto-complete="off"
-          :placeholder="proxy.$t('login.password')"
-          @keyup.enter="handleLogin"
-        >
-          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item v-if="captchaEnabled" prop="code">
-        <el-input
-          v-model="loginForm.code"
-          size="large"
-          auto-complete="off"
-          :placeholder="proxy.$t('login.code')"
-          style="width: 63%"
-          @keyup.enter="handleLogin"
-        >
-          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" class="login-code-img" @click="getCode" />
+  <div class="login-page">
+    <div class="login-shell">
+      <section class="brand-panel">
+        <div class="brand-badge">Hawei Plus Secure Portal</div>
+        <h1>{{ displayTitle }}</h1>
+        <p class="brand-desc">
+          海威PLUS 当前统一承接实时曲线、历史曲线、报表分析和报警处置等核心入口。登录后可直接进入监测概览、趋势分析与异常处理页面。
+        </p>
+
+        <div class="brand-grid">
+          <div v-for="item in brandCards" :key="item.title" class="brand-card">
+            <span class="brand-card-label">{{ item.title }}</span>
+            <strong class="brand-card-value">{{ item.value }}</strong>
+            <p>{{ item.desc }}</p>
+          </div>
         </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">{{ proxy.$t('login.rememberPassword') }}</el-checkbox>
-      <el-form-item style="float: right">
-        <el-button circle :title="proxy.$t('login.social.wechat')" @click="doSocialLogin('wechat')">
-          <svg-icon icon-class="wechat" />
-        </el-button>
-        <el-button circle :title="proxy.$t('login.social.maxkey')" @click="doSocialLogin('maxkey')">
-          <svg-icon icon-class="maxkey" />
-        </el-button>
-        <el-button circle :title="proxy.$t('login.social.topiam')" @click="doSocialLogin('topiam')">
-          <svg-icon icon-class="topiam" />
-        </el-button>
-        <el-button circle :title="proxy.$t('login.social.gitee')" @click="doSocialLogin('gitee')">
-          <svg-icon icon-class="gitee" />
-        </el-button>
-        <el-button circle :title="proxy.$t('login.social.github')" @click="doSocialLogin('github')">
-          <svg-icon icon-class="github" />
-        </el-button>
-      </el-form-item>
-      <el-form-item style="width: 100%">
-        <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
-          <span v-if="!loading">{{ proxy.$t('login.login') }}</span>
-          <span v-else>{{ proxy.$t('login.logging') }}</span>
-        </el-button>
-        <div v-if="register" style="float: right">
-          <router-link class="link-type" :to="'/register'">{{ proxy.$t('login.switchRegisterPage') }}</router-link>
+
+        <div class="brand-tags">
+          <el-tag effect="dark">实时曲线</el-tag>
+          <el-tag effect="plain">历史曲线</el-tag>
+          <el-tag effect="plain">报警与报表</el-tag>
         </div>
-      </el-form-item>
-    </el-form>
-    <!--  底部  -->
+      </section>
+
+      <section class="form-panel">
+        <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+          <div class="title-box">
+            <div>
+              <p class="form-eyebrow">Secure Access</p>
+              <h3 class="title">登录系统</h3>
+            </div>
+            <lang-select />
+          </div>
+
+          <el-form-item v-if="tenantEnabled" prop="tenantId">
+            <el-select v-model="loginForm.tenantId" filterable :placeholder="proxy.$t('login.selectPlaceholder')" style="width: 100%">
+              <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId" />
+              <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item prop="username">
+            <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" :placeholder="proxy.$t('login.username')">
+              <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item prop="password">
+            <el-input
+              v-model="loginForm.password"
+              type="password"
+              size="large"
+              auto-complete="off"
+              :placeholder="proxy.$t('login.password')"
+              @keyup.enter="handleLogin"
+            >
+              <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item v-if="captchaEnabled" prop="code">
+            <el-input
+              v-model="loginForm.code"
+              size="large"
+              auto-complete="off"
+              :placeholder="proxy.$t('login.code')"
+              style="width: 63%"
+              @keyup.enter="handleLogin"
+            >
+              <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+            </el-input>
+            <div class="login-code">
+              <img :src="codeUrl" class="login-code-img" @click="getCode" />
+            </div>
+          </el-form-item>
+
+          <div class="login-tools">
+            <el-checkbox v-model="loginForm.rememberMe">{{ proxy.$t('login.rememberPassword') }}</el-checkbox>
+            <span class="login-tip">当前环境已关闭第三方登录入口，统一使用账号密码认证。</span>
+          </div>
+
+          <el-form-item style="width: 100%">
+            <el-button :loading="loading" size="large" type="primary" class="submit-btn" @click.prevent="handleLogin">
+              <span v-if="!loading">{{ proxy.$t('login.login') }}</span>
+              <span v-else>{{ proxy.$t('login.logging') }}</span>
+            </el-button>
+            <div v-if="register" class="register-entry">
+              <router-link class="link-type" :to="'/register'">{{ proxy.$t('login.switchRegisterPage') }}</router-link>
+            </div>
+          </el-form-item>
+        </el-form>
+      </section>
+    </div>
+
     <div class="el-login-footer">
-      <span>Copyright © 2018-2026 疯狂的狮子Li All Rights Reserved.</span>
+      <span>Copyright © 2018-2026 海威PLUS All Rights Reserved.</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { getCodeImg, getTenantList } from '@/api/login';
-import { authRouterUrl } from '@/api/system/social/auth';
 import { useUserStore } from '@/store/modules/user';
 import { LoginData, TenantVO } from '@/api/types';
 import { to } from 'await-to-js';
@@ -89,11 +109,17 @@ import { useI18n } from 'vue-i18n';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-const title = import.meta.env.VITE_APP_TITLE;
+const displayTitle = '海威PLUS';
 const userStore = useUserStore();
 const router = useRouter();
 const { t } = useI18n();
 
+const brandCards = [
+  { title: '当前入口', value: '4 类', desc: '覆盖实时曲线、历史曲线、报表分析与报警处理。' },
+  { title: '登录方式', value: '统一认证', desc: '当前环境统一使用账号密码登录。' },
+  { title: '页面风格', value: '业务聚焦', desc: '只保留当前项目已经落地的功能入口与文案。' }
+];
+
 const loginForm = ref<LoginData>({
   tenantId: '000000',
   username: 'admin',
@@ -134,49 +160,42 @@ watch(
 
 const handleLogin = () => {
   loginRef.value?.validate(async (valid: boolean, fields: any) => {
-    if (valid) {
-      loading.value = true;
-      // 勾选了需要记住密码设置在 localStorage 中设置记住用户名和密码
-      if (loginForm.value.rememberMe) {
-        localStorage.setItem('tenantId', String(loginForm.value.tenantId));
-        localStorage.setItem('username', String(loginForm.value.username));
-        localStorage.setItem('password', String(loginForm.value.password));
-        localStorage.setItem('rememberMe', String(loginForm.value.rememberMe));
-      } else {
-        // 否则移除
-        localStorage.removeItem('tenantId');
-        localStorage.removeItem('username');
-        localStorage.removeItem('password');
-        localStorage.removeItem('rememberMe');
-      }
-      // 调用action的登录方法
-      const [err] = await to(userStore.login(loginForm.value));
-      if (!err) {
-        const redirectUrl = redirect.value || '/';
-        await router.push(redirectUrl);
-        loading.value = false;
-      } else {
-        loading.value = false;
-        // 重新获取验证码
-        if (captchaEnabled.value) {
-          await getCode();
-        }
-      }
-    } else {
+    if (!valid) {
       console.log('error submit!', fields);
+      return;
+    }
+    loading.value = true;
+    if (loginForm.value.rememberMe) {
+      localStorage.setItem('tenantId', String(loginForm.value.tenantId));
+      localStorage.setItem('username', String(loginForm.value.username));
+      localStorage.setItem('password', String(loginForm.value.password));
+      localStorage.setItem('rememberMe', String(loginForm.value.rememberMe));
+    } else {
+      localStorage.removeItem('tenantId');
+      localStorage.removeItem('username');
+      localStorage.removeItem('password');
+      localStorage.removeItem('rememberMe');
+    }
+
+    const [err] = await to(userStore.login(loginForm.value));
+    if (!err) {
+      await router.push(redirect.value || '/');
+      loading.value = false;
+      return;
+    }
+
+    loading.value = false;
+    if (captchaEnabled.value) {
+      await getCode();
     }
   });
 };
 
-/**
- * 获取验证码
- */
 const getCode = async () => {
   const res = await getCodeImg();
   const { data } = res;
   captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled;
   if (captchaEnabled.value) {
-    // 刷新验证码时清空输入框
     loginForm.value.code = '';
     codeUrl.value = 'data:image/gif;base64,' + data.img;
     loginForm.value.uuid = data.uuid;
@@ -192,39 +211,21 @@ const getLoginData = () => {
     tenantId: tenantId === null ? String(loginForm.value.tenantId) : tenantId,
     username: username === null ? String(loginForm.value.username) : username,
     password: password === null ? String(loginForm.value.password) : String(password),
-    rememberMe: rememberMe === null ? false : Boolean(rememberMe)
+    rememberMe: rememberMe === null ? false : rememberMe === 'true'
   } as LoginData;
 };
 
-/**
- * 获取租户列表
- */
 const initTenantList = async () => {
   const { data } = await getTenantList(false);
   tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled;
   if (tenantEnabled.value) {
     tenantList.value = data.voList;
-    if (tenantList.value != null && tenantList.value.length !== 0) {
+    if (tenantList.value && tenantList.value.length !== 0) {
       loginForm.value.tenantId = tenantList.value[0].tenantId;
     }
   }
 };
 
-/**
- * 第三方登录
- * @param type
- */
-const doSocialLogin = (type: string) => {
-  authRouterUrl(type, loginForm.value.tenantId).then((res: any) => {
-    if (res.code === HttpStatus.SUCCESS) {
-      // 获取授权地址跳转
-      window.location.href = res.data;
-    } else {
-      ElMessage.error(res.msg);
-    }
-  });
-};
-
 onMounted(() => {
   getCode();
   initTenantList();
@@ -233,131 +234,253 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.login {
+.login-page {
+  position: relative;
+  min-height: 100%;
   display: flex;
-  justify-content: center;
   align-items: center;
-  height: 100%;
-  background-image: url('../assets/images/login-background.jpg');
-  background-size: cover;
-  background-position: center;
+  justify-content: center;
+  padding: 32px 20px 72px;
+  background:
+    radial-gradient(circle at top right, rgba(37, 99, 235, 0.28), transparent 24%),
+    radial-gradient(circle at left center, rgba(20, 184, 166, 0.16), transparent 28%),
+    linear-gradient(135deg, #0f172a 0%, #102a43 42%, #0f766e 100%);
+  overflow: hidden;
+}
+
+.login-page::before,
+.login-page::after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+  filter: blur(6px);
+}
+
+.login-page::before {
+  width: 360px;
+  height: 360px;
+  inset: -120px auto auto -80px;
+}
+
+.login-page::after {
+  width: 300px;
+  height: 300px;
+  inset: auto -80px -120px auto;
+}
+
+.login-shell {
+  position: relative;
+  z-index: 1;
+  width: min(1180px, 100%);
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
+  gap: 22px;
+}
+
+.brand-panel,
+.form-panel {
+  border-radius: 28px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(14px);
+  box-shadow: 0 24px 80px rgba(2, 12, 27, 0.28);
+}
+
+.brand-panel {
+  padding: 30px;
+  color: #ffffff;
+}
+
+.brand-badge,
+.form-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.brand-badge {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.88);
+}
+
+.brand-panel h1 {
+  margin: 18px 0 0;
+  font-size: 38px;
+  line-height: 1.18;
+}
+
+.brand-desc {
+  max-width: 620px;
+  margin: 16px 0 0;
+  color: rgba(255, 255, 255, 0.82);
+  line-height: 1.85;
+}
+
+.brand-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 28px;
+}
+
+.brand-card {
+  padding: 18px;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+}
+
+.brand-card-label {
+  display: block;
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 12px;
+}
+
+.brand-card-value {
+  display: block;
+  margin-top: 10px;
+  font-size: 26px;
+  font-weight: 700;
+}
+
+.brand-card p {
+  margin: 10px 0 0;
+  color: rgba(255, 255, 255, 0.78);
+  line-height: 1.6;
+  font-size: 13px;
+}
+
+.brand-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 24px;
+}
+
+.form-panel {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.login-form {
+  width: 100%;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  padding: 30px 28px 14px;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
 }
 
 .title-box {
   display: flex;
-  align-items: center;
-  gap: 8px;
-
-  .title {
-    margin: 0px auto 26px auto;
-    text-align: center;
-    color: var(--el-text-color-primary);
-    font-weight: 600;
-    letter-spacing: 0.5px;
-  }
-
-  :deep(.lang-select--style) {
-    line-height: 0;
-    color: var(--el-text-color-secondary);
-  }
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 22px;
 }
 
-.login-form {
-  border-radius: var(--app-radius-lg);
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  width: min(420px, 90vw);
-  padding: 32px 30px 12px 30px;
-  z-index: 1;
-  box-shadow: var(--app-shadow-lg);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  .el-input {
-    height: 40px;
-    input {
-      height: 40px;
-    }
-  }
-
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 0px;
-  }
+.form-eyebrow {
+  background: rgba(37, 99, 235, 0.08);
+  color: #2563eb;
 }
 
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
+.title {
+  margin: 12px 0 0;
+  color: #0f172a;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+}
+
+.login-form .el-input {
+  height: 44px;
+}
+
+.login-form .el-input input {
+  height: 44px;
+}
+
+.input-icon {
+  height: 43px;
+  width: 14px;
+  margin-left: 0;
 }
 
 .login-form :deep(.el-input__wrapper) {
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(248, 250, 252, 0.92);
 }
 
 .login-form :deep(.el-input__wrapper.is-focus) {
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
 }
 
-.login-form :deep(.el-button--primary) {
-  border-radius: var(--app-radius-md);
-  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
+.login-tools {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0 0 22px;
 }
 
-.login-form :deep(.el-button.is-circle) {
-  background: rgba(15, 23, 42, 0.04);
-  border: 1px solid rgba(15, 23, 42, 0.08);
-  color: var(--el-text-color-regular);
+.login-tip {
+  color: #64748b;
+  font-size: 12px;
+  text-align: right;
 }
 
-.login-form :deep(.el-button.is-circle:hover) {
-  background: rgba(59, 130, 246, 0.1);
-  border-color: rgba(59, 130, 246, 0.2);
+.submit-btn {
+  width: 100%;
+  border-radius: 14px;
+  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.24);
+}
+
+.register-entry {
+  float: right;
+  margin-top: 12px;
 }
 
 .login-code {
   width: calc(37% - 10px);
-  height: 40px;
+  height: 44px;
   float: right;
   margin-left: 10px;
   box-sizing: border-box;
-  border-radius: var(--app-radius-sm);
+  border-radius: 12px;
   overflow: hidden;
   background: rgba(255, 255, 255, 0.9);
   border: 1px solid var(--el-border-color-light);
-
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-    display: block;
-    width: 100%;
-    height: 40px;
-    object-fit: cover;
-  }
-}
-
-.el-login-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  color: rgba(255, 255, 255, 0.75);
-  font-family: Arial, serif;
-  font-size: 12px;
-  letter-spacing: 1px;
 }
 
 .login-code-img {
-  height: 40px;
-  padding-left: 0;
+  display: block;
+  width: 100%;
+  height: 44px;
+  cursor: pointer;
+  object-fit: cover;
+}
+
+.el-login-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 12px;
+  letter-spacing: 0.06em;
 }
 
 :global(html.dark) {
   .login-form {
-    background: rgba(17, 24, 39, 0.9);
+    background: rgba(17, 24, 39, 0.92);
     border-color: rgba(148, 163, 184, 0.2);
   }
 
@@ -365,14 +488,52 @@ onMounted(() => {
     background-color: rgba(17, 24, 39, 0.7);
   }
 
-  .login-form :deep(.el-button.is-circle) {
-    background: rgba(148, 163, 184, 0.12);
-    border-color: rgba(148, 163, 184, 0.25);
+  .title {
     color: #e5e7eb;
   }
 
-  .el-login-footer {
-    color: rgba(226, 232, 240, 0.65);
+  .login-tip {
+    color: rgba(226, 232, 240, 0.68);
+  }
+}
+
+@media (max-width: 1080px) {
+  .login-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .brand-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .login-page {
+    padding: 16px 12px 64px;
+  }
+
+  .brand-panel,
+  .form-panel,
+  .login-form {
+    border-radius: 20px;
+  }
+
+  .brand-panel,
+  .login-form {
+    padding: 20px;
+  }
+
+  .brand-panel h1 {
+    font-size: 28px;
+  }
+
+  .login-tools {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .login-tip {
+    text-align: left;
   }
 }
 </style>