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,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>
);
}