feat:查看日志细节调整

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

@@ -58,7 +58,7 @@
 	overflow: hidden;
 }
 
-.middleDynamic{
+.middleDynamic {
 	display: flex;
 	position: absolute;
 	left: 0;
@@ -79,6 +79,10 @@
 	border-right: 1px solid #10141A;
 }
 
+.logTitle:hover {
+	background-color: #23272E;
+}
+
 .logName {
 	max-width: 90px;
 	overflow: hidden;
@@ -130,3 +134,11 @@
 	height: 76px;
 	padding-right: 24px;
 }
+
+.gradientBox {
+	position: absolute;
+	right: 49px;
+	width: 28px;
+	height: 32px;
+	background: linear-gradient(90deg, rgba(29, 33, 38, 0) 0%, #1D2126 100%);
+}
\ No newline at end of file

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

@@ -70,7 +70,7 @@ const LogView = (props: LogViewProps) => {
     }, [])
 
     useEffect(() => {
-        if (middleDynamicWidth < width - 97){
+        if (middleDynamicWidth < width - 97) {
             setLeftButtonColor('#585D62')
             setRightButtonColor('#585D62')
         }
@@ -79,9 +79,9 @@ const LogView = (props: LogViewProps) => {
         } else {
             setLeftButtonColor('#C0C5CD')
         }
-        if (middleDynamicWidth > width - 97 && displacement !== -middleDynamicWidth + width - 97){
+        if (middleDynamicWidth > width - 97 && displacement !== -middleDynamicWidth + width - 97) {
             setRightButtonColor('#C0C5CD')
-        }else{
+        } else {
             setRightButtonColor('#585D62')
         }
     }, [width, middleDynamicWidth, displacement])
@@ -100,7 +100,7 @@ const LogView = (props: LogViewProps) => {
         if (middleDynamicWidth < width - 97) {
             return
         }
-        if (-displacement > middleDynamicWidth - width * 1.8) {
+        if (-displacement > middleDynamicWidth - width * 1.8 + 97) {
             setDisplacement(-middleDynamicWidth + width - 97)
             return
         }
@@ -131,7 +131,7 @@ const LogView = (props: LogViewProps) => {
                     </div>
                     <div className={style.middleFixed}>
                         <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) => {
+                            {logs.map((item: any, index: number) => {
                                 return <MyTooltip
                                     title={item.logName}
                                     placement="bottom"
@@ -151,6 +151,7 @@ const LogView = (props: LogViewProps) => {
                             })}
                         </div>
                     </div>
+                    <div className={style.gradientBox}></div>
                     <div
                         className={style.rightButton}
                         onClick={rightClick}