更新 update 门户站点界面和后台功能

server/unified-management/web/admin/src/views/DashboardView.vue

@@ -21,7 +21,7 @@ use([CanvasRenderer, LineChart, PieChart, BarChart, GaugeChart, GridComponent, T
     </div>
 
     <div class="toolbar">
-      <button class="btn primary" @click="ctx.checkSources"><Activity :size="16" />立即心跳检测</button>
+      <button class="btn primary" @click="ctx.checkSources"><Activity :size="16" />立即服务端检测</button>
       <button class="btn ghost" @click="ctx.toggleAutoRefresh">
         <component :is="ctx.autoRefreshPaused ? PlayCircle : PauseCircle" :size="16" />
         {{ ctx.autoRefreshPaused ? "恢复自动刷新" : "暂停自动刷新" }}
@@ -30,7 +30,7 @@ use([CanvasRenderer, LineChart, PieChart, BarChart, GaugeChart, GridComponent, T
     </div>
 
     <section v-if="ctx.sourceCheckJobs.length" class="panel">
-      <div class="section-head"><h2>心跳检测任务</h2><span class="badge">{{ ctx.sourceCheckJobs[0].status }}</span></div>
+      <div class="section-head"><h2>服务端检测任务</h2><span class="badge">{{ ctx.sourceCheckJobs[0].status }}</span></div>
       <table>
         <thead><tr><th>任务</th><th>进度</th><th>正常</th><th>重定向</th><th>降级</th><th>错误</th><th>开始时间</th></tr></thead>
         <tbody>
@@ -48,14 +48,21 @@ use([CanvasRenderer, LineChart, PieChart, BarChart, GaugeChart, GridComponent, T
     </section>
 
     <div class="chart-grid">
-      <section class="panel chart-panel"><h2>接口心跳延迟</h2><VChart class="chart" :option="ctx.heartbeatOption" autoresize /></section>
+      <section class="panel chart-panel chart-panel-relative">
+        <h2>服务端接口延迟</h2>
+        <VChart class="chart" :option="ctx.heartbeatOption" autoresize />
+        <div v-if="ctx.isHeartbeatChartEmpty" class="chart-empty">
+          <strong>暂无服务端检测记录</strong>
+          <span>点击“立即服务端检测”后会生成延迟曲线。</span>
+        </div>
+      </section>
       <section class="panel chart-panel"><h2>接口健康分布</h2><VChart class="chart" :option="ctx.healthOption" autoresize /></section>
       <section class="panel chart-panel"><h2>反馈状态分布</h2><VChart class="chart" :option="ctx.feedbackOption" autoresize /></section>
       <section class="panel chart-panel"><h2>服务可用率</h2><VChart class="chart" :option="ctx.availabilityOption" autoresize /></section>
     </div>
 
     <section class="panel">
-      <div class="section-head"><h2>最近接口心跳</h2><span class="badge">{{ ctx.heartbeats.length }} 条</span></div>
+      <div class="section-head"><h2>最近服务端检测</h2><span class="badge">{{ ctx.heartbeats.length }} 条</span></div>
       <table>
         <thead><tr><th>接口</th><th>状态</th><th>延迟</th><th>错误</th><th>时间</th></tr></thead>
         <tbody>
@@ -66,7 +73,7 @@ use([CanvasRenderer, LineChart, PieChart, BarChart, GaugeChart, GridComponent, T
             <td class="hash">{{ item.error || "-" }}</td>
             <td>{{ item.checkedAt || "-" }}</td>
           </tr>
-          <tr v-if="ctx.heartbeats.length === 0"><td colspan="5">暂无心跳记录，点击“立即心跳检测”后会刷新。</td></tr>
+          <tr v-if="ctx.heartbeats.length === 0"><td colspan="5">暂无检测记录，点击“立即服务端检测”后会刷新。</td></tr>
         </tbody>
       </table>
     </section>