feat: split settings slice to staging (ui) and production (in effect)

src/features/settings/Settings.tsx

@@ -1,36 +1,40 @@
 import {
+  Box,
   Button,
+  Center,
   Flex,
+  HStack,
   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 } from 'react-icons/md';
+import { useAppDispatch } from '~/hooks';
+import { commitStagingChange, discardStagingChanges } from './settingsSlice';
 
 const TABS: { name: string; Tab: () => JSX.Element }[] = [
   { name: 'QMCv2 密钥', Tab: PanelQMCv2Key },
   {
     name: '其它／待定',
-    Tab: () => (
-      <TabPanel>
-        <Text>这里空空如也～</Text>
-      </TabPanel>
-    ),
+    Tab: () => <Text>这里空空如也～</Text>,
   },
 ];
 
 export function Settings() {
+  const dispatch = useAppDispatch();
   const isLargeWidthDevice =
     useBreakpointValue({
       base: false,
@@ -41,6 +45,8 @@ export function Settings() {
   const handleTabChange = (idx: number) => {
     setTabIndex(idx);
   };
+  const handleResetSettings = () => dispatch(discardStagingChanges());
+  const handleApplySettings = () => dispatch(commitStagingChange());
 
   return (
     <Flex flexDir="column" flex={1}>
@@ -86,7 +92,26 @@ export function Settings() {
 
         <TabPanels>
           {TABS.map(({ name, Tab }) => (
-            <Tab key={name} />
+            <Flex as={TabPanel} flex={1} flexDir="column" h="100%" key={name}>
+              <Flex h="100%" flex={1} minH={0}>
+                <Tab />
+              </Flex>
+
+              <VStack mt="4" alignItems="flex-start" w="full">
+                <Flex flexDir="row" gap="2" w="full">
+                  <Center>
+                    <Box color="gray">设置会在保存后生效。</Box>
+                  </Center>
+                  <Spacer />
+                  <HStack gap="2" justifyContent="flex-end">
+                    <Button onClick={handleResetSettings} colorScheme="red" variant="ghost" title="重置为更改前的状态">
+                      重置
+                    </Button>
+                    <Button onClick={handleApplySettings}>应用</Button>
+                  </HStack>
+                </Flex>
+              </VStack>
+            </Flex>
           ))}
         </TabPanels>
       </Tabs>