98 lines
4.5 KiB
HTML
98 lines
4.5 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Renderive Core2 全控件性能画廊</title>
|
||
<link rel="icon" href="data:,">
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<span class="brand-mark" aria-hidden="true">R2</span>
|
||
<div><p class="eyebrow">CORE2 · KERNEL · WEBSOCKET</p><h1>全控件 API 与帧策略性能画廊</h1></div>
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<span id="connection-status" class="connection-status" data-state="connecting"><i></i><span>读取后端目录</span></span>
|
||
<button id="toggle-streams" class="quiet-button" type="button">暂停自动像素流</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<div>
|
||
<p id="hero-eyebrow" class="eyebrow"></p>
|
||
<h2 id="hero-title"></h2>
|
||
<p id="mode-description">所有属性、动作、观察者和性能数据均由后端通过 WebSocket 返回。</p>
|
||
</div>
|
||
<dl class="metrics">
|
||
<div><dt id="page-count">—</dt><dd>帧策略页</dd></div>
|
||
<div><dt id="case-count">—</dt><dd>每页控件</dd></div>
|
||
<div><dt id="canvas-count">—</dt><dd>独立场景</dd></div>
|
||
<div><dt id="api-count">—</dt><dd>手测入口</dd></div>
|
||
</dl>
|
||
</section>
|
||
|
||
<nav id="mode-tabs" class="mode-tabs" aria-label="Kernel 帧控制策略"></nav>
|
||
<nav id="category-filter" class="category-filter" aria-label="控件分类"></nav>
|
||
|
||
<main id="pages" class="pages" aria-live="polite">
|
||
<div class="loading-card"><span class="loader"></span><strong>等待后端返回控件与帧策略目录</strong></div>
|
||
</main>
|
||
|
||
<aside id="context-menu" class="context-menu" hidden aria-label="后端控件测试菜单">
|
||
<header class="menu-header">
|
||
<div><p id="menu-component" class="eyebrow"></p><h2 id="menu-title"></h2><p id="menu-description"></p></div>
|
||
<button id="menu-close" class="icon-button" type="button" aria-label="关闭">×</button>
|
||
</header>
|
||
<nav class="menu-tabs" aria-label="测试菜单页面">
|
||
<button type="button" data-tab="controls" class="active">控件属性</button>
|
||
<button type="button" data-tab="actions">专属 API</button>
|
||
<button type="button" data-tab="observer">Kernel 观察者</button>
|
||
<button type="button" data-tab="performance">性能</button>
|
||
</nav>
|
||
<div id="menu-body" class="menu-body"></div>
|
||
<footer class="menu-footer"><span id="menu-status">字段、验证与 API 映射来自后端 JSON</span><code>WS /renderive/gallery</code></footer>
|
||
</aside>
|
||
|
||
<div id="toast" class="toast" hidden></div>
|
||
|
||
<template id="page-template">
|
||
<section class="mode-page" hidden>
|
||
<header class="page-header"><div><p class="page-strategy"></p><h2 class="page-title"></h2></div><p class="page-description"></p></header>
|
||
<div class="gallery"></div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="card-template">
|
||
<article class="plot-card">
|
||
<header class="card-header">
|
||
<div><span class="card-category"></span><h3 class="card-title"></h3></div>
|
||
<div class="card-health">
|
||
<span class="motion-status" data-state="waiting"><i></i><span>等待动态帧</span></span>
|
||
<span class="card-socket" data-state="connecting"><i></i><span>连接中</span></span>
|
||
</div>
|
||
</header>
|
||
<div class="canvas-shell" tabindex="0">
|
||
<canvas aria-label="Core2 后端像素画布"></canvas>
|
||
<div class="canvas-hint">右键：本控件全部 API</div>
|
||
<div class="canvas-loading"><span class="loader"></span><small>创建 Kernel Scene</small></div>
|
||
</div>
|
||
<dl class="performance-strip"></dl>
|
||
<div class="limit-flags"></div>
|
||
<section class="kernel-observer-panel"></section>
|
||
<div class="card-meta">
|
||
<p class="card-description"></p>
|
||
<dl><div><dt class="card-controls">—</dt><dd>属性</dd></div><div><dt class="card-actions">—</dt><dd>动作</dd></div><div><dt class="card-frames">0</dt><dd>像素帧</dd></div></dl>
|
||
</div>
|
||
<footer class="card-footer">
|
||
<code class="card-component"></code>
|
||
<div><button type="button" class="frame-button">刷新一帧</button><button type="button" class="open-menu">测试菜单</button></div>
|
||
</footer>
|
||
</article>
|
||
</template>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|