@kernel-sig/console 0.1.0

package/frontend/src/components/pulls/LabelChips.tsx

@@ -0,0 +1,87 @@
+import type { PRLabel } from '@/api/pulls'
+import { cn } from '@/lib/utils'
+
+/**
+ * 上游标签。
+ *
+ * 色值直接用 AtomGit 下发的十六进制，不做本地映射：标签颜色是上游约定的一部分
+ * （approved / lgtm / ci_successful 各有固定色），换成语义色就丢掉了
+ * "这个标签在上游长什么样"这层信息，而维护者常靠颜色一眼扫过。
+ *
+ * 代价是上游色板里存在低亮度色，深色底上直接当前景色会看不清，
+ * 因此按相对亮度决定要不要往白里提亮。
+ */
+export function LabelChips({
+  labels,
+  className,
+}: {
+  labels: PRLabel[]
+  className?: string
+}) {
+  if (labels.length === 0) return null
+  return (
+    <div className={cn('flex flex-wrap gap-1.5', className)}>
+      {labels.map((label) => (
+        <LabelChip key={label.name} label={label} />
+      ))}
+    </div>
+  )
+}
+
+function LabelChip({ label }: { label: PRLabel }) {
+  const foreground = readableForeground(label.color)
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full border px-2 py-0.5',
+        'whitespace-nowrap text-2xs font-medium leading-none',
+        !foreground &&
+          'border-[var(--color-border-subtle)] bg-[var(--color-surface-2)] text-[var(--color-text-secondary)]',
+      )}
+      style={
+        foreground
+          ? {
+              color: foreground,
+              backgroundColor: `color-mix(in oklch, ${foreground} 16%, transparent)`,
+              borderColor: `color-mix(in oklch, ${foreground} 38%, transparent)`,
+            }
+          : undefined
+      }
+    >
+      {label.name}
+    </span>
+  )
+}
+
+/**
+ * 把上游色转成深色底上能看清的前景色。
+ *
+ * 亮度阈值取 0.45：低于它的颜色（深蓝、深红等）压在 surface-0 上对比度不足，
+ * 混白提亮后仍保留色相，标签之间依然能靠颜色区分。
+ * 非法色值返回 null，由调用方回退到中性样式 —— 上游字段是自由文本，
+ * 不能假设它一定是合法颜色。
+ */
+function readableForeground(color: string | null | undefined): string | null {
+  const rgb = parseHexColor(color)
+  if (!rgb) return null
+  const luminance = (0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]) / 255
+  return luminance < 0.45 ? `color-mix(in oklch, ${color} 62%, white)` : (color as string)
+}
+
+function parseHexColor(color: string | null | undefined): [number, number, number] | null {
+  if (!color) return null
+  const value = color.trim().replace(/^#/, '')
+  const expanded =
+    value.length === 3
+      ? value
+          .split('')
+          .map((char) => char + char)
+          .join('')
+      : value
+  if (!/^[0-9a-fA-F]{6}$/.test(expanded)) return null
+  return [
+    parseInt(expanded.slice(0, 2), 16),
+    parseInt(expanded.slice(2, 4), 16),
+    parseInt(expanded.slice(4, 6), 16),
+  ]
+}

package/frontend/src/components/ui/alert.tsx

@@ -0,0 +1,30 @@
+import { Alert as AntAlert } from 'antd'
+import type { ReactNode } from 'react'
+
+type Tone = 'danger' | 'warning' | 'info' | 'success'
+
+/** 只有 danger 对不上：AntD 管这一档叫 error。 */
+const TYPES: Record<Tone, 'error' | 'warning' | 'info' | 'success'> = {
+  danger: 'error',
+  warning: 'warning',
+  info: 'info',
+  success: 'success',
+}
+
+export interface AlertProps {
+  tone?: Tone
+  className?: string
+  children?: ReactNode
+}
+
+/**
+ * 行内提示。
+ *
+ * 内容走 `message` —— AntD 把提示正文放在那个槽位里，`children` 不是它的入口。
+ *
+ * 不传 `showIcon`，用它的默认值（不显示图标），与这一版界面里提示一直是
+ * 纯文字相符。要图标就显式打开，别指望它是默认的 —— 实测默认没有。
+ */
+export function Alert({ tone = 'info', className, children }: AlertProps) {
+  return <AntAlert type={TYPES[tone]} className={className} message={children} />
+}

package/frontend/src/components/ui/badge.tsx

@@ -0,0 +1,53 @@
+import type { HTMLAttributes } from 'react'
+
+import { cn } from '@/lib/utils'
+
+export type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'accent'
+
+const tones: Record<BadgeTone, string> = {
+  neutral:
+    'bg-[var(--color-surface-2)] text-[var(--color-text-secondary)] border-[var(--color-border-subtle)]',
+  success:
+    'bg-[color-mix(in_oklch,var(--color-success)_16%,transparent)] text-[var(--color-success)] border-[color-mix(in_oklch,var(--color-success)_35%,transparent)]',
+  warning:
+    'bg-[color-mix(in_oklch,var(--color-warning)_16%,transparent)] text-[var(--color-warning)] border-[color-mix(in_oklch,var(--color-warning)_35%,transparent)]',
+  danger:
+    'bg-[color-mix(in_oklch,var(--color-danger)_16%,transparent)] text-[var(--color-danger)] border-[color-mix(in_oklch,var(--color-danger)_35%,transparent)]',
+  info: 'bg-[color-mix(in_oklch,var(--color-info)_16%,transparent)] text-[var(--color-info)] border-[color-mix(in_oklch,var(--color-info)_35%,transparent)]',
+  accent:
+    'bg-[color-mix(in_oklch,var(--color-accent)_16%,transparent)] text-[var(--color-accent)] border-[color-mix(in_oklch,var(--color-accent)_35%,transparent)]',
+}
+
+/**
+ * 语义色到 CSS 变量的映射。
+ *
+ * 徽章之外的地方（进度条、图表、圆点）也要用同一套语义色，
+ * 从徽章里取色而不是各写一遍 —— 否则"危险"在一处是红、在另一处是橙，
+ * 使用者就得重新学一遍颜色的含义。
+ */
+export const TONE_COLOR: Record<BadgeTone, string> = {
+  neutral: 'var(--color-text-muted)',
+  success: 'var(--color-success)',
+  warning: 'var(--color-warning)',
+  danger: 'var(--color-danger)',
+  info: 'var(--color-info)',
+  accent: 'var(--color-accent)',
+}
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  tone?: BadgeTone
+}
+
+export function Badge({ className, tone = 'neutral', ...props }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1 rounded-full border px-2 py-0.5',
+        'whitespace-nowrap text-2xs font-medium leading-none',
+        tones[tone],
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/frontend/src/components/ui/button.tsx

@@ -0,0 +1,51 @@
+import { Button as AntButton, type ButtonProps as AntButtonProps } from 'antd'
+
+type Variant = 'primary' | 'secondary' | 'ghost' | 'danger'
+type Size = 'sm' | 'md'
+
+/**
+ * 四个变体映射到 AntD 的 color + variant。
+ *
+ * 用这一对新 API 而不是 `type` 与 `danger`：后者是 v6 保留下来兼容旧代码的
+ * 写法，新代码再往上写等于一开始就欠一笔迁移。
+ */
+const VARIANTS: Record<Variant, Pick<AntButtonProps, 'color' | 'variant'>> = {
+  primary: { color: 'primary', variant: 'solid' },
+  secondary: { color: 'default', variant: 'outlined' },
+  ghost: { color: 'default', variant: 'text' },
+  danger: { color: 'danger', variant: 'solid' },
+}
+
+/**
+ * 尺寸沿用原来的两档语义，具体高度由主题里的 token 决定。
+ *
+ * 这里刻意不写 Tailwind 的高度类（`h-7`/`h-9`）：AntD 注入的是无层样式，
+ * 优先级高于 Tailwind 的 utilities，写上去会被 `.ant-btn` 吃掉 —— 加不加
+ * 都一样，只会让人以为调过了。
+ */
+const SIZES: Record<Size, AntButtonProps['size']> = { sm: 'small', md: 'middle' }
+
+export interface ButtonProps
+  extends Omit<AntButtonProps, 'variant' | 'size' | 'color' | 'type' | 'htmlType'> {
+  variant?: Variant
+  size?: Size
+  /**
+   * HTML 的按钮类型，不是外观。AntD 把外观叫 `type`、把这个叫 `htmlType`，
+   * 沿用谁都别扭，这里保留调用方原本的直觉：`type="submit"` 就是提交表单。
+   */
+  type?: 'submit' | 'button' | 'reset'
+}
+
+/**
+ * 按钮。内部是 AntD 的 Button，对调用方保持原来四个变体与两档尺寸的契约 ——
+ * 二十多处调用点不必为一个纯实现替换而逐个改动。
+ *
+ * 那个 `type` 的转译不只是改名：AntD 自己的 `type` 里没有 `submit` 这个值，
+ * 直接透传的话表单页上四处 `<Button type="submit">` 会变成"外观参数无效"，
+ * 按钮还在、点了没反应，而报错信息一条都不会有。
+ *
+ * `loading` 与 `disabled` 直接透传：AntD 原生就有，原先手搓的 spinner 随之删掉。
+ */
+export function Button({ variant = 'primary', size = 'md', type, ...props }: ButtonProps) {
+  return <AntButton {...VARIANTS[variant]} size={SIZES[size]} htmlType={type} {...props} />
+}

package/frontend/src/components/ui/card.tsx

@@ -0,0 +1,64 @@
+import type { HTMLAttributes } from 'react'
+
+import { cn } from '@/lib/utils'
+
+/**
+ * 卡片。
+ *
+ * 阴影而不是只靠描边：深色下 1px 描边 + 0.04 明度差区分不出层次，
+ * 一屏十几张卡片会糊成一片。可点的卡片在悬浮时再抬高一档 ——
+ * 这也是"整行/整卡可点"的唯一视觉提示。
+ */
+export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'rounded-[var(--radius-card)] bg-[var(--color-surface-1)]',
+        'border border-[var(--color-border-subtle)]',
+        'shadow-[var(--shadow-card)]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('flex flex-col gap-1 p-5 pb-3', className)} {...props} />
+}
+
+export function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn('text-sm font-semibold tracking-tight', className)} {...props} />
+}
+
+/**
+ * 卡片标题下的说明。
+ *
+ * 比标题小一级而不是同号：同号时只剩字重差别，标题与说明在扫读时
+ * 分不开 —— 一屏十几张卡片，读者需要的是"先看到标题"。
+ */
+export function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn('text-xs text-[var(--color-text-secondary)]', className)} {...props} />
+}
+
+/**
+ * 卡片的正文，用于**紧跟标题**的情形。
+ *
+ * 上边距为 0：标题自己带了下边距，再加一层会让标题与正文之间
+ * 比左右内边距宽出一截。
+ */
+export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('p-5 pt-0', className)} {...props} />
+}
+
+/**
+ * 无标题卡片的正文。
+ *
+ * 没有标题就不该借用 CardContent 的 ``pt-0`` —— 那样内容会顶到上边框，
+ * 各页面只好各写一个 ``pt-4`` / ``pt-5`` 去补，补出来的数值还不一样：
+ * 横向 20px、纵向 16px。两张卡片并排时文字对不齐，看的人说不出哪里不对，
+ * 只觉得"没排好"。指标卡、单行卡片一律用这个。
+ */
+export function CardBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('p-5', className)} {...props} />
+}

