feat(view):基本完成单页浏览的功能。

src/components/SingleView.tsx

@@ -1,5 +1,69 @@
-import { FC } from 'react';
+import EventEmitter from 'events';
+import { find, gt, head, indexOf, isNil, lt, max, pluck, propEq } from 'ramda';
+import { BaseSyntheticEvent, FC, useCallback, useContext, useMemo } from 'react';
+import { useLifecycles, useMeasure } from 'react-use';
+import { EventBusContext } from '../EventBus';
+import { useFileListStore } from '../states/files';
+import { useZoomState } from '../states/zoom';
 
 export const SingleView: FC = () => {
-  return <div></div>;
+  const files = useFileListStore.use.files();
+  const actives = useFileListStore.use.actives();
+  const zoom = useZoomState.use.currentZoom();
+  const viewHeight = useZoomState.use.viewHeight();
+  const updateActives = useFileListStore.use.updateActiveFiles();
+  const ebus = useContext<EventEmitter>(EventBusContext);
+  const [pageConRef, { width: pageConWidth }] = useMeasure();
+  const activeFile = useMemo(() => {
+    let firstFile = head(actives);
+    return find(propEq('filename', firstFile), files);
+  }, [files, actives]);
+  const largerThanView = useMemo(() => {
+    if (isNil(activeFile)) return false;
+    let imageHeightAfterZoom = activeFile?.height * (zoom / 100);
+    return gt(imageHeightAfterZoom, viewHeight);
+  }, [activeFile, viewHeight, zoom]);
+  const handlePaginationAction = useCallback(
+    (event: BaseSyntheticEvent) => {
+      let middle = pageConWidth / 2;
+      let pagingDirection = lt(event.nativeEvent.offsetX, middle) ? -1 : 1;
+      let targetIndex = indexOf(activeFile?.filename, pluck('filename', files)) + pagingDirection;
+      updateActives([files[max(0, targetIndex)].filename]);
+    },
+    [files, activeFile, pageConWidth]
+  );
+
+  useLifecycles(
+    () => {
+      ebus?.addListener('navigate_offset', ({ filename }) => {
+        updateActives([filename]);
+      });
+    },
+    () => {
+      ebus?.removeAllListeners('navigate_offset');
+    }
+  );
+
+  return (
+    <div
+      style={{ position: 'relative', overflow: 'auto', contain: 'strict', height: '100%' }}
+      onClick={handlePaginationAction}
+      ref={pageConRef}
+    >
+      {!isNil(activeFile) && (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: largerThanView ? 'flex-start' : 'center',
+            alignItems: 'center',
+            width: '100%',
+            height: largerThanView ? '100%' : viewHeight
+          }}
+        >
+          <img src={activeFile.path} style={{ width: `${zoom}%` }} />
+        </div>
+      )}
+    </div>
+  );
 };