Refactor: Rename NanoKVM to BatchuKVM and update server URL

web/src/pages/desktop/menu/image/index.tsx

@@ -0,0 +1,87 @@
+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>
+    </>
+  );
+};