Dace/Animo-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(auth): 添加用户信息获取功能并优化登录流程

Browse Source 
- 新增 getUserInfo API 接口用于获取用户信息
- 在登录成功后调用 getUserInfo 接口获取用户数据
- 使用 Pinia 创建用户状态管理 store
- 优化登录页面表单元素属性和事件绑定
- 调整标题显示逻辑，使用用户数据中的姓名
- 添加页面刷新功能，支持内容区域重新加载
- 禁用页面缩放和手势操作，优化移动端体验
- 修改页面标题为 Animo
- 调整样式和布局，优化视觉效果
This commit is contained in:
Grand-cocoa 2025-11-12 17:31:48 +08:00
parent f5e33a64e7
commit 150742b8a3
5 changed files with 87 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -3,11 +3,31 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Vite App</title> <title>Animo</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
<script>
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
let lastTouchEnd = 0
document.documentElement.addEventListener('touchend', function (event) {
const now = Date.now()
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
document.addEventListener('gesturestart', function (event) {
event.preventDefault();
});
</script>
</body> </body>
</html> </html>

54
src/App.vue
View File

@ -21,10 +21,10 @@
</div> </div>
</div> </div>
<transition name="slide-up" mode="out-in"> <transition name="slide-up" mode="out-in">
<span v-if="showTitle" class="title">你好，{{ name }}</span> <span v-if="showTitle" class="title">你好，{{ user.name }}</span>
</transition> </transition>
<transition name="slide-up" mode="out-in"> <transition name="slide-up" mode="out-in">
<div v-if="showTitle" class="operating-area"> <div v-if="showTitle" class="operating-area" @click="handleRefresh">
<refresh-icon :fill-color='"transparent"' :stroke-color='"currentColor"' :stroke-width="2"/> <refresh-icon :fill-color='"transparent"' :stroke-color='"currentColor"' :stroke-width="2"/>
</div> </div>
</transition> </transition>
@ -34,7 +34,7 @@
<div id="operable-box"> <div id="operable-box">
<RouterView v-if="login" #default="{ Component }"> <RouterView v-if="login" #default="{ Component }">
<transition name="slide-up" mode="out-in"> <transition name="slide-up" mode="out-in">
<component :is="Component" /> <component v-if="contentVisible" :is="Component" />
</transition> </transition>
</RouterView> </RouterView>
</div> </div>
@ -49,6 +49,8 @@ import LoginProcess from '@/components/login/LoginProcess.vue'
import { RefreshIcon } from 'tdesign-icons-vue-next' import { RefreshIcon } from 'tdesign-icons-vue-next'
import Menu from '@/components/Menu.vue' import Menu from '@/components/Menu.vue'
import { getCookie } from '@/utils/cookie.ts' import { getCookie } from '@/utils/cookie.ts'
import { getUserInfo } from '@/api/auth.ts'
import { useUserStore } from '@/stores/user.ts'
const login = ref(false) const login = ref(false)
const weCome = ref(false) const weCome = ref(false)
@ -56,7 +58,6 @@ const hideLoading = ref(false)
const showTitle = ref(false) const showTitle = ref(false)
const passkey = ref(true) const passkey = ref(true)
const name = ref('Amico')
const menuVisible = ref(false) const menuVisible = ref(false)
@ -64,8 +65,22 @@ if (!navigator.credentials) {
passkey.value = false passkey.value = false
} }
const user = ref()
function handleLogin() { function handleLogin() {
login.value = true 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() { function handleMenu() {
@ -74,24 +89,15 @@ function handleMenu() {
} }
} }
const contentVisible = ref(true)
function handleRefresh() {
contentVisible.value = false
setTimeout(() => contentVisible.value = true, 500)
}
onMounted(() => { onMounted(() => {
if (getCookie('satoken')){ if (getCookie('satoken')){
login.value = true handleLogin()
}
})
// 登录动画流程
watch(login, (val) => {
if (val) {
setTimeout(() => {
weCome.value = true
setTimeout(() => {
hideLoading.value = true
setTimeout(() => {
showTitle.value = true
}, 500)
}, 500)
}, 1000)
} }
}) })
</script> </script>
@ -158,10 +164,10 @@ header {
animation: circle 1s linear infinite; animation: circle 1s linear infinite;
} }
} }
.title { }
margin: 1rem; .title {
flex: 98; padding: 0 1rem;
} flex: 98;
} }
&.login { &.login {
height: 10vh; height: 10vh;

6
src/api/auth.ts
View File

@ -14,6 +14,12 @@ export function register(data: any) {
data: data data: data
}) })
} }
export function getUserInfo(){
return request({
url: '/auth/getUserInfo',
method: 'get'
})
}
export function credentials(){ export function credentials(){
return request({ return request({

27
src/components/login/Login.vue
View File

@ -2,22 +2,33 @@
<div> <div>
<t-form labelWidth="0"> <t-form labelWidth="0">
<t-form-item> <t-form-item>
<t-input v-model="username" placeholder="请输入用户名"></t-input> <t-input v-model="username" name="username" type="text" placeholder="请输入用户名" />
</t-form-item> </t-form-item>
<t-form-item> <t-form-item>
<t-input v-model="password" placeholder="请输入密码"></t-input> <t-input
v-model="password"
name="password"
type="password"
placeholder="请输入密码"
@enter="handleLogin"
/>
</t-form-item> </t-form-item>
<t-space class="login-button-box" direction="vertical" size="small"> <t-space class="login-button-box" direction="vertical" size="small">
<t-button class="login-button" theme="primary" :loading="loading" @click="handleLogin" <t-button
>登录</t-button class="login-button"
> theme="primary"
:loading="loading"
type="submit"
@click="handleLogin">
登录
</t-button>
<t-button <t-button
class="login-button" class="login-button"
theme="default" theme="default"
:disabled="!passkey" :disabled="!passkey"
@click="handleUsePasskey" @click="handleUsePasskey">
>使用通行密钥</t-button 使用通行密钥
> </t-button>
<t-link @click="handleRegister">没有账号？去注册</t-link> <t-link @click="handleRegister">没有账号？去注册</t-link>
</t-space> </t-space>
</t-form> </t-form>

10
src/stores/user.ts Normal file
View File

@ -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 }
})