From 150742b8a373a1984c827fb6cee92c1877910459 Mon Sep 17 00:00:00 2001 From: Grand-cocoa <1075576561@qq.com49111108+grand-cocoa@users.noreply.github.com> Date: Wed, 12 Nov 2025 17:31:48 +0800 Subject: [PATCH] =?UTF-8?q?feat(auth):=20=E6=B7=BB=E5=8A=A0=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E4=BF=A1=E6=81=AF=E8=8E=B7=E5=8F=96=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E7=99=BB=E5=BD=95=E6=B5=81=E7=A8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 getUserInfo API 接口用于获取用户信息 - 在登录成功后调用 getUserInfo 接口获取用户数据 - 使用 Pinia 创建用户状态管理 store - 优化登录页面表单元素属性和事件绑定 - 调整标题显示逻辑，使用用户数据中的姓名 - 添加页面刷新功能，支持内容区域重新加载 - 禁用页面缩放和手势操作，优化移动端体验 - 修改页面标题为 Animo - 调整样式和布局，优化视觉效果 --- index.html | 24 +++++++++++++-- src/App.vue | 54 +++++++++++++++++++--------------- src/api/auth.ts | 6 ++++ src/components/login/Login.vue | 27 ++++++++++++----- src/stores/user.ts | 10 +++++++ 5 files changed, 87 insertions(+), 34 deletions(-) create mode 100644 src/stores/user.ts diff --git a/index.html b/index.html index 9e5fc8f..f8c23b0 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,31 @@ - - Vite App + + Animo
+ diff --git a/src/App.vue b/src/App.vue index 4d67a69..ebf27d2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -21,10 +21,10 @@ - 你好，{{ name }} + 你好，{{ user.name }} -
+
@@ -34,7 +34,7 @@
- +
@@ -49,6 +49,8 @@ import LoginProcess from '@/components/login/LoginProcess.vue' import { RefreshIcon } from 'tdesign-icons-vue-next' import Menu from '@/components/Menu.vue' import { getCookie } from '@/utils/cookie.ts' +import { getUserInfo } from '@/api/auth.ts' +import { useUserStore } from '@/stores/user.ts' const login = ref(false) const weCome = ref(false) @@ -56,7 +58,6 @@ const hideLoading = ref(false) const showTitle = ref(false) const passkey = ref(true) -const name = ref('Amico') const menuVisible = ref(false) @@ -64,8 +65,22 @@ if (!navigator.credentials) { passkey.value = false } +const user = ref() function handleLogin() { login.value = true + getUserInfo().then((x: any) => { + if (x.code === 200){ + useUserStore().setUser(x.data) + user.value = x.data + weCome.value = true + setTimeout(() => { + hideLoading.value = true + setTimeout(() => { + showTitle.value = true + }, 500) + }, 500) + } + }) } function handleMenu() { @@ -74,24 +89,15 @@ function handleMenu() { } } +const contentVisible = ref(true) +function handleRefresh() { + contentVisible.value = false + setTimeout(() => contentVisible.value = true, 500) +} + onMounted(() => { if (getCookie('satoken')){ - login.value = true - } -}) - -// 登录动画流程 -watch(login, (val) => { - if (val) { - setTimeout(() => { - weCome.value = true - setTimeout(() => { - hideLoading.value = true - setTimeout(() => { - showTitle.value = true - }, 500) - }, 500) - }, 1000) + handleLogin() } }) @@ -158,10 +164,10 @@ header { animation: circle 1s linear infinite; } } - .title { - margin: 1rem; - flex: 98; - } + } + .title { + padding: 0 1rem; + flex: 98; } &.login { height: 10vh; diff --git a/src/api/auth.ts b/src/api/auth.ts index 0dc98e9..2eeac47 100644 --- a/src/api/auth.ts +++ b/src/api/auth.ts @@ -14,6 +14,12 @@ export function register(data: any) { data: data }) } +export function getUserInfo(){ + return request({ + url: '/auth/getUserInfo', + method: 'get' + }) +} export function credentials(){ return request({ diff --git a/src/components/login/Login.vue b/src/components/login/Login.vue index f26c9fa..e1443c6 100644 --- a/src/components/login/Login.vue +++ b/src/components/login/Login.vue @@ -2,22 +2,33 @@
- + - + diff --git a/src/stores/user.ts b/src/stores/user.ts new file mode 100644 index 0000000..88d89d1 --- /dev/null +++ b/src/stores/user.ts @@ -0,0 +1,10 @@ +import { defineStore } from 'pinia' +import { ref } from 'vue' + +export const useUserStore = defineStore('userStore', () => { + const user = ref(null) + function setUser(userData: any) { + user.value = userData + } + return { user, setUser } +})