From 7a78a82bb98630d578e0f02192209dbc87d86c41 Mon Sep 17 00:00:00 2001 From: jingyang <3161362058@qq.com> Date: Fri, 23 Aug 2024 17:29:02 +0800 Subject: [PATCH 1/4] feat:app dock --- .../desktop/src/components/AppDock/index.tsx | 69 +++++++++++-------- frontend/desktop/src/stores/desktopConfig.ts | 6 +- 2 files changed, 45 insertions(+), 30 deletions(-) diff --git a/frontend/desktop/src/components/AppDock/index.tsx b/frontend/desktop/src/components/AppDock/index.tsx index 398b0c52a4f..7d1a0de1d24 100644 --- a/frontend/desktop/src/components/AppDock/index.tsx +++ b/frontend/desktop/src/components/AppDock/index.tsx @@ -3,14 +3,14 @@ import useAppStore, { AppInfo } from '@/stores/app'; import { useConfigStore } from '@/stores/config'; import { useDesktopConfigStore } from '@/stores/desktopConfig'; import { APPTYPE, TApp } from '@/types'; +import { I18nCommonKey } from '@/types/i18next'; import { Box, Center, Flex, Image } from '@chakra-ui/react'; -import { MouseEvent, useContext, useMemo } from 'react'; +import { useTranslation } from 'next-i18next'; +import { MouseEvent, useContext, useEffect, useMemo, useState } from 'react'; import { Menu, useContextMenu } from 'react-contexify'; import { ChevronDownIcon } from '../icons'; -import styles from './index.module.css'; -import { useTranslation } from 'next-i18next'; import CustomTooltip from './CustomTooltip'; -import { I18nCommonKey } from '@/types/i18next'; +import styles from './index.module.css'; const APP_DOCK_MENU_ID = 'APP_DOCK_MENU_ID'; @@ -29,6 +29,7 @@ export default function AppDock() { const logo = useConfigStore().layoutConfig?.logo; const moreAppsContent = useContext(MoreAppsContext); const { isNavbarVisible, toggleNavbarVisibility } = useDesktopConfigStore(); + const [isMouseOverDock, setIsMouseOverDock] = useState(false); const { show } = useContextMenu({ id: APP_DOCK_MENU_ID @@ -118,32 +119,45 @@ export default function AppDock() { const transitionValue = 'transform 200ms ease-in-out, opacity 200ms ease-in-out'; + useEffect(() => { + if (!isMouseOverDock) { + const hasMaximizedApp = runningInfo.some((app) => app.size === 'maximize'); + toggleNavbarVisibility(!hasMaximizedApp); + } + }, [isMouseOverDock, runningInfo, toggleNavbarVisibility]); + return ( -
- -
+ {runningInfo.length > 0 && ( +
{ + toggleNavbarVisibility(); + }} + > + +
+ )} setIsMouseOverDock(true)} + onMouseLeave={() => setIsMouseOverDock(false)} onContextMenu={(e) => displayMenu(e)} borderRadius="12px" border={'1px solid rgba(255, 255, 255, 0.07)'} @@ -199,6 +213,7 @@ export default function AppDock() { alt={item?.name} w="32px" h="32px" + draggable={false} /> void; - toggleNavbarVisibility: () => void; + toggleNavbarVisibility: (forceState?: boolean) => void; }; export const useDesktopConfigStore = create()( @@ -19,9 +19,9 @@ export const useDesktopConfigStore = create()( state.isAppBar = !state.isAppBar; }); }, - toggleNavbarVisibility() { + toggleNavbarVisibility(forceState) { set((state) => { - state.isNavbarVisible = !state.isNavbarVisible; + state.isNavbarVisible = forceState !== undefined ? forceState : !state.isNavbarVisible; }); } })), From 83d766ec092436c12965554c71ffb74dbf1dcf94 Mon Sep 17 00:00:00 2001 From: jingyang <3161362058@qq.com> Date: Fri, 23 Aug 2024 17:58:36 +0800 Subject: [PATCH 2/4] update --- .../desktop/src/components/AppDock/index.tsx | 8 +++---- frontend/desktop/src/stores/app.ts | 3 +++ frontend/desktop/src/stores/desktopConfig.ts | 21 ++++++++++++++++++- 3 files changed, 26 insertions(+), 6 deletions(-) diff --git a/frontend/desktop/src/components/AppDock/index.tsx b/frontend/desktop/src/components/AppDock/index.tsx index 7d1a0de1d24..d5038a51def 100644 --- a/frontend/desktop/src/components/AppDock/index.tsx +++ b/frontend/desktop/src/components/AppDock/index.tsx @@ -28,7 +28,7 @@ export default function AppDock() { } = useAppStore(); const logo = useConfigStore().layoutConfig?.logo; const moreAppsContent = useContext(MoreAppsContext); - const { isNavbarVisible, toggleNavbarVisibility } = useDesktopConfigStore(); + const { isNavbarVisible, toggleNavbarVisibility, getTransitionValue } = useDesktopConfigStore(); const [isMouseOverDock, setIsMouseOverDock] = useState(false); const { show } = useContextMenu({ @@ -117,8 +117,6 @@ export default function AppDock() { }); }; - const transitionValue = 'transform 200ms ease-in-out, opacity 200ms ease-in-out'; - useEffect(() => { if (!isMouseOverDock) { const hasMaximizedApp = runningInfo.some((app) => app.size === 'maximize'); @@ -134,7 +132,7 @@ export default function AppDock() { height={'16px'} position={'absolute'} color={'white'} - transition={transitionValue} + transition={getTransitionValue()} cursor={'pointer'} bg="rgba(220, 220, 224, 0.3)" backdropFilter="blur(80px) saturate(150%)" @@ -171,7 +169,7 @@ export default function AppDock() { gap={'12px'} userSelect={'none'} px={'12px'} - transition={transitionValue} + transition={getTransitionValue()} opacity={isNavbarVisible ? 1 : 0} position="absolute" top={'-64px'} diff --git a/frontend/desktop/src/stores/app.ts b/frontend/desktop/src/stores/app.ts index 4e447ceebd6..e2ab853a452 100644 --- a/frontend/desktop/src/stores/app.ts +++ b/frontend/desktop/src/stores/app.ts @@ -6,6 +6,7 @@ import { create } from 'zustand'; import { devtools, persist } from 'zustand/middleware'; import { immer } from 'zustand/middleware/immer'; import AppStateManager from '../utils/ProcessManager'; +import { useDesktopConfigStore } from './desktopConfig'; export class AppInfo { pid: number; @@ -75,6 +76,7 @@ const useAppStore = create()( }, // should use pid to close app, but it don't support multi same app process now closeAppById: (pid: number) => { + useDesktopConfigStore.getState().temporarilyDisableAnimation(); set((state) => { state.runner.closeApp(pid); // make sure the process is killed @@ -123,6 +125,7 @@ const useAppStore = create()( }, openApp: async (app: TApp, { query, raw, pathname = '/', appSize = 'maximize' } = {}) => { + useDesktopConfigStore.getState().temporarilyDisableAnimation(); const zIndex = get().maxZIndex + 1; // debugger // 未支持多实例 diff --git a/frontend/desktop/src/stores/desktopConfig.ts b/frontend/desktop/src/stores/desktopConfig.ts index 4cd418646ac..46d86518265 100644 --- a/frontend/desktop/src/stores/desktopConfig.ts +++ b/frontend/desktop/src/stores/desktopConfig.ts @@ -5,15 +5,19 @@ import { immer } from 'zustand/middleware/immer'; type State = { isAppBar: boolean; isNavbarVisible: boolean; + isAnimationEnabled: boolean; toggleShape: () => void; toggleNavbarVisibility: (forceState?: boolean) => void; + temporarilyDisableAnimation: () => void; + getTransitionValue: () => string; }; export const useDesktopConfigStore = create()( persist( - immer((set) => ({ + immer((set, get) => ({ isAppBar: true, isNavbarVisible: true, + isAnimationEnabled: true, toggleShape() { set((state) => { state.isAppBar = !state.isAppBar; @@ -23,6 +27,21 @@ export const useDesktopConfigStore = create()( set((state) => { state.isNavbarVisible = forceState !== undefined ? forceState : !state.isNavbarVisible; }); + }, + temporarilyDisableAnimation() { + set((state) => { + state.isAnimationEnabled = false; + }); + requestAnimationFrame(() => { + set((state) => { + state.isAnimationEnabled = true; + }); + }); + }, + getTransitionValue() { + return get().isAnimationEnabled + ? 'transform 200ms ease-in-out, opacity 200ms ease-in-out' + : 'none'; } })), { From b353bae408517bdeb1350555e4aabc5d76cb04be Mon Sep 17 00:00:00 2001 From: jingyang <3161362058@qq.com> Date: Mon, 26 Aug 2024 16:10:14 +0800 Subject: [PATCH 3/4] update --- .../desktop/src/components/AppDock/index.tsx | 59 ++++++++++++------- 1 file changed, 39 insertions(+), 20 deletions(-) diff --git a/frontend/desktop/src/components/AppDock/index.tsx b/frontend/desktop/src/components/AppDock/index.tsx index d5038a51def..4292d6f34b2 100644 --- a/frontend/desktop/src/components/AppDock/index.tsx +++ b/frontend/desktop/src/components/AppDock/index.tsx @@ -6,7 +6,7 @@ import { APPTYPE, TApp } from '@/types'; import { I18nCommonKey } from '@/types/i18next'; import { Box, Center, Flex, Image } from '@chakra-ui/react'; import { useTranslation } from 'next-i18next'; -import { MouseEvent, useContext, useEffect, useMemo, useState } from 'react'; +import { MouseEvent, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { Menu, useContextMenu } from 'react-contexify'; import { ChevronDownIcon } from '../icons'; import CustomTooltip from './CustomTooltip'; @@ -19,7 +19,6 @@ export default function AppDock() { const { installedApps: apps, runningInfo, - setToHighestLayerById, currentAppPid, openApp, switchAppById, @@ -30,6 +29,7 @@ export default function AppDock() { const moreAppsContent = useContext(MoreAppsContext); const { isNavbarVisible, toggleNavbarVisibility, getTransitionValue } = useDesktopConfigStore(); const [isMouseOverDock, setIsMouseOverDock] = useState(false); + const timeoutRef = useRef(null); const { show } = useContextMenu({ id: APP_DOCK_MENU_ID @@ -110,9 +110,9 @@ export default function AppDock() { event: e, position: { // @ts-ignore - x: '60px', + x: '244px', // @ts-ignore - y: '-114px' + y: '-34px' } }); }; @@ -124,13 +124,40 @@ export default function AppDock() { } }, [isMouseOverDock, runningInfo, toggleNavbarVisibility]); + const handleMouseEnter = () => { + if (timeoutRef.current !== null) { + clearTimeout(timeoutRef.current); + timeoutRef.current = null; + } + setIsMouseOverDock(true); + }; + + const handleMouseLeave = () => { + timeoutRef.current = window.setTimeout(() => { + setIsMouseOverDock(false); + }, 500); + }; + return ( - - {runningInfo.length > 0 && ( + + {runningInfo.length > 0 && runningInfo.some((app) => app.size === 'maximize') && (
{ toggleNavbarVisibility(); @@ -149,13 +175,12 @@ export default function AppDock() { >
)} + setIsMouseOverDock(true)} - onMouseLeave={() => setIsMouseOverDock(false)} onContextMenu={(e) => displayMenu(e)} borderRadius="12px" border={'1px solid rgba(255, 255, 255, 0.07)'} @@ -169,13 +194,6 @@ export default function AppDock() { gap={'12px'} userSelect={'none'} px={'12px'} - transition={getTransitionValue()} - opacity={isNavbarVisible ? 1 : 0} - position="absolute" - top={'-64px'} - transform={isNavbarVisible ? 'translate(-50%, 0)' : 'translate(-50%, 68px)'} - will-change="transform, opacity" - overflow="hidden" > {AppMenuLists.map((item: AppInfo, index: number) => { return ( @@ -227,6 +245,7 @@ export default function AppDock() { ); })} + <> -
+
); } From d3101fea9a4e9b5a52b69f53e73a9a12b4ccbd14 Mon Sep 17 00:00:00 2001 From: jingyang <3161362058@qq.com> Date: Mon, 26 Aug 2024 17:12:24 +0800 Subject: [PATCH 4/4] fix dbprovider isEdit --- .../dbprovider/src/pages/db/edit/components/Form.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/providers/dbprovider/src/pages/db/edit/components/Form.tsx b/frontend/providers/dbprovider/src/pages/db/edit/components/Form.tsx index 468490f31b3..5d09a9fe88b 100644 --- a/frontend/providers/dbprovider/src/pages/db/edit/components/Form.tsx +++ b/frontend/providers/dbprovider/src/pages/db/edit/components/Form.tsx @@ -258,7 +258,8 @@ const Form = ({ height={'80px'} border={'1px solid'} borderRadius={'6px'} - cursor={'pointer'} + cursor={isEdit ? 'not-allowed' : 'pointer'} + opacity={isEdit && getValues('dbType') !== item.id ? '0.4' : '1'} fontWeight={'bold'} color={'grayModern.900'} {...(getValues('dbType') === item.id @@ -275,6 +276,7 @@ const Form = ({ } })} onClick={() => { + if (isEdit) return; setValue('dbType', item.id); setValue('dbVersion', DBVersionMap[getValues('dbType')][0].id); }} @@ -303,6 +305,7 @@ const Form = ({