package/frontend/src/components/ui/chart-theme.ts

@@ -0,0 +1,65 @@
+import { cssVar } from '@/lib/css-color'
+
+/**
+ * 图表用色。
+ *
+ * 单独成文件而不是放在 echart.tsx 里：echarts 体积很大（约 340KB gzip），
+ * 必须按需加载；而构建图表配置的代码需要这些颜色值，若从 echart.tsx
+ * 引入就会把 echarts 一起静态打进主包，动态加载也就白做了。
+ *
+ * 取值**从 globals.css 的令牌现读**，不再抄一份 oklch 字面量。抄一份的话
+ * 改令牌时图表不会跟着变，界面上就会出现"卡片换了皮、图表还是旧色"，
+ * 而且从任何一处代码都看不出来。曾经这里就有一份副本，其中的
+ * 六个值与令牌一字不差 —— 一字不差正是没人会去核对的那种重复。
+ *
+ * 用 getter 而不是模块级常量：常量在模块求值时就要读样式表，
+ * 而那张表由 Vite 注入，先后顺序没有保证。getter 在图表真正构建
+ * 配置时才读，那时页面早已挂载。
+ */
+const FALLBACK = {
+  text: '#c4c4cc',
+  muted: '#8a8a94',
+  border: '#3c3c46',
+  surface: '#1c1c22',
+  accent: '#689cfe',
+  info: '#6ea8f5',
+} as const
+
+export const CHART_THEME = {
+  get text() {
+    return cssVar('--color-text-secondary') || FALLBACK.text
+  },
+  get muted() {
+    return cssVar('--color-text-muted') || FALLBACK.muted
+  },
+  get border() {
+    return cssVar('--color-border-subtle') || FALLBACK.border
+  },
+  get surface() {
+    return cssVar('--color-surface-1') || FALLBACK.surface
+  },
+  get accent() {
+    return cssVar('--color-accent') || FALLBACK.accent
+  },
+  get info() {
+    return cssVar('--color-info') || FALLBACK.info
+  },
+}
+
+/**
+ * 把 ``var(--token)`` 解析成具体色值。
+ *
+ * ECharts 画在 canvas 上，**拿不到 CSS 变量**：把 ``var(--color-kind-cve)``
+ * 直接递给它会解析失败并静默退回默认色，界面上表现为"所有类别的柱子
+ * 是同一个灰"，而代码读起来完全正确 —— 这种偏差只能靠看渲染结果发现。
+ *
+ * 令牌仍然只在 globals.css 里维护一份，这里只是取当前计算值。
+ * 非 ``var()`` 的取值原样返回，因此可以直接包在别处已写好的颜色外面。
+ */
+export function chartColor(value: string): string {
+  const match = /^var\((--[^)]+)\)$/.exec(value.trim())
+  if (!match) return value
+  // 这里不做 sRGB 归一化：ECharts 的 zrender 认得 oklch，
+  // 而归一化要过一次 canvas 像素读写，没必要（AntD 那边才需要）。
+  return cssVar(match[1]) || value
+}

