feat: show system update history as timeline

2026-08-19 07:26:48 +08:00
parent 12d9c46323
commit de63fcffff
4 changed files with 549 additions and 49 deletions
@@ -111,9 +111,9 @@
      <div class="section-heading">
        <div>
          <h2>历史更新记录</h2>
-          <p>记录版本获取、下载、重启安装和最终执行结果。</p>
+          <p>按版本汇总获取、下载、重启安装和最终执行结果。</p>
        </div>
-        <span>最近 {{ historyRows.length }} 条</span>
+        <span>最近 {{ historyTimeline.length }} 个版本 · {{ historyRows.length }} 条记录</span>
      </div>

      <t-alert v-if="historyError" theme="error" :close-btn="false">
@@ -122,23 +122,65 @@
          <t-link theme="primary" @click="() => loadHistory()">重新加载</t-link>
        </div>
      </t-alert>
-      <t-table
-        v-if="historyLoading || historyRows.length"
-        :columns="historyColumns"
-        :data="historyRows"
-        row-key="publicId"
-        :loading="historyLoading"
-        table-layout="fixed"
-        :horizontal-scroll-affixed-bottom="true"
-      >
-        <template #occurredAt="{ row }">{{ formatDateTime(row.occurredAt) }}</template>
-        <template #actionCode="{ row }">{{ actionLabel(row.actionCode) }}</template>
-        <template #version="{ row }">{{ historyVersion(row) }}</template>
-        <template #resultCode="{ row }">
-          <t-tag :theme="resultTheme(row.resultCode)" variant="light">{{ resultLabel(row.resultCode) }}</t-tag>
-        </template>
-        <template #reason="{ row }">{{ row.reason || '-' }}</template>
-      </t-table>
+      <div v-if="historyLoading" class="history-loading" aria-live="polite">
+        <t-loading text="正在加载历史更新记录" />
+      </div>
+      <div v-else-if="historyTimeline.length" class="update-timeline" aria-label="按版本排列的更新时间线">
+        <article
+          v-for="item in historyTimeline"
+          :key="item.key"
+          class="update-timeline__item"
+          :data-version="item.version"
+        >
+          <div class="update-timeline__rail" aria-hidden="true">
+            <span class="update-timeline__marker" :class="`update-timeline__marker--${resultTheme(item.resultCode)}`">
+              <t-icon :name="item.resultCode === 'SUCCESS' ? 'check' : 'error-circle'" />
+            </span>
+          </div>
+          <div class="timeline-card">
+            <div class="timeline-card__header">
+              <div class="timeline-card__identity">
+                <strong>{{ item.version }}</strong>
+                <span>{{ formatDateTime(item.occurredAt) }} · {{ item.username || '系统' }}</span>
+              </div>
+              <t-tag :theme="resultTheme(item.resultCode)" variant="light">{{ resultLabel(item.resultCode) }}</t-tag>
+            </div>
+
+            <div class="timeline-card__summary">
+              <span class="timeline-card__label">执行流程</span>
+              <span>{{ item.operations.join(' · ') }}</span>
+              <span class="timeline-card__count">{{ item.steps.length }} 条记录</span>
+            </div>
+            <p class="timeline-card__reason">{{ item.reason || '已记录本次版本更新操作。' }}</p>
+
+            <div v-if="item.releaseNotes" class="timeline-card__notes">
+              <span>版本说明</span>
+              <p>{{ item.releaseNotes }}</p>
+            </div>
+
+            <div class="timeline-steps" aria-label="更新步骤">
+              <div v-for="step in item.steps" :key="step.row.publicId" class="timeline-step">
+                <span class="timeline-step__dot" :class="`timeline-step__dot--${resultTheme(step.row.resultCode)}`" />
+                <div class="timeline-step__body">
+                  <div class="timeline-step__heading">
+                    <strong>{{ actionLabel(step.row.actionCode) }}</strong>
+                    <t-tag size="small" :theme="resultTheme(step.row.resultCode)" variant="light">
+                      {{ resultLabel(step.row.resultCode) }}
+                    </t-tag>
+                    <time>{{ formatDateTime(step.row.occurredAt) }}</time>
+                  </div>
+                  <p>{{ step.row.reason || '操作已记录' }} · {{ step.row.username || '系统' }}</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="timeline-card__footer">
+              <span>最后更新：{{ formatDateTime(item.occurredAt) }}</span>
+              <t-button variant="text" size="small" @click="openHistoryDetail(item)">查看完整记录</t-button>
+            </div>
+          </div>
+        </article>
+      </div>
      <t-empty v-else description="暂无系统更新记录" />
    </section>

