create-windy 0.4.1 → 0.5.0

package/template/apps/web/src/pages/system/ai-runtime-presenter.webtest.ts

@@ -0,0 +1,48 @@
+import { describe, expect, test } from "vitest";
+import {
+  cacheStatusLabel,
+  formatDuration,
+  formatPercent,
+  formatTokenCount,
+  runStatusLabel,
+} from "./ai-runtime-presenter";
+
+describe("AI Runtime 展示语义", () => {
+  test("未知计量不伪装成零", () => {
+    expect(formatTokenCount(null)).toBe("未上报");
+    expect(formatPercent(null)).toBe("未上报");
+    expect(formatTokenCount(0)).toBe("0");
+    expect(formatPercent(0)).toBe("0.0%");
+    expect(cacheStatusLabel("unknown")).toBe("未上报");
+  });
+
+  test("耗时使用便于运维阅读的单位", () => {
+    expect(formatDuration(420)).toBe("420 ms");
+    expect(formatDuration(1_250)).toBe("1.3 s");
+    expect(formatDuration(61_000)).toBe("1m 1s");
+  });
+
+  test("Run 与 Attempt 状态不向用户暴露内部英文枚举", () => {
+    expect(
+      [
+        "accepted",
+        "running",
+        "awaiting-approval",
+        "completed",
+        "failed",
+        "cancelled",
+        "blocked",
+        "abandoned",
+      ].map(runStatusLabel),
+    ).toEqual([
+      "已接受",
+      "运行中",
+      "等待审批",
+      "成功",
+      "失败",
+      "已取消",
+      "已阻止",
+      "已中止",
+    ]);
+  });
+});

package/template/apps/web/src/pages/system/audit-time-range.ts