package/frontend/src/components/ui/data-table.tsx

@@ -0,0 +1,39 @@
+import { Table } from 'antd'
+import type { TableProps } from 'antd'
+
+import { cn } from '@/lib/utils'
+
+/**
+ * 列表页共用的表格。
+ *
+ * 四个列表页要的是同样的几件事：紧凑的行高、随页粘住的表头、窄屏横向滚动、
+ * 以及与卡片一致的圆角边框。收在一处，各页只管自己的列与分页。
+ *
+ * 两条约束必须写在这里，因为它们踩错了不会报错，只会"看着有点不对"：
+ *
+ * - **不能加 `overflow-hidden`**。它会把 sticky 表头的参照框从滚动容器
+ *   收缩到表格自身，表头于是跟着内容一起滚走 —— 而粘住的表头正是换成
+ *   AntD Table 的主要理由。圆角因此改由表头自己带。
+ * - **sticky 的容器要显式指定**。滚动发生在 AppShell 的 `<main>` 上，
+ *   不是窗口；用默认值的话表头不会粘。
+ */
+const SHELL = cn(
+  'rounded-[var(--radius-card)] border border-[var(--color-border-subtle)]',
+  '[&_.ant-table-header]:rounded-t-[var(--radius-card)]',
+  '[&_.ant-table-header>table]:rounded-t-[var(--radius-card)]',
+)
+
+export function DataTable<T extends object>({ className, ...props }: TableProps<T>) {
+  return (
+    <Table<T>
+      // 默认档的单元格内边距是 16px，三十行下来比原来高出一大截，
+      // 而列表是用来扫读的，不是用来看的
+      size="small"
+      // 列宽固定，窄屏时横向滚动，而不是把每列压到不可读
+      scroll={{ x: 'max-content' }}
+      sticky={{ getContainer: () => document.querySelector('main') ?? window }}
+      className={cn(SHELL, className)}
+      {...props}
+    />
+  )
+}

