✨ feat(vscode): 看板底栏新增工单讨论 Tab 并支持系统气泡与 Gitea 评论同步

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

@@ -13,14 +13,15 @@
 import type { ClaudeProfile } from '../hooks/useIssues'
 import type { ProfilesData, SessionHandoffPendingItem } from '../lib/messages'
 import type { Issue, ManagedSessionsData } from '../types'
-import { ClipboardList, FileDiff, Layers, MessagesSquare } from 'lucide-react'
+import { ClipboardList, FileDiff, Layers, MessageCircle, MessagesSquare } from 'lucide-react'
 import { useState } from 'react'
+import { IssueChatPanel } from './IssueChatPanel'
 import { IssueDetailPanel } from './IssueDetailPanel'
 import { ManagedSessionsPanel } from './ManagedSessionsPanel'
 import { PrFilesPanel } from './PrFilesPanel'
 import { ProfileGrid } from './ProfileGrid'
 
-type TabKey = 'issue' | 'profile' | 'sessions' | 'changes'
+type TabKey = 'issue' | 'chat' | 'profile' | 'sessions' | 'changes'
 
 interface BottomTabsProps {
   // Issue tab props (pass-through to IssueDetailPanel)
@@ -103,6 +104,12 @@ export function BottomTabs(props: BottomTabsProps) {
           icon={<ClipboardList className="size-4" />}
           title="工单"
         />
+        <TabButton
+          active={tab === 'chat'}
+          onClick={() => setTab('chat')}
+          icon={<MessageCircle className="size-4" />}
+          title="讨论"
+        />
         <TabButton
           active={tab === 'profile'}
           onClick={() => setTab('profile')}
@@ -177,6 +184,18 @@ export function BottomTabs(props: BottomTabsProps) {
             isHandoffRunning={props.isHandoffRunning}
           />
         </div>
+        <div
+          className={`h-full w-full ${tab === 'chat' ? '' : 'hidden'}`}
+          aria-hidden={tab !== 'chat'}
+          inert={tab !== 'chat' ? true : undefined}
+        >
+          <IssueChatPanel
+            issue={props.issue}
+            me={props.me}
+            avatars={props.avatars}
+            onOpenInBrowser={props.onOpenInBrowser}
+          />
+        </div>
         <div
           className={`h-full w-full ${tab === 'profile' ? '' : 'hidden'}`}
           aria-hidden={tab !== 'profile'}

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

@@ -0,0 +1,295 @@
+import type { IssueChatComment } from '../lib/messages'
+import type { Issue } from '../types'
+import { ExternalLink, Loader2, MessageCircle, RotateCw, Send } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { onMessage, postMessage } from '../lib/vscode'
+
+export interface IssueChatPanelProps {
+  issue: Issue | null
+  me?: string
+  avatars?: Record<string, string>
+  onOpenInBrowser: (url: string) => void
+}
+
+function formatCommentTime(isoStr: string): string {
+  try {
+    const d = new Date(isoStr)
+    if (Number.isNaN(d.getTime()))
+      return isoStr
+    const now = new Date()
+    const isToday = d.toDateString() === now.toDateString()
+    const pad = (n: number) => String(n).padStart(2, '0')
+    const time = `${pad(d.getHours())}:${pad(d.getMinutes())}`
+    if (isToday)
+      return time
+    return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${time}`
+  }
+  catch {
+    return isoStr
+  }
+}
+
+function SystemMessagePill({ comment }: { comment: IssueChatComment }) {
+  const timeStr = formatCommentTime(comment.createdAt)
+  const authorPrefix = comment.author && comment.author !== '未知' ? `${comment.author} ` : ''
+  const displayText = `${authorPrefix}${comment.systemText}`
+
+  return (
+    <div className="my-1 flex justify-center">
+      <div
+        className="inline-flex items-center gap-2 rounded-full border border-[var(--vscode-panel-border,#383838)] bg-[var(--vscode-badge-background,#262626)] px-3 py-1 text-[11px] text-[var(--vscode-descriptionForeground,#9d9d9d)] shadow-sm"
+        data-tooltip={comment.body}
+      >
+        <span>{displayText}</span>
+        <span className="font-mono text-[10px] opacity-60">{timeStr}</span>
+      </div>
+    </div>
+  )
+}
+
+function ChatMessageBubble({
+  comment,
+  isMine,
+  avatarSrc,
+}: {
+  comment: IssueChatComment
+  isMine: boolean
+  avatarSrc?: string
+}) {
+  const timeStr = formatCommentTime(comment.createdAt)
+
+  if (isMine) {
+    return (
+      <div className="flex items-start justify-end gap-2 pl-8">
+        <div className="flex max-w-[85%] flex-col items-end">
+          <div className="mb-1 flex items-center gap-2">
+            <span className="font-mono text-[10px] opacity-60">{timeStr}</span>
+            <span className="text-xs font-medium text-[var(--vscode-foreground)]">
+              {comment.author}
+              {' '}
+              (我)
+            </span>
+          </div>
+          <div className="whitespace-pre-wrap break-words rounded-md border border-blue-500/50 bg-[#0e3753] px-3 py-2 text-xs leading-relaxed text-[var(--vscode-foreground)]">
+            {comment.body}
+          </div>
+        </div>
+        <div className="flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--vscode-focusBorder,#0078d4)] text-[10px] font-medium text-white">
+          {avatarSrc
+            ? (
+                <img src={avatarSrc} alt="" className="size-full object-cover" />
+              )
+            : (
+                '我'
+              )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-start justify-start gap-2 pr-8">
+      <div className="flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--vscode-button-secondaryBackground,#3c3c3c)] text-[10px] font-medium text-[var(--vscode-foreground)]">
+        {avatarSrc
+          ? (
+              <img src={avatarSrc} alt="" className="size-full object-cover" />
+            )
+          : (
+              comment.author.slice(0, 1).toUpperCase()
+            )}
+      </div>
+      <div className="flex max-w-[85%] flex-col items-start">
+        <div className="mb-1 flex items-center gap-2">
+          <span className="text-xs font-medium text-[var(--vscode-descriptionForeground)]">
+            {comment.authorName ? `${comment.authorName} (${comment.author})` : comment.author}
+          </span>
+          <span className="font-mono text-[10px] opacity-60">{timeStr}</span>
+        </div>
+        <div className="whitespace-pre-wrap break-words rounded-md border border-[var(--vscode-panel-border,#383838)] bg-[var(--vscode-sideBar-background,#262626)] px-3 py-2 text-xs leading-relaxed text-[var(--vscode-foreground)]">
+          {comment.body}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function IssueChatPanel({
+  issue,
+  me,
+  avatars,
+  onOpenInBrowser,
+}: IssueChatPanelProps) {
+  const [comments, setComments] = useState<IssueChatComment[]>([])
+  const [loading, setLoading] = useState(false)
+  const [sending, setSending] = useState(false)
+  const [input, setInput] = useState('')
+  const streamEndRef = useRef<HTMLDivElement>(null)
+
+  const issueNumber = issue?.number
+
+  useEffect(() => {
+    if (issueNumber == null) {
+      setComments([])
+      setLoading(false)
+      return
+    }
+
+    setLoading(true)
+    postMessage({
+      type: 'issue/comments-query',
+      issueNumber,
+    })
+  }, [issueNumber])
+
+  useEffect(() => {
+    const dispose = onMessage((msg) => {
+      if (msg.type === 'issue/comments-result') {
+        if (issueNumber != null && msg.issueNumber === issueNumber) {
+          setLoading(false)
+          setSending(false)
+          setComments(msg.comments)
+        }
+      }
+    })
+    return dispose
+  }, [issueNumber])
+
+  useEffect(() => {
+    streamEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [comments])
+
+  const handleRefresh = () => {
+    if (issueNumber == null || loading)
+      return
+    setLoading(true)
+    postMessage({
+      type: 'issue/comments-query',
+      issueNumber,
+    })
+  }
+
+  const handleSend = () => {
+    const text = input.trim()
+    if (!text || issueNumber == null || sending)
+      return
+    setSending(true)
+    postMessage({
+      type: 'issue/comment-post',
+      issueNumber,
+      body: text,
+    })
+    setInput('')
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter') {
+      if (e.metaKey || e.ctrlKey || !e.shiftKey) {
+        e.preventDefault()
+        handleSend()
+      }
+    }
+  }
+
+  if (!issue) {
+    return (
+      <div className="flex h-full items-center justify-center border-t border-[var(--vscode-panel-border)] p-3 text-xs opacity-60">
+        按方向键或点击卡片查看讨论
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col border-t border-[var(--vscode-panel-border)] bg-[var(--vscode-editor-background)]">
+      {/* 标题栏：对齐 IssueDetailPanel */}
+      <div className="flex items-center gap-3 border-b border-[var(--vscode-panel-border)] p-3">
+        <h3 className="flex-1 truncate text-sm font-medium">
+          <span className="font-mono opacity-60">
+            {issue.source === 'youtrack' ? issue.externalId : `#${issue.number}`}
+          </span>
+          {issue.source === 'youtrack' && (
+            <span
+              className="ml-2 inline-flex items-center rounded border border-purple-400/50 bg-purple-400/10 px-1.5 py-0.5 align-middle text-[10px] font-normal text-purple-400"
+              data-tooltip="此工单来自 YouTrack"
+            >
+              YouTrack
+            </span>
+          )}
+          {' '}
+          {issue.title}
+        </h3>
+        <button
+          type="button"
+          data-tooltip="刷新讨论"
+          aria-label="刷新讨论"
+          onClick={handleRefresh}
+          className="inline-flex shrink-0 items-center justify-center rounded border border-[var(--vscode-panel-border)] p-1 text-xs hover:bg-black/10 dark:hover:bg-white/10"
+        >
+          <RotateCw className={`size-3.5 ${loading ? 'animate-spin' : ''}`} />
+        </button>
+        <button
+          type="button"
+          data-tooltip={issue.source === 'youtrack' ? '在 YouTrack 打开' : '在 Gitea 打开'}
+          aria-label={issue.source === 'youtrack' ? '在 YouTrack 打开' : '在 Gitea 打开'}
+          onClick={() => onOpenInBrowser(issue.htmlUrl)}
+          className="inline-flex shrink-0 items-center justify-center rounded border border-[var(--vscode-panel-border)] p-1 text-xs hover:bg-black/10 dark:hover:bg-white/10"
+        >
+          <ExternalLink className="size-3.5" />
+        </button>
+      </div>
+
+      {/* 评论消息流 */}
+      <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-3">
+        {comments.length === 0 && !loading && (
+          <div className="flex h-full flex-1 flex-col items-center justify-center gap-2 p-6 text-[var(--vscode-descriptionForeground)]">
+            <MessageCircle className="size-8 opacity-40" />
+            <span className="text-sm font-medium">还没有讨论</span>
+            <span className="text-xs opacity-60">在此发起对此工单的讨论，评论将双向同步至 Gitea</span>
+          </div>
+        )}
+        {comments.map((comment) => {
+          if (comment.systemText) {
+            return <SystemMessagePill key={comment.id} comment={comment} />
+          }
+          const isMine = !!(me && comment.author === me)
+          const avatarSrc = avatars?.[comment.author] || comment.avatarUrl
+          return (
+            <ChatMessageBubble
+              key={comment.id}
+              comment={comment}
+              isMine={isMine}
+              avatarSrc={avatarSrc}
+            />
+          )
+        })}
+        <div ref={streamEndRef} />
+      </div>
+
+      {/* 底部输入栏 */}
+      <div className="flex items-end gap-2 border-t border-[var(--vscode-panel-border)] bg-[var(--vscode-sideBar-background,var(--vscode-editor-background))] p-2.5">
+        <textarea
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="发表对此工单的评论…（支持 Markdown，Enter 发送）"
+          rows={1}
+          className="max-h-24 min-h-[32px] flex-1 resize-none rounded border border-[var(--vscode-input-border)] bg-[var(--vscode-input-background)] px-2.5 py-1.5 text-xs leading-normal text-[var(--vscode-input-foreground)] placeholder:text-[var(--vscode-input-placeholderForeground)] focus:border-[var(--vscode-focusBorder)] focus:outline-none"
+        />
+        <button
+          type="button"
+          onClick={handleSend}
+          disabled={!input.trim() || sending}
+          className="inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded bg-[var(--vscode-button-background)] px-3 text-xs font-medium text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50"
+        >
+          {sending
+            ? (
+                <Loader2 className="size-3.5 animate-spin" />
+              )
+            : (
+                <Send className="size-3.5" />
+              )}
+          <span>发送</span>
+        </button>
+      </div>
+    </div>
+  )
+}

vscode/webview-ui/src/lib/messages.ts

@@ -42,6 +42,16 @@ export interface ReleaseCommitGroup {
 
 export type ToastLevel = 'info' | 'success' | 'error'
 
+export interface IssueChatComment {
+  id: number
+  author: string
+  authorName?: string
+  avatarUrl?: string
+  createdAt: string
+  body: string
+  systemText?: string
+}
+
 export interface SessionHandoffPendingItem {
   attachmentId: number
   sid: string
@@ -176,6 +186,7 @@ export type ExtensionToWebview
     // profile 值编辑器粘贴的图片：存盘/读盘的回执，requestId 关联并发请求。
     | { type: 'profile-asset/saved', requestId: string, assetPath?: string, error?: string }
     | { type: 'profile-asset/loaded', requestId: string, dataUrl?: string, error?: string }
+    | { type: 'issue/comments-result', issueNumber: number, comments: IssueChatComment[], error?: string }
 
 export type WebviewToExtension
   = | { type: 'issues/refresh' }
@@ -295,3 +306,5 @@ export type WebviewToExtension
     // profile 值编辑器：图片存盘（base64→磁盘）与读盘（磁盘→dataUrl）请求。
     | { type: 'profile-asset/save', requestId: string, base64: string, mediaType: string }
     | { type: 'profile-asset/load', requestId: string, assetPath: string }
+    | { type: 'issue/comments-query', issueNumber: number }
+    | { type: 'issue/comment-post', issueNumber: number, body: string }