From 6e5c9c5c5f84bb138cc68dc65a0316b94e2db6a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Wed, 8 Mar 2023 18:50:20 +0800
Subject: [PATCH] =?UTF-8?q?enhance(view):=E5=8A=A0=E5=85=A5=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PicToolbar.tsx | 3 ++-
 src/states/zoom.ts            | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/PicToolbar.tsx b/src/components/PicToolbar.tsx
index a62bc1d..b79d6d7 100644
--- a/src/components/PicToolbar.tsx
+++ b/src/components/PicToolbar.tsx
@@ -18,7 +18,7 @@ import { FC, useRef } from 'react';
 import { useZoomState } from '../states/zoom';
 
 export const PicToolbar: FC = () => {
-  const { lock, autoFit, currentZoom, viewMode, zoom } = useZoomState();
+  const { lock, autoFit, currentZoom, viewMode, zoom, switchViewMode } = useZoomState();
   const zoomHandlers = useRef<NumberInputHandlers>();
 
   return (
@@ -67,6 +67,7 @@ export const PicToolbar: FC = () => {
         <SegmentedControl
           size="xs"
           value={viewMode}
+          onChange={value => switchViewMode(value)}
           color="grape"
           data={[
             { label: '单页', value: 'single' },
diff --git a/src/states/zoom.ts b/src/states/zoom.ts
index 3062b9a..73d28d6 100644
--- a/src/states/zoom.ts
+++ b/src/states/zoom.ts
@@ -12,6 +12,7 @@ interface ZoomState {
 type ZoomActions = {
   zoom: SyncObjectCallback<number>;
   updateViewHeight: SyncObjectCallback<number>;
+  switchViewMode: SyncObjectCallback<'single' | 'double' | 'continuation'>;
 };
 
 const initialState: ZoomState = {
@@ -33,5 +34,10 @@ export const useZoomState = createStoreHook<ZoomState & ZoomActions>(set => ({
     set(df => {
       df.viewHeight = height;
     });
+  },
+  switchViewMode(mode) {
+    set(df => {
+      df.viewMode = mode;
+    });
   }
 }));