86:["$","div","12,12",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],12]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-4)"},"children":"queryClient."}],["$","span","2",{"style":{"color":"var(--ch-5)"},"children":"setQueryData"}],["$","span","3",{"style":{"color":"var(--ch-4)"},"children":"(["}],["$","span","4",{"style":{"color":"var(--ch-8)"},"children":"'query/24optimistic/todos'"}],["$","span","5",{"style":{"color":"var(--ch-4)"},"children":"], ("}],["$","span","6",{"style":{"color":"var(--ch-3)"},"children":"old"}],["$","span","7",{"style":{"color":"var(--ch-7)"},"children":":"}]," ",["$","span","9",{"style":{"color":"var(--ch-3)"},"children":"Todo"}],["$","span","10",{"style":{"color":"var(--ch-4)"},"children":"[]"}]," ",["$","span","12",{"style":{"color":"var(--ch-7)"},"children":"="}]," ",["$","span","14",{"style":{"color":"var(--ch-4)"},"children":"[])"}]," ",["$","span","16",{"style":{"color":"var(--ch-7)"},"children":"=>"}]," ",["$","span","18",{"style":{"color":"var(--ch-4)"},"children":"{"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 87:["$","div","13,13",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],13]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-7)"},"children":"return"}]," ",["$","span","3",{"style":{"color":"var(--ch-4)"},"children":"old."}],["$","span","4",{"style":{"color":"var(--ch-5)"},"children":"map"}],["$","span","5",{"style":{"color":"var(--ch-4)"},"children":"("}],["$","span","6",{"style":{"color":"var(--ch-3)"},"children":"todo"}]," ",["$","span","8",{"style":{"color":"var(--ch-7)"},"children":"=>"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 88:["$","div","14,14",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],14]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-4)"},"children":"todo.id"}]," ",["$","span","3",{"style":{"color":"var(--ch-7)"},"children":"==="}]," ",["$","span","5",{"style":{"color":"var(--ch-4)"},"children":"id"}]," ",["$","span","7",{"style":{"color":"var(--ch-7)"},"children":"?"}]," ",["$","span","9",{"style":{"color":"var(--ch-4)"},"children":"{"}]," ",["$","span","11",{"style":{"color":"var(--ch-7)"},"children":"..."}],["$","span","12",{"style":{"color":"var(--ch-4)"},"children":"todo, completed:"}]," ",["$","span","14",{"style":{"color":"var(--ch-7)"},"children":"!"}],["$","span","15",{"style":{"color":"var(--ch-4)"},"children":"todo.completed }"}]," ",["$","span","17",{"style":{"color":"var(--ch-7)"},"children":":"}]," ",["$","span","19",{"style":{"color":"var(--ch-4)"},"children":"todo"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 89:["$","div","15,15",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],15]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-4)"},"children":")"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 8a:["$","div","16,16",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],16]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-4)"},"children":"})"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 8b:["$","div","17,17",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],17]}]}],["$","div",null,{"children":["\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 8c:["$","div","18,18",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],18]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-7)"},"children":"return"}]," ",["$","span","3",{"style":{"color":"var(--ch-4)"},"children":"{ previousTodos }"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 8d:["$","div","19,19",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],19]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-4)"},"children":"},"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 8e:["$","div","20,20",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],20]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-5)"},"children":"onError"}],["$","span","2",{"style":{"color":"var(--ch-4)"},"children":": ("}],["$","span","3",{"style":{"color":"var(--ch-3)"},"children":"err"}],["$","span","4",{"style":{"color":"var(--ch-4)"},"children":","}]," ",["$","span","6",{"style":{"color":"var(--ch-3)"},"children":"id"}],["$","span","7",{"style":{"color":"var(--ch-4)"},"children":","}]," ",["$","span","9",{"style":{"color":"var(--ch-3)"},"children":"context"}],["$","span","10",{"style":{"color":"var(--ch-4)"},"children":")"}]," ",["$","span","12",{"style":{"color":"var(--ch-7)"},"children":"=>"}]," ",["$","span","14",{"style":{"color":"var(--ch-4)"},"children":"{"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 8f:["$","div","21,21",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],21]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-7)"},"children":"if"}]," ",["$","span","3",{"style":{"color":"var(--ch-4)"},"children":"(context?.previousTodos) {"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 90:["$","div","22,22",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],22]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-4)"},"children":"queryClient."}],["$","span","2",{"style":{"color":"var(--ch-5)"},"children":"setQueryData"}],["$","span","3",{"style":{"color":"var(--ch-4)"},"children":"(["}],["$","span","4",{"style":{"color":"var(--ch-8)"},"children":"'query/24optimistic/todos'"}],["$","span","5",{"style":{"color":"var(--ch-4)"},"children":"], context.previousTodos)"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 91:["$","div","23,23",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],23]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-4)"},"children":"}"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 92:["$","div","24,24",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],24]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-4)"},"children":"},"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 93:["$","div","25,25",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],25]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-5)"},"children":"onSuccess"}],["$","span","2",{"style":{"color":"var(--ch-4)"},"children":": ("}],["$","span","3",{"style":{"color":"var(--ch-3)"},"children":"serverTodo"}],["$","span","4",{"style":{"color":"var(--ch-4)"},"children":","}]," ",["$","span","6",{"style":{"color":"var(--ch-3)"},"children":"variables"}],["$","span","7",{"style":{"color":"var(--ch-4)"},"children":")"}]," ",["$","span","9",{"style":{"color":"var(--ch-7)"},"children":"=>"}]," ",["$","span","11",{"style":{"color":"var(--ch-4)"},"children":"{"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 94:["$","div","26,26",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],26]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-1)"},"children":"// 使用服务器返回的数据更新，保持乐观 ID"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 95:["$","div","27,27",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],27]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-4)"},"children":"queryClient."}],["$","span","2",{"style":{"color":"var(--ch-5)"},"children":"setQueryData"}],["$","span","3",{"style":{"color":"var(--ch-4)"},"children":"(["}],["$","span","4",{"style":{"color":"var(--ch-8)"},"children":"'query/24optimistic/todos'"}],["$","span","5",{"style":{"color":"var(--ch-4)"},"children":"], ("}],["$","span","6",{"style":{"color":"var(--ch-3)"},"children":"old"}],["$","span","7",{"style":{"color":"var(--ch-7)"},"children":":"}]," ",["$","span","9",{"style":{"color":"var(--ch-3)"},"children":"Todo"}],["$","span","10",{"style":{"color":"var(--ch-4)"},"children":"[]"}]," ",["$","span","12",{"style":{"color":"var(--ch-7)"},"children":"="}]," ",["$","span","14",{"style":{"color":"var(--ch-4)"},"children":"[])"}]," ",["$","span","16",{"style":{"color":"var(--ch-7)"},"children":"=>"}]," ",["$","span","18",{"style":{"color":"var(--ch-4)"},"children":"{"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 96:["$","div","28,28",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],28]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-7)"},"children":"return"}]," ",["$","span","3",{"style":{"color":"var(--ch-4)"},"children":"old."}],["$","span","4",{"style":{"color":"var(--ch-5)"},"children":"map"}],["$","span","5",{"style":{"color":"var(--ch-4)"},"children":"("}],["$","span","6",{"style":{"color":"var(--ch-3)"},"children":"todo"}]," ",["$","span","8",{"style":{"color":"var(--ch-7)"},"children":"=>"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 97:["$","div","29,29",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],29]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-4)"},"children":"todo.id"}]," ",["$","span","3",{"style":{"color":"var(--ch-7)"},"children":"==="}]," ",["$","span","5",{"style":{"color":"var(--ch-4)"},"children":"variables"}]," ",["$","span","7",{"style":{"color":"var(--ch-7)"},"children":"?"}]," ",["$","span","9",{"style":{"color":"var(--ch-4)"},"children":"{"}]," ",["$","span","11",{"style":{"color":"var(--ch-7)"},"children":"..."}],["$","span","12",{"style":{"color":"var(--ch-4)"},"children":"serverTodo, id: variables }"}]," ",["$","span","14",{"style":{"color":"var(--ch-7)"},"children":":"}]," ",["$","span","16",{"style":{"color":"var(--ch-4)"},"children":"todo"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 98:["$","div","30,30",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],30]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-4)"},"children":")"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 99:["$","div","31,31",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],31]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-4)"},"children":"})"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 9a:["$","div","32,32",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],32]}]}],["$","div",null,{"children":[" ",["$","span","1",{"style":{"color":"var(--ch-4)"},"children":"}"}],"\n"],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] 9b:["$","div","33,33",{"style":{"borderLeft":"solid 2px transparent","borderLeftColor":"$undefined","backgroundColor":"$undefined"},"className":"flex","children":["$","div",null,{"className":"flex items-center","children":[["$","span",null,{"className":"line-number px-2 md:px-4 text-gray-400 dark:text-gray-500 select-none","children":["$","span",null,{"className":"font-din text-xs","children":[["$","span",null,{"className":"","children":""}],33]}]}],["$","div",null,{"children":[["$","span","0",{"style":{"color":"var(--ch-4)"},"children":"})"}]],"className":"px-2 flex-1 flex-1 pl-2"}]]}]}] a2:T24b2,import { useState } from 'react' import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query' import { AnimatePresence } from 'motion/react' import { Plus, Loader2, CalendarDays, ListTodo, CheckCircle2 } from 'lucide-react' import { fetchTodos, addTodo, deleteTodo, toggleTodo, Todo } from './api' import TodoItem from './todo-item' export default function TodoListOptimistic() { const [newTitle, setNewTitle] = useState('') const [optimisticIdMap, setOptimisticIdMap] = useState>(new Map()) const queryClient = useQueryClient() const { data: todos = [], isLoading } = useQuery({ queryKey: ['query/24optimistic/todos'], queryFn: fetchTodos, }) const completedCount = todos.filter((t: Todo) => t.completed).length const totalCount = todos.length // 乐观更新：添加任务 const addMutation = useMutation({ mutationFn: addTodo, onMutate: async (newTitle) => { await queryClient.cancelQueries({ queryKey: ['query/24optimistic/todos'] }) const previousTodos = queryClient.getQueryData(['query/24optimistic/todos']) const optimisticId = Math.random().toString(36).substring(7) const optimisticTodo: Todo = { id: optimisticId, title: newTitle, completed: false, createdAt: new Date().toISOString() } queryClient.setQueryData(['query/24optimistic/todos'], (old: Todo[] = []) => { return [optimisticTodo, ...old] }) return { previousTodos, optimisticId } }, onSuccess: (serverTodo, variables, context) => { // 将乐观 ID 映射到真实 ID if (context?.optimisticId) { setOptimisticIdMap(prev => new Map(prev).set(context.optimisticId, serverTodo.id)) // 使用服务器返回的数据更新，同时保持乐观 ID 以匹配缓存中的任务 queryClient.setQueryData(['query/24optimistic/todos'], (old: Todo[] = []) => { return old.map(todo => todo.id === context.optimisticId ? { ...serverTodo, id: context.optimisticId } : todo ) }) } }, onError: (err, newTitle, context) => { if (context?.previousTodos) { queryClient.setQueryData(['query/24optimistic/todos'], context.previousTodos) } }, onSettled: () => { // 移除 invalidateQueries，避免重新获取导致动画重播 } }) // 乐观更新：删除任务 const deleteMutation = useMutation({ mutationFn: async (id: string) => { // 如果是乐观 ID，找到对应的真实 ID const realId = optimisticIdMap.get(id) || id return deleteTodo(realId) }, onMutate: async (id) => { await queryClient.cancelQueries({ queryKey: ['query/24optimistic/todos'] }) const previousTodos = queryClient.getQueryData(['query/24optimistic/todos']) queryClient.setQueryData(['query/24optimistic/todos'], (old: Todo[] = []) => { return old.filter(todo => todo.id !== id) }) return { previousTodos } }, onError: (err, id, context) => { if (context?.previousTodos) { queryClient.setQueryData(['query/24optimistic/todos'], context.previousTodos) } }, onSuccess: (data, variables) => { // 从映射中删除该乐观 ID setOptimisticIdMap(prev => { const newMap = new Map(prev) newMap.delete(variables) return newMap }) }, onSettled: () => { // 移除 invalidateQueries，避免重新获取导致动画重播 } }) // 乐观更新：切换完成状态 const toggleMutation = useMutation({ mutationFn: async (id: string) => { // 如果是乐观 ID，找到对应的真实 ID const realId = optimisticIdMap.get(id) || id return toggleTodo(realId) }, onMutate: async (id) => { await queryClient.cancelQueries({ queryKey: ['query/24optimistic/todos'] }) const previousTodos = queryClient.getQueryData(['query/24optimistic/todos']) queryClient.setQueryData(['query/24optimistic/todos'], (old: Todo[] = []) => { return old.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo ) }) return { previousTodos } }, onError: (err, id, context) => { if (context?.previousTodos) { queryClient.setQueryData(['query/24optimistic/todos'], context.previousTodos) } }, onSuccess: (serverTodo, variables) => { // 使用服务器返回的数据更新，保持乐观 ID 以匹配缓存中的任务 queryClient.setQueryData(['query/24optimistic/todos'], (old: Todo[] = []) => { return old.map(todo => todo.id === variables ? { ...serverTodo, id: variables } : todo ) }) }, onSettled: () => { // 移除 invalidateQueries，避免重新获取导致动画重播 } }) const handleAdd = (e: React.FormEvent) => { e.preventDefault() if (!newTitle.trim()) return addMutation.mutate(newTitle) setNewTitle('') } return (

