Leo_Ding/GPU_Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
qiuyuan 2025-12-05 14:48:40 +08:00
commit 00eb5d6c7c
7 changed files with 111 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title> <title>GxDL算力云</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

15
src/views/admin/home/index.vue
View File

@ -129,14 +129,14 @@
<a-list-item class="faq-item"> <a-list-item class="faq-item">
<a-list-item-meta> <a-list-item-meta>
<template #title> <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> </template>
</a-list-item-meta> </a-list-item-meta>
</a-list-item> </a-list-item>
</template> </template>
</a-list> </a-list>
<div class="more-container"> <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> </div>
</a-card> </a-card>
</a-col> </a-col>
@ -230,11 +230,14 @@ onBeforeMount(() => {
}) })
// 常见问题列表 // 常见问题列表
const faqList = ref([ const faqList = ref([
{ id: 1, question: '如何选择GPU?' }, { id: 1, question: '如何选择GPU?',path:'/document/select' },
{ id: 2, question: '如何上传数据?' }, { id: 2, question: '如何快速开始?',path:'/document/start' },
{ id: 3, question: '如何开具发票?' }, { id: 3, question: '学术资源加速?',path:'/document/study' },
{ id: 4, question: '如何成为炼丹会员?' }, { id: 4, question: '容器示例?',path:'/document/summary' },
]) ])
const goToDocument = () => {
window.open('/document', '_blank');
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

2
src/views/document/index.vue
View File

@ -3,7 +3,7 @@
<div :class="isHome ? 'gx_layout_header_home' : 'gx_layout_header_noHome'" class="gx_layout_header"> <div :class="isHome ? 'gx_layout_header_home' : 'gx_layout_header_noHome'" class="gx_layout_header">
<div class="logo">GxDL算力云</div> <div class="logo">GxDL算力云</div>
</div> </div>
<div style="height: 60px;width: 100%;"></div>
<div class="gx_layout_content"> <div class="gx_layout_content">
<div> <div>
<a-menu id="dddddd" v-model:selectedKeys="selectedKeys" style="width: 256px;height: 100%;" mode="inline" <a-menu id="dddddd" v-model:selectedKeys="selectedKeys" style="width: 256px;height: 100%;" mode="inline"

2
src/views/layout/index.vue
View File

@ -85,7 +85,7 @@ watch(() => route.path, () => {
const leftRoutes = ref([ const leftRoutes = ref([
{ key: '/home', label: '首页' }, { key: '/home', label: '首页' },
{ key: '/market', label: '算力中心' }, { key: '/market', label: '算力中心' },
{ key: '/yunmain', label: '云主机' } // { key: '/yunmain', label: '云主机' }
]) ])
const rightRoutes = ref([ const rightRoutes = ref([
{ key: '/document', label: '用户文档' }, { key: '/document', label: '用户文档' },

4
src/views/login/component/account.vue
View File

@ -2,11 +2,11 @@
<a-form ref="formRef" :model="formState" name="normal_login" class="login-form" @finish="onFinish" <a-form ref="formRef" :model="formState" name="normal_login" class="login-form" @finish="onFinish"
@finish-failed="onFinishFailed"> @finish-failed="onFinishFailed">
<a-form-item label="账号" name="phone" :rules="[{ required: true, message: '请输入用户名！' }]"> <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>
<!-- 手动控制密码字段的错误状态 --> <!-- 手动控制密码字段的错误状态 -->
<a-form-item label="密码" name="code" :help="codeHelp" :rules="[{ required: true, message: '请输入密码！' }]"> <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-form-item> <a-form-item>
<a-button type="primary" html-type="submit" block class="login-form-button"> <a-button type="primary" html-type="submit" block class="login-form-button">

88
src/views/login/component/code.vue Normal file
View File

@ -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>

11
src/views/login/index.vue
View File

@ -8,11 +8,17 @@
<h4 class="login-content-title">GPU算力管理平台</h4> <h4 class="login-content-title">GPU算力管理平台</h4>
<div> <div>
<a-tabs v-model:activeKey="state.tabsActiveName" size="large"> <a-tabs v-model:activeKey="state.tabsActiveName" size="large">
<a-tab-pane key="account" tab="登录"> <a-tab-pane key="account" tab="账号密码登录">
<Account /> <Account />
</a-tab-pane> </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> </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> </div>
</div> </div>
@ -24,6 +30,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, computed } from "vue"; import { reactive, computed } from "vue";
import Account from "@/views/login/component/account.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 Mobile from "@/views/login/component/mobile.vue";
// import Scan from "@/views/login/component/scan.vue"; // import Scan from "@/views/login/component/scan.vue";
// import { useThemeConfigStateStore } from "@/stores/themeConfig"; // import { useThemeConfigStateStore } from "@/stores/themeConfig";