perf: 运行详情弹窗优化 (#2192)

* perf: 运行详情弹窗优化

* style: 调整样式

* style: 弹窗样式优化&&应用切换圆角添加

* fix: 修复编译错误

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx

@@ -573,8 +573,8 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
             top={0}
             zIndex={10}
             w={'420px'}
-            maxH={'100%'}
             minH={'300px'}
+            maxH={'100%'}
             border={'base'}
           >
             {/* Status header */}
@@ -614,7 +614,7 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
               )}
             </Flex>
             {/* Show result */}
-            <Box maxH={'calc(100%-54px)'} overflow={'auto'}>
+            <Box overflowY={'auto'}>
               {!debugResult.message && !response && (
                 <EmptyTip text={t('common:core.workflow.debug.Not result')} pt={2} pb={5} />
               )}
@@ -623,7 +623,9 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
                   {debugResult.message}
                 </Box>
               )}
-              {response && <ResponseBox response={[response]} showDetail hideTabs />}
+              {response && (
+                <ResponseBox useMobile={true} response={[response]} showDetail hideTabs />
+              )}
             </Box>
           </Card>
         )}

projects/app/src/pages/chat/components/ChatHeader.tsx

@@ -174,7 +174,7 @@ const MobileDrawer = ({
                           onClick: () => onclickApp(item._id)
                         })}
                   >
-                    <Avatar src={item.avatar} w={'24px'} />
+                    <Avatar src={item.avatar} w={'24px'} borderRadius={'sm'} />
                     <Box ml={2} className={'textEllipsis'}>
                       {item.name}
                     </Box>
@@ -223,7 +223,7 @@ const MobileHeader = ({
       )}
       <Flex px={3} alignItems={'center'} flex={'1 0 0'} w={0} justifyContent={'center'}>
         <Flex alignItems={'center'} onClick={toggleDrawer}>
-          <Avatar src={avatar} w={'1rem'} />
+          <Avatar borderRadius={'sm'} src={avatar} w={'1rem'} />
           <Box ml={1} className="textEllipsis">
             {name}
           </Box>

projects/app/src/pages/chat/components/CustomPluginRunBox.tsx

@@ -27,7 +27,7 @@ const CustomPluginRunBox = (props: PluginRunBoxProps) => {
         <PluginRunBox {...props} tab={PluginRunBoxTabEnum.input} />
       </Box>
       <Stack px={3} py={4} h={'100%'} alignItems={'flex-start'} w={'100%'} overflow={'auto'}>
-        <Box display={'inline-block'} mb={5}>
+        <Box display={'inline-block'}>
           <LightRowTabs<PluginRunBoxTabEnum>
             list={[
               { label: t('common:common.Output'), value: PluginRunBoxTabEnum.output },
@@ -61,7 +61,7 @@ const CustomPluginRunBox = (props: PluginRunBoxProps) => {
         py={0}
         fontSize={'sm'}
       />
-      <Box mt={3} flex={'1 0 0'} w={'100%'}>
+      <Box flex={'1 0 0'} w={'100%'}>
         <PluginRunBox {...props} />
       </Box>
     </Stack>