feat: Bug 图片上传 + 转交 + 操作日志 + 开发中含自测

1. 开发中统计包含 in_progress + testing（自测）

2. Bug 支持上传图片：
   - BugCreateModal 加宽为 max-w-2xl
   - 新增拖拽/点击上传图片区域，转 base64 存储
   - 上传后可预览缩略图、可删除
   - BugDetailDrawer 展示截图列表，点击可放大

3. Bug 支持转交：
   - BugDetailDrawer 操作栏新增"转交"按钮
   - 选人下拉 + 备注输入 → 确认转交
   - transferBug store 方法：更新 assigneeId + 追加日志

4. Bug 操作日志：
   - BugLog interface: create/status_change/transfer/resolve
   - createBug 时记录创建日志
   - changeStatus 时记录状态变更/修复日志
   - transferBug 时记录转交日志
   - BugDetailDrawer 底部展示操作时间线

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/components/bug/BugCreateModal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useState, useMemo } from 'react';
-import { X } from 'lucide-react';
+import { useState, useMemo, useRef } from 'react';
+import { X, ImagePlus, Trash2 } from 'lucide-react';
 import { useBugStore } from '@/stores/useBugStore';
 import { useTestCaseStore } from '@/stores/useTestCaseStore';
 import { useDevTaskStore } from '@/stores/useDevTaskStore';
