From 0ecaea2fb269bb79396bcb5b012f419b0380f286 Mon Sep 17 00:00:00 2001
From: RuoJi6 <RuoJi6@users.noreply.github.com>
Date: Mon, 26 Oct 2026 09:14:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E4=BB=BB=E5=8A=A1=E5=8F=91?=
 =?UTF-8?q?=E7=8E=B0=20tab=20=E6=94=AF=E6=8C=81=E4=B8=A5=E9=87=8D=E5=BA=A6?=
 =?UTF-8?q?=E7=AD=9B=E9=80=89=E4=B8=8E=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

对齐全局发现页：共用 severity chip、Case 列表 sort=severity，
原始上报列表前端按严重度过滤并排序。
---
 web/src/app/(main)/function/findings/page.tsx | 12 +---
 .../tasks/detail/_tabs/findings-tab.tsx       | 53 ++++++++++-----
 web/src/lib/finding-severity.test.mjs         | 68 +++++++++++++++++++
 web/src/lib/finding-severity.ts               | 19 ++++++
 web/src/lib/status.ts                         |  8 +++
 5 files changed, 134 insertions(+), 26 deletions(-)
 create mode 100644 web/src/lib/finding-severity.test.mjs
 create mode 100644 web/src/lib/finding-severity.ts

diff --git a/web/src/app/(main)/function/findings/page.tsx b/web/src/app/(main)/function/findings/page.tsx
index 4c59d2a..4ce291c 100644
--- a/web/src/app/(main)/function/findings/page.tsx
+++ b/web/src/app/(main)/function/findings/page.tsx
@@ -42,7 +42,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { api } from "@/lib/api";
 import { getLocalStorageValue, setLocalStorageValue } from "@/lib/local-storage.client";