{/* 头部区域 */}

Tasks

乐观更新模式

{new Date().toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}

{completedCount} / {totalCount} 完成

{/* 任务列表区域 */}

{isLoading ? (

加载任务中...

) : (

{todos.map((todo: Todo) => ( toggleMutation.mutate(todo.id)} onDelete={() => deleteMutation.mutate(todo.id)} /> ))}

)} {!isLoading && todos.length === 0 && (

没有待办事项

)}

) }a3:T24b2,import { useState } from 'react' import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query' import { AnimatePresence } from 'motion/react' import { Plus, Loader2, CalendarDays, ListTodo, CheckCircle2 } from 'lucide-react' import { fetchTodos, addTodo, deleteTodo, toggleTodo, Todo } from './api' import TodoItem from './todo-item' export default function TodoListOptimistic() { const [newTitle, setNewTitle] = useState('') const [optimisticIdMap, setOptimisticIdMap] = useState>(new Map()) const queryClient = useQueryClient() const { data: todos = [], isLoading } = useQuery({ queryKey: ['query/24optimistic/todos'], queryFn: fetchTodos, }) const completedCount = todos.filter((t: Todo) => t.completed).length const totalCount = todos.length // 乐观更新：添加任务 const addMutation = useMutation({ mutationFn: addTodo, onMutate: async (newTitle) => { await queryClient.cancelQueries({ queryKey: ['query/24optimistic/todos'] }) const previousTodos = queryClient.getQueryData(['query/24optimistic/todos']) const optimisticId = Math.random().toString(36).substring(7) const optimisticTodo: Todo = { id: optimisticId, title: newTitle, completed: false, createdAt: new Date().toISOString() } queryClient.setQueryData(['query/24optimistic/todos'], (old: Todo[] = []) => { return [optimisticTodo, ...old] }) return { previousTodos, optimisticId } }, onSuccess: (serverTodo, variables, context) => { // 将乐观 ID 映射到真实 ID if (context?.optimisticId) { setOptimisticIdMap(prev => new Map(prev).set(context.optimisticId, serverTodo.id)) // 使用服务器返回的数据更新，同时保持乐观 ID 以匹配缓存中的任务 queryClient.setQueryData(['query/24optimistic/todos'], (old: Todo[] = []) => { return old.map(todo => todo.id === context.optimisticId ? { ...serverTodo, id: context.optimisticId } : todo ) }) } }, onError: (err, newTitle, context) => { if (context?.previousTodos) { queryClient.setQueryData(['query/24optimistic/todos'], context.previousTodos) } }, onSettled: () => { // 移除 invalidateQueries，避免重新获取导致动画重播 } }) // 乐观更新：删除任务 const deleteMutation = useMutation({ mutationFn: async (id: string) => { // 如果是乐观 ID，找到对应的真实 ID const realId = optimisticIdMap.get(id) || id return deleteTodo(realId) }, onMutate: async (id) => { await queryClient.cancelQueries({ queryKey: ['query/24optimistic/todos'] }) const previousTodos = queryClient.getQueryData(['query/24optimistic/todos']) queryClient.setQueryData(['query/24optimistic/todos'], (old: Todo[] = []) => { return old.filter(todo => todo.id !== id) }) return { previousTodos } }, onError: (err, id, context) => { if (context?.previousTodos) { queryClient.setQueryData(['query/24optimistic/todos'], context.previousTodos) } }, onSuccess: (data, variables) => { // 从映射中删除该乐观 ID setOptimisticIdMap(prev => { const newMap = new Map(prev) newMap.delete(variables) return newMap }) }, onSettled: () => { // 移除 invalidateQueries，避免重新获取导致动画重播 } }) // 乐观更新：切换完成状态 const toggleMutation = useMutation({ mutationFn: async (id: string) => { // 如果是乐观 ID，找到对应的真实 ID const realId = optimisticIdMap.get(id) || id return toggleTodo(realId) }, onMutate: async (id) => { await queryClient.cancelQueries({ queryKey: ['query/24optimistic/todos'] }) const previousTodos = queryClient.getQueryData(['query/24optimistic/todos']) queryClient.setQueryData(['query/24optimistic/todos'], (old: Todo[] = []) => { return old.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo ) }) return { previousTodos } }, onError: (err, id, context) => { if (context?.previousTodos) { queryClient.setQueryData(['query/24optimistic/todos'], context.previousTodos) } }, onSuccess: (serverTodo, variables) => { // 使用服务器返回的数据更新，保持乐观 ID 以匹配缓存中的任务 queryClient.setQueryData(['query/24optimistic/todos'], (old: Todo[] = []) => { return old.map(todo => todo.id === variables ? { ...serverTodo, id: variables } : todo ) }) }, onSettled: () => { // 移除 invalidateQueries，避免重新获取导致动画重播 } }) const handleAdd = (e: React.FormEvent) => { e.preventDefault() if (!newTitle.trim()) return addMutation.mutate(newTitle) setNewTitle('') } return (

