import {
Box,
Button,
Center,
Flex,
HStack,
Icon,
IconButton,
Menu,
MenuButton,
MenuItem,
MenuList,
Portal,
Spacer,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
Text,
VStack,
useBreakpointValue,
} from '@chakra-ui/react';
import { PanelQMCv2Key } from './panels/PanelQMCv2Key';
import { useState } from 'react';
import { MdExpandMore, MdMenu, MdOutlineSettingsBackupRestore } from 'react-icons/md';
import { useAppDispatch } from '~/hooks';
import { commitStagingChange, discardStagingChanges } from './settingsSlice';
import { PanelKWMv2Key } from './panels/PanelKWMv2Key';
const TABS: { name: string; Tab: () => JSX.Element }[] = [
{ name: 'QMCv2 密钥', Tab: PanelQMCv2Key },
{ name: 'KWMv2 密钥', Tab: PanelKWMv2Key },
{
name: '其它／待定',
Tab: () => 这里空空如也～,
},
];
export function Settings() {
const dispatch = useAppDispatch();
const isLargeWidthDevice =
useBreakpointValue({
base: false,
lg: true,
}) ?? false;
const [tabIndex, setTabIndex] = useState(0);
const handleTabChange = (idx: number) => {
setTabIndex(idx);
};
const handleResetSettings = () => dispatch(discardStagingChanges());
const handleApplySettings = () => dispatch(commitStagingChange());
return (
{TABS.map(({ name }) => (
{name}
))}
{TABS.map(({ name, Tab }) => (
设置会在保存后生效。
}
onClick={handleResetSettings}
colorScheme="red"
variant="ghost"
title="放弃未储存的更改，将设定还原为储存前的状态。"
aria-label="放弃未储存的更改"
/>
))}
);
}