enhance(view):去除双页展示的功能。

src/components/ComicView.tsx

@@ -4,7 +4,6 @@ import { FC, useLayoutEffect } from 'react';
 import { useMeasure } from 'react-use';
 import { useZoomState } from '../states/zoom';
 import { ContinuationView } from './ContinuationView';
-import { DoubleView } from './DoubleView';
 import { SingleView } from './SingleView';
 
 export const ComicView: FC = () => {
@@ -19,7 +18,6 @@ export const ComicView: FC = () => {
   return (
     <Box w="100%" h="100%" sx={{ overflow: 'hidden' }} ref={containerRef}>
       {equals(viewMode, 'single') && <SingleView />}
-      {equals(viewMode, 'double') && <DoubleView />}
       {equals(viewMode, 'continuation') && <ContinuationView />}
     </Box>
   );

src/components/DoubleView.tsx

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-
-export const DoubleView: FC = () => {
-  return <div></div>;
-};

src/components/PicToolbar.tsx

@@ -9,7 +9,6 @@ import {
 } from '@mantine/core';
 import {
   IconArrowAutofitWidth,
-  IconLock,
   IconPercentage,
   IconZoomIn,
   IconZoomOut
@@ -18,22 +17,17 @@ import { FC, useRef } from 'react';
 import { useZoomState } from '../states/zoom';
 
 export const PicToolbar: FC = () => {
-  const { lock, autoFit, currentZoom, viewMode, zoom, switchViewMode } = useZoomState();
+  const { autoFit, currentZoom, viewMode, zoom, switchViewMode } = useZoomState();
   const zoomHandlers = useRef<NumberInputHandlers>();
 
   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="缩小">
+      <Tooltip label="缩小占据比例">
         <ActionIcon
           variant="subtle"
           color="grape"
@@ -42,19 +36,21 @@ export const PicToolbar: FC = () => {
           <IconZoomOut stroke={1.5} size={24} />
         </ActionIcon>
       </Tooltip>
-      <NumberInput
+      <Tooltip label="图片宽度占视图宽度比例">
-        hideControls
+        <NumberInput
-        size="xs"
+          hideControls
-        min={20}
+          size="xs"
-        max={100}
+          min={20}
-        step={5}
+          max={100}
-        value={currentZoom}
+          step={5}
-        onChange={value => zoom(value)}
+          value={currentZoom}
-        handlersRef={zoomHandlers}
+          onChange={value => zoom(value)}
-        styles={{ input: { width: rem(58), textAlign: 'center' } }}
+          handlersRef={zoomHandlers}
-        rightSection={<IconPercentage stroke={1.5} size={16} />}
+          styles={{ input: { width: rem(58), textAlign: 'center' } }}
-      />
+          rightSection={<IconPercentage stroke={1.5} size={16} />}
-      <Tooltip label="放大">
+        />
+      </Tooltip>
+      <Tooltip label="放大占据比例">
         <ActionIcon
           variant="subtle"
           color="grape"
@@ -71,7 +67,6 @@ export const PicToolbar: FC = () => {
           color="grape"
           data={[
             { label: '单页', value: 'single' },
-            { label: '双页', value: 'double' },
             { label: '连续', value: 'continuation' }
           ]}
         />

src/states/zoom.ts

@@ -2,21 +2,19 @@ import { SyncObjectCallback } from '../types';
 import { createStoreHook } from '../utils/store_creator';
 
 interface ZoomState {
-  lock: boolean;
   autoFit: boolean;
   currentZoom: number;
-  viewMode: 'single' | 'double' | 'continuation';
+  viewMode: 'single' | 'continuation';
   viewHeight: number;
 }
 
 type ZoomActions = {
   zoom: SyncObjectCallback<number>;
   updateViewHeight: SyncObjectCallback<number>;
-  switchViewMode: SyncObjectCallback<'single' | 'double' | 'continuation'>;
+  switchViewMode: SyncObjectCallback<'single' | 'continuation'>;
 };
 
 const initialState: ZoomState = {
-  lock: true,
   autoFit: false,
   currentZoom: 80,
   viewMode: 'continuation',