diff --git a/apps/web/src/components/workspace-setting/style.ts b/apps/web/src/components/workspace-setting/style.ts index e99d044866..a68941b093 100644 --- a/apps/web/src/components/workspace-setting/style.ts +++ b/apps/web/src/components/workspace-setting/style.ts @@ -6,6 +6,7 @@ export const StyledSettingContainer = styled('div')(() => { flexDirection: 'column', padding: '0 0 20px 48px', height: '100vh', + marginTop: '48px', }; }); @@ -25,14 +26,6 @@ export const StyledSettingContent = styled('div')(() => { }; }); -export const StyledSettingTabContainer = styled('ul')(() => { - { - return { - display: 'flex', - }; - } -}); - export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>( ({ theme, isActive }) => { { @@ -46,10 +39,6 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>( lineHeight: theme.font.lineHeight, cursor: 'pointer', transition: 'all 0.15s ease', - borderBottom: `2px solid ${ - isActive ? theme.colors.primaryColor : 'none' - }`, - ':hover': { color: theme.colors.primaryColor }, }; } } diff --git a/apps/web/src/pages/workspace/[workspaceId]/setting.tsx b/apps/web/src/pages/workspace/[workspaceId]/setting.tsx index 598c5c0a5d..d91212ca8b 100644 --- a/apps/web/src/pages/workspace/[workspaceId]/setting.tsx +++ b/apps/web/src/pages/workspace/[workspaceId]/setting.tsx @@ -1,11 +1,16 @@ import { StyledSettingContainer, StyledSettingContent, - StyledSettingSidebar, - StyledSettingTabContainer, WorkspaceSettingTagItem, } from '@/components/workspace-setting/style'; -import { ReactElement, ReactNode, useState } from 'react'; +import { + ReactElement, + ReactNode, + useState, + CSSProperties, + useEffect, + startTransition, +} from 'react'; import { GeneralPage, MembersPage, @@ -19,6 +24,7 @@ import { WorkspaceUnit } from '@affine/datacenter'; import { useTranslation } from '@affine/i18n'; import { PageListHeader } from '@/components/header'; import Head from 'next/head'; +import { styled } from '@affine/component'; const useTabMap = () => { const { t } = useTranslation(); @@ -73,11 +79,48 @@ const useTabMap = () => { return { activeTabPanelRender, tableArr, handleTabChange, activeTab }; }; +const StyledIndicator = styled.div(({ theme }) => { + return { + height: '2px', + background: theme.colors.primaryColor, + position: 'absolute', + left: '0', + bottom: '0', + transition: 'left .3s, width .3s', + }; +}); +const StyledTabButtonWrapper = styled.div(() => { + return { + display: 'flex', + position: 'relative', + }; +}); const WorkspaceSetting = () => { const { t } = useTranslation(); const { currentWorkspace } = useAppState(); const { activeTabPanelRender, tableArr, handleTabChange, activeTab } = useTabMap(); + const [indicatorState, setIndicatorState] = useState< + Pick + >({ + left: 0, + width: 0, + }); + + useEffect(() => { + const tabButton = document.querySelector( + `[data-setting-tab-button="${activeTab}"]` + ); + if (tabButton instanceof HTMLElement) { + startTransition(() => { + setIndicatorState({ + width: `${tabButton.offsetWidth}px`, + left: `${tabButton.offsetLeft}px`, + }); + }); + } + }, [activeTab]); + return ( <> @@ -86,23 +129,23 @@ const WorkspaceSetting = () => { }>{t('Settings')} - - - {tableArr.map(({ name }) => { - return ( - { - handleTabChange(name); - }} - > - {name} - - ); - })} - - + + {tableArr.map(({ name }) => { + return ( + { + handleTabChange(name); + }} + > + {name} + + ); + })} + + {currentWorkspace && activeTabPanelRender?.(currentWorkspace)}