package.json

@@ -29,6 +29,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
+    "react-icons": "^4.9.0",
     "react-promise-suspense": "^0.3.4",
     "react-redux": "^8.0.5"
   },

pnpm-lock.yaml

@@ -40,6 +40,9 @@ dependencies:
   react-dropzone:
     specifier: ^14.2.3
     version: 14.2.3(react@18.2.0)
+  react-icons:
+    specifier: ^4.9.0
+    version: 4.9.0(react@18.2.0)
   react-promise-suspense:
     specifier: ^0.3.4
     version: 0.3.4
@@ -6690,6 +6693,15 @@ packages:
       use-sidecar: 1.1.2(@types/react@18.2.7)(react@18.2.0)
     dev: false
 
+  /react-icons@4.9.0(react@18.2.0):
+    resolution:
+      { integrity: sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg== }
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is@16.13.1:
     resolution:
       { integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== }

src/components/App.tsx

@@ -3,6 +3,7 @@ import { SelectFile } from './SelectFile';
 
 import { FileListing } from '~/features/file-listing/FileListing';
 import { Footer } from './Footer';
+import { Toolbar } from './Toolbar';
 
 function App() {
   return (
@@ -11,9 +12,8 @@ function App() {
         <Center>
           <SelectFile />
         </Center>
-        <Box mt="8">
-          <FileListing />
-        </Box>
+        <Toolbar />
+        <FileListing />
         <Footer />
       </Container>
     </Box>

src/components/Toolbar.tsx

@@ -0,0 +1,23 @@
+import { Button, HStack, Icon, useDisclosure } from '@chakra-ui/react';
+import { MdSettings } from 'react-icons/md';
+import { SettingsModal } from '~/modals/SettingsModal';
+
+export function Toolbar() {
+  const {
+    isOpen: isSettingsModalOpen,
+    onClose: onSettingsModalClose,
+    getButtonProps: getSettingsButtonProps,
+  } = useDisclosure();
+
+  return (
+    <>
+      <HStack alignItems="center" justifyContent="center" p="4">
+        <Button {...getSettingsButtonProps()}>
+          <Icon as={MdSettings} mr="1" />
+          设置
+        </Button>
+      </HStack>
+      <SettingsModal isOpen={isSettingsModalOpen} onClose={onSettingsModalClose} />
+    </>
+  );
+}

src/modals/SettingsModal.tsx

@@ -0,0 +1,42 @@
+import {
+  Button,
+  HStack,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react';
+
+export interface SettingsModalProps {
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
+  return (
+    <Modal onClose={onClose} isOpen={isOpen} closeOnOverlayClick={false} scrollBehavior="inside" size="full" isCentered>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>应用设置</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <p>Hallo</p>
+          <p>Thank you, thank you very much.</p>
+          <p>Ha-Halo, thank you</p>
+          <p>Thank you very much!</p>
+        </ModalBody>
+        <ModalFooter>
+          <HStack>
+            <Button onClick={onClose} variant="ghost" colorScheme="red">
+              放弃
+            </Button>
+            <Button onClick={onClose}>应用</Button>
+          </HStack>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

src/theme.ts

@@ -1,6 +1,24 @@
 import { extendTheme } from '@chakra-ui/react';
 
 export const theme = extendTheme({
+  fonts: {
+    body: [
+      '-system-ui,-apple-system,BlinkMacSystemFont',
+      'Source Han Sans CN,Noto Sans CJK SC',
+      'Segoe UI,Helvetica,Arial,sans-serif',
+      'Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol',
+    ].join(','),
+  },
+  components: {
+    Button: {
+      baseStyle: {
+        fontWeight: 'normal',
+      },
+      defaultProps: {
+        colorScheme: 'teal',
+      },
+    },
+  },
   styles: {
     global: {
       body: {