Add source editor UI

src/apis/index.ts

@@ -4,12 +4,12 @@ import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
 import qs from 'qs';
 import { createElement } from 'react';
 import { Icon } from '../components';
-import { configs } from '../configs';
-import { createDebugLogger } from '../utils/debug-logger';
-import { getIntl } from '../locales';
+import { configs } from '@/configs';
+import { createDebugLogger } from '@/utils/debug-logger';
+import { getIntl } from '@/locales';
 import store from '../store';
-import { setUserToken } from '../store/user/slice';
-import { toFormErrors, toLowerCamelCase } from '../utils';
+import { setUserToken } from '@/store/user/slice';
+import { toFormErrors, toLowerCamelCase } from '@/utils';
 import application from './application';
 import auth from './auth';
 import file from './file';
@@ -84,10 +84,10 @@ export const resultTypes = {
 } as const;
 
 /** 成功的响应 */
-export interface BasicSuccessResult<T = any> {
+export interface BasicSuccessResult<T = unknown> {
   type: typeof resultTypes.SUCCESS;
   data: T;
-  headers: any;
+  headers: Record<string, string>;
 }
 
 /** 基础错误响应结果的数据 */
@@ -282,7 +282,7 @@ export const api = {
   group,
   insight,
   instance,
-  invitation,
+  // invitation,
   language,
   // mitPreprocess,
   me,

src/apis/source.ts

@@ -62,6 +62,15 @@ const createSource = ({
   });
 };
 
+/**
+ * move source identified by {@name sourceID} to its new position identified by {@name nextSourceID}
+ */
+const rerankSource = ({sourceID, nextSourceID}: {sourceID: string, nextSourceID: string | 'end'}) => request<unknown>({
+  method: 'PUT',
+  url: `/v1/sources/${sourceID}/rank`,
+  data: toUnderScoreCase({ nextSourceID })
+})
+
 /** 修改原文的请求数据 */
 interface EditSourceData {
   x?: number;
@@ -107,4 +116,5 @@ export default {
   createSource,
   deleteSource,
   editSource,
+  rerankSource,
 };

src/components/FileList.tsx

@@ -154,7 +154,7 @@ export const FileList: FC<FileListProps> = ({
       .then((result) => {
         const data = (result.data as File[]).map((d) => toLowerCamelCase(d));
         setItems(data);
-        setTotal(result.headers['x-pagination-count']);
+        setTotal(~~result.headers['x-pagination-count']);
         setLoading(false);
       })
       .catch((error) => {

src/components/HotKey/hooks/useHotKey.ts

@@ -19,14 +19,15 @@ export const useHotKey: UseHotKey = (option, callback, deps = []) => {
     meta = false,
     keyDown = true,
     keyUp = false,
-    disibled = false,
     preventDefault = true,
     stopPropagation = true,
     ignoreKeyboardElement = true,
   } = option;
 
+  const disabled = option.disabled ?? option.disibled ?? false;
+
   useEffect(() => {
-    if (disibled) return;
+    if (disabled) return;
     const listener = (nativeEvent: KeyboardEvent) => {
       // Ignore modifier keys
       if (MODIFIER_KEY_EVENT_KEYS.includes(nativeEvent.key)) return;
@@ -65,7 +66,7 @@ export const useHotKey: UseHotKey = (option, callback, deps = []) => {
     meta,
     keyDown,
     keyUp,
-    disibled,
+    disabled,
     preventDefault,
     stopPropagation,
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/components/HotKey/interfaces.ts

@@ -18,6 +18,10 @@ export type HotKeyOption = {
   meta?: boolean;
   keyDown?: boolean;
   keyUp?: boolean;
+  disabled?: boolean;
+  /**
+   * @deprecated use `disabled`
+   */
   disibled?: boolean;
   preventDefault?: boolean;
   stopPropagation?: boolean;

src/components/project-file/ImageSelect.tsx

@@ -60,7 +60,7 @@ export const ImageSelect: FC<ImageSelectProps> = ({
       })
       .then((result) => {
         const data = toLowerCamelCase(result.data);
-        setTotal(result.headers['x-pagination-count']);
+        setTotal(Number(result.headers['x-pagination-count']));
         let newImages = data;
         if (images && !replace) {
           newImages = [...images, ...data];

src/components/project-file/ImageSourceViewer.tsx

@@ -1,6 +1,5 @@
 import { css } from '@emotion/core';
 import classNames from 'classnames';
-import React from 'react';
 import { useSelector } from 'react-redux';
 import { FC, File } from '@/interfaces';
 import { Source as ISource } from '@/interfaces/source';
@@ -9,6 +8,8 @@ import { TranslationSaveFailed } from './TranslationSaveFailed';
 import { ImageSourceViewerGod } from './ImageSourceViewerGod';
 import { ImageSourceViewerTranslator } from './ImageSourceViewerTranslator';
 import { ImageSourceViewerProofreader } from './ImageSourceViewerProofreader';
+import { useIntl } from 'react-intl';
+import { ImageSourceViewerSource } from '@/components/project-file/ImageSourceViewerSource';
 
 /** 原文列表的属性接口 */
 interface ImageSourceViewerProps {
@@ -31,6 +32,7 @@ export const ImageSourceViewer: FC<ImageSourceViewerProps> = ({
   const platform = useSelector((state: AppState) => state.site.platform);
   const isMobile = platform === 'mobile';
   const mode = useSelector((state: AppState) => state.imageTranslator.mode);
+  const { formatMessage } = useIntl();
 
   return (
     <div
@@ -59,8 +61,11 @@ export const ImageSourceViewer: FC<ImageSourceViewerProps> = ({
           <TranslationSaveFailed sources={sources} targetID={targetID} />
           {sources.length > 0 ? (
             <div className="ImageSourceViewer__List">
-              {mode === 'god' && (
-                <ImageSourceViewerGod sources={sources} targetID={targetID} />
+              {mode === 'source' && (
+                <ImageSourceViewerSource
+                  sources={sources}
+                  targetID={targetID}
+                />
               )}
               {mode === 'translator' && (
                 <ImageSourceViewerTranslator
@@ -75,17 +80,40 @@ export const ImageSourceViewer: FC<ImageSourceViewerProps> = ({
                   targetID={targetID}
                 />
               )}
+              {mode === 'god' && (
+                <ImageSourceViewerGod sources={sources} targetID={targetID} />
+              )}
             </div>
           ) : isMobile ? (
             <div className="ImageSourceViewer__Empty">
-              <div>点击图片新增框内标记</div>
-              <div>长按标记来删除标记</div>
+              <div>
+                {formatMessage({
+                  id: 'imageTranslator.sourceViewer.tapToMarkSource',
+                })}
+              </div>
+              <div>
+                {formatMessage({
+                  id: 'imageTranslator.sourceViewer.longTapToRemoveMark',
+                })}
+              </div>
             </div>
           ) : (
             <div className="ImageSourceViewer__Empty">
-              <div>左键点击图片新增框内标记</div>
-              <div>右键点击图片新增框外标记</div>
-              <div>右键点击标记来删除标记</div>
+              <div>
+                {formatMessage({
+                  id: 'imageTranslator.sourceViewer.leftClickToMarkSource',
+                })}
+              </div>
+              <div>
+                {formatMessage({
+                  id: 'imageTranslator.sourceViewer.rightClickToMarkSource',
+                })}
+              </div>
+              <div>
+                {formatMessage({
+                  id: 'imageTranslator.sourceViewer.rightClickMarkToRemove',
+                })}
+              </div>
             </div>
           )}
         </>

src/components/project-file/ImageSourceViewerModeControl.tsx

@@ -36,6 +36,7 @@ export const ImageSourceViewerModeControl: FC<
         justify-content: space-evenly;
         align-items: center;
         border-bottom: 1px solid ${style.borderColorBase};
+
         .ImageSourceViewerModeControl__Button {
           display: flex;
           justify-content: center;
@@ -45,20 +46,33 @@ export const ImageSourceViewerModeControl: FC<
           border-right: 1px solid ${style.borderColorBase};
           text-align: center;
           padding: 1px 0;
+
           :last-child {
             border-right: 0;
           }
+
           ${clickEffect(
             `background-color: #f7f7f7;`,
             `background-color: #fff`,
           )};
         }
+
         .ImageSourceViewerModeControl__Button--active {
           background: #fff;
           ${clearClickEffect()};
         }
       `}
     >
+      <div
+        className={classNames('ImageSourceViewerModeControl__Button', {
+          'ImageSourceViewerModeControl__Button--active': mode === 'source',
+        })}
+        onClick={() => {
+          dispatch(setImageTranslatorMode('source'));
+        }}
+      >
+        {formatMessage({ id: 'imageTranslator.markerMode' })}
+      </div>
       <div
         className={classNames('ImageSourceViewerModeControl__Button', {
           'ImageSourceViewerModeControl__Button--active': mode === 'translator',