feat(ContentSelection): 添加临时选中选项以优化选择交互

在内容选择组件中引入临时选中选项(tempSelectedOptions),避免直接修改选中状态。用户确认时才更新实际选中选项,提供更流畅的选择体验并防止误操作。
This commit is contained in:
超级老白兔
2025-08-28 17:04:54 +08:00
parent 0a6f892ba8
commit 53a78e6744

View File

@@ -53,6 +53,9 @@ export default function ContentSelection({
const [totalPages, setTotalPages] = useState(1);
const [totalLibraries, setTotalLibraries] = useState(0);
const [loading, setLoading] = useState(false);
const [tempSelectedOptions, setTempSelectedOptions] = useState<ContentItem[]>(
[],
);
// 删除已选内容库
const handleRemoveLibrary = (id: number) => {
@@ -72,6 +75,8 @@ export default function ContentSelection({
if (readonly) return;
setCurrentPage(1);
setSearchQuery("");
// 复制一份selectedOptions到临时变量
setTempSelectedOptions([...selectedOptions]);
setRealVisible(true);
fetchLibraries(1, "");
};
@@ -120,10 +125,10 @@ export default function ContentSelection({
// 处理内容库选择
const handleLibraryToggle = (library: ContentItem) => {
if (readonly) return;
const newSelected = selectedOptions.some(c => c.id === library.id)
? selectedOptions.filter(c => c.id !== library.id)
: [...selectedOptions, library];
onSelect(newSelected);
const newSelected = tempSelectedOptions.some(c => c.id === library.id)
? tempSelectedOptions.filter(c => c.id !== library.id)
: [...tempSelectedOptions, library];
setTempSelectedOptions(newSelected);
};
// 获取显示文本
@@ -134,8 +139,10 @@ export default function ContentSelection({
// 确认选择
const handleConfirm = () => {
// 用户点击确认时才更新实际的selectedOptions
onSelect(tempSelectedOptions);
if (onConfirm) {
onConfirm(selectedOptions);
onConfirm(tempSelectedOptions);
}
setRealVisible(false);
};
@@ -243,7 +250,7 @@ export default function ContentSelection({
currentPage={currentPage}
totalPages={totalPages}
loading={loading}
selectedCount={selectedOptions.length}
selectedCount={tempSelectedOptions.length}
onPageChange={setCurrentPage}
onCancel={() => setRealVisible(false)}
onConfirm={handleConfirm}
@@ -260,7 +267,9 @@ export default function ContentSelection({
{libraries.map(item => (
<label key={item.id} className={style.libraryItem}>
<Checkbox
checked={selectedOptions.map(c => c.id).includes(item.id)}
checked={tempSelectedOptions
.map(c => c.id)
.includes(item.id)}
onChange={() => !readonly && handleLibraryToggle(item)}
disabled={readonly}
className={style.checkboxWrapper}