From 8e9816d648c10fe04fa42f94c7d55c034ca30d4a Mon Sep 17 00:00:00 2001
From: archer <545436317@qq.com>
Date: Tue, 4 Jul 2023 23:00:24 +0800
Subject: [PATCH] app page

---
 client/src/components/Layout/navbar.tsx       |   2 +-
 client/src/components/SlideTabs/index.tsx     |  72 ++++++++++
 client/src/constants/theme.ts                 |   3 +-
 client/src/pages/api/app/create.ts            |   2 +-
 client/src/pages/api/app/update.ts            |   2 +-
 .../pages/app/detail/components/Settings.tsx  | 128 +-----------------
 client/src/pages/app/detail/index.tsx         | 123 ++++++++++-------
 7 files changed, 158 insertions(+), 174 deletions(-)
 create mode 100644 client/src/components/SlideTabs/index.tsx

diff --git a/client/src/components/Layout/navbar.tsx b/client/src/components/Layout/navbar.tsx
index 7d22e736f..45b335e75 100644
--- a/client/src/components/Layout/navbar.tsx
+++ b/client/src/components/Layout/navbar.tsx
@@ -30,7 +30,7 @@ const Navbar = ({ unread }: { unread: number }) => {
         label: '应用',
         icon: 'model',
         link: `/app/list`,
-        activeLink: ['/app/list']
+        activeLink: ['/app/list', '/app/detail']
       },
       {
         label: '知识库',
diff --git a/client/src/components/SlideTabs/index.tsx b/client/src/components/SlideTabs/index.tsx
new file mode 100644
index 000000000..21a36cdcc
--- /dev/null
+++ b/client/src/components/SlideTabs/index.tsx
@@ -0,0 +1,72 @@
+import React, { useMemo } from 'react';
+import { Box, Flex, useTheme } from '@chakra-ui/react';
+import type { GridProps } from '@chakra-ui/react';
+import MyIcon, { type IconName } from '../Icon';
+
+// @ts-ignore
+export interface Props extends GridProps {
+  list: { id: string; label: string; icon: string }[];
+  activeId: string;
+  size?: 'sm' | 'md' | 'lg';
+  onChange: (id: string) => void;
+}
+
+const SlideTabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) => {
+  const sizeMap = useMemo(() => {
+    switch (size) {
+      case 'sm':
+        return {
+          fontSize: 'sm',
+          inlineP: 1
+        };
+      case 'md':
+        return {
+          fontSize: 'md',
+          inlineP: 2
+        };
+      case 'lg':
+        return {
+          fontSize: 'lg',
+          inlineP: 3
+        };
+    }
+  }, [size]);
+
+  return (
+    <Box fontSize={sizeMap.fontSize} {...props}>
+      {list.map((item) => (
+        <Flex
+          key={item.id}
+          py={sizeMap.inlineP}
+          borderRadius={'md'}
+          px={3}
+          mb={2}
+          alignItems={'center'}
+          _hover={{
+            bg: 'myWhite.600'
+          }}
+          {...(activeId === item.id
+            ? {
+                // backgroundImage: 'linear-gradient(to right, #85b1ff 0%, #EBF7FD 100%)',
+                bg: ' myBlue.300',
+                fontWeight: 'bold',
+                color: 'myBlue.700',
+                cursor: 'default'
+              }
+            : {
+                cursor: 'pointer'
+              })}
+          onClick={() => {
+            if (activeId === item.id) return;
+            onChange(item.id);
+          }}
+        >
+          <MyIcon mr={2} name={item.icon as IconName} w={'14px'} />
+          {item.label}
+        </Flex>
+      ))}
+    </Box>
+  );
+};
+
+export default React.memo(SlideTabs);
diff --git a/client/src/constants/theme.ts b/client/src/constants/theme.ts
index 0fa847498..f98ae0026 100644
--- a/client/src/constants/theme.ts
+++ b/client/src/constants/theme.ts
@@ -274,7 +274,8 @@ export const theme = extendTheme({
   borders: {
     sm: '1px solid #EFF0F1',
     base: '1px solid #DEE0E2',
-    md: '1px solid #DAE0E2'
+    md: '1px solid #DAE0E2',
+    lg: '1px solid #D0E0E2'
   },
   breakpoints: {
     sm: '900px',
diff --git a/client/src/pages/api/app/create.ts b/client/src/pages/api/app/create.ts
index 76084bd0e..8a184f73c 100644
--- a/client/src/pages/api/app/create.ts
+++ b/client/src/pages/api/app/create.ts
@@ -3,7 +3,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 import { jsonRes } from '@/service/response';
 import { connectToDatabase } from '@/service/mongo';
 import { authUser } from '@/service/utils/auth';
-import { App } from '@/service/models/model';
+import { App } from '@/service/models/app';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
   try {
diff --git a/client/src/pages/api/app/update.ts b/client/src/pages/api/app/update.ts
index a537e58bb..b70842a41 100644
--- a/client/src/pages/api/app/update.ts
+++ b/client/src/pages/api/app/update.ts
@@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 import { jsonRes } from '@/service/response';
 import { connectToDatabase } from '@/service/mongo';
 import { authUser } from '@/service/utils/auth';
-import { App } from '@/service/models/model';
+import { App } from '@/service/models/app';
 import type { AppUpdateParams } from '@/types/app';
 import { authApp } from '@/service/utils/auth';
 
diff --git a/client/src/pages/app/detail/components/Settings.tsx b/client/src/pages/app/detail/components/Settings.tsx
index c5da9988a..b7b903c99 100644
--- a/client/src/pages/app/detail/components/Settings.tsx
+++ b/client/src/pages/app/detail/components/Settings.tsx
@@ -1,15 +1,5 @@
 import React, { useCallback, useState, useMemo } from 'react';
-import {
-  Box,
-  Flex,
-  Button,
-  FormControl,
-  Input,
-  Textarea,
-  Divider,
-  Tooltip
-} from '@chakra-ui/react';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
+import { Box, Flex, Button, FormControl, Input, Textarea, Divider } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
 import { useRouter } from 'next/router';
@@ -21,19 +11,10 @@ import { useSelectFile } from '@/hooks/useSelectFile';
 import { compressImg } from '@/utils/file';
 import { getErrText } from '@/utils/tools';
 import { useConfirm } from '@/hooks/useConfirm';
-import { ChatModelMap, getChatModelList } from '@/constants/model';
-import { formatPrice } from '@/utils/user';
 
 import type { AppSchema } from '@/types/mongoSchema';
 
 import Avatar from '@/components/Avatar';
-import MySelect from '@/components/Select';
-import MySlider from '@/components/Slider';
-
-const systemPromptTip =
-  '模型固定的引导词，通过调整该内容，可以引导模型聊天方向。该内容会被固定在上下文的开头。';
-const limitPromptTip =
-  '限定模型对话范围，会被放置在本次提问前，拥有强引导和限定性。例如:\n1. 知识库是关于 Laf 的介绍，参考知识库回答问题，与 "Laf" 无关内容，直接回复: "我不知道"。\n2. 你仅回答关于 "xxx" 的问题，其他问题回复: "xxxx"';
 
 const Settings = ({ modelId }: { modelId: string }) => {
   const { toast } = useToast();
@@ -67,15 +48,6 @@ const Settings = ({ modelId }: { modelId: string }) => {
     () => appDetail.userId === userInfo?._id,
     [appDetail.userId, userInfo?._id]
   );
-  const tokenLimit = useMemo(() => {
-    const max = ChatModelMap[getValues('chat.chatModel')]?.contextMaxToken || 4000;
-
-    if (max < getValues('chat.maxToken')) {
-      setValue('chat.maxToken', max);
-    }
-
-    return max;
-  }, [getValues, setValue, refresh]);
 
   // 提交保存模型修改
   const saveSubmitSuccess = useCallback(
@@ -185,17 +157,17 @@ const Settings = ({ modelId }: { modelId: string }) => {
     }
   });
 
-  const { data: chatModelList = [] } = useQuery(['initChatModelList'], getChatModelList);
-
   return (
     <Box
+      pt={[0, 5]}
       pb={3}
       px={[5, '25px', '50px']}
       fontSize={['sm', 'lg']}
-      maxW={['auto', '800px']}
       position={'relative'}
+      maxW={['auto', '800px']}
     >
-      <Flex alignItems={'center'}>
+      <Box fontSize={['md', 'xl']}>基本信息</Box>
+      <Flex mt={5} alignItems={'center'}>
         <Box w={['60px', '100px', '140px']} flexShrink={0}>
           头像
         </Box>
@@ -235,96 +207,6 @@ const Settings = ({ modelId }: { modelId: string }) => {
 
       <Divider mt={5} />
 
-      <Flex alignItems={'center'} mt={5}>
-        <Box w={['60px', '100px', '140px']} flexShrink={0}>
-          对话模型
-        </Box>
-        <MySelect
-          width={['90%', '280px']}
-          value={getValues('chat.chatModel')}
-          list={chatModelList.map((item) => ({
-            value: item.chatModel,
-            label: `${item.name} (${formatPrice(
-              ChatModelMap[item.chatModel]?.price,
-              1000
-            )} 元/1k tokens)`
-          }))}
-          onchange={(val: any) => {
-            setValue('chat.chatModel', val);
-            setRefresh(!refresh);
-          }}
-        />
-      </Flex>
-      <Flex alignItems={'center'} my={10}>
-        <Box w={['60px', '100px', '140px']} flexShrink={0}>
-          温度
-        </Box>
-        <Box flex={1} ml={'10px'}>
-          <MySlider
-            markList={[
-              { label: '严谨', value: 0 },
-              { label: '发散', value: 10 }
-            ]}
-            width={['90%', '260px']}
-            min={0}
-            max={10}
-            value={getValues('chat.temperature')}
-            onChange={(val) => {
-              setValue('chat.temperature', val);
-              setRefresh(!refresh);
-            }}
-          />
-        </Box>
-      </Flex>
-      <Flex alignItems={'center'} mt={12} mb={10}>
-        <Box w={['60px', '100px', '140px']} flexShrink={0}>
-          回复上限
-        </Box>
-        <Box flex={1} ml={'10px'}>
-          <MySlider
-            markList={[
-              { label: '100', value: 100 },
-              { label: `${tokenLimit}`, value: tokenLimit }
-            ]}
-            width={['90%', '260px']}
-            min={100}
-            max={tokenLimit}
-            step={50}
-            value={getValues('chat.maxToken')}
-            onChange={(val) => {
-              setValue('chat.maxToken', val);
-              setRefresh(!refresh);
-            }}
-          />
-        </Box>
-      </Flex>
-      <Flex mt={10} alignItems={'flex-start'}>
-        <Box w={['60px', '100px', '140px']} flexShrink={0}>
-          提示词
-          <Tooltip label={systemPromptTip}>
-            <QuestionOutlineIcon display={['none', 'inline']} ml={1} />
-          </Tooltip>
-        </Box>
-        <Textarea
-          rows={8}
-          placeholder={systemPromptTip}
-          {...register('chat.systemPrompt')}
-        ></Textarea>
-      </Flex>
-      <Flex mt={5} alignItems={'flex-start'}>
-        <Box w={['60px', '100px', '140px']} flexShrink={0}>
-          限定词
-          <Tooltip label={limitPromptTip}>
-            <QuestionOutlineIcon display={['none', 'inline']} ml={1} />
-          </Tooltip>
-        </Box>
-        <Textarea
-          rows={5}
-          placeholder={limitPromptTip}
-          {...register('chat.limitPrompt')}
-        ></Textarea>
-      </Flex>
-
       <Flex mt={5} alignItems={'center'}>
         <Box w={['60px', '100px', '140px']} flexShrink={0}></Box>
         <Button
diff --git a/client/src/pages/app/detail/index.tsx b/client/src/pages/app/detail/index.tsx
index bb9847f09..a2cd88b48 100644
--- a/client/src/pages/app/detail/index.tsx
+++ b/client/src/pages/app/detail/index.tsx
@@ -1,13 +1,14 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { useRouter } from 'next/router';
-import { Box, Flex } from '@chakra-ui/react';
+import { Box, Flex, useTheme } from '@chakra-ui/react';
 import { useUserStore } from '@/store/user';
-import { useGlobalStore } from '@/store/global';
 import dynamic from 'next/dynamic';
 
 import Tabs from '@/components/Tabs';
+import SlideTabs from '@/components/SlideTabs';
 import Settings from './components/Settings';
 import { defaultApp } from '@/constants/model';
+import Avatar from '@/components/Avatar';
 
 const EditApp = dynamic(() => import('./components/edit'), {
   ssr: false
@@ -28,8 +29,8 @@ enum TabEnum {
 
 const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
   const router = useRouter();
+  const theme = useTheme();
   const { appId } = router.query as { appId: string };
-  const { isPc } = useGlobalStore();
   const { appDetail = defaultApp, loadAppDetail, userInfo } = useUserStore();
 
   const isOwner = useMemo(
@@ -50,6 +51,17 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
     [appId, router]
   );
 
+  const tabList = useMemo(
+    () => [
+      { label: '基础信息', id: TabEnum.settings, icon: 'text' },
+      ...(isOwner ? [{ label: '编排', id: TabEnum.edit, icon: 'edit' }] : []),
+      { label: '分享', id: TabEnum.share, icon: 'edit' },
+      { label: 'API', id: TabEnum.API, icon: 'edit' },
+      { label: '立即对话', id: 'startChat', icon: 'chat' }
+    ],
+    [isOwner]
+  );
+
   useEffect(() => {
     window.onbeforeunload = (e) => {
       e.preventDefault();
@@ -66,51 +78,68 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
   }, [appId, loadAppDetail]);
 
   return (
-    <Flex
-      flexDirection={'column'}
-      h={'100%'}
-      maxW={'100vw'}
-      pt={4}
-      overflow={'overlay'}
-      position={'relative'}
-      bg={'white'}
-    >
-      {/* 头部 */}
-      <Box textAlign={['center', 'left']} px={5} mb={4}>
-        <Box className="textlg" display={['block', 'none']} fontSize={'3xl'} fontWeight={'bold'}>
-          {appDetail.name}
+    <Flex flexDirection={'column'} bg={'myGray.100'} h={'100%'} p={[0, 5]}>
+      <Box
+        display={['block', 'flex']}
+        flex={1}
+        bg={'white'}
+        borderRadius={['', '2xl']}
+        border={['', theme.borders.lg]}
+      >
+        {/* pc tab */}
+        <Box display={['none', 'block']} p={4} w={'200px'} borderRight={theme.borders.base}>
+          <Flex mb={4}>
+            <Avatar src={appDetail.avatar} w={'34px'} borderRadius={'lg'} />
+            <Box ml={2} fontWeight={'bold'}>
+              {appDetail.name}
+            </Box>
+          </Flex>
+          <SlideTabs
+            mx={'auto'}
+            mt={2}
+            w={'100%'}
+            list={tabList}
+            activeId={currentTab}
+            onChange={(e: any) => {
+              if (e === 'startChat') {
+                router.push(`/chat?modelId=${appId}`);
+              } else {
+                setCurrentTab(e);
+              }
+            }}
+          />
         </Box>
-        <Tabs
-          mx={['auto', '0']}
-          mt={2}
-          w={['300px', '360px']}
-          list={[
-            { label: '配置', id: TabEnum.settings },
-            ...(isOwner ? [{ label: '编排', id: TabEnum.edit }] : []),
-            { label: '分享', id: TabEnum.share },
-            { label: 'API', id: TabEnum.API },
-            { label: '立即对话', id: 'startChat' }
-          ]}
-          size={isPc ? 'md' : 'sm'}
-          activeId={currentTab}
-          onChange={(e: any) => {
-            if (e === 'startChat') {
-              router.push(`/chat?modelId=${appId}`);
-            } else {
-              setCurrentTab(e);
-            }
-          }}
-        />
-      </Box>
-      <Box flex={1}>
-        {currentTab === TabEnum.settings && <Settings modelId={appId} />}
-        {currentTab === TabEnum.edit && (
-          <Box position={'fixed'} zIndex={999} top={0} left={0} right={0} bottom={0}>
-            <EditApp app={appDetail} onBack={() => setCurrentTab(TabEnum.settings)} />
+        {/* phone tab */}
+        <Box display={['block', 'none']} textAlign={'center'} px={5} py={3}>
+          <Box className="textlg" fontSize={'3xl'} fontWeight={'bold'}>
+            {appDetail.name}
           </Box>
-        )}
-        {currentTab === TabEnum.API && <API modelId={appId} />}
-        {currentTab === TabEnum.share && <Share modelId={appId} />}
+          <Tabs
+            mx={'auto'}
+            mt={2}
+            w={'300px'}
+            list={tabList}
+            size={'sm'}
+            activeId={currentTab}
+            onChange={(e: any) => {
+              if (e === 'startChat') {
+                router.push(`/chat?modelId=${appId}`);
+              } else {
+                setCurrentTab(e);
+              }
+            }}
+          />
+        </Box>
+        <Box flex={1}>
+          {currentTab === TabEnum.settings && <Settings modelId={appId} />}
+          {currentTab === TabEnum.edit && (
+            <Box position={'fixed'} zIndex={999} top={0} left={0} right={0} bottom={0}>
+              <EditApp app={appDetail} onBack={() => setCurrentTab(TabEnum.settings)} />
+            </Box>
+          )}
+          {currentTab === TabEnum.API && <API modelId={appId} />}
+          {currentTab === TabEnum.share && <Share modelId={appId} />}
+        </Box>
       </Box>
     </Flex>
   );