feat(update): 实现 乐观更新 逻辑，使交互体验更流畅；复用部分重复逻辑

src/App.css

@@ -1,16 +1,3 @@
-/*@media screen and (max-width: 700px) {*/
-/*  .sidebar {*/
-/*    display: none !important;*/
-/*  }*/
-/*}*/
-
-/*@media screen and (max-width: 700px) {*/
-/*  .main {*/
-/*    padding-left: 0 !important;*/
-/*    width: 100% !important;*/
-/*  }*/
-/*}*/
-
 .arco-menu-collapse-button {
   display: none;
 }
@@ -86,6 +73,7 @@
 
 ::-webkit-scrollbar {
   background-color: transparent;
+  height: 0;
   width: 6px;
 }
 

src/components/Content/Content.jsx

@@ -6,7 +6,6 @@ import { updateEntryStatus } from "../../apis";
 import useEntryActions from "../../hooks/useEntryActions";
 import useKeyHandlers from "../../hooks/useKeyHandlers";
 import useLoadMore from "../../hooks/useLoadMore";
-import { isInLast24Hours } from "../../utils/Date";
 import ActionButtons from "../Article/ActionButtons";
 import ActionButtonsMobile from "../Article/ActionButtonsMobile";
 import ArticleDetail from "../Article/ArticleDetail";
