diff --git a/src/apis/language.ts b/src/apis/language.ts
index 9fc3b5c..1f07f8f 100644
--- a/src/apis/language.ts
+++ b/src/apis/language.ts
@@ -3,6 +3,8 @@
  */
 import { request } from '.';
 import { AxiosRequestConfig } from 'axios';
+import { getIntl } from '@/locales';
+import { toLowerCamelCase } from '@/utils';
 
 export interface APILanguage {
   id: string;
@@ -20,14 +22,24 @@ export interface APILanguage {
 interface GetLanguagesData {
   configs?: AxiosRequestConfig;
 }
-/** 获取系统角色 */
-const getLanguages = ({ configs = {} } = {} as GetLanguagesData) => {
-  return request<APILanguage[]>({
+
+/** Get global lang list */
+async function getLanguages({ configs = {} } = {} as GetLanguagesData) {
+  const res = await request<APILanguage[]>({
     method: 'GET',
     url: `/v1/languages`,
     ...configs,
   });
-};
+  res.data = res.data.map((item) => toLowerCamelCase(item));
+  const intl = getIntl();
+  if (intl.locale === 'en') {
+    res.data.forEach((item) => {
+      // workaround server's corrupted data
+      item.i18nName = item.enName;
+    });
+  }
+  return res;
+}
 
 export default {
   getLanguages,
diff --git a/src/components/FileItem.tsx b/src/components/FileItem.tsx
index cc65cbb..8719b92 100644
--- a/src/components/FileItem.tsx
+++ b/src/components/FileItem.tsx
@@ -13,10 +13,10 @@ import {
   FILE_NOT_EXIST_REASON,
   FILE_SAFE_STATUS,
   IMAGE_COVER,
-} from '../constants';
-import { FC, File } from '../interfaces';
+} from '@/constants';
+import { FC, File } from '@/interfaces';
 import style from '../style';
-import { cardClickEffect, clickEffect } from '../utils/style';
+import { cardClickEffect, clickEffect } from '@/utils/style';
 
 /** 文件条目的属性接口 */
 interface FileItemProps {
diff --git a/src/components/LanguageSelect.tsx b/src/components/LanguageSelect.tsx
index 62d99bd..e555258 100644
--- a/src/components/LanguageSelect.tsx
+++ b/src/components/LanguageSelect.tsx
@@ -3,9 +3,8 @@ import { Select } from 'antd';
 import { SelectProps } from 'antd/lib/select';
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
-import apis from '../apis';
-import { FC } from '../interfaces';
-import { toLowerCamelCase } from '../utils';
+import { api } from '@/apis';
+import { FC } from '@/interfaces';
 
 interface SelectOption {
   label: string;
@@ -30,9 +29,8 @@ export const LanguageSelect: FC<LanguageSelectProps> = ({
 
   useEffect(() => {
     setLoading(true);
-    apis.getLanguages().then((result) => {
+    api.language.getLanguages().then((result) => {
       const options = result.data.map((item) => {
-        item = toLowerCamelCase(item);
         const option: SelectOption = {
           label: item.i18nName,
           value: item.code,
diff --git a/src/components/MitPreprocess/TranslateCompanion.tsx b/src/components/MitPreprocess/TranslateCompanion.tsx
index 9c4651a..919bd47 100644
--- a/src/components/MitPreprocess/TranslateCompanion.tsx
+++ b/src/components/MitPreprocess/TranslateCompanion.tsx
@@ -1,18 +1,13 @@
-import { FC } from '../../interfaces';
+import { FC } from '@/interfaces';
 import { RefObject, useRef, useState } from 'react';
 import { FilePond } from 'react-filepond';
 import { css } from '@emotion/core';
 import { Button } from '../Button';
 import { createMoeflowProjectZip, LPFile } from './moeflow-packager';
-import { FailureResults } from '../../apis';
+import { FailureResults } from '@/apis';
 import { measureImgSize } from '@jokester/ts-commonutil/lib/frontend/measure-img';
 import { clamp } from 'lodash-es';
-import {
-  BBox,
-  CoordPair,
-  mitPreprocess,
-  TextQuad,
-} from '../../apis/mit_preprocess';
+import { BBox, mitPreprocess, TextQuad } from '@/apis/mit_preprocess';
 import { ResourcePool } from '@jokester/ts-commonutil/lib/concurrency/resource-pool';
 
 const MAX_FILE_COUNT = 30;
diff --git a/src/components/TeamSettingBase.tsx b/src/components/TeamSettingBase.tsx
index d4284ac..146be2d 100644
--- a/src/components/TeamSettingBase.tsx
+++ b/src/components/TeamSettingBase.tsx
@@ -160,6 +160,7 @@ export const TeamSettingBase: FC<TeamSettingBaseProps> = ({ className }) => {
         {permissionsVisible && (
           <ContentItem>
             <div className="permissions">
+              {/* FIXME: this should be presented in a table */}
               {currentTeam.role.permissions.map((x) => {
                 return (
                   <Tooltip
diff --git a/src/components/index.ts b/src/components/index.ts
index 202c955..bff7626 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -24,20 +24,8 @@ export { Form } from './Form';
 export { FormItem } from './FormItem';
 export { GroupJoinForm } from './GroupJoinForm';
 export { Header } from './Header';
-export { HotKeyRecorder, useHotKey } from './HotKey';
+export { useHotKey } from './HotKey';
 export { ImageOCRProgress } from './ImageOCRProgress';
-export { ImageSelect } from './ImageSelect';
-export { ImageSourceViewer } from './ImageSourceViewer';
-export { ImageSourceViewerGod } from './ImageSourceViewerGod';
-export { ImageSourceViewerModeControl } from './ImageSourceViewerModeControl';
-export { ImageSourceViewerProofreader } from './ImageSourceViewerProofreader';
-export { ImageSourceViewerTranslator } from './ImageSourceViewerTranslator';
-export { ImageTranslatorSettingHotKey } from './ImageTranslatorSettingHotKey';
-export { ImageTranslatorSettingMouse } from './ImageTranslatorSettingMouse';
-export { ImageViewer } from './ImageViewer';
-export { ImageViewerLabelTextExample } from './ImageViewerLabelTextExample';
-export { ImageViewerSettingPanel } from './ImageViewerSettingPanel';
-export { ImageViewerZoomPanel } from './ImageViewerZoomPanel';
 export { InvitationList } from './InvitationList';
 export { InviteUser } from './InviteUser';
 export { Label } from './Label';
@@ -49,27 +37,16 @@ export { ListSkeletonItem } from './ListSkeletonItem';
 export { LoadingIcon } from './LoadingIcon';
 export { MemberList } from './MemberList';
 export { MovableArea, MovableItem } from './Movable';
-export { MovableAreaColorBackground } from './MovableAreaColorBackground';
-export { MovableAreaImageBackground } from './MovableAreaImageBackground';
-export { MovableItemBars } from './MovableItemBars';
-export { MovableLabel } from './MovableLabel';
 export { NavTab } from './NavTab';
 export { NavTabs } from './NavTabs';
 export { Output } from './Output';
 export { OutputList } from './OutputList';
-export { ProjectCreateForm } from './ProjectCreateForm';
-export { ProjectEditForm } from './ProjectEditForm';
-export { ProjectFinishedTip } from './ProjectFinishedTip';
-export { ProjectImportFromLabelplusStatus } from './ProjectImportFromLabelplusStatus';
 export { ProjectItem } from './ProjectItem';
 export { ProjectList } from './ProjectList';
 export { ProjectSetCreateForm } from './ProjectSetCreateForm';
 export { ProjectSetEditForm } from './ProjectSetEditForm';
 export { ProjectSetList } from './ProjectSetList';
 export { ProjectSetSettingBase } from './ProjectSetSettingBase';
-export { ProjectSettingBase } from './ProjectSettingBase';
-export { ProjectSettingTarget } from './ProjectSettingTarget';
-export { ProjectTargetList } from './ProjectTargetList';
 export { RoleRadioGroup } from './RoleRadioGroup';
 export { RoleSelect } from './RoleSelect';
 export { Spin } from './Spin';
@@ -83,11 +60,8 @@ export { TeamSearchList } from './TeamSearchList';
 export { TeamSettingBase } from './TeamSettingBase';
 export { Tooltip } from './Tooltip';
 export { TranslationProgress } from './TranslationProgress';
-export { TranslationSaveFailed } from './TranslationSaveFailed';
-export { TranslationUser } from './TranslationUser';
 export { TypeRadioGroup } from './TypeRadioGroup';
 export { UserEmailEditForm } from './UserEmailEditForm';
 export { UserInvitationList } from './UserInvitationList';
 export { UserPasswordEditForm } from './UserPasswordEditForm';
 export { VCodeInput } from './VCodeInput';
-export { ProjectImportForm } from './ProjectImportForm';
diff --git a/src/components/ImageSelect.tsx b/src/components/project-file/ImageSelect.tsx
similarity index 96%
rename from src/components/ImageSelect.tsx
rename to src/components/project-file/ImageSelect.tsx
index 514a4b7..6af7126 100644
--- a/src/components/ImageSelect.tsx
+++ b/src/components/project-file/ImageSelect.tsx
@@ -5,12 +5,12 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { useClickAway } from 'react-use';
-import apis from '../apis';
-import { FC, File } from '../interfaces';
-import { AppState } from '../store';
-import style from '../style';
-import { toLowerCamelCase } from '../utils';
-import { clickEffect } from '../utils/style';
+import apis from '@/apis';
+import { FC, File } from '@/interfaces';
+import { AppState } from '@/store';
+import style from '@/style';
+import { toLowerCamelCase } from '@/utils';
+import { clickEffect } from '@/utils/style';
 
 /** 图片文件选择下拉框的属性接口 */
 interface ImageSelectProps {
diff --git a/src/components/ImageSourceViewer.tsx b/src/components/project-file/ImageSourceViewer.tsx
similarity index 85%
rename from src/components/ImageSourceViewer.tsx
rename to src/components/project-file/ImageSourceViewer.tsx
index 08443e5..4f0bc45 100644
--- a/src/components/ImageSourceViewer.tsx
+++ b/src/components/project-file/ImageSourceViewer.tsx
@@ -2,15 +2,13 @@ import { css } from '@emotion/core';
 import classNames from 'classnames';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import {
-  ImageSourceViewerGod,
-  ImageSourceViewerProofreader,
-  ImageSourceViewerTranslator,
-  TranslationSaveFailed,
-} from '.';
-import { FC, File } from '../interfaces';
-import { Source as ISource } from '../interfaces/source';
-import { AppState } from '../store';
+import { FC, File } from '@/interfaces';
+import { Source as ISource } from '@/interfaces/source';
+import { AppState } from '@/store';
+import { TranslationSaveFailed } from './TranslationSaveFailed';
+import { ImageSourceViewerGod } from './ImageSourceViewerGod';
+import { ImageSourceViewerTranslator } from './ImageSourceViewerTranslator';
+import { ImageSourceViewerProofreader } from './ImageSourceViewerProofreader';
 
 /** 原文列表的属性接口 */
 interface ImageSourceViewerProps {
diff --git a/src/components/ImageSourceViewerGod/Source.tsx b/src/components/project-file/ImageSourceViewerGod/Source.tsx
similarity index 92%
rename from src/components/ImageSourceViewerGod/Source.tsx
rename to src/components/project-file/ImageSourceViewerGod/Source.tsx
index f6702d3..31f3164 100644
--- a/src/components/ImageSourceViewerGod/Source.tsx
+++ b/src/components/project-file/ImageSourceViewerGod/Source.tsx
@@ -4,16 +4,16 @@ import classNames from 'classnames';
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { Icon } from '..';
-import { PROJECT_PERMISSION } from '../../constants';
-import { SOURCE_POSITION_TYPE } from '../../constants/source';
-import { FC } from '../../interfaces';
-import { Source as ISource } from '../../interfaces/source';
-import { AppState } from '../../store';
-import { editSourceSaga, focusSource } from '../../store/source/slice';
-import style from '../../style';
-import { checkTranslationState } from '../../utils/source';
-import { can } from '../../utils/user';
+import { Icon } from '@/components';
+import { PROJECT_PERMISSION } from '@/constants';
+import { SOURCE_POSITION_TYPE } from '@/constants/source';
+import { FC } from '@/interfaces';
+import { Source as ISource } from '@/interfaces/source';
+import { AppState } from '@/store';
+import { editSourceSaga, focusSource } from '@/store/source/slice';
+import style from '@/style';
+import { checkTranslationState } from '@/utils/source';
+import { can } from '@/utils/user';
 import { TranslationList } from './TranslationList';
 
 /** 原文的属性接口 */
diff --git a/src/components/ImageSourceViewerGod/Translation.tsx b/src/components/project-file/ImageSourceViewerGod/Translation.tsx
similarity index 97%
rename from src/components/ImageSourceViewerGod/Translation.tsx
rename to src/components/project-file/ImageSourceViewerGod/Translation.tsx
index a1222fd..fece963 100644
--- a/src/components/ImageSourceViewerGod/Translation.tsx
+++ b/src/components/project-file/ImageSourceViewerGod/Translation.tsx
@@ -6,19 +6,20 @@ import { lighten } from 'polished';
 import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { DebounceStatus, Icon, Tooltip, TranslationUser } from '..';
-import { PROJECT_PERMISSION } from '../../constants';
-import { FC, Source } from '../../interfaces';
-import { Translation as ITranslation } from '../../interfaces/translation';
-import { AppState } from '../../store';
+import { DebounceStatus, Icon, Tooltip } from '@/components';
+import { PROJECT_PERMISSION } from '@/constants';
+import { FC, Source } from '@/interfaces';
+import { Translation as ITranslation } from '@/interfaces/translation';
+import { AppState } from '@/store';
 import {
   editMyTranslationSaga,
   editProofreadSaga,
   selectTranslationSaga,
-} from '../../store/source/slice';
-import style from '../../style';
-import { clearClickEffect, clickEffect } from '../../utils/style';
-import { can } from '../../utils/user';
+} from '@/store/source/slice';
+import style from '@/style';
+import { clearClickEffect, clickEffect } from '@/utils/style';
+import { can } from '@/utils/user';
+import { TranslationUser } from '../TranslationUser';
 
 export interface OnTextAreaChange {
   (event: React.ChangeEvent<HTMLTextAreaElement>): void;
diff --git a/src/components/ImageSourceViewerGod/TranslationList.tsx b/src/components/project-file/ImageSourceViewerGod/TranslationList.tsx
similarity index 89%
rename from src/components/ImageSourceViewerGod/TranslationList.tsx
rename to src/components/project-file/ImageSourceViewerGod/TranslationList.tsx
index 736b337..68c09c9 100644
--- a/src/components/ImageSourceViewerGod/TranslationList.tsx
+++ b/src/components/project-file/ImageSourceViewerGod/TranslationList.tsx
@@ -4,16 +4,13 @@ import classNames from 'classnames';
 import React, { useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { Translation } from './Translation';
-import { PROJECT_PERMISSION } from '../../constants';
-import { FC, Source } from '../../interfaces';
-import { Translation as ITranslation } from '../../interfaces/translation';
-import { AppState } from '../../store';
-import style from '../../style';
-import {
-  filterValidTranslations,
-  isValidTranslation,
-} from '../../utils/source';
-import { can } from '../../utils/user';
+import { PROJECT_PERMISSION } from '@/constants';
+import { FC, Source } from '@/interfaces';
+import { Translation as ITranslation } from '@/interfaces/translation';
+import { AppState } from '@/store';
+import style from '@/style';
+import { filterValidTranslations, isValidTranslation } from '@/utils/source';
+import { can } from '@/utils/user';
 
 /** 翻译列表的属性接口 */
 interface TranslationListProps {
diff --git a/src/components/ImageSourceViewerGod/index.tsx b/src/components/project-file/ImageSourceViewerGod/index.tsx
similarity index 89%
rename from src/components/ImageSourceViewerGod/index.tsx
rename to src/components/project-file/ImageSourceViewerGod/index.tsx
index df160d3..4e8e7a7 100644
--- a/src/components/ImageSourceViewerGod/index.tsx
+++ b/src/components/project-file/ImageSourceViewerGod/index.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/core';
 import classNames from 'classnames';
 import React from 'react';
-import { ImageSourceViewerModeControl } from '..';
-import { FC, Source as ISource } from '../../interfaces';
-import style from '../../style';
+import { ImageSourceViewerModeControl } from '../ImageSourceViewerModeControl';
+import { FC, Source as ISource } from '@/interfaces';
+import style from '@/style';
 import { Source } from './Source';
 
 /** 全能模式的属性接口 */
diff --git a/src/components/ImageSourceViewerModeControl.tsx b/src/components/project-file/ImageSourceViewerModeControl.tsx
similarity index 89%
rename from src/components/ImageSourceViewerModeControl.tsx
rename to src/components/project-file/ImageSourceViewerModeControl.tsx
index 686aaa1..f1ece6f 100644
--- a/src/components/ImageSourceViewerModeControl.tsx
+++ b/src/components/project-file/ImageSourceViewerModeControl.tsx
@@ -3,13 +3,13 @@ import classNames from 'classnames';
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { PROJECT_PERMISSION } from '../constants';
-import { FC } from '../interfaces';
-import { AppState } from '../store';
-import { setImageTranslatorMode } from '../store/imageTranslator/slice';
-import style from '../style';
-import { clearClickEffect, clickEffect } from '../utils/style';
-import { can } from '../utils/user';
+import { PROJECT_PERMISSION } from '@/constants';
+import { FC } from '@/interfaces';
+import { AppState } from '@/store';
+import { setImageTranslatorMode } from '@/store/imageTranslator/slice';
+import style from '@/style';
+import { clearClickEffect, clickEffect } from '@/utils/style';
+import { can } from '@/utils/user';
 
 /** 模板的属性接口 */
 interface ImageSourceViewerModeControlProps {
diff --git a/src/components/ImageSourceViewerProofreader/Source.tsx b/src/components/project-file/ImageSourceViewerProofreader/Source.tsx
similarity index 96%
rename from src/components/ImageSourceViewerProofreader/Source.tsx
rename to src/components/project-file/ImageSourceViewerProofreader/Source.tsx
index 3dcf1f1..69fbb49 100644
--- a/src/components/ImageSourceViewerProofreader/Source.tsx
+++ b/src/components/project-file/ImageSourceViewerProofreader/Source.tsx
@@ -5,15 +5,15 @@ import { clearFix, darken } from 'polished';
 import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { DebounceStatus, Icon, Tooltip } from '..';
-import { APITranslation } from '../../apis/translation';
-import { Source as ISource } from '../../interfaces';
-import { AppState } from '../../store';
-import { focusSource, selectTranslationSaga } from '../../store/source/slice';
-import { focusTranslation } from '../../store/translation/slice';
-import style from '../../style';
-import { getSortedTranslations } from '../../utils/source';
-import { clickEffect, hover } from '../../utils/style';
+import { DebounceStatus, Icon, Tooltip } from '@/components';
+import { APITranslation } from '@/apis/translation';
+import { Source as ISource } from '@/interfaces';
+import { AppState } from '@/store';
+import { focusSource, selectTranslationSaga } from '@/store/source/slice';
+import { focusTranslation } from '@/store/translation/slice';
+import style from '@/style';
+import { getSortedTranslations } from '@/utils/source';
+import { clickEffect, hover } from '@/utils/style';
 
 /** 原文的属性接口 */
 interface SourceProps {
diff --git a/src/components/ImageSourceViewerProofreader/index.tsx b/src/components/project-file/ImageSourceViewerProofreader/index.tsx
similarity index 96%
rename from src/components/ImageSourceViewerProofreader/index.tsx
rename to src/components/project-file/ImageSourceViewerProofreader/index.tsx
index 74de271..08ab1b7 100644
--- a/src/components/ImageSourceViewerProofreader/index.tsx
+++ b/src/components/project-file/ImageSourceViewerProofreader/index.tsx
@@ -5,29 +5,22 @@ import classNames from 'classnames';
 import React, { useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  DebounceStatus,
-  ImageSourceViewerModeControl,
-  TranslationUser,
-} from '..';
-import { APITranslation } from '../../apis/translation';
-import {
-  FC,
-  File,
-  InputDebounceStatus,
-  Source as ISource,
-} from '../../interfaces';
-import { AppState } from '../../store';
+import { DebounceStatus } from '@/components';
+import { TranslationUser } from '../TranslationUser';
+import { APITranslation } from '@/apis/translation';
+import { FC, File, InputDebounceStatus, Source as ISource } from '@/interfaces';
+import { AppState } from '@/store';
 import {
   batchSelectTranslationSaga,
   editMyTranslationSaga,
   editProofreadSaga,
-} from '../../store/source/slice';
-import { focusTranslation } from '../../store/translation/slice';
-import style from '../../style';
-import { getBestTranslation } from '../../utils/source';
-import { hover } from '../../utils/style';
+} from '@/store/source/slice';
+import { focusTranslation } from '@/store/translation/slice';
+import style from '@/style';
+import { getBestTranslation } from '@/utils/source';
+import { hover } from '@/utils/style';
 import { Source } from './Source';
+import { ImageSourceViewerModeControl } from '../ImageSourceViewerModeControl';
 
 /** 校对模式的属性接口 */
 interface ImageSourceViewerProofreaderProps {
diff --git a/src/components/ImageSourceViewerTranslator.tsx b/src/components/project-file/ImageSourceViewerTranslator.tsx
similarity index 95%
rename from src/components/ImageSourceViewerTranslator.tsx
rename to src/components/project-file/ImageSourceViewerTranslator.tsx
index 9736cd3..479f1ac 100644
--- a/src/components/ImageSourceViewerTranslator.tsx
+++ b/src/components/project-file/ImageSourceViewerTranslator.tsx
@@ -5,16 +5,17 @@ import { darken } from 'polished';
 import React, { useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { DebounceStatus, Icon, ImageSourceViewerModeControl, Tooltip } from '.';
-import { APITranslation } from '../apis/translation';
-import { PROJECT_PERMISSION } from '../constants';
-import { FC, Source as ISource } from '../interfaces';
-import { AppState } from '../store';
-import { editMyTranslationSaga, focusSource } from '../store/source/slice';
-import style from '../style';
-import { getBestTranslation } from '../utils/source';
-import { clickEffect, hover } from '../utils/style';
-import { can } from '../utils/user';
+import { DebounceStatus, Icon, Tooltip } from '@/components';
+import { APITranslation } from '@/apis/translation';
+import { PROJECT_PERMISSION } from '@/constants';
+import { FC, Source as ISource } from '@/interfaces';
+import { AppState } from '@/store';
+import { editMyTranslationSaga, focusSource } from '@/store/source/slice';
+import style from '@/style';
+import { getBestTranslation } from '@/utils/source';
+import { clickEffect, hover } from '@/utils/style';
+import { can } from '@/utils/user';
+import { ImageSourceViewerModeControl } from './ImageSourceViewerModeControl';
 
 /** 翻译模式的属性接口 */
 interface ImageSourceViewerTranslatorProps {
diff --git a/src/components/ImageTranslatorSettingHotKey.tsx b/src/components/project-file/ImageTranslatorSettingHotKey.tsx
similarity index 94%
rename from src/components/ImageTranslatorSettingHotKey.tsx
rename to src/components/project-file/ImageTranslatorSettingHotKey.tsx
index 34605b4..0a7cedc 100644
--- a/src/components/ImageTranslatorSettingHotKey.tsx
+++ b/src/components/project-file/ImageTranslatorSettingHotKey.tsx
@@ -3,17 +3,17 @@ import classNames from 'classnames';
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { FC } from '../interfaces';
-import { AppState } from '../store';
-import { HotKeyState, setHotKey } from '../store/hotKey/slice';
-import { saveHotKey } from '../utils/storage';
-import { HotKeyRecorder } from './HotKey';
+import { FC } from '@/interfaces';
+import { AppState } from '@/store';
+import { HotKeyState, setHotKey } from '@/store/hotKey/slice';
+import { saveHotKey } from '@/utils/storage';
+import { HotKeyRecorder } from '@/components/HotKey';
 import {
   ARROW_KEY_EVENT_CODES,
   MAIN_KEY_EVENT_CODES,
   SPACE_KEY_EVENT_CODES,
-} from './HotKey/constants';
-import { HotKeyEvent } from './HotKey/interfaces';
+} from '@/components/HotKey/constants';
+import { HotKeyEvent } from '@/components/HotKey/interfaces';
 
 /** 快捷键设置的属性接口 */
 interface ImageTranslatorSettingHotKeyProps {
diff --git a/src/components/ImageTranslatorSettingMouse.tsx b/src/components/project-file/ImageTranslatorSettingMouse.tsx
similarity index 98%
rename from src/components/ImageTranslatorSettingMouse.tsx
rename to src/components/project-file/ImageTranslatorSettingMouse.tsx
index cda8a7e..55b523e 100644
--- a/src/components/ImageTranslatorSettingMouse.tsx
+++ b/src/components/project-file/ImageTranslatorSettingMouse.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/core';
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { FC } from '../interfaces';
+import { FC } from '@/interfaces';
 import classNames from 'classnames';
 
 /** 模板的属性接口 */
diff --git a/src/components/ImageViewer.tsx b/src/components/project-file/ImageViewer.tsx
similarity index 97%
rename from src/components/ImageViewer.tsx
rename to src/components/project-file/ImageViewer.tsx
index 2164258..0190d38 100644
--- a/src/components/ImageViewer.tsx
+++ b/src/components/project-file/ImageViewer.tsx
@@ -18,21 +18,21 @@ import {
   OnZoomEnd,
   OnZooming,
   OnZoomStart,
-} from './Movable';
-import { SOURCE_POSITION_TYPE } from '../constants/source';
-import { FC, File, Source } from '../interfaces';
-import { AppState } from '../store';
-import { createSourceSaga, focusSource } from '../store/source/slice';
-import style from '../style';
-import { getBestTranslation } from '../utils/source';
-import { clickEffect } from '../utils/style';
+} from '@/components/Movable';
+import { SOURCE_POSITION_TYPE } from '@/constants/source';
+import { FC, File, Source } from '@/interfaces';
+import { AppState } from '@/store';
+import { createSourceSaga, focusSource } from '@/store/source/slice';
+import style from '@/style';
+import { getBestTranslation } from '@/utils/source';
+import { clickEffect } from '@/utils/style';
 import { ImageViewerPagingPanel } from './ImageViewerPagingPanel';
 import { ImageViewerSettingPanel } from './ImageViewerSettingPanel';
 import { ImageViewerZoomPanel } from './ImageViewerZoomPanel';
 import { MovableAreaColorBackground } from './MovableAreaColorBackground';
 import { MovableAreaImageBackground } from './MovableAreaImageBackground';
 import { MovableLabel } from './MovableLabel';
-import { Tooltip } from './Tooltip';
+import { Tooltip } from '@/components/Tooltip';
 
 /**
  * 🖥浏览器识别
@@ -71,8 +71,6 @@ interface ImageViewerProps {
 }
 /**
  * 图片翻译标记器
- * @param width 宽
- * @param height 高
  */
 export const ImageViewer: FC<ImageViewerProps> = ({
   file,
diff --git a/src/components/ImageViewerLabelTextExample.tsx b/src/components/project-file/ImageViewerLabelTextExample.tsx
similarity index 98%
rename from src/components/ImageViewerLabelTextExample.tsx
rename to src/components/project-file/ImageViewerLabelTextExample.tsx
index 7ed572a..0ce2d3c 100644
--- a/src/components/ImageViewerLabelTextExample.tsx
+++ b/src/components/project-file/ImageViewerLabelTextExample.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/core';
 import classNames from 'classnames';
 import React from 'react';
-import { Direction, FC, WritingMode } from '../interfaces';
+import { Direction, FC, WritingMode } from '@/interfaces';
 
 /** 标记相对文本位置示例的属性接口 */
 interface ImageViewerLabelTextExampleProps {
diff --git a/src/components/ImageViewerPagingPanel.tsx b/src/components/project-file/ImageViewerPagingPanel.tsx
similarity index 95%
rename from src/components/ImageViewerPagingPanel.tsx
rename to src/components/project-file/ImageViewerPagingPanel.tsx
index 4651721..f6858f4 100644
--- a/src/components/ImageViewerPagingPanel.tsx
+++ b/src/components/project-file/ImageViewerPagingPanel.tsx
@@ -1,15 +1,16 @@
 import { css } from '@emotion/core';
-import { Icon, ImageSelect, useHotKey } from '.';
+import { Icon, useHotKey } from '@/components';
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
-import { Tooltip } from '../components';
-import { FC } from '../interfaces';
-import style from '../style';
+import { Tooltip } from '@/components';
+import { FC } from '@/interfaces';
+import style from '@/style';
 import classNames from 'classnames';
-import { clearClickEffect, clickEffect } from '../utils/style';
-import { AppState } from '../store';
+import { clearClickEffect, clickEffect } from '@/utils/style';
+import { AppState } from '@/store';
 import { useSelector } from 'react-redux';
+import { ImageSelect } from './ImageSelect';
 
 /** 图片浏览器设置面板的属性接口 */
 interface ImageViewerPagingPanelProps {
diff --git a/src/components/ImageViewerSettingPanel.tsx b/src/components/project-file/ImageViewerSettingPanel.tsx
similarity index 92%
rename from src/components/ImageViewerSettingPanel.tsx
rename to src/components/project-file/ImageViewerSettingPanel.tsx
index 0f9f510..c9b231d 100644
--- a/src/components/ImageViewerSettingPanel.tsx
+++ b/src/components/project-file/ImageViewerSettingPanel.tsx
@@ -2,11 +2,10 @@ import { css } from '@emotion/core';
 import classNames from 'classnames';
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { Icon } from '.';
-import { Tooltip } from '../components';
-import { FC } from '../interfaces';
-import style from '../style';
-import { clickEffect } from '../utils/style';
+import { Icon, Tooltip } from '@/components';
+import { FC } from '@/interfaces';
+import style from '@/style';
+import { clickEffect } from '@/utils/style';
 
 /** 图片浏览器设置面板的属性接口 */
 interface ImageViewerSettingPanelProps {
diff --git a/src/components/ImageViewerZoomPanel.tsx b/src/components/project-file/ImageViewerZoomPanel.tsx
similarity index 97%
rename from src/components/ImageViewerZoomPanel.tsx
rename to src/components/project-file/ImageViewerZoomPanel.tsx
index e127926..8c6a649 100644
--- a/src/components/ImageViewerZoomPanel.tsx
+++ b/src/components/project-file/ImageViewerZoomPanel.tsx
@@ -1,16 +1,15 @@
 import { css } from '@emotion/core';
-import { Icon } from './icon';
+import { Icon, Tooltip } from '@/components';
 import { Slider } from 'antd';
 import { debounce } from 'lodash-es';
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
-import { Tooltip } from './Tooltip';
-import { AppState } from '../store';
-import style from '../style';
-import { FC } from '../interfaces';
+import { AppState } from '@/store';
+import style from '@/style';
+import { FC } from '@/interfaces';
 import { MovableItemBars } from './MovableItemBars';
-import { clickEffect } from '../utils/style';
+import { clickEffect } from '@/utils/style';
 
 /** 图片浏览器缩放控制面板的属性接口 */
 interface ImageViewerZoomPanelProps {
diff --git a/src/components/MovableAreaColorBackground.tsx b/src/components/project-file/MovableAreaColorBackground.tsx
similarity index 93%
rename from src/components/MovableAreaColorBackground.tsx
rename to src/components/project-file/MovableAreaColorBackground.tsx
index dfbed73..c1dcdd7 100644
--- a/src/components/MovableAreaColorBackground.tsx
+++ b/src/components/project-file/MovableAreaColorBackground.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/core';
 import React from 'react';
-import { FC } from '../interfaces';
+import { FC } from '@/interfaces';
 
 /**
  * 可移动区域纯色背景属性接口
diff --git a/src/components/MovableAreaImageBackground.tsx b/src/components/project-file/MovableAreaImageBackground.tsx
similarity index 97%
rename from src/components/MovableAreaImageBackground.tsx
rename to src/components/project-file/MovableAreaImageBackground.tsx
index 3d8e0c0..bc2a18b 100644
--- a/src/components/MovableAreaImageBackground.tsx
+++ b/src/components/project-file/MovableAreaImageBackground.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/core';
 import React, { useRef } from 'react';
-import { FC } from '../interfaces';
+import { FC } from '@/interfaces';
 
 /** 可移动区域图片背景的属性接口 */
 interface MovableAreaImageBackgroundProps {
diff --git a/src/components/MovableItemBars.tsx b/src/components/project-file/MovableItemBars.tsx
similarity index 89%
rename from src/components/MovableItemBars.tsx
rename to src/components/project-file/MovableItemBars.tsx
index 663c2fa..edd78db 100644
--- a/src/components/MovableItemBars.tsx
+++ b/src/components/project-file/MovableItemBars.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/core';
-import { Icon } from '.';
+import { Icon } from '@/components';
 import React from 'react';
-import { FC } from '../interfaces';
+import { FC } from '@/interfaces';
 
 /** 用于拖动元素的三条线样的把手的属性接口 */
 interface MovableItemBarsProps {
diff --git a/src/components/MovableLabel.tsx b/src/components/project-file/MovableLabel.tsx
similarity index 89%
rename from src/components/MovableLabel.tsx
rename to src/components/project-file/MovableLabel.tsx
index 8671b81..be41825 100644
--- a/src/components/MovableLabel.tsx
+++ b/src/components/project-file/MovableLabel.tsx
@@ -1,19 +1,19 @@
 import React, { useContext, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { PROJECT_PERMISSION } from '../constants';
-import { SOURCE_POSITION_TYPE } from '../constants/source';
-import { FC, labelSavingStatuses } from '../interfaces';
-import { AppState } from '../store';
-import { deleteSourceSaga, editSourceSaga } from '../store/source/slice';
-import { can } from '../utils/user';
-import { Label, LabelProps } from './Label';
+import { PROJECT_PERMISSION } from '@/constants';
+import { SOURCE_POSITION_TYPE } from '@/constants/source';
+import { FC, labelSavingStatuses } from '@/interfaces';
+import { AppState } from '@/store';
+import { deleteSourceSaga, editSourceSaga } from '@/store/source/slice';
+import { can } from '@/utils/user';
+import { Label, LabelProps } from '@/components/Label';
 import {
   MovableInfoContext,
   MovableItem,
   OnLongPress,
   OnMoveEnd,
   OnTap,
-} from './Movable';
+} from '@/components/Movable';
 
 /**
  * 标签（使用 Context，进行自动缩放/激活）
diff --git a/src/components/TranslationSaveFailed.tsx b/src/components/project-file/TranslationSaveFailed.tsx
similarity index 97%
rename from src/components/TranslationSaveFailed.tsx
rename to src/components/project-file/TranslationSaveFailed.tsx
index d4d5c91..f630b6c 100644
--- a/src/components/TranslationSaveFailed.tsx
+++ b/src/components/project-file/TranslationSaveFailed.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/core';
 import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl';
-import { FC, labelSavingStatuses, Source } from '../interfaces';
+import { FC, labelSavingStatuses, Source } from '@/interfaces';
 import classNames from 'classnames';
 import { Button } from 'antd';
 import {
@@ -11,9 +11,9 @@ import {
   EditProofreadSagaAction,
   SavingStatus,
   setSavingStatus,
-} from '../store/source/slice';
+} from '@/store/source/slice';
 import { useDispatch } from 'react-redux';
-import style from '../style';
+import style from '@/style';
 
 /** 翻译/校对保存出错提示的属性接口 */
 interface TranslationSaveFailedProps {
diff --git a/src/components/TranslationUser.tsx b/src/components/project-file/TranslationUser.tsx
similarity index 93%
rename from src/components/TranslationUser.tsx
rename to src/components/project-file/TranslationUser.tsx
index 4e99b0b..de25630 100644
--- a/src/components/TranslationUser.tsx
+++ b/src/components/project-file/TranslationUser.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/core';
 import classNames from 'classnames';
 import React from 'react';
-import { Avatar, Icon, Tooltip } from '.';
-import { FC } from '../interfaces';
-import style from '../style';
+import { Avatar, Icon, Tooltip } from '@/components';
+import { FC } from '@/interfaces';
+import style from '@/style';
 
 /** 翻译用户显示的属性接口 */
 interface TranslationUserProps {
diff --git a/src/components/project-file/index.ts b/src/components/project-file/index.ts
new file mode 100644
index 0000000..653d371
--- /dev/null
+++ b/src/components/project-file/index.ts
@@ -0,0 +1,13 @@
+import { lazy } from 'react';
+
+export const ImageViewer = lazy(() =>
+  import('./ImageViewer').then((module) => ({ default: module.ImageViewer })),
+);
+
+export const ImageSourceViewer = lazy(() =>
+  import('./ImageSourceViewer').then((module) => ({
+    default: module.ImageSourceViewer,
+  })),
+);
+export { ImageTranslatorSettingMouse } from './ImageTranslatorSettingMouse';
+export { ImageTranslatorSettingHotKey } from './ImageTranslatorSettingHotKey';
diff --git a/src/components/ProjectCreateForm.tsx b/src/components/project-set/ProjectCreateForm.tsx
similarity index 95%
rename from src/components/ProjectCreateForm.tsx
rename to src/components/project-set/ProjectCreateForm.tsx
index b470589..45cac2e 100644
--- a/src/components/ProjectCreateForm.tsx
+++ b/src/components/project-set/ProjectCreateForm.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/core';
 import { Button, Form as AntdForm, Input, message, Modal, Upload } from 'antd';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import {
   Form,
@@ -8,18 +8,18 @@ import {
   RoleRadioGroup,
   TypeRadioGroup,
   LanguageSelect,
-} from '.';
-import api from '../apis';
-import { FC, UserProjectSet, UserTeam } from '../interfaces';
+} from '..';
+import api from '@/apis';
+import { FC, UserProjectSet, UserTeam } from '@/interfaces';
 import { useDispatch, useSelector } from 'react-redux';
-import { createProject, resetProjectsState } from '../store/project/slice';
+import { createProject, resetProjectsState } from '@/store/project/slice';
 import { useHistory } from 'react-router-dom';
-import { AppState } from '../store';
-import { toLowerCamelCase } from '../utils';
-import { GROUP_ALLOW_APPLY_TYPE } from '../constants';
-import { configs } from '../configs';
-import style from '../style';
-import { resetFilesState } from '../store/file/slice';
+import { AppState } from '@/store';
+import { toLowerCamelCase } from '@/utils';
+import { GROUP_ALLOW_APPLY_TYPE } from '@/constants';
+import { configs } from '@/configs';
+import style from '../../style';
+import { resetFilesState } from '@/store/file/slice';
 
 /** 创建项目表单的属性接口 */
 interface ProjectCreateFormProps {
diff --git a/src/components/ProjectImportForm.tsx b/src/components/project-set/ProjectImportForm.tsx
similarity index 93%
rename from src/components/ProjectImportForm.tsx
rename to src/components/project-set/ProjectImportForm.tsx
index cd436fd..8285b7b 100644
--- a/src/components/ProjectImportForm.tsx
+++ b/src/components/project-set/ProjectImportForm.tsx
@@ -2,21 +2,14 @@ import { css } from '@emotion/core';
 import { Button, Form as AntdForm, Input, message, Modal, Upload } from 'antd';
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
-import {
-  Form,
-  FormItem,
-  RoleRadioGroup,
-  TypeRadioGroup,
-  LanguageSelect,
-} from '.';
-import api from '../apis';
-import { FC, UserProjectSet, UserTeam } from '../interfaces';
+import api from '../../apis';
+import { FC, UserProjectSet, UserTeam } from '@/interfaces';
 import { useDispatch, useSelector } from 'react-redux';
-import { createProject, resetProjectsState } from '../store/project/slice';
+import { createProject, resetProjectsState } from '@/store/project/slice';
 import { useHistory } from 'react-router-dom';
-import { AppState } from '../store';
-import { toLowerCamelCase } from '../utils';
-import { resetFilesState } from '../store/file/slice';
+import { AppState } from '@/store';
+import { toLowerCamelCase } from '@/utils';
+import { resetFilesState } from '@/store/file/slice';
 import * as zip from '@zip.js/zip.js';
 import { RcFile } from 'antd/lib/upload';
 import produce from 'immer';
diff --git a/src/components/ProjectEditForm.tsx b/src/components/project/ProjectEditForm.tsx
similarity index 91%
rename from src/components/ProjectEditForm.tsx
rename to src/components/project/ProjectEditForm.tsx
index 74cb66b..462319d 100644
--- a/src/components/ProjectEditForm.tsx
+++ b/src/components/project/ProjectEditForm.tsx
@@ -1,17 +1,17 @@
 import { css } from '@emotion/core';
 import { Button, Form as AntdForm, Input, message } from 'antd';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import { NavLink } from 'react-router-dom';
-import { Form, FormItem, RoleRadioGroup, TypeRadioGroup } from '.';
-import api from '../apis';
-import { GROUP_ALLOW_APPLY_TYPE, PROJECT_PERMISSION } from '../constants';
-import { FC, Project } from '../interfaces';
-import { AppState } from '../store';
-import { editProject, setCurrentProject } from '../store/project/slice';
-import { toLowerCamelCase } from '../utils';
-import { can } from '../utils/user';
+import { Form, FormItem, RoleRadioGroup, TypeRadioGroup } from '..';
+import api from '../../apis';
+import { GROUP_ALLOW_APPLY_TYPE, PROJECT_PERMISSION } from '@/constants';
+import { FC, Project } from '@/interfaces';
+import { AppState } from '@/store';
+import { editProject, setCurrentProject } from '@/store/project/slice';
+import { toLowerCamelCase } from '@/utils';
+import { can } from '@/utils/user';
 
 /** 修改项目表单的属性接口 */
 interface ProjectEditFormProps {
@@ -107,7 +107,9 @@ export const ProjectEditForm: FC<ProjectEditFormProps> = ({ className }) => {
         <FormItem label={formatMessage({ id: 'project.targetLanguagesCount' })}>
           <div>
             <span>{currentProject.targetCount} </span>
-            <NavLink to={`target`}>前往设置</NavLink>
+            <NavLink to={`target`}>
+              {formatMessage({ id: 'project.targetLanguages' })}
+            </NavLink>
           </div>
         </FormItem>
         <FormItem
diff --git a/src/components/ProjectFinishedTip.tsx b/src/components/project/ProjectFinishedTip.tsx
similarity index 85%
rename from src/components/ProjectFinishedTip.tsx
rename to src/components/project/ProjectFinishedTip.tsx
index e692727..4dffbb4 100644
--- a/src/components/ProjectFinishedTip.tsx
+++ b/src/components/project/ProjectFinishedTip.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { FC } from '../interfaces';
-import { EmptyTip } from '.';
+import { FC } from '../../interfaces';
+import { EmptyTip } from '..';
 
 /** 项目完结提示的属性接口 */
 interface ProjectFinishedTipProps {
diff --git a/src/components/ProjectImportFromLabelplusStatus.tsx b/src/components/project/ProjectImportFromLabelplusStatus.tsx
similarity index 89%
rename from src/components/ProjectImportFromLabelplusStatus.tsx
rename to src/components/project/ProjectImportFromLabelplusStatus.tsx
index 4e67d0b..a868a1d 100644
--- a/src/components/ProjectImportFromLabelplusStatus.tsx
+++ b/src/components/project/ProjectImportFromLabelplusStatus.tsx
@@ -1,14 +1,14 @@
 import { css } from '@emotion/core';
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { FC, Project } from '../interfaces';
+import { FC, Project } from '@/interfaces';
 import classNames from 'classnames';
-import { IMPORT_FROM_LABELPLUS_STATUS } from '../constants';
+import { IMPORT_FROM_LABELPLUS_STATUS } from '@/constants';
 import { useInterval } from 'react-use';
-import apis from '../apis';
-import { toLowerCamelCase } from '../utils';
+import apis from '../../apis';
+import { toLowerCamelCase } from '@/utils';
 import { useDispatch } from 'react-redux';
-import { editProject, setCurrentProject } from '../store/project/slice';
+import { editProject, setCurrentProject } from '@/store/project/slice';
 import { Progress, Result } from 'antd';
 
 /** 导入进度的属性接口 */
diff --git a/src/components/ProjectSettingBase.tsx b/src/components/project/ProjectSettingBase.tsx
similarity index 96%
rename from src/components/ProjectSettingBase.tsx
rename to src/components/project/ProjectSettingBase.tsx
index c428b47..3b82d80 100644
--- a/src/components/ProjectSettingBase.tsx
+++ b/src/components/project/ProjectSettingBase.tsx
@@ -12,25 +12,25 @@ import {
   ContentTitle,
   FormItem,
   Icon,
-  ProjectEditForm,
   Tooltip,
-} from '.';
-import api from '../apis';
+} from '@/components';
+import api from '../../apis';
 import {
   PROJECT_PERMISSION,
   PROJECT_STATUS,
   TEAM_PERMISSION,
-} from '../constants';
-import { FC, Project } from '../interfaces';
-import { AppState } from '../store';
+} from '@/constants';
+import { FC, Project } from '@/interfaces';
+import { AppState } from '@/store';
 import {
   deleteProject,
   editProject,
   setCurrentProject,
-} from '../store/project/slice';
-import style from '../style';
-import { toLowerCamelCase } from '../utils';
-import { can } from '../utils/user';
+} from '@/store/project/slice';
+import style from '../../style';
+import { toLowerCamelCase } from '@/utils';
+import { can } from '@/utils/user';
+import { ProjectEditForm } from './ProjectEditForm';
 
 /** 项目基础设置的属性接口 */
 interface ProjectSettingBaseProps {
diff --git a/src/components/ProjectSettingTarget.tsx b/src/components/project/ProjectSettingTarget.tsx
similarity index 95%
rename from src/components/ProjectSettingTarget.tsx
rename to src/components/project/ProjectSettingTarget.tsx
index 8f086c7..aed669b 100644
--- a/src/components/ProjectSettingTarget.tsx
+++ b/src/components/project/ProjectSettingTarget.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import api, { resultTypes } from '../apis';
+import api, { resultTypes } from '@/apis';
 import {
   EmptyTip,
   Icon,
@@ -14,12 +14,12 @@ import {
   ListItem,
   LIST_ITEM_DEFAULT_HEIGHT,
   Spin,
-} from '../components';
-import { FC, Target, Project } from '../interfaces';
-import { AppState } from '../store';
-import { increaseCurrentProjectTargetCount } from '../store/project/slice';
-import style from '../style';
-import { toLowerCamelCase } from '../utils';
+} from '@/components';
+import { FC, Target, Project } from '@/interfaces';
+import { AppState } from '@/store';
+import { increaseCurrentProjectTargetCount } from '@/store/project/slice';
+import style from '@/style';
+import { toLowerCamelCase } from '@/utils';
 
 /** 项目目标设置区域的属性接口 */
 interface ProjectSettingTargetProps {
diff --git a/src/components/ProjectTargetList.tsx b/src/components/project/ProjectTargetList.tsx
similarity index 93%
rename from src/components/ProjectTargetList.tsx
rename to src/components/project/ProjectTargetList.tsx
index fd387bc..0fa37ba 100644
--- a/src/components/ProjectTargetList.tsx
+++ b/src/components/project/ProjectTargetList.tsx
@@ -4,18 +4,18 @@ import classNames from 'classnames';
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
-import api, { resultTypes } from '../apis';
+import api, { resultTypes } from '../../apis';
 import {
   EmptyTip,
   List,
   ListItem,
   LIST_ITEM_DEFAULT_HEIGHT,
   TranslationProgress,
-} from '../components';
-import { FC, Project, Target } from '../interfaces';
-import { AppState } from '../store';
-import { toLowerCamelCase } from '../utils';
-import style from '../style';
+} from '..';
+import { FC, Project, Target } from '../../interfaces';
+import { AppState } from '../../store';
+import { toLowerCamelCase } from '../../utils';
+import style from '../../style';
 
 /** 项目目标列表页的属性接口 */
 interface ProjectTargetListProps {
diff --git a/src/interfaces/source.ts b/src/interfaces/source.ts
index 17bc819..f7cf632 100644
--- a/src/interfaces/source.ts
+++ b/src/interfaces/source.ts
@@ -1,4 +1,4 @@
-import { APISource } from '../apis/source';
+import { APISource } from '@/apis/source';
 
 export const labelSavingStatuses = ['creating', 'saving', 'deleting'];
 
diff --git a/src/locales/en.json b/src/locales/en.json
index e16f6be..31bde98 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -96,7 +96,7 @@
   "team.alreadyJoinedTipTitle": "You are already in the team",
   "team.alreadyJoinedTip": "You have already joined the team",
   "site.allowApplyTypeLabel": "Who can request to join",
-  "site.applicationCheckTypeLabel": "How to Handle Join Requests",
+  "site.applicationCheckTypeLabel": "How to handle join requests",
   "site.defaultRoleLabel": "Default Role After Joining",
   "site.baseSetting": "Basic settings",
   "site.memberSetting": "Members",
@@ -117,10 +117,10 @@
   "site.deny": "Reject",
   "team.leave": "Leave Team",
   "team.leaveConfirm": "Are you sure you want to leave the team?",
-  "site.applicationSetting": "Application Management",
-  "site.invitationSetting": "Invite Management",
+  "site.applicationSetting": "Applications",
+  "site.invitationSetting": "Invitations",
   "invitation.emptySearchTip": "No users with names containing \"{word}\". Please try a different search term.",
-  "invitation.emptyTip": "No ongoing invitations, invite users now!",
+  "invitation.emptyTip": "No pending invitations. Try inviting someone!",
   "invitation.inviteUser": "Invite User",
   "invitation.inviteTip": "Please enter a username to search for users.",
   "invitation.inviteAsRole": "Invite as \"{role}\"",
@@ -131,9 +131,9 @@
   "invitation.allow": "Agree",
   "invitation.allowed": "Agreed",
   "application.operator": "Operator:",
-  "application.emptyTip": "No users have requested to join yet.",
+  "application.emptyTip": "No pending join requests yet.",
   "application.denied": "Rejected",
-  "application.allowed": "Allowed",
+  "application.allowed": "Approved",
   "application.emptyMessage": "No memo",
   "me.invitation.emptyTip": "No invitations received yet.",
   "me.invitation.new": "New Invitation",
@@ -165,7 +165,7 @@
   "project.finishTipTitle": "Are you sure you want to mark this project as complete?",
   "project.finish": "Mark Project as complete",
   "project.name": "Project Name",
-  "project.intro": "Project Introduction",
+  "project.intro": "Project Description",
   "site.createProject": "Create Project",
   "site.importProject": "Import Project",
   "project.startImport": "Start Import",
@@ -191,7 +191,7 @@
   "site.targetLanguage": "Target Language",
   "project.targetSetting": "Target Language",
   "project.sourceLanguage": "Source Language",
-  "project.targetLanguages": "Target Language",
+  "project.targetLanguages": "Target Language(s)",
   "project.targetLanguagesCount": "Number of Target Languages",
   "project.deleteTargetTitle": "Are you sure you want to delete this target language?",
   "project.deleteTargetTip": "Note: Translations in the target language will be deleted!",
@@ -269,14 +269,14 @@
   "hotKeyRecorder.tip": "Press the button",
   "hotKeyRecorder.null": "None",
   "hotKeyRecorder.unbind": "Delete",
-  "hotKey.function": "Feature",
+  "hotKey.function": "Operation",
   "hotKey.mainHotKey": "Primary Shortcut Key",
   "hotKey.subHotKey": "Secondary Shortcut Key",
   "hotKey.focusNextSource": "Next Tab",
   "hotKey.focusPrevSource": "Previous Tab",
   "hotKey.goPrevPage": "Previous Page",
   "hotKey.goNextPage": "Next Page",
-  "mouse.function": "Feature",
+  "mouse.function": "Operation",
   "mouse.key": "Mouse Button",
   "mouse.addInLabel": "New Inline Label",
   "mouse.addOutLabel": "Create Out-of-Box Label",
@@ -317,13 +317,13 @@
   "output.invert": "Invert selection",
   "project.createViaLabelplus": "Import from LabelPlus txt file:",
   "site.delete": "Delete",
-  "project.createViaLabelplusNotSupport": "\"Not supported for multiple target languages\"",
+  "project.createViaLabelplusNotSupport": "Unavailable for project of multiple target languages",
   "file.needUploadTip": "Pending Upload",
   "site.selectPageAll": "Select All on This Page",
   "site.selectPageInverse": "Deselect This Page",
   "site.selectCancel": "Deselect",
   "site.selectFile": "Select File",
-  "imageTranslator.translatorMode": "Translation Mode",
+  "imageTranslator.translatorMode": "Translations",
   "imageTranslator.godMode": "All-in-One Mode",
   "debounceStatus.debouncing": "Typing...",
   "debounceStatus.saving": "Saving...",
@@ -348,7 +348,7 @@
   "site.projectName": "Project Name",
   "site.member": "Member",
   "team.userInsight": "Member Statistics",
-  "imageTranslator.proofreaderMode": "Proofreading Mode",
+  "imageTranslator.proofreaderMode": "Proofreading",
   "imageTranslator.copyTranslationContent": "Copy Translated Content",
   "imageTranslator.checkAllTranslation": "Confirm all of the above translations",
   "imageTranslator.checkAllTranslationTip": "Multiple translations prioritize the first one",
diff --git a/src/locales/index.ts b/src/locales/index.ts
index 5d5e5eb..795520b 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -7,7 +7,7 @@ import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import utc from 'dayjs/plugin/utc';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
-import { setRequestLanguage } from '../apis';
+import { setRequestLanguage } from '@/apis';
 
 dayjs.extend(localizedFormat);
 dayjs.extend(relativeTime);
@@ -217,6 +217,8 @@ export function setLocale(l: string) {
   if (l in availableLocales) {
     localStorage.setItem(_STORAGE_KEY_LOCALE, l);
     location.reload();
+  } else {
+    throw new Error(`unsupported locale: ${l}`);
   }
 }
 
diff --git a/src/locales/messages.yaml b/src/locales/messages.yaml
index 1e4bf48..68b15d1 100644
--- a/src/locales/messages.yaml
+++ b/src/locales/messages.yaml
@@ -298,7 +298,7 @@ site.allowApplyTypeLabel:
   en: Who can request to join
 site.applicationCheckTypeLabel:
   zhCn: 如何处理加入申请
-  en: How to Handle Join Requests
+  en: How to handle join requests
 site.defaultRoleLabel:
   zhCn: 加入后默认角色
   en: Default Role After Joining
@@ -361,16 +361,16 @@ team.leaveConfirm:
   en: Are you sure you want to leave the team?
 site.applicationSetting:
   zhCn: 申请管理
-  en: Application Management
+  en: Applications
 site.invitationSetting:
   zhCn: 邀请管理
-  en: Invite Management
+  en: Invitations
 invitation.emptySearchTip:
   zhCn: 没有名称含有 “{word}” 的用户，请换个搜索词试试。
   en: No users with names containing "{word}". Please try a different search term.
 invitation.emptyTip:
   zhCn: 还没有进行中的邀请，快去邀请用户吧！
-  en: No ongoing invitations, invite users now!
+  en: No pending invitations. Try inviting someone!
 invitation.inviteUser:
   zhCn: 邀请用户
   en: Invite User
@@ -403,13 +403,13 @@ application.operator:
   en: 'Operator:'
 application.emptyTip:
   zhCn: 还没有用户申请加入。
-  en: No users have requested to join yet.
+  en: No pending join requests yet.
 application.denied:
   zhCn: 已拒绝
   en: Rejected
 application.allowed:
   zhCn: 已允许
-  en: Allowed
+  en: Approved
 application.emptyMessage:
   zhCn: 未附言
   en: No memo
@@ -505,7 +505,7 @@ project.name:
   en: Project Name
 project.intro:
   zhCn: 项目介绍
-  en: Project Introduction
+  en: Project Description
 site.createProject:
   zhCn: 创建项目
   en: Create Project
@@ -585,7 +585,7 @@ project.sourceLanguage:
   en: Source Language
 project.targetLanguages:
   zhCn: 目标语言
-  en: Target Language
+  en: Target Language(s)
 project.targetLanguagesCount:
   zhCn: 目标语言数量
   en: Number of Target Languages
@@ -647,7 +647,7 @@ project.changeTarget:
   en: Switch Target Language
 project.onlyOneTargetTip:
   zhCn: 仅有一个目标语言
-  en: "Only one target language"
+  en: Only one target language
 imageTranslator.translationPlaceholder:
   zhCn: 请输入翻译
   en: Please enter translation
@@ -826,7 +826,7 @@ hotKeyRecorder.unbind:
   en: Delete
 hotKey.function:
   zhCn: 功能
-  en: Feature
+  en: Operation
 hotKey.mainHotKey:
   zhCn: 主快捷键
   en: Primary Shortcut Key
@@ -847,7 +847,7 @@ hotKey.goNextPage:
   en: Next Page
 mouse.function:
   zhCn: 功能
-  en: Feature
+  en: Operation
 mouse.key:
   zhCn: 鼠标按键
   en: Mouse Button
@@ -970,7 +970,7 @@ site.delete:
   en: Delete
 project.createViaLabelplusNotSupport:
   zhCn: 多个目标语言时不支持
-  en: '"Not supported for multiple target languages"'
+  en: Unavailable for project of multiple target languages
 file.needUploadTip:
   zhCn: 待上传
   en: Pending Upload
@@ -988,7 +988,7 @@ site.selectFile:
   en: Select File
 imageTranslator.translatorMode:
   zhCn: 翻译模式
-  en: Translation Mode
+  en: Translations
 imageTranslator.godMode:
   zhCn: 全能模式
   en: All-in-One Mode
@@ -1063,7 +1063,7 @@ team.userInsight:
   en: Member Statistics
 imageTranslator.proofreaderMode:
   zhCn: 校对模式
-  en: Proofreading Mode
+  en: Proofreading
 imageTranslator.copyTranslationContent:
   zhCn: 复制翻译内容
   en: Copy Translated Content
diff --git a/src/pages/ImageTranslator.tsx b/src/pages/ImageTranslator.tsx
index 3d41c71..8a6f36a 100644
--- a/src/pages/ImageTranslator.tsx
+++ b/src/pages/ImageTranslator.tsx
@@ -1,25 +1,22 @@
 import { css, Global } from '@emotion/core';
 import { Modal } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, Suspense } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import api from '../apis';
-import {
-  ImageTranslatorSettingHotKey,
-  ImageTranslatorSettingMouse,
-  ImageViewer,
-  ImageSourceViewer,
-  useHotKey,
-} from '../components';
-import { FC, File } from '../interfaces';
-import { AppState } from '../store';
-import { setCurrentProjectSaga } from '../store/project/slice';
-import { fetchSourcesSaga, focusSource } from '../store/source/slice';
+import { useHotKey } from '@/components';
+import { ImageViewer, ImageSourceViewer } from '@/components/project-file';
+import { FC, File } from '@/interfaces';
+import { AppState } from '@/store';
+import { setCurrentProjectSaga } from '@/store/project/slice';
+import { fetchSourcesSaga, focusSource } from '@/store/source/slice';
 import style from '../style';
-import { toLowerCamelCase } from '../utils';
-import { getCancelToken } from '../utils/api';
-import { useTitle } from '../hooks';
+import { toLowerCamelCase } from '@/utils';
+import { getCancelToken } from '@/utils/api';
+import { useTitle } from '@/hooks';
+import { ImageTranslatorSettingMouse } from '@/components/project-file/ImageTranslatorSettingMouse';
+import { ImageTranslatorSettingHotKey } from '@/components/project-file/ImageTranslatorSettingHotKey';
 
 /**
  * 全屏显示的图片翻译器
@@ -284,26 +281,30 @@ const ImageTranslator: FC = () => {
         `}
       />
       {file && (
-        <ImageViewer
-          className="ImageTranslator__ImageViewer"
+        <Suspense fallback={null}>
+          <ImageViewer
+            className="ImageTranslator__ImageViewer"
+            file={file}
+            targetID={targetID}
+            labels={sources}
+            width={imageTranslatorSize.width}
+            height={imageTranslatorSize.height}
+            loading={!Boolean(currentProject) || sourcesLoading}
+            onSettingButtonClick={() => {
+              setSettingModalVisible(true);
+            }}
+          />
+        </Suspense>
+      )}
+      <Suspense fallback={null}>
+        <ImageSourceViewer
+          className="ImageTranslator__ImageSourceViewer"
           file={file}
+          sources={sources}
           targetID={targetID}
-          labels={sources}
-          width={imageTranslatorSize.width}
-          height={imageTranslatorSize.height}
           loading={!Boolean(currentProject) || sourcesLoading}
-          onSettingButtonClick={() => {
-            setSettingModalVisible(true);
-          }}
         />
-      )}
-      <ImageSourceViewer
-        className="ImageTranslator__ImageSourceViewer"
-        file={file}
-        sources={sources}
-        targetID={targetID}
-        loading={!Boolean(currentProject) || sourcesLoading}
-      />
+      </Suspense>
       <Modal
         width={700}
         title={formatMessage({ id: 'imageTranslator.settingTitle' })}
diff --git a/src/pages/Project.tsx b/src/pages/Project.tsx
index bad4fec..e39c265 100644
--- a/src/pages/Project.tsx
+++ b/src/pages/Project.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Route, Switch, useParams, useRouteMatch } from 'react-router-dom';
-import { useTitle } from '../hooks';
-import { FC } from '../interfaces';
-import { AppState } from '../store';
+import { useTitle } from '@/hooks';
+import { FC } from '@/interfaces';
+import { AppState } from '@/store';
 import {
   clearCurrentProject,
   setCurrentProjectSaga,
-} from '../store/project/slice';
+} from '@/store/project/slice';
 import ProjectFiles from './ProjectFiles';
 import ProjectPreview from './ProjectPreview';
 import ProjectSetting from './ProjectSetting';
diff --git a/src/pages/ProjectFiles.tsx b/src/pages/ProjectFiles.tsx
index faabf0e..198e9c9 100644
--- a/src/pages/ProjectFiles.tsx
+++ b/src/pages/ProjectFiles.tsx
@@ -3,24 +3,20 @@ import { message, Spin } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
-import {
-  FileList,
-  Icon,
-  ListItem,
-  ProjectFinishedTip,
-  ProjectImportFromLabelplusStatus,
-  ProjectTargetList,
-} from '../components';
-import { IMPORT_FROM_LABELPLUS_STATUS, PROJECT_STATUS } from '../constants';
-import { useTitle } from '../hooks';
-import { FC, Project, Target } from '../interfaces';
-import { AppState } from '../store';
+import { FileList, Icon, ListItem } from '@/components';
+import { IMPORT_FROM_LABELPLUS_STATUS, PROJECT_STATUS } from '@/constants';
+import { useTitle } from '@/hooks';
+import { FC, Project, Target } from '@/interfaces';
+import { AppState } from '@/store';
 import style from '../style';
 import {
   clearDefaultTargetID,
   loadDefaultTargetID,
   saveDefaultTargetID,
-} from '../utils/storage';
+} from '@/utils/storage';
+import { ProjectFinishedTip } from '@/components/project/ProjectFinishedTip';
+import { ProjectTargetList } from '@/components/project/ProjectTargetList';
+import { ProjectImportFromLabelplusStatus } from '@/components/project/ProjectImportFromLabelplusStatus';
 
 /** 项目文件页的属性接口 */
 interface ProjectFilesProps {
diff --git a/src/pages/ProjectPreview.tsx b/src/pages/ProjectPreview.tsx
index 50668e7..2e9413b 100644
--- a/src/pages/ProjectPreview.tsx
+++ b/src/pages/ProjectPreview.tsx
@@ -6,15 +6,15 @@ import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useParams } from 'react-router-dom';
 import apis from '../apis';
-import { Spin } from '../components';
-import { IMAGE_COVER, PROJECT_ALLOW_APPLY_TYPE } from '../constants';
-import { useTitle } from '../hooks';
-import { FC, File, Project, ProjectSet, Team } from '../interfaces';
-import { AppState } from '../store';
-import { editProject, setCurrentProject } from '../store/project/slice';
+import { Spin } from '@/components';
+import { IMAGE_COVER, PROJECT_ALLOW_APPLY_TYPE } from '@/constants';
+import { useTitle } from '@/hooks';
+import { FC, File, Project, ProjectSet, Team } from '@/interfaces';
+import { AppState } from '@/store';
+import { editProject, setCurrentProject } from '@/store/project/slice';
 import style from '../style';
-import { toLowerCamelCase } from '../utils';
-import { cardActiveEffect, cardClickEffect, clickEffect } from '../utils/style';
+import { toLowerCamelCase } from '@/utils';
+import { cardActiveEffect, cardClickEffect, clickEffect } from '@/utils/style';
 
 /** 团队设置页的属性接口 */
 interface ProjectPreviewProps {
diff --git a/src/pages/ProjectSet.tsx b/src/pages/ProjectSet.tsx
index 4adf9b0..bce971b 100644
--- a/src/pages/ProjectSet.tsx
+++ b/src/pages/ProjectSet.tsx
@@ -16,20 +16,20 @@ import {
   DashboardBox,
   Icon,
   ListItem,
-  ProjectCreateForm,
-  ProjectImportForm,
   ProjectList,
   Spin,
   Tooltip,
 } from '../components';
-import { TEAM_PERMISSION } from '../constants';
-import { useTitle } from '../hooks';
-import { FC } from '../interfaces';
-import { AppState } from '../store';
-import { setCurrentProjectSetSaga } from '../store/projectSet/slice';
+import { TEAM_PERMISSION } from '@/constants';
+import { useTitle } from '@/hooks';
+import { FC } from '@/interfaces';
+import { AppState } from '@/store';
+import { setCurrentProjectSetSaga } from '@/store/projectSet/slice';
 import style from '../style';
-import { can } from '../utils/user';
+import { can } from '@/utils/user';
 import Project from './Project';
+import { ProjectCreateForm } from '@/components/project-set/ProjectCreateForm';
+import { ProjectImportForm } from '@/components/project-set/ProjectImportForm';
 
 /** 项目集页的属性接口 */
 interface ProjectSetProps {}
diff --git a/src/pages/ProjectSetting.tsx b/src/pages/ProjectSetting.tsx
index e0fabc3..ab99d66 100644
--- a/src/pages/ProjectSetting.tsx
+++ b/src/pages/ProjectSetting.tsx
@@ -1,5 +1,4 @@
 import { css } from '@emotion/core';
-import React from 'react';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom';
@@ -10,16 +9,16 @@ import {
   MemberList,
   NavTab,
   NavTabs,
-  ProjectFinishedTip,
-  ProjectSettingBase,
-  ProjectSettingTarget,
   Spin,
-} from '../components';
-import { PROJECT_PERMISSION, PROJECT_STATUS } from '../constants';
-import { useTitle } from '../hooks';
-import { FC, Project } from '../interfaces';
-import { AppState } from '../store';
-import { can } from '../utils/user';
+} from '@/components';
+import { PROJECT_PERMISSION, PROJECT_STATUS } from '@/constants';
+import { useTitle } from '@/hooks';
+import { FC, Project } from '@/interfaces';
+import { AppState } from '@/store';
+import { can } from '@/utils/user';
+import { ProjectFinishedTip } from '@/components/project/ProjectFinishedTip';
+import { ProjectSettingBase } from '@/components/project/ProjectSettingBase';
+import { ProjectSettingTarget } from '@/components/project/ProjectSettingTarget';
 
 /** 团队设置页的属性接口 */
 interface ProjectSettingProps {
diff --git a/vite.config.mts b/vite.config.mts
index 5f3dd05..b05c907 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -1,4 +1,4 @@
-import { defineConfig, ProxyOptions, splitVendorChunkPlugin } from 'vite';
+import { defineConfig, ProxyOptions } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'node:path';
 import { antdLessVars, antdLessVarsM } from './src/style';
@@ -45,11 +45,28 @@ export default defineConfig({
       // external: ['lodash', 'lodash/default'],
       output: {
         manualChunks(id, meta) {
+          // console.debug('manualChunks', id, meta);
           if (id.includes(componentsDir)) {
             return 'moeflow-components';
-          } else if (id.includes('antd')) {
-            return 'vendor-antd';
           }
+
+          for (const [key, value] of Object.entries({
+            antd: 'antd',
+            'antd-mobile': 'antd',
+            react: 'base',
+            'react-dom': 'base',
+            'react-router': 'base',
+            i18next: 'base',
+          })) {
+            if (id.includes(`node_modules/${key}/`)) {
+              return `vendor-${value}`;
+            }
+          }
+
+          if (id.includes('node_modules/')) {
+            return `vendor-${hashModuleId(id)}`;
+          }
+
           return null;
         },
       },
@@ -91,7 +108,7 @@ export default defineConfig({
       jsxImportSource: '@emotion/core',
     }),
     visualizer({}),
-    splitVendorChunkPlugin(),
+    // splitVendorChunkPlugin(),
   ],
   css: {
     preprocessorOptions: {
@@ -114,3 +131,12 @@ export default defineConfig({
     },
   },
 });
+
+function hashModuleId(id: string): string {
+  const palette = '01234567';
+  let s = 0;
+  for (let i = 0; i < id.length; i++) {
+    s += id.charCodeAt(i);
+  }
+  return palette[s % palette.length];
+}