diff --git a/ui/hooks/index.ts b/ui/hooks/index.ts new file mode 100644 index 0000000..9c1f1aa --- /dev/null +++ b/ui/hooks/index.ts @@ -0,0 +1 @@ +export { useDirtyTracker } from './useDirtyTracker' diff --git a/ui/hooks/useDirtyTracker.ts b/ui/hooks/useDirtyTracker.ts new file mode 100644 index 0000000..e2621e5 --- /dev/null +++ b/ui/hooks/useDirtyTracker.ts @@ -0,0 +1,46 @@ +'use client' +import { useState, useRef } from 'react' + +/** + * 脏状态追踪 Hook — 用于"修改后才显示保存按钮"模式。 + * + * @example 数组场景(每个子项独立保存) + * const { isDirty, markClean, removeItem } = useDirtyTracker() + * {items.map(item => ( + *
+ * + * {isDirty(item.id, item) && } + *
+ * ))} + * // 保存成功后: markClean(id, savedItem) + * // 删除时: removeItem(id) + */ +export function useDirtyTracker() { + const savedMap = useRef>(new Map()) + + /** + * 判断指定 key 的当前数据是否相对于上次 markClean 有修改。 + * 从未 markClean 过的 key 视为 dirty(适用于新增项)。 + */ + const isDirty = (key: string, current: unknown): boolean => { + const saved = savedMap.current.get(key) + if (saved === undefined) return true // 从未保存过 → dirty + return saved !== JSON.stringify(current) + } + + /** + * 将指定 key 的当前数据标记为"已保存"(重置 dirty 状态)。 + */ + const markClean = (key: string, item: unknown): void => { + savedMap.current.set(key, JSON.stringify(item)) + } + + /** + * 删除指定 key 的追踪记录(用于列表项被删除时清理)。 + */ + const removeItem = (key: string): void => { + savedMap.current.delete(key) + } + + return { isDirty, markClean, removeItem } +}