aldehyde 0.2.97 → 0.2.99

package/src/aldehyde/locale/LocaleProvider.tsx

@@ -0,0 +1,165 @@
+import { ConfigProvider } from "antd";
+import React, { ReactNode, createContext, useEffect, useState } from "react";
+import { useNavigatorLanguage } from "./useLocale";
+import { antdLangMp, getLangWithLangApiMp, getLangWithLangMp } from "./langMp";
+import { LocaleType } from "./langMp";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+
+export const LocaleContext = createContext<{
+  locale: LocaleType;
+  langPkg: any;
+  changeLocale: (locale: LocaleType) => void;
+  t: (...strs: string[]) => string;
+  translate: (...strs: string[]) => string;
+}>({
+  locale: undefined,
+  langPkg: {},
+  changeLocale: () => {},
+  t: (...str) => str.join(""),
+  translate: (str) => {
+    let res = [],
+      tres = "";
+
+    let matchStr = "",
+      enableMatch = false;
+
+    for (const char of str) {
+      if (char === "$") {
+        enableMatch = true;
+        res.push(tres);
+        tres = "";
+      } else if (enableMatch && char === "{") {
+        continue;
+      } else if (enableMatch && char === "}") {
+        res.push(matchStr);
+        enableMatch = false;
+        matchStr = "";
+      } else if (enableMatch) matchStr += char;
+      else tres += char;
+    }
+
+    res.push(tres);
+    return res.join("");
+  },
+});
+
+const getLocaleWithServer = async (lang: string) => {
+  const langStr = getLangWithLangApiMp(lang);
+  if (langStr === "zh") return;
+
+  const { value, status } = await HcserviceV3.getLocale(langStr);
+
+  if (status === "success") {
+    return value;
+  }
+  return {};
+};
+
+export const LocaleProvider = ({ children }: { children: ReactNode }) => {
+  const { navigatorLanguage } = useNavigatorLanguage();
+  const localeStorageLang: LocaleType = window.localStorage.getItem(
+    "locale"
+  ) as LocaleType;
+  const localeStorageLangPkg: object = JSON.parse(
+    window.localStorage.getItem("langPkg")
+  );
+
+  const [locale, setLocale] = useState<LocaleType>(
+    localeStorageLang ? localeStorageLang : getLangWithLangMp(navigatorLanguage)
+  );
+  const [langPkg, setLangPkg] = useState(
+    localeStorageLangPkg ? localeStorageLangPkg : {}
+  );
+
+  const changeLocale = async (locale: LocaleType) => {
+    setLocale(locale);
+  };
+
+  useEffect(() => {
+    getLocaleWithServer(locale).then((res) => {
+      window.localStorage.setItem("locale", locale);
+      const newLangPkg = {
+        ...langPkg,
+        [locale]: res,
+      };
+      setLangPkg(newLangPkg);
+    });
+  }, [locale]);
+
+  useEffect(() => {
+    window.localStorage.setItem("langPkg", JSON.stringify(langPkg));
+  }, [langPkg]);
+
+  const t = (...strs: string[]) => {
+    if (locale === "zh") return strs.join("");
+
+    let res = "",
+      flag = false;
+
+    for (const str of strs) {
+      const tStr =
+        langPkg[locale] === undefined ? undefined : langPkg[locale][str];
+      if (tStr === undefined) {
+        flag = true;
+        break;
+      } else {
+        res += tStr + " ";
+      }
+    }
+    return flag ? strs.join("") : res.slice(0, res.length - 1);
+  };
+
+  const translate = (str) => {
+    let res = [],
+      resMp = [],
+      flag = false,
+      tres = "";
+
+    let matchStr = "",
+      enableMatch = false;
+
+    for (const char of str) {
+      if (char === "$") {
+        enableMatch = true;
+        res.push(tres);
+        tres = "";
+        resMp.push(false);
+      } else if (enableMatch && char === "{") {
+        continue;
+      } else if (enableMatch && char === "}") {
+        const tStr =
+          langPkg[locale] === undefined ? undefined : langPkg[locale][matchStr];
+        if (tStr === undefined) {
+          flag = true;
+        }
+        res.push(matchStr);
+        resMp.push(true);
+        enableMatch = false;
+        matchStr = "";
+      } else if (enableMatch) matchStr += char;
+      else tres += char;
+    }
+
+    res.push(tres);
+    resMp.push(false);
+
+    if (flag) return res.join("");
+
+    let resStr = "";
+    for (let i = 0; i < res.length; i++) {
+      if (i !== 0) resStr = " " + resStr;
+      if (resMp[i]) resStr += langPkg[locale][res[i]];
+      else resStr += res[i];
+    }
+
+    return resStr;
+  };
+
+  return (
+    <LocaleContext.Provider
+      value={{ locale, langPkg, changeLocale, t, translate }}
+    >
+      {children}
+    </LocaleContext.Provider>
+  );
+};

