adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): support switch space

Browse Source
This commit is contained in:
zhaoying
2026-04-22 18:39:39 +08:00
parent 6f323f2435
commit ec6b08cde2
8 changed files with 196 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
web/src/components/SiderMenu/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-02 15:25:31
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-04-16 17:35:38
* @Last Modified time: 2026-04-21 17:56:09
*/
/**
* SiderMenu Component
@@ -19,7 +19,7 @@
*/
import { useState, useEffect, useRef, type FC } from 'react';
import { Menu as AntMenu, Layout, Flex } from 'antd';
import { Menu as AntMenu, Layout, Flex, Divider } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
@@ -32,7 +32,8 @@ import logo from '@/assets/images/logo.png'
import { useUser } from '@/store/user';
import { getTenantSubscription } from '@/api/user';
import { useI18n } from '@/store/locale'
import SubscriptionDetailModal, { type SubscriptionDetailModalRef } from './SubscriptionDetailModal'
import SubscriptionDetailModal, { type SubscriptionDetailModalRef } from './SubscriptionDetailModal';
import SwitchSpaceModal, { type SwitchSpaceModalRef } from './SwitchSpaceModal';
// Import SVG files
// space
@@ -174,6 +175,7 @@ const Menu: FC<{
const [menus, setMenus] = useState<MenuItem[]>([])
const { user, storageType } = useUser()
const subscriptionDetailRef = useRef<SubscriptionDetailModalRef>(null)
const switchSpaceModalRef = useRef<SwitchSpaceModalRef>(null)
/** Filter menus based on user role and source */
useEffect(() => {
@@ -346,6 +348,9 @@ const Menu: FC<{
const handleViewDetail = () => {
subscriptionDetailRef.current?.handleOpen(subscription)
}
const handleSwitchSpace = () => {
switchSpaceModalRef.current?.handleOpen()
}
return (
<Sider
@@ -391,27 +396,36 @@ const Menu: FC<{
items={menuItems}
inlineCollapsed={collapsed}
inlineIndent={10}
className={clsx("rb:overflow-y-auto", {
'rb:max-h-[calc(100vh-136px)]': user?.is_superuser && source === 'space',
'rb:max-h-[calc(100vh-76px)]': !(user?.is_superuser && source === 'space') && !(source === 'manage' && subscription && !collapsed),
'rb:max-h-[calc(100vh-228px)]': source === 'manage' && subscription && !collapsed,
})}
className="rb:overflow-y-auto rb:flex-1!"
/>
{/* Return to space button for superusers */}
{user?.is_superuser && source === 'space' &&
<Flex
gap={8}
align="center"
justify="start"
onClick={goToSpace}
className="rb-border-t rb:pt-5! rb:pb-2.5! rb:absolute rb:bottom-2.5 rb:right-5 rb:left-5 rb:text-[13px] rb:text-[#5B6167] rb:hover:text-[#212332] rb:leading-4.5 rb:font-regular rb:text-center rb:mt-2.25 rb:cursor-pointer"
>
<div className="rb:cursor-pointer rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/logout_grey.svg')]"></div>
{collapsed ? null : t('common.returnToSpace')}
<Flex gap={4} vertical className="rb:my-3! rb:mx-3!">
<Divider className="rb:mb-2.5! rb:mt-0! rb:border-[#DFE4ED]! rb:mx-2! rb:min-w-[calc(100%-20px)]! rb:w-[calc(100%-20px)]!" />
<Flex
gap={8}
align="center"
justify="start"
onClick={handleSwitchSpace}
className="rb:p-2.5! rb:text-[13px] rb:hover:bg-[rgba(223,228,237,0.5)] rb:rounded-lg rb:leading-3.5 rb:font-regular rb:text-center rb:cursor-pointer"
>
<div className="rb:cursor-pointer rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/menuNew/switch.svg')]"></div>
{collapsed ? null : t('common.switchSpace')}
</Flex>
<Flex
gap={8}
align="center"
justify="start"
onClick={goToSpace}
className="rb:p-2.5! rb:text-[13px] rb:hover:bg-[rgba(223,228,237,0.5)] rb:rounded-lg rb:leading-3.5 rb:font-regular rb:text-center rb:cursor-pointer"
>
<div className="rb:cursor-pointer rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/menuNew/return.svg')]"></div>
{collapsed ? null : t('common.returnToSpace')}
</Flex>
</Flex>
}
{source === 'manage' && subscription && !collapsed &&
<div className="rb:absolute rb:bottom-3 rb:left-3 rb:right-3 rb:py-3 rb:bg-cover rb:bg-[url('@/assets/images/menuNew/package_bg.png')] rb:overflow-hidden rb:rounded-xl">
<div className="rb:mb-3 rb:ml-3 rb:mr-3 rb:py-3 rb:bg-cover rb:bg-[url('@/assets/images/menuNew/package_bg.png')] rb:overflow-hidden rb:rounded-xl">
<div className="rb:h-4.5 rb:flex-1 rb:truncate rb:px-3 rb:text-[13px] rb:font-medium rb:leading-4.5">{subscription.package_plan?.[getKeyWithLanguage('name')]}</div>
<div className="rb:grid rb:grid-cols-4 rb:mt-4">
@@ -434,6 +448,9 @@ const Menu: FC<{
<SubscriptionDetailModal
ref={subscriptionDetailRef}
/>
<SwitchSpaceModal
ref={switchSpaceModalRef}
/>
</Sider>
);
};