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

.env.dev

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

src/components/SmsCodeInput.vue

@@ -1,6 +1,9 @@
 <!-- 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}秒后重试` : '获取验证码' }}
@@ -11,7 +14,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

src/router/index.ts

@@ -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,8 +204,7 @@ const routes: RouteRecordRaw[] = [
           {
             path: "growthValue",
             name: "growthValue",
-            component: () =>
-              import("@/views/admin/growthValue/index.vue"),
+            component: () => import("@/views/admin/growthValue/index.vue"),
           },
         ],
       },
@@ -255,17 +254,24 @@ const router = createRouter({
 });
 // ====== 添加全局前置守卫 ======
 router.beforeEach((to, from, next) => {
-  const token = localStorage.getItem("token"); // 或从 pinia/vuex 获取
-  const isLoginPage = to.path === "/login";
-  if (!token && !isLoginPage) {
-    // 没有 token 且不是去登录页 → 跳转登录
-    next({ path: "/login" });
-  } else if (token && isLoginPage) {
-    // 已登录却访问登录页 → 跳转首页（可选）
-    next({ path: "/layout/home" });
-  } else {
-    // 正常访问
+  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) {
+      // 没有 token 且不是去登录页 → 跳转登录
+      next({ path: "/login" });
+    } else if (token && isLoginPage) {
+      // 已登录却访问登录页 → 跳转首页（可选）
+      next({ path: "/layout/home" });
+    } else {
+      // 正常访问
+      next();
+    }
   }
 });
 export default router;

src/utils/index.ts

@@ -9,6 +9,7 @@ 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',
   },

src/views/layout/index.vue

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

src/views/login/component/account.vue

@@ -1,15 +1,22 @@
 <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="请输入账号"/>
+    @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>
     </a-form-item>
     <!-- 手动控制密码字段的错误状态 -->
-    <a-form-item label="密码" name="code" :help="codeHelp" :rules="[{ required: true, message: '请输入密码！' }]">
-      <a-input-password v-model:value="formState.code" placeholder="请输入密码"/>
+    <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>
     <a-form-item>
-      <a-button type="primary" html-type="submit" block class="login-form-button">
+     <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>
     </a-form-item>
@@ -17,17 +24,18 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, shallowRef } from 'vue';
+import { reactive, ref, shallowRef,onMounted } 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;
@@ -37,9 +45,17 @@ interface FormState {
 const formState = reactive<FormState>({
   phone: '',
   code: '',
-  remember: true,
+  remember: false,
 });
-
+// 页面加载时恢复“记住的用户名”
+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 = '';
@@ -51,6 +67,10 @@ const setCodeError = (msg: string) => {
 };
 
 const onFinish = async (values: FormState) => {
+  if(!checked.value){
+    message.warning('请同意用户协议及隐私政策');
+    return;
+  }
   clearCodeError();
 
   const loginData = {
@@ -59,6 +79,7 @@ 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
@@ -67,10 +88,14 @@ 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 || '用户名或密码错误');
     }

src/views/login/component/code.vue

@@ -1,12 +1,19 @@
 <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-form-item name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
       <SmsCodeInput v-model:value="formState.phone" />
     </a-form-item>
     <!-- 手动控制密码字段的错误状态 -->
-    <a-form-item label="验证码" name="code" :rules="[{ required: true, message: '请输入验证码！' }]">
-      <a-input v-model:value="formState.code" placeholder="请输入验证码" />
+    <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>
     <a-form-item>
       <a-button type="primary" html-type="submit" block class="login-form-button">
@@ -22,9 +29,10 @@ 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('');
 

src/views/login/component/register.vue

@@ -1,17 +1,27 @@
 <template>
   <a-form ref="formRef" :model="formState" name="normal_login" class="login-form" @finish="onFinish"
-    @finish-failed="onFinishFailed" style="margin-top: 45px;">
-    <a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
+    @finish-failed="onFinishFailed" >
+      <div class="login-content-title">Fast亼算云账号注册</div>
+    <a-form-item  name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
       <SmsCodeInput v-model:value="formState.phone" />
     </a-form-item>
     <!-- 手动控制密码字段的错误状态 -->
-    <a-form-item label="验证码" name="code" :rules="[{ required: true, message: '请输入验证码！' }]">
+    <a-form-item  name="code" :rules="[{ required: true, message: '请输入验证码！' }]">
       <a-input v-model:value="formState.code" placeholder="请输入验证码" />
     </a-form-item>
-    <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入8~16位，且包含字母和数字！'},{validator: validatePassword }]">
+    <a-form-item 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>
+     <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-button type="primary" html-type="submit" block class="login-form-button">
         注 册
       </a-button>
@@ -31,17 +41,21 @@ 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 = () => {
@@ -71,3 +85,18 @@ 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>

src/views/login/component/updatePwd.vue

@@ -1,15 +1,22 @@
 <template>
   <a-form ref="formRef" :model="formState" name="normal_login" class="login-form" @finish="onFinish"
-    @finish-failed="onFinishFailed" style="margin-top: 45px;">
-    <a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
+    @finish-failed="onFinishFailed">
+    <div class="login-content-title">找回密码</div>
+    <a-form-item name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
       <SmsCodeInput v-model:value="formState.phone" />
     </a-form-item>
     <!-- 手动控制密码字段的错误状态 -->
-    <a-form-item label="验证码" name="code" :rules="[{ required: true, message: '请输入验证码！' }]">
+    <a-form-item  name="code" :rules="[{ required: true, message: '请输入验证码！' }]">
       <a-input v-model:value="formState.code" placeholder="请输入验证码" />
     </a-form-item>
-    <a-form-item label="新密码" name="password" :rules="[{ required: true, message: '请输入8~16位，且包含字母和数字！'},{validator: validatePassword }]">
+    <a-form-item  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">
@@ -36,12 +43,14 @@ interface FormState {
   phone: string;
   code: string;
   password: string;
+  confirmPassword: string;
 }
 
 const formState = reactive<FormState>({
   phone: '',
   code: '',
   password: '',
+  confirmPassword: '',
 });
 
 const clearCodeError = () => {
@@ -70,3 +79,15 @@ 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>

src/views/login/index.vue

@@ -1,34 +1,54 @@
 <template>
   <div class="login-container">
     <div class="login-logo">
-      <span>GPU算力平台</span>
+      <div>Fast亼算云</div>
+      <a-menu v-model:selectedKeys="current" mode="horizontal" style="border-bottom: none;" :items="rightRoutes"
+        @click="({ key }) => handleMenuClick(key)" />
     </div>
     <div class="login-content">
       <div class="login-content-main">
-        <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 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'" />
+
           <div style="width: 100%;display: flex;justify-content: space-between;font-size: 14px;">
-            <span style="color:#1677ff;cursor: pointer;" @click="currentTag = 'register'">注册</span>
-            <span style="color:#666;cursor: pointer;" @click="currentTag = 'updatePwd'">忘记密码</span>
+            <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>
+            </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-else-if="currentTag == 'register'">
+        <div v-if="currentTag == 'register'">
           <div>
             <Register />
-            <span style="color: #666;cursor: pointer;font-size: 14px;" @click="currentTag = 'login'">
-              < 返回</span>
+            <div style="text-align: right;">
+              <span style="color: #666;cursor: pointer;font-size: 14px;" @click="currentTag = 'login'">
+                已有账号？去 <span style="color: #1677ff;">登录</span></span>
+            </div>
           </div>
         </div>
         <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 />
             <span style="color: #666;cursor: pointer;font-size: 14px;" @click="currentTag = 'login'">
               < 返回</span>
@@ -36,9 +56,10 @@
         </div>
       </div>
     </div>
-    <div class="login-copyright">
-    </div>
   </div>
+  <div class="login-copyright">
+  </div>
+
 </template>
 
 <script setup lang="ts">
@@ -47,11 +68,20 @@ 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,
@@ -65,40 +95,53 @@ 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/bg-login.png") no-repeat;
+  background: url("@/assets/login.png") no-repeat;
   background-size: 100% 100%;
 
   .login-logo {
     position: absolute;
-    top: 30px;
+    background-color: rgba(255, 255, 255, 0.2);
+    top: 0px;
     left: 50%;
     height: 50px;
     display: flex;
     align-items: center;
+    justify-content:space-between;
     font-size: 20px;
     color: var(--color-primary);
     letter-spacing: 2px;
-    width: 90%;
+    width: 100%;
+    padding: 0 20px;
+    border-bottom: 1px solid #C9C9C9;
     transform: translateX(-50%);
   }
 
   .login-content {
-    width: 500px;
+    border-radius: 15px;
+    box-shadow: 0px 19px 39px rgba(222, 225, 255, 1);
+    width: 405px;
     padding: 20px;
     position: absolute;
     top: 50%;
-    left: 80%;
+    left: 78%;
     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;
@@ -107,15 +150,14 @@ const onTabsClick = () => {
 
     .login-content-main {
       margin: 0 auto;
-      width: 80%;
-
+      width:90%;
       .login-content-title {
         color: #333;
         font-weight: 500;
         font-size: 22px;
         text-align: center;
         letter-spacing: 4px;
-        margin: 15px 0 30px;
+        margin: 30px 0 45px 0;
         white-space: nowrap;
         z-index: 5;
         position: relative;