enhance(view):去除双页展示的功能。
This commit is contained in:
		| @@ -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> | ||||
|   ); | ||||
|   | ||||
| @@ -1,5 +0,0 @@ | ||||
| import { FC } from 'react'; | ||||
|  | ||||
| export const DoubleView: FC = () => { | ||||
|   return <div></div>; | ||||
| }; | ||||
| @@ -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 | ||||
|         hideControls | ||||
|         size="xs" | ||||
|         min={20} | ||||
|         max={100} | ||||
|         step={5} | ||||
|         value={currentZoom} | ||||
|         onChange={value => zoom(value)} | ||||
|         handlersRef={zoomHandlers} | ||||
|         styles={{ input: { width: rem(58), textAlign: 'center' } }} | ||||
|         rightSection={<IconPercentage stroke={1.5} size={16} />} | ||||
|       /> | ||||
|       <Tooltip label="放大"> | ||||
|       <Tooltip label="图片宽度占视图宽度比例"> | ||||
|         <NumberInput | ||||
|           hideControls | ||||
|           size="xs" | ||||
|           min={20} | ||||
|           max={100} | ||||
|           step={5} | ||||
|           value={currentZoom} | ||||
|           onChange={value => zoom(value)} | ||||
|           handlersRef={zoomHandlers} | ||||
|           styles={{ input: { width: rem(58), textAlign: 'center' } }} | ||||
|           rightSection={<IconPercentage stroke={1.5} size={16} />} | ||||
|         /> | ||||
|       </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' } | ||||
|           ]} | ||||
|         /> | ||||
|   | ||||
| @@ -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', | ||||
|   | ||||
		Reference in New Issue
	
	Block a user