perf(views): 完成"登陆页"编写

src/api/index.ts

@@ -81,6 +81,7 @@ import type {
   ListInfo,
   ListInterfaces,
   ListPhysicalInterfaces,
+  loginForm,
   LoginUser,
   MonitoringForm,
   MonitorPointInfo,
@@ -168,12 +169,13 @@ const apiBiz = (path: string, params?: unknown) => {
 // 登录和注销
 
 export const loginUser = async (params: LoginUser) => {
-  await request(apiUaa('/oauth/token', params), {
+  const data = await request<loginForm>(apiUaa('/oauth/token', params), {
     method: 'POST',
     headers: {
       Authorization: 'Basic ' + btoa('unimat:unimat'),
     },
   });
+  return data;
 };
 
 export const logoutUser = async () => {

src/types/index.ts

@@ -2668,3 +2668,10 @@ export interface LoginUser {
   mobile: string;
   password: string;
 }
+
+export interface loginForm {
+  access_token: string;
+  expires_in: number;
+  refresh_token: string;
+  token_type: string;
+}

src/views/login-component/LoginView.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
+import { useUserInfoStore } from '@/stores/user-info';
 import { t } from '@/i18n';
 import { loginUser } from '@/api';
 
+import { setToken } from '../../utils/auth';
+
 import type { Rule } from 'ant-design-vue/es/form';
 import type { LoginUser } from '@/types';
 
+const router = useRouter();
+const { saveToken } = useUserInfoStore();
 const { handleRequest } = useRequest();
 const loginForm = ref<LoginUser>({
   mobile: '',
@@ -33,10 +39,15 @@ const isValidPhone = (phone: string): boolean => {
 };
 const addLog = () => {
   handleRequest(async () => {
-    await loginUser({
+    const { access_token } = await loginUser({
       grant_type: 'mobile_password',
       ...loginForm.value,
     });
+    if (access_token) {
+      saveToken(access_token);
+      setToken(access_token);
+      router.push('/env-monitor/index');
+    }
   });
 };
 </script>
@@ -44,11 +55,13 @@ const addLog = () => {
 <template>
   <div>
     <AFlex>
-      <div class="login-div">
-        <AButton type="text" @click="$router.go(-1)">返回</AButton>
+      <div class="login-bgc">
+        <AButton type="text" @click="$router.go(-1)">
+          <AFlex align="center"> <SvgIcon class="icon-left" name="left" /> 返回 </AFlex>
+        </AButton>
       </div>
 
-      <AFlex class="login-div" justify="center" align="center">
+      <AFlex class="login-div" align="center">
         <div>
           <div class="login-title">暖通智控平台</div>
           <AForm
@@ -82,6 +95,12 @@ const addLog = () => {
 </template>
 
 <style lang="scss" scoped>
+.icon-left {
+  margin-right: 12px;
+  font-size: 14px;
+  color: #999;
+}
+
 .icon-style {
   margin-right: 10px;
 }
@@ -108,8 +127,22 @@ const addLog = () => {
   text-align: left;
 }
 
+.login-bgc {
+  width: 710px;
+  height: 100vh;
+  padding-top: 32px;
+  padding-left: 30px;
+  zoom: 1;
+  background: url('../../assets/img/login-view.png') no-repeat center 0;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: 0, 0;
+  background-size: 710px 100vh;
+}
+
 .login-div {
-  width: 50vw;
+  width: calc(100vw - 710px);
   height: 100vh;
+  padding-left: 154px;
 }
 </style>