@kernel-sig/console 0.1.0

package/frontend/src/pages/settings/SettingsPage.tsx

@@ -0,0 +1,321 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useState, type FormEvent } from 'react'
+
+import { credentialsApi, repositoriesApi } from '@/api/repositories'
+import { Alert } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input, Label } from '@/components/ui/input'
+import { EmptyState } from '@/components/ui/empty-state'
+import { Skeleton } from '@/components/ui/skeleton'
+import { ApiError } from '@/lib/api-client'
+import { formatRelativeTime } from '@/lib/utils'
+
+export function SettingsPage() {
+  const queryClient = useQueryClient()
+  const [credentialName, setCredentialName] = useState('openeuler-atomgit')
+  const [tokenValue, setTokenValue] = useState('')
+
+  const { data: credentials, isLoading: credsLoading } = useQuery({
+    queryKey: ['credentials'],
+    queryFn: credentialsApi.list,
+  })
+
+  const { data: repositories, isLoading: reposLoading } = useQuery({
+    queryKey: ['repositories'],
+    queryFn: repositoriesApi.list,
+  })
+
+  const createCredential = useMutation({
+    mutationFn: () =>
+      credentialsApi.create({
+        name: credentialName,
+        kind: 'atomgit_token',
+        value: tokenValue,
+      }),
+    onSuccess: async () => {
+      // 创建后立刻清空输入框：明文 token 不应在界面上停留
+      setTokenValue('')
+      await queryClient.invalidateQueries({ queryKey: ['credentials'] })
+    },
+  })
+
+  const verifyCredential = useMutation({
+    mutationFn: (id: string) => credentialsApi.verify(id),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['credentials'] }),
+  })
+
+  const createRepository = useMutation({
+    mutationFn: (credentialId: string) =>
+      repositoriesApi.create({
+        owner: 'openeuler',
+        name: 'kernel',
+        credential_id: credentialId,
+      }),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['repositories'] }),
+  })
+
+  const syncRepository = useMutation({
+    mutationFn: (id: string) => repositoriesApi.sync(id, 50),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ['repositories'] })
+      await queryClient.invalidateQueries({ queryKey: ['pulls'] })
+      await queryClient.invalidateQueries({ queryKey: ['stage-counts'] })
+    },
+  })
+
+  function handleCredentialSubmit(event: FormEvent) {
+    event.preventDefault()
+    if (!tokenValue.trim()) return
+    createCredential.mutate()
+  }
+
+  const hasRepository = Boolean(repositories?.length)
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-6">
+      <div>
+        <h1 className="text-base font-semibold tracking-tight">仓库与同步</h1>
+        <p className="mt-1 text-sm text-[var(--color-text-secondary)]">
+          配置 AtomGit 访问凭据并纳管仓库。凭据以 AES-256-GCM 加密存储，界面不提供明文回显。
+        </p>
+      </div>
+
+      {/* ---- 凭据 ---- */}
+      <Card>
+        <CardHeader>
+          <CardTitle>访问凭据</CardTitle>
+          <CardDescription>
+            AtomGit 与其底层 GitCode 共用同一套 token。认证使用 <code>private-token</code> 请求头。
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {credsLoading ? (
+            <Skeleton className="h-14 w-full" />
+          ) : credentials && credentials.length > 0 ? (
+            <ul className="space-y-2">
+              {credentials.map((credential) => (
+                <li
+                  key={credential.id}
+                  className="flex flex-wrap items-center gap-x-3 gap-y-2 rounded-[var(--radius-control)] border border-[var(--color-border-subtle)] bg-[var(--color-surface-2)] px-3 py-2.5"
+                >
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium">{credential.name}</span>
+                      {credential.last_verify_error ? (
+                        <Badge tone="danger">校验失败</Badge>
+                      ) : credential.last_verified_at ? (
+                        <Badge tone="success">有效</Badge>
+                      ) : (
+                        <Badge tone="neutral">未校验</Badge>
+                      )}
+                    </div>
+                    <div className="mt-0.5 flex flex-wrap items-center gap-x-3 text-xs text-[var(--color-text-muted)]">
+                      <span className="font-mono">指纹 {credential.fingerprint}</span>
+                      {typeof credential.meta?.login === 'string' && (
+                        <span>账号 {credential.meta.login}</span>
+                      )}
+                      {credential.last_verify_error && (
+                        <span className="text-[var(--color-danger)]">
+                          {credential.last_verify_error}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={() => verifyCredential.mutate(credential.id)}
+                    loading={
+                      verifyCredential.isPending &&
+                      verifyCredential.variables === credential.id
+                    }
+                  >
+                    校验
+                  </Button>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <EmptyState title="尚未配置凭据" description="在下方添加一个 AtomGit 访问令牌。" />
+          )}
+
+          {createCredential.error instanceof ApiError && (
+            <Alert tone="danger">{createCredential.error.message}</Alert>
+          )}
+
+          <form onSubmit={handleCredentialSubmit} className="space-y-3 border-t border-[var(--color-border-subtle)] pt-4">
+            <div className="grid gap-3 sm:grid-cols-[200px_1fr]">
+              <div>
+                <Label htmlFor="cred-name">名称</Label>
+                <Input
+                  id="cred-name"
+                  value={credentialName}
+                  onChange={(e) => setCredentialName(e.target.value)}
+                  required
+                />
+              </div>
+              <div>
+                <Label htmlFor="cred-value">访问令牌</Label>
+                <Input
+                  id="cred-value"
+                  type="password"
+                  autoComplete="off"
+                  placeholder="粘贴 AtomGit 个人访问令牌"
+                  value={tokenValue}
+                  onChange={(e) => setTokenValue(e.target.value)}
+                />
+              </div>
+            </div>
+            <Button type="submit" size="sm" loading={createCredential.isPending}>
+              添加凭据
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      {/* ---- 仓库 ---- */}
+      <Card>
+        <CardHeader>
+          <CardTitle>纳管仓库</CardTitle>
+          <CardDescription>
+            纳管前会先校验凭据有效性，避免把不可用的配置写进系统。
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {reposLoading ? (
+            <Skeleton className="h-20 w-full" />
+          ) : hasRepository ? (
+            <ul className="space-y-2">
+              {repositories!.map((repository) => (
+                <li
+                  key={repository.id}
+                  className="rounded-[var(--radius-control)] border border-[var(--color-border-subtle)] bg-[var(--color-surface-2)] p-3"
+                >
+                  <div className="flex flex-wrap items-center justify-between gap-2">
+                    <div>
+                      <div className="text-sm font-medium">
+                        {repository.display_name ?? `${repository.owner}/${repository.name}`}
+                      </div>
+                      <div className="mt-0.5 flex flex-wrap items-center gap-x-3 text-xs text-[var(--color-text-muted)]">
+                        <span className="font-mono">{repository.api_base_url}</span>
+                        <span>默认分支 {repository.default_branch ?? '—'}</span>
+                      </div>
+                    </div>
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={() => syncRepository.mutate(repository.id)}
+                      loading={syncRepository.isPending}
+                      disabled={!repository.credential_id}
+                    >
+                      立即同步
+                    </Button>
+                  </div>
+
+                  <div className="mt-2.5 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs">
+                    <span>
+                      PR <span className="font-mono tabular-nums">{repository.pull_count ?? 0}</span>
+                    </span>
+                    <span>
+                      Issue{' '}
+                      <span className="font-mono tabular-nums">{repository.issue_count ?? 0}</span>
+                    </span>
+                    <span className="text-[var(--color-text-muted)]">
+                      上次同步 {formatRelativeTime(repository.last_sync_at)}
+                    </span>
+                  </div>
+
+                  {/* 未配置凭据时同步整条链都不会跑，而这个状态在 last_sync_error
+                      里看不到（同步压根没开始，没人写那个字段）。不说一句的话，
+                      界面上就是一个永远 0 条的仓库，没人知道该去配凭据。 */}
+                  {!repository.credential_id && (
+                    <Alert tone="warning" className="mt-2">
+                      未配置凭据，同步不会运行。请在上方「访问凭据」中添加 AtomGit token。
+                    </Alert>
+                  )}
+
+                  {repository.last_sync_error && (
+                    <Alert tone="danger" className="mt-2">
+                      {repository.last_sync_error}
+                    </Alert>
+                  )}
+
+                  {repository.webhook_path && <WebhookHint path={repository.webhook_path} />}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <EmptyState
+              title="尚未纳管仓库"
+              description={
+                credentials && credentials.length > 0
+                  ? '点击下方按钮纳管 openeuler/kernel。'
+                  : '请先添加一个访问凭据。'
+              }
+            />
+          )}
+
+          {syncRepository.error instanceof ApiError && (
+            <Alert tone="danger">{syncRepository.error.message}</Alert>
+          )}
+          {createRepository.error instanceof ApiError && (
+            <Alert tone="danger">{createRepository.error.message}</Alert>
+          )}
+
+          {!hasRepository && credentials && credentials.length > 0 && (
+            <Button
+              size="sm"
+              onClick={() => createRepository.mutate(credentials[0].id)}
+              loading={createRepository.isPending}
+            >
+              纳管 openeuler/kernel
+            </Button>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+/**
+ * Webhook 配置提示。
+ *
+ * 说明为何"不信任载荷"：AtomGit 投递时不带签名头，无法校验完整性，
+ * 因此平台只把 webhook 当作变化信号，收到后回源拉取权威数据。
+ * 把这一点写在界面上，避免使用者误以为需要配置密钥头。
+ */
+function WebhookHint({ path }: { path: string }) {
+  const [copied, setCopied] = useState(false)
+  const fullUrl = `${window.location.origin}${path}`
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(fullUrl)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      setCopied(false)
+    }
+  }
+
+  return (
+    <div className="mt-2.5 rounded-[var(--radius-control)] border border-[var(--color-border-subtle)] p-2.5">
+      <div className="text-2xs text-[var(--color-text-muted)]">Webhook 接收地址</div>
+      <div className="mt-1 flex items-center gap-2">
+        <code className="min-w-0 flex-1 truncate text-2xs text-[var(--color-text-secondary)]">
+          {fullUrl}
+        </code>
+        <Button variant="ghost" size="sm" onClick={copy}>
+          {copied ? '已复制' : '复制'}
+        </Button>
+      </div>
+      <p className="mt-1.5 text-2xs leading-relaxed text-[var(--color-text-muted)]">
+        AtomGit 投递时不带签名头，无法校验载荷完整性，因此平台只把事件当作「有变化」的
+        信号，收到后回源拉取权威数据。URL 中的随机串即为准入凭证，泄漏后可在
+        <code> 轮换 </code>后失效。
+      </p>
+    </div>
+  )
+}

package/frontend/src/pages/setup/SetupPage.tsx

@@ -0,0 +1,144 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Navigate, useNavigate } from '@tanstack/react-router'
+import { useState, type ChangeEvent, 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 { FieldError, Input, Label } from '@/components/ui/input'
+import { ApiError } from '@/lib/api-client'
+
+const INITIAL_FORM = {
+  username: '',
+  display_name: '',
+  email: '',
+  password: '',
+  confirm: '',
+}
+
+export function SetupPage() {
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const [form, setForm] = useState(INITIAL_FORM)
+
+  const { data: status, isLoading } = useQuery({
+    queryKey: ['setup-status'],
+    queryFn: authApi.setupStatus,
+    staleTime: Infinity,
+  })
+
+  const setup = useMutation({
+    mutationFn: () =>
+      authApi.setup({
+        username: form.username,
+        display_name: form.display_name,
+        email: form.email,
+        password: form.password,
+      }),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ['setup-status'] })
+      await navigate({ to: '/login' })
+    },
+  })
+
+  const passwordMismatch = form.confirm.length > 0 && form.password !== form.confirm
+
+  const errorMessage =
+    setup.error instanceof ApiError
+      ? setup.error.message
+      : setup.error
+        ? '初始化失败，请稍后重试'
+        : null
+
+  function update(field: keyof typeof INITIAL_FORM) {
+    return (event: ChangeEvent<HTMLInputElement>) =>
+      setForm((prev) => ({ ...prev, [field]: event.target.value }))
+  }
+
+  function handleSubmit(event: FormEvent) {
+    event.preventDefault()
+    if (passwordMismatch) return
+    setup.mutate()
+  }
+
+  // 系统已有账号时该页面不再可用，直接送回登录页
+  if (!isLoading && status && !status.needs_setup) {
+    return <Navigate to="/login" />
+  }
+
+  return (
+    <AuthLayout
+      title="初始化平台"
+      description="创建第一个管理员账号。该页面仅在系统无任何用户时可用。"
+    >
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {errorMessage && <Alert tone="danger">{errorMessage}</Alert>}
+
+        <div>
+          <Label htmlFor="username">用户名</Label>
+          <Input
+            id="username"
+            required
+            minLength={3}
+            autoFocus
+            autoComplete="username"
+            value={form.username}
+            onChange={update('username')}
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="display_name">显示名</Label>
+          <Input
+            id="display_name"
+            required
+            value={form.display_name}
+            onChange={update('display_name')}
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="email">邮箱</Label>
+          <Input id="email" type="email" required value={form.email} onChange={update('email')} />
+        </div>
+
+        <div>
+          <Label htmlFor="password">密码（至少 8 位）</Label>
+          <Input
+            id="password"
+            type="password"
+            required
+            minLength={8}
+            autoComplete="new-password"
+            value={form.password}
+            onChange={update('password')}
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="confirm">确认密码</Label>
+          <Input
+            id="confirm"
+            type="password"
+            required
+            autoComplete="new-password"
+            invalid={passwordMismatch}
+            value={form.confirm}
+            onChange={update('confirm')}
+          />
+          <FieldError>{passwordMismatch ? '两次输入的密码不一致' : null}</FieldError>
+        </div>
+
+        <Button
+          type="submit"
+          className="w-full"
+          loading={setup.isPending}
+          disabled={passwordMismatch}
+        >
+          创建管理员
+        </Button>
+      </form>
+    </AuthLayout>
+  )
+}

package/frontend/src/styles/globals.css

@@ -0,0 +1,147 @@
+@import 'tailwindcss';
+
+/*
+ * 设计令牌集中定义。深色为默认主题 —— 内核开发者长期在终端环境下工作，
+ * 深色更少视觉疲劳。
+ *
+ * 取色原则：
+ * - 中性色带轻微冷色偏移（chroma 0.012~0.02，色相 265），不用纯灰。
+ *   纯灰在深色下会显脏，且与彩色强调色并置时缺乏统一感。
+ * - 明度分层明确：surface-0 → 3 每级相差约 0.04，保证卡片能从背景里浮起来，
+ *   同时不至于因为对比过强而显得割裂。
+ * - 强调色只用于主操作与链接；状态色只用于状态。两者不混用，
+ *   否则使用者无法区分"这个颜色代表可点击"还是"代表有风险"。
+ */
+@theme {
+  /* 中性层级 */
+  --color-surface-0: oklch(0.165 0.014 265); /* 页面背景 */
+  --color-surface-1: oklch(0.205 0.016 265); /* 卡片 */
+  --color-surface-2: oklch(0.25 0.018 265); /* 悬浮 / 次级面板 */
+  --color-surface-3: oklch(0.295 0.02 265); /* 输入框 / 强调底 */
+  --color-border-subtle: oklch(0.3 0.02 265);
+  --color-border-strong: oklch(0.42 0.024 265);
+  --color-text-primary: oklch(0.965 0.006 265);
+  --color-text-secondary: oklch(0.775 0.014 265);
+  --color-text-muted: oklch(0.6 0.018 265);
+
+  /* 语义色。明度普遍取 0.7 以上：深色背景下低明度色看不清，
+     而状态色看不清等于没有。 */
+  --color-accent: oklch(0.7 0.155 262);
+  --color-accent-strong: oklch(0.78 0.16 262);
+  --color-success: oklch(0.76 0.155 155);
+  --color-warning: oklch(0.83 0.15 82);
+  --color-danger: oklch(0.7 0.185 22);
+  --color-info: oklch(0.75 0.12 225);
+
+  /* 内容类别专用色。类别有十几类，直接复用语义色会让"这是危险"
+     与"这是 CVE 类"看起来一样，因此另开一组色相。 */
+  --color-kind-cve: oklch(0.7 0.19 22);
+  --color-kind-backport: oklch(0.75 0.12 225);
+  --color-kind-driver: oklch(0.76 0.14 300);
+  --color-kind-soc: oklch(0.78 0.13 185);
+  --color-kind-out-of-tree: oklch(0.74 0.15 320);
+  --color-kind-fix: oklch(0.83 0.15 82);
+  --color-kind-feature: oklch(0.76 0.155 155);
+
+  --radius-control: 6px;
+  --radius-card: 10px;
+
+  /*
+   * 字号阶梯。三级之间的差是 1~2px，与内容层级一一对应：
+   * 2xs 辅助说明、xs 次要信息、sm 正文与表格。原来的取值散在
+   * 300 处 `text-[NNpx]` 里，等于没有阶梯 —— 标题 16px 挨着正文 12px，
+   * 中间空了三档，整片界面看上去密而平。
+   *
+   * 用 Tailwind 自己的名字，不另造一套：text-xs/text-sm 本来就是
+   * 12/14，11px 是它没有的一级，才需要新增。
+   */
+  --text-2xs: 11px;
+
+  /*
+   * 卡片阴影。
+   *
+   * 深色界面里单靠投影几乎看不出层次（背景本来就暗），所以三段叠起来用：
+   * 顶边一道极淡的内高光负责"像是从上面打的灯"，两层外投影负责把卡片
+   * 从页面上抬起来。没有它，卡片与背景之间只剩 0.04 的明度差和一条
+   * 1px 描边，整片界面糊成一块。
+   */
+  --shadow-card:
+    inset 0 1px 0 oklch(1 0 0 / 0.045), 0 1px 2px oklch(0 0 0 / 0.35),
+    0 6px 16px oklch(0 0 0 / 0.22);
+  --shadow-card-hover:
+    inset 0 1px 0 oklch(1 0 0 / 0.06), 0 2px 4px oklch(0 0 0 / 0.4),
+    0 12px 28px oklch(0 0 0 / 0.32);
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background-color: var(--color-surface-0);
+  color: var(--color-text-primary);
+  font-family:
+    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC',
+    'Noto Sans CJK SC', sans-serif;
+  font-size: 14px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+code,
+pre,
+.font-mono {
+  font-family:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+}
+
+::selection {
+  background-color: color-mix(in oklch, var(--color-accent) 38%, transparent);
+}
+
+/* 键盘用户必须能看清焦点位置 */
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-strong) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-border-strong);
+  border-radius: 999px;
+  border: 2px solid var(--color-surface-0);
+}
+
+/*
+ * 评论正文用。上游评论常含 HTML 表格与长 URL，
+ * 这里只做排版，不解析任何标签 —— 正文一律按纯文本渲染。
+ */
+.comment-body {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/frontend/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "types": ["vite/client", "node"],
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "baseUrl": ".",
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/frontend/vite.config.ts

@@ -0,0 +1,57 @@
+import path from 'node:path'
+
+import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: { '@': path.resolve(__dirname, './src') },
+  },
+  server: {
+    port: 15173,
+    // 开发时把 /api 代理到后端，避免 CORS 与 Cookie domain 问题
+    proxy: {
+      '/api': {
+        target: 'http://localhost:18000',
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: false,
+    /**
+     * 阈值贴着**已接受**的基线设，而不是贴着理想值设。
+     *
+     * 控件层迁到 AntD 之后 vendor-antd 实测 1002 KB（gzip 320 KB），
+     * 其中大部分是摇不掉的 cssinjs 运行时与主题算法 —— 即便只引一个
+     * Button 也在。这台服务跑在内网、产物带内容哈希，antd 版本不变
+     * 就不会重新下载，所以这个体积是接受的。
+     *
+     * 留着 800 只会让每次构建都红一次；一个永远为红的告警等于没有告警，
+     * 真正涨上来的时候没人会看。1100 留出一成余量，越过它就该有人来解释。
+     */
+    chunkSizeWarningLimit: 1100,
+    rollupOptions: {
+      output: {
+        /**
+         * 把 AntD 拆成独立块。
+         *
+         * 它连同 `rc-*` 与 `@ant-design/*` 有几百 KB，混进主包的话
+         * 每次部署都会让这个数字重新下载一次，而它几乎不随业务代码变化。
+         * 拆开还有一个作用：体积成本摆在明处，涨了多少一眼看得见，
+         * 而不是藏在主包的数字里慢慢膨胀。
+         */
+        manualChunks(id) {
+          if (!id.includes('node_modules')) return undefined
+          if (/[\\/]node_modules[\\/](antd|rc-[^\\/]+|@rc-component|[\\/]@ant-design)[\\/]/.test(id)) {
+            return 'vendor-antd'
+          }
+          return undefined
+        },
+      },
+    },
+  },
+})