-import { statusMeta } from "@/lib/status";
+import { SEVERITY_FILTER_OPTIONS, statusMeta } from "@/lib/status";
 import type {
   ActiveFindingRetest,
   Finding,
@@ -918,15 +918,7 @@ export default function FindingsPage() {
             size="sm"
             spacing={0}
           >
-            {(
-              [
-                ["all", "全部"],
-                ["critical", "严重"],
-                ["high", "高危"],
-                ["medium", "中危"],
-                ["low", "低危"],
-              ] as const
-            ).map(([val, label]) => (
+            {SEVERITY_FILTER_OPTIONS.map(([val, label]) => (
               <ToggleGroupItem key={val} value={val} aria-label={`按${label}等级筛选`}>
                 {label}
               </ToggleGroupItem>
diff --git a/web/src/app/(main)/function/tasks/detail/_tabs/findings-tab.tsx b/web/src/app/(main)/function/tasks/detail/_tabs/findings-tab.tsx
index b643264..679e23f 100644
--- a/web/src/app/(main)/function/tasks/detail/_tabs/findings-tab.tsx
+++ b/web/src/app/(main)/function/tasks/detail/_tabs/findings-tab.tsx
@@ -12,10 +12,12 @@ import { StatusBadge } from "@/components/status-badge";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger } from "@/components/ui/select";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { api } from "@/lib/api";
+import { filterAndSortFindings } from "@/lib/finding-severity";
 import { useStoredSortPreference } from "@/lib/sort-preference";
-import { statusMeta } from "@/lib/status";
-import type { Finding, FindingStatus } from "@/lib/types";
+import { SEVERITY_FILTER_OPTIONS, statusMeta } from "@/lib/status";
+import type { Finding, FindingStatus, Severity } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
 type FindingSortField = "time";
@@ -140,6 +142,7 @@ function Row({
 
 export function FindingsTab({ taskId }: { taskId: string }) {
   const [findings, setFindings] = React.useState<Finding[]>([]);
+  const [severity, setSeverity] = React.useState<"all" | Severity>("all");
   const [sortPreference, setSortPreference] = useStoredSortPreference(
     FINDING_SORT_PREFERENCE_KEY,
     FINDING_SORT_FIELDS,
@@ -180,20 +183,32 @@ export function FindingsTab({ taskId }: { taskId: string }) {
     }
   }, []);
 
-  const items = findings
-    .filter((f) => f.task_id === taskId || f.inherited)
-    .sort((a, b) => {
-      const compared = Date.parse(a.ts) - Date.parse(b.ts);
-      if (compared !== 0) return sortPreference.direction === "asc" ? compared : -compared;
-      return b.id.localeCompare(a.id, undefined, { numeric: true });
-    });
+  // Discover inherited sources before severity filtering; finding-cases owns folder matching.
+  const taskFindings = findings.filter((f) => f.task_id === taskId || f.inherited);
+  const items = filterAndSortFindings(taskFindings, severity, sortPreference.direction);
 
   return (
     <div className="flex flex-col gap-4">
-      <FindingCaseList query={{ task: taskId, sort: "time" }} />
+      <ToggleGroup
+        type="single"
+        value={severity}
+        onValueChange={(value) => value && setSeverity(value as "all" | Severity)}
+        variant="outline"
+        size="sm"
+        spacing={0}
+      >
+        {SEVERITY_FILTER_OPTIONS.map(([val, label]) => (
+          <ToggleGroupItem key={val} value={val} aria-label={`按${label}等级筛选`}>
+            {label}
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+      <FindingCaseList
+        query={{ task: taskId, severity: severity === "all" ? undefined : severity, sort: "severity" }}
+      />
       {[
         ...new Set(
-          items
+          taskFindings
             .filter((f) => f.inherited)
             .map((f) => f.source_task_id)
             .filter((id): id is string => !!id),
@@ -201,7 +216,11 @@ export function FindingsTab({ taskId }: { taskId: string }) {
       ].map((source) => (
         <div key={source}>
           <p className="mb-2 text-sm text-muted-foreground">继承任务 #{source} · 只读</p>
-          <FindingCaseList query={{ task: source, sort: "time" }} contextTask={taskId} readOnly />
+          <FindingCaseList
+            query={{ task: source, severity: severity === "all" ? undefined : severity, sort: "severity" }}
+            contextTask={taskId}
+            readOnly
+          />
         </div>
       ))}
       <details>
@@ -209,11 +228,11 @@ export function FindingsTab({ taskId }: { taskId: string }) {
         <Card className="overflow-hidden py-0">
           <CardContent className="px-0">
             <div className="flex items-center border-b px-4 py-2 text-xs text-muted-foreground">
-              <span className="min-w-0 flex-1">漏洞</span>
+              <span className="min-w-0 flex-1">漏洞（按严重度排序）</span>
               <button
                 type="button"
                 className="inline-flex items-center gap-1 outline-none focus-visible:underline"
-                aria-label={`发现时间当前${sortPreference.direction === "asc" ? "正序" : "倒序"}，点击切换排序方向`}
+                aria-label={`同等级发现时间当前${sortPreference.direction === "asc" ? "正序" : "倒序"}，点击切换排序方向`}
                 onClick={() =>
                   setSortPreference((current) => ({
                     field: "time",
@@ -221,7 +240,7 @@ export function FindingsTab({ taskId }: { taskId: string }) {
                   }))
                 }
               >
-                <span>发现时间</span>
+                <span>同等级发现时间</span>
                 {sortPreference.direction === "asc" ? (
                   <ArrowUpIcon className="size-3.5" />
                 ) : (
@@ -233,7 +252,9 @@ export function FindingsTab({ taskId }: { taskId: string }) {
               <Row key={f.id} f={f} contextTaskId={taskId} onStatus={onStatus} />
             ))}
             {items.length === 0 && (
-              <p className="px-4 py-8 text-center text-sm text-muted-foreground">本任务及直接关联任务暂无确认发现。</p>
+              <p className="px-4 py-8 text-center text-sm text-muted-foreground">
+                {severity === "all" ? "本任务及直接关联任务暂无确认发现。" : "当前风险等级暂无原始上报。"}
+              </p>
             )}
           </CardContent>
         </Card>
diff --git a/web/src/lib/finding-severity.test.mjs b/web/src/lib/finding-severity.test.mjs
new file mode 100644
index 0000000..3b70f90
--- /dev/null
+++ b/web/src/lib/finding-severity.test.mjs
@@ -0,0 +1,68 @@
+import { filterAndSortFindings } from "./finding-severity.ts";
+import assert from "node:assert/strict";
+import test from "node:test";
+
+const finding = (id, severity, ts, extra = {}) => ({
+  id,
+  severity,
+  ts,
+  vulnclass: "XSS",
+  status: "confirmed",
+  summary: id,
+  evidence: "",
+  ...extra,
+});
+
+const rows = [
+  finding("1", "low", "2026-10-26T12:00:00Z"),
+  finding("2", "high", "2026-10-25T12:00:00Z"),
+  finding("3", "critical", "2026-10-24T12:00:00Z"),
+  finding("4", "medium", "2026-10-26T12:00:00Z"),
+  finding("5", "high", "2026-10-26T12:00:00Z", { inherited: true, source_task_id: "source" }),
+];
+
+test("all keeps every report and orders severity before newest time", () => {
+  assert.deepEqual(
+    filterAndSortFindings(rows, "all", "desc").map((row) => row.id),
+    ["3", "5", "2", "4", "1"],
+  );
+});
+
+test("each severity filters reports including inherited reports", () => {
+  for (const severity of ["critical", "high", "medium", "low"]) {
+    const items = filterAndSortFindings(rows, severity, "desc");
+    assert.equal(items.length, severity === "high" ? 2 : 1);
+    assert.ok(items.every((row) => row.severity === severity));
+  }
+  assert.equal(filterAndSortFindings(rows, "high", "desc")[0].source_task_id, "source");
+});
+
+test("ascending time changes only the order within a severity", () => {
+  assert.deepEqual(
+    filterAndSortFindings(rows, "all", "asc").map((row) => row.id),
+    ["3", "2", "5", "4", "1"],
+  );
+});
+
+test("matching severity and timestamp use descending numeric IDs", () => {
+  const tied = [finding("2", "high", rows[0].ts), finding("10", "high", rows[0].ts)];
+  for (const direction of ["asc", "desc"]) {
+    assert.deepEqual(
+      filterAndSortFindings(tied, "all", direction).map((row) => row.id),
+      ["10", "2"],
+    );
+  }
+});
+
+test("empty input and a severity without matches return an empty list", () => {
+  assert.deepEqual(filterAndSortFindings([], "all", "desc"), []);
+  assert.deepEqual(filterAndSortFindings([rows[0]], "critical", "desc"), []);
+});
+
+test("filtering and sorting preserve the polling snapshot", () => {
+  const snapshot = Object.freeze(rows.map((row) => Object.freeze({ ...row })));
+  const before = [...snapshot];
+  assert.notEqual(filterAndSortFindings(snapshot, "all", "desc"), snapshot);
+  filterAndSortFindings(snapshot, "high", "asc");
+  assert.deepEqual(snapshot, before);
+});
diff --git a/web/src/lib/finding-severity.ts b/web/src/lib/finding-severity.ts
new file mode 100644
index 0000000..84184e8
--- /dev/null
+++ b/web/src/lib/finding-severity.ts
@@ -0,0 +1,19 @@
+import type { Finding, Severity } from "./types";
+
+const SEVERITY_RANK: Record<Severity, number> = { critical: 4, high: 3, medium: 2, low: 1 };
+
+export function filterAndSortFindings(
+  findings: readonly Finding[],
+  severity: "all" | Severity,
+  timeDirection: "asc" | "desc",
+): Finding[] {
+  return findings
+    .filter((finding) => severity === "all" || finding.severity === severity)
+    .sort((a, b) => {
+      const severityCompared = (SEVERITY_RANK[b.severity] ?? 0) - (SEVERITY_RANK[a.severity] ?? 0);
+      if (severityCompared !== 0) return severityCompared;
+      const timeCompared = Date.parse(a.ts) - Date.parse(b.ts);
+      if (timeCompared !== 0) return timeDirection === "asc" ? timeCompared : -timeCompared;
+      return b.id.localeCompare(a.id, undefined, { numeric: true });
+    });
+}
diff --git a/web/src/lib/status.ts b/web/src/lib/status.ts
index 2593779..436cd16 100644
--- a/web/src/lib/status.ts
+++ b/web/src/lib/status.ts
@@ -63,6 +63,14 @@ const severity: Record<string, StatusMeta> = {
   low: { label: "低危", tone: "slate" },
 };
 
+export const SEVERITY_FILTER_OPTIONS = [
+  ["all", "全部"],
+  ["critical", severity.critical.label],
+  ["high", severity.high.label],
+  ["medium", severity.medium.label],
+  ["low", severity.low.label],
+] as const;
+
 const finding: Record<string, StatusMeta> = {
   pending: { label: "待处理", tone: "amber" },
   in_progress: { label: "处理中", tone: "blue" },