feat: 接入redux

package.json

@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "@nextui-org/react": "^2.4.6",
+    "@reduxjs/toolkit": "^2.2.7",
     "@virtuoso.dev/message-list": "^1.8.3",
     "ahooks": "^3.8.0",
     "axios": "^1.7.3",
@@ -47,6 +48,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.0",
     "react-virtuoso": "^4.9.0",
     "tailwind-merge": "^2.4.0"

src/App.tsx

 import './App.css'
 import React from 'react'
 import { BrowserRouter as Router } from 'react-router-dom'
+import { Provider } from 'react-redux'
 import { MainLayout } from './layouts'
 import { AppRoutes } from './routes/AppRoutes'
 import { AuthProvider } from './auth/AuthContext'
 import ToastWrapper from './components/ToastWrapper/ToastWrapper'
+import { store } from './store'
 
 const App: React.FC = () => {
   return (
-    <ToastWrapper>
-      <AuthProvider>
-        <Router>
-          <MainLayout>
-            <AppRoutes />
-          </MainLayout>
-        </Router>
-      </AuthProvider>
-    </ToastWrapper>
+    <Provider store={store}>
+      <ToastWrapper>
+        <AuthProvider>
+          <Router>
+            <MainLayout>
+              <AppRoutes />
+            </MainLayout>
+          </Router>
+        </AuthProvider>
+      </ToastWrapper>
+    </Provider>
+
   )
 }
 

src/api/conversation.ts

+import http from '@/utils/request'
+
+/**
+ * 查询用户历史会话列表
+ * @params
+ */
+export function queryUserConversationPage<T>(data: T) {
+  return http.post('/conversation/api/conversation/mobile/v1/query_user_conversation_page', data)
+}

src/layouts/HistoryBar/HistoryBar.tsx

 import { AnimatePresence, motion } from 'framer-motion'
 import { Button, Input } from '@nextui-org/react'
-import { item, list, variants } from './motionAnimate'
+import { containerVariants, itemVariants, variants } from './motionAnimate'
 import SearchIcon from '@/assets/svg/search.svg?react'
 import HistoryMenuIcon from '@/assets/svg/historyMenu.svg?react'
 
@@ -25,56 +25,33 @@ export const HistoryBar: React.FC<HistoryBarProps> = ({ isVisible }) => {
             </div>
             <div className="px-[32px] flex-1 overflow-y-auto">
               <motion.ul
+                variants={containerVariants}
                 initial="hidden"
                 animate="visible"
-                variants={list}
                 className="w-full flex flex-col gap-[6px]"
               >
-                <motion.li variants={item} className="mt-[32px] text-[13px] text-[#B1C6D2]">今日</motion.li>
-                <motion.li variants={item} className="w-full">
-                  <Button color="primary" variant="light" className="w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
-                    <div className="w-full text-nowrap text-ellipsis overflow-hidden">
-                      <span>推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
-                    </div>
-                  </Button>
-                </motion.li>
-                <motion.li variants={item} className="w-full">
-                  <Button color="primary" variant="light" className="w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
-                    <div className="w-full text-nowrap text-ellipsis overflow-hidden">
-                      <span>推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
-                    </div>
-                  </Button>
-                </motion.li>
-                <motion.li variants={item} className="w-full">
-                  <Button color="primary" variant="light" className="w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
-                    <div className="w-full text-nowrap text-ellipsis overflow-hidden">
-                      <span>推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
-                    </div>
-                  </Button>
-                </motion.li>
-                <motion.li variants={item} className="w-full">
-                  <Button color="primary" variant="light" className="w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
-                    <div className="w-full text-nowrap text-ellipsis overflow-hidden">
-                      <span>推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
-                    </div>
-                  </Button>
-                </motion.li>
-                <motion.li variants={item} className="w-full">
-                  <Button color="primary" variant="light" className="w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
-                    <div className="w-full text-nowrap text-ellipsis overflow-hidden">
-                      <span>推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
-                    </div>
-                  </Button>
-                </motion.li>
-                <motion.li variants={item} className="w-full">
-                  <Button color="primary" variant="light" className="w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
-                    <div className="w-full text-nowrap text-ellipsis overflow-hidden">
-                      <span>推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
-                    </div>
-                  </Button>
+                <motion.li
+                  key="1"
+                  custom="1"
+                  variants={itemVariants}
+                  initial="hidden"
+                  animate="visible"
+                  exit="exit"
+                  layout
+                  className="mt-[32px] text-[13px] text-[#B1C6D2]"
+                >
+                  今日
                 </motion.li>
-                <motion.li variants={item} className="mt-[32px] text-[13px] text-[#B1C6D2]">今日</motion.li>
-                <motion.li variants={item} className="w-full">
+                <motion.li
+                  key="2"
+                  custom="2"
+                  variants={itemVariants}
+                  initial="hidden"
+                  animate="visible"
+                  exit="exit"
+                  layout
+                  className="w-full"
+                >
                   <Button color="primary" variant="light" className="w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
                     <div className="w-full text-nowrap text-ellipsis overflow-hidden">
                       <span>推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>

src/layouts/HistoryBar/motionAnimate.ts

@@ -43,3 +43,27 @@ export const variants = {
     },
   },
 }
