新建仓库
This commit is contained in:
commit
c3ff86d2c1
41
config.php
Normal file
41
config.php
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* 路由拓扑 · 多用户版 — 全局配置
|
||||||
|
*
|
||||||
|
* 修改本文件即可切换数据库驱动等行为,无需改动业务代码。
|
||||||
|
*/
|
||||||
|
return array(
|
||||||
|
|
||||||
|
/* ---------- 数据库 ---------- */
|
||||||
|
'db' => array(
|
||||||
|
// 驱动:sqlite(默认,零配置)| mysql
|
||||||
|
'driver' => 'sqlite',
|
||||||
|
|
||||||
|
'sqlite' => array(
|
||||||
|
// SQLite 数据库文件路径(相对于项目根目录的 data 目录)
|
||||||
|
'path' => __DIR__ . DIRECTORY_SEPARATOR . 'data' . DIRECTORY_SEPARATOR . 'app.db',
|
||||||
|
),
|
||||||
|
|
||||||
|
'mysql' => array(
|
||||||
|
'host' => '127.0.0.1',
|
||||||
|
'port' => 3306,
|
||||||
|
'database' => 'route_topo',
|
||||||
|
'username' => 'root',
|
||||||
|
'password' => '',
|
||||||
|
'charset' => 'utf8mb4',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
|
||||||
|
/* ---------- 账号与会话 ---------- */
|
||||||
|
// 是否允许访客自助注册普通账号(如需完全由管理员分配账号,改为 false)
|
||||||
|
'allow_registration' => true,
|
||||||
|
|
||||||
|
// 会话有效期(秒),默认 30 天
|
||||||
|
'session_ttl' => 60 * 60 * 24 * 30,
|
||||||
|
|
||||||
|
// 首次启动时自动创建的默认管理员
|
||||||
|
'default_admin' => array(
|
||||||
|
'username' => 'admin',
|
||||||
|
'password' => 'admin123',
|
||||||
|
),
|
||||||
|
);
|
||||||
189
lib/db.php
Normal file
189
lib/db.php
Normal file
@ -0,0 +1,189 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* 数据库连接与建表(SQLite / MySQL 兼容)
|
||||||
|
*/
|
||||||
|
function app_config()
|
||||||
|
{
|
||||||
|
static $cfg = null;
|
||||||
|
if ($cfg === null) {
|
||||||
|
$cfg = require __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'config.php';
|
||||||
|
}
|
||||||
|
return $cfg;
|
||||||
|
}
|
||||||
|
|
||||||
|
function data_dir()
|
||||||
|
{
|
||||||
|
return dirname(__DIR__) . DIRECTORY_SEPARATOR . 'data';
|
||||||
|
}
|
||||||
|
|
||||||
|
function db_driver()
|
||||||
|
{
|
||||||
|
$cfg = app_config();
|
||||||
|
return isset($cfg['db']['driver']) ? $cfg['db']['driver'] : 'sqlite';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取 PDO 单例连接(首次调用时自动建表)
|
||||||
|
*/
|
||||||
|
function db()
|
||||||
|
{
|
||||||
|
static $pdo = null;
|
||||||
|
if ($pdo !== null) {
|
||||||
|
return $pdo;
|
||||||
|
}
|
||||||
|
|
||||||
|
$cfg = app_config();
|
||||||
|
$driver = db_driver();
|
||||||
|
$options = array(
|
||||||
|
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
|
||||||
|
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
|
||||||
|
);
|
||||||
|
|
||||||
|
if ($driver === 'mysql') {
|
||||||
|
$options[PDO::ATTR_EMULATE_PREPARES] = false;
|
||||||
|
$m = $cfg['db']['mysql'];
|
||||||
|
$dsn = 'mysql:host=' . $m['host'] . ';port=' . $m['port'] . ';dbname=' . $m['database'] . ';charset=' . $m['charset'];
|
||||||
|
$pdo = new PDO($dsn, $m['username'], $m['password'], $options);
|
||||||
|
} else {
|
||||||
|
$path = $cfg['db']['sqlite']['path'];
|
||||||
|
$dir = dirname($path);
|
||||||
|
if (!is_dir($dir)) {
|
||||||
|
@mkdir($dir, 0777, true);
|
||||||
|
}
|
||||||
|
$pdo = new PDO('sqlite:' . $path, null, null, $options);
|
||||||
|
// 使用回滚日志(非 WAL):事务提交即写入主库文件,
|
||||||
|
// 避免 -wal/-shm 在站点迁移、文件覆盖等场景下丢失,导致写入看似成功但未真正保存
|
||||||
|
$pdo->exec('PRAGMA journal_mode = DELETE');
|
||||||
|
$pdo->exec('PRAGMA synchronous = NORMAL');
|
||||||
|
$pdo->exec('PRAGMA busy_timeout = 5000');
|
||||||
|
$pdo->exec('PRAGMA foreign_keys = ON');
|
||||||
|
}
|
||||||
|
|
||||||
|
init_schema($pdo, $driver);
|
||||||
|
return $pdo;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 建表(幂等)
|
||||||
|
*/
|
||||||
|
function init_schema($pdo, $driver)
|
||||||
|
{
|
||||||
|
if ($driver === 'mysql') {
|
||||||
|
$pdo->exec("CREATE TABLE IF NOT EXISTS users (
|
||||||
|
id VARCHAR(32) NOT NULL,
|
||||||
|
username VARCHAR(32) NOT NULL,
|
||||||
|
password_hash VARCHAR(255) NOT NULL,
|
||||||
|
role VARCHAR(16) NOT NULL DEFAULT 'user',
|
||||||
|
disabled TINYINT NOT NULL DEFAULT 0,
|
||||||
|
must_change_password TINYINT NOT NULL DEFAULT 0,
|
||||||
|
created_at VARCHAR(32) DEFAULT NULL,
|
||||||
|
last_login_at VARCHAR(32) DEFAULT NULL,
|
||||||
|
login_count INT NOT NULL DEFAULT 0,
|
||||||
|
PRIMARY KEY (id),
|
||||||
|
UNIQUE KEY uk_users_username (username)
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");
|
||||||
|
|
||||||
|
$pdo->exec("CREATE TABLE IF NOT EXISTS sessions (
|
||||||
|
token VARCHAR(64) NOT NULL,
|
||||||
|
user_id VARCHAR(32) NOT NULL,
|
||||||
|
created_at VARCHAR(32) DEFAULT NULL,
|
||||||
|
expires_at BIGINT NOT NULL,
|
||||||
|
ip VARCHAR(45) DEFAULT NULL,
|
||||||
|
user_agent VARCHAR(255) DEFAULT NULL,
|
||||||
|
PRIMARY KEY (token),
|
||||||
|
KEY idx_sessions_user (user_id)
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");
|
||||||
|
|
||||||
|
$pdo->exec("CREATE TABLE IF NOT EXISTS topologies (
|
||||||
|
id VARCHAR(32) NOT NULL,
|
||||||
|
name VARCHAR(120) NOT NULL,
|
||||||
|
owner_id VARCHAR(32) NOT NULL,
|
||||||
|
visibility VARCHAR(16) NOT NULL DEFAULT 'private',
|
||||||
|
data LONGTEXT,
|
||||||
|
node_count INT NOT NULL DEFAULT 0,
|
||||||
|
edge_count INT NOT NULL DEFAULT 0,
|
||||||
|
created_at VARCHAR(32) DEFAULT NULL,
|
||||||
|
updated_at VARCHAR(32) DEFAULT NULL,
|
||||||
|
PRIMARY KEY (id),
|
||||||
|
KEY idx_topo_owner (owner_id),
|
||||||
|
KEY idx_topo_updated (updated_at)
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");
|
||||||
|
|
||||||
|
$pdo->exec("CREATE TABLE IF NOT EXISTS activity_logs (
|
||||||
|
id INT NOT NULL AUTO_INCREMENT,
|
||||||
|
user_id VARCHAR(32) DEFAULT NULL,
|
||||||
|
username VARCHAR(32) DEFAULT NULL,
|
||||||
|
action VARCHAR(40) DEFAULT NULL,
|
||||||
|
target VARCHAR(64) DEFAULT NULL,
|
||||||
|
detail VARCHAR(255) DEFAULT NULL,
|
||||||
|
ip VARCHAR(45) DEFAULT NULL,
|
||||||
|
created_at VARCHAR(32) DEFAULT NULL,
|
||||||
|
PRIMARY KEY (id),
|
||||||
|
KEY idx_logs_created (created_at)
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");
|
||||||
|
|
||||||
|
$pdo->exec("CREATE TABLE IF NOT EXISTS settings (
|
||||||
|
skey VARCHAR(64) NOT NULL,
|
||||||
|
sval LONGTEXT,
|
||||||
|
updated_at VARCHAR(32) DEFAULT NULL,
|
||||||
|
PRIMARY KEY (skey)
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- SQLite ---------- */
|
||||||
|
$pdo->exec("CREATE TABLE IF NOT EXISTS users (
|
||||||
|
id TEXT NOT NULL PRIMARY KEY,
|
||||||
|
username TEXT NOT NULL UNIQUE,
|
||||||
|
password_hash TEXT NOT NULL,
|
||||||
|
role TEXT NOT NULL DEFAULT 'user',
|
||||||
|
disabled INTEGER NOT NULL DEFAULT 0,
|
||||||
|
must_change_password INTEGER NOT NULL DEFAULT 0,
|
||||||
|
created_at TEXT,
|
||||||
|
last_login_at TEXT,
|
||||||
|
login_count INTEGER NOT NULL DEFAULT 0
|
||||||
|
)");
|
||||||
|
|
||||||
|
$pdo->exec("CREATE TABLE IF NOT EXISTS sessions (
|
||||||
|
token TEXT NOT NULL PRIMARY KEY,
|
||||||
|
user_id TEXT NOT NULL,
|
||||||
|
created_at TEXT,
|
||||||
|
expires_at INTEGER NOT NULL,
|
||||||
|
ip TEXT,
|
||||||
|
user_agent TEXT
|
||||||
|
)");
|
||||||
|
|
||||||
|
$pdo->exec("CREATE TABLE IF NOT EXISTS topologies (
|
||||||
|
id TEXT NOT NULL PRIMARY KEY,
|
||||||
|
name TEXT NOT NULL,
|
||||||
|
owner_id TEXT NOT NULL,
|
||||||
|
visibility TEXT NOT NULL DEFAULT 'private',
|
||||||
|
data TEXT,
|
||||||
|
node_count INTEGER NOT NULL DEFAULT 0,
|
||||||
|
edge_count INTEGER NOT NULL DEFAULT 0,
|
||||||
|
created_at TEXT,
|
||||||
|
updated_at TEXT
|
||||||
|
)");
|
||||||
|
|
||||||
|
$pdo->exec("CREATE TABLE IF NOT EXISTS activity_logs (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id TEXT,
|
||||||
|
username TEXT,
|
||||||
|
action TEXT,
|
||||||
|
target TEXT,
|
||||||
|
detail TEXT,
|
||||||
|
ip TEXT,
|
||||||
|
created_at TEXT
|
||||||
|
)");
|
||||||
|
|
||||||
|
$pdo->exec("CREATE TABLE IF NOT EXISTS settings (
|
||||||
|
skey TEXT NOT NULL PRIMARY KEY,
|
||||||
|
sval TEXT,
|
||||||
|
updated_at TEXT
|
||||||
|
)");
|
||||||
|
|
||||||
|
$pdo->exec("CREATE INDEX IF NOT EXISTS idx_sessions_user ON sessions(user_id)");
|
||||||
|
$pdo->exec("CREATE INDEX IF NOT EXISTS idx_topo_owner ON topologies(owner_id)");
|
||||||
|
$pdo->exec("CREATE INDEX IF NOT EXISTS idx_logs_created ON activity_logs(created_at)");
|
||||||
|
}
|
||||||
479
lib/repo.php
Normal file
479
lib/repo.php
Normal file
@ -0,0 +1,479 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* 数据访问层(全部使用预处理语句)
|
||||||
|
*/
|
||||||
|
require_once __DIR__ . DIRECTORY_SEPARATOR . 'db.php';
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
* 通用工具
|
||||||
|
* ============================================================ */
|
||||||
|
function now_iso()
|
||||||
|
{
|
||||||
|
return date('c');
|
||||||
|
}
|
||||||
|
|
||||||
|
function gen_id($prefix)
|
||||||
|
{
|
||||||
|
return $prefix . bin2hex(random_bytes(8));
|
||||||
|
}
|
||||||
|
|
||||||
|
function db_all($sql, $params = array())
|
||||||
|
{
|
||||||
|
$st = db()->prepare($sql);
|
||||||
|
$st->execute($params);
|
||||||
|
return $st->fetchAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
function db_one($sql, $params = array())
|
||||||
|
{
|
||||||
|
$st = db()->prepare($sql);
|
||||||
|
$st->execute($params);
|
||||||
|
$row = $st->fetch();
|
||||||
|
return $row === false ? null : $row;
|
||||||
|
}
|
||||||
|
|
||||||
|
function db_val($sql, $params = array())
|
||||||
|
{
|
||||||
|
$st = db()->prepare($sql);
|
||||||
|
$st->execute($params);
|
||||||
|
return $st->fetchColumn();
|
||||||
|
}
|
||||||
|
|
||||||
|
function db_run($sql, $params = array())
|
||||||
|
{
|
||||||
|
$st = db()->prepare($sql);
|
||||||
|
$st->execute($params);
|
||||||
|
return $st;
|
||||||
|
}
|
||||||
|
|
||||||
|
function like_param($q)
|
||||||
|
{
|
||||||
|
return '%' . $q . '%';
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
* 用户
|
||||||
|
* ============================================================ */
|
||||||
|
function user_find_by_name($username)
|
||||||
|
{
|
||||||
|
return db_one('SELECT * FROM users WHERE username = ?', array($username));
|
||||||
|
}
|
||||||
|
|
||||||
|
function user_find_by_id($id)
|
||||||
|
{
|
||||||
|
return db_one('SELECT * FROM users WHERE id = ?', array($id));
|
||||||
|
}
|
||||||
|
|
||||||
|
function user_name_map()
|
||||||
|
{
|
||||||
|
$map = array();
|
||||||
|
foreach (db_all('SELECT id, username FROM users') as $r) {
|
||||||
|
$map[$r['id']] = $r['username'];
|
||||||
|
}
|
||||||
|
return $map;
|
||||||
|
}
|
||||||
|
|
||||||
|
function user_search($q, $limit, $offset)
|
||||||
|
{
|
||||||
|
$limit = (int) $limit;
|
||||||
|
$offset = (int) $offset;
|
||||||
|
if ($q === '') {
|
||||||
|
return db_all('SELECT * FROM users ORDER BY created_at DESC, username ASC LIMIT ' . $limit . ' OFFSET ' . $offset);
|
||||||
|
}
|
||||||
|
$p = like_param($q);
|
||||||
|
return db_all(
|
||||||
|
'SELECT * FROM users WHERE username LIKE ? OR role LIKE ? ORDER BY created_at DESC, username ASC LIMIT ' . $limit . ' OFFSET ' . $offset,
|
||||||
|
array($p, $p)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function user_count($q)
|
||||||
|
{
|
||||||
|
if ($q === '') {
|
||||||
|
return (int) db_val('SELECT COUNT(*) FROM users');
|
||||||
|
}
|
||||||
|
$p = like_param($q);
|
||||||
|
return (int) db_val('SELECT COUNT(*) FROM users WHERE username LIKE ? OR role LIKE ?', array($p, $p));
|
||||||
|
}
|
||||||
|
|
||||||
|
function user_insert($data)
|
||||||
|
{
|
||||||
|
db_run(
|
||||||
|
'INSERT INTO users (id, username, password_hash, role, disabled, must_change_password, created_at, last_login_at, login_count)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)',
|
||||||
|
array(
|
||||||
|
$data['id'],
|
||||||
|
$data['username'],
|
||||||
|
$data['password_hash'],
|
||||||
|
isset($data['role']) ? $data['role'] : 'user',
|
||||||
|
!empty($data['disabled']) ? 1 : 0,
|
||||||
|
!empty($data['must_change_password']) ? 1 : 0,
|
||||||
|
isset($data['created_at']) ? $data['created_at'] : now_iso(),
|
||||||
|
isset($data['last_login_at']) ? $data['last_login_at'] : null,
|
||||||
|
isset($data['login_count']) ? (int) $data['login_count'] : 0,
|
||||||
|
)
|
||||||
|
);
|
||||||
|
return $data['id'];
|
||||||
|
}
|
||||||
|
|
||||||
|
function user_update($id, $fields)
|
||||||
|
{
|
||||||
|
$allowed = array('username', 'password_hash', 'role', 'disabled', 'must_change_password');
|
||||||
|
$sets = array();
|
||||||
|
$params = array();
|
||||||
|
foreach ($allowed as $f) {
|
||||||
|
if (array_key_exists($f, $fields)) {
|
||||||
|
$sets[] = $f . ' = ?';
|
||||||
|
$params[] = $fields[$f];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!$sets) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
$params[] = $id;
|
||||||
|
db_run('UPDATE users SET ' . implode(', ', $sets) . ' WHERE id = ?', $params);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function user_delete($id)
|
||||||
|
{
|
||||||
|
db_run('DELETE FROM users WHERE id = ?', array($id));
|
||||||
|
db_run('DELETE FROM sessions WHERE user_id = ?', array($id));
|
||||||
|
}
|
||||||
|
|
||||||
|
function user_touch_login($id)
|
||||||
|
{
|
||||||
|
db_run('UPDATE users SET last_login_at = ?, login_count = login_count + 1 WHERE id = ?', array(now_iso(), $id));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
* 会话
|
||||||
|
* ============================================================ */
|
||||||
|
function session_create($token, $userId, $expires, $ip, $ua)
|
||||||
|
{
|
||||||
|
db_run(
|
||||||
|
'INSERT INTO sessions (token, user_id, created_at, expires_at, ip, user_agent) VALUES (?, ?, ?, ?, ?, ?)',
|
||||||
|
array($token, $userId, now_iso(), (int) $expires, $ip, $ua)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function session_find($token)
|
||||||
|
{
|
||||||
|
return db_one('SELECT * FROM sessions WHERE token = ?', array($token));
|
||||||
|
}
|
||||||
|
|
||||||
|
function session_delete($token)
|
||||||
|
{
|
||||||
|
db_run('DELETE FROM sessions WHERE token = ?', array($token));
|
||||||
|
}
|
||||||
|
|
||||||
|
function session_delete_by_user($userId)
|
||||||
|
{
|
||||||
|
db_run('DELETE FROM sessions WHERE user_id = ?', array($userId));
|
||||||
|
}
|
||||||
|
|
||||||
|
function session_purge_expired($now)
|
||||||
|
{
|
||||||
|
db_run('DELETE FROM sessions WHERE expires_at < ?', array((int) $now));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
* 拓扑
|
||||||
|
* ============================================================ */
|
||||||
|
function topo_find($id)
|
||||||
|
{
|
||||||
|
return db_one('SELECT * FROM topologies WHERE id = ?', array($id));
|
||||||
|
}
|
||||||
|
|
||||||
|
function topo_list_for_user($user)
|
||||||
|
{
|
||||||
|
/* 主应用「我的拓扑」仅返回:当前用户创建的 + 公开的。
|
||||||
|
全部拓扑(含他人私有)只能在管理后台查看,见 topo_admin_search()。 */
|
||||||
|
return db_all(
|
||||||
|
'SELECT * FROM topologies WHERE owner_id = ? OR visibility = ? ORDER BY updated_at DESC',
|
||||||
|
array($user['id'], 'public')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function topo_admin_search($q, $ownerId, $limit, $offset)
|
||||||
|
{
|
||||||
|
$limit = (int) $limit;
|
||||||
|
$offset = (int) $offset;
|
||||||
|
$where = array();
|
||||||
|
$params = array();
|
||||||
|
if ($q !== '') {
|
||||||
|
$where[] = 'name LIKE ?';
|
||||||
|
$params[] = like_param($q);
|
||||||
|
}
|
||||||
|
if ($ownerId !== '') {
|
||||||
|
$where[] = 'owner_id = ?';
|
||||||
|
$params[] = $ownerId;
|
||||||
|
}
|
||||||
|
$sql = 'SELECT * FROM topologies';
|
||||||
|
if ($where) {
|
||||||
|
$sql .= ' WHERE ' . implode(' AND ', $where);
|
||||||
|
}
|
||||||
|
$sql .= ' ORDER BY updated_at DESC LIMIT ' . $limit . ' OFFSET ' . $offset;
|
||||||
|
return db_all($sql, $params);
|
||||||
|
}
|
||||||
|
|
||||||
|
function topo_admin_count($q, $ownerId)
|
||||||
|
{
|
||||||
|
$where = array();
|
||||||
|
$params = array();
|
||||||
|
if ($q !== '') {
|
||||||
|
$where[] = 'name LIKE ?';
|
||||||
|
$params[] = like_param($q);
|
||||||
|
}
|
||||||
|
if ($ownerId !== '') {
|
||||||
|
$where[] = 'owner_id = ?';
|
||||||
|
$params[] = $ownerId;
|
||||||
|
}
|
||||||
|
$sql = 'SELECT COUNT(*) FROM topologies';
|
||||||
|
if ($where) {
|
||||||
|
$sql .= ' WHERE ' . implode(' AND ', $where);
|
||||||
|
}
|
||||||
|
return (int) db_val($sql, $params);
|
||||||
|
}
|
||||||
|
|
||||||
|
function topo_recent($limit)
|
||||||
|
{
|
||||||
|
$limit = (int) $limit;
|
||||||
|
return db_all('SELECT * FROM topologies ORDER BY updated_at DESC LIMIT ' . $limit);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 导出用:根据 id 列表返回完整行;ids 为空时返回全部 */
|
||||||
|
function topo_export_rows($ids)
|
||||||
|
{
|
||||||
|
if (empty($ids)) {
|
||||||
|
return db_all('SELECT * FROM topologies ORDER BY updated_at DESC');
|
||||||
|
}
|
||||||
|
$ph = implode(',', array_fill(0, count($ids), '?'));
|
||||||
|
return db_all('SELECT * FROM topologies WHERE id IN (' . $ph . ') ORDER BY updated_at DESC', $ids);
|
||||||
|
}
|
||||||
|
|
||||||
|
function topo_insert($t)
|
||||||
|
{
|
||||||
|
db_run(
|
||||||
|
'INSERT INTO topologies (id, name, owner_id, visibility, data, node_count, edge_count, created_at, updated_at)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)',
|
||||||
|
array(
|
||||||
|
$t['id'],
|
||||||
|
$t['name'],
|
||||||
|
$t['owner_id'],
|
||||||
|
isset($t['visibility']) ? $t['visibility'] : 'private',
|
||||||
|
isset($t['data']) ? $t['data'] : '{"nodes":[],"edges":[]}',
|
||||||
|
isset($t['node_count']) ? (int) $t['node_count'] : 0,
|
||||||
|
isset($t['edge_count']) ? (int) $t['edge_count'] : 0,
|
||||||
|
isset($t['created_at']) ? $t['created_at'] : now_iso(),
|
||||||
|
isset($t['updated_at']) ? $t['updated_at'] : now_iso(),
|
||||||
|
)
|
||||||
|
);
|
||||||
|
return $t['id'];
|
||||||
|
}
|
||||||
|
|
||||||
|
function topo_update($id, $data, $nodeCount, $edgeCount, $updatedAt, $name = null)
|
||||||
|
{
|
||||||
|
if ($name !== null && $name !== '') {
|
||||||
|
db_run(
|
||||||
|
'UPDATE topologies SET data = ?, node_count = ?, edge_count = ?, updated_at = ?, name = ? WHERE id = ?',
|
||||||
|
array($data, (int) $nodeCount, (int) $edgeCount, $updatedAt, $name, $id)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
db_run(
|
||||||
|
'UPDATE topologies SET data = ?, node_count = ?, edge_count = ?, updated_at = ? WHERE id = ?',
|
||||||
|
array($data, (int) $nodeCount, (int) $edgeCount, $updatedAt, $id)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function topo_delete($id)
|
||||||
|
{
|
||||||
|
db_run('DELETE FROM topologies WHERE id = ?', array($id));
|
||||||
|
}
|
||||||
|
|
||||||
|
function topo_set_visibility($id, $vis, $updatedAt)
|
||||||
|
{
|
||||||
|
db_run('UPDATE topologies SET visibility = ?, updated_at = ? WHERE id = ?', array($vis, $updatedAt, $id));
|
||||||
|
}
|
||||||
|
|
||||||
|
function topo_set_name($id, $name, $updatedAt)
|
||||||
|
{
|
||||||
|
db_run('UPDATE topologies SET name = ?, updated_at = ? WHERE id = ?', array($name, $updatedAt, $id));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
* 操作日志
|
||||||
|
* ============================================================ */
|
||||||
|
function log_add($userId, $username, $action, $target, $detail, $ip)
|
||||||
|
{
|
||||||
|
db_run(
|
||||||
|
'INSERT INTO activity_logs (user_id, username, action, target, detail, ip, created_at) VALUES (?, ?, ?, ?, ?, ?, ?)',
|
||||||
|
array($userId, $username, $action, $target, $detail, $ip, now_iso())
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function log_search($q, $limit, $offset)
|
||||||
|
{
|
||||||
|
$limit = (int) $limit;
|
||||||
|
$offset = (int) $offset;
|
||||||
|
if ($q === '') {
|
||||||
|
return db_all('SELECT * FROM activity_logs ORDER BY id DESC LIMIT ' . $limit . ' OFFSET ' . $offset);
|
||||||
|
}
|
||||||
|
$p = like_param($q);
|
||||||
|
return db_all(
|
||||||
|
'SELECT * FROM activity_logs WHERE username LIKE ? OR action LIKE ? OR target LIKE ? OR detail LIKE ?
|
||||||
|
ORDER BY id DESC LIMIT ' . $limit . ' OFFSET ' . $offset,
|
||||||
|
array($p, $p, $p, $p)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function log_count($q)
|
||||||
|
{
|
||||||
|
if ($q === '') {
|
||||||
|
return (int) db_val('SELECT COUNT(*) FROM activity_logs');
|
||||||
|
}
|
||||||
|
$p = like_param($q);
|
||||||
|
return (int) db_val(
|
||||||
|
'SELECT COUNT(*) FROM activity_logs WHERE username LIKE ? OR action LIKE ? OR target LIKE ? OR detail LIKE ?',
|
||||||
|
array($p, $p, $p, $p)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function log_recent($limit)
|
||||||
|
{
|
||||||
|
$limit = (int) $limit;
|
||||||
|
return db_all('SELECT * FROM activity_logs ORDER BY id DESC LIMIT ' . $limit);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
* 统计
|
||||||
|
* ============================================================ */
|
||||||
|
function stats_overview()
|
||||||
|
{
|
||||||
|
$today = date('Y-m-d') . '%';
|
||||||
|
return array(
|
||||||
|
'userCount' => (int) db_val('SELECT COUNT(*) FROM users'),
|
||||||
|
'adminCount' => (int) db_val("SELECT COUNT(*) FROM users WHERE role = 'admin' AND disabled = 0"),
|
||||||
|
'disabledCount' => (int) db_val('SELECT COUNT(*) FROM users WHERE disabled = 1'),
|
||||||
|
'topoCount' => (int) db_val('SELECT COUNT(*) FROM topologies'),
|
||||||
|
'publicCount' => (int) db_val("SELECT COUNT(*) FROM topologies WHERE visibility = 'public'"),
|
||||||
|
'todayTopoCount' => (int) db_val('SELECT COUNT(*) FROM topologies WHERE created_at LIKE ?', array($today)),
|
||||||
|
'todayLoginCount' => (int) db_val("SELECT COUNT(*) FROM activity_logs WHERE action = 'login' AND created_at LIKE ?", array($today)),
|
||||||
|
'todayLogCount' => (int) db_val('SELECT COUNT(*) FROM activity_logs WHERE created_at LIKE ?', array($today)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
* 站点设置(key-value)
|
||||||
|
* ============================================================ */
|
||||||
|
function setting_get($key, $default = null)
|
||||||
|
{
|
||||||
|
$row = db_one('SELECT sval FROM settings WHERE skey = ?', array($key));
|
||||||
|
return $row === null ? $default : $row['sval'];
|
||||||
|
}
|
||||||
|
|
||||||
|
function setting_set($key, $val)
|
||||||
|
{
|
||||||
|
$now = now_iso();
|
||||||
|
if (db_one('SELECT skey FROM settings WHERE skey = ?', array($key)) !== null) {
|
||||||
|
db_run('UPDATE settings SET sval = ?, updated_at = ? WHERE skey = ?', array($val, $now, $key));
|
||||||
|
} else {
|
||||||
|
db_run('INSERT INTO settings (skey, sval, updated_at) VALUES (?, ?, ?)', array($key, $val, $now));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function settings_all()
|
||||||
|
{
|
||||||
|
$out = array();
|
||||||
|
foreach (db_all('SELECT skey, sval FROM settings') as $r) {
|
||||||
|
$out[$r['skey']] = $r['sval'];
|
||||||
|
}
|
||||||
|
return $out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
* 旧 JSON 数据迁移
|
||||||
|
* ============================================================ */
|
||||||
|
function migrate_legacy_json()
|
||||||
|
{
|
||||||
|
$dir = data_dir();
|
||||||
|
$usersFile = $dir . DIRECTORY_SEPARATOR . 'users.json';
|
||||||
|
$topoIndexFile = $dir . DIRECTORY_SEPARATOR . 'topologies.json';
|
||||||
|
$topoDir = $dir . DIRECTORY_SEPARATOR . 'topologies';
|
||||||
|
|
||||||
|
if (is_file($usersFile) && (int) db_val('SELECT COUNT(*) FROM users') === 0) {
|
||||||
|
$data = json_decode(@file_get_contents($usersFile), true);
|
||||||
|
if (isset($data['users']) && is_array($data['users'])) {
|
||||||
|
foreach ($data['users'] as $u) {
|
||||||
|
if (empty($u['id']) || empty($u['username'])) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
user_insert(array(
|
||||||
|
'id' => $u['id'],
|
||||||
|
'username' => $u['username'],
|
||||||
|
'password_hash' => isset($u['passwordHash']) ? $u['passwordHash'] : '',
|
||||||
|
'role' => isset($u['role']) ? $u['role'] : 'user',
|
||||||
|
'disabled' => !empty($u['disabled']) ? 1 : 0,
|
||||||
|
'must_change_password' => !empty($u['mustChangePassword']) ? 1 : 0,
|
||||||
|
'created_at' => isset($u['createdAt']) ? $u['createdAt'] : now_iso(),
|
||||||
|
));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@rename($usersFile, $usersFile . '.bak');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (is_file($topoIndexFile)) {
|
||||||
|
$idx = json_decode(@file_get_contents($topoIndexFile), true);
|
||||||
|
if (isset($idx['topologies']) && is_array($idx['topologies'])) {
|
||||||
|
foreach ($idx['topologies'] as $t) {
|
||||||
|
if (empty($t['id']) || topo_find($t['id'])) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
$content = array('nodes' => array(), 'edges' => array());
|
||||||
|
$cf = $topoDir . DIRECTORY_SEPARATOR . $t['id'] . '.json';
|
||||||
|
if (is_file($cf)) {
|
||||||
|
$c = json_decode(@file_get_contents($cf), true);
|
||||||
|
if (is_array($c)) {
|
||||||
|
$content = $c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
topo_insert(array(
|
||||||
|
'id' => $t['id'],
|
||||||
|
'name' => isset($t['name']) ? $t['name'] : '未命名',
|
||||||
|
'owner_id' => isset($t['ownerId']) ? $t['ownerId'] : '',
|
||||||
|
'visibility' => isset($t['visibility']) ? $t['visibility'] : 'private',
|
||||||
|
'data' => json_encode($content, JSON_UNESCAPED_UNICODE),
|
||||||
|
'node_count' => isset($content['nodes']) ? count($content['nodes']) : 0,
|
||||||
|
'edge_count' => isset($content['edges']) ? count($content['edges']) : 0,
|
||||||
|
'created_at' => isset($t['createdAt']) ? $t['createdAt'] : now_iso(),
|
||||||
|
'updated_at' => isset($t['updatedAt']) ? $t['updatedAt'] : now_iso(),
|
||||||
|
));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@rename($topoIndexFile, $topoIndexFile . '.bak');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 首次初始化:迁移旧数据 + 创建默认管理员
|
||||||
|
*/
|
||||||
|
function ensure_seed()
|
||||||
|
{
|
||||||
|
migrate_legacy_json();
|
||||||
|
|
||||||
|
if ((int) db_val('SELECT COUNT(*) FROM users') > 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$cfg = app_config();
|
||||||
|
$admin = isset($cfg['default_admin']) ? $cfg['default_admin'] : array('username' => 'admin', 'password' => 'admin123');
|
||||||
|
user_insert(array(
|
||||||
|
'id' => gen_id('u'),
|
||||||
|
'username' => $admin['username'],
|
||||||
|
'password_hash' => password_hash($admin['password'], PASSWORD_DEFAULT),
|
||||||
|
'role' => 'admin',
|
||||||
|
'disabled' => 0,
|
||||||
|
'must_change_password' => 1,
|
||||||
|
'created_at' => now_iso(),
|
||||||
|
));
|
||||||
|
}
|
||||||
222
web/admin.html
Normal file
222
web/admin.html
Normal file
@ -0,0 +1,222 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>管理控制台 · 路由拓扑</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body class="admin-page">
|
||||||
|
|
||||||
|
<div class="console" id="console">
|
||||||
|
<!-- ================= 左侧深蓝可收缩侧栏 ================= -->
|
||||||
|
<aside class="console-nav">
|
||||||
|
<div class="console-brand">
|
||||||
|
<div class="logo">R</div>
|
||||||
|
<div class="cb-text"><b>管理控制台</b><i id="navUser">—</i></div>
|
||||||
|
<button class="cnav-toggle" id="btnCollapseNav" title="收起 / 展开侧栏">☰</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cnav-item active" data-view="overview"><span class="ci">📊</span><span class="cl">概览</span></div>
|
||||||
|
<div class="cnav-item" data-view="users"><span class="ci">👥</span><span class="cl">用户管理</span></div>
|
||||||
|
<div class="cnav-item" data-view="topo"><span class="ci">🗺️</span><span class="cl">拓扑管理</span></div>
|
||||||
|
<div class="cnav-item" data-view="settings"><span class="ci">⚙️</span><span class="cl">网站设置</span></div>
|
||||||
|
<div class="cnav-item" data-view="logs"><span class="ci">📝</span><span class="cl">操作日志</span></div>
|
||||||
|
|
||||||
|
<div class="cnav-foot">
|
||||||
|
<div class="cnav-close" id="btnCloseAdmin"><span class="ci">←</span><span class="cl">返回拓扑</span></div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- ================= 右侧主区域 ================= -->
|
||||||
|
<main class="console-main">
|
||||||
|
|
||||||
|
<!-- 概览 -->
|
||||||
|
<section class="view" id="view-overview">
|
||||||
|
<div class="view-head"><h2>概览</h2></div>
|
||||||
|
<div class="cards" id="statCards"></div>
|
||||||
|
<div class="split">
|
||||||
|
<div class="panel">
|
||||||
|
<div class="panel-title">最近操作</div>
|
||||||
|
<div class="mini-list" id="recentLogs"></div>
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
<div class="panel-title">最近拓扑</div>
|
||||||
|
<div class="mini-list" id="recentTopos"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 用户管理 -->
|
||||||
|
<section class="view" id="view-users" hidden>
|
||||||
|
<div class="view-head">
|
||||||
|
<h2>用户管理</h2>
|
||||||
|
<div class="view-tools">
|
||||||
|
<input class="search" id="userSearch" placeholder="搜索用户名 / 角色" spellcheck="false">
|
||||||
|
<button class="btn primary" id="btnNewUser">＋ 新建用户</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-wrap">
|
||||||
|
<table class="grid">
|
||||||
|
<thead><tr>
|
||||||
|
<th>用户名</th><th>角色</th><th>状态</th><th>登录次数</th><th>最近登录</th><th>创建时间</th><th>操作</th>
|
||||||
|
</tr></thead>
|
||||||
|
<tbody id="userRows"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="pager" id="userPager"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 拓扑管理 -->
|
||||||
|
<section class="view" id="view-topo" hidden>
|
||||||
|
<div class="view-head">
|
||||||
|
<h2>拓扑管理</h2>
|
||||||
|
<div class="view-tools">
|
||||||
|
<input class="search" id="topoSearch" placeholder="搜索拓扑名称" spellcheck="false">
|
||||||
|
<select class="search" id="topoOwner"></select>
|
||||||
|
<button class="btn" id="btnExportSelectedTopos">导出所选</button>
|
||||||
|
<button class="btn" id="btnExportAllTopos">导出全部</button>
|
||||||
|
<button class="btn danger" id="btnDeleteSelectedTopos">删除所选</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-wrap">
|
||||||
|
<table class="grid">
|
||||||
|
<thead><tr>
|
||||||
|
<th class="col-chk"><input type="checkbox" id="topoSelectAll" title="全选本页"></th>
|
||||||
|
<th>名称</th><th>所有者</th><th>可见性</th><th>节点 / 连线</th><th>更新时间</th><th>操作</th>
|
||||||
|
</tr></thead>
|
||||||
|
<tbody id="topoRows"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="pager" id="topoPager"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 网站设置 -->
|
||||||
|
<section class="view" id="view-settings" hidden>
|
||||||
|
<div class="view-head">
|
||||||
|
<h2>网站设置</h2>
|
||||||
|
<div class="view-tools">
|
||||||
|
<button class="btn primary" id="btnSaveSettings">保存设置</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="settings-grid">
|
||||||
|
<div class="panel">
|
||||||
|
<div class="panel-title">品牌</div>
|
||||||
|
<label class="set-label">网站名称
|
||||||
|
<input class="search" id="setSiteName" type="text" placeholder="路由拓扑" spellcheck="false" maxlength="40">
|
||||||
|
</label>
|
||||||
|
<div class="set-label">网站 Logo</div>
|
||||||
|
<div class="logo-edit">
|
||||||
|
<div class="logo-preview" id="logoPreview">R</div>
|
||||||
|
<div class="logo-edit-side">
|
||||||
|
<input type="file" id="logoFile" accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml" hidden>
|
||||||
|
<div class="row-mini">
|
||||||
|
<button class="btn" id="btnPickLogo" type="button">选择图片</button>
|
||||||
|
<button class="btn" id="btnClearLogo" type="button">清除</button>
|
||||||
|
</div>
|
||||||
|
<div class="hint-sm">支持 PNG / JPG / GIF / WEBP / SVG,建议方形透明底,不超过 300KB。</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
<div class="panel-title">注册与会话</div>
|
||||||
|
<label class="set-row">
|
||||||
|
<input type="checkbox" id="setAllowReg"> <span>开放访客自助注册</span>
|
||||||
|
</label>
|
||||||
|
<label class="set-label">会话有效期(天)
|
||||||
|
<input class="search" id="setTtl" type="number" min="1" max="365" step="1">
|
||||||
|
</label>
|
||||||
|
<div class="hint-sm">修改后,新登录的会话按该时长计算有效期(1 - 365 天)。</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 操作日志 -->
|
||||||
|
<section class="view" id="view-logs" hidden>
|
||||||
|
<div class="view-head">
|
||||||
|
<h2>操作日志</h2>
|
||||||
|
<div class="view-tools"><input class="search" id="logSearch" placeholder="搜索用户 / 动作 / 详情" spellcheck="false"></div>
|
||||||
|
</div>
|
||||||
|
<div class="table-wrap">
|
||||||
|
<table class="grid">
|
||||||
|
<thead><tr>
|
||||||
|
<th>时间</th><th>用户</th><th>动作</th><th>对象</th><th>详情</th><th>IP</th>
|
||||||
|
</tr></thead>
|
||||||
|
<tbody id="logRows"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="pager" id="logPager"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ================= 新建用户 ================= -->
|
||||||
|
<div class="overlay" id="userOverlay" hidden>
|
||||||
|
<div class="dialog">
|
||||||
|
<div class="dlg-head"><h2 id="userDlgTitle">新建用户</h2><span class="dlg-close" id="btnCloseUser">×</span></div>
|
||||||
|
<label>用户名
|
||||||
|
<input id="uName" type="text" spellcheck="false" autocomplete="off" placeholder="2-32 位字母、数字、_ . -">
|
||||||
|
</label>
|
||||||
|
<label>密码
|
||||||
|
<input id="uPass" type="password" autocomplete="new-password" placeholder="至少 8 位,需含字母和数字">
|
||||||
|
</label>
|
||||||
|
<label>角色
|
||||||
|
<select id="uRole">
|
||||||
|
<option value="user">普通用户</option>
|
||||||
|
<option value="admin">管理员</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<div class="dlg-tip">新建用户首次登录后需强制修改密码</div>
|
||||||
|
<div class="dlg-err" id="userErr"></div>
|
||||||
|
<div class="dlg-actions">
|
||||||
|
<button class="btn" id="btnCancelUser" type="button">取消</button>
|
||||||
|
<button class="btn primary" id="btnSaveUser" type="button">创建</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ================= 重置用户密码 ================= -->
|
||||||
|
<div class="overlay" id="resetOverlay" hidden>
|
||||||
|
<div class="dialog">
|
||||||
|
<div class="dlg-head"><h2>重置用户密码</h2><span class="dlg-close" id="btnCloseReset">×</span></div>
|
||||||
|
<div class="dlg-tip" id="resetTip"></div>
|
||||||
|
<label>您的密码(管理员)
|
||||||
|
<input id="resetAdminPw" type="password" autocomplete="current-password" placeholder="请输入当前登录账号的密码">
|
||||||
|
</label>
|
||||||
|
<label>新密码
|
||||||
|
<input id="resetNewPw" type="password" autocomplete="new-password" placeholder="至少 8 位,需含字母和数字">
|
||||||
|
</label>
|
||||||
|
<label>确认新密码
|
||||||
|
<input id="resetNewPw2" type="password" autocomplete="new-password" placeholder="请再次输入新密码">
|
||||||
|
</label>
|
||||||
|
<label class="pwd-show"><input type="checkbox" id="resetShow"> 显示密码</label>
|
||||||
|
<div class="dlg-err" id="resetErr"></div>
|
||||||
|
<div class="dlg-actions">
|
||||||
|
<button class="btn" id="btnCancelReset" type="button">取消</button>
|
||||||
|
<button class="btn primary" id="btnDoReset" type="button">确认重置</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ================= 站内确认 / 输入弹窗 ================= -->
|
||||||
|
<div class="overlay" id="confirmOverlay" hidden>
|
||||||
|
<div class="dialog">
|
||||||
|
<div class="dlg-head"><h2 id="confirmTitle">请确认</h2><span class="dlg-close" id="confirmClose">×</span></div>
|
||||||
|
<div class="dlg-msg" id="confirmMsg"></div>
|
||||||
|
<label id="confirmFieldWrap" hidden><span id="confirmFieldLabel"></span>
|
||||||
|
<input id="confirmField" type="text" spellcheck="false" autocomplete="off">
|
||||||
|
</label>
|
||||||
|
<div class="dlg-err" id="confirmErr"></div>
|
||||||
|
<div class="dlg-actions">
|
||||||
|
<button class="btn" id="confirmCancel" type="button">取消</button>
|
||||||
|
<button class="btn primary" id="confirmOk" type="button">确定</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="toast" id="toast"></div>
|
||||||
|
|
||||||
|
<script src="admin.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
779
web/admin.js
Normal file
779
web/admin.js
Normal file
@ -0,0 +1,779 @@
|
|||||||
|
/* =========================================================================
|
||||||
|
路由拓扑 · 管理控制台(独立页面)
|
||||||
|
页面地址:web/admin.html,资源相对 web/,API 相对站点根(../index.php)
|
||||||
|
========================================================================= */
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
基础工具
|
||||||
|
============================================================ */
|
||||||
|
function $(id) { return document.getElementById(id); }
|
||||||
|
|
||||||
|
function esc(s) {
|
||||||
|
return String(s === null || s === undefined ? '' : s).replace(/[&<>"']/g, function (c) {
|
||||||
|
return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function qs(obj) {
|
||||||
|
const parts = [];
|
||||||
|
for (const k in obj) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(obj, k) && obj[k] !== '' && obj[k] !== null && obj[k] !== undefined) {
|
||||||
|
parts.push(encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return parts.length ? ('?' + parts.join('&')) : '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtTime(iso) {
|
||||||
|
if (!iso) { return '—'; }
|
||||||
|
const d = new Date(iso);
|
||||||
|
if (isNaN(d.getTime())) { return String(iso); }
|
||||||
|
const p = function (n) { return n < 10 ? '0' + n : '' + n; };
|
||||||
|
return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) +
|
||||||
|
' ' + p(d.getHours()) + ':' + p(d.getMinutes());
|
||||||
|
}
|
||||||
|
|
||||||
|
function debounce(fn, ms) {
|
||||||
|
let t = null;
|
||||||
|
return function () {
|
||||||
|
const self = this, args = arguments;
|
||||||
|
clearTimeout(t);
|
||||||
|
t = setTimeout(function () { fn.apply(self, args); }, ms || 260);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function ts() {
|
||||||
|
const d = new Date(), p = function (n) { return n < 10 ? '0' + n : '' + n; };
|
||||||
|
return d.getFullYear() + p(d.getMonth() + 1) + p(d.getDate()) + '-' +
|
||||||
|
p(d.getHours()) + p(d.getMinutes()) + p(d.getSeconds());
|
||||||
|
}
|
||||||
|
|
||||||
|
function downloadJson(obj, filename) {
|
||||||
|
const str = JSON.stringify(obj, null, 2);
|
||||||
|
const blob = new Blob([str], { type: 'application/json;charset=utf-8' });
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = URL.createObjectURL(blob);
|
||||||
|
a.download = filename;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
a.remove();
|
||||||
|
setTimeout(function () { URL.revokeObjectURL(a.href); }, 8000);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
API 客户端(独立页,base = ../index.php)
|
||||||
|
============================================================ */
|
||||||
|
const API = {
|
||||||
|
req: function (method, path, body) {
|
||||||
|
const opt = { method: method, credentials: 'same-origin', headers: {} };
|
||||||
|
if (body !== undefined) {
|
||||||
|
opt.headers['Content-Type'] = 'application/json';
|
||||||
|
opt.body = JSON.stringify(body);
|
||||||
|
}
|
||||||
|
return fetch('../index.php?r=' + encodeURIComponent('/api' + path), opt).then(function (r) {
|
||||||
|
return r.text().then(function (txt) {
|
||||||
|
let data = null;
|
||||||
|
try { data = txt ? JSON.parse(txt) : null; } catch (e) { data = null; }
|
||||||
|
if (!r.ok || (data && data.ok === false)) {
|
||||||
|
const msg = (data && data.error) ? data.error : ('请求失败 (' + r.status + ')');
|
||||||
|
const err = new Error(msg);
|
||||||
|
err.status = r.status;
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
return data || {};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
me: function () { return this.req('GET', '/me'); },
|
||||||
|
dashboard: function () { return this.req('GET', '/dashboard'); },
|
||||||
|
logs: function (p) { return this.req('GET', '/logs' + qs(p)); },
|
||||||
|
listUsers: function (p) { return this.req('GET', '/users' + qs(p)); },
|
||||||
|
createUser: function (p) { return this.req('POST', '/users', p); },
|
||||||
|
updateUser: function (id, p) { return this.req('PUT', '/users/' + encodeURIComponent(id), p); },
|
||||||
|
resetUserPassword: function (id, p) { return this.req('PUT', '/users/' + encodeURIComponent(id) + '/password', p); },
|
||||||
|
deleteUser: function (id) { return this.req('DELETE', '/users/' + encodeURIComponent(id)); },
|
||||||
|
adminTopologies: function (p) { return this.req('GET', '/admin/topologies' + qs(p)); },
|
||||||
|
exportTopos: function (ids) {
|
||||||
|
const q = (ids && ids.length) ? ('?ids=' + encodeURIComponent(ids.join(','))) : '';
|
||||||
|
return this.req('GET', '/admin/topologies/export' + q);
|
||||||
|
},
|
||||||
|
siteSettings: function () { return this.req('GET', '/admin/settings'); },
|
||||||
|
saveSiteSettings: function (p) { return this.req('PUT', '/admin/settings', p); },
|
||||||
|
setVisibility: function (id, vis) { return this.req('PUT', '/topologies/' + encodeURIComponent(id) + '/permission', { visibility: vis }); },
|
||||||
|
renameTopo: function (id, name) { return this.req('PUT', '/topologies/' + encodeURIComponent(id) + '/rename', { name: name }); },
|
||||||
|
deleteTopo: function (id) { return this.req('DELETE', '/topologies/' + encodeURIComponent(id)); }
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
提示条 / 站内弹窗
|
||||||
|
============================================================ */
|
||||||
|
let toastTimer = null;
|
||||||
|
function toast(msg, type) {
|
||||||
|
const el = $('toast');
|
||||||
|
el.textContent = msg;
|
||||||
|
el.className = 'toast' + (type ? (' ' + type) : '');
|
||||||
|
el.classList.add('show');
|
||||||
|
clearTimeout(toastTimer);
|
||||||
|
toastTimer = setTimeout(function () { el.classList.remove('show'); }, 2600);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openOverlay(id) { const o = $(id); if (o) { o.hidden = false; } }
|
||||||
|
function closeOverlay(id) { const o = $(id); if (o) { o.hidden = true; } }
|
||||||
|
|
||||||
|
let _dlgResolve = null;
|
||||||
|
let _dlgInput = false;
|
||||||
|
function _dlgFinish(result) {
|
||||||
|
closeOverlay('confirmOverlay');
|
||||||
|
const r = _dlgResolve;
|
||||||
|
_dlgResolve = null;
|
||||||
|
if (r) { r(result); }
|
||||||
|
}
|
||||||
|
function _dlgConfirmOk() {
|
||||||
|
if (_dlgInput) {
|
||||||
|
const v = $('confirmField').value.trim();
|
||||||
|
if (!v) { $('confirmErr').textContent = '请输入内容'; return; }
|
||||||
|
_dlgFinish(v);
|
||||||
|
} else {
|
||||||
|
_dlgFinish(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function _uiDialog(o) {
|
||||||
|
return new Promise(function (resolve) {
|
||||||
|
_dlgResolve = resolve;
|
||||||
|
_dlgInput = !!o.input;
|
||||||
|
$('confirmTitle').textContent = o.title || '请确认';
|
||||||
|
const msg = $('confirmMsg');
|
||||||
|
msg.textContent = o.message || '';
|
||||||
|
msg.hidden = !o.message;
|
||||||
|
const okBtn = $('confirmOk');
|
||||||
|
okBtn.textContent = o.okText || '确定';
|
||||||
|
okBtn.className = 'btn ' + (o.danger ? 'danger' : 'primary');
|
||||||
|
const wrap = $('confirmFieldWrap');
|
||||||
|
const field = $('confirmField');
|
||||||
|
if (o.input) {
|
||||||
|
wrap.hidden = false;
|
||||||
|
$('confirmFieldLabel').textContent = o.input.label || '';
|
||||||
|
field.type = o.input.type || 'text';
|
||||||
|
field.placeholder = o.input.placeholder || '';
|
||||||
|
field.value = o.input.value || '';
|
||||||
|
} else {
|
||||||
|
wrap.hidden = true;
|
||||||
|
}
|
||||||
|
$('confirmErr').textContent = '';
|
||||||
|
openOverlay('confirmOverlay');
|
||||||
|
setTimeout(function () {
|
||||||
|
if (o.input) { field.focus(); field.select(); } else { okBtn.focus(); }
|
||||||
|
}, 30);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function uiConfirm(message, opts) {
|
||||||
|
opts = opts || {};
|
||||||
|
return _uiDialog({
|
||||||
|
title: opts.title || '请确认', message: message,
|
||||||
|
okText: opts.okText || '确定', danger: !!opts.danger
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function uiPrompt(label, opts) {
|
||||||
|
opts = opts || {};
|
||||||
|
return _uiDialog({
|
||||||
|
title: opts.title || '请输入', message: opts.message || '',
|
||||||
|
okText: opts.okText || '确定',
|
||||||
|
input: { label: label, placeholder: opts.placeholder || '', type: opts.type || 'text', value: opts.value || '' }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
渲染小工具
|
||||||
|
============================================================ */
|
||||||
|
const ACTION_LABEL = {
|
||||||
|
login: '登录', logout: '退出', register: '注册', password_change: '修改密码',
|
||||||
|
user_create: '创建用户', user_update: '更新用户', user_delete: '删除用户', user_reset_password: '重置用户密码',
|
||||||
|
topo_create: '创建拓扑', topo_delete: '删除拓扑', topo_permission: '设置可见性', topo_rename: '重命名拓扑',
|
||||||
|
site_settings: '网站设置'
|
||||||
|
};
|
||||||
|
function actionLabel(a) { return ACTION_LABEL[a] || a || '—'; }
|
||||||
|
|
||||||
|
function statCard(label, num, cls) {
|
||||||
|
return '<div class="card ' + (cls || '') + '">' +
|
||||||
|
'<div class="num">' + esc(num === null || num === undefined ? 0 : num) + '</div>' +
|
||||||
|
'<div class="lbl">' + esc(label) + '</div></div>';
|
||||||
|
}
|
||||||
|
function miniRow(time, content) {
|
||||||
|
return '<div class="mini-row"><span class="t">' + esc(time) + '</span><span class="c">' + content + '</span></div>';
|
||||||
|
}
|
||||||
|
function emptyRow(msg) { return '<div class="empty-row">' + esc(msg) + '</div>'; }
|
||||||
|
|
||||||
|
function renderPager(containerId, total, page, pageSize, onGo) {
|
||||||
|
const totalPages = Math.max(1, Math.ceil((total || 0) / pageSize));
|
||||||
|
const el = $(containerId);
|
||||||
|
el.innerHTML =
|
||||||
|
'<span>共 ' + esc(total || 0) + ' 条 · 第 ' + esc(page) + ' / ' + esc(totalPages) + ' 页</span>' +
|
||||||
|
'<button class="btn sm" data-go="prev"' + (page <= 1 ? ' disabled' : '') + '>上一页</button>' +
|
||||||
|
'<button class="btn sm" data-go="next"' + (page >= totalPages ? ' disabled' : '') + '>下一页</button>';
|
||||||
|
const prev = el.querySelector('[data-go="prev"]');
|
||||||
|
const next = el.querySelector('[data-go="next"]');
|
||||||
|
if (prev) { prev.addEventListener('click', function () { if (page > 1) { onGo(page - 1); } }); }
|
||||||
|
if (next) { next.addEventListener('click', function () { if (page < totalPages) { onGo(page + 1); } }); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
状态
|
||||||
|
============================================================ */
|
||||||
|
const state = {
|
||||||
|
view: 'overview',
|
||||||
|
currentUser: null,
|
||||||
|
users: { page: 1, pageSize: 10, q: '', total: 0 },
|
||||||
|
topos: { page: 1, pageSize: 10, q: '', owner: '', total: 0 },
|
||||||
|
logs: { page: 1, pageSize: 12, q: '', total: 0 }
|
||||||
|
};
|
||||||
|
|
||||||
|
function handleErr(err) {
|
||||||
|
toast((err && err.message) || '操作失败', 'err');
|
||||||
|
if (err && (err.status === 401 || err.status === 403)) {
|
||||||
|
setTimeout(function () { window.location.href = '../index.php'; }, 1200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
视图切换
|
||||||
|
============================================================ */
|
||||||
|
function switchView(name) {
|
||||||
|
state.view = name;
|
||||||
|
['overview', 'users', 'topo', 'settings', 'logs'].forEach(function (v) {
|
||||||
|
const el = $('view-' + v);
|
||||||
|
if (el) { el.hidden = (v !== name); }
|
||||||
|
});
|
||||||
|
Array.prototype.forEach.call(document.querySelectorAll('.cnav-item'), function (it) {
|
||||||
|
it.classList.toggle('active', it.getAttribute('data-view') === name);
|
||||||
|
});
|
||||||
|
if (name === 'overview') { loadOverview(); }
|
||||||
|
else if (name === 'users') { loadUsers(); }
|
||||||
|
else if (name === 'topo') { loadTopoOwnerOptions(); loadTopoAdmin(); }
|
||||||
|
else if (name === 'settings') { loadSettings(); }
|
||||||
|
else if (name === 'logs') { loadLogs(); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
概览
|
||||||
|
============================================================ */
|
||||||
|
function loadOverview() {
|
||||||
|
API.dashboard().then(function (d) {
|
||||||
|
const s = d.stats || {};
|
||||||
|
$('statCards').innerHTML = [
|
||||||
|
statCard('用户总数', s.userCount, ''),
|
||||||
|
statCard('管理员', s.adminCount, 'accent'),
|
||||||
|
statCard('已禁用', s.disabledCount, 'amber'),
|
||||||
|
statCard('拓扑总数', s.topoCount, ''),
|
||||||
|
statCard('公开拓扑', s.publicCount, 'green'),
|
||||||
|
statCard('今日新增拓扑', s.todayTopoCount, ''),
|
||||||
|
statCard('今日登录', s.todayLoginCount, 'accent'),
|
||||||
|
statCard('今日操作', s.todayLogCount, '')
|
||||||
|
].join('');
|
||||||
|
|
||||||
|
const logs = d.recentLogs || [];
|
||||||
|
$('recentLogs').innerHTML = logs.length ? logs.map(function (l) {
|
||||||
|
return miniRow(fmtTime(l.createdAt),
|
||||||
|
esc((l.username || '系统') + ' · ' + (l.detail || actionLabel(l.action))));
|
||||||
|
}).join('') : emptyRow('暂无记录');
|
||||||
|
|
||||||
|
const topos = d.recentTopos || [];
|
||||||
|
$('recentTopos').innerHTML = topos.length ? topos.map(function (t) {
|
||||||
|
return miniRow(fmtTime(t.updatedAt), esc(t.name + ' · ' + (t.ownerName || '未知')));
|
||||||
|
}).join('') : emptyRow('暂无拓扑');
|
||||||
|
}).catch(handleErr);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
用户管理
|
||||||
|
============================================================ */
|
||||||
|
function loadUsers() {
|
||||||
|
const q = state.users;
|
||||||
|
API.listUsers({ page: q.page, pageSize: q.pageSize, q: q.q }).then(function (d) {
|
||||||
|
const rows = d.users || [];
|
||||||
|
$('userRows').innerHTML = rows.length ? rows.map(function (u) {
|
||||||
|
const roleBadge = (u.role === 'admin')
|
||||||
|
? '<span class="badge owner">管理员</span>'
|
||||||
|
: '<span class="badge">普通用户</span>';
|
||||||
|
const status = u.disabled
|
||||||
|
? '<span class="badge ro">已禁用</span>'
|
||||||
|
: '<span class="badge public">正常</span>';
|
||||||
|
const pwdFlag = u.mustChangePassword ? ' <span class="badge ro">待改密</span>' : '';
|
||||||
|
return '<tr>' +
|
||||||
|
'<td>' + esc(u.username) + '</td>' +
|
||||||
|
'<td>' + roleBadge + '</td>' +
|
||||||
|
'<td>' + status + pwdFlag + '</td>' +
|
||||||
|
'<td>' + esc(u.loginCount) + '</td>' +
|
||||||
|
'<td>' + esc(fmtTime(u.lastLoginAt)) + '</td>' +
|
||||||
|
'<td>' + esc(fmtTime(u.createdAt)) + '</td>' +
|
||||||
|
'<td class="actions">' + userActions(u) + '</td>' +
|
||||||
|
'</tr>';
|
||||||
|
}).join('') : '<tr><td colspan="7" class="empty-row">暂无用户</td></tr>';
|
||||||
|
renderPager('userPager', d.total, q.page, q.pageSize, function (p) { q.page = p; loadUsers(); });
|
||||||
|
}).catch(handleErr);
|
||||||
|
}
|
||||||
|
|
||||||
|
function userActions(u) {
|
||||||
|
const isSelf = state.currentUser && state.currentUser.id === u.id;
|
||||||
|
const btns = [];
|
||||||
|
btns.push('<button class="btn" data-act="pwd" data-id="' + esc(u.id) + '" data-name="' + esc(u.username) + '">重置密码</button>');
|
||||||
|
btns.push('<button class="btn" data-act="role" data-id="' + esc(u.id) + '" data-role="' +
|
||||||
|
(u.role === 'admin' ? 'user' : 'admin') + '">' + (u.role === 'admin' ? '设为用户' : '设为管理员') + '</button>');
|
||||||
|
if (!isSelf) {
|
||||||
|
btns.push('<button class="btn" data-act="toggle" data-id="' + esc(u.id) + '" data-disabled="' +
|
||||||
|
(u.disabled ? 0 : 1) + '">' + (u.disabled ? '启用' : '禁用') + '</button>');
|
||||||
|
btns.push('<button class="btn danger" data-act="del" data-id="' + esc(u.id) + '" data-name="' + esc(u.username) + '">删除</button>');
|
||||||
|
}
|
||||||
|
return btns.join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function onUserRowClick(e) {
|
||||||
|
const b = e.target.closest('button[data-act]');
|
||||||
|
if (!b) { return; }
|
||||||
|
const act = b.getAttribute('data-act');
|
||||||
|
const id = b.getAttribute('data-id');
|
||||||
|
|
||||||
|
if (act === 'pwd') {
|
||||||
|
openResetDialog(id, b.getAttribute('data-name'));
|
||||||
|
} else if (act === 'role') {
|
||||||
|
const role = b.getAttribute('data-role');
|
||||||
|
const label = (role === 'admin' ? '管理员' : '普通用户');
|
||||||
|
uiConfirm('确认将该用户角色改为「' + label + '」?', { title: '修改角色' }).then(function (ok) {
|
||||||
|
if (!ok) { return; }
|
||||||
|
API.updateUser(id, { role: role }).then(function () {
|
||||||
|
toast('角色已更新', 'ok'); loadUsers();
|
||||||
|
}).catch(handleErr);
|
||||||
|
});
|
||||||
|
} else if (act === 'toggle') {
|
||||||
|
const disabled = b.getAttribute('data-disabled') === '1';
|
||||||
|
uiConfirm(disabled ? '确认禁用该账号?禁用后该用户将无法登录。' : '确认启用该账号?',
|
||||||
|
{ title: disabled ? '禁用账号' : '启用账号', danger: disabled }).then(function (ok) {
|
||||||
|
if (!ok) { return; }
|
||||||
|
API.updateUser(id, { disabled: disabled }).then(function () {
|
||||||
|
toast(disabled ? '已禁用' : '已启用', 'ok'); loadUsers();
|
||||||
|
}).catch(handleErr);
|
||||||
|
});
|
||||||
|
} else if (act === 'del') {
|
||||||
|
uiConfirm('确认删除用户「' + b.getAttribute('data-name') + '」?该操作不可恢复。',
|
||||||
|
{ title: '删除用户', danger: true, okText: '删除' }).then(function (ok) {
|
||||||
|
if (!ok) { return; }
|
||||||
|
API.deleteUser(id).then(function () {
|
||||||
|
toast('用户已删除', 'ok'); loadUsers();
|
||||||
|
}).catch(handleErr);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openUserDialog() {
|
||||||
|
$('userDlgTitle').textContent = '新建用户';
|
||||||
|
$('uName').value = '';
|
||||||
|
$('uPass').value = '';
|
||||||
|
$('uRole').value = 'user';
|
||||||
|
$('userErr').textContent = '';
|
||||||
|
openOverlay('userOverlay');
|
||||||
|
setTimeout(function () { $('uName').focus(); }, 30);
|
||||||
|
}
|
||||||
|
|
||||||
|
function submitUserDialog() {
|
||||||
|
const name = $('uName').value.trim();
|
||||||
|
const pass = $('uPass').value;
|
||||||
|
const role = $('uRole').value;
|
||||||
|
$('userErr').textContent = '';
|
||||||
|
if (!name) { $('userErr').textContent = '请输入用户名'; return; }
|
||||||
|
if (!pass) { $('userErr').textContent = '请输入密码'; return; }
|
||||||
|
$('btnSaveUser').disabled = true;
|
||||||
|
API.createUser({ username: name, password: pass, role: role }).then(function () {
|
||||||
|
$('btnSaveUser').disabled = false;
|
||||||
|
closeOverlay('userOverlay');
|
||||||
|
toast('用户已创建', 'ok');
|
||||||
|
state.users.page = 1;
|
||||||
|
loadUsers();
|
||||||
|
}).catch(function (err) {
|
||||||
|
$('btnSaveUser').disabled = false;
|
||||||
|
$('userErr').textContent = (err && err.message) || '创建失败';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
重置用户密码(需先验证管理员本人密码)
|
||||||
|
============================================================ */
|
||||||
|
let resetUserId = null;
|
||||||
|
|
||||||
|
function openResetDialog(id, username) {
|
||||||
|
resetUserId = id;
|
||||||
|
$('resetTip').textContent = '为用户「' + username + '」设置新密码,该用户下次登录需再次修改。';
|
||||||
|
$('resetAdminPw').value = '';
|
||||||
|
$('resetNewPw').value = '';
|
||||||
|
$('resetNewPw2').value = '';
|
||||||
|
$('resetShow').checked = false;
|
||||||
|
['resetAdminPw', 'resetNewPw', 'resetNewPw2'].forEach(function (i) { $(i).type = 'password'; });
|
||||||
|
$('resetErr').textContent = '';
|
||||||
|
openOverlay('resetOverlay');
|
||||||
|
setTimeout(function () { $('resetAdminPw').focus(); }, 30);
|
||||||
|
}
|
||||||
|
|
||||||
|
function submitResetDialog() {
|
||||||
|
if (!resetUserId) { return; }
|
||||||
|
const adminPw = $('resetAdminPw').value;
|
||||||
|
const np = $('resetNewPw').value;
|
||||||
|
const np2 = $('resetNewPw2').value;
|
||||||
|
const err = $('resetErr');
|
||||||
|
err.textContent = '';
|
||||||
|
if (!adminPw) { err.textContent = '请输入您(管理员)的密码'; return; }
|
||||||
|
if (!np) { err.textContent = '请输入新密码'; return; }
|
||||||
|
if (np !== np2) { err.textContent = '两次输入的新密码不一致'; return; }
|
||||||
|
$('btnDoReset').disabled = true;
|
||||||
|
API.resetUserPassword(resetUserId, { adminPassword: adminPw, newPassword: np }).then(function () {
|
||||||
|
$('btnDoReset').disabled = false;
|
||||||
|
closeOverlay('resetOverlay');
|
||||||
|
toast('密码已重置', 'ok');
|
||||||
|
loadUsers();
|
||||||
|
}).catch(function (e) {
|
||||||
|
$('btnDoReset').disabled = false;
|
||||||
|
err.textContent = (e && e.message) || '重置失败';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
拓扑管理
|
||||||
|
============================================================ */
|
||||||
|
function loadTopoOwnerOptions() {
|
||||||
|
API.listUsers({ page: 1, pageSize: 100 }).then(function (d) {
|
||||||
|
const sel = $('topoOwner');
|
||||||
|
const cur = state.topos.owner;
|
||||||
|
const opts = ['<option value="">全部所有者</option>'];
|
||||||
|
(d.users || []).forEach(function (u) {
|
||||||
|
opts.push('<option value="' + esc(u.id) + '">' + esc(u.username) + '</option>');
|
||||||
|
});
|
||||||
|
sel.innerHTML = opts.join('');
|
||||||
|
sel.value = cur;
|
||||||
|
}).catch(function () { /* 忽略:仅用于筛选下拉 */ });
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadTopoAdmin() {
|
||||||
|
const q = state.topos;
|
||||||
|
API.adminTopologies({ page: q.page, pageSize: q.pageSize, q: q.q, owner: q.owner }).then(function (d) {
|
||||||
|
const rows = d.topologies || [];
|
||||||
|
const allSel = $('topoSelectAll');
|
||||||
|
if (allSel) { allSel.checked = false; }
|
||||||
|
$('topoRows').innerHTML = rows.length ? rows.map(function (t) {
|
||||||
|
const vis = (t.visibility === 'public')
|
||||||
|
? '<span class="badge public">公开</span>'
|
||||||
|
: '<span class="badge private">私有</span>';
|
||||||
|
return '<tr>' +
|
||||||
|
'<td class="col-chk"><input type="checkbox" class="topo-chk" data-id="' + esc(t.id) + '" data-name="' + esc(t.name) + '"></td>' +
|
||||||
|
'<td>' + esc(t.name) + '</td>' +
|
||||||
|
'<td>' + esc(t.ownerName || '—') + '</td>' +
|
||||||
|
'<td>' + vis + '</td>' +
|
||||||
|
'<td>' + esc(t.nodeCount) + ' / ' + esc(t.edgeCount) + '</td>' +
|
||||||
|
'<td>' + esc(fmtTime(t.updatedAt)) + '</td>' +
|
||||||
|
'<td class="actions">' +
|
||||||
|
'<button class="btn" data-act="rename" data-id="' + esc(t.id) + '" data-name="' + esc(t.name) + '">重命名</button>' +
|
||||||
|
'<button class="btn" data-act="vis" data-id="' + esc(t.id) + '" data-vis="' +
|
||||||
|
(t.visibility === 'public' ? 'private' : 'public') + '">' +
|
||||||
|
(t.visibility === 'public' ? '设为私有' : '设为公开') + '</button>' +
|
||||||
|
'<button class="btn danger" data-act="del" data-id="' + esc(t.id) + '" data-name="' + esc(t.name) + '">删除</button>' +
|
||||||
|
'</td>' +
|
||||||
|
'</tr>';
|
||||||
|
}).join('') : '<tr><td colspan="7" class="empty-row">暂无拓扑</td></tr>';
|
||||||
|
renderPager('topoPager', d.total, q.page, q.pageSize, function (p) { q.page = p; loadTopoAdmin(); });
|
||||||
|
}).catch(handleErr);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onTopoRowClick(e) {
|
||||||
|
const b = e.target.closest('button[data-act]');
|
||||||
|
if (!b) { return; }
|
||||||
|
const act = b.getAttribute('data-act');
|
||||||
|
const id = b.getAttribute('data-id');
|
||||||
|
|
||||||
|
if (act === 'rename') {
|
||||||
|
const curName = b.getAttribute('data-name');
|
||||||
|
uiPrompt('新名称', {
|
||||||
|
title: '重命名拓扑',
|
||||||
|
message: '为拓扑「' + curName + '」设置新名称(最多 60 个字符)。',
|
||||||
|
placeholder: '例如:某内网横向拓扑',
|
||||||
|
value: curName,
|
||||||
|
okText: '保存'
|
||||||
|
}).then(function (v) {
|
||||||
|
if (v === null) { return; }
|
||||||
|
v = String(v).trim();
|
||||||
|
if (!v || v === curName) { return; }
|
||||||
|
API.renameTopo(id, v).then(function () {
|
||||||
|
toast('已重命名', 'ok'); loadTopoAdmin();
|
||||||
|
}).catch(handleErr);
|
||||||
|
});
|
||||||
|
} else if (act === 'vis') {
|
||||||
|
const vis = b.getAttribute('data-vis');
|
||||||
|
const label = (vis === 'public' ? '公开' : '私有');
|
||||||
|
uiConfirm('确认将该拓扑设为「' + label + '」?', { title: '修改可见性' }).then(function (ok) {
|
||||||
|
if (!ok) { return; }
|
||||||
|
API.setVisibility(id, vis).then(function () {
|
||||||
|
toast('可见性已更新', 'ok'); loadTopoAdmin();
|
||||||
|
}).catch(handleErr);
|
||||||
|
});
|
||||||
|
} else if (act === 'del') {
|
||||||
|
uiConfirm('确认删除拓扑「' + b.getAttribute('data-name') + '」?该操作不可恢复。',
|
||||||
|
{ title: '删除拓扑', danger: true, okText: '删除' }).then(function (ok) {
|
||||||
|
if (!ok) { return; }
|
||||||
|
API.deleteTopo(id).then(function () {
|
||||||
|
toast('拓扑已删除', 'ok'); loadTopoAdmin();
|
||||||
|
}).catch(handleErr);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
拓扑批量操作 / 导出
|
||||||
|
============================================================ */
|
||||||
|
function selectedTopoIds() {
|
||||||
|
return Array.prototype.map.call(
|
||||||
|
document.querySelectorAll('#topoRows .topo-chk:checked'),
|
||||||
|
function (c) { return c.getAttribute('data-id'); }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportTopos(all) {
|
||||||
|
const ids = all ? [] : selectedTopoIds();
|
||||||
|
if (!all && !ids.length) { toast('请先勾选要导出的拓扑', 'warn'); return; }
|
||||||
|
API.exportTopos(ids).then(function (d) {
|
||||||
|
const list = d.topologies || [];
|
||||||
|
if (!list.length) { toast('没有可导出的拓扑', 'warn'); return; }
|
||||||
|
const payload = {
|
||||||
|
version: 1,
|
||||||
|
type: 'route-topology-bundle',
|
||||||
|
exportedAt: d.exportedAt || new Date().toISOString(),
|
||||||
|
count: list.length,
|
||||||
|
topologies: list.map(function (t) {
|
||||||
|
return {
|
||||||
|
name: t.name, ownerName: t.ownerName, visibility: t.visibility,
|
||||||
|
nodeCount: t.nodeCount, edgeCount: t.edgeCount, updatedAt: t.updatedAt,
|
||||||
|
nodes: t.nodes || [], edges: t.edges || []
|
||||||
|
};
|
||||||
|
})
|
||||||
|
};
|
||||||
|
downloadJson(payload, 'route-topologies-' + ts() + '.json');
|
||||||
|
toast('已导出 ' + list.length + ' 个拓扑', 'ok');
|
||||||
|
}).catch(handleErr);
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteSelectedTopos() {
|
||||||
|
const ids = selectedTopoIds();
|
||||||
|
if (!ids.length) { toast('请先勾选要删除的拓扑', 'warn'); return; }
|
||||||
|
uiConfirm('确认删除所选 ' + ids.length + ' 个拓扑?该操作不可恢复。',
|
||||||
|
{ title: '批量删除', danger: true, okText: '删除' }).then(function (ok) {
|
||||||
|
if (!ok) { return; }
|
||||||
|
Promise.all(ids.map(function (id) { return API.deleteTopo(id); })).then(function () {
|
||||||
|
toast('已删除 ' + ids.length + ' 个拓扑', 'ok');
|
||||||
|
loadTopoAdmin();
|
||||||
|
}).catch(handleErr);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
网站设置
|
||||||
|
============================================================ */
|
||||||
|
let logoValue = ''; // 表单中的 Logo(data URI 或 '')
|
||||||
|
|
||||||
|
function renderLogoPreview(logo) {
|
||||||
|
const box = $('logoPreview');
|
||||||
|
if (!box) { return; }
|
||||||
|
if (logo) {
|
||||||
|
box.innerHTML = '';
|
||||||
|
const img = document.createElement('img');
|
||||||
|
img.src = logo;
|
||||||
|
img.alt = 'logo';
|
||||||
|
box.appendChild(img);
|
||||||
|
box.classList.add('has-img');
|
||||||
|
} else {
|
||||||
|
box.textContent = 'R';
|
||||||
|
box.classList.remove('has-img');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyAdminBrand(logo) {
|
||||||
|
const el = document.querySelector('.console-brand .logo');
|
||||||
|
if (!el) { return; }
|
||||||
|
if (logo) {
|
||||||
|
el.innerHTML = '';
|
||||||
|
const img = document.createElement('img');
|
||||||
|
img.src = logo;
|
||||||
|
img.alt = '';
|
||||||
|
el.appendChild(img);
|
||||||
|
el.classList.add('has-img');
|
||||||
|
} else {
|
||||||
|
el.textContent = 'R';
|
||||||
|
el.classList.remove('has-img');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadSettings() {
|
||||||
|
API.siteSettings().then(function (d) {
|
||||||
|
const s = d.settings || {};
|
||||||
|
$('setSiteName').value = s.site_name || '';
|
||||||
|
$('setAllowReg').checked = !!s.allow_registration;
|
||||||
|
$('setTtl').value = (s.session_ttl_days || 30);
|
||||||
|
logoValue = s.site_logo || '';
|
||||||
|
renderLogoPreview(logoValue);
|
||||||
|
applyAdminBrand(logoValue);
|
||||||
|
}).catch(handleErr);
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveSettings() {
|
||||||
|
const name = $('setSiteName').value.trim();
|
||||||
|
if (!name) { toast('请输入网站名称', 'warn'); return; }
|
||||||
|
const ttl = parseInt($('setTtl').value, 10);
|
||||||
|
if (!ttl || ttl < 1) { toast('会话有效期需为不小于 1 的整数', 'warn'); return; }
|
||||||
|
$('btnSaveSettings').disabled = true;
|
||||||
|
API.saveSiteSettings({
|
||||||
|
site_name: name,
|
||||||
|
site_logo: logoValue,
|
||||||
|
allow_registration: $('setAllowReg').checked,
|
||||||
|
session_ttl_days: ttl
|
||||||
|
}).then(function (d) {
|
||||||
|
$('btnSaveSettings').disabled = false;
|
||||||
|
const s = d.settings || {};
|
||||||
|
logoValue = s.site_logo || '';
|
||||||
|
renderLogoPreview(logoValue);
|
||||||
|
applyAdminBrand(logoValue);
|
||||||
|
$('setSiteName').value = s.site_name || name;
|
||||||
|
toast('设置已保存', 'ok');
|
||||||
|
}).catch(function (err) {
|
||||||
|
$('btnSaveSettings').disabled = false;
|
||||||
|
handleErr(err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function onPickLogo() {
|
||||||
|
const input = $('logoFile');
|
||||||
|
const f = input.files && input.files[0];
|
||||||
|
if (!f) { return; }
|
||||||
|
if (f.size > 300 * 1024) {
|
||||||
|
toast('图片过大,请控制在 300KB 以内', 'warn');
|
||||||
|
input.value = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = function () { logoValue = String(reader.result || ''); renderLogoPreview(logoValue); };
|
||||||
|
reader.onerror = function () { toast('读取图片失败', 'err'); };
|
||||||
|
reader.readAsDataURL(f);
|
||||||
|
input.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
操作日志
|
||||||
|
============================================================ */
|
||||||
|
function loadLogs() {
|
||||||
|
const q = state.logs;
|
||||||
|
API.logs({ page: q.page, pageSize: q.pageSize, q: q.q }).then(function (d) {
|
||||||
|
const rows = d.logs || [];
|
||||||
|
$('logRows').innerHTML = rows.length ? rows.map(function (l) {
|
||||||
|
return '<tr>' +
|
||||||
|
'<td>' + esc(fmtTime(l.createdAt)) + '</td>' +
|
||||||
|
'<td>' + esc(l.username || '—') + '</td>' +
|
||||||
|
'<td>' + esc(actionLabel(l.action)) + '</td>' +
|
||||||
|
'<td>' + esc(l.target || '—') + '</td>' +
|
||||||
|
'<td>' + esc(l.detail || '—') + '</td>' +
|
||||||
|
'<td>' + esc(l.ip || '—') + '</td>' +
|
||||||
|
'</tr>';
|
||||||
|
}).join('') : '<tr><td colspan="6" class="empty-row">暂无日志</td></tr>';
|
||||||
|
renderPager('logPager', d.total, q.page, q.pageSize, function (p) { q.page = p; loadLogs(); });
|
||||||
|
}).catch(handleErr);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
事件绑定
|
||||||
|
============================================================ */
|
||||||
|
function bindEvents() {
|
||||||
|
Array.prototype.forEach.call(document.querySelectorAll('.cnav-item'), function (it) {
|
||||||
|
it.addEventListener('click', function () { switchView(it.getAttribute('data-view')); });
|
||||||
|
});
|
||||||
|
|
||||||
|
$('btnCollapseNav').addEventListener('click', function () {
|
||||||
|
$('console').classList.toggle('nav-collapsed');
|
||||||
|
});
|
||||||
|
$('btnCloseAdmin').addEventListener('click', function () {
|
||||||
|
window.location.href = '../index.php';
|
||||||
|
});
|
||||||
|
|
||||||
|
$('userSearch').addEventListener('input', debounce(function () {
|
||||||
|
state.users.q = this.value.trim(); state.users.page = 1; loadUsers();
|
||||||
|
}));
|
||||||
|
$('topoSearch').addEventListener('input', debounce(function () {
|
||||||
|
state.topos.q = this.value.trim(); state.topos.page = 1; loadTopoAdmin();
|
||||||
|
}));
|
||||||
|
$('logSearch').addEventListener('input', debounce(function () {
|
||||||
|
state.logs.q = this.value.trim(); state.logs.page = 1; loadLogs();
|
||||||
|
}));
|
||||||
|
$('topoOwner').addEventListener('change', function () {
|
||||||
|
state.topos.owner = this.value; state.topos.page = 1; loadTopoAdmin();
|
||||||
|
});
|
||||||
|
$('topoSelectAll').addEventListener('change', function () {
|
||||||
|
const checked = this.checked;
|
||||||
|
Array.prototype.forEach.call(document.querySelectorAll('#topoRows .topo-chk'), function (c) {
|
||||||
|
c.checked = checked;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
$('btnExportSelectedTopos').addEventListener('click', function () { exportTopos(false); });
|
||||||
|
$('btnExportAllTopos').addEventListener('click', function () { exportTopos(true); });
|
||||||
|
$('btnDeleteSelectedTopos').addEventListener('click', deleteSelectedTopos);
|
||||||
|
$('btnSaveSettings').addEventListener('click', saveSettings);
|
||||||
|
$('btnPickLogo').addEventListener('click', function () { $('logoFile').click(); });
|
||||||
|
$('logoFile').addEventListener('change', onPickLogo);
|
||||||
|
$('btnClearLogo').addEventListener('click', function () { logoValue = ''; renderLogoPreview(''); });
|
||||||
|
|
||||||
|
$('userRows').addEventListener('click', onUserRowClick);
|
||||||
|
$('topoRows').addEventListener('click', onTopoRowClick);
|
||||||
|
|
||||||
|
$('btnNewUser').addEventListener('click', openUserDialog);
|
||||||
|
$('btnSaveUser').addEventListener('click', submitUserDialog);
|
||||||
|
$('btnCancelUser').addEventListener('click', function () { closeOverlay('userOverlay'); });
|
||||||
|
$('btnCloseUser').addEventListener('click', function () { closeOverlay('userOverlay'); });
|
||||||
|
$('uPass').addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); submitUserDialog(); } });
|
||||||
|
|
||||||
|
$('btnDoReset').addEventListener('click', submitResetDialog);
|
||||||
|
$('btnCancelReset').addEventListener('click', function () { closeOverlay('resetOverlay'); });
|
||||||
|
$('btnCloseReset').addEventListener('click', function () { closeOverlay('resetOverlay'); });
|
||||||
|
$('resetShow').addEventListener('change', function () {
|
||||||
|
const t = this.checked ? 'text' : 'password';
|
||||||
|
['resetAdminPw', 'resetNewPw', 'resetNewPw2'].forEach(function (i) { $(i).type = t; });
|
||||||
|
});
|
||||||
|
['resetNewPw', 'resetNewPw2'].forEach(function (i) {
|
||||||
|
$(i).addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); submitResetDialog(); } });
|
||||||
|
});
|
||||||
|
|
||||||
|
$('confirmOk').addEventListener('click', _dlgConfirmOk);
|
||||||
|
$('confirmCancel').addEventListener('click', function () { _dlgFinish(false); });
|
||||||
|
$('confirmClose').addEventListener('click', function () { _dlgFinish(false); });
|
||||||
|
$('confirmField').addEventListener('keydown', function (e) {
|
||||||
|
if (e.key === 'Enter') { e.preventDefault(); _dlgConfirmOk(); }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
启动:校验管理员身份
|
||||||
|
============================================================ */
|
||||||
|
function boot() {
|
||||||
|
bindEvents();
|
||||||
|
API.me().then(function (d) {
|
||||||
|
const u = d.user;
|
||||||
|
if (!u || u.role !== 'admin') {
|
||||||
|
toast('需要管理员权限,正在返回…', 'warn');
|
||||||
|
setTimeout(function () { window.location.href = '../index.php'; }, 900);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.currentUser = u;
|
||||||
|
$('navUser').textContent = u.username + ' · 管理员';
|
||||||
|
loadSettings();
|
||||||
|
switchView('overview');
|
||||||
|
}).catch(function () {
|
||||||
|
window.location.href = '../index.php';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', boot);
|
||||||
|
} else {
|
||||||
|
boot();
|
||||||
|
}
|
||||||
|
})();
|
||||||
2026
web/app.js
Normal file
2026
web/app.js
Normal file
File diff suppressed because it is too large
Load Diff
181
web/index.html
Normal file
181
web/index.html
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>路由拓扑</title>
|
||||||
|
<link rel="stylesheet" href="web/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="app">
|
||||||
|
|
||||||
|
<header class="topbar">
|
||||||
|
<div class="brand"><div class="logo" id="brandLogo">R</div><h1 id="brandName">路由拓扑</h1></div>
|
||||||
|
<span class="sep"></span>
|
||||||
|
<button class="btn primary" id="btnAdd">＋ 添加节点</button>
|
||||||
|
<button class="btn" id="btnUndo" disabled>↶ 撤销</button>
|
||||||
|
<button class="btn" id="btnAuto">⌗ 自动整理</button>
|
||||||
|
<button class="btn" id="btnFit">⤢ 适应窗口</button>
|
||||||
|
<span class="sep"></span>
|
||||||
|
<button class="btn" id="btnImport">⇩ 导入</button>
|
||||||
|
<button class="btn" id="btnExport">⇧ 导出</button>
|
||||||
|
<span class="sep"></span>
|
||||||
|
<button class="btn danger" id="btnClear">清空</button>
|
||||||
|
<div class="topbar-right">
|
||||||
|
<span class="save-state" id="saveState"></span>
|
||||||
|
<button class="btn primary" id="btnSave">保存</button>
|
||||||
|
<button class="btn" id="btnMyTopos">我的拓扑</button>
|
||||||
|
<div class="user-wrap">
|
||||||
|
<button class="btn" id="btnUser">登录</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="file" id="fileInput" accept=".json,application/json" hidden>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="banner" id="banner" hidden></div>
|
||||||
|
|
||||||
|
<main class="main">
|
||||||
|
<div class="canvas-wrap">
|
||||||
|
<svg id="svg" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5"
|
||||||
|
markerWidth="6.5" markerHeight="6.5" orient="auto">
|
||||||
|
<path d="M 0 0.7 L 10 5 L 0 9.3 L 2.6 5 Z" fill="#94a3b8"/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
<g id="viewport"></g>
|
||||||
|
</svg>
|
||||||
|
<div class="hint">拖动空白平移 · 滚轮缩放 · 拖节点右侧蓝点连线 · 拖底部绿点加子节点 · 双击空白新建</div>
|
||||||
|
<div class="stats" id="stats"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="inspector">
|
||||||
|
<div class="insp-empty" id="inspEmpty">
|
||||||
|
<b>未选中节点</b>
|
||||||
|
点击图中节点进行编辑
|
||||||
|
</div>
|
||||||
|
<div id="inspBody" hidden>
|
||||||
|
<label>名称 / 地址
|
||||||
|
<input id="fLabel" type="text" placeholder="192.168.1.10 / dc.corp.local" spellcheck="false">
|
||||||
|
</label>
|
||||||
|
<label>类型
|
||||||
|
<select id="fType">
|
||||||
|
<option value="net">网段 (CIDR)</option>
|
||||||
|
<option value="host">主机 (IP)</option>
|
||||||
|
<option value="domain">域名</option>
|
||||||
|
<option value="other">其他</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>状态
|
||||||
|
<select id="fStatus"></select>
|
||||||
|
</label>
|
||||||
|
<label>端口 / 服务
|
||||||
|
<input id="fPorts" type="text" placeholder="22, 80, 445 / ssh、smb" spellcheck="false">
|
||||||
|
</label>
|
||||||
|
<label>备注
|
||||||
|
<textarea id="fNote" placeholder="凭据、漏洞、横向思路…"></textarea>
|
||||||
|
</label>
|
||||||
|
<div class="btn-row">
|
||||||
|
<button class="btn" id="btnAddChild">＋ 子节点</button>
|
||||||
|
<button class="btn danger" id="btnDelete">删除节点</button>
|
||||||
|
</div>
|
||||||
|
<div class="meta" id="inspMeta"></div>
|
||||||
|
</div>
|
||||||
|
<div class="legend" id="legend"></div>
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ================= 登录 / 注册 ================= -->
|
||||||
|
<div class="overlay" id="loginOverlay" hidden>
|
||||||
|
<div class="dialog">
|
||||||
|
<div class="dlg-head"><h2 id="loginTitle">登录</h2><span class="dlg-close" id="btnCloseLogin">×</span></div>
|
||||||
|
<label>用户名
|
||||||
|
<input id="loginUser" type="text" spellcheck="false" autocomplete="username" placeholder="用户名">
|
||||||
|
</label>
|
||||||
|
<label>密码
|
||||||
|
<input id="loginPass" type="password" autocomplete="current-password" placeholder="密码">
|
||||||
|
</label>
|
||||||
|
<label id="loginPass2Wrap" hidden>确认密码
|
||||||
|
<input id="loginPass2" type="password" autocomplete="new-password" placeholder="请再次输入密码">
|
||||||
|
</label>
|
||||||
|
<label class="pwd-show"><input type="checkbox" id="loginShow"> 显示密码</label>
|
||||||
|
<div class="dlg-err" id="loginErr"></div>
|
||||||
|
<div class="dlg-actions">
|
||||||
|
<button class="btn primary" id="btnDoLogin">登录</button>
|
||||||
|
<button class="btn" id="btnRegister">注册新账号</button>
|
||||||
|
</div><br>
|
||||||
|
<div class="dlg-tip" id="loginTip">默认管理员 admin / admin123</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ================= 我的拓扑 ================= -->
|
||||||
|
<div class="overlay" id="topoOverlay" hidden>
|
||||||
|
<div class="dialog wide">
|
||||||
|
<div class="dlg-head"><h2>我的拓扑</h2><span class="dlg-close" id="btnCloseTopo">×</span></div>
|
||||||
|
<div class="new-row">
|
||||||
|
<input id="newTopoName" type="text" placeholder="新建拓扑名称,例如:某内网横向拓扑" spellcheck="false">
|
||||||
|
<select id="newTopoTemplate" title="选择初始化模板"></select>
|
||||||
|
<button class="btn primary" id="btnCreateTopo">新建</button>
|
||||||
|
</div>
|
||||||
|
<div class="seg" id="topoScope">
|
||||||
|
<button class="seg-btn active" type="button" data-scope="mine">我的拓扑</button>
|
||||||
|
<button class="seg-btn" type="button" data-scope="public">公开拓扑</button>
|
||||||
|
</div>
|
||||||
|
<div class="topo-list" id="topoList"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 管理员控制台已拆分为独立页面:web/admin.html -->
|
||||||
|
|
||||||
|
<!-- ================= 修改密码 ================= -->
|
||||||
|
<div class="overlay" id="pwdOverlay" hidden>
|
||||||
|
<div class="dialog">
|
||||||
|
<div class="dlg-head"><h2 id="pwdTitle">修改密码</h2><span class="dlg-close" id="btnClosePwd">×</span></div>
|
||||||
|
<div class="dlg-tip" id="pwdHintWrap" hidden>首次登录必须修改密码后才能继续使用</div>
|
||||||
|
<label>原密码<input id="pwdOld" type="password" autocomplete="current-password" placeholder="当前使用的密码"></label>
|
||||||
|
<label>新密码<input id="pwdNew" type="password" autocomplete="new-password" placeholder="至少 8 位,需含字母和数字"></label>
|
||||||
|
<label>确认新密码<input id="pwdNew2" type="password" autocomplete="new-password" placeholder="请再次输入新密码"></label>
|
||||||
|
<label class="pwd-show"><input type="checkbox" id="pwdShow"> 显示密码</label>
|
||||||
|
<div class="dlg-err" id="pwdErr"></div>
|
||||||
|
<div class="dlg-actions"><button class="btn primary" id="btnDoPwd">确认修改</button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ================= 站内确认 / 输入弹窗 ================= -->
|
||||||
|
<div class="overlay" id="confirmOverlay" hidden>
|
||||||
|
<div class="dialog">
|
||||||
|
<div class="dlg-head"><h2 id="confirmTitle">请确认</h2><span class="dlg-close" id="confirmClose">×</span></div>
|
||||||
|
<div class="dlg-msg" id="confirmMsg"></div>
|
||||||
|
<label id="confirmFieldWrap" hidden><span id="confirmFieldLabel"></span>
|
||||||
|
<input id="confirmField" type="text" spellcheck="false" autocomplete="off">
|
||||||
|
</label>
|
||||||
|
<div class="dlg-err" id="confirmErr"></div>
|
||||||
|
<div class="dlg-actions">
|
||||||
|
<button class="btn" id="confirmCancel" type="button">取消</button>
|
||||||
|
<button class="btn primary" id="confirmOk" type="button">确定</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ================= 导出 / 导入 格式选择 ================= -->
|
||||||
|
<div class="overlay" id="formatOverlay" hidden>
|
||||||
|
<div class="dialog">
|
||||||
|
<div class="dlg-head"><h2 id="formatTitle">导出拓扑</h2><span class="dlg-close" id="btnCloseFormat">×</span></div>
|
||||||
|
<div class="dlg-msg" id="formatMsg"></div>
|
||||||
|
<div class="format-list" id="formatList"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户菜单置于 body 直属并使用 fixed 定位,避免被顶部栏的 overflow / backdrop-filter 裁剪 -->
|
||||||
|
<div class="dropdown" id="userMenu" hidden>
|
||||||
|
<div class="dd-name" id="ddName"></div>
|
||||||
|
<div class="dd-item" id="ddPwd">修改密码</div>
|
||||||
|
<div class="dd-item" id="ddLogout">退出登录</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="toast" id="toast"></div>
|
||||||
|
|
||||||
|
<script src="web/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
451
web/style.css
Normal file
451
web/style.css
Normal file
@ -0,0 +1,451 @@
|
|||||||
|
/* =========================================================================
|
||||||
|
路由拓扑 · 多用户版 — 科技简洁风
|
||||||
|
设计原则：科技蓝主色 / 大留白 / 扁平极简 / 单一语义色 / 淡色底 + 同色文字
|
||||||
|
========================================================================= */
|
||||||
|
|
||||||
|
/* -------------------------------- 设计变量 -------------------------------- */
|
||||||
|
:root{
|
||||||
|
/* 主色 */
|
||||||
|
--blue-700:#1d4ed8; --blue-600:#2563eb; --blue-500:#3b82f6;
|
||||||
|
--blue-100:#dbeafe; --blue-50:#eff6ff;
|
||||||
|
/* 灰阶文字（统一语义色） */
|
||||||
|
--ink-900:#0f172a; --ink-800:#1e293b; --ink-700:#334155; --ink-600:#475569;
|
||||||
|
--ink-500:#64748b; --ink-400:#94a3b8; --ink-300:#cbd5e1; --ink-200:#e2e8f0; --ink-100:#f1f5f9;
|
||||||
|
/* 背景 / 面 / 描边 */
|
||||||
|
--bg:#f6f8fc; --surface:#ffffff; --border:#e6ebf3;
|
||||||
|
/* 语义状态色：淡色底 + 同色文字 */
|
||||||
|
--ok-fg:#047857; --ok-bg:#ecfdf5; --ok-bd:#a7f3d0;
|
||||||
|
--danger-fg:#b91c1c;--danger-bg:#fef2f2;--danger-bd:#fecaca;
|
||||||
|
--warn-fg:#b45309; --warn-bg:#fffbeb; --warn-bd:#fde68a;
|
||||||
|
--info-fg:#1d4ed8; --info-bg:#eff6ff; --info-bd:#bfdbfe;
|
||||||
|
/* 圆角 / 阴影 / 过渡 */
|
||||||
|
--r-lg:16px; --r-md:12px; --r-sm:9px;
|
||||||
|
--sh-1:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
|
||||||
|
--sh-2:0 8px 24px rgba(15,23,42,.10);
|
||||||
|
--sh-3:0 24px 60px rgba(15,23,42,.18);
|
||||||
|
--t-fast:.16s cubic-bezier(.4,0,.2,1);
|
||||||
|
/* 后台深蓝侧栏 */
|
||||||
|
--nav-grad:linear-gradient(180deg,#1e3a8a 0%,#1d4ed8 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------------------- 基础 -------------------------------- */
|
||||||
|
*{box-sizing:border-box;}
|
||||||
|
html,body{height:100%;}
|
||||||
|
body{
|
||||||
|
margin:0;background:var(--bg);color:var(--ink-800);overflow:hidden;
|
||||||
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
|
||||||
|
font-size:13.5px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
|
||||||
|
}
|
||||||
|
[hidden]{display:none !important;}
|
||||||
|
button{font-family:inherit;}
|
||||||
|
.app{display:flex;flex-direction:column;height:100vh;}
|
||||||
|
|
||||||
|
/* 细腻滚动条 */
|
||||||
|
::-webkit-scrollbar{width:9px;height:9px;}
|
||||||
|
::-webkit-scrollbar-thumb{background:var(--ink-200);border-radius:9px;border:2px solid transparent;background-clip:padding-box;}
|
||||||
|
::-webkit-scrollbar-thumb:hover{background:var(--ink-300);background-clip:padding-box;}
|
||||||
|
::-webkit-scrollbar-track{background:transparent;}
|
||||||
|
|
||||||
|
/* -------------------------------- 按钮 -------------------------------- */
|
||||||
|
/* 默认：圆角描边；悬停边框与文字变蓝。仅主操作实心蓝、危险操作用红。 */
|
||||||
|
.btn{
|
||||||
|
display:inline-flex;align-items:center;justify-content:center;gap:6px;
|
||||||
|
padding:8px 14px;border-radius:var(--r-md);
|
||||||
|
border:1px solid var(--ink-300);background:var(--surface);color:var(--ink-700);
|
||||||
|
font-size:13px;font-weight:500;line-height:1.4;cursor:pointer;white-space:nowrap;
|
||||||
|
transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
|
||||||
|
user-select:none;flex:0 0 auto;
|
||||||
|
}
|
||||||
|
.btn:hover{border-color:var(--blue-500);color:var(--blue-600);background:var(--blue-50);}
|
||||||
|
.btn:active{transform:translateY(1px);}
|
||||||
|
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--blue-100);}
|
||||||
|
.btn.primary{background:var(--blue-600);border-color:var(--blue-600);color:#fff;font-weight:600;}
|
||||||
|
.btn.primary:hover{background:var(--blue-700);border-color:var(--blue-700);color:#fff;}
|
||||||
|
.btn.danger{border-color:var(--danger-bd);color:var(--danger-fg);background:var(--surface);}
|
||||||
|
.btn.danger:hover{border-color:#fca5a5;color:var(--danger-fg);background:var(--danger-bg);}
|
||||||
|
.btn:disabled,.btn:disabled:hover{
|
||||||
|
opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;
|
||||||
|
border-color:var(--ink-200);color:var(--ink-400);background:var(--surface);
|
||||||
|
}
|
||||||
|
/* 小尺寸档 */
|
||||||
|
.btn.sm{padding:5px 10px;font-size:12px;border-radius:var(--r-sm);}
|
||||||
|
|
||||||
|
/* -------------------------------- 徽标 / 状态 -------------------------------- */
|
||||||
|
.badge{
|
||||||
|
display:inline-flex;align-items:center;font-size:11.5px;font-weight:500;
|
||||||
|
padding:2px 9px;border-radius:999px;white-space:nowrap;
|
||||||
|
border:1px solid var(--ink-200);background:var(--ink-100);color:var(--ink-600);
|
||||||
|
}
|
||||||
|
.badge.public{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-fg);}
|
||||||
|
.badge.private{background:var(--ink-100);border-color:var(--ink-200);color:var(--ink-600);}
|
||||||
|
.badge.owner{background:var(--info-bg);border-color:var(--info-bd);color:var(--info-fg);}
|
||||||
|
.badge.ro{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-fg);}
|
||||||
|
|
||||||
|
/* -------------------------------- 顶部标题条 -------------------------------- */
|
||||||
|
.topbar{
|
||||||
|
display:flex;align-items:center;gap:8px;padding:10px 18px;flex:0 0 auto;
|
||||||
|
background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
|
||||||
|
border-bottom:1px solid var(--border);overflow-x:auto;white-space:nowrap;
|
||||||
|
position:relative;z-index:20;
|
||||||
|
}
|
||||||
|
.topbar::-webkit-scrollbar{height:0;}
|
||||||
|
.brand{display:flex;align-items:center;gap:10px;margin-right:6px;}
|
||||||
|
.brand .logo{
|
||||||
|
width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
|
||||||
|
background:var(--blue-600);color:#fff;font-size:15px;font-weight:700;
|
||||||
|
box-shadow:0 4px 12px rgba(37,99,235,.28);
|
||||||
|
}
|
||||||
|
.brand h1{font-size:15px;margin:0;font-weight:600;color:var(--ink-900);letter-spacing:.2px;}
|
||||||
|
/* 品牌 Logo:图片模式(设置自定义 Logo 后显示图片,否则回退字母 R) */
|
||||||
|
.brand .logo,.console-brand .logo{overflow:hidden;}
|
||||||
|
.brand .logo.has-img,.console-brand .logo.has-img{background:transparent;box-shadow:none;}
|
||||||
|
.brand .logo img,.console-brand .logo img{width:100%;height:100%;object-fit:contain;display:block;}
|
||||||
|
.sep{width:1px;height:20px;background:var(--border);margin:0 4px;flex:0 0 auto;}
|
||||||
|
|
||||||
|
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto;}
|
||||||
|
.save-state{font-size:12px;color:var(--ink-400);min-width:64px;text-align:right;white-space:nowrap;}
|
||||||
|
.save-state.ok{color:var(--ok-fg);}
|
||||||
|
.save-state.err{color:var(--danger-fg);}
|
||||||
|
.save-state.dirty{color:var(--warn-fg);}
|
||||||
|
|
||||||
|
.user-wrap{position:relative;flex:0 0 auto;}
|
||||||
|
/* 顶部栏设置了 overflow-x:auto,会连同 overflow-y 一起被计算为 auto,
|
||||||
|
绝对定位的下拉菜单会被其裁剪(挤在顶部栏内),因此改用 fixed 定位,
|
||||||
|
由 JS 依据按钮位置动态摆放(right/top 为兜底值) */
|
||||||
|
.dropdown{
|
||||||
|
position:fixed;right:18px;top:56px;background:var(--surface);border:1px solid var(--border);
|
||||||
|
border-radius:var(--r-md);min-width:184px;padding:6px;z-index:60;box-shadow:var(--sh-2);
|
||||||
|
animation:pop var(--t-fast) both;
|
||||||
|
}
|
||||||
|
.dd-name{padding:8px 10px;font-size:12px;color:var(--ink-500);border-bottom:1px solid var(--border);margin-bottom:4px;word-break:break-all;}
|
||||||
|
.dd-item{padding:8px 10px;font-size:13px;color:var(--ink-700);border-radius:var(--r-sm);cursor:pointer;transition:background var(--t-fast),color var(--t-fast);}
|
||||||
|
.dd-item:hover{background:var(--blue-50);color:var(--blue-600);}
|
||||||
|
|
||||||
|
/* -------------------------------- 横幅提示 -------------------------------- */
|
||||||
|
.banner{flex:0 0 auto;padding:9px 18px;font-size:12.5px;display:flex;align-items:center;gap:6px;border-bottom:1px solid transparent;}
|
||||||
|
.banner.warn{background:var(--warn-bg);color:var(--warn-fg);border-bottom-color:var(--warn-bd);}
|
||||||
|
.banner.info{background:var(--info-bg);color:var(--info-fg);border-bottom-color:var(--info-bd);}
|
||||||
|
.banner .lnk{color:inherit;font-weight:600;text-decoration:underline;cursor:pointer;margin-left:6px;}
|
||||||
|
|
||||||
|
/* -------------------------------- 主体 / 画布 -------------------------------- */
|
||||||
|
.main{flex:1;display:flex;min-height:0;}
|
||||||
|
.canvas-wrap{
|
||||||
|
flex:1;position:relative;min-width:0;background-color:#fbfcfe;
|
||||||
|
background-image:radial-gradient(circle,#e3eaf5 1px,transparent 1px);
|
||||||
|
background-size:22px 22px;
|
||||||
|
}
|
||||||
|
#svg{width:100%;height:100%;display:block;touch-action:none;}
|
||||||
|
.hint,.stats{
|
||||||
|
position:absolute;bottom:14px;font-size:12px;color:var(--ink-500);pointer-events:none;
|
||||||
|
background:rgba(255,255,255,.92);padding:6px 12px;border-radius:999px;
|
||||||
|
border:1px solid var(--border);box-shadow:var(--sh-1);
|
||||||
|
}
|
||||||
|
.hint{left:16px;}
|
||||||
|
.stats{right:16px;font-variant-numeric:tabular-nums;}
|
||||||
|
|
||||||
|
/* -------------------------------- 右侧检查器 -------------------------------- */
|
||||||
|
.inspector{
|
||||||
|
flex:0 0 296px;background:var(--surface);border-left:1px solid var(--border);
|
||||||
|
padding:18px;overflow-y:auto;
|
||||||
|
}
|
||||||
|
.inspector label{display:block;margin-bottom:14px;font-size:12px;color:var(--ink-500);letter-spacing:.2px;}
|
||||||
|
.inspector input,.inspector select,.inspector textarea{
|
||||||
|
width:100%;margin-top:6px;background:var(--surface);border:1px solid var(--ink-300);
|
||||||
|
color:var(--ink-800);border-radius:var(--r-sm);padding:8px 11px;font-size:13px;
|
||||||
|
font-family:inherit;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast);
|
||||||
|
}
|
||||||
|
.inspector input:focus,.inspector select:focus,.inspector textarea:focus{
|
||||||
|
border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100);
|
||||||
|
}
|
||||||
|
.inspector textarea{resize:vertical;min-height:68px;line-height:1.55;}
|
||||||
|
.inspector select{cursor:pointer;}
|
||||||
|
.inspector input:disabled,.inspector select:disabled,.inspector textarea:disabled{opacity:.55;cursor:not-allowed;background:var(--ink-100);}
|
||||||
|
.btn-row{display:flex;gap:8px;margin-top:2px;}
|
||||||
|
.btn-row .btn{flex:1;}
|
||||||
|
|
||||||
|
.insp-empty{color:var(--ink-400);text-align:center;padding:48px 10px 36px;font-size:12.5px;line-height:2;}
|
||||||
|
.insp-empty b{color:var(--ink-600);font-weight:600;display:block;margin-bottom:2px;font-size:13.5px;}
|
||||||
|
|
||||||
|
.meta{margin-top:18px;border-top:1px dashed var(--border);padding-top:14px;}
|
||||||
|
.meta-row{display:flex;gap:8px;margin-bottom:8px;font-size:12px;line-height:1.55;}
|
||||||
|
.meta-row span{color:var(--ink-400);flex:0 0 34px;}
|
||||||
|
.meta-row b{color:var(--ink-700);font-weight:500;word-break:break-all;}
|
||||||
|
|
||||||
|
.legend{margin-top:20px;border-top:1px dashed var(--border);padding-top:14px;}
|
||||||
|
.legend-title{font-size:11.5px;color:var(--ink-400);margin-bottom:10px;letter-spacing:.6px;}
|
||||||
|
.legend-items{display:flex;flex-wrap:wrap;gap:8px 14px;}
|
||||||
|
.legend-items span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-600);}
|
||||||
|
.legend-items i{width:9px;height:9px;border-radius:50%;display:inline-block;}
|
||||||
|
|
||||||
|
/* -------------------------------- 画布 SVG 元素 -------------------------------- */
|
||||||
|
.node{cursor:move;}
|
||||||
|
/* 连线 / 加子节点手柄:默认半透明但仍可辨识,悬停或选中节点时完全显现并微浮起 */
|
||||||
|
.node .link-handle,.node .add-handle{opacity:.6;transition:opacity var(--t-fast),filter var(--t-fast);}
|
||||||
|
.node:hover .link-handle,.node:hover .add-handle,
|
||||||
|
.node.selected .link-handle,.node.selected .add-handle{opacity:1;filter:drop-shadow(0 2px 5px rgba(15,23,42,.28));}
|
||||||
|
.node .link-handle,.node .add-handle{cursor:crosshair;}
|
||||||
|
.edge .edge-del{opacity:0;pointer-events:none;transition:opacity var(--t-fast);cursor:pointer;}
|
||||||
|
.edge:hover .edge-del{opacity:1;pointer-events:auto;}
|
||||||
|
.edge .edge-hit{cursor:pointer;}
|
||||||
|
|
||||||
|
/* -------------------------------- 遮罩 / 弹窗 -------------------------------- */
|
||||||
|
.overlay{
|
||||||
|
position:fixed;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(2px);
|
||||||
|
display:flex;align-items:center;justify-content:center;z-index:70;padding:24px;
|
||||||
|
animation:fade var(--t-fast) both;
|
||||||
|
}
|
||||||
|
.dialog{
|
||||||
|
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
|
||||||
|
padding:24px;width:364px;max-width:100%;box-shadow:var(--sh-3);
|
||||||
|
animation:fadeUp .2s cubic-bezier(.4,0,.2,1) both;
|
||||||
|
}
|
||||||
|
.dialog.wide{width:760px;max-width:94vw;height:82vh;display:flex;flex-direction:column;}
|
||||||
|
.dialog h2{margin:0;font-size:16px;color:var(--ink-900);font-weight:600;}
|
||||||
|
.dialog label{display:block;margin-bottom:14px;font-size:12px;color:var(--ink-500);}
|
||||||
|
.dialog label input{display:block;width:100%;}
|
||||||
|
.dialog input,.dialog select{
|
||||||
|
width:100%;margin-top:6px;background:var(--surface);border:1px solid var(--ink-300);
|
||||||
|
color:var(--ink-800);border-radius:var(--r-sm);padding:9px 11px;font-size:13px;
|
||||||
|
font-family:inherit;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast);
|
||||||
|
}
|
||||||
|
.dialog input:focus,.dialog select:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100);}
|
||||||
|
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
|
||||||
|
.dlg-close{cursor:pointer;color:var(--ink-400);font-size:20px;line-height:1;padding:0 8px;border-radius:var(--r-sm);transition:background var(--t-fast),color var(--t-fast);}
|
||||||
|
.dlg-close:hover{background:var(--ink-100);color:var(--ink-700);}
|
||||||
|
.dlg-msg{font-size:13.5px;color:var(--ink-600);line-height:1.7;margin-bottom:16px;word-break:break-word;}
|
||||||
|
.dlg-err{color:var(--danger-fg);font-size:12.5px;min-height:18px;margin-bottom:8px;}
|
||||||
|
.dlg-tip{
|
||||||
|
font-size:12px;margin-bottom:14px;text-align:left;padding:9px 12px;border-radius:var(--r-sm);
|
||||||
|
background:var(--info-bg);border:1px solid var(--info-bd);color:var(--info-fg);
|
||||||
|
}
|
||||||
|
#pwdHintWrap{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-fg);}
|
||||||
|
/* 修改密码:显示密码开关(覆盖 .dialog label input 的整宽样式) */
|
||||||
|
.dialog label.pwd-show{display:flex;align-items:center;gap:7px;margin-bottom:16px;color:var(--ink-600);cursor:pointer;user-select:none;}
|
||||||
|
.dialog label.pwd-show input[type=checkbox]{width:auto;margin:0;padding:0;flex:0 0 auto;border:none;background:none;box-shadow:none;accent-color:var(--blue-600);cursor:pointer;}
|
||||||
|
.dlg-actions{display:flex;gap:10px;justify-content:flex-end;}
|
||||||
|
.dlg-actions .btn{min-width:84px;}
|
||||||
|
.dlg-actions .btn.primary,.dlg-actions .btn.danger{min-width:96px;}
|
||||||
|
|
||||||
|
/* 格式选择弹框(导出 / 导入) */
|
||||||
|
.format-list{display:flex;flex-direction:column;gap:10px;}
|
||||||
|
.format-item{
|
||||||
|
display:flex;align-items:center;gap:12px;width:100%;text-align:left;
|
||||||
|
padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);
|
||||||
|
background:var(--surface);cursor:pointer;font-family:inherit;
|
||||||
|
transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
|
||||||
|
}
|
||||||
|
.format-item:hover{border-color:var(--blue-100);background:var(--blue-50);box-shadow:var(--sh-1);transform:translateY(-1px);}
|
||||||
|
.format-item:active{transform:translateY(0);}
|
||||||
|
.format-item:focus-visible{outline:none;box-shadow:0 0 0 3px var(--blue-100);}
|
||||||
|
.format-item .fi-badge{
|
||||||
|
flex:0 0 auto;width:46px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;
|
||||||
|
background:var(--blue-50);border:1px solid var(--blue-100);color:var(--blue-600);
|
||||||
|
font-size:11px;font-weight:700;letter-spacing:.4px;
|
||||||
|
}
|
||||||
|
.format-item .fi-text{display:flex;flex-direction:column;min-width:0;}
|
||||||
|
.format-item .fi-name{font-size:13.5px;font-weight:600;color:var(--ink-900);}
|
||||||
|
.format-item .fi-desc{font-size:12px;color:var(--ink-500);margin-top:3px;line-height:1.5;}
|
||||||
|
|
||||||
|
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:16px;}
|
||||||
|
.tab{padding:9px 13px;font-size:13px;color:var(--ink-500);cursor:pointer;border-bottom:2px solid transparent;transition:color var(--t-fast),border-color var(--t-fast);}
|
||||||
|
.tab:hover{color:var(--ink-700);}
|
||||||
|
.tab.active{color:var(--blue-600);border-bottom-color:var(--blue-600);font-weight:600;}
|
||||||
|
.tab-pane{display:flex;flex-direction:column;flex:1;min-height:0;}
|
||||||
|
|
||||||
|
/* -------------------------------- 列表 / 我的拓扑 -------------------------------- */
|
||||||
|
.topo-list{overflow-y:auto;flex:1;padding-right:2px;}
|
||||||
|
.topo-item{
|
||||||
|
display:flex;align-items:center;gap:10px;padding:12px 14px;
|
||||||
|
border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:10px;background:var(--surface);
|
||||||
|
box-shadow:var(--sh-1);transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
|
||||||
|
}
|
||||||
|
.topo-item:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--blue-100);}
|
||||||
|
.topo-meta{flex:1;min-width:0;}
|
||||||
|
.topo-name{font-size:13.5px;font-weight:600;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||||
|
.topo-sub{font-size:11.5px;color:var(--ink-500);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||||
|
.row-mini{display:flex;gap:6px;flex:0 0 auto;}
|
||||||
|
.row-mini .btn{padding:5px 10px;font-size:12px;border-radius:var(--r-sm);}
|
||||||
|
.new-row{display:flex;gap:10px;margin-bottom:16px;align-items:center;}
|
||||||
|
.new-row input,.new-row select{margin-top:0;flex:1;min-width:0;width:auto;background:var(--surface);border:1px solid var(--ink-300);border-radius:var(--r-sm);padding:9px 11px;font-size:13px;font-family:inherit;color:var(--ink-800);outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast);}
|
||||||
|
.new-row input:focus,.new-row select:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100);}
|
||||||
|
.new-row .btn{flex:0 0 auto;}
|
||||||
|
#newTopoTemplate{flex:0 0 auto;min-width:158px;cursor:pointer;}
|
||||||
|
/* 我的拓扑:范围切换(我的 / 公开) */
|
||||||
|
.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--ink-100);margin-bottom:14px;}
|
||||||
|
.seg-btn{
|
||||||
|
border:none;background:transparent;font-family:inherit;font-size:12.5px;font-weight:500;
|
||||||
|
color:var(--ink-500);padding:6px 14px;border-radius:var(--r-sm);cursor:pointer;
|
||||||
|
transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast);
|
||||||
|
}
|
||||||
|
.seg-btn:hover{color:var(--ink-700);}
|
||||||
|
.seg-btn.active{background:var(--surface);color:var(--blue-600);font-weight:600;box-shadow:var(--sh-1);}
|
||||||
|
.empty{color:var(--ink-400);text-align:center;padding:28px 0;font-size:12.5px;}
|
||||||
|
|
||||||
|
/* -------------------------------- 右下角提示条 -------------------------------- */
|
||||||
|
.toast{
|
||||||
|
position:fixed;right:24px;bottom:24px;left:auto;max-width:min(380px,86vw);
|
||||||
|
display:flex;align-items:center;gap:8px;
|
||||||
|
padding:11px 16px;border-radius:var(--r-md);font-size:13px;font-weight:500;
|
||||||
|
background:var(--info-bg);border:1px solid var(--info-bd);color:var(--info-fg);
|
||||||
|
box-shadow:var(--sh-2);z-index:90;pointer-events:none;
|
||||||
|
opacity:0;transform:translateY(12px);
|
||||||
|
transition:opacity .2s ease,transform .2s ease;
|
||||||
|
}
|
||||||
|
.toast.show{opacity:1;transform:none;}
|
||||||
|
.toast.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-fg);}
|
||||||
|
.toast.err{background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger-fg);}
|
||||||
|
.toast.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-fg);}
|
||||||
|
|
||||||
|
/* -------------------------------- 管理控制台 -------------------------------- */
|
||||||
|
.console{
|
||||||
|
width:1040px;max-width:96vw;height:88vh;background:var(--surface);
|
||||||
|
border:1px solid var(--border);border-radius:var(--r-lg);display:flex;overflow:hidden;
|
||||||
|
box-shadow:var(--sh-3);animation:fadeUp .2s cubic-bezier(.4,0,.2,1) both;
|
||||||
|
}
|
||||||
|
/* 左侧深蓝可收缩侧栏 */
|
||||||
|
.console-nav{
|
||||||
|
flex:0 0 210px;background:var(--nav-grad);color:#c7d7f7;
|
||||||
|
display:flex;flex-direction:column;padding:16px 12px;
|
||||||
|
transition:flex-basis .2s ease,padding .2s ease;
|
||||||
|
}
|
||||||
|
.console.nav-collapsed .console-nav{flex-basis:66px;padding:16px 9px;}
|
||||||
|
.console-brand{display:flex;align-items:center;gap:9px;padding:2px 4px 16px;}
|
||||||
|
.console-brand .logo{
|
||||||
|
width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
|
||||||
|
background:rgba(255,255,255,.18);color:#fff;font-weight:700;font-size:14px;
|
||||||
|
}
|
||||||
|
.cb-text{min-width:0;overflow:hidden;}
|
||||||
|
.console-brand b{display:block;font-size:13.5px;color:#fff;}
|
||||||
|
.console-brand i{font-style:normal;font-size:11.5px;color:#a9c2f0;}
|
||||||
|
.cnav-toggle{
|
||||||
|
margin-left:auto;flex:0 0 auto;width:28px;height:28px;border:none;border-radius:8px;cursor:pointer;
|
||||||
|
background:rgba(255,255,255,.14);color:#e0e9fb;font-size:13px;line-height:1;
|
||||||
|
transition:background var(--t-fast),color var(--t-fast);
|
||||||
|
}
|
||||||
|
.cnav-toggle:hover{background:rgba(255,255,255,.28);color:#fff;}
|
||||||
|
.cnav-item{
|
||||||
|
display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);
|
||||||
|
font-size:13px;color:#c7d7f7;cursor:pointer;margin-bottom:4px;
|
||||||
|
transition:background var(--t-fast),color var(--t-fast);
|
||||||
|
}
|
||||||
|
.cnav-item .ci{font-size:15px;width:18px;text-align:center;flex:0 0 auto;}
|
||||||
|
.cnav-item:hover{background:rgba(255,255,255,.12);color:#fff;}
|
||||||
|
.cnav-item.active{background:rgba(255,255,255,.2);color:#fff;font-weight:600;}
|
||||||
|
.cnave-foot,.cnav-foot{margin-top:auto;padding-top:10px;border-top:1px solid rgba(255,255,255,.16);}
|
||||||
|
.cnav-close{
|
||||||
|
display:block;padding:9px 12px;border-radius:var(--r-sm);font-size:12.5px;text-align:center;cursor:pointer;
|
||||||
|
color:#c7d7f7;border:1px solid rgba(255,255,255,.28);
|
||||||
|
transition:background var(--t-fast),color var(--t-fast);
|
||||||
|
}
|
||||||
|
.cnav-close:hover{background:rgba(255,255,255,.16);color:#fff;}
|
||||||
|
/* 收起态：隐藏文字，仅留图标 */
|
||||||
|
.console.nav-collapsed .cb-text,
|
||||||
|
.console.nav-collapsed .cl,
|
||||||
|
.console.nav-collapsed .console-brand .logo{display:none;}
|
||||||
|
.console.nav-collapsed .console-brand{gap:0;justify-content:center;padding-bottom:16px;}
|
||||||
|
.console.nav-collapsed .cnav-item{justify-content:center;padding:10px 0;}
|
||||||
|
|
||||||
|
.console-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:24px 28px;overflow:hidden;}
|
||||||
|
.view{display:flex;flex-direction:column;flex:1;min-height:0;animation:fadeUp .22s cubic-bezier(.4,0,.2,1) both;}
|
||||||
|
.view-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap;}
|
||||||
|
.view-head h2{margin:0;font-size:18px;letter-spacing:.2px;color:var(--ink-900);font-weight:600;}
|
||||||
|
.view-tools{display:flex;gap:8px;flex-wrap:wrap;}
|
||||||
|
.search{
|
||||||
|
width:auto;background:var(--surface);border:1px solid var(--ink-300);color:var(--ink-800);
|
||||||
|
border-radius:var(--r-sm);padding:8px 11px;font-size:13px;font-family:inherit;
|
||||||
|
outline:none;min-width:184px;transition:border-color var(--t-fast),box-shadow var(--t-fast);
|
||||||
|
}
|
||||||
|
.search:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100);}
|
||||||
|
|
||||||
|
/* -------------------------------- 网站设置 -------------------------------- */
|
||||||
|
.settings-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
|
||||||
|
.set-label{display:block;font-size:12.5px;color:var(--ink-500);margin-bottom:14px;letter-spacing:.2px;}
|
||||||
|
.set-label .search{width:100%;margin-top:6px;min-width:0;}
|
||||||
|
.set-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-700);cursor:pointer;margin-bottom:16px;user-select:none;}
|
||||||
|
.set-row input[type=checkbox]{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--blue-600);}
|
||||||
|
.logo-edit{display:flex;align-items:center;gap:14px;}
|
||||||
|
.logo-preview{flex:0 0 auto;width:64px;height:64px;border-radius:14px;display:grid;place-items:center;background:var(--blue-600);color:#fff;font-size:26px;font-weight:700;overflow:hidden;box-shadow:0 4px 12px rgba(37,99,235,.24);}
|
||||||
|
.logo-preview.has-img{background:#fff;border:1px solid var(--border);box-shadow:none;}
|
||||||
|
.logo-preview img{width:100%;height:100%;object-fit:contain;display:block;}
|
||||||
|
.logo-edit-side{min-width:0;}
|
||||||
|
.hint-sm{font-size:11.5px;color:var(--ink-400);line-height:1.5;margin-top:8px;}
|
||||||
|
@media (max-width:900px){.settings-grid{grid-template-columns:1fr;}}
|
||||||
|
|
||||||
|
/* -------------------------------- 卡片 / 面板 -------------------------------- */
|
||||||
|
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:22px;}
|
||||||
|
.card{
|
||||||
|
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;
|
||||||
|
box-shadow:var(--sh-1);
|
||||||
|
transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
|
||||||
|
}
|
||||||
|
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--blue-100);}
|
||||||
|
.card .num{font-size:26px;font-weight:700;letter-spacing:.4px;color:var(--ink-900);font-variant-numeric:tabular-nums;}
|
||||||
|
.card .lbl{font-size:12px;color:var(--ink-500);margin-top:6px;}
|
||||||
|
.card.accent .num{color:var(--blue-600);}
|
||||||
|
.card.green .num{color:var(--ok-fg);}
|
||||||
|
.card.amber .num{color:var(--warn-fg);}
|
||||||
|
|
||||||
|
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-height:0;}
|
||||||
|
.panel{
|
||||||
|
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;
|
||||||
|
display:flex;flex-direction:column;min-height:0;box-shadow:var(--sh-1);
|
||||||
|
}
|
||||||
|
.panel-title{font-size:12.5px;color:var(--ink-500);margin-bottom:10px;letter-spacing:.4px;font-weight:600;}
|
||||||
|
.mini-list{overflow-y:auto;flex:1;}
|
||||||
|
.mini-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--border);font-size:12.5px;}
|
||||||
|
.mini-row:last-child{border-bottom:none;}
|
||||||
|
.mini-row .t{color:var(--ink-400);flex:0 0 118px;font-variant-numeric:tabular-nums;}
|
||||||
|
.mini-row .c{color:var(--ink-700);flex:1;min-width:0;word-break:break-all;}
|
||||||
|
|
||||||
|
/* -------------------------------- 表格 -------------------------------- */
|
||||||
|
.table-wrap{flex:1;overflow:auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);}
|
||||||
|
table.grid{width:100%;border-collapse:collapse;font-size:12.5px;}
|
||||||
|
table.grid th{
|
||||||
|
position:sticky;top:0;background:var(--ink-100);text-align:left;padding:11px 14px;
|
||||||
|
font-size:11.5px;color:var(--ink-500);font-weight:600;border-bottom:1px solid var(--border);
|
||||||
|
white-space:nowrap;z-index:1;
|
||||||
|
}
|
||||||
|
table.grid td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--ink-700);vertical-align:middle;}
|
||||||
|
table.grid tbody tr:last-child td{border-bottom:none;}
|
||||||
|
table.grid tr:hover td{background:var(--blue-50);}
|
||||||
|
table.grid td.actions{white-space:nowrap;}
|
||||||
|
/* 拓扑管理:批量选择列 */
|
||||||
|
table.grid th.col-chk,table.grid td.col-chk{width:40px;text-align:center;padding-left:14px;padding-right:4px;}
|
||||||
|
table.grid th.col-chk input[type=checkbox],table.grid td.col-chk input[type=checkbox]{width:15px;height:15px;margin:0;cursor:pointer;accent-color:var(--blue-600);vertical-align:middle;}
|
||||||
|
table.grid td.actions .btn{padding:4px 9px;font-size:11.5px;border-radius:var(--r-sm);margin:0 5px 0 0;}
|
||||||
|
|
||||||
|
.pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding-top:14px;font-size:12.5px;color:var(--ink-500);}
|
||||||
|
.pager .btn{padding:6px 12px;}
|
||||||
|
.empty-row{color:var(--ink-400);text-align:center;padding:28px 0;font-size:12.5px;}
|
||||||
|
|
||||||
|
/* -------------------------------- 动效 -------------------------------- */
|
||||||
|
@keyframes fade{from{opacity:0;}to{opacity:1;}}
|
||||||
|
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
|
||||||
|
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98);}to{opacity:1;transform:none;}}
|
||||||
|
|
||||||
|
/* 尊重「减少动态效果」无障碍设置 */
|
||||||
|
@media (prefers-reduced-motion:reduce){
|
||||||
|
*,*::before,*::after{
|
||||||
|
animation-duration:.001ms !important;
|
||||||
|
animation-iteration-count:1 !important;
|
||||||
|
transition-duration:.001ms !important;
|
||||||
|
scroll-behavior:auto !important;
|
||||||
|
}
|
||||||
|
.card:hover,.topo-item:hover{transform:none;}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------------------- 独立管理后台(整页版) -------------------------------- */
|
||||||
|
/* 主应用里的 .console 是浮层,这里改为整页铺满:无圆角 / 无描边 / 无阴影 */
|
||||||
|
body.admin-page{overflow:hidden;}
|
||||||
|
body.admin-page .console{
|
||||||
|
width:100%;max-width:none;height:100vh;
|
||||||
|
border:none;border-radius:0;box-shadow:none;animation:none;
|
||||||
|
}
|
||||||
|
body.admin-page .console-nav{flex:0 0 224px;}
|
||||||
|
body.admin-page .console.nav-collapsed .console-nav{flex-basis:70px;}
|
||||||
|
body.admin-page .console-main{padding:26px 32px;}
|
||||||
|
body.admin-page .view-head h2{font-size:20px;}
|
||||||
|
body.admin-page .view-tools select.search{cursor:pointer;min-width:172px;}
|
||||||
|
body.admin-page .cnav-close{display:flex;align-items:center;justify-content:center;gap:8px;}
|
||||||
|
body.admin-page .cnav-close .ci{font-size:14px;}
|
||||||
|
body.admin-page .empty-row{width:100%;}
|
||||||
Loading…
Reference in New Issue
Block a user