package/src/aldehyde/locale/langMp.ts

@@ -0,0 +1,33 @@
+import frFr from "antd/locale/fr_FR";
+import zhCN from "antd/locale/zh_CN";
+
+export type LocaleType = "zh" | "fr";
+
+export const langMp = {
+  fr: ["fra", "fr-FR"],
+  zh: ["zh", "zh-CN"],
+};
+
+export const langApiMp = {
+  fra: ["fr", "fr-FR"],
+  zh: ["zh", "zh-CN"],
+};
+
+export const getLangWithLangMp: (lang: any) => LocaleType = (lang) => {
+  for (const [key, value] of Object.entries(langMp)) {
+    if (value.findIndex((i) => i === lang) > -1) return key as LocaleType;
+  }
+  return "zh" as LocaleType;
+};
+
+export const getLangWithLangApiMp = (lang) => {
+  for (const [key, value] of Object.entries(langApiMp)) {
+    if (value.findIndex((i) => i === lang) > -1) return key;
+  }
+  return "zh";
+};
+
+export const antdLangMp = {
+  zh: zhCN,
+  fr: frFr,
+};

package/src/aldehyde/locale/translate.ts

@@ -0,0 +1,78 @@
+const noLocaleTranslate = (str) => {
+  let res = [],
+    tres = "";
+
+  let matchStr = "",
+    enableMatch = false;
+
+  for (const char of str) {
+    if (char === "$") {
+      enableMatch = true;
+      res.push(tres);
+      tres = "";
+    } else if (enableMatch && char === "{") {
+      continue;
+    } else if (enableMatch && char === "}") {
+      res.push(matchStr);
+      enableMatch = false;
+      matchStr = "";
+    } else if (enableMatch) matchStr += char;
+    else tres += char;
+  }
+
+  res.push(tres);
+  return res.join("");
+};
+const translate = (str) => {
+  const locale = window.localStorage.getItem("locale");
+  const langPkg = window.localStorage.getItem("langPkg");
+
+  if (locale === undefined || langPkg === undefined)
+    return noLocaleTranslate(str);
+
+  let res = [],
+    resMp = [],
+    flag = false,
+    tres = "";
+
+  let matchStr = "",
+    enableMatch = false;
+
+  for (const char of str) {
+    if (char === "$") {
+      enableMatch = true;
+      res.push(tres);
+      tres = "";
+      resMp.push(false);
+    } else if (enableMatch && char === "{") {
+      continue;
+    } else if (enableMatch && char === "}") {
+      const tStr =
+        langPkg[locale] === undefined ? undefined : langPkg[locale][matchStr];
+      if (tStr === undefined) {
+        flag = true;
+      }
+      res.push(matchStr);
+      resMp.push(true);
+      enableMatch = false;
+      matchStr = "";
+    } else if (enableMatch) matchStr += char;
+    else tres += char;
+  }
+
+  res.push(tres);
+  resMp.push(false);
+
+  if (flag) return res.join("");
+
+  let resStr = "";
+  for (let i = 0; i < res.length; i++) {
+    if (i !== 0) resStr = " " + resStr;
+    if (resMp[i]) resStr += langPkg[locale][res[i]];
+    else resStr += res[i];
+  }
+
+  return resStr;
+};
+
+export default translate;

