Merge branch 'main' of https://gitlab.guxuan.icu/Leo_Ding/GPU_Web

2025-12-05 14:48:40 +08:00 · 2025-12-05 14:48:40 +08:00 · 00eb5d6c7c
commit 00eb5d6c7c
parent bcb9ccc0ce 4ebfaaf727
7 changed files with 111 additions and 13 deletions
--- 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>
--- a/src/views/admin/home/index.vue
+++ b/src/views/admin/home/index.vue
@ -129,14 +129,14 @@
                            <a-list-item class="faq-item">
                                <a-list-item-meta>
                                    <template #title>
-                                        <a href="javascript:;" class="faq-title" style="color: #999;">{{ item.question }}</a>
+                                        <a :href="item.path" target="_blank" class="faq-title" style="color: #999;">{{ item.question }}</a>
                                    </template>
                                </a-list-item-meta>
                            </a-list-item>
                        </template>
                    </a-list>
                    <div class="more-container">
-                        <a-button type="link" class="more-btn">查看更多问题</a-button>
+                        <a-button type="link" class="more-btn" @click="goToDocument()">查看更多问题</a-button>
                    </div>
                </a-card>
            </a-col>
@ -230,11 +230,14 @@ onBeforeMount(() => {
 })
 // 常见问题列表
 const faqList = ref([
-    { id: 1, question: '如何选择GPU?' },
-    { id: 2, question: '如何上传数据?' },
-    { id: 3, question: '如何开具发票?' },
-    { id: 4, question: '如何成为炼丹会员?' },
+    { id: 1, question: '如何选择GPU?',path:'/document/select' },
+    { id: 2, question: '如何快速开始?',path:'/document/start' },
+    { id: 3, question: '学术资源加速?',path:'/document/study' },
+    { id: 4, question: '容器示例?',path:'/document/summary' },
 ])
+const goToDocument = () => {
+    window.open('/document', '_blank');
+};
 </script>

 <style lang="scss" scoped>
--- a/src/views/document/index.vue
+++ b/src/views/document/index.vue
@ -3,7 +3,7 @@
        <div :class="isHome ? 'gx_layout_header_home' : 'gx_layout_header_noHome'" class="gx_layout_header">
            <div class="logo">GxDL算力云</div>
        </div>
-
+        <div style="height: 60px;width: 100%;"></div>
        <div class="gx_layout_content">
            <div>
                <a-menu id="dddddd" v-model:selectedKeys="selectedKeys" style="width: 256px;height: 100%;" mode="inline"
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@ -85,7 +85,7 @@ watch(() => route.path, () => {
 const leftRoutes = ref([
    { key: '/home', label: '首页' },
    { key: '/market', label: '算力中心' },
-    { key: '/yunmain', label: '云主机' }
+    // { key: '/yunmain', label: '云主机' }
 ])
 const rightRoutes = ref([
    { key: '/document', label: '用户文档' },
--- 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">
--- a/src/views/login/component/code.vue
+++ 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>
--- 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";