feat: h5新手引导

package.json

@@ -49,6 +49,7 @@
     "react": "^18.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-hot-toast": "^2.4.1",
+    "react-joyride": "^2.9.3",
     "react-markdown": "^9.0.1",
     "react-markdown": "^9.0.1",
     "react-photo-view": "^1.2.6",
     "react-photo-view": "^1.2.6",
     "react-redux": "^9.1.2",
     "react-redux": "^9.1.2",

src/App.tsx

@@ -7,6 +7,7 @@ import { AppRoutes } from './routes/AppRoutes'
 import { AuthProvider } from './auth/AuthContext'
 import { AuthProvider } from './auth/AuthContext'
 import ToastWrapper from './components/ToastWrapper/ToastWrapper'
 import ToastWrapper from './components/ToastWrapper/ToastWrapper'
 import { store } from './store'
 import { store } from './store'
+import JoyrideStep from './components/JoyrideStep'
 
 
 const App: React.FC = () => {
 const App: React.FC = () => {
   return (
   return (
@@ -15,6 +16,7 @@ const App: React.FC = () => {
         <AuthProvider>
         <AuthProvider>
           <Router basename="/sdream-ai">
           <Router basename="/sdream-ai">
             <MainLayout>
             <MainLayout>
+              <JoyrideStep />
               <AppRoutes />
               <AppRoutes />
             </MainLayout>
             </MainLayout>
           </Router>
           </Router>

src/components/ChatEditor/index.tsx

@@ -98,7 +98,7 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
     }
     }
   }, [content])
   }, [content])
   return (
   return (
-    <div className="flex items-end w-full h-auto relative mx-auto bg-white  rounded-[36px] overflow-hidden transition duration-200 py-[8px] pl-[12px] pr-[12px] sm:py-[12px] sm:pl-[32px] sm:pr-[20px]">
+    <div className="ask-input flex items-end w-full h-auto relative mx-auto bg-white  rounded-[36px] overflow-hidden transition duration-200 py-[8px] pl-[12px] pr-[12px] sm:py-[12px] sm:pl-[32px] sm:pr-[20px]">
       <div
       <div
         ref={editorRef}
         ref={editorRef}
         contentEditable
         contentEditable
@@ -113,7 +113,7 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
           resize: 'none',
           resize: 'none',
         }}
         }}
       />
       />
-      <Button onClick={handleSubmit} radius="full" isDisabled={!content || isAsking} isIconOnly color="primary">
+      <Button className="ask-send" onClick={handleSubmit} radius="full" isDisabled={!content || isAsking} isIconOnly color="primary">
         <SendIcon />
         <SendIcon />
       </Button>
       </Button>
 
 

src/components/JoyrideStep/index.tsx

+import React, { useState } from 'react'
+import Joyride from 'react-joyride'
+import { isMobile } from '../../utils'
+
+export default function JoyrideStep() {
+  const joyrideLocal = window.localStorage.getItem('__JOYRIDE_LOCAL__')
+  const [run] = useState(isMobile() && !joyrideLocal)
+  const steps = [
+    {
+      target: '.layoutNavBarAgent',
+      content: '点击logo 解锁更多功能 🎉',
+    },
+  ]
+
+  function handleJoyrideCallback(data: any) {
+    if (data.action === 'close') {
+      window.localStorage.setItem('__JOYRIDE_LOCAL__', '1')
+    }
+  }
+  return (
+    <Joyride
+      run={run}
+      steps={steps}
+      hideCloseButton
+      callback={handleJoyrideCallback}
+      styles={{
+        options: {
+          arrowColor: '#fff',
+          backgroundColor: '#fff',
+          overlayColor: 'rgba(0, 0, 0, 0.6)',
+          primaryColor: '#29B6FD',
+          textColor: '#333',
+          beaconSize: 25, // 光亮图标
+          spotlightShadow: '0 0 15px rgba(0, 0, 0, 0.5)', // spotlight 高亮阴影
+          width: undefined, // 宽度
+          zIndex: 1000,
+        },
+      }}
+    />
+  )
+}