feat: 展示项目 Jenkins 诊断状态

src/views/ProjectsView.vue

@@ -1,8 +1,40 @@
 <script setup lang="ts">
+/**
+ * 项目配置页展示项目仓库、发布环境以及真实 Jenkins job 诊断状态。
+ */
+import { onMounted, ref } from 'vue'
 import StatusPill from '../components/StatusPill.vue'
 import { usePlatformStore } from '../stores/platform'
+import type { EnvironmentStatus } from '../types/devops'
 
 const platform = usePlatformStore()
+const diagnosticsLoading = ref(false)
+
+onMounted(() => {
+  void refreshJenkinsDiagnostics()
+})
+
+async function refreshJenkinsDiagnostics() {
+  diagnosticsLoading.value = true
+
+  try {
+    await platform.loadProjectJenkinsDiagnostics()
+  } finally {
+    diagnosticsLoading.value = false
+  }
+}
+
+function lastBuildText(env: EnvironmentStatus): string {
+  if (!env.jenkinsLastBuild?.number) {
+    return '-'
+  }
+
+  if (env.jenkinsLastBuild.building) {
+    return `#${env.jenkinsLastBuild.number} 运行中`
+  }
+
+  return `#${env.jenkinsLastBuild.number} ${env.jenkinsLastBuild.result || 'UNKNOWN'}`
+}
 </script>
 
 <template>
@@ -18,7 +50,14 @@ const platform = usePlatformStore()
     <section class="panel">
         <div class="panel-header">
           <h2>项目清单</h2>
-        <span>由后端 projects 接口返回</span>
+        <ElButton
+          size="small"
+          plain
+          :loading="diagnosticsLoading"
+          @click="refreshJenkinsDiagnostics"
+        >
+          刷新 Jenkins 诊断
+        </ElButton>
       </div>
       <div class="panel-body">
         <ElTable :data="platform.projects" row-key="key">
@@ -35,6 +74,23 @@ const platform = usePlatformStore()
                     <dd>{{ env.branchPolicy }}</dd>
                     <dt>Jenkins Job</dt>
                     <dd class="mono">{{ env.jenkinsJob }}</dd>
+                    <dt>Job 状态</dt>
+                    <dd>
+                      <StatusPill :state="env.jenkinsStatus" />
+                      <span class="diagnostic-message">{{ env.jenkinsMessage }}</span>
+                    </dd>
+                    <dt>最近构建</dt>
+                    <dd>
+                      <a
+                        v-if="env.jenkinsLastBuild?.url"
+                        :href="env.jenkinsLastBuild.url"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {{ lastBuildText(env) }}
+                      </a>
+                      <span v-else>{{ lastBuildText(env) }}</span>
+                    </dd>
                     <dt>通知通道</dt>
                     <dd>{{ env.wecomRobot }}</dd>
                     <dt>最近发布</dt>
@@ -116,6 +172,12 @@ dd {
   gap: 6px;
 }
 
+.diagnostic-message {
+  margin-left: 8px;
+  color: #596578;
+  font-size: 12px;
+}
+
 @media (max-width: 760px) {
   .env-config {
     grid-template-columns: 1fr;