package/src/aldehyde/locale/useLocale.ts

@@ -0,0 +1,50 @@
+import { useContext, useState } from "react";
+import { LocaleType } from "./langMp";
+import { LocaleContext } from "./LocaleProvider";
+
+type NavigatorLanguageState = {
+  isSupported: boolean;
+  navigatorLanguage: string;
+};
+
+export const useNavigatorLanguage = (): Readonly<NavigatorLanguageState> => {
+  // 获取navigator
+  const navigator = window?.navigator;
+
+  // 查看当前浏览器是否支持language
+  const isSupported = Boolean(navigator && "language" in navigator);
+
+  // 存储当前language
+  const [navigatorLanguage, setNavigatorLanguage] = useState(
+    navigator?.language
+  );
+
+  // 监听languagechange事件，如果有变化，就更新存储的language值
+  window.addEventListener("languagechange", () => {
+    if (navigator) {
+      setNavigatorLanguage(navigator.language);
+    }
+  });
+
+  return {
+    isSupported,
+    navigatorLanguage,
+  };
+};
+
+export const useLocale = () => {
+  const { locale, langPkg, changeLocale, t, translate } = useContext(
+    LocaleContext
+  );
+
+  return {
+    getLocale: () => {
+      return locale;
+    },
+    setLocale: (loacle: LocaleType) => {
+      changeLocale(loacle);
+    },
+    t,
+    translate,
+  };
+};

package/src/aldehyde/login/login.tsx

