i18n continued

package.json

@@ -20,6 +20,7 @@
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.3.1",
     "dayjs": "^1.9.4",
+    "debug": "^4.3.7",
     "filepond": "^4.18.0",
     "immer": "^9.0.1",
     "jwt-decode": "^2.2.0",
@@ -51,8 +52,7 @@
     "lint:fix": "eslint --fix .",
     "format": "prettier --check src",
     "format:fix": "prettier --write src",
-    "ts-node": "node -r esbuild-runner/register",
-    "build:locale": "npm run ts-node scripts/generate-locale-json.ts",
+    "build:locale": "tsx scripts/generate-locale-json.ts",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "typecheck": "tsc --noEmit",
@@ -79,6 +79,7 @@
     "@tsconfig/strictest": "^2.0.3",
     "@types/blueimp-load-image": "^2.23.8",
     "@types/classnames": "^2.2.9",
+    "@types/debug": "^4.1.12",
     "@types/jest": "^29",
     "@types/js-yaml": "^4.0.9",
     "@types/jwt-decode": "^2.2.1",
@@ -98,7 +99,6 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@welldone-software/why-did-you-render": "^4.0.3",
     "autoprefixer": "^10.4.17",
-    "esbuild-runner": "^2.2.2",
     "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -110,13 +110,15 @@
     "prettier": "^3.2.5",
     "rollup-plugin-visualizer": "^5.12.0",
     "ts-jest": "^29",
-    "typescript": "^5.3",
-    "vite": "^5.1.3",
+    "tsx": "^4.19.2",
+    "typescript": "^5.6",
+    "vite": "5.4.6",
     "vite-plugin-imp": "^2.4.0"
   },
   "overrides": {
-    "typescript": "^5.3",
+    "typescript": "^5.6",
     "react": "^17",
-    "react-dom": "^17"
+    "react-dom": "^17",
+    "debug": "^4.3.7"
   }
 }

src/apis/auth.ts

@@ -143,15 +143,25 @@
 interface GetUserInfoData {
   token: string;
 }