+export const containerVariants = {
+  hidden: {},
+  visible: {},
+}
+export const itemVariants = {
+  hidden: { opacity: 0, y: 20, scale: 0.8 },
+  visible: (i: number) => ({
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: {
+      delay: i * 0.08,
+      type: 'spring',
+      stiffness: 200,
+      damping: 20,
+      mass: 0.8,
+    },
+  }),
+  exit: {
+    opacity: 0,
+    scale: 0.8,
+    transition: { duration: 0.2 },
+  },
+}

src/layouts/MainLayout/MainLayout.tsx

@@ -25,6 +25,7 @@ const contentVariants = {
 export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
   const { showLoginModal, toggleLoginModal } = useAuth()
   const [isHistoryVisible, setHistoryVisible] = useState(false)
+
   return (
     <motion.main className={styles.layoutMain}>
       <motion.div

src/pages/Home/Home.tsx

 import type React from 'react'
 import { Virtuoso } from 'react-virtuoso'
-import { useEffect } from 'react'
 import styles from './Home.module.less'
 import { QuestionList } from './components/QuestionList'
 import { WelcomeWord } from './components/WelcomeWord'
@@ -12,18 +11,6 @@ import { ChatEditor } from '@/components/ChatEditor'
 import { RECOMMEND_QUESTIONS_OTHER, RECOMMEND_QUESTIONS_PRODUCT } from '@/config/recommendQuestion'
 
 export const Home: React.FC = () => {
-  const placeholders = [
-    '推荐几款60周岁还能投的医疗？',
-    '有哪些养老保险可以无脑入？',
-    '今年头部的保险公司有哪些好的产品？',
-    '直接开始问吧！',
-    '保险公司偿付能力在哪里可以看？',
-  ]
-
-  useEffect(() => {
-    // getRecommendQuestionList()
-  }, [])
-
   return (
     <div className={styles.homePage}>
       <GradientBackground />
@@ -49,7 +36,7 @@ export const Home: React.FC = () => {
             />
           </div>
           <div className="box-border px-[0] mx-auto iptContainer w-full  max-w-[1000px] flex-shrink-0 sm:px-0 pb-[18px]">
-            <ChatEditor placeholders={placeholders} />
+            <ChatEditor placeholders={RECOMMEND_QUESTIONS_OTHER} />
             <div className="w-full text-center mt-[20px] text-[#3333334d] text-[12px]">
               内容由AI模型生成，其准确性和完整性无法保证，仅供参考
             </div>

src/pages/Home/components/QuestionList/QuestionList.tsx

@@ -18,7 +18,6 @@ const containerVariants = {
   hidden: {},
   visible: {},
 }
-
 const itemVariants = {
   hidden: { opacity: 0, y: 20, scale: 0.8 },
   visible: (i: number) => ({

src/store/hook.ts

+import type { TypedUseSelectorHook } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
+import type { AppDispatch, RootState } from '@/store'
+
+export const useAppDispatch = () => useDispatch<AppDispatch>()
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/store/index.ts

+import { configureStore } from '@reduxjs/toolkit'
+
+export const store = configureStore({
+  reducer: {
+    // 我们暂时还没有任何reducer，所以这里是空的
+  },
+})
+// 为了在TypeScript中使用，我们导出这些类型
+export type RootState = ReturnType<typeof store.getState>
+export type AppDispatch = typeof store.dispatch