@kernel-sig/console 0.1.0

package/frontend/src/pages/members/MembersPage.tsx

@@ -0,0 +1,534 @@
+import { useQuery } from '@tanstack/react-query'
+import { Tabs, Tooltip } from 'antd'
+import type { ColumnsType } from 'antd/es/table'
+import { ExternalLink } from 'lucide-react'
+import { useMemo, useState } from 'react'
+
+import { useCurrentRepository } from '@/hooks/use-current-repository'
+import {
+  MEMBER_ROLE_META,
+  sigApi,
+  type Member,
+  type MemberStats,
+  type SubsystemOwner,
+} from '@/api/sig'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardBody, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { DataTable } from '@/components/ui/data-table'
+import { CHART_THEME } from '@/components/ui/chart-theme'
+import type { EChartsOption } from '@/components/ui/echart'
+import { LazyChart } from '@/components/ui/lazy-chart'
+import { Input } from '@/components/ui/input'
+import { EmptyState } from '@/components/ui/empty-state'
+import { Skeleton } from '@/components/ui/skeleton'
+import { cn, formatNumber } from '@/lib/utils'
+
+type Tab = 'stats' | 'roster' | 'modules'
+
+/**
+ * SIG 人员与模块归属。
+ *
+ * 分工明确的两块：名单是**权威事实**（谁有权评审、谁负责合入，以 community
+ * 仓库为准），统计是**派生结果**（谁提交得多、谁评审得多，由平台现算）。
+ * 分开成两个标签页，是因为它们的可信度来源不同 —— 混在一起会让人
+ * 以为"合入数高的就是 Committer"。
+ */
+export function MembersPage({ member }: { member?: string }) {
+  const [tab, setTab] = useState<Tab>('stats')
+
+  return (
+    <div className="space-y-4">
+      <header>
+        <h1 className="text-base font-semibold tracking-tight">SIG 成员与模块归属</h1>
+        <p className="mt-0.5 text-sm text-[var(--color-text-secondary)]">
+          成员名单与模块归属同步自 openeuler/community 的 sig/Kernel 文档，
+          贡献统计由本平台从 PR 与评审记录现算。
+        </p>
+      </header>
+
+      <Tabs
+        activeKey={tab}
+        onChange={(key) => setTab(key as Tab)}
+        items={[
+          {
+            key: 'stats',
+            label: '贡献统计',
+            // key 绑定到 member：再次点另一个负责人时组件要重挂载，
+            // 否则 useState 的初值只在首次挂载生效，筛选框会停在上一个人身上
+            children: <StatsTab key={member ?? 'all'} initialQuery={member} />,
+          },
+          { key: 'roster', label: '成员名单', children: <RosterTab /> },
+          { key: 'modules', label: '模块归属', children: <ModulesTab /> },
+        ]}
+      />
+    </div>
+  )
+}
+
+/**
+ * 贡献统计的列。
+ *
+ * 写成函数而不是常量：占合入比那一列要按总合入数算百分比，而总数是取数之后
+ * 才知道的。把 total 作为参数传进来，「这一列依赖它」在签名上就是明的。
+ */
+function statColumns(mergedTotal: number): ColumnsType<MemberStats> {
+  return [
+    {
+      title: '成员',
+      render: (_, item) => (
+        <>
+          <span className="font-mono text-xs">{item.login}</span>
+          {item.name && (
+            <span className="ml-2 text-xs text-[var(--color-text-muted)]">{item.name}</span>
+          )}
+        </>
+      ),
+    },
+    {
+      title: '角色',
+      width: 110,
+      render: (_, item) =>
+        item.role ? (
+          <Badge tone="neutral" className="font-normal">
+            {MEMBER_ROLE_META[item.role]?.label ?? item.role}
+          </Badge>
+        ) : (
+          <span className="text-xs text-[var(--color-text-muted)]">贡献者</span>
+        ),
+    },
+    {
+      title: '提交',
+      width: 80,
+      align: 'right',
+      render: (_, item) => <span className="font-mono text-xs tabular-nums">{item.authored}</span>,
+    },
+    {
+      title: '合入',
+      width: 80,
+      align: 'right',
+      render: (_, item) => <span className="font-mono text-xs tabular-nums">{item.merged}</span>,
+    },
+    {
+      title: '占合入比',
+      width: 170,
+      render: (_, item) => (
+        <span className="flex items-center gap-2">
+          <span className="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--color-surface-3)]">
+            <span
+              className="block h-full rounded-full bg-[var(--color-accent)]"
+              style={{ width: `${Math.round((item.merged / mergedTotal) * 100)}%` }}
+            />
+          </span>
+          <span className="w-9 shrink-0 text-right font-mono text-2xs tabular-nums text-[var(--color-text-muted)]">
+            {((item.merged / mergedTotal) * 100).toFixed(1)}%
+          </span>
+        </span>
+      ),
+    },
+    {
+      title: '评审',
+      width: 80,
+      align: 'right',
+      render: (_, item) => (
+        <span className="font-mono text-xs tabular-nums">{item.reviews || '—'}</span>
+      ),
+    },
+    {
+      title: '负责模块',
+      width: 180,
+      render: (_, item) => <ModuleChips modules={item.subsystems} />,
+    },
+  ]
+}
+
+function StatsTab({ initialQuery }: { initialQuery?: string }) {
+  const { repository } = useCurrentRepository()
+  const [query, setQuery] = useState(initialQuery ?? '')
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['member-stats', repository?.id],
+    queryFn: () => sigApi.memberStats(repository!.id, 100),
+    enabled: Boolean(repository),
+  })
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return data ?? []
+    const needle = query.trim().toLowerCase()
+    return (data ?? []).filter(
+      (item) =>
+        item.login.toLowerCase().includes(needle) ||
+        (item.name ?? '').toLowerCase().includes(needle),
+    )
+  }, [data, query])
+
+  const mergedTotal = (data ?? []).reduce((sum, item) => sum + item.merged, 0) || 1
+  // 列定义依赖总数，所以在拿到数之后再建一次
+  const columns = useMemo(() => statColumns(mergedTotal), [mergedTotal])
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-3 lg:grid-cols-[1fr_1fr]">
+        <Card>
+          <CardHeader>
+            <CardTitle>合入量前列</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <LazyChart
+              height={280}
+              option={rankOption(
+                (data ?? []).slice(0, 12).map((item) => ({
+                  label: item.name ?? item.login,
+                  value: item.merged,
+                  highlight: Boolean(item.role),
+                })),
+              )}
+            />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>评审工作量</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <LazyChart
+              height={280}
+              option={rankOption(
+                (data ?? [])
+                  .filter((item) => item.reviews > 0)
+                  .sort((left, right) => right.reviews - left.reviews)
+                  .slice(0, 12)
+                  .map((item) => ({
+                    label: item.name ?? item.login,
+                    value: item.reviews,
+                    highlight: true,
+                  })),
+                CHART_THEME.info,
+              )}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Input
+        placeholder="按登录名或姓名筛选"
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+        className="h-8 max-w-sm text-sm"
+      />
+
+      <DataTable<MemberStats>
+        rowKey="login"
+        columns={columns}
+        dataSource={filtered}
+        loading={isLoading}
+        locale={{
+          emptyText: <EmptyState title="没有匹配的成员" description="换个关键词，或清空筛选。" />,
+        }}
+        pagination={false}
+      />
+    </div>
+  )
+}
+
+function ModuleChips({ modules }: { modules: string[] }) {
+  if (modules.length === 0) {
+    return <span className="text-xs text-[var(--color-text-muted)]">—</span>
+  }
+  const shown = modules.slice(0, 3)
+  return (
+    <span className="flex flex-wrap gap-1">
+      {shown.map((module) => (
+        <Badge key={module} tone="neutral" className="font-normal">
+          {module}
+        </Badge>
+      ))}
+      {modules.length > shown.length && (
+        <span
+          className="text-2xs text-[var(--color-text-muted)]"
+          title={modules.slice(3).join('、')}
+        >
+          +{modules.length - shown.length}
+        </span>
+      )}
+    </span>
+  )
+}
+
+function RosterTab() {
+  const [role, setRole] = useState<string>('')
+  const { data, isLoading } = useQuery({
+    queryKey: ['members', role],
+    queryFn: () => sigApi.members(role || undefined),
+  })
+
+  const counts = useMemo(() => {
+    const map = new Map<string, number>()
+    for (const member of data ?? []) map.set(member.role, (map.get(member.role) ?? 0) + 1)
+    return map
+  }, [data])
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        {['', 'maintainer', 'committer', 'contributor'].map((item) => (
+          <button
+            key={item || 'all'}
+            type="button"
+            onClick={() => setRole(item)}
+            aria-pressed={role === item}
+            className={cn(
+              'rounded-full border px-3 py-1 text-xs transition-colors duration-150',
+              role === item
+                ? 'border-[var(--color-accent)] text-[var(--color-accent)]'
+                : 'border-[var(--color-border-subtle)] text-[var(--color-text-secondary)] hover:border-[var(--color-border-strong)]',
+            )}
+          >
+            {item ? (MEMBER_ROLE_META[item]?.label ?? item) : '全部'}
+            {item && counts.get(item) != null && (
+              <span className="ml-1.5 font-mono tabular-nums text-[var(--color-text-muted)]">
+                {counts.get(item)}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {isLoading ? (
+        <Skeleton className="h-64 w-full" />
+      ) : !data || data.length === 0 ? (
+        <EmptyState
+          title="尚无成员名单"
+          description="名单同步自 openeuler/community 的 sig/Kernel 文档，由定时任务拉取。"
+        />
+      ) : (
+        <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+          {data.map((member) => (
+            <MemberCard key={member.id} member={member} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function MemberCard({ member }: { member: Member }) {
+  const handle = member.atomgit_id ?? member.gitee_id ?? member.github_id
+  const platform = member.atomgit_id ? 'atomgit' : member.gitee_id ? 'gitee' : 'github'
+  return (
+    <Card>
+      <CardBody className="flex items-start gap-3">
+        <span
+          aria-hidden
+          className="flex size-8 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface-3)] text-xs font-medium"
+        >
+          {member.name.slice(0, 1).toUpperCase()}
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="truncate text-sm font-medium">{member.name}</span>
+            <Badge tone="neutral" className="font-normal">
+              {MEMBER_ROLE_META[member.role]?.label ?? member.role}
+            </Badge>
+          </div>
+          <p className="mt-0.5 truncate text-xs text-[var(--color-text-muted)]">
+            {handle ? (
+              <a
+                href={`https://${platform}.com/${handle}`}
+                target="_blank"
+                rel="noreferrer noopener"
+                className="inline-flex items-center gap-1 hover:text-[var(--color-accent)]"
+              >
+                @{handle}
+                <ExternalLink className="size-3" aria-hidden />
+              </a>
+            ) : (
+              '未登记平台账号'
+            )}
+            {member.org && ` · ${member.org}`}
+          </p>
+          {member.email && (
+            <p className="truncate text-2xs text-[var(--color-text-muted)]">{member.email}</p>
+          )}
+        </div>
+      </CardBody>
+    </Card>
+  )
+}
+
+const OWNER_COLUMNS: ColumnsType<SubsystemOwner> = [
+  { title: '模块', width: 180, render: (_, owner) => <span className="font-medium">{owner.module}</span> },
+  {
+    title: '章节',
+    width: 140,
+    render: (_, owner) => (
+      <span className="text-xs text-[var(--color-text-muted)]">{owner.section ?? '—'}</span>
+    ),
+  },
+  {
+    title: '内核路径',
+    render: (_, owner) => {
+      const paths = owner.paths ?? []
+      return (
+        <span className="flex flex-wrap gap-1">
+          {paths.slice(0, 4).map((path) => (
+            <code key={path} className="text-2xs text-[var(--color-text-secondary)]">
+              {path}
+            </code>
+          ))}
+          {paths.length > 4 && (
+            <Tooltip title={paths.slice(4).join('\n')}>
+              <span className="text-2xs text-[var(--color-text-muted)]">
+                +{paths.length - 4}
+              </span>
+            </Tooltip>
+          )}
+          {paths.length === 0 && (
+            <span className="text-2xs text-[var(--color-text-muted)]">—</span>
+          )}
+        </span>
+      )
+    },
+  },
+  {
+    title: 'Committer',
+    width: 220,
+    render: (_, owner) => (
+      <span className="flex flex-wrap gap-1">
+        {(owner.committer_logins ?? []).map((login) => (
+          <a
+            key={login}
+            href={`https://atomgit.com/${login}`}
+            target="_blank"
+            rel="noreferrer noopener"
+            className="font-mono text-2xs text-[var(--color-accent)] hover:underline"
+          >
+            @{login}
+          </a>
+        ))}
+      </span>
+    ),
+  },
+]
+
+function ModulesTab() {
+  const [query, setQuery] = useState('')
+  const { data, isLoading } = useQuery({
+    queryKey: ['subsystem-owners'],
+    queryFn: sigApi.subsystemOwners,
+  })
+
+  const filtered = useMemo(() => {
+    const list = data ?? []
+    if (!query.trim()) return list
+    const needle = query.trim().toLowerCase()
+    return list.filter(
+      (item) =>
+        item.module.toLowerCase().includes(needle) ||
+        (item.paths ?? []).some((path) => path.toLowerCase().includes(needle)) ||
+        (item.committer_logins ?? []).some((login) => login.toLowerCase().includes(needle)),
+    )
+  }, [data, query])
+
+  const sections = useMemo(() => {
+    const map = new Map<string, number>()
+    for (const item of filtered) {
+      const key = item.section ?? '未分组'
+      map.set(key, (map.get(key) ?? 0) + 1)
+    }
+    return [...map.entries()].sort((left, right) => right[1] - left[1])
+  }, [filtered])
+
+  return (
+    <div className="space-y-4">
+      <Input
+        placeholder="按模块名、内核路径或 Committer 筛选"
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+        className="h-8 max-w-md text-sm"
+      />
+      {sections.length > 0 && (
+        <p className="text-xs text-[var(--color-text-muted)]">
+          {sections.map(([name, count]) => `${name} ${count}`).join(' · ')}
+        </p>
+      )}
+
+      {isLoading ? (
+        <Skeleton className="h-64 w-full" />
+      ) : filtered.length === 0 ? (
+        <EmptyState title="没有匹配的模块" description="换个关键词，或清空筛选。" />
+      ) : (
+        <DataTable<SubsystemOwner>
+          rowKey="id"
+          columns={OWNER_COLUMNS}
+          dataSource={filtered}
+          pagination={false}
+        />
+      )}
+      <p className="text-xs text-[var(--color-text-muted)]">
+        共 {formatNumber(filtered.length)} 个模块。归属表来自 committers.md，
+        是"这个 PR 该找谁看"的依据。
+      </p>
+    </div>
+  )
+}
+
+
+/**
+ * 排行榜。横向条形，按值升序喂给 ECharts —— 它自下而上画，
+ * 升序传入才能让最大的一条出现在最上面。
+ *
+ * 已登记在册的 Committer 用强调色，其余用中性色：名单来自上游文档，
+ * 是权威事实；贡献量是平台算出来的派生结果。两者用颜色区分开，
+ * 避免"合入多 = 是 Committer"这种误读。
+ */
+function rankOption(
+  rows: { label: string; value: number; highlight: boolean }[],
+  accent: string = CHART_THEME.accent,
+): EChartsOption {
+  if (rows.length === 0) {
+    return {
+      title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'middle',
+        textStyle: { color: CHART_THEME.muted, fontSize: 12, fontWeight: 'normal' },
+      },
+    }
+  }
+  const sorted = [...rows].sort((left, right) => left.value - right.value)
+  return {
+    grid: { left: 8, right: 40, 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: sorted.map((row) => row.label),
+      axisLine: { lineStyle: { color: CHART_THEME.border } },
+      axisLabel: { color: CHART_THEME.text, fontSize: 11 },
+      axisTick: { show: false },
+    },
+    series: [
+      {
+        type: 'bar',
+        data: sorted.map((row) => ({
+          value: row.value,
+          itemStyle: {
+            color: row.highlight ? accent : CHART_THEME.muted,
+            borderRadius: [0, 3, 3, 0],
+          },
+        })),
+        label: { show: true, position: 'right', color: CHART_THEME.muted, fontSize: 10 },
+        barMaxWidth: 12,
+      },
+    ],
+  }
+}