perf: phone ui

32395346 · archer · f5fad608 · 32395346 · 32395346 · 32395346
Commit 32395346 authored Jul 22, 2023 by archer
Showing with 42 additions and 31 deletions

client/src/constants/theme.ts
+3 -1

client/src/pages/app/detail/components/BasicEdit/index.tsx
+19 -16

client/src/pages/app/detail/components/KBSelectModal.tsx
+17 -11

client/src/pages/app/detail/components/OverView.tsx
+3 -3

No files found.
--- 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'
+    }
  })
 });

--- 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 {...LabelStyles}>对话模型</Box>
-              对话模型
-            </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 {...LabelStyles}>温度</Box>
-              温度
-            </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 {...LabelStyles}>回复上限</Box>
-              回复上限
-            </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>
  );
 };

--- 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 display={['block', 'flex']} pt={3} pb={5}>
-            <Box flex={'0 0 100px'}>
+            <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>
+          </Box>
-          <Flex py={8}>
+          <Box display={['block', 'flex']} py={8}>
-            <Box flex={'0 0 100px'}>单次搜索数量</Box>
+            <Box flex={'0 0 100px'} mb={[8, 0]}>
+              单次搜索数量
+            </Box>
            <Box flex={1}>
              <MySlider
                markList={[
@@ -180,9 +184,11 @@ export const KbParamsModal = ({
                }}
              />
            </Box>
-          </Flex>
+          </Box>
-          <Flex pt={3}>
+          <Box display={['block', 'flex']} pt={3}>
-            <Box flex={'0 0 100px'}>空搜索回复</Box>
+            <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}>

--- 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>
  );
 };