From 902bb0635333e70b96158beeb0c48724d7a53f54 Mon Sep 17 00:00:00 2001 From: jialin Date: Tue, 22 Oct 2024 15:11:35 +0800 Subject: [PATCH] fix: logs viewer do not scroll after opened --- plugin.ts | 2 +- src/components/logs-viewer/index.tsx | 41 ++++++++++++++++++++------- src/components/version-info/index.tsx | 7 +++-- src/global.less | 22 ++++++++++++++ src/hooks/use-overlay-scroller.ts | 22 ++++++++++++-- src/locales/en-US/users.ts | 2 +- src/locales/zh-CN/users.ts | 2 +- 7 files changed, 80 insertions(+), 18 deletions(-) diff --git a/plugin.ts b/plugin.ts index 60ea513d..eee12a56 100644 --- a/plugin.ts +++ b/plugin.ts @@ -3,7 +3,7 @@ import { IApi } from '@umijs/max'; export default (api: IApi) => { api.modifyHTML(($) => { const info = JSON.parse(process.env.VERSION || '{}'); - const env = info.version ? 'production' : 'development'; + const env = process.env.NODE_ENV; $('html').attr('data-env', env); diff --git a/src/components/logs-viewer/index.tsx b/src/components/logs-viewer/index.tsx index 00c92192..281960bf 100644 --- a/src/components/logs-viewer/index.tsx +++ b/src/components/logs-viewer/index.tsx @@ -15,10 +15,16 @@ interface LogsViewerProps { } const LogsViewer: React.FC = (props) => { const { height, url } = props; - const { initialize, updateScrollerPosition, scrollEventElement } = - useOverlayScroller({ - theme: 'os-theme-light' - }); + const { + initialize, + updateScrollerPosition, + generateInstance, + scrollEventElement, + instance, + initialized + } = useOverlayScroller({ + theme: 'os-theme-light' + }); const { isClean, parseAnsi } = useParseAnsi(); const { setChunkFetch } = useSetChunkFetch(); const chunkRequedtRef = useRef(null); @@ -62,11 +68,12 @@ const LogsViewer: React.FC = (props) => { const debounceResetStopScroll = _.debounce(() => { stopScroll.current = false; }, 30000); + const handleOnWheel = useCallback( (e: any) => { - const scrollTop = scrollEventElement.scrollTop; - const scrollHeight = scrollEventElement.scrollHeight; - const clientHeight = scrollEventElement.clientHeight; + const scrollTop = scrollEventElement?.scrollTop; + const scrollHeight = scrollEventElement?.scrollHeight; + const clientHeight = scrollEventElement?.clientHeight; if (scrollTop + clientHeight >= scrollHeight) { stopScroll.current = false; } else { @@ -74,9 +81,14 @@ const LogsViewer: React.FC = (props) => { } debounceResetStopScroll(); }, - [debounceResetStopScroll] + [debounceResetStopScroll, scrollEventElement] ); + const debounceUpdateScrollerPosition = _.debounce(() => { + generateInstance(); + updateScrollerPosition(0); + }, 200); + useEffect(() => { createChunkConnection(); return () => { @@ -91,10 +103,19 @@ const LogsViewer: React.FC = (props) => { }, [scroller.current, initialize]); useEffect(() => { - if (logs.length && !stopScroll.current) { + if (logs.length && !stopScroll.current && instance) { updateScrollerPosition(0); + } else if (logs.length && !stopScroll.current && scroller.current) { + if (!initialized) { + initialize(scroller.current); + } + if (!instance) { + debounceUpdateScrollerPosition(); + } else { + updateScrollerPosition(0); + } } - }, [logs, stopScroll.current]); + }, [logs, stopScroll.current, instance, scroller.current]); return (
diff --git a/src/components/version-info/index.tsx b/src/components/version-info/index.tsx index 9a104a7d..2804d7a8 100644 --- a/src/components/version-info/index.tsx +++ b/src/components/version-info/index.tsx @@ -10,8 +10,7 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => { const latestVersion = getAtomStorage(UpdateCheckAtom).latest_version; const currentVersion = getAtomStorage(GPUStackVersionAtom)?.version; - const isProd = - document.documentElement.getAttribute('data-env') === 'production'; + const isProd = currentVersion !== '0.0.0'; const uiVersion = document.documentElement.getAttribute('data-version'); @@ -51,7 +50,9 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => { {getAtomStorage(userAtom)?.is_admin && (
- {latestVersion && latestVersion !== currentVersion + {latestVersion && + latestVersion !== currentVersion && + latestVersion !== '0.0.0' ? intl.formatMessage( { id: 'users.version.update' }, { version: latestVersion } diff --git a/src/global.less b/src/global.less index 6dc0b6cc..e6821c31 100644 --- a/src/global.less +++ b/src/global.less @@ -509,6 +509,28 @@ body { border-radius: 8px; } +.ant-modal-centered.ant-modal-wrap { + &::-webkit-scrollbar { + width: var(--scrollbar-size); + } + + &::-webkit-scrollbar-thumb { + background-color: transparent; + border-radius: 4px; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } + + &:hover { + &::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-handle-bg); + border-radius: 4px; + } + } +} + .custome-scrollbar { &::-webkit-scrollbar { width: var(--scrollbar-size); diff --git a/src/hooks/use-overlay-scroller.ts b/src/hooks/use-overlay-scroller.ts index 2a71e7bc..8bdc8cd8 100644 --- a/src/hooks/use-overlay-scroller.ts +++ b/src/hooks/use-overlay-scroller.ts @@ -1,7 +1,7 @@ import { throttle } from 'lodash'; import { - useOverlayScrollbars, - UseOverlayScrollbarsParams + UseOverlayScrollbarsParams, + useOverlayScrollbars } from 'overlayscrollbars-react'; import React from 'react'; @@ -26,6 +26,7 @@ export const overlaySollerOptions: UseOverlayScrollbarsParams = { export default function useOverlayScroller(options?: any) { const scrollEventElement = React.useRef(null); const instanceRef = React.useRef(null); + const initialized = React.useRef(false); const [initialize, instance] = useOverlayScrollbars({ options: { update: { @@ -43,6 +44,7 @@ export default function useOverlayScroller(options?: any) { }, defer: true }); + instanceRef.current = instance?.(); scrollEventElement.current = instanceRef.current?.elements()?.scrollEventElement; @@ -78,6 +80,12 @@ export default function useOverlayScroller(options?: any) { [throttledScroll, scrollauto] ); + const generateInstance = () => { + instanceRef.current = instance?.(); + scrollEventElement.current = + instanceRef.current?.elements()?.scrollEventElement; + }; + const createInstance = React.useCallback( (el: any) => { if (instanceRef.current) { @@ -85,6 +93,14 @@ export default function useOverlayScroller(options?: any) { } if (el) { initialize(el); + initialized.current = true; + console.log( + 'createInstance===2', + initialized.current, + instanceRef.current, + instance?.(), + instance + ); instanceRef.current = instance?.(); scrollEventElement.current = instanceRef.current?.elements()?.scrollEventElement; @@ -97,6 +113,8 @@ export default function useOverlayScroller(options?: any) { initialize: createInstance, instance: instanceRef.current, scrollEventElement: scrollEventElement.current, + initialized: initialized.current, + generateInstance, updateScrollerPosition: throttledUpdateScrollerPosition }; } diff --git a/src/locales/en-US/users.ts b/src/locales/en-US/users.ts index 9879d5d4..6a5b7700 100644 --- a/src/locales/en-US/users.ts +++ b/src/locales/en-US/users.ts @@ -26,6 +26,6 @@ export default { 'users.password.confirm.empty': 'Please confirm the new password.', 'users.password.confirm.error': 'The two passwords entered do not match.', 'users.login.title': 'Log in to {name}', - 'users.version.islatest': '{version} is the latest version', + 'users.version.islatest': 'GPUStack {version} is the latest version', 'users.version.update': 'GPUStack {version} is available' }; diff --git a/src/locales/zh-CN/users.ts b/src/locales/zh-CN/users.ts index 99d72382..40fe82ee 100644 --- a/src/locales/zh-CN/users.ts +++ b/src/locales/zh-CN/users.ts @@ -25,6 +25,6 @@ export default { 'users.password.confirm.empty': '请确认新密码', 'users.password.confirm.error': '两次输入的密码不一致', 'users.login.title': '登录 {name}', - 'users.version.islatest': '{version} 已是最新版本', + 'users.version.islatest': 'GPUStack {version} 已是最新版本', 'users.version.update': 'GPUStack {version} 版本可供更新' };