GuanM/NapCatQQ
1
0
Fork 0
mirror of https://github.com/NapNeko/NapCatQQ.git synced 2024-11-21 09:36:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat:webui-test

Browse Source
This commit is contained in:
手瓜一十雪 2024-05-07 21:17:31 +08:00
parent 2ab91e363f
commit 5d77f50160
5 changed files with 193 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.ts
View File

@ -14,7 +14,7 @@ program
.option('-q, --qq <type>', 'QQ号') .option('-q, --qq <type>', 'QQ号')
.parse(process.argv); .parse(process.argv);
//InitWebUi(); InitWebUi();
const cmdOptions = program.opts(); const cmdOptions = program.opts();
// console.log(process.argv); // console.log(process.argv);

1
src/webui/src/helper/config.ts
View File

@ -49,6 +49,7 @@ export async function WebUIConfig(): Promise<WebUiConfig> {
// 修正端口占用情况 // 修正端口占用情况
const [err, data] = await tryUsePort(parsedConfig.port).then(data => [null, data as number]).catch(err => [err, null]); const [err, data] = await tryUsePort(parsedConfig.port).then(data => [null, data as number]).catch(err => [err, null]);
config.port = data;
if (err) { if (err) {
//一般没那么离谱 如果真有这么离谱 考虑下 向外抛出异常 //一般没那么离谱 如果真有这么离谱 考虑下 向外抛出异常
} }

165
static/QQLogin.html
View File

@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebUi - Login</title> <title>NapCat - WebUi</title>
<style> <style>
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
@ -25,16 +25,37 @@
position: relative; position: relative;
} }
.input-group { .login-methods {
display: flex;
justify-content: space-between;
margin-bottom: 20px; margin-bottom: 20px;
} }
input[type="text"] { .login-method {
width: 90%; padding: 10px 15px;
padding: 10px;
font-size: 16px; font-size: 16px;
border: 1px solid #ccc; cursor: pointer;
border-radius: 5px; transition: all 0.3s;
}
.login-method.active {
background-color: #e6f0ff;
color: #007BFF;
}
.login-form,
.qrcode {
display: flex;
flex-direction: column;
gap: 15px;
}
.qrcode {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
text-align: center;
} }
button { button {
@ -51,39 +72,121 @@
background-color: #0056b3; background-color: #0056b3;
} }
.error-message { .hidden {
color: red; display: none;
margin-top: 5px; }
#qrcode-canvas {
width: 200px;
height: 200px;
}
#quick-login-dropdown {
width: 100%;
padding: 10px;
font-size: 16px;
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
transition: all 0.3s;
}
#quick-login-dropdown:hover {
background-color: #e6f0ff;
}
#quick-login-options {
position: absolute;
top: calc(100% + 5px);
left: 0;
right: 0;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1;
display: none;
}
#quick-login-options.show {
display: block;
}
.quick-login-option {
padding: 10px 15px;
cursor: pointer;
transition: all 0.3s;
}
.quick-login-option:hover {
background-color: #e6f0ff;
}
#quick-login-select {
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
outline: none;
transition: all 0.3s;
}
#quick-login-select option {
background-color: #fff;
color: #333;
} }
</style> </style>
<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
</head> </head>
<body> <body>
<div class="login-container"> <div class="login-container">
<h2>WebUi Login</h2> <h2>Login</h2>
<form id="token-form" onsubmit="event.preventDefault(); submitToken();"> <div class="login-methods">
<div class="input-group"> <button id="quick-login" class="login-method active">Quick Login</button>
<label for="token-input">Enter Token:</label> <button id="qrcode-login" class="login-method">QR Code</button>
<input type="text" id="token-input" required> </div>
</div> <div id="quick-login-dropdown" class="login-form">
<p class="error-message hidden" id="error-message"></p> <select id="quick-login-select" onchange="selectAccount(this.value)">
<button type="submit">Login</button> <option value="Account 1">Account 1</option>
</form> <option value="Account 2">Account 2</option>
<option value="Account 3">Account 3</option>
</select>
</div>
<div id="qrcode" class="qrcode" style="display: none;">
<canvas id="qrcode-canvas"></canvas>
</div>
<p id="message"></p>
</div> </div>
<script> <script>
function submitToken() { document.getElementById('quick-login').addEventListener('click', function () {
const tokenInput = document.getElementById('token-input'); let quickLoginOptions = document.querySelector('#quick-login-dropdown');
const errorMessage = document.getElementById('error-message'); let qrcode = document.querySelector('#qrcode');
quickLoginOptions.style.display = 'flex';
qrcode.style.display = 'none';
});
if (tokenInput.value.trim() === '') { function selectAccount(accountName) {
errorMessage.textContent = 'Please enter a token.'; alert(`Logging in with ${accountName}...`);
errorMessage.classList.remove('hidden'); // Implement your login logic here
} else { document.getElementById('quick-login-options').classList.remove('show');
errorMessage.textContent = ''; }
errorMessage.classList.add('hidden'); document.getElementById('qrcode-login').addEventListener('click', function () {
// Implement your login logic here, e.g. send the token to the server for validation let loginForm = document.querySelector('#quick-login-dropdown');
alert('Token submitted! Logging in...'); let qrcode = document.querySelector('#qrcode');
} loginForm.style.display = 'none';
qrcode.style.display = 'flex';
let qrData = 'https://yourapp.com/login?code=123456';
generateQrCode(qrData, document.querySelector('#qrcode-canvas'));
});
function generateQrCode(data, canvas) {
QRCode.toCanvas(canvas, data, function (error) {
if (error) console.error(error);
console.log('QR Code generated!');
});
} }
</script> </script>
</body> </body>

