From 5fc5706c3aeb4e4db1676a14a6ec5e2e835217a2 Mon Sep 17 00:00:00 2001 From: shuaiplus <2327005759@qq.com> Date: Sun, 25 May 2025 14:47:41 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E7=99=BB=E5=BD=95=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=EF=BC=8C=E5=8A=A8=E6=80=81=E7=94=9F=E6=88=90HTML?= =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/css/form-animation.css | 2 +- client/index.html | 26 +++++------------------ client/js/main.js | 10 ++++++--- client/js/ui.js | 39 ++++++++++++++++++++++++++++++++--- 4 files changed, 49 insertions(+), 28 deletions(-) diff --git a/client/css/form-animation.css b/client/css/form-animation.css index 4d5fea0..b7da935 100644 --- a/client/css/form-animation.css +++ b/client/css/form-animation.css @@ -14,7 +14,7 @@ display: inline-block; font-size: 1.1rem; color: #888; - transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + transition: 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55); min-width: 5px; } diff --git a/client/index.html b/client/index.html index af842bb..d3cfa83 100644 --- a/client/index.html +++ b/client/index.html @@ -9,23 +9,9 @@

Enter a Node

-
- - -
- - -
- - -
- + + +
-
-
- - +
+ \ No newline at end of file diff --git a/client/js/main.js b/client/js/main.js index 8c3dde2..e486edc 100644 --- a/client/js/main.js +++ b/client/js/main.js @@ -50,15 +50,16 @@ import { // 从 ui.js 中导入 UI 界面相关的功能 // Import user interface functions from ui.js -import { - renderUserList, // 渲染用户列表 / Render user list +import { renderUserList, // 渲染用户列表 / Render user list renderMainHeader, // 渲染主标题栏 / Render main header setupMoreBtnMenu, // 设置更多按钮的下拉菜单 / Setup "more" button menu preventSpaceInput, // 防止输入空格 / Prevent space input in form fields loginFormHandler, // 登录表单提交处理器 / Login form handler openLoginModal, // 打开登录窗口 / Open login modal setupTabs, // 设置页面标签切换 / Setup tab switching - autofillRoomPwd // 自动填充房间密码 / Autofill room password + autofillRoomPwd, // 自动填充房间密码 / Autofill room password + generateLoginForm, // 生成登录表单HTML / Generate login form HTML + initLoginForm // 初始化登录表单 / Initialize login form } from './ui.js'; // 设置全局配置参数 @@ -78,6 +79,9 @@ window.setupEmojiPicker = setupEmojiPicker; // 当 DOM 内容加载完成后执行初始化逻辑 // Run initialization logic when the DOM content is fully loaded window.addEventListener('DOMContentLoaded', () => { + // 初始化登录表单 / Initialize login form + initLoginForm(); + const loginForm = $id('login-form'); // 登录表单 / Login form if (loginForm) { diff --git a/client/js/ui.js b/client/js/ui.js index a896c7a..0bca29c 100644 --- a/client/js/ui.js +++ b/client/js/ui.js @@ -294,12 +294,36 @@ export function loginFormHandler(modal) { } } -// Open the login modal dialog -// 打开登录弹窗 +// 生成登录表单HTML +// Generate login form HTML +export function generateLoginForm(isModal = false) { + const idPrefix = isModal ? '-modal' : ''; + return ` +
+ + +
+
+ + +
+
+ + +
+ + `; +} export function openLoginModal() { const modal = document.createElement('div'); modal.className = 'login-modal'; - modal.innerHTML = `

Enter a Node

`; + modal.innerHTML = `

Enter a Node

${generateLoginForm(true)}
`; document.body.appendChild(modal); modal.querySelector('.login-modal-close').onclick = () => modal.remove(); preventSpaceInput(modal.querySelector('#userName-modal')); @@ -347,4 +371,13 @@ export function autofillRoomPwd(formPrefix = '') { if (room || pwd) { window.history.replaceState({}, '', location.pathname) } +} + +// 初始化登录表单 +// Initialize login form +export function initLoginForm() { + const loginFormContainer = document.getElementById('login-form'); + if (loginFormContainer) { + loginFormContainer.innerHTML = generateLoginForm(false); + } } \ No newline at end of file