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