15
static/index.html
View File

@ -1,11 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebUi - Index</title> <title>WebUi - Index</title>
</head> </head>
<body> <body>
<script>
//读取localStorge 查看是否储存了为auth的数据
let authData = localStorage.getItem('auth');
if (authData) {
//请求下api 看看QQlogin没有 没有去登录
window.location.href = './config.html';
}
window.location.href = './login.html';
</script>
</body> </body>
</html> </html>

177
static/login.html
View File

@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NapCat - WebUi</title> <title>WebUi - Login</title>
<style> <style>
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
@ -25,37 +25,16 @@
position: relative; position: relative;
} }
.login-methods { .input-group {
display: flex;
justify-content: space-between;
margin-bottom: 20px; margin-bottom: 20px;
} }
.login-method { input[type="text"] {
padding: 10px 15px; width: 90%;
padding: 10px;
font-size: 16px; font-size: 16px;
cursor: pointer; border: 1px solid #ccc;
transition: all 0.3s; border-radius: 5px;
}
.login-method.active {
background-color: #e6f0ff;
color: #007BFF;
}
.login-form,
.qrcode {
display: flex;
flex-direction: column;
gap: 15px;
}
.qrcode {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
text-align: center;
} }
button { button {
@ -72,121 +51,53 @@
background-color: #0056b3; background-color: #0056b3;
} }
.hidden { .error-message {
display: none; color: red;
} margin-top: 5px;
#qrcode-canvas {
width: 200px;
height: 200px;
}
#quick-login-dropdown {
width: 100%;
padding: 10px;
font-size: 16px;
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
transition: all 0.3s;
}
#quick-login-dropdown:hover {
background-color: #e6f0ff;
}
#quick-login-options {
position: absolute;
top: calc(100% + 5px);
left: 0;
right: 0;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1;
display: none;
}
#quick-login-options.show {
display: block;
}
.quick-login-option {
padding: 10px 15px;
cursor: pointer;
transition: all 0.3s;
}
.quick-login-option:hover {
background-color: #e6f0ff;
}
#quick-login-select {
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
outline: none;
transition: all 0.3s;
}
#quick-login-select option {
background-color: #fff;
color: #333;
} }
</style> </style>
<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
</head> </head>
<body> <body>
<div class="login-container"> <div class="login-container">
<h2>Login</h2> <h2>WebUi Login</h2>
<div class="login-methods"> <form id="token-form" onsubmit="event.preventDefault(); submitToken();">
<button id="quick-login" class="login-method active">Quick Login</button> <div class="input-group">
<button id="qrcode-login" class="login-method">QR Code</button> <label for="token-input">Enter Token:</label>
</div> <input type="text" id="token-input" required>
<div id="quick-login-dropdown" class="login-form"> </div>
<select id="quick-login-select" onchange="selectAccount(this.value)"> <p class="error-message hidden" id="error-message"></p>
<option value="Account 1">Account 1</option> <button type="submit">Login</button>
<option value="Account 2">Account 2</option> </form>
<option value="Account 3">Account 3</option>
</select>
</div>
<div id="qrcode" class="qrcode" style="display: none;">
<canvas id="qrcode-canvas"></canvas>
</div>
<p id="message"></p>
</div> </div>
<script> <script>
document.getElementById('quick-login').addEventListener('click', function () { async function submitToken() {
let quickLoginOptions = document.querySelector('#quick-login-dropdown'); const tokenInput = document.getElementById('token-input');
let qrcode = document.querySelector('#qrcode'); const errorMessage = document.getElementById('error-message');
quickLoginOptions.style.display = 'flex';
qrcode.style.display = 'none';
});
function selectAccount(accountName) { if (tokenInput.value.trim() === '') {
alert(`Logging in with ${accountName}...`); errorMessage.textContent = 'Please enter a token.';
// Implement your login logic here errorMessage.classList.remove('hidden');
document.getElementById('quick-login-options').classList.remove('show'); } else {
} errorMessage.textContent = '';
document.getElementById('qrcode-login').addEventListener('click', function () { errorMessage.classList.add('hidden');
let loginForm = document.querySelector('#quick-login-dropdown'); //请求 /api/login post token
let qrcode = document.querySelector('#qrcode'); let data = "";
loginForm.style.display = 'none';
qrcode.style.display = 'flex';
let qrData = 'https://yourapp.com/login?code=123456';
generateQrCode(qrData, document.querySelector('#qrcode-canvas'));
});
function generateQrCode(data, canvas) { try {
QRCode.toCanvas(canvas, data, function (error) { data = await fetch('/api/login', {
if (error) console.error(error); method: 'POST',
console.log('QR Code generated!'); headers: {
}); 'Content-Type': 'application/json'
},
body: JSON.stringify({ token: tokenInput.value })
});
console.log(data);
} catch (e) {
console.log("请求异常",e);
}
}
} }
</script> </script>
</body> </body>