@@ -223,11 +265,47 @@
        </div>
      </div>
    </t-dialog>
+
+    <t-dialog
+      v-model:visible="historyDetailVisible"
+      header="更新日志详情"
+      aria-label="更新日志详情"
+      width="min(680px, calc(100vw - 32px))"
+      :footer="false"
+    >
+      <div v-if="selectedHistory" class="history-detail" role="dialog" aria-label="更新日志详情" aria-modal="true">
+        <div class="history-detail__header">
+          <div>
+            <span>目标版本</span>
+            <strong>{{ selectedHistory.version }}</strong>
+          </div>
+          <t-tag :theme="resultTheme(selectedHistory.resultCode)" variant="light">
+            {{ resultLabel(selectedHistory.resultCode) }}
+          </t-tag>
+        </div>
+        <p class="history-detail__reason">{{ selectedHistory.reason || '已记录本次版本更新操作。' }}</p>
+        <div v-if="selectedHistory.releaseNotes" class="history-detail__notes">
+          <span>版本说明</span>
+          <p>{{ selectedHistory.releaseNotes }}</p>
+        </div>
+        <div class="history-detail__steps" aria-label="更新日志">
+          <div v-for="step in selectedHistory.steps" :key="step.row.publicId" class="history-detail__step">
+            <div>
+              <strong>{{ actionLabel(step.row.actionCode) }}</strong>
+              <t-tag size="small" :theme="resultTheme(step.row.resultCode)" variant="light">
+                {{ resultLabel(step.row.resultCode) }}
+              </t-tag>
+            </div>
+            <time>{{ formatDateTime(step.row.occurredAt) }} · {{ step.row.username || '系统' }}</time>
+            <p>{{ step.row.reason || '操作已记录' }}</p>
+          </div>
+        </div>
+      </div>
+    </t-dialog>
  </div>
 </template>
 <script setup lang="ts">
 import { isAxiosError } from 'axios';
-import type { PrimaryTableCol } from 'tdesign-vue-next';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue';

