fix(frontend): 为 table 添加 thead/tbody 消除 Vite 构建警告
HTML 规范要求 <tr> 必须是 <thead>/<tbody>/<tfoot> 的直接子元素, 不能直接作为 <table> 的子节点。Vite/Vue 会报告 warning 并可能导致 hydration 错误。 修复以下文件中的表格结构: - StatusBoard.vue: 2 个表格添加 <thead> + <tbody> - Index.vue: 1 个表格添加 <tbody> - Monitor.vue: 2 个表格添加 <tbody> - TaskCenter.vue: 1 个表格添加 <tbody>
This commit is contained in:
@@ -86,6 +86,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<table>
|
<table>
|
||||||
|
<tbody>
|
||||||
<tr class="tr-hover">
|
<tr class="tr-hover">
|
||||||
<td class="status-text ok">● 成功</td>
|
<td class="status-text ok">● 成功</td>
|
||||||
<td class="strong">MySQL 主从部署</td>
|
<td class="strong">MySQL 主从部署</td>
|
||||||
@@ -111,6 +112,7 @@
|
|||||||
<td class="strong">业务线标签同步</td>
|
<td class="strong">业务线标签同步</td>
|
||||||
<td class="mono">5s</td>
|
<td class="mono">5s</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -15,6 +15,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<table>
|
<table>
|
||||||
|
<tbody>
|
||||||
<tr class="tr-hover">
|
<tr class="tr-hover">
|
||||||
<td>七机房采集节点数</td>
|
<td>七机房采集节点数</td>
|
||||||
<td class="mono strong">128</td>
|
<td class="mono strong">128</td>
|
||||||
@@ -31,6 +32,7 @@
|
|||||||
<td>Grafana 仪表盘数</td>
|
<td>Grafana 仪表盘数</td>
|
||||||
<td class="mono strong">37</td>
|
<td class="mono strong">37</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -42,6 +44,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<table>
|
<table>
|
||||||
|
<tbody>
|
||||||
<tr class="tr-hover">
|
<tr class="tr-hover">
|
||||||
<td>物理机监控覆盖</td>
|
<td>物理机监控覆盖</td>
|
||||||
<td class="mono strong">186 / 186</td>
|
<td class="mono strong">186 / 186</td>
|
||||||
@@ -58,6 +61,7 @@
|
|||||||
<td>存储健康度</td>
|
<td>存储健康度</td>
|
||||||
<td class="status-text ok">● 正常</td>
|
<td class="status-text ok">● 正常</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -44,7 +44,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<table>
|
<table>
|
||||||
|
<thead>
|
||||||
<tr><th>机房</th><th>总数</th><th>在线</th><th>健康率</th><th>状态</th></tr>
|
<tr><th>机房</th><th>总数</th><th>在线</th><th>健康率</th><th>状态</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
<tr class="tr-hover">
|
<tr class="tr-hover">
|
||||||
<td class="strong mono">YZH 机房</td>
|
<td class="strong mono">YZH 机房</td>
|
||||||
<td class="mono">78</td>
|
<td class="mono">78</td>
|
||||||
@@ -73,6 +76,7 @@
|
|||||||
<td><span class="bar-wrap"><span class="bar-fill err" style="width: 86%"></span></span>86%</td>
|
<td><span class="bar-wrap"><span class="bar-fill err" style="width: 86%"></span></span>86%</td>
|
||||||
<td class="status-text err">● 1 条严重</td>
|
<td class="status-text err">● 1 条严重</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -84,7 +88,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<table>
|
<table>
|
||||||
|
<thead>
|
||||||
<tr><th>业务线</th><th>虚机数</th><th>CPU 均值</th><th>状态</th></tr>
|
<tr><th>业务线</th><th>虚机数</th><th>CPU 均值</th><th>状态</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
<tr class="tr-hover">
|
<tr class="tr-hover">
|
||||||
<td class="strong mono">Kodo</td>
|
<td class="strong mono">Kodo</td>
|
||||||
<td class="mono">218</td>
|
<td class="mono">218</td>
|
||||||
@@ -109,6 +116,7 @@
|
|||||||
<td><span class="bar-wrap"><span class="bar-fill" style="width: 31%"></span></span>31%</td>
|
<td><span class="bar-wrap"><span class="bar-fill" style="width: 31%"></span></span>31%</td>
|
||||||
<td class="status-text ok">● 正常</td>
|
<td class="status-text ok">● 正常</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -14,11 +14,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<table>
|
<table>
|
||||||
|
<tbody>
|
||||||
<tr v-for="task in tasks" :key="task.id" class="tr-hover" :class="{ active: task.id === selectedTask }" @click="selectedTask = task.id">
|
<tr v-for="task in tasks" :key="task.id" class="tr-hover" :class="{ active: task.id === selectedTask }" @click="selectedTask = task.id">
|
||||||
<td :class="['status-text', task.statusClass]">● {{ task.status }}</td>
|
<td :class="['status-text', task.statusClass]">● {{ task.status }}</td>
|
||||||
<td class="strong">{{ task.name }}</td>
|
<td class="strong">{{ task.name }}</td>
|
||||||
<td class="mono" style="font-size: 11px; color: var(--text-dim)">{{ task.playbook }}</td>
|
<td class="mono" style="font-size: 11px; color: var(--text-dim)">{{ task.playbook }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div class="pagination">
|
<div class="pagination">
|
||||||
<span>共 86 条 · 每页 6 条</span>
|
<span>共 86 条 · 每页 6 条</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user