feat(版本详情): 接入计划时间与日期选择

2026-06-29 14:18:58 +08:00
parent dde11c0899
commit 0f64a17d44
20 changed files with 601 additions and 12 deletions
--- a/apps/web/components/WorkDateTimePicker.tsx
+++ b/apps/web/components/WorkDateTimePicker.tsx
@@ -0,0 +1,246 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { AlertTriangle, CalendarDays, ChevronLeft, ChevronRight, Clock3, X } from 'lucide-react';
+import { getChinaWorkdayInfo, getDateKey } from '@/lib/china-workday-calendar';
+
+interface WorkDateTimePickerProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  popoverAlign?: 'left' | 'right';
+  defaultHour?: number;
+}
+
+const WEEKDAYS = ['一', '二', '三', '四', '五', '六', '日'];
+const HOURS = Array.from({ length: 24 }, (_, index) => index);
+const MINUTES = [0, 15, 30, 45];
+
+export function WorkDateTimePicker({
+  value,
+  onChange,
+  placeholder = '选择日期时间',
+  className = '',
+  disabled = false,
+  popoverAlign = 'left',
+  defaultHour = 9,
+}: WorkDateTimePickerProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const parts = parseLocalDateTime(value, defaultHour);
+  const selectedDate = parts.dateKey;
+  const selectedInfo = selectedDate ? getChinaWorkdayInfo(selectedDate) : null;
+  const [viewDate, setViewDate] = useState(() => getInitialViewDate(value));
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) setOpen(false);
+    };
+    const keyHandler = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    document.addEventListener('keydown', keyHandler);
+    return () => {
+      document.removeEventListener('mousedown', handler);
+      document.removeEventListener('keydown', keyHandler);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (value) setViewDate(getInitialViewDate(value));
+  }, [value]);
+
+  const days = useMemo(() => buildCalendarDays(viewDate), [viewDate]);
+  const displayText = value ? value.replace('T', ' ') : '';
+  const hasRestDayWarning = Boolean(selectedInfo && !selectedInfo.isWorkday);
+
+  const updateDate = (dateKey: string) => {
+    onChange(makeLocalDateTime(dateKey, parts.hour, parts.minute));
+  };
+
+  const updateTime = (nextHour: number, nextMinute: number) => {
+    const dateKey = selectedDate || getDateKey(new Date());
+    onChange(makeLocalDateTime(dateKey, nextHour, nextMinute));
+  };
+
+  const clearValue = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    onChange('');
+  };
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => setOpen((current) => !current)}
+        className={`flex h-9 w-full items-center gap-2 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-left text-[13px] transition-colors hover:border-[var(--accent)] focus:border-[var(--accent)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 ${className}`}
+      >
+        <CalendarDays className="h-3.5 w-3.5 shrink-0 text-[var(--ink-muted)]" />
+        <span className={`min-w-0 flex-1 truncate ${displayText ? 'text-[var(--ink)]' : 'text-[var(--ink-muted)]'}`}>
+          {displayText || placeholder}
+        </span>
+        {hasRestDayWarning && <AlertTriangle className="h-3.5 w-3.5 shrink-0 text-amber-500" />}
+        {value && (
+          <span
+            role="button"
+            aria-label="清空时间"
+            onClick={clearValue}
+            className="ml-1 rounded p-0.5 text-[var(--ink-muted)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]"
+          >
+            <X className="h-3 w-3" />
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <div
+          className={`absolute top-full z-[80] mt-1 w-[320px] rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-3 shadow-[var(--shadow-md)] ${
+            popoverAlign === 'right' ? 'right-0' : 'left-0'
+          }`}
+        >
+          <div className="mb-3 flex items-center justify-between">
+            <button
+              type="button"
+              onClick={() => setViewDate(addMonths(viewDate, -1))}
+              className="rounded-md p-1 text-[var(--ink-muted)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]"
+              aria-label="上个月"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </button>
+            <span className="text-[13px] font-semibold text-[var(--ink)]">
+              {viewDate.getFullYear()}年{viewDate.getMonth() + 1}月
+            </span>
+            <button
+              type="button"
+              onClick={() => setViewDate(addMonths(viewDate, 1))}
+              className="rounded-md p-1 text-[var(--ink-muted)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]"
+              aria-label="下个月"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </button>
+          </div>
+
+          <div className="mb-1 grid grid-cols-7 gap-1 text-center text-[10px] font-medium text-[var(--ink-muted)]">
+            {WEEKDAYS.map((day) => <span key={day}>{day}</span>)}
+          </div>
+
+          <div className="grid grid-cols-7 gap-1">
+            {days.map((day) => {
+              const info = getChinaWorkdayInfo(day.dateKey);
+              const isSelected = day.dateKey === selectedDate;
+              const isToday = day.dateKey === getDateKey(new Date());
+              const tone = getDayTone(info.type, day.inMonth, isSelected);
+              return (
+                <button
+                  type="button"
+                  key={day.dateKey}
+                  onClick={() => updateDate(day.dateKey)}
+                  title={info.label}
+                  className={`relative flex h-9 flex-col items-center justify-center rounded-lg text-[12px] transition-colors ${tone} ${isToday && !isSelected ? 'ring-1 ring-[var(--accent-ring)]' : ''}`}
+                >
+                  <span className="leading-none">{day.day}</span>
+                  {(info.type === 'holiday' || info.type === 'makeup_workday') && (
+                    <span className="mt-0.5 h-1 w-1 rounded-full bg-current opacity-70" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="mt-3 flex items-center gap-2 border-t border-[var(--line)] pt-3">
+            <Clock3 className="h-3.5 w-3.5 text-[var(--ink-muted)]" />
+            <select
+              value={parts.hour}
+              onChange={(event) => updateTime(Number(event.target.value), parts.minute)}
+              className="h-8 flex-1 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-2 text-[12px] focus:border-[var(--accent)] focus:outline-none"
+            >
+              {HOURS.map((hour) => (
+                <option key={hour} value={hour}>{String(hour).padStart(2, '0')} 时</option>
+              ))}
+            </select>
+            <select
+              value={parts.minute}
+              onChange={(event) => updateTime(parts.hour, Number(event.target.value))}
+              className="h-8 flex-1 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-2 text-[12px] focus:border-[var(--accent)] focus:outline-none"
+            >
+              {MINUTES.map((minute) => (
+                <option key={minute} value={minute}>{String(minute).padStart(2, '0')} 分</option>
+              ))}
+            </select>
+          </div>
+
+          {selectedInfo && (
+            <div className={`mt-2 rounded-lg px-2.5 py-2 text-[11px] ${selectedInfo.isWorkday ? 'bg-[var(--bg-subtle)] text-[var(--ink-muted)]' : 'bg-amber-50 text-amber-700'}`}>
+              {selectedInfo.isWorkday
+                ? selectedInfo.type === 'makeup_workday' ? `${selectedInfo.label}，按工作日处理` : '所选日期为工作日'
+                : `所选日期为${selectedInfo.label}，仍可保存`}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function parseLocalDateTime(value: string, defaultHour: number): { dateKey: string; hour: number; minute: number } {
+  const matched = value.match(/^(\d{4}-\d{2}-\d{2})T(\d{2}):(\d{2})/);
+  if (!matched) return { dateKey: '', hour: defaultHour, minute: 0 };
+  return {
+    dateKey: matched[1],
+    hour: Number(matched[2]),
+    minute: normalizeMinute(Number(matched[3])),
+  };
+}
+
+function normalizeMinute(minute: number): number {
+  if (MINUTES.includes(minute)) return minute;
+  return MINUTES.reduce((best, current) => Math.abs(current - minute) < Math.abs(best - minute) ? current : best, 0);
+}
+
+function makeLocalDateTime(dateKey: string, hour: number, minute: number): string {
+  return `${dateKey}T${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
+}
+
+function getInitialViewDate(value: string): Date {
+  const dateKey = getDateKey(value || new Date());
+  const [year, month] = dateKey.split('-').map(Number);
+  return new Date(year, month - 1, 1);
+}
+
+function addMonths(date: Date, count: number): Date {
+  return new Date(date.getFullYear(), date.getMonth() + count, 1);
+}
+
+function buildCalendarDays(viewDate: Date): Array<{ dateKey: string; day: number; inMonth: boolean }> {
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const first = new Date(year, month, 1);
+  const mondayOffset = (first.getDay() + 6) % 7;
+  const cursor = new Date(year, month, 1 - mondayOffset);
+  const days = [];
+
+  for (let index = 0; index < 42; index += 1) {
+    days.push({
+      dateKey: getDateKey(cursor),
+      day: cursor.getDate(),
+      inMonth: cursor.getMonth() === month,
+    });
+    cursor.setDate(cursor.getDate() + 1);
+  }
+
+  return days;
+}
+
+function getDayTone(type: string, inMonth: boolean, selected: boolean): string {
+  if (selected) return 'bg-[var(--accent)] text-white shadow-sm';
+  if (!inMonth) return 'text-[var(--ink-muted)] opacity-35 hover:bg-[var(--bg-subtle)]';
+  if (type === 'holiday') return 'bg-red-50 text-red-600 hover:bg-red-100';
+  if (type === 'makeup_workday') return 'bg-blue-50 text-blue-600 hover:bg-blue-100';
+  if (type === 'weekend') return 'text-amber-600 hover:bg-amber-50';
+  return 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]';
+}
--- a/apps/web/components/bug/BugCreateModal.tsx
+++ b/apps/web/components/bug/BugCreateModal.tsx
@@ -9,14 +9,22 @@ import { useRequirementStore } from '@/stores/useRequirementStore';
 import { useMemberStore } from '@/stores/useMemberStore';
 import { useAuthStore } from '@/stores/useAuthStore';
 import { resolveMemberDisplayName } from '@/lib/member-system';
+import { WorkDateTimePicker } from '@/components/WorkDateTimePicker';
 import type { Priority } from '@/lib/derive';
 import type { BugSeverity } from '@/lib/bug';
+import { isoToLocal, localToISO } from '@/lib/work-hours';

 interface Props {
  testCaseId: string;
  onClose: () => void;
 }

+function defaultPlannedFixLocal(): string {
+  const d = new Date();
+  d.setHours(18, 0, 0, 0);
+  return isoToLocal(d.toISOString());
+}
+
 export function BugCreateModal({ testCaseId, onClose }: Props) {
  const { createBug } = useBugStore();
  const { testCases } = useTestCaseStore();
@@ -42,10 +50,12 @@ 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 [plannedFixLocal, setPlannedFixLocal] = useState(defaultPlannedFixLocal);
  const [images, setImages] = useState<string[]>([]);
  const fileRef = useRef<HTMLInputElement>(null);

-  const canSubmit = title.trim() && description.trim() && assigneeId;
+  const plannedFixAt = localToISO(plannedFixLocal);
+  const canSubmit = title.trim() && description.trim() && assigneeId && Boolean(plannedFixAt);

  const handleFiles = (files: FileList | null) => {
    if (!files) return;
@@ -72,6 +82,7 @@ export function BugCreateModal({ testCaseId, onClose }: Props) {
      priority,
      reportedBy: operator,
      assigneeId,
+      plannedFixAt,
      images: images.length > 0 ? images : undefined,
    }, operator);
    onClose();
@@ -154,6 +165,15 @@ export function BugCreateModal({ testCaseId, onClose }: Props) {
              </select>
            </div>
          </div>
+          <div>
+            <label className="block text-[12px] text-[var(--ink-soft)] mb-1">计划修复时间 *</label>
+            <WorkDateTimePicker
+              value={plannedFixLocal}
+              onChange={setPlannedFixLocal}
+              placeholder="选择计划修复时间"
+              defaultHour={18}
+            />
+          </div>
        </div>
        <div className="flex justify-end gap-2 pt-4 border-t border-[var(--line)] mt-4">
          <button onClick={onClose} className="h-8 px-3 rounded-lg text-[12px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">取消</button>
--- a/apps/web/components/bug/BugDetailDrawer.tsx
+++ b/apps/web/components/bug/BugDetailDrawer.tsx
@@ -166,6 +166,7 @@ export function BugDetailDrawer({ bugId, onClose, contextLabel }: Props) {
          <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="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)] font-medium">{bug.plannedFixAt ? formatDateTime(bug.plannedFixAt) : '待排期'}</span></div>
              <div><span className="text-[var(--ink-muted)]">提交人：</span><span className="text-[var(--ink)]">{reporterName}</span></div>
              <div><span className="text-[var(--ink-muted)]">修复人：</span><span className="text-[var(--ink)] font-medium">{assigneeName}</span></div>
              <div><span className="text-[var(--ink-muted)]">提交：</span><span className="text-[var(--ink)]">{formatDateTime(bug.createdAt)}</span></div>
--- a/apps/web/components/bug/BugRow.tsx
+++ b/apps/web/components/bug/BugRow.tsx
@@ -4,6 +4,7 @@ import { memo } from 'react';
 import { BugStatusBadge } from './BugStatusBadge';
 import { BUG_SEVERITY_LABEL, BUG_SEVERITY_COLOR, getBugActualHours } from '@/lib/bug';
 import { formatWorkHours } from '@/lib/work-hours';
+import { formatDateTimeShort } from '@/lib/format';
 import { resolveMemberDisplayName } from '@/lib/member-system';
 import { useMemberStore } from '@/stores/useMemberStore';
 import type { Bug } from '@/lib/bug';
@@ -32,6 +33,9 @@ function BugRowImpl({ bug, testCaseNo, onClick }: Props) {
      <span className="text-[13px] text-[var(--ink)] flex-1 truncate">{bug.title}</span>
      <span className={`text-[10px] px-1.5 py-0.5 rounded shrink-0 ${BUG_SEVERITY_COLOR[bug.severity]}`}>{BUG_SEVERITY_LABEL[bug.severity]}</span>
      <BugStatusBadge status={bug.status} />
+      <span className="text-[11px] text-[var(--ink-muted)] tabular-nums w-24 text-right shrink-0 whitespace-nowrap" title="计划修复时间">
+        {bug.plannedFixAt ? formatDateTimeShort(bug.plannedFixAt) : '待排期'}
+      </span>
      {actualHours > 0 && (
        <span className="text-[11px] text-[var(--ink-muted)] tabular-nums w-28 text-right shrink-0 whitespace-nowrap">{formatWorkHours(actualHours)}</span>
      )}
--- a/apps/web/components/dev-task/DevTaskCreateModal.tsx
+++ b/apps/web/components/dev-task/DevTaskCreateModal.tsx
@@ -7,6 +7,7 @@ import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
 import { useRequirementStore } from '@/stores/useRequirementStore';
 import { useMemberStore } from '@/stores/useMemberStore';
 import { useAuthStore } from '@/stores/useAuthStore';
+import { WorkDateTimePicker } from '@/components/WorkDateTimePicker';
 import { calcWorkHours, formatWorkHours, isoToLocal, localToISO } from '@/lib/work-hours';
 import type { Priority } from '@/lib/derive';

@@ -134,12 +135,12 @@ export function DevTaskCreateModal({ versionId, requirementIds, versionDeadline,

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
-      <div className="w-full max-w-lg 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-3xl max-h-[92vh] 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)]">新建开发任务</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="space-y-3 max-h-[60vh] overflow-y-auto">
+        <div className="space-y-3">
          <div>
            <label className="block text-[12px] text-[var(--ink-soft)] mb-1">任务标题 *</label>
            <input value={title} onChange={(e) => setTitle(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" placeholder="例如：排班界面开发" />
@@ -168,11 +169,24 @@ export function DevTaskCreateModal({ versionId, requirementIds, versionDeadline,
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">预计开始 *</label>
-              <input type="datetime-local" value={expectedStartLocal} onChange={(e) => setExpectedStartLocal(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
+              <WorkDateTimePicker
+                value={expectedStartLocal}
+                onChange={setExpectedStartLocal}
+                placeholder="选择预计开始时间"
+                defaultHour={9}
+                className="bg-[var(--bg)]"
+              />
            </div>
            <div>
              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">预计截止 *</label>
-              <input type="datetime-local" value={expectedEndLocal} onChange={(e) => setExpectedEndLocal(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
+              <WorkDateTimePicker
+                value={expectedEndLocal}
+                onChange={setExpectedEndLocal}
+                placeholder="选择预计截止时间"
+                defaultHour={18}
+                popoverAlign="right"
+                className="bg-[var(--bg)]"
+              />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-3">
--- a/apps/web/components/dev-task/DevTaskDetailDrawer.tsx
+++ b/apps/web/components/dev-task/DevTaskDetailDrawer.tsx
@@ -173,7 +173,7 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
                </span>
              )}
              {requireDelay && (
-                <span className="inline-flex items-center gap-1 text-[11px] text-orange-600 bg-orange-50 border border-orange-200 px-2 py-1 rounded-lg" title="已超过预计开始时间，开干需填延后原因">
+                <span className="inline-flex items-center gap-1 text-[11px] text-orange-600 bg-orange-50 border border-orange-200 px-2 py-1 rounded-lg" title="已超过预计截止时间，开干需填延后原因">
                  <AlertTriangle className="h-3 w-3" />超期未开始
                </span>
              )}
@@ -194,7 +194,7 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
              <div className="rounded-lg border border-orange-200 bg-orange-50 p-3 space-y-2">
                <div className="flex items-center gap-1.5 text-[11px] text-orange-700">
                  <AlertTriangle className="h-3.5 w-3.5" />
-                  已超过预计开始时间，请说明延后原因
+                  已超过预计截止时间，请说明延后原因
                </div>
                <input value={delayReason} onChange={(e) => setDelayReason(e.target.value)} placeholder="延后原因（必填）" className="h-8 w-full rounded-md border border-orange-200 bg-white px-2 text-[12px] focus:border-orange-400 focus:outline-none" autoFocus />
                <div className="flex gap-2">
--- a/apps/web/components/test-case/TestCaseCreateModal.tsx
+++ b/apps/web/components/test-case/TestCaseCreateModal.tsx
@@ -7,9 +7,11 @@ import { useRequirementStore } from '@/stores/useRequirementStore';
 import { useMemberStore } from '@/stores/useMemberStore';
 import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
 import { useAuthStore } from '@/stores/useAuthStore';
+import { WorkDateTimePicker } from '@/components/WorkDateTimePicker';
 import type { Priority } from '@/lib/derive';
 import { getCategoriesByGroup, getDefaultCategoryByGroup } from '@/lib/task-category';
 import { clampTestCaseEstimateHours, getDefaultTestCaseEstimateHours } from '@/lib/ai-estimation-policy';
+import { isoToLocal, localToISO } from '@/lib/work-hours';

 interface Props {
  versionId: string;
@@ -18,6 +20,12 @@ interface Props {
  onClose: () => void;
 }

+function defaultPlannedTestLocal(): string {
+  const d = new Date();
+  d.setHours(9, 0, 0, 0);
+  return isoToLocal(d.toISOString());
+}
+
 export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClose }: Props) {
  const { createTestCase } = useTestCaseStore();
  const { requirements } = useRequirementStore();
@@ -40,6 +48,7 @@ export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClos
    [categories, categoryId, testCategories],
  );
  const [estimateHours, setEstimateHours] = useState(0.5);
+  const [plannedTestLocal, setPlannedTestLocal] = useState(defaultPlannedTestLocal);
  const [assigneeId, setAssigneeId] = useState(user?.name || '');
  const [description, setDescription] = useState('');
  const [prototypeNotes, setPrototypeNotes] = useState('');
@@ -59,7 +68,8 @@ export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClos
  };

  const normalizedEstimateHours = clampTestCaseEstimateHours(selectedCategory?.code, estimateHours);
-  const canSubmit = title.trim() && categoryId && normalizedEstimateHours > 0;
+  const plannedTestAt = localToISO(plannedTestLocal);
+  const canSubmit = title.trim() && categoryId && normalizedEstimateHours > 0 && Boolean(plannedTestAt);

  const handleSubmit = () => {
    if (!canSubmit) return;
@@ -81,6 +91,7 @@ export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClos
      categoryId,
      priority,
      estimateHours: normalizedEstimateHours,
+      plannedTestAt,
      assigneeId: assigneeId || undefined,
      references: references.length > 0 ? references : undefined,
      createdBy: user?.name || '系统',
@@ -143,6 +154,15 @@ export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClos
              </select>
            </div>
          </div>
+          <div>
+            <label className="block text-[12px] text-[var(--ink-soft)] mb-1">计划测试时间 *</label>
+            <WorkDateTimePicker
+              value={plannedTestLocal}
+              onChange={setPlannedTestLocal}
+              placeholder="选择计划测试时间"
+              defaultHour={9}
+            />
+          </div>
          <div>
            <label className="block text-[12px] text-[var(--ink-soft)] mb-1">测试步骤 & 预期结果</label>
            <textarea rows={4} 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="1. 操作步骤...&#10;2. 预期结果..." />
--- a/apps/web/components/test-case/TestCaseDetailDrawer.tsx
+++ b/apps/web/components/test-case/TestCaseDetailDrawer.tsx
@@ -157,6 +157,7 @@ export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, context
          <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="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)] font-medium">{tc.plannedTestAt ? formatDateTime(tc.plannedTestAt) : '待排期'}</span></div>
              <div><span className="text-[var(--ink-muted)]">优先级：</span><span className="text-[var(--ink)] font-medium">{tc.priority}</span></div>
              <div className="flex items-center gap-1.5"><span className="text-[var(--ink-muted)]">任务类型：</span><CategoryChip category={category} /></div>
              <div><span className="text-[var(--ink-muted)]">负责人：</span><span className="text-[var(--ink)] font-medium">{tc.assigneeId || '-'}</span></div>
--- a/apps/web/components/test-case/TestCaseRow.tsx
+++ b/apps/web/components/test-case/TestCaseRow.tsx
@@ -4,6 +4,7 @@ import { memo } from 'react';
 import { TestCaseStatusBadge } from './TestCaseStatusBadge';
 import { getTestCaseActualHours, getTestCaseEstimateHours } from '@/lib/test-case';
 import { formatWorkHours } from '@/lib/work-hours';
+import { formatDateTimeShort } from '@/lib/format';
 import type { TestCase } from '@/lib/test-case';
 import type { TaskCategory } from '@/lib/task-category';

@@ -53,6 +54,9 @@ function TestCaseRowImpl({ testCase, category, bugCount, onClick }: Props) {
        <span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded shrink-0">{bugCount} Bug</span>
      )}
      <TestCaseStatusBadge status={testCase.status} />
+      <span className="text-[11px] text-[var(--ink-muted)] tabular-nums w-24 text-right shrink-0 whitespace-nowrap" title="计划测试时间">
+        {testCase.plannedTestAt ? formatDateTimeShort(testCase.plannedTestAt) : '待排期'}
+      </span>
      <span className="text-[11px] text-[var(--ink-muted)] tabular-nums w-32 text-right shrink-0 whitespace-nowrap">
        {actualHours > 0 ? `${formatWorkHours(actualHours)} / ${formatWorkHours(estimateHours)}` : `${estimatePrefix} ${formatWorkHours(estimateHours)}`}
      </span>
--- a/apps/web/components/version/PlanTab.tsx
+++ b/apps/web/components/version/PlanTab.tsx
@@ -16,6 +16,7 @@ import {
 } from '@/lib/version-plan';
 import { formatDateTime } from '@/lib/format';
 import { FieldError } from '@/components/FieldError';
+import { WorkDateTimePicker } from '@/components/WorkDateTimePicker';
 import { AiDecomposeButton } from './AiDecomposeButton';
 import type { VersionWithContext } from '@/lib/derive';
 import type { Requirement } from '@/lib/requirement';
@@ -459,11 +460,22 @@ function PlanFormModal({ initial, planType, versionId, versionDeadline, currentU
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-[12px] font-medium text-[var(--ink-soft)] mb-1 block">计划开始时间</label>
-              <input type="datetime-local" value={startTime} onChange={(e) => setStartTime(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
+              <WorkDateTimePicker
+                value={startTime}
+                onChange={setStartTime}
+                placeholder="选择计划开始时间"
+                defaultHour={9}
+              />
            </div>
            <div>
              <label className="text-[12px] font-medium text-[var(--ink-soft)] mb-1 block">计划截止时间</label>
-              <input type="datetime-local" value={endTime} onChange={(e) => { setEndTime(e.target.value); setEndTimeError(''); }} required className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
+              <WorkDateTimePicker
+                value={endTime}
+                onChange={(next) => { setEndTime(next); setEndTimeError(''); }}
+                placeholder="选择计划截止时间"
+                defaultHour={18}
+                popoverAlign="right"
+              />
              <FieldError message={endTimeError} />
            </div>
          </div>
--- a/apps/web/lib/bug.test.ts
+++ b/apps/web/lib/bug.test.ts
@@ -0,0 +1,25 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+import type { Bug } from './bug';
+
+test('bug supports planned fix time', () => {
+  const bug: Bug = {
+    id: 'bug-1',
+    bugNo: 'BUG-001',
+    versionId: 'version-1',
+    testCaseId: 'tc-1',
+    title: 'cannot save',
+    description: 'save button has no response',
+    severity: 'major',
+    priority: 'P1',
+    reportedBy: 'QA',
+    assigneeId: 'Dev',
+    status: 'open',
+    plannedFixAt: '2026-07-01T18:00:00.000Z',
+    createdAt: '2026-06-25T00:00:00.000Z',
+    updatedAt: '2026-06-25T00:00:00.000Z',
+  };
+
+  assert.equal(bug.plannedFixAt, '2026-07-01T18:00:00.000Z');
+});
--- a/apps/web/lib/bug.ts
+++ b/apps/web/lib/bug.ts
@@ -34,6 +34,7 @@ export interface Bug {
  resolution?: string;
  estimateHours?: number;
  aiEstimateHours?: number;
+  plannedFixAt?: string;
  createdAt: string;
  updatedAt: string;
 }
--- a/apps/web/lib/china-workday-calendar.test.ts
+++ b/apps/web/lib/china-workday-calendar.test.ts
@@ -0,0 +1,32 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+import { getChinaWorkdayInfo, isChinaWorkday } from './china-workday-calendar';
+
+test('classifies 2026 official holidays and makeup workdays', () => {
+  const nationalDay = getChinaWorkdayInfo('2026-10-01');
+  assert.equal(nationalDay.type, 'holiday');
+  assert.equal(nationalDay.isWorkday, false);
+  assert.equal(nationalDay.label, '国庆节');
+  assert.equal(isChinaWorkday('2026-10-01'), false);
+
+  const makeupDay = getChinaWorkdayInfo('2026-10-10');
+  assert.equal(makeupDay.type, 'makeup_workday');
+  assert.equal(makeupDay.isWorkday, true);
+  assert.equal(makeupDay.label, '国庆节调休上班');
+  assert.equal(isChinaWorkday('2026-10-10'), true);
+});
+
+test('classifies 2026 regular weekends and weekdays', () => {
+  assert.equal(getChinaWorkdayInfo('2026-07-04').type, 'weekend');
+  assert.equal(getChinaWorkdayInfo('2026-07-04').isWorkday, false);
+
+  assert.equal(getChinaWorkdayInfo('2026-07-06').type, 'workday');
+  assert.equal(getChinaWorkdayInfo('2026-07-06').isWorkday, true);
+});
+
+test('uses only the date part from local datetime values', () => {
+  const dragonBoat = getChinaWorkdayInfo('2026-06-19T09:30');
+  assert.equal(dragonBoat.type, 'holiday');
+  assert.equal(dragonBoat.label, '端午节');
+});
--- a/apps/web/lib/china-workday-calendar.ts
+++ b/apps/web/lib/china-workday-calendar.ts
@@ -0,0 +1,129 @@
+export type ChinaWorkdayType = 'workday' | 'weekend' | 'holiday' | 'makeup_workday';
+
+export interface ChinaWorkdayInfo {
+  date: string;
+  type: ChinaWorkdayType;
+  label: string;
+  isWorkday: boolean;
+  source: 'official_2026' | 'weekend_fallback';
+}
+
+type OverrideInfo = {
+  type: Extract<ChinaWorkdayType, 'holiday' | 'makeup_workday'>;
+  label: string;
+};
+
+export const CHINA_HOLIDAY_SOURCE_2026 = {
+  name: '国务院办公厅关于2026年部分节假日安排的通知',
+  url: 'https://www.gov.cn/zhengce/zhengceku/202511/content_7047091.htm',
+} as const;
+
+const OFFICIAL_2026_OVERRIDES: Record<string, OverrideInfo> = {
+  '2026-01-01': { type: 'holiday', label: '元旦' },
+  '2026-01-02': { type: 'holiday', label: '元旦' },
+  '2026-01-03': { type: 'holiday', label: '元旦' },
+  '2026-01-04': { type: 'makeup_workday', label: '元旦调休上班' },
+
+  '2026-02-14': { type: 'makeup_workday', label: '春节调休上班' },
+  '2026-02-15': { type: 'holiday', label: '春节' },
+  '2026-02-16': { type: 'holiday', label: '春节' },
+  '2026-02-17': { type: 'holiday', label: '春节' },
+  '2026-02-18': { type: 'holiday', label: '春节' },
+  '2026-02-19': { type: 'holiday', label: '春节' },
+  '2026-02-20': { type: 'holiday', label: '春节' },
+  '2026-02-21': { type: 'holiday', label: '春节' },
+  '2026-02-22': { type: 'holiday', label: '春节' },
+  '2026-02-23': { type: 'holiday', label: '春节' },
+  '2026-02-28': { type: 'makeup_workday', label: '春节调休上班' },
+
+  '2026-04-04': { type: 'holiday', label: '清明节' },
+  '2026-04-05': { type: 'holiday', label: '清明节' },
+  '2026-04-06': { type: 'holiday', label: '清明节' },
+
+  '2026-05-01': { type: 'holiday', label: '劳动节' },
+  '2026-05-02': { type: 'holiday', label: '劳动节' },
+  '2026-05-03': { type: 'holiday', label: '劳动节' },
+  '2026-05-04': { type: 'holiday', label: '劳动节' },
+  '2026-05-05': { type: 'holiday', label: '劳动节' },
+  '2026-05-09': { type: 'makeup_workday', label: '劳动节调休上班' },
+
+  '2026-06-19': { type: 'holiday', label: '端午节' },
+  '2026-06-20': { type: 'holiday', label: '端午节' },
+  '2026-06-21': { type: 'holiday', label: '端午节' },
+
+  '2026-09-20': { type: 'makeup_workday', label: '国庆节调休上班' },
+  '2026-09-25': { type: 'holiday', label: '中秋节' },
+  '2026-09-26': { type: 'holiday', label: '中秋节' },
+  '2026-09-27': { type: 'holiday', label: '中秋节' },
+
+  '2026-10-01': { type: 'holiday', label: '国庆节' },
+  '2026-10-02': { type: 'holiday', label: '国庆节' },
+  '2026-10-03': { type: 'holiday', label: '国庆节' },
+  '2026-10-04': { type: 'holiday', label: '国庆节' },
+  '2026-10-05': { type: 'holiday', label: '国庆节' },
+  '2026-10-06': { type: 'holiday', label: '国庆节' },
+  '2026-10-07': { type: 'holiday', label: '国庆节' },
+  '2026-10-10': { type: 'makeup_workday', label: '国庆节调休上班' },
+};
+
+const DATE_KEY_PATTERN = /^(\d{4})-(\d{2})-(\d{2})/;
+
+export function getDateKey(value: string | Date): string {
+  if (value instanceof Date) {
+    return formatDateKey(value);
+  }
+  const matched = value.match(DATE_KEY_PATTERN);
+  if (matched) return `${matched[1]}-${matched[2]}-${matched[3]}`;
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? '' : formatDateKey(parsed);
+}
+
+export function getChinaWorkdayInfo(value: string | Date): ChinaWorkdayInfo {
+  const date = getDateKey(value);
+  const override = OFFICIAL_2026_OVERRIDES[date];
+  if (override) {
+    return {
+      date,
+      type: override.type,
+      label: override.label,
+      isWorkday: override.type === 'makeup_workday',
+      source: 'official_2026',
+    };
+  }
+
+  const parsed = parseDateKey(date);
+  const weekend = parsed ? isWeekend(parsed) : false;
+  return {
+    date,
+    type: weekend ? 'weekend' : 'workday',
+    label: weekend ? '周末' : '工作日',
+    isWorkday: !weekend,
+    source: 'weekend_fallback',
+  };
+}
+
+export function isChinaWorkday(value: string | Date): boolean {
+  return getChinaWorkdayInfo(value).isWorkday;
+}
+
+function formatDateKey(date: Date): string {
+  const yyyy = date.getFullYear();
+  const mm = String(date.getMonth() + 1).padStart(2, '0');
+  const dd = String(date.getDate()).padStart(2, '0');
+  return `${yyyy}-${mm}-${dd}`;
+}
+
+function parseDateKey(dateKey: string): Date | null {
+  const matched = dateKey.match(DATE_KEY_PATTERN);
+  if (!matched) return null;
+  const year = Number(matched[1]);
+  const month = Number(matched[2]);
+  const day = Number(matched[3]);
+  if (!year || !month || !day) return null;
+  return new Date(year, month - 1, day);
+}
+
+function isWeekend(date: Date): boolean {
+  const day = date.getDay();
+  return day === 0 || day === 6;
+}
--- a/apps/web/lib/dev-task-transitions.test.ts
+++ b/apps/web/lib/dev-task-transitions.test.ts
@@ -0,0 +1,33 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+import type { DevTask } from './dev-task';
+import { needsDelayReason } from './dev-task-transitions';
+
+function task(patch: Partial<DevTask> = {}): DevTask {
+  return {
+    id: 'task-1',
+    taskNo: 'DEV-001',
+    requirementId: 'req-1',
+    title: '实现排班规则',
+    categoryId: 'cat-frontend-interaction',
+    assigneeId: 'Alice',
+    priority: 'P2',
+    expectedStartAt: '2026-06-29T01:00:00.000Z',
+    expectedEndAt: '2026-06-29T10:00:00.000Z',
+    status: 'todo',
+    isBlocked: false,
+    createdBy: 'PM',
+    createdAt: '2026-06-29T00:00:00.000Z',
+    updatedAt: '2026-06-29T00:00:00.000Z',
+    ...patch,
+  };
+}
+
+test('needsDelayReason does not require a reason before expected end time', () => {
+  assert.equal(needsDelayReason(task(), new Date('2026-06-29T09:00:00.000Z')), false);
+});
+
+test('needsDelayReason requires a reason after expected end time for todo tasks', () => {
+  assert.equal(needsDelayReason(task(), new Date('2026-06-29T10:01:00.000Z')), true);
+});
--- a/apps/web/lib/dev-task-transitions.ts
+++ b/apps/web/lib/dev-task-transitions.ts
@@ -1,6 +1,6 @@
 import type { DevTask } from './dev-task';

 export function needsDelayReason(task: DevTask, now: Date = new Date()): boolean {
-  if (task.status !== 'todo' || !task.expectedStartAt) return false;
-  return now.getTime() > new Date(task.expectedStartAt).getTime();
+  if (task.status !== 'todo' || !task.expectedEndAt) return false;
+  return now.getTime() > new Date(task.expectedEndAt).getTime();
 }
--- a/apps/web/lib/test-case.test.ts
+++ b/apps/web/lib/test-case.test.ts
@@ -48,6 +48,24 @@ test('normalizeTestCase keeps existing categoryId', () => {
  assert.equal(tc.categoryId, 'cat-test-api');
 });

+test('normalizeTestCase preserves planned test time', () => {
+  const tc = normalizeTestCase({
+    id: 'tc-1',
+    caseNo: 'TC-001',
+    versionId: 'v1',
+    title: 'scheduled test case',
+    priority: 'P2',
+    status: 'pending',
+    categoryId: 'cat-test-api',
+    plannedTestAt: '2026-07-01T09:30:00.000Z',
+    createdBy: 'tester',
+    createdAt: '2026-06-25',
+    updatedAt: '2026-06-25',
+  } as any);
+
+  assert.equal(tc.plannedTestAt, '2026-07-01T09:30:00.000Z');
+});
+
 test('normalizeTestCase backfills missing roundNo to the first test round', () => {
  const tc = normalizeTestCase({
    id: 'tc-1',
@@ -116,6 +134,7 @@ test('copyTestCaseToRound preserves estimates and references but clears executio
    categoryId: 'cat-test-functional',
    estimateHours: 0.75,
    aiEstimateHours: 0.25,
+    plannedTestAt: '2026-07-01T09:30:00.000Z',
    assigneeId: 'QA',
    startedAt: '2026-06-25T01:00:00.000Z',
    completedAt: '2026-06-25T02:00:00.000Z',
@@ -137,6 +156,7 @@ test('copyTestCaseToRound preserves estimates and references but clears executio
  assert.equal(copied.sourceCaseId, 'tc-source');
  assert.equal(copied.aiEstimateHours, 0.25);
  assert.equal(copied.estimateHours, 0.75);
+  assert.equal(copied.plannedTestAt, '2026-07-01T09:30:00.000Z');
  assert.deepEqual(copied.references, source.references);
  assert.equal(copied.startedAt, undefined);
  assert.equal(copied.completedAt, undefined);
--- a/apps/web/lib/test-case.ts
+++ b/apps/web/lib/test-case.ts
@@ -22,6 +22,7 @@ export interface TestCase {
  status: TestCaseStatus;
  estimateHours?: number;
  aiEstimateHours?: number;
+  plannedTestAt?: string;
  startedAt?: string;
  completedAt?: string;
  executedAt?: string;
@@ -96,6 +97,7 @@ export function normalizeTestCase(testCase: Partial<TestCase>, index = 0): TestC
    status: testCase.status || 'pending',
    estimateHours: typeof testCase.estimateHours === 'number' && testCase.estimateHours > 0 ? testCase.estimateHours : undefined,
    aiEstimateHours: typeof testCase.aiEstimateHours === 'number' && testCase.aiEstimateHours > 0 ? testCase.aiEstimateHours : undefined,
+    plannedTestAt: testCase.plannedTestAt,
    startedAt: testCase.startedAt,
    completedAt: testCase.completedAt,
    executedAt: testCase.executedAt,
@@ -169,6 +171,7 @@ export function copyTestCaseToRound(source: TestCase, roundNo: number, createdBy
    priority: source.priority,
    estimateHours: source.estimateHours,
    aiEstimateHours: source.aiEstimateHours,
+    plannedTestAt: source.plannedTestAt,
    assigneeId: source.assigneeId,
    startedAt: undefined,
    completedAt: undefined,
--- a/docs/decisions.md
+++ b/docs/decisions.md
@@ -343,3 +343,15 @@
 - A pure aggregation function keeps report behavior testable and predictable.

 **Rule**: Key status changes count as daily evidence. Multi-day in-progress work without today's activity or progress note is flagged as needing a progress update.
+
+## 29. 计划日期使用中国节假日日历提示，不做硬阻断
+
+**问题**：调研、产品方案、UI 设计、开发任务、测试用例和 Bug 修复都需要填写计划时间。原生日期控件样式不一致，也无法提示中国法定节假日和调休工作日。
+
+**决策**：
+- 新建统一的工作日日期时间选择组件，创建任务时复用同一套交互。
+- 内置国务院办公厅发布的 2026 年中国法定节假日和调休工作日；未知年份按周末/工作日兜底。
+- 选择节假日或周末时只提示，不阻止保存；选择调休工作日时按工作日提示。
+- TestCase 增加 `plannedTestAt`，Bug 增加 `plannedFixAt`，保存为 ISO 时间戳。
+
+**理由**：项目排期需要贴近中国工作日，但研发和线上 Bug 可能确实安排在非工作日处理，所以系统负责提醒，最终是否保存交给用户判断。
--- a/docs/workflow.md
+++ b/docs/workflow.md
@@ -31,6 +31,10 @@
 - 个人耗时 = 每个任务独立累加（个人维度）
 ```

+## 开发任务延后原因判断
+
+开发任务从“待开发”切换到“开发中”时，只有当前时间已经超过 `expectedEndAt`（预计截止）才要求填写延后原因。超过预计开始时间但仍未超过预计截止时间，不视为延后。
+
 ## 测试轮次流程

 测试用例支持按版本开启多轮测试：
@@ -221,3 +225,11 @@ Implementation convention:
 - Activity wording and category mapping belong in `apps/web/lib/work-activity-factory.ts`.
 - Daily report grouping belongs in `apps/web/lib/workspace-daily-report.ts`.
 - Page components should consume report output, not rebuild report rules.
+
+## 日期选择与计划时间
+
+- 调研、产品方案、UI 设计、开发任务、测试用例、Bug 创建时使用统一工作日日期时间选择器。
+- 日期选择器接入中国节假日日历。当前内置 2026 年国务院办公厅放假调休安排；其他年份先按周末/工作日兜底。
+- 非工作日只提示，不阻止保存；调休工作日按工作日提示。
+- 测试用例计划测试时间字段为 `plannedTestAt`；Bug 计划修复时间字段为 `plannedFixAt`。
+- 测试轮次复制用例时保留计划测试时间、AI 预估和执行预估，清空实际执行记录。