Add SystemTest Agent and Controller
This commit is contained in:
Codex committed
commit
53f523f187
31 files changed
+9150
No files matched your search
@@ -0,0 +1,44 @@
|
||||
# SystemTest-Controller
|
||||
|
||||
P0-01 主控端最小可用实现，使用 Python 标准库提供 HTTP API、SQLite 状态库和静态面板。
|
||||
|
||||
## 一键启动
|
||||
|
||||
PowerShell:
|
||||
|
||||
```powershell
|
||||
.\start_controller.ps1
|
||||
```
|
||||
|
||||
CMD:
|
||||
|
||||
```bat
|
||||
start_controller.bat
|
||||
```
|
||||
|
||||
默认地址与 `Agent-S-Controller/start_agent_controller.bat` 保持一致：
|
||||
|
||||
- Health: `http://127.0.0.1:8001/health`
|
||||
- Panel: `http://127.0.0.1:8001/`
|
||||
|
||||
启动成功后会自动打开 Web 面板；如需关闭自动弹出，设置 `CONTROLLER_NO_BROWSER=1`。
|
||||
|
||||
## 配置
|
||||
|
||||
复制 `.env.example` 为 `.env` 后可调整：
|
||||
|
||||
- `CONTROLLER_HOST`: 默认 `0.0.0.0`
|
||||
- `CONTROLLER_PORT`: 默认 `8001`
|
||||
- `CONTROLLER_PUBLIC_BASE_URL`: 被控端访问主控的 URL
|
||||
- `CONTROLLER_DEPLOYMENT_MODE`: 主控部署形态标识，默认 `script`
|
||||
- `CONTROLLER_DATABASE`: SQLite 数据库路径
|
||||
- `AGENT_STALE_AFTER_SECONDS`: 被控端超过该秒数无心跳后显示为 `offline`，默认 `5`
|
||||
- `CONTROLLER_NO_BROWSER`: 设为 `1` 时不自动打开浏览器
|
||||
|
||||
## 已完成的 P0-01 验收点
|
||||
|
||||
- 启动时读取 `.env`
|
||||
- 启动前检查数据库、端口、静态面板文件
|
||||
- `/health` 返回健康状态和部署形态
|
||||
- `/` 可访问静态面板
|
||||
- 提供被控端注册、心跳、领任务 API
|
||||
@@ -0,0 +1,3 @@
|
||||
"""System test controller package."""
|
||||
|
||||
__version__ = "0.1.0"
|
||||
@@ -0,0 +1,5 @@
|
||||
from .server import main
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
@@ -0,0 +1,89 @@
|
||||
from __future__ import annotations
|
||||
|
||||
import os
|
||||
from dataclasses import dataclass
|
||||
from pathlib import Path
|
||||
|
||||
|
||||
ROOT_DIR = Path(__file__).resolve().parents[1]
|
||||
|
||||
|
||||
def _load_env_file(path: Path) -> dict[str, str]:
|
||||
values: dict[str, str] = {}
|
||||
if not path.exists():
|
||||
return values
|
||||
|
||||
for raw_line in path.read_text(encoding="utf-8").splitlines():
|
||||
line = raw_line.strip()
|
||||
if not line or line.startswith("#") or "=" not in line:
|
||||
continue
|
||||
key, value = line.split("=", 1)
|
||||
key = key.strip()
|
||||
value = value.strip().strip('"').strip("'")
|
||||
if key:
|
||||
values[key] = value
|
||||
return values
|
||||
|
||||
|
||||
def _get_env(name: str, default: str, file_values: dict[str, str]) -> str:
|
||||
return os.environ.get(name, file_values.get(name, default))
|
||||
|
||||
|
||||
def _as_int(value: str, default: int) -> int:
|
||||
try:
|
||||
return int(value)
|
||||
except (TypeError, ValueError):
|
||||
return default
|
||||
|
||||
|
||||
def _resolve_path(value: str) -> Path:
|
||||
path = Path(value)
|
||||
if path.is_absolute():
|
||||
return path
|
||||
return ROOT_DIR / path
|
||||
|
||||
|
||||
@dataclass(frozen=True)
|
||||
class ControllerConfig:
|
||||
root_dir: Path
|
||||
host: str
|
||||
port: int
|
||||
database_path: Path
|
||||
static_dir: Path
|
||||
controller_name: str
|
||||
deployment_mode: str
|
||||
public_base_url: str
|
||||
agent_stale_after_seconds: int
|
||||
|
||||
@classmethod
|
||||
def from_env(cls) -> "ControllerConfig":
|
||||
file_values = _load_env_file(ROOT_DIR / ".env")
|
||||
port = _as_int(_get_env("CONTROLLER_PORT", "8001", file_values), 8001)
|
||||
host = _get_env("CONTROLLER_HOST", "0.0.0.0", file_values)
|
||||
public_base_url = _get_env(
|
||||
"CONTROLLER_PUBLIC_BASE_URL",
|
||||
f"http://127.0.0.1:{port}",
|
||||
file_values,
|
||||
).rstrip("/")
|
||||
stale_after = _as_int(
|
||||
_get_env("AGENT_STALE_AFTER_SECONDS", "5", file_values),
|
||||
5,
|
||||
)
|
||||
|
||||
return cls(
|
||||
root_dir=ROOT_DIR,
|
||||
host=host,
|
||||
port=port,
|
||||
database_path=_resolve_path(
|
||||
_get_env("CONTROLLER_DATABASE", "data/controller.db", file_values)
|
||||
),
|
||||
static_dir=_resolve_path(_get_env("CONTROLLER_STATIC_DIR", "web", file_values)),
|
||||
controller_name=_get_env(
|
||||
"CONTROLLER_NAME",
|
||||
"System Test Controller",
|
||||
file_values,
|
||||
),
|
||||
deployment_mode=_get_env("CONTROLLER_DEPLOYMENT_MODE", "script", file_values),
|
||||
public_base_url=public_base_url,
|
||||
agent_stale_after_seconds=stale_after,
|
||||
)
|
||||
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,21 @@
|
||||
@echo off
|
||||
setlocal
|
||||
cd /d "%~dp0"
|
||||
if defined PYTHON_EXE (
|
||||
if exist "%PYTHON_EXE%" (
|
||||
"%PYTHON_EXE%" -m app
|
||||
goto :end
|
||||
)
|
||||
)
|
||||
|
||||
set "CODEX_PYTHON=%USERPROFILE%\.cache\codex-runtimes\codex-primary-runtime\dependencies\python\python.exe"
|
||||
if exist "%CODEX_PYTHON%" (
|
||||
"%CODEX_PYTHON%" -m app
|
||||
goto :end
|
||||
)
|
||||
|
||||
python -m app
|
||||
if errorlevel 1 py -3 -m app
|
||||
|
||||
:end
|
||||
endlocal
|
||||
@@ -0,0 +1,53 @@
|
||||
param(
|
||||
[string]$HostName,
|
||||
[int]$Port = 0
|
||||
)
|
||||
|
||||
$ErrorActionPreference = "Stop"
|
||||
Set-Location -LiteralPath $PSScriptRoot
|
||||
|
||||
if ($HostName) {
|
||||
$env:CONTROLLER_HOST = $HostName
|
||||
}
|
||||
if ($Port -gt 0) {
|
||||
$env:CONTROLLER_PORT = [string]$Port
|
||||
if (-not $env:CONTROLLER_PUBLIC_BASE_URL) {
|
||||
$env:CONTROLLER_PUBLIC_BASE_URL = "http://127.0.0.1:$Port"
|
||||
}
|
||||
}
|
||||
|
||||
$pythonExe = $null
|
||||
$pythonArgs = @()
|
||||
|
||||
if ($env:PYTHON_EXE -and (Test-Path -LiteralPath $env:PYTHON_EXE)) {
|
||||
$pythonExe = $env:PYTHON_EXE
|
||||
}
|
||||
|
||||
if (-not $pythonExe) {
|
||||
$bundledPython = Join-Path $env:USERPROFILE '.cache\codex-runtimes\codex-primary-runtime\dependencies\python\python.exe'
|
||||
if (Test-Path -LiteralPath $bundledPython) {
|
||||
$pythonExe = $bundledPython
|
||||
}
|
||||
}
|
||||
|
||||
if (-not $pythonExe) {
|
||||
$pythonCommand = Get-Command python -ErrorAction SilentlyContinue
|
||||
if ($pythonCommand) {
|
||||
$pythonExe = $pythonCommand.Source
|
||||
}
|
||||
}
|
||||
|
||||
if (-not $pythonExe) {
|
||||
$pythonCommand = Get-Command py -ErrorAction SilentlyContinue
|
||||
if ($pythonCommand) {
|
||||
$pythonExe = $pythonCommand.Source
|
||||
$pythonArgs = @('-3')
|
||||
}
|
||||
}
|
||||
|
||||
if (-not $pythonExe) {
|
||||
throw "Python 3 was not found. Install Python 3, set PYTHON_EXE, or add Python to PATH."
|
||||
}
|
||||
|
||||
& $pythonExe @pythonArgs -m app
|
||||
exit $LASTEXITCODE
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,79 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>系统测试 Agent 主控台</title>
|
||||
<link rel="stylesheet" href="/static/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<svg class="icon-sprite" aria-hidden="true">
|
||||
<symbol id="i-activity" viewBox="0 0 24 24"><path d="M22 12h-4l-3 8-6-16-3 8H2" /></symbol>
|
||||
<symbol id="i-bar" viewBox="0 0 24 24"><path d="M3 3v18h18" /><path d="M7 16V9" /><path d="M12 16V5" /><path d="M17 16v-3" /></symbol>
|
||||
<symbol id="i-check" viewBox="0 0 24 24"><path d="m20 6-11 11-5-5" /></symbol>
|
||||
<symbol id="i-download" viewBox="0 0 24 24"><path d="M12 3v12" /><path d="m7 10 5 5 5-5" /><path d="M5 21h14" /></symbol>
|
||||
<symbol id="i-file" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /></symbol>
|
||||
<symbol id="i-monitor" viewBox="0 0 24 24"><path d="M3 5h18v12H3z" /><path d="M8 21h8" /><path d="M12 17v4" /></symbol>
|
||||
<symbol id="i-play" viewBox="0 0 24 24"><path d="m8 5 11 7-11 7z" /></symbol>
|
||||
<symbol id="i-refresh" viewBox="0 0 24 24"><path d="M21 12a9 9 0 0 1-15.5 6.2" /><path d="M3 12A9 9 0 0 1 18.5 5.8" /><path d="M3 18v-5h5" /><path d="M21 6v5h-5" /></symbol>
|
||||
<symbol id="i-save" viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" /><path d="M17 21v-8H7v8" /><path d="M7 3v5h8" /></symbol>
|
||||
<symbol id="i-settings" viewBox="0 0 24 24"><path d="M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5z" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 0 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1A2 2 0 0 1 4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.6-1H3a2 2 0 0 1 0-4h.1a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1A2 2 0 0 1 7 4.2l.1.1a1.7 1.7 0 0 0 1.9.3 1.7 1.7 0 0 0 1-1.6V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1A2 2 0 0 1 19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.1a2 2 0 0 1 0 4H21a1.7 1.7 0 0 0-1.6 1z" /></symbol>
|
||||
<symbol id="i-square" viewBox="0 0 24 24"><path d="M6 6h12v12H6z" /></symbol>
|
||||
<symbol id="i-upload" viewBox="0 0 24 24"><path d="M12 21V9" /><path d="m7 14 5-5 5 5" /><path d="M5 3h14" /></symbol>
|
||||
<symbol id="i-users" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.8" /><path d="M16 3.1a4 4 0 0 1 0 7.8" /></symbol>
|
||||
<symbol id="i-wrench" viewBox="0 0 24 24"><path d="M14.7 6.3a5 5 0 0 0-6.4 6.4L3 18l3 3 5.3-5.3a5 5 0 0 0 6.4-6.4L14 13l-3-3z" /></symbol>
|
||||
<symbol id="i-x" viewBox="0 0 24 24"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></symbol>
|
||||
</svg>
|
||||
|
||||
<div class="app-shell">
|
||||
<aside class="sidebar">
|
||||
<div class="brand">
|
||||
<span class="brand-mark">ST</span>
|
||||
<div>
|
||||
<strong>系统测试 Agent</strong>
|
||||
<span>Controller</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="nav" aria-label="主控导航">
|
||||
<button class="nav-item is-active" type="button" data-section="overview"><svg><use href="#i-activity"></use></svg><span>总览</span></button>
|
||||
<button class="nav-item" type="button" data-section="plans"><svg><use href="#i-file"></use></svg><span>系统测试</span></button>
|
||||
<button class="nav-item" type="button" data-section="console"><svg><use href="#i-play"></use></svg><span>运行控制台</span></button>
|
||||
<button class="nav-item" type="button" data-section="devices"><svg><use href="#i-monitor"></use></svg><span>设备监控</span></button>
|
||||
<button class="nav-item" type="button" data-section="models"><svg><use href="#i-settings"></use></svg><span>模型配置</span></button>
|
||||
<button class="nav-item" type="button" data-section="tools"><svg><use href="#i-wrench"></use></svg><span>Tool 配置</span></button>
|
||||
<button class="nav-item" type="button" data-section="metrics"><svg><use href="#i-bar"></use></svg><span>指标看板</span></button>
|
||||
<button class="nav-item" type="button" data-section="reports"><svg><use href="#i-download"></use></svg><span>报告中心</span></button>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div class="main-shell">
|
||||
<header class="topbar">
|
||||
<div>
|
||||
<h1 id="sectionTitle">总览</h1>
|
||||
<p id="serviceMeta">Loading...</p>
|
||||
</div>
|
||||
<div class="top-actions">
|
||||
<span class="status-pill" id="healthPill">checking</span>
|
||||
<button class="icon-button" id="refreshButton" type="button" title="刷新">
|
||||
<svg><use href="#i-refresh"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="workspace">
|
||||
<section class="view is-active" id="view-overview"></section>
|
||||
<section class="view" id="view-plans"></section>
|
||||
<section class="view" id="view-console"></section>
|
||||
<section class="view" id="view-devices"></section>
|
||||
<section class="view" id="view-models"></section>
|
||||
<section class="view" id="view-tools"></section>
|
||||
<section class="view" id="view-metrics"></section>
|
||||
<section class="view" id="view-reports"></section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast" hidden></div>
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,997 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
|
||||
background: #f4f6f8;
|
||||
color: #172033;
|
||||
--surface: #ffffff;
|
||||
--surface-alt: #f8fafc;
|
||||
--line: #d9e2ec;
|
||||
--line-soft: #e8eef5;
|
||||
--text: #172033;
|
||||
--muted: #607086;
|
||||
--accent: #2563eb;
|
||||
--accent-dark: #1d4ed8;
|
||||
--green: #12805c;
|
||||
--green-bg: #e9f7f1;
|
||||
--amber: #a15c00;
|
||||
--amber-bg: #fff4df;
|
||||
--red: #b42318;
|
||||
--red-bg: #fff1f0;
|
||||
--violet: #6d4aff;
|
||||
--shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
background: var(--surface-alt);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-sprite {
|
||||
display: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 232px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: #111827;
|
||||
color: #f9fafb;
|
||||
padding: 18px 14px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid #4b5563;
|
||||
border-radius: 8px;
|
||||
background: #1f2937;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brand strong,
|
||||
.brand span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.brand span {
|
||||
color: #aab4c3;
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
height: 38px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
color: #cbd5e1;
|
||||
background: transparent;
|
||||
padding: 0 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: #1f2937;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-item.is-active {
|
||||
background: #e5edff;
|
||||
color: #17356f;
|
||||
}
|
||||
|
||||
.main-shell {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
min-height: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 16px 24px;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--line);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
line-height: 1.2;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 17px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
#serviceMeta {
|
||||
margin-top: 5px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.top-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
padding: 18px 20px 28px;
|
||||
}
|
||||
|
||||
.view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.view-grid {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.view-grid > *,
|
||||
.kpi,
|
||||
.surface {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.two-col {
|
||||
grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.3fr);
|
||||
}
|
||||
|
||||
.three-col {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.surface {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.surface-header {
|
||||
min-height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.surface-body {
|
||||
padding: 14px 16px 16px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.button,
|
||||
.icon-button {
|
||||
height: 34px;
|
||||
border: 1px solid #b8c5d6;
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
color: #25344a;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.button.primary {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.button.primary:hover {
|
||||
background: var(--accent-dark);
|
||||
}
|
||||
|
||||
.button.danger {
|
||||
border-color: #f1b6b0;
|
||||
color: var(--red);
|
||||
background: #fffafa;
|
||||
}
|
||||
|
||||
.button:disabled,
|
||||
.icon-button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
width: 34px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.status-pill,
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 26px;
|
||||
padding: 3px 9px;
|
||||
border: 1px solid #c8d2df;
|
||||
border-radius: 999px;
|
||||
color: #42526a;
|
||||
background: #f8fafc;
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-pill.ok,
|
||||
.badge.ok {
|
||||
border-color: #9bd7bd;
|
||||
background: var(--green-bg);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.status-pill.fail,
|
||||
.badge.fail {
|
||||
border-color: #f1b6b0;
|
||||
background: var(--red-bg);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.badge.warn {
|
||||
border-color: #f2cf92;
|
||||
background: var(--amber-bg);
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
.badge.info {
|
||||
border-color: #bfd2ff;
|
||||
background: #eef4ff;
|
||||
color: #174a9c;
|
||||
}
|
||||
|
||||
.kpi-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.kpi {
|
||||
min-height: 94px;
|
||||
padding: 14px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.kpi label {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.kpi strong {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: var(--text);
|
||||
font-size: 26px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.kpi span {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.field-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.field-grid.full,
|
||||
.field.full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.field label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: #40516a;
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.checkbox-field {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.checkbox-field label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
color: #25344a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.checkbox-field input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #bfccdc;
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 4px 0 0;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
height: 34px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 170px;
|
||||
padding: 10px;
|
||||
resize: vertical;
|
||||
line-height: 1.45;
|
||||
font-family: Consolas, "Cascadia Mono", monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 820px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.compact-table table {
|
||||
min-width: 560px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
th {
|
||||
color: #5b6a7f;
|
||||
background: #f8fafc;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
td.actions {
|
||||
min-width: 210px;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: Consolas, "Cascadia Mono", monospace;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
padding: 26px 10px;
|
||||
}
|
||||
|
||||
.empty-cell {
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
padding: 22px 10px;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
margin-top: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.device-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.device-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.device-card header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.device-card strong {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.kv {
|
||||
display: grid;
|
||||
grid-template-columns: 112px minmax(0, 1fr);
|
||||
gap: 6px 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.kv dt {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.kv dd {
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #e6edf5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.metric-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.metric-row {
|
||||
display: grid;
|
||||
grid-template-columns: 180px minmax(0, 1fr) 72px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
right: 18px;
|
||||
bottom: 18px;
|
||||
max-width: min(420px, calc(100vw - 36px));
|
||||
background: #111827;
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.split-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mini-select {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.button.small {
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.site-scan-panel {
|
||||
padding: 12px 0 4px;
|
||||
border-top: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.site-scan-fields {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.site-scan-panel .field {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.site-scan-action {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.site-scan-empty {
|
||||
min-height: 36px;
|
||||
margin-top: 10px;
|
||||
padding: 9px 10px;
|
||||
border: 1px dashed #c9d7ea;
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
background: #ffffff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.site-scan-empty.fail {
|
||||
border-color: #f2bbb5;
|
||||
color: var(--red);
|
||||
background: var(--red-bg);
|
||||
}
|
||||
|
||||
.site-scan-summary {
|
||||
margin-top: 10px;
|
||||
color: #40516a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.site-result-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.site-result-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--line-soft);
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.site-result-main {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.site-result-main strong,
|
||||
.site-url,
|
||||
.site-meta {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.site-url {
|
||||
color: #174a9c;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.site-meta {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.discovery-fields {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.7fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.discovery-empty {
|
||||
min-height: 42px;
|
||||
margin-top: 12px;
|
||||
padding: 10px 12px;
|
||||
border: 1px dashed #c9d7ea;
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
background: #ffffff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.discovery-empty.fail {
|
||||
border-color: #f2bbb5;
|
||||
color: var(--red);
|
||||
background: var(--red-bg);
|
||||
}
|
||||
|
||||
.discovery-summary {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
color: #40516a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.discovery-tree {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.discovery-row {
|
||||
display: grid;
|
||||
grid-template-columns: 20px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
align-items: start;
|
||||
padding: 10px;
|
||||
padding-left: calc(10px + (var(--depth, 0) * 22px));
|
||||
border: 1px solid var(--line-soft);
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.discovery-row input {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.discovery-main {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.discovery-main strong,
|
||||
.discovery-main span {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.discovery-main > span:not(.site-url) {
|
||||
color: #40516a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.discovery-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.discovery-note {
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
.system-test-status {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 34px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--line-soft);
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
color: #40516a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.task-meta {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.task-detail-panel {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.task-detail {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.task-detail-title {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.task-detail h3 {
|
||||
margin: 0 0 8px;
|
||||
color: #1f2d42;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.task-detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.detail-list {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
color: #40516a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.detail-list li {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
padding: 7px 8px;
|
||||
border: 1px solid var(--line-soft);
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.detail-list.logs li {
|
||||
font-family: Consolas, "Cascadia Mono", monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.test-result {
|
||||
display: grid;
|
||||
grid-template-columns: 38px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.test-result.ok {
|
||||
border-color: #a9dec7;
|
||||
background: var(--green-bg);
|
||||
}
|
||||
|
||||
.test-result.fail {
|
||||
border-color: #f2bbb5;
|
||||
background: var(--red-bg);
|
||||
}
|
||||
|
||||
.test-result.neutral {
|
||||
border-color: #c9d7ea;
|
||||
background: #f5f8fd;
|
||||
}
|
||||
|
||||
.test-result-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
border: 1px solid currentColor;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.test-result.ok .test-result-icon {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.test-result.fail .test-result-icon {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.test-result p {
|
||||
margin-top: 4px;
|
||||
color: #40516a;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.compact-kv {
|
||||
margin: 12px 0;
|
||||
grid-template-columns: 72px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.subheading {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.model-chip-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.model-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
min-height: 26px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #bdd0ea;
|
||||
background: #ffffff;
|
||||
color: #243650;
|
||||
font-size: 12px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.hint-list {
|
||||
margin: 10px 0 0;
|
||||
padding-left: 18px;
|
||||
color: #40516a;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.json-preview {
|
||||
max-height: 280px;
|
||||
overflow: auto;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
background: #0f172a;
|
||||
color: #d7e2f2;
|
||||
font-family: Consolas, "Cascadia Mono", monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
@media (max-width: 1060px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: static;
|
||||
height: auto;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.two-col,
|
||||
.three-col,
|
||||
.kpi-grid,
|
||||
.field-grid,
|
||||
.discovery-fields,
|
||||
.site-scan-fields,
|
||||
.site-result-row,
|
||||
.task-detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.site-scan-action .button,
|
||||
.site-result-row .button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.topbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.surface-header,
|
||||
.toolbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.metric-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user