@@ -1,157 +1,208 @@
-import React, {ReactDOM} from 'react'
-import './index.css'
-import {Button, Col, Form, Input, Row, Card, FormInstance} from 'antd'
-import {LockOutlined, SafetyCertificateOutlined, UserOutlined} from '@ant-design/icons';
-import HCserviceV3 from "../tmpl/hcservice-v3"
+import React, { CSSProperties } from "react";
+import "./index.css";
+import { Button, Col, Form, Input, Row, FormInstance } from "antd";
+import {
+  LockOutlined,
+  SafetyCertificateOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import HCserviceV3 from "../tmpl/hcservice-v3";
+import { LocaleContext } from "../locale/LocaleProvider";
 
+interface LoginProps {
+  onFinish: (token: string) => void;
+  title?: any;
+  programCode?: string;
+  autoSaveUser?: boolean;
+}
 
- interface LoginProps  {
-     onFinish:(token:string)=>void,
-     title?:any,
-     programCode?:string,
-};
-
-interface LoginState  {
-    username?: string,
-    password?: string,
-    loading?: boolean,
-    needKaptcha?: boolean,
-    kaptchaImg?: string,
-    kaptchaToken?: string,
-    pubkey?:string,
-};
+interface LoginState {
+  username?: string;
+  password?: string;
+  loading?: boolean;
+  needKaptcha?: boolean;
+  kaptchaImg?: string;
+  kaptchaToken?: string;
+  pubkey?: string;
+}
 
 class Login extends React.PureComponent<LoginProps, LoginState> {
+  state = {
+    username: "",
+    password: "",
+    loading: true,
+    needKaptcha: false,
+    kaptchaImg: null,
+    kaptchaToken: null,
+    pubkey: undefined,
+  };
+  formRef = React.createRef<FormInstance>();
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-    state = {
-        username: "",
-        password: "",
-        loading: true,
-        needKaptcha: false,
-        kaptchaImg: null,
-        kaptchaToken: null,
-        pubkey:undefined,
-    }
-    formRef = React.createRef<FormInstance>();
-
+  componentDidMount = async () => {
+    const { programCode } = this.props;
+    window.removeEventListener("keydown", this.handleKeyDown);
+    let pubkey = await HCserviceV3.getRasPubkey(null, programCode);
+    this.setState({
+      pubkey,
+      loading: false,
+    });
+  };
 
-    componentDidMount = async () => {
-        const {programCode}=this.props;
-        window.removeEventListener('keydown', this.handleKeyDown);
-        let pubkey = await HCserviceV3.getRasPubkey(null,programCode);
-        this.setState({
-            pubkey,
-            loading:false
-        })
-    }
-
-    getKaptchaToken = async () => {
-        const {programCode}=this.props;
-        let res = await HCserviceV3.getKaptchaToken(programCode);
-        if (res) {
-            let kaptchaImg;
-            if(res.img && res.img.indexOf("data:") == 0){
-                kaptchaImg = res.img;
-            }else{
-                kaptchaImg = `data:image/png;base64,${res.img}`;
-            }
-            this.setState({
-                kaptchaImg,
-                kaptchaToken: res.kaptchaToken,
-                needKaptcha: true
-            })
-        }
+  getKaptchaToken = async () => {
+    const { programCode } = this.props;
+    let res = await HCserviceV3.getKaptchaToken(programCode);
+    if (res) {
+      let kaptchaImg;
+      if (res.img && res.img.indexOf("data:") == 0) {
+        kaptchaImg = res.img;
+      } else {
+        kaptchaImg = `data:image/png;base64,${res.img}`;
+      }
+      this.setState({
+        kaptchaImg,
+        kaptchaToken: res.kaptchaToken,
+        needKaptcha: true,
+      });
     }
+  };
 
-    handleSubmit = async () => {
+  handleSubmit = async () => {
+    this.setState({
+      loading: true,
+    });
+    let { kaptchaToken, pubkey } = this.state;
 
-        this.setState({
-            loading: true
-        })
-        let {kaptchaToken, pubkey} = this.state
+    await this.formRef.current
+      .validateFields()
+      .then(async (values) => {
+        const { programCode } = this.props;
+        let json = { username: values.username, password: values.password };
+        let res = await HCserviceV3.login(
+          json,
+          kaptchaToken,
+          values.kaptchaText,
+          pubkey,
+          programCode
+        );
+        if (res.status === "success") {
+          this.props.onFinish(res.token);
+        } else if (res.status === "error") {
+          await this.getKaptchaToken();
+        }
+      })
+      .catch((errorInfo) => {});
+    this.setState({
+      loading: false,
+    });
+  };
 
-        await this.formRef.current.validateFields().then(async (values) => {
-                const {programCode}=this.props;
-                let json = {username: values.username, password: values.password}
-                let res = await HCserviceV3.login(json, kaptchaToken, values.kaptchaText, pubkey,programCode);
-                if(res.status === 'success'){
-                    this.props.onFinish(res.token);
-                }else if (res.status === 'error') {
-                    await this.getKaptchaToken();
-                }
-            }
-        ).catch(errorInfo => {
-        })
-        this.setState({
-            loading: false
-        })
+  handleKeyDown = (event) => {
+    //按下enter键，触发login事件
+    switch (event.keyCode) {
+      case 13:
+        this.handleSubmit();
+        break;
+      default:
+        break;
     }
+  };
 
-    handleKeyDown = (event) => { //按下enter键，触发login事件
-        switch (event.keyCode) {
-            case 13:
-                this.handleSubmit();
-                break;
-            default:
-                break;
-        }
-    }
+  changeKaptcha = async (event) => {
+    //切换验证码
+    await this.getKaptchaToken();
+  };
 
-    changeKaptcha = async (event) => { //切换验证码
-        await this.getKaptchaToken();
-    }
+  render() {
+    const { loading, needKaptcha, kaptchaImg } = this.state;
 
-    render() {
-        const {loading, needKaptcha, kaptchaImg} = this.state
-        return (<Form style={{width: 350}} ref={this.formRef}
-                          name="normal_login"
-                          initialValues={{remember: true}}
-                    >{this.props.title}
-                            <Form.Item
-                                name="username"
-                                rules={[{required: true, message: '请输入用户名!'}, {max: 30, min: 0, message: '输入0-30个字符'},]}
-                            >
-                                <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="用户名"
-                                />
-                            </Form.Item>
-                            <Form.Item
-                                name="password"
-                                rules={[{required: true, message: '请输入密码!'}]}
-                            >
-                                <Input.Password
-                                    placeholder="密码"
-                                    onKeyDown={this.handleKeyDown}
-                                    prefix={<LockOutlined className="site-form-item-icon"/>}
-                                />
-                            </Form.Item>
-                        {
-                            needKaptcha ? <Row gutter={8}>
-                                <Col span={12}>
-                                    <Form.Item
-                                        name="kaptchaText"
-                                        rules={[{required: true, message: '请输入验证码!'}]}
-                                    >
-                                        <Input prefix={<SafetyCertificateOutlined className="site-form-item-icon"/>}
-                                               placeholder="验证码"
-                                               onKeyDown={this.handleKeyDown}
-                                        />
-                                    </Form.Item>
-                                </Col>
-                                <Col span={12}>
-                                    <img style={{"cursor": "pointer"}} height={30} width={90} title={'点击刷新'}
-                                         onClick={this.changeKaptcha}
-                                         src={kaptchaImg}></img>
-                                </Col>
-                            </Row> : ""
-                        }
-                        <Form.Item>
-                            <Button type="primary" style={{width: '100%'}} loading={loading} onClick={this.handleSubmit}>
-                                登录
-                            </Button>
-                        </Form.Item>
-                    </Form>
-        )
-    }
+    const { autoSaveUser = true } = this.props;
+
+    const { translate } = this.context;
+    return (
+      <Form
+        style={{ width: 350 }}
+        ref={this.formRef}
+        name="normal_login"
+        initialValues={{ remember: true }}
+      >
+        {this.props.title}
+        <Form.Item
+          name="username"
+          rules={[
+            { required: true, message: translate("${请输入}${用户名}!") },
+            { max: 30, min: 0, message: translate("${请输入}${0-30个字符}!") },
+          ]}
+        >
+          <Input
+            prefix={<UserOutlined className="site-form-item-icon" />}
+            placeholder={translate("${用户名}")}
+            autoComplete={autoSaveUser ? "on" : "off"}
+          />
+        </Form.Item>
+        <Form.Item
+          name="password"
+          rules={[{ required: true, message: translate("${请输入}${密码}!") }]}
+        >
+          <Input
+            style={
+              autoSaveUser
+                ? {}
+                : ({ "-webkit-text-security": "disc" } as CSSProperties)
+            }
+            type={autoSaveUser ? "password" : "text"}
+            placeholder={translate("${密码}")}
+            onKeyDown={this.handleKeyDown}
+            autoComplete={autoSaveUser ? "on" : "off"}
+            prefix={<LockOutlined className="site-form-item-icon" />}
+          />
+        </Form.Item>
+        {needKaptcha ? (
+          <Row gutter={8}>
+            <Col span={12}>
+              <Form.Item
+                name="kaptchaText"
+                rules={[
+                  { required: true, message: translate("${请输入}${验证码}!") },
+                ]}
+              >
+                <Input
+                  prefix={
+                    <SafetyCertificateOutlined className="site-form-item-icon" />
+                  }
+                  placeholder={translate("${验证码}")}
+                  onKeyDown={this.handleKeyDown}
+                />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <img
+                style={{ cursor: "pointer" }}
+                height={30}
+                width={90}
+                title={translate("${点击刷新}")}
+                onClick={this.changeKaptcha}
+                src={kaptchaImg}
+              ></img>
+            </Col>
+          </Row>
+        ) : (
+          ""
+        )}
+        <Form.Item>
+          <Button
+            type="primary"
+            style={{ width: "100%" }}
+            loading={loading}
+            onClick={this.handleSubmit}
+          >
+            {translate("${登录}")}
+          </Button>
+        </Form.Item>
+      </Form>
+    );
+  }
 }
 
-export default Login;
+export default Login;