feat(frontend): implement basic frontend interface
This commit is contained in:
@@ -0,0 +1,4 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
*.local
|
||||||
|
.DS_Store
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
# Nukumizu Console
|
||||||
|
|
||||||
|
Web console for the Nukumizu backend — a remote-server monitor and alert bot. Built with Vue 3 + Vite, no UI framework; styling is hand-rolled on CSS custom properties with a light/dark theme.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **Sign in / first-run admin** — login, or create the very first admin while the database is still empty (the backend rejects further registrations once any user exists).
|
||||||
|
- **Nodes (overview)** — live server cards from the backend status/info APIs: online state, CPU / RAM / disk load, plus the per-node *status notify* switch persisted to `bot_node_config.json`. Searchable, auto-refreshes.
|
||||||
|
- **Bot trust** — manage QQ (NapCat) and Telegram admins & trusted groups in `bot_user_config.json`: add / remove members and toggle each member's `status notify`, `startup notify`, and `command replies`.
|
||||||
|
- **Settings** — structured forms for the global `config.json` (system, debug, Komari dashboard, controller methods, message templates, storage paths). Each card saves only its own section.
|
||||||
|
- **System logs** — live WebSocket log stream (`/api/system/getLogs`) with severity filter chips, search, pause/resume and export.
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev # http://localhost:5173
|
||||||
|
```
|
||||||
|
|
||||||
|
The dev server proxies `/api` (and the log websocket) to the backend. By default it targets `http://127.0.0.1:8080`; override with:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Windows PowerShell
|
||||||
|
$env:NUKUMIZU_API = "http://192.168.20.4:8080"; npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Production build (static assets only):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build # outputs dist/
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
The backend does not serve static files, so put `dist/` behind any static server and proxy `/api` (and `ws://…/api/system/getLogs`) to the Nukumizu backend.
|
||||||
|
|
||||||
|
## API contract notes
|
||||||
|
|
||||||
|
- Auth uses two headers on every request: `X-Token` (from login) and `X-Timestamp` — a **Unix timestamp in seconds** (not milliseconds) with a ±30 min tolerance (skipped when `system.debugMode` is on).
|
||||||
|
- Token & user are kept in `localStorage`. On a `401` the session is cleared and you are returned to the login page.
|
||||||
|
- The panel talks to `/api/server/getStatus`, `/api/server/getInfo`, `/api/settings/get`, `/api/settings/set` and `/api/user/login|register`. All management endpoints require an `admin` token.
|
||||||
|
- `/api/settings/set` is a deep merge: sending a JSON `null` for a key removes it (used when deleting a trusted member).
|
||||||
|
|
||||||
|
## Project structure
|
||||||
|
|
||||||
|
```
|
||||||
|
frontend/
|
||||||
|
├── index.html
|
||||||
|
├── vite.config.js
|
||||||
|
└── src/
|
||||||
|
├── main.js / App.vue
|
||||||
|
├── router/ # routes + auth guard
|
||||||
|
├── api/index.js # authApi, serverApi, settingsApi
|
||||||
|
├── utils/ # auth, http client, theme, toasts, formatting
|
||||||
|
├── styles/ # theme.css (tokens) + ui.css (primitives)
|
||||||
|
├── components/ # TopBar, SideBar, Modal, Toggle, TagsEditor, HeadersEditor
|
||||||
|
└── views/ # Login, Layout, Overview, Trusted, Settings, Logs
|
||||||
|
```
|
||||||
|
|
||||||
|
## Caveats
|
||||||
|
|
||||||
|
- The backend's `/api/system/getLogs` websocket is currently unauthenticated — anyone who can reach the port can read logs. Consider gating it in a future backend change.
|
||||||
|
- Registering more than one user is intentionally impossible; the backend only accepts the very first registration.
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="color-scheme" content="light dark">
|
||||||
|
<title>Nukumizu Console</title>
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
var saved = localStorage.getItem('nukumizu_theme');
|
||||||
|
var dark = saved === 'dark' || (saved !== 'light' && matchMedia('(prefers-color-scheme: dark)').matches);
|
||||||
|
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+1707
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "nukumizu-console",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "Web console for Nukumizu — remote server monitor & alert bot",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-free": "^6.7.2",
|
||||||
|
"axios": "^1.7.9",
|
||||||
|
"vue": "^3.5.13",
|
||||||
|
"vue-router": "^4.5.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"vite": "^6.0.7"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onBeforeUnmount, onMounted } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { toasts } from './utils/toast.js';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const glyph = { success: '✓', error: '✕', info: 'i', warn: '!' };
|
||||||
|
|
||||||
|
function onAuthExpired() {
|
||||||
|
if (router.currentRoute.value.name !== 'Login') {
|
||||||
|
router.push({ name: 'Login' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => window.addEventListener('auth:expired', onAuthExpired));
|
||||||
|
onBeforeUnmount(() => window.removeEventListener('auth:expired', onAuthExpired));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<router-view />
|
||||||
|
<div class="toasts" aria-live="polite">
|
||||||
|
<div
|
||||||
|
v-for="t in toasts"
|
||||||
|
:key="t.id"
|
||||||
|
class="toast"
|
||||||
|
:class="[t.type, { leaving: t.leaving }]"
|
||||||
|
role="status"
|
||||||
|
>
|
||||||
|
<span class="t-icon">{{ glyph[t.type] || 'i' }}</span>
|
||||||
|
<span class="t-msg">{{ t.message }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import http from '../utils/http.js';
|
||||||
|
|
||||||
|
export const authApi = {
|
||||||
|
login: (username, password) => http.post('/user/login', { username, password }),
|
||||||
|
register: (username, password) => http.post('/user/register', { username, password })
|
||||||
|
};
|
||||||
|
|
||||||
|
// /api/server/getStatus?uuid=all → { success, "<uuid>": { uuid, name, online, report } }
|
||||||
|
export const serverApi = {
|
||||||
|
statusAll: () => http.get('/server/getStatus?uuid=all'),
|
||||||
|
infoAll: () => http.get('/server/getInfo?uuid=all')
|
||||||
|
};
|
||||||
|
|
||||||
|
// /api/settings/get?type=… / /api/settings/set?type=…
|
||||||
|
// `type` is one of global | bot_user_config | bot_node_config.
|
||||||
|
// For set, pass a partial object; a JSON null value removes that key.
|
||||||
|
export const settingsApi = {
|
||||||
|
get: (type) => http.get(`/settings/get?type=${encodeURIComponent(type)}`),
|
||||||
|
set: (type, patch) => http.post(`/settings/set?type=${encodeURIComponent(type)}`, patch)
|
||||||
|
};
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
<script setup>
|
||||||
|
import { reactive, watch } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: { type: Object, default: () => ({}) }
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue']);
|
||||||
|
|
||||||
|
const rows = reactive([]);
|
||||||
|
|
||||||
|
let suppress = false;
|
||||||
|
|
||||||
|
function sync() {
|
||||||
|
rows.length = 0;
|
||||||
|
for (const [k, v] of Object.entries(props.modelValue || {})) {
|
||||||
|
if (k !== '') rows.push({ k, v: v === null || v === undefined ? '' : String(v) });
|
||||||
|
}
|
||||||
|
if (!rows.length) rows.push({ k: '', v: '' });
|
||||||
|
}
|
||||||
|
|
||||||
|
function commit() {
|
||||||
|
const obj = {};
|
||||||
|
for (const r of rows) {
|
||||||
|
const key = r.k.trim();
|
||||||
|
if (key) obj[key] = r.v;
|
||||||
|
}
|
||||||
|
// Emitting updates the parent model, which flows back through the prop and
|
||||||
|
// would otherwise rebuild the rows mid-typing (and drop focus). Suppress
|
||||||
|
// that self-echo for this tick.
|
||||||
|
suppress = true;
|
||||||
|
emit('update:modelValue', obj);
|
||||||
|
setTimeout(() => { suppress = false; }, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function addRow() {
|
||||||
|
if (rows.length && !rows[rows.length - 1].k.trim()) return;
|
||||||
|
rows.push({ k: '', v: '' });
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeRow(i) {
|
||||||
|
rows.splice(i, 1);
|
||||||
|
if (!rows.length) rows.push({ k: '', v: '' });
|
||||||
|
commit();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-sync only when the value is replaced externally (e.g. after reload).
|
||||||
|
watch(() => props.modelValue, () => {
|
||||||
|
if (!suppress) sync();
|
||||||
|
}, { deep: false });
|
||||||
|
|
||||||
|
sync();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="kv-editor">
|
||||||
|
<div v-for="(r, i) in rows" :key="i" class="kv-row">
|
||||||
|
<input v-model="r.k" class="input kv-key mono" placeholder="Header name" @input="commit" />
|
||||||
|
<input v-model="r.v" class="input kv-val mono" placeholder="Value" @input="commit" />
|
||||||
|
<button type="button" class="icon-btn danger" title="Remove header" @click="removeRow(i)">
|
||||||
|
<i class="fas fa-minus" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-ghost btn-sm kv-add" @click="addRow">
|
||||||
|
<i class="fas fa-plus" /> Add header
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.kv-editor {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kv-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1.4fr 34px;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kv-key {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kv-add {
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
open: { type: Boolean, default: false },
|
||||||
|
title: { type: String, default: '' },
|
||||||
|
wide: { type: Boolean, default: false }
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['close']);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Teleport to="body">
|
||||||
|
<Transition name="fade-switch">
|
||||||
|
<div v-if="open" class="modal-mask" @click.self="emit('close')">
|
||||||
|
<div class="modal" :class="{ wide }" role="dialog" aria-modal="true" @keydown.esc="emit('close')">
|
||||||
|
<div class="modal-head">
|
||||||
|
<h3>{{ title }}</h3>
|
||||||
|
<button class="icon-btn" title="Close" @click="emit('close')">
|
||||||
|
<i class="fas fa-xmark" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
<div v-if="$slots.foot" class="modal-foot">
|
||||||
|
<slot name="foot" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</Teleport>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,141 @@
|
|||||||
|
<script setup>
|
||||||
|
const groups = [
|
||||||
|
{
|
||||||
|
label: 'Operations',
|
||||||
|
items: [
|
||||||
|
{ name: 'Overview', to: '/overview', title: 'Nodes', icon: 'fa-server' },
|
||||||
|
{ name: 'Trusted', to: '/trusted', title: 'Trust', icon: 'fa-shield-halved' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'System',
|
||||||
|
items: [
|
||||||
|
{ name: 'Settings', to: '/settings', title: 'Settings', icon: 'fa-sliders' },
|
||||||
|
{ name: 'Logs', to: '/logs', title: 'Logs', icon: 'fa-terminal' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<aside class="sidebar">
|
||||||
|
<nav class="nav">
|
||||||
|
<div v-for="group in groups" :key="group.label" class="group">
|
||||||
|
<p class="group-label">{{ group.label }}</p>
|
||||||
|
<router-link
|
||||||
|
v-for="item in group.items"
|
||||||
|
:key="item.name"
|
||||||
|
:to="item.to"
|
||||||
|
class="nav-item"
|
||||||
|
active-class="active"
|
||||||
|
>
|
||||||
|
<i class="fas" :class="item.icon" aria-hidden="true" />
|
||||||
|
<span>{{ item.title }}</span>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="side-foot">
|
||||||
|
<span class="foot-dot" />
|
||||||
|
<span>Nukumizu Console</span>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
|
top: 52px;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 232px;
|
||||||
|
z-index: 30;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 12px;
|
||||||
|
background: var(--surface);
|
||||||
|
border-right: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-label {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-3);
|
||||||
|
margin: 4px 10px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group + .group {
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 9px 12px;
|
||||||
|
border-radius: var(--r-m);
|
||||||
|
color: var(--text-2);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background 0.14s ease, color 0.14s ease;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item i {
|
||||||
|
width: 17px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-3);
|
||||||
|
transition: color 0.14s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:hover {
|
||||||
|
background: var(--surface-3);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:hover i {
|
||||||
|
color: var(--text-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item.active {
|
||||||
|
background: var(--accent-soft);
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item.active i {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item.active::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -12px;
|
||||||
|
top: 8px;
|
||||||
|
bottom: 8px;
|
||||||
|
width: 3px;
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
background: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-foot {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 10px 6px 2px;
|
||||||
|
font-size: 11.5px;
|
||||||
|
color: var(--text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.foot-dot {
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--ok);
|
||||||
|
box-shadow: 0 0 0 3px var(--ok-soft);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,118 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: { type: Array, default: () => [] },
|
||||||
|
placeholder: { type: String, default: 'Type and press Enter to add' }
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue']);
|
||||||
|
const text = ref('');
|
||||||
|
|
||||||
|
function add() {
|
||||||
|
const items = text.value
|
||||||
|
.split(/[,\n]/)
|
||||||
|
.map((s) => s.trim())
|
||||||
|
.filter(Boolean);
|
||||||
|
if (!items.length) return;
|
||||||
|
const next = [...props.modelValue];
|
||||||
|
for (const it of items) {
|
||||||
|
if (!next.includes(it)) next.push(it);
|
||||||
|
}
|
||||||
|
emit('update:modelValue', next);
|
||||||
|
text.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeAt(i) {
|
||||||
|
const next = props.modelValue.slice();
|
||||||
|
next.splice(i, 1);
|
||||||
|
emit('update:modelValue', next);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onKeydown(e) {
|
||||||
|
if (e.key === 'Enter' || e.key === ',') {
|
||||||
|
e.preventDefault();
|
||||||
|
add();
|
||||||
|
} else if (e.key === 'Backspace' && !text.value && props.modelValue.length) {
|
||||||
|
removeAt(props.modelValue.length - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="tags-editor">
|
||||||
|
<div v-if="modelValue.length" class="tags">
|
||||||
|
<span v-for="(t, i) in modelValue" :key="i" class="tag">
|
||||||
|
{{ t }}
|
||||||
|
<button type="button" class="tag-x" @click="removeAt(i)"><i class="fas fa-xmark" /></button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
v-model="text"
|
||||||
|
class="input tags-input"
|
||||||
|
:placeholder="modelValue.length ? placeholder : placeholder"
|
||||||
|
@keydown="onKeydown"
|
||||||
|
@blur="add"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.tags-editor {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
background: var(--surface-2);
|
||||||
|
border: 1px solid var(--line-strong);
|
||||||
|
border-radius: var(--r-s);
|
||||||
|
padding: 8px;
|
||||||
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-editor:focus-within {
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||||
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 3px 6px 3px 10px;
|
||||||
|
background: var(--accent-soft);
|
||||||
|
color: var(--accent);
|
||||||
|
border-radius: var(--r-pill);
|
||||||
|
font-size: 12.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-x {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
color: inherit;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-x:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
|
||||||
|
|
||||||
|
.tags-input {
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
padding: 2px 4px;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-input:focus {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
modelValue: { type: Boolean, default: false },
|
||||||
|
label: { type: String, default: '' },
|
||||||
|
disabled: { type: Boolean, default: false }
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue']);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<label class="switch" :class="{ disabled }">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
:checked="modelValue"
|
||||||
|
:disabled="disabled"
|
||||||
|
@change="emit('update:modelValue', $event.target.checked)"
|
||||||
|
/>
|
||||||
|
<span class="track" />
|
||||||
|
<span v-if="label" class="switch-label">{{ label }}</span>
|
||||||
|
</label>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.switch.disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,180 @@
|
|||||||
|
<script setup>
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { auth, clearSession } from '../utils/auth.js';
|
||||||
|
import { currentTheme, toggleTheme } from '../utils/theme.js';
|
||||||
|
import { toast } from '../utils/toast.js';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const isDark = ref(currentTheme() === 'dark');
|
||||||
|
const user = computed(() => auth.user || {});
|
||||||
|
const initial = computed(() => ((user.value.username || '?').slice(0, 1) || '?').toUpperCase());
|
||||||
|
|
||||||
|
function onToggleTheme() {
|
||||||
|
isDark.value = toggleTheme() === 'dark';
|
||||||
|
}
|
||||||
|
|
||||||
|
function logout() {
|
||||||
|
clearSession();
|
||||||
|
toast.info('Signed out');
|
||||||
|
router.push({ name: 'Login' });
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<header class="topbar">
|
||||||
|
<div class="brand">
|
||||||
|
<span class="mark">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 3 6.5v3.1C3 15.2 6.9 20 12 21c5.1-1 9-5.8 9-11.4V6.5L12 2Zm0 7.2V19c-3.7-.7-6.6-4.4-6.6-8.2V7.6L12 4.4l6.6 3.2v3.2c0 1.9-.5 3.7-1.4 5.1H12Z" fill="currentColor"/></svg>
|
||||||
|
</span>
|
||||||
|
<span class="wordmark">
|
||||||
|
<strong>Nukumizu</strong>
|
||||||
|
<small>Console</small>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="topbar-right">
|
||||||
|
<button class="icon-btn" :title="isDark ? 'Switch to light' : 'Switch to dark'" @click="onToggleTheme">
|
||||||
|
<i class="fas" :class="isDark ? 'fa-sun' : 'fa-moon'" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="user-chip">
|
||||||
|
<span class="avatar">{{ initial }}</span>
|
||||||
|
<div class="who">
|
||||||
|
<span class="name">{{ user.username || '—' }}</span>
|
||||||
|
<span class="level">{{ user.level || 'admin' }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="icon-btn" title="Sign out" @click="logout">
|
||||||
|
<i class="fas fa-arrow-right-from-bracket" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.topbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 52px;
|
||||||
|
z-index: 40;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 18px;
|
||||||
|
background: var(--surface);
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
box-shadow: var(--shadow-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mark {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
background: linear-gradient(150deg, var(--accent), var(--accent-strong));
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--accent) 60%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mark svg {
|
||||||
|
width: 19px;
|
||||||
|
height: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wordmark {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 8px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wordmark strong {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wordmark small {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
color: var(--text-2);
|
||||||
|
font-size: 15px;
|
||||||
|
transition: background 0.15s ease, color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn:hover {
|
||||||
|
background: var(--surface-3);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-chip {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 5px 6px 5px 5px;
|
||||||
|
border-radius: var(--r-pill);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
background: var(--surface-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
background: var(--accent-soft);
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.who {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
line-height: 1.15;
|
||||||
|
padding-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.who .name {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.who .level {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-3);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
import App from './App.vue';
|
||||||
|
import router from './router/index.js';
|
||||||
|
import { initTheme } from './utils/theme.js';
|
||||||
|
import '@fortawesome/fontawesome-free/css/all.min.css';
|
||||||
|
import './styles/theme.css';
|
||||||
|
import './styles/ui.css';
|
||||||
|
|
||||||
|
initTheme();
|
||||||
|
|
||||||
|
createApp(App).use(router).mount('#app');
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
|
import { isLoggedIn } from '../utils/auth.js';
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'Login',
|
||||||
|
component: () => import('../views/Login.vue'),
|
||||||
|
meta: { public: true }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: () => import('../views/Layout.vue'),
|
||||||
|
redirect: { name: 'Overview' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'overview',
|
||||||
|
name: 'Overview',
|
||||||
|
component: () => import('../views/Overview.vue'),
|
||||||
|
meta: { title: 'Nodes' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'trusted',
|
||||||
|
name: 'Trusted',
|
||||||
|
component: () => import('../views/Trusted.vue'),
|
||||||
|
meta: { title: 'Bot trust' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'settings',
|
||||||
|
name: 'Settings',
|
||||||
|
component: () => import('../views/Settings.vue'),
|
||||||
|
meta: { title: 'Settings' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'logs',
|
||||||
|
name: 'Logs',
|
||||||
|
component: () => import('../views/Logs.vue'),
|
||||||
|
meta: { title: 'Logs' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{ path: '/:pathMatch(.*)*', redirect: '/' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes
|
||||||
|
});
|
||||||
|
|
||||||
|
router.beforeEach((to) => {
|
||||||
|
if (!to.meta.public && !isLoggedIn()) {
|
||||||
|
return { name: 'Login', query: { redirect: to.fullPath } };
|
||||||
|
}
|
||||||
|
if (to.name === 'Login' && isLoggedIn()) {
|
||||||
|
return { name: 'Overview' };
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
/* Nukumizu Console — design tokens. Light is the default, dark is applied by
|
||||||
|
setting data-theme="dark" on <html>. The look is a restrained, Apple-school
|
||||||
|
console: neutral warm-gray fields, one accent reserved for interaction, and
|
||||||
|
color used only where it carries meaning (health, log severity). */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
|
||||||
|
|
||||||
|
--bg: #eef0f3;
|
||||||
|
--bg-grad: linear-gradient(180deg, #f4f5f7 0%, #eaedf1 100%);
|
||||||
|
--surface: #ffffff;
|
||||||
|
--surface-2: #fafbfc;
|
||||||
|
--surface-3: #eef0f3;
|
||||||
|
--surface-hover: #e7eaee;
|
||||||
|
|
||||||
|
--text: #1b1e24;
|
||||||
|
--text-2: rgba(27, 30, 36, 0.68);
|
||||||
|
--text-3: rgba(27, 30, 36, 0.46);
|
||||||
|
|
||||||
|
--line: rgba(20, 24, 32, 0.09);
|
||||||
|
--line-strong: rgba(20, 24, 32, 0.16);
|
||||||
|
|
||||||
|
--accent: #006ee0;
|
||||||
|
--accent-strong: #0059b8;
|
||||||
|
--accent-soft: rgba(0, 110, 224, 0.09);
|
||||||
|
--accent-contrast: #ffffff;
|
||||||
|
|
||||||
|
--ok: #1f9d58;
|
||||||
|
--ok-soft: rgba(31, 157, 88, 0.12);
|
||||||
|
--warn: #c07b06;
|
||||||
|
--warn-soft: rgba(192, 123, 6, 0.13);
|
||||||
|
--bad: #d73a49;
|
||||||
|
--bad-soft: rgba(215, 58, 73, 0.1);
|
||||||
|
--muted: #8a919c;
|
||||||
|
|
||||||
|
--log-debug: #188a4b;
|
||||||
|
--log-info: #0a62d0;
|
||||||
|
--log-warn: #b5720a;
|
||||||
|
--log-error: #cc3340;
|
||||||
|
--log-fatal: #a31b28;
|
||||||
|
|
||||||
|
--r-s: 7px;
|
||||||
|
--r-m: 11px;
|
||||||
|
--r-l: 16px;
|
||||||
|
--r-pill: 999px;
|
||||||
|
|
||||||
|
--shadow-1: 0 1px 2px rgba(16, 22, 30, 0.05);
|
||||||
|
--shadow-2: 0 1px 1px rgba(16, 22, 30, 0.04), 0 6px 24px -8px rgba(16, 22, 30, 0.14);
|
||||||
|
--shadow-3: 0 2px 4px rgba(16, 22, 30, 0.06), 0 18px 48px -12px rgba(16, 22, 30, 0.22);
|
||||||
|
|
||||||
|
--nav-bg: rgba(15, 17, 21, 0.86);
|
||||||
|
--nav-text: rgba(255, 255, 255, 0.72);
|
||||||
|
--nav-text-hover: #ffffff;
|
||||||
|
--nav-line: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme="dark"] {
|
||||||
|
--bg: #0b0c10;
|
||||||
|
--bg-grad: linear-gradient(180deg, #0e1014 0%, #090a0e 100%);
|
||||||
|
--surface: #15171d;
|
||||||
|
--surface-2: #1b1e25;
|
||||||
|
--surface-3: #24272f;
|
||||||
|
--surface-hover: #2b2f38;
|
||||||
|
|
||||||
|
--text: #eceef2;
|
||||||
|
--text-2: rgba(236, 238, 242, 0.66);
|
||||||
|
--text-3: rgba(236, 238, 242, 0.44);
|
||||||
|
|
||||||
|
--line: rgba(255, 255, 255, 0.08);
|
||||||
|
--line-strong: rgba(255, 255, 255, 0.14);
|
||||||
|
|
||||||
|
--accent: #2f8dff;
|
||||||
|
--accent-strong: #57a3ff;
|
||||||
|
--accent-soft: rgba(47, 141, 255, 0.16);
|
||||||
|
|
||||||
|
--ok: #3ecf83;
|
||||||
|
--ok-soft: rgba(62, 207, 131, 0.16);
|
||||||
|
--warn: #e3a23a;
|
||||||
|
--warn-soft: rgba(227, 162, 58, 0.16);
|
||||||
|
--bad: #ff6b76;
|
||||||
|
--bad-soft: rgba(255, 107, 118, 0.15);
|
||||||
|
--muted: #6b7280;
|
||||||
|
|
||||||
|
--log-debug: #43cf86;
|
||||||
|
--log-info: #4b9dff;
|
||||||
|
--log-warn: #efb458;
|
||||||
|
--log-error: #ff7b84;
|
||||||
|
--log-fatal: #ff525e;
|
||||||
|
|
||||||
|
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||||
|
--shadow-2: 0 1px 1px rgba(0, 0, 0, 0.4), 0 8px 28px -10px rgba(0, 0, 0, 0.6);
|
||||||
|
--shadow-3: 0 2px 4px rgba(0, 0, 0, 0.4), 0 22px 56px -16px rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
@@ -0,0 +1,845 @@
|
|||||||
|
/* Nukumizu Console — shared UI primitives. Components may add scoped styles,
|
||||||
|
but everything reusable lives here. */
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--bg-grad) fixed;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
transition: background 0.25s ease, color 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: var(--accent-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font: inherit;
|
||||||
|
color: inherit;
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, select, textarea {
|
||||||
|
font: inherit;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--line-strong);
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 3px solid transparent;
|
||||||
|
background-clip: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--muted);
|
||||||
|
background-clip: content-box;
|
||||||
|
border: 3px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Page scaffolding --------------------------------------------------- */
|
||||||
|
|
||||||
|
.page {
|
||||||
|
padding: 34px 40px 60px;
|
||||||
|
max-width: 1180px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-head .eyebrow {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--accent);
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-head h1 {
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 1.12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-head .lead {
|
||||||
|
margin-top: 6px;
|
||||||
|
color: var(--text-2);
|
||||||
|
font-size: 14px;
|
||||||
|
max-width: 620px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
color: var(--text-2);
|
||||||
|
margin: 26px 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mono {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.92em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Buttons ------------------------------------------------------------ */
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 7px;
|
||||||
|
padding: 8px 15px;
|
||||||
|
border-radius: var(--r-m);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background: var(--surface-3);
|
||||||
|
color: var(--text);
|
||||||
|
transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease, opacity 0.15s ease, box-shadow 0.15s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
background: var(--surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:active {
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.45;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--accent-contrast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: var(--accent-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: var(--bad-soft);
|
||||||
|
color: var(--bad);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger:hover {
|
||||||
|
background: color-mix(in srgb, var(--bad) 16%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text-2);
|
||||||
|
border-color: var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost:hover {
|
||||||
|
background: var(--surface-3);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sm {
|
||||||
|
padding: 5px 11px;
|
||||||
|
font-size: 13px;
|
||||||
|
border-radius: var(--r-s);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
display: inline-grid;
|
||||||
|
place-items: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: var(--text-2);
|
||||||
|
font-size: 15px;
|
||||||
|
transition: background 0.15s ease, color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn:hover {
|
||||||
|
background: var(--surface-3);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn.danger:hover {
|
||||||
|
background: var(--bad-soft);
|
||||||
|
color: var(--bad);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Cards -------------------------------------------------------------- */
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--r-l);
|
||||||
|
box-shadow: var(--shadow-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card + .card {
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-head h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-head .hint {
|
||||||
|
color: var(--text-3);
|
||||||
|
font-size: 12.5px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Forms -------------------------------------------------------------- */
|
||||||
|
|
||||||
|
.field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field > label {
|
||||||
|
font-size: 12.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
color: var(--text-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field > label .required {
|
||||||
|
color: var(--bad);
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field .help {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input, .select, .textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 9px 12px;
|
||||||
|
background: var(--surface-2);
|
||||||
|
border: 1px solid var(--line-strong);
|
||||||
|
border-radius: var(--r-s);
|
||||||
|
color: var(--text);
|
||||||
|
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input:hover, .select:hover, .textarea:hover {
|
||||||
|
border-color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input:focus, .select:focus, .textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||||
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea {
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 84px;
|
||||||
|
line-height: 1.55;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 13px;
|
||||||
|
tab-size: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select {
|
||||||
|
appearance: none;
|
||||||
|
background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
|
||||||
|
linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
|
||||||
|
background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
|
||||||
|
background-size: 5px 5px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
padding-right: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field input[type="color"] {
|
||||||
|
padding: 2px;
|
||||||
|
height: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 16px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid .span-2 {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Switch ------------------------------------------------------------- */
|
||||||
|
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch .track {
|
||||||
|
width: 40px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--surface-3);
|
||||||
|
border: 1px solid var(--line-strong);
|
||||||
|
position: relative;
|
||||||
|
transition: background 0.18s ease, border-color 0.18s ease;
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch .track::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
left: 2px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
|
||||||
|
transition: transform 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .track {
|
||||||
|
background: var(--accent);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .track::after {
|
||||||
|
transform: translateX(16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:focus-visible + .track {
|
||||||
|
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch .switch-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked ~ .switch-label {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Badges / dots ------------------------------------------------------- */
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border-radius: var(--r-pill);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.4;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex: none;
|
||||||
|
background: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-online, .b-online .dot { background: var(--ok-soft); color: var(--ok); }
|
||||||
|
.badge-online .dot { background: var(--ok); }
|
||||||
|
.badge-offline, .b-offline .dot { background: var(--surface-3); color: var(--text-3); }
|
||||||
|
.badge-offline .dot { background: var(--muted); }
|
||||||
|
.badge-warn { background: var(--warn-soft); color: var(--warn); }
|
||||||
|
.badge-danger { background: var(--bad-soft); color: var(--bad); }
|
||||||
|
.badge-accent { background: var(--accent-soft); color: var(--accent); }
|
||||||
|
|
||||||
|
/* --- Stat / metric ------------------------------------------------------- */
|
||||||
|
|
||||||
|
.metric {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric .m-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-3);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric .m-value {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric .m-value small {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Meter (soft progress) ----------------------------------------------- */
|
||||||
|
|
||||||
|
.meter {
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--surface-3);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meter > i {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--accent);
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meter > i.warn { background: var(--warn); }
|
||||||
|
.meter > i.bad { background: var(--bad); }
|
||||||
|
.meter > i.ok { background: var(--ok); }
|
||||||
|
|
||||||
|
/* --- Server list --------------------------------------------------------- */
|
||||||
|
|
||||||
|
.grid-2 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-3 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||||
|
.form-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.grid-2, .grid-3 { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 18px 18px 16px;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-card .row-1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-card .row-2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-card .sv-name {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
line-height: 1.2;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-card .sv-uuid {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 11.5px;
|
||||||
|
color: var(--text-3);
|
||||||
|
margin-top: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-card .row-3 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Members / options list ---------------------------------------------- */
|
||||||
|
|
||||||
|
.opt-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opt-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.opt-row:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opt-row .who {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opt-row .who .id {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opt-row .who .sub {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-3);
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opt-row .toggles {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 2px 9px;
|
||||||
|
border-radius: var(--r-pill);
|
||||||
|
font-size: 11.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
background: var(--surface-3);
|
||||||
|
color: var(--text-2);
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Empty / skeleton ----------------------------------------------------- */
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 48px 20px;
|
||||||
|
color: var(--text-3);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty .e-icon {
|
||||||
|
font-size: 30px;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Toolbar --------------------------------------------------------------- */
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar .spacer {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 340px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search .icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 11px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: var(--text-3);
|
||||||
|
pointer-events: none;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 12px 8px 32px;
|
||||||
|
background: var(--surface-2);
|
||||||
|
border: 1px solid var(--line-strong);
|
||||||
|
border-radius: var(--r-pill);
|
||||||
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Modal ------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
.modal-mask {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 90;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10vh 20px 40px;
|
||||||
|
background: rgba(12, 14, 18, 0.5);
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
-webkit-backdrop-filter: blur(6px);
|
||||||
|
animation: fade-in 0.18s ease;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 480px;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--r-l);
|
||||||
|
box-shadow: var(--shadow-3);
|
||||||
|
animation: rise 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.wide { max-width: 640px; }
|
||||||
|
|
||||||
|
.modal-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 18px 20px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-head h3 { font-size: 17px; }
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
padding: 4px 20px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-foot {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 16px 20px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Toasts ------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
.toasts {
|
||||||
|
position: fixed;
|
||||||
|
top: 18px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 120;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
pointer-events: none;
|
||||||
|
width: min(420px, calc(100vw - 32px));
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast {
|
||||||
|
pointer-events: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 11px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 15px;
|
||||||
|
border-radius: var(--r-m);
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
box-shadow: var(--shadow-3);
|
||||||
|
font-size: 13.5px;
|
||||||
|
animation: toast-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast .t-icon {
|
||||||
|
flex: none;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
background: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast.success .t-icon { background: var(--ok); }
|
||||||
|
.toast.error .t-icon { background: var(--bad); }
|
||||||
|
.toast.info .t-icon { background: var(--accent); }
|
||||||
|
.toast.warn .t-icon { background: var(--warn); }
|
||||||
|
|
||||||
|
.toast .t-msg {
|
||||||
|
flex: 1;
|
||||||
|
line-height: 1.45;
|
||||||
|
padding-top: 2px;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast.leaving { animation: toast-out 0.25s ease forwards; }
|
||||||
|
|
||||||
|
/* --- Animations -------------------------------------------------------------- */
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rise {
|
||||||
|
from { opacity: 0; transform: translateY(14px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes toast-in {
|
||||||
|
from { opacity: 0; transform: translateY(-16px) scale(0.97); }
|
||||||
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes toast-out {
|
||||||
|
to { opacity: 0; transform: translateY(-14px) scale(0.97); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
display: inline-block;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border: 2px solid var(--line-strong);
|
||||||
|
border-top-color: var(--accent);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.7s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* route transition */
|
||||||
|
.fade-switch-enter-active, .fade-switch-leave-active {
|
||||||
|
transition: opacity 0.16s ease, transform 0.16s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-switch-enter-from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-switch-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
import { reactive } from 'vue';
|
||||||
|
|
||||||
|
const TOKEN_KEY = 'nukumizu_token';
|
||||||
|
const USER_KEY = 'nukumizu_user';
|
||||||
|
|
||||||
|
function readUser() {
|
||||||
|
try {
|
||||||
|
return JSON.parse(localStorage.getItem(USER_KEY)) || null;
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const auth = reactive({
|
||||||
|
token: localStorage.getItem(TOKEN_KEY) || '',
|
||||||
|
user: readUser()
|
||||||
|
});
|
||||||
|
|
||||||
|
export function setSession(token, user) {
|
||||||
|
auth.token = token;
|
||||||
|
auth.user = user;
|
||||||
|
localStorage.setItem(TOKEN_KEY, token);
|
||||||
|
localStorage.setItem(USER_KEY, JSON.stringify(user));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function clearSession() {
|
||||||
|
auth.token = '';
|
||||||
|
auth.user = null;
|
||||||
|
localStorage.removeItem(TOKEN_KEY);
|
||||||
|
localStorage.removeItem(USER_KEY);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getToken() {
|
||||||
|
return auth.token;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isLoggedIn() {
|
||||||
|
return !!auth.token;
|
||||||
|
}
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
// Severity levels as sent by the backend log websocket (see postLog package):
|
||||||
|
// 0=DEBUG 1=INFO 2=WARN 3=ERROR 4=FATAL
|
||||||
|
export const LOG_LEVELS = [
|
||||||
|
{ key: 'DEBUG', value: 0 },
|
||||||
|
{ key: 'INFO', value: 1 },
|
||||||
|
{ key: 'WARN', value: 2 },
|
||||||
|
{ key: 'ERROR', value: 3 },
|
||||||
|
{ key: 'FATAL', value: 4 }
|
||||||
|
];
|
||||||
|
|
||||||
|
export const levelOf = (value) => LOG_LEVELS.find((l) => l.value === value) || { key: 'LOG', value };
|
||||||
|
|
||||||
|
export function formatBytes(n, digits = 1) {
|
||||||
|
if (n === null || n === undefined || Number.isNaN(n)) return '-';
|
||||||
|
if (n < 1024) return `${Math.round(n)} B`;
|
||||||
|
const units = ['KB', 'MB', 'GB', 'TB', 'PB'];
|
||||||
|
let v = n;
|
||||||
|
let u = -1;
|
||||||
|
do {
|
||||||
|
v /= 1024;
|
||||||
|
u += 1;
|
||||||
|
} while (v >= 1024 && u < units.length - 1);
|
||||||
|
return `${v.toFixed(digits)} ${units[u]}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatPercent(used, total) {
|
||||||
|
if (!total) return '—';
|
||||||
|
return `${Math.min(100, Math.max(0, Math.round((used / total) * 100)))}%`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function shortUUID(uuid = '') {
|
||||||
|
if (!uuid) return '';
|
||||||
|
if (uuid.length <= 13) return uuid;
|
||||||
|
return `${uuid.slice(0, 8)}…${uuid.slice(-4)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Online/offline counts + aggregate online ratio. Report arrays carry the
|
||||||
|
// report; when absent the server has no live telemetry yet.
|
||||||
|
export function sumUp(entries) {
|
||||||
|
const total = entries.length;
|
||||||
|
const online = entries.filter((e) => e.online).length;
|
||||||
|
return { total, online, offline: total - online };
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
import { getToken, clearSession } from './auth.js';
|
||||||
|
|
||||||
|
const http = axios.create({
|
||||||
|
baseURL: '/api',
|
||||||
|
timeout: 15000
|
||||||
|
});
|
||||||
|
|
||||||
|
http.interceptors.request.use((config) => {
|
||||||
|
const token = getToken();
|
||||||
|
if (token) {
|
||||||
|
config.headers['X-Token'] = token;
|
||||||
|
}
|
||||||
|
// Backend expects a Unix timestamp in *seconds* with a ±30 min tolerance.
|
||||||
|
config.headers['X-Timestamp'] = Math.floor(Date.now() / 1000);
|
||||||
|
return config;
|
||||||
|
});
|
||||||
|
|
||||||
|
http.interceptors.response.use(
|
||||||
|
(response) => response.data,
|
||||||
|
(error) => {
|
||||||
|
const status = error.response ? error.response.status : 0;
|
||||||
|
const payload = error.response && error.response.data;
|
||||||
|
const message = (payload && payload.message) || error.message || 'Network error';
|
||||||
|
|
||||||
|
if (status === 401) {
|
||||||
|
clearSession();
|
||||||
|
window.dispatchEvent(new CustomEvent('auth:expired'));
|
||||||
|
}
|
||||||
|
|
||||||
|
const err = new Error(message);
|
||||||
|
err.status = status;
|
||||||
|
return Promise.reject(err);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export default http;
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
const KEY = 'nukumizu_theme';
|
||||||
|
|
||||||
|
function systemPrefersDark() {
|
||||||
|
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function applyTheme(theme) {
|
||||||
|
const dark = theme === 'dark' || (theme !== 'light' && systemPrefersDark());
|
||||||
|
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
|
||||||
|
return dark ? 'dark' : 'light';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function currentTheme() {
|
||||||
|
return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function initTheme() {
|
||||||
|
const saved = localStorage.getItem(KEY);
|
||||||
|
applyTheme(saved || 'system');
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setTheme(theme) {
|
||||||
|
localStorage.setItem(KEY, theme);
|
||||||
|
return applyTheme(theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function toggleTheme() {
|
||||||
|
const next = currentTheme() === 'dark' ? 'light' : 'dark';
|
||||||
|
localStorage.setItem(KEY, next);
|
||||||
|
applyTheme(next);
|
||||||
|
return next;
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
import { reactive } from 'vue';
|
||||||
|
|
||||||
|
let seq = 0;
|
||||||
|
|
||||||
|
export const toasts = reactive([]);
|
||||||
|
|
||||||
|
function dismiss(id) {
|
||||||
|
const idx = toasts.findIndex((t) => t.id === id);
|
||||||
|
if (idx !== -1) toasts[idx].leaving = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
const i = toasts.findIndex((t) => t.id === id);
|
||||||
|
if (i !== -1) toasts.splice(i, 1);
|
||||||
|
}, 240);
|
||||||
|
}
|
||||||
|
|
||||||
|
function push(type, message, timeout) {
|
||||||
|
const id = ++seq;
|
||||||
|
toasts.push({ id, type, message, leaving: false });
|
||||||
|
if (timeout > 0) {
|
||||||
|
setTimeout(() => dismiss(id), timeout);
|
||||||
|
}
|
||||||
|
return id;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const toast = {
|
||||||
|
success(message, timeout = 3600) {
|
||||||
|
return push('success', message, timeout);
|
||||||
|
},
|
||||||
|
error(message, timeout = 5200) {
|
||||||
|
return push('error', message, timeout);
|
||||||
|
},
|
||||||
|
info(message, timeout = 3200) {
|
||||||
|
return push('info', message, timeout);
|
||||||
|
},
|
||||||
|
warn(message, timeout = 4200) {
|
||||||
|
return push('warn', message, timeout);
|
||||||
|
},
|
||||||
|
dismiss
|
||||||
|
};
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
<script setup>
|
||||||
|
import TopBar from '../components/TopBar.vue';
|
||||||
|
import SideBar from '../components/SideBar.vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app">
|
||||||
|
<TopBar />
|
||||||
|
<div class="app-body">
|
||||||
|
<SideBar />
|
||||||
|
<main class="content">
|
||||||
|
<router-view v-slot="{ Component }">
|
||||||
|
<transition name="fade-switch" mode="out-in">
|
||||||
|
<component :is="Component" />
|
||||||
|
</transition>
|
||||||
|
</router-view>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.app {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-body {
|
||||||
|
display: flex;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
margin-left: 232px;
|
||||||
|
padding-top: 52px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,242 @@
|
|||||||
|
<script setup>
|
||||||
|
import { reactive, ref, computed } from 'vue';
|
||||||
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
|
import { authApi } from '../api/index.js';
|
||||||
|
import { setSession } from '../utils/auth.js';
|
||||||
|
import { toast } from '../utils/toast.js';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const mode = ref('login');
|
||||||
|
const loading = ref(false);
|
||||||
|
const showPw = ref(false);
|
||||||
|
const form = reactive({ username: '', password: '' });
|
||||||
|
const errMsg = ref('');
|
||||||
|
|
||||||
|
const canSubmit = computed(() => form.username.trim().length > 0 && form.password.length >= 6);
|
||||||
|
|
||||||
|
function goTo(target) {
|
||||||
|
mode.value = target;
|
||||||
|
errMsg.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function afterLogin(token, user) {
|
||||||
|
setSession(token, user);
|
||||||
|
const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/overview';
|
||||||
|
router.push(redirect);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submit() {
|
||||||
|
if (!canSubmit.value || loading.value) return;
|
||||||
|
loading.value = true;
|
||||||
|
errMsg.value = '';
|
||||||
|
try {
|
||||||
|
if (mode.value === 'login') {
|
||||||
|
const res = await authApi.login(form.username.trim(), form.password);
|
||||||
|
afterLogin(res.token, {
|
||||||
|
userID: res.userID,
|
||||||
|
username: res.username,
|
||||||
|
level: res.level,
|
||||||
|
registerDate: res.registerDate
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const res = await authApi.register(form.username.trim(), form.password);
|
||||||
|
afterLogin(res.token, {
|
||||||
|
userID: res.userID,
|
||||||
|
username: res.username,
|
||||||
|
level: res.level
|
||||||
|
});
|
||||||
|
toast.success('Admin created — welcome to Nukumizu');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
if (mode.value === 'register' && e.status === 403) {
|
||||||
|
errMsg.value = 'An admin already exists — registration is closed. Please sign in.';
|
||||||
|
mode.value = 'login';
|
||||||
|
} else {
|
||||||
|
errMsg.value = e.message || 'Operation failed';
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="auth">
|
||||||
|
<div class="auth-inner">
|
||||||
|
<div class="brand">
|
||||||
|
<span class="mark">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 3 6.5v3.1C3 15.2 6.9 20 12 21c5.1-1 9-5.8 9-11.4V6.5L12 2Zm0 7.2V19c-3.7-.7-6.6-4.4-6.6-8.2V7.6L12 4.4l6.6 3.2v3.2c0 1.9-.5 3.7-1.4 5.1H12Z" fill="currentColor"/></svg>
|
||||||
|
</span>
|
||||||
|
<h1>Nukumizu</h1>
|
||||||
|
<p>Remote server monitoring & alert bot — admin console</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<div class="tabs">
|
||||||
|
<button :class="{ on: mode === 'login' }" @click="goTo('login')">Sign in</button>
|
||||||
|
<button :class="{ on: mode === 'register' }" @click="goTo('register')">Create admin</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form class="fields" @submit.prevent="submit">
|
||||||
|
<div class="field">
|
||||||
|
<label for="username">Username</label>
|
||||||
|
<input id="username" v-model="form.username" class="input" autocomplete="username" autofocus />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<div class="pw">
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
v-model="form.password"
|
||||||
|
class="input"
|
||||||
|
:type="showPw ? 'text' : 'password'"
|
||||||
|
autocomplete="current-password"
|
||||||
|
placeholder="At least 6 characters"
|
||||||
|
/>
|
||||||
|
<button type="button" class="icon-btn eye" tabindex="-1" @click="showPw = !showPw">
|
||||||
|
<i class="fas" :class="showPw ? 'fa-eye-slash' : 'fa-eye'" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p v-if="errMsg" class="form-err">{{ errMsg }}</p>
|
||||||
|
|
||||||
|
<button class="btn btn-primary submit" type="submit" :disabled="!canSubmit || loading">
|
||||||
|
<span v-if="loading" class="spinner" style="width:14px;height:14px;border-width:2px" />
|
||||||
|
<span>{{ mode === 'login' ? 'Sign in' : 'Create & enter' }}</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<p v-if="mode === 'register'" class="hint">
|
||||||
|
Only available while no user exists yet. The first account becomes the admin.
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.auth {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 32px 20px;
|
||||||
|
background:
|
||||||
|
radial-gradient(900px 480px at 15% -10%, var(--accent-soft), transparent 60%),
|
||||||
|
radial-gradient(700px 420px at 110% 110%, color-mix(in srgb, var(--ok) 8%, transparent), transparent 60%),
|
||||||
|
var(--bg-grad) fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-inner {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 360px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mark {
|
||||||
|
width: 54px;
|
||||||
|
height: 54px;
|
||||||
|
border-radius: 15px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
background: linear-gradient(150deg, var(--accent), var(--accent-strong));
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--accent) 55%, transparent);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mark svg { width: 32px; height: 32px; }
|
||||||
|
|
||||||
|
.brand h1 {
|
||||||
|
font-size: 26px;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand p {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--r-l);
|
||||||
|
box-shadow: var(--shadow-2);
|
||||||
|
padding: 8px 24px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
margin: 0 -24px 20px;
|
||||||
|
padding: 0 20px;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs button {
|
||||||
|
position: relative;
|
||||||
|
padding: 14px 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs button.on { color: var(--accent); }
|
||||||
|
|
||||||
|
.tabs button.on::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 8px;
|
||||||
|
right: 8px;
|
||||||
|
bottom: -1px;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fields {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pw { position: relative; }
|
||||||
|
|
||||||
|
.pw .input { padding-right: 40px; }
|
||||||
|
|
||||||
|
.pw .eye {
|
||||||
|
position: absolute;
|
||||||
|
right: 4px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-err {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--bad);
|
||||||
|
background: var(--bad-soft);
|
||||||
|
border-radius: var(--r-s);
|
||||||
|
padding: 8px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit { width: 100%; padding: 11px; }
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
font-size: 12.5px;
|
||||||
|
color: var(--text-3);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,272 @@
|
|||||||
|
<script setup>
|
||||||
|
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
|
||||||
|
import { LOG_LEVELS } from '../utils/fmt.js';
|
||||||
|
|
||||||
|
const MAX_LOGS = 1200;
|
||||||
|
|
||||||
|
const logs = ref([]);
|
||||||
|
const pending = ref([]);
|
||||||
|
const status = ref('connecting');
|
||||||
|
const paused = ref(false);
|
||||||
|
const query = ref('');
|
||||||
|
const enabled = reactive(Object.fromEntries(LOG_LEVELS.map((l) => [l.key, true])));
|
||||||
|
let ws = null;
|
||||||
|
let closedManually = false;
|
||||||
|
let reconnectTimer = null;
|
||||||
|
|
||||||
|
const levelOf = (value) => LOG_LEVELS.find((l) => l.value === value) || { key: 'LOG', value };
|
||||||
|
|
||||||
|
const visible = computed(() => {
|
||||||
|
const q = query.value.trim().toLowerCase();
|
||||||
|
return logs.value.filter((m) => {
|
||||||
|
if (!enabled[levelOf(m.level).key]) return false;
|
||||||
|
if (!q) return true;
|
||||||
|
return (
|
||||||
|
String(m.content || '').toLowerCase().includes(q) ||
|
||||||
|
levelOf(m.level).key.toLowerCase().includes(q)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const statusText = computed(() => {
|
||||||
|
switch (status.value) {
|
||||||
|
case 'open': return { label: 'Connected', cls: 'ok' };
|
||||||
|
case 'connecting': return { label: 'Reconnecting', cls: 'warn' };
|
||||||
|
default: return { label: 'Disconnected', cls: 'muted' };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function wsUrl() {
|
||||||
|
const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
|
return `${proto}//${window.location.host}/api/system/getLogs`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function connect() {
|
||||||
|
if (reconnectTimer) {
|
||||||
|
clearTimeout(reconnectTimer);
|
||||||
|
reconnectTimer = null;
|
||||||
|
}
|
||||||
|
if (ws) {
|
||||||
|
try { ws.close(); } catch { /* ignore */ }
|
||||||
|
}
|
||||||
|
status.value = 'connecting';
|
||||||
|
|
||||||
|
try {
|
||||||
|
ws = new WebSocket(wsUrl());
|
||||||
|
} catch {
|
||||||
|
scheduleReconnect();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.onopen = () => {
|
||||||
|
status.value = 'open';
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onmessage = (ev) => {
|
||||||
|
let msg;
|
||||||
|
try {
|
||||||
|
msg = JSON.parse(ev.data);
|
||||||
|
} catch {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (typeof msg.level !== 'number') return;
|
||||||
|
push(msg);
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onclose = () => {
|
||||||
|
status.value = 'closed';
|
||||||
|
if (!closedManually) scheduleReconnect();
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onerror = () => {
|
||||||
|
try { ws.close(); } catch { /* ignore */ }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function scheduleReconnect() {
|
||||||
|
if (closedManually) return;
|
||||||
|
reconnectTimer = setTimeout(connect, 1800);
|
||||||
|
}
|
||||||
|
|
||||||
|
function push(msg) {
|
||||||
|
if (paused.value) {
|
||||||
|
pending.value.push(msg);
|
||||||
|
if (pending.value.length > MAX_LOGS) pending.value.shift();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
logs.value.unshift(msg);
|
||||||
|
if (logs.value.length > MAX_LOGS) logs.value.pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
function togglePause() {
|
||||||
|
paused.value = !paused.value;
|
||||||
|
if (!paused.value) {
|
||||||
|
const buffered = pending.value.splice(0);
|
||||||
|
logs.value.unshift(...buffered);
|
||||||
|
if (logs.value.length > MAX_LOGS) logs.value.length = MAX_LOGS;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearLogs() {
|
||||||
|
logs.value = [];
|
||||||
|
pending.value = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportLogs() {
|
||||||
|
const lines = visible.value
|
||||||
|
.map((m) => `[${m.timestamp}] [${levelOf(m.level).key.padEnd(5)}] ${m.content}`)
|
||||||
|
.join('\n');
|
||||||
|
const blob = new Blob([lines], { type: 'text/plain;charset=utf-8' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = `nukumizu-logs-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.log`;
|
||||||
|
a.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleLevel(key) {
|
||||||
|
enabled[key] = !enabled[key];
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(connect);
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
closedManually = true;
|
||||||
|
if (reconnectTimer) clearTimeout(reconnectTimer);
|
||||||
|
if (ws) ws.close();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section class="page">
|
||||||
|
<header class="page-head">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Telemetry</p>
|
||||||
|
<h1>System logs</h1>
|
||||||
|
<p class="lead">Live log stream from the server. Newest entries appear first.</p>
|
||||||
|
</div>
|
||||||
|
<div class="head-actions">
|
||||||
|
<span class="conn" :class="'conn-' + statusText.cls">
|
||||||
|
<span class="dot" />{{ statusText.label }}
|
||||||
|
</span>
|
||||||
|
<button class="btn btn-ghost" title="Reconnect" @click="connect"><i class="fas fa-rotate-right" /></button>
|
||||||
|
<button class="btn btn-ghost" title="Export visible logs" @click="exportLogs"><i class="fas fa-download" /></button>
|
||||||
|
<button class="btn btn-ghost" title="Clear view" @click="clearLogs"><i class="fas fa-eraser" /></button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="toolbar">
|
||||||
|
<div class="search">
|
||||||
|
<i class="fas fa-magnifying-glass icon" />
|
||||||
|
<input v-model="query" type="text" placeholder="Filter logs…" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="level-chips">
|
||||||
|
<button
|
||||||
|
v-for="l in LOG_LEVELS"
|
||||||
|
:key="l.key"
|
||||||
|
class="chip"
|
||||||
|
:class="['lv-' + l.key.toLowerCase(), { off: !enabled[l.key] }]"
|
||||||
|
@click="toggleLevel(l.key)"
|
||||||
|
>
|
||||||
|
{{ l.key }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span class="spacer" />
|
||||||
|
|
||||||
|
<button class="btn" :class="paused ? 'btn-primary' : 'btn-ghost'" @click="togglePause">
|
||||||
|
<i class="fas" :class="paused ? 'fa-play' : 'fa-pause'" />
|
||||||
|
{{ paused ? `Resume${pending.length ? ` (${pending.length})` : ''}` : 'Pause' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card log-card">
|
||||||
|
<div v-if="visible.length === 0" class="empty">
|
||||||
|
<i class="fas fa-terminal e-icon" />
|
||||||
|
<p>No matching log entries.</p>
|
||||||
|
</div>
|
||||||
|
<div v-else class="log-list">
|
||||||
|
<div v-for="(m, i) in visible" :key="m.timestamp + '-' + i" class="log-line">
|
||||||
|
<span class="t mono">{{ m.timestamp }}</span>
|
||||||
|
<span class="lv mono" :class="'lv-' + levelOf(m.level).key.toLowerCase()">
|
||||||
|
{{ levelOf(m.level).key }}
|
||||||
|
</span>
|
||||||
|
<span class="msg">{{ m.content }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.conn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 7px;
|
||||||
|
font-size: 12.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 5px 12px;
|
||||||
|
border-radius: var(--r-pill);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.conn-ok { color: var(--ok); }
|
||||||
|
.conn-ok .dot { background: var(--ok); }
|
||||||
|
.conn-warn { color: var(--warn); }
|
||||||
|
.conn-warn .dot { background: var(--warn); }
|
||||||
|
.conn-muted { color: var(--text-3); }
|
||||||
|
.conn-muted .dot { background: var(--muted); }
|
||||||
|
|
||||||
|
.level-chips { display: flex; gap: 6px; }
|
||||||
|
|
||||||
|
.chip { cursor: pointer; transition: opacity 0.15s ease; }
|
||||||
|
.chip.off { opacity: 0.38; text-decoration: line-through; }
|
||||||
|
|
||||||
|
.lv-debug { color: var(--log-debug); }
|
||||||
|
.lv-info { color: var(--log-info); }
|
||||||
|
.lv-warn { color: var(--log-warn); }
|
||||||
|
.lv-error { color: var(--log-error); }
|
||||||
|
.lv-fatal { color: var(--log-fatal); }
|
||||||
|
|
||||||
|
.log-card { overflow: hidden; }
|
||||||
|
|
||||||
|
.log-list {
|
||||||
|
max-height: calc(100vh - 300px);
|
||||||
|
overflow-y: auto;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-line {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 170px 72px 1fr;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 7px 16px;
|
||||||
|
font-size: 12.5px;
|
||||||
|
line-height: 1.45;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-line:hover { background: var(--surface-2); }
|
||||||
|
|
||||||
|
.log-line .t { color: var(--text-3); white-space: nowrap; }
|
||||||
|
|
||||||
|
.log-line .lv {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 11px;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: var(--r-pill);
|
||||||
|
background: var(--surface-3);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-line .lv.lv-debug { background: var(--ok-soft); }
|
||||||
|
.log-line .lv.lv-info { background: var(--accent-soft); }
|
||||||
|
.log-line .lv.lv-warn { background: var(--warn-soft); }
|
||||||
|
.log-line .lv.lv-error { background: var(--bad-soft); }
|
||||||
|
.log-line .lv.lv-fatal { background: var(--bad-soft); }
|
||||||
|
|
||||||
|
.log-line .msg { color: var(--text); word-break: break-word; white-space: pre-wrap; }
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,309 @@
|
|||||||
|
<script setup>
|
||||||
|
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
|
||||||
|
import { serverApi, settingsApi } from '../api/index.js';
|
||||||
|
import { toast } from '../utils/toast.js';
|
||||||
|
import { formatBytes, shortUUID } from '../utils/fmt.js';
|
||||||
|
import Toggle from '../components/Toggle.vue';
|
||||||
|
|
||||||
|
function percent(m) {
|
||||||
|
return m && m.total ? Math.min(100, Math.max(0, Math.round((m.used / m.total) * 100))) : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
const query = ref('');
|
||||||
|
const loading = ref(true);
|
||||||
|
const failed = ref(false);
|
||||||
|
const entries = ref([]);
|
||||||
|
const saving = reactive(new Set());
|
||||||
|
let timer = null;
|
||||||
|
|
||||||
|
const filtered = computed(() => {
|
||||||
|
const q = query.value.trim().toLowerCase();
|
||||||
|
if (!q) return entries.value;
|
||||||
|
return entries.value.filter((e) =>
|
||||||
|
(e.name || '').toLowerCase().includes(q) || (e.uuid || '').toLowerCase().includes(q)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const stats = computed(() => {
|
||||||
|
let online = 0;
|
||||||
|
for (const e of entries.value) if (e.online) online += 1;
|
||||||
|
return { total: entries.value.length, online, offline: entries.value.length - online };
|
||||||
|
});
|
||||||
|
|
||||||
|
function meterClass(pct) {
|
||||||
|
if (pct >= 90) return 'bad';
|
||||||
|
if (pct >= 75) return 'warn';
|
||||||
|
return 'ok';
|
||||||
|
}
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
try {
|
||||||
|
const [status, info, nodes] = await Promise.all([
|
||||||
|
serverApi.statusAll(),
|
||||||
|
serverApi.infoAll(),
|
||||||
|
settingsApi.get('bot_node_config')
|
||||||
|
]);
|
||||||
|
const nodeConf = (nodes && nodes.config) || {};
|
||||||
|
const list = [];
|
||||||
|
for (const key of Object.keys(status)) {
|
||||||
|
if (key === 'success') continue;
|
||||||
|
const s = status[key] || {};
|
||||||
|
const infoEntry = info[key] || {};
|
||||||
|
const conf = nodeConf[key] || {};
|
||||||
|
list.push({
|
||||||
|
uuid: s.uuid || key,
|
||||||
|
name: s.name || shortUUID(s.uuid || key),
|
||||||
|
online: !!s.online,
|
||||||
|
report: s.report || null,
|
||||||
|
info: infoEntry.info || null,
|
||||||
|
notify: conf.enableStatusNotify !== false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
list.sort((a, b) => (a.online === b.online ? a.name.localeCompare(b.name) : b.online ? 1 : -1));
|
||||||
|
entries.value = list;
|
||||||
|
failed.value = false;
|
||||||
|
} catch (e) {
|
||||||
|
failed.value = true;
|
||||||
|
if (e.status !== 0) toast.error(e.message);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function toggleNotify(entry) {
|
||||||
|
const next = !entry.notify;
|
||||||
|
const prev = entry.notify;
|
||||||
|
entry.notify = next;
|
||||||
|
saving.add(entry.uuid);
|
||||||
|
try {
|
||||||
|
const patch = {};
|
||||||
|
patch[entry.uuid] = { enableStatusNotify: next };
|
||||||
|
await settingsApi.set('bot_node_config', patch);
|
||||||
|
toast.success(`${entry.name}: status notify ${next ? 'on' : 'off'}`);
|
||||||
|
} catch (e) {
|
||||||
|
entry.notify = prev;
|
||||||
|
toast.error('Save failed: ' + e.message);
|
||||||
|
} finally {
|
||||||
|
saving.delete(entry.uuid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyUUID(uuid) {
|
||||||
|
if (navigator.clipboard) {
|
||||||
|
navigator.clipboard.writeText(uuid).then(() => toast.success('UUID copied'), () => {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
load();
|
||||||
|
timer = setInterval(load, 15000);
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (timer) clearInterval(timer);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section class="page">
|
||||||
|
<header class="page-head">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Overview</p>
|
||||||
|
<h1>Nodes</h1>
|
||||||
|
<p class="lead">Monitored servers with live load, online state, and the per-node status-notify switch.</p>
|
||||||
|
</div>
|
||||||
|
<div class="head-actions">
|
||||||
|
<button class="btn btn-ghost" title="Refresh" :disabled="loading" @click="load">
|
||||||
|
<i class="fas fa-rotate" :class="{ 'fa-spin': loading }" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="toolbar">
|
||||||
|
<div class="search">
|
||||||
|
<i class="fas fa-magnifying-glass icon" />
|
||||||
|
<input v-model="query" type="text" placeholder="Search name or UUID…" />
|
||||||
|
</div>
|
||||||
|
<div class="badge badge-accent"><span class="dot" /> {{ stats.total }} total</div>
|
||||||
|
<div class="badge badge-online"><span class="dot" /> {{ stats.online }} online</div>
|
||||||
|
<div class="badge badge-offline"><span class="dot" /> {{ stats.offline }} offline</div>
|
||||||
|
<span class="spacer" />
|
||||||
|
<span class="refresh-hint"><i class="fas fa-circle-info" /> Auto-refreshes every 15s</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="failed && !loading" class="card empty">
|
||||||
|
<i class="fas fa-plug-circle-xmark e-icon" />
|
||||||
|
<p>Cannot reach the backend service</p>
|
||||||
|
<button class="btn btn-primary" @click="load">Retry</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="loading" class="card empty">
|
||||||
|
<span class="spinner" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="entries.length === 0" class="card empty">
|
||||||
|
<i class="fas fa-server e-icon" />
|
||||||
|
<p>No monitored nodes yet</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="filtered.length === 0" class="card empty">
|
||||||
|
<i class="fas fa-magnifying-glass e-icon" />
|
||||||
|
<p>No nodes match “{{ query }}”</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="grid-2">
|
||||||
|
<article
|
||||||
|
v-for="e in filtered"
|
||||||
|
:key="e.uuid"
|
||||||
|
class="card server-card"
|
||||||
|
:class="{ dim: !e.online }"
|
||||||
|
>
|
||||||
|
<div class="row-1">
|
||||||
|
<span class="sv-icon"><i class="fas fa-server" /></span>
|
||||||
|
<div class="sv-main">
|
||||||
|
<p class="sv-name" :title="e.name">{{ e.name }}</p>
|
||||||
|
<button class="sv-uuid" type="button" :title="'Copy: ' + e.uuid" @click="copyUUID(e.uuid)">
|
||||||
|
{{ shortUUID(e.uuid) }}
|
||||||
|
<i class="fas fa-copy" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<span class="badge" :class="e.online ? 'badge-online' : 'badge-offline'">
|
||||||
|
<span class="dot" />{{ e.online ? 'Online' : 'Offline' }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template v-if="e.online && e.report">
|
||||||
|
<div class="meter-row">
|
||||||
|
<span class="mr-label">CPU</span>
|
||||||
|
<div class="meter"><i :class="meterClass(e.report.cpu.usage)" :style="{ width: Math.min(100, e.report.cpu.usage) + '%' }" /></div>
|
||||||
|
<span class="mr-val">{{ e.report.cpu.usage.toFixed(1) }}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="meter-row">
|
||||||
|
<span class="mr-label">RAM</span>
|
||||||
|
<div class="meter"><i :class="meterClass(percent(e.report.ram))" :style="{ width: percent(e.report.ram) + '%' }" /></div>
|
||||||
|
<span class="mr-val">{{ formatBytes(e.report.ram.used) }} / {{ formatBytes(e.report.ram.total) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="meter-row">
|
||||||
|
<span class="mr-label">Disk</span>
|
||||||
|
<div class="meter"><i :class="meterClass(percent(e.report.disk))" :style="{ width: percent(e.report.disk) + '%' }" /></div>
|
||||||
|
<span class="mr-val">{{ formatBytes(e.report.disk.used) }} / {{ formatBytes(e.report.disk.total) }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else-if="e.online">
|
||||||
|
<p class="no-report">Online, waiting for the first status report…</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<p class="no-report">{{ e.report && e.report.message ? e.report.message : 'Currently offline' }}</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<footer class="row-3">
|
||||||
|
<div class="spec" v-if="e.info && e.info.cpu">
|
||||||
|
<span>{{ e.info.os ? e.info.os.os || '—' : '—' }}</span>
|
||||||
|
<span>·</span>
|
||||||
|
<span>{{ e.info.cpu.cpu_cores ? e.info.cpu.cpu_cores + ' cores' : '' }}</span>
|
||||||
|
<span>·</span>
|
||||||
|
<span class="mono">{{ e.info.ipv4 || (e.info.ipv6 ? 'IPv6' : '—') }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="notify">
|
||||||
|
<Toggle
|
||||||
|
:model-value="e.notify"
|
||||||
|
label="Status notify"
|
||||||
|
:disabled="saving.has(e.uuid)"
|
||||||
|
@update:model-value="toggleNotify(e)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.server-card { transition: opacity 0.25s ease; }
|
||||||
|
.server-card.dim .sv-icon,
|
||||||
|
.server-card.dim .sv-name { opacity: 0.75; }
|
||||||
|
|
||||||
|
.sv-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
flex: none;
|
||||||
|
border-radius: 11px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
background: var(--accent-soft);
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-card.dim .sv-icon {
|
||||||
|
background: var(--surface-3);
|
||||||
|
color: var(--text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sv-main {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sv-uuid {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 11.5px;
|
||||||
|
color: var(--text-3);
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sv-uuid:hover { color: var(--accent); }
|
||||||
|
|
||||||
|
.meter-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 44px 1fr auto;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr-label { font-size: 12px; color: var(--text-3); font-weight: 600; }
|
||||||
|
|
||||||
|
.mr-val {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-2);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
min-width: 90px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-report {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-3);
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-3 {
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
padding-top: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spec {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-3);
|
||||||
|
min-width: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notify { display: flex; align-items: center; }
|
||||||
|
|
||||||
|
.refresh-hint {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-3);
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,350 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from 'vue';
|
||||||
|
import { settingsApi } from '../api/index.js';
|
||||||
|
import { toast } from '../utils/toast.js';
|
||||||
|
import Toggle from '../components/Toggle.vue';
|
||||||
|
import TagsEditor from '../components/TagsEditor.vue';
|
||||||
|
import HeadersEditor from '../components/HeadersEditor.vue';
|
||||||
|
|
||||||
|
const sections = [
|
||||||
|
{
|
||||||
|
id: 'system',
|
||||||
|
title: 'System',
|
||||||
|
hint: 'HTTP listener and global runtime switches.',
|
||||||
|
root: ['system'],
|
||||||
|
fields: [
|
||||||
|
{ key: 'debugMode', type: 'bool', label: 'Debug mode', help: 'Skipped X-Timestamp checks and verbose debug logging.' },
|
||||||
|
{ key: 'listenAddr', type: 'text', label: 'Listen address' },
|
||||||
|
{ key: 'listenPort', type: 'text', label: 'Listen port' },
|
||||||
|
{ key: 'networkProxy', type: 'text', label: 'Network proxy', placeholder: 'http://host:port' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'debug',
|
||||||
|
title: 'Debug logging',
|
||||||
|
hint: 'Per-module verbosity for the bot pipes.',
|
||||||
|
root: ['debug'],
|
||||||
|
fields: [
|
||||||
|
{ key: 'showNapcatMsg', type: 'bool', label: 'NapCat messages' },
|
||||||
|
{ key: 'showNapcatAction', type: 'bool', label: 'NapCat actions' },
|
||||||
|
{ key: 'showTelegramMsg', type: 'bool', label: 'Telegram messages' },
|
||||||
|
{ key: 'showTriggerCmdEcho', type: 'bool', label: 'Trigger command echo' },
|
||||||
|
{ key: 'showKomariTaskEcho', type: 'bool', label: 'Komari task echo' },
|
||||||
|
{ key: 'napcatIgnoreSelfMsg', type: 'bool', label: 'Ignore NapCat self messages' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'komari',
|
||||||
|
title: 'Komari dashboard',
|
||||||
|
hint: 'Connection the monitor reads node data from. Takes effect on restart.',
|
||||||
|
root: ['komari'],
|
||||||
|
fields: [
|
||||||
|
{ key: 'dashboardURL', type: 'text', label: 'Dashboard URL' },
|
||||||
|
{ key: 'account.username', lp: ['account', 'username'], type: 'text', label: 'Account' },
|
||||||
|
{ key: 'account.password', lp: ['account', 'password'], type: 'password', label: 'Password' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'controllerMessage',
|
||||||
|
title: 'Message templates',
|
||||||
|
hint: 'Templates rendered for bot pushes. Placeholders like {{ serverName }} stay as-is.',
|
||||||
|
root: ['controllerMessage'],
|
||||||
|
fields: [
|
||||||
|
{ key: 'BOT_STARTED', type: 'textarea', label: 'BOT_STARTED' },
|
||||||
|
{ key: 'BOT_HELP', type: 'textarea', label: 'BOT_HELP' },
|
||||||
|
{ key: 'TG_BOT_START', type: 'textarea', label: 'TG_BOT_START' },
|
||||||
|
{ key: 'SERVER_STATUS_CHANGED', type: 'textarea', label: 'SERVER_STATUS_CHANGED' },
|
||||||
|
{ key: 'SERVER_LIST', type: 'textarea', label: 'SERVER_LIST' },
|
||||||
|
{ key: 'SERVER_EXECUTE_RESULT', type: 'textarea', label: 'SERVER_EXECUTE_RESULT' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'qq',
|
||||||
|
title: 'QQ controller (NapCat)',
|
||||||
|
root: ['controllerMethod', 'qq(napcat)'],
|
||||||
|
fields: [
|
||||||
|
{ key: 'enabled', type: 'bool', label: 'Enabled' },
|
||||||
|
{ key: 'networkUseProxy', type: 'bool', label: 'Use network proxy' },
|
||||||
|
{ key: 'napcatAddr', type: 'text', label: 'NapCat address' },
|
||||||
|
{ key: 'napcatPort', type: 'text', label: 'NapCat port' },
|
||||||
|
{ key: 'napcatToken', type: 'password', label: 'NapCat token' },
|
||||||
|
{ key: 'botQQID', type: 'number', label: 'Bot QQ ID' },
|
||||||
|
{ key: 'listenMethod', type: 'select', label: 'Listen method', options: ['global', 'at'] }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'telegram',
|
||||||
|
title: 'Telegram controller',
|
||||||
|
root: ['controllerMethod', 'telegram'],
|
||||||
|
fields: [
|
||||||
|
{ key: 'enabled', type: 'bool', label: 'Enabled' },
|
||||||
|
{ key: 'networkUseProxy', type: 'bool', label: 'Use network proxy' },
|
||||||
|
{ key: 'botToken', type: 'password', label: 'Bot token' },
|
||||||
|
{ key: 'listenMethod', type: 'select', label: 'Listen method', options: ['global', 'at'] }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'email',
|
||||||
|
title: 'Email notifications',
|
||||||
|
root: ['controllerMethod', 'email'],
|
||||||
|
fields: [
|
||||||
|
{ key: 'enabled', type: 'bool', label: 'Enabled' },
|
||||||
|
{ key: 'networkUseProxy', type: 'bool', label: 'Use network proxy' },
|
||||||
|
{ key: 'smtpHost', type: 'text', label: 'SMTP host' },
|
||||||
|
{ key: 'smtpPort', type: 'number', label: 'SMTP port' },
|
||||||
|
{ key: 'username', type: 'text', label: 'Username' },
|
||||||
|
{ key: 'password', type: 'password', label: 'Password' },
|
||||||
|
{ key: 'from', type: 'text', label: 'From address' },
|
||||||
|
{ key: 'to', type: 'tags', label: 'Recipients', placeholder: 'Type an address and press Enter' },
|
||||||
|
{ key: 'useTLS', type: 'bool', label: 'Use TLS' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'ntfy',
|
||||||
|
title: 'Ntfy notifications',
|
||||||
|
root: ['controllerMethod', 'ntfy'],
|
||||||
|
fields: [
|
||||||
|
{ key: 'enabled', type: 'bool', label: 'Enabled' },
|
||||||
|
{ key: 'networkUseProxy', type: 'bool', label: 'Use network proxy' },
|
||||||
|
{ key: 'server', type: 'text', label: 'Server' },
|
||||||
|
{ key: 'topic', type: 'text', label: 'Topic' },
|
||||||
|
{ key: 'token', type: 'password', label: 'Token' },
|
||||||
|
{ key: 'priority', type: 'select', label: 'Priority', options: ['min', 'low', 'default', 'high', 'urgent', 'max'] }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'webhook',
|
||||||
|
title: 'Webhook notifications',
|
||||||
|
root: ['controllerMethod', 'webhook'],
|
||||||
|
fields: [
|
||||||
|
{ key: 'enabled', type: 'bool', label: 'Enabled' },
|
||||||
|
{ key: 'networkUseProxy', type: 'bool', label: 'Use network proxy' },
|
||||||
|
{ key: 'url', type: 'text', label: 'URL' },
|
||||||
|
{ key: 'method', type: 'select', label: 'Method', options: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'] },
|
||||||
|
{ key: 'headers', type: 'headers', label: 'Headers' },
|
||||||
|
{ key: 'template', type: 'textarea', label: 'Payload template' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'paths',
|
||||||
|
title: 'Storage paths',
|
||||||
|
hint: 'Where runtime data lives. Takes effect on restart.',
|
||||||
|
root: [],
|
||||||
|
fields: [
|
||||||
|
{ key: 'dataPath', type: 'text', label: 'Data path' },
|
||||||
|
{ key: 'dbPath', type: 'text', label: 'Database path' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const loading = ref(true);
|
||||||
|
const failed = ref(false);
|
||||||
|
const vals = reactive({});
|
||||||
|
const saving = reactive(new Set());
|
||||||
|
|
||||||
|
function fieldPath(f) {
|
||||||
|
return f.lp || [f.key];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getVal(obj, path, fb) {
|
||||||
|
let cur = obj;
|
||||||
|
for (const k of path) {
|
||||||
|
if (cur === null || cur === undefined || typeof cur !== 'object') return fb;
|
||||||
|
cur = cur[k];
|
||||||
|
}
|
||||||
|
return cur === undefined || cur === null ? fb : cur;
|
||||||
|
}
|
||||||
|
|
||||||
|
function defaults(f) {
|
||||||
|
switch (f.type) {
|
||||||
|
case 'bool': return false;
|
||||||
|
case 'number': return 0;
|
||||||
|
case 'tags': return [];
|
||||||
|
case 'headers': return {};
|
||||||
|
default: return '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
try {
|
||||||
|
const res = await settingsApi.get('global');
|
||||||
|
const cfg = (res && res.config) || {};
|
||||||
|
for (const s of sections) {
|
||||||
|
const obj = {};
|
||||||
|
for (const f of s.fields) {
|
||||||
|
obj[f.key] = getVal(cfg, fieldPath(f), defaults(f));
|
||||||
|
}
|
||||||
|
vals[s.id] = obj;
|
||||||
|
}
|
||||||
|
failed.value = false;
|
||||||
|
} catch (e) {
|
||||||
|
failed.value = true;
|
||||||
|
if (e.status) toast.error('Failed to load settings: ' + e.message);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalize(f, v) {
|
||||||
|
switch (f.type) {
|
||||||
|
case 'number': {
|
||||||
|
const n = Number(v);
|
||||||
|
return Number.isFinite(n) ? n : 0;
|
||||||
|
}
|
||||||
|
case 'tags': return Array.isArray(v) ? v : [];
|
||||||
|
case 'headers': return v && typeof v === 'object' ? v : {};
|
||||||
|
default: return v === null || v === undefined ? '' : v;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function nest(obj) {
|
||||||
|
const out = {};
|
||||||
|
for (const [k, v] of Object.entries(obj)) {
|
||||||
|
const path = k.split('.');
|
||||||
|
let o = out;
|
||||||
|
for (let i = 0; i < path.length - 1; i += 1) {
|
||||||
|
const seg = path[i];
|
||||||
|
if (!o[seg]) o[seg] = {};
|
||||||
|
o = o[seg];
|
||||||
|
}
|
||||||
|
o[path[path.length - 1]] = v;
|
||||||
|
}
|
||||||
|
return out;
|
||||||
|
}
|
||||||
|
|
||||||
|
function wrapRoot(section, obj) {
|
||||||
|
const root = section.root;
|
||||||
|
if (!root.length) return obj;
|
||||||
|
const out = {};
|
||||||
|
let o = out;
|
||||||
|
for (let i = 0; i < root.length - 1; i += 1) {
|
||||||
|
o[root[i]] = {};
|
||||||
|
o = o[root[i]];
|
||||||
|
}
|
||||||
|
o[root[root.length - 1]] = obj;
|
||||||
|
return out;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function save(section) {
|
||||||
|
const source = vals[section.id];
|
||||||
|
const obj = {};
|
||||||
|
for (const f of section.fields) {
|
||||||
|
obj[f.key] = normalize(f, source[f.key]);
|
||||||
|
}
|
||||||
|
const patch = wrapRoot(section, nest(obj));
|
||||||
|
saving.add(section.id);
|
||||||
|
try {
|
||||||
|
await settingsApi.set('global', patch);
|
||||||
|
toast.success(`${section.title} saved`);
|
||||||
|
await load();
|
||||||
|
} catch (e) {
|
||||||
|
toast.error('Failed to save: ' + e.message);
|
||||||
|
} finally {
|
||||||
|
saving.delete(section.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(load);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section class="page">
|
||||||
|
<header class="page-head">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Configuration</p>
|
||||||
|
<h1>System settings</h1>
|
||||||
|
<p class="lead">Edit the global <span class="mono">config.json</span>. Every card saves only its own section — other fields stay untouched.</p>
|
||||||
|
</div>
|
||||||
|
<div class="head-actions">
|
||||||
|
<button class="btn btn-ghost" @click="load"><i class="fas fa-rotate" :class="{ 'fa-spin': loading }" /> Reload</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div v-if="failed" class="card empty">
|
||||||
|
<i class="fas fa-plug-circle-xmark e-icon" />
|
||||||
|
<p>Failed to load settings</p>
|
||||||
|
<button class="btn btn-primary" @click="load">Retry</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="loading" class="card empty"><span class="spinner" /></div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
<div v-for="s in sections" :key="s.id" class="card">
|
||||||
|
<div class="card-head">
|
||||||
|
<div>
|
||||||
|
<h3>{{ s.title }}</h3>
|
||||||
|
<p v-if="s.hint" class="hint">{{ s.hint }}</p>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary btn-sm" :disabled="saving.has(s.id)" @click="save(s)">
|
||||||
|
<span v-if="saving.has(s.id)" class="spinner" style="width:12px;height:12px" />
|
||||||
|
<i v-else class="fas fa-check" /> Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="form-grid">
|
||||||
|
<template v-for="f in s.fields" :key="f.key">
|
||||||
|
<div v-if="f.type === 'bool'" class="bool-cell">
|
||||||
|
<Toggle :model-value="vals[s.id][f.key]" :label="f.label" @update:model-value="vals[s.id][f.key] = $event" />
|
||||||
|
<p v-if="f.help" class="field-help">{{ f.help }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="f.type === 'tags'" class="field span-2">
|
||||||
|
<label>{{ f.label }}</label>
|
||||||
|
<TagsEditor v-model="vals[s.id][f.key]" :placeholder="f.placeholder" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="f.type === 'headers'" class="field span-2">
|
||||||
|
<label>{{ f.label }}</label>
|
||||||
|
<HeadersEditor v-model="vals[s.id][f.key]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="field span-2">
|
||||||
|
<label>{{ f.label }}</label>
|
||||||
|
<textarea
|
||||||
|
v-if="f.type === 'textarea'"
|
||||||
|
v-model="vals[s.id][f.key]"
|
||||||
|
class="textarea"
|
||||||
|
rows="4"
|
||||||
|
spellcheck="false"
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
v-else-if="f.type === 'select'"
|
||||||
|
v-model="vals[s.id][f.key]"
|
||||||
|
class="select"
|
||||||
|
>
|
||||||
|
<option v-for="opt in f.options" :key="opt" :value="opt">{{ opt }}</option>
|
||||||
|
</select>
|
||||||
|
<input
|
||||||
|
v-else
|
||||||
|
v-model="vals[s.id][f.key]"
|
||||||
|
class="input"
|
||||||
|
:type="f.type === 'password' ? 'password' : 'text'"
|
||||||
|
:placeholder="f.placeholder || ''"
|
||||||
|
autocomplete="off"
|
||||||
|
spellcheck="false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.bool-cell {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 3px;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-help {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-3);
|
||||||
|
padding-left: 50px;
|
||||||
|
max-width: 340px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,298 @@
|
|||||||
|
<script setup>
|
||||||
|
import { computed, onMounted, reactive, ref } from 'vue';
|
||||||
|
import { settingsApi } from '../api/index.js';
|
||||||
|
import { toast } from '../utils/toast.js';
|
||||||
|
import Toggle from '../components/Toggle.vue';
|
||||||
|
import Modal from '../components/Modal.vue';
|
||||||
|
|
||||||
|
const CHANNELS = [
|
||||||
|
{ key: 'qq(napcat)', label: 'QQ (NapCat)', hint: 'Members are identified by QQ number / group number' },
|
||||||
|
{ key: 'telegram', label: 'Telegram', hint: 'Members are identified by @username or numeric ID / group ID' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const KINDS = [
|
||||||
|
{ key: 'admins', label: 'Admins' },
|
||||||
|
{ key: 'trustedGroups', label: 'Trusted groups' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const OPTIONS = [
|
||||||
|
{ key: 'event_status_notify', label: 'Status notify' },
|
||||||
|
{ key: 'event_bot_started', label: 'Startup notify' },
|
||||||
|
{ key: 'event_reply', label: 'Command replies' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const loading = ref(true);
|
||||||
|
const failed = ref(false);
|
||||||
|
const rows = ref([]);
|
||||||
|
const saving = reactive(new Set());
|
||||||
|
|
||||||
|
const addModal = reactive({ open: false, ch: CHANNELS[0].key, kind: 'admins', id: '' });
|
||||||
|
const removing = reactive({ open: false, ch: '', kind: '', id: '' });
|
||||||
|
|
||||||
|
const rowsOf = (ch, kind) => rows.value
|
||||||
|
.filter((r) => r.ch === ch && r.kind === kind)
|
||||||
|
.sort((a, b) => a.id.localeCompare(b.id));
|
||||||
|
|
||||||
|
const summary = computed(() => {
|
||||||
|
const out = {};
|
||||||
|
for (const c of CHANNELS) {
|
||||||
|
out[c.key] = { admins: rowsOf(c.key, 'admins').length, trustedGroups: rowsOf(c.key, 'trustedGroups').length };
|
||||||
|
}
|
||||||
|
return out;
|
||||||
|
});
|
||||||
|
|
||||||
|
const defaultOpts = () => ({
|
||||||
|
event_status_notify: true,
|
||||||
|
event_bot_started: true,
|
||||||
|
event_reply: true
|
||||||
|
});
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
try {
|
||||||
|
const res = await settingsApi.get('bot_user_config');
|
||||||
|
const cfg = (res && res.config) || {};
|
||||||
|
const flat = [];
|
||||||
|
for (const c of CHANNELS) {
|
||||||
|
const chData = cfg[c.key] || {};
|
||||||
|
for (const k of KINDS) {
|
||||||
|
const map = chData[k.key] || {};
|
||||||
|
for (const [id, opts] of Object.entries(map)) {
|
||||||
|
flat.push({
|
||||||
|
ch: c.key,
|
||||||
|
kind: k.key,
|
||||||
|
id,
|
||||||
|
opts: {
|
||||||
|
event_status_notify: opts.event_status_notify !== false,
|
||||||
|
event_bot_started: opts.event_bot_started !== false,
|
||||||
|
event_reply: opts.event_reply !== false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
rows.value = flat;
|
||||||
|
failed.value = false;
|
||||||
|
} catch (e) {
|
||||||
|
failed.value = true;
|
||||||
|
if (e.status) toast.error('Failed to load: ' + e.message);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function patchRow(row) {
|
||||||
|
const p = {};
|
||||||
|
p[row.ch] = { [row.kind]: { [row.id]: { ...row.opts } } };
|
||||||
|
return p;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function applyPatch(patch, okMsg, rollbackFn) {
|
||||||
|
try {
|
||||||
|
await settingsApi.set('bot_user_config', patch);
|
||||||
|
if (okMsg) toast.success(okMsg);
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
if (rollbackFn) rollbackFn();
|
||||||
|
toast.error('Save failed: ' + e.message);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleOpt(row, key, value) {
|
||||||
|
const prev = row.opts[key];
|
||||||
|
row.opts[key] = value;
|
||||||
|
applyPatch(patchRow(row), undefined, () => { row.opts[key] = prev; });
|
||||||
|
}
|
||||||
|
|
||||||
|
function openAdd(ch, kind) {
|
||||||
|
addModal.ch = ch;
|
||||||
|
addModal.kind = kind;
|
||||||
|
addModal.id = '';
|
||||||
|
addModal.open = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function confirmAdd() {
|
||||||
|
const id = addModal.id.trim();
|
||||||
|
if (!id) return toast.warn('Enter a member ID');
|
||||||
|
const exists = rows.value.some((r) => r.ch === addModal.ch && r.kind === addModal.kind && r.id === id);
|
||||||
|
if (exists) {
|
||||||
|
toast.warn('That member already exists');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const row = { ch: addModal.ch, kind: addModal.kind, id, opts: defaultOpts() };
|
||||||
|
if (await applyPatch(patchRow(row), 'Member added')) {
|
||||||
|
rows.value.push(row);
|
||||||
|
addModal.open = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function askRemove(row) {
|
||||||
|
removing.ch = row.ch;
|
||||||
|
removing.kind = row.kind;
|
||||||
|
removing.id = row.id;
|
||||||
|
removing.open = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function confirmRemove() {
|
||||||
|
const { ch, kind, id } = removing;
|
||||||
|
const p = {};
|
||||||
|
p[ch] = { [kind]: { [id]: null } };
|
||||||
|
if (await applyPatch(p, 'Member removed')) {
|
||||||
|
rows.value = rows.value.filter((r) => !(r.ch === ch && r.kind === kind && r.id === id));
|
||||||
|
removing.open = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(load);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section class="page">
|
||||||
|
<header class="page-head">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Bot trust</p>
|
||||||
|
<h1>Trust management</h1>
|
||||||
|
<p class="lead">Which admins and groups each bot channel answers to, plus per-member notification and reply switches.</p>
|
||||||
|
</div>
|
||||||
|
<div class="head-actions">
|
||||||
|
<button class="btn btn-ghost" @click="load">
|
||||||
|
<i class="fas fa-rotate" :class="{ 'fa-spin': loading }" /> Reload
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div v-if="failed" class="card empty">
|
||||||
|
<i class="fas fa-plug-circle-xmark e-icon" />
|
||||||
|
<p>Failed to load, please check the backend connection</p>
|
||||||
|
<button class="btn btn-primary" @click="load">Retry</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-for="c in CHANNELS" :key="c.key" class="card">
|
||||||
|
<div class="card-head">
|
||||||
|
<div>
|
||||||
|
<h3>{{ c.label }}</h3>
|
||||||
|
<p class="hint">{{ c.hint }}</p>
|
||||||
|
</div>
|
||||||
|
<span class="chip">
|
||||||
|
{{ summary[c.key].admins }} admins · {{ summary[c.key].trustedGroups }} groups
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-body">
|
||||||
|
<div v-for="k in KINDS" :key="k.key" class="kind-block">
|
||||||
|
<div class="kind-head">
|
||||||
|
<span class="kind-title">{{ k.label }}</span>
|
||||||
|
<button class="btn btn-ghost btn-sm" @click="openAdd(c.key, k.key)">
|
||||||
|
<i class="fas fa-plus" /> Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="loading" class="empty" style="padding:24px"><span class="spinner" /></div>
|
||||||
|
<div v-else-if="rowsOf(c.key, k.key).length === 0" class="empty" style="padding:22px">
|
||||||
|
No {{ k.label.toLowerCase() }} yet
|
||||||
|
</div>
|
||||||
|
<div v-else class="opt-list">
|
||||||
|
<div v-for="r in rowsOf(c.key, k.key)" :key="r.id" class="opt-row">
|
||||||
|
<div class="who">
|
||||||
|
<span class="id mono">{{ r.id }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="toggles">
|
||||||
|
<div v-for="o in OPTIONS" :key="o.key" class="oc">
|
||||||
|
<span class="oc-label">{{ o.label }}</span>
|
||||||
|
<Toggle
|
||||||
|
:model-value="r.opts[o.key]"
|
||||||
|
@update:model-value="toggleOpt(r, o.key, $event)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button class="icon-btn danger" title="Remove" @click="askRemove(r)">
|
||||||
|
<i class="fas fa-trash" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Modal :open="addModal.open" title="Add member" @close="addModal.open = false">
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="field">
|
||||||
|
<label>Channel</label>
|
||||||
|
<select v-model="addModal.ch" class="select">
|
||||||
|
<option v-for="c in CHANNELS" :key="c.key" :value="c.key">{{ c.label }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label>Type</label>
|
||||||
|
<select v-model="addModal.kind" class="select">
|
||||||
|
<option v-for="k in KINDS" :key="k.key" :value="k.key">{{ k.label }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="field span-2">
|
||||||
|
<label>Member ID</label>
|
||||||
|
<input
|
||||||
|
v-model="addModal.id"
|
||||||
|
class="input mono"
|
||||||
|
placeholder="QQ / group number, or Telegram @username / numeric ID"
|
||||||
|
@keydown.enter="confirmAdd"
|
||||||
|
/>
|
||||||
|
<p class="help">New members start with every notification enabled; adjust them in the list.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template #foot>
|
||||||
|
<button class="btn btn-ghost" @click="addModal.open = false">Cancel</button>
|
||||||
|
<button class="btn btn-primary" @click="confirmAdd">Add</button>
|
||||||
|
</template>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Modal :open="removing.open" title="Remove member" @close="removing.open = false">
|
||||||
|
<p style="line-height:1.6">
|
||||||
|
Remove <strong class="mono">{{ removing.id }}</strong> from
|
||||||
|
<strong>{{ KINDS.find((k) => k.key === removing.kind)?.label }}</strong>?
|
||||||
|
</p>
|
||||||
|
<template #foot>
|
||||||
|
<button class="btn btn-ghost" @click="removing.open = false">Cancel</button>
|
||||||
|
<button class="btn btn-danger" @click="confirmRemove">Remove</button>
|
||||||
|
</template>
|
||||||
|
</Modal>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.kind-block + .kind-block { margin-top: 20px; }
|
||||||
|
|
||||||
|
.kind-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kind-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
color: var(--text-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggles {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 18px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-3);
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
|
||||||
|
// Backend the dev server proxies /api (and the log websocket) to.
|
||||||
|
const BACKEND = process.env.NUKUMIZU_API || 'http://127.0.0.1:8080';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
server: {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
port: 5173,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: BACKEND,
|
||||||
|
changeOrigin: true,
|
||||||
|
ws: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user