mirror of
https://github.com/NapNeko/NapCatQQ.git
synced 2025-07-19 12:03:37 +00:00
feat: 开始迁移webui
This commit is contained in:
手瓜一十雪
@@ -2,12 +2,12 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="./vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<script type="module" src="./src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -23,6 +23,7 @@ import {
|
||||
|
||||
} from 'tdesign-vue-next';
|
||||
import { router } from './router';
|
||||
import 'tdesign-vue-next/es/style/index.css';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(router);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { createWebHistory, createRouter } from 'vue-router'
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import Dashboard from '../components/Dashboard.vue';
|
||||
import BasicInfo from '../pages/BasicInfo.vue';
|
||||
import AboutUs from '../pages/AboutUs.vue';
|
||||
@@ -27,6 +27,6 @@ const routes = [
|
||||
]
|
||||
|
||||
export const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
})
|
||||
@@ -4,4 +4,5 @@ import vue from '@vitejs/plugin-vue'
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
base: './'
|
||||
})
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"scripts": {
|
||||
"build:framework": "vite build --mode framework",
|
||||
"build:shell": "vite build --mode shell",
|
||||
"build:webui": "cd ./src/webui && vite build",
|
||||
"build:webui": "cd ./napcat.webui && vite build",
|
||||
"lint": "eslint --fix src/**/*.{js,ts}",
|
||||
"depend": "cd dist && npm install --omit=dev"
|
||||
},
|
||||
|
||||
@@ -1,294 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NapCat - WebUi</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
background-color: white;
|
||||
max-width: 400px;
|
||||
min-width: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-methods {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.login-method {
|
||||
padding: 10px 15px;
|
||||
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;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
<script src="./assets/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="">Select Account</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="qrcode" class="qrcode" style="display: none;">
|
||||
<canvas id="qrcode-canvas"></canvas>
|
||||
</div>
|
||||
<p id="message"></p>
|
||||
</div>
|
||||
<script>
|
||||
async function GetQQLoginQrcode(retCredential) {
|
||||
let QQLoginResponse = await fetch('../api/QQLogin/GetQQLoginQrcode', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': "Bearer " + retCredential,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
if (QQLoginResponse.status == 200) {
|
||||
let QQLoginResponseJson = await QQLoginResponse.json();
|
||||
if (QQLoginResponseJson.code == 0) {
|
||||
if (QQLoginResponseJson.data.qrcode) {
|
||||
return QQLoginResponseJson.data.qrcode;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
async function CheckQQLoginStatus(retCredential) {
|
||||
let QQLoginResponse = await fetch('../api/QQLogin/CheckLoginStatus', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': "Bearer " + retCredential,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
if (QQLoginResponse.status == 200) {
|
||||
let QQLoginResponseJson = await QQLoginResponse.json();
|
||||
if (QQLoginResponseJson.code == 0) {
|
||||
if (QQLoginResponseJson.data.isLogin) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
async function GetQQQucickLoginList(retCredential) {
|
||||
let QQLoginResponse = await fetch('../api/QQLogin/GetQuickLoginList', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': "Bearer " + retCredential,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
if (QQLoginResponse.status == 200) {
|
||||
let QQLoginResponseJson = await QQLoginResponse.json();
|
||||
if (QQLoginResponseJson.code == 0) {
|
||||
return QQLoginResponseJson?.data;
|
||||
}
|
||||
}
|
||||
return [];
|
||||
}
|
||||
async function SetQuickLogin(uin, retCredential) {
|
||||
let QQLoginResponse = await fetch('../api/QQLogin/SetQuickLogin', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': "Bearer " + retCredential,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
uin: uin
|
||||
})
|
||||
});
|
||||
if (QQLoginResponse.status == 200) {
|
||||
let QQLoginResponseJson = await QQLoginResponse.json();
|
||||
if (QQLoginResponseJson.code == 0) {
|
||||
return { result: true, errMsg: "" };
|
||||
} else {
|
||||
return { result: false, errMsg: QQLoginResponseJson.message };
|
||||
}
|
||||
}
|
||||
return { result: false, errMsg: "接口异常" };;
|
||||
}
|
||||
//心跳轮询CheckQQLoginStatus 是否已经进入登录状态，如果为true进入./config.html
|
||||
async function HeartBeat() {
|
||||
let isLogined = await CheckQQLoginStatus(localStorage.getItem('auth'));
|
||||
if (isLogined) {
|
||||
window.location.href = './config.html';
|
||||
}
|
||||
}
|
||||
async function InitPages() {
|
||||
let QuickLists = await GetQQQucickLoginList(localStorage.getItem('auth'));
|
||||
let QuickListSelect = document.querySelector("#quick-login-select");
|
||||
QuickLists.forEach(QuickUin => {
|
||||
let optionUinEle = document.createElement('option');
|
||||
optionUinEle.innerHTML = QuickUin;
|
||||
optionUinEle.value = QuickUin;
|
||||
QuickListSelect.appendChild(optionUinEle);
|
||||
});
|
||||
generateQrCode(await GetQQLoginQrcode(localStorage.getItem('auth')), document.querySelector('#qrcode-canvas'));
|
||||
setInterval(HeartBeat, 3000);
|
||||
}
|
||||
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 selectAccount(accountName) {
|
||||
//alert(`Logging in with ${accountName}...`);
|
||||
const { result, errMsg } = await SetQuickLogin(accountName, localStorage.getItem('auth'));
|
||||
if (result) {
|
||||
alert("登录成功即将跳转");
|
||||
window.location.href = './config.html';
|
||||
} else {
|
||||
alert("登录失败," + errMsg);
|
||||
}
|
||||
//await (localStorage.getItem('auth'))
|
||||
//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';
|
||||
});
|
||||
|
||||
function generateQrCode(data, canvas) {
|
||||
QRCode.toCanvas(canvas, data, function (error) {
|
||||
if (error) console.log(error);
|
||||
console.log('QR Code generated!');
|
||||
});
|
||||
}
|
||||
InitPages();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,180 +0,0 @@
|
||||
setting-item[is-hidden],
|
||||
setting-item[is-hidden] + setting-divider {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.config-host-list {
|
||||
width: 100%;
|
||||
padding-left: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.config-host-list[is-hidden],
|
||||
.config-host-list[is-hidden] + setting-divider {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
setting-item .q-input {
|
||||
height: 24px;
|
||||
width: 100px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: var(--bg_bottom_light);
|
||||
border: 1px solid var(--border_dark);
|
||||
}
|
||||
|
||||
setting-item .q-input .q-input__inner {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
color: var(--text_primary);
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
width: 100%;
|
||||
border: 1px solid transparent;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
setting-item .q-input input[type='number'].q-input__inner::-webkit-outer-spin-button,
|
||||
setting-item .q-input input[type='number'].q-input__inner::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.config-host-list setting-item.setting-host-list-item .q-input {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
setting-item a {
|
||||
color: var(--text-link);
|
||||
}
|
||||
setting-item a:hover {
|
||||
color: var(--hover-link);
|
||||
}
|
||||
setting-item a:active,
|
||||
setting-item a:visited {
|
||||
color: var(--text-link);
|
||||
}
|
||||
|
||||
ob-setting-select {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
ob-setting-select,
|
||||
ob-setting-select::part(parent),
|
||||
ob-setting-select::part(button) {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ob-setting-select::part(button) {
|
||||
display: flex;
|
||||
padding: 0px 8px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border_dark);
|
||||
z-index: 5;
|
||||
cursor: default;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
ob-setting-select::part(current-text) {
|
||||
display: block;
|
||||
margin-right: 8px;
|
||||
padding: 0px;
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
font-size: 12px;
|
||||
color: var(--text_primary);
|
||||
text-overflow: ellipsis;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
flex: 1;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-pointer-events: none;
|
||||
-moz-pointer-events: none;
|
||||
-ms-pointer-events: none;
|
||||
-o-pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
ob-setting-select::part(button-arrow) {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--icon_primary);
|
||||
}
|
||||
|
||||
ob-setting-select::part(option-list) {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
padding: 4px;
|
||||
margin: 5px 0px;
|
||||
width: 100%;
|
||||
max-height: var(--q-contextmenu-max-height);
|
||||
background-color: var(--blur_middle_standard);
|
||||
background-clip: padding-box;
|
||||
backdrop-filter: blur(8px);
|
||||
font-size: 12px;
|
||||
box-shadow: var(--shadow_bg_middle_secondary);
|
||||
border: 1px solid var(--border_secondary);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
app-region: no-drag;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
z-index: 999;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#napcat-error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#napcat-error setting-panel {
|
||||
background: rgba(255, 0, 0, 0.5);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#napcat-error setting-panel pre {
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#napcat-error setting-panel pre code {
|
||||
font-family: 'FiraCode Nerd Font', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
#napcat-error.show {
|
||||
display: block;
|
||||
}
|
||||
BIN
static/assets/Sotheby-Bahhmb2a.ttf
Normal file
BIN
static/assets/Sotheby-Bahhmb2a.ttf
Normal file
Binary file not shown.
@@ -1,679 +0,0 @@
|
||||
:root {
|
||||
--font-bold: 400;
|
||||
--font_size_1: 10px;
|
||||
--font_size_2: 12px;
|
||||
--font_size_3: 14px;
|
||||
--font_size_4: 16px;
|
||||
--font_size_5: 18px;
|
||||
--avatar_size_1: 20px;
|
||||
--avatar_size_2: 32px;
|
||||
--avatar_size_3: 40px;
|
||||
--font_size_main_1: 12px;
|
||||
--font_size_main_2: 14px;
|
||||
--line_height_1: 14px;
|
||||
--line_height_2: 16px;
|
||||
--line_height_3: 20px;
|
||||
--line_height_4: 22px;
|
||||
--line_height_5: 24px;
|
||||
--line_height_main_1: 18px;
|
||||
--line_height_main_2: 22px;
|
||||
|
||||
--shadow_card_rest: 0px 2px 4px rgba(0, 0, 0, 0.12);
|
||||
--shadow_tooltip: 0px 4px 8px rgba(0, 0, 0, 0.26);
|
||||
--shadow_flyout: 0px 8px 16px rgba(0, 0, 0, 0.14);
|
||||
--shadow_dialog: 0px 30px 60px rgba(0, 0, 0, 0.36) 0 2px 20px rgba(0, 0, 0, 0.37);
|
||||
|
||||
--blend_brightness_white_004: 1.04;
|
||||
--blend_brightness_white_008: 1.08;
|
||||
--blend_brightness_white_010: 1.10;
|
||||
--blend_brightness_white_016: 1.16;
|
||||
--blend_brightness_white_020: 1.20;
|
||||
--blend_brightness_black_004: 0.96;
|
||||
--blend_brightness_black_008: 0.92;
|
||||
--blend_brightness_black_010: 0.90;
|
||||
--blend_brightness_black_016: 0.84;
|
||||
--blend_brightness_black_020: 0.80;
|
||||
--blend_white_004: rgba(255, 255, 255, 0.04);
|
||||
--blend_white_008: rgba(255, 255, 255, 0.08);
|
||||
--blend_white_010: rgba(255, 255, 255, 0.10);
|
||||
--blend_white_016: rgba(255, 255, 255, 0.16);
|
||||
--blend_white_020: rgba(255, 255, 255, 0.20);
|
||||
--blend_black_004: rgba(0, 0, 0, 0.04);
|
||||
--blend_black_008: rgba(0, 0, 0, 0.08);
|
||||
--blend_black_010: rgba(0, 0, 0, 0.10);
|
||||
--blend_black_016: rgba(0, 0, 0, 0.16);
|
||||
--blend_black_020: rgba(0, 0, 0, 0.20);
|
||||
--blend_transparent: rgba(0, 0, 0, 0);
|
||||
|
||||
--el-color-white: #fff;
|
||||
--el-color-black: #000;
|
||||
--el-color-primary: #409eff;
|
||||
--el-color-primary-rgb: 64,158,255;
|
||||
--el-color-success-rgb: 103,194,58;
|
||||
--el-color-warning-rgb: 230,162,60;
|
||||
--el-color-danger-rgb: 245,108,108;
|
||||
--el-color-error-rgb: 245,108,108;
|
||||
--el-color-info-rgb: 144,147,153;
|
||||
--el-color-primary-light-1: #53a8ff;
|
||||
--el-color-primary-light-2: #66b1ff;
|
||||
--el-color-primary-light-3: #79bbff;
|
||||
--el-color-primary-light-4: #8cc5ff;
|
||||
--el-color-primary-light-5: #a0cfff;
|
||||
--el-color-primary-light-6: #b3d8ff;
|
||||
--el-color-primary-light-7: #c6e2ff;
|
||||
--el-color-primary-light-8: #d9ecff;
|
||||
--el-color-primary-light-9: #ecf5ff;
|
||||
--el-color-primary-dark-2: #337ecc;
|
||||
--el-color-success: #67c23a;
|
||||
--el-color-success-light-3: #95d475;
|
||||
--el-color-success-light-5: #b3e19d;
|
||||
--el-color-success-light-7: #d1edc4;
|
||||
--el-color-success-light-8: #e1f3d8;
|
||||
--el-color-success-light-9: #f0f9eb;
|
||||
--el-color-success-dark-2: #529b2e;
|
||||
--el-color-warning: #e6a23c;
|
||||
--el-color-warning-light-3: #eebe77;
|
||||
--el-color-warning-light-5: #f3d19e;
|
||||
--el-color-warning-light-7: #f8e3c5;
|
||||
--el-color-warning-light-8: #faecd8;
|
||||
--el-color-warning-light-9: #fdf6ec;
|
||||
--el-color-warning-dark-2: #b88230;
|
||||
--el-color-danger: #f56c6c;
|
||||
--el-color-danger-light-3: #f89898;
|
||||
--el-color-danger-light-5: #fab6b6;
|
||||
--el-color-danger-light-7: #fcd3d3;
|
||||
--el-color-danger-light-8: #fde2e2;
|
||||
--el-color-danger-light-9: #fef0f0;
|
||||
--el-color-danger-dark-2: #c45656;
|
||||
--el-color-error: #f56c6c;
|
||||
--el-color-error-light-3: #f89898;
|
||||
--el-color-error-light-5: #fab6b6;
|
||||
--el-color-error-light-7: #fcd3d3;
|
||||
--el-color-error-light-8: #fde2e2;
|
||||
--el-color-error-light-9: #fef0f0;
|
||||
--el-color-error-dark-2: #c45656;
|
||||
--el-color-info: #909399;
|
||||
--el-color-info-light-3: #b1b3b8;
|
||||
--el-color-info-light-5: #c8c9cc;
|
||||
--el-color-info-light-7: #dedfe0;
|
||||
--el-color-info-light-8: #e9e9eb;
|
||||
--el-color-info-light-9: #f4f4f5;
|
||||
--el-color-info-dark-2: #73767a;
|
||||
--el-bg-color: #fff;
|
||||
--el-bg-color-page: #fff;
|
||||
--el-bg-color-overlay: #fff;
|
||||
--el-text-color-primary: #303133;
|
||||
--el-text-color-regular: #606266;
|
||||
--el-text-color-secondary: #909399;
|
||||
--el-text-color-placeholder: #a8abb2;
|
||||
--el-text-color-disabled: #c0c4cc;
|
||||
--el-border-color: #dcdfe6;
|
||||
--el-border-color-light: #e4e7ed;
|
||||
--el-border-color-lighter: #ebeef5;
|
||||
--el-border-color-extra-light: #f2f6fc;
|
||||
--el-border-color-dark: #d4d7de;
|
||||
--el-border-color-darker: #cdd0d6;
|
||||
--el-fill-color: #f0f2f5;
|
||||
--el-fill-color-light: #f5f7fa;
|
||||
--el-fill-color-lighter: #fafafa;
|
||||
--el-fill-color-extra-light: #fafcff;
|
||||
--el-fill-color-dark: #ebedf0;
|
||||
--el-fill-color-darker: #e6e8eb;
|
||||
--el-fill-color-blank: #fff;
|
||||
--el-border-radius-base: 4px;
|
||||
--el-border-radius-small: 2px;
|
||||
--el-border-radius-round: 20px;
|
||||
--el-border-radius-circle: 100%;
|
||||
--el-font-size-extra-large: 20px;
|
||||
--el-font-size-large: 18px;
|
||||
--el-font-size-medium: 16px;
|
||||
--el-font-size-base: 14px;
|
||||
--el-font-size-small: 13px;
|
||||
--el-font-size-extra-small: 12px;
|
||||
--el-font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
--el-box-shadow: 0px 12px 32px 4px rgba(0,0,0,.04),0px 8px 20px rgba(0,0,0,.08);
|
||||
--el-box-shadow-light: 0px 0px 12px rgba(0,0,0,.12);
|
||||
--el-box-shadow-lighter: 0px 0px 6px rgba(0,0,0,.12);
|
||||
--el-box-shadow-dark: 0px 16px 48px 16px rgba(0,0,0,.08),0px 12px 32px rgba(0,0,0,.12),0px 8px 16px -8px rgba(0,0,0,.16);
|
||||
--el-disabled-bg-color: var(--el-fill-color-light);
|
||||
--el-disabled-text-color: var(--el-text-color-placeholder);
|
||||
--el-disabled-border-color: var(--el-border-color-light);
|
||||
--el-index-normal: 1;
|
||||
--el-index-top: 1000;
|
||||
--el-index-popper: 2000;
|
||||
--el-overlay-color: rgba(0,0,0,.8);
|
||||
--el-overlay-color-light: rgba(0,0,0,.7);
|
||||
--el-overlay-color-lighter: rgba(0,0,0,.5);
|
||||
--el-mask-color: hsla(0,0%,100%,.9);
|
||||
--el-mask-color-extra-light: hsla(0,0%,100%,.3);
|
||||
--el-border-width: 1px;
|
||||
--el-border-style: solid;
|
||||
--el-border-color-hover: var(--el-text-color-disabled);
|
||||
--el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
|
||||
--el-svg-monochrome-grey: var(--el-border-color);
|
||||
--el-font-weight-primary: 500;
|
||||
--el-font-line-height-primary: 24px;
|
||||
--el-transition-duration: 0.3s;
|
||||
--el-transition-duration-fast: 0.2s;
|
||||
--el-transition-function-ease-in-out-bezier: cubic-bezier(0.645,0.045,0.355,1);
|
||||
--el-transition-function-fast-bezier: cubic-bezier(0.23,1,0.32,1);
|
||||
--el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
|
||||
--el-transition-fade: opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
|
||||
--el-transition-md-fade: transform var(--el-transition-duration) var(--el-transition-function-fast-bezier),opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
|
||||
--el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;
|
||||
--el-transition-border: border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
|
||||
--el-transition-box-shadow: box-shadow var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
|
||||
--el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
|
||||
|
||||
--nt_brand_standard_2_overlay_hover_brand_2_mix: #008debff;
|
||||
--nt_brand_standard_2_overlay_pressed_brand_2_mix: #0080d6ff;
|
||||
--nt_feedback_error_2_overlay_hover_brand_2_mix: #e4462cff;
|
||||
--nt_feedback_error_2_overlay_pressed_brand_2_mix: #cf4028ff;
|
||||
--nt_icon_white_2_overlay_hover_2_mix: #f5f5f5ff;
|
||||
--nt_icon_white_2_overlay_pressed_2_mix: #e0e0e0ff;
|
||||
--nt_bg_top_light_2_overlay_hover_2_mix: #f5f5f5ff;
|
||||
--nt_bg_top_light_2_overlay_pressed_2_mix: #e0e0e0ff;
|
||||
--nt_icon_secondary_02_2_0_2_alpha: rgba(204, 204, 204, 0);
|
||||
--nt_icon_secondary_02_2_70_2_alpha: rgba(204, 204, 204, 0.7);
|
||||
--nt_text_link_2_50_2_alpha: rgba(45, 119, 229, 0.5);
|
||||
--nt_bubble_host_2_overlay_pressed_brand_2_mix: #0080d6ff;
|
||||
--nt_bg_white_2_overlay_pressed_brand_2_mix: #d6d6d6ff;
|
||||
--nt_bg_white_2_overlay_hover_2_mix: #f5f5f5ff;
|
||||
--nt_bg_white_2_overlay_pressed_2_mix: #e0e0e0ff;
|
||||
--nt_fg_white_2_overlay_hover_2_mix: #f5f5f5ff;
|
||||
--nt_fg_white_2_overlay_pressed_2_mix: #e0e0e0ff;
|
||||
--nt_icon_red_2_overlay_hover_2_mix: #f5314fff;
|
||||
--nt_icon_red_2_overlay_pressed_2_mix: #e02d48ff;
|
||||
--nt_fg_grey_standard_2_overlay_hover_2_mix: #0000003b;
|
||||
--nt_fg_grey_standard_2_overlay_pressed_2_mix: #0000004c;
|
||||
--nt_bubble_guest_2_overlay_pressed_2_mix: #e0e0e0ff;
|
||||
--nt_icon_primary_2_20_2_alpha: rgba(0, 0, 0, 0.2);
|
||||
--nt_bg_grey_standard_2_95_2_alpha: rgba(242, 242, 242, 0.95);
|
||||
--nt_tag_red_2_20_2_alpha: rgba(255, 134, 46, 0.2);
|
||||
--nt_tag_red_2_25_2_alpha: rgba(255, 134, 46, 0.25);
|
||||
--nt_tag_blue_2_20_2_alpha: rgba(0, 153, 255, 0.2);
|
||||
--nt_tag_blue_2_25_2_alpha: rgba(0, 153, 255, 0.25);
|
||||
--nt_tag_blue_2_10_2_alpha: rgba(0, 153, 255, 0.1);
|
||||
--nt_brand_standard_2_20_2_alpha: rgba(0, 153, 255, 0.2);
|
||||
--nt_feedback_error_2_20_2_alpha: rgba(247, 76, 48, 0.2);
|
||||
--nt_text_white_2_60_2_alpha: rgba(255, 255, 255, 0.6);
|
||||
--nt_bg_white_2_70_2_alpha: rgba(255, 255, 255, 0.7);
|
||||
--nt_bg_white_2_90_2_alpha: rgba(255, 255, 255, 0.9);
|
||||
--nt_bg_white_2_97_2_alpha: rgba(255, 255, 255, 0.97);
|
||||
--nt_bg_white_2_40_2_alpha: rgba(255, 255, 255, 0.4);
|
||||
--nt_bg_white_2_30_2_alpha: rgba(255, 255, 255, 0.3);
|
||||
--nt_text_white_2_80_2_alpha: rgba(255, 255, 255, 0.8);
|
||||
--nt_brand_standard_2_50_2_alpha: rgba(0, 153, 255, 0.5);
|
||||
--nt_bg_nav_secondary_2_60_2_alpha: rgba(255, 255, 255, 0.6);
|
||||
--nt_bg_nav_2_60_2_alpha: rgba(242, 242, 242, 0.6);
|
||||
--nt_feedback_error_2_10_2_alpha: rgba(247, 76, 48, 0.1);
|
||||
--nt_brand_standard_2_10_2_alpha: rgba(0, 153, 255, 0.1);
|
||||
--nt_on_brand_primary_2_40_2_alpha: rgba(255, 255, 255, 0.4);
|
||||
--nt_text_primary_2_72_2_alpha: rgba(0, 0, 0, 0.72);
|
||||
--nt_text_white_2_72_2_alpha: rgba(255, 255, 255, 0.72);
|
||||
|
||||
--border_secondary: 1px solid rgba(0, 0, 0, 0.0578);
|
||||
--border_primary: 1px solid rgba(117, 117, 117, 0.4);
|
||||
|
||||
--shadow_bg_top: 0px 4px 8px rgba(0, 0, 0, 0.14);
|
||||
--shadow_bg_middle_secondary: 0px 8px 16px rgba(0, 0, 0, 0.14);
|
||||
--shadow_bg_middle_primary: 0px 32px 64px rgba(0, 0, 0, 0.1876), 0px 2px 21px rgba(0, 0, 0, 0.1474);
|
||||
--shadow_bg_bottom_inactive: 0px 16px 32px rgba(0, 0, 0, 0.1876), 0px 2px 10.67px rgba(0, 0, 0, 0.1474);
|
||||
--shadow_bg_bottom_active: 0px 32px 64px rgba(0, 0, 0, 0.28), 0px 2px 21px rgba(0, 0, 0, 0.22);
|
||||
|
||||
--brand_standard: #0099ffff;
|
||||
--on_brand_primary: #ffffffff;
|
||||
--on_brand_secondary: #ffffffff;
|
||||
--text_primary: #000000ff;
|
||||
--text_primary_light: #00000099;
|
||||
--text_secondary_02: #ccccccff;
|
||||
--text_white: #ffffffff;
|
||||
--text_secondary_01: #999999ff;
|
||||
--text_black: #000000ff;
|
||||
--on_bg_text: #999999ff;
|
||||
--text_link: #2d77e5ff;
|
||||
--text_secondary: #00000080;
|
||||
--text_tertiary: #0000004d;
|
||||
--icon_primary: #000000ff;
|
||||
--icon_secondary_01: #999999ff;
|
||||
--icon_secondary_02: #ccccccff;
|
||||
--icon_white: #ffffffff;
|
||||
--icon_red: #ff3352ff;
|
||||
--icon_black: #000000ff;
|
||||
--icon_secondary: #00000066;
|
||||
--icon_tertiary: #0000004d;
|
||||
--feedback_success: #15d173ff;
|
||||
--feedback_warning: #ffb300ff;
|
||||
--feedback_error: #f74c30ff;
|
||||
--bg_grey_standard: #f2f2f2ff;
|
||||
--bg_white: #ffffffff;
|
||||
--bg_list: #ffffffff;
|
||||
--bg_aio_1: #f2f2f2ff;
|
||||
--bg_aio_2: #f2f2f2ff;
|
||||
--bg_aio_3: #f2f2f2ff;
|
||||
--bg_aio_4: #f2f2f2ff;
|
||||
--bg_nav: #f2f2f2ff;
|
||||
--mac_bg_nav: #ffffff1a;
|
||||
--bg_bottom_standard: #f2f2f2ff;
|
||||
--bg_bottom_light: #ffffffff;
|
||||
--bg_middle_standard: #f2f2f2ff;
|
||||
--bg_middle_light: #ffffffff;
|
||||
--bg_top_standard: #f2f2f2ff;
|
||||
--bg_top_light: #ffffffff;
|
||||
--bg_nav_secondary: #ffffffff;
|
||||
--bubble_host: #0099ffff;
|
||||
--bubble_guest: #ffffffff;
|
||||
--bubble_host_text: #ffffff;
|
||||
--bubble_guest_text: #000000ff;
|
||||
--bubble_host_1: #0099ffff;
|
||||
--bubble_host_2: #0099ffff;
|
||||
--fg_grey_standard: #00000033;
|
||||
--fg_white: #ffffffff;
|
||||
--fg_grey_light: #0000000a;
|
||||
--fill_standard_secondary: #0000000a;
|
||||
--fill_standard_primary: #00000033;
|
||||
--fill_light_primary: #ffffffff;
|
||||
--fill_light_secondary: #ffffffff;
|
||||
--divider_standard: #0000000a;
|
||||
--divider_dark: #00000014;
|
||||
--border_standard: #0000000a;
|
||||
--border_dark: #00000014;
|
||||
--overlay_hover: #0000000a;
|
||||
--overlay_hover_brand: #00000014;
|
||||
--overlay_pressed_brand: #00000029;
|
||||
--overlay_active_brand: #0099ffff;
|
||||
--overlay_top: #0000000f;
|
||||
--overlay_mask_standard: #00000080;
|
||||
--overlay_mask_dark: #00000099;
|
||||
--overlay_pressed: #0000001f;
|
||||
--overlay_active: #00000014;
|
||||
--overlay_mask_aio: #00000000;
|
||||
--blur_standard: #ffffffcc;
|
||||
--blur_superlight: #ffffff1a;
|
||||
--blur_middle_standard: #ffffffcc;
|
||||
--blur_bottom_superlight: #ffffff1a;
|
||||
--extend_blue: #eaf1ffff;
|
||||
--svip_red: #ff4222ff;
|
||||
--tag_sage_green_bg: #a3c4c633;
|
||||
--tag_sage_green_text: #769698ff;
|
||||
--tag_red_bg: #ff3f3233;
|
||||
--tag_red_text: #f74c30ff;
|
||||
--tag_orange_text: #ff8d40ff;
|
||||
--tag_orange_bg: #ff862e33;
|
||||
--tag_purple_text: #aa76f6ff;
|
||||
--tag_purple_bg: #b27eff33;
|
||||
--tag_blue_text: #0099ffff;
|
||||
--tag_blue_bg: #0099ff33;
|
||||
--tag_blue: #0099ff33;
|
||||
--tag_red: #ff862e33;
|
||||
--border_white: #ffffffff;
|
||||
--border_secondary: #0000000f;
|
||||
--border_primary: #75757566;
|
||||
--mac_border_primary: #00000014;
|
||||
--mac_border_secondary: #0000000a;
|
||||
--host_bubble_bg_css_value: #0099ff;
|
||||
--on_bubble_host_text: #ffffffff;
|
||||
--brand_text: #0099ffff;
|
||||
|
||||
--text-primary: #000;
|
||||
--text-primary-light: #666;
|
||||
--text-secondary-01: #999;
|
||||
--text-secondary-02: #ccc;
|
||||
--text-white: #fff;
|
||||
--text-brand: #0099ff;
|
||||
--text-link: #2d77e5;
|
||||
--text-success: #12d173;
|
||||
--text-warning: #ffb300;
|
||||
--text-error: #ff5967;
|
||||
--icon-primary: #000;
|
||||
--icon-secondary-01: #999999;
|
||||
--icon-secondary-02: #cccccc;
|
||||
--icon-white: #fff;
|
||||
--icon-brand: #0099ff;
|
||||
--icon-success: #15d173;
|
||||
--icon-warning: #ffb300;
|
||||
--icon-error: #ff5967;
|
||||
--button-primary-default: #0099ff;
|
||||
--button-primary-hover: #4DB7FF;
|
||||
--button-primary-pressed: #0089E5;
|
||||
--button-primary-disable: #CCEBFF;
|
||||
--button-secondary-default: #ccc;
|
||||
--button-secondary-hover: #E5E5E5;
|
||||
--button-secondary-pressed: #B2B2B2;
|
||||
--button-secondary-disable: #F0F0F0;
|
||||
--button-white-default: #FFFFFF;
|
||||
--button-white-hover: #E5E5E5;
|
||||
--button-white-pressed: #B2B2B2;
|
||||
--button-white-disable: #ffffff4d;
|
||||
--button-error-default: #FF5967;
|
||||
--button-error-hover: #FF8B94;
|
||||
--button-error-pressed: #E6505C;
|
||||
--button-error-disable: #FFEEEF;
|
||||
--bubble-host: #0099FF;
|
||||
--bubble-guest: #EBEBEB;
|
||||
--divider-standard: #E5E5E5;
|
||||
--divider-light: #F5F5F5;
|
||||
--divider-brand: #0099FF;
|
||||
--background-01: #000;
|
||||
--background-02: #E5E5E5;
|
||||
--background-03: #F5F5F5;
|
||||
--background-04: #FAFAFA;
|
||||
--background-05: #FFFFFF;
|
||||
--background-dialogue: #FFFFFF;
|
||||
--hover-list: #F0F0F0;
|
||||
--hover-icon: #EBEBEB;
|
||||
--hover-link: #81ADEF;
|
||||
--press-list: #E5E5E5;
|
||||
--press-icon: #E5E5E5;
|
||||
--press-link: #286BCE;
|
||||
--badge-brand: #0099FF;
|
||||
--badge-red: #FF5967;
|
||||
--badge-grey: #CCCCCC;
|
||||
--audio-hangup: #FF3350;
|
||||
--gray-black: #000;
|
||||
--gray-20: #333333;
|
||||
--gray-40: #666666;
|
||||
--gray-60: #999999;
|
||||
--gray-80: #cccccc;
|
||||
--gray-90: #e5e5e5;
|
||||
--gray-96: #f5f5f5;
|
||||
--gray-white: #ffffff;
|
||||
--blue-dark: #0089E5;
|
||||
--blue-standard: #0099FF;
|
||||
--blue-light: #4DB7FF;
|
||||
--blue-superlight: #E6F5FF;
|
||||
--green-dark: #12BC67;
|
||||
--green-standard: #15D173;
|
||||
--green-light: #5BDE9D;
|
||||
--green-superlight: #E8FAF1;
|
||||
--yellow-dark: #E5A000;
|
||||
--yellow-standard: #FFB300;
|
||||
--yellow-light: #FFC94C;
|
||||
--yellow-superlight: #FFF7E5;
|
||||
--orange-dark: #E57E39;
|
||||
--orange-standard: #FF8D40;
|
||||
--orange-light: #FFAE78;
|
||||
--orange-superlight: #FFF3EB;
|
||||
--red-dark: #E6505C;
|
||||
--red-standard: #FF5967;
|
||||
--red-light: #FF8B94;
|
||||
--red-superlight: #FFEEEF;
|
||||
--pink-dark: #E55BA0;
|
||||
--pink-standard: #FF66B3;
|
||||
--pink-light: #FF93C9;
|
||||
--pink-superlight: #FFEFF7;
|
||||
--indigo-dark: #775CE6;
|
||||
--indigo-standard: #8566FF;
|
||||
--indigo-light: #A994FF;
|
||||
--indigo-superlight: #F3F0FF;
|
||||
--list-hover: rgba(243, 243, 243);
|
||||
--list-pressed: rgba(226, 226, 226);
|
||||
--background_01: #000000;
|
||||
--background_02: #E6E6E6;
|
||||
--background_03: #F5F5F5;
|
||||
--background_04: #FAFAFA;
|
||||
--background_05: #FFFFFF;
|
||||
--background_dialogue: #FFFFFF;
|
||||
--sidebar_win: #ebebeb;
|
||||
--sidebar_mac: rgba(255,255,255,0.1);
|
||||
|
||||
--nt_mix_tokens: nt_brand_standard_2_overlay_hover_brand_2_mix,nt_brand_standard_2_overlay_pressed_brand_2_mix,nt_feedback_error_2_overlay_hover_brand_2_mix,nt_feedback_error_2_overlay_pressed_brand_2_mix,nt_icon_white_2_overlay_hover_2_mix,nt_icon_white_2_overlay_pressed_2_mix,nt_bubble_host_2_overlay_pressed_brand_2_mix,nt_bg_white_2_overlay_pressed_brand_2_mix,nt_bg_white_2_overlay_hover_2_mix,nt_bg_white_2_overlay_pressed_2_mix,nt_fg_white_2_overlay_hover_2_mix,nt_fg_white_2_overlay_pressed_2_mix,nt_icon_red_2_overlay_hover_2_mix,nt_icon_red_2_overlay_pressed_2_mix,nt_fg_grey_standard_2_overlay_hover_2_mix,nt_fg_grey_standard_2_overlay_pressed_2_mix,nt_bubble_guest_2_overlay_pressed_2_mix,nt_icon_primary_2_20_2_alpha,nt_bg_grey_standard_2_95_2_alpha,nt_tag_red_2_20_2_alpha,nt_tag_red_2_25_2_alpha,nt_tag_blue_2_20_2_alpha,nt_tag_blue_2_25_2_alpha,nt_tag_blue_2_10_2_alpha,nt_tag_purple_2_20_2_alpha,nt_brand_standard_2_20_2_alpha,nt_tag_sage_green_2_20_2_alpha,nt_feedback_error_2_20_2_alpha,nt_text_white_2_60_2_alpha,nt_bg_white_2_70_2_alpha,nt_bg_white_2_90_2_alpha,nt_bg_white_2_97_2_alpha,nt_bg_white_2_40_2_alpha,nt_bg_white_2_30_2_alpha,nt_text_white_2_80_2_alpha,nt_brand_standard_2_50_2_alpha,nt_bg_nav_secondary_2_60_2_alpha,nt_bg_nav_2_60_2_alpha,nt_feedback_error_2_10_2_alpha,nt_brand_standard_2_10_2_alpha,nt_on_brand_primary_2_40_2_alpha,nt_text_primary_2_72_2_alpha,nt_text_white_2_72_2_alpha;
|
||||
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
.q-theme-tokens-dark {
|
||||
--nt_brand_standard_2_overlay_hover_brand_2_mix: #1472d0ff;
|
||||
--nt_brand_standard_2_overlay_pressed_brand_2_mix: #0056abff;
|
||||
--nt_feedback_error_2_overlay_hover_brand_2_mix: #f85a40ff;
|
||||
--nt_feedback_error_2_overlay_pressed_brand_2_mix: #cf4028ff;
|
||||
--nt_icon_white_2_overlay_hover_2_mix: #ffffffff;
|
||||
--nt_icon_white_2_overlay_pressed_2_mix: #d6d6d6ff;
|
||||
--nt_bg_top_light_2_overlay_hover_2_mix: #404040ff;
|
||||
--nt_bg_top_light_2_overlay_pressed_2_mix: #282828ff;
|
||||
--nt_icon_secondary_02_2_0_2_alpha: rgba(77, 77, 77, 0);
|
||||
--nt_icon_secondary_02_2_70_2_alpha: rgba(77, 77, 77, 0.7);
|
||||
--nt_text_link_2_50_2_alpha: rgba(45, 119, 229, 0.5);
|
||||
--nt_bubble_host_2_overlay_pressed_brand_2_mix: #202020ff;
|
||||
--nt_bg_white_2_overlay_pressed_brand_2_mix: #202020ff;
|
||||
--nt_bg_white_2_overlay_hover_2_mix: #373737ff;
|
||||
--nt_bg_white_2_overlay_pressed_2_mix: #202020ff;
|
||||
--nt_fg_white_2_overlay_hover_2_mix: #373737ff;
|
||||
--nt_fg_white_2_overlay_pressed_2_mix: #202020ff;
|
||||
--nt_icon_red_2_overlay_hover_2_mix: #ff4360ff;
|
||||
--nt_icon_red_2_overlay_pressed_2_mix: #d62b45ff;
|
||||
--nt_fg_grey_standard_2_overlay_hover_2_mix: #ffffff43;
|
||||
--nt_fg_grey_standard_2_overlay_pressed_2_mix: #82828254;
|
||||
--nt_bubble_guest_2_overlay_pressed_2_mix: #202020ff;
|
||||
--nt_icon_primary_2_20_2_alpha: rgba(255, 255, 255, 0.2);
|
||||
--nt_bg_grey_standard_2_95_2_alpha: rgba(26, 26, 26, 0.95);
|
||||
--nt_tag_red_2_20_2_alpha: rgba(255, 134, 46, 0.2);
|
||||
--nt_tag_red_2_25_2_alpha: rgba(255, 134, 46, 0.25);
|
||||
--nt_tag_blue_2_20_2_alpha: rgba(0, 153, 255, 0.2);
|
||||
--nt_tag_blue_2_25_2_alpha: rgba(0, 153, 255, 0.25);
|
||||
--nt_tag_blue_2_10_2_alpha: rgba(0, 153, 255, 0.1);
|
||||
--nt_brand_standard_2_20_2_alpha: rgba(0, 102, 204, 0.2);
|
||||
--nt_feedback_error_2_20_2_alpha: rgba(247, 76, 48, 0.2);
|
||||
--nt_text_white_2_60_2_alpha: rgba(255, 255, 255, 0.6);
|
||||
--nt_bg_white_2_70_2_alpha: rgba(38, 38, 38, 0.7);
|
||||
--nt_bg_white_2_90_2_alpha: rgba(38, 38, 38, 0.9);
|
||||
--nt_bg_white_2_97_2_alpha: rgba(38, 38, 38, 0.97);
|
||||
--nt_bg_white_2_40_2_alpha: rgba(38, 38, 38, 0.4);
|
||||
--nt_bg_white_2_30_2_alpha: rgba(38, 38, 38, 0.3);
|
||||
--nt_text_white_2_80_2_alpha: rgba(255, 255, 255, 0.8);
|
||||
--nt_brand_standard_2_50_2_alpha: rgba(0, 102, 204, 0.5);
|
||||
--nt_bg_nav_secondary_2_60_2_alpha: rgba(27, 27, 27, 0.6);
|
||||
--nt_bg_nav_2_60_2_alpha: rgba(17, 17, 17, 0.6);
|
||||
--nt_feedback_error_2_10_2_alpha: rgba(247, 76, 48, 0.1);
|
||||
--nt_brand_standard_2_10_2_alpha: rgba(0, 102, 204, 0.1);
|
||||
--nt_on_brand_primary_2_40_2_alpha: rgba(255, 255, 255, 0.4);
|
||||
--nt_text_primary_2_72_2_alpha: rgba(255, 255, 255, 0.72);
|
||||
--nt_text_white_2_72_2_alpha: rgba(255, 255, 255, 0.72);
|
||||
|
||||
--border_secondary: 1px solid rgba(0, 0, 0, 0.2);
|
||||
--border_primary: 1px solid rgba(117, 117, 117, 0.4);
|
||||
|
||||
--shadow_bg_top: 0px 4px 8px rgba(0, 0, 0, 0.26);
|
||||
--shadow_bg_middle_secondary: 0px 8px 16px rgba(0, 0, 0, 0.14);
|
||||
--shadow_bg_middle_primary: 0px 32px 64px rgba(0, 0, 0, 0.37), 0px 2px 21px rgba(0, 0, 0, 0.37);
|
||||
--shadow_bg_bottom_inactive: 0px 32px 64px rgba(0, 0, 0, 0.56), 0px 2px 21px rgba(0, 0, 0, 0.55);
|
||||
--shadow_bg_bottom_active: 0px 32px 64px rgba(0, 0, 0, 0.56), 0px 2px 21px rgba(0, 0, 0, 0.55);
|
||||
|
||||
--brand_standard: #0066ccff;
|
||||
--on_brand_primary: #ffffffff;
|
||||
--on_brand_secondary: #ffffffff;
|
||||
--text_primary: #ffffffe6;
|
||||
--text_primary_light: #ffffff99;
|
||||
--text_secondary_02: #666666ff;
|
||||
--text_white: #ffffffe6;
|
||||
--text_secondary_01: #808080ff;
|
||||
--text_black: #000000ff;
|
||||
--on_bg_text: #808080ff;
|
||||
--text_link: #2d77e5ff;
|
||||
--text_secondary: #ffffff99;
|
||||
--text_tertiary: #ffffff66;
|
||||
--icon_primary: #ffffffb3;
|
||||
--icon_secondary_01: #666666ff;
|
||||
--icon_secondary_02: #4d4d4dff;
|
||||
--icon_white: #ffffffff;
|
||||
--icon_red: #ff3352ff;
|
||||
--icon_black: #000000ff;
|
||||
--icon_secondary: #ffffff80;
|
||||
--icon_tertiary: #ffffff66;
|
||||
--feedback_success: #15d173ff;
|
||||
--feedback_warning: #ffb300ff;
|
||||
--feedback_error: #f74c30ff;
|
||||
--bg_grey_standard: #1a1a1aff;
|
||||
--bg_white: #262626ff;
|
||||
--bg_list: #1b1b1bff;
|
||||
--bg_aio_1: #1a1a1aff;
|
||||
--bg_aio_2: #1a1a1aff;
|
||||
--bg_aio_3: #1a1a1aff;
|
||||
--bg_aio_4: #1a1a1aff;
|
||||
--bg_nav: #111111ff;
|
||||
--mac_bg_nav: #0000001a;
|
||||
--bg_bottom_standard: #111111ff;
|
||||
--bg_bottom_light: #1b1b1bff;
|
||||
--bg_middle_standard: #1b1b1bff;
|
||||
--bg_middle_light: #262626ff;
|
||||
--bg_top_standard: #262626ff;
|
||||
--bg_top_light: #303030ff;
|
||||
--bg_nav_secondary: #1b1b1bff;
|
||||
--bubble_host: #262626ff;
|
||||
--bubble_guest: #262626ff;
|
||||
--bubble_host_text: #f2f2f2;
|
||||
--bubble_guest_text: #f2f2f2ff;
|
||||
--bubble_host_1: #262626ff;
|
||||
--bubble_host_2: #262626ff;
|
||||
--fg_grey_standard: #ffffff33;
|
||||
--fg_white: #262626ff;
|
||||
--fg_grey_light: #00000033;
|
||||
--fill_standard_secondary: #ffffff0f;
|
||||
--fill_standard_primary: #ffffff33;
|
||||
--fill_light_primary: #262626ff;
|
||||
--fill_light_secondary: #ffffff0f;
|
||||
--divider_standard: #ffffff0a;
|
||||
--divider_dark: #ffffff14;
|
||||
--border_standard: #ffffff0f;
|
||||
--border_dark: #ffffff14;
|
||||
--overlay_hover: #ffffff14;
|
||||
--overlay_hover_brand: #ffffff14;
|
||||
--overlay_pressed_brand: #00000029;
|
||||
--overlay_active_brand: #0066ccff;
|
||||
--overlay_top: #ffffff0f;
|
||||
--overlay_mask_standard: #00000080;
|
||||
--overlay_mask_dark: #00000099;
|
||||
--overlay_pressed: #00000029;
|
||||
--overlay_active: #ffffff1f;
|
||||
--overlay_mask_aio: #00000000;
|
||||
--blur_standard: #000000cc;
|
||||
--blur_superlight: #0000001a;
|
||||
--blur_middle_standard: #262626cc;
|
||||
--blur_bottom_superlight: #0000001a;
|
||||
--extend_blue: #002f65ff;
|
||||
--svip_red: #ff4222ff;
|
||||
--tag_sage_green_bg: #a3c4c633;
|
||||
--tag_sage_green_text: #769698ff;
|
||||
--tag_red_bg: #ff3f3233;
|
||||
--tag_red_text: #f74c30ff;
|
||||
--tag_orange_text: #ff8d40ff;
|
||||
--tag_orange_bg: #ff862e33;
|
||||
--tag_purple_text: #aa76f6ff;
|
||||
--tag_purple_bg: #b27eff33;
|
||||
--tag_blue_text: #0066ccff;
|
||||
--tag_blue_bg: #0099ff33;
|
||||
--tag_blue: #0099ff40;
|
||||
--tag_red: #ff862e33;
|
||||
--border_white: #262626ff;
|
||||
--border_secondary: #00000033;
|
||||
--border_primary: #75757566;
|
||||
--mac_border_primary: #ffffff14;
|
||||
--mac_border_secondary: #ffffff0a;
|
||||
--host_bubble_bg_css_value: #262626;
|
||||
--on_bubble_host_text: #f2f2f2ff;
|
||||
--brand_text: #0066ccff;
|
||||
|
||||
--text-primary: #FFFFFF;
|
||||
--text-primary-light: #CCCCCC;
|
||||
--text-secondary-01: #999;
|
||||
--text-secondary-02: #666666;
|
||||
--text-white: #fff;
|
||||
--text-brand: #0099ff;
|
||||
--text-link: #2d77e5;
|
||||
--text-success: #12d173;
|
||||
--text-warning: #ffb300;
|
||||
--text-error: #ff5967;
|
||||
--icon-primary: #999999;
|
||||
--icon-secondary-01: #999999;
|
||||
--icon-secondary-02: #999999;
|
||||
--icon-white: #fff;
|
||||
--icon-brand: #0099ff;
|
||||
--icon-success: #15d173;
|
||||
--icon-warning: #ffb300;
|
||||
--icon-error: #ff5967;
|
||||
--button-primary-default: #0066CC;
|
||||
--button-primary-hover: #19467F;
|
||||
--button-primary-pressed: #0A1F33;
|
||||
--button-primary-disable: #232323;
|
||||
--button-secondary-default: #232323;
|
||||
--button-secondary-hover: #1F1F1F;
|
||||
--button-secondary-pressed: #1A1A1A;
|
||||
--button-secondary-disable: #1A1A1A;
|
||||
--button-white-default: #FFFFFF;
|
||||
--button-white-hover: #FAFAFA;
|
||||
--button-white-pressed: #F5F5F5;
|
||||
--button-white-disable: #FFFFFF;
|
||||
--button-error-default: #FF5967;
|
||||
--button-error-hover: #FF8B94;
|
||||
--button-error-pressed: #E6505C;
|
||||
--button-error-disable: #FFEEEF;
|
||||
--bubble-host: #262626;
|
||||
--bubble-guest: #262626;
|
||||
--divider-standard: #242424;
|
||||
--divider-light: #4D4D4D;
|
||||
--divider-brand: #0099FF;
|
||||
--background-01: #FFFFFF;
|
||||
--background-02: #242424;
|
||||
--background-03: #181818;
|
||||
--background-04: #1F1F1F;
|
||||
--background-05: #000000;
|
||||
--background-dialogue: #262626;
|
||||
--hover-list: #292929;
|
||||
--hover-icon: #333333;
|
||||
--hover-link: #81ADEF;
|
||||
--press-list: #383838;
|
||||
--press-icon: #262626;
|
||||
--press-link: #286BCE;
|
||||
--badge-brand: #0099FF;
|
||||
--badge-red: #FF5967;
|
||||
--badge-grey: #4D4D4D;
|
||||
--audio-hangup: #FF3350;
|
||||
--gray-black: #000;
|
||||
--gray-20: #333333;
|
||||
--gray-40: #666666;
|
||||
--gray-60: #999999;
|
||||
--gray-80: #cccccc;
|
||||
--gray-90: #e5e5e5;
|
||||
--gray-96: #f5f5f5;
|
||||
--gray-white: #ffffff;
|
||||
--blue-dark: #0057BD;
|
||||
--blue-standard: #0066CC;
|
||||
--blue-light: #0072E4;
|
||||
--blue-superlight: #E6F5FF;
|
||||
--green-dark: #12BC67;
|
||||
--green-standard: #15D173;
|
||||
--green-light: #5BDE9D;
|
||||
--green-superlight: #E8FAF1;
|
||||
--yellow-dark: #E5A000;
|
||||
--yellow-standard: #FFB300;
|
||||
--yellow-light: #FFC94C;
|
||||
--yellow-superlight: #FFF7E5;
|
||||
--orange-dark: #E57E39;
|
||||
--orange-standard: #FF8D40;
|
||||
--orange-light: #FFAE78;
|
||||
--orange-superlight: #FFF3EB;
|
||||
--red-dark: #E6505C;
|
||||
--red-standard: #FF5967;
|
||||
--red-light: #FF8B94;
|
||||
--red-superlight: #FFEEEF;
|
||||
--pink-dark: #E55BA0;
|
||||
--pink-standard: #FF66B3;
|
||||
--pink-light: #FF93C9;
|
||||
--pink-superlight: #FFEFF7;
|
||||
--indigo-dark: #775CE6;
|
||||
--indigo-standard: #8566FF;
|
||||
--indigo-light: #A994FF;
|
||||
--indigo-superlight: #F3F0FF;
|
||||
--list-hover: rgba(71, 71, 71);
|
||||
--list-pressed: rgba(28, 28, 28);
|
||||
--background_01: #ffffff;
|
||||
--background_02: #292929;
|
||||
--background_03: #1A1A1A;
|
||||
--background_04: #212121;
|
||||
--background_05: #212121;
|
||||
--background_dialogue: #292929;
|
||||
--sidebar_win: rgba(0,0,0,0.8);
|
||||
--sidebar_mac: rgba(0,0,0,0.1);
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
970
static/assets/index-D10_5xOh.js
Normal file
970
static/assets/index-D10_5xOh.js
Normal file
File diff suppressed because one or more lines are too long
1
static/assets/index-DQOoc4ch.css
Normal file
1
static/assets/index-DQOoc4ch.css
Normal file
File diff suppressed because one or more lines are too long
7
static/assets/qrcode.min.js
vendored
7
static/assets/qrcode.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,469 +0,0 @@
|
||||
const SettingList = (items, title, isCollapsible = false, direction = "column") => {
|
||||
return `<setting-section ${""}>
|
||||
<setting-panel>
|
||||
<setting-list ${direction ? `data-direction="${direction}"` : ""} ${isCollapsible ? "is-collapsible" : ""} ${""}>
|
||||
${items.join("")}
|
||||
</setting-list>
|
||||
</setting-panel>
|
||||
</setting-section>`;
|
||||
};
|
||||
|
||||
const SettingItem = (title, subtitle, action, id, visible = true) => {
|
||||
return `<setting-item ${id ? `id="${id}"` : ""} ${!visible ? "is-hidden" : ""}>
|
||||
<div>
|
||||
<setting-text>${title}</setting-text>
|
||||
${subtitle ? `<setting-text data-type="secondary">${subtitle}</setting-text>` : ""}
|
||||
</div>
|
||||
${action ? `<div>${action}</div>` : ""}
|
||||
</setting-item>`;
|
||||
};
|
||||
|
||||
const SettingButton = (text, id, type = "secondary") => {
|
||||
return `<setting-button ${type ? `data-type="${type}"` : ""} ${id ? `id="${id}"` : ""}>${text}</setting-button>`;
|
||||
};
|
||||
|
||||
const SettingSwitch = (configKey, isActive = false, extraData) => {
|
||||
return `<setting-switch
|
||||
${configKey ? `data-config-key="${configKey}"` : ""}
|
||||
${isActive ? "is-active" : ""}
|
||||
${extraData ? Object.keys(extraData).map((key) => `data-${key}="${extraData[key]}"`) : ""}
|
||||
>
|
||||
</setting-switch>`;
|
||||
};
|
||||
|
||||
const SettingOption = (text, value, isSelected = false) => {
|
||||
return `<setting-option ${value ? `data-value="${value}"` : ""} ${isSelected ? "is-selected" : ""}>${text}</setting-option>`;
|
||||
};
|
||||
|
||||
const SelectTemplate = document.createElement("template");
|
||||
SelectTemplate.innerHTML = `<style>
|
||||
.hidden { display: none !important; }
|
||||
</style>
|
||||
<div part="parent">
|
||||
<div part="button">
|
||||
<input type="text" placeholder="请选择" part="current-text" />
|
||||
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" part="button-arrow">
|
||||
<path d="M12 6.0001L8.00004 10L4 6" stroke="currentColor" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<ul class="hidden" part="option-list"><slot></slot></ul>
|
||||
</div>`;
|
||||
window.customElements.define(
|
||||
"ob-setting-select",
|
||||
class extends HTMLElement {
|
||||
_button;
|
||||
_text;
|
||||
_context;
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: "open" });
|
||||
this.shadowRoot?.append(SelectTemplate.content.cloneNode(true));
|
||||
this._button = this.shadowRoot.querySelector('div[part="button"]');
|
||||
this._text = this.shadowRoot.querySelector('input[part="current-text"]');
|
||||
this._context = this.shadowRoot.querySelector('ul[part="option-list"]');
|
||||
const buttonClick = () => {
|
||||
const isHidden = this._context.classList.toggle("hidden");
|
||||
window[`${isHidden ? "remove" : "add"}EventListener`]("pointerdown", windowPointerDown);
|
||||
};
|
||||
const windowPointerDown = ({ target }) => {
|
||||
if (!this.contains(target)) buttonClick();
|
||||
};
|
||||
this._button.addEventListener("click", buttonClick);
|
||||
this._context.addEventListener("click", (event) => {
|
||||
const { target } = event;
|
||||
if (target.tagName !== "SETTING-OPTION") return;
|
||||
buttonClick();
|
||||
if (target.hasAttribute("is-selected")) return;
|
||||
this.querySelectorAll("setting-option[is-selected]").forEach((dom) => dom.toggleAttribute("is-selected"));
|
||||
target.toggleAttribute("is-selected");
|
||||
this._text.value = target.textContent;
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("selected", {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: {
|
||||
name: target.textContent,
|
||||
value: target.dataset.value
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
this._text.value = this.querySelector("setting-option[is-selected]")?.textContent;
|
||||
}
|
||||
}
|
||||
);
|
||||
const SettingSelect = (items, configKey, configValue) => {
|
||||
return `<ob-setting-select ${`data-config-key="${configKey}"` }>
|
||||
${items.map((e, i) => {
|
||||
return SettingOption(e.text, e.value, configValue ? configValue === e.value : i === 0);
|
||||
}).join("")}
|
||||
</ob-setting-select>`;
|
||||
};
|
||||
|
||||
class WebUiApiOB11ConfigWrapper {
|
||||
retCredential = "";
|
||||
async Init(Credential) {
|
||||
this.retCredential = Credential;
|
||||
}
|
||||
async GetOB11Config() {
|
||||
const ConfigResponse = await fetch("../api/OB11Config/GetConfig", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: "Bearer " + this.retCredential,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
if (ConfigResponse.status == 200) {
|
||||
const ConfigResponseJson = await ConfigResponse.json();
|
||||
if (ConfigResponseJson.code == 0) {
|
||||
return ConfigResponseJson?.data;
|
||||
}
|
||||
}
|
||||
return {};
|
||||
}
|
||||
async SetOB11Config(config) {
|
||||
const ConfigResponse = await fetch("../api/OB11Config/SetConfig", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: "Bearer " + this.retCredential,
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({ config: JSON.stringify(config) })
|
||||
});
|
||||
if (ConfigResponse.status == 200) {
|
||||
const ConfigResponseJson = await ConfigResponse.json();
|
||||
if (ConfigResponseJson.code == 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const OB11ConfigWrapper = new WebUiApiOB11ConfigWrapper();
|
||||
|
||||
async function onSettingWindowCreated(view) {
|
||||
const isEmpty = (value) => value === void 0 || value === void 0 || value === "";
|
||||
await OB11ConfigWrapper.Init(localStorage.getItem("auth"));
|
||||
const ob11Config = await OB11ConfigWrapper.GetOB11Config();
|
||||
const setOB11Config = (key, value) => {
|
||||
const configKey = key.split(".");
|
||||
if (configKey.length === 2) {
|
||||
ob11Config[configKey[1]] = value;
|
||||
} else if (configKey.length === 3) {
|
||||
ob11Config[configKey[1]][configKey[2]] = value;
|
||||
}
|
||||
};
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(
|
||||
[
|
||||
"<div>",
|
||||
`<setting-section id="napcat-error">
|
||||
<setting-panel><pre><code></code></pre></setting-panel>
|
||||
</setting-section>`,
|
||||
SettingList([
|
||||
SettingItem(
|
||||
'<span id="napcat-update-title">Napcat</span>',
|
||||
void 0,
|
||||
SettingButton("V4.0.3", "napcat-update-button", "secondary")
|
||||
)
|
||||
]),
|
||||
SettingList([
|
||||
SettingItem(
|
||||
"启用 HTTP 服务",
|
||||
void 0,
|
||||
SettingSwitch("ob11.http.enable", ob11Config.http.enable, {
|
||||
"control-display-id": "config-ob11-http-port"
|
||||
})
|
||||
),
|
||||
SettingItem(
|
||||
"HTTP 服务监听端口",
|
||||
void 0,
|
||||
`<div class="q-input"><input class="q-input__inner" data-config-key="ob11.http.port" type="number" min="1" max="65534" value="${ob11Config.http.port}" placeholder="${ob11Config.http.port}" /></div>`,
|
||||
"config-ob11-http-port",
|
||||
ob11Config.http.enable
|
||||
),
|
||||
SettingItem(
|
||||
"启用 HTTP 心跳",
|
||||
void 0,
|
||||
SettingSwitch("ob11.http.enableHeart", ob11Config.http.enableHeart, {
|
||||
"control-display-id": "config-ob11-HTTP.enableHeart"
|
||||
})
|
||||
),
|
||||
SettingItem(
|
||||
"启用 HTTP 事件上报",
|
||||
void 0,
|
||||
SettingSwitch("ob11.http.enablePost", ob11Config.http.enablePost, {
|
||||
"control-display-id": "config-ob11-http-postUrls"
|
||||
})
|
||||
),
|
||||
`<div class="config-host-list" id="config-ob11-http-postUrls" ${ob11Config.http.enablePost ? "" : "is-hidden"}>
|
||||
<setting-item data-direction="row">
|
||||
<div>
|
||||
<setting-text>HTTP 事件上报密钥</setting-text>
|
||||
</div>
|
||||
<div class="q-input">
|
||||
<input id="config-ob11-http-secret" class="q-input__inner" data-config-key="ob11.http.secret" type="text" value="${ob11Config.http.secret}" placeholder="未设置" />
|
||||
</div>
|
||||
</setting-item>
|
||||
<setting-item data-direction="row">
|
||||
<div>
|
||||
<setting-text>HTTP 事件上报地址</setting-text>
|
||||
</div>
|
||||
<setting-button id="config-ob11-http-postUrls-add" data-type="primary">添加</setting-button>
|
||||
</setting-item>
|
||||
<div id="config-ob11-http-postUrls-list"></div>
|
||||
</div>`,
|
||||
SettingItem(
|
||||
"启用正向 WebSocket 服务",
|
||||
void 0,
|
||||
SettingSwitch("ob11.ws.enable", ob11Config.ws.enable, {
|
||||
"control-display-id": "config-ob11-ws-port"
|
||||
})
|
||||
),
|
||||
SettingItem(
|
||||
"正向 WebSocket 服务监听端口",
|
||||
void 0,
|
||||
`<div class="q-input"><input class="q-input__inner" data-config-key="ob11.ws.port" type="number" min="1" max="65534" value="${ob11Config.ws.port}" placeholder="${ob11Config.ws.port}" /></div>`,
|
||||
"config-ob11-ws-port",
|
||||
ob11Config.ws.enable
|
||||
),
|
||||
SettingItem(
|
||||
"启用反向 WebSocket 服务",
|
||||
void 0,
|
||||
SettingSwitch("ob11.reverseWs.enable", ob11Config.reverseWs.enable, {
|
||||
"control-display-id": "config-ob11-reverseWs-urls"
|
||||
})
|
||||
),
|
||||
`<div class="config-host-list" id="config-ob11-reverseWs-urls" ${ob11Config.reverseWs.enable ? "" : "is-hidden"}>
|
||||
<setting-item data-direction="row">
|
||||
<div>
|
||||
<setting-text>反向 WebSocket 监听地址</setting-text>
|
||||
</div>
|
||||
<setting-button id="config-ob11-reverseWs-urls-add" data-type="primary">添加</setting-button>
|
||||
</setting-item>
|
||||
<div id="config-ob11-reverseWs-urls-list"></div>
|
||||
</div>`,
|
||||
SettingItem(
|
||||
" WebSocket 服务心跳间隔",
|
||||
"控制每隔多久发送一个心跳包，单位为毫秒",
|
||||
`<div class="q-input"><input class="q-input__inner" data-config-key="ob11.heartInterval" type="number" min="1000" value="${ob11Config.heartInterval}" placeholder="${ob11Config.heartInterval}" /></div>`
|
||||
),
|
||||
SettingItem(
|
||||
"Access token",
|
||||
void 0,
|
||||
`<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="ob11.token" type="text" value="${ob11Config.token}" placeholder="未设置" /></div>`
|
||||
),
|
||||
SettingItem(
|
||||
"新消息上报格式",
|
||||
`如客户端无特殊需求推荐保持默认设置，两者的详细差异可参考 <a href="javascript:LiteLoader.api.openExternal('https://github.com/botuniverse/onebot-11/tree/master/message#readme');">OneBot v11 文档</a>`,
|
||||
SettingSelect(
|
||||
[
|
||||
{ text: "消息段", value: "array" },
|
||||
{ text: "CQ码", value: "string" }
|
||||
],
|
||||
"ob11.messagePostFormat",
|
||||
ob11Config.messagePostFormat
|
||||
)
|
||||
),
|
||||
SettingItem(
|
||||
"音乐卡片签名地址",
|
||||
void 0,
|
||||
`<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="ob11.musicSignUrl" type="text" value="${ob11Config.musicSignUrl}" placeholder="未设置" /></div>`,
|
||||
"ob11.musicSignUrl"
|
||||
),
|
||||
SettingItem(
|
||||
"启用本地进群时间与发言时间记录",
|
||||
void 0,
|
||||
SettingSwitch("ob11.GroupLocalTime.Record", ob11Config.GroupLocalTime.Record, {
|
||||
"control-display-id": "config-ob11-GroupLocalTime-RecordList"
|
||||
})
|
||||
),
|
||||
`<div class="config-host-list" id="config-ob11-GroupLocalTime-RecordList" ${ob11Config.GroupLocalTime.Record ? "" : "is-hidden"}>
|
||||
<setting-item data-direction="row">
|
||||
<div>
|
||||
<setting-text>群列表</setting-text>
|
||||
</div>
|
||||
<setting-button id="config-ob11-GroupLocalTime-RecordList-add" data-type="primary">添加</setting-button>
|
||||
</setting-item>
|
||||
<div id="config-ob11-GroupLocalTime-RecordList-list"></div>
|
||||
</div>`,
|
||||
SettingItem(
|
||||
"",
|
||||
void 0,
|
||||
SettingButton("保存", "config-ob11-save", "primary")
|
||||
)
|
||||
]),
|
||||
SettingList([
|
||||
SettingItem(
|
||||
"上报 Bot 自身发送的消息",
|
||||
"上报 event 为 message_sent",
|
||||
SettingSwitch("ob11.reportSelfMessage", ob11Config.reportSelfMessage)
|
||||
)
|
||||
]),
|
||||
SettingList([
|
||||
SettingItem(
|
||||
"GitHub 仓库",
|
||||
"https://github.com/NapNeko/NapCatQQ",
|
||||
SettingButton("点个星星", "open-github")
|
||||
),
|
||||
SettingItem("NapCat 文档", "", SettingButton("看看文档", "open-docs"))
|
||||
]),
|
||||
SettingItem(
|
||||
"Telegram 群",
|
||||
"https://t.me/+nLZEnpne-pQ1OWFl",
|
||||
SettingButton("进去逛逛", "open-telegram")
|
||||
),
|
||||
SettingItem(
|
||||
"QQ 群",
|
||||
"518662028",
|
||||
SettingButton("我要进去", "open-qq-group")
|
||||
),
|
||||
"</div>"
|
||||
].join(""),
|
||||
"text/html"
|
||||
);
|
||||
doc.querySelector("#open-github")?.addEventListener("click", () => {
|
||||
window.open("https://github.com/NapNeko/NapCatQQ", "_blank");
|
||||
});
|
||||
doc.querySelector("#open-docs")?.addEventListener("click", () => {
|
||||
window.open("https://napneko.github.io/", "_blank");
|
||||
});
|
||||
doc.querySelector("#open-telegram")?.addEventListener("click", () => {
|
||||
window.open("https://t.me/+nLZEnpne-pQ1OWFl", "_blank");
|
||||
});
|
||||
doc.querySelector("#open-qq-group")?.addEventListener("click", () => {
|
||||
window.open("https://qm.qq.com/q/VfjAq5HIMS", "_blank");
|
||||
});
|
||||
const buildHostListItem = (type, host, index, inputAttrs = {}) => {
|
||||
const dom = {
|
||||
container: document.createElement("setting-item"),
|
||||
input: document.createElement("input"),
|
||||
inputContainer: document.createElement("div"),
|
||||
deleteBtn: document.createElement("setting-button")
|
||||
};
|
||||
dom.container.classList.add("setting-host-list-item");
|
||||
dom.container.dataset.direction = "row";
|
||||
Object.assign(dom.input, inputAttrs);
|
||||
dom.input.classList.add("q-input__inner");
|
||||
dom.input.type = "url";
|
||||
dom.input.value = host;
|
||||
dom.input.addEventListener("input", () => {
|
||||
ob11Config[type.split("-")[0]][type.split("-")[1]][index] = dom.input.value;
|
||||
});
|
||||
dom.inputContainer.classList.add("q-input");
|
||||
dom.inputContainer.appendChild(dom.input);
|
||||
dom.deleteBtn.innerHTML = "删除";
|
||||
dom.deleteBtn.dataset.type = "secondary";
|
||||
dom.deleteBtn.addEventListener("click", () => {
|
||||
ob11Config[type.split("-")[0]][type.split("-")[1]].splice(index, 1);
|
||||
initReverseHost(type);
|
||||
});
|
||||
dom.container.appendChild(dom.inputContainer);
|
||||
dom.container.appendChild(dom.deleteBtn);
|
||||
return dom.container;
|
||||
};
|
||||
const buildHostList = (hosts, type, inputAttr = {}) => {
|
||||
const result = [];
|
||||
hosts?.forEach((host, index) => {
|
||||
result.push(buildHostListItem(type, host, index, inputAttr));
|
||||
});
|
||||
return result;
|
||||
};
|
||||
const addReverseHost = (type, doc2 = document, inputAttr = {}) => {
|
||||
type = type.replace(/\./g, "-");
|
||||
const hostContainerDom = doc2.body.querySelector(
|
||||
`#config-ob11-${type}-list`
|
||||
);
|
||||
hostContainerDom?.appendChild(
|
||||
buildHostListItem(
|
||||
type,
|
||||
"",
|
||||
ob11Config[type.split("-")[0]][type.split("-")[1]].length,
|
||||
inputAttr
|
||||
)
|
||||
);
|
||||
ob11Config[type.split("-")[0]][type.split("-")[1]].push("");
|
||||
};
|
||||
const initReverseHost = (type, doc2 = document) => {
|
||||
type = type.replace(/\./g, "-");
|
||||
const hostContainerDom = doc2.body?.querySelector(
|
||||
`#config-ob11-${type}-list`
|
||||
);
|
||||
if (hostContainerDom) {
|
||||
[...hostContainerDom.childNodes].forEach((dom) => dom.remove());
|
||||
buildHostList(
|
||||
ob11Config[type.split("-")[0]][type.split("-")[1]],
|
||||
type
|
||||
).forEach((dom) => {
|
||||
hostContainerDom?.appendChild(dom);
|
||||
});
|
||||
}
|
||||
};
|
||||
initReverseHost("http.postUrls", doc);
|
||||
initReverseHost("reverseWs.urls", doc);
|
||||
initReverseHost("GroupLocalTime.RecordList", doc);
|
||||
doc.querySelector("#config-ob11-http-postUrls-add")?.addEventListener(
|
||||
"click",
|
||||
() => addReverseHost("http.postUrls", document, {
|
||||
placeholder: "如：http://127.0.0.1:5140/onebot"
|
||||
})
|
||||
);
|
||||
doc.querySelector("#config-ob11-reverseWs-urls-add")?.addEventListener(
|
||||
"click",
|
||||
() => addReverseHost("reverseWs.urls", document, {
|
||||
placeholder: "如：ws://127.0.0.1:5140/onebot"
|
||||
})
|
||||
);
|
||||
doc.querySelector("#config-ob11-GroupLocalTime-RecordList-add")?.addEventListener(
|
||||
"click",
|
||||
() => addReverseHost("GroupLocalTime.RecordList", document, {
|
||||
placeholder: "此处填写群号 -1为全部"
|
||||
})
|
||||
);
|
||||
doc.querySelector("#config-ffmpeg-select")?.addEventListener("click", () => {
|
||||
});
|
||||
doc.querySelector("#config-open-log-path")?.addEventListener("click", () => {
|
||||
});
|
||||
doc.querySelectorAll("setting-switch[data-config-key]").forEach((dom) => {
|
||||
dom.addEventListener("click", () => {
|
||||
const active = dom.getAttribute("is-active") == void 0;
|
||||
setOB11Config(dom.dataset.configKey, active);
|
||||
if (active) dom.setAttribute("is-active", "");
|
||||
else dom.removeAttribute("is-active");
|
||||
if (!isEmpty(dom.dataset.controlDisplayId)) {
|
||||
const displayDom = document.querySelector(
|
||||
//@ts-expect-error 等待修复
|
||||
`#${dom.dataset.controlDisplayId}`
|
||||
);
|
||||
if (active) displayDom?.removeAttribute("is-hidden");
|
||||
else displayDom?.setAttribute("is-hidden", "");
|
||||
}
|
||||
});
|
||||
});
|
||||
doc.querySelectorAll(
|
||||
"setting-item .q-input input.q-input__inner[data-config-key]"
|
||||
).forEach((dom) => {
|
||||
dom.addEventListener("input", () => {
|
||||
const Type = dom.getAttribute("type");
|
||||
const configKey = dom.dataset.configKey;
|
||||
const configValue = Type === "number" ? parseInt(dom.value) >= 1 ? parseInt(dom.value) : 1 : dom.value;
|
||||
setOB11Config(configKey, configValue);
|
||||
});
|
||||
});
|
||||
doc.querySelectorAll("ob-setting-select[data-config-key]").forEach((dom) => {
|
||||
dom?.addEventListener("selected", (e) => {
|
||||
const configKey = dom.dataset.configKey;
|
||||
const configValue = e.detail.value;
|
||||
setOB11Config(configKey, configValue);
|
||||
});
|
||||
});
|
||||
doc.querySelector("#config-ob11-save")?.addEventListener("click", () => {
|
||||
OB11ConfigWrapper.SetOB11Config(ob11Config);
|
||||
alert("保存成功");
|
||||
});
|
||||
doc.body.childNodes.forEach((node) => {
|
||||
view.appendChild(node);
|
||||
});
|
||||
}
|
||||
|
||||
export { onSettingWindowCreated };
|
||||
@@ -1,201 +0,0 @@
|
||||
body, html {
|
||||
background: var(--bg_bottom_standard);
|
||||
color: var(--text_primary);
|
||||
font-family: "Color Emoji", system-ui, "PingFang SC", PingFangSC-Regular, "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", Arial, Helvetica, sans-serif, "Apple Braille", "Color Emoji Fix";
|
||||
min-height: 100vh;
|
||||
scroll-behavior: smooth;
|
||||
width: 100%;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
--z_index_popover: 999;
|
||||
--nt_mix_tokens: nt_brand_standard_2_overlay_hover_brand_2_mix,nt_brand_standard_2_overlay_pressed_brand_2_mix,nt_feedback_error_2_overlay_hover_brand_2_mix,nt_feedback_error_2_overlay_pressed_brand_2_mix,nt_icon_white_2_overlay_hover_2_mix,nt_icon_white_2_overlay_pressed_2_mix,nt_bubble_host_2_overlay_pressed_brand_2_mix,nt_bg_white_2_overlay_pressed_brand_2_mix,nt_bg_white_2_overlay_hover_2_mix,nt_bg_white_2_overlay_pressed_2_mix,nt_fg_white_2_overlay_hover_2_mix,nt_fg_white_2_overlay_pressed_2_mix,nt_icon_red_2_overlay_hover_2_mix,nt_icon_red_2_overlay_pressed_2_mix,nt_fg_grey_standard_2_overlay_hover_2_mix,nt_fg_grey_standard_2_overlay_pressed_2_mix,nt_bubble_guest_2_overlay_pressed_2_mix,nt_icon_primary_2_20_2_alpha,nt_bg_grey_standard_2_95_2_alpha,nt_tag_red_2_20_2_alpha,nt_tag_red_2_25_2_alpha,nt_tag_blue_2_20_2_alpha,nt_tag_blue_2_25_2_alpha,nt_tag_blue_2_10_2_alpha,nt_tag_purple_2_20_2_alpha,nt_brand_standard_2_20_2_alpha,nt_tag_sage_green_2_20_2_alpha,nt_feedback_error_2_20_2_alpha,nt_text_white_2_60_2_alpha,nt_bg_white_2_70_2_alpha,nt_bg_white_2_90_2_alpha,nt_bg_white_2_97_2_alpha,nt_bg_white_2_40_2_alpha,nt_bg_white_2_30_2_alpha,nt_text_white_2_80_2_alpha,nt_brand_standard_2_50_2_alpha,nt_bg_nav_secondary_2_60_2_alpha,nt_bg_nav_2_60_2_alpha,nt_feedback_error_2_10_2_alpha,nt_brand_standard_2_10_2_alpha,nt_on_brand_primary_2_40_2_alpha,nt_text_primary_2_72_2_alpha,nt_text_white_2_72_2_alpha;
|
||||
}
|
||||
|
||||
a, address, article, aside, b, blockquote, body, div, em, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, label, legend, li, main, nav, ol, p, s, section, span, table, tbody, td, tfoot, th, thead, tr, ul {
|
||||
box-sizing: border-box;
|
||||
font-size: 100%;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
border: 0px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#app {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.fake-bar {
|
||||
position: fixed;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* ======== Input ======== */
|
||||
.q-input {
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
color: var(--text_secondary);
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.q-input input, .q-input textarea {
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
color: var(--text_primary);
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0%;
|
||||
font-size: 14px;
|
||||
height: fit-content;
|
||||
outline-color: initial;
|
||||
outline-style: none;
|
||||
outline-width: initial;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* ======== Switch ======== */
|
||||
.q-switch {
|
||||
background-color: var(--fill_standard_primary);
|
||||
border-radius: 14px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
transition-behavior: normal;
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.38, 0, 0.24, 1);
|
||||
transition-delay: 0s;
|
||||
transition-property: all;
|
||||
width: 28px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.q-switch__handle {
|
||||
border-radius: 5px;
|
||||
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
position: relative;
|
||||
transition-behavior: normal;
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.38, 0, 0.24, 1);
|
||||
transition-delay: 0s;
|
||||
transition-property: all;
|
||||
width: 10px;
|
||||
z-index: 2;
|
||||
background: var(--icon_white);
|
||||
}
|
||||
|
||||
.q-switch:not(.is-disabled):hover {
|
||||
background: var(--fill_standard_secondary);
|
||||
}
|
||||
|
||||
.q-switch:not(.is-disabled):active {
|
||||
background: var(--nt_bg_white_2_overlay_pressed_brand_2_mix);
|
||||
}
|
||||
.q-switch:not(.is-disabled):active .q-switch__handle {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.q-switch.is-active {
|
||||
background-color: var(--brand_standard);
|
||||
}
|
||||
|
||||
.q-switch.is-active .q-switch__handle {
|
||||
transform: translateX(12px);
|
||||
}
|
||||
|
||||
.q-switch.is-active:not(.is-disabled):hover {
|
||||
background: var(--nt_brand_standard_2_overlay_hover_brand_2_mix);
|
||||
}
|
||||
|
||||
.q-switch.is-active:not(.is-disabled):active {
|
||||
background: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix);
|
||||
}
|
||||
.q-switch.is-active:not(.is-disabled):active .q-switch__handle {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
/* ======== Button ======== */
|
||||
.q-button {
|
||||
align-items: center;
|
||||
background-color: var(--brand_standard);
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
display: inline-flex;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
line-height: 18px;
|
||||
outline-color: initial;
|
||||
outline-style: none;
|
||||
outline-width: initial;
|
||||
position: relative;
|
||||
vertical-align: text-bottom;
|
||||
border: 1px solid var(--fg_grey_standard);
|
||||
padding: 5px 11px;
|
||||
}
|
||||
|
||||
.q-button--small {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
min-width: 62px;
|
||||
padding: 4px 7px;
|
||||
}
|
||||
|
||||
.q-button--primary {
|
||||
background-color: var(--brand_standard);
|
||||
border-color: var(--brand_standard);
|
||||
color: var(--on_brand_primary);
|
||||
}
|
||||
|
||||
.q-button--secondary {
|
||||
background-color: transparent;
|
||||
border-color: var(--fg_grey_standard);
|
||||
color: var(--text_primary);
|
||||
}
|
||||
|
||||
.q-button:not([disabled]):hover {
|
||||
background-color: var(--overlay_hover);
|
||||
}
|
||||
|
||||
.q-button:not([disabled]):active {
|
||||
background-color: var(--overlay_pressed);
|
||||
}
|
||||
|
||||
.q-button--primary:hover {
|
||||
background-color: var(--nt_brand_standard_2_overlay_hover_brand_2_mix);
|
||||
border-color: var(--nt_brand_standard_2_overlay_hover_brand_2_mix);
|
||||
}
|
||||
|
||||
.q-button--primary:active {
|
||||
background-color: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix);
|
||||
border-color: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix);
|
||||
}
|
||||
|
||||
.q-button[disabled] {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.q-button--secondary[disabled] {
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -1,350 +0,0 @@
|
||||
*[is-disabled] {
|
||||
opacity: 0.3;
|
||||
-webkit-pointer-events: none;
|
||||
-moz-pointer-events: none;
|
||||
-ms-pointer-events: none;
|
||||
-o-pointer-events: none;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
setting-section::before {
|
||||
content: attr(data-title);
|
||||
display: block;
|
||||
margin: 0px 0px 8px 16px;
|
||||
color: var(--text_primary);
|
||||
font-weight: var(--font-bold);
|
||||
font-size: min(var(--font_size_3), 18px);
|
||||
line-height: min(var(--line_height_3), 24px);
|
||||
}
|
||||
|
||||
setting-panel {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
setting-section:last-child setting-panel {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
setting-list,
|
||||
setting-list[data-direction="column"] {
|
||||
display: flex;
|
||||
background-color: var(--fill_light_primary);
|
||||
border-radius: 8px;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
setting-list[data-direction="row"] {
|
||||
padding: 16px 0;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
setting-list[data-direction="row"],
|
||||
setting-list[data-direction="row"] * {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
setting-item {
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
background-color: var(--fill_light_primary);
|
||||
font-size: min(var(--font_size_3),18px);
|
||||
line-height: min(var(--line_height_3),24px);
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
setting-item > *:first-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
setting-list[data-direction="row"] setting-item {
|
||||
padding: 0;
|
||||
margin: 0 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
setting-list[data-direction="row"] setting-item > *:first-child {
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
setting-list[data-direction="row"] setting-item > *:first-child > * {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
setting-list setting-divider,
|
||||
setting-list[data-direction="column"] setting-divider {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: unset;
|
||||
height: 1px;
|
||||
margin: 0 16px;
|
||||
background-color: var(--border_standard);
|
||||
}
|
||||
|
||||
setting-list[data-direction="row"] setting-divider {
|
||||
width: 1px;
|
||||
height: unset;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
setting-text[data-type="secondary"] {
|
||||
margin-top: 4px;
|
||||
color: var(--text_secondary);
|
||||
font-size: min(var(--font_size_2),16px);
|
||||
line-height: min(var(--line_height_2),22px);
|
||||
}
|
||||
|
||||
setting-switch {
|
||||
--transition-timing: cubic-bezier(0.38, 0, 0.24, 1);
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 28px;
|
||||
height: 16px;
|
||||
background: var(--fill_standard_primary);
|
||||
border-radius: 14px;
|
||||
transition: background var(--transition-timing) .2s;
|
||||
}
|
||||
setting-switch::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
margin: 3px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: var(--icon_white);
|
||||
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px;
|
||||
border-radius: 5px;
|
||||
transition: width var(--transition-timing) .2s,
|
||||
left var(--transition-timing) .2s;
|
||||
}
|
||||
|
||||
setting-switch[is-active] {
|
||||
background: var(--brand_standard);
|
||||
}
|
||||
setting-switch[is-active]::after {
|
||||
left: calc(100% - 16px);
|
||||
}
|
||||
|
||||
setting-switch:hover {
|
||||
background: var(--fill_standard_secondary);
|
||||
}
|
||||
setting-switch[is-active]:hover {
|
||||
background: var(--nt_brand_standard_2_overlay_hover_brand_2_mix);
|
||||
}
|
||||
|
||||
setting-switch:active {
|
||||
background: var(--nt_bg_white_2_overlay_pressed_brand_2_mix);
|
||||
}
|
||||
setting-switch[is-active]:active {
|
||||
background: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix);
|
||||
}
|
||||
|
||||
setting-switch:active::after {
|
||||
width: 12px;
|
||||
}
|
||||
setting-switch[is-active]:active::after {
|
||||
left: calc(100% - 18px);
|
||||
}
|
||||
|
||||
setting-button,
|
||||
setting-button[data-type="secondary"] {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
padding: 5px 11px;
|
||||
min-width: 62px;
|
||||
background-color: transparent;
|
||||
color: var(--text_primary);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
justify-content: center;
|
||||
outline-color: initial;
|
||||
outline-style: none;
|
||||
outline-width: initial;
|
||||
vertical-align: text-bottom;
|
||||
border: 1px solid var(--fg_grey_standard);
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
setting-button[data-type="primary"] {
|
||||
background-color: var(--brand_standard);
|
||||
color: var(--on_brand_primary);
|
||||
border-color: var(--brand_standard);
|
||||
}
|
||||
|
||||
setting-button:hover,
|
||||
setting-button[data-type="secondary"]:hover {
|
||||
background-color: var(--overlay_hover);
|
||||
}
|
||||
|
||||
setting-button:active,
|
||||
setting-button[data-type="secondary"]:active {
|
||||
background-color: var(--overlay_pressed);
|
||||
}
|
||||
|
||||
setting-button[data-type="primary"]:hover {
|
||||
background-color: var(--nt_brand_standard_2_overlay_hover_brand_2_mix);
|
||||
border-color: var(--nt_brand_standard_2_overlay_hover_brand_2_mix);
|
||||
}
|
||||
|
||||
setting-button[data-type="primary"]:active {
|
||||
background-color: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix);
|
||||
border-color: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix);
|
||||
}
|
||||
|
||||
setting-select,
|
||||
setting-select::part(parent),
|
||||
setting-select::part(button) {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
setting-select::part(button) {
|
||||
display: flex;
|
||||
padding: 0px 8px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border_dark);
|
||||
z-index: 5;
|
||||
cursor: default;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
setting-select::part(current-text) {
|
||||
display: block;
|
||||
margin-right: 8px;
|
||||
padding: 0px;
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
font-size: 12px;
|
||||
color: var(--text_primary);
|
||||
text-overflow: ellipsis;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
flex: 1;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-pointer-events: none;
|
||||
-moz-pointer-events: none;
|
||||
-ms-pointer-events: none;
|
||||
-o-pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
setting-select::part(button-arrow) {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--icon_primary);
|
||||
}
|
||||
|
||||
setting-select::part(option-list) {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
padding: 4px;
|
||||
margin: 5px 0px;
|
||||
width: 100%;
|
||||
max-height: var(--q-contextmenu-max-height);
|
||||
background-color: var(--blur_middle_standard);
|
||||
background-clip: padding-box;
|
||||
backdrop-filter: blur(8px);
|
||||
font-size: 12px;
|
||||
box-shadow: var(--shadow_bg_middle_secondary);
|
||||
border: 1px solid var(--border_secondary);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
app-region: no-drag;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
z-index: 999;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
setting-option,
|
||||
setting-option::part(parent) {
|
||||
display: block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
setting-option::part(parent) {
|
||||
display: flex;
|
||||
padding: 0px 8px;
|
||||
color: var(--text_primary);
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
border-radius: 4px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
setting-option:hover::part(parent) {
|
||||
background-color: var(--overlay_hover);
|
||||
}
|
||||
|
||||
setting-option:active::part(parent) {
|
||||
background-color: var(--overlay_pressed);
|
||||
}
|
||||
|
||||
setting-option[is-selected]::part(parent) {
|
||||
background-color: var(--overlay_active);
|
||||
}
|
||||
|
||||
setting-option::part(text) {
|
||||
margin-right: 8px;
|
||||
overflow: hidden;
|
||||
text-wrap: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
setting-option::part(check-icon) {
|
||||
display: none;
|
||||
position: relative;
|
||||
right: -4px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
color: var(--icon_primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
setting-option[is-selected]::part(check-icon) {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- 源样式 -->
|
||||
<link rel="stylesheet" href="./assets/NapCat.css" />
|
||||
<!-- 修补样式 -->
|
||||
<link rel="stylesheet" href="./assets/webcomponents.css" />
|
||||
<link rel="stylesheet" href="./assets/style.css" />
|
||||
<link rel="stylesheet" href="./assets/color.css" />
|
||||
<style>
|
||||
body > div {
|
||||
padding: 12px;
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
ob-setting-select {
|
||||
width: 210px;
|
||||
}
|
||||
</style>
|
||||
<!-- 脚手架 -->
|
||||
<!-- 渲染脚本 -->
|
||||
<script>
|
||||
async function InitWebUi() {
|
||||
const { onSettingWindowCreated } = await import("./assets/renderer.js");
|
||||
onSettingWindowCreated(document.querySelector("body"));
|
||||
}
|
||||
InitWebUi();
|
||||
</script>
|
||||
|
||||
<title>NapCat-WebUi</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.body.classList.add('q-theme-tokens-dark');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,86 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WebUi - Index</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
async function CheckQQLoginStatus(retCredential) {
|
||||
let QQLoginResponse = await fetch('../api/QQLogin/CheckLoginStatus', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': "Bearer " + retCredential,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
if (QQLoginResponse.status == 200) {
|
||||
let QQLoginResponseJson = await QQLoginResponse.json();
|
||||
if (QQLoginResponseJson.code == 0) {
|
||||
if (QQLoginResponseJson.data.isLogin) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
async function CheckWebUiLogined(retCredential) {
|
||||
let LoginResponse = await fetch('../api/auth/check', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': "Bearer " + retCredential,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
if (LoginResponse.status == 200) {
|
||||
let LoginResponseJson = await LoginResponse.json();
|
||||
if (LoginResponseJson.code == 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
async function InitPage() {
|
||||
//查找URL参数是否有token
|
||||
let url = new URL(window.location.href);
|
||||
let token = url.searchParams.get("token");
|
||||
if (token) {
|
||||
let loginResponse = await fetch('../api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ token: token })
|
||||
});
|
||||
const loginResponseJson = await loginResponse.json();
|
||||
let retCode = loginResponseJson.code;
|
||||
if (retCode === 0) {
|
||||
//登录成功
|
||||
let retCredential = loginResponseJson.data.Credential;
|
||||
localStorage.setItem('auth', retCredential);
|
||||
}
|
||||
}
|
||||
|
||||
let authData = localStorage.getItem('auth');
|
||||
let isLogined = await CheckWebUiLogined(authData);
|
||||
if (authData && isLogined) {
|
||||
let isQQLoined = await CheckQQLoginStatus(authData);
|
||||
if (!isQQLoined) {
|
||||
window.location.href = './QQLogin.html';
|
||||
return;
|
||||
}
|
||||
window.location.href = './config.html';
|
||||
return;
|
||||
}
|
||||
window.location.href = './login.html';
|
||||
}
|
||||
InitPage();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="./vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue + TS</title>
|
||||
<script type="module" crossorigin src="./assets/index-D10_5xOh.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="./assets/index-DQOoc4ch.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,135 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WebUi - Login</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
background-color: white;
|
||||
max-width: 400px;
|
||||
min-width: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
width: 90%;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
</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="password" id="token-input" required>
|
||||
</div>
|
||||
<p class="error-message hidden" id="error-message"></p>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
//待封装整理
|
||||
async function submitToken() {
|
||||
const tokenInput = document.getElementById('token-input');
|
||||
const errorMessage = document.getElementById('error-message');
|
||||
|
||||
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
|
||||
|
||||
try {
|
||||
let loginResponse = await fetch('../api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ token: tokenInput.value })
|
||||
});
|
||||
const loginResponseJson = await loginResponse.json();
|
||||
let retCode = loginResponseJson.code;
|
||||
if (retCode === 0) {
|
||||
//登录成功
|
||||
let retCredential = loginResponseJson.data.Credential;
|
||||
localStorage.setItem('auth', retCredential);
|
||||
let QQLoginResponse = await fetch('../api/QQLogin/CheckLoginStatus', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': "Bearer " + retCredential,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
if (QQLoginResponse.status == 200) {
|
||||
let QQLoginResponseJson = await QQLoginResponse.json();
|
||||
if (QQLoginResponseJson.code == 0) {
|
||||
//alert(QQLoginResponseJson.data.isLogin.toString());
|
||||
if (QQLoginResponseJson.data.isLogin) {
|
||||
window.location.href = './config.html';
|
||||
} else {
|
||||
window.location.href = './QQLogin.html';
|
||||
}
|
||||
}
|
||||
}
|
||||
alert("登录成功即将跳转");
|
||||
} else {
|
||||
console.log(loginResponseJson.message);
|
||||
alert(loginResponseJson.message);
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
alert("登录失败");
|
||||
console.log("请求异常", e);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
static/logo.png
Normal file
BIN
static/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 335 KiB |
1
static/vite.svg
Normal file
1
static/vite.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Reference in New Issue
Block a user