perf: style

Scorpio-xu · May 11, 2023 · 39f9080 · 39f9080
1 parent 3e4b165
commit 39f9080
Show file tree

Hide file tree

Showing 8 changed files with 205 additions and 46 deletions.
diff --git a/public/docs/intro.md b/public/docs/intro.md
@@ -1,25 +1,21 @@
 ## 欢迎使用 Fast GPT
 
-[Git 仓库](https://github.com/c121914yu/FastGPT)
+### 项目开源
 
-### 交流群/问题反馈
+FastGpt 项目完全开源，可随意私有化部署，去除平台风险忧虑。项目地址：[Git 仓库](https://github.com/c121914yu/FastGPT)
 
-如果群满了，可加个小号，定时拉
-wx 号: fastgpt123
-![](/imgs/wxqun300.jpg)
-![](/imgs/wx300.jpg)
+### 开始使用知识库
 
-### 快速开始
+1. AI 助手详情里，有一个模型效果。打开知识库搜索开关即可使用知识库搜索功能。
+2. 导入知识库数据。可以手动输入或文件导入。
+3. 开始对话。
+4. 对话结束后，会看到聊天下方有一个“查看提示词”,可以看到搜索到了哪些内容。
 
-1. 使用手机号注册账号。
-2. 进入账号页面，添加关联账号，目前只有 openai 的账号可以添加，直接去 openai 官网，把 API Key 粘贴过来。
-3. 如果填写了自己的 openai 账号，使用时会直接用你的账号。如果没有填写，需要付费使用平台的账号。
-4. 进入模型页，创建一个模型，建议直接用 ChatGPT。
-5. 在模型列表点击【对话】，即可使用 API 进行聊天。
+注意：使用知识库模型对话时，tokens 消耗会加快。
 
 ### 价格表
 
-如果使用了自己的 Api Key，不会计费。可以在账号页，看到详细账单。单纯使用 chatGPT 模型进行对话，只有一个计费项目。使用知识库时，包含**对话**和**索引**生成两个计费项。
+如果使用了自己的 Api Key，不会计费。可以在账号页，看到详细账单。
 | 计费项 | 价格: 元/ 1K tokens（包含上下文）|
 | --- | --- |
 | claude - 对话 | 免费 |
@@ -28,17 +24,11 @@ wx 号: fastgpt123
 | 知识库 - 索引 | 免费 |
 | 文件拆分 | 0.03 |
 
-### 定制 prompt
-
-1. 进入模型编辑页
-2. 调整温度和提示词
-3. 使用该模型对话。每次对话时，提示词和温度都会自动注入，方便管理个人的模型。建议把自己日常经常需要使用的 5~10 个方向预设好。
-
-### 知识库
+### 交流群/问题反馈
 
-1. 创建模型时选择【知识库】
-2. 进入模型编辑页
-3. 导入数据，可以选择手动导入，或者选择文件导入。文件导入会自动调用 chatGPT 理解文件内容，并生成知识库。
-4. 使用该模型对话。
+如果群满了，可加个小助手，定时拉
+wx 号: fastgpt123
 
-注意：使用知识库模型对话时，tokens 消耗会加快。
+| 交流群                  | 小助手               |
+| ----------------------- | -------------------- |
+| ![](/imgs/wxqun300.jpg) | ![](/imgs/wx300.jpg) |
diff --git a/public/js/particles.js b/public/js/particles.js
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -35,7 +35,10 @@ const Layout = ({ children, isPcDevice }: { children: JSX.Element; isPcDevice: b
 
   return (
     <>
-      <Box h={'100%'} bg={'gray.100'}>
+      <Box
+        h={'100%'}
+        bgGradient={'linear(to-t,rgba(173, 206, 255, 0.05) 0%, rgba(173, 206, 255, 0.12) 100%)'}
+      >
         {isPc ? (
           pcUnShowLayoutRoute[router.pathname] ? (
             <Auth>{children}</Auth>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -55,6 +55,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <Script src="/js/qrcode.min.js" strategy="lazyOnload"></Script>
       <Script src="/js/pdf.js" strategy="lazyOnload"></Script>
       <Script src="/js/html2pdf.bundle.min.js" strategy="lazyOnload"></Script>
+      <Script src="/js/particles.js" strategy="lazyOnload"></Script>
       <QueryClientProvider client={queryClient}>
         <ChakraProvider theme={theme}>
           <ColorModeScript initialColorMode={theme.config.initialColorMode} />

diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
@@ -0,0 +1,5 @@
+.home {
+  * {
+    position: relative;
+  }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,14 +1,19 @@
 import React, { useEffect } from 'react';
-import { Card, Box, Link } from '@chakra-ui/react';
+import { Card, Box, Link, Flex, Image, Button } from '@chakra-ui/react';
 import Markdown from '@/components/Markdown';
 import { useMarkdown } from '@/hooks/useMarkdown';
-import { useRouter } from 'next/router';
 import { getFilling } from '@/api/system';
 import { useQuery } from '@tanstack/react-query';
+import { useScreen } from '@/hooks/useScreen';
+import { useRouter } from 'next/router';
+
+import styles from './index.module.scss';
 
 const Home = () => {
-  const { inviterId } = useRouter().query as { inviterId: string };
+  const router = useRouter();
+  const { inviterId } = router.query as { inviterId: string };
   const { data } = useMarkdown({ url: '/intro.md' });
+  const { isPc } = useScreen();
 
   useEffect(() => {
     if (inviterId) {
@@ -18,22 +23,167 @@ const Home = () => {
 
   const { data: { beianText = '' } = {} } = useQuery(['init'], getFilling);
 
+  /* 加载动画 */
+  useEffect(() => {
+    setTimeout(() => {
+      window.particlesJS?.('particles-js', {
+        particles: {
+          number: {
+            value: 40,
+            density: {
+              enable: true,
+              value_area: 500
+            }
+          },
+          color: {
+            value: '#4e83fd'
+          },
+          shape: {
+            type: 'circle',
+            stroke: {
+              width: 0,
+              color: '#000000'
+            },
+            polygon: {
+              nb_sides: 5
+            }
+          },
+          opacity: {
+            value: 0.5,
+            random: false,
+            anim: {
+              enable: false,
+              speed: 0.1,
+              opacity_min: 0.1,
+              sync: false
+            }
+          },
+          size: {
+            value: 3,
+            random: true,
+            anim: {
+              enable: false,
+              speed: 10,
+              size_min: 0.1,
+              sync: false
+            }
+          },
+          line_linked: {
+            enable: true,
+            distance: 150,
+            color: '#adceff',
+            opacity: 0.4,
+            width: 1
+          },
+          move: {
+            enable: true,
+            speed: 2,
+            direction: 'none',
+            random: true,
+            straight: false,
+            out_mode: 'out',
+            bounce: false,
+            attract: {
+              enable: false,
+              rotateX: 600,
+              rotateY: 1200
+            }
+          }
+        },
+        interactivity: {
+          detect_on: 'canvas',
+          events: {
+            onhover: {
+              enable: true,
+              mode: 'grab'
+            },
+            onclick: {
+              enable: true,
+              mode: 'push'
+            },
+            resize: true
+          },
+          modes: {
+            grab: {
+              distance: 140,
+              line_linked: {
+                opacity: 1
+              }
+            },
+            bubble: {
+              distance: 400,
+              size: 40,
+              duration: 2,
+              opacity: 8,
+              speed: 3
+            },
+            repulse: {
+              distance: 200,
+              duration: 0.4
+            },
+            push: {
+              particles_nb: 4
+            },
+            remove: {
+              particles_nb: 2
+            }
+          }
+        },
+        retina_detect: true
+      });
+    }, 1000);
+  }, [isPc]);
+
   return (
-    <Box p={[5, 10]}>
-      <Card p={5} lineHeight={2}>
-        <Markdown source={data} isChatting={false} />
-      </Card>
-
-      <Card p={5} mt={4} textAlign={'center'}>
-        {beianText && (
-          <Link href="https://beian.miit.gov.cn/" target="_blank">
-            {beianText}
-          </Link>
-        )}
-
-        <Box>Made by FastGpt Team.</Box>
-      </Card>
-    </Box>
+    <Flex
+      className={styles.home}
+      position={'relative'}
+      flexDirection={'column'}
+      alignItems={'center'}
+      pt={'20vh'}
+    >
+      <Box id={'particles-js'} position={'absolute'} top={0} left={0} right={0} bottom={0} />
+      <Image src="/icon/logo.png" w={['70px', '120px']} h={['70px', '120px']} alt={''}></Image>
+      <Box
+        fontWeight={'bold'}
+        fontSize={['40px', '70px']}
+        letterSpacing={'5px'}
+        color={'myBlue.600'}
+      >
+        FastGpt
+      </Box>
+      <Box color={'myBlue.600'} fontSize={['30px', '50px']}>
+        三分钟
+      </Box>
+      <Box color={'myBlue.600'} fontSize={['30px', '50px']}>
+        搭建 AI 知识库
+      </Box>
+
+      <Button
+        my={5}
+        fontSize={['xl', '3xl']}
+        h={['35px', '40px']}
+        onClick={() => router.push(`/model`)}
+      >
+        点击开始
+      </Button>
+
+      <Box mt={'20vh'} w={'100%'} p={[5, 10]}>
+        <Card p={5} lineHeight={2}>
+          <Markdown source={data} isChatting={false} />
+        </Card>
+
+        <Card p={5} mt={4} textAlign={'center'}>
+          {beianText && (
+            <Link href="https://beian.miit.gov.cn/" target="_blank">
+              {beianText}
+            </Link>
+          )}
+
+          <Box>Made by FastGpt Team.</Box>
+        </Card>
+      </Box>
+    </Flex>
   );
 };
 

diff --git a/src/pages/model/components/detail/components/SelectFileModal.tsx b/src/pages/model/components/detail/components/SelectFileModal.tsx
@@ -185,8 +185,8 @@ const SelectFileModal = ({
             <Radio
               ml={3}
               list={[
-                { label: 'QA拆分', value: 'qa' },
-                { label: '直接分段', value: 'subsection' }
+                { label: '直接分段', value: 'subsection' },
+                { label: 'QA拆分', value: 'qa' }
               ]}
               value={mode}
               onChange={(e) => setMode(e as 'subsection' | 'qa')}

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -12,6 +12,7 @@ declare global {
   var generatingVector: boolean;
   var QRCode: any;
   var httpsAgent: Agent;
+  var particlesJS: any;
 
   interface Window {
     ['pdfjs-dist/build/pdf']: any;