@@ -27,7 +27,6 @@ export function BugCreateModal({ testCaseId, onClose }: Props) {
   const tc = testCases.find((c) => c.id === testCaseId);
   const requirement = requirements.find((r) => r.id === tc?.requirementId);
 
-  // 推导默认负责人
   const defaultAssignee = useMemo(() => {
     if (!tc) return '';
     const reqTasks = devTasks.filter((t) => t.requirementId === tc.requirementId);
@@ -42,9 +41,23 @@ export function BugCreateModal({ testCaseId, onClose }: Props) {
   const [severity, setSeverity] = useState<BugSeverity>('major');
   const [priority, setPriority] = useState<Priority>(tc?.priority || 'P1');
   const [assigneeId, setAssigneeId] = useState(defaultAssignee);
+  const [images, setImages] = useState<string[]>([]);
+  const fileRef = useRef<HTMLInputElement>(null);
 
   const canSubmit = title.trim() && description.trim() && assigneeId;
 
+  const handleFiles = (files: FileList | null) => {
+    if (!files) return;
+    Array.from(files).forEach((file) => {
+      if (!file.type.startsWith('image/')) return;
+      const reader = new FileReader();
+      reader.onload = () => {
+        setImages((prev) => [...prev, reader.result as string]);
+      };
+      reader.readAsDataURL(file);
+    });
+  };
+
   const handleSubmit = () => {
     if (!canSubmit) return;
     createBug({
@@ -57,19 +70,19 @@ export function BugCreateModal({ testCaseId, onClose }: Props) {
       priority,
       reportedBy: user?.name || '系统',
       assigneeId,
-    });
+      images: images.length > 0 ? images : undefined,
+    }, user?.name || '系统');
     onClose();
   };
 
   return (
     <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40" onClick={onClose}>
-      <div className="w-full max-w-md rounded-2xl bg-[var(--bg-card)] border border-[var(--line)] p-6 shadow-[var(--shadow-md)]" onClick={(e) => e.stopPropagation()}>
+      <div className="w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-2xl bg-[var(--bg-card)] border border-[var(--line)] p-6 shadow-[var(--shadow-md)]" onClick={(e) => e.stopPropagation()}>
         <div className="flex items-center justify-between mb-4">
           <h3 className="text-[14px] font-semibold text-[var(--ink)]">提交 Bug</h3>
           <button onClick={onClose} className="rounded-md p-1 hover:bg-[var(--bg-subtle)]"><X className="h-4 w-4 text-[var(--ink-muted)]" /></button>
         </div>
 
-        {/* 只读关联信息 */}
         <div className="rounded-lg bg-[var(--bg-subtle)] px-3 py-2 mb-4 space-y-1 text-[12px]">
           <div><span className="text-[var(--ink-muted)]">关联用例：</span><span className="text-[var(--ink)]">{tc?.caseNo} {tc?.title}</span></div>
           {requirement && <div><span className="text-[var(--ink-muted)]">关联需求：</span><span className="text-[var(--ink)]">{requirement.code} {requirement.title}</span></div>}
@@ -82,8 +95,39 @@ export function BugCreateModal({ testCaseId, onClose }: Props) {
           </div>
           <div>
             <label className="block text-[12px] text-[var(--ink-soft)] mb-1">Bug 描述 *</label>
-            <textarea rows={3} value={description} onChange={(e) => setDescription(e.target.value)} className="w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 py-2 text-[13px] focus:border-[var(--accent)] focus:outline-none resize-none" placeholder="复现步骤、实际结果、预期结果" />
+            <textarea rows={5} value={description} onChange={(e) => setDescription(e.target.value)} className="w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 py-2 text-[13px] focus:border-[var(--accent)] focus:outline-none resize-none" placeholder="复现步骤、实际结果、预期结果" />
           </div>
+
+          {/* 图片上传 */}
+          <div>
+            <label className="block text-[12px] text-[var(--ink-soft)] mb-1">截图附件</label>
+            <div
+              className="rounded-lg border-2 border-dashed border-[var(--line)] p-4 text-center cursor-pointer hover:border-[var(--accent)] hover:bg-[var(--bg-subtle)] transition-colors"
+              onClick={() => fileRef.current?.click()}
+              onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
+              onDrop={(e) => { e.preventDefault(); e.stopPropagation(); handleFiles(e.dataTransfer.files); }}
+            >
+              <ImagePlus className="h-6 w-6 text-[var(--ink-muted)] mx-auto mb-1" />
+              <span className="text-[12px] text-[var(--ink-muted)]">点击或拖拽上传图片</span>
+              <input ref={fileRef} type="file" accept="image/*" multiple className="hidden" onChange={(e) => handleFiles(e.target.files)} />
+            </div>
+            {images.length > 0 && (
+              <div className="flex flex-wrap gap-2 mt-2">
+                {images.map((src, i) => (
+                  <div key={i} className="relative group">
+                    <img src={src} alt={`截图${i + 1}`} className="h-20 w-20 object-cover rounded-lg border border-[var(--line)]" />
+                    <button
+                      onClick={() => setImages((prev) => prev.filter((_, j) => j !== i))}
+                      className="absolute -top-1.5 -right-1.5 h-5 w-5 flex items-center justify-center rounded-full bg-red-500 text-white opacity-0 group-hover:opacity-100 transition-opacity"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
           <div className="grid grid-cols-3 gap-3">
             <div>
               <label className="block text-[12px] text-[var(--ink-soft)] mb-1">严重程度</label>

apps/web/components/bug/BugDetailDrawer.tsx

@@ -1,23 +1,35 @@
 'use client';
 
 import { useState } from 'react';
-import { X, Link2, ChevronRight } from 'lucide-react';
+import { X, Link2, ChevronRight, ArrowRightLeft } from 'lucide-react';
 import { BugStatusBadge } from './BugStatusBadge';
 import { useBugStore } from '@/stores/useBugStore';
 import { useTestCaseStore } from '@/stores/useTestCaseStore';
 import { useRequirementStore } from '@/stores/useRequirementStore';
+import { useMemberStore } from '@/stores/useMemberStore';
+import { useAuthStore } from '@/stores/useAuthStore';
 import { BUG_ALLOWED_TRANSITIONS, BUG_STATUS_LABEL, BUG_SEVERITY_LABEL, BUG_SEVERITY_COLOR } from '@/lib/bug';
 import type { BugStatus } from '@/lib/bug';
 
+const LOG_ACTION_LABEL: Record<string, string> = {
+  create: '创建',
+  status_change: '状态变更',
+  transfer: '转交',
+  resolve: '修复',
+};
+
 interface Props {
   bugId: string;
   onClose: () => void;
 }
 
 export function BugDetailDrawer({ bugId, onClose }: Props) {
-  const { bugs, changeStatus } = useBugStore();
+  const { bugs, changeStatus, transferBug } = useBugStore();
   const { testCases } = useTestCaseStore();
   const { requirements } = useRequirementStore();
+  const { members } = useMemberStore();
+  const user = useAuthStore((s) => s.user);
+  const operator = user?.name || '系统';
 
   const bug = bugs.find((b) => b.id === bugId);
   if (!bug) return null;
@@ -28,17 +40,29 @@ export function BugDetailDrawer({ bugId, onClose }: Props) {
 
   const [resolution, setResolution] = useState(bug.resolution || '');
   const [showResolutionInput, setShowResolutionInput] = useState(false);
+  const [showTransfer, setShowTransfer] = useState(false);
+  const [transferTo, setTransferTo] = useState('');
+  const [transferRemark, setTransferRemark] = useState('');
+  const [lightboxSrc, setLightboxSrc] = useState<string | null>(null);
 
   const handleTransition = (to: BugStatus) => {
     if (to === 'fixed') { setShowResolutionInput(true); return; }
-    changeStatus(bug.id, to);
+    changeStatus(bug.id, to, operator);
   };
 
   const confirmFix = () => {
-    changeStatus(bug.id, 'fixed', { resolution: resolution.trim() || undefined });
+    changeStatus(bug.id, 'fixed', operator, { resolution: resolution.trim() || undefined });
     setShowResolutionInput(false);
   };
 
+  const handleTransfer = () => {
+    if (!transferTo) return;
+    transferBug(bug.id, transferTo, operator, transferRemark.trim() || undefined);
+    setShowTransfer(false);
+    setTransferTo('');
+    setTransferRemark('');
+  };
+
   return (
     <div className="fixed inset-0 z-50 flex justify-end" onClick={onClose}>
       <div className="w-full max-w-md h-full bg-[var(--bg)] border-l border-[var(--line)] shadow-[var(--shadow-lg)] flex flex-col" onClick={(e) => e.stopPropagation()}>
@@ -87,6 +111,11 @@ export function BugDetailDrawer({ bugId, onClose }: Props) {
                     {BUG_STATUS_LABEL[s]}
                   </button>
                 ))}
+                {bug.status !== 'closed' && bug.status !== 'rejected' && (
+                  <button onClick={() => setShowTransfer(!showTransfer)} className="h-8 px-3 rounded-lg text-[12px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] flex items-center gap-1">
+                    <ArrowRightLeft className="h-3 w-3" />转交
+                  </button>
+                )}
               </div>
             )}
 
@@ -99,6 +128,21 @@ export function BugDetailDrawer({ bugId, onClose }: Props) {
                 </div>
               </div>
             )}
+
+            {showTransfer && (
+              <div className="space-y-2 pt-1 border-t border-[var(--line)]">
+                <div className="text-[11px] text-[var(--ink-muted)]">转交给：</div>
+                <select value={transferTo} onChange={(e) => setTransferTo(e.target.value)} className="h-8 w-full rounded-lg border border-[var(--line)] px-3 text-[12px] focus:border-[var(--accent)] focus:outline-none">
+                  <option value="">选择接收人</option>
+                  {members.filter((m) => m.name !== bug.assigneeId).map((m) => <option key={m.id} value={m.name}>{m.name}</option>)}
+                </select>
+                <input value={transferRemark} onChange={(e) => setTransferRemark(e.target.value)} placeholder="转交备注（可选）" className="h-8 w-full rounded-lg border border-[var(--line)] px-3 text-[12px] focus:border-[var(--accent)] focus:outline-none" />
+                <div className="flex gap-2">
+                  <button onClick={handleTransfer} disabled={!transferTo} className="h-8 px-3 rounded-lg text-[11px] font-medium bg-blue-500 text-white disabled:opacity-50">确认转交</button>
+                  <button onClick={() => setShowTransfer(false)} className="h-8 px-2 text-[11px] text-[var(--ink-muted)]">取消</button>
+                </div>
+              </div>
+            )}
           </div>
 
           {/* 基本信息 */}
@@ -107,9 +151,9 @@ export function BugDetailDrawer({ bugId, onClose }: Props) {
             <div className="grid grid-cols-2 gap-y-3 gap-x-4 text-[12px]">
               <div><span className="text-[var(--ink-muted)]">提交人：</span><span className="text-[var(--ink)]">{bug.reportedBy}</span></div>
               <div><span className="text-[var(--ink-muted)]">修复人：</span><span className="text-[var(--ink)] font-medium">{bug.assigneeId}</span></div>
-              <div><span className="text-[var(--ink-muted)]">提交：</span><span className="text-[var(--ink)]">{bug.createdAt.slice(0, 10)}</span></div>
-              {bug.resolvedAt && <div><span className="text-[var(--ink-muted)]">修复：</span><span className="text-[var(--ink)]">{bug.resolvedAt}</span></div>}
-              {bug.closedAt && <div><span className="text-[var(--ink-muted)]">关闭：</span><span className="text-emerald-600">{bug.closedAt}</span></div>}
+              <div><span className="text-[var(--ink-muted)]">提交：</span><span className="text-[var(--ink)]">{bug.createdAt.slice(0, 16).replace('T', ' ')}</span></div>
+              {bug.resolvedAt && <div><span className="text-[var(--ink-muted)]">修复：</span><span className="text-[var(--ink)]">{bug.resolvedAt.slice(0, 16).replace('T', ' ')}</span></div>}
+              {bug.closedAt && <div><span className="text-[var(--ink-muted)]">关闭：</span><span className="text-emerald-600">{bug.closedAt.slice(0, 16).replace('T', ' ')}</span></div>}
             </div>
           </div>
 
@@ -119,6 +163,18 @@ export function BugDetailDrawer({ bugId, onClose }: Props) {
             <p className="text-[12px] text-[var(--ink-soft)] leading-relaxed whitespace-pre-wrap">{bug.description}</p>
           </div>
 
+          {/* 截图 */}
+          {bug.images && bug.images.length > 0 && (
+            <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4">
+              <div className="text-[10px] text-[var(--ink-muted)] uppercase tracking-wide mb-2">截图附件</div>
+              <div className="flex flex-wrap gap-2">
+                {bug.images.map((src, i) => (
+                  <img key={i} src={src} alt={`截图${i + 1}`} className="h-24 w-24 object-cover rounded-lg border border-[var(--line)] cursor-pointer hover:ring-2 hover:ring-[var(--accent)]" onClick={() => setLightboxSrc(src)} />
+                ))}
+              </div>
+            </div>
+          )}
+
           {/* 修复说明 */}
           {bug.resolution && (
             <div className="rounded-xl border border-emerald-200 bg-emerald-50 p-4">
@@ -126,8 +182,37 @@ export function BugDetailDrawer({ bugId, onClose }: Props) {
               <p className="text-[12px] text-emerald-800 leading-relaxed whitespace-pre-wrap">{bug.resolution}</p>
             </div>
           )}
+
+          {/* 操作日志 */}
+          {bug.logs && bug.logs.length > 0 && (
+            <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4">
+              <div className="text-[10px] text-[var(--ink-muted)] uppercase tracking-wide mb-3">操作日志</div>
+              <div className="space-y-2.5">
+                {[...bug.logs].reverse().map((log) => (
+                  <div key={log.id} className="flex gap-2.5 text-[11px]">
+                    <span className="text-[var(--ink-muted)] tabular-nums shrink-0 w-[110px]">{log.createdAt.slice(0, 16).replace('T', ' ')}</span>
+                    <div className="flex-1">
+                      <span className="font-medium text-[var(--ink)]">{log.operator}</span>
+                      <span className="text-[var(--ink-soft)]"> {LOG_ACTION_LABEL[log.action] || log.action}</span>
+                      {log.fromValue && log.toValue && (
+                        <span className="text-[var(--ink-muted)]"> {log.fromValue} → {log.toValue}</span>
+                      )}
+                      {log.remark && <span className="text-[var(--ink-muted)]"> ({log.remark})</span>}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       </div>
+
+      {/* Lightbox */}
+      {lightboxSrc && (
+        <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/70" onClick={() => setLightboxSrc(null)}>
+          <img src={lightboxSrc} alt="大图预览" className="max-h-[85vh] max-w-[85vw] rounded-lg shadow-2xl" />
+        </div>
+      )}
     </div>
   );
 }