feat:查看日志优化

src/components/mui/MyTooltip.tsx

@@ -19,6 +19,7 @@ const theme = createTheme({
 			styleOverrides: {
 				tooltip: {
 					backgroundColor: "rgba(7, 19, 38, .8)",
+					padding:'8px 12px',
 					color: "#fff",
 				},
 				arrow: {

src/hooks/useWindowSize.ts

+import {useEffect,useState} from 'react'
+
+interface WindowSize{
+    width:number
+    height:number
+}
+
+function useWindowSize():WindowSize{
+    const [windowSize,setWindowSize]=useState<WindowSize>({
+        width:0,
+        height:0,
+    })
+
+    useEffect(()=>{
+        const handler=()=>{
+            setWindowSize({
+                width:window.innerWidth,
+                height:window.innerHeight
+            })
+        }
+        handler()
+        window.addEventListener('resize',handler)
+        return ()=>{
+            window.removeEventListener('resize',handler)
+        }
+    },[])
+
+    return windowSize
+}
+
+export default useWindowSize
\ No newline at end of file

src/views/Project/ProjectJobDetail/LogView/index.module.css

@@ -62,6 +62,7 @@
 	display: flex;
 	position: absolute;
 	left: 0;
+	transition: left .8s ease-in-out;
 }
 
 .logTitle {

src/views/Project/ProjectJobDetail/LogView/index.tsx

 import { useState, useCallback, useEffect, useMemo } from "react";
 import classnames from "classnames";
 import style from "./index.module.css";
-import CloseIcon from "@mui/icons-material/Close";
 import MyButton from "@/components/mui/MyButton";
+import MyTooltip from "@/components/mui/MyTooltip";
 import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
 import CloudEController from "@/api/fileserver/CloudEController";
 import { useStores } from "@/store";
@@ -10,6 +10,7 @@ import { toJS } from "mobx";
 import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import useWindowSize from '@/hooks/useWindowSize'
 
 
 type LogViewProps = {
@@ -20,6 +21,7 @@ type LogViewProps = {
 const LogView = (props: LogViewProps) => {
     const { logs, setShowLogView } = props;
     const { currentProjectStore } = useStores();
+    const { width, height } = useWindowSize();
     const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
     const projectId = toJS(currentProjectStore.currentProjectInfo.id);
     // 当前选择的日志
@@ -29,6 +31,13 @@ const LogView = (props: LogViewProps) => {
     // 当前日志路径
     const [logPath, setLogPath] = useState('')
 
+    const [displacement, setDisplacement] = useState(0)
+
+    const [middleDynamicWidth, setMiddleDynamicWidth] = useState(0)
+
+    const [leftButtonColor, setLeftButtonColor] = useState('#585D62')
+    const [rightButtonColor, setRightButtonColor] = useState('#585D62')
+
     useEffect(() => {
         setLogPath(logs[logCurrent]?.logPath)
     }, [logs]);
@@ -54,6 +63,29 @@ const LogView = (props: LogViewProps) => {
         setLogPath(logs[logCurrent]?.logPath)
     }, [logCurrent]);
 
+    //获取盒子的总宽度，用于滑动效果判断
+    useEffect(() => {
+        const box = document.getElementById('middleDynamic')
+        setMiddleDynamicWidth(box ? box.offsetWidth : 0)
+    }, [])
+
+    useEffect(() => {
+        if (middleDynamicWidth < width - 97){
+            setLeftButtonColor('#585D62')
+            setRightButtonColor('#585D62')
+        }
+        if (displacement === 0) {
+            setLeftButtonColor('#585D62')
+        } else {
+            setLeftButtonColor('#C0C5CD')
+        }
+        if (middleDynamicWidth > width - 97 && displacement !== -middleDynamicWidth + width - 97){
+            setRightButtonColor('#C0C5CD')
+        }else{
+            setRightButtonColor('#585D62')
+        }
+    }, [width, middleDynamicWidth, displacement])
+
     // 下载当前日志
     const handleDownLoad = () => {
         const path = logPath.slice(12)
@@ -64,29 +96,68 @@ const LogView = (props: LogViewProps) => {
         );
     }
 
+    const rightClick = () => {
+        if (middleDynamicWidth < width - 97) {
+            return
+        }
+        if (-displacement > middleDynamicWidth - width * 1.8) {
+            setDisplacement(-middleDynamicWidth + width - 97)
+            return
+        }
+        const newDisplacement = displacement - width * 0.8;
+        setDisplacement(newDisplacement)
+    }
+
+    const leftClick = () => {
+        if (-displacement < width * 0.8) {
+            setDisplacement(0)
+            return
+        }
+        const newDisplacement = displacement + width * 0.8;
+        setDisplacement(newDisplacement)
+    }
+
     return (
         <FullScreenDrawer handleClose={setShowLogView} zIndex={1002}>
             <div className={style.logViewBox}>
                 <div className={style.logViewContentMask}></div>
                 <div className={style.logViewTop}>
-                    <div className={style.leftButton}><ChevronLeftIcon /></div>
+                    <div
+                        className={style.leftButton}
+                        onClick={leftClick}
+                        style={{ color: leftButtonColor }}
+                    >
+                        <ChevronLeftIcon />
+                    </div>
                     <div className={style.middleFixed}>
-                        <div className={style.middleDynamic}>
-                            {logs.map((item: any, index: number) => {
-                                return <div
-                                    key={index}
-                                    onClick={() => { setLogCurrent(index) }}
-                                    className={classnames({
-                                        [style.logTitle]: true,
-                                        [style.logTitleSelected]: index === logCurrent,
-                                    })}>
-                                    <InsertDriveFileOutlinedIcon className={style.fileIcon} />
-                                    <span className={style.logName}>{item.logName}</span>
-                                </div>
+                        <div className={style.middleDynamic} id='middleDynamic' style={{ left: `${displacement}px` }}>
+                            {[...logs, ...logs, ...logs, ...logs, ...logs, ...logs, ...logs, ...logs, ...logs, ...logs, ...logs].map((item: any, index: number) => {
+                                return <MyTooltip
+                                    title={item.logName}
+                                    placement="bottom"
+                                    arrow={false}
+                                >
+                                    <div
+                                        key={index}
+                                        onClick={() => { setLogCurrent(index) }}
+                                        className={classnames({
+                                            [style.logTitle]: true,
+                                            [style.logTitleSelected]: index === logCurrent,
+                                        })}>
+                                        <InsertDriveFileOutlinedIcon className={style.fileIcon} />
+                                        <span className={style.logName}>{item.logName}</span>
+                                    </div>
+                                </MyTooltip>
                             })}
                         </div>
                     </div>
-                    <div className={style.rightButton}><ChevronRightIcon /></div>
+                    <div
+                        className={style.rightButton}
+                        onClick={rightClick}
+                        style={{ color: rightButtonColor }}
+                    >
+                        <ChevronRightIcon />
+                    </div>
                 </div>
                 <div className={style.logViewContent}>
                     {logText}