✨ feat(vscode): 审查列可以申请同事移交工单

vscode/webview-ui/src/components/IssueCard.tsx

@@ -1,10 +1,11 @@
-import type { Ref } from 'react'
+import type { ReactNode, Ref } from 'react'
 import type { Issue } from '../types'
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { Lock } from 'lucide-react'
 import { forwardRef } from 'react'
 import { cn } from '@/lib/utils'
+import { canAnswerHandoffRequest, canAskHandoff, canCancelHandoffRequest } from '../../../src/panel/handlers/handoffRequest'
 import { Card } from './ui/card'
 
 interface IssueCardProps {
@@ -26,6 +27,11 @@ interface IssueCardProps {
   ownerLogin?: string
   /** 归属人头像 data URI；缺失时回退首字母圆点。 */
   ownerAvatar?: string
+  me?: string
+  onAskHandoff?: (issueNumber: number) => void
+  onCancelHandoffRequest?: (issueNumber: number) => void
+  onAcceptHandoffRequest?: (issueNumber: number) => void
+  onRejectHandoffRequest?: (issueNumber: number) => void
 }
 
 /** 同事工单的归属人标记：有头像用头像，没有就用 login 首字母。 */
@@ -51,8 +57,69 @@ function OwnerBadge({ login, avatar }: { login: string, avatar?: string }) {
       )
 }
 
+function HandoffRequestActions({
+  issue,
+  me,
+  onAsk,
+  onCancel,
+  onAccept,
+  onReject,
+}: {
+  issue: Issue
+  me?: string
+  onAsk?: (issueNumber: number) => void
+  onCancel?: (issueNumber: number) => void
+  onAccept?: (issueNumber: number) => void
+  onReject?: (issueNumber: number) => void
+}) {
+  const button = 'rounded border border-[var(--vscode-contrastBorder)] px-1.5 py-0.5 text-[10px] hover:bg-[var(--vscode-toolbar-hoverBackground)]'
+  let body: ReactNode = null
+  if (canAnswerHandoffRequest(issue, me)) {
+    body = (
+      <>
+        <span className="text-[10px] opacity-80">
+          {issue.handoffRequestFrom}
+          {' '}
+          想要
+        </span>
+        {issue.handoffRequestError && issue.handoffRequestError !== 'rejected'
+          ? <span className="text-[10px] text-[var(--vscode-errorForeground)]">{issue.handoffRequestError}</span>
+          : null}
+        <button type="button" className={button} onClick={() => onAccept?.(issue.number)}>同意</button>
+        <button type="button" className={button} onClick={() => onReject?.(issue.number)}>拒绝</button>
+      </>
+    )
+  }
+  else if (canCancelHandoffRequest(issue, me)) {
+    body = (
+      <>
+        <span className="text-[10px] opacity-80">
+          {issue.handoffRequestError && issue.handoffRequestError !== 'rejected' ? issue.handoffRequestError : '已申请'}
+        </span>
+        <button type="button" className={button} onClick={() => onCancel?.(issue.number)}>取消</button>
+      </>
+    )
+  }
+  else if (canAskHandoff(issue, me)) {
+    body = <button type="button" className={button} onClick={() => onAsk?.(issue.number)}>申请移交</button>
+  }
+  else if (issue.column === 'review' && issue.handoffRequestFrom && issue.source !== 'youtrack' && !issue.handoffAttachmentId) {
+    body = <span className="text-[10px] opacity-60">申请中</span>
+  }
+  if (!body)
+    return null
+  return (
+    <div
+      className="mb-1 flex flex-wrap items-center gap-1"
+      onPointerDown={event => event.stopPropagation()}
+    >
+      {body}
+    </div>
+  )
+}
+
 export const IssueCard = forwardRef<HTMLDivElement, IssueCardProps>(
-  ({ issue, selected, onSelect, depth = 0, locked, lockedPrerequisite, readOnly, ownerLogin, ownerAvatar }, ref) => {
+  ({ issue, selected, onSelect, depth = 0, locked, lockedPrerequisite, readOnly, ownerLogin, ownerAvatar, me, onAskHandoff, onCancelHandoffRequest, onAcceptHandoffRequest, onRejectHandoffRequest }, ref) => {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging }
       = useSortable({ id: issue.id, data: { column: issue.column }, disabled: readOnly })
 
@@ -111,6 +178,14 @@ export const IssueCard = forwardRef<HTMLDivElement, IssueCardProps>(
               </span>
             )
           : null}
+        <HandoffRequestActions
+          issue={issue}
+          me={me}
+          onAsk={onAskHandoff}
+          onCancel={onCancelHandoffRequest}
+          onAccept={onAcceptHandoffRequest}
+          onReject={onRejectHandoffRequest}
+        />
         <div className={cn('truncate', (locked || (readOnly && ownerLogin)) && 'pr-5', locked && readOnly && ownerLogin && 'pr-10')}>
           <span className="font-mono opacity-60">
             {issue.source === 'youtrack' ? issue.externalId : `#${issue.number}`}