@kernel-sig/console 0.1.0

package/frontend/src/pages/branches/BranchDetailPage.tsx

@@ -0,0 +1,632 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import { Segmented } from 'antd'
+import { ArrowLeft, ExternalLink } from 'lucide-react'
+import { useState } from 'react'
+
+import { KIND_META, type PRKind } from '@/api/classification'
+import { useCurrentRepository } from '@/hooks/use-current-repository'
+import {
+  BRANCH_KIND_META,
+  sigApi,
+  type PeriodSummary,
+  type ReleasePatch,
+  type ReleaseReport,
+} from '@/api/sig'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardBody, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { CHART_THEME, chartColor } from '@/components/ui/chart-theme'
+import { LazyChart } from '@/components/ui/lazy-chart'
+import type { EChartsOption } from '@/components/ui/echart'
+import { EmptyState } from '@/components/ui/empty-state'
+import { Skeleton } from '@/components/ui/skeleton'
+import { cn, formatNumber, formatRelativeTime } from '@/lib/utils'
+
+type Granularity = 'month' | 'biweek'
+
+const GRANULARITY_LABEL: Record<Granularity, string> = { month: '按月', biweek: '按双周' }
+
+/**
+ * 单个版本的页面。
+ *
+ * 顺序按维护者提问的频率排，而不是按数据表的结构排：这个版本现在什么状态、
+ * 谁负责、最近几期在合什么、上一次发版说了什么。
+ *
+ * 分期总结给出**连续多期**而不是只给上一期：单期只能回答"上个月合了多少"，
+ * 看不出"这个版本是在收敛还是在堆积"—— 后者才是要判断的事。
+ */
+export function BranchDetailPage({ branch }: { branch: string }) {
+  // 默认双周：例会就是双周节奏，维护者看的是"这一期例会要报什么"
+  const [granularity, setGranularity] = useState<Granularity>('biweek')
+  const [selected, setSelected] = useState(0)
+
+  const { repository, isLoading: reposLoading } = useCurrentRepository()
+
+  const { data: branches } = useQuery({
+    queryKey: ['branches', repository?.id],
+    queryFn: () => sigApi.branches(repository!.id),
+    enabled: Boolean(repository),
+  })
+  const meta = branches?.find((item) => item.name === branch)
+
+  const { data: timeline } = useQuery({
+    queryKey: ['branch-timeline', repository?.id, branch, granularity],
+    queryFn: () => sigApi.branchTimeline(repository!.id, branch, granularity, 12),
+    enabled: Boolean(repository),
+  })
+
+  const { data: periods } = useQuery({
+    queryKey: ['branch-periods', repository?.id, branch, granularity],
+    queryFn: () => sigApi.branchPeriods(repository!.id, branch, granularity, 8),
+    enabled: Boolean(repository),
+  })
+
+  const { data: notes } = useQuery({
+    queryKey: ['release-notes', repository?.id, branch],
+    queryFn: () => sigApi.releaseNotes(repository!.id, branch, 12),
+    enabled: Boolean(repository),
+  })
+
+  if (reposLoading) return <Skeleton className="h-64 w-full" />
+  if (!repository) return <EmptyState title="尚未纳管仓库" />
+
+  const period = periods?.[Math.min(selected, (periods?.length ?? 1) - 1)]
+  const recentTotal = (periods ?? []).reduce((sum, item) => sum + item.total, 0)
+  const recentCves = (periods ?? []).reduce((sum, item) => sum + item.cve_count, 0)
+
+  return (
+    <div className="space-y-5">
+      <Link
+        to="/branches"
+        className="inline-flex items-center gap-1.5 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
+      >
+        <ArrowLeft className="size-3.5" aria-hidden />
+        返回版本与分支
+      </Link>
+
+      <header className="space-y-2.5">
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+          <h1 className="font-mono text-base font-semibold tracking-tight">{branch}</h1>
+          {meta && (
+            <Badge tone="neutral" className="font-normal">
+              {BRANCH_KIND_META[meta.kind]?.label ?? meta.kind}
+            </Badge>
+          )}
+          {meta?.upstream_base && (
+            <span className="text-xs text-[var(--color-text-muted)]">
+              上游基线 {meta.upstream_base}
+            </span>
+          )}
+          {meta?.latest_tag && (
+            <span className="font-mono text-xs text-[var(--color-text-secondary)]">
+              当前 tag {meta.latest_tag}
+            </span>
+          )}
+          {meta?.last_merged_at && (
+            <span className="text-xs text-[var(--color-text-muted)]">
+              最近合入 {formatRelativeTime(meta.last_merged_at)}
+            </span>
+          )}
+        </div>
+
+        {meta?.note && (
+          <p className="max-w-3xl text-sm leading-relaxed text-[var(--color-text-secondary)]">
+            {meta.note}
+          </p>
+        )}
+
+        {(meta?.keepers.length ?? 0) > 0 && (
+          <div className="flex flex-wrap items-center gap-1.5">
+            <span className="text-xs text-[var(--color-text-muted)]">负责人</span>
+            {meta!.keepers.map((login) => (
+              <Link
+                key={login}
+                to="/members"
+                search={{ member: login }}
+                title={`在成员页查看 @${login}`}
+                className="rounded-full border border-[var(--color-border-subtle)] px-2 py-0.5 font-mono text-xs hover:border-[var(--color-border-strong)] hover:text-[var(--color-accent)]"
+              >
+                @{login}
+              </Link>
+            ))}
+          </div>
+        )}
+
+        {/* 列出归并的上游写法：同名分支被合并统计时，得让人能核对合的是哪些 */}
+        {meta && meta.raw_names.length > 1 && (
+          <p className="text-xs text-[var(--color-text-muted)]">
+            上游写法：{meta.raw_names.join('、')}
+          </p>
+        )}
+      </header>
+
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        <Metric
+          label="待处理"
+          value={meta?.open_count ?? 0}
+          to={{ search: { state: 'open', branch: [branch] } }}
+        />
+        <Metric label="历史合入" value={meta?.merged_count ?? 0} />
+        <Metric label="近 30 天合入" value={meta?.merged_recent ?? 0} />
+        <Metric
+          label={`近 ${periods?.length ?? 0} 期合入`}
+          value={recentTotal}
+          hint={periods && periods.length > 0 ? `其中 CVE ${formatNumber(recentCves)} 个` : undefined}
+        />
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <CardTitle>合入趋势</CardTitle>
+            <GranularityToggle value={granularity} onChange={setGranularity} />
+          </div>
+        </CardHeader>
+        <CardContent>
+          {!timeline || timeline.length === 0 ? (
+            <p className="text-sm text-[var(--color-text-muted)]">该分支暂无合入记录。</p>
+          ) : (
+            <LazyChart height={180} option={timelineOption(timeline, granularity)} />
+          )}
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-4 lg:grid-cols-[3fr_2fr]">
+        <Card>
+          <CardHeader>
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <CardTitle>分期合入总结</CardTitle>
+              <GranularityToggle value={granularity} onChange={setGranularity} />
+            </div>
+          </CardHeader>
+          <CardContent className="px-0 pb-2">
+            {!periods || periods.length === 0 ? (
+              <p className="px-4 text-sm text-[var(--color-text-muted)]">
+                该分支暂无已结束的统计周期。
+              </p>
+            ) : (
+              <ul className="divide-y divide-[var(--color-border-subtle)]">
+                {periods.map((item, index) => (
+                  <PeriodRow
+                    key={item.label}
+                    period={item}
+                    active={index === selected}
+                    dense={granularity === 'biweek'}
+                    onSelect={() => setSelected(index)}
+                  />
+                ))}
+              </ul>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">
+              {period ? `${period.label} 合入构成` : '合入构成'}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {!period || period.total === 0 ? (
+              <p className="text-sm text-[var(--color-text-muted)]">该期没有合入。</p>
+            ) : (
+              <>
+                <LazyChart height={Math.max(160, kindRows(period).length * 26)} option={kindOption(period.by_kind)} />
+                {period.top_contributors.length > 0 && (
+                  <div className="border-t border-[var(--color-border-subtle)] pt-3">
+                    <p className="mb-2 text-xs text-[var(--color-text-muted)]">主要贡献者</p>
+                    <div className="flex flex-wrap gap-1.5">
+                      {period.top_contributors.slice(0, 8).map(([login, count]) => (
+                        <Link
+                          key={login}
+                          to="/members"
+                          search={{ member: login }}
+                          className="inline-flex items-center gap-1 rounded-full border border-[var(--color-border-subtle)] px-2 py-0.5 text-2xs hover:border-[var(--color-border-strong)] hover:text-[var(--color-accent)]"
+                        >
+                          <span className="font-mono">{login}</span>
+                          <span className="tabular-nums text-[var(--color-text-muted)]">{count}</span>
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <section className="space-y-3">
+        <h2 className="text-sm font-semibold">发版说明</h2>
+        {!notes || notes.length === 0 ? (
+          <EmptyState
+            title="暂无发版说明"
+            description="发版说明来自 SIG 例会纪要中的版本进展报告。若该分支近期未在例会上汇报，这里会是空的。"
+          />
+        ) : (
+          <div className="space-y-3">
+            {notes.map((note) => (
+              <ReleaseNoteCard key={note.id} note={note} />
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  )
+}
+
+/** 粒度切换。两个互斥选项、一次选一个，正是分段控件的语义。 */
+function GranularityToggle({
+  value,
+  onChange,
+}: {
+  value: Granularity
+  onChange: (next: Granularity) => void
+}) {
+  return (
+    <Segmented
+      size="small"
+      value={value}
+      onChange={(next) => onChange(next as Granularity)}
+      options={[
+        { value: 'biweek', label: GRANULARITY_LABEL.biweek },
+        { value: 'month', label: GRANULARITY_LABEL.month },
+      ]}
+    />
+  )
+}
+
+/** 一行一期。整行可点：点开右侧就换成这一期的构成。 */
+function PeriodRow({
+  period,
+  active,
+  dense,
+  onSelect,
+}: {
+  period: PeriodSummary
+  active: boolean
+  dense: boolean
+  onSelect: () => void
+}) {
+  return (
+    <li>
+      {/* 这里**不**用分段控件：一行是一期，带合入数、CVE 数与贡献者，
+          是"从列表里挑一条"，不是"在几个等价选项里选一个"。
+          用 aria-current 表达"当前查看的是这条"。
+          原生 button 也保留：换成 AntD 的按钮会为一个纯排版差异
+          多引入一层 DOM。 */}
+      <button
+        type="button"
+        onClick={onSelect}
+        // aria-current 的取值就是 true/false —— 写成 false 而不是省略，
+        // 这样"有多少期"和"哪一期被选中"两个问题都能从这一个属性回答。
+        aria-current={active ? 'true' : 'false'}
+        className={cn(
+          'flex w-full items-center gap-x-3 gap-y-1 px-4 py-2 text-left text-xs transition-colors duration-150',
+          active ? 'bg-[var(--color-surface-2)]' : 'hover:bg-[var(--color-surface-2)]',
+        )}
+      >
+        <span
+          className={cn(
+            'w-4 shrink-0 font-mono text-2xs',
+            active ? 'text-[var(--color-accent)]' : 'text-transparent',
+          )}
+          aria-hidden
+        >
+          ▸
+        </span>
+        <span className={cn('shrink-0 font-mono tabular-nums', dense ? 'w-40' : 'w-20')}>
+          {period.label}
+        </span>
+        <span className="shrink-0 font-mono tabular-nums">
+          合入 <span className="text-[var(--color-text-primary)]">{period.total}</span>
+        </span>
+        <span className="shrink-0 font-mono tabular-nums text-[var(--color-kind-cve)]">
+          CVE {period.cve_count}
+        </span>
+        <span className="min-w-0 flex-1 truncate text-right text-2xs text-[var(--color-text-muted)]">
+          {period.top_contributors.slice(0, 3).map(([login]) => login).join('、')}
+        </span>
+      </button>
+    </li>
+  )
+}
+
+function Metric({
+  label,
+  value,
+  hint,
+  to,
+}: {
+  label: string
+  value: number
+  hint?: string
+  /** 数字本身带上出处：看到"待处理 42"就要能点进那 42 个。 */
+  to?: { search: { state: string; branch: string[] } }
+}) {
+  const content = (
+    <Card className={cn('h-full', to && 'transition-[border-color,box-shadow] duration-150 hover:border-[var(--color-border-strong)] hover:shadow-[var(--shadow-card-hover)]')}>
+      <CardBody>
+        <div className="text-xs text-[var(--color-text-muted)]">{label}</div>
+        <div className="mt-1 font-mono text-xl tabular-nums">{formatNumber(value)}</div>
+        {hint && <div className="mt-0.5 text-2xs text-[var(--color-text-muted)]">{hint}</div>}
+      </CardBody>
+    </Card>
+  )
+
+  if (!to) return content
+  return (
+    <Link to="/pulls" search={to.search} className="block">
+      {content}
+    </Link>
+  )
+}
+
+/**
+ * 一份发版说明。
+ *
+ * 补丁清单默认折叠：一期动辄几十条，全展开会把相邻的几期推到屏幕之外，
+ * 而维护者多数时候只想看"这一期改了多大、有没有 CVE"。
+ */
+function ReleaseNoteCard({ note }: { note: ReleaseReport }) {
+  const [expanded, setExpanded] = useState(false)
+  const { data: patches } = useQuery({
+    queryKey: ['report-patches', note.id],
+    queryFn: () => sigApi.reportPatches(note.id),
+    enabled: expanded,
+  })
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+          <CardTitle className="font-mono text-sm">
+            {note.from_tag ?? '—'} → {note.to_tag ?? '—'}
+          </CardTitle>
+          {note.meeting_held_on && (
+            <span className="text-xs text-[var(--color-text-muted)]">
+              {note.meeting_held_on} 例会汇报
+            </span>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <p className="text-sm text-[var(--color-text-secondary)]">
+          本期合入{' '}
+          <span className="font-mono tabular-nums text-[var(--color-text-primary)]">
+            {note.patch_count ?? note.listed_count}
+          </span>{' '}
+          个补丁
+          {note.patch_count != null && note.listed_count > 0 && (
+            <span className="text-[var(--color-text-muted)]">
+              （纪要中列出 {note.listed_count} 条）
+            </span>
+          )}
+        </p>
+
+        {note.groups && note.groups.length > 0 && (
+          <div className="flex flex-wrap gap-1.5">
+            {note.groups.map((group) => (
+              <Badge key={group.name} tone="neutral" className="font-normal">
+                {group.name}
+                {group.count != null && (
+                  <span className="ml-1 font-mono tabular-nums text-[var(--color-text-muted)]">
+                    {group.count}
+                  </span>
+                )}
+              </Badge>
+            ))}
+          </div>
+        )}
+
+        {note.cve_ids && note.cve_ids.length > 0 && (
+          <div>
+            <p className="mb-1 text-xs text-[var(--color-text-muted)]">
+              本期修复 CVE {note.cve_ids.length} 个
+            </p>
+            <div className="flex flex-wrap gap-1">
+              {note.cve_ids.slice(expanded ? undefined : 8).map((cve) => (
+                <a
+                  key={cve}
+                  href={`https://www.cve.org/CVERecord?id=${cve}`}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  className="font-mono text-2xs text-[var(--color-kind-cve)] hover:underline"
+                >
+                  {cve}
+                </a>
+              ))}
+              {!expanded && note.cve_ids.length > 8 && (
+                <span className="text-2xs text-[var(--color-text-muted)]">
+                  等 {note.cve_ids.length} 个
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {note.iso_urls && note.iso_urls.length > 0 && (
+          <div className="flex flex-wrap gap-x-3 gap-y-1">
+            {note.iso_urls.map((url) => (
+              <a
+                key={url}
+                href={url}
+                target="_blank"
+                rel="noreferrer noopener"
+                className="inline-flex items-center gap-1 text-xs text-[var(--color-accent)] hover:underline"
+              >
+                {url.replace('https://repo.openeuler.org/', '')}
+                <ExternalLink className="size-3" aria-hidden />
+              </a>
+            ))}
+          </div>
+        )}
+
+        <button
+          type="button"
+          onClick={() => setExpanded((value) => !value)}
+          className="text-xs text-[var(--color-accent)] hover:underline"
+        >
+          {expanded ? '收起补丁清单' : `展开补丁清单（${note.listed_count} 条）`}
+        </button>
+
+        {expanded &&
+          (patches && patches.length > 0 ? (
+            <PatchList patches={patches} />
+          ) : (
+            <p className="text-xs text-[var(--color-text-muted)]">纪要未列出具体补丁条目。</p>
+          ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+function PatchList({ patches }: { patches: ReleasePatch[] }) {
+  const groups = new Map<string, ReleasePatch[]>()
+  for (const patch of patches) {
+    const key = patch.group_name ?? '未分组'
+    if (!groups.has(key)) groups.set(key, [])
+    groups.get(key)!.push(patch)
+  }
+
+  return (
+    <div className="space-y-3 border-t border-[var(--color-border-subtle)] pt-3">
+      {[...groups.entries()].map(([name, list]) => (
+        <div key={name}>
+          <p className="mb-1 text-xs text-[var(--color-text-muted)]">
+            {name} · {list.length} 条
+          </p>
+          <ul className="space-y-1">
+            {list.map((patch) => (
+              <li key={patch.sequence} className="flex items-start gap-2 text-xs">
+                {/* 有编号的链到本平台的 PR；没有的（纪要被截断）链回 AtomGit 原文 */}
+                {patch.pull_number != null ? (
+                  <Link
+                    to="/pulls"
+                    search={{ q: String(patch.pull_number) }}
+                    className="shrink-0 font-mono text-[var(--color-accent)] hover:underline"
+                  >
+                    #{patch.pull_number}
+                  </Link>
+                ) : (
+                  <span className="shrink-0 text-[var(--color-text-muted)]">—</span>
+                )}
+                <span className="min-w-0 flex-1 text-[var(--color-text-secondary)]">
+                  {patch.title}
+                </span>
+                {patch.url && (
+                  <a
+                    href={patch.url}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    aria-label="在 AtomGit 打开"
+                    className="shrink-0 text-[var(--color-text-muted)] hover:text-[var(--color-accent)]"
+                  >
+                    <ExternalLink className="size-3" aria-hidden />
+                  </a>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function kindRows(period: PeriodSummary): [string, number][] {
+  return Object.entries(period.by_kind).sort((left, right) => left[1] - right[1])
+}
+
+/**
+ * 合入趋势。
+ *
+ * 空周期**保留**并画一个极短的柱，而不是跳过：跳过会让"那一期没有合入"
+ * 与"那一期不存在"在图上长得一样，而这两者的含义完全不同。
+ */
+function timelineOption(
+  timeline: { label: string; total: number }[],
+  granularity: Granularity,
+): EChartsOption {
+  return {
+    grid: { left: 8, right: 8, top: 16, bottom: 4, containLabel: true },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: CHART_THEME.surface,
+      borderColor: CHART_THEME.border,
+      textStyle: { color: CHART_THEME.text, fontSize: 12 },
+      formatter: (params: { name: string; value: number }[]) => {
+        const first = params[0]
+        return `${first.name}<br/>合入 ${first.value} 个`
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: timeline.map((item) =>
+        granularity === 'month' ? item.label.slice(2) : item.label.slice(5, 10),
+      ),
+      axisLine: { lineStyle: { color: CHART_THEME.border } },
+      axisLabel: { color: CHART_THEME.muted, fontSize: 10 },
+      axisTick: { show: false },
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { color: CHART_THEME.border, type: 'dashed' } },
+      axisLabel: { color: CHART_THEME.muted, fontSize: 10 },
+    },
+    series: [
+      {
+        type: 'bar',
+        data: timeline.map((item) => item.total),
+        itemStyle: { color: CHART_THEME.accent, borderRadius: [3, 3, 0, 0] },
+        barMaxWidth: 28,
+      },
+    ],
+  }
+}
+
+/** 类别分布。用横向条形：类别名是中文短语，横排才放得下且不必旋转标签。 */
+function kindOption(byKind: Record<string, number>): EChartsOption {
+  const rows = Object.entries(byKind).sort((left, right) => left[1] - right[1])
+  return {
+    grid: { left: 8, right: 32, top: 8, bottom: 4, containLabel: true },
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: CHART_THEME.surface,
+      borderColor: CHART_THEME.border,
+      textStyle: { color: CHART_THEME.text, fontSize: 12 },
+    },
+    xAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { color: CHART_THEME.border, type: 'dashed' } },
+      axisLabel: { color: CHART_THEME.muted, fontSize: 10 },
+    },
+    yAxis: {
+      type: 'category',
+      data: rows.map(([kind]) => KIND_META[kind as PRKind]?.label ?? kind),
+      axisLine: { lineStyle: { color: CHART_THEME.border } },
+      axisLabel: { color: CHART_THEME.text, fontSize: 11 },
+      axisTick: { show: false },
+    },
+    series: [
+      {
+        type: 'bar',
+        data: rows.map(([kind, count]) => ({
+          value: count,
+          itemStyle: {
+            // 类别色在 KIND_META 里记为 CSS 变量名，canvas 里必须先解析
+            color: chartColor(KIND_META[kind as PRKind]?.color ?? CHART_THEME.accent),
+            borderRadius: [0, 3, 3, 0],
+          },
+        })),
+        label: {
+          show: true,
+          position: 'right',
+          color: CHART_THEME.muted,
+          fontSize: 10,
+        },
+        barMaxWidth: 14,
+      },
+    ],
+  }
+}