From 4ebfaaf72785c6fe9a957b411ee071a7d0f76c85 Mon Sep 17 00:00:00 2001
From: Leo_Ding <2405260743@qq.com>
Date: Thu, 4 Dec 2025 17:59:10 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=8E=A5=E5=8F=A3=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=AA=8C=E8=AF=81=E7=A0=81=E7=99=BB=E5=BD=95=EF=BC=8C?=
 =?UTF-8?q?=E5=BF=98=E8=AE=B0=E5=AF=86=E7=A0=81=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                            |  2 +-
 src/views/login/component/account.vue |  4 +-
 src/views/login/component/code.vue    | 88 +++++++++++++++++++++++++++
 src/views/login/index.vue             | 11 +++-
 4 files changed, 100 insertions(+), 5 deletions(-)
 create mode 100644 src/views/login/component/code.vue
diff --git a/index.html b/index.html
index 143557b..209a330 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>GxDL算力云</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/views/login/component/account.vue b/src/views/login/component/account.vue
index b68d139..b84acb7 100644
--- a/src/views/login/component/account.vue
+++ b/src/views/login/component/account.vue
@@ -2,11 +2,11 @@
   <a-form ref="formRef" :model="formState" name="normal_login" class="login-form" @finish="onFinish"
     @finish-failed="onFinishFailed">
     <a-form-item label="账号" name="phone" :rules="[{ required: true, message: '请输入用户名！' }]">
-      <a-input v-model:value="formState.phone" />
+      <a-input v-model:value="formState.phone" placeholder="请输入账号"/>
     </a-form-item>
     <!-- 手动控制密码字段的错误状态 -->
     <a-form-item label="密码" name="code" :help="codeHelp" :rules="[{ required: true, message: '请输入密码！' }]">
-      <a-input-password v-model:value="formState.code" />
+      <a-input-password v-model:value="formState.code" placeholder="请输入密码"/>
     </a-form-item>
     <a-form-item>
       <a-button type="primary" html-type="submit" block class="login-form-button">
diff --git a/src/views/login/component/code.vue b/src/views/login/component/code.vue
new file mode 100644
index 0000000..79db65e
--- /dev/null
+++ b/src/views/login/component/code.vue
@@ -0,0 +1,88 @@
+<template>
+  <a-form ref="formRef" :model="formState" name="normal_login" class="login-form" @finish="onFinish"
+    @finish-failed="onFinishFailed">
+    <a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
+      <a-input v-model:value="formState.phone" placeholder="请输入手机号">
+         <template #addonAfter>
+           <div>获取验证码</div>
+         </template>
+      </a-input>
+    </a-form-item>
+    <!-- 手动控制密码字段的错误状态 -->
+    <a-form-item label="验证码" name="code"  :rules="[{ required: true, message: '请输入验证码！' }]">
+      <a-input v-model:value="formState.code" placeholder="请输入验证码"/>
+    </a-form-item>
+    <a-form-item>
+      <a-button type="primary" html-type="submit" block class="login-form-button">
+        登 录
+      </a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, shallowRef } from 'vue';
+import { useRouter } from 'vue-router';
+import { login, fetchUserInfo } from '@/apis/modules/login';
+import { message, type FormInstance } from 'ant-design-vue';
+
+const router = useRouter();
+const formRef = ref<FormInstance>();
+
+const codeValidateStatus = shallowRef<'success' | 'warning' | 'error' | ''>('');
+const codeHelp = shallowRef('');
+
+interface FormState {
+  phone: string;
+  code: string;
+  remember: boolean;
+}
+
+const formState = reactive<FormState>({
+  phone: '',
+  code: '',
+  remember: true,
+});
+
+const clearCodeError = () => {
+  codeValidateStatus.value = '';
+  codeHelp.value = '';
+};
+
+const setCodeError = (msg: string) => {
+  codeValidateStatus.value = 'error';
+  codeHelp.value = msg;
+};
+
+const onFinish = async (values: FormState) => {
+  clearCodeError();
+
+  const loginData = {
+    ...values,
+    login_method: 'PWD'//PWD表示密码登录，SMS表示短信验证码登录
+  };
+  formRef.value?.validateFields().then(async () => {
+    try {
+      const res: any = await login(loginData);
+      console.log('登录请求成功:', res);
+      // 登录成功后，将token存入localStorage
+      const token = res?.access_token;
+      if (!token) {
+        throw new Error('登录失败：未返回有效凭证');
+      }
+      localStorage.setItem('token', token);
+      const userRes=await fetchUserInfo();
+      localStorage.setItem('userInfo', JSON.stringify(userRes));
+      router.push('/layout/home');
+    } catch (error: any) {
+      console.error('登录请求失败:', error);
+      message.error(error || '用户名或密码错误');
+    }
+  });
+
+};
+
+const onFinishFailed = (errorInfo: any) => {
+  console.log('表单验证失败:', errorInfo);
+};
+</script>
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index aa9ec4b..57a1586 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -8,11 +8,17 @@
         <h4 class="login-content-title">GPU算力管理平台</h4>
         <div>
           <a-tabs v-model:activeKey="state.tabsActiveName" size="large">
-            <a-tab-pane key="account" tab="登录">
+            <a-tab-pane key="account" tab="账号密码登录">
               <Account />
             </a-tab-pane>
-            <a-tab-pane key="mobile" tab="注册">Tab 2</a-tab-pane>
+             <a-tab-pane key="code" tab="验证码登录">
+              <Code />
+            </a-tab-pane>
           </a-tabs>
+          <div style="width: 100%;display: flex;justify-content: space-between;font-size: 14px;">
+            <span style="color:#1677ff;cursor: pointer;">注册</span>
+            <span style="color:#666;cursor: pointer;">忘记密码</span>
+          </div>
         </div>
       </div>
     </div>
@@ -24,6 +30,7 @@
 <script setup lang="ts">
 import { reactive, computed } from "vue";
 import Account from "@/views/login/component/account.vue";
+import Code from "@/views/login/component/code.vue";
 // import Mobile from "@/views/login/component/mobile.vue";
 // import Scan from "@/views/login/component/scan.vue";
 // import { useThemeConfigStateStore } from "@/stores/themeConfig";
