enhance(view):加入视图切换功能。

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' },

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;
+    });
   }
 }));