perf(views): 初步编写"登陆页"

src/api/index.ts

@@ -81,6 +81,7 @@ import type {
   ListInfo,
   ListInterfaces,
   ListPhysicalInterfaces,
+  LoginUser,
   MonitoringForm,
   MonitorPointInfo,
   MonitorPointItem,
@@ -166,13 +167,7 @@ const apiBiz = (path: string, params?: unknown) => {
 
 // 登录和注销
 
-export const loginUser = async () => {
-  const params = {
-    grant_type: 'password',
-    username: 'admin1',
-    password: 'admin',
-  };
-
+export const loginUser = async (params: LoginUser) => {
   await request(apiUaa('/oauth/token', params), {
     method: 'POST',
     headers: {

src/types/index.ts

@@ -2662,3 +2662,9 @@ export interface RolePermissionsItem {
   roleName: string;
   permissionCheckTreeVos: TreeStructure[];
 }
+
+export interface LoginUser {
+  grant_type?: string;
+  mobile: string;
+  password: string;
+}

src/views/login-component/LoginView.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import SvgIcon from '@/components/SvgIcon.vue';
+import { useRequest } from '@/hooks/request';
+import { t } from '@/i18n';
+import { loginUser } from '@/api';
+
+import type { Rule } from 'ant-design-vue/es/form';
+import type { LoginUser } from '@/types';
+
+const { handleRequest } = useRequest();
+const loginForm = ref<LoginUser>({
+  mobile: '',
+  password: '',
+});
+const rules: Record<string, Rule[]> = {
+  password: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  mobile: [
+    {
+      validator: (_rule: unknown, value: string) => {
+        if (!isValidPhone(value)) {
+          return Promise.reject('手机号格式错误');
+        }
+        return Promise.resolve();
+      },
+    },
+  ],
+};
+// 手机号校验函数
+const isValidPhone = (phone: string): boolean => {
+  return /^1[3-9]\d{9}$/.test(phone);
+};
+const addLog = () => {
+  handleRequest(async () => {
+    await loginUser({
+      grant_type: 'mobile_password',
+      ...loginForm.value,
+    });
+  });
+};
+</script>
+
+<template>
+  <div>
+    <AFlex>
+      <div class="login-div">
+        <AButton type="text" @click="$router.go(-1)">返回</AButton>
+      </div>
+
+      <AFlex class="login-div" justify="center" align="center">
+        <div>
+          <div class="login-title">暖通智控平台</div>
+          <AForm
+            ref="formRef"
+            :colon="false"
+            layout="vertical"
+            :model="loginForm"
+            :rules="rules"
+            :hide-required-mark="true"
+          >
+            <AFormItem label="账号" name="mobile">
+              <AInput class="input-width" v-model:value="loginForm.mobile" placeholder="请输入手机号">
+                <template #prefix>
+                  <SvgIcon name="calendar" class="icon-style" />
+                </template>
+              </AInput>
+            </AFormItem>
+            <AFormItem label="密码" name="password">
+              <AInput class="input-width" v-model:value="loginForm.password" placeholder="请输入密码">
+                <template #prefix>
+                  <SvgIcon name="calendar" class="icon-style" />
+                </template>
+              </AInput>
+            </AFormItem>
+          </AForm>
+          <AButton type="primary" class="button-style" @click="addLog">登陆</AButton>
+        </div>
+      </AFlex>
+    </AFlex>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.icon-style {
+  margin-right: 10px;
+}
+
+.button-style {
+  width: 422px;
+  height: 56px;
+  margin-top: 32px;
+  border-radius: 28px;
+}
+
+.input-width {
+  width: 422px;
+  height: 56px;
+}
+
+.login-title {
+  margin-bottom: 80px;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 44px;
+  color: #333;
+  text-align: left;
+}
+
+.login-div {
+  width: 50vw;
+  height: 100vh;
+}
+</style>