From 54f620d92f63734a0c919fa5e986af75b6e22880 Mon Sep 17 00:00:00 2001 From: renxiaodong <1344903914@qq.com> Date: Fri, 20 Jun 2025 06:10:15 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/all/login.ts | 8 - src/api/index.ts | 52 +-- src/components/_base/navbar/index.vue | 6 +- src/router/index.ts | 8 +- src/stores/index.ts | 9 +- src/stores/modules/app/index.ts | 1 + src/stores/modules/tab-bar/index.ts | 5 + src/stores/modules/user/index.ts | 41 +-- src/utils/user.ts | 29 ++ .../{ => components}/PuzzleVerification.vue | 0 src/views/components/login/index.vue | 341 +++++++----------- src/views/components/login/style.scss | 115 ++++++ 12 files changed, 328 insertions(+), 287 deletions(-) create mode 100644 src/utils/user.ts rename src/views/components/login/{ => components}/PuzzleVerification.vue (100%) create mode 100644 src/views/components/login/style.scss diff --git a/src/api/all/login.ts b/src/api/all/login.ts index 28de85e..bc2fd4c 100644 --- a/src/api/all/login.ts +++ b/src/api/all/login.ts @@ -1,20 +1,16 @@ import Http from '@/api'; - // 导出一个函数，用于获取登录验证码 export const fetchLoginCaptCha = (params = {}) => { - return Http.post('/v1/sms/login-captcha', params); }; - // 导出一个函数，用于获取验证码 export const fetchAuthorizationsCaptcha = (params = {}) => { // 使用Http.post方法，发送POST请求，请求地址为'/v1/authorizations/captcha'，请求参数为params return Http.post('/v1/authorizations/captcha', params); }; - // 导出一个函数，用于获取授权信息 export const fetchAuthorizations = (params = {}) => { // 使用Http.put方法，向服务器发送PUT请求，获取授权信息 @@ -27,22 +23,18 @@ export const fetchLogOut = (params = {}) => { return Http.put('/v1/authorizations', params); }; - // 导出一个名为fetchProfileInfo的函数，用于获取用户信息 export const fetchProfileInfo = (params = {}) => { // 使用Http.put方法，向/v1/me接口发送put请求，并将params作为参数传递 return Http.put('/v1/me', params); }; - // 导出一个函数，用于获取编辑手机号的验证码 export const fetchEditPhoneCaptcha = (params = {}) => { // 使用Http.put方法，向服务器发送PUT请求，获取编辑手机号的验证码 return Http.put('/v1/sms/update-mobile-captcha', params); }; - export const fetchBindPhone = (params = {}) => { return Http.put('/v1/me/mobile', params); }; - diff --git a/src/api/index.ts b/src/api/index.ts index be83e51..e32ea80 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,32 +1,46 @@ /* * @Author: 田鑫 * @Date: 2023-02-17 11:58:44 - * @LastEditors: 田鑫 - * @LastEditTime: 2023-03-05 19:17:29 + * @LastEditors: Please set LastEditors + * @LastEditTime: 2025-06-20 06:00:54 * @Description: */ import axios from 'axios'; import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; +import { handleUserLogout } from '@/utils/user'; + +const contentType = 'application/json'; +const requestTimeout = 30000; + +const HttpStatusCode = { + OK: 200, + BadRequest: 400, // 请求参数错误 + Unauthorized: 401, // token 无效或过期 + NotFound: 404, + InternalServerError: 500, +}; //* 导出Request类，可以用来自定义传递配置来创建实例 export class Request { //* axios 实例 private instance: AxiosInstance; //* 基础配置 - private baseConfig: AxiosRequestConfig = { baseURL: import.meta.env.EO_API_URL, timeout: 60000 }; + private baseConfig: AxiosRequestConfig = { + baseURL: import.meta.env.EO_API_URL, + timeout: requestTimeout, + headers: { + 'Content-Type': contentType, + }, + }; public constructor(config: AxiosRequestConfig) { this.instance = axios.create(Object.assign(this.baseConfig, config)); this.instance.interceptors.request.use( (config: AxiosRequestConfig) => { - const token = localStorage.getItem('token') as string; - if (token) { - config.headers!.Authorization = token; - } else { - config.headers!.satoken = '123'; - } + const token = localStorage.getItem('accessToken') as string; + config.headers!.Authorization = token; return config; }, (err: any) => { @@ -36,21 +50,17 @@ export class Request { this.instance.interceptors.response.use( (res: AxiosResponse) => { - //* http请求成功 - //* 存入通用response header - let tenanttype = localStorage.getItem('tenanttype') as string; - if (!tenanttype) { - tenanttype = res.headers!.tenanttype; - localStorage.setItem('tenanttype', tenanttype); + const { data } = res; + switch (data.code) { + case HttpStatusCode.OK: + return data; + default: + return Promise.reject(data); } - if (res.data.code === 200) { - return res.data.data; - } - AMessage.error(res.data!.msg); - return Promise.reject(res.data); }, (err: any) => { - // AMessage.error(err.message); + const message = err.response?.data?.message ?? err.message; + AMessage.error(message); // 这里用来处理http常见错误，进行全局提示 return Promise.reject(err.response); }, diff --git a/src/components/_base/navbar/index.vue b/src/components/_base/navbar/index.vue index 2a884cb..641ef25 100644 --- a/src/components/_base/navbar/index.vue +++ b/src/components/_base/navbar/index.vue @@ -2,10 +2,11 @@ import { useAppStore } from '@/stores'; import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon'; import { fetchMenusTree } from '@/api/all'; +import { handleUserLogout } from '@/utils/user'; const lists = ref([]); const router = useRouter(); const clickExit = () => { - router.replace('/login'); + handleUserLogout(); }; const getMenus = async () => { const res = await fetchMenusTree(); @@ -16,7 +17,6 @@ onMounted(() => { }); const appStore = useAppStore(); - function setServerMenu() { appStore.fetchServerMenuConfig(); console.log(appStore.serverMenu); @@ -59,7 +59,7 @@ const handleDopdownClick = (index: any, ind: any) => {
- + 工作台 diff --git a/src/router/index.ts b/src/router/index.ts index 9356416..ebbe776 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,8 +1,8 @@ /* * @Author: 田鑫 * @Date: 2023-03-05 18:14:17 - * @LastEditors: 田鑫 - * @LastEditTime: 2023-03-05 19:20:40 + * @LastEditors: Please set LastEditors + * @LastEditTime: 2025-06-20 05:35:27 * @Description: */ import { createRouter, createWebHistory } from 'vue-router'; @@ -20,7 +20,7 @@ const router = createRouter({ routes: [ { path: '/login', - name: 'login', + name: 'UserLogin', component: () => import('@/views/components/login'), }, { @@ -30,7 +30,7 @@ const router = createRouter({ }, { path: '/', - name: 'dataEngine', + name: 'Home', redirect: '/dataEngine/dataEngine/hotTranslation', children: [...appRoutes, REDIRECT_MAIN, NOT_FOUND_ROUTE], }, diff --git a/src/stores/index.ts b/src/stores/index.ts index 4339b4b..58fa92f 100644 --- a/src/stores/index.ts +++ b/src/stores/index.ts @@ -1,5 +1,10 @@ -const pinia = createPinia(); +/* + * @Author: RenXiaoDong + * @Date: 2025-06-19 01:45:53 + */ +import { createPinia } from 'pinia'; +const store = createPinia(); -export default pinia; +export default store; export * from './modules'; diff --git a/src/stores/modules/app/index.ts b/src/stores/modules/app/index.ts index 5bf0b49..0922c73 100644 --- a/src/stores/modules/app/index.ts +++ b/src/stores/modules/app/index.ts @@ -1,3 +1,4 @@ +import { defineStore } from 'pinia'; import type { AppState, RouteRecordNormalized, NotificationReturn } from './types'; import defaultSettings from '@/config/settings.json'; diff --git a/src/stores/modules/tab-bar/index.ts b/src/stores/modules/tab-bar/index.ts index db8bc64..ee6b24c 100644 --- a/src/stores/modules/tab-bar/index.ts +++ b/src/stores/modules/tab-bar/index.ts @@ -1,3 +1,8 @@ +/* + * @Author: RenXiaoDong + * @Date: 2025-06-19 01:45:53 + */ +import { defineStore } from 'pinia'; import type { TabBarState, TagProps, RouteLocationNormalized } from './types'; import { DEFAULT_ROUTE, DEFAULT_ROUTE_NAME, REDIRECT_ROUTE_NAME } from '@/router/constants'; diff --git a/src/stores/modules/user/index.ts b/src/stores/modules/user/index.ts index 6fa9d89..c3cf6c1 100644 --- a/src/stores/modules/user/index.ts +++ b/src/stores/modules/user/index.ts @@ -1,46 +1,29 @@ -/* - * @Author: 田鑫 - * @Date: 2023-03-05 14:57:17 - * @LastEditors: 田鑫 - * @LastEditTime: 2023-03-05 15:29:15 - * @Description: 用户相关状态 - */ - -type Role = 'ENTERPRISE' | 'PERSON'; +import { defineStore } from 'pinia'; interface UserState { - role: Role; - isLogin: boolean; + token: String; } export const useUserStore = defineStore('user', { state: (): UserState => ({ - role: 'PERSON', - isLogin: false, + token: localStorage.getItem('accessToken') || '', }), - getters: { - userRole(state) { - return state.role; - }, - userIsLogin(state) { - return state.isLogin; - }, - }, + getters: {}, actions: { - setUserRole(role: Role) { - this.role = role; + setToken(token: String) { + const _token = `Bearer ${token}`; + this.token = _token; + localStorage.setItem('accessToken', _token); }, - - setUserLoginStatus(isLogin: boolean) { - this.isLogin = isLogin; + deleteToken() { + this.token = ''; + localStorage.removeItem('accessToken'); }, - async getUserInfo() { // todo 调用获取用户信息接口，当前用mock数据表示 - AMessage.success(`当前用户角色为：ENTERPRISE`) - this.setUserRole('ENTERPRISE'); + // AMessage.success(`当前用户角色为：ENTERPRISE`); }, }, }); diff --git a/src/utils/user.ts b/src/utils/user.ts new file mode 100644 index 0000000..89a97c5 --- /dev/null +++ b/src/utils/user.ts @@ -0,0 +1,29 @@ +/* + * @Author: RenXiaoDong + * @Date: 2025-06-20 05:32:19 + */ +import router from '@/router'; + +import { useUserStore } from '@/stores'; + +// 登录 +export function goUserLogin(query?: any) { + router.push({ name: 'UserLogin', query }); +} + +// 登录处理 +export async function handleUserLogin() { + handleUserHome(); +} + +// 首页 +export function handleUserHome() { + router.push({ name: 'Home' }); +} + +export function handleUserLogout() { + const userStore = useUserStore(); + userStore.deleteToken(); + + goUserLogin(); +} diff --git a/src/views/components/login/PuzzleVerification.vue b/src/views/components/login/components/PuzzleVerification.vue similarity index 100% rename from src/views/components/login/PuzzleVerification.vue rename to src/views/components/login/components/PuzzleVerification.vue diff --git a/src/views/components/login/index.vue b/src/views/components/login/index.vue index c60b96d..d3ba0dc 100644 --- a/src/views/components/login/index.vue +++ b/src/views/components/login/index.vue @@ -1,108 +1,99 @@ + - diff --git a/src/views/components/login/style.scss b/src/views/components/login/style.scss new file mode 100644 index 0000000..65c68ae --- /dev/null +++ b/src/views/components/login/style.scss @@ -0,0 +1,115 @@ +.login-wrap { + .login-bg { + position: fixed; + left: 0; + right: 0; + top: 0; + height: 100%; + text-align: center; + background-image: url('@/assets/img/BG.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + } + .form-link { + color: #211f24; + font-size: 12px; + margin: 0px; + } + + .login-footer { + position: absolute; + bottom: 32px; + left: 50%; + transform: translateX(-50%); + + .text { + font-family: Alibaba PuHuiTi; + font-weight: 400; + font-size: 14px; + line-height: 22px; + letter-spacing: 0%; + color: #939499; + } + } + + :deep(.arco-space-item) { + margin: 0px !important; + } +} + + + +.account-bind-container { + width: 100%; + max-width: 400px; + margin: 0 auto; + display: flex; + + .bind-card { + background-color: var(--color-bg-2); + width: 100%; + flex-direction: column; + align-items: start; + } + + .bind-header { + margin-bottom: 8px; + text-align: left; + } + + .phone-number { + font-size: 14px; + color: var(--color-text-4); + text-align: left; + } + + .account-list { + margin-top: 16px; + + .account-item { + padding: 12px 16px; + margin-bottom: 8px; + background-color: var(--color-bg-2); + border-radius: 4px; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + align-items: center; + } + + .account-item { + padding: 12px 16px; + margin-bottom: 8px; + background-color: var(--color-bg-2); + border-radius: 4px; + cursor: pointer; + transition: all 0.2s ease; + border: 1px solid var(--color-border-2); + box-shadow: 0 2px 4px 0 #b1b2b5; + + &.selected { + border-color: #6d4cfe; + background-color: rgba(109, 76, 254, 0.1); + box-shadow: 0 2px 4px 0 rgba(109, 76, 254, 0.5); + } + } + + .account-item:deep(.arco-list-item-main) { + padding: 0; + } + + :deep(.arco-list-item-actions) { + margin-left: 12px; + } + + :deep(.arco-checkbox) { + margin-right: 0; + } + + :deep(.arco-checkbox-checked .arco-checkbox-mask) { + background-color: #6d4cfe; + border-color: #6d4cfe; + } + } +}