jinchao/XNSim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复了登录和退出的页面切换问题

Browse Source
This commit is contained in:
jinchao 2025-05-12 09:11:32 +08:00
parent af9e3137b8
commit d19559fb4d
4 changed files with 145 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
XNSimHtml/components/auth-component.js
View File

@ -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); customElements.define('auth-component', AuthComponent);

25
XNSimHtml/components/user-info.js
View File

@ -328,8 +328,29 @@ class UserInfo extends HTMLElement {
logout() { logout() {
localStorage.removeItem('userInfo'); localStorage.removeItem('userInfo');
document.getElementById('authContainer').style.display = 'block'; localStorage.removeItem('authToken');
document.getElementById('mainContainer').style.display = 'none';
// 获取认证容器和主容器
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);
} }
} }

113
XNSimHtml/main.html
View File

@ -6,7 +6,6 @@
<title>XNSim - 主页面</title> <title>XNSim - 主页面</title>
<link rel="icon" type="image/png" href="assets/icons/XNSim.png"> <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="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/auth-component.js"></script>
<script src="components/main-toolbar.js"></script> <script src="components/main-toolbar.js"></script>
<script src="components/sub-toolbar.js"></script> <script src="components/sub-toolbar.js"></script>
@ -112,9 +111,27 @@
/* 主容器样式 */ /* 主容器样式 */
.main-container { .main-container {
display: none;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
overflow: hidden; 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 { .toast.show {
opacity: 1; opacity: 1;
} }
#authContainer, #mainContainer {
display: none;
}
#authContainer.visible, #mainContainer.visible {
display: block;
}
</style> </style>
</head> </head>
<body> <body>
@ -266,10 +276,18 @@
const checkAuth = () => { const checkAuth = () => {
const userInfo = localStorage.getItem('userInfo'); const userInfo = localStorage.getItem('userInfo');
if (userInfo) { if (userInfo) {
// 先初始化主页面
initializeMainPage();
authContainer.classList.remove('visible'); authContainer.classList.remove('visible');
mainContainer.classList.add('visible'); mainContainer.classList.add('visible');
// 初始化主页面
initializeMainPage(); // 触发一个自定义事件，通知其他组件登录成功
const loginSuccessEvent = new CustomEvent('login-success', {
detail: { user: JSON.parse(userInfo) }
});
document.dispatchEvent(loginSuccessEvent);
} else { } else {
authContainer.classList.add('visible'); authContainer.classList.add('visible');
mainContainer.classList.remove('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'); tabsContainer.createTab('overview', '概览', 'dashboard', '主页', 'home');
contentArea.loadContent('overview'); contentArea.loadContent('overview');
@ -355,8 +395,24 @@
tabsContainer.clearAllTabs(); tabsContainer.clearAllTabs();
// 显示退出成功提示 // 显示退出成功提示
showToast('已安全退出登录'); 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; break;
} }
} }
@ -581,10 +637,37 @@
if (result.success) { if (result.success) {
localStorage.setItem('userInfo', JSON.stringify(result.user)); localStorage.setItem('userInfo', JSON.stringify(result.user));
showToast(`欢迎回来，${result.user.username}！`); 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'); 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 { } else {
showToast(result.message || '登录失败，请检查用户名和密码'); showToast(result.message || '登录失败，请检查用户名和密码');
} }

6
XNSimHtml/server.js
View File

@ -38,14 +38,14 @@ if (!xnCorePath) {
app.use(bodyParser.json()); app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.urlencoded({ extended: true }));
// 静态文件服务 - 放在根路径处理之前
app.use(express.static(__dirname));
// 根路径直接返回main.html // 根路径直接返回main.html
app.get('/', (req, res) => { app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'main.html')); res.sendFile(path.join(__dirname, 'main.html'));
}); });
// 静态文件服务 - 放在根路径处理之后
app.use(express.static(__dirname));
// 监听进程退出事件 // 监听进程退出事件
process.on('exit', performCleanup); process.on('exit', performCleanup);
process.on('SIGINT', () => { process.on('SIGINT', () => {