feat(store): ✨ 新增登录弹框状态管理

This commit is contained in:
何嘉悦
2025-05-25 10:44:37 +08:00
parent 763fbc5c02
commit 16b59d6ab2
3 changed files with 30 additions and 5 deletions
+5 -1
View File
@@ -2,9 +2,12 @@
import { ref, watch } from 'vue';
import logoPng from '@/assets/images/logo.png';
import SvgIcon from '@/components/SvgIcon/index.vue';
import { useUserStore } from '@/store';
import AccountPassword from './components/FormLogin/AccountPassword.vue';
import QrCodeLogin from './components/QrCodeLogin/index.vue';
const userStore = useUserStore();
// 使用 defineModel 定义双向绑定的 visible(需 Vue 3.4+)
const visible = defineModel<boolean>('visible');
const showMask = ref(false); // 控制遮罩层显示的独立状态
@@ -31,7 +34,8 @@ function toggleLoginMode() {
// 点击遮罩层关闭对话框(触发过渡动画)
function handleMaskClick() {
visible.value = false; // 触发离开动画
// 触发离开动画
userStore.closeLoginDialog();
}
// 过渡动画结束回调
@@ -1,11 +1,15 @@
<!-- LoginBtn 登录按钮 -->
<script setup lang="ts">
import LoginDialog from '@/components/LoginDialog/index.vue';
import { useUserStore } from '@/store';
const isLoginDialogVisible = ref(false);
const userStore = useUserStore();
const isLoginDialogVisible = computed(() => userStore.isLoginDialogVisible);
// 点击登录按钮时调用Store方法打开弹框
function handleClickLogin() {
console.log('handleClickLogin');
isLoginDialogVisible.value = true;
userStore.openLoginDialog();
}
</script>
+18 -1
View File
@@ -25,8 +25,21 @@ export const useUserStore = defineStore(
const logout = async () => {
// 如果需要调用接口,可以在这里调用
clearToken();
router.replace({ name: 'login' });
clearUserInfo();
router.replace({ name: 'chat' });
};
// 新增:登录弹框状态
const isLoginDialogVisible = ref(false);
// 新增:打开弹框方法
const openLoginDialog = () => {
isLoginDialogVisible.value = true;
};
// 新增:关闭弹框方法(可根据需求扩展)
const closeLoginDialog = () => {
isLoginDialogVisible.value = false;
};
return {
@@ -37,6 +50,10 @@ export const useUserStore = defineStore(
setUserInfo,
clearUserInfo,
logout,
// 新增:暴露弹框状态和方法
isLoginDialogVisible,
openLoginDialog,
closeLoginDialog,
};
},
{