这是草稿 PR——点击右上角「编辑」将其转为正式后再评审合并。

被保护规则拦截：{g.reasons.join('；') || `需要 ${g.required_approvals} 个批准（当前 ${g.approvals}）`} {g.bypassed ? '（你可绕过）' : ''}

满足合并条件{g ? `（批准 ${g.approvals}/${g.required_approvals}）` : ''}。

合并方式 setTitle(event.target.value)} />

setMessage(event.target.value)} />
        <label className="flex items-center gap-2 text-[12.5px]">
          <input type="checkbox" checked={deleteAfter} onChange={event => setDeleteAfter(event.target.checked)} />
          合并后删除源分支
        </label>
        <Button
          className="h-8 w-full gap-1 text-[13px]"
          disabled={busy || pull.is_draft || conflicts.length > 0 || blocked || stale}
          onClick={() => void merge()}
        >
          <GitMerge className="h-3.5 w-3.5" aria-hidden />{busy ? '合并中…' : '合并'}
        </Button>
        <label className="flex items-center gap-2 text-[12.5px] text-shell-ink-muted">
          <input
            type="checkbox"
            checked={pull.auto_merge}
            onChange={event => {
              void (async () => {
                try {
                  await updatePull(refObj, { auto_merge: event.target.checked })
                  onChanged()
                } catch (f) {
                  onError(`自动合并设置失败：${f instanceof Error ? f.message : '未知错误'}`)
                }
              })()
            }}
          />
          满足条件后自动合并
        </label>
      </div>
    </SideSection>
  )
}

/* ---------------------------------------------------------- edit dialog */

function EditButton({ refObj, pull, onChanged, onError }: { refObj: PullRef; pull: Pull; onChanged: () => void; onError: (m: string) => void }) {
  const [open, setOpen] = useState(false)
  const [title, setTitle] = useState(pull.title)
  const [body, setBody] = useState(pull.body)
  const [draft, setDraft] = useState(pull.is_draft)
  const [busy, setBusy] = useState(false)

async function save() {
    setBusy(true)
    try {
      await updatePull(refObj, { title: title.trim() || undefined, body, draft })
      setOpen(false)
      onChanged()
    } catch (f) {
      onError(`更新失败：${f instanceof Error ? f.message : '未知错误'}`)
    } finally {
      setBusy(false)
    }
  }

return (
    <>
      <Button variant="secondary" className="h-7 gap-1 text-[12px]" onClick={() => { setTitle(pull.title); setBody(pull.body); setDraft(pull.is_draft); setOpen(true) }}>
        <Pencil className="h-3 w-3" aria-hidden />编辑
      </Button>
      {open ? (
        <Modal
          title={`编辑 #${pull.number}`}
          open
          onClose={() => setOpen(false)}
          footer={
            <>
              <Button variant="ghost" onClick={() => setOpen(false)}>取消</Button>
              <Button disabled={busy} onClick={() => void save()}>保存</Button>
            </>
          }
        >
          <label className="block">
            <span className={modalLabelClass}>标题</span>
            <input className={modalInputClass} value={title} onChange={event => setTitle(event.target.value)} />
          </label>
          <label className="block">
            <span className={modalLabelClass}>描述</span>
            <textarea className={modalTextareaClass} rows={7} value={body} onChange={event => setBody(event.target.value)} />
          </label>
          <label className="flex items-center gap-2 text-[13px]">
            <input type="checkbox" checked={draft} onChange={event => setDraft(event.target.checked)} />
            草稿（不接收评审与合并）
          </label>
        </Modal>
      ) : null}
    </>
  )
}

/* ------------------------------------------------------------ side panels */

function AddLine({ placeholder, onAdd }: { placeholder: string; onAdd: (value: string) => Promise<void> }) {
  const [value, setValue] = useState('')
  const [busy, setBusy] = useState(false)
  return (
    <div className="mt-2 flex gap-1.5">
      <input
        value={value}
        onChange={event => setValue(event.target.value)}
        placeholder={placeholder}
        className="h-7 min-w-0 flex-1 rounded-md border border-shell-hairline bg-shell-field px-2 text-[12px] outline-none focus:border-shell-tile"
      />
      <Button
        variant="secondary"
        className="h-7 px-2"
        disabled={busy || !value.trim()}
        onClick={() => {
          setBusy(true)
          void onAdd(value.trim()).then(() => setValue('')).finally(() => setBusy(false))
        }}
      >
        <Send className="h-3 w-3" aria-hidden />
      </Button>
    </div>
  )
}

function ReviewersPanel({ refObj, pull, tick, onChanged, onError }: { refObj: PullRef; pull: Pull; tick: number; onChanged: () => void; onError: (m: string) => void }) {
  const [required, setRequired] = useState(true)
  const reviewers = useAsync(() => listRequestedReviewers(refObj), [refObj.space, refObj.repo, refObj.pull, tick])
  const rows = reviewers.data ?? []

async function add(name: string) {
    try {
      await requestReviewers(refObj, [name], required)
      onChanged()
    } catch (f) {
      onError(`请求评审失败：${f instanceof Error ? f.message : '未知错误'}`)
      throw f
    }
  }

return (
    <SideSection
      title={`评审人${rows.length ? `（${rows.length}）` : ''}`}
      action={
        <label className="flex items-center gap-1 text-[11.5px] text-shell-ink-muted">
          <input type="checkbox" checked={required} onChange={event => setRequired(event.target.checked)} />必需
        </label>
      }
    >
      {rows.length ? (
        <ul className="space-y-1.5">
          {rows.map(row => (
            <li key={row.id} className="flex items-center gap-2 text-[13px]">
              <Avatar user={row.user} size={20} />
              <span className="min-w-0 flex-1 truncate">{userName(row.user)}</span>
              <span className="text-[11.5px] text-shell-ink-muted">{reviewerStateLabel(row.state)}</span>
              {row.state === 'requested' && pull.state === 'open' ? (
                row.user ? (
                  <button
                    type="button"
                    aria-label={`移除 ${userName(row.user)}`}
                    className="text-shell-ink-muted hover:text-[#b42318]"
                    onClick={() => void removeRequestedReviewer(refObj, row.user?.user_id ?? '').then(onChanged).catch(() => undefined)}
                  >
                    ×
                  </button>
                ) : null
              ) : null}
            </li>
          ))}
        </ul>
      ) : (
        <p className="text-[12.5px] text-shell-ink-muted">尚未请求评审。</p>
      )}
      {pull.state === 'open' ? <AddLine placeholder="用户名或 UUID，请求评审" onAdd={add} /> : null}
    </SideSection>
  )
}

function reviewerStateLabel(state: ReviewerState | string): string {
  return REVIEWER_STATE_LABEL[state as ReviewerState] ?? state
}

function LabelPillInline({ name, color, onRemove }: { name: string; color?: string | null; onRemove: () => void }) {
  return (
    <span
      className="inline-flex items-center gap-1 rounded-full border border-shell-hairline px-2 py-0.5 text-[11.5px]"
      style={color ? { backgroundColor: `${color}22`, borderColor: color } : undefined}
    >
      {name}
      <button type="button" aria-label={`移除标签 ${name}`} onClick={onRemove} className="text-shell-ink-muted hover:text-shell-ink">×</button>
    </span>
  )
}

{pull.title}