diff --git a/XNSimHtml/components/auth-component.js b/XNSimHtml/components/auth-component.js
index 1083e14..33659ca 100644
--- a/XNSimHtml/components/auth-component.js
+++ b/XNSimHtml/components/auth-component.js
@@ -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);
\ No newline at end of file
diff --git a/XNSimHtml/components/user-info.js b/XNSimHtml/components/user-info.js
index e9b1073..b0f2500 100644
--- a/XNSimHtml/components/user-info.js
+++ b/XNSimHtml/components/user-info.js
@@ -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);
}
}
diff --git a/XNSimHtml/main.html b/XNSimHtml/main.html
index 2509b56..26da294 100644
--- a/XNSimHtml/main.html
+++ b/XNSimHtml/main.html
@@ -6,7 +6,6 @@
XNSim - 主页面
-
@@ -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;
- }
@@ -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 || '登录失败，请检查用户名和密码');
}
diff --git a/XNSimHtml/server.js b/XNSimHtml/server.js
index de8a1b3..89ec056 100644
--- a/XNSimHtml/server.js
+++ b/XNSimHtml/server.js
@@ -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', () => {