修改闪烁问题

src/features/rooms/hooks/useRoomPinsPage.js

@@ -24,8 +24,10 @@ export function useRoomPinsPage() {
     const [activeAction, setActiveAction] = useState("");
     const [form, setForm] = useState(emptyForm);
     const [loadingAction, setLoadingAction] = useState("");
-    const [roomSearch, setRoomSearch] = useState("");
+    const [roomInput, setRoomInput] = useState("");
+    const [roomKeyword, setRoomKeyword] = useState("");
     const [roomOptionsState, setRoomOptionsState] = useState({ error: "", loading: false, options: [] });
+    const [selectedRoom, setSelectedRoom] = useState(null);
     const filters = useMemo(
         () => ({
             keyword: query,
@@ -58,7 +60,7 @@ export function useRoomPinsPage() {
             setRoomOptionsState((current) => ({ ...current, error: "", loading: true }));
             try {
                 const data = await listRooms({
-                    keyword: roomSearch.trim(),
+                    keyword: roomKeyword.trim(),
                     page: 1,
                     page_size: 20,
                     status: "active",
@@ -77,7 +79,17 @@ export function useRoomPinsPage() {
             cancelled = true;
             window.clearTimeout(timer);
         };
-    }, [activeAction, roomSearch]);
+    }, [activeAction, roomKeyword]);
+
+    const roomOptions = useMemo(() => {
+        if (!selectedRoom) {
+            return roomOptionsState.options;
+        }
+        if (roomOptionsState.options.some((room) => room.roomId === selectedRoom.roomId)) {
+            return roomOptionsState.options;
+        }
+        return [selectedRoom, ...roomOptionsState.options];
+    }, [roomOptionsState.options, selectedRoom]);
 
     const changeQuery = (value) => {
         setQuery(value);
@@ -103,7 +115,9 @@ export function useRoomPinsPage() {
 
     const openCreate = () => {
         setForm(emptyForm());
-        setRoomSearch("");
+        setRoomInput("");
+        setRoomKeyword("");
+        setSelectedRoom(null);
         setRoomOptionsState({ error: "", loading: false, options: [] });
         setActiveAction("create");
     };
@@ -151,7 +165,23 @@ export function useRoomPinsPage() {
         }
     };
 
-    const selectedRoom = roomOptionsState.options.find((room) => room.roomId === form.roomId) || null;
+    const changeRoomInput = (value) => {
+        setRoomInput(value);
+        setRoomKeyword(value);
+        if (selectedRoom && roomOptionLabel(selectedRoom) !== value) {
+            setSelectedRoom(null);
+            setForm((current) => ({ ...current, roomId: "" }));
+        }
+    };
+
+    const selectRoom = (room) => {
+        setSelectedRoom(room || null);
+        setRoomInput(room ? roomOptionLabel(room) : "");
+        if (!room) {
+            setRoomKeyword("");
+        }
+        setForm((current) => ({ ...current, roomId: room?.roomId || "" }));
+    };
 
     return {
         abilities,
@@ -174,15 +204,23 @@ export function useRoomPinsPage() {
         regionOptions,
         reload,
         resetFilters,
-        roomOptions: roomOptionsState.options,
+        changeRoomInput,
+        roomInput,
+        roomOptions,
         roomOptionsError: roomOptionsState.error,
         roomOptionsLoading: roomOptionsState.loading,
-        roomSearch,
+        selectRoom,
         selectedRoom,
         setForm,
         setPage,
-        setRoomSearch,
         status,
         submitCreate,
     };
 }
+
+function roomOptionLabel(room) {
+    if (!room) {
+        return "";
+    }
+    return [room.title, room.roomShortId, room.roomId].filter(Boolean).join(" / ");
+}

src/features/rooms/pages/RoomPinsPage.jsx

@@ -163,6 +163,7 @@ export function RoomPinsPage() {
                     isOptionEqualToValue={(option, value) => option.roomId === value.roomId}
                     loading={page.roomOptionsLoading}
                     noOptionsText="当前无数据"
+                    inputValue={page.roomInput}
                     options={page.roomOptions}
                     renderInput={(params) => (
                         <TextField
@@ -180,8 +181,15 @@ export function RoomPinsPage() {
                     )}
                     size="small"
                     value={page.selectedRoom}
-                    onChange={(_, option) => page.setForm({ ...page.form, roomId: option?.roomId || "" })}
-                    onInputChange={(_, value) => page.setRoomSearch(value)}
+                    onChange={(_, option) => page.selectRoom(option)}
+                    onInputChange={(_, value, reason) => {
+                        if (reason === "input") {
+                            page.changeRoomInput(value);
+                        }
+                        if (reason === "clear") {
+                            page.selectRoom(null);
+                        }
+                    }}
                 />
                 <TextField
                     label="权重"