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>
This commit is contained in:
Script Generator
2026-06-15 13:37:01 +08:00
parent 0ed7ff1d53
commit 273182bb0f
5 changed files with 182 additions and 23 deletions

View File

@@ -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>