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

Compare commits

base: Leo_Ding:5aecb7df6259724f19c450a46f7e1fb706758a90
Branches Tags
Leo_Ding:main
..
compare: Leo_Ding:11040b100b78368cd495e4b5bac354854635c548
Branches Tags
Leo_Ding:main

No commits in common. "5aecb7df6259724f19c450a46f7e1fb706758a90" and "11040b100b78368cd495e4b5bac354854635c548" have entirely different histories.
5aecb7df62 ... 11040b100b

12 changed files with 73 additions and 209 deletions
Show Stats Expand all files Collapse all files

2
.env.dev
View File

@ -2,5 +2,5 @@
NODE_ENV=development
# api
VITE_API_BASIC="http://10.10.1.29:8888"
VITE_API_BASIC="http://10.10.1.40:8888"

BIN
src/assets/login.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 MiB

BIN
src/assets/weixin.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.9 KiB

5
src/components/SmsCodeInput.vue
View File

@ -1,9 +1,6 @@
<!-- src/components/SmsCodeInput.vue -->
<template>
<a-input v-model:value="innerValue" placeholder="请输入手机号" :disabled="disabled" @change="handleChange">
<template #addonBefore>
<UserOutlined />
</template>
<template #addonAfter>
<div class="sms-code-btn" :class="{ disabled: !canSend }" @click="handleGetCode">
{{ countDown > 0 ? `${countDown}秒后重试` : '获取验证码' }}
@ -14,7 +11,7 @@
<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue';
// Props & Emits
const props = defineProps<{
value?: string

12
src/router/index.ts
View File

@ -1,6 +1,6 @@
// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Layout from "@/components/Layout.vue";
import { Components } from "ant-design-vue/es/date-picker/generatePicker";
const routes: RouteRecordRaw[] = [
@ -204,7 +204,8 @@ const routes: RouteRecordRaw[] = [
{
path: "growthValue",
name: "growthValue",
component: () => import("@/views/admin/growthValue/index.vue"),
component: () =>
import("@/views/admin/growthValue/index.vue"),
},
],
},
@ -254,12 +255,6 @@ const router = createRouter({
});
// ====== 添加全局前置守卫 ======
router.beforeEach((to, from, next) => {
console.log("Navigating to:", to.path);
const list = ["/layout/home","/document/introdution"];
if (list.indexOf(to.path) != -1) {
next();
return;
} else {
const token = localStorage.getItem("token"); // 或从 pinia/vuex 获取
const isLoginPage = to.path === "/login";
if (!token && !isLoginPage) {
@ -272,6 +267,5 @@ router.beforeEach((to, from, next) => {
// 正常访问
next();
}
}
});
export default router;

1
src/utils/index.ts
View File

@ -9,7 +9,6 @@ console.log('All env:', import.meta.env);
const request: AxiosInstance = axios.create({
baseURL: BASE_URL,
timeout: 10000, // 10 秒超时
withCredentials: true, // 跨域请求时发送 cookies
headers: {
'Content-Type': 'application/json',
},

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

@ -165,7 +165,6 @@ const logout = () => {
.gx_layout_content {
// margin-top: 60px;
height: calc(100% - 60px);
min-height: calc(100% - 60px);
background-color: rgba(240, 240, 240, 1);
}

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

@ -1,22 +1,15 @@
<template>
<a-form ref="formRef" :model="formState" name="normal_login" class="login-form" @finish="onFinish"
@finish-failed="onFinishFailed" >
<a-form-item name="phone" :rules="[{ required: true, message: '请输入用户名！' }]">
<a-input v-model:value="formState.phone" placeholder="请输入账号">
<template #addonBefore><UserOutlined /></template>
</a-input>
@finish-failed="onFinishFailed">
<a-form-item label="账号" name="phone" :rules="[{ required: true, message: '请输入用户名！' }]">
<a-input v-model:value="formState.phone" placeholder="请输入账号"/>
</a-form-item>
<!-- 手动控制密码字段的错误状态 -->
<a-form-item name="code" :help="codeHelp" :rules="[{ required: true, message: '请输入密码！' }]">
<a-input-password v-model:value="formState.code" placeholder="请输入密码">
<template #addonBefore><UnlockOutlined /></template>
</a-input-password>
<a-form-item label="密码" name="code" :help="codeHelp" :rules="[{ required: true, message: '请输入密码！' }]">
<a-input-password v-model:value="formState.code" placeholder="请输入密码"/>
</a-form-item>
<a-form-item>
<a-checkbox v-model:checked="formState.remember">我已经阅读并同意<a href="">《用户协议》</a>及<a href="">《隐私政策》</a></a-checkbox>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" block class="login-form-button" :loading="confirmLoading">
<a-button type="primary" html-type="submit" block class="login-form-button">
登 录
</a-button>
</a-form-item>
@ -24,18 +17,17 @@
</template>
<script lang="ts" setup>
import { reactive, ref, shallowRef,onMounted } from 'vue';
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';
import { UserOutlined,UnlockOutlined } from '@ant-design/icons-vue';
import confirm from 'ant-design-vue/es/modal/confirm';
const router = useRouter();
const formRef = ref<FormInstance>();
const checked = ref(false);
const codeValidateStatus = shallowRef<'success' | 'warning' | 'error' | ''>('');
const codeHelp = shallowRef('');
const confirmLoading = ref(false);
interface FormState {
phone: string;
code: string;
@ -45,17 +37,9 @@ interface FormState {
const formState = reactive<FormState>({
phone: '',
code: '',
remember: false,
remember: true,
});
// 页面加载时恢复“记住的用户名”
onMounted(() => {
const savedUsername = localStorage.getItem('savedUsername')
const rememberMe = localStorage.getItem('rememberMe') === 'true'
if (savedUsername) {
formState.phone = savedUsername
formState.remember = rememberMe
}
})
const clearCodeError = () => {
codeValidateStatus.value = '';
codeHelp.value = '';
@ -67,10 +51,6 @@ const setCodeError = (msg: string) => {
};
const onFinish = async (values: FormState) => {
if(!checked.value){
message.warning('请同意用户协议及隐私政策');
return;
}
clearCodeError();
const loginData = {
@ -79,7 +59,6 @@ const onFinish = async (values: FormState) => {
};
formRef.value?.validateFields().then(async () => {
try {
confirmLoading.value = true;
const res: any = await login(loginData);
console.log('登录请求成功:', res);
// 登录成功后，将token存入localStorage
@ -88,14 +67,10 @@ const onFinish = async (values: FormState) => {
throw new Error('登录失败：未返回有效凭证');
}
localStorage.setItem('token', token);
localStorage.setItem('savedUsername', formState.remember ? formState.phone : '');
localStorage.setItem('rememberMe', formState.remember.toString());
const userRes=await fetchUserInfo();
localStorage.setItem('userInfo', JSON.stringify(userRes));
confirmLoading.value = false;
router.push('/layout/home');
} catch (error: any) {
confirmLoading.value = false;
console.error('登录请求失败:', error);
message.error(error || '用户名或密码错误');
}

16
src/views/login/component/code.vue
View File

@ -1,19 +1,12 @@
<template>
<a-form ref="formRef" :model="formState" name="normal_login" class="login-form" @finish="onFinish"
@finish-failed="onFinishFailed">
<a-form-item name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
<a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
<SmsCodeInput v-model:value="formState.phone" />
</a-form-item>
<!-- 手动控制密码字段的错误状态 -->
<a-form-item name="code" :rules="[{ required: true, message: '请输入验证码！' }]">
<a-input v-model:value="formState.code" placeholder="请输入验证码">
<template #addonBefore>
<SafetyCertificateOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item>
<a-checkbox v-model:checked="checked">我已经阅读并同意<a href="">《用户协议》</a>及<a href="">《隐私政策》</a></a-checkbox>
<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">
@ -29,10 +22,9 @@ import { useRouter } from 'vue-router';
import { login, fetchUserInfo } from '@/apis/modules/login';
import { message, type FormInstance } from 'ant-design-vue';
import SmsCodeInput from '@/components/SmsCodeInput.vue';
import { SafetyCertificateOutlined } from '@ant-design/icons-vue';
const router = useRouter();
const formRef = ref<FormInstance>();
const checked = ref(false);
const codeValidateStatus = shallowRef<'success' | 'warning' | 'error' | ''>('');
const codeHelp = shallowRef('');

41
src/views/login/component/register.vue
View File

@ -1,27 +1,17 @@
<template>
<a-form ref="formRef" :model="formState" name="normal_login" class="login-form" @finish="onFinish"
@finish-failed="onFinishFailed" >
<div class="login-content-title">Fast亼算云账号注册</div>
<a-form-item name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
@finish-failed="onFinishFailed" style="margin-top: 45px;">
<a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
<SmsCodeInput v-model:value="formState.phone" />
</a-form-item>
<!-- 手动控制密码字段的错误状态 -->
<a-form-item name="code" :rules="[{ required: true, message: '请输入验证码！' }]">
<a-form-item label="验证码" name="code" :rules="[{ required: true, message: '请输入验证码！' }]">
<a-input v-model:value="formState.code" placeholder="请输入验证码" />
</a-form-item>
<a-form-item name="password" :rules="[{ required: true, message: '请输入8~16位，且包含字母和数字！'},{validator: validatePassword }]">
<a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入8~16位，且包含字母和数字！'},{validator: validatePassword }]">
<a-input-password v-model:value="formState.password" placeholder="请输入密码" />
<span style="font-size: 12px;color: #c9c9c9;">8~16个字符，至少包含字母和数字，不能包含空格</span>
</a-form-item>
<a-form-item name="confirmPassword" :rules="[{ required: true, message: '请输入8~16位，且包含字母和数字！'},{validator: validatePassword }]">
<a-input-password v-model:value="formState.confirmPassword" placeholder="请确认密码" />
</a-form-item>
<a-checkbox v-model:checked="checked">我已经阅读并同意<a href="">《用户协议》</a>及<a href="">《隐私政策》</a></a-checkbox>
<!-- <a-form-item name="inviteCode" :rules="[{ required: true, message: '请输入邀请码！' }]">
<a-input v-model:value="formState.inviteCode" placeholder="请输入邀请码" />
</a-form-item> -->
<a-form-item style="margin-top:20px;margin-bottom: 10px !important;">
<a-form-item>
<a-button type="primary" html-type="submit" block class="login-form-button">
注 册
</a-button>
@ -41,21 +31,17 @@ const formRef = ref<FormInstance>();
const codeValidateStatus = shallowRef<'success' | 'warning' | 'error' | ''>('');
const codeHelp = shallowRef('');
const checked = ref(false);
interface FormState {
phone: string;
code: string;
password: string;
confirmPassword: string;
inviteCode: string;
}
const formState = reactive<FormState>({
phone: '',
code: '',
password: '',
confirmPassword: '',
inviteCode: '',
});
const clearCodeError = () => {
@ -85,18 +71,3 @@ const onFinishFailed = (errorInfo: any) => {
console.log('表单验证失败:', errorInfo);
};
</script>
<style scoped>
.login-content-title {
color: #333;
font-weight: 500;
font-size: 22px;
text-align: center;
letter-spacing: 4px;
padding: 0 0 20px 0;
margin:10px 0 30px 0;
border-bottom: 1px solid #e8e8e8;
}
.ant-form .ant-form-item:last-child{
margin-bottom: 0px !important;
}
</style>

29
src/views/login/component/updatePwd.vue
View File

@ -1,22 +1,15 @@
<template>
<a-form ref="formRef" :model="formState" name="normal_login" class="login-form" @finish="onFinish"
@finish-failed="onFinishFailed">
<div class="login-content-title">找回密码</div>
<a-form-item name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
@finish-failed="onFinishFailed" style="margin-top: 45px;">
<a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
<SmsCodeInput v-model:value="formState.phone" />
</a-form-item>
<!-- 手动控制密码字段的错误状态 -->
<a-form-item name="code" :rules="[{ required: true, message: '请输入验证码！' }]">
<a-form-item label="验证码" name="code" :rules="[{ required: true, message: '请输入验证码！' }]">
<a-input v-model:value="formState.code" placeholder="请输入验证码" />
</a-form-item>
<a-form-item name="password"
:rules="[{ required: true, message: '请输入8~16位，且包含字母和数字！' }, { validator: validatePassword }]">
<a-form-item label="新密码" name="password" :rules="[{ required: true, message: '请输入8~16位，且包含字母和数字！'},{validator: validatePassword }]">
<a-input-password v-model:value="formState.password" placeholder="请输入新密码" />
<span style="font-size: 12px;color: #c9c9c9;">8~16个字符，至少包含字母和数字，不能包含空格</span>
</a-form-item>
<a-form-item name="confirmPassword"
:rules="[{ required: true, message: '请输入8~16位，且包含字母和数字！' }, { validator: validatePassword }]">
<a-input-password v-model:value="formState.confirmPassword" placeholder="请确认新密码" />
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" block class="login-form-button">
@ -43,14 +36,12 @@ interface FormState {
phone: string;
code: string;
password: string;
confirmPassword: string;
}
const formState = reactive<FormState>({
phone: '',
code: '',
password: '',
confirmPassword: '',
});
const clearCodeError = () => {
@ -79,15 +70,3 @@ const onFinishFailed = (errorInfo: any) => {
console.log('表单验证失败:', errorInfo);
};
</script>
<style scoped>
.login-content-title {
color: #333;
font-weight: 500;
font-size: 22px;
text-align: center;
letter-spacing: 4px;
padding: 0 0 20px 0;
margin:10px 0 30px 0;
border-bottom: 1px solid #e8e8e8;
}
</style>

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

@ -1,50 +1,30 @@
<template>
<div class="login-container">
<div class="login-logo">
<div>Fast亼算云</div>
<a-menu v-model:selectedKeys="current" mode="horizontal" style="border-bottom: none;" :items="rightRoutes"
@click="({ key }) => handleMenuClick(key)" />
<span>GPU算力平台</span>
</div>
<div class="login-content">
<div class="login-content-main">
<div class="login-content-title" v-if="currentTag === 'login'">
<span :style="{ color: currentTag === 'login' && state.tabsActiveName === 'account' ? '#000' : '#666' }"
style="cursor: pointer;" @click="state.tabsActiveName = 'account'">密码登录</span>
<span style="margin: 0 10px;color: #666;">|</span>
<span :style="{ color: currentTag === 'login' && state.tabsActiveName === 'code' ? '#000' : '#666' }"
style="cursor: pointer;" @click="state.tabsActiveName = 'code'">手机登录</span>
</div>
<div v-if="currentTag === 'login'">
<Account v-if="currentTag == 'login' && state.tabsActiveName === 'account'" />
<Code v-if="currentTag == 'login' && state.tabsActiveName === 'code'" />
<h4 class="login-content-title">GPU算力管理平台</h4>
<div v-if="currentTag == 'login'">
<a-tabs v-model:activeKey="state.tabsActiveName" size="large">
<a-tab-pane key="account" tab="账号密码登录">
<Account />
</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;">
<div v-if="state.tabsActiveName === 'account'"> <a-checkbox v-model:checked="checked">记住密码</a-checkbox></div>
<div>
<span style="color:#1677ff;cursor: pointer;" @click="currentTag = 'register'">注册</span>
<span style="color: #666666;margin: 0 5px;">|</span>
<span style="color:#1677ff;cursor: pointer;" @click="currentTag = 'updatePwd'">忘记密码</span>
<span style="color:#666;cursor: pointer;" @click="currentTag = 'updatePwd'">忘记密码</span>
</div>
</div>
<div
style="width: 100%;display: flex;align-items: center;justify-content: space-around;margin: 20px 0;gap: 10px;">
<div style="height: 1px;width: 100%;background: #c9c9c9;"></div>
<div style="width: 80px;font-size: 14px;color: rgba(166, 166, 166, 1);">或者</div>
<div style="height: 1px;width: 100%;background: #c9c9c9;"></div>
</div>
<div
style="width: 100%;display: flex;justify-content: center;align-items: center;gap: 10px;cursor: pointer;height: 45px;border-radius:25px; border: 1px solid rgba(229, 229, 229, 1);">
<img src="@/assets/weixin.png" alt="" srcset="" width="20spx">
<span>使用微信扫码登录</span>
</div>
</div>
<div v-if="currentTag == 'register'">
<div v-else-if="currentTag == 'register'">
<div>
<Register />
<div style="text-align: right;">
<span style="color: #666;cursor: pointer;font-size: 14px;" @click="currentTag = 'login'">
已有账号？去 <span style="color: #1677ff;">登录</span></span>
</div>
< 返回</span>
</div>
</div>
<div v-else-if="currentTag == 'updatePwd'">
@ -56,10 +36,9 @@
</div>
</div>
</div>
</div>
<div class="login-copyright">
</div>
</div>
</template>
<script setup lang="ts">
@ -68,20 +47,11 @@ import Account from "@/views/login/component/account.vue";
import Code from "@/views/login/component/code.vue";
import Register from "./component/register.vue";
import UpdatePwd from "./component/updatePwd.vue";
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
// import Mobile from "@/views/login/component/mobile.vue";
// import Scan from "@/views/login/component/scan.vue";
// import { useThemeConfigStateStore } from "@/stores/themeConfig";
// const theme = useThemeConfigStateStore();
const currentTag = ref('login');//login:登录；register:注册；updatePwd:修改密码
const current = ref('');// 当前选中的菜单项
const rightRoutes = ref([
{ key: '/home', label: '首页' },
{ key: '/document', label: '用户文档' },
{ key: '/admin/home', label: '控制台' }
])
const checked = ref(false);
const state = reactive({
tabsActiveName: "account",
isTabPaneShow: true,
@ -95,53 +65,40 @@ const state = reactive({
const onTabsClick = () => {
state.isTabPaneShow = !state.isTabPaneShow;
};
// 点击菜单跳转
const handleMenuClick = (key) => {
if (key === '/document') {
window.open(key, '_blank');
} else {
// 否则按照正常方式在当前标签页跳转
const fullPath = `/layout${key}`;
router.push(fullPath);
}
}
</script>
<style scoped lang="scss">
.login-container {
width: 100%;
height: 100vh;
background: url("@/assets/login.png") no-repeat;
background: url("@/assets/bg-login.png") no-repeat;
background-size: 100% 100%;
.login-logo {
position: absolute;
background-color: rgba(255, 255, 255, 0.2);
top: 0px;
top: 30px;
left: 50%;
height: 50px;
display: flex;
align-items: center;
justify-content:space-between;
font-size: 20px;
color: var(--color-primary);
letter-spacing: 2px;
width: 100%;
padding: 0 20px;
border-bottom: 1px solid #C9C9C9;
width: 90%;
transform: translateX(-50%);
}
.login-content {
border-radius: 15px;
box-shadow: 0px 19px 39px rgba(222, 225, 255, 1);
width: 405px;
width: 500px;
padding: 20px;
position: absolute;
top: 50%;
left: 78%;
left: 80%;
transform: translate(-50%, -50%) translate3d(0, 0, 0);
background-color: rgba(255, 255, 255, 0.99);
border: 5px solid #ddebff;
border-radius: 4px;
transition: height 0.2s linear;
height: 520px;
overflow: hidden;
@ -150,14 +107,15 @@ const handleMenuClick = (key) => {
.login-content-main {
margin: 0 auto;
width:90%;
width: 80%;
.login-content-title {
color: #333;
font-weight: 500;
font-size: 22px;
text-align: center;
letter-spacing: 4px;
margin: 30px 0 45px 0;
margin: 15px 0 30px;
white-space: nowrap;
z-index: 5;
position: relative;