dsh-biocore 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-biocore",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "BioCore DSH UI: per-session state tab, standalone instrument panel, /api/biocore/state, session/event one_turn updates, /bio sync.",
   "main": "lib/index.js",

package/ui/panel.css

@@ -1,4 +1,4 @@
-/* BioCore instrument panel — FlClash mobile spec.
+/* BioCore instrument panel — FlClash mobile spec. | layout v22
    1) tokens  2) base  3) topbar  4) cards  5) figures  6) lists  7) forms
    8) switches  9) nav  10) edit mode  11) desktop.
    Rule: one component rule per selector, px values from docs/DSH-PANEL-FLCLASH-SPEC.md. */
@@ -202,9 +202,9 @@ body {
 .delta.up { color: var(--ok); }
 .delta.down { color: var(--danger); }
 .sub-value { display: flex; align-items: baseline; gap: 6px; letter-spacing: -0.02em; }
-.sub-value strong { font-size: 28px; line-height: 34px; font-weight: 700; }
-.channels-card .sub-value strong { font-size: 28px; line-height: 34px; }
-.mood-card .sub-value strong { font-size: 40px; line-height: 44px; }
+.sub-value strong { font-size: 20px; line-height: 26px; font-weight: 700; }
+.channels-card .sub-value strong { font-size: 20px; line-height: 26px; }
+.mood-card .sub-value strong { font-size: 30px; line-height: 34px; }
 .unit { display: none; }
 .sub-status { margin-left: auto; color: var(--text-2); font-size: 13px; line-height: 18px; letter-spacing: 0; }
 .sub-note { color: var(--text-3); font-size: 12px; line-height: 16px; min-height: 16px; }
@@ -246,7 +246,7 @@ canvas#moodChart { display: block; width: 100%; height: 150px; }
 .memory-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
 .memory-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px; background: var(--block); border-radius: var(--radius-block); }
 .memory-stat span { color: var(--text-2); font-size: 12px; line-height: 16px; }
