[add] 处理翻译结果

extension/farm-i18n/src/options/index.tsx

@@ -7,6 +7,11 @@ import Header from "./components/header";
 import * as local from "./local";
 import Home from "./pages/home";
 import Translate from "./pages/translate";
+import SingletonData from "@/shared/SingletonData";
+import { storageGet } from "@/shared/utils";
+
+const FARM_I18N_STORAGE_KEY = "FARM_I18N_STORAGE_KEY";
+const singletonData = SingletonData.sharedInstance();
 
 interface IProps {}
 
@@ -43,7 +48,12 @@ class App extends React.Component<IProps> {
   }
 }
 
-ReactDOM.render(
-  <App />,
-  document.querySelector("#app")
-)
+storageGet(FARM_I18N_STORAGE_KEY).then((v) => {
+  console.log(v);
+  singletonData.parseArray(v.FARM_I18N_STORAGE_KEY || []);
+  ReactDOM.render(
+    <App />,
+    document.querySelector("#app")
+  )
+});
+

extension/farm-i18n/src/options/pages/home/index.tsx

@@ -6,10 +6,8 @@ import createUUID from "usedjs/lib/createUUID";
 import * as local from "@/options/local";
 import CreateI18nForm from "./components/createForm";
 import TEMPLATE from "./template";
-import { storageGet, storageSet } from "@/shared/utils";
 import SingletonData, { IData } from "@/shared/SingletonData";
 
-const storageKey = "FARM_I18N_STORAGE_KEY";
 const singletonData = SingletonData.sharedInstance();
 
 const createI18n = (origin: string, result: string) => {
@@ -21,7 +19,7 @@ const createI18n = (origin: string, result: string) => {
     result: result ? result : TEMPLATE,
     tags: ["developer"],
     localizes: [],
-    localizesResult: [],
+    localizesResult: "",
   }
 }
 
