ae/Renderive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端工程化

Browse Source
This commit is contained in:
种太阳的热带美短
2026-08-13 01:52:42 +08:00
parent 75bb281d4e
commit 3e9b924776
79 changed files with 4760 additions and 3989 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp_gallery/index.html
+4 -93
View File
@@ -3,101 +3,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Renderive Core2 全控件性能画廊</title>
<meta name="theme-color" content="#07111f">
<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">内核观察器</button>
<button type="button" data-tab="performance">性能监测</button>
<button type="button" data-tab="performance_capture">Performance Capture</button>
<button type="button" data-tab="render_plan">Render DAG</button>
</nav>
<div class="menu-refresh-bar">
<button id="menu-reset" type="button" title="清空当前控件的性能监测窗口">&#8634; 重置监测</button>
<button id="menu-refresh" type="button" title="从后端读取当前页数据">&#8635; 刷新当前页</button>
</div>
<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>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>