@kernel-sig/console 0.1.0

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

@@ -0,0 +1,308 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import { Tooltip } from 'antd'
+import type { ColumnsType } from 'antd/es/table'
+import { ExternalLink } from 'lucide-react'
+
+import { useCurrentRepository } from '@/hooks/use-current-repository'
+import {
+  BRANCH_KIND_META,
+  sigApi,
+  type BranchKind,
+  type BranchSummary,
+  type ReleaseReport,
+} from '@/api/sig'
+import { Badge } from '@/components/ui/badge'
+import { DataTable } from '@/components/ui/data-table'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { EmptyState } from '@/components/ui/empty-state'
+import { Skeleton } from '@/components/ui/skeleton'
+import { formatNumber, formatRelativeTime } from '@/lib/utils'
+
+/**
+ * 版本与分支总览。
+ *
+ * 每个版本一行而不是一张卡片：维护者看这张表是为了对比
+ * "哪个版本积压多、哪个刚合入过"，行式排布才好横向扫。
+ */
+const COLUMNS: ColumnsType<BranchSummary> = [
+  {
+    title: '版本 / 分支',
+    render: (_, branch) => (
+      <>
+        <Link
+          to="/branches/$branch"
+          params={{ branch: branch.name }}
+          className="font-medium hover:text-[var(--color-accent)]"
+        >
+          {branch.name}
+        </Link>
+        {branch.raw_names.length > 1 && (
+          <Tooltip title={`上游并存写法：${branch.raw_names.join('、')}`}>
+            <span className="ml-2 text-2xs text-[var(--color-text-muted)]">
+              已归并 {branch.raw_names.length} 种写法
+            </span>
+          </Tooltip>
+        )}
+      </>
+    ),
+  },
+  {
+    title: '产品线',
+    width: 110,
+    render: (_, branch) => (
+      <Badge tone="neutral" className="font-normal">
+        {BRANCH_KIND_META[branch.kind]?.label ?? branch.kind}
+      </Badge>
+    ),
+  },
+  {
+    title: '当前 tag',
+    width: 150,
+    render: (_, branch) => (
+      <span className="font-mono text-xs text-[var(--color-text-secondary)]">
+        {branch.latest_tag ?? '—'}
+      </span>
+    ),
+  },
+  {
+    title: '负责人',
+    width: 170,
+    // 来自 sig-info.yaml：看到积压之后必然要问"该找谁"
+    render: (_, branch) => (
+      <span className="flex flex-wrap gap-1">
+        {branch.keepers.length === 0 ? (
+          <span className="text-xs text-[var(--color-text-muted)]">—</span>
+        ) : (
+          branch.keepers.map((login) => (
+            <Link
+              key={login}
+              to="/members"
+              search={{ member: login }}
+              className="font-mono text-2xs text-[var(--color-text-secondary)] hover:text-[var(--color-accent)]"
+            >
+              @{login}
+            </Link>
+          ))
+        )}
+      </span>
+    ),
+  },
+  {
+    title: '待处理',
+    width: 90,
+    align: 'right',
+    render: (_, branch) =>
+      branch.open_count > 0 ? (
+        <Tooltip title={`查看 ${branch.name} 上待处理的 PR`}>
+          <Link
+            to="/pulls"
+            search={{ state: 'open', branch: [branch.name] }}
+            className="font-mono text-xs tabular-nums hover:text-[var(--color-accent)]"
+          >
+            {branch.open_count}
+          </Link>
+        </Tooltip>
+      ) : (
+        <span className="font-mono text-xs tabular-nums text-[var(--color-text-muted)]">0</span>
+      ),
+  },
+  {
+    title: '已合入',
+    width: 90,
+    align: 'right',
+    render: (_, branch) => (
+      <span className="font-mono text-xs tabular-nums">{branch.merged_count}</span>
+    ),
+  },
+  {
+    title: '近 30 天',
+    width: 90,
+    align: 'right',
+    render: (_, branch) => (
+      <span className="font-mono text-xs tabular-nums text-[var(--color-success)]">
+        {branch.merged_recent}
+      </span>
+    ),
+  },
+  {
+    title: '最近合入',
+    width: 110,
+    render: (_, branch) => (
+      <span className="text-xs text-[var(--color-text-muted)]">
+        {formatRelativeTime(branch.last_merged_at)}
+      </span>
+    ),
+  },
+]
+
+export function BranchListPage() {
+  const { repository, isLoading: reposLoading } = useCurrentRepository()
+
+  const { data: branches, isLoading } = useQuery({
+    queryKey: ['branches', repository?.id],
+    queryFn: () => sigApi.branches(repository!.id),
+    enabled: Boolean(repository),
+  })
+
+  const { data: notes } = useQuery({
+    queryKey: ['release-notes', repository?.id],
+    queryFn: () => sigApi.releaseNotes(repository!.id, undefined, 30),
+    enabled: Boolean(repository),
+  })
+
+  if (reposLoading) return <Skeleton className="h-64 w-full" />
+  if (!repository) {
+    return (
+      <EmptyState
+        title="尚未纳管任何仓库"
+        description="请先在「设置 → 仓库与同步」中配置 AtomGit 凭据并纳管 openeuler/kernel。"
+      />
+    )
+  }
+
+  const latestByBranch = new Map<string, ReleaseReport[]>()
+  for (const note of notes ?? []) {
+    if (!latestByBranch.has(note.branch)) latestByBranch.set(note.branch, [])
+    latestByBranch.get(note.branch)!.push(note)
+  }
+
+  return (
+    <div className="space-y-5">
+      <header>
+        <h1 className="text-base font-semibold tracking-tight">版本与分支</h1>
+        <p className="mt-0.5 text-sm text-[var(--color-text-secondary)]">
+          openEuler 内核分产品线维护：OLK 长期维护、发行版 LTS、创新版本。
+          合入数与 tag 来自本平台的 PR 数据与 SIG 例会纪要。
+        </p>
+      </header>
+
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        <KindCard branches={branches} kind="olk" />
+        <KindCard branches={branches} kind="lts" />
+        <KindCard branches={branches} kind="innovation" />
+        <Card>
+          <CardHeader className="pb-1">
+            <CardTitle className="text-xs font-normal text-[var(--color-text-muted)]">
+              合计
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="font-mono text-xl tabular-nums">
+              {formatNumber(
+                (branches ?? []).reduce((sum, item) => sum + item.merged_count, 0),
+              )}
+            </div>
+            <p className="mt-1 text-xs text-[var(--color-text-muted)]">
+              历史合入 · {(branches ?? []).length} 个分支
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <DataTable<BranchSummary>
+        rowKey="name"
+        columns={COLUMNS}
+        dataSource={branches ?? []}
+        loading={isLoading}
+        locale={{
+          emptyText: (
+            <EmptyState
+              title="尚无分支数据"
+              description="分支来自已同步的 PR，请先在「仓库与同步」中触发一次同步。"
+            />
+          ),
+        }}
+        // 分支只有十几个，一屏就能看完，不需要分页
+        pagination={false}
+      />
+
+      <section className="space-y-3">
+        <h2 className="text-sm font-semibold">各版本最新发版说明</h2>
+        <div className="grid gap-3 lg:grid-cols-2">
+          {[...latestByBranch.entries()].map(([branch, list]) => {
+            const note = list[0]
+            return (
+              <Card key={branch}>
+                <CardHeader className="pb-2">
+                  <div className="flex flex-wrap items-baseline gap-2">
+                    <CardTitle className="text-sm">{branch}</CardTitle>
+                    <span className="font-mono text-2xs text-[var(--color-text-muted)]">
+                      {note.from_tag} → {note.to_tag}
+                    </span>
+                    {note.meeting_held_on && (
+                      <span className="text-2xs text-[var(--color-text-muted)]">
+                        {note.meeting_held_on} 例会
+                      </span>
+                    )}
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-2">
+                  <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.cve_ids && note.cve_ids.length > 0 && (
+                      <>
+                        ，其中 CVE{' '}
+                        <span className="font-mono tabular-nums text-[var(--color-kind-cve)]">
+                          {note.cve_ids.length}
+                        </span>{' '}
+                        个
+                      </>
+                    )}
+                  </p>
+                  {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>
+                  )}
+                  <Link
+                    to="/branches/$branch"
+                    params={{ branch }}
+                    className="inline-block text-xs text-[var(--color-accent)] hover:underline"
+                  >
+                    查看该版本全部发版说明 →
+                  </Link>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function KindCard({ branches, kind }: { branches?: BranchSummary[]; kind: BranchKind }) {
+  const list = (branches ?? []).filter((item) => item.kind === kind)
+  const meta = BRANCH_KIND_META[kind]
+  return (
+    <Card title={meta.hint}>
+      <CardHeader className="pb-1">
+        <CardTitle className="text-xs font-normal text-[var(--color-text-muted)]">
+          {meta.label}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="font-mono text-xl tabular-nums">{list.length}</div>
+        <p className="mt-1 text-xs text-[var(--color-text-muted)]">
+          共合入 {formatNumber(list.reduce((sum, item) => sum + item.merged_count, 0))} 个 PR
+        </p>
+      </CardContent>
+    </Card>
+  )
+}