@@ -89,7 +87,8 @@ class Home extends React.Component<IProps, IState> {
             <a href="javascript:;" onClick={() => {
               const { data } = this.state;
               const newData = data.filter(v => v.id !== record.id);
-              storageSet({ [storageKey]: newData});
+              singletonData.removeData(record.id);
+              singletonData.saveStorage();
               this.setState({
                 data: newData,
               })
@@ -101,13 +100,9 @@ class Home extends React.Component<IProps, IState> {
   }
 
   public componentDidMount(){
-    storageGet(storageKey).then((v) => {
-      const data = v.FARM_I18N_STORAGE_KEY;
-      if (data.length > 0) {
-        this.setState({
-          data
-        });
-      }
+    const data = singletonData.toArray();
+    this.setState({
+      data,
     });
   }
 
@@ -134,8 +129,8 @@ class Home extends React.Component<IProps, IState> {
             const { origin, result } = value;
             const localize = createI18n(origin, result);
             data.push(localize);
-            storageSet({ [storageKey]: data});
-            singletonData.parseArray(data);
+            singletonData.setData(localize.id, localize);
+            singletonData.saveStorage();
             this.setState({
               data,
               visible: false

extension/farm-i18n/src/options/pages/translate/index.tsx

@@ -1,23 +1,34 @@
 import * as React from "react";
 import { RouteComponentProps } from "react-router-dom";
+import styles from "./style.css";
 import SingletonData, { IData } from "@/shared/SingletonData";
+import { Input, Form, Select } from "antd";
+import { FormComponentProps } from "antd/lib/form"
+import { extractText } from "@/shared/utils";
+import localizes from "@/shared/localizes";
 
 interface IParams {
   id: string;
 }
 
-interface IProps extends RouteComponentProps<IParams> {};
+interface IProps extends RouteComponentProps<IParams>, FormComponentProps {};
 interface IState {
   data: IData | undefined;
+  translateResult: string;
+  localize: string;
 }
 
+const { TextArea } = Input;
+const Option = Select.Option;
 const singletonData = SingletonData.sharedInstance();
 
 class Translate extends React.Component<IProps, IState> {
   constructor(props: IProps){
     super(props);
     this.state = {
       data: undefined,
+      translateResult: "",
+      localize: "en"
     }
   }
 
@@ -32,12 +43,177 @@ class Translate extends React.Component<IProps, IState> {
     }
   }
 
-  public render(){
+  public createTranslateResult = (e: React.MouseEvent<HTMLButtonElement>) => {
+    this.props.form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        const { localize } = values;
+        const { data, translateResult } = this.state;
+        if (!translateResult) {
+          alert("翻译结果不能为空");
+          return;
+        }
+        if (data) {
+          let cur = true;
+          let resultJSON: any = {};
+          const localizesResult = Object.create(null);
+          const tResult = translateResult.split("\n");
+          if (data.localizesResult) {
+            resultJSON = JSON.parse(data.localizesResult);
+          } else {
+            resultJSON = JSON.parse(data.result);
+            cur = false;
+          }
+          const keys = Object.keys(resultJSON);
+          let i = 0;
+          for (const iterator of keys) {
+            let l;
+            if (cur) {
+              l = localizesResult[iterator] = resultJSON[iterator];
+            } else {
+              l = localizesResult[iterator] = Object.create(null);
+              l[data.origin] = {
+                "message": resultJSON[iterator][data.origin]["message"]
+              }
+            }
+            const t = tResult[i];
+            if (t === "[icepy]") {
+              i = i + 1;
+              l[localize] = {
+                "message": ""
+              };
+              continue;
+            }
+            l[localize] = {
+              "message": t
+            }
+            i = i + 1;
+          }
+          data.localizesResult = JSON.stringify(localizesResult);
+          singletonData.setData(data.id, data);
+          singletonData.saveStorage();
+          this.setState({
+            data,
+            localize
+          });
+        }
+      }
+    });
+  }
+
+  public exportResult = (e: React.MouseEvent<HTMLButtonElement>) => {
+
+  }
+
+  public onTextAreaTranslateResult = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const { value } = e.target;
+    this.setState({
+      translateResult: value,
+    });
+  }
+
+  public renderOriginResult = () => {
+    const { data } = this.state;
+    return (
+      <>
+        <h5>翻译源: { data ? data.origin : ""}</h5>
+        <TextArea
+          placeholder=""
+          autosize={{ minRows: 2, maxRows: 20 }}
+          value={ data ? data.result : ""}
+        />
+      </>
+    );
+  }
 
+  public renderTranslateI18n = () => {
+    const { data, localize } = this.state;
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <>
+        <Form className={styles["form-container"]}>
+          <Form.Item className={styles["form-select-container"]}>
+            {
+              getFieldDecorator("localize", {
+                initialValue: "en"
+              })(
+                <Select>
+                  {
+                    localizes.map((v) => {
+                      return (
+                        <Option key={v} value={v}>{v}</Option>
+                      )
+                    })
+                  }
+                </Select>
+              )
+            }
+          </Form.Item>
+          <button
+            className={styles["create-translate-result"]}
+            onClick={this.createTranslateResult}
+          >输出</button>
+          <button
+            className={styles["create-translate-result"]}
+            onClick={this.exportResult}
+          >导出</button>
+        </Form>
+        <h5>i18n 输出结果: { data ? localize : "en"}</h5>
+        <TextArea
+          placeholder=""
+          autosize={{ minRows: 2, maxRows: 20 }}
+          value={ data ? data.localizesResult : ""}
+        />
+      </>
+    );
+  }
+
+  public renderWaitTranslateI18nText = () => {
+    const { data, translateResult } = this.state;
+    const text = extractText(data);
+    return (
+      <>
+        <h5>待翻译文本: </h5>
+        <TextArea
+          placeholder=""
+          autosize={{ minRows: 2, maxRows: 10 }}
+          value={ text }
+        />
+        <h5 className={styles["translate-result"]}>翻译结果: </h5>
+        <TextArea
+          placeholder=""
+          autosize={{ minRows: 2, maxRows: 10 }}
+          value={ translateResult }
+          onChange={this.onTextAreaTranslateResult}
+        />
+      </>
+    )
+  }
+
+  public render(){
+    const { data } = this.state;
+    console.log(data);
     return (
-      <div>1234</div>
+      <div className={styles["translate"]}>
+        <div className={styles["translate-container"]}>
+          <div className={styles["origin-result"]}>
+            {
+              this.renderOriginResult()
+            }
+          </div>
+          <div className={styles["wait-translate-i18n-text"]}>
+            {
+              this.renderWaitTranslateI18nText()
+            }
+          </div>
+          <div className={styles["translate-i18n-data"]}>
+            {
+              this.renderTranslateI18n()
+            }
+          </div>
+        </div>
+      </div>
     )
   }
 }
 
-export default Translate;
+export default Form.create({name: "translate"})(Translate);

extension/farm-i18n/src/options/pages/translate/style.css

@@ -0,0 +1,58 @@
+.translate{
+  width: 100%;
+  padding-top: 4px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.translate-container{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.origin-result{
+  width: 260px;
+  margin-right: 10px;
+}
+
+.translate-i18n-data {
+  width: 260px;
+  margin-right: 10px;
+}
+
+.wait-translate-i18n-text {
+  width: 260px;
+  margin-right: 10px;
+}
+
+.translate-result {
+  margin-top: 10px;
+}
+
+.form-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.form-select-container {
+  width: 150px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+
+.create-translate-result {
+  width: 50px;
+  height: 30px;
+  padding: 0px;
+  margin: 0px;
+  outline: none;
+  border: none;
+  background: #1890ff;
+  color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: 5px;
+  margin-top: 4px;
+  margin-right: 10px;
+}