feat(layout):完成基本界面布局以及文件夹扫描功能。

src/components/PicToolbar.tsx

@@ -0,0 +1,61 @@
+import { ActionIcon, Group, NumberInput, rem, SegmentedControl, Tooltip } from '@mantine/core';
+import {
+  IconArrowAutofitWidth,
+  IconLock,
+  IconPercentage,
+  IconZoomIn,
+  IconZoomOut
+} from '@tabler/icons-react';
+import { FC } from 'react';
+import { useZoomState } from '../states/zoom';
+
+export const PicToolbar: FC = () => {
+  const { lock, autoFit, currentZoom, viewMode } = useZoomState();
+
+  return (
+    <Group w="100%" position="right" spacing={8} px={4} py={4}>
+      <Tooltip label="锁定缩放">
+        <ActionIcon variant={lock ? 'filled' : 'subtle'} color="grape">
+          <IconLock stroke={1.5} size={24} />
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label="适应窗口宽度">
+        <ActionIcon variant={autoFit ? 'filled' : 'subtle'} color="grape">
+          <IconArrowAutofitWidth stroke={1.5} size={24} />
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label="缩小">
+        <ActionIcon variant="subtle" color="grape">
+          <IconZoomOut stroke={1.5} size={24} />
+        </ActionIcon>
+      </Tooltip>
+      <NumberInput
+        hideControls
+        size="xs"
+        min={20}
+        max={100}
+        step={5}
+        value={currentZoom}
+        styles={{ input: { width: rem(58), textAlign: 'center' } }}
+        rightSection={<IconPercentage stroke={1.5} size={16} />}
+      />
+      <Tooltip label="放大">
+        <ActionIcon variant="subtle" color="grape">
+          <IconZoomIn stroke={1.5} size={24} />
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label="翻页模式">
+        <SegmentedControl
+          size="xs"
+          value={viewMode}
+          color="grape"
+          data={[
+            { label: '单页', value: 'single' },
+            { label: '双页', value: 'double' },
+            { label: '连续', value: 'continuation' }
+          ]}
+        />
+      </Tooltip>
+    </Group>
+  );
+};