@@ -17,17 +16,10 @@ import FilterAndMarkPanel from "./FilterAndMarkPanel";
 import "./Transition.css";
 
 const Content = ({ info, getEntries, markAllAsRead }) => {
-  const unreadTotal = useStore((state) => state.unreadTotal);
-  const unreadToday = useStore((state) => state.unreadToday);
-  const readCount = useStore((state) => state.readCount);
   const activeContent = useStore((state) => state.activeContent);
-  const setUnreadTotal = useStore((state) => state.setUnreadTotal);
-  const setUnreadToday = useStore((state) => state.setUnreadToday);
-  const setReadCount = useStore((state) => state.setReadCount);
   const setActiveContent = useStore((state) => state.setActiveContent);
 
   const {
-    entries,
     filteredEntries,
     filterStatus,
     loading,
@@ -40,13 +32,15 @@ const Content = ({ info, getEntries, markAllAsRead }) => {
     setOffset,
     setTotal,
     setUnreadCount,
-    unreadCount,
-    updateFeedUnread,
-    updateGroupUnread,
   } = useContext(ContentContext);
 
-  const { handleFetchContent, toggleEntryStarred, toggleEntryStatus } =
-    useEntryActions();
+  const {
+    handleFetchContent,
+    toggleEntryStarred,
+    toggleEntryStatus,
+    handleEntryStatusUpdate,
+  } = useEntryActions();
+
   const {
     handleBKey,
     handleDKey,
@@ -56,6 +50,7 @@ const Content = ({ info, getEntries, markAllAsRead }) => {
     handleRightKey,
     handleSKey,
   } = useKeyHandlers();
+
   const { getFirstImage } = useLoadMore();
 
   const [showArticleDetail, setShowArticleDetail] = useState(false);
@@ -68,10 +63,6 @@ const Content = ({ info, getEntries, markAllAsRead }) => {
     setShowArticleDetail(activeContent !== null);
   }, [activeContent]);
 
-  const updateLocalEntryStatus = (entries, entryId, status) => {
-    return entries.map((e) => (e.id === entryId ? { ...e, status } : e));
-  };
-
   const handleEntryClick = async (entry) => {
     setShowArticleDetail(false);
 
@@ -80,20 +71,13 @@ const Content = ({ info, getEntries, markAllAsRead }) => {
     }, 200);
 
     if (entry.status === "unread") {
+      setTimeout(() => {
+        handleEntryStatusUpdate(entry, "read");
+      }, 200);
+
       const response = await updateEntryStatus(entry.id, "read");
-      if (response) {
-        updateFeedUnread(entry.feed.id, "read");
-        updateGroupUnread(entry.feed.category.id, "read");
-        setEntries(updateLocalEntryStatus(entries, entry.id, "read"));
-        setFilteredEntries(
-          updateLocalEntryStatus(filteredEntries, entry.id, "read"),
-        );
-        setUnreadTotal(Math.max(0, unreadTotal - 1));
-        setUnreadCount(Math.max(0, unreadCount - 1));
-        setReadCount(readCount + 1);
-        if (isInLast24Hours(entry.published_at)) {
-          setUnreadToday(Math.max(0, unreadToday - 1));
-        }
+      if (!response) {
+        handleEntryStatusUpdate(entry, "unread");
       }
     }
 

src/components/Sidebar/Sidebar.jsx

@@ -48,24 +48,6 @@ const GroupTitle = ({ group, isOpen }) => (
   </div>
 );
 
-// const CustomMenuItem = ({ count, icon, key, label, onClick }) => (
-//   <MenuItem key={key} onClick={onClick}>
-//     <div className="custom-menu-item">
-//       <span>
-//         {icon}
-//         {label}
-//       </span>
-//       <Typography.Ellipsis
-//         className="item-count"
-//         expandable={false}
-//         showTooltip={true}
-//       >
-//         {count || ""}
-//       </Typography.Ellipsis>
-//     </div>
-//   </MenuItem>
-// );
-
 const Sidebar = () => {
   const location = useLocation();
   const navigate = useNavigate();

src/hooks/useEntryActions.js

@@ -33,67 +33,84 @@ const useEntryActions = () => {
     updateGroupUnread,
   } = useContext(ContentContext);
 
-  const updateEntries = (entries, activeContent, updateFunction) => {
-    return entries.map((entry) =>
-      entry.id === activeContent.id ? updateFunction(entry) : entry,
-    );
+  const updateEntries = (entries, entry, updateFunction) => {
+    return entries.map((e) => (e.id === entry.id ? updateFunction(e) : e));
   };
 
-  const updateUI = (newContentStatus, updateFunction) => {
-    setActiveContent({ ...activeContent, ...newContentStatus });
-    setEntries(updateEntries(entries, activeContent, updateFunction));
-    setFilteredEntries(
-      updateEntries(filteredEntries, activeContent, updateFunction),
-    );
+  const updateUI = (entry, newContentStatus, updateFunction) => {
+    setActiveContent({ ...entry, ...newContentStatus });
+    setEntries(updateEntries(entries, entry, updateFunction));
+    setFilteredEntries(updateEntries(filteredEntries, entry, updateFunction));
   };
 
-  const handleToggleStatus = async (newStatus) => {
-    const response = await updateEntryStatus(activeContent.id, newStatus);
-    if (response) {
-      updateFeedUnread(activeContent.feed.id, newStatus);
-      updateGroupUnread(activeContent.feed.category.id, newStatus);
-      if (newStatus === "read") {
-        setUnreadTotal(Math.max(0, unreadTotal - 1));
-        setUnreadCount(Math.max(0, unreadCount - 1));
-        setReadCount(readCount + 1);
-        if (isInLast24Hours(activeContent.published_at)) {
-          setUnreadToday(Math.max(0, unreadToday - 1));
-        }
-      } else {
-        setUnreadTotal(unreadTotal + 1);
-        setUnreadCount(unreadCount + 1);
-        setReadCount(Math.max(0, readCount - 1));
-        if (isInLast24Hours(activeContent.published_at)) {
-          setUnreadToday(unreadToday + 1);
-        }
+  const handleEntryStatusUpdate = (entry, newStatus) => {
+    const { feed } = entry;
+    const feedId = feed.id;
+    const groupId = feed.category.id;
+
+    updateFeedUnread(feedId, newStatus);
+    updateGroupUnread(groupId, newStatus);
+
+    if (newStatus === "read") {
+      setUnreadTotal(Math.max(0, unreadTotal - 1));
+      setUnreadCount(Math.max(0, unreadCount - 1));
+      setReadCount(readCount + 1);
+      if (isInLast24Hours(entry.published_at)) {
+        setUnreadToday(Math.max(0, unreadToday - 1));
+      }
+    } else {
+      setUnreadTotal(unreadTotal + 1);
+      setUnreadCount(unreadCount + 1);
+      setReadCount(Math.max(0, readCount - 1));
+      if (isInLast24Hours(entry.published_at)) {
+        setUnreadToday(unreadToday + 1);
       }
-      updateUI({ status: newStatus }, (entry) => ({
-        ...entry,
-        status: newStatus,
-      }));
+    }
+
+    updateUI(entry, { status: newStatus }, (entry) => ({
+      ...entry,
+      status: newStatus,
+    }));
+  };
+
+  const handleEntryStarredUpdate = (entry, newStarred) => {
+    if (newStarred) {
+      setStarredCount(starredCount + 1);
+      Confetti({
+        particleCount: 100,
+        angle: 120,
+        spread: 70,
+        origin: { x: 1, y: 1 },
+      });
+    } else {
+      setStarredCount(Math.max(0, starredCount - 1));
+    }
+
+    updateUI(entry, { starred: newStarred }, (entry) => ({
+      ...entry,
+      starred: newStarred,
+    }));
+  };
+
+  const handleToggleStatus = async () => {
+    const prevStatus = activeContent.status;
+    const newStatus = activeContent.status === "read" ? "unread" : "read";
+    handleEntryStatusUpdate(activeContent, newStatus);
+
+    const response = await updateEntryStatus(activeContent.id, newStatus);
+    if (!response) {
+      handleEntryStatusUpdate(activeContent, prevStatus);
     }
   };
 
   const handleToggleStarred = async () => {
+    const { id } = activeContent;
     const newStarred = !activeContent.starred;
-    const response = await toggleEntryStarredApi(activeContent.id);
-    if (response) {
-      updateUI({ starred: newStarred }, (entry) => ({
-        ...entry,
-        starred: newStarred,
-      }));
-      newStarred === true &&
-        Confetti({
-          particleCount: 100,
-          angle: 120,
-          spread: 70,
-          origin: { x: 1, y: 1 },
-        });
-      if (newStarred) {
-        setStarredCount(starredCount + 1);
-      } else {
-        setStarredCount(Math.max(0, starredCount - 1));
-      }
+    handleEntryStarredUpdate(activeContent, newStarred);
+
+    const response = await toggleEntryStarredApi(id);
+    if (!response) {
+      handleEntryStarredUpdate(activeContent, !newStarred);
     }
   };
 
@@ -105,15 +122,19 @@ const useEntryActions = () => {
   };
 
   const toggleEntryStatus = () => {
-    const newStatus = activeContent.status === "read" ? "unread" : "read";
-    handleToggleStatus(newStatus);
+    handleToggleStatus();
   };
 
   const toggleEntryStarred = () => {
     handleToggleStarred();
   };
 
-  return { handleFetchContent, toggleEntryStatus, toggleEntryStarred };
+  return {
+    handleEntryStatusUpdate,
+    handleFetchContent,
+    toggleEntryStarred,
+    toggleEntryStatus,
+  };
 };
 
 export default useEntryActions;