+
+export interface GetUserInfoResponse {
+  id: string;
+  name: string;
+  signature?: string;
+  avatar?: string;
+  has_avatar: boolean;
+  // local
+  admin?: boolean;
+}
 /** 获取用户信息 */
 const getUserInfo = ({
   data,
   configs,
 }: {
   data?: GetUserInfoData;
   configs?: AxiosRequestConfig;
-} = {}) => {
-  return request({
+}) => {
+  return request<GetUserInfoResponse>({
     method: 'GET',
     url: `/v1/user/info`,
     ...configs,

src/apis/index.ts

@@ -5,6 +5,7 @@
 import { createElement } from 'react';
 import { Icon } from '../components';
 import { configs } from '../configs';
+import { createDebugLogger } from '../utils/debug-logger';
 import { getIntl } from '../locales';
 import store from '../store';
 import { setUserToken } from '../store/user/slice';
@@ -29,14 +30,32 @@
 import group from './group';
 import insight from './insight';
 import siteSetting from './siteSetting';
-import { mitPreprocess } from './mit_preprocess';
+
+const debugLogger = createDebugLogger('apis');
 
 // TODO: move instance/request to a peer file, to prevent circular imports
 // TODO: can we hide this from API callsites?
 const instance = axios.create({
   baseURL: `${configs.baseURL}`,
 });
 
+/**
+ * @param l
+ * (as backend User.locale is not used , this solely determines backend locale)
+ */
+export function setRequestLanguage(l: string) {
+  instance.interceptors.request.use((req) => {
+    debugLogger('axios request interceptor: language', l, req);
+    return {
+      ...req,
+      headers: {
+        ...req.headers,
+        'Accept-Language': l,
+      },
+    };
+  });
+}
+
 /** 分页的请求参数 */
 export interface PaginationParams {
   /** 页数 */
@@ -58,10 +77,10 @@
 } as const;
 
 /** 成功的响应 */
 export interface BasicSuccessResult<T = any> {
   type: typeof resultTypes.SUCCESS;
   data: T;
   headers: any;
 }
 
 /** 基础错误响应结果的数据 */
@@ -124,7 +143,7 @@
   | CancelFailureResult
   | OtherFailureResult;
 
-export const request = <T = any>(
+export const request = <T = unknown>(
   axiosConfig: AxiosRequestConfig,
 ): Promise<BasicSuccessResult<T>> => {
   return instance({

src/apis/me.ts

@@ -3,8 +3,8 @@
  */
 import { AxiosRequestConfig } from 'axios';
 import { PaginationParams, request } from '.';
-import { ApplicationStatuses } from '../constants/application';
-import { InvitationStatuses } from '../constants/invitation';
+import { ApplicationStatuses } from '../constants';
+import { InvitationStatuses } from '../constants';
 import { toUnderScoreCase } from '../utils';
 import { APIApplication } from './application';
 import { APIInvitation } from './invitation';

src/components/Header.tsx

@@ -14,7 +14,7 @@ import { clickEffect } from '../utils/style';
 import classNames from 'classnames';
 import { routes } from '../pages/routes';
 import { configs } from '../configs';
-import { availableLocales, setLocale } from '../locales';
+import { LocalePicker } from './setting/LocalePicker';
 
 /** 头部的属性接口 */
 interface HeaderProps {
@@ -87,6 +87,12 @@ export const Header: FC<HeaderProps> = ({ className }) => {
     </a>
   );
 
+  const githubLink = (
+    <a className="login" href="https://github.com/moeflow-com" target="_blank">
+      <Icon icon={['fab', 'github']} size="1x" />
+    </a>
+  );
+
   return (
     <div
       className={classNames(['Header', className])}
@@ -148,7 +154,7 @@ export const Header: FC<HeaderProps> = ({ className }) => {
       </div>
       {currentUser.token ? (
         <div className="right">
-          {mitLink}
+          {/*{mitLink}*/}
           <Dropdown
             menu={menuProps}
             placement="bottomRight"
@@ -166,33 +172,17 @@ export const Header: FC<HeaderProps> = ({ className }) => {
         </div>
       ) : (
         <div className="right">
-          {mitLink}
+          {/*{mitLink}*/}
           <a className="login" href={routes.login}>
             {formatMessage({ id: 'auth.login' })}
           </a>
           <a className="register" href={routes.signUp}>
             {formatMessage({ id: 'auth.register' })}
           </a>
           <LocalePicker />
+          {githubLink}
         </div>
       )}
     </div>
   );
 };
-
-const LocalePicker: FC = () => {
-  const menuProps: MenuProps = {
-    items: Object.entries(availableLocales).map(([locale, label]) => ({
-      label: <div css={dropDownMenuItemStyle}>{label}</div>,
-      key: `locale-${locale}`,
-      onClick: () => setLocale(locale),
-    })),
-  };
-  return (
-    <Dropdown menu={menuProps}>
-      <div>
-        <Icon icon="language" size="3x" />
-      </div>
-    </Dropdown>
-  );
-};

src/components/AdminImageSafeCheck.tsx → src/components/admin/AdminImageSafeCheck.tsx

@@ -1,18 +1,18 @@
 import { css } from '@emotion/core';
 import React, { useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { useTitle } from '../hooks';
-import { FC, File } from '../interfaces';
-import apis from '../apis';
+import { useTitle } from '@/hooks';
+import { FC, File } from '@/interfaces';
+import apis from '@/apis';
 import {
   FileNotExistReasons,
   FileSafeStatuses,
   FILE_NOT_EXIST_REASON,
   FILE_SAFE_STATUS,
-} from '../constants';
-import { toLowerCamelCase } from '../utils';
+} from '@/constants';
+import { toLowerCamelCase } from '@/utils';
 import classNames from 'classnames';
 import { Button, Pagination, Radio, Spin } from 'antd';
+import { useIntl } from 'react-intl';
 
 /** 图片安全检查页面的属性接口 */
 interface AdminImageSafeCheckProps {
@@ -24,6 +24,7 @@ interface AdminImageSafeCheckProps {
 export const AdminImageSafeCheck: FC<AdminImageSafeCheckProps> = ({
   className,
 }) => {
+  const { formatMessage } = useIntl();
   useTitle(); // 设置标题
   const [files, setFiles] = useState<File[]>();
   const pageSize = 40;
@@ -224,7 +225,7 @@ export const AdminImageSafeCheck: FC<AdminImageSafeCheckProps> = ({
             onClick={safeCheck}
             loading={submitting}
           >
-            提交
+            {formatMessage({ id: 'form.submit' })}
           </Button>
         )}
       </div>

src/components/AdminSiteSetting.tsx → src/components/admin/AdminSiteSetting.tsx

@@ -1,15 +1,15 @@
 import { css } from '@emotion/core';
-import { Button, Form as AntdForm, Input, message, Spin, Switch } from 'antd';
+import { Button, Form as AntdForm, message, Spin, Switch } from 'antd';
 import TextArea from 'antd/lib/input/TextArea';
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
-import apis from '../apis';
-import { APISiteSetting } from '../apis/siteSetting';
-import { FC } from '../interfaces';
-import { toLowerCamelCase } from '../utils';
-import { Form } from './Form';
-import { FormItem } from './FormItem';
+import apis from '@/apis';
+import { APISiteSetting } from '@/apis/siteSetting';
+import { FC } from '@/interfaces';
+import { toLowerCamelCase } from '@/utils';
+import { Form } from '@/components/Form';
+import { FormItem } from '@/components/FormItem';
 
 function textareaToArray(textarea: string): string[] {
   return textarea.trim() === ''