Merge branch 'main' of http://123.132.248.154:10000/gitY/DiKongGanZhiPingTai

src/design/index.less

@@ -102,6 +102,12 @@ ul {
   font-weight: normal;
   font-style: normal;
 }
+@font-face {
+  font-family: 'PingFangSC-Semibold';
+  src: url('/public/fonts/PingFangSC-Semibold.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
 @font-face {
   font-family: 'Bebas';
   src: url('/public/fonts/BEBAS.ttf') format('truetype');

src/views/sys/login/Login.vue

@@ -1,231 +1,240 @@
 <template>
-  <div class="login" style="background-color: #f0f0f0; width: 100%; height: 100%">
-    <div
-      class="title"
-      :style="{
-        top: `calc(${25}% - (${230 * bi}px))`,
-        left: `${143 * bi}px`,
-        height: `${99 * bi}px`,
-      }"
-    >
-      <img
-        src="/login/logo.png"
-        :style="{
-          width: `${99 * bi}px`,
-          marginRight: `${28 * bi}px`,
-        }"
-      />
-      <div
-        class="title_span"
-        :style="{
-          top: `${22 * bi}px`,
-        }"
-      >
-        <a-col>
-          <a-row>
-            <span
-              class="title_CN"
-              :style="{
-                fontSize: `${50 * bi}px`,
-                height: `${50 * bi}px`,
-              }"
-            >
-              {{VITE_GLOB_APP_TITLE}}
-            </span>
-          </a-row>
-          <a-row>
-            <span
-              class="title_EN"
-              :style="{
-                fontSize: `${22 * bi}px`,
-                height: `${22 * bi}px`,
-                top: `${10 * bi}px`,
-                opacity: `${0.3 * bi}`,
-              }"
-            >
-              {{VITE_GLOB_APP_EN_TITLE}}
-            </span>
-          </a-row>
-        </a-col>
+  <div class="background">
+    <div class="form-div">
+      <div class="login-title">
+        <div class="logo"></div>
+        <div class="interval"></div>
+        <div class="title-div">
+          <div class="welcome">欢迎登陆</div>
+          <div class="title">低空数智态势感知平台</div>
+        </div>
       </div>
-    </div>
-    <div class="bg">
-      <div
-        class="bg_login"
-        :style="{
-          height: `${isRegister ? 600 * bi : 400 * bi}px`,
-          width: `${294.1 * bi}px`,
-        }"
-      >
-        <LoginForm :bi="bi" />
-        <ForgetPasswordForm />
-        <RegisterForm />
-        <MobileForm />
-        <QrCodeForm />
+      <div class="login-form">
+        <a-form
+          :model="formData"
+          :rules="getFormRules"
+          ref="formRef"
+          @keypress.enter="handleLogin">
+          <FormItem name="account">
+            <div class="form-item-label">账号</div>
+            <Input
+              class="form-item-account"
+              v-model:value="formData.account"
+              placeholder="请输入账号"/>
+          </FormItem>
+          <FormItem name="password">
+            <div class="form-item-label">密码</div>
+            <InputPassword
+              class="form-item-account"
+              v-model:value="formData.password"
+              placeholder="请输入密码"/>
+          </FormItem>
+          <div class="checkbox-div">
+            <a-checkbox class="rememberMe" v-model:checked="rememberMe">
+              <span class="rememberMe-span"> {{ t('sys.login.rememberMe') }}</span>
+            </a-checkbox>
+            <div class="getPassword">找回密码</div>
+          </div>
+          <FormItem>
+            <div style="display: flex;">
+              <a-button
+                @click="handleLogin"
+                :loading="loading"
+                class="submit-button">
+                <span>登录</span><ArrowRightOutlined />
+              </a-button>
+              <a-button
+                class="register-button">
+                <span>注册</span>
+              </a-button>
+            </div>
+          </FormItem>
+        </a-form>
       </div>
     </div>
