修复了登录和退出的页面切换问题
This commit is contained in:
parent
af9e3137b8
commit
d19559fb4d
@ -434,6 +434,27 @@ class AuthComponent extends HTMLElement {
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
reset() {
|
||||
// 重置表单
|
||||
const loginForm = this.shadowRoot.getElementById('loginFormElement');
|
||||
const registerForm = this.shadowRoot.getElementById('registerFormElement');
|
||||
if (loginForm) loginForm.reset();
|
||||
if (registerForm) registerForm.reset();
|
||||
|
||||
// 切换到登录表单
|
||||
const loginToggle = this.shadowRoot.getElementById('loginToggle');
|
||||
const registerToggle = this.shadowRoot.getElementById('registerToggle');
|
||||
const loginFormPanel = this.shadowRoot.getElementById('loginForm');
|
||||
const registerFormPanel = this.shadowRoot.getElementById('registerForm');
|
||||
|
||||
if (loginToggle && registerToggle && loginFormPanel && registerFormPanel) {
|
||||
loginToggle.classList.add('active');
|
||||
registerToggle.classList.remove('active');
|
||||
loginFormPanel.classList.add('active');
|
||||
registerFormPanel.classList.remove('active');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('auth-component', AuthComponent);
|
||||
@ -328,8 +328,29 @@ class UserInfo extends HTMLElement {
|
||||
|
||||
logout() {
|
||||
localStorage.removeItem('userInfo');
|
||||
document.getElementById('authContainer').style.display = 'block';
|
||||
document.getElementById('mainContainer').style.display = 'none';
|
||||
localStorage.removeItem('authToken');
|
||||
|
||||
// 获取认证容器和主容器
|
||||
const authContainer = document.getElementById('authContainer');
|
||||
const mainContainer = document.getElementById('mainContainer');
|
||||
|
||||
// 先隐藏主容器
|
||||
mainContainer.classList.remove('visible');
|
||||
// 等待过渡效果完成
|
||||
setTimeout(() => {
|
||||
mainContainer.style.display = 'none';
|
||||
// 显示认证容器
|
||||
authContainer.style.display = 'block';
|
||||
// 等待一帧以确保display:block生效
|
||||
requestAnimationFrame(() => {
|
||||
authContainer.classList.add('visible');
|
||||
// 重置认证组件
|
||||
const authComponent = document.querySelector('auth-component');
|
||||
if (authComponent) {
|
||||
authComponent.reset();
|
||||
}
|
||||
});
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
<title>XNSim - 主页面</title>
|
||||
<link rel="icon" type="image/png" href="assets/icons/XNSim.png">
|
||||
<link rel="shortcut icon" type="image/png" href="assets/icons/XNSim.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="components/auth-component.js"></script>
|
||||
<script src="components/main-toolbar.js"></script>
|
||||
<script src="components/sub-toolbar.js"></script>
|
||||
@ -112,9 +111,27 @@
|
||||
|
||||
/* 主容器样式 */
|
||||
.main-container {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.main-container.visible {
|
||||
display: block !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 认证容器样式 */
|
||||
#authContainer {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
#authContainer.visible {
|
||||
display: block !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 内容头部样式 */
|
||||
@ -203,13 +220,6 @@
|
||||
.toast.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#authContainer, #mainContainer {
|
||||
display: none;
|
||||
}
|
||||
#authContainer.visible, #mainContainer.visible {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -266,10 +276,18 @@
|
||||
const checkAuth = () => {
|
||||
const userInfo = localStorage.getItem('userInfo');
|
||||
if (userInfo) {
|
||||
// 先初始化主页面
|
||||
initializeMainPage();
|
||||
|
||||
authContainer.classList.remove('visible');
|
||||
mainContainer.classList.add('visible');
|
||||
// 初始化主页面
|
||||
initializeMainPage();
|
||||
|
||||
// 触发一个自定义事件，通知其他组件登录成功
|
||||
const loginSuccessEvent = new CustomEvent('login-success', {
|
||||
detail: { user: JSON.parse(userInfo) }
|
||||
});
|
||||
document.dispatchEvent(loginSuccessEvent);
|
||||
|
||||
} else {
|
||||
authContainer.classList.add('visible');
|
||||
mainContainer.classList.remove('visible');
|
||||
@ -277,8 +295,30 @@
|
||||
};
|
||||
|
||||
// 初始化主页面
|
||||
function initializeMainPage() {
|
||||
async function initializeMainPage() {
|
||||
// 确保所有组件都已经加载
|
||||
const components = [
|
||||
'main-toolbar',
|
||||
'sub-toolbar',
|
||||
'tabs-container',
|
||||
'content-area'
|
||||
];
|
||||
|
||||
// 等待所有组件加载完成
|
||||
await Promise.all(components.map(component => {
|
||||
return new Promise(resolve => {
|
||||
if (customElements.get(component)) {
|
||||
resolve();
|
||||
} else {
|
||||
customElements.whenDefined(component).then(resolve);
|
||||
}
|
||||
});
|
||||
}));
|
||||
|
||||
// 初始化时创建概览标签页并加载概览内容
|
||||
const tabsContainer = document.querySelector('tabs-container');
|
||||
const contentArea = document.querySelector('content-area');
|
||||
|
||||
tabsContainer.createTab('overview', '概览', 'dashboard', '主页', 'home');
|
||||
contentArea.loadContent('overview');
|
||||
|
||||
@ -355,8 +395,24 @@
|
||||
tabsContainer.clearAllTabs();
|
||||
// 显示退出成功提示
|
||||
showToast('已安全退出登录');
|
||||
// 重新检查认证状态，这会触发返回登录页面
|
||||
checkAuth();
|
||||
|
||||
// 先隐藏主容器
|
||||
mainContainer.classList.remove('visible');
|
||||
// 等待过渡效果完成
|
||||
setTimeout(() => {
|
||||
mainContainer.style.display = 'none';
|
||||
// 显示认证容器
|
||||
authContainer.style.display = 'block';
|
||||
// 等待一帧以确保display:block生效
|
||||
requestAnimationFrame(() => {
|
||||
authContainer.classList.add('visible');
|
||||
// 重置认证组件
|
||||
const authComponent = document.querySelector('auth-component');
|
||||
if (authComponent) {
|
||||
authComponent.reset();
|
||||
}
|
||||
});
|
||||
}, 300);
|
||||
break;
|
||||
}
|
||||
}
|
||||
@ -581,10 +637,37 @@
|
||||
if (result.success) {
|
||||
localStorage.setItem('userInfo', JSON.stringify(result.user));
|
||||
showToast(`欢迎回来，${result.user.username}！`);
|
||||
authContainer.classList.remove('visible');
|
||||
|
||||
// 先显示主容器
|
||||
mainContainer.style.display = 'block';
|
||||
// 等待一帧以确保display:block生效
|
||||
await new Promise(resolve => requestAnimationFrame(resolve));
|
||||
// 添加visible类触发过渡效果
|
||||
mainContainer.classList.add('visible');
|
||||
|
||||
// 等待过渡效果完成
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
|
||||
// 隐藏认证容器
|
||||
authContainer.classList.remove('visible');
|
||||
// 等待过渡效果完成
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
authContainer.style.display = 'none';
|
||||
|
||||
// 初始化主页面
|
||||
initializeMainPage();
|
||||
await initializeMainPage();
|
||||
|
||||
// 更新用户信息组件
|
||||
const userInfo = document.querySelector('user-info');
|
||||
if (userInfo) {
|
||||
userInfo.updateUserInfo(result.user);
|
||||
}
|
||||
|
||||
// 触发登录成功事件
|
||||
const loginSuccessEvent = new CustomEvent('login-success', {
|
||||
detail: { user: result.user }
|
||||
});
|
||||
document.dispatchEvent(loginSuccessEvent);
|
||||
} else {
|
||||
showToast(result.message || '登录失败，请检查用户名和密码');
|
||||
}
|
||||
|
||||
@ -38,14 +38,14 @@ if (!xnCorePath) {
|
||||
app.use(bodyParser.json());
|
||||
app.use(bodyParser.urlencoded({ extended: true }));
|
||||
|
||||
// 静态文件服务 - 放在根路径处理之前
|
||||
app.use(express.static(__dirname));
|
||||
|
||||
// 根路径直接返回main.html
|
||||
app.get('/', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'main.html'));
|
||||
});
|
||||
|
||||
// 静态文件服务 - 放在根路径处理之后
|
||||
app.use(express.static(__dirname));
|
||||
|
||||
// 监听进程退出事件
|
||||
process.on('exit', performCleanup);
|
||||
process.on('SIGINT', () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user