feat: 收藏

src/api/collect.ts

+import http from '@/utils/request'
+
+/**
+ * 查询用户收藏列表
+ * @param params
+ * @returns
+ */
+export function fetchQueryCollectionList<T>(params: T) {
+  return http.post('/conversation/api/collection/mobile/v1/query_user_collection_page', params)
+}

src/layouts/Navbar/Navbar.tsx

@@ -41,6 +41,14 @@ const NavbarBase: React.FC<NavbarProps & WithAuthProps> = ({ isHistoryVisible, c
     if (type === 'history') {
       onSetHistoryVisible(!isHistoryVisible)
     }
+
+    if (type === 'collect') {
+      navigate('/collect')
+    }
+
+    if (type === 'tools') {
+      navigate('/tools')
+    }
   }
   const handleLogout = () => {
     onSetHistoryVisible(false)

src/pages/Collect/Collect.module.less

+.collectPage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.scrollView {
+  // display: flex;
+  // flex-direction: column;
+  // flex: 1 1;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 1;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+.scrollable {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  position: relative;
+  width: 100%;
+}
+.inter {
+  overflow-anchor: none;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: fit-content;
+  width: 100%;
+  padding: 32px 0;
+}

src/pages/Collect/Collect.module.less.d.ts

+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  collectPage: string
+  content: string
+  inter: string
+  scrollView: string
+  scrollable: string
+}
+declare const cssExports: CssExports
+export default cssExports

src/pages/Collect/Collect.tsx

+import { useEffect, useState } from 'react'
+import { Spinner } from '@nextui-org/react'
+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
+import remarkGfm from 'remark-gfm'
+import { motion } from 'framer-motion'
+import { ChatMaskBar } from '../Chat/components/ChatMaskBar'
+import { ChatSlogan } from '../Chat/components/ChatSlogan'
+import { formatMarkdown } from '../Chat/components/ChatItem/markdownFormatter'
+import { ChatAnswerAttachment } from '../Chat/components/ChatItem/ChatAnswerAttchment'
+import styles from './Collect.module.less'
+import { fetchQueryCollectionList } from '@/api/collect'
+
+export const Collect: React.FC = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [collectList, setCollectList] = useState<any>([])
+
+  const getCollectList = async () => {
+    setIsLoading(true)
+    const params = {
+      pageNum: 1,
+      pageSize: 5,
+    }
+    const res = await fetchQueryCollectionList(params)
+    setCollectList(res.data.records)
+    setIsLoading(false)
+  }
+
+  useEffect(() => {
+    getCollectList()
+  }, [])
+  return (
+    <div className={styles.scrollView}>
+      <div className={`${styles.collectPage} relative`}>
+        <ChatSlogan />
+        <ChatMaskBar />
+        <div className="content h-full overflow-y-auto">
+          {isLoading && <div className="w-full h-full flex justify-center"><Spinner /></div>}
+          {!isLoading && (
+            <motion.div
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.3,
+                opacity: { duration: 0.1 },
+              }}
+              className={`${styles.scrollable} scrollbar-hide`}
+            >
+              <div className={`${styles.inter} gap-[32px]`}>
+                {
+                  collectList.map((item: any) => (
+                    <div className="w-full max-w-[900px] mx-auto bg-white rounded-[20px] box-border px-[24px] py-[20px]" key={item.conversationId}>
+                      <ReactMarkdown
+
+                        rehypePlugins={[rehypeRaw, rehypeSanitize]}
+                        remarkPlugins={[remarkGfm]}
+                        className="markdown-content"
+                      >
+                        {formatMarkdown(item.answer || '')}
+                      </ReactMarkdown>
+                      {item.attachmentList && item.attachmentList?.length !== 0 && <ChatAnswerAttachment answer={item} />}
+                    </div>
+                  ))
+                }
+              </div>
+            </motion.div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/Collect/index.ts

+export { Collect } from './Collect'

src/pages/Tools/Tools.tsx

+export const Tools: React.FC = () => {
+  return (
+    <div>
+      工具
+    </div>
+  )
+}

src/pages/Tools/index.ts

+export { Tools } from './Tools.tsx'

src/routes/AppRoutes.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { Route, Routes } from 'react-router-dom'
 import { Home } from '../pages/Home'
 import { Chat } from '../pages/Chat'
+import { Collect } from '../pages/Collect'
+import { Tools } from '../pages/Tools'
 import { withRouteChangeHandler } from './RouteChangeHandler'
 
 const AppRoutesComponent: React.FC = () => {
@@ -9,6 +11,8 @@ const AppRoutesComponent: React.FC = () => {
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/chat/:id" element={<Chat />} />
+      <Route path="/collect" element={<Collect />} />
+      <Route path="/tools" element={<Tools />} />
     </Routes>
   )
 }