Function TaskList

packages/web/src/components/task/TaskList.tsx:68–399

({
  tasks = [],
  projects = [],
  selectedTaskId,
  onSelectTask,
  filterProjectId,
  setFilterProjectId,
  width = 320,
  onCreateTask,
  onCreateProject,
  isCreateActive,
  activeTaskIds,
  onTaskStatusChange,
  onDeleteTask,
}: TaskListProps)

export function TaskList({
  tasks = [],
  projects = [],
  selectedTaskId,
  onSelectTask,
  filterProjectId,
  setFilterProjectId,
  width = 320,
  onCreateTask,
  onCreateProject,
  isCreateActive,
  onTaskStatusChange,
  onDeleteTask,
}: TaskListProps) {
  const { t } = useI18n()
  const { preserveDesktopSearch } = useDesktopTitlebar()
  const isMobile = useIsMobile()
  const [activeDragTask, setActiveDragTask] = useState<UITask | null>(null)
  const [activeDragFromStatus, setActiveDragFromStatus] = useState<UITaskStatus | null>(null)
  const [isSearchOpen, setIsSearchOpen] = useState(false)

  const flipRegistryRef = useRef<Map<string, HTMLElement>>(new Map())
  const activeGhostsRef = useRef<Set<HTMLDivElement>>(new Set())
  const previousCardsRef = useRef<Map<string, { status: UITaskStatus; rect: DOMRect; html: string }>>(new Map())

  const flipHandle = useMemo<FlipHandle>(() => ({
    registry: flipRegistryRef.current,
  }), [])

  const removeGhost = useCallback((ghost: HTMLDivElement) => {
    ghost.remove()
    activeGhostsRef.current.delete(ghost)
  }, [])

  // 直接在 render 中计算派生状态，不使用 useEffect
  const filteredTasks = filterProjectId
    ? tasks.filter(t => t.projectId === filterProjectId)
    : tasks

  const getGroupFallbackRect = useCallback((status: UITaskStatus, fromRect: DOMRect): DOMRect | null => {
    const group = document.querySelector<HTMLElement>(`[data-task-group-status="${status}"]`)
    if (!group) return null

    const header = group.querySelector<HTMLElement>('button')
    const rect = (header ?? group).getBoundingClientRect()
    if (rect.width === 0 || rect.height === 0) return null

    return new DOMRect(rect.left + 8, rect.bottom + 4, fromRect.width, fromRect.height)
  }, [])

  const createStatusMoveGhost = useCallback((fromRect: DOMRect, toRect: DOMRect, html: string, isFallbackTarget = false) => {
    const ghost = document.createElement('div')
    ghost.setAttribute('aria-hidden', 'true')
    ghost.innerHTML = html
    const inner = ghost.firstElementChild as HTMLElement | null
    if (inner) {
      inner.style.cssText = ''
      inner.className = inner.className
        .replace(/\bopacity-\S*/g, '')
        .replace(/\banimate-task-enter\b/g, '')