package/frontend/src/components/ui/echart.tsx

@@ -0,0 +1,70 @@
+import * as echarts from 'echarts/core'
+import { BarChart as BarSeries, LineChart as LineSeries } from 'echarts/charts'
+import {
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+} from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import { useEffect, useRef } from 'react'
+
+import { cn } from '@/lib/utils'
+
+/**
+ * ECharts 封装。
+ *
+ * 直接用 echarts 核心 API 而不是某个 React 包装库：包装库的价值在于
+ * 声明式写法，代价是它要跟随 React 大版本升级，而这个项目在 React 19 上 ——
+ * 依赖一个自己维护渲染生命周期的包装库，比写这三十行更冒险。
+ *
+ * 按需注册（core + 具体图表类型）而不是 `import * as echarts from 'echarts'`：
+ * 后者会把全部图表类型打进包里，从 40KB 涨到 1MB。
+ */
+echarts.use([
+  BarSeries,
+  LineSeries,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  CanvasRenderer,
+])
+
+export type EChartsOption = Parameters<echarts.ECharts['setOption']>[0]
+
+export function EChart({
+  option,
+  className,
+  height = 260,
+}: {
+  option: EChartsOption
+  className?: string
+  height?: number
+}) {
+  const container = useRef<HTMLDivElement>(null)
+  const chart = useRef<echarts.ECharts | null>(null)
+
+  useEffect(() => {
+    if (!container.current) return
+    chart.current = echarts.init(container.current, undefined, { renderer: 'canvas' })
+
+    // 容器宽度随侧栏折叠、窗口缩放而变，不监听就会留下拉伸变形的画布
+    const observer = new ResizeObserver(() => chart.current?.resize())
+    observer.observe(container.current)
+
+    return () => {
+      observer.disconnect()
+      chart.current?.dispose()
+      chart.current = null
+    }
+  }, [])
+
+  useEffect(() => {
+    // notMerge=true：换数据时不合并旧配置，否则切换维度后残留的上一个
+    // 系列会留在图上（比如从 12 个月的柱状切到 6 个月，尾部仍有两根旧柱）
+    chart.current?.setOption(option, { notMerge: true })
+  }, [option])
+
+  return <div ref={container} className={cn('w-full', className)} style={{ height }} />
+}

