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

32
src/router/index.ts
View File

@ -1,6 +1,6 @@
// src/router/index.ts // src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Layout from "@/components/Layout.vue";
import { Components } from "ant-design-vue/es/date-picker/generatePicker"; import { Components } from "ant-design-vue/es/date-picker/generatePicker";
const routes: RouteRecordRaw[] = [ const routes: RouteRecordRaw[] = [
@ -204,7 +204,8 @@ const routes: RouteRecordRaw[] = [
{ {
path: "growthValue", path: "growthValue",
name: "growthValue", name: "growthValue",
component: () => import("@/views/admin/growthValue/index.vue"), component: () =>
import("@/views/admin/growthValue/index.vue"),
}, },
], ],
}, },
@ -254,24 +255,17 @@ const router = createRouter({
}); });
// ====== 添加全局前置守卫 ====== // ====== 添加全局前置守卫 ======
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
console.log("Navigating to:", to.path); const token = localStorage.getItem("token"); // 或从 pinia/vuex 获取
const list = ["/layout/home","/document/introdution"]; const isLoginPage = to.path === "/login";
if (list.indexOf(to.path) != -1) { if (!token && !isLoginPage) {
next(); // 没有 token 且不是去登录页 → 跳转登录
return; next({ path: "/login" });
} else if (token && isLoginPage) {
// 已登录却访问登录页 → 跳转首页（可选）
next({ path: "/layout/home" });
} else { } else {
const token = localStorage.getItem("token"); // 或从 pinia/vuex 获取 // 正常访问
const isLoginPage = to.path === "/login"; next();
if (!token && !isLoginPage) {
// 没有 token 且不是去登录页 → 跳转登录
next({ path: "/login" });
} else if (token && isLoginPage) {
// 已登录却访问登录页 → 跳转首页（可选）
next({ path: "/layout/home" });
} else {
// 正常访问
next();
}
} }
}); });
export default router; 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({ const request: AxiosInstance = axios.create({
baseURL: BASE_URL, baseURL: BASE_URL,
timeout: 10000, // 10 秒超时 timeout: 10000, // 10 秒超时
withCredentials: true, // 跨域请求时发送 cookies
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },

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

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

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

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

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

@ -1,19 +1,12 @@
<template> <template>
<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 name="phone" :rules="[{ required: true, message: '请输入手机号！' }]"> <a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
<SmsCodeInput v-model:value="formState.phone" /> <SmsCodeInput v-model:value="formState.phone" />
</a-form-item> </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-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> </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">
@ -29,10 +22,9 @@ import { useRouter } from 'vue-router';
import { login, fetchUserInfo } from '@/apis/modules/login'; import { login, fetchUserInfo } from '@/apis/modules/login';
import { message, type FormInstance } from 'ant-design-vue'; import { message, type FormInstance } from 'ant-design-vue';
import SmsCodeInput from '@/components/SmsCodeInput.vue'; import SmsCodeInput from '@/components/SmsCodeInput.vue';
import { SafetyCertificateOutlined } from '@ant-design/icons-vue';
const router = useRouter(); const router = useRouter();
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const checked = ref(false);
const codeValidateStatus = shallowRef<'success' | 'warning' | 'error' | ''>(''); const codeValidateStatus = shallowRef<'success' | 'warning' | 'error' | ''>('');
const codeHelp = shallowRef(''); const codeHelp = shallowRef('');

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

@ -1,27 +1,17 @@
<template> <template>
<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" style="margin-top: 45px;">
<div class="login-content-title">Fast亼算云账号注册</div> <a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
<a-form-item name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
<SmsCodeInput v-model:value="formState.phone" /> <SmsCodeInput v-model:value="formState.phone" />
</a-form-item> </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-input v-model:value="formState.code" placeholder="请输入验证码" />
</a-form-item> </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="请输入密码" /> <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>
<a-form-item name="confirmPassword" :rules="[{ required: true, message: '请输入8~16位，且包含字母和数字！'},{validator: validatePassword }]"> <a-form-item>
<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-button type="primary" html-type="submit" block class="login-form-button"> <a-button type="primary" html-type="submit" block class="login-form-button">
注 册 注 册
</a-button> </a-button>
@ -41,21 +31,17 @@ const formRef = ref<FormInstance>();
const codeValidateStatus = shallowRef<'success' | 'warning' | 'error' | ''>(''); const codeValidateStatus = shallowRef<'success' | 'warning' | 'error' | ''>('');
const codeHelp = shallowRef(''); const codeHelp = shallowRef('');
const checked = ref(false);
interface FormState { interface FormState {
phone: string; phone: string;
code: string; code: string;
password: string; password: string;
confirmPassword: string;
inviteCode: string;
} }
const formState = reactive<FormState>({ const formState = reactive<FormState>({
phone: '', phone: '',
code: '', code: '',
password: '', password: '',
confirmPassword: '',
inviteCode: '',
}); });
const clearCodeError = () => { const clearCodeError = () => {
@ -84,19 +70,4 @@ const onFinish = async (values: FormState) => {
const onFinishFailed = (errorInfo: any) => { const onFinishFailed = (errorInfo: any) => {
console.log('表单验证失败:', errorInfo); console.log('表单验证失败:', errorInfo);
}; };
</script> </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>

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

@ -1,22 +1,15 @@
<template> <template>
<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" style="margin-top: 45px;">
<div class="login-content-title">找回密码</div> <a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
<a-form-item name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
<SmsCodeInput v-model:value="formState.phone" /> <SmsCodeInput v-model:value="formState.phone" />
</a-form-item> </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-input v-model:value="formState.code" placeholder="请输入验证码" />
</a-form-item> </a-form-item>
<a-form-item name="password" <a-form-item label="新密码" name="password" :rules="[{ required: true, message: '请输入8~16位，且包含字母和数字！'},{validator: validatePassword }]">
:rules="[{ required: true, message: '请输入8~16位，且包含字母和数字！' }, { validator: validatePassword }]">
<a-input-password v-model:value="formState.password" placeholder="请输入新密码" /> <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-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">
@ -43,14 +36,12 @@ interface FormState {
phone: string; phone: string;
code: string; code: string;
password: string; password: string;
confirmPassword: string;
} }
const formState = reactive<FormState>({ const formState = reactive<FormState>({
phone: '', phone: '',
code: '', code: '',
password: '', password: '',
confirmPassword: '',
}); });
const clearCodeError = () => { const clearCodeError = () => {
@ -78,16 +69,4 @@ const onFinish = async (values: FormState) => {
const onFinishFailed = (errorInfo: any) => { const onFinishFailed = (errorInfo: any) => {
console.log('表单验证失败:', errorInfo); console.log('表单验证失败:', errorInfo);
}; };
</script> </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>

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

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