diff --git a/.github/workflows/check-pr.yml b/.github/workflows/check-pr.yml new file mode 100644 index 0000000..12b6d5b --- /dev/null +++ b/.github/workflows/check-pr.yml @@ -0,0 +1,32 @@ +name: Check PR + +on: + pull_request: + workflow_dispatch: + +jobs: + check-pr: + runs-on: ubuntu-latest + + permissions: + contents: read + packages: write + + steps: + - name: Checkout repository + uses: actions/checkout@v3 + + - name: Setup node and deps + uses: actions/setup-node@v3 + with: + node-version: "20" + cache: npm + cache-dependency-path: package-lock.json + + - run: npm i + + - run: npm run lint + + - run: npm run format + + - run: npm run build diff --git a/.github/workflows/deploy-image.yml b/.github/workflows/deploy-image.yml index 6158717..0e082fb 100644 --- a/.github/workflows/deploy-image.yml +++ b/.github/workflows/deploy-image.yml @@ -26,6 +26,8 @@ jobs: uses: actions/setup-node@v3 with: node-version: "20" + cache: npm + cache-dependency-path: package-lock.json - run: npm i diff --git a/package.json b/package.json index e0e95bb..a7886ee 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,8 @@ "start": "vite", "lint": "eslint .", "lint:fix": "eslint --fix .", + "format": "prettier --check src", + "format:fix": "prettier --write src", "test": "jest", "test:coverage": "jest --coverage", "typecheck": "tsc --noEmit", diff --git a/src/apis/auth.ts b/src/apis/auth.ts index 42bcee3..b231ea7 100644 --- a/src/apis/auth.ts +++ b/src/apis/auth.ts @@ -10,7 +10,7 @@ const getCAPTCHA = ({ configs }: { configs?: AxiosRequestConfig } = {}) => { return request({ method: 'POST', url: `/v1/captchas`, - ...configs + ...configs, }); }; @@ -23,7 +23,7 @@ interface GetConfirmEmailVCodeData { /** 获取验证邮件 */ const getConfirmEmailVCode = ({ data, - configs + configs, }: { data: GetConfirmEmailVCodeData; configs?: AxiosRequestConfig; @@ -32,7 +32,7 @@ const getConfirmEmailVCode = ({ method: 'POST', url: `/v1/confirm-email-codes`, data: toUnderScoreCase(data), - ...configs + ...configs, }); }; @@ -45,7 +45,7 @@ interface GetResetPasswordVCodeData { /** 获取验证邮件 */ const getResetPasswordVCode = ({ data, - configs + configs, }: { data: GetResetPasswordVCodeData; configs?: AxiosRequestConfig; @@ -54,20 +54,20 @@ const getResetPasswordVCode = ({ method: 'POST', url: `/v1/reset-password-codes`, data: toUnderScoreCase(data), - ...configs + ...configs, }); }; /** 获取验证邮件 */ const getResetEmailVCode = ({ - configs + configs, }: { configs?: AxiosRequestConfig; } = {}) => { return request({ method: 'POST', url: `/v1/reset-email-codes`, - ...configs + ...configs, }); }; @@ -81,7 +81,7 @@ interface RegisterData { /** 注册 */ const register = ({ data, - configs + configs, }: { data: RegisterData; configs?: AxiosRequestConfig; @@ -90,7 +90,7 @@ const register = ({ method: 'POST', url: `/v1/users`, data: toUnderScoreCase(data), - ...configs + ...configs, }); }; @@ -103,7 +103,7 @@ interface ResetPasswordData { /** 获取验证邮件 */ const resetPassword = ({ data, - configs + configs, }: { data: ResetPasswordData; configs?: AxiosRequestConfig; @@ -112,7 +112,7 @@ const resetPassword = ({ method: 'DELETE', url: `/v1/user/password`, data: toUnderScoreCase(data), - ...configs + ...configs, }); }; @@ -126,7 +126,7 @@ interface LoginData { /** 获取验证邮件 */ const login = ({ data, - configs + configs, }: { data: LoginData; configs?: AxiosRequestConfig; @@ -135,7 +135,7 @@ const login = ({ method: 'POST', url: `/v1/user/token`, data: toUnderScoreCase(data), - ...configs + ...configs, }); }; @@ -146,7 +146,7 @@ interface GetUserInfoData { /** 获取用户信息 */ const getUserInfo = ({ data, - configs + configs, }: { data?: GetUserInfoData; configs?: AxiosRequestConfig; @@ -154,7 +154,7 @@ const getUserInfo = ({ return request({ method: 'GET', url: `/v1/user/info`, - ...configs + ...configs, }); }; @@ -166,5 +166,5 @@ export default { resetPassword, register, login, - getUserInfo + getUserInfo, }; diff --git a/src/apis/index.ts b/src/apis/index.ts index b3c9237..60438ff 100644 --- a/src/apis/index.ts +++ b/src/apis/index.ts @@ -150,7 +150,7 @@ export const request = (axiosConfig: AxiosRequestConfig) => { if (error.response.data.code === 2) { // 将 message 中的字段名转为小驼峰 error.response.data.message = toLowerCamelCase( - error.response.data.message + error.response.data.message, ); // 验证错误 const result: ValidationFailureResult = { diff --git a/src/apis/team.ts b/src/apis/team.ts index c9bd439..c5d2e30 100644 --- a/src/apis/team.ts +++ b/src/apis/team.ts @@ -132,5 +132,5 @@ export default { getTeam, createTeam, editTeam, - deleteTeam + deleteTeam, }; diff --git a/src/apis/type.ts b/src/apis/type.ts index d574c70..3a38b2a 100644 --- a/src/apis/type.ts +++ b/src/apis/type.ts @@ -20,19 +20,19 @@ interface GetSystemRolesData { } /** 获取系统角色 */ const getTypes = ( - { typeName, groupType, params, configs } = {} as GetSystemRolesData + { typeName, groupType, params, configs } = {} as GetSystemRolesData, ) => { return request({ method: 'GET', url: `/v1/types/${toHyphenCase(typeName)}`, params: { group_type: groupType, - ...toUnderScoreCase(params) + ...toUnderScoreCase(params), }, - ...configs + ...configs, }); }; export default { - getTypes + getTypes, }; diff --git a/src/components/AdminSiteSetting.tsx b/src/components/AdminSiteSetting.tsx index 87f16cf..42d21ab 100644 --- a/src/components/AdminSiteSetting.tsx +++ b/src/components/AdminSiteSetting.tsx @@ -19,8 +19,8 @@ function textareaToArray(textarea: string): string[] { textarea .split('\n') .map((item) => item.trim()) - .filter((item) => item !== '') - ) + .filter((item) => item !== ''), + ), ); } @@ -75,7 +75,7 @@ export const AdminSiteSetting: FC = ({ className }) => { error.data.message.whitelistEmails = [ formatMessage( { id: 'site.setting.whitelistEmailsError' }, - { line } + { line }, ), ]; } @@ -86,7 +86,7 @@ export const AdminSiteSetting: FC = ({ className }) => { error.data.message.autoJoinTeamIDs = [ formatMessage( { id: 'site.setting.autoJoinTeamIDsError' }, - { line } + { line }, ), ]; } diff --git a/src/components/ApplicationList.tsx b/src/components/ApplicationList.tsx index 0733165..0d51443 100644 --- a/src/components/ApplicationList.tsx +++ b/src/components/ApplicationList.tsx @@ -50,7 +50,7 @@ export const ApplicationList: FC = ({ // 弹出框 const [spinningIDs, setSpinningIDs] = useState([]); // 删除请求中 const relatedApplicationsCount = useSelector( - (state: AppState) => state.site.relatedApplicationsCount + (state: AppState) => state.site.relatedApplicationsCount, ); /** 处理申请 */ @@ -334,7 +334,7 @@ export const ApplicationList: FC = ({ {formatMessage( { id: 'site.join.request' }, - { groupType: formatGroupType(item.groupType) } + { groupType: formatGroupType(item.groupType) }, ) + ': '} {item.groupType === 'project' diff --git a/src/components/AvatarUpload.tsx b/src/components/AvatarUpload.tsx index 9af2300..71ba08f 100644 --- a/src/components/AvatarUpload.tsx +++ b/src/components/AvatarUpload.tsx @@ -87,14 +87,14 @@ export const AvatarUpload: FC = ({ setUserInfo({ avatar: info.file.response.avatar, hasAvatar: true, - }) + }), ); } else if (type === 'team') { dispatch( setCurrentTeamInfo({ avatar: info.file.response.avatar, hasAvatar: true, - }) + }), ); } } diff --git a/src/components/CAPTCHAInput.tsx b/src/components/CAPTCHAInput.tsx index 561d8c5..c76637b 100644 --- a/src/components/CAPTCHAInput.tsx +++ b/src/components/CAPTCHAInput.tsx @@ -11,7 +11,6 @@ import style from '../style'; import { getCancelToken } from '../utils/api'; import { clickEffect, imageClickEffect } from '../utils/style'; - /** 用于 Form.Item 校验验证码，rules={[{validator: checkCAPTCHA}]} */ export const checkCAPTCHA = (rule: any, captcha: CAPTCHAInputValue) => { const intl = getIntl(); @@ -20,7 +19,7 @@ export const checkCAPTCHA = (rule: any, captcha: CAPTCHAInputValue) => { } if (captcha.value.length !== 4) { return Promise.reject( - intl.formatMessage({ id: 'form.stringLen' }, { len: 4 }) + intl.formatMessage({ id: 'form.stringLen' }, { len: 4 }), ); } return Promise.resolve(); @@ -70,7 +69,7 @@ const CAPTCHAInputWithoutRef: React.ForwardRefRenderFunction< useImperativeHandle(ref, () => { const imperatives = { ...inputRef.current, - refresh: getCAPTCHA + refresh: getCAPTCHA, }; return imperatives as CAPTCHAInputRef; }); @@ -84,16 +83,16 @@ const CAPTCHAInputWithoutRef: React.ForwardRefRenderFunction< /** 获取验证码 */ const getCAPTCHA = ( - { focus = true, cancelToken, onFinish } = {} as GetCAPTCHAParams + { focus = true, cancelToken, onFinish } = {} as GetCAPTCHAParams, ) => { setCaptchaLoading(true); api .getCAPTCHA({ configs: { - cancelToken - } + cancelToken, + }, }) - .then(result => { + .then((result) => { setCaptchaValue(''); // 清空当前值 setCaptchaInfo(result.data.info); setCaptchaImage(result.data.image); @@ -104,7 +103,7 @@ const CAPTCHAInputWithoutRef: React.ForwardRefRenderFunction< if (onChange) { onChange({ value: '', - info: result.data.info + info: result.data.info, }); } setCaptchaLoading(false); @@ -112,7 +111,7 @@ const CAPTCHAInputWithoutRef: React.ForwardRefRenderFunction< onFinish(); } }) - .catch(result => { + .catch((result) => { result.default(); }); }; @@ -129,7 +128,7 @@ const CAPTCHAInputWithoutRef: React.ForwardRefRenderFunction< if (onChange) { onChange({ value: e.target.value, - info: captchaInfo + info: captchaInfo, }); } }; diff --git a/src/components/CAPTCHAModal.tsx b/src/components/CAPTCHAModal.tsx index 52a4fd3..a9d34e6 100644 --- a/src/components/CAPTCHAModal.tsx +++ b/src/components/CAPTCHAModal.tsx @@ -43,9 +43,8 @@ export const CAPTCHAModal: FC = ({ value: '', info: '', }; - const [captcha, setCAPTCHA] = useState( - defaultCAPTCHAValue - ); + const [captcha, setCAPTCHA] = + useState(defaultCAPTCHAValue); const inputRef = useRef(null); // 按钮默认值 @@ -146,7 +145,7 @@ export const CAPTCHAModal: FC = ({ .captcha-form-close-icon { color: ${style.primaryColorDarker}; } - ` + `, )} .captcha-form-close-icon { color: ${style.primaryColor}; diff --git a/src/components/ContentTitle.tsx b/src/components/ContentTitle.tsx index 333c658..feb7112 100644 --- a/src/components/ContentTitle.tsx +++ b/src/components/ContentTitle.tsx @@ -11,7 +11,10 @@ interface ContentTitleProps { /** * 一般内容标题 */ -export const ContentTitle: FC = ({ children, className }) => { +export const ContentTitle: FC = ({ + children, + className, +}) => { return (
= ({ nav, content, className }) => { +export const DashboardBox: FC = ({ + nav, + content, + className, +}) => { return (
state.user.name); const platform = useSelector((state: AppState) => state.site.platform); const newInvitationsCount = useSelector( - (state: AppState) => state.site.newInvitationsCount + (state: AppState) => state.site.newInvitationsCount, ); const relatedApplicationsCount = useSelector( - (state: AppState) => state.site.relatedApplicationsCount + (state: AppState) => state.site.relatedApplicationsCount, ); const isMobile = platform === 'mobile'; const dispatch = useDispatch(); @@ -158,7 +158,9 @@ export const DashboardMenu: FC< flex-direction: column; height: 100%; width: ${collapsed ? `${collapsedWidth}px` : `${uncollapsedWidth}px`}; - transition: width 150ms, padding-right 150ms; + transition: + width 150ms, + padding-right 150ms; ${isMobile && // 手机版适配 css` diff --git a/src/components/EmailVCodeInputItem.tsx b/src/components/EmailVCodeInputItem.tsx index 31bc250..2aeaa46 100644 --- a/src/components/EmailVCodeInputItem.tsx +++ b/src/components/EmailVCodeInputItem.tsx @@ -38,35 +38,32 @@ export const EmailVCodeInputItem: FC = ( inputProps = {}, className, ...itemProps - } = {} as EmailVCodeInputItemProps + } = {} as EmailVCodeInputItemProps, ) => { const { formatMessage } = useIntl(); // i18n // 邮箱输入框 const [email, setEmail] = useState(defaultEmail); const [emailHelp, setEmailHelp] = useState(); - const [ - emailValidateStatus, - setEmailValidateStatus, - ] = useState(); + const [emailValidateStatus, setEmailValidateStatus] = + useState(); const emailInputRef = useRef(null); const defaultEmailSubmitText = formatMessage({ id: 'auth.getEmailVCode', }); const [emailSubmitText, setEmailSubmitText] = useState( - defaultEmailSubmitText + defaultEmailSubmitText, ); const [emailSubmitWaiting, setEmailSubmitWaiting] = useState(false); const emailSubmitWaitingRef = useRef(false); // 验证码输入框 const [captchaInputVisible, setCAPTCHAInputVisible] = useState(false); - const [captchaInputButtonLoading, setCAPTCHAInputButtonLoading] = useState( - false - ); + const [captchaInputButtonLoading, setCAPTCHAInputButtonLoading] = + useState(false); const defaultCAPTCHASubmitText = formatMessage({ id: 'auth.getEmailVCode', }); const [captchaSubmitText, setCAPTCHASubmitText] = useState( - defaultCAPTCHASubmitText + defaultCAPTCHASubmitText, ); const [captchaValue, setCAPTCHAValue] = useState(''); const [captchaInfo, setCAPTCHAInfo] = useState(''); @@ -98,7 +95,7 @@ export const EmailVCodeInputItem: FC = ( /** 处理在邮件 Input 按下回车 */ const handleEmailInputPressEnter: ( - event: React.KeyboardEvent + event: React.KeyboardEvent, ) => void = (e) => { e.preventDefault(); submit(); @@ -130,7 +127,7 @@ export const EmailVCodeInputItem: FC = ( */ /** 处理人机验证码 Input 的改变 */ const handleCAPTCHAChange: (captcha: CAPTCHAInputValue) => void = ( - captcha + captcha, ) => { if (!holdCAPTCHAHelpOnNextChangeRef.current) { // 清理提示 @@ -216,7 +213,7 @@ export const EmailVCodeInputItem: FC = ( setEmailError(formatMessage({ id: 'form.needWait' })); // 设置提交按钮文本 startWaiting( - ((result.data.message as unknown) as { wait: number }).wait + (result.data.message as unknown as { wait: number }).wait, ); // 调用已发送回调 if (onSend) { @@ -248,8 +245,8 @@ export const EmailVCodeInputItem: FC = ( { id: 'auth.getEmailVCodeWait' }, { seconds, - } - ) + }, + ), ); countdownWaiting(seconds); }; @@ -271,7 +268,7 @@ export const EmailVCodeInputItem: FC = ( seconds -= 1; if (seconds > 0) { setEmailSubmitText( - formatMessage({ id: 'auth.getEmailVCodeWait' }, { seconds: seconds }) + formatMessage({ id: 'auth.getEmailVCodeWait' }, { seconds: seconds }), ); countdownWaiting(seconds); } else { diff --git a/src/components/FileItem.tsx b/src/components/FileItem.tsx index 5d88f7e..cc65cbb 100644 --- a/src/components/FileItem.tsx +++ b/src/components/FileItem.tsx @@ -66,7 +66,9 @@ export const FileItem: FC = ({ height: ${height}px; border-radius: ${style.borderRadiusBase}; overflow: hidden; - transition: box-shadow 100ms, border-color 100ms; + transition: + box-shadow 100ms, + border-color 100ms; border: 1px solid ${style.borderColorLight}; .FileItem__ImageOCRProgressWrapper { display: none; @@ -125,7 +127,7 @@ export const FileItem: FC = ({ `, css` background-color: rgba(0, 0, 0, 0.4); - ` + `, )}; } .FileItem__Select { @@ -148,7 +150,7 @@ export const FileItem: FC = ({ `, css` background-color: rgba(0, 0, 0, 0.4); - ` + `, )}; } .FileItem__DeleteButtonIcon { @@ -180,7 +182,7 @@ export const FileItem: FC = ({ transform: scale(1.08); transition: transform 100ms; } - ` + `, )}; `} onClick={onClick} diff --git a/src/components/FileList.tsx b/src/components/FileList.tsx index 6aa7208..a9c1cbd 100644 --- a/src/components/FileList.tsx +++ b/src/components/FileList.tsx @@ -8,13 +8,7 @@ import { FilePond } from 'react-filepond'; import { useIntl } from 'react-intl'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; -import { - Button, - EmptyTip, - FileItem, - List, - OutputList, -} from '.'; +import { Button, EmptyTip, FileItem, List, OutputList } from '.'; import apis, { resultTypes } from '../apis'; import configs from '../configs'; import { @@ -70,16 +64,16 @@ export const FileList: FC = ({ const currentTeam = useSelector((state: AppState) => state.team.currentTeam); const defaultPage = useSelector( - (state: AppState) => state.file.filesState.page + (state: AppState) => state.file.filesState.page, ); const defaultWord = useSelector( - (state: AppState) => state.file.filesState.word + (state: AppState) => state.file.filesState.word, ); const defaultScrollTop = useSelector( - (state: AppState) => state.file.filesState.scrollTop + (state: AppState) => state.file.filesState.scrollTop, ); const selectedFileIds = useSelector( - (state: AppState) => state.file.filesState.selectedFileIds + (state: AppState) => state.file.filesState.selectedFileIds, ); useEffect(() => { @@ -103,7 +97,7 @@ export const FileList: FC = ({ title: formatMessage({ id: 'project.deleteFile' }), content: formatMessage( { id: 'project.deleteFileTip' }, - { name: file.name } + { name: file.name }, ), onOk: () => { setSpinningIDs((ids) => [file.id, ...ids]); @@ -291,7 +285,7 @@ export const FileList: FC = ({ crop: true, canvas: true, ...({ imageSmoothingQuality: 'high' } as any), // @type 版本太旧 - } + }, ); } const uploadingFile: File = { @@ -327,7 +321,7 @@ export const FileList: FC = ({ item.uploadPercent = Math.floor(progress * 100); } return item; - }) + }), ); }} // 上传成功 @@ -337,7 +331,7 @@ export const FileList: FC = ({ setItems((items) => { // 覆盖时删除列表中原来的文件 const itemsWithoutSameID = items.filter( - (item) => item.id !== result.id + (item) => item.id !== result.id, ); return itemsWithoutSameID.map((item) => { if (item.id === file.id) { @@ -360,7 +354,7 @@ export const FileList: FC = ({ item.uploadState = 'failure'; } return item; - }) + }), ); } }} @@ -428,7 +422,7 @@ export const FileList: FC = ({ onClick={() => { const idsOnThisPage = items.map((item) => item.id); const selectedIdsOnOtherPages = selectedFileIds.filter( - (id) => !idsOnThisPage.includes(id) + (id) => !idsOnThisPage.includes(id), ); dispatch( setFilesState({ @@ -436,7 +430,7 @@ export const FileList: FC = ({ ...selectedIdsOnOtherPages, ...idsOnThisPage, ], - }) + }), ); }} > @@ -447,18 +441,18 @@ export const FileList: FC = ({ onClick={() => { const idsOnThisPage = items.map((item) => item.id); const selectedIdsOnThisPage = selectedFileIds.filter((id) => - idsOnThisPage.includes(id) + idsOnThisPage.includes(id), ); const selectedIdsOnOtherPages = selectedFileIds.filter( - (id) => !idsOnThisPage.includes(id) + (id) => !idsOnThisPage.includes(id), ); const invertIds = idsOnThisPage.filter( - (id) => !selectedIdsOnThisPage.includes(id) + (id) => !selectedIdsOnThisPage.includes(id), ); dispatch( setFilesState({ selectedFileIds: [...selectedIdsOnOtherPages, ...invertIds], - }) + }), ); }} > @@ -507,15 +501,15 @@ export const FileList: FC = ({ dispatch( setFilesState({ selectedFileIds: [...selectedFileIds, file.id], - }) + }), ); } else { dispatch( setFilesState({ selectedFileIds: selectedFileIds.filter( - (id) => id !== file.id + (id) => id !== file.id, ), - }) + }), ); } }} diff --git a/src/components/FormItem.tsx b/src/components/FormItem.tsx index 807ef4d..5103771 100644 --- a/src/components/FormItem.tsx +++ b/src/components/FormItem.tsx @@ -10,6 +10,8 @@ interface FormItemProps {} * 自定义的行为： * - 当值变动时消除错误 */ -export const FormItem: FC = ({ ...props }) => { +export const FormItem: FC = ({ + ...props +}) => { return ; }; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 04e9cbe..beec334 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -112,7 +112,8 @@ export const Header: FC = ({ className }) => { filter: brightness(93%); } &.ant-dropdown-open { - box-shadow: 0 1.5px 3px -2px rgba(0, 0, 0, 0.12), + box-shadow: + 0 1.5px 3px -2px rgba(0, 0, 0, 0.12), 0 3px 8px 0 rgba(0, 0, 0, 0.08), 0 4.5px 14px 4px rgba(0, 0, 0, 0.05); } diff --git a/src/components/HotKey/README.md b/src/components/HotKey/README.md index 6929d00..9a8d241 100644 --- a/src/components/HotKey/README.md +++ b/src/components/HotKey/README.md @@ -1,4 +1,5 @@ ## TODO + HotkeyListener Component useHotKeyFoucs Hook etc. diff --git a/src/components/HotKey/hooks/useHotKey.ts b/src/components/HotKey/hooks/useHotKey.ts index d3ba416..5f607dd 100644 --- a/src/components/HotKey/hooks/useHotKey.ts +++ b/src/components/HotKey/hooks/useHotKey.ts @@ -7,7 +7,7 @@ export type UseHotKey = { ( option: HotKeyOption, callback: (event: HotKeyEvent, option: HotKeyOption) => any, - deps?: DependencyList + deps?: DependencyList, ): void; }; export const useHotKey: UseHotKey = (option, callback, deps = []) => { diff --git a/src/components/ImageSelect.tsx b/src/components/ImageSelect.tsx index 116e1a1..514a4b7 100644 --- a/src/components/ImageSelect.tsx +++ b/src/components/ImageSelect.tsx @@ -37,7 +37,7 @@ export const ImageSelect: FC = ({ const [total, setTotal] = useState(0); const [index, setIndex] = useState('?'); const currentProject = useSelector( - (state: AppState) => state.project.currentProject + (state: AppState) => state.project.currentProject, ); const platform = useSelector((state: AppState) => state.site.platform); const isMobile = platform === 'mobile'; @@ -110,7 +110,7 @@ export const ImageSelect: FC = ({ `, css` color: ${style.widgetButtonActiveColor}; - ` + `, )}; } .ImageSelect__MenuWrapper { @@ -151,7 +151,7 @@ export const ImageSelect: FC = ({ `, css` color: ${style.widgetButtonActiveColor}; - ` + `, )}; } .ImageSelect__MenuItem--active { @@ -170,7 +170,7 @@ export const ImageSelect: FC = ({ `, css` color: ${style.widgetButtonActiveColor}; - ` + `, )}; } `} diff --git a/src/components/ImageSourceViewer.tsx b/src/components/ImageSourceViewer.tsx index 8960f23..08443e5 100644 --- a/src/components/ImageSourceViewer.tsx +++ b/src/components/ImageSourceViewer.tsx @@ -72,7 +72,7 @@ export const ImageSourceViewer: FC = ({ )} {mode === 'proofreader' && ( diff --git a/src/components/ImageSourceViewerGod/Source.tsx b/src/components/ImageSourceViewerGod/Source.tsx index 147e3de..0ac8d9b 100644 --- a/src/components/ImageSourceViewerGod/Source.tsx +++ b/src/components/ImageSourceViewerGod/Source.tsx @@ -35,7 +35,7 @@ export const Source: FC = ({ const dispatch = useDispatch(); const { formatMessage } = useIntl(); // i18n const currentProject = useSelector( - (state: AppState) => state.project.currentProject + (state: AppState) => state.project.currentProject, ); let statusLine = checkTranslationState(source); @@ -47,7 +47,7 @@ export const Source: FC = ({ positionType: checked ? SOURCE_POSITION_TYPE.IN : SOURCE_POSITION_TYPE.OUT, - }) + }), ); }; @@ -156,14 +156,14 @@ export const Source: FC = ({ id: source.id, effects: ['focusLabel'], noises: [], - }) + }), ); }} >
diff --git a/src/components/ImageSourceViewerGod/Translation.tsx b/src/components/ImageSourceViewerGod/Translation.tsx index 69aef02..a1222fd 100644 --- a/src/components/ImageSourceViewerGod/Translation.tsx +++ b/src/components/ImageSourceViewerGod/Translation.tsx @@ -14,7 +14,7 @@ import { AppState } from '../../store'; import { editMyTranslationSaga, editProofreadSaga, - selectTranslationSaga + selectTranslationSaga, } from '../../store/source/slice'; import style from '../../style'; import { clearClickEffect, clickEffect } from '../../utils/style'; @@ -71,13 +71,13 @@ export const Translation: FC = ({ const proofreadContentStatus = translation && source.proodreadContentStatuses[translation.id]; const [translationContent, setTranslationContent] = useState( - translation?.content + translation?.content, ); const [proofreadContent, setProofreadContent] = useState( - translation?.proofreadContent + translation?.proofreadContent, ); const currentProject = useSelector( - (state: AppState) => state.project.currentProject + (state: AppState) => state.project.currentProject, ); useEffect(() => { @@ -92,7 +92,7 @@ export const Translation: FC = ({ sourceID: source.id, targetID, content: e.target.value, - }) + }), ); }; @@ -103,7 +103,7 @@ export const Translation: FC = ({ sourceID: source.id, translationID: translation!.id, proofreadContent: e.target.value, - }) + }), ); }; @@ -123,7 +123,7 @@ export const Translation: FC = ({ sourceID: source.id, targetID, content: content, - }) + }), ); }; @@ -133,7 +133,7 @@ export const Translation: FC = ({ sourceID: source.id, translationID: translation!.id, selected: !translation!.selected, - }) + }), ); }; @@ -475,7 +475,7 @@ export const Translation: FC = ({
diff --git a/src/components/ImageSourceViewerGod/TranslationList.tsx b/src/components/ImageSourceViewerGod/TranslationList.tsx index 47e763b..736b337 100644 --- a/src/components/ImageSourceViewerGod/TranslationList.tsx +++ b/src/components/ImageSourceViewerGod/TranslationList.tsx @@ -36,16 +36,16 @@ export const TranslationList: FC = ({ const proofreadEditable = true; const textAreasRef = useRef(null); const currentProject = useSelector( - (state: AppState) => state.project.currentProject + (state: AppState) => state.project.currentProject, ); const focusedSourceID = useSelector( - (state: AppState) => state.source.focusedSource.id + (state: AppState) => state.source.focusedSource.id, ); const focusedSourceEffects = useSelector( - (state: AppState) => state.source.focusedSource.effects + (state: AppState) => state.source.focusedSource.effects, ); const focusedSourceNoiseFocusInput = useSelector( - (state: AppState) => state.source.focusedSource.noises.focusInput + (state: AppState) => state.source.focusedSource.noises.focusInput, ); const otherValidTranslations = filterValidTranslations(otherTranslations); diff --git a/src/components/ImageSourceViewerModeControl.tsx b/src/components/ImageSourceViewerModeControl.tsx index 0739834..686aaa1 100644 --- a/src/components/ImageSourceViewerModeControl.tsx +++ b/src/components/ImageSourceViewerModeControl.tsx @@ -18,80 +18,80 @@ interface ImageSourceViewerModeControlProps { /** * 模板 */ -export const ImageSourceViewerModeControl: FC = - ({ className }) => { - const { formatMessage } = useIntl(); // i18n - const dispatch = useDispatch(); - const mode = useSelector((state: AppState) => state.imageTranslator.mode); - const currentProject = useSelector( - (state: AppState) => state.project.currentProject - ); +export const ImageSourceViewerModeControl: FC< + ImageSourceViewerModeControlProps +> = ({ className }) => { + const { formatMessage } = useIntl(); // i18n + const dispatch = useDispatch(); + const mode = useSelector((state: AppState) => state.imageTranslator.mode); + const currentProject = useSelector( + (state: AppState) => state.project.currentProject, + ); - return ( -
+
{ + dispatch(setImageTranslatorMode('translator')); + }} > + {formatMessage({ id: 'imageTranslator.translatorMode' })} +
+ {can(currentProject, PROJECT_PERMISSION.PROOFREAD_TRA) && (
{ - dispatch(setImageTranslatorMode('translator')); + dispatch(setImageTranslatorMode('proofreader')); }} > - {formatMessage({ id: 'imageTranslator.translatorMode' })} -
- {can(currentProject, PROJECT_PERMISSION.PROOFREAD_TRA) && ( -
{ - dispatch(setImageTranslatorMode('proofreader')); - }} - > - {formatMessage({ id: 'imageTranslator.proofreaderMode' })} -
- )} -
{ - dispatch(setImageTranslatorMode('god')); - }} - > - {formatMessage({ id: 'imageTranslator.godMode' })} + {formatMessage({ id: 'imageTranslator.proofreaderMode' })}
+ )} +
{ + dispatch(setImageTranslatorMode('god')); + }} + > + {formatMessage({ id: 'imageTranslator.godMode' })}
- ); - }; +
+ ); +}; diff --git a/src/components/ImageSourceViewerProofreader/Source.tsx b/src/components/ImageSourceViewerProofreader/Source.tsx index 04b8c85..3dcf1f1 100644 --- a/src/components/ImageSourceViewerProofreader/Source.tsx +++ b/src/components/ImageSourceViewerProofreader/Source.tsx @@ -33,13 +33,13 @@ const SourceWithoutRef: React.ForwardRefRenderFunction< const dispatch = useDispatch(); const currentUser = useSelector((state: AppState) => state.user); const focusedSourceID = useSelector( - (state: AppState) => state.source.focusedSource.id + (state: AppState) => state.source.focusedSource.id, ); const focusedTranslationID = useSelector( - (state: AppState) => state.translation.focusedTranslation.id + (state: AppState) => state.translation.focusedTranslation.id, ); const batchSelecting = useSelector( - (state: AppState) => state.source.batchSelecting + (state: AppState) => state.source.batchSelecting, ); const translations = getSortedTranslations(source); const hasSelectedTranslation = @@ -49,20 +49,20 @@ const SourceWithoutRef: React.ForwardRefRenderFunction< if ( focusedSourceID === source.id && !translations.find( - (translation) => translation.id === focusedTranslationID + (translation) => translation.id === focusedTranslationID, ) ) { if (translations.length > 0) { dispatch( focusTranslation({ id: translations[0].id, - }) + }), ); } else { dispatch( focusTranslation({ id: '', - }) + }), ); } } @@ -74,7 +74,7 @@ const SourceWithoutRef: React.ForwardRefRenderFunction< id: source.id, effects: ['focusLabel', 'focusInput'], noises: ['focusInput'], - }) + }), ); }; @@ -83,7 +83,7 @@ const SourceWithoutRef: React.ForwardRefRenderFunction< dispatch( focusTranslation({ id: translation.id, - }) + }), ); }; @@ -94,7 +94,7 @@ const SourceWithoutRef: React.ForwardRefRenderFunction< sourceID: source.id, translationID: translation.id, selected: !translation.selected, - }) + }), ); }; @@ -297,7 +297,7 @@ const SourceWithoutRef: React.ForwardRefRenderFunction< 'ImageSourceViewerProofreaderSource__Translation--focus': source.id === focusedSourceID && translation.id === focusedTranslationID, - } + }, )} >
= - ({ file, sources, targetID, className }) => { - const dispatch = useDispatch(); - const { formatMessage } = useIntl(); - const platform = useSelector((state: AppState) => state.site.platform); - const isMobile = platform === 'mobile'; - const domRefs = useRef<(HTMLDivElement | null)[]>([]); - const translationTextAreaRef = useRef(null); - const proofreadTextAreaRef = useRef(null); - const currentUser = useSelector((state: AppState) => state.user); - const batchSelecting = useSelector( - (state: AppState) => state.source.batchSelecting - ); - const focusedSourceID = useSelector( - (state: AppState) => state.source.focusedSource.id - ); - const focusedSourceEffects = useSelector( - (state: AppState) => state.source.focusedSource.effects - ); - const focusedSourceNoiseFocusInput = useSelector( - (state: AppState) => state.source.focusedSource.noises.focusInput - ); - const focusedSourceNoiseScrollIntoView = useSelector( - (state: AppState) => state.source.focusedSource.noises.scrollIntoView - ); - const focusedSourceIndex = sources.findIndex( - (source) => source.id === focusedSourceID - ); - const focusedTranslationID = useSelector( - (state: AppState) => state.translation.focusedTranslation.id - ); - const focusedSource = sources.find( - (source) => source.id === focusedSourceID - ); - const focusedSourceCreating = focusedSource?.labelStatus === 'creating'; - const focusedSourceDeleting = focusedSource?.labelStatus === 'deleting'; - let focusedSourceAllTranslations: APITranslation[] = []; - if (focusedSource?.translations) { - focusedSourceAllTranslations = [...focusedSource.translations]; - } - if (focusedSource?.myTranslation) { - focusedSourceAllTranslations.push(focusedSource.myTranslation); +export const ImageSourceViewerProofreader: FC< + ImageSourceViewerProofreaderProps +> = ({ file, sources, targetID, className }) => { + const dispatch = useDispatch(); + const { formatMessage } = useIntl(); + const platform = useSelector((state: AppState) => state.site.platform); + const isMobile = platform === 'mobile'; + const domRefs = useRef<(HTMLDivElement | null)[]>([]); + const translationTextAreaRef = useRef(null); + const proofreadTextAreaRef = useRef(null); + const currentUser = useSelector((state: AppState) => state.user); + const batchSelecting = useSelector( + (state: AppState) => state.source.batchSelecting, + ); + const focusedSourceID = useSelector( + (state: AppState) => state.source.focusedSource.id, + ); + const focusedSourceEffects = useSelector( + (state: AppState) => state.source.focusedSource.effects, + ); + const focusedSourceNoiseFocusInput = useSelector( + (state: AppState) => state.source.focusedSource.noises.focusInput, + ); + const focusedSourceNoiseScrollIntoView = useSelector( + (state: AppState) => state.source.focusedSource.noises.scrollIntoView, + ); + const focusedSourceIndex = sources.findIndex( + (source) => source.id === focusedSourceID, + ); + const focusedTranslationID = useSelector( + (state: AppState) => state.translation.focusedTranslation.id, + ); + const focusedSource = sources.find((source) => source.id === focusedSourceID); + const focusedSourceCreating = focusedSource?.labelStatus === 'creating'; + const focusedSourceDeleting = focusedSource?.labelStatus === 'deleting'; + let focusedSourceAllTranslations: APITranslation[] = []; + if (focusedSource?.translations) { + focusedSourceAllTranslations = [...focusedSource.translations]; + } + if (focusedSource?.myTranslation) { + focusedSourceAllTranslations.push(focusedSource.myTranslation); + } + const focusedTranslation = focusedSourceAllTranslations.find( + (translation) => translation.id === focusedTranslationID, + ); + const isMyTranslation = focusedTranslation?.user?.id === currentUser.id; + const isNoTranslation = + !!focusedSourceID && + (!focusedTranslationID || + (focusedTranslation?.content === '' && + focusedTranslation?.proofreadContent === '')); + + let mergedStatus: InputDebounceStatus | undefined; + const isMergedStatus = (status: InputDebounceStatus | undefined) => + focusedSource?.proodreadContentStatuses[focusedTranslationID] === status || + ((isMyTranslation || isNoTranslation) && + focusedSource?.myTranslationContentStatus === status); + if (isMergedStatus('saveFailed')) { + mergedStatus = 'saveFailed'; + } else if (isMergedStatus('debouncing')) { + mergedStatus = 'debouncing'; + } else if (isMergedStatus('saving')) { + mergedStatus = 'saving'; + } else if (isMergedStatus('saveSuccessful')) { + mergedStatus = 'saveSuccessful'; + } else { + mergedStatus = undefined; + } + + const responsiveHeight = isMobile ? 60 : 250; + + const bottomHeight = focusedSource ? responsiveHeight : 0; + + const isNoTranslationRef = useRef(isNoTranslation); + isNoTranslationRef.current = isNoTranslation; + useEffect(() => { + if (focusedSourceEffects.includes('focusInput')) { + setTimeout(() => { + if (isNoTranslationRef.current) { + translationTextAreaRef.current?.focus({ cursor: 'end' }); + } else { + proofreadTextAreaRef.current?.focus({ cursor: 'end' }); + } + }); } - const focusedTranslation = focusedSourceAllTranslations.find( - (translation) => translation.id === focusedTranslationID - ); - const isMyTranslation = focusedTranslation?.user?.id === currentUser.id; - const isNoTranslation = - !!focusedSourceID && - (!focusedTranslationID || - (focusedTranslation?.content === '' && - focusedTranslation?.proofreadContent === '')); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [focusedSourceID, focusedSourceNoiseFocusInput]); - let mergedStatus: InputDebounceStatus | undefined; - const isMergedStatus = (status: InputDebounceStatus | undefined) => - focusedSource?.proodreadContentStatuses[focusedTranslationID] === - status || - ((isMyTranslation || isNoTranslation) && - focusedSource?.myTranslationContentStatus === status); - if (isMergedStatus('saveFailed')) { - mergedStatus = 'saveFailed'; - } else if (isMergedStatus('debouncing')) { - mergedStatus = 'debouncing'; - } else if (isMergedStatus('saving')) { - mergedStatus = 'saving'; - } else if (isMergedStatus('saveSuccessful')) { - mergedStatus = 'saveSuccessful'; - } else { - mergedStatus = undefined; + useEffect(() => { + if (focusedSourceEffects.includes('scrollIntoView')) { + domRefs.current[focusedSourceIndex]?.scrollIntoView({ + block: 'end', + }); } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [focusedSourceID, focusedSourceNoiseScrollIntoView]); - const responsiveHeight = isMobile ? 60 : 250; + const handleTranslationContentChange = ( + e: React.ChangeEvent, + ) => { + const content = e.target.value; + if (content === '' && !focusedTranslation?.proofreadContent) { + dispatch(focusTranslation({ id: '' })); + } + dispatch( + editMyTranslationSaga({ + sourceID: focusedSourceID, + targetID, + content, + focus: true, + }), + ); + }; - const bottomHeight = focusedSource ? responsiveHeight : 0; + const handleProofreadContentChange = ( + e: React.ChangeEvent, + ) => { + const proofreadContent = e.target.value; + dispatch( + editProofreadSaga({ + sourceID: focusedSourceID, + translationID: focusedTranslationID, + proofreadContent, + }), + ); + }; - const isNoTranslationRef = useRef(isNoTranslation); - isNoTranslationRef.current = isNoTranslation; - useEffect(() => { - if (focusedSourceEffects.includes('focusInput')) { - setTimeout(() => { - if (isNoTranslationRef.current) { - translationTextAreaRef.current?.focus({ cursor: 'end' }); - } else { - proofreadTextAreaRef.current?.focus({ cursor: 'end' }); - } - }); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [focusedSourceID, focusedSourceNoiseFocusInput]); + const cloneTranslationContent = () => { + if (focusedTranslation?.content) { + handleProofreadContentChange({ + target: { + value: focusedTranslation.content, + }, + } as any as React.ChangeEvent); + } + }; - useEffect(() => { - if (focusedSourceEffects.includes('scrollIntoView')) { - domRefs.current[focusedSourceIndex]?.scrollIntoView({ - block: 'end', + const batchSelectTranslation = () => { + const sourceTranslationIDMap = []; + for (const source of sources) { + const bestTranslation = getBestTranslation(source); + if (bestTranslation && !bestTranslation.selected) { + sourceTranslationIDMap.push({ + sourceID: source.id, + translationID: bestTranslation.id, }); } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [focusedSourceID, focusedSourceNoiseScrollIntoView]); - - const handleTranslationContentChange = ( - e: React.ChangeEvent - ) => { - const content = e.target.value; - if (content === '' && !focusedTranslation?.proofreadContent) { - dispatch(focusTranslation({ id: '' })); - } - dispatch( - editMyTranslationSaga({ - sourceID: focusedSourceID, - targetID, - content, - focus: true, - }) - ); - }; - - const handleProofreadContentChange = ( - e: React.ChangeEvent - ) => { - const proofreadContent = e.target.value; + } + if (sourceTranslationIDMap.length > 0) { dispatch( - editProofreadSaga({ - sourceID: focusedSourceID, - translationID: focusedTranslationID, - proofreadContent, - }) + batchSelectTranslationSaga({ + fileID: file!.id, + data: sourceTranslationIDMap, + }), ); - }; - - const cloneTranslationContent = () => { - if (focusedTranslation?.content) { - handleProofreadContentChange({ - target: { - value: focusedTranslation.content, - }, - } as any as React.ChangeEvent); - } - }; + } + }; - const batchSelectTranslation = () => { - const sourceTranslationIDMap = []; - for (const source of sources) { - const bestTranslation = getBestTranslation(source); - if (bestTranslation && !bestTranslation.selected) { - sourceTranslationIDMap.push({ - sourceID: source.id, - translationID: bestTranslation.id, - }); + return ( +
0) { - dispatch( - batchSelectTranslationSaga({ - fileID: file!.id, - data: sourceTranslationIDMap, - }) - ); - } - }; - - return ( -
-
- - {sources.map((source, index) => ( - (domRefs.current[index] = ref)} - source={source} - index={index} - key={source.id} - targetID={targetID} - /> - ))} - {file && sources.length > 0 && ( -
-
- -
-
- {formatMessage({ - id: 'imageTranslator.checkAllTranslationTip', - })} -
-
- )} -
- {focusedSource && ( -
-
- +
+ + {sources.map((source, index) => ( + (domRefs.current[index] = ref)} + source={source} + index={index} + key={source.id} + targetID={targetID} + /> + ))} + {file && sources.length > 0 && ( +
+
+ - - + {formatMessage({ id: 'imageTranslator.checkAllTranslation' })} +
-
- - {isMyTranslation || isNoTranslation ? ( - - ) : ( -
- {focusedTranslation?.content} -
- )} +
+ {formatMessage({ + id: 'imageTranslator.checkAllTranslationTip', + })}
-
-
- +
+ )} +
+ {focusedSource && ( +
+
+ + + + +
+
+ + {isMyTranslation || isNoTranslation ? ( -
+ ) : ( +
+ {focusedTranslation?.content} +
+ )}
- )} -
- ); - }; +
+
+ + +
+
+ )} +
+ ); +}; diff --git a/src/components/ImageSourceViewerTranslator.tsx b/src/components/ImageSourceViewerTranslator.tsx index 5a1cc7b..9736cd3 100644 --- a/src/components/ImageSourceViewerTranslator.tsx +++ b/src/components/ImageSourceViewerTranslator.tsx @@ -25,11 +25,9 @@ interface ImageSourceViewerTranslatorProps { /** * 翻译模式 */ -export const ImageSourceViewerTranslator: FC = ({ - sources, - targetID, - className, -}) => { +export const ImageSourceViewerTranslator: FC< + ImageSourceViewerTranslatorProps +> = ({ sources, targetID, className }) => { const { formatMessage } = useIntl(); const dispatch = useDispatch(); const platform = useSelector((state: AppState) => state.site.platform); @@ -37,19 +35,19 @@ export const ImageSourceViewerTranslator: FC = const domRefs = useRef<(HTMLDivElement | null)[]>([]); const textAreaRef = useRef(null); const currentProject = useSelector( - (state: AppState) => state.project.currentProject + (state: AppState) => state.project.currentProject, ); const focusedSourceID = useSelector( - (state: AppState) => state.source.focusedSource.id + (state: AppState) => state.source.focusedSource.id, ); const focusedSourceEffects = useSelector( - (state: AppState) => state.source.focusedSource.effects + (state: AppState) => state.source.focusedSource.effects, ); const focusedSourceNoiseFocusInput = useSelector( - (state: AppState) => state.source.focusedSource.noises.focusInput + (state: AppState) => state.source.focusedSource.noises.focusInput, ); const focusedSourceNoiseScrollIntoView = useSelector( - (state: AppState) => state.source.focusedSource.noises.scrollIntoView + (state: AppState) => state.source.focusedSource.noises.scrollIntoView, ); let focusedSource: ISource | undefined = undefined; let focusedSourceIndex: number = -1; @@ -88,14 +86,14 @@ export const ImageSourceViewerTranslator: FC = }, [focusedSourceID, focusedSourceNoiseScrollIntoView]); const handleTranslationContentChange = ( - e: React.ChangeEvent + e: React.ChangeEvent, ) => { dispatch( editMyTranslationSaga({ sourceID: focusedSourceID, targetID, content: e.target.value, - }) + }), ); }; @@ -115,19 +113,17 @@ export const ImageSourceViewerTranslator: FC = border-bottom: 1px solid ${style.borderColorBase}; min-height: 30px; ${clickEffect()}; - ${hover( - css` - .ImageSourceViewerTranslator__TranslationContentOthersBest { - color: ${style.textColor}; - } - .ImageSourceViewerTranslator__TranslationContentOthersBestPrefixIcon { - color: ${style.textColorSecondary}; - } - .ImageSourceViewerTranslator__TranslationContentMine--hasProofread { - color: ${style.textColor}; - } - ` - )}; + ${hover(css` + .ImageSourceViewerTranslator__TranslationContentOthersBest { + color: ${style.textColor}; + } + .ImageSourceViewerTranslator__TranslationContentOthersBestPrefixIcon { + color: ${style.textColorSecondary}; + } + .ImageSourceViewerTranslator__TranslationContentMine--hasProofread { + color: ${style.textColor}; + } + `)}; :last-child { border-bottom: 0; } @@ -251,7 +247,7 @@ export const ImageSourceViewerTranslator: FC = 'ImageSourceViewerTranslator__Translation--empty': empty, 'ImageSourceViewerTranslator__Translation--focus': focusedSourceID === source.id, - } + }, )} onClick={() => { dispatch( @@ -259,7 +255,7 @@ export const ImageSourceViewerTranslator: FC = id: source.id, effects: ['focusLabel', 'focusInput'], noises: ['focusInput'], - }) + }), ); }} > @@ -273,8 +269,9 @@ export const ImageSourceViewerTranslator: FC = className={classNames( 'ImageSourceViewerTranslator__TranslationContentMine', { - 'ImageSourceViewerTranslator__TranslationContentMine--hasProofread': myProofreadContent, - } + 'ImageSourceViewerTranslator__TranslationContentMine--hasProofread': + myProofreadContent, + }, )} > {myContent} @@ -344,10 +341,10 @@ export const ImageSourceViewerTranslator: FC = focusedSourceCreating ? formatMessage({ id: 'imageTranslator.sourceCreating' }) : focusedSourceDeleting - ? formatMessage({ id: 'imageTranslator.sourceDeleting' }) - : formatMessage({ - id: 'imageTranslator.translationPlaceholder', - }) + ? formatMessage({ id: 'imageTranslator.sourceDeleting' }) + : formatMessage({ + id: 'imageTranslator.translationPlaceholder', + }) } disabled={ !can(currentProject, PROJECT_PERMISSION.ADD_TRA) || diff --git a/src/components/ImageTranslatorSettingHotKey.tsx b/src/components/ImageTranslatorSettingHotKey.tsx index 0bedf1c..34605b4 100644 --- a/src/components/ImageTranslatorSettingHotKey.tsx +++ b/src/components/ImageTranslatorSettingHotKey.tsx @@ -22,22 +22,22 @@ interface ImageTranslatorSettingHotKeyProps { /** * 快捷键设置 */ -export const ImageTranslatorSettingHotKey: FC = ({ - className, -}) => { +export const ImageTranslatorSettingHotKey: FC< + ImageTranslatorSettingHotKeyProps +> = ({ className }) => { const { formatMessage } = useIntl(); const dispatch = useDispatch(); const focusNextSourceHotKeyOptions = useSelector( - (state: AppState) => state.hotKey.focusNextSource + (state: AppState) => state.hotKey.focusNextSource, ); const focusPrevSourceHotKeyOptions = useSelector( - (state: AppState) => state.hotKey.focusPrevSource + (state: AppState) => state.hotKey.focusPrevSource, ); const goPrevPageHotKeyOptions = useSelector( - (state: AppState) => state.hotKey.goPrevPage + (state: AppState) => state.hotKey.goPrevPage, ); const goNextPageHotKeyOptions = useSelector( - (state: AppState) => state.hotKey.goNextPage + (state: AppState) => state.hotKey.goNextPage, ); const handleHotKeyChange = ({ @@ -58,7 +58,7 @@ export const ImageTranslatorSettingHotKey: FC hotKey.meta === false ) { alert( - '请勿设置 Shift + 字母/数字/符号 的快捷键，这样会导致输入框中无法输入此大写字母/符号。' + '请勿设置 Shift + 字母/数字/符号 的快捷键，这样会导致输入框中无法输入此大写字母/符号。', ); return; } @@ -74,7 +74,7 @@ export const ImageTranslatorSettingHotKey: FC hotKey.meta === false ) { alert( - '请勿设置 只含有字母/数字/符号/箭头/空格 等快捷键，这样会导致输入框中无法使用此按键。' + '请勿设置 只含有字母/数字/符号/箭头/空格 等快捷键，这样会导致输入框中无法使用此按键。', ); return; } diff --git a/src/components/ImageTranslatorSettingMouse.tsx b/src/components/ImageTranslatorSettingMouse.tsx index c07bcb2..cda8a7e 100644 --- a/src/components/ImageTranslatorSettingMouse.tsx +++ b/src/components/ImageTranslatorSettingMouse.tsx @@ -11,9 +11,9 @@ interface ImageTranslatorSettingMouseProps { /** * 模板 */ -export const ImageTranslatorSettingMouse: FC = ({ - className, -}) => { +export const ImageTranslatorSettingMouse: FC< + ImageTranslatorSettingMouseProps +> = ({ className }) => { const { formatMessage } = useIntl(); // i18n return ( diff --git a/src/components/ImageViewer.tsx b/src/components/ImageViewer.tsx index 913f662..2164258 100644 --- a/src/components/ImageViewer.tsx +++ b/src/components/ImageViewer.tsx @@ -2,7 +2,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons'; import { css } from '@emotion/core'; import { Modal, Spin } from 'antd'; import Bowser from 'bowser'; -import {debounce} from 'lodash-es'; +import { debounce } from 'lodash-es'; import React, { useEffect, useRef, useState } from 'react'; import { useIntl } from 'react-intl'; import { useDispatch, useSelector } from 'react-redux'; @@ -91,16 +91,16 @@ export const ImageViewer: FC = ({ const platform = useSelector((state: AppState) => state.site.platform); const isMobile = platform === 'mobile'; const savingStatus = useSelector( - (state: AppState) => state.source.savingStatus + (state: AppState) => state.source.savingStatus, ); const focusedSourceID = useSelector( - (state: AppState) => state.source.focusedSource.id + (state: AppState) => state.source.focusedSource.id, ); const focusedSourceEffects = useSelector( - (state: AppState) => state.source.focusedSource.effects + (state: AppState) => state.source.focusedSource.effects, ); const focusedSourceNoiseFocusLabel = useSelector( - (state: AppState) => state.source.focusedSource.noises.focusLabel + (state: AppState) => state.source.focusedSource.noises.focusLabel, ); const [focusLabelIndex, setFocusLabelIndex] = useState(-1); // 图片加载中 @@ -142,14 +142,11 @@ export const ImageViewer: FC = ({ * 图片缩放控制面板相关 */ // 图片缩放控制面板拖动条的值 - const [ - imageViewerZoomPanelSliderValue, - setimageViewerZoomPanelSliderValue, - ] = useState(1); + const [imageViewerZoomPanelSliderValue, setimageViewerZoomPanelSliderValue] = + useState(1); // 是否收图片缩控制台 - const [imageViewerZoomPanelShrunk, setimageViewerZoomPanelShrunk] = useState( - true - ); + const [imageViewerZoomPanelShrunk, setimageViewerZoomPanelShrunk] = + useState(true); // 图片缩放控制台 ref const imageViewerZoomPanelRef = useRef() as MovableItemUseRef; // 图片缩放控制台最近的边的默认值 @@ -165,15 +162,15 @@ export const ImageViewer: FC = ({ } // 图片缩放控制台最近的边 const imageViewerZoomPanelMarginsRef = useRef( - defaultimageViewerZoomPanelMargins + defaultimageViewerZoomPanelMargins, ); // 图片移动区域变化时，将各个控件移动到相应地方 useEffect(() => { imageViewerZoomPanelRef.current.move( imageViewerZoomPanelRef.current.moveWithMargins( - imageViewerZoomPanelMarginsRef.current - ) + imageViewerZoomPanelMarginsRef.current, + ), ); // eslint-disable-next-line react-hooks/exhaustive-deps }, [imageAreaSize.width, imageAreaSize.height]); @@ -381,7 +378,7 @@ export const ImageViewer: FC = ({ x, y, positionType: SOURCE_POSITION_TYPE.IN, - }) + }), ); } else if (button === 2) { dispatch( @@ -390,7 +387,7 @@ export const ImageViewer: FC = ({ x, y, positionType: SOURCE_POSITION_TYPE.OUT, - }) + }), ); } }; @@ -404,7 +401,7 @@ export const ImageViewer: FC = ({ ? ['scrollIntoView'] : ['focusInput', 'scrollIntoView'], noises: isMobile ? [] : ['focusInput'], - }) + }), ); }; @@ -462,8 +459,8 @@ export const ImageViewer: FC = ({ bestTranslation === undefined ? undefined : bestTranslation.proofreadContent - ? bestTranslation.proofreadContent - : bestTranslation.content; + ? bestTranslation.proofreadContent + : bestTranslation.content; return ( = ({ `, css` color: ${style.widgetButtonActiveColor}; - ` + `, )} &.ImageViewer__BackButton { position: absolute; diff --git a/src/components/ImageViewerLabelTextExample.tsx b/src/components/ImageViewerLabelTextExample.tsx index d05e0b4..7ed572a 100644 --- a/src/components/ImageViewerLabelTextExample.tsx +++ b/src/components/ImageViewerLabelTextExample.tsx @@ -20,7 +20,9 @@ interface ImageViewerLabelTextExampleProps { * @param originDirection 源标语言的方向 * @param originWritingMode 源语言的书写模式 */ -export const ImageViewerLabelTextExample: FC = ({ +export const ImageViewerLabelTextExample: FC< + ImageViewerLabelTextExampleProps +> = ({ visible = true, direction, writingMode, diff --git a/src/components/ImageViewerPagingPanel.tsx b/src/components/ImageViewerPagingPanel.tsx index 4bf4c9a..4651721 100644 --- a/src/components/ImageViewerPagingPanel.tsx +++ b/src/components/ImageViewerPagingPanel.tsx @@ -54,7 +54,7 @@ export const ImageViewerPagingPanel: FC = ({ // 快捷键 - 上一页 const goPrevPageHotKeyOptions = useSelector( - (state: AppState) => state.hotKey.goPrevPage + (state: AppState) => state.hotKey.goPrevPage, ); useHotKey( { @@ -62,7 +62,7 @@ export const ImageViewerPagingPanel: FC = ({ ...goPrevPageHotKeyOptions[0], }, goPrevImage, - [prevImageID, targetID, loading, disibled] + [prevImageID, targetID, loading, disibled], ); useHotKey( { @@ -70,12 +70,12 @@ export const ImageViewerPagingPanel: FC = ({ ...goPrevPageHotKeyOptions[1], }, goPrevImage, - [prevImageID, targetID, loading, disibled] + [prevImageID, targetID, loading, disibled], ); // 快捷键 - 下一页 const goNextPageHotKeyOptions = useSelector( - (state: AppState) => state.hotKey.goNextPage + (state: AppState) => state.hotKey.goNextPage, ); useHotKey( { @@ -83,7 +83,7 @@ export const ImageViewerPagingPanel: FC = ({ ...goNextPageHotKeyOptions[0], }, goNextImage, - [nextImageID, targetID, loading, disibled] + [nextImageID, targetID, loading, disibled], ); useHotKey( { @@ -91,7 +91,7 @@ export const ImageViewerPagingPanel: FC = ({ ...goNextPageHotKeyOptions[1], }, goNextImage, - [nextImageID, targetID, loading, disibled] + [nextImageID, targetID, loading, disibled], ); return ( @@ -123,7 +123,7 @@ export const ImageViewerPagingPanel: FC = ({ `, css` color: ${style.widgetButtonActiveColor}; - ` + `, )} &:first-of-type { border-radius: ${style.borderRadiusBase} 0 0 diff --git a/src/components/ImageViewerSettingPanel.tsx b/src/components/ImageViewerSettingPanel.tsx index f19f9bc..0f9f510 100644 --- a/src/components/ImageViewerSettingPanel.tsx +++ b/src/components/ImageViewerSettingPanel.tsx @@ -49,7 +49,7 @@ export const ImageViewerSettingPanel: FC = ({ `, css` color: ${style.widgetButtonActiveColor}; - ` + `, )} &:last-child { border-radius: 0 ${style.borderRadiusBase} diff --git a/src/components/ImageViewerZoomPanel.tsx b/src/components/ImageViewerZoomPanel.tsx index ff1b188..fe52b33 100644 --- a/src/components/ImageViewerZoomPanel.tsx +++ b/src/components/ImageViewerZoomPanel.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/core'; import { Icon } from '.'; import { Slider } from 'antd'; -import {debounce} from 'lodash-es'; +import { debounce } from 'lodash-es'; import React from 'react'; import { useIntl } from 'react-intl'; import { useSelector } from 'react-redux'; @@ -188,7 +188,7 @@ export const ImageViewerZoomPanel: FC = ({ `, css` color: ${style.widgetButtonActiveColor}; - ` + `, )} &.ImageViewerZoomPanel__ShrinkButton { height: 30px; @@ -282,7 +282,7 @@ export const ImageViewerZoomPanel: FC = ({ `, css` color: ${style.widgetButtonActiveColor}; - ` + `, )} cursor: pointer; &:last-child { diff --git a/src/components/InvitationList.tsx b/src/components/InvitationList.tsx index c396fdb..a736fd9 100644 --- a/src/components/InvitationList.tsx +++ b/src/components/InvitationList.tsx @@ -160,7 +160,7 @@ export const InvitationList: FC = ({ title: formatMessage({ id: 'invitation.deleteInvitation' }), content: formatMessage( { id: 'invitation.deleteInvitationTip' }, - { user: invitation.user.name } + { user: invitation.user.name }, ), onOk: () => { setSpinningIDs((ids) => [invitation.id, ...ids]); diff --git a/src/components/InviteUser.tsx b/src/components/InviteUser.tsx index 08259ce..e68090a 100644 --- a/src/components/InviteUser.tsx +++ b/src/components/InviteUser.tsx @@ -207,7 +207,7 @@ export const InviteUser: FC = ({ > {formatMessage( { id: 'invitation.inviteAsRole' }, - { role: type.name } + { role: type.name }, )} ); @@ -275,7 +275,7 @@ export const InviteUser: FC = ({ ); diff --git a/src/components/Label.tsx b/src/components/Label.tsx index 4f310b7..b09f682 100644 --- a/src/components/Label.tsx +++ b/src/components/Label.tsx @@ -184,7 +184,9 @@ export const Label: FC = ({ } } .Label__Number { - transition: opacity 200ms, background-color 200ms; + transition: + opacity 200ms, + background-color 200ms; position: absolute; top: ${numberTop}px; left: ${numberLeft}px; diff --git a/src/components/List.tsx b/src/components/List.tsx index 5b15642..6030bcc 100644 --- a/src/components/List.tsx +++ b/src/components/List.tsx @@ -3,7 +3,7 @@ import { Pagination } from 'antd'; import { PaginationProps } from 'antd/lib/pagination'; import { Canceler, CancelToken } from 'axios'; import classNames from 'classnames'; -import {debounce} from 'lodash-es'; +import { debounce } from 'lodash-es'; import React, { useEffect, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import ReactResizeDetector from 'react-resize-detector'; @@ -37,7 +37,7 @@ interface ListProps { itemCreater: (item: T) => React.ReactNode | React.ReactElement; emptyTipCreater?: () => React.ReactNode | React.ReactElement | undefined; searchEmptyTipCreater?: ( - word: string + word: string, ) => React.ReactNode | React.ReactElement | undefined; searchRightButton?: React.ReactNode | React.ReactElement; searchInputVisible?: boolean; @@ -142,8 +142,8 @@ export function List({ } }, 200, - { maxWait: 500 } - ) + { maxWait: 500 }, + ), ); /** 第一次挂载/切换 ID */ diff --git a/src/components/ListSearchInput.tsx b/src/components/ListSearchInput.tsx index a508aee..5d5d70a 100644 --- a/src/components/ListSearchInput.tsx +++ b/src/components/ListSearchInput.tsx @@ -33,7 +33,7 @@ export const ListSearchInput: FC = ({ | React.ChangeEvent | React.MouseEvent | React.KeyboardEvent - | undefined + | undefined, ) => { setWord(value); if (inputProps.onSearch) { diff --git a/src/components/MemberList.tsx b/src/components/MemberList.tsx index 2bfd5a5..e079afc 100644 --- a/src/components/MemberList.tsx +++ b/src/components/MemberList.tsx @@ -158,7 +158,7 @@ export const MemberList: FC = ({ ? formatMessage({ id: 'team.leaveConfirm' }) : formatMessage( { id: 'team.deleteUserConfirm' }, - { user: user.name } + { user: user.name }, ), onOk: () => { setSpinningIDs((ids) => [user.id, ...ids]); diff --git a/src/components/Movable.tsx b/src/components/Movable.tsx index 6ff70dd..7627bbe 100644 --- a/src/components/Movable.tsx +++ b/src/components/Movable.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/core'; import Bowser from 'bowser'; -import {size, has, debounce, throttle} from 'lodash-es'; +import { size, has, debounce, throttle } from 'lodash-es'; import React, { forwardRef, ReactElement, @@ -230,16 +230,14 @@ export interface Zoom { moveX?: number; moveY?: number; } - | (( - prevState: MovableItemState - ) => { + | ((prevState: MovableItemState) => { scale: number; centerX?: number; centerY?: number; moveX?: number; moveY?: number; }), - options?: ZoomOptions + options?: ZoomOptions, ): void; } /**用于更新自身尺寸的函数 */ @@ -309,7 +307,7 @@ export interface OnMoveEnd { ( params: MovableItemState & { reset: () => void; - } + }, ): void; } export interface OnZoomStart { @@ -462,7 +460,7 @@ const MovableItemWithoutRef: React.ForwardRefRenderFunction< children, ...otherProps }, - ref + ref, ) => { // 当前的位置/缩放状态 {x, y, scale} const defaultState: MovableItemState = { @@ -982,7 +980,7 @@ const MovableItemWithoutRef: React.ForwardRefRenderFunction< pointersRef.current[pointerId].clientY - startMoveInfoRef.current.clientY; const distance = Math.sqrt( - Math.pow(distanceX, 2) + Math.pow(distanceY, 2) + Math.pow(distanceX, 2) + Math.pow(distanceY, 2), ); // 长按位置 let longPressX = @@ -1069,13 +1067,8 @@ const MovableItemWithoutRef: React.ForwardRefRenderFunction< } else if (allowZoom && size(pointersRef.current) === 2) { // 2个光标移动，缩放 // 计算开始时双指距离 和 X、Y 轴上分别的距离用来计算 tan(x) - const { - distance, - distanceX, - distanceY, - centerClientX, - centerClientY, - } = getTwoPointersInfo(); + const { distance, distanceX, distanceY, centerClientX, centerClientY } = + getTwoPointersInfo(); // 移动了的距离 const distanceDelta = distance - startZoomInfoRef.current.distance; // 缩放倍数 @@ -1093,28 +1086,28 @@ const MovableItemWithoutRef: React.ForwardRefRenderFunction< // 未缩放的斜边 const partWidth = getSize().height / distanceTan; // 直角三角形在矩形底边的宽度 hypotenuse = Math.sqrt( - Math.pow(partWidth, 2) + Math.pow(getSize().height, 2) + Math.pow(partWidth, 2) + Math.pow(getSize().height, 2), ); // 缩放后的斜边 const zoomedPartWidth = (getSize().height * startStateRef.current.scale) / distanceTan; // 直角三角形在矩形底边的宽度 zoomedHypotenuse = Math.sqrt( Math.pow(zoomedPartWidth, 2) + - Math.pow(getSize().height * startStateRef.current.scale, 2) + Math.pow(getSize().height * startStateRef.current.scale, 2), ); } else { // 两个手指连线的角度比图片对角线的小，三角形宽度等于矩形宽度，用 宽度*tan(x) 计算 // 未缩放的斜边 const partHeight = getSize().width * distanceTan; // 直角三角形在矩形底边的高度 hypotenuse = Math.sqrt( - Math.pow(partHeight, 2) + Math.pow(getSize().width, 2) + Math.pow(partHeight, 2) + Math.pow(getSize().width, 2), ); // 缩放后的斜边 const zoomedPartHeight = getSize().width * startStateRef.current.scale * distanceTan; // 直角三角形在矩形底边的高度 zoomedHypotenuse = Math.sqrt( Math.pow(zoomedPartHeight, 2) + - Math.pow(getSize().width * startStateRef.current.scale, 2) + Math.pow(getSize().width * startStateRef.current.scale, 2), ); } } @@ -1182,7 +1175,7 @@ const MovableItemWithoutRef: React.ForwardRefRenderFunction< const distanceX = clientX - startMoveInfoRef.current.clientX; const distanceY = clientY - startMoveInfoRef.current.clientY; const distance = Math.sqrt( - Math.pow(distanceX, 2) + Math.pow(distanceY, 2) + Math.pow(distanceX, 2) + Math.pow(distanceY, 2), ); // 抬起后就没了，移动结束 movingRef.current = false; diff --git a/src/components/MovableAreaColorBackground.tsx b/src/components/MovableAreaColorBackground.tsx index c8e9e2c..dfbed73 100644 --- a/src/components/MovableAreaColorBackground.tsx +++ b/src/components/MovableAreaColorBackground.tsx @@ -12,10 +12,9 @@ interface MovableAreaColorBackgroundProps { /** * 可移动区域纯色背景 */ -export const MovableAreaColorBackground: FC = ({ - color, - className, -}) => { +export const MovableAreaColorBackground: FC< + MovableAreaColorBackgroundProps +> = ({ color, className }) => { return (
= ({ - src, - onLoad, - className, -}) => { +export const MovableAreaImageBackground: FC< + MovableAreaImageBackgroundProps +> = ({ src, onLoad, className }) => { const domRef = useRef(null); return ( = ({ const isIPad = platform === 'tablet' && osName === 'ios'; const saving = labelSavingStatuses.includes(status); const currentProject = useSelector( - (state: AppState) => state.project.currentProject + (state: AppState) => state.project.currentProject, ); const handleMoveEnd: OnMoveEnd = ({ x: newX, y: newY, reset }) => { @@ -83,7 +83,7 @@ export const MovableLabel: FC = ({ x: newX, y: newY, reset, - }) + }), ); } }; @@ -106,7 +106,7 @@ export const MovableLabel: FC = ({ positionType === SOURCE_POSITION_TYPE.OUT ? SOURCE_POSITION_TYPE.IN : SOURCE_POSITION_TYPE.OUT, - }) + }), ); } }; diff --git a/src/components/Output.tsx b/src/components/Output.tsx index 96b5fb4..3308032 100644 --- a/src/components/Output.tsx +++ b/src/components/Output.tsx @@ -74,7 +74,7 @@ export const Output: FC = ({ index, output, className }) => { formatMessage({ id: 'output.onlyText' }) + formatMessage({ id: ')' }) : '', - } + }, )}
@@ -89,7 +89,7 @@ export const Output: FC = ({ index, output, className }) => { disibled={output.status === OUTPUT_STATUS.ERROR} loading={ ![OUTPUT_STATUS.SUCCEEDED, OUTPUT_STATUS.ERROR].includes( - output.status + output.status, ) } color={style.textColor} diff --git a/src/components/OutputList.tsx b/src/components/OutputList.tsx index 109311c..a39ce7a 100644 --- a/src/components/OutputList.tsx +++ b/src/components/OutputList.tsx @@ -44,7 +44,7 @@ export const OutputList: FC = ({ for (const output of outputsRef.current) { if ( ![OUTPUT_STATUS.ERROR, OUTPUT_STATUS.SUCCEEDED].includes( - output.status + output.status, ) ) { shouldRefresh = true; @@ -114,7 +114,7 @@ export const OutputList: FC = ({ .then((result) => { const data = toLowerCamelCase(result.data); setOutputs((outputs) => - outputs ? [data, ...outputs].slice(0, 3) : [data] + outputs ? [data, ...outputs].slice(0, 3) : [data], ); }) .catch((error) => { @@ -173,11 +173,11 @@ export const OutputList: FC = ({ ? isExclude ? formatMessage( { id: 'output.outputPartialExclude' }, - { count: selectedFileIds.length } + { count: selectedFileIds.length }, ) : formatMessage( { id: 'output.outputPartial' }, - { count: selectedFileIds.length } + { count: selectedFileIds.length }, ) : formatMessage({ id: 'output.outputAll' })} {formatMessage({ id: ':' })} @@ -243,15 +243,15 @@ export const OutputList: FC = ({ {outputs === undefined ? undefined : outputs.length === 0 - ? formatMessage({ id: 'output.empty' }) - : outputs.map((output, i) => ( - - ))} + ? formatMessage({ id: 'output.empty' }) + : outputs.map((output, i) => ( + + ))}
); diff --git a/src/components/ProjectCreateForm.tsx b/src/components/ProjectCreateForm.tsx index 062d278..ebfc30e 100644 --- a/src/components/ProjectCreateForm.tsx +++ b/src/components/ProjectCreateForm.tsx @@ -42,13 +42,13 @@ export const ProjectCreateForm: FC = ({ const [isAllowApply, setIsAllowApply] = useState(true); const [submitting, setSubmitting] = useState(false); const currentTeam = useSelector( - (state: AppState) => state.team.currentTeam + (state: AppState) => state.team.currentTeam, ) as UserTeam; const currentProjectSet = useSelector( - (state: AppState) => state.projectSet.currentProjectSet + (state: AppState) => state.projectSet.currentProjectSet, ) as UserProjectSet; const [disableSourceLanugageIDs, setDisableSourceLanugageIDs] = useState( - configs.default.project.targetLanguageCodes + configs.default.project.targetLanguageCodes, ); const [disableTargetLanugageIDs, setDisableTargetLanugageIDs] = useState([ configs.default.project.sourceLanugageCode, @@ -86,13 +86,13 @@ export const ProjectCreateForm: FC = ({ createProject({ project: toLowerCamelCase(result.data.project), unshift: true, - }) + }), ); dispatch(resetFilesState()); dispatch(resetProjectsState()); // 跳转到项目 history.replace( - `/dashboard/teams/${teamID}/project-sets/${projectSetID}/projects/${result.data.project.id}` + `/dashboard/teams/${teamID}/project-sets/${projectSetID}/projects/${result.data.project.id}`, ); // 弹出提示 message.success(result.data.message); @@ -145,7 +145,7 @@ export const ProjectCreateForm: FC = ({ // 关闭加入时，隐藏加入选项 if (values.allowApplyType) { setIsAllowApply( - values.allowApplyType !== GROUP_ALLOW_APPLY_TYPE.NONE + values.allowApplyType !== GROUP_ALLOW_APPLY_TYPE.NONE, ); } // 禁用源语言中的目标语言 diff --git a/src/components/ProjectEditForm.tsx b/src/components/ProjectEditForm.tsx index 9e10d71..74cb66b 100644 --- a/src/components/ProjectEditForm.tsx +++ b/src/components/ProjectEditForm.tsx @@ -27,11 +27,11 @@ export const ProjectEditForm: FC = ({ className }) => { const [form] = AntdForm.useForm(); const dispatch = useDispatch(); const currentProject = useSelector( - (state: AppState) => state.project.currentProject + (state: AppState) => state.project.currentProject, ) as Project; const [submitting, setSubmitting] = useState(false); const [isAllowApply, setIsAllowApply] = useState( - currentProject.allowApplyType !== GROUP_ALLOW_APPLY_TYPE.NONE + currentProject.allowApplyType !== GROUP_ALLOW_APPLY_TYPE.NONE, ); // id 改变时，获取初始值 @@ -77,7 +77,7 @@ export const ProjectEditForm: FC = ({ className }) => { // 关闭加入时，隐藏加入选项 if (values.allowApplyType) { setIsAllowApply( - values.allowApplyType !== GROUP_ALLOW_APPLY_TYPE.NONE + values.allowApplyType !== GROUP_ALLOW_APPLY_TYPE.NONE, ); } }} diff --git a/src/components/ProjectFinishedTip.tsx b/src/components/ProjectFinishedTip.tsx index 186819f..e692727 100644 --- a/src/components/ProjectFinishedTip.tsx +++ b/src/components/ProjectFinishedTip.tsx @@ -10,7 +10,9 @@ interface ProjectFinishedTipProps { /** * 项目完结提示 */ -export const ProjectFinishedTip: FC = ({ className }) => { +export const ProjectFinishedTip: FC = ({ + className, +}) => { const { formatMessage } = useIntl(); // i18n return ; diff --git a/src/components/ProjectImportForm.tsx b/src/components/ProjectImportForm.tsx index 9fd11e7..cb36ceb 100644 --- a/src/components/ProjectImportForm.tsx +++ b/src/components/ProjectImportForm.tsx @@ -47,10 +47,10 @@ export const ProjectImportForm: FC = ({ const [importStatuses, setImportStatuses] = useState([]); const [importFileList, setImportFileList] = useState(); const currentTeam = useSelector( - (state: AppState) => state.team.currentTeam + (state: AppState) => state.team.currentTeam, ) as UserTeam; const currentProjectSet = useSelector( - (state: AppState) => state.projectSet.currentProjectSet + (state: AppState) => state.projectSet.currentProjectSet, ) as UserProjectSet; const handleImport = async () => { @@ -62,7 +62,7 @@ export const ProjectImportForm: FC = ({ setImportStatuses( produce((draft) => { draft[i] = `${file.name}：解压中...`; - }) + }), ); let project, labelplus; const zipReader = new zip.ZipReader(new zip.BlobReader(file)); @@ -82,7 +82,7 @@ export const ProjectImportForm: FC = ({ setImportStatuses( produce((draft) => { draft[i] = `${file.name}：创建项目...`; - }) + }), ); api .importProject({ @@ -105,7 +105,7 @@ export const ProjectImportForm: FC = ({ setImportStatuses( produce((draft) => { draft[i] = `${file.name}：上传 "${filename}" 中...`; - }) + }), ); const image = await writer.getData(); await api @@ -124,13 +124,13 @@ export const ProjectImportForm: FC = ({ setImportStatuses( produce((draft) => { draft[i] = `${file.name}：项目导入成功！`; - }) + }), ); dispatch( createProject({ project: toLowerCamelCase(result.data.project), unshift: true, - }) + }), ); dispatch(resetFilesState()); dispatch(resetProjectsState()); @@ -142,7 +142,7 @@ export const ProjectImportForm: FC = ({ setImportStatuses( produce((draft) => { draft[i] = `${file.name}：格式不正确`; - }) + }), ); } } @@ -182,7 +182,7 @@ export const ProjectImportForm: FC = ({ disabled={importing} onChange={(file) => { setImportFileList( - file.fileList.map((file) => file.originFileObj) + file.fileList.map((file) => file.originFileObj), ); }} > diff --git a/src/components/ProjectImportFromLabelplusStatus.tsx b/src/components/ProjectImportFromLabelplusStatus.tsx index 95ef1c6..4e67d0b 100644 --- a/src/components/ProjectImportFromLabelplusStatus.tsx +++ b/src/components/ProjectImportFromLabelplusStatus.tsx @@ -19,10 +19,9 @@ interface ProjectImportFromLabelplusStatusProps { /** * 导入进度 */ -export const ProjectImportFromLabelplusStatus: FC = ({ - project, - className, -}) => { +export const ProjectImportFromLabelplusStatus: FC< + ProjectImportFromLabelplusStatusProps +> = ({ project, className }) => { const { formatMessage } = useIntl(); // i18n const dispatch = useDispatch(); const delay = diff --git a/src/components/ProjectItem.tsx b/src/components/ProjectItem.tsx index 8891e36..ddc3ff0 100644 --- a/src/components/ProjectItem.tsx +++ b/src/components/ProjectItem.tsx @@ -60,14 +60,16 @@ export const ProjectItem: FC = ({ className={classNames('ProjectItem', className, { 'ProjectItem--hasBelong': from === 'user', 'ProjectItem--active': location.pathname.includes( - 'projects/' + project.id + 'projects/' + project.id, ), })} css={css` width: 100%; border-radius: ${style.borderRadiusBase}; overflow: hidden; - transition: box-shadow 100ms, border-color 100ms; + transition: + box-shadow 100ms, + border-color 100ms; border: 1px solid ${style.borderColorLight}; padding: 3px ${style.paddingBase - 5}px 0; &.ProjectItem--hasBelong { diff --git a/src/components/ProjectList.tsx b/src/components/ProjectList.tsx index d1e0711..9a9c009 100644 --- a/src/components/ProjectList.tsx +++ b/src/components/ProjectList.tsx @@ -49,24 +49,24 @@ export const ProjectList: FC = ({ // 当 from 为 team 时，才有 currentProjectSet 和 currentTeam const currentTeam = useSelector((state: AppState) => state.team.currentTeam); const currentProjectSet = useSelector( - (state: AppState) => state.projectSet.currentProjectSet + (state: AppState) => state.projectSet.currentProjectSet, ); const currentUser = useSelector((state: AppState) => state.user); const currentProject = useSelector( - (state: AppState) => state.project.currentProject + (state: AppState) => state.project.currentProject, ); const defaultPage = useSelector( - (state: AppState) => state.project.projectsState.page + (state: AppState) => state.project.projectsState.page, ); const defaultWord = useSelector( - (state: AppState) => state.project.projectsState.word + (state: AppState) => state.project.projectsState.word, ); const defaultScrollTop = useSelector( - (state: AppState) => state.project.projectsState.scrollTop + (state: AppState) => state.project.projectsState.scrollTop, ); const status = useSelector( - (state: AppState) => state.project.projectsState.status + (state: AppState) => state.project.projectsState.status, ); /** 获取元素 */ diff --git a/src/components/ProjectSetCreateForm.tsx b/src/components/ProjectSetCreateForm.tsx index 66e4c57..1f344ca 100644 --- a/src/components/ProjectSetCreateForm.tsx +++ b/src/components/ProjectSetCreateForm.tsx @@ -45,11 +45,11 @@ export const ProjectSetCreateForm: FC = ({ createProjectSet({ projectSet: toLowerCamelCase(result.data.project_set), unshift: true, - }) + }), ); // 跳转到项目集 history.replace( - `/dashboard/teams/${teamID}/project-sets/${result.data.project_set.id}` + `/dashboard/teams/${teamID}/project-sets/${result.data.project_set.id}`, ); // 弹出提示 message.success(result.data.message); diff --git a/src/components/ProjectSetEditForm.tsx b/src/components/ProjectSetEditForm.tsx index b390291..f2373ba 100644 --- a/src/components/ProjectSetEditForm.tsx +++ b/src/components/ProjectSetEditForm.tsx @@ -9,7 +9,7 @@ import { FC, UserProjectSet } from '../interfaces'; import { AppState } from '../store'; import { editProjectSet, - setCurrentProjectSet + setCurrentProjectSet, } from '../store/projectSet/slice'; import style from '../style'; import { toLowerCamelCase } from '../utils'; @@ -23,12 +23,14 @@ interface ProjectSetEditFormProps { * 从 redux 的 currentProjectSet 中读取值，使用前必须先 * dispatch(setCurrentProjectSet({ id })); */ -export const ProjectSetEditForm: FC = ({ className }) => { +export const ProjectSetEditForm: FC = ({ + className, +}) => { const { formatMessage } = useIntl(); // i18n const [form] = AntdForm.useForm(); const dispatch = useDispatch(); const currentProjectSet = useSelector( - (state: AppState) => state.projectSet.currentProjectSet + (state: AppState) => state.projectSet.currentProjectSet, ) as UserProjectSet; const [submitting, setSubmitting] = useState(false); diff --git a/src/components/ProjectSetList.tsx b/src/components/ProjectSetList.tsx index 4edd972..c1d334a 100644 --- a/src/components/ProjectSetList.tsx +++ b/src/components/ProjectSetList.tsx @@ -39,7 +39,7 @@ export const ProjectSetList: FC = ({ }) => { const { formatMessage } = useIntl(); const projectSets = useSelector( - (state: AppState) => state.projectSet.projectSets + (state: AppState) => state.projectSet.projectSets, ); const location = useLocation(); const history = useHistory(); @@ -48,17 +48,17 @@ export const ProjectSetList: FC = ({ const [loading, setLoading] = useState(true); const [total, setTotal] = useState(0); // 元素总个数 const currentTeam = useSelector( - (state: AppState) => state.team.currentTeam + (state: AppState) => state.team.currentTeam, ) as UserTeam; const defaultPage = useSelector( - (state: AppState) => state.projectSet.projectSetsState.page + (state: AppState) => state.projectSet.projectSetsState.page, ); const defaultWord = useSelector( - (state: AppState) => state.projectSet.projectSetsState.word + (state: AppState) => state.projectSet.projectSetsState.word, ); const defaultScrollTop = useSelector( - (state: AppState) => state.projectSet.projectSetsState.scrollTop + (state: AppState) => state.projectSet.projectSetsState.scrollTop, ); /** 获取元素 */ @@ -95,7 +95,7 @@ export const ProjectSetList: FC = ({ dispatch( createProjectSet({ projectSet: toLowerCamelCase(projectSet), - }) + }), ); } }) diff --git a/src/components/ProjectSettingBase.tsx b/src/components/ProjectSettingBase.tsx index 263d6f0..c428b47 100644 --- a/src/components/ProjectSettingBase.tsx +++ b/src/components/ProjectSettingBase.tsx @@ -50,10 +50,10 @@ export const ProjectSettingBase: FC = ({ const [adminJoining, setAdminJoining] = useState(false); const currentTeam = useSelector((state: AppState) => state.team.currentTeam); const currentProjectSet = useSelector( - (state: AppState) => state.projectSet.currentProjectSet + (state: AppState) => state.projectSet.currentProjectSet, ); const currentProject = useSelector( - (state: AppState) => state.project.currentProject + (state: AppState) => state.project.currentProject, ) as Project; const userID = useSelector((state: AppState) => state.user.id); const [permissionsVisible, setPermissionsVisible] = useState(false); @@ -104,7 +104,7 @@ export const ProjectSettingBase: FC = ({ !can(currentTeam, TEAM_PERMISSION.AUTO_BECOME_PROJECT_ADMIN) ) { history.replace( - `/dashboard/teams/${currentTeam.id}/project-sets/${currentProjectSet.id}` + `/dashboard/teams/${currentTeam.id}/project-sets/${currentProjectSet.id}`, ); } else { dispatch(setCurrentProject(data.group)); @@ -131,7 +131,7 @@ export const ProjectSettingBase: FC = ({ title:
{formatMessage({ id: 'project.finishTipTitle' })}
, content: formatMessage( { id: 'project.finishTip' }, - { project: currentProject.name } + { project: currentProject.name }, ), okText: formatMessage({ id: 'project.finish' }), cancelText: formatMessage({ id: 'form.cancel' }), @@ -186,7 +186,7 @@ export const ProjectSettingBase: FC = ({ {formatMessage( { id: 'site.myRoleIs' }, - { role: currentProject.role.name } + { role: currentProject.role.name }, )} {currentProject.autoBecomeProjectAdmin && formatMessage({ id: 'project.autoBecomeProjectAdmin' })} diff --git a/src/components/ProjectSettingTarget.tsx b/src/components/ProjectSettingTarget.tsx index 8c428af..8f086c7 100644 --- a/src/components/ProjectSettingTarget.tsx +++ b/src/components/ProjectSettingTarget.tsx @@ -39,7 +39,7 @@ export const ProjectSettingTarget: FC = ({ const [items, setItems] = useState([]); // 元素 const dispatch = useDispatch(); const currentProject = useSelector( - (state: AppState) => state.project.currentProject + (state: AppState) => state.project.currentProject, ) as Project; const [spinningIDs, setSpinningIDs] = useState([]); // 删除请求中 @@ -104,7 +104,7 @@ export const ProjectSettingTarget: FC = ({ increaseCurrentProjectTargetCount({ id: currentProject.id, step: -1, - }) + }), ); setSpinningIDs((ids) => ids.filter((id) => id !== target.id)); setItems((items) => { @@ -135,7 +135,7 @@ export const ProjectSettingTarget: FC = ({ .then((result) => { const data = toLowerCamelCase(result.data); dispatch( - increaseCurrentProjectTargetCount({ id: currentProject.id, step: 1 }) + increaseCurrentProjectTargetCount({ id: currentProject.id, step: 1 }), ); setCreating(false); setCreateLanguageID(undefined); diff --git a/src/components/TabBarM.tsx b/src/components/TabBarM.tsx index 60e0463..5f44639 100644 --- a/src/components/TabBarM.tsx +++ b/src/components/TabBarM.tsx @@ -21,10 +21,10 @@ export const TabBarM: FC = ({ className }) => { const history = useHistory(); // 路由 const location = useLocation(); const newInvitationsCount = useSelector( - (state: AppState) => state.site.newInvitationsCount + (state: AppState) => state.site.newInvitationsCount, ); const relatedApplicationsCount = useSelector( - (state: AppState) => state.site.relatedApplicationsCount + (state: AppState) => state.site.relatedApplicationsCount, ); const checkActive = ({ diff --git a/src/components/TeamCreateForm.tsx b/src/components/TeamCreateForm.tsx index 8c66e9c..9f37ba2 100644 --- a/src/components/TeamCreateForm.tsx +++ b/src/components/TeamCreateForm.tsx @@ -39,7 +39,7 @@ export const TeamCreateForm: FC = ({ className }) => { createTeam({ team: toLowerCamelCase(result.data.team), unshift: true, - }) + }), ); dispatch(resetProjectSetsState()); // 跳转到团队 @@ -72,7 +72,7 @@ export const TeamCreateForm: FC = ({ className }) => { // 关闭加入时，隐藏加入选项 if (values.allowApplyType) { setIsAllowApply( - values.allowApplyType !== GROUP_ALLOW_APPLY_TYPE.NONE + values.allowApplyType !== GROUP_ALLOW_APPLY_TYPE.NONE, ); } }} diff --git a/src/components/TeamEditForm.tsx b/src/components/TeamEditForm.tsx index e0117fb..1af4111 100644 --- a/src/components/TeamEditForm.tsx +++ b/src/components/TeamEditForm.tsx @@ -27,11 +27,11 @@ export const TeamEditForm: FC = ({ className }) => { const [form] = AntdForm.useForm(); const dispatch = useDispatch(); const currentTeam = useSelector( - (state: AppState) => state.team.currentTeam + (state: AppState) => state.team.currentTeam, ) as UserTeam; const [submitting, setSubmitting] = useState(false); const [isAllowApply, setIsAllowApply] = useState( - currentTeam.allowApplyType !== GROUP_ALLOW_APPLY_TYPE.NONE + currentTeam.allowApplyType !== GROUP_ALLOW_APPLY_TYPE.NONE, ); // id 改变时，获取初始值 @@ -77,7 +77,7 @@ export const TeamEditForm: FC = ({ className }) => { // 关闭加入时，隐藏加入选项 if (values.allowApplyType) { setIsAllowApply( - values.allowApplyType !== GROUP_ALLOW_APPLY_TYPE.NONE + values.allowApplyType !== GROUP_ALLOW_APPLY_TYPE.NONE, ); } }} diff --git a/src/components/TeamInsightProjectList.tsx b/src/components/TeamInsightProjectList.tsx index 8ecddb2..2823c77 100644 --- a/src/components/TeamInsightProjectList.tsx +++ b/src/components/TeamInsightProjectList.tsx @@ -132,7 +132,7 @@ export const TeamInsightProjectList: FC = ({ setItems( produce((draft) => { draft[index].usersLoading = true; - }) + }), ); apis .getTeamInsightProjectUsers({ @@ -151,7 +151,7 @@ export const TeamInsightProjectList: FC = ({ } else { draft[index].users.push(...data); } - }) + }), ); }); }; @@ -294,7 +294,7 @@ export const TeamInsightProjectList: FC = ({ {formatMessage( { id: 'insight.moreProject' }, - { count: record.count - record.users.length } + { count: record.count - record.users.length }, )}
{location.pathname === url && isMobile && ( diff --git a/src/pages/Project.tsx b/src/pages/Project.tsx index bc9a71f..bad4fec 100644 --- a/src/pages/Project.tsx +++ b/src/pages/Project.tsx @@ -24,10 +24,10 @@ const Project: FC = () => { const { path } = useRouteMatch(); const currentTeam = useSelector((state: AppState) => state.team.currentTeam); const currentProjectSet = useSelector( - (state: AppState) => state.projectSet.currentProjectSet + (state: AppState) => state.projectSet.currentProjectSet, ); const currentProject = useSelector( - (state: AppState) => state.project.currentProject + (state: AppState) => state.project.currentProject, ); // 设置当前目标 project diff --git a/src/pages/ProjectFiles.tsx b/src/pages/ProjectFiles.tsx index c042d6c..faabf0e 100644 --- a/src/pages/ProjectFiles.tsx +++ b/src/pages/ProjectFiles.tsx @@ -110,7 +110,7 @@ const ProjectFiles: FC = ({ project }) => { }); if (defaultTargetID) { const target = targets.find( - (target) => target.id === defaultTargetID + (target) => target.id === defaultTargetID, ); if (target) { setCurrentTarget(target); @@ -131,7 +131,7 @@ const ProjectFiles: FC = ({ project }) => { } else { message.info( formatMessage({ id: 'project.onlyOneTargetTip' }), - 1 + 1, ); } }} diff --git a/src/pages/ProjectPreview.tsx b/src/pages/ProjectPreview.tsx index 38bea47..50668e7 100644 --- a/src/pages/ProjectPreview.tsx +++ b/src/pages/ProjectPreview.tsx @@ -119,7 +119,7 @@ const ProjectPreview: FC = ({ dispatch(editProject(data.group)); // 跳转到项目 history.replace( - `/dashboard/teams/${team.id}/project-sets/${projectSet.id}/projects/${data.group.id}` + `/dashboard/teams/${team.id}/project-sets/${projectSet.id}/projects/${data.group.id}`, ); } }) @@ -215,7 +215,9 @@ const ProjectPreview: FC = ({ height: ${coverHeight}px; overflow: hidden; border-radius: ${style.borderRadiusBase}; - transition: box-shadow 100ms, border-color 100ms; + transition: + box-shadow 100ms, + border-color 100ms; border: 1px solid ${style.borderColorLight}; .ProjectPreview__PreviewListImage { width: ${coverWidth}px; @@ -238,7 +240,7 @@ const ProjectPreview: FC = ({ transform: scale(1.08); transition: transform 100ms; } - ` + `, )}; } .ProjectPreview__PreviewListImageWrapper--active { @@ -278,7 +280,7 @@ const ProjectPreview: FC = ({
{formatMessage( { id: 'project.notAllowApplyTip' }, - { project: project.name } + { project: project.name }, )}
@@ -287,7 +289,7 @@ const ProjectPreview: FC = ({
{formatMessage( { id: 'application.reasonLabel' }, - { name: project.name } + { name: project.name }, )}
@@ -314,7 +316,7 @@ const ProjectPreview: FC = ({
{formatMessage( { id: 'project.applyConfirm' }, - { project: project.name } + { project: project.name }, )}
@@ -341,7 +343,7 @@ const ProjectPreview: FC = ({ { 'ProjectPreview__PreviewListImageWrapper--active': item.id === currentImage?.id, - } + }, )} key={item.id} onClick={() => { diff --git a/src/pages/ProjectSet.tsx b/src/pages/ProjectSet.tsx index 149b750..4adf9b0 100644 --- a/src/pages/ProjectSet.tsx +++ b/src/pages/ProjectSet.tsx @@ -46,7 +46,7 @@ const ProjectSet: FC = () => { const { projectSetID } = useParams() as { projectSetID: string }; const { path, url } = useRouteMatch(); const currentProjectSet = useSelector( - (state: AppState) => state.projectSet.currentProjectSet + (state: AppState) => state.projectSet.currentProjectSet, ); const currentTeam = useSelector((state: AppState) => state.team.currentTeam); diff --git a/src/pages/ProjectSetSetting.tsx b/src/pages/ProjectSetSetting.tsx index db36b58..bb8d54d 100644 --- a/src/pages/ProjectSetSetting.tsx +++ b/src/pages/ProjectSetSetting.tsx @@ -34,7 +34,7 @@ const ProjectSetSetting: FC = () => { const { path, url } = useRouteMatch(); const platform = useSelector((state: AppState) => state.site.platform); const currentProjectSet = useSelector( - (state: AppState) => state.projectSet.currentProjectSet + (state: AppState) => state.projectSet.currentProjectSet, ); const isMobile = platform === 'mobile'; diff --git a/src/pages/ProjectSetting.tsx b/src/pages/ProjectSetting.tsx index b30c9a9..e0fabc3 100644 --- a/src/pages/ProjectSetting.tsx +++ b/src/pages/ProjectSetting.tsx @@ -34,7 +34,7 @@ const ProjectSetting: FC = ({ project }) => { const { path, url } = useRouteMatch(); const platform = useSelector((state: AppState) => state.site.platform); const currentProject = useSelector( - (state: AppState) => state.project.currentProject + (state: AppState) => state.project.currentProject, ); const isMobile = platform === 'mobile'; diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx index 9d5b4cc..23f935b 100644 --- a/src/pages/Register.tsx +++ b/src/pages/Register.tsx @@ -49,7 +49,7 @@ const Register: FC = () => { cancelText: formatMessage({ id: 'form.cancel' }), onOk: () => { dispatch( - setUserToken({ token: result.data.token, rememberMe: true }) + setUserToken({ token: result.data.token, rememberMe: true }), ); // 跳转到仪表盘 history.push('/dashboard/projects'); diff --git a/src/pages/ResetPassword.tsx b/src/pages/ResetPassword.tsx index 6635686..e50d7da 100644 --- a/src/pages/ResetPassword.tsx +++ b/src/pages/ResetPassword.tsx @@ -48,7 +48,7 @@ const ResetPassword: FC = () => { cancelText: formatMessage({ id: 'form.cancel' }), onOk: () => { dispatch( - setUserToken({ token: result.data.token, rememberMe: true }) + setUserToken({ token: result.data.token, rememberMe: true }), ); // 跳转到仪表盘 history.push('/dashboard/projects'); diff --git a/src/store/file/slice.ts b/src/store/file/slice.ts index f80b658..9e0f41a 100644 --- a/src/store/file/slice.ts +++ b/src/store/file/slice.ts @@ -14,7 +14,7 @@ export const initialState: FileState = { page: 1, word: '', scrollTop: 0, - selectedFileIds: [] + selectedFileIds: [], }, }; diff --git a/src/store/hotKey/slice.ts b/src/store/hotKey/slice.ts index 0a1c5a7..a8eac54 100644 --- a/src/store/hotKey/slice.ts +++ b/src/store/hotKey/slice.ts @@ -74,7 +74,7 @@ const slice = createSlice({ name: keyof HotKeyState; index: number; option?: HotKeyOption; - }> + }>, ) { const { name, index, option } = action.payload; state[name][index] = option; diff --git a/src/store/project/sagas.ts b/src/store/project/sagas.ts index aee4633..e563db5 100644 --- a/src/store/project/sagas.ts +++ b/src/store/project/sagas.ts @@ -12,13 +12,13 @@ import { Project } from '../../interfaces'; // worker Sage function* setCurrentProjectWorker( - action: ReturnType + action: ReturnType, ) { // 清空当前 project yield put(clearCurrentProject()); const projects = yield select((state: AppState) => state.project.projects); const project = projects.find( - (project: Project) => project.id === action.payload.id + (project: Project) => project.id === action.payload.id, ); if (project) { // 已存在与 projects 中，则直接获取 diff --git a/src/store/project/slice.ts b/src/store/project/slice.ts index 69b584b..0dc7653 100644 --- a/src/store/project/slice.ts +++ b/src/store/project/slice.ts @@ -32,7 +32,7 @@ const slice = createSlice({ }, createProject( state, - action: PayloadAction<{ project: Project; unshift?: boolean }> + action: PayloadAction<{ project: Project; unshift?: boolean }>, ) { const { project, unshift = false } = action.payload; if (unshift) { @@ -43,7 +43,7 @@ const slice = createSlice({ }, editProject(state, action: PayloadAction) { const index = state.projects.findIndex( - (project) => project.id === action.payload.id + (project) => project.id === action.payload.id, ); if (index > -1) { state.projects[index] = action.payload; @@ -51,7 +51,7 @@ const slice = createSlice({ }, deleteProject(state, action: PayloadAction<{ id: string }>) { const index = state.projects.findIndex( - (project) => project.id === action.payload.id + (project) => project.id === action.payload.id, ); if (index > -1) { state.projects.splice(index, 1); @@ -69,14 +69,14 @@ const slice = createSlice({ }, increaseCurrentProjectTargetCount( state, - action: PayloadAction<{ id: string; step: number }> + action: PayloadAction<{ id: string; step: number }>, ) { if (state.currentProject) { state.currentProject.targetCount += action.payload.step; } // 同时也修改列表中的项目 const index = state.projects.findIndex( - (project) => project.id === action.payload.id + (project) => project.id === action.payload.id, ); if (index > -1) { state.projects[index].targetCount += action.payload.step; diff --git a/src/store/projectSet/sagas.ts b/src/store/projectSet/sagas.ts index 67bc352..7b9d511 100644 --- a/src/store/projectSet/sagas.ts +++ b/src/store/projectSet/sagas.ts @@ -12,15 +12,15 @@ import { UserProjectSet } from '../../interfaces'; // worker Sage function* setCurrentProjectSetWorker( - action: ReturnType + action: ReturnType, ) { // 清空当前 projectSet yield put(clearCurrentProjectSet()); const projectSets = yield select( - (state: AppState) => state.projectSet.projectSets + (state: AppState) => state.projectSet.projectSets, ); const projectSet = projectSets.find( - (projectSet: UserProjectSet) => projectSet.id === action.payload.id + (projectSet: UserProjectSet) => projectSet.id === action.payload.id, ); if (projectSet) { // 已存在与 projectSets 中，则直接获取 diff --git a/src/store/projectSet/slice.ts b/src/store/projectSet/slice.ts index 3414bc0..cea8d49 100644 --- a/src/store/projectSet/slice.ts +++ b/src/store/projectSet/slice.ts @@ -29,7 +29,7 @@ const slice = createSlice({ }, createProjectSet( state, - action: PayloadAction<{ projectSet: UserProjectSet; unshift?: boolean }> + action: PayloadAction<{ projectSet: UserProjectSet; unshift?: boolean }>, ) { const { projectSet, unshift = false } = action.payload; if (unshift) { @@ -45,7 +45,7 @@ const slice = createSlice({ }, editProjectSet(state, action: PayloadAction) { const index = state.projectSets.findIndex( - (projectSet) => projectSet.id === action.payload.id + (projectSet) => projectSet.id === action.payload.id, ); if (index > -1) { state.projectSets[index] = action.payload; @@ -53,7 +53,7 @@ const slice = createSlice({ }, deleteProjectSet(state, action: PayloadAction<{ id: string }>) { const index = state.projectSets.findIndex( - (projectSet) => projectSet.id === action.payload.id + (projectSet) => projectSet.id === action.payload.id, ); if (index > -1) { state.projectSets.splice(index, 1); @@ -71,7 +71,7 @@ const slice = createSlice({ }, setProjectSetsState( state, - action: PayloadAction> + action: PayloadAction>, ) { state.projectSetsState = { ...state.projectSetsState, ...action.payload }; }, diff --git a/src/store/source/sagas.ts b/src/store/source/sagas.ts index 50f06dd..9bb17b7 100644 --- a/src/store/source/sagas.ts +++ b/src/store/source/sagas.ts @@ -95,14 +95,14 @@ function* createSourceWorker(action: ReturnType) { positionType: action.payload.positionType, hasOtherLanguageTranslation: false, tips: [], - }) + }), ); yield put( focusSource({ id: tempID, effects: [], noises: [], - }) + }), ); const [cancelToken, cancel] = getCancelToken(); const { fileID, ...requestData } = action.payload; @@ -121,10 +121,10 @@ function* createSourceWorker(action: ReturnType) { labelStatus: 'pending', isTemp: false, focus: false, - }) + }), ); const focusedSourceID = yield select( - (state: AppState) => state.source.focusedSource.id + (state: AppState) => state.source.focusedSource.id, ); if (focusedSourceID === tempID) { yield put( @@ -132,7 +132,7 @@ function* createSourceWorker(action: ReturnType) { id: data.id, effects: ['focusInput', 'scrollIntoView'], noises: ['focusInput'], - }) + }), ); } } catch (error) { @@ -150,14 +150,14 @@ function* editSourceWorker(action: ReturnType) { editSource({ id: action.payload.id, labelStatus: 'saving', - }) + }), ); if (action.payload.positionType !== undefined) { yield put( editSource({ id: action.payload.id, positionType: action.payload.positionType, - }) + }), ); } const [cancelToken, cancel] = getCancelToken(); @@ -172,7 +172,7 @@ function* editSourceWorker(action: ReturnType) { editSource({ ...data, labelStatus: 'pending', - }) + }), ); } catch (error) { if ( @@ -185,7 +185,7 @@ function* editSourceWorker(action: ReturnType) { editSource({ id: action.payload.id, labelStatus: 'pending', - }) + }), ); // 还原标签位置 action.payload.reset?.(); @@ -198,7 +198,7 @@ function* editSourceWorker(action: ReturnType) { action.payload.positionType === SOURCE_POSITION_TYPE.IN ? SOURCE_POSITION_TYPE.OUT : SOURCE_POSITION_TYPE.IN, - }) + }), ); } } @@ -212,7 +212,7 @@ function* editSourceWorker(action: ReturnType) { function* deleteSourceWorker(action: ReturnType) { const source: Source = yield select((state: AppState) => - state.source.sources.find((source) => source.id === action.payload.id) + state.source.sources.find((source) => source.id === action.payload.id), ); if ( source.myTranslation || @@ -241,7 +241,7 @@ function* deleteSourceWorker(action: ReturnType) { editSource({ id: action.payload.id, labelStatus: 'deleting', - }) + }), ); const [cancelToken, cancel] = getCancelToken(); try { @@ -270,7 +270,7 @@ function* deleteSourceWorker(action: ReturnType) { editSource({ id: action.payload.id, labelStatus: 'pending', - }) + }), ); } } @@ -278,7 +278,7 @@ function* deleteSourceWorker(action: ReturnType) { // 翻译部分 function* editMyTranslationWorker( - action: ReturnType + action: ReturnType, ) { const { sourceID, content, targetID, focus = false } = action.payload; @@ -287,7 +287,7 @@ function* editMyTranslationWorker( sourceID, content, editTime: new Date().toISOString(), - }) + }), ); if (!action.payload.noDebounce) { @@ -295,7 +295,7 @@ function* editMyTranslationWorker( editSource({ id: sourceID, myTranslationContentStatus: 'debouncing', - }) + }), ); yield delay(inputDebounceDelay); } @@ -306,7 +306,7 @@ function* editMyTranslationWorker( editSource({ id: sourceID, myTranslationContentStatus: 'saving', - }) + }), ); const result = yield apis.createTranslation({ sourceID: sourceID, @@ -322,11 +322,11 @@ function* editMyTranslationWorker( id: sourceID, myTranslation: data ? data : undefined, myTranslationContentStatus: 'saveSuccessful', - }) + }), ); if (focus) { const focusedSourceID = yield select( - (state: AppState) => state.source.focusedSource.id + (state: AppState) => state.source.focusedSource.id, ); if (focusedSourceID === sourceID) { yield put(focusTranslation({ id: data ? data.id : '' })); @@ -335,7 +335,7 @@ function* editMyTranslationWorker( } catch (error) { error.default(); yield put( - editSource({ id: sourceID, myTranslationContentStatus: 'saveFailed' }) + editSource({ id: sourceID, myTranslationContentStatus: 'saveFailed' }), ); } finally { if (yield cancelled()) { @@ -345,7 +345,7 @@ function* editMyTranslationWorker( } function* batchSelectTranslationWorker( - action: ReturnType + action: ReturnType, ) { const { fileID, data } = action.payload; const [cancelToken, cancel] = getCancelToken(); @@ -360,7 +360,7 @@ function* batchSelectTranslationWorker( }); // 将所有 sources 修改成 selected const currentUser: UserState = yield select( - (state: AppState) => state.user + (state: AppState) => state.user, ); for (const { sourceID, translationID } of data) { yield put( @@ -369,7 +369,7 @@ function* batchSelectTranslationWorker( translationID, selected: true, selector: currentUser, - }) + }), ); } } catch (error) { @@ -383,7 +383,7 @@ function* batchSelectTranslationWorker( } function* selectTranslationWorker( - action: ReturnType + action: ReturnType, ) { const { sourceID, translationID, selected } = action.payload; const [cancelToken, cancel] = getCancelToken(); @@ -405,7 +405,7 @@ function* selectTranslationWorker( translationID, selected, selector: data.selector, - }) + }), ); } catch (error) { error.default(); @@ -428,7 +428,7 @@ function* editProofreadWorker(action: ReturnType) { proofreadContent, proofreader: currentUser, editTime: new Date().toISOString(), - }) + }), ); if (!action.payload.noDebounce) { @@ -437,7 +437,7 @@ function* editProofreadWorker(action: ReturnType) { sourceID, translationID, status: 'debouncing', - }) + }), ); yield delay(inputDebounceDelay); } @@ -449,7 +449,7 @@ function* editProofreadWorker(action: ReturnType) { sourceID, translationID, status: 'saving', - }) + }), ); const result = yield apis.editTranslation({ translationID, @@ -466,7 +466,7 @@ function* editProofreadWorker(action: ReturnType) { sourceID, translationID, status: 'saveSuccessful', - }) + }), ); if (data) { yield put( @@ -476,7 +476,7 @@ function* editProofreadWorker(action: ReturnType) { proofreadContent: data.proofreadContent, proofreader: data.proofreader, editTime: data.editTime, - }) + }), ); } else { yield put(focusTranslation({ id: '' })); @@ -484,7 +484,7 @@ function* editProofreadWorker(action: ReturnType) { deleteTranslation({ sourceID, translationID, - }) + }), ); } } catch (error) { @@ -494,7 +494,7 @@ function* editProofreadWorker(action: ReturnType) { sourceID, translationID, status: 'saveFailed', - }) + }), ); } finally { if (yield cancelled()) { @@ -512,12 +512,12 @@ function* watcher() { editSourceWorker, (action: ReturnType) => { return action.payload.id; - } + }, ); yield takeEvery(deleteSourceSaga.type, deleteSourceWorker); yield takeLeading( batchSelectTranslationSaga.type, - batchSelectTranslationWorker + batchSelectTranslationWorker, ); // 翻译部分 yield takeLatestPerKey( @@ -525,21 +525,21 @@ function* watcher() { editMyTranslationWorker, (action: ReturnType) => { return action.payload.sourceID + action.payload.targetID; - } + }, ); yield takeLatestPerKey( selectTranslationSaga.type, selectTranslationWorker, (action: ReturnType) => { return action.payload.sourceID; - } + }, ); yield takeLatestPerKey( editProofreadSaga.type, editProofreadWorker, (action: ReturnType) => { return action.payload.translationID; - } + }, ); } diff --git a/src/store/source/slice.ts b/src/store/source/slice.ts index 8c31109..3802cac 100644 --- a/src/store/source/slice.ts +++ b/src/store/source/slice.ts @@ -53,7 +53,7 @@ const slice = createSlice({ reducers: { fetchSourcesSaga( state, - action: PayloadAction<{ fileID: string; targetID: string }> + action: PayloadAction<{ fileID: string; targetID: string }>, ) {}, setSavingStatus(state, action: PayloadAction) { state.savingStatus = action.payload; @@ -74,7 +74,7 @@ const slice = createSlice({ x: number; y: number; positionType: number; - }> + }>, ) {}, createSource(state, action: PayloadAction) { state.sources.push(action.payload); @@ -87,14 +87,14 @@ const slice = createSlice({ y?: number; positionType?: number; reset?: () => void; - }> + }>, ) {}, editSource( state, - action: PayloadAction & { id: string; newID?: string }> + action: PayloadAction & { id: string; newID?: string }>, ) { const index = state.sources.findIndex( - (source) => source.id === action.payload.id + (source) => source.id === action.payload.id, ); if (index > -1) { const { newID, ...newSource } = action.payload; @@ -113,10 +113,10 @@ const slice = createSlice({ sourceID: string; content: string; editTime: string; - }> + }>, ) { const index = state.sources.findIndex( - (source) => source.id === action.payload.sourceID + (source) => source.id === action.payload.sourceID, ); if (index > -1) { if (state.sources[index].myTranslation) { @@ -145,7 +145,7 @@ const slice = createSlice({ deleteSourceSaga(state, action: PayloadAction<{ id: string }>) {}, deleteSource(state, action: PayloadAction<{ id: string }>) { const index = state.sources.findIndex( - (source) => source.id === action.payload.id + (source) => source.id === action.payload.id, ); if (index > -1) { state.sources.splice(index, 1); @@ -157,7 +157,7 @@ const slice = createSlice({ id: string; effects: FocusEffect[]; noises: FocusEffect[]; - }> + }>, ) { const { id, effects, noises = [] } = action.payload; const timestamp = new Date().getTime().toString(); @@ -178,14 +178,14 @@ const slice = createSlice({ // 翻译部分 editMyTranslationSaga( state, - action: PayloadAction + action: PayloadAction, ) {}, batchSelectTranslationSaga( state, action: PayloadAction<{ fileID: string; data: BatchSelectTranslationData; - }> + }>, ) {}, selectTranslationSaga( state, @@ -193,7 +193,7 @@ const slice = createSlice({ sourceID: string; translationID: string; selected: boolean; - }> + }>, ) {}, selectTranslation( state, @@ -202,7 +202,7 @@ const slice = createSlice({ translationID: string; selected: boolean; selector: User | null; - }> + }>, ) { const { sourceID, translationID, selected, selector } = action.payload; const index = state.sources.findIndex((source) => source.id === sourceID); @@ -233,7 +233,7 @@ const slice = createSlice({ action: PayloadAction<{ sourceID: string; translationID: string; - }> + }>, ) { const { sourceID, translationID } = action.payload; const index = state.sources.findIndex((source) => source.id === sourceID); @@ -243,7 +243,7 @@ const slice = createSlice({ source.myTranslation = undefined; } else { source.translations = source.translations.filter( - (t) => t.id !== translationID + (t) => t.id !== translationID, ); } } @@ -257,7 +257,7 @@ const slice = createSlice({ proofreadContent: string; proofreader: User | null; editTime: string; - }> + }>, ) { const { sourceID, @@ -274,7 +274,7 @@ const slice = createSlice({ translations.push(source.myTranslation); } const translationIndex = translations.findIndex( - (translation) => translation.id === translationID + (translation) => translation.id === translationID, ); translations[translationIndex].proofreadContent = proofreadContent; translations[translationIndex].proofreader = proofreader; @@ -287,7 +287,7 @@ const slice = createSlice({ sourceID: string; translationID: string; status: InputDebounceStatus | undefined; - }> + }>, ) { const { sourceID, translationID, status } = action.payload; const index = state.sources.findIndex((source) => source.id === sourceID); diff --git a/src/store/team/slice.ts b/src/store/team/slice.ts index 3875a1e..4614b7b 100644 --- a/src/store/team/slice.ts +++ b/src/store/team/slice.ts @@ -29,7 +29,7 @@ const slice = createSlice({ }, createTeam( state, - action: PayloadAction<{ team: UserTeam; unshift?: boolean }> + action: PayloadAction<{ team: UserTeam; unshift?: boolean }>, ) { const { team, unshift = false } = action.payload; if (unshift) { @@ -40,7 +40,7 @@ const slice = createSlice({ }, editTeam(state, action: PayloadAction) { const index = state.teams.findIndex( - (team) => team.id === action.payload.id + (team) => team.id === action.payload.id, ); if (index > -1) { state.teams[index] = action.payload; @@ -48,7 +48,7 @@ const slice = createSlice({ }, deleteTeam(state, action: PayloadAction<{ id: string }>) { const index = state.teams.findIndex( - (team) => team.id === action.payload.id + (team) => team.id === action.payload.id, ); if (index > -1) { state.teams.splice(index, 1); @@ -68,7 +68,7 @@ const slice = createSlice({ state.currentTeam[key] = action.payload[key] as never; } const teamInList = state.teams.find( - (team) => team.id === state.currentTeam?.id + (team) => team.id === state.currentTeam?.id, ); if (teamInList) { let key: keyof typeof action.payload; diff --git a/src/store/translation/slice.ts b/src/store/translation/slice.ts index a947d44..62bdff4 100644 --- a/src/store/translation/slice.ts +++ b/src/store/translation/slice.ts @@ -20,7 +20,7 @@ const slice = createSlice({ state, action: PayloadAction<{ id: string; - }> + }>, ) { state.focusedTranslation.id = action.payload.id; }, diff --git a/src/store/user/slice.ts b/src/store/user/slice.ts index c648e0a..065380a 100644 --- a/src/store/user/slice.ts +++ b/src/store/user/slice.ts @@ -53,7 +53,7 @@ const slice = createSlice({ rememberMe?: boolean; refresh?: boolean; } - > + >, ) { state.token = action.payload.token; // 之后会触发 saga 获取用户详情 diff --git a/src/utils/index.ts b/src/utils/index.ts index 0d89b85..089672c 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,4 +1,4 @@ -import {isArray, isPlainObject} from 'lodash-es' +import { isArray, isPlainObject } from 'lodash-es'; // 用于转换 JavaScript 中常用的大写简写 const abbrs = [ @@ -42,7 +42,7 @@ function stringToUnderScoreCase(value: string) { function toUnderScoreCase(value: string): string; function toUnderScoreCase(value: T): T; function toUnderScoreCase( - value: string | { [propNames: string]: any | any[] } + value: string | { [propNames: string]: any | any[] }, ) { if (typeof value === 'string') { return stringToUnderScoreCase(value); @@ -57,8 +57,8 @@ function toUnderScoreCase( } else if (isArray(value[key])) { // 递归处理所以子数组 newValue[stringToUnderScoreCase(key)] = value[key].map((v: any) => { - if (isPlainObject(v)) return toUnderScoreCase(v) - else return v + if (isPlainObject(v)) return toUnderScoreCase(v); + else return v; }); } else { newValue[stringToUnderScoreCase(key)] = value[key]; @@ -86,7 +86,7 @@ function stringToLowerCamelCase(value: string) { function toLowerCamelCase(value: string): string; function toLowerCamelCase(value: T): T; function toLowerCamelCase( - value: string | { [propNames: string]: any } | any[] + value: string | { [propNames: string]: any } | any[], ) { if (typeof value === 'string') { return stringToLowerCamelCase(value); @@ -101,7 +101,7 @@ function toLowerCamelCase( } else if (isArray(value[key])) { // 递归处理所以子数组 newValue[stringToLowerCamelCase(key)] = value[key].map((v: any) => - toLowerCamelCase(v) + toLowerCamelCase(v), ); } else { newValue[stringToLowerCamelCase(key)] = value[key]; diff --git a/src/utils/regex.ts b/src/utils/regex.ts index 7fb84e2..cc6add0 100644 --- a/src/utils/regex.ts +++ b/src/utils/regex.ts @@ -1,4 +1,6 @@ -export const USER_NAME_REGEX = /^[\u2E80-\u2FDF\u3040-\u318F\u31A0-\u31BF\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FFF\uA960-\uA97F\uAC00-\uD7FFa-zA-Z0-9_]+$/; -export const TEAM_NAME_REGEX = /^[\u2E80-\u2FDF\u3040-\u318F\u31A0-\u31BF\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FFF\uA960-\uA97F\uAC00-\uD7FFa-zA-Z0-9_]+$/; +export const USER_NAME_REGEX = + /^[\u2E80-\u2FDF\u3040-\u318F\u31A0-\u31BF\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FFF\uA960-\uA97F\uAC00-\uD7FFa-zA-Z0-9_]+$/; +export const TEAM_NAME_REGEX = + /^[\u2E80-\u2FDF\u3040-\u318F\u31A0-\u31BF\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FFF\uA960-\uA97F\uAC00-\uD7FFa-zA-Z0-9_]+$/; export const ID_REGEX = /^[a-f\d]{24}$/i; export const EMAIL_REGEX = /^[^@ ]+@[^.@ ]+(\.[^.@ ]+)*(\.[^.@ ]{2,})$/; diff --git a/src/utils/source.ts b/src/utils/source.ts index 203e470..e5199f3 100644 --- a/src/utils/source.ts +++ b/src/utils/source.ts @@ -5,18 +5,18 @@ import { SourceTranslationState } from '../interfaces'; import { Translation } from '../interfaces/translation'; export const isValidTranslation = ( - translation: Translation | undefined + translation: Translation | undefined, ): boolean => { if (!translation) { return false; } return Boolean( - translation.content || translation.proofreadContent || translation.selected + translation.content || translation.proofreadContent || translation.selected, ); }; export const filterValidTranslations = ( - translations: (Translation | undefined)[] + translations: (Translation | undefined)[], ): Translation[] => { return translations.filter(isValidTranslation) as Translation[]; }; @@ -35,7 +35,7 @@ export const getSortedTranslations = (source: APISource): APITranslation[] => { }); // 将已选中的翻译放在第一个 const selectedTranslationIndex = translations.findIndex( - (translation) => translation.selected + (translation) => translation.selected, ); const hasSelectedTranslation = selectedTranslationIndex > -1; if (hasSelectedTranslation) { @@ -47,13 +47,13 @@ export const getSortedTranslations = (source: APISource): APITranslation[] => { }; export const getBestTranslation = ( - source: APISource + source: APISource, ): APITranslation | undefined => { return getSortedTranslations(source)[0]; }; export const checkTranslationState = ( - source: APISource + source: APISource, ): SourceTranslationState => { const translations = [...source.translations]; if (source.myTranslation) { diff --git a/src/utils/storage.ts b/src/utils/storage.ts index b4bcf3e..3262836 100644 --- a/src/utils/storage.ts +++ b/src/utils/storage.ts @@ -13,7 +13,7 @@ export const saveDefaultTargetID = ({ }: DefaultTarget): void => { let defaultTargets: DefaultTarget[] = store.get('defaultTargets', []); defaultTargets = defaultTargets.filter( - (item) => item.projectID !== projectID + (item) => item.projectID !== projectID, ); defaultTargets.push({ projectID, targetID }); store.set('defaultTargets', defaultTargets.slice(-50)); @@ -26,7 +26,7 @@ export const loadDefaultTargetID = ({ }): string | undefined => { const defaultTargets: DefaultTarget[] = store.get('defaultTargets', []); const defaultTarget = defaultTargets.find( - (item) => item.projectID === projectID + (item) => item.projectID === projectID, ); return defaultTarget?.targetID; }; @@ -39,7 +39,7 @@ export const clearDefaultTargetID = ({ const defaultTargets: DefaultTarget[] = store.get('defaultTargets', []); store.set( 'defaultTargets', - defaultTargets.filter((item) => item.projectID !== projectID) + defaultTargets.filter((item) => item.projectID !== projectID), ); }; @@ -56,7 +56,7 @@ export const saveHotKey = ({ }): void => { const options: HotKeyStroage[] = store.get( `${hotKeyStoragePrefix}${name}`, - [] + [], ); options[index] = option ? option : 'disibled'; store.set(`${hotKeyStoragePrefix}${name}`, options); @@ -71,7 +71,7 @@ export const loadHotKey = ({ }): HotKeyStroage => { const options: HotKeyStroage[] = store.get( `${hotKeyStoragePrefix}${name}`, - [] + [], ); return options[index] ? options[index] : null; }; diff --git a/src/utils/style.ts b/src/utils/style.ts index 585de3e..f228812 100644 --- a/src/utils/style.ts +++ b/src/utils/style.ts @@ -15,13 +15,13 @@ export const hover = (hover: SerializedStyles | string) => { interface ClickEffect { ( hover?: SerializedStyles | string, - active?: SerializedStyles | string + active?: SerializedStyles | string, ): SerializedStyles; } /** 对手机友好的点击效果 */ export const clickEffect: ClickEffect = ( hover = `background-color: ${style.hoverColor};`, - active = `background-color: ${style.activeColor};` + active = `background-color: ${style.activeColor};`, ) => { return css` cursor: pointer; @@ -66,7 +66,7 @@ export const cardClickEffect = () => { css` box-shadow: 0px 2px 4px #cecece; border: 1px solid #cecece; - ` + `, ); }; export const cardActiveEffect = () => { diff --git a/src/utils/user.ts b/src/utils/user.ts index 3a176cc..6979007 100644 --- a/src/utils/user.ts +++ b/src/utils/user.ts @@ -6,7 +6,7 @@ import { Project, Team } from '../interfaces'; */ export const can = ( group: Team | Project | undefined, - permission: number + permission: number, ): boolean => { if (group && group.role) { return group.role.permissions.findIndex((p) => p.id === permission) > -1; diff --git a/vite.config.ts b/vite.config.ts index b26d5bc..f8fe5cb 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -9,6 +9,9 @@ import url from 'node:url'; const ___dirname = path.dirname(url.fileURLToPath(import.meta.url)); const componentsDir = path.join(___dirname, './src/components'); +// origin to forward /api/ /storage/ requests to +const backendOrigin = 'http://localhost:13080'; + // https://vitejs.dev/config/ export default defineConfig({ // root: 'src', @@ -25,15 +28,17 @@ export default defineConfig({ return 'vendor-antd'; } return null; - } - } - } + }, + }, + }, }, define: { - 'process.env.REACT_APP_BASE_URL': JSON.stringify(process.env.REACT_APP_BASE_URL ?? '/api/') + 'process.env.REACT_APP_BASE_URL': JSON.stringify( + process.env.REACT_APP_BASE_URL ?? '/api/', + ), }, resolve: { - alias: {} + alias: {}, }, plugins: [ vitePluginImp({ @@ -41,39 +46,44 @@ export default defineConfig({ { // antd 按需导入 libName: 'antd', - style: (name) => `antd/es/${name}/style` + style: (name) => `antd/es/${name}/style`, }, { // antd-mobile 按需导入 libName: 'antd-mobile', - style: (name) => `antd-mobile/es/${name}/style` - } - ] + style: (name) => `antd-mobile/es/${name}/style`, + }, + ], }), react({ - jsxImportSource: '@emotion/core' + jsxImportSource: '@emotion/core', }), visualizer({}), - splitVendorChunkPlugin() + splitVendorChunkPlugin(), ], css: { preprocessorOptions: { less: { // 覆盖 antd 的 Less 样式 javascriptEnabled: true, - modifyVars: ({ - ...antdLessVars, ...antdLessVarsM - }) - } - } + modifyVars: { + ...antdLessVars, + ...antdLessVarsM, + }, + }, + }, }, server: { proxy: { '/api/': { // in local dev, proxy local moeflow-backend server for web app - target: 'http://localhost:5000', - changeOrigin: true - } - } - } + target: backendOrigin, + changeOrigin: true, + }, + '/storage/': { + target: backendOrigin, + changeOrigin: true, + }, + }, + }, });