@@ -2,8 +2,7 @@ export function localMinuteToIso(
   value: string,
   boundary: "start" | "end",
 ): string | undefined {
-  const match =
-    /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(value.trim());
+  const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(value.trim());
   if (!match) return undefined;
   const [, year, month, day, hour, minute] = match;
   const local = new Date(
@@ -26,3 +25,36 @@ export function localMinuteToIso(
   }
   return local.toISOString();
 }
+
+export interface DefaultAuditTimeRange {
+  occurredAfterLocal: string;
+  occurredBeforeLocal: string;
+}
+
+export function defaultAuditTimeRange(
+  now: Date = new Date(),
+): DefaultAuditTimeRange {
+  return {
+    occurredAfterLocal: toLocalMinute(
+      new Date(now.getTime() - 60 * 60 * 1_000),
+    ),
+    occurredBeforeLocal: toLocalMinute(now),
+  };
+}
+
+export function defaultAuditFilters(now: Date = new Date()) {
+  const range = defaultAuditTimeRange(now);
+  return {
+    occurredAfter: localMinuteToIso(range.occurredAfterLocal, "start"),
+    occurredBefore: localMinuteToIso(range.occurredBeforeLocal, "end"),
+  };
+}
+
+function toLocalMinute(value: Date): string {
+  const year = value.getFullYear();
+  const month = String(value.getMonth() + 1).padStart(2, "0");
+  const day = String(value.getDate()).padStart(2, "0");
+  const hour = String(value.getHours()).padStart(2, "0");
+  const minute = String(value.getMinutes()).padStart(2, "0");
+  return `${year}-${month}-${day}T${hour}:${minute}`;
+}

package/template/apps/web/src/pages/system/components/AuditLogFilters.vue

@@ -14,7 +14,7 @@ import {
 } from "@/components/ui/select";
 import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
 import { listSystemResource, type SystemRecord } from "@/services/system-api";
-import { localMinuteToIso } from "../audit-time-range";
+import { defaultAuditTimeRange, localMinuteToIso } from "../audit-time-range";
 
 export interface AuditLogFilterValue {
   q?: string;
@@ -32,8 +32,9 @@ const emit = defineEmits<{
 const keyword = shallowRef("");
 const actorId = shallowRef("all");
 const action = shallowRef("all");
-const occurredAfterLocal = shallowRef("");
-const occurredBeforeLocal = shallowRef("");
+const initialTimeRange = defaultAuditTimeRange();
+const occurredAfterLocal = shallowRef(initialTimeRange.occurredAfterLocal);
+const occurredBeforeLocal = shallowRef(initialTimeRange.occurredBeforeLocal);
 const optionSource = shallowRef<SystemRecord[]>([]);
 const includeScheduler = shallowRef(false);
 const access = useAccessSnapshot();

package/template/apps/web/src/pages/system/components/AuditLogFilters.webtest.ts

@@ -1,5 +1,5 @@
 import { flushPromises, mount } from "@vue/test-utils";
-import { describe, expect, test, vi } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Select } from "@/components/ui/select";
 import AuditLogFilters from "./AuditLogFilters.vue";
@@ -12,7 +12,32 @@ vi.mock("@/services/system-api", async () => ({
   listSystemResource: api.list,
 }));
 
+afterEach(() => vi.useRealTimers());
+
 describe("审计日志筛选", () => {
+  test("默认显示最近一小时到当前分钟", async () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2026, 6, 20, 10, 20, 30));
+    api.list.mockResolvedValue({
+      items: [],
+      total: 0,
+      page: 1,
+      pageSize: 100,
+    });
+
+    const wrapper = mount(AuditLogFilters);
+    await flushPromises();
+
+    expect(
+      (wrapper.get('[aria-label="审计开始时间"]').element as HTMLInputElement)
+        .value,
+    ).toBe("2026-07-20T09:20");
+    expect(
+      (wrapper.get('[aria-label="审计结束时间"]').element as HTMLInputElement)
+        .value,
+    ).toBe("2026-07-20T10:20");
+  });
+
   test("提交关键字、操作者、动作和本地分钟范围，并原样设置导出选项", async () => {
     api.list.mockResolvedValue({
       items: [

package/template/apps/web/src/pages/system/components/OperationGpuMonitor.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { OperationSnapshot } from "@/services/operations-api";
+
+defineProps<{ gpu: OperationSnapshot["gpuMonitor"] }>();
+
+function formatBytes(value: number | null) {
+  if (value === null) return "未知";
+  if (value < 1_024 ** 2) return `${(value / 1_024).toFixed(1)} KiB`;
+  if (value < 1_024 ** 3) return `${(value / 1_024 ** 2).toFixed(1)} MiB`;
+  return `${(value / 1_024 ** 3).toFixed(1)} GiB`;
+}
+</script>
+
+<template>
+  <section class="space-y-3">
+    <div>
+      <h3 class="text-sm font-medium">GPU 占用</h3>
+      <p class="text-xs text-muted-foreground">{{ gpu.message }}</p>
+    </div>
+
+    <div
+      v-if="gpu.status !== 'available'"
+      class="rounded-md border border-dashed p-3 text-sm text-muted-foreground"
+    >
+      {{ gpu.status === "not-detected" ? "未检测到 GPU" : "GPU 指标不可用" }}
+    </div>
+
+    <article
+      v-for="device in gpu.devices"
+      :key="device.uuid"
+      class="space-y-3 rounded-lg border p-4"
+    >
+      <div class="flex flex-wrap items-center justify-between gap-2">
+        <p class="font-medium">GPU {{ device.index }} · {{ device.name }}</p>
+        <p class="text-xs text-muted-foreground">
+          {{
+            device.temperatureCelsius === null
+              ? "温度未知"
+              : `${device.temperatureCelsius} °C`
+          }}
+        </p>
+      </div>
+
+      <div
+        v-for="metric in [
+          { label: 'GPU 利用率', value: device.usagePercent },
+          { label: '显存占用率', value: device.memoryUsagePercent },
+        ]"
+        :key="metric.label"
+        class="space-y-2"
+      >
+        <div class="flex justify-between gap-4 text-sm">
+          <span>{{ metric.label }}</span>
+          <span class="text-muted-foreground">
+            {{ metric.value === null ? "未知" : `${metric.value}%` }}
+          </span>
+        </div>
+        <div
+          role="progressbar"
+          :aria-label="`GPU ${device.index} ${metric.label}`"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          :aria-valuenow="metric.value ?? 0"
+          class="h-3 overflow-hidden rounded-full bg-muted"
+        >
+          <div
+            class="h-full rounded-full bg-primary transition-[width] duration-500"
+            :style="{ width: `${metric.value ?? 0}%` }"
+          />
+        </div>
+      </div>
+
+      <p class="text-xs text-muted-foreground">
+        显存 {{ formatBytes(device.memoryUsedBytes) }} /
+        {{ formatBytes(device.memoryTotalBytes) }}
+      </p>
+
+      <div v-if="device.processes.length" class="space-y-2">
+        <p class="text-xs font-medium">计算进程</p>
+        <ul class="divide-y rounded-md border text-sm">
+          <li
+            v-for="item in device.processes"
+            :key="`${device.uuid}-${item.pid}`"
+            class="flex flex-wrap justify-between gap-2 px-3 py-2"
+          >
+            <span class="min-w-0 truncate">{{ item.name }}</span>
+            <span class="text-muted-foreground">
+              PID {{ item.pid }} · {{ formatBytes(item.usedMemoryBytes) }}
+            </span>
+          </li>
+        </ul>
+      </div>
+      <p v-else class="text-xs text-muted-foreground">
+        当前没有可见的 NVIDIA 计算进程。
+      </p>
+    </article>
+  </section>
+</template>

package/template/apps/web/src/pages/system/components/OperationGpuMonitor.webtest.ts

@@ -0,0 +1,61 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import OperationGpuMonitor from "./OperationGpuMonitor.vue";
+
+describe("GPU 监控面板", () => {
+  test("展示设备利用率、显存和 AI 计算进程", () => {
+    const wrapper = mount(OperationGpuMonitor, {
+      props: {
+        gpu: {
+          status: "available",
+          provider: "NVIDIA",
+          message: "GPU 利用率为设备采样值。",
+          devices: [
+            {
+              index: 0,
+              uuid: "GPU-abc",
+              name: "NVIDIA RTX 5000",
+              usagePercent: 75,
+              memoryUsedBytes: 8 * 1_024 ** 3,
+              memoryTotalBytes: 32 * 1_024 ** 3,
+              memoryUsagePercent: 25,
+              temperatureCelsius: 62,
+              processes: [
+                {
+                  pid: 4321,
+                  name: "python ai-service.py",
+                  usedMemoryBytes: 7 * 1_024 ** 3,
+                },
+              ],
+            },
+          ],
+        },
+      },
+    });
+
+    expect(wrapper.text()).toContain("GPU 0 · NVIDIA RTX 5000");
+    expect(wrapper.text()).toContain("python ai-service.py");
+    expect(wrapper.text()).toContain("PID 4321 · 7.0 GiB");
+    expect(
+      wrapper
+        .get('[aria-label="GPU 0 GPU 利用率"]')
+        .attributes("aria-valuenow"),
+    ).toBe("75");
+  });
+
+  test("无 NVIDIA 能力时显示真实不可探测状态", () => {
+    const wrapper = mount(OperationGpuMonitor, {
+      props: {
+        gpu: {
+          status: "not-detected",
+          provider: "NVIDIA",
+          devices: [],
+          message: "未检测到 nvidia-smi。",
+        },
+      },
+    });
+
+    expect(wrapper.text()).toContain("未检测到 GPU");
+    expect(wrapper.text()).toContain("未检测到 nvidia-smi");
+  });
+});

package/template/apps/web/src/pages/system/components/OperationServiceMonitor.vue

@@ -10,11 +10,13 @@ import {
 import type { OperationSnapshot } from "@/services/operations-api";
 import { formatDateTime } from "@/lib/date-time";
 import DiskUsageChart from "./DiskUsageChart.vue";
+import OperationGpuMonitor from "./OperationGpuMonitor.vue";
 
 defineProps<{
   service: OperationSnapshot["serviceMonitor"];
   database: OperationSnapshot["databaseMonitor"];
   disk: OperationSnapshot["diskMonitor"];
+  gpu: OperationSnapshot["gpuMonitor"];
 }>();
 
 function formatBytes(value?: number) {
@@ -83,6 +85,57 @@ function formatBytes(value?: number) {
         </div>
       </section>
 
+      <section class="space-y-3">
+        <div>
+          <h3 class="text-sm font-medium">CPU 占用</h3>
+          <p class="text-xs text-muted-foreground">
+            {{ service.cpu.logicalCores }} 个逻辑核心
+            <template v-if="service.cpu.loadAverage1m !== null">
+              · 1 分钟负载 {{ service.cpu.loadAverage1m }}
+            </template>
+          </p>
+        </div>
+        <div
+          v-for="metric in [
+            {
+              label: '宿主机 CPU',
+              value: service.cpu.hostUsagePercent,
+            },
+            {
+              label: 'Bun Server 进程 CPU',
+              value: service.cpu.processUsagePercent,
+            },
+          ]"
+          :key="metric.label"
+          class="space-y-2"
+        >
+          <div class="flex justify-between gap-4 text-sm">
+            <span class="font-medium">{{ metric.label }}</span>
+            <span class="text-muted-foreground">
+              {{ metric.value === null ? "采集中" : `${metric.value}%` }}
+            </span>
+          </div>
+          <div
+            role="progressbar"
+            :aria-label="metric.label"
+            aria-valuemin="0"
+            aria-valuemax="100"
+            :aria-valuenow="metric.value ?? 0"
+            class="h-3 overflow-hidden rounded-full bg-muted"
+          >
+            <div
+              class="h-full rounded-full bg-primary transition-[width] duration-500"
+              :style="{ width: `${metric.value ?? 0}%` }"
+            />
+          </div>
+        </div>
+        <p v-if="service.cpu.message" class="text-xs text-muted-foreground">
+          {{ service.cpu.message }}
+        </p>
+      </section>
+
+      <OperationGpuMonitor :gpu="gpu" />
+
       <section class="space-y-3">
         <div>
           <h3 class="text-sm font-medium">磁盘占用</h3>

package/template/apps/web/src/pages/system/components/OperationServiceMonitor.webtest.ts

@@ -17,6 +17,19 @@ describe("服务监控面板", () => {
             totalBytes: 10_000,
             usagePercent: 20.48,
           },
+          cpu: {
+            status: "available",
+            logicalCores: 16,
+            hostUsagePercent: 42.5,
+            processUsagePercent: 3.25,
+            loadAverage1m: 2.1,
+          },
+        },
+        gpu: {
+          status: "not-detected",
+          provider: "NVIDIA",
+          devices: [],
+          message: "未检测到 nvidia-smi。",
         },
         database: {
           status: "healthy",
@@ -46,7 +59,9 @@ describe("服务监控面板", () => {
           },
         },
       },
-      global: { stubs: { DiskUsageChart: true } },
+      global: {
+        stubs: { DiskUsageChart: true, OperationGpuMonitor: true },
+      },
     });
 
     expect(wrapper.text()).toContain("PostgreSQL 16.3");
@@ -60,5 +75,9 @@ describe("服务监控面板", () => {
     expect(wrapper.text()).toContain("宿主机总容量 未知");
     expect(wrapper.text()).toContain("容器未配置宿主机文件系统挂载");
     expect(wrapper.text()).toContain("每 60 秒刷新");
+    expect(wrapper.text()).toContain("16 个逻辑核心");
+    expect(
+      wrapper.get('[aria-label="宿主机 CPU"]').attributes("aria-valuenow"),
+    ).toBe("42.5");
   });
 });

package/template/apps/web/src/pages/system/components/SystemResourcePage.webtest.ts

@@ -32,7 +32,10 @@ vi.mock("@/services/auth-api", () => ({
   loadPasswordPolicy: api.loadPasswordPolicy,
 }));
 
-afterEach(() => vi.clearAllMocks());
+afterEach(() => {
+  vi.useRealTimers();
+  vi.clearAllMocks();
+});
 
 describe("SystemResourcePage", () => {
   api.loadPasswordPolicy.mockResolvedValue({
@@ -212,6 +215,8 @@ describe("SystemResourcePage", () => {
 
   // @windy-module system.audit begin
   test("审计页使用操作者、动作和时间筛选条件请求", async () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2026, 6, 20, 10, 20, 30));
     api.list.mockResolvedValue({ items: [], total: 0, page: 1, pageSize: 10 });
     const wrapper = mount(SystemResourcePage, {
       props: { config: systemResourceConfigs.auditLogs },
@@ -227,6 +232,14 @@ describe("SystemResourcePage", () => {
     });
     await flushPromises();
 
+    expect(api.list).toHaveBeenCalledWith(
+      "audit-logs",
+      expect.objectContaining({
+        occurredAfter: new Date(2026, 6, 20, 9, 20, 0, 0).toISOString(),
+        occurredBefore: new Date(2026, 6, 20, 10, 20, 59, 999).toISOString(),
+      }),
+    );
+
     await wrapper.get('[data-testid="audit-filter"]').trigger("click");
     await flushPromises();
 

package/template/apps/web/src/pages/system/components/ai-runtime/AiRuntimeActivityChart.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { Chart } from "@antv/g2";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  useTemplateRef,
+  watch,
+} from "vue";
+import type { AiRuntimeActivity } from "@/services/ai-runtime-api";
+import { formatTokenCount } from "../../ai-runtime-presenter";
+
+const props = defineProps<{ activity: readonly AiRuntimeActivity[] }>();
+const container = useTemplateRef<HTMLDivElement>("container");
+const hasData = computed(() => props.activity.some(({ runs }) => runs > 0));
+let chart: Chart | undefined;
+
+onMounted(renderChart);
+watch(() => props.activity, renderChart);
+onBeforeUnmount(destroyChart);
+
+async function renderChart() {
+  destroyChart();
+  if (!container.value || !hasData.value) return;
+  chart = new Chart({ container: container.value, autoFit: true, height: 300 });
+  chart.options({
+    type: "view",
+    data: props.activity,
+    children: [
+      {
+        type: "interval",
+        encode: { x: "date", y: "runs" },
+        style: { fill: "#0f766e", fillOpacity: 0.2 },
+      },
+      {
+        type: "line",
+        encode: { x: "date", y: "runs" },
+        style: { stroke: "#0f766e", lineWidth: 2 },
+      },
+      {
+        type: "point",
+        encode: { x: "date", y: "runs" },
+        style: { fill: "#0f766e", r: 2.5 },
+      },
+    ],
+    axis: {
+      x: { title: false, labelAutoRotate: false },
+      y: { title: "Run" },
+    },
+    tooltip: {
+      items: [
+        { field: "runs", name: "Run" },
+        {
+          field: "totalTokens",
+          name: "Token",
+          valueFormatter: formatTokenCount,
+        },
+      ],
+    },
+    animate: false,
+  });
+  await chart.render();
+}
+
+function destroyChart() {
+  chart?.destroy();
+  chart = undefined;
+  container.value?.replaceChildren();
+}
+</script>
+
+<template>
+  <div
+    v-if="hasData"
+    ref="container"
+    class="h-[300px] w-full"
+    aria-label="按 UTC 日历日聚合的 Agent Run 活动趋势图"
+  />
+  <p
+    v-else
+    class="grid h-[300px] place-items-center text-sm text-muted-foreground"
+  >
+    当前范围内还没有 Agent Run。
+  </p>
+</template>

package/template/apps/web/src/pages/system/components/ai-runtime/AiRuntimeCharts.webtest.ts

@@ -0,0 +1,82 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import AiRuntimeActivityChart from "./AiRuntimeActivityChart.vue";
+import AiRuntimeTokenByModelChart from "./AiRuntimeTokenByModelChart.vue";
+
+const chart = vi.hoisted(() => ({
+  destroy: vi.fn(),
+  options: vi.fn(),
+  render: vi.fn(async () => undefined),
+}));
+
+vi.mock("@antv/g2", () => ({
+  Chart: class {
+    destroy = chart.destroy;
+    options = chart.options;
+    render = chart.render;
+  },
+}));
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("AI Runtime 图表生命周期", () => {
+  test("活动图从有数据切为空数据时销毁旧实例", async () => {
+    const wrapper = mount(AiRuntimeActivityChart, {
+      props: {
+        activity: [
+          {
+            date: "2026-07-31",
+            runs: 1,
+            completed: 1,
+            failed: 0,
+            totalTokens: 10,
+          },
+        ],
+      },
+    });
+    await flushPromises();
+
+    await wrapper.setProps({ activity: [] });
+    await flushPromises();
+
+    expect(chart.render).toHaveBeenCalledTimes(1);
+    expect(chart.destroy).toHaveBeenCalledTimes(1);
+    expect(wrapper.text()).toContain("还没有 Agent Run");
+  });
+
+  test("模型 Token 图从有数据切为空数据时销毁旧实例", async () => {
+    const wrapper = mount(AiRuntimeTokenByModelChart, {
+      props: {
+        models: [
+          {
+            deploymentKey: "ai.openai-compatible",
+            model: "qwen",
+            attempts: 1,
+            inputTokens: 10,
+            outputTokens: 5,
+            cachedInputTokens: 0,
+            reasoningTokens: 0,
+            totalTokens: 15,
+            unknownUsageCount: 0,
+          },
+        ],
+      },
+    });
+    await flushPromises();
+
+    expect(chart.options).toHaveBeenCalledWith(
+      expect.objectContaining({
+        encode: { x: "model", y: "totalTokens" },
+      }),
+    );
+    expect(chart.options.mock.calls[0]?.[0]).not.toHaveProperty("transform");
+    await wrapper.setProps({ models: [] });
+    await flushPromises();
+
+    expect(chart.render).toHaveBeenCalledTimes(1);
+    expect(chart.destroy).toHaveBeenCalledTimes(1);
+    expect(wrapper.text()).toContain("没有已上报");
+  });
+});