ui(dashboard): 每日产出与逐源表现同行布局(左图右表,窄屏自动换行)

web/templates/dashboard.html

@@ -7,16 +7,18 @@
   .kpi .card { padding:14px 16px; }
   .kpi .num { font-size:26px; font-weight:700; line-height:1.2; }
   .kpi .sub { color:#888; font-size:12px; margin-top:2px; }
-  .chart-svg { width:100%; max-width:800px; height:auto; display:block; }
+  .duo { display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start; margin-top:6px; }
+  .duo .col-chart { flex:0 1 640px; min-width:420px; }
+  .duo .col-table { flex:1 1 400px; min-width:320px; }
+  .duo h2 { margin:16px 0 0; }
+  .chart-svg { width:100%; height:auto; display:block; margin-top:4px; }
   .chart-svg .barg rect { opacity:.82; transition:opacity .15s; }
   .chart-svg .barg:hover rect { opacity:1; }
   .chart-svg .axis { font-size:11px; fill:#6a7080; }
   .chart-svg .gline { stroke:#232633; stroke-width:1; }
   .chart-svg .dlabel { font-size:11px; fill:#7a8090; }
   .chart-svg .tlabel { font-size:12px; fill:#aab2c0; font-weight:600; }
-  .chart-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:18px; }
-  .chart-head h2 { margin:0; }
-  .legend { display:flex; gap:12px; flex-wrap:wrap; margin-left:auto; font-size:12px; color:#aab2c0; }
+  .legend { display:flex; gap:10px 14px; flex-wrap:wrap; margin:8px 0 0; font-size:12px; color:#aab2c0; }
   .legend i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:-1px; }
 </style>
 {% endblock %}
@@ -37,32 +39,32 @@
   </div>
 </div>
 
-<div class="chart-head">
-  <h2>每日产出</h2>
-  <div class="legend">
-    {% for s, color, n in sites %}<span><i style="background:{{ color }}"></i>{{ s }} <b style="color:#d4d4d4">{{ n }}</b></span>{% endfor %}
-  </div>
-</div>
-<svg class="chart-svg" viewBox="0 0 760 260" role="img">
-  {% for g in grid %}
-  <line class="gline" x1="46" x2="750" y1="{{ g.y }}" y2="{{ g.y }}"></line>
-  <text class="axis" x="40" y="{{ g.y + 4 }}" text-anchor="end">{{ g.val }}</text>
-  {% endfor %}
-  {% for b in bars %}
-  <g class="barg">
-    <title>{{ b.day }} · 共 {{ b.total }} 篇
+<div class="duo">
+  <div class="col-chart">
+    <h2>每日产出</h2>
+    <div class="legend">
+      {% for s, color, n in sites %}<span><i style="background:{{ color }}"></i>{{ s }} <b style="color:#d4d4d4">{{ n }}</b></span>{% endfor %}
+    </div>
+    <svg class="chart-svg" viewBox="0 0 760 260" role="img">
+      {% for g in grid %}
+      <line class="gline" x1="46" x2="750" y1="{{ g.y }}" y2="{{ g.y }}"></line>
+      <text class="axis" x="40" y="{{ g.y + 4 }}" text-anchor="end">{{ g.val }}</text>
+      {% endfor %}
+      {% for b in bars %}
+      <g class="barg">
+        <title>{{ b.day }} · 共 {{ b.total }} 篇
 {% for sg in b.segs %}{{ sg.site }}: {{ sg.v }}
 {% endfor %}</title>
-    {% if b.total %}<text class="tlabel" x="{{ b.x + b.w / 2 }}" y="{{ b.segs[0].y - 7 }}" text-anchor="middle">{{ b.total }}</text>{% endif %}
-    {% for sg in b.segs %}<rect x="{{ sg.x }}" y="{{ sg.y }}" width="{{ b.w }}" height="{{ sg.h }}" rx="2.5" fill="{{ sg.color }}"></rect>{% endfor %}
-    <text class="dlabel" x="{{ b.x + b.w / 2 }}" y="252" text-anchor="middle">{{ b.label }}</text>
-  </g>
-  {% endfor %}
-</svg>
+        {% if b.total %}<text class="tlabel" x="{{ b.x + b.w / 2 }}" y="{{ b.segs[0].y - 7 }}" text-anchor="middle">{{ b.total }}</text>{% endif %}
+        {% for sg in b.segs %}<rect x="{{ sg.x }}" y="{{ sg.y }}" width="{{ b.w }}" height="{{ sg.h }}" rx="2.5" fill="{{ sg.color }}"></rect>{% endfor %}
+        <text class="dlabel" x="{{ b.x + b.w / 2 }}" y="252" text-anchor="middle">{{ b.label }}</text>
+      </g>
+      {% endfor %}
+    </svg>
+  </div>
 
-<div>
-  <div>
-    <h2 style="margin-top:0">逐源表现(7 天)</h2>
+  <div class="col-table">
+    <h2>逐源表现(7 天)</h2>
     <div class="table-wrap">
     <table>
       <thead><tr><th>栏目</th><th>今日</th><th>7天文章</th><th>场次 ✓/⚠/✗</th><th>最近运行</th></tr></thead>
@@ -83,7 +85,6 @@
     </table>
     </div>
   </div>
-
 </div>
 
 {% endblock %}