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>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Animo</title>
</head>
<body>
<div id="app"></div>
<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>
</html>

54
src/App.vue
View File

@ -21,10 +21,10 @@
</div>
</div>
<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 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"/>
</div>
</transition>
@ -34,7 +34,7 @@
<div id="operable-box">
<RouterView v-if="login" #default="{ Component }">
<transition name="slide-up" mode="out-in">
<component :is="Component" />
<component v-if="contentVisible" :is="Component" />
</transition>
</RouterView>
</div>
@ -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()
}
})
</script>
@ -158,10 +164,10 @@ header {
animation: circle 1s linear infinite;
}
}
.title {
margin: 1rem;
flex: 98;
}
}
.title {
padding: 0 1rem;
flex: 98;
}
&.login {
height: 10vh;

6
src/api/auth.ts
View File

@ -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({

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

@ -2,22 +2,33 @@
<div>
<t-form labelWidth="0">
<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-input v-model="password" placeholder="请输入密码"></t-input>
<t-input
v-model="password"
name="password"
type="password"
placeholder="请输入密码"
@enter="handleLogin"
/>
</t-form-item>
<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
class="login-button"
theme="default"
:disabled="!passkey"
@click="handleUsePasskey"
>使用通行密钥</t-button
>
@click="handleUsePasskey">
使用通行密钥
</t-button>
<t-link @click="handleRegister">没有账号？去注册</t-link>
</t-space>
</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 }
})