create-windy 0.4.1 → 0.5.0

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

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { shallowRef } from "vue";
+import { SearchIcon } from "@lucide/vue";
+import { Button } from "@/components/ui/button";
+import type { AiRuntimeActor, AiRuntimeRange } from "@/services/ai-runtime-api";
+
+defineProps<{
+  range: AiRuntimeRange;
+  actorHandle?: string;
+  actors: readonly AiRuntimeActor[];
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:range": [value: AiRuntimeRange];
+  "update:actorHandle": [value: string | undefined];
+  "search:actors": [value: string];
+}>();
+const actorSearch = shallowRef("");
+
+const ranges: readonly { value: AiRuntimeRange; label: string }[] = [
+  { value: "day", label: "近 24 小时" },
+  { value: "month", label: "近 30 天" },
+  { value: "retained", label: "保留期" },
+];
+
+function selectActor(event: Event) {
+  const value = (event.target as HTMLSelectElement).value;
+  emit("update:actorHandle", value || undefined);
+}
+
+function searchActors() {
+  emit("search:actors", actorSearch.value.trim());
+}
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-3 rounded-lg border bg-card p-3 md:flex-row md:items-center md:justify-between"
+  >
+    <div class="inline-flex w-fit gap-1 rounded-md bg-muted p-1">
+      <Button
+        v-for="item in ranges"
+        :key="item.value"
+        size="sm"
+        :variant="range === item.value ? 'secondary' : 'ghost'"
+        :disabled="disabled"
+        @click="emit('update:range', item.value)"
+      >
+        {{ item.label }}
+      </Button>
+    </div>
+
+    <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
+      <label class="flex items-center gap-2 text-sm text-muted-foreground">
+        查找
+        <span class="flex">
+          <input
+            v-model="actorSearch"
+            class="h-9 w-44 rounded-l-md border border-input bg-background px-3 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30"
+            placeholder="姓名或账号"
+            :disabled="disabled"
+            @keyup.enter="searchActors"
+          />
+          <Button
+            class="rounded-l-none"
+            size="icon"
+            variant="outline"
+            :disabled="disabled"
+            aria-label="搜索操作者"
+            @click="searchActors"
+          >
+            <SearchIcon />
+          </Button>
+        </span>
+      </label>
+      <label class="flex items-center gap-2 text-sm text-muted-foreground">
+        操作者
+        <select
+          class="h-9 min-w-48 rounded-md border border-input bg-background px-3 text-sm text-foreground shadow-xs outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30"
+          :value="actorHandle || ''"
+          :disabled="disabled"
+          @change="selectActor"
+        >
+          <option value="">全部操作者</option>
+          <option
+            v-for="actor in actors"
+            :key="actor.handle"
+            :value="actor.handle"
+          >
+            {{ actor.displayName
+            }}{{ actor.username ? `（${actor.username}）` : "" }}
+          </option>
+        </select>
+      </label>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,27 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import AiRuntimeFilters from "./AiRuntimeFilters.vue";
+
+describe("AI Runtime 操作者筛选", () => {
+  test("按姓名搜索后选择服务端返回的操作者", async () => {
+    const wrapper = mount(AiRuntimeFilters, {
+      props: {
+        range: "day",
+        actors: [
+          {
+            handle: "actor_opaque",
+            displayName: "张三",
+            username: "zhangsan",
+          },
+        ],
+      },
+    });
+
+    await wrapper.get('input[placeholder="姓名或账号"]').setValue("张三");
+    await wrapper.get('button[aria-label="搜索操作者"]').trigger("click");
+    await wrapper.get("select").setValue("actor_opaque");
+
+    expect(wrapper.emitted("search:actors")).toEqual([["张三"]]);
+    expect(wrapper.emitted("update:actorHandle")).toEqual([["actor_opaque"]]);
+  });
+});

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

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { AiRuntimeRunDetail } from "@/services/ai-runtime-api";
+import {
+  cacheStatusLabel,
+  formatDateTime,
+  formatDuration,
+  formatTokenCount,
+  runStatusLabel,
+} from "../../ai-runtime-presenter";
+
+defineProps<{
+  detail?: AiRuntimeRunDetail;
+  loading?: boolean;
+  error?: string;
+}>();
+const open = defineModel<boolean>("open", { required: true });
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent class="max-h-[85vh] max-w-5xl overflow-y-auto">
+      <DialogHeader>
+        <DialogTitle>Agent Run 详情</DialogTitle>
+        <DialogDescription>
+          只展示受治理的运行元数据和计量事实，不包含输入、输出正文或 Tool 参数。
+        </DialogDescription>
+      </DialogHeader>
+
+      <p v-if="loading" class="py-12 text-center text-sm text-muted-foreground">
+        正在加载运行详情…
+      </p>
+      <p v-else-if="error" class="py-8 text-sm text-destructive">
+        {{ error }}
+      </p>
+      <template v-else-if="detail">
+        <dl class="grid gap-x-6 gap-y-4 text-sm sm:grid-cols-2 lg:grid-cols-4">
+          <div>
+            <dt class="text-muted-foreground">结果</dt>
+            <dd class="mt-1">
+              <Badge variant="secondary">{{
+                runStatusLabel(detail.status)
+              }}</Badge>
+            </dd>
+          </div>
+          <div>
+            <dt class="text-muted-foreground">操作者</dt>
+            <dd class="mt-1 font-medium">
+              {{ detail.actor?.displayName || "已删除或服务主体" }}
+            </dd>
+          </div>
+          <div>
+            <dt class="text-muted-foreground">总耗时</dt>
+            <dd class="mt-1">{{ formatDuration(detail.durationMs) }}</dd>
+          </div>
+          <div>
+            <dt class="text-muted-foreground">总 Token</dt>
+            <dd class="mt-1">{{ formatTokenCount(detail.totalTokens) }}</dd>
+          </div>
+          <div class="sm:col-span-2">
+            <dt class="text-muted-foreground">Operation</dt>
+            <dd class="mt-1 break-all font-mono text-xs">
+              {{ detail.operationKey }}
+            </dd>
+          </div>
+          <div>
+            <dt class="text-muted-foreground">开始时间</dt>
+            <dd class="mt-1">{{ formatDateTime(detail.startedAt) }}</dd>
+          </div>
+          <div>
+            <dt class="text-muted-foreground">结束时间</dt>
+            <dd class="mt-1">{{ formatDateTime(detail.finishedAt) }}</dd>
+          </div>
+          <div v-if="detail.traceId" class="sm:col-span-2">
+            <dt class="text-muted-foreground">Trace ID</dt>
+            <dd class="mt-1 break-all font-mono text-xs">
+              {{ detail.traceId }}
+            </dd>
+          </div>
+          <div v-if="detail.safeErrorCode" class="sm:col-span-2">
+            <dt class="text-muted-foreground">安全错误码</dt>
+            <dd class="mt-1 font-mono text-xs">{{ detail.safeErrorCode }}</dd>
+          </div>
+        </dl>
+
+        <section class="space-y-3">
+          <h3 class="text-sm font-medium">Provider Attempts</h3>
+          <div class="overflow-hidden rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>#</TableHead>
+                  <TableHead>模型</TableHead>
+                  <TableHead>结果</TableHead>
+                  <TableHead>Token</TableHead>
+                  <TableHead>缓存</TableHead>
+                  <TableHead>首 Token</TableHead>
+                  <TableHead>耗时</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow
+                  v-for="attempt in detail.attemptItems"
+                  :key="attempt.sequence"
+                >
+                  <TableCell>{{ attempt.sequence }}</TableCell>
+                  <TableCell>
+                    <div>
+                      {{ attempt.reportedModel || attempt.requestedModel }}
+                    </div>
+                    <div class="text-xs text-muted-foreground">
+                      {{ attempt.deploymentKey }}
+                    </div>
+                  </TableCell>
+                  <TableCell>{{ runStatusLabel(attempt.outcome) }}</TableCell>
+                  <TableCell>{{
+                    formatTokenCount(attempt.totalTokens)
+                  }}</TableCell>
+                  <TableCell>{{
+                    cacheStatusLabel(attempt.cacheStatus)
+                  }}</TableCell>
+                  <TableCell>{{
+                    formatDuration(attempt.firstTokenLatencyMs)
+                  }}</TableCell>
+                  <TableCell>{{
+                    formatDuration(attempt.durationMs)
+                  }}</TableCell>
+                </TableRow>
+                <TableRow v-if="!detail.attemptItems.length">
+                  <TableCell
+                    colspan="7"
+                    class="h-20 text-center text-muted-foreground"
+                  >
+                    没有可展示的 Provider Attempt。
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </div>
+        </section>
+      </template>
+
+      <DialogFooter>
+        <DialogClose as-child>
+          <Button variant="outline">关闭</Button>
+        </DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import DataPagination from "@/components/common/DataPagination.vue";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type {
+  AiRuntimePage,
+  AiRuntimeRunItem,
+} from "@/services/ai-runtime-api";
+import {
+  cacheStatusLabel,
+  formatDateTime,
+  formatDuration,
+  formatTokenCount,
+  runStatusLabel,
+} from "../../ai-runtime-presenter";
+
+defineProps<{
+  runs?: AiRuntimePage<AiRuntimeRunItem>;
+  loading?: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [runId: string];
+  "update:page": [page: number];
+  "update:page-size": [pageSize: number];
+}>();
+
+function statusVariant(status: string) {
+  return status === "failed"
+    ? "destructive"
+    : status === "completed"
+      ? "secondary"
+      : "outline";
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="overflow-hidden rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>开始时间</TableHead>
+            <TableHead>操作者</TableHead>
+            <TableHead>Operation</TableHead>
+            <TableHead>结果</TableHead>
+            <TableHead>模型</TableHead>
+            <TableHead class="text-right">Token</TableHead>
+            <TableHead>缓存</TableHead>
+            <TableHead class="text-right">耗时</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <template v-if="loading && !runs?.items.length">
+            <TableRow v-for="row in 4" :key="row">
+              <TableCell v-for="column in 8" :key="column">
+                <Skeleton class="h-4 w-full max-w-28" />
+              </TableCell>
+            </TableRow>
+          </template>
+          <TableRow v-else-if="!runs?.items.length">
+            <TableCell
+              colspan="8"
+              class="h-24 text-center text-muted-foreground"
+            >
+              当前筛选范围内没有 Agent Run。
+            </TableCell>
+          </TableRow>
+          <TableRow
+            v-for="run in runs?.items"
+            v-else
+            :key="run.runId"
+            class="cursor-pointer"
+            tabindex="0"
+            @click="emit('select', run.runId)"
+            @keyup.enter="emit('select', run.runId)"
+          >
+            <TableCell class="whitespace-nowrap">
+              {{ formatDateTime(run.startedAt) }}
+            </TableCell>
+            <TableCell>
+              <div class="font-medium">
+                {{ run.actor?.displayName || "已删除或服务主体" }}
+              </div>
+              <div
+                v-if="run.actor?.username"
+                class="text-xs text-muted-foreground"
+              >
+                {{ run.actor.username }}
+              </div>
+            </TableCell>
+            <TableCell class="max-w-56 truncate font-mono text-xs">
+              {{ run.operationKey }}
+            </TableCell>
+            <TableCell>
+              <Badge :variant="statusVariant(run.status)">
+                {{ runStatusLabel(run.status) }}
+              </Badge>
+            </TableCell>
+            <TableCell>{{ run.model || "未上报" }}</TableCell>
+            <TableCell class="text-right tabular-nums">
+              {{ formatTokenCount(run.totalTokens) }}
+            </TableCell>
+            <TableCell>{{ cacheStatusLabel(run.cacheStatus) }}</TableCell>
+            <TableCell class="text-right tabular-nums">
+              {{ formatDuration(run.durationMs) }}
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+
+    <DataPagination
+      v-if="runs"
+      :page="runs.page"
+      :page-size="runs.pageSize"
+      :total="runs.total"
+      @update:page="emit('update:page', $event)"
+      @update:page-size="emit('update:page-size', $event)"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  ActivityIcon,
+  CircleCheckIcon,
+  DatabaseIcon,
+  GaugeIcon,
+} from "@lucide/vue";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type { AiRuntimeSummary } from "@/services/ai-runtime-api";
+import {
+  formatCoverage,
+  formatPercent,
+  formatTokenCount,
+} from "../../ai-runtime-presenter";
+
+const props = defineProps<{ summary: AiRuntimeSummary }>();
+
+const tokenAttemptCount = computed(() =>
+  props.summary.byModel.reduce((total, model) => total + model.attempts, 0),
+);
+const displayedTokenTotal = computed(() =>
+  tokenAttemptCount.value > 0 && props.summary.tokens.coverageRate === 0
+    ? null
+    : props.summary.tokens.total,
+);
+const metrics = computed(() => [
+  {
+    label: "Token 总量",
+    value: formatTokenCount(displayedTokenTotal.value),
+    detail: `${formatCoverage(props.summary.tokens.coverageRate)} · 输入 ${formatTokenCount(props.summary.tokens.input)} / 输出 ${formatTokenCount(props.summary.tokens.output)}`,
+    icon: DatabaseIcon,
+  },
+  {
+    label: "Run 成功率",
+    value: formatPercent(props.summary.runs.successRate),
+    detail: `${props.summary.runs.completed} 成功 · ${props.summary.runs.failed} 失败`,
+    icon: CircleCheckIcon,
+  },
+  {
+    label: "Attempt 缓存命中率",
+    value: formatPercent(props.summary.cache.hitRate),
+    detail: `${formatCoverage(props.summary.cache.coverageRate)} · ${props.summary.cache.unknown} 次未上报`,
+    icon: GaugeIcon,
+  },
+  {
+    label: "Run 总数",
+    value: formatTokenCount(props.summary.runs.total),
+    detail: `${props.summary.runs.inProgress} 运行中 · ${props.summary.runs.cancelled} 已取消`,
+    icon: ActivityIcon,
+  },
+]);
+</script>
+
+<template>
+  <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+    <Card v-for="metric in metrics" :key="metric.label">
+      <CardHeader class="flex-row items-start justify-between gap-3 pb-2">
+        <div class="space-y-1">
+          <CardDescription>{{ metric.label }}</CardDescription>
+          <CardTitle class="text-3xl tabular-nums">
+            {{ metric.value }}
+          </CardTitle>
+        </div>
+        <component
+          :is="metric.icon"
+          class="size-5 text-muted-foreground"
+          aria-hidden="true"
+        />
+      </CardHeader>
+      <CardContent class="text-xs leading-5 text-muted-foreground">
+        {{ metric.detail }}
+      </CardContent>
+    </Card>
+  </div>
+</template>

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