@@ -244,6 +322,22 @@ import {
 defineOptions({ name: 'SystemUpdatePage' });

 type TagTheme = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+interface HistoryTimelineStep {
+  row: AuditLog;
+}
+
+interface HistoryTimelineItem {
+  key: string;
+  version: string;
+  occurredAt: string;
+  username: string;
+  resultCode: string;
+  reason: string;
+  operations: string[];
+  releaseNotes: string;
+  steps: HistoryTimelineStep[];
+}
+
 const UPDATE_PENDING_KEY = 'kaidi-system-update-pending';

 const updateStatus = ref<SystemUpdateView | null>(null);
@@ -259,6 +353,8 @@ const historyError = ref('');
 const updateRefreshSeconds = ref<number | null>(null);
 const restartCountdown = ref<number | null>(null);
 const updateDialogVisible = ref(false);
+const historyDetailVisible = ref(false);
+const selectedHistory = ref<HistoryTimelineItem | null>(null);
 const connectionInterrupted = ref(false);
 const localEvents = ref<SystemUpdateEvent[]>([]);
 const awaitingRefresh = ref(false);
@@ -387,14 +483,39 @@ const updateStateTheme = computed<TagTheme>(() => {
  return 'default';
 });

-const historyColumns: PrimaryTableCol[] = [
-  { colKey: 'occurredAt', title: '操作时间', width: 180 },
-  { colKey: 'version', title: '版本', width: 170, ellipsis: true },
-  { colKey: 'actionCode', title: '操作', width: 150 },
-  { colKey: 'username', title: '操作人', width: 130, ellipsis: true },
-  { colKey: 'resultCode', title: '结果', width: 100 },
-  { colKey: 'reason', title: '说明', minWidth: 220, ellipsis: true },
-];
+const historyTimeline = computed<HistoryTimelineItem[]>(() => {
+  const grouped = new Map<string, AuditLog[]>();
+  for (const row of historyRows.value) {
+    const version = historyVersion(row);
+    const key = version === '-' ? `unknown:${row.requestId || row.publicId}` : `version:${version}`;
+    const rows = grouped.get(key) || [];
+    rows.push(row);
+    grouped.set(key, rows);
+  }
+
+  return [...grouped.entries()]
+    .map(([key, rows]) => {
+      const newestFirst = rows.slice().sort((left, right) => compareHistoryDates(right.occurredAt, left.occurredAt));
+      const terminal = newestFirst.find((row) => isTerminalHistoryAction(row.actionCode));
+      const representative = terminal || newestFirst[0];
+      const chronological = newestFirst.slice().reverse();
+      const operations = [...new Set(chronological.map((row) => actionLabel(row.actionCode)).filter(Boolean))];
+      const releaseNotes = newestFirst.map((row) => historyReleaseNotes(row)).find(Boolean) || '';
+
+      return {
+        key,
+        version: representative ? historyVersion(representative) : '-',
+        occurredAt: representative?.occurredAt || '',
+        username: representative?.username || '',
+        resultCode: representative?.resultCode || 'UNKNOWN',
+        reason: representative?.reason || '',
+        operations,
+        releaseNotes,
+        steps: chronological.map((row) => ({ row })),
+      };
+    })
+    .sort((left, right) => compareHistoryDates(right.occurredAt, left.occurredAt));
+});

 async function loadStatus(silent = false) {
  if (!silent) {
@@ -705,20 +826,49 @@ function eventStageLabel(stage: string) {
  );
 }

+function compareHistoryDates(left: string, right: string) {
+  const leftTime = Date.parse(left);
+  const rightTime = Date.parse(right);
+  if (Number.isNaN(leftTime) || Number.isNaN(rightTime)) return left.localeCompare(right);
+  return leftTime - rightTime;
+}
+
+function isTerminalHistoryAction(action: string) {
+  return ['SYSTEM_UPDATE_SUCCEEDED', 'SYSTEM_UPDATE_FAILED', 'SYSTEM_UPDATE_RECOVERY_REQUIRED'].includes(action);
+}
+
+function parseHistoryPayload(source?: string | null) {
+  if (!source) return null;
+  try {
+    const parsed: unknown = JSON.parse(source);
+    return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? (parsed as Record<string, unknown>) : null;
+  } catch {
+    return null;
+  }
+}
+
 function historyVersion(row: AuditLog) {
  for (const source of [row.afterJson, row.beforeJson]) {
-    if (!source) continue;
-    try {
-      const parsed = JSON.parse(source) as Record<string, unknown>;
-      const version = parsed.targetVersion || parsed.latestVersion || parsed.currentVersion || parsed.version;
-      if (version) return String(version);
-    } catch {
-      continue;
-    }
+    const parsed = parseHistoryPayload(source);
+    const version = parsed?.targetVersion || parsed?.latestVersion || parsed?.currentVersion || parsed?.version;
+    if (version !== undefined && version !== null && String(version).trim()) return String(version);
  }
  return '-';
 }

+function historyReleaseNotes(row: AuditLog) {
+  for (const source of [row.afterJson, row.beforeJson]) {
+    const parsed = parseHistoryPayload(source);
+    if (typeof parsed?.releaseNotes === 'string' && parsed.releaseNotes.trim()) return parsed.releaseNotes;
+  }
+  return '';
+}
+
+function openHistoryDetail(item: HistoryTimelineItem) {
+  selectedHistory.value = item;
+  historyDetailVisible.value = true;
+}
+
 function actionLabel(action: string) {
  return (
    {
@@ -926,6 +1076,313 @@ onBeforeUnmount(() => {
  line-height: 24px;
 }

+.history-loading {
+  display: flex;
+  justify-content: center;
+  min-height: 160px;
+  padding: 32px 0;
+}
+
+.update-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.update-timeline__item {
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr);
+  gap: 14px;
+  min-width: 0;
+}
+
+.update-timeline__rail {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.update-timeline__rail::after {
+  position: absolute;
+  top: 30px;
+  bottom: -18px;
+  width: 1px;
+  background: var(--td-component-border);
+  content: '';
+}
+
+.update-timeline__item:last-child .update-timeline__rail::after {
+  display: none;
+}
+
+.update-timeline__marker {
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--td-text-color-secondary);
+  background: var(--td-bg-color-container);
+  border: 2px solid var(--td-component-border);
+  border-radius: 50%;
+}
+
+.update-timeline__marker--success {
+  color: #fff;
+  background: var(--td-success-color);
+  border-color: var(--td-success-color);
+}
+
+.update-timeline__marker--danger {
+  color: #fff;
+  background: var(--td-error-color);
+  border-color: var(--td-error-color);
+}
+
+.update-timeline__marker--warning {
+  color: #fff;
+  background: var(--td-warning-color);
+  border-color: var(--td-warning-color);
+}
+
+.timeline-card {
+  min-width: 0;
+  padding: 16px;
+  background: var(--td-bg-color-container);
+  border: 1px solid var(--td-component-border);
+  border-radius: 6px;
+}
+
+.timeline-card__header,
+.timeline-card__summary,
+.timeline-card__footer,
+.timeline-step__heading,
+.history-detail__header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.timeline-card__header,
+.timeline-card__footer,
+.history-detail__header {
+  justify-content: space-between;
+}
+
+.timeline-card__identity {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.timeline-card__identity strong {
+  overflow: hidden;
+  color: var(--td-text-color-primary);
+  font-size: 16px;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.timeline-card__identity span,
+.timeline-card__count,
+.timeline-card__footer,
+.timeline-step__heading time,
+.history-detail__header span,
+.history-detail__step time {
+  color: var(--td-text-color-secondary);
+  font-size: 12px;
+}
+
+.timeline-card__summary {
+  flex-wrap: wrap;
+  margin-top: 12px;
+  padding: 9px 10px;
+  color: var(--td-text-color-primary);
+  font-size: 13px;
+  line-height: 20px;
+  background: var(--td-bg-color-secondarycontainer);
+  border-radius: 4px;
+}
+
+.timeline-card__label {
+  color: var(--td-text-color-secondary);
+}
+
+.timeline-card__count {
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+.timeline-card__reason,
+.history-detail__reason {
+  margin: 12px 0 0;
+  color: var(--td-text-color-primary);
+  line-height: 22px;
+  overflow-wrap: anywhere;
+}
+
+.timeline-card__notes,
+.history-detail__notes {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 10px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--td-component-border);
+}
+
+.timeline-card__notes > span,
+.history-detail__notes > span {
+  color: var(--td-text-color-secondary);
+  font-size: 12px;
+}
+
+.timeline-card__notes p,
+.history-detail__notes p {
+  margin: 0;
+  color: var(--td-text-color-primary);
+  line-height: 22px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.timeline-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.timeline-step {
+  display: grid;
+  grid-template-columns: 10px minmax(0, 1fr);
+  gap: 10px;
+  min-width: 0;
+}
+
+.timeline-step__dot {
+  width: 8px;
+  height: 8px;
+  margin-top: 7px;
+  background: var(--td-component-border);
+  border-radius: 50%;
+}
+
+.timeline-step__dot--success {
+  background: var(--td-success-color);
+}
+
+.timeline-step__dot--danger {
+  background: var(--td-error-color);
+}
+
+.timeline-step__dot--warning {
+  background: var(--td-warning-color);
+}
+
+.timeline-step__body {
+  min-width: 0;
+}
+
+.timeline-step__heading {
+  flex-wrap: wrap;
+}
+
+.timeline-step__heading strong {
+  color: var(--td-text-color-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.timeline-step__heading time {
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+.timeline-step__body p {
+  margin: 3px 0 0;
+  color: var(--td-text-color-secondary);
+  font-size: 12px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+
+.timeline-card__footer {
+  margin-top: 14px;
+  padding-top: 10px;
+  border-top: 1px solid var(--td-component-border);
+}
+
+.history-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+}
+
+.history-detail__header > div {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.history-detail__header strong {
+  color: var(--td-text-color-primary);
+  font-size: 18px;
+  line-height: 26px;
+}
+
+.history-detail__steps {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 420px;
+  padding: 12px;
+  overflow: auto;
+  background: var(--td-bg-color-secondarycontainer);
+  border: 1px solid var(--td-component-border);
+  border-radius: 6px;
+}
+
+.history-detail__step {
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--td-component-border);
+}
+
+.history-detail__step:last-child {
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.history-detail__step > div {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.history-detail__step strong {
+  color: var(--td-text-color-primary);
+  font-size: 13px;
+}
+
+.history-detail__step time {
+  display: block;
+  margin-top: 4px;
+}
+
+.history-detail__step p {
+  margin: 4px 0 0;
+  color: var(--td-text-color-secondary);
+  font-size: 13px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+
 .alert-content {
  justify-content: space-between;
  gap: 12px;
@@ -1077,6 +1534,40 @@ onBeforeUnmount(() => {
    gap: 8px;
  }

+  .update-timeline__item {
+    grid-template-columns: 18px minmax(0, 1fr);
+    gap: 8px;
+  }
+
+  .update-timeline__marker {
+    width: 18px;
+    height: 18px;
+  }
+
+  .update-timeline__rail::after {
+    top: 24px;
+  }
+
+  .timeline-card {
+    padding: 12px;
+  }
+
+  .timeline-card__count {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .timeline-step__heading time {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .timeline-card__notes,
+  .history-detail__notes {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+
  .download-progress__meta,
  .dialog-status-line,
  .dialog-actions {