@kernel-sig/console 0.1.0

package/frontend/src/pages/issues/IssueListPage.tsx

@@ -0,0 +1,284 @@
+import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
+import { Select, Tooltip } from 'antd'
+import type { ColumnsType } from 'antd/es/table'
+
+import {
+  ISSUE_STATE_TONE,
+  issuesApi,
+  type IssueFilters,
+  type IssueListItem,
+} from '@/api/issues'
+import { useCurrentRepository } from '@/hooks/use-current-repository'
+import { ClassificationBadge } from '@/components/ClassificationBadge'
+import { DataTable } from '@/components/ui/data-table'
+import { Badge, type BadgeTone } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { EmptyState } from '@/components/ui/empty-state'
+import { Skeleton } from '@/components/ui/skeleton'
+import { cn, formatNumber, formatRelativeTime } from '@/lib/utils'
+
+const PER_PAGE = 30
+
+const STATE_OPTIONS = [
+  { value: 'open', label: '未关闭' },
+  { value: 'closed', label: '已关闭' },
+  { value: 'all', label: '全部' },
+]
+
+const SORT_OPTIONS = [
+  { value: 'updated', label: '最近更新' },
+  { value: 'created', label: '最近创建' },
+  { value: 'comments', label: '讨论最多' },
+]
+
+const COLUMNS: ColumnsType<IssueListItem> = [
+  {
+    title: '编号',
+    width: 70,
+    render: (_, issue) => (
+      <span className="font-mono text-xs text-[var(--color-text-muted)]">#{issue.number}</span>
+    ),
+  },
+  {
+    title: '标题',
+    render: (_, issue) => (
+      <>
+        {issue.html_url ? (
+          <Tooltip title={issue.title}>
+            <a
+              href={issue.html_url}
+              target="_blank"
+              rel="noreferrer noopener"
+              className="line-clamp-1 hover:text-[var(--color-accent)]"
+            >
+              {issue.title}
+            </a>
+          </Tooltip>
+        ) : (
+          <Tooltip title={issue.title}>
+            <span className="line-clamp-1">{issue.title}</span>
+          </Tooltip>
+        )}
+        {issue.comments_count > 0 && (
+          <span className="ml-2 text-2xs text-[var(--color-text-muted)]">
+            {issue.comments_count} 条讨论
+          </span>
+        )}
+      </>
+    ),
+  },
+  {
+    title: '类别',
+    width: 180,
+    // 两枚徽章并排：本平台判定的类别，与 AtomGit 自己的 issue_type。
+    // 前者是推断，后者是原始登记，混作一谈会让人以为推断也是权威。
+    render: (_, issue) => (
+      <div className="flex flex-wrap items-center gap-1.5">
+        {issue.kind ? (
+          <ClassificationBadge kind={issue.kind} />
+        ) : (
+          <span className="text-xs text-[var(--color-text-muted)]">未分类</span>
+        )}
+        {issue.issue_type && (
+          <Badge tone="neutral" className="font-normal">
+            {issue.issue_type}
+          </Badge>
+        )}
+      </div>
+    ),
+  },
+  {
+    title: '状态',
+    width: 90,
+    render: (_, issue) =>
+      issue.issue_state ? (
+        <Badge tone={(ISSUE_STATE_TONE[issue.issue_state] ?? 'neutral') as BadgeTone}>
+          {issue.issue_state}
+        </Badge>
+      ) : (
+        <span className="text-xs text-[var(--color-text-muted)]">—</span>
+      ),
+  },
+  {
+    title: '优先级',
+    width: 100,
+    render: (_, issue) => (
+      <span className="text-xs text-[var(--color-text-secondary)]">
+        {issue.priority_label ?? '—'}
+      </span>
+    ),
+  },
+  {
+    title: '负责人',
+    width: 120,
+    render: (_, issue) => (
+      <span className="text-xs text-[var(--color-text-secondary)]">
+        {issue.assignee_login ?? '未指派'}
+      </span>
+    ),
+  },
+  {
+    title: '更新',
+    width: 100,
+    render: (_, issue) => (
+      <span className="text-xs text-[var(--color-text-muted)]">
+        {formatRelativeTime(issue.atomgit_updated_at)}
+      </span>
+    ),
+  },
+]
+
+export function IssueListPage() {
+  const [filters, setFilters] = useState<IssueFilters>({
+    state: 'open',
+    sort: 'updated',
+    order: 'desc',
+    page: 1,
+    per_page: PER_PAGE,
+  })
+  const [searchInput, setSearchInput] = useState('')
+
+  const { repository, isLoading: reposLoading } = useCurrentRepository()
+
+  const { data: facets } = useQuery({
+    queryKey: ['issue-facets', repository?.id],
+    queryFn: () => issuesApi.facets(repository!.id),
+    enabled: Boolean(repository),
+  })
+
+  const { data, isLoading, isFetching } = useQuery({
+    queryKey: ['issues', repository?.id, filters],
+    queryFn: () => issuesApi.list(repository!.id, filters),
+    enabled: Boolean(repository),
+    placeholderData: (previous) => previous,
+  })
+
+  function update(patch: Partial<IssueFilters>) {
+    setFilters((prev) => ({ ...prev, ...patch, page: patch.page ?? 1 }))
+  }
+
+  const totalPages = data
+    ? Math.max(1, Math.ceil(data.total / (filters.per_page ?? PER_PAGE)))
+    : 1
+
+  if (reposLoading) return <Skeleton className="h-64 w-full" />
+
+  if (!repository) {
+    return (
+      <EmptyState
+        title="尚未纳管任何仓库"
+        description="请先在「设置 → 仓库与同步」中完成配置。"
+      />
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <header>
+        <h1 className="text-base font-semibold tracking-tight">Issue</h1>
+        <p className="mt-0.5 text-sm text-[var(--color-text-secondary)]">
+          {repository.display_name ?? `${repository.owner}/${repository.name}`}
+          {data ? ` · 共 ${formatNumber(data.total)} 个` : ''}
+        </p>
+      </header>
+
+      {/* 类型分布直接用 AtomGit 的原生字段，比从标签猜测可靠。
+          这组 chip 保持自绘的 <button aria-pressed>：AntD 的 Tag.CheckableTag
+          渲染成不可聚焦、没有 role 的 <span>，读屏器既念不出"已选中"也没法用
+          键盘切换 —— 换它只是换个观感，代价是可访问性倒退。
+          单选语义（再点一次取消）也正好是 aria-pressed 能表达的。 */}
+      {facets && facets.types.length > 0 && (
+        <div className="flex flex-wrap items-center gap-1.5">
+          {facets.types.map((facet) => {
+            const active = filters.issue_type === facet.value
+            return (
+              <button
+                key={facet.value}
+                type="button"
+                aria-pressed={active}
+                onClick={() => update({ issue_type: active ? undefined : facet.value })}
+                className={cn(
+                  'rounded-full border px-2.5 py-1 text-xs transition-colors duration-150',
+                  active
+                    ? 'border-[var(--color-accent)] bg-[color-mix(in_oklch,var(--color-accent)_18%,transparent)] text-[var(--color-accent)]'
+                    : 'border-[var(--color-border-subtle)] text-[var(--color-text-secondary)] hover:border-[var(--color-border-strong)]',
+                )}
+              >
+                {facet.value}
+                <span className="ml-1.5 font-mono tabular-nums text-[var(--color-text-muted)]">
+                  {facet.count}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      )}
+
+      <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="按标题或 Issue 编号搜索，回车确认"
+            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 })}
+        />
+        {/* 优先级可清空：清空即"不限"，用 allowClear 而不是往选项里
+            塞一个空字符串的项 —— 后者在浮层里看起来像一个真选项。 */}
+        <Select
+          aria-label="优先级"
+          value={filters.priority ?? undefined}
+          placeholder="全部优先级"
+          allowClear
+          options={(facets?.priorities ?? []).map((f) => ({
+            value: f.value,
+            label: `${f.value} (${f.count})`,
+          }))}
+          onChange={(value) => update({ priority: value || undefined })}
+        />
+        <Select
+          aria-label="排序"
+          value={filters.sort ?? 'updated'}
+          options={SORT_OPTIONS}
+          onChange={(value) => update({ sort: value })}
+        />
+      </div>
+
+      <DataTable<IssueListItem>
+        rowKey="id"
+        columns={COLUMNS}
+        dataSource={data?.items ?? []}
+        loading={isLoading}
+        className={cn(isFetching && 'opacity-90')}
+        locale={{
+          emptyText: (
+            <EmptyState title="没有符合条件的 Issue" description="试试放宽筛选条件。" />
+          ),
+        }}
+        pagination={{
+          current: filters.page ?? 1,
+          pageSize: filters.per_page ?? PER_PAGE,
+          total: data?.total ?? 0,
+          showSizeChanger: false,
+          showQuickJumper: totalPages > 10,
+          showTotal: (count) => `共 ${formatNumber(count)} 条`,
+          onChange: (page) => update({ page }),
+        }}
+      />
+    </div>
+  )
+}

package/frontend/src/pages/login/LoginPage.tsx

@@ -0,0 +1,95 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { useState, type FormEvent } from 'react'
+
+import { authApi } from '@/api/auth'
+import { AuthLayout } from '@/components/layout/AuthLayout'
+import { Alert } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { Input, Label } from '@/components/ui/input'
+import { ApiError } from '@/lib/api-client'
+
+export function LoginPage() {
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+
+  const { data: setup } = useQuery({
+    queryKey: ['setup-status'],
+    queryFn: authApi.setupStatus,
+    staleTime: Infinity,
+  })
+
+  const login = useMutation({
+    mutationFn: () => authApi.login({ username, password }),
+    onSuccess: async () => {
+      // 跳转前先把会话写入查询缓存。RequireAuth 直接读缓存，
+      // 因此缓存就绪即代表鉴权判断可用，不存在时序空窗。
+      const me = await authApi.me()
+      queryClient.setQueryData(['me'], me)
+      await navigate({ to: '/dashboard' })
+    },
+  })
+
+  if (setup?.needs_setup) {
+    return (
+      <AuthLayout title="尚未初始化" description="系统还没有任何账号，请先创建管理员。">
+        <Button onClick={() => navigate({ to: '/setup' })}>前往初始化</Button>
+      </AuthLayout>
+    )
+  }
+
+  const errorMessage =
+    login.error instanceof ApiError
+      ? login.error.message
+      : login.error
+        ? '登录失败，请稍后重试'
+        : null
+
+  function handleSubmit(event: FormEvent) {
+    event.preventDefault()
+    login.mutate()
+  }
+
+  return (
+    <AuthLayout
+      title="登录"
+      description="使用平台账号登录，管理 openEuler Kernel SIG 的 PR 与 Issue。"
+    >
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {errorMessage && <Alert tone="danger">{errorMessage}</Alert>}
+
+        <div>
+          <Label htmlFor="username">用户名</Label>
+          <Input
+            id="username"
+            name="username"
+            autoComplete="username"
+            autoFocus
+            required
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="password">密码</Label>
+          <Input
+            id="password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            required
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </div>
+
+        <Button type="submit" className="w-full" loading={login.isPending}>
+          登录
+        </Button>
+      </form>
+    </AuthLayout>
+  )
+}