feat: 协议政策

src/components/GradientBackground/GradientBackground.tsx

@@ -9,10 +9,10 @@ export const GradientBackground: React.FC = () => {
     >
       {/* <motion.img src={Bg} alt="" /> */}
       <svg className={`${styles.animateSpotlight} pointer-events-none absolute left top-0 z-[1] h-[100%] w-[128%] opacity-0`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2787 2842" fill="none">
-        <g filter="url(#filter)"><ellipse cx="2524.71" cy="3.501" rx="1224.71" ry="803.501" transform="matrix(-0.822377 -0.568943 -0.568943 1.22377 3631.88 2391.09)" fill="#B6B4FF" fill-opacity="0.21"></ellipse></g>
+        <g filter="url(#filter)"><ellipse cx="2524.71" cy="3.501" rx="1224.71" ry="803.501" transform="matrix(-0.822377 -0.568943 -0.568943 1.22377 3631.88 2391.09)" fill="#B6B4FF" fillOpacity="0.21"></ellipse></g>
         <defs>
-          <filter id="filter" x="0.860352" y="0.838989" width="3785.16" height="2840.26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+          <filter id="filter" x="0.860352" y="0.838989" width="3785.16" height="2840.26" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+            <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
             <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
             <feGaussianBlur stdDeviation="151" result="effect1_foregroundBlur_1065_8"></feGaussianBlur>
           </filter>

src/components/LoginModal/index.tsx

 import React from 'react'
 import { Button, Checkbox, Link, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@nextui-org/react'
+import { useNavigate } from 'react-router-dom'
 import { useAuth } from '@/auth/AuthContext'
 
 interface LoginModalProps {
@@ -10,10 +11,18 @@ interface LoginModalProps {
 export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
   const { login } = useAuth()
 
+  const navigator = useNavigate()
+
   const [isSelected, setIsSelected] = React.useState(false)
 
   const handleLogin = () => {
     login()
+    navigator('/')
+  }
+
+  const handleJump2Protocol = (type: string) => {
+    onClose()
+    navigator(`/protocol/${type}`)
   }
 
   return (
@@ -39,8 +48,8 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
                 >
                 </Checkbox>
                 我已阅读并同意
-                <Link isExternal href="https://sit-sdream-public-1300557051.insurbank.cn/config-center/agreement/%E6%99%93%E5%BE%97AI%E5%8A%A9%E6%89%8B%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE.html" showAnchorIcon underline="hover">《服务协议》</Link>
-                <Link isExternal href="https://sit-sdream-public-1300557051.insurbank.cn/config-center/agreement/%E6%99%93%E5%BE%97AI%E5%8A%A9%E6%89%8B%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96.html" showAnchorIcon underline="hover">《隐私政策》</Link>
+                <Link isExternal onClick={() => handleJump2Protocol('01')} showAnchorIcon underline="hover">《服务协议》</Link>
+                <Link isExternal onClick={() => handleJump2Protocol('02')} showAnchorIcon underline="hover">《隐私政策》</Link>
               </p>
             </ModalBody>
             <ModalFooter>

src/components/TracingBeam/index.less

+.progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(to right, #18CCFC, #6344F5, #AE48FF);
+  transform-origin: 0%;
+}

src/components/TracingBeam/index.tsx

+'use client'
+import React, { useRef } from 'react'
+import {
+  motion,
+  useScroll,
+  useSpring,
+} from 'framer-motion'
+import { cn } from '@/lib/utils'
+import './index.less'
+
+interface TracingBeamProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export default function TracingBeam({
+  children,
+  className,
+}: TracingBeamProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const scrollableRef = useRef<HTMLDivElement>(null)
+
+  const { scrollYProgress } = useScroll({
+    container: scrollableRef,
+  })
+  const scaleX = useSpring(scrollYProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.001,
+  })
+
+  return (
+    <div ref={scrollableRef} className="w-full overflow-auto scrollbar-hide scroll-smooth">
+      <motion.div
+        ref={ref}
+        className={cn('relative w-full mx-auto', className)}
+      >
+        <motion.div className="progress-bar" style={{ scaleX }} />
+        <div>{children}</div>
+      </motion.div>
+    </div>
+  )
+}

src/layouts/MainLayout/MainLayout.tsx

@@ -52,7 +52,7 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
       <motion.div
         animate={isHistoryVisible ? 'shrunk' : 'expanded'}
         variants={contentVariants}
-        className={`fixed right-[2px] top-[22px] z-[49] h-auto sm:relative flex sm:h-full pl-[12px] items-center ${isHistoryVisible && !isMobile() ? 'w-[340px]' : 'w-[90px]'} box-border`}
+        className={`fixed right-[0] top-[22px] z-[49] h-auto sm:relative flex sm:h-full pl-[12px] items-center ${isHistoryVisible && !isMobile() ? 'w-[340px]' : 'w-[90px]'} box-border`}
       >
         <Navbar isHistoryVisible={isHistoryVisible} onSetHistoryVisible={setHistoryVisible} />
         <HistoryBar isVisible={isHistoryVisible} onSetHistoryVisible={setHistoryVisible} />

src/layouts/Navbar/components/User/index.tsx

 import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Tooltip } from '@nextui-org/react'
+import { useNavigate } from 'react-router-dom'
 import { withAuth } from '@/auth/withAuth'
 import type { WithAuthProps } from '@/auth/withAuth'
 import UserIcon from '@/assets/svg/user.svg?react'
@@ -11,15 +12,17 @@ interface UserProps {
 
 export const UserLogin: React.FC<UserProps> = ({ onLogout }) => {
   const { logout } = useAuth()
+  const navigate = useNavigate()
+
   const items = [
-    // {
-    //   key: 'conact',
-    //   label: '联系我们',
-    // },
-    // {
-    //   key: 'file',
-    //   label: '相关协议',
-    // },
+    {
+      key: 'protocol02',
+      label: '隐私政策',
+    },
+    {
+      key: 'protocol01',
+      label: '服务协议',
+    },
     {
       key: 'logout',
       label: '退出登录',
@@ -30,6 +33,12 @@ export const UserLogin: React.FC<UserProps> = ({ onLogout }) => {
       logout()
       onLogout()
     }
+    if (key === 'protocol01') {
+      navigate('/protocol/01')
+    }
+    if (key === 'protocol02') {
+      navigate('/protocol/02')
+    }
   }
   return (
     <Dropdown>

src/pages/Home/components/Slogan/Slogan.tsx

@@ -10,7 +10,7 @@ export const Slogan: React.FC = () => {
     },
     {
       text: '更智能.',
-      className: 'text-[#29B6FD]',
+      className: 'bg-clip-text text-transparent bg-gradient-to-br from-cyan-400 via-blue-600 to-purple-500',
     },
   ]
   return (

src/pages/Protocol/Protocol.module.less

+.protocolPage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}

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

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

src/pages/Protocol/index.ts

+export { Protocol } from './Protocol'

src/routes/AppRoutes.tsx

@@ -4,6 +4,7 @@ import { Home } from '../pages/Home'
 import { Chat } from '../pages/Chat'
 import { Collect } from '../pages/Collect'
 import { Tools } from '../pages/Tools'
+import { Protocol } from '../pages/Protocol'
 import { withRouteChangeHandler } from './RouteChangeHandler'
 
 const AppRoutesComponent: React.FC = () => {
@@ -13,6 +14,7 @@ const AppRoutesComponent: React.FC = () => {
       <Route path="/chat/:id" element={<Chat />} />
       <Route path="/collect" element={<Collect />} />
       <Route path="/tools" element={<Tools />} />
+      <Route path="/protocol/:id" element={<Protocol />} />
     </Routes>
   )
 }

tailwind.config.js

 import { theme } from './src/config/theme'
 
+const {
+  default: flattenColorPalette,
+} = require('tailwindcss/lib/util/flattenColorPalette')
+
 const { nextui } = require ('@nextui-org/react')
 
 /** @type {import('tailwindcss').Config} */
@@ -33,5 +37,18 @@ module.exports = {
   darkMode: 'class',
   plugins: [
     nextui(theme),
+    addVariablesForColors,
   ],
 }
+
+// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
+function addVariablesForColors({ addBase, theme }: any) {
+  const allColors = flattenColorPalette(theme('colors'))
+  const newVars = Object.fromEntries(
+    Object.entries(allColors).map(([key, val]) => [`--${key}`, val]),
+  )
+
+  addBase({
+    ':root': newVars,
+  })
+}

wiki/useage/deploy.md

+scp -r /data/app_sit/sdream/sdream-ai/* root@172.21.0.12:/data/app_front_test/sdream-ai/