@kernel-sig/console 0.1.0

package/frontend/src/pages/attention/RuleSettingsPanel.tsx

@@ -0,0 +1,177 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { RotateCcw } from 'lucide-react'
+import { InputNumber, Select } from 'antd'
+
+import { attentionApi, attentionQueueApi, type AttentionRule, type AttentionRuleSetting } from '@/api/attention'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { can, useCurrentUser } from '@/hooks/use-current-user'
+import { cn, formatNumber } from '@/lib/utils'
+
+/**
+ * 关注规则的订阅设置。
+ *
+ * 阈值写死在代码里的结果是没人用这个功能：第一条不符合自己节奏的提醒
+ * 就会让人关掉整个队列。所以开关、阈值、适用对象都放在这里由使用者决定。
+ *
+ * 每条规则旁边给出当前条数 —— 关掉一条规则之前，应该先看到它拦下了多少东西。
+ * 设置只影响下一次重算（后端每 15 分钟一次），所以这里同时给出「立即重算」：
+ * 只告诉使用者"等一会儿"却不给催的办法，改完没看到变化就会被当成没生效。
+ */
+export function RuleSettingsPanel({ repositoryId }: { repositoryId: string }) {
+  const queryClient = useQueryClient()
+  const { user } = useCurrentUser()
+
+  const { data: settings, isLoading } = useQuery({
+    queryKey: ['attention-rule-settings'],
+    queryFn: attentionQueueApi.ruleSettings,
+  })
+
+  const refresh = () => {
+    queryClient.invalidateQueries({ queryKey: ['attention-rule-settings'] })
+    queryClient.invalidateQueries({ queryKey: ['attention-queue'] })
+    queryClient.invalidateQueries({ queryKey: ['attention-summary'] })
+  }
+
+  const update = useMutation({
+    mutationFn: ({
+      rule,
+      patch,
+    }: {
+      rule: AttentionRule
+      patch: { enabled?: boolean; days?: number; subject_scope?: string }
+    }) => attentionQueueApi.updateRuleSetting(rule, patch),
+    onSuccess: refresh,
+  })
+
+  const recompute = useMutation({
+    mutationFn: () => attentionApi.recompute(repositoryId),
+    onSuccess: refresh,
+  })
+
+  if (isLoading) return <Skeleton className="h-40 w-full" />
+
+  return (
+    <section className="rounded-[var(--radius-card)] border border-[var(--color-border-subtle)] bg-[var(--color-surface-1)]">
+      <header className="flex flex-wrap items-center justify-between gap-2 border-b border-[var(--color-border-subtle)] px-4 py-3">
+        <h2 className="text-sm font-semibold">关注设置</h2>
+        <div className="flex items-center gap-3">
+          <p className="text-xs text-[var(--color-text-muted)]">
+            改动在关注项下一次重算后生效（后台每 15 分钟一次）
+          </p>
+          {can(user, 'classify') && (
+            <Button
+              variant="secondary"
+              size="sm"
+              loading={recompute.isPending}
+              onClick={() => recompute.mutate()}
+            >
+              立即重算
+            </Button>
+          )}
+        </div>
+      </header>
+
+      {update.isError && (
+        <p className="border-b border-[var(--color-border-subtle)] px-4 py-2 text-xs text-[var(--color-danger)]">
+          保存失败，改动未生效。请稍后重试。
+        </p>
+      )}
+
+      <ul className="divide-y divide-[var(--color-border-subtle)]">
+        {(settings ?? []).map((setting) => (
+          <SettingRow
+            key={setting.rule}
+            setting={setting}
+            pending={update.isPending}
+            onChange={(patch) => update.mutate({ rule: setting.rule, patch })}
+          />
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+function SettingRow({
+  setting,
+  pending,
+  onChange,
+}: {
+  setting: AttentionRuleSetting
+  pending: boolean
+  onChange: (patch: { enabled?: boolean; days?: number; subject_scope?: string }) => void
+}) {
+  return (
+    <li className={cn('flex flex-wrap items-start gap-x-4 gap-y-2 px-4 py-3', !setting.enabled && 'opacity-60')}>
+      <label className="flex min-w-[220px] flex-1 cursor-pointer items-start gap-2.5">
+        <input
+          type="checkbox"
+          checked={setting.enabled}
+          disabled={pending}
+          onChange={(event) => onChange({ enabled: event.target.checked })}
+          className="mt-1 size-3.5 shrink-0 accent-[var(--color-accent)]"
+        />
+        <span className="min-w-0">
+          <span className="flex flex-wrap items-center gap-2">
+            <span className="text-sm font-medium">{setting.label}</span>
+            <Badge tone="neutral" className="font-normal">
+              {setting.subject === 'issue' ? 'Issue' : 'PR'}
+            </Badge>
+            <span className="font-mono text-xs tabular-nums text-[var(--color-text-muted)]">
+              {formatNumber(setting.open_count)}
+            </span>
+          </span>
+          <span className="mt-0.5 block text-xs leading-relaxed text-[var(--color-text-muted)]">
+            {setting.meaning}
+          </span>
+        </span>
+      </label>
+
+      <div className="flex shrink-0 items-center gap-2">
+        <label className="flex items-center gap-1.5 text-xs text-[var(--color-text-muted)]">
+          阈值
+          {/* InputNumber 而不是 type=number 的输入框：原生数字输入框在
+              清空时给出的是空字符串，而 `Number('')` 是 0 —— 阈值被清空一次
+              就静默变成"0 天"，那条规则从此不再触发任何东西。 */}
+          <InputNumber
+            aria-label={`${setting.label} 阈值天数`}
+            size="small"
+            min={0}
+            max={3650}
+            value={setting.days}
+            disabled={pending || !setting.enabled}
+            // 空值不提交：受控的 InputNumber 会把当前值显示回去，也就是
+            // "清空这一步不算数"。这比让它落到 0 好。
+            onChange={(value) => value != null && onChange({ days: value })}
+            className="w-20"
+          />
+          天
+        </label>
+        <Select
+          aria-label={`${setting.label} 适用范围`}
+          size="small"
+          value={setting.subject_scope}
+          disabled={pending || !setting.enabled}
+          options={[
+            { value: 'all', label: '全部' },
+            { value: 'pull_request', label: '仅 PR' },
+            { value: 'issue', label: '仅 Issue' },
+          ]}
+          onChange={(value) => onChange({ subject_scope: value })}
+        />
+        {setting.days !== setting.default_days && (
+          <button
+            type="button"
+            onClick={() => onChange({ days: setting.default_days })}
+            title={`恢复默认值 ${setting.default_days} 天`}
+            className="inline-flex items-center gap-1 text-2xs text-[var(--color-text-muted)] hover:text-[var(--color-accent)]"
+          >
+            <RotateCcw className="size-3" aria-hidden />
+            默认
+          </button>
+        )}
+      </div>
+    </li>
+  )
+}