88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Divider, Modal, Segmented } from 'antd';
|
|
import clsx from 'clsx';
|
|
import { DiscIcon, HardDriveIcon } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import * as api from '@/api/storage.ts';
|
|
|
|
import { Images } from './images.tsx';
|
|
import { Tips } from './tips.tsx';
|
|
|
|
export const Image = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [isMounted, setIsMounted] = useState(false);
|
|
const [mode, setMode] = useState('mass-storage');
|
|
|
|
const modes = [
|
|
{
|
|
value: 'mass-storage',
|
|
label: (
|
|
<div className="flex items-center space-x-1">
|
|
<HardDriveIcon size={16} />
|
|
<span>Mass Storage</span>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
value: 'cd-rom',
|
|
label: (
|
|
<div className="flex items-center space-x-1">
|
|
<DiscIcon size={16} />
|
|
<span>CD ROM</span>
|
|
</div>
|
|
)
|
|
}
|
|
];
|
|
|
|
useEffect(() => {
|
|
api.getMountedImage().then((rsp) => {
|
|
if (rsp.code === 0) {
|
|
setIsMounted(!!rsp.data?.file);
|
|
}
|
|
});
|
|
|
|
api.getCdRom().then((rsp) => {
|
|
if (rsp.code === 0) {
|
|
setMode(rsp.data?.cdrom === 1 ? 'cd-rom' : 'mass-storage');
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={clsx(
|
|
'flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded hover:bg-neutral-700',
|
|
isMounted ? 'text-blue-500' : 'text-neutral-300 hover:text-white'
|
|
)}
|
|
onClick={() => setIsModalOpen(true)}
|
|
>
|
|
<DiscIcon size={18} />
|
|
</div>
|
|
|
|
<Modal open={isModalOpen} footer={null} onCancel={() => setIsModalOpen(false)}>
|
|
<div className="flex items-center space-x-1">
|
|
<span className="text-xl font-bold">{t('image.title')}</span>
|
|
<Tips />
|
|
</div>
|
|
|
|
<Divider style={{ margin: '24px 0' }} />
|
|
|
|
<div className="flex flex-col space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<span>{t('image.mountMode')}</span>
|
|
<Segmented value={mode} options={modes} disabled={isMounted} onChange={setMode} />
|
|
</div>
|
|
|
|
<Divider style={{ margin: '24px 0 0 0' }} />
|
|
|
|
<Images isOpen={isModalOpen} cdrom={mode === 'cd-rom'} setIsMounted={setIsMounted} />
|
|
</div>
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|