feat(ContentSelection): 添加临时选中选项以优化选择交互
在内容选择组件中引入临时选中选项(tempSelectedOptions),避免直接修改选中状态。用户确认时才更新实际选中选项,提供更流畅的选择体验并防止误操作。
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user