@kernel-sig/console 0.1.0

package/frontend/src/pages/pulls/PullListPage.tsx

@@ -0,0 +1,399 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link, useNavigate, useSearch } from '@tanstack/react-router'
+import { Select, Tooltip } from 'antd'
+import type { ColumnsType } from 'antd/es/table'
+import { useEffect, useMemo, useState } from 'react'
+
+import {
+  FACET_KEYS,
+  pullsApi,
+  type FacetKey,
+  type FacetResponse,
+  type PullFilters,
+  type PullSummary,
+} from '@/api/pulls'
+import { useCurrentRepository } from '@/hooks/use-current-repository'
+import { ClassificationBadge } from '@/components/ClassificationBadge'
+import { GateBadge } from '@/components/GateBadge'
+import { FacetRail } from '@/components/pulls/FacetRail'
+import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { DataTable } from '@/components/ui/data-table'
+import { EmptyState } from '@/components/ui/empty-state'
+import { Skeleton } from '@/components/ui/skeleton'
+import { cn, formatNumber, formatRelativeTime } from '@/lib/utils'
+
+const PER_PAGE = 30
+
+/** 状态筛选：默认只看 open，已合并通常用于统计而非日常处理。 */
+const STATE_OPTIONS = [
+  { value: 'open', label: '待处理' },
+  { value: 'merged', label: '已合并' },
+  { value: 'closed', label: '已关闭' },
+  { value: 'all', label: '全部' },
+]
+
+const SORT_OPTIONS = [
+  { value: 'updated', label: '最近更新' },
+  { value: 'created', label: '最近创建' },
+  { value: 'waiting', label: '等待最久' },
+  { value: 'lines', label: '变更最多' },
+  { value: 'comments', label: '讨论最多' },
+]
+
+/** 次要信息用 text-xs：AntD 给单元格的字号是正文的 14px，
+ *  编号、作者、时间这些压一档才有层次。 */
+const MUTED = 'text-xs text-[var(--color-text-muted)]'
+
+const COLUMNS: ColumnsType<PullSummary> = [
+  {
+    title: '编号',
+    width: 70,
+    render: (_, pull) => (
+      <span className="font-mono text-xs text-[var(--color-text-muted)]">#{pull.number}</span>
+    ),
+  },
+  {
+    title: '标题',
+    // 不说宽度：标题列吃掉剩下的全部空间，固定住它等于让别的列去挤
+    render: (_, pull) => (
+      <>
+        {/* Tooltip 而不是 title 属性：原生那个要等约一秒、没有样式，
+            而被截断的正是最需要看全的 PR 标题。标题普遍超过一行的宽度，
+            所以不做"只在溢出时弹"的判定 —— 那要多一套测量逻辑，
+            省下的打扰却很有限。 */}
+        <Tooltip title={pull.title}>
+          <Link
+            to="/pulls/$pullId"
+            params={{ pullId: pull.id }}
+            className="line-clamp-1 hover:text-[var(--color-accent)]"
+          >
+            {pull.title}
+          </Link>
+        </Tooltip>
+        {/*
+          只放内容类别与异常标记。上游的 kind/* 标签曾是这里的主角，
+          但它们是流程状态（wait-on-review / ready-to-merge / abandoned），
+          不是内容分类 —— 与门禁列表达同一件事，且英文对中文界面是噪音。
+          原始标签在详情页的「标签」面板里按原色完整呈现。
+        */}
+        <div className="mt-1 flex flex-wrap items-center gap-1.5">
+          {pull.kind && <ClassificationBadge kind={pull.kind} />}
+          {pull.merge_conflict && <Badge tone="danger">冲突</Badge>}
+          {pull.draft && <Badge tone="neutral">草稿</Badge>}
+        </div>
+      </>
+    ),
+  },
+  { title: '门禁', width: 110, render: (_, pull) => <GateBadge stage={pull.gate_stage} /> },
+  {
+    title: '分支',
+    width: 100,
+    render: (_, pull) =>
+      pull.target_branch ? (
+        <Link
+          to="/branches/$branch"
+          params={{ branch: pull.target_branch }}
+          className="font-mono text-xs hover:text-[var(--color-accent)]"
+          title="查看该版本"
+        >
+          {pull.target_branch}
+        </Link>
+      ) : (
+        <span className={MUTED}>—</span>
+      ),
+  },
+  {
+    title: '作者',
+    width: 120,
+    render: (_, pull) => (
+      <span className="text-xs text-[var(--color-text-secondary)]">{pull.author_login ?? '—'}</span>
+    ),
+  },
+  {
+    title: '变更',
+    width: 100,
+    align: 'right',
+    render: (_, pull) => (
+      <span className="font-mono text-xs tabular-nums">
+        <span className="text-[var(--color-success)]">+{pull.added_lines}</span>
+        <span className="mx-0.5 text-[var(--color-text-muted)]">/</span>
+        <span className="text-[var(--color-danger)]">-{pull.removed_lines}</span>
+      </span>
+    ),
+  },
+  {
+    title: '更新',
+    width: 100,
+    render: (_, pull) => (
+      <span className={MUTED}>{formatRelativeTime(pull.atomgit_updated_at)}</span>
+    ),
+  },
+]
+
+/**
+ * 列表本体。
+ *
+ * 交给 AntD 的 Table，主要是为了表头：滚动时它会跟着粘住，而这一页动辄
+ * 三十行，滚到下面时列名早已看不见 —— 这正是原来那版最难受的地方。
+ */
+function PullTable({
+  items,
+  total,
+  loading,
+  fetching,
+  page,
+  pageSize,
+  totalPages,
+  onPageChange,
+}: {
+  items: PullSummary[]
+  total: number
+  loading: boolean
+  fetching: boolean
+  page: number
+  pageSize: number
+  totalPages: number
+  onPageChange: (page: number) => void
+}) {
+  return (
+    <DataTable<PullSummary>
+      rowKey="id"
+      columns={COLUMNS}
+      dataSource={items}
+      loading={loading}
+      // 取数中不整块变灰：AntD 自己有 loading 蒙层，两层叠加会糊成一片
+      className={cn(fetching && 'opacity-90')}
+      locale={{
+        emptyText: (
+          <EmptyState
+            title="没有符合条件的 PR"
+            description="左侧各栏的计数不含该栏自身的筛选，可以据此放宽条件。"
+          />
+        ),
+      }}
+      pagination={{
+        current: page,
+        pageSize,
+        total,
+        // 每页条数固定：列表页是扫读用的，改每页条数只会让
+        // "第 3 页"在不同人那里指向不同内容
+        showSizeChanger: false,
+        showQuickJumper: totalPages > 10,
+        showTotal: (count) => `共 ${formatNumber(count)} 条`,
+        onChange: onPageChange,
+      }}
+    />
+  )
+}
+
+/**
+ * PR 列表。
+ *
+ * 筛选由左侧分面栏承担，而分面栏的计数**不含该栏自身的筛选** ——
+ * 勾上 CVE 之后分支栏仍给出各分支的真实数量，于是还能在此基础上继续
+ * 收紧或放宽；若计数被自身筛选压窄，那一栏就只剩已选项非零，
+ * 除了全部清空没有别的出路。
+ *
+ * 筛选条件存在 URL 里：版本页、例会议题、发版说明都要把使用者带到
+ * "已经筛好的列表"，而链接只能通过地址表达筛选。
+ */
+export function PullListPage() {
+  const search = useSearch({ from: '/pulls' })
+  const navigate = useNavigate()
+
+  // 数组每次渲染都是新对象，直接进依赖会让 effect 每帧触发。
+  // 拼成字符串做键，依赖就都是基本类型了。
+  const arrayKey = FACET_KEYS.map((key) => (search[key] ?? []).join(',')).join('|')
+  const selected = useMemo<Record<string, string[]>>(() => {
+    const parts = arrayKey.split('|')
+    return Object.fromEntries(
+      FACET_KEYS.map((key, index) => [key, parts[index] ? parts[index].split(',') : []]),
+    )
+  }, [arrayKey])
+
+  const [filters, setFilters] = useState<PullFilters>(() => ({
+    state: search.state ?? 'open',
+    sort: 'updated',
+    order: 'desc',
+    page: search.page ?? 1,
+    per_page: PER_PAGE,
+    q: search.q,
+    waiting_days_gte: search.waiting_days_gte,
+    ...Object.fromEntries(FACET_KEYS.map((key) => [key, search[key]])),
+  }))
+  const [searchInput, setSearchInput] = useState(search.q ?? '')
+
+  useEffect(() => {
+    setFilters((prev) => ({
+      ...prev,
+      q: search.q,
+      state: search.state ?? 'open',
+      page: search.page ?? 1,
+      waiting_days_gte: search.waiting_days_gte,
+      ...Object.fromEntries(FACET_KEYS.map((key) => [key, search[key]])),
+    }))
+    setSearchInput(search.q ?? '')
+    // arrayKey 已覆盖全部数组维度的变化
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [search.q, search.state, search.page, search.waiting_days_gte, arrayKey])
+
+  const { repository, isLoading: reposLoading } = useCurrentRepository()
+
+  const { data: facets, isLoading: facetsLoading } = useQuery({
+    // 分面是各维度的计数，与翻到第几页无关：page 置空后翻页不会重查，
+    // 否则每翻一页都要为整栏的计数多打一次接口。
+    queryKey: ['pull-facets', repository?.id, { ...filters, page: undefined }],
+    queryFn: () => pullsApi.facets(repository!.id, filters),
+    enabled: Boolean(repository),
+    placeholderData: (previous: FacetResponse | undefined) => previous,
+  })
+
+  const { data, isLoading, isFetching } = useQuery({
+    queryKey: ['pulls', repository?.id, filters],
+    queryFn: () => pullsApi.list(repository!.id, filters),
+    enabled: Boolean(repository),
+    placeholderData: (previous) => previous,
+  })
+
+  const totalPages = useMemo(
+    () => (data ? Math.max(1, Math.ceil(data.total / (filters.per_page ?? PER_PAGE))) : 1),
+    [data, filters.per_page],
+  )
+
+  /** 把筛选写进 URL，让地址栏始终等于当前看到的列表。 */
+  function update(patch: Partial<PullFilters>) {
+    setFilters((prev) => {
+      const next = { ...prev, ...patch, page: patch.page ?? 1 }
+      void navigate({
+        to: '/pulls',
+        replace: true,
+        search: {
+          q: next.q || undefined,
+          // 默认状态不写进 URL，否则链接会长得没必要地啰嗦
+          state: next.state === 'open' ? undefined : next.state,
+          waiting_days_gte: next.waiting_days_gte,
+          page: next.page && next.page > 1 ? next.page : undefined,
+          ...Object.fromEntries(
+            FACET_KEYS.map((key) => {
+              const values = next[key] as string[] | undefined
+              return [key, values && values.length > 0 ? values : undefined]
+            }),
+          ),
+        },
+      })
+      return next
+    })
+  }
+
+  /** 同维取并、跨维取交：勾选是加入本维度的取值集合，不是替换。 */
+  function toggle(key: string, value: string) {
+    const current = (filters[key as FacetKey] as string[] | undefined) ?? []
+    const next = current.includes(value)
+      ? current.filter((item) => item !== value)
+      : [...current, value]
+    update({ [key]: next.length ? next : undefined } as Partial<PullFilters>)
+  }
+
+  function clear(key?: string) {
+    if (!key) {
+      const patch = Object.fromEntries(FACET_KEYS.map((item) => [item, undefined]))
+      update(patch as Partial<PullFilters>)
+      return
+    }
+    if (key.includes(':')) {
+      // 单个 chip 的移除，形如 "stage:ready_to_merge"
+      const [dimension, value] = key.split(':')
+      const current = (filters[dimension as FacetKey] as string[] | undefined) ?? []
+      const next = current.filter((item) => item !== value)
+      update({ [dimension]: next.length ? next : undefined } as Partial<PullFilters>)
+      return
+    }
+    update({ [key]: undefined } as Partial<PullFilters>)
+  }
+
+  if (reposLoading) return <Skeleton className="h-64 w-full" />
+  if (!repository) {
+    return (
+      <EmptyState
+        title="尚未纳管任何仓库"
+        description="请先在「设置 → 仓库与同步」中配置 AtomGit 凭据并纳管 openeuler/kernel。"
+      />
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <header>
+        <h1 className="text-base font-semibold tracking-tight">Pull Request</h1>
+        <p className="mt-0.5 text-sm text-[var(--color-text-secondary)]">
+          {repository.display_name ?? `${repository.owner}/${repository.name}`}
+          {data ? ` · 共 ${formatNumber(data.total)} 个` : ''}
+          <span className="text-[var(--color-text-muted)]"> · 筛选结果可通过地址栏分享</span>
+        </p>
+      </header>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <form
+          className="min-w-[220px] flex-1"
+          onSubmit={(event) => {
+            event.preventDefault()
+            update({ q: searchInput || undefined })
+          }}
+        >
+          <Input
+            placeholder="按标题或 PR 编号搜索，回车确认"
+            value={searchInput}
+            onChange={(event) => setSearchInput(event.target.value)}
+            className="h-8 text-sm"
+          />
+        </form>
+        <Select
+          aria-label="状态"
+          value={filters.state ?? 'open'}
+          options={STATE_OPTIONS}
+          onChange={(value) => update({ state: value })}
+        />
+        <Select
+          aria-label="排序"
+          value={filters.sort ?? 'updated'}
+          options={SORT_OPTIONS}
+          onChange={(value) => update({ sort: value })}
+        />
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-[200px_1fr]">
+        <aside className="lg:sticky lg:top-4 lg:self-start">
+          {facetsLoading && !facets ? (
+            <div className="space-y-2">
+              {Array.from({ length: 8 }).map((_, index) => (
+                <Skeleton key={index} className="h-5 w-full" />
+              ))}
+            </div>
+          ) : (
+            <FacetRail
+              facets={facets?.facets ?? []}
+              selected={selected}
+              total={facets?.total ?? 0}
+              onToggle={toggle}
+              onClear={clear}
+            />
+          )}
+        </aside>
+
+        <div className="min-w-0">
+          <PullTable
+            items={data?.items ?? []}
+            total={data?.total ?? 0}
+            loading={isLoading}
+            fetching={isFetching}
+            page={filters.page ?? 1}
+            pageSize={filters.per_page ?? PER_PAGE}
+            totalPages={totalPages}
+            onPageChange={(page) => update({ page })}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}