refactor: optimize sandbox editor layout and improve preview mode switching logic (#6746)

projects/app/src/pageComponents/chat/SandboxEditor/Editor.tsx

@@ -319,6 +319,7 @@ const SandboxEditor = ({ appId, chatId, outLinkAuthData }: Props) => {
           display={'flex'}
           display={'flex'}
           flex={1}
           flex={1}
           w={0}
           w={0}
+          minH={0}
           flexDirection="column"
           flexDirection="column"
           bg="myGray.25"
           bg="myGray.25"
         >
         >

projects/app/src/pageComponents/chat/SandboxEditor/components/EditorContent.tsx

@@ -53,9 +53,11 @@ const EditorContent = ({
   const [generatingLink, setGeneratingLink] = useState(false);
   const [generatingLink, setGeneratingLink] = useState(false);
   const openedFilesRef = useLatest(openedFiles);
   const openedFilesRef = useLatest(openedFiles);
 
 
-  // 切换文件时，如果新文件不支持预览模式，重置为 source
+  // 切换文件时，如果新文件支持预览则切换到预览模式，否则重置为源码模式。
   useEffect(() => {
   useEffect(() => {
-    if (!getSupportsPreviewToggle(activeFile?.language) && viewMode === 'preview') {
+    if (getSupportsPreviewToggle(activeFile?.language)) {
+      setViewMode('preview');
+    } else {
       setViewMode('source');
       setViewMode('source');
     }
     }
   }, [activeFilePath]);
   }, [activeFilePath]);
@@ -92,17 +94,15 @@ const EditorContent = ({
 
 
       if (content.startsWith('blob:') && language === 'image') {
       if (content.startsWith('blob:') && language === 'image') {
         return (
         return (
-          <Center h="full" bg="myGray.50" borderRadius="md" p={4}>
-            <Box position="relative" maxW="100%" maxH="100%">
-              <MyPhotoView src={content} alt={name} maxW="100%" maxH="100%" objectFit="contain" />
-            </Box>
-          </Center>
+          <Box h="full" overflow="auto">
+            <MyPhotoView src={content} alt={name} maxW="100%" objectFit="contain" />
+          </Box>
         );
         );
       }
       }
 
 
       if (content.startsWith('blob:') && language === 'audio') {
       if (content.startsWith('blob:') && language === 'audio') {
         return (
         return (
-          <Center h="full" bg="myGray.50" borderRadius="md">
+          <Center h="full">
             <audio controls src={content}>
             <audio controls src={content}>
               Your browser does not support the audio element.
               Your browser does not support the audio element.
             </audio>
             </audio>
@@ -112,7 +112,7 @@ const EditorContent = ({
 
 
       if (content.startsWith('blob:') && language === 'video') {
       if (content.startsWith('blob:') && language === 'video') {
         return (
         return (
-          <Center h="full" bg="myGray.50" borderRadius="md" p={4}>
+          <Center h="full">
             <video controls src={content} style={{ maxWidth: '100%', maxHeight: '100%' }}>
             <video controls src={content} style={{ maxWidth: '100%', maxHeight: '100%' }}>
               Your browser does not support the video element.
               Your browser does not support the video element.
             </video>
             </video>
@@ -129,7 +129,7 @@ const EditorContent = ({
       const { language, content } = activeFile;
       const { language, content } = activeFile;
       if (language === 'markdown') {
       if (language === 'markdown') {
         return (
         return (
-          <Box h="full" overflow="auto" bg="white">
+          <Box h="full" overflowY="auto" bg="white">
             <Markdown source={content} />
             <Markdown source={content} />
           </Box>
           </Box>
         );
         );
@@ -137,17 +137,9 @@ const EditorContent = ({
       if (language === 'svg') {
       if (language === 'svg') {
         const svgUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(content)}`;
         const svgUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(content)}`;
         return (
         return (
-          <Center h="full" bg="myGray.50" borderRadius="md" p={4}>
-            <Box position="relative" maxW="100%" maxH="100%">
-              <MyPhotoView
-                src={svgUri}
-                alt={activeFile.name}
-                maxW="100%"
-                maxH="100%"
-                objectFit="contain"
-              />
-            </Box>
-          </Center>
+          <Box h="full" overflow="auto">
+            <MyPhotoView src={svgUri} alt={activeFile.name} maxW="100%" objectFit="contain" />
+          </Box>
         );
         );
       }
       }
     }
     }
@@ -226,6 +218,8 @@ const EditorContent = ({
       flexDirection="column"
       flexDirection="column"
       borderRadius={'md'}
       borderRadius={'md'}
       bg={'white'}
       bg={'white'}
+      minH={0}
+      h="100%"
     >
     >
       <Flex
       <Flex
         align="center"
         align="center"
@@ -254,8 +248,8 @@ const EditorContent = ({
           {getSupportsPreviewToggle(activeFile?.language) && (
           {getSupportsPreviewToggle(activeFile?.language) && (
             <FillRowTabs
             <FillRowTabs
               list={[
               list={[
-                { label: t('chat:sandbox_source'), value: 'source' },
-                { label: t('chat:sandbox_preview'), value: 'preview' }
+                { label: t('chat:sandbox_preview'), value: 'preview' },
+                { label: t('chat:sandbox_source'), value: 'source' }
               ]}
               ]}
               value={viewMode}
               value={viewMode}
               onChange={(v) => setViewMode(v as 'source' | 'preview')}
               onChange={(v) => setViewMode(v as 'source' | 'preview')}
@@ -287,7 +281,7 @@ const EditorContent = ({
         </Flex>
         </Flex>
       </Flex>
       </Flex>
 
 
-      <Box flex={1} borderColor="myGray.200" overflow="hidden">
+      <Box flex={1} overflow="hidden" position="relative" zIndex={1} minH={0}>
         {renderFileContent()}
         {renderFileContent()}
       </Box>
       </Box>
     </Flex>
     </Flex>