-.memory-stat strong { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; }
+.memory-stat strong { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
 .memory-stat em { color: var(--text-2); font-size: 12px; font-style: normal; }
 .memory-summary-card .capacity { margin-top: 14px; }
 .capacity { margin-top: 12px; }
@@ -498,3 +498,44 @@ canvas#moodChart { display: block; width: 100%; height: 150px; }
 @media (max-width: 620px) {
   .expression-fields { grid-template-columns: 1fr; }
 }
+
+/* ---------- 13. layout guards (防止旧版/串版样式压扁版面) ---------- */
+.masthead { height: auto; max-height: none; overflow: visible; }
+.masthead .orb-wrap { min-width: 88px; min-height: 88px; overflow: visible; }
+.masthead .orb { flex: 0 0 auto; }
+.identity { align-self: center; width: 100%; }
+.channels-wrap { position: relative; }
+.channels-wrap > .channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+
+/* ---------- 14. channels: four independent cards (2×2) ---------- */
+.channels-wrap { position: relative; }
+.channel-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 2px 4px 10px; }
+.channel-title-row h2 { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; }
+.channel-aside { color: var(--text-3); font-size: 13px; line-height: 18px; }
+.channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+.channel-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  padding: 14px;
+  background: var(--card);
+  border-radius: 20px;
+  box-shadow: var(--shadow-e1);
+}
+.channel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
+.channel-label { color: var(--text-2); font-size: 12px; line-height: 16px; }
+.channel-card .sub-trend { color: var(--text-3); font-size: 12px; line-height: 16px; }
+.channel-value { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.channel-value strong { font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
+.channel-card .sub-status { margin-left: auto; color: var(--text-2); font-size: 13px; line-height: 18px; }
+.channel-card .sub-note { margin: 0; color: var(--text-3); font-size: 11px; line-height: 15px; min-height: 15px; }
+.channel-card .bar { margin-top: 2px; }
+.channel-card .bar-legend { margin-top: 4px; gap: 10px; font-size: 11px; line-height: 15px; }
+.channel-card .bar-legend .legend-dot { width: 5px; height: 5px; border-radius: 2.5px; margin-right: 3px; }
+@media (min-width: 360px) {
+  .channels-wrap .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 359px) {
+  .channels-wrap .channel-grid { grid-template-columns: 1fr; }
+}

package/ui/panel.html

@@ -1,10 +1,11 @@
 <!doctype html>
+<!-- BioCore panel layout v22 (FlClash mobile): masthead/orb centered, channels 2x2, pill tabbar -->
 <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="panel.css?v=19">
+<link rel="stylesheet" href="panel.css?v=22">
 </head>
 <body>
 <main class="panel" id="panel">
@@ -62,39 +63,39 @@
       </div>
     </section>
 
-    <section class="card channels-card" data-card-id="channels" data-card-label="四通道">
-      <div class="card-head">
-        <span class="card-icon"><svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12.5l3-3 2.5 2.5L15 5"/><path d="M12 5h3v3"/></svg></span>
-        <h2>四通道</h2>
-        <span class="card-aside">2 × 2</span>
-      </div>
-      <div class="sub-grid two">
-        <div class="subblock">
-          <div class="sub-label"><span>绷紧</span><span class="sub-trend"><b id="arrow-tension">→</b><span class="delta" id="delta-tension">—</span></span></div>
-          <div class="sub-value"><strong id="num-tension">–</strong><span class="sub-status" id="status-tension">—</span></div>
-          <div class="sub-note" id="note-tension">—</div>
+    <div class="channels-wrap" data-card-id="channels" data-card-label="四通道">
+      <div class="channel-title-row"><h2>四通道</h2><span class="channel-aside">2 × 2</span></div>
+      <div class="channel-grid">
+        <section class="card channel-card">
+          <div class="channel-head"><span class="channel-label">绷紧</span><span class="sub-trend"><b id="arrow-tension">→</b><span class="delta" id="delta-tension">—</span></span></div>
+          <div class="channel-value"><strong id="num-tension">–</strong><span class="sub-status" id="status-tension">—</span></div>
+          <p class="sub-note" id="note-tension">—</p>
           <div class="bar stat-bar"><i id="bar-tension"></i><b class="bar-over" id="over-tension"></b></div>
-        </div>
-        <div class="subblock">
-          <div class="sub-label"><span>暖</span><span class="sub-trend"><b id="arrow-warmth">→</b><span class="delta" id="delta-warmth">—</span></span></div>
-          <div class="sub-value"><strong id="num-warmth">–</strong><span class="sub-status" id="status-warmth">—</span></div>
-          <div class="sub-note" id="note-warmth">—</div>
+          <div class="bar-legend"><span><i class="legend-dot"></i>当前</span><span><i class="legend-dot warn"></i>超阈值</span></div>
+        </section>
+        <section class="card channel-card">
+          <div class="channel-head"><span class="channel-label">暖</span><span class="sub-trend"><b id="arrow-warmth">→</b><span class="delta" id="delta-warmth">—</span></span></div>
+          <div class="channel-value"><strong id="num-warmth">–</strong><span class="sub-status" id="status-warmth">—</span></div>
+          <p class="sub-note" id="note-warmth">—</p>
           <div class="bar stat-bar"><i id="bar-warmth"></i><b class="bar-over" id="over-warmth"></b></div>
-        </div>
-        <div class="subblock">
-          <div class="sub-label"><span>沉</span><span class="sub-trend"><b id="arrow-heaviness">→</b><span class="delta" id="delta-heaviness">—</span></span></div>
-          <div class="sub-value"><strong id="num-heaviness">–</strong><span class="sub-status" id="status-heaviness">—</span></div>
-          <div class="sub-note" id="note-heaviness">—</div>
+          <div class="bar-legend"><span><i class="legend-dot"></i>当前</span><span><i class="legend-dot warn"></i>超阈值</span></div>
+        </section>
+        <section class="card channel-card">
+          <div class="channel-head"><span class="channel-label">沉</span><span class="sub-trend"><b id="arrow-heaviness">→</b><span class="delta" id="delta-heaviness">—</span></span></div>
+          <div class="channel-value"><strong id="num-heaviness">–</strong><span class="sub-status" id="status-heaviness">—</span></div>
+          <p class="sub-note" id="note-heaviness">—</p>
           <div class="bar stat-bar"><i id="bar-heaviness"></i><b class="bar-over" id="over-heaviness"></b></div>
-        </div>
-        <div class="subblock">
-          <div class="sub-label"><span>清</span><span class="sub-trend"><b id="arrow-clarity">→</b><span class="delta" id="delta-clarity">—</span></span></div>
-          <div class="sub-value"><strong id="num-clarity">–</strong><span class="sub-status" id="status-clarity">—</span></div>
-          <div class="sub-note" id="note-clarity">—</div>
+          <div class="bar-legend"><span><i class="legend-dot"></i>当前</span><span><i class="legend-dot warn"></i>超阈值</span></div>
+        </section>
+        <section class="card channel-card">
+          <div class="channel-head"><span class="channel-label">清</span><span class="sub-trend"><b id="arrow-clarity">→</b><span class="delta" id="delta-clarity">—</span></span></div>
+          <div class="channel-value"><strong id="num-clarity">–</strong><span class="sub-status" id="status-clarity">—</span></div>
+          <p class="sub-note" id="note-clarity">—</p>
           <div class="bar stat-bar"><i id="bar-clarity"></i><b class="bar-over" id="over-clarity"></b></div>
-        </div>
+          <div class="bar-legend"><span><i class="legend-dot"></i>当前</span><span><i class="legend-dot warn"></i>超阈值</span></div>
+        </section>
       </div>
-    </section>
+    </div>
 
     <section class="card chart-card" data-card-id="chart" data-card-label="心情曲线">
       <div class="card-head">
@@ -261,8 +262,8 @@
     <span>BioCore · 只读投影</span>
   </footer>
 </main>
-<script src="panel-layout.js?v=4"></script>
-<script src="trace-view.js?v=4"></script>
-<script src="panel.js?v=4"></script>
+<script src="panel-layout.js?v=5"></script>
+<script src="trace-view.js?v=5"></script>
+<script src="panel.js?v=5"></script>
 </body>
 </html>