From 323953462b30caf38072abdc095221ce089648ea Mon Sep 17 00:00:00 2001
From: archer <545436317@qq.com>
Date: Sat, 22 Jul 2023 22:18:16 +0800
Subject: [PATCH] perf: phone ui

---
 client/src/constants/theme.ts                 |  4 ++-
 .../app/detail/components/BasicEdit/index.tsx | 35 ++++++++++---------
 .../app/detail/components/KBSelectModal.tsx   | 28 +++++++++------
 .../pages/app/detail/components/OverView.tsx  |  6 ++--
 4 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/client/src/constants/theme.ts b/client/src/constants/theme.ts
index 97ed528c4..397a5bce6 100644
--- a/client/src/constants/theme.ts
+++ b/client/src/constants/theme.ts
@@ -17,7 +17,9 @@ const { definePartsStyle: numInputPart, defineMultiStyleConfig: numInputMultiSty
 // modal 弹窗
 const ModalTheme = defineMultiStyleConfig({
   baseStyle: definePartsStyle({
-    dialog: {}
+    dialog: {
+      maxW: '90vw'
+    }
   })
 });
 
diff --git a/client/src/pages/app/detail/components/BasicEdit/index.tsx b/client/src/pages/app/detail/components/BasicEdit/index.tsx
index ffd4ed3d5..91ea004f6 100644
--- a/client/src/pages/app/detail/components/BasicEdit/index.tsx
+++ b/client/src/pages/app/detail/components/BasicEdit/index.tsx
@@ -21,6 +21,7 @@ import { useUserStore } from '@/store/user';
 import { useQuery } from '@tanstack/react-query';
 import { QuestionOutlineIcon, SmallAddIcon } from '@chakra-ui/icons';
 import { useForm, useFieldArray } from 'react-hook-form';
+import { useGlobalStore } from '@/store/global';
 import {
   appModules2Form,
   getDefaultAppForm,
@@ -59,6 +60,7 @@ const VariableEditModal = dynamic(() => import('../VariableEditModal'));
 const Settings = ({ appId }: { appId: string }) => {
   const theme = useTheme();
   const { appDetail, updateAppDetail, loadKbList, myKbList } = useUserStore();
+  const { isPc } = useGlobalStore();
 
   const [editVariable, setEditVariable] = useState<VariableItemType>();
 
@@ -153,9 +155,15 @@ const Settings = ({ appId }: { appId: string }) => {
       bg: 'myGray.200'
     }
   };
+  const LabelStyles: BoxProps = {
+    w: ['60px', '100px'],
+    flexShrink: 0,
+    fontSize: ['sm', 'md']
+  };
 
   return (
-    <Flex
+    <Box
+      display={['block', 'flex']}
       flexDirection={'column'}
       h={'100%'}
       borderRight={'1.5px solid'}
@@ -163,7 +171,7 @@ const Settings = ({ appId }: { appId: string }) => {
       pt={4}
       pl={4}
     >
-      <Flex overflowY={'auto'} pr={4} justifyContent={'space-between'}>
+      <Flex pr={4} justifyContent={'space-between'}>
         <Box fontSize={['md', 'xl']} fontWeight={'bold'}>
           应用配置
           <MyTooltip label={'仅包含基础功能，复杂 agent 功能请使用高级编排。'}>
@@ -175,7 +183,7 @@ const Settings = ({ appId }: { appId: string }) => {
           fontSize={'sm'}
           onClick={openConfirm(handleSubmit((data) => onSubmitSave(data)))}
         >
-          保存并预览
+          {isPc ? '保存并预览' : '保存'}
         </Button>
       </Flex>
       <Box flex={'1 0 0'} my={4} pr={4} overflowY={'auto'}>
@@ -243,9 +251,7 @@ const Settings = ({ appId }: { appId: string }) => {
           </Flex>
 
           <Flex alignItems={'center'} mt={5}>
-            <Box w={['60px', '100px']} flexShrink={0}>
-              对话模型
-            </Box>
+            <Box {...LabelStyles}>对话模型</Box>
             <MySelect
               width={['100%', '300px']}
               value={getValues('chatModel.model')}
@@ -262,9 +268,7 @@ const Settings = ({ appId }: { appId: string }) => {
             />
           </Flex>
           <Flex alignItems={'center'} my={10}>
-            <Box w={['60px', '100px']} flexShrink={0}>
-              温度
-            </Box>
+            <Box {...LabelStyles}>温度</Box>
             <Box flex={1} ml={'10px'}>
               <MySlider
                 markList={[
@@ -283,9 +287,7 @@ const Settings = ({ appId }: { appId: string }) => {
             </Box>
           </Flex>
           <Flex alignItems={'center'} mt={12} mb={10}>
-            <Box w={['60px', '100px']} flexShrink={0}>
-              回复上限
-            </Box>
+            <Box {...LabelStyles}>回复上限</Box>
             <Box flex={1} ml={'10px'}>
               <MySlider
                 markList={[
@@ -305,7 +307,7 @@ const Settings = ({ appId }: { appId: string }) => {
             </Box>
           </Flex>
           <Flex mt={10} alignItems={'flex-start'}>
-            <Box w={['60px', '100px']} flexShrink={0}>
+            <Box {...LabelStyles}>
               提示词
               <MyTooltip label={ChatModelSystemTip}>
                 <QuestionOutlineIcon display={['none', 'inline']} ml={1} />
@@ -319,7 +321,7 @@ const Settings = ({ appId }: { appId: string }) => {
             ></Textarea>
           </Flex>
           <Flex mt={5} alignItems={'flex-start'}>
-            <Box w={['60px', '100px']} flexShrink={0}>
+            <Box {...LabelStyles}>
               限定词
               <MyTooltip label={ChatModelLimitTip}>
                 <QuestionOutlineIcon display={['none', 'inline']} ml={1} />
@@ -434,7 +436,7 @@ const Settings = ({ appId }: { appId: string }) => {
           }}
         />
       )}
-    </Flex>
+    </Box>
   );
 };
 
@@ -517,10 +519,11 @@ const ChatTest = ({ appId }: { appId: string }) => {
 };
 
 const BasicEdit = ({ appId }: { appId: string }) => {
+  const { isPc } = useGlobalStore();
   return (
     <Grid gridTemplateColumns={['1fr', '550px 1fr']} h={'100%'}>
       <Settings appId={appId} />
-      <ChatTest appId={appId} />
+      {isPc && <ChatTest appId={appId} />}
     </Grid>
   );
 };
diff --git a/client/src/pages/app/detail/components/KBSelectModal.tsx b/client/src/pages/app/detail/components/KBSelectModal.tsx
index 022043b0d..f414216e4 100644
--- a/client/src/pages/app/detail/components/KBSelectModal.tsx
+++ b/client/src/pages/app/detail/components/KBSelectModal.tsx
@@ -17,10 +17,11 @@ import {
 import Avatar from '@/components/Avatar';
 import { KbListItemType } from '@/types/plugin';
 import { useForm } from 'react-hook-form';
-import MyTooltip from '@/components/MyTooltip';
 import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import type { SelectedKbType } from '@/types/plugin';
+import { useGlobalStore } from '@/store/global';
 import MySlider from '@/components/Slider';
+import MyTooltip from '@/components/MyTooltip';
 
 export type KbParamsType = {
   searchSimilarity: number;
@@ -41,9 +42,10 @@ export const KBSelectModal = ({
 }) => {
   const theme = useTheme();
   const [selectedKbList, setSelectedKbList] = useState<SelectedKbType>(activeKbs);
+  const { isPc } = useGlobalStore();
 
   return (
-    <Modal isOpen={true} onClose={onClose}>
+    <Modal isOpen={true} isCentered={!isPc} onClose={onClose}>
       <ModalOverlay />
       <ModalContent
         display={'flex'}
@@ -141,8 +143,8 @@ export const KbParamsModal = ({
         <ModalHeader>搜索参数调整</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <Flex pt={3} pb={5}>
-            <Box flex={'0 0 100px'}>
+          <Box display={['block', 'flex']} pt={3} pb={5}>
+            <Box flex={'0 0 100px'} mb={[8, 0]}>
               相似度
               <MyTooltip label={'高相似度推荐0.8及以上。'}>
                 <QuestionOutlineIcon ml={1} />
@@ -162,9 +164,11 @@ export const KbParamsModal = ({
                 setRefresh(!refresh);
               }}
             />
-          </Flex>
-          <Flex py={8}>
-            <Box flex={'0 0 100px'}>单次搜索数量</Box>
+          </Box>
+          <Box display={['block', 'flex']} py={8}>
+            <Box flex={'0 0 100px'} mb={[8, 0]}>
+              单次搜索数量
+            </Box>
             <Box flex={1}>
               <MySlider
                 markList={[
@@ -180,9 +184,11 @@ export const KbParamsModal = ({
                 }}
               />
             </Box>
-          </Flex>
-          <Flex pt={3}>
-            <Box flex={'0 0 100px'}>空搜索回复</Box>
+          </Box>
+          <Box display={['block', 'flex']} pt={3}>
+            <Box flex={'0 0 100px'} mb={[2, 0]}>
+              空搜索回复
+            </Box>
             <Box flex={1}>
               <Textarea
                 rows={5}
@@ -193,7 +199,7 @@ export const KbParamsModal = ({
                 {...register('searchEmptyText')}
               ></Textarea>
             </Box>
-          </Flex>
+          </Box>
         </ModalBody>
         <ModalFooter>
           <Button variant={'base'} mr={3} onClick={onClose}>
diff --git a/client/src/pages/app/detail/components/OverView.tsx b/client/src/pages/app/detail/components/OverView.tsx
index c20d833a6..6c38b475e 100644
--- a/client/src/pages/app/detail/components/OverView.tsx
+++ b/client/src/pages/app/detail/components/OverView.tsx
@@ -54,7 +54,7 @@ const OverView = ({ appId }: { appId: string }) => {
   });
 
   return (
-    <Flex h={'100%'} flexDirection={'column'} position={'relative'}>
+    <Box h={'100%'} display={['block', 'flex']} flexDirection={'column'} position={'relative'}>
       <Grid
         gridTemplateColumns={['1fr', 'repeat(2,1fr)']}
         gridGap={[2, 4, 6]}
@@ -142,7 +142,7 @@ const OverView = ({ appId }: { appId: string }) => {
         </Flex>
       </Grid>
 
-      <Box flex={'1 0 0'} h={0} mt={4} borderTop={theme.borders.base}>
+      <Box flex={'1 0 0'} h={['auto', 0]} mt={4} borderTop={theme.borders.base}>
         <BasicEdit appId={appId} />
       </Box>
 
@@ -151,7 +151,7 @@ const OverView = ({ appId }: { appId: string }) => {
       )}
       <ConfirmChild />
       <Loading fixed={false} />
-    </Flex>
+    </Box>
   );
 };