Refactor LED control UI to Vue3

2026-07-17 02:10:08 +08:00
parent fe906e028b
commit ba9f0044f3
16 changed files with 1906 additions and 752 deletions
@@ -7,61 +7,78 @@
  <link rel="stylesheet" href="/static/output/styles.css" />
 </head>
 <body>
-  <main class="viewport">
-    <section id="wall" class="wall">
-      <canvas id="motionCanvas" class="motion-canvas"></canvas>
+  <main id="outputApp" class="viewport" v-cloak>
+    <section
+      ref="wall"
+      id="wall"
+      class="wall"
+      :class="[`theme-${activeView}`, `motion-${motionMode}`, `focus-${focusTarget}`, { pulse: pulseActive }]"
+    >
+      <canvas ref="motionCanvas" id="motionCanvas" class="motion-canvas"></canvas>
      <div class="grid-layer"></div>
+      <div class="scan-layer"></div>

      <header class="screen-header">
        <div>
-          <p class="eyebrow">Tile-aware timeline rendering</p>
-          <h1 id="sceneTitle">LED 大屏投放平台</h1>
+          <p class="eyebrow">Synchronized LED Wall Platform</p>
+          <h1>{{ sceneTitle }}</h1>
        </div>
        <div class="header-metrics">
-          <strong id="clockText">--:--:--</strong>
-          <span id="versionText">v0</span>
+          <strong>{{ clockText }}</strong>
+          <span>v{{ state?.version || 0 }}</span>
+          <em>{{ tile?.id || "--" }} / {{ isPreview ? "PREVIEW" : "OUTPUT" }}</em>
        </div>
      </header>

-      <section class="scene active" data-view="overview">
+      <section
+        v-for="scene in sceneDefinitions"
+        :key="scene.id"
+        class="scene"
+        :class="{ active: activeView === scene.id }"
+        :data-view="scene.id"
+      >
        <div class="hero-copy">
-          <h2>双 GPU 本地渲染，统一时间轴同步</h2>
-          <p>左右输出端各自渲染半屏，但场景、动画、地图相机、视频时间由同一个服务端时间轴驱动。</p>
+          <span>{{ scene.kicker }}</span>
+          <h2>{{ scene.headline }}</h2>
+          <p>{{ scene.copy }}</p>
        </div>
-        <div id="overviewCards" class="card-grid"></div>
-        <div id="timelineBars" class="timeline-bars"></div>
-      </section>

-      <section class="scene" data-view="energy">
-        <div class="hero-copy">
-          <h2>能源驾驶舱</h2>
-          <p>适合 WebGL、Three.js、地图和视频组件。生产接入时使用同一 camera state 和 serverTime 渲染。</p>
+        <div class="metric-grid">
+          <article v-for="metric in scene.metrics" :key="metric.label" class="metric-card">
+            <span>{{ metric.label }}</span>
+            <strong>{{ metric.value }}</strong>
+            <small>{{ metric.trend }}</small>
+          </article>
        </div>
-        <div class="flow-map">
-          <div class="flow-line line-a"></div>
-          <div class="flow-line line-b"></div>
-          <div class="flow-node node-a">园区供电</div>
-          <div class="flow-node node-b">储能系统</div>
-          <div class="flow-node node-c">业务负载</div>
-        </div>
-        <div class="side-stats">
-          <article><span>实时功率</span><strong id="powerValue">8.42 MW</strong></article>
-          <article><span>负载趋势</span><strong id="trendValue">+3.8%</strong></article>
-          <article><span>调度策略</span><strong id="modeValue">均衡</strong></article>
-        </div>
-      </section>

-      <section class="scene" data-view="security">
-        <div class="hero-copy">
-          <h2>安防态势</h2>
-          <p>视频墙、地图联动和告警卡片通过结构化动作同步触发，左右节点只按计划时间提交状态。</p>
+        <div class="visual-stage">
+          <div class="route-field">
+            <i v-for="line in scene.lines" :key="line" :class="['route-line', line]"></i>
+          </div>
+          <div
+            v-for="node in scene.nodes"
+            :key="node.id"
+            class="stage-node"
+            :class="node.tone"
+            :style="{ left: node.x + 'px', top: node.y + 'px' }"
+          >
+            <span>{{ node.label }}</span>
+            <strong>{{ node.value }}</strong>
+          </div>
        </div>
-        <div id="cameraGrid" class="camera-grid"></div>
-        <div id="alertRail" class="alert-rail"></div>
+
+        <aside class="event-rail">
+          <article v-for="event in scene.events" :key="event.title" class="event-card">
+            <span>{{ event.time }}</span>
+            <strong>{{ event.title }}</strong>
+            <small>{{ event.detail }}</small>
+          </article>
+        </aside>
      </section>
    </section>
-    <aside id="hud" class="hud"></aside>
+    <aside ref="hud" id="hud" class="hud">{{ hudText }}</aside>
  </main>
+  <script src="/static/vendor/vue.global.prod.js"></script>
  <script src="/static/output/main.js"></script>
 </body>
 </html>