84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import clsx from 'clsx';
|
|
import { useNewNavigate } from '@/modules';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useLayoutStore } from '@/modules/layout/store';
|
|
import { useShallow } from 'zustand/shallow';
|
|
import { useMemo } from 'react';
|
|
|
|
const ServerPath = () => {
|
|
const navigate = useNewNavigate();
|
|
const { t } = useTranslation();
|
|
const layoutStore = useLayoutStore(
|
|
useShallow((state) => {
|
|
return {
|
|
isAdmin: state.isAdmin,
|
|
checkHasOrg: state.checkHasOrg,
|
|
};
|
|
}),
|
|
);
|
|
const serverPath = [
|
|
{
|
|
path: 'container',
|
|
links: ['edit/list', 'preview/:id', 'edit/:id'],
|
|
},
|
|
{
|
|
path: 'app',
|
|
links: ['edit/list', ':app/version/list'],
|
|
},
|
|
{
|
|
path: 'file',
|
|
links: ['edit/list'],
|
|
},
|
|
{
|
|
path: 'map',
|
|
links: ['/'],
|
|
},
|
|
{
|
|
path: 'org',
|
|
links: ['edit/list'],
|
|
},
|
|
];
|
|
return (
|
|
<div className='p-2 w-full h-full bg-gray-200 '>
|
|
<h1 className='py-4 w-1/2 m-auto h1 text-primary'>{t('Site Map')}</h1>
|
|
<div className='w-1/2 m-auto bg-white p-4 border border-gray-200 rounded-md shadow-md min-w-[700px] max-h-[80vh] overflow-auto scrollbar'>
|
|
<div className='flex flex-col w-full'>
|
|
{serverPath.map((item) => {
|
|
const links = item.links.map((link) => {
|
|
const hasId = link.includes(':');
|
|
const _path = link === '/' ? item.path : item.path + '/' + link;
|
|
return (
|
|
<div
|
|
key={link}
|
|
className={clsx('flex flex-col', !hasId && 'cursor-pointer')}
|
|
onClick={() => {
|
|
if (hasId) {
|
|
return;
|
|
}
|
|
if (link === '/') {
|
|
navigate(`/${item.path}`);
|
|
return;
|
|
}
|
|
if (link) {
|
|
navigate(`/${item.path}/${link}`);
|
|
} else {
|
|
navigate(`/${item.path}`);
|
|
}
|
|
}}>
|
|
<div className={clsx('border border-gray-200 rounded-md p-2 m-2', hasId && 'bg-gray-200')}>{_path}</div>
|
|
</div>
|
|
);
|
|
});
|
|
return (
|
|
<div key={item.path} className='flex'>
|
|
{links}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export const App = ServerPath;
|