{/* 头部区域 */}

Tasks

乐观更新模式

{new Date().toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}

{completedCount} / {totalCount} 完成

{/* 任务列表区域 */}

{isLoading ? (

加载任务中...

) : (

{todos.map((todo: Todo) => ( toggleMutation.mutate(todo.id)} onDelete={() => deleteMutation.mutate(todo.id)} /> ))}

)} {!isLoading && todos.length === 0 && (

没有待办事项

)}

) }a4:T74b,import { delay, uuid } from '@/utils' export interface Todo { id: string title: string completed: boolean createdAt: string } // 模拟本地存储的待办事项列表 let todos: Todo[] = [ { id: uuid(), title: '学习 React Query 基础', completed: true, createdAt: new Date().toISOString() }, { id: uuid(), title: '掌握 useQuery 的使用', completed: true, createdAt: new Date().toISOString() }, { id: uuid(), title: '学习 useMutation', completed: false, createdAt: new Date().toISOString() }, { id: uuid(), title: '理解乐观更新', completed: false, createdAt: new Date().toISOString() }, { id: uuid(), title: '实践乐观更新案例', completed: false, createdAt: new Date().toISOString() }, ] // 模拟获取待办列表 export async function fetchTodos(): Promise { const url = '/api/randomuser/api?results=1&inc=login&noinfo' await delay(300) return [...todos] } // 模拟添加待办事项 export async function addTodo(title: string): Promise { const url = '/api/randomuser/api?results=1&inc=login&noinfo' await delay(300) const newTodo: Todo = { id: uuid(), title, completed: false, createdAt: new Date().toISOString() } todos = [newTodo, ...todos] return newTodo } // 模拟删除待办事项 export async function deleteTodo(id: string): Promise<{ success: boolean; id: string }> { const url = '/api/randomuser/api?results=1&inc=login&noinfo' await delay(300) todos = todos.filter(todo => todo.id !== id) return { success: true, id } } // 模拟切换完成状态 export async function toggleTodo(id: string): Promise { const url = '/api/randomuser/api?results=1&inc=login&noinfo' await delay(300) const todo = todos.find(t => t.id === id) if (!todo) throw new Error('Todo not found') todo.completed = !todo.completed return { ...todo } } a5:T74b,import { delay, uuid } from '@/utils' export interface Todo { id: string title: string completed: boolean createdAt: string } // 模拟本地存储的待办事项列表 let todos: Todo[] = [ { id: uuid(), title: '学习 React Query 基础', completed: true, createdAt: new Date().toISOString() }, { id: uuid(), title: '掌握 useQuery 的使用', completed: true, createdAt: new Date().toISOString() }, { id: uuid(), title: '学习 useMutation', completed: false, createdAt: new Date().toISOString() }, { id: uuid(), title: '理解乐观更新', completed: false, createdAt: new Date().toISOString() }, { id: uuid(), title: '实践乐观更新案例', completed: false, createdAt: new Date().toISOString() }, ] // 模拟获取待办列表 export async function fetchTodos(): Promise { const url = '/api/randomuser/api?results=1&inc=login&noinfo' await delay(300) return [...todos] } // 模拟添加待办事项 export async function addTodo(title: string): Promise { const url = '/api/randomuser/api?results=1&inc=login&noinfo' await delay(300) const newTodo: Todo = { id: uuid(), title, completed: false, createdAt: new Date().toISOString() } todos = [newTodo, ...todos] return newTodo } // 模拟删除待办事项 export async function deleteTodo(id: string): Promise<{ success: boolean; id: string }> { const url = '/api/randomuser/api?results=1&inc=login&noinfo' await delay(300) todos = todos.filter(todo => todo.id !== id) return { success: true, id } } // 模拟切换完成状态 export async function toggleTodo(id: string): Promise { const url = '/api/randomuser/api?results=1&inc=login&noinfo' await delay(300) const todo = todos.find(t => t.id === id) if (!todo) throw new Error('Todo not found') todo.completed = !todo.completed return { ...todo } } a0:["$","$La1",null,{"highlighteds":[{"meta":"index.tsx -c","value":"$a2","lang":"tsx","code":"$a3","tokens":[["import","var(--ch-7)"]," ",["{ useState }","var(--ch-4)"]," ",["from","var(--ch-7)"]," ",["'react'","var(--ch-8)"],"\n",["import","var(--ch-7)"]," ",["{ useQuery, useMutation, useQueryClient }","var(--ch-4)"]," ",["from","var(--ch-7)"]," ",["'@tanstack/react-query'","var(--ch-8)"],"\n",["import","var(--ch-7)"]," ",["{ AnimatePresence }","var(--ch-4)"]," ",["from","var(--ch-7)"]," ",["'motion/react'","var(--ch-8)"],"\n",["import","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["Plus,","var(--ch-4)"],"\n ",["Loader2,","var(--ch-4)"],"\n ",["CalendarDays,","var(--ch-4)"],"\n ",["ListTodo,","var(--ch-4)"],"\n ",["CheckCircle2","var(--ch-4)"],"\n",["}","var(--ch-4)"]," ",["from","var(--ch-7)"]," ",["'lucide-react'","var(--ch-8)"],"\n",["import","var(--ch-7)"]," ",["{ fetchTodos, addTodo, deleteTodo, toggleTodo, Todo }","var(--ch-4)"]," ",["from","var(--ch-7)"]," ",["'./api'","var(--ch-8)"],"\n",["import","var(--ch-7)"]," ",["TodoItem","var(--ch-4)"]," ",["from","var(--ch-7)"]," ",["'./todo-item'","var(--ch-8)"],"\n\n",["export default function","var(--ch-7)"]," ",["TodoListOptimistic","var(--ch-5)"],["()","var(--ch-3)"]," ",["{","var(--ch-4)"],"\n ",["const","var(--ch-7)"]," ",["[","var(--ch-4)"],["newTitle","var(--ch-2)"],[",","var(--ch-4)"]," ",["setNewTitle","var(--ch-2)"],["]","var(--ch-4)"]," ",["=","var(--ch-7)"]," ",["useState","var(--ch-5)"],["(","var(--ch-4)"],["''","var(--ch-8)"],[")","var(--ch-4)"],"\n ",["const","var(--ch-7)"]," ",["[","var(--ch-4)"],["optimisticIdMap","var(--ch-2)"],[",","var(--ch-4)"]," ",["setOptimisticIdMap","var(--ch-2)"],["]","var(--ch-4)"]," ",["=","var(--ch-7)"]," ",["useState","var(--ch-5)"],["<","var(--ch-4)"],["Map","var(--ch-3)"],["<","var(--ch-4)"],["string","var(--ch-2)"],[",","var(--ch-4)"]," ",["string","var(--ch-2)"],[">>(","var(--ch-4)"],["new","var(--ch-7)"]," ",["Map","var(--ch-5)"],["())","var(--ch-4)"],"\n ",["const","var(--ch-7)"]," ",["queryClient","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["useQueryClient","var(--ch-5)"],["()","var(--ch-4)"],"\n\n ",["const","var(--ch-7)"]," ",["{","var(--ch-4)"]," ",["data","var(--ch-3)"],[":","var(--ch-4)"]," ",["todos","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["[],","var(--ch-4)"]," ",["isLoading","var(--ch-2)"]," ",["}","var(--ch-4)"]," ",["=","var(--ch-7)"]," ",["useQuery","var(--ch-5)"],["({","var(--ch-4)"],"\n ",["queryKey: [","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["],","var(--ch-4)"],"\n ",["queryFn: fetchTodos,","var(--ch-4)"],"\n ",["})","var(--ch-4)"],"\n\n ",["const","var(--ch-7)"]," ",["completedCount","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["todos.","var(--ch-4)"],["filter","var(--ch-5)"],["((","var(--ch-4)"],["t","var(--ch-3)"],[":","var(--ch-7)"]," ",["Todo","var(--ch-3)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["t.completed).","var(--ch-4)"],["length","var(--ch-2)"],"\n ",["const","var(--ch-7)"]," ",["totalCount","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["todos.","var(--ch-4)"],["length","var(--ch-2)"],"\n\n ",["// 乐观更新：添加任务","var(--ch-1)"],"\n ",["const","var(--ch-7)"]," ",["addMutation","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["useMutation","var(--ch-5)"],["({","var(--ch-4)"],"\n ",["mutationFn: addTodo,","var(--ch-4)"],"\n ",["onMutate","var(--ch-5)"],[":","var(--ch-4)"]," ",["async","var(--ch-7)"]," ",["(","var(--ch-4)"],["newTitle","var(--ch-3)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["await","var(--ch-7)"]," ",["queryClient.","var(--ch-4)"],["cancelQueries","var(--ch-5)"],["({ queryKey: [","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["] })","var(--ch-4)"],"\n ",["const","var(--ch-7)"]," ",["previousTodos","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["queryClient.","var(--ch-4)"],["getQueryData","var(--ch-5)"],["<","var(--ch-4)"],["Todo","var(--ch-3)"],["[]>([","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["])","var(--ch-4)"],"\n\n ",["const","var(--ch-7)"]," ",["optimisticId","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["Math.","var(--ch-4)"],["random","var(--ch-5)"],["().","var(--ch-4)"],["toString","var(--ch-5)"],["(","var(--ch-4)"],["36","var(--ch-2)"],[").","var(--ch-4)"],["substring","var(--ch-5)"],["(","var(--ch-4)"],["7","var(--ch-2)"],[")","var(--ch-4)"],"\n\n ",["const","var(--ch-7)"]," ",["optimisticTodo","var(--ch-2)"],[":","var(--ch-7)"]," ",["Todo","var(--ch-3)"]," ",["=","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["id: optimisticId,","var(--ch-4)"],"\n ",["title: newTitle,","var(--ch-4)"],"\n ",["completed:","var(--ch-4)"]," ",["false","var(--ch-2)"],[",","var(--ch-4)"],"\n ",["createdAt:","var(--ch-4)"]," ",["new","var(--ch-7)"]," ",["Date","var(--ch-5)"],["().","var(--ch-4)"],["toISOString","var(--ch-5)"],["()","var(--ch-4)"],"\n ",["}","var(--ch-4)"],"\n\n ",["queryClient.","var(--ch-4)"],["setQueryData","var(--ch-5)"],["([","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["], (","var(--ch-4)"],["old","var(--ch-3)"],[":","var(--ch-7)"]," ",["Todo","var(--ch-3)"],["[]","var(--ch-4)"]," ",["=","var(--ch-7)"]," ",["[])","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["return","var(--ch-7)"]," ",["[optimisticTodo,","var(--ch-4)"]," ",["...","var(--ch-7)"],["old]","var(--ch-4)"],"\n ",["})","var(--ch-4)"],"\n\n ",["return","var(--ch-7)"]," ",["{ previousTodos, optimisticId }","var(--ch-4)"],"\n ",["},","var(--ch-4)"],"\n ",["onSuccess","var(--ch-5)"],[": (","var(--ch-4)"],["serverTodo","var(--ch-3)"],[",","var(--ch-4)"]," ",["variables","var(--ch-3)"],[",","var(--ch-4)"]," ",["context","var(--ch-3)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["// 将乐观 ID 映射到真实 ID","var(--ch-1)"],"\n ",["if","var(--ch-7)"]," ",["(context?.optimisticId) {","var(--ch-4)"],"\n ",["setOptimisticIdMap","var(--ch-5)"],["(","var(--ch-4)"],["prev","var(--ch-3)"]," ",["=> new","var(--ch-7)"]," ",["Map","var(--ch-5)"],["(prev).","var(--ch-4)"],["set","var(--ch-5)"],["(context.optimisticId, serverTodo.id))","var(--ch-4)"],"\n\n ",["// 使用服务器返回的数据更新，同时保持乐观 ID 以匹配缓存中的任务","var(--ch-1)"],"\n ",["queryClient.","var(--ch-4)"],["setQueryData","var(--ch-5)"],["([","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["], (","var(--ch-4)"],["old","var(--ch-3)"],[":","var(--ch-7)"]," ",["Todo","var(--ch-3)"],["[]","var(--ch-4)"]," ",["=","var(--ch-7)"]," ",["[])","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["return","var(--ch-7)"]," ",["old.","var(--ch-4)"],["map","var(--ch-5)"],["(","var(--ch-4)"],["todo","var(--ch-3)"]," ",["=>","var(--ch-7)"],"\n ",["todo.id","var(--ch-4)"]," ",["===","var(--ch-7)"]," ",["context.optimisticId","var(--ch-4)"],"\n ",["?","var(--ch-7)"]," ",["{","var(--ch-4)"]," ",["...","var(--ch-7)"],["serverTodo, id: context.optimisticId }","var(--ch-4)"],"\n ",[":","var(--ch-7)"]," ",["todo","var(--ch-4)"],"\n ",[")","var(--ch-4)"],"\n ",["})","var(--ch-4)"],"\n ",["}","var(--ch-4)"],"\n ",["},","var(--ch-4)"],"\n ",["onError","var(--ch-5)"],[": (","var(--ch-4)"],["err","var(--ch-3)"],[",","var(--ch-4)"]," ",["newTitle","var(--ch-3)"],[",","var(--ch-4)"]," ",["context","var(--ch-3)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["if","var(--ch-7)"]," ",["(context?.previousTodos) {","var(--ch-4)"],"\n ",["queryClient.","var(--ch-4)"],["setQueryData","var(--ch-5)"],["([","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["], context.previousTodos)","var(--ch-4)"],"\n ",["}","var(--ch-4)"],"\n ",["},","var(--ch-4)"],"\n ",["onSettled","var(--ch-5)"],[": ()","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["// 移除 invalidateQueries，避免重新获取导致动画重播","var(--ch-1)"],"\n ",["}","var(--ch-4)"],"\n ",["})","var(--ch-4)"],"\n\n ",["// 乐观更新：删除任务","var(--ch-1)"],"\n ",["const","var(--ch-7)"]," ",["deleteMutation","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["useMutation","var(--ch-5)"],["({","var(--ch-4)"],"\n ",["mutationFn","var(--ch-5)"],[":","var(--ch-4)"]," ",["async","var(--ch-7)"]," ",["(","var(--ch-4)"],["id","var(--ch-3)"],[":","var(--ch-7)"]," ",["string","var(--ch-2)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["// 如果是乐观 ID，找到对应的真实 ID","var(--ch-1)"],"\n ",["const","var(--ch-7)"]," ",["realId","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["optimisticIdMap.","var(--ch-4)"],["get","var(--ch-5)"],["(id)","var(--ch-4)"]," ",["||","var(--ch-7)"]," ",["id","var(--ch-4)"],"\n ",["return","var(--ch-7)"]," ",["deleteTodo","var(--ch-5)"],["(realId)","var(--ch-4)"],"\n ",["},","var(--ch-4)"],"\n ",["onMutate","var(--ch-5)"],[":","var(--ch-4)"]," ",["async","var(--ch-7)"]," ",["(","var(--ch-4)"],["id","var(--ch-3)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["await","var(--ch-7)"]," ",["queryClient.","var(--ch-4)"],["cancelQueries","var(--ch-5)"],["({ queryKey: [","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["] })","var(--ch-4)"],"\n ",["const","var(--ch-7)"]," ",["previousTodos","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["queryClient.","var(--ch-4)"],["getQueryData","var(--ch-5)"],["<","var(--ch-4)"],["Todo","var(--ch-3)"],["[]>([","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["])","var(--ch-4)"],"\n\n ",["queryClient.","var(--ch-4)"],["setQueryData","var(--ch-5)"],["([","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["], (","var(--ch-4)"],["old","var(--ch-3)"],[":","var(--ch-7)"]," ",["Todo","var(--ch-3)"],["[]","var(--ch-4)"]," ",["=","var(--ch-7)"]," ",["[])","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["return","var(--ch-7)"]," ",["old.","var(--ch-4)"],["filter","var(--ch-5)"],["(","var(--ch-4)"],["todo","var(--ch-3)"]," ",["=>","var(--ch-7)"]," ",["todo.id","var(--ch-4)"]," ",["!==","var(--ch-7)"]," ",["id)","var(--ch-4)"],"\n ",["})","var(--ch-4)"],"\n\n ",["return","var(--ch-7)"]," ",["{ previousTodos }","var(--ch-4)"],"\n ",["},","var(--ch-4)"],"\n ",["onError","var(--ch-5)"],[": (","var(--ch-4)"],["err","var(--ch-3)"],[",","var(--ch-4)"]," ",["id","var(--ch-3)"],[",","var(--ch-4)"]," ",["context","var(--ch-3)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["if","var(--ch-7)"]," ",["(context?.previousTodos) {","var(--ch-4)"],"\n ",["queryClient.","var(--ch-4)"],["setQueryData","var(--ch-5)"],["([","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["], context.previousTodos)","var(--ch-4)"],"\n ",["}","var(--ch-4)"],"\n ",["},","var(--ch-4)"],"\n ",["onSuccess","var(--ch-5)"],[": (","var(--ch-4)"],["data","var(--ch-3)"],[",","var(--ch-4)"]," ",["variables","var(--ch-3)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["// 从映射中删除该乐观 ID","var(--ch-1)"],"\n ",["setOptimisticIdMap","var(--ch-5)"],["(","var(--ch-4)"],["prev","var(--ch-3)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["const","var(--ch-7)"]," ",["newMap","var(--ch-2)"]," ",["= new","var(--ch-7)"]," ",["Map","var(--ch-5)"],["(prev)","var(--ch-4)"],"\n ",["newMap.","var(--ch-4)"],["delete","var(--ch-5)"],["(variables)","var(--ch-4)"],"\n ",["return","var(--ch-7)"]," ",["newMap","var(--ch-4)"],"\n ",["})","var(--ch-4)"],"\n ",["},","var(--ch-4)"],"\n ",["onSettled","var(--ch-5)"],[": ()","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["// 移除 invalidateQueries，避免重新获取导致动画重播","var(--ch-1)"],"\n ",["}","var(--ch-4)"],"\n ",["})","var(--ch-4)"],"\n\n ",["// 乐观更新：切换完成状态","var(--ch-1)"],"\n ",["const","var(--ch-7)"]," ",["toggleMutation","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["useMutation","var(--ch-5)"],["({","var(--ch-4)"],"\n ",["mutationFn","var(--ch-5)"],[":","var(--ch-4)"]," ",["async","var(--ch-7)"]," ",["(","var(--ch-4)"],["id","var(--ch-3)"],[":","var(--ch-7)"]," ",["string","var(--ch-2)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["// 如果是乐观 ID，找到对应的真实 ID","var(--ch-1)"],"\n ",["const","var(--ch-7)"]," ",["realId","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["optimisticIdMap.","var(--ch-4)"],["get","var(--ch-5)"],["(id)","var(--ch-4)"]," ",["||","var(--ch-7)"]," ",["id","var(--ch-4)"],"\n ",["return","var(--ch-7)"]," ",["toggleTodo","var(--ch-5)"],["(realId)","var(--ch-4)"],"\n ",["},","var(--ch-4)"],"\n ",["onMutate","var(--ch-5)"],[":","var(--ch-4)"]," ",["async","var(--ch-7)"]," ",["(","var(--ch-4)"],["id","var(--ch-3)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["await","var(--ch-7)"]," ",["queryClient.","var(--ch-4)"],["cancelQueries","var(--ch-5)"],["({ queryKey: [","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["] })","var(--ch-4)"],"\n ",["const","var(--ch-7)"]," ",["previousTodos","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["queryClient.","var(--ch-4)"],["getQueryData","var(--ch-5)"],["<","var(--ch-4)"],["Todo","var(--ch-3)"],["[]>([","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["])","var(--ch-4)"],"\n\n ",["queryClient.","var(--ch-4)"],["setQueryData","var(--ch-5)"],["([","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["], (","var(--ch-4)"],["old","var(--ch-3)"],[":","var(--ch-7)"]," ",["Todo","var(--ch-3)"],["[]","var(--ch-4)"]," ",["=","var(--ch-7)"]," ",["[])","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["return","var(--ch-7)"]," ",["old.","var(--ch-4)"],["map","var(--ch-5)"],["(","var(--ch-4)"],["todo","var(--ch-3)"]," ",["=>","var(--ch-7)"],"\n ",["todo.id","var(--ch-4)"]," ",["===","var(--ch-7)"]," ",["id","var(--ch-4)"]," ",["?","var(--ch-7)"]," ",["{","var(--ch-4)"]," ",["...","var(--ch-7)"],["todo, completed:","var(--ch-4)"]," ",["!","var(--ch-7)"],["todo.completed }","var(--ch-4)"]," ",[":","var(--ch-7)"]," ",["todo","var(--ch-4)"],"\n ",[")","var(--ch-4)"],"\n ",["})","var(--ch-4)"],"\n\n ",["return","var(--ch-7)"]," ",["{ previousTodos }","var(--ch-4)"],"\n ",["},","var(--ch-4)"],"\n ",["onError","var(--ch-5)"],[": (","var(--ch-4)"],["err","var(--ch-3)"],[",","var(--ch-4)"]," ",["id","var(--ch-3)"],[",","var(--ch-4)"]," ",["context","var(--ch-3)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["if","var(--ch-7)"]," ",["(context?.previousTodos) {","var(--ch-4)"],"\n ",["queryClient.","var(--ch-4)"],["setQueryData","var(--ch-5)"],["([","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["], context.previousTodos)","var(--ch-4)"],"\n ",["}","var(--ch-4)"],"\n ",["},","var(--ch-4)"],"\n ",["onSuccess","var(--ch-5)"],[": (","var(--ch-4)"],["serverTodo","var(--ch-3)"],[",","var(--ch-4)"]," ",["variables","var(--ch-3)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["// 使用服务器返回的数据更新，保持乐观 ID 以匹配缓存中的任务","var(--ch-1)"],"\n ",["queryClient.","var(--ch-4)"],["setQueryData","var(--ch-5)"],["([","var(--ch-4)"],["'query/24optimistic/todos'","var(--ch-8)"],["], (","var(--ch-4)"],["old","var(--ch-3)"],[":","var(--ch-7)"]," ",["Todo","var(--ch-3)"],["[]","var(--ch-4)"]," ",["=","var(--ch-7)"]," ",["[])","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["return","var(--ch-7)"]," ",["old.","var(--ch-4)"],["map","var(--ch-5)"],["(","var(--ch-4)"],["todo","var(--ch-3)"]," ",["=>","var(--ch-7)"],"\n ",["todo.id","var(--ch-4)"]," ",["===","var(--ch-7)"]," ",["variables","var(--ch-4)"]," ",["?","var(--ch-7)"]," ",["{","var(--ch-4)"]," ",["...","var(--ch-7)"],["serverTodo, id: variables }","var(--ch-4)"]," ",[":","var(--ch-7)"]," ",["todo","var(--ch-4)"],"\n ",[")","var(--ch-4)"],"\n ",["})","var(--ch-4)"],"\n ",["},","var(--ch-4)"],"\n ",["onSettled","var(--ch-5)"],[": ()","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["// 移除 invalidateQueries，避免重新获取导致动画重播","var(--ch-1)"],"\n ",["}","var(--ch-4)"],"\n ",["})","var(--ch-4)"],"\n\n ",["const","var(--ch-7)"]," ",["handleAdd","var(--ch-5)"]," ",["=","var(--ch-7)"]," ",["(","var(--ch-4)"],["e","var(--ch-3)"],[":","var(--ch-7)"]," ",["React","var(--ch-3)"],[".","var(--ch-4)"],["FormEvent","var(--ch-3)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["e.","var(--ch-4)"],["preventDefault","var(--ch-5)"],["()","var(--ch-4)"],"\n ",["if","var(--ch-7)"]," ",["(","var(--ch-4)"],["!","var(--ch-7)"],["newTitle.","var(--ch-4)"],["trim","var(--ch-5)"],["())","var(--ch-4)"]," ",["return","var(--ch-7)"],"\n ",["addMutation.","var(--ch-4)"],["mutate","var(--ch-5)"],["(newTitle)","var(--ch-4)"],"\n ",["setNewTitle","var(--ch-5)"],["(","var(--ch-4)"],["''","var(--ch-8)"],[")","var(--ch-4)"],"\n ",["}","var(--ch-4)"],"\n\n ",["return","var(--ch-7)"]," ",["(","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"flex items-center justify-center p-4\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"w-full max-w-md dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 overflow-hidden flex flex-col h-150\"","var(--ch-8)"],[">","var(--ch-4)"],"\n\n ",["{","var(--ch-7)"],["/* 头部区域 */","var(--ch-1)"],["}","var(--ch-7)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"px-6 pt-6 pb-4 bg-white dark:bg-zinc-900 z-10 border-b border-zinc-50 dark:border-zinc-800/50\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"flex justify-between items-start mb-4\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"],[">","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"text-2xl font-bold text-zinc-900 dark:text-zinc-100 tracking-tight flex items-center gap-2\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["span","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"p-1.5 bg-emerald-50 dark:bg-emerald-900/30 rounded-lg text-emerald-600 dark:text-emerald-400\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["ListTodo","var(--ch-6)"]," ",["size","var(--ch-2)"],["={","var(--ch-7)"],["20","var(--ch-2)"],["}","var(--ch-7)"]," ",["/>","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n ",["Tasks","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"text-sm text-zinc-500 dark:text-zinc-400 mt-1 pl-1 flex items-center gap-1\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["CheckCircle2","var(--ch-6)"]," ",["size","var(--ch-2)"],["={","var(--ch-7)"],["12","var(--ch-2)"],["}","var(--ch-7)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"text-emerald-500\"","var(--ch-8)"]," ",["/>","var(--ch-4)"],"\n ",["乐观更新模式","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"text-right\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"text-xs font-semibold uppercase tracking-wider text-zinc-400\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["{new","var(--ch-7)"]," ",["Date","var(--ch-5)"],["().","var(--ch-4)"],["toLocaleDateString","var(--ch-5)"],["(","var(--ch-4)"],["'en-US'","var(--ch-8)"],[", { weekday:","var(--ch-4)"]," ",["'short'","var(--ch-8)"],[", month:","var(--ch-4)"]," ",["'short'","var(--ch-8)"],[", day:","var(--ch-4)"]," ",["'numeric'","var(--ch-8)"]," ",["})","var(--ch-4)"],["}","var(--ch-7)"],"\n ",["","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"text-xs font-medium text-zinc-500 mt-1 bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded-full inline-block\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["{","var(--ch-7)"],["completedCount","var(--ch-4)"],["}","var(--ch-7)"]," ",["/","var(--ch-4)"]," ",["{","var(--ch-7)"],["totalCount","var(--ch-4)"],["}","var(--ch-7)"]," ",["完成","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n\n ",["<","var(--ch-4)"],["form","var(--ch-6)"]," ",["onSubmit","var(--ch-2)"],["={","var(--ch-7)"],["handleAdd","var(--ch-4)"],["}","var(--ch-7)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"relative group mt-4\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["input","var(--ch-6)"],"\n ",["type","var(--ch-2)"],["=","var(--ch-7)"],["\"text\"","var(--ch-8)"],"\n ",["value","var(--ch-2)"],["={","var(--ch-7)"],["newTitle","var(--ch-4)"],["}","var(--ch-7)"],"\n ",["onChange","var(--ch-2)"],["={","var(--ch-7)"],["(","var(--ch-4)"],["e","var(--ch-3)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["setNewTitle","var(--ch-5)"],["(e.target.value)","var(--ch-4)"],["}","var(--ch-7)"],"\n ",["placeholder","var(--ch-2)"],["=","var(--ch-7)"],["\"添加新任务...\"","var(--ch-8)"],"\n ",["disabled","var(--ch-2)"],["={","var(--ch-7)"],["addMutation.isPending","var(--ch-4)"],["}","var(--ch-7)"],"\n ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"w-full pl-4 pr-12 py-3 bg-zinc-50 dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700 text-sm outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all placeholder:text-zinc-400 text-zinc-800 dark:text-zinc-200\"","var(--ch-8)"],"\n ",["/>","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["button","var(--ch-6)"],"\n ",["type","var(--ch-2)"],["=","var(--ch-7)"],["\"submit\"","var(--ch-8)"],"\n ",["disabled","var(--ch-2)"],["={","var(--ch-7)"],["addMutation.isPending","var(--ch-4)"]," ",["|| !","var(--ch-7)"],["newTitle.","var(--ch-4)"],["trim","var(--ch-5)"],["()","var(--ch-4)"],["}","var(--ch-7)"],"\n ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"absolute right-1 top-1/2 -translate-y-1/2 p-1.5 bg-white dark:bg-zinc-700 text-emerald-600 dark:text-emerald-400 opacity-0 group-focus-within:opacity-100 transition-all disabled:opacity-50 disabled:cursor-not-allowed hover:bg-emerald-50 dark:hover:bg-zinc-600 shadow-xs border border-zinc-100 dark:border-zinc-600\"","var(--ch-8)"],"\n ",[">","var(--ch-4)"],"\n ",["{","var(--ch-7)"],["addMutation.isPending","var(--ch-4)"]," ",["?","var(--ch-7)"]," ",["<","var(--ch-4)"],["Loader2","var(--ch-6)"]," ",["size","var(--ch-2)"],["={","var(--ch-7)"],["16","var(--ch-2)"],["}","var(--ch-7)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"animate-spin\"","var(--ch-8)"]," ",["/>","var(--ch-4)"]," ",[":","var(--ch-7)"]," ",["<","var(--ch-4)"],["Plus","var(--ch-6)"]," ",["size","var(--ch-2)"],["={","var(--ch-7)"],["16","var(--ch-2)"],["}","var(--ch-7)"]," ",["/>","var(--ch-4)"],["}","var(--ch-7)"],"\n ",["","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n\n ",["{","var(--ch-7)"],["/* 任务列表区域 */","var(--ch-1)"],["}","var(--ch-7)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"flex-1 overflow-y-auto px-6 py-6 scrollbar-thin scrollbar-thumb-zinc-200 dark:scrollbar-thumb-zinc-700\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["{","var(--ch-7)"],["isLoading","var(--ch-4)"]," ",["?","var(--ch-7)"]," ",["(","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"flex flex-col items-center justify-center h-full space-y-3 opacity-50\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["Loader2","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"w-8 h-8 text-zinc-400 animate-spin\"","var(--ch-8)"]," ",["/>","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["p","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"text-sm text-zinc-400\"","var(--ch-8)"],[">加载任务中...","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n ",[")","var(--ch-4)"]," ",[":","var(--ch-7)"]," ",["(","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"flex flex-col\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["AnimatePresence","var(--ch-6)"]," ",["mode","var(--ch-2)"],["=","var(--ch-7)"],["\"popLayout\"","var(--ch-8)"]," ",["initial","var(--ch-2)"],["={","var(--ch-7)"],["false","var(--ch-2)"],["}","var(--ch-7)"],[">","var(--ch-4)"],"\n ",["{","var(--ch-7)"],["todos.","var(--ch-4)"],["map","var(--ch-5)"],["((","var(--ch-4)"],["todo","var(--ch-3)"],[":","var(--ch-7)"]," ",["Todo","var(--ch-3)"],[")","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["(","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["TodoItem","var(--ch-6)"],"\n ",["key","var(--ch-2)"],["={","var(--ch-7)"],["todo.id","var(--ch-4)"],["}","var(--ch-7)"],"\n ",["todo","var(--ch-2)"],["={","var(--ch-7)"],["todo","var(--ch-4)"],["}","var(--ch-7)"],"\n ",["onToggle","var(--ch-2)"],["={","var(--ch-7)"],["()","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["toggleMutation.","var(--ch-4)"],["mutate","var(--ch-5)"],["(todo.id)","var(--ch-4)"],["}","var(--ch-7)"],"\n ",["onDelete","var(--ch-2)"],["={","var(--ch-7)"],["()","var(--ch-4)"]," ",["=>","var(--ch-7)"]," ",["deleteMutation.","var(--ch-4)"],["mutate","var(--ch-5)"],["(todo.id)","var(--ch-4)"],["}","var(--ch-7)"],"\n ",["/>","var(--ch-4)"],"\n ",["))","var(--ch-4)"],["}","var(--ch-7)"],"\n ",["","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n ",[")","var(--ch-4)"],["}","var(--ch-7)"],"\n\n ",["{!","var(--ch-7)"],["isLoading","var(--ch-4)"]," ",["&&","var(--ch-7)"]," ",["todos.","var(--ch-4)"],["length","var(--ch-2)"]," ",["===","var(--ch-7)"]," ",["0","var(--ch-2)"]," ",["&&","var(--ch-7)"]," ",["(","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"flex flex-col items-center justify-center h-full text-center space-y-4\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["div","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"w-16 h-16 bg-zinc-50 dark:bg-zinc-800/50 rounded-full flex items-center justify-center text-zinc-300 dark:text-zinc-600\"","var(--ch-8)"],[">","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["CalendarDays","var(--ch-6)"]," ",["size","var(--ch-2)"],["={","var(--ch-7)"],["32","var(--ch-2)"],["}","var(--ch-7)"]," ",["/>","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n ",["<","var(--ch-4)"],["p","var(--ch-6)"]," ",["className","var(--ch-2)"],["=","var(--ch-7)"],["\"text-zinc-600 dark:text-zinc-300 font-medium\"","var(--ch-8)"],[">没有待办事项","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n ",[")","var(--ch-4)"],["}","var(--ch-7)"],"\n ",["","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n ",["","var(--ch-4)"],"\n ",[")","var(--ch-4)"],"\n",["}","var(--ch-4)"]],"annotations":[],"themeName":"github-from-css","style":{"color":"var(--ch-4)","background":"var(--ch-16)","colorScheme":"var(--ch-0)"}},{"meta":"api.ts -c","value":"$a4","lang":"tsx","code":"$a5","tokens":[["import","var(--ch-7)"]," ",["{ delay, uuid }","var(--ch-4)"]," ",["from","var(--ch-7)"]," ",["'@/utils'","var(--ch-8)"],"\n\n",["export interface","var(--ch-7)"]," ",["Todo","var(--ch-3)"]," ",["{","var(--ch-4)"],"\n ",["id","var(--ch-3)"],[":","var(--ch-7)"]," ",["string","var(--ch-2)"],"\n ",["title","var(--ch-3)"],[":","var(--ch-7)"]," ",["string","var(--ch-2)"],"\n ",["completed","var(--ch-3)"],[":","var(--ch-7)"]," ",["boolean","var(--ch-2)"],"\n ",["createdAt","var(--ch-3)"],[":","var(--ch-7)"]," ",["string","var(--ch-2)"],"\n",["}","var(--ch-4)"],"\n\n",["// 模拟本地存储的待办事项列表","var(--ch-1)"],"\n",["let","var(--ch-7)"]," ",["todos","var(--ch-4)"],[":","var(--ch-7)"]," ",["Todo","var(--ch-3)"],["[]","var(--ch-4)"]," ",["=","var(--ch-7)"]," ",["[","var(--ch-4)"],"\n ",["{ id:","var(--ch-4)"]," ",["uuid","var(--ch-5)"],["(), title:","var(--ch-4)"]," ",["'学习 React Query 基础'","var(--ch-8)"],[", completed:","var(--ch-4)"]," ",["true","var(--ch-2)"],[", createdAt:","var(--ch-4)"]," ",["new","var(--ch-7)"]," ",["Date","var(--ch-5)"],["().","var(--ch-4)"],["toISOString","var(--ch-5)"],["() },","var(--ch-4)"],"\n ",["{ id:","var(--ch-4)"]," ",["uuid","var(--ch-5)"],["(), title:","var(--ch-4)"]," ",["'掌握 useQuery 的使用'","var(--ch-8)"],[", completed:","var(--ch-4)"]," ",["true","var(--ch-2)"],[", createdAt:","var(--ch-4)"]," ",["new","var(--ch-7)"]," ",["Date","var(--ch-5)"],["().","var(--ch-4)"],["toISOString","var(--ch-5)"],["() },","var(--ch-4)"],"\n ",["{ id:","var(--ch-4)"]," ",["uuid","var(--ch-5)"],["(), title:","var(--ch-4)"]," ",["'学习 useMutation'","var(--ch-8)"],[", completed:","var(--ch-4)"]," ",["false","var(--ch-2)"],[", createdAt:","var(--ch-4)"]," ",["new","var(--ch-7)"]," ",["Date","var(--ch-5)"],["().","var(--ch-4)"],["toISOString","var(--ch-5)"],["() },","var(--ch-4)"],"\n ",["{ id:","var(--ch-4)"]," ",["uuid","var(--ch-5)"],["(), title:","var(--ch-4)"]," ",["'理解乐观更新'","var(--ch-8)"],[", completed:","var(--ch-4)"]," ",["false","var(--ch-2)"],[", createdAt:","var(--ch-4)"]," ",["new","var(--ch-7)"]," ",["Date","var(--ch-5)"],["().","var(--ch-4)"],["toISOString","var(--ch-5)"],["() },","var(--ch-4)"],"\n ",["{ id:","var(--ch-4)"]," ",["uuid","var(--ch-5)"],["(), title:","var(--ch-4)"]," ",["'实践乐观更新案例'","var(--ch-8)"],[", completed:","var(--ch-4)"]," ",["false","var(--ch-2)"],[", createdAt:","var(--ch-4)"]," ",["new","var(--ch-7)"]," ",["Date","var(--ch-5)"],["().","var(--ch-4)"],["toISOString","var(--ch-5)"],["() },","var(--ch-4)"],"\n",["]","var(--ch-4)"],"\n\n",["// 模拟获取待办列表","var(--ch-1)"],"\n",["export async function","var(--ch-7)"]," ",["fetchTodos","var(--ch-5)"],["()","var(--ch-4)"],[":","var(--ch-7)"]," ",["Promise","var(--ch-3)"],["<","var(--ch-4)"],["Todo","var(--ch-3)"],["[]> {","var(--ch-4)"],"\n ",["const","var(--ch-7)"]," ",["url","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["'/api/randomuser/api?results=1&inc=login&noinfo'","var(--ch-8)"],"\n ",["await","var(--ch-7)"]," ",["delay","var(--ch-5)"],["(","var(--ch-4)"],["300","var(--ch-2)"],[")","var(--ch-4)"],"\n ",["return","var(--ch-7)"]," ",["[","var(--ch-4)"],["...","var(--ch-7)"],["todos]","var(--ch-4)"],"\n",["}","var(--ch-4)"],"\n\n",["// 模拟添加待办事项","var(--ch-1)"],"\n",["export async function","var(--ch-7)"]," ",["addTodo","var(--ch-5)"],["(","var(--ch-4)"],["title","var(--ch-3)"],[":","var(--ch-7)"]," ",["string","var(--ch-2)"],[")","var(--ch-4)"],[":","var(--ch-7)"]," ",["Promise","var(--ch-3)"],["<","var(--ch-4)"],["Todo","var(--ch-3)"],["> {","var(--ch-4)"],"\n ",["const","var(--ch-7)"]," ",["url","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["'/api/randomuser/api?results=1&inc=login&noinfo'","var(--ch-8)"],"\n ",["await","var(--ch-7)"]," ",["delay","var(--ch-5)"],["(","var(--ch-4)"],["300","var(--ch-2)"],[")","var(--ch-4)"],"\n\n ",["const","var(--ch-7)"]," ",["newTodo","var(--ch-2)"],[":","var(--ch-7)"]," ",["Todo","var(--ch-3)"]," ",["=","var(--ch-7)"]," ",["{","var(--ch-4)"],"\n ",["id:","var(--ch-4)"]," ",["uuid","var(--ch-5)"],["(),","var(--ch-4)"],"\n ",["title,","var(--ch-4)"],"\n ",["completed:","var(--ch-4)"]," ",["false","var(--ch-2)"],[",","var(--ch-4)"],"\n ",["createdAt:","var(--ch-4)"]," ",["new","var(--ch-7)"]," ",["Date","var(--ch-5)"],["().","var(--ch-4)"],["toISOString","var(--ch-5)"],["()","var(--ch-4)"],"\n ",["}","var(--ch-4)"],"\n ",["todos","var(--ch-4)"]," ",["=","var(--ch-7)"]," ",["[newTodo,","var(--ch-4)"]," ",["...","var(--ch-7)"],["todos]","var(--ch-4)"],"\n ",["return","var(--ch-7)"]," ",["newTodo","var(--ch-4)"],"\n",["}","var(--ch-4)"],"\n\n",["// 模拟删除待办事项","var(--ch-1)"],"\n",["export async function","var(--ch-7)"]," ",["deleteTodo","var(--ch-5)"],["(","var(--ch-4)"],["id","var(--ch-3)"],[":","var(--ch-7)"]," ",["string","var(--ch-2)"],[")","var(--ch-4)"],[":","var(--ch-7)"]," ",["Promise","var(--ch-3)"],["<{","var(--ch-4)"]," ",["success","var(--ch-3)"],[":","var(--ch-7)"]," ",["boolean","var(--ch-2)"],[";","var(--ch-4)"]," ",["id","var(--ch-3)"],[":","var(--ch-7)"]," ",["string","var(--ch-2)"]," ",["}> {","var(--ch-4)"],"\n ",["const","var(--ch-7)"]," ",["url","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["'/api/randomuser/api?results=1&inc=login&noinfo'","var(--ch-8)"],"\n ",["await","var(--ch-7)"]," ",["delay","var(--ch-5)"],["(","var(--ch-4)"],["300","var(--ch-2)"],[")","var(--ch-4)"],"\n\n ",["todos","var(--ch-4)"]," ",["=","var(--ch-7)"]," ",["todos.","var(--ch-4)"],["filter","var(--ch-5)"],["(","var(--ch-4)"],["todo","var(--ch-3)"]," ",["=>","var(--ch-7)"]," ",["todo.id","var(--ch-4)"]," ",["!==","var(--ch-7)"]," ",["id)","var(--ch-4)"],"\n ",["return","var(--ch-7)"]," ",["{ success:","var(--ch-4)"]," ",["true","var(--ch-2)"],[", id }","var(--ch-4)"],"\n",["}","var(--ch-4)"],"\n\n",["// 模拟切换完成状态","var(--ch-1)"],"\n",["export async function","var(--ch-7)"]," ",["toggleTodo","var(--ch-5)"],["(","var(--ch-4)"],["id","var(--ch-3)"],[":","var(--ch-7)"]," ",["string","var(--ch-2)"],[")","var(--ch-4)"],[":","var(--ch-7)"]," ",["Promise","var(--ch-3)"],["<","var(--ch-4)"],["Todo","var(--ch-3)"],["> {","var(--ch-4)"],"\n ",["const","var(--ch-7)"]," ",["url","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["'/api/randomuser/api?results=1&inc=login&noinfo'","var(--ch-8)"],"\n ",["await","var(--ch-7)"]," ",["delay","var(--ch-5)"],["(","var(--ch-4)"],["300","var(--ch-2)"],[")","var(--ch-4)"],"\n\n ",["const","var(--ch-7)"]," ",["todo","var(--ch-2)"]," ",["=","var(--ch-7)"]," ",["todos.","var(--ch-4)"],["find","var(--ch-5)"],["(","var(--ch-4)"],["t","var(--ch-3)"]," ",["=>","var(--ch-7)"]," ",["t.id","var(--ch-4)"]," ",["===","var(--ch-7)"]," ",["id)","var(--ch-4)"],"\n ",["if","var(--ch-7)"]," ",["(","var(--ch-4)"],["!","var(--ch-7)"],["todo)","var(--ch-4)"]," ",["throw new","var(--ch-7)"]," ",["Error","var(--ch-5)"],["(","var(--ch-4)"],["'Todo not found'","var(--ch-8)"],[")","var(--ch-4)"],"\n\n ",["todo.completed","var(--ch-4)"]," ",["= !","var(--ch-7)"],["todo.completed","var(--ch-4)"],"\n ",["return","var(--ch-7)"]," ",["{","var(--ch-4)"]," ",["...","var(--ch-7)"],["todo }","var(--ch-4)"],"\n",["}","var(--ch-4)"],"\n"],"annotations":[],"themeName":"github-from-css","style":{"color":"var(--ch-4)","background":"var(--ch-16)","colorScheme":"var(--ch-0)"}}]}]