package/frontend/src/components/ui/empty-state.tsx

@@ -0,0 +1,22 @@
+/**
+ * 空状态。
+ *
+ * 给的是"接下来该做什么"，而不是一句"暂无数据" —— 后者只说明这里没东西，
+ * 不说明为什么，也不说明能做什么。
+ */
+export function EmptyState({
+  title,
+  description,
+}: {
+  title: string
+  description?: string
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-1 px-6 py-14 text-center">
+      <p className="text-sm font-medium text-[var(--color-text-secondary)]">{title}</p>
+      {description && (
+        <p className="max-w-md text-sm text-[var(--color-text-muted)]">{description}</p>
+      )}
+    </div>
+  )
+}

package/frontend/src/components/ui/input.tsx

@@ -0,0 +1,39 @@
+import { Input as AntInput, type InputProps as AntInputProps } from 'antd'
+import type { LabelHTMLAttributes } from 'react'
+
+import { cn } from '@/lib/utils'
+
+export interface InputProps extends Omit<AntInputProps, 'status'> {
+  invalid?: boolean
+}
+
+/**
+ * 单行输入框。
+ *
+ * `invalid` 转到 AntD 的 `status="error"`：除了边框变红，读屏器也会念出
+ * 这是错误状态，而改边框颜色对读屏器什么都不是。
+ *
+ * 高度不再由这里写死。原来是 `h-9`（36px）而旁边的下拉是 32px，同一行里
+ * 差着 4px —— 换成 AntD 的控件高度后两者同高。想调就调主题里的
+ * `controlHeight`，不要往这个组件上挂高度类：AntD 的无层样式会把它们吃掉。
+ */
+export function Input({ invalid, ...props }: InputProps) {
+  return <AntInput status={invalid ? 'error' : undefined} {...props} />
+}
+
+export function Label({ className, ...props }: LabelHTMLAttributes<HTMLLabelElement>) {
+  return (
+    <label
+      className={cn(
+        'mb-1.5 block text-sm font-medium text-[var(--color-text-secondary)]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export function FieldError({ children }: { children?: React.ReactNode }) {
+  if (!children) return null
+  return <p className="mt-1.5 text-xs text-[var(--color-danger)]">{children}</p>
+}

package/frontend/src/components/ui/lazy-chart.tsx

@@ -0,0 +1,21 @@
+import { lazy, Suspense } from 'react'
+
+/**
+ * 按需加载的图表组件。
+ *
+ * ECharts 本身约 340KB(gzip)，而它只出现在版本页与成员页 —— 把它放进主包，
+ * 会让只看 PR 列表的人一起承担这段下载。这里用动态 import 把它拆成独立 chunk，
+ * 只有真正渲染图表时才取。
+ */
+const EChart = lazy(() =>
+  import('@/components/ui/echart').then((module) => ({ default: module.EChart })),
+)
+
+export function LazyChart({ option, height = 260 }: { option: unknown; height?: number }) {
+  return (
+    // 占位块与最终画布等高，避免图表加载完成时页面跳动
+    <Suspense fallback={<div style={{ height }} />}>
+      <EChart option={option as never} height={height} />
+    </Suspense>
+  )
+}

package/frontend/src/components/ui/skeleton.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@/lib/utils'
+
+/**
+ * 加载骨架。避免全屏 spinner 造成的布局跳动。
+ *
+ * 自己用 div 而不是 AntD 的 `Skeleton`，这一条是实测出来的：调用方靠
+ * Tailwind 类给尺寸（`h-9 w-full`、`h-64 w-full`），而 AntD 注入的是
+ * **无层样式**，优先级高于 Tailwind 的 utilities 层 —— 传进去的类会被
+ * 吃掉。实测 `Skeleton.Node` 不管给什么类都渲染成 96×96 的方块，
+ * 列表页上就是十几个错位的灰方块。
+ *
+ * AntD 的 Skeleton 面向的是"按内容形状渲染"（标题条、段落行、头像），
+ * 而这里要的是"占住任意高度的一块"，只有 size 无法表达。
+ */
+export function Skeleton({ className }: { className?: string }) {
+  return (
+    <div aria-hidden className={cn('animate-pulse rounded bg-[var(--color-surface-2)]', className)} />
+  )
+}

package/frontend/src/hooks/use-current-repository.ts

@@ -0,0 +1,44 @@
+import { useQuery } from '@tanstack/react-query'
+import { useRouterState } from '@tanstack/react-router'
+
+import { repositoriesApi, repoKey, type Repository } from '@/api/repositories'
+import type { RepoSearch } from '@/app/search'
+
+/**
+ * 当前上下文里的仓库。
+ *
+ * 仓库来自**地址栏**，不是某个全局变量。纳管多个仓库之后，"第一个仓库"
+ * 这种说法就没有意义了：同一个 `/branches/master` 在两个仓库里指的是两件事，
+ * 而地址栏是唯一能把这层意思带下去的地方（链接、书签、转发）。
+ *
+ * 没带 repo 参数时退回列表里的第一个，老链接因此仍然可用。
+ */
+export function useCurrentRepository(): {
+  repository: Repository | undefined
+  repositories: Repository[]
+  key: string | undefined
+  isLoading: boolean
+} {
+  const { data, isLoading } = useQuery({
+    queryKey: ['repositories'],
+    queryFn: repositoriesApi.list,
+  })
+
+  // 从路由状态直接读，而不是 useSearch({ from })。这个 hook 要给侧栏用，
+  // 它不属于任何一个具体路由，写死 from 就只能在那一页工作。
+  const wanted = useRouterState({
+    select: (state) => (state.location.search as RepoSearch | undefined)?.repo,
+  })
+
+  const repositories = data ?? []
+  const repository = wanted
+    ? repositories.find((item) => repoKey(item) === wanted)
+    : repositories[0]
+
+  return {
+    repository,
+    repositories,
+    key: repository ? repoKey(repository) : undefined,
+    isLoading,
+  }
+}

package/frontend/src/hooks/use-current-user.ts

@@ -0,0 +1,38 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { authApi, type CurrentUser, type Permission, type Role } from '@/api/auth'
+
+const ROLE_ORDER: Role[] = ['VIEWER', 'REVIEWER', 'COMMITTER', 'MAINTAINER', 'ADMIN']
+
+/**
+ * 当前登录用户。
+ *
+ * 直接以 React Query 缓存为唯一来源，**不再镜像到独立 store** ——
+ * 镜像需要 useEffect 同步，而 effect 在渲染之后才执行，
+ * 会造成「数据已到但组件仍读到 null」的渲染时序空窗，
+ * 表现为登录后被弹回登录页、刷新后会话丢失。
+ */
+export function useCurrentUser() {
+  const query = useQuery({
+    queryKey: ['me'],
+    queryFn: authApi.me,
+    retry: false,
+    staleTime: 30_000,
+  })
+  return {
+    user: query.data ?? null,
+    isLoading: query.isLoading,
+    isAuthenticated: Boolean(query.data),
+  }
+}
+
+/** 是否具备某项权限。前端判断仅供 UI 显隐，授权由后端强制执行。 */
+export function can(user: CurrentUser | null, permission: Permission): boolean {
+  return user?.permissions.includes(permission) ?? false
+}
+
+/** 是否达到最低角色等级。 */
+export function hasRole(user: CurrentUser | null, minimum: Role): boolean {
+  if (!user) return false
+  return ROLE_ORDER.indexOf(user.role) >= ROLE_ORDER.indexOf(minimum)
+}