87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import clsx from 'clsx';
|
|
import { useNewNavigate } from '@/modules';
|
|
const serverList = ['container', 'map'];
|
|
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'],
|
|
},
|
|
];
|
|
const ServerPath = () => {
|
|
const navigate = useNewNavigate();
|
|
return (
|
|
<div className='p-2 w-full h-full bg-gray-200'>
|
|
<h1 className='p-4 w-1/2 m-auto h1'>Site Map</h1>
|
|
<div className='w-1/2 m-auto bg-white p-4 border 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;
|
|
}
|
|
console.log('link', link);
|
|
if (link === '/') {
|
|
navigate(`/${item.path}`);
|
|
return;
|
|
}
|
|
if (link) {
|
|
navigate(`/${item.path}/${link}`);
|
|
} else {
|
|
navigate(`/${item.path}`);
|
|
}
|
|
}}>
|
|
<div className={clsx('border 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;
|
|
export const ServerList = () => {
|
|
return (
|
|
<div className='p-2 w-full h-full bg-gray-200'>
|
|
<div className='flex flex-col w-1/2 m-auto bg-white p-4 border rounded-md shadow-md'>
|
|
{serverList.map((item) => {
|
|
return (
|
|
<div key={item} className='flex flex-col'>
|
|
<div>{item}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|