@@ -0,0 +1,102 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import AiRuntimeSummaryCards from "./AiRuntimeSummaryCards.vue";
+
+describe("AI Runtime 汇总卡", () => {
+  test("无 Attempt 时清楚区分未知成功率和真实零 Token", () => {
+    const wrapper = mount(AiRuntimeSummaryCards, {
+      props: {
+        summary: {
+          generatedAt: "2026-07-31T00:00:00.000Z",
+          reportingAvailableFrom: "2026-07-01T00:00:00.000Z",
+          retentionDays: 90,
+          runs: {
+            total: 0,
+            completed: 0,
+            failed: 0,
+            cancelled: 0,
+            inProgress: 0,
+            successRate: null,
+          },
+          cache: {
+            hit: 0,
+            miss: 0,
+            unknown: 3,
+            hitRate: null,
+            tokenRate: null,
+            coverageRate: 0,
+          },
+          tokens: {
+            input: 0,
+            output: 0,
+            cachedInput: 0,
+            reasoning: 0,
+            total: 0,
+            coverageRate: 0,
+          },
+          byModel: [],
+          activity: [],
+        },
+      },
+    });
+
+    expect(wrapper.text()).toContain("Token 总量");
+    expect(wrapper.text()).toContain("0");
+    expect(wrapper.text()).toContain("Run 成功率");
+    expect(wrapper.text().match(/未上报/g)?.length).toBeGreaterThanOrEqual(2);
+    expect(wrapper.text()).not.toContain("100%");
+  });
+
+  test("已有 Attempt 但 Token 覆盖为零时显示未上报", () => {
+    const wrapper = mount(AiRuntimeSummaryCards, {
+      props: {
+        summary: {
+          generatedAt: "2026-07-31T00:00:00.000Z",
+          reportingAvailableFrom: "2026-07-31T00:00:00.000Z",
+          retentionDays: 90,
+          runs: {
+            total: 1,
+            completed: 1,
+            failed: 0,
+            cancelled: 0,
+            inProgress: 0,
+            successRate: 1,
+          },
+          cache: {
+            hit: 0,
+            miss: 0,
+            unknown: 1,
+            hitRate: null,
+            tokenRate: null,
+            coverageRate: 0,
+          },
+          tokens: {
+            input: 0,
+            output: 0,
+            cachedInput: 0,
+            reasoning: 0,
+            total: 0,
+            coverageRate: 0,
+          },
+          byModel: [
+            {
+              deploymentKey: "ai.openai-compatible",
+              model: "qwen",
+              attempts: 1,
+              inputTokens: 0,
+              outputTokens: 0,
+              cachedInputTokens: 0,
+              reasoningTokens: 0,
+              totalTokens: 0,
+              unknownUsageCount: 1,
+            },
+          ],
+          activity: [],
+        },
+      },
+    });
+
+    expect(wrapper.get(".text-3xl").text()).toBe("未上报");
+    expect(wrapper.text()).toContain("覆盖 0.0%");
+  });
+});