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号')
.parse(process.argv);
//InitWebUi();
InitWebUi();
const cmdOptions = program.opts();
// 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]);
config.port = data;
if (err) {
//一般没那么离谱 如果真有这么离谱 考虑下 向外抛出异常
}

165
static/QQLogin.html
View File

@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebUi - Login</title>
<title>NapCat - WebUi</title>
<style>
body {
font-family: Arial, sans-serif;
@ -25,16 +25,37 @@
position: relative;
}
.input-group {
.login-methods {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
input[type="text"] {
width: 90%;
padding: 10px;
.login-method {
padding: 10px 15px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
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 {
@ -51,39 +72,121 @@
background-color: #0056b3;
}
.error-message {
color: red;
margin-top: 5px;
.hidden {
display: none;
}
#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>
<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
</head>
<body>
<div class="login-container">
<h2>WebUi Login</h2>
<form id="token-form" onsubmit="event.preventDefault(); submitToken();">
<div class="input-group">
<label for="token-input">Enter Token:</label>
<input type="text" id="token-input" required>
</div>
<p class="error-message hidden" id="error-message"></p>
<button type="submit">Login</button>
</form>
<h2>Login</h2>
<div class="login-methods">
<button id="quick-login" class="login-method active">Quick Login</button>
<button id="qrcode-login" class="login-method">QR Code</button>
</div>
<div id="quick-login-dropdown" class="login-form">
<select id="quick-login-select" onchange="selectAccount(this.value)">
<option value="Account 1">Account 1</option>
<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>
<script>
function submitToken() {
const tokenInput = document.getElementById('token-input');
const errorMessage = document.getElementById('error-message');
document.getElementById('quick-login').addEventListener('click', function () {
let quickLoginOptions = document.querySelector('#quick-login-dropdown');
let qrcode = document.querySelector('#qrcode');
quickLoginOptions.style.display = 'flex';
qrcode.style.display = 'none';
});
if (tokenInput.value.trim() === '') {
errorMessage.textContent = 'Please enter a token.';
errorMessage.classList.remove('hidden');
} else {
errorMessage.textContent = '';
errorMessage.classList.add('hidden');
// Implement your login logic here, e.g. send the token to the server for validation
alert('Token submitted! Logging in...');
}
function selectAccount(accountName) {
alert(`Logging in with ${accountName}...`);
// Implement your login logic here
document.getElementById('quick-login-options').classList.remove('show');
}
document.getElementById('qrcode-login').addEventListener('click', function () {
let loginForm = document.querySelector('#quick-login-dropdown');
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>
</body>

15
static/index.html
View File

@ -1,11 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebUi - Index</title>
</head>
<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>
</html>

177
static/login.html
View File

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