优化体验: 缓存表单数据

src/stores/FormStore.js

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+import { RealTimeAPI } from '@/lib/realTimeAPI';
+import { olog, isEmpty } from '@/utils/utils';
+import { receivedMsgTypeMapped, handleNotification } from '@/lib/msgUtils';
+import { fetchConversationsList, fetchTemplates, fetchMessages } from '@/actions/ConversationActions';
+import { devtools } from 'zustand/middleware';
+import { WS_URL } from '@/config';
+
+export const useFormStore = create(devtools((set, get) => ({
+  chatHistory: {},
+  setChatHistory: (chatHistory) => set({ chatHistory }),
+})));
+export default useFormStore;

src/views/ChatHistory.jsx

@@ -5,6 +5,8 @@ import { StarFilled, ZoomInOutlined, StarOutlined, SearchOutlined } from '@ant-d
 import { ChatList, ChatItem, MessageBox } from 'react-chat-elements';
 import { fetchConversationsList, fetchMessages } from '@/actions/ConversationActions';
 import { isEmpty } from '@/utils/utils';
+import useFormStore from '@/stores/FormStore';
+import { useShallow } from 'zustand/react/shallow';
 
 const { Sider, Content, Header, Footer } = Layout;
 const { Search } = Input;
@@ -63,7 +65,7 @@ const data = [
 ];
 
 // eslint-disable-next-line react/display-name
-const SearchForm = memo(function ({ onSubmit }) {
+const SearchForm = memo(function ({ initialValues, onSubmit }) {
   const [form] = Form.useForm();
   function handleSubmit(values) {
     onSubmit?.(values);
@@ -72,7 +74,7 @@ const SearchForm = memo(function ({ onSubmit }) {
     <Form
       layout={'inline'}
       form={form}
-      initialValues={{}}
+      initialValues={initialValues}
       onFinish={handleSubmit}
       style={{
         maxWidth: 'none',
@@ -185,7 +187,11 @@ const SearchForm = memo(function ({ onSubmit }) {
 });
 
 function ChatHistory() {
-  const [formValues, setFormValues] = useState({});
+  // const [formValues, setFormValues] = useState({});
+  const [formValues, setFormValues] = useFormStore(
+    useShallow((state) => [state.chatHistory, state.setChatHistory]),
+  )
+
 
   const handleSubmit = useCallback((values) => {
     setFormValues({ ...values });
@@ -290,7 +296,7 @@ function ChatHistory() {
   ));
   return (
     <>
-      <SearchForm onSubmit={handleSubmit} />
+      <SearchForm onSubmit={handleSubmit} initialValues={formValues} />
       <Divider plain orientation='left'></Divider>
       <Layout hasSider className='h-screen chathistory-wrapper chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 279px)', height: 'calc(100% - 279px)' }}>
         <Sider width={240} theme={'light'} className='h-full overflow-y-auto overflow-x-hidden' style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)' }}>