-    <div
-      class="bottom"
-      :style="{
-        width: `${628 * bi}px`,
-        height: `${18 * bi}px`,
-        fontSize: `${18 * bi}px`,
-        borderRadius: `${5 * bi}px`,
-        bottom: `${26 * bi}px`,
-        left: `calc(${50}% - (${(628 / 2) * bi}px))`,
-      }"
-    >
-      {{
-        VITE_GLOB_APP_MANAGEMENT_UNIT
-          ? VITE_GLOB_APP_MANAGEMENT_UNIT
-          : t('sys.subject.bottom_copyright_lindidiaocha')
-      }}
-      &nbsp;&nbsp;&nbsp;&nbsp;
-      {{
-        VITE_GLOB_APP_TECHINICAL_SUPPORT
-          ? VITE_GLOB_APP_TECHINICAL_SUPPORT
-          : t('sys.subject.bottom_support')
-      }}
-    </div>
+    <div class="bottom-span">Copyright © 山东慧创信息科技有限公司 </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, unref, computed, onMounted, onUnmounted } from 'vue';
-  import { AppDarkModeToggle, AppLocalePicker, AppLogo } from '@/components/Application';
-  import { useGlobSetting } from '@/hooks/setting';
-  import { useDesign } from '@/hooks/web/useDesign';
+  import { ref, reactive } from 'vue';
+  import { useFormRules, useFormValid } from './useLogin';
+  import { useUserStore } from '@/store/modules/user';
+  import { useMessage } from '@/hooks/web/useMessage';
   import { useI18n } from '@/hooks/web/useI18n';
-  import { useLocaleStore } from '@/store/modules/locale';
-  import ForgetPasswordForm from './ForgetPasswordForm.vue';
-  import LoginForm from './LoginForm.vue';
-  import MobileForm from './MobileForm.vue';
-  import QrCodeForm from './QrCodeForm.vue';
-  import RegisterForm from './RegisterForm.vue';
-  import { LoginStateEnum, useLoginState } from './useLogin';
-  const { getLoginState } = useLoginState();
-  import { getAppEnvConfig } from '@/utils/env';
-  const { VITE_GLOB_APP_MANAGEMENT_UNIT, VITE_GLOB_APP_TECHINICAL_SUPPORT,VITE_GLOB_APP_EN_TITLE, VITE_GLOB_APP_TITLE } = getAppEnvConfig();
-
-  const isRegister = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
-
-  defineProps({
-    sessionTimeout: {
-      type: Boolean,
-    },
-  });
-
-  const globSetting = useGlobSetting();
-  const { prefixCls } = useDesign('login');
+  import { Form, Input, } from 'ant-design-vue';
+  import { ArrowRightOutlined } from '@ant-design/icons-vue';
+  const FormItem = Form.Item;
+  const InputPassword = Input.Password;
   const { t } = useI18n();
-  const localeStore = useLocaleStore();
-  const showLocale = localeStore.getShowPicker;
-  const title = computed(() => globSetting?.title ?? '');
-
-  // 分辨率
-  const viewportWidth = ref(window.innerWidth);
-  const referenceWidth = 1920;
-  const updateWindowSize = () => {
-    viewportWidth.value = window.innerWidth;
-  };
-  const bi = computed(() => {
-    return viewportWidth.value / referenceWidth;
+  const { notification, createErrorModal } = useMessage();
+  const userStore = useUserStore();
+  const formRef = ref();
+  const { getFormRules } = useFormRules();
+  const { validForm } = useFormValid(formRef);
+  const formData = reactive({
+    account: '',
+    password: '',
   });
+  const loading = ref(false);
+  const rememberMe = ref(false);
+  async function handleLogin() {
+    const data = await validForm();
+    if (!data) return;
+    try {
+      loading.value = true;
+      const userInfo = await userStore.login({
+        password: data.password,
+        account: data.account,
+        mode: 'none', //不要默认的错误提示
+      });
+      console.log(userInfo);
+      localStorage.setItem('fireUserLoginName', userInfo.name);
+      if (userInfo) {
+        localStorage.setItem('userid', userInfo.id);
+        notification.success({
+          message: t('sys.login.loginSuccessTitle'),
+          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.name}`,
 
-  onMounted(() => {
-    window.addEventListener('resize', updateWindowSize);
-    updateWindowSize(); // 初始化视口尺寸
-  });
-
-  onUnmounted(() => {
-    window.removeEventListener('resize', updateWindowSize);
-  });
-</script>
-<style lang="less">
-  .login {
-    // 页面不能被选中
-    -webkit-user-select: none; /* Safari */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* IE/Edge */
-    user-select: none;
-  }
-
-  .title {
-    position: relative;
-    display: inline-block;
-    // left: 143px;
-    // height: 99px;
-
-    // img {
-    //   width: 99px;
-    //   margin-right: 28px;
-    // }
-
-    &_span {
-      display: inline-block;
-      position: relative;
-      // top: 22px;
-    }
-
-    &_CN {
-      width: 100%;
-      // height: 50px;
-      font-family: Alibaba PuHuiTi;
-      font-weight: 900;
-      // font-size: 50px;
-      color: #131313;
-      letter-spacing: 3px;
-    }
-    &_EN {
-      position: relative;
-      // top: 10px;
-      width: 100%;
-      // height: 22px;
-      font-family: Alibaba PuHuiTi;
-      font-weight: 300;
-      // font-size: 22px;
-      color: #131313;
-      text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
-      opacity: 0.3;
+          duration: 3,
+        });
+      }
+    } catch (error) {
+      createErrorModal({
+        title: t('sys.api.errorTip'),
+        content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
+      });
+    } finally {
+      loading.value = false;
     }
   }
-
-  .bg {
-    position: relative;
-    top: 50px;
-    width: 100%;
-    height: calc(100% - 280px);
-    background-image: url('/login/bg.png');
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: 100%;
-    display: flex;
-    align-items: center;
-    text-align: center;
-
-    &_login {
-      position: relative;
-      left: calc(70%);
-      // width: 294.1px;
-      background-color: #ffffff;
-      border-radius: 5px;
+</script>
+<style lang="scss">
+.background{
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-image: url('/public/login/login_background.png');
+  background-size: cover; 
+  background-position: center; 
+  background-repeat: no-repeat;
+  .form-div{
+    position: absolute;
+    top: 275px;
+    left: 262px;
+    width: 436px;
+    .login-title{
+      display: flex;
+      align-items: center;
+      height: 86px;
+      margin-bottom: 16px;
+      user-select: none;
+      .logo{
+        width: 82px;
+        height: 73px;
+        background-image: url('/public/login/login_logo.png');
+        background-size: 100% 100%;
+        margin-right: 20px;
+      }
+      .interval{
+        width: 2px;
+        height: 70px;
+        background: #FFFFFF;
+        margin-right: 22px;
+      }
+      .title-div{
+        .welcome{
+          font-family: PingFangSC-Semibold;
+          // font-weight: 600;
+          font-size: 32px;
+          color: #FFFFFF;
+          line-height: 43px;
+        }
+        .title{
+          font-family: PingFangSC-Semibold;
+          // font-weight: 600;
+          font-size: 25px;
+          color: #FFFFFF;
+          line-height: 43px;
+        }
+      }
+    }
+    .login-form{
+      .form-item-label{
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 16px;
+        color: #FFFFFF;
+        line-height: 28px;
+        margin-bottom: 8px;
+        user-select: none;
+      }
+      .form-item-account{
+        height: 44px;
+      }
+      .checkbox-div{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 44px;
+        user-select: none;
+        .rememberMe{
+          .rememberMe-span{
+            font-family: PingFangSC-Regular;
+            font-weight: 400;
+            font-size: 16px;
+            color: #FFFFFF;
+            line-height: 28px;
+          }
+        }
+        .getPassword{
+          font-family: PingFangSC-Regular;
+          font-weight: 400;
+          font-size: 16px;
+          color: #3A57E8;
+          line-height: 28px;
+          cursor: pointer;
+        }
+      }
+      .submit-button{
+        width: 211px;
+        height: 44px;
+        background: #3A57E8;
+        border-radius: 4px;
+        border: 0px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        font-size: 18px;
+        color: #FFFFFF;
+        line-height: 28px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 15px;
+      }
+      .register-button{
+        width: 211px;
+        height: 44px;
+        background: #FFFFFF;
+        border-radius: 4px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        font-size: 18px;
+        color: #000000;
+        line-height: 28px;
+      }
     }
   }
-
-  .bottom {
-    width: 628px;
-    height: 18px;
-    font-family: Alibaba PuHuiTi;
-    font-weight: 400;
-    font-size: 18px;
-    border-radius: 5px;
-
+  .bottom-span{
     position: absolute;
-    bottom: 26px;
-
-    display: flex;
-    align-items: center;
-    text-align: center;
-    justify-content: center;
-    left: calc(50% - 628px / 2);
+    bottom: 55px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    font-size: 16px;
+    color: #8A92A6;
+    line-height: 22px;
+    user-select: none;
   }
+}
 </style>