Fix several bugs; improve UX

examples/yustar.yaml

@@ -4,7 +4,7 @@ info:
   name: 宇浩·星陈
   author: 朱宇浩
   version: '3.5.0'
-  description: 全汉字字形输入・繁简通打・极低选重
+  description: 全汉字字形输入・繁简通打
 analysis:
   classifier:
     竖提: 6

package.json

@@ -1,7 +1,7 @@
 {
   "name": "chai",
   "private": true,
-  "version": "0.1.10",
+  "version": "0.1.11",
   "type": "module",
   "scripts": {
     "start": "vite --mode CF",
@@ -39,7 +39,7 @@
     "jotai-optics": "^0.3.2",
     "js-md5": "^0.8.3",
     "js-yaml": "4.1.0",
-    "libchai": "^0.1.10",
+    "libchai": "^0.1.11",
     "lodash-es": "^4.17.21",
     "lz-string": "^1.5.0",
     "mathjs": "12.1.0",

src/components/Optimizer.tsx

@@ -2,6 +2,7 @@ import {
   Button,
   Col,
   Flex,
+  List,
   Progress,
   Row,
   Statistic,
@@ -10,18 +11,19 @@ import {
 } from "antd";
 import { useAtomValue } from "jotai";
 import { useState } from "react";
-import type { DictEntry } from "~/atoms";
-import { configAtom, assetsAtom, makeEncodeCallback } from "~/atoms";
+import { configAtom, assetsAtom } from "~/atoms";
 import {
-  exportTSV,
   exportYAML,
+  formatDate,
   makeWasmWorker,
   stringifySequence,
 } from "~/lib";
 import type { LibchaiOutputEvent } from "~/worker";
 import { load } from "js-yaml";
-import type { Solver } from "~/lib";
+import type { Config, Solver } from "~/lib";
 import { assemblyResultAtom } from "~/atoms/cache";
+import { nanoid } from "nanoid";
+import { useNavigate } from "react-router-dom";
 
 const Schedule = ({
   params,
@@ -71,12 +73,13 @@ const Schedule = ({
 };
 
 export default function Optimizer() {
+  const navigate = useNavigate();
   const assets = useAtomValue(assetsAtom);
   const config = useAtomValue(configAtom);
   const assemblyResult = useAtomValue(assemblyResultAtom);
   const [out1, setOut1] = useState("");
-  const [result, setResult] = useState<[Date, string][]>([]);
-  const [bestResult, setBestResult] = useState<string | undefined>(undefined);
+  const [result, setResult] = useState<{ date: Date; config: Config }[]>([]);
+  const [bestResult, setBestResult] = useState<Config | undefined>(undefined);
   const [bestMetric, setBestMetric] = useState("");
   const [optimizing, setOptimizing] = useState(false);
   const [progress, setProgress] = useState<
@@ -139,16 +142,16 @@ export default function Optimizer() {
           const worker = makeWasmWorker();
           worker.onmessage = (event: MessageEvent<LibchaiOutputEvent>) => {
             const { data } = event;
+            const date = new Date();
+            let config: Config;
             switch (data.type) {
               case "better_solution":
-                setBestResult(data.config);
+                config = load(data.config) as Config;
+                config.info.version = formatDate(date);
+                setBestResult(config);
                 setBestMetric(data.metric);
                 if (data.save) {
-                  setResult((result) =>
-                    [[new Date(), data.config] as [Date, string]].concat(
-                      result,
-                    ),
-                  );
+                  setResult((result) => [{ date, config }].concat(result));
                 }
                 break;
               case "progress":
@@ -163,7 +166,7 @@ export default function Optimizer() {
                 break;
               case "finish":
                 notification.success({
-                  message: "优化已完成，请下载结果!",
+                  message: "优化已完成，请查看结果!",
                 });
                 break;
               case "error":
@@ -187,58 +190,43 @@ export default function Optimizer() {
             <pre>{bestMetric}</pre>
           </Typography.Text>
           <Flex justify="center" gap="middle">
-            <Button
-              onClick={() =>
-                exportYAML(load(bestResult) as object, "optimized")
-              }
-            >
-              下载方案
-            </Button>
             <Button
               onClick={() => {
-                const worker = makeWasmWorker();
-                const flatten = (x: DictEntry) => [x.name, x.full, x.short];
-                worker.onmessage = makeEncodeCallback((code) => {
-                  exportTSV(code.map(flatten), "code.txt");
-                });
-                worker.postMessage({
-                  type: "encode",
-                  data: { ...prepareInput(), config: load(bestResult) },
-                });
+                const id = nanoid(9);
+                localStorage.setItem(id, JSON.stringify(bestResult));
+                window.open(`/${id}`, "_blank");
               }}
             >
-              下载码表
+              在新标签页中打开方案
             </Button>
           </Flex>
         </>
       ) : null}
       <Typography.Title level={4}>全部方案</Typography.Title>
-      <div>
-        <Flex
-          vertical
-          gap="small"
-          style={{
-            maxHeight: "200px",
-            overflowY: "scroll",
-            padding: "8px",
-            border: "1px solid black",
-            borderRadius: "8px",
-          }}
-        >
-          {result.map(([time, content], index) => (
-            <Flex align="center" justify="space-between" key={index}>
-              <span>{time.toISOString()}</span>
+      <List
+        size="small"
+        dataSource={result}
+        bordered
+        style={{
+          maxHeight: "300px",
+          overflowY: "scroll",
+        }}
+        renderItem={({ date, config }, index) => (
+          <List.Item
+            key={index}
+            actions={[
               <Button
-                onClick={() =>
-                  exportYAML(load(content) as object, time.toISOString())
-                }
+                key={index}
+                onClick={() => exportYAML(config, date.toISOString())}
               >
                 下载
-              </Button>
-            </Flex>
-          ))}
-        </Flex>
-      </div>
+              </Button>,
+            ]}
+          >
+            {date.toISOString()}
+          </List.Item>
+        )}
+      />
     </>
   );
 }

src/components/Utils.tsx

@@ -11,6 +11,7 @@ import {
   notification,
 } from "antd";
 import styled from "styled-components";
+import type { MouseEventHandler } from "react";
 import { useState } from "react";
 import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
 import PlusOutlined from "@ant-design/icons/PlusOutlined";
@@ -85,7 +86,7 @@ export const Uploader = ({
 };
 
 interface Click {
-  onClick: () => void;
+  onClick: MouseEventHandler<HTMLElement>;
   disabled?: boolean;
 }
 

src/index.tsx

@@ -13,9 +13,7 @@ import AutoRoute from "~react-pages";
 
 const idpath = AutoRoute.find((v) => v.path === ":id");
 idpath?.children?.forEach((v) => {
-  if (v.path === "analysis" || v.path === "element") {
-    v.errorElement = <Error />;
-  }
+  v.errorElement = <Error />;
 });
 
 const GlobalStyle = createGlobalStyle`

src/lib/utils.ts

@@ -34,6 +34,10 @@ export const printableAscii = range(33, 127).map((x) =>
   String.fromCodePoint(x),
 );
 
+export const formatDate = (date: Date) => {
+  return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+};
+
 export const unicodeBlock = (code: number) => {
   // ASCII
   if (code >= 0 && code <= 0x7f) return "ascii";

src/pages/[id]/index.tsx

@@ -1,9 +1,6 @@
 import { Button, Flex, Input, Space, Typography, Upload } from "antd";
 import {
   Atom,
-  Dictionary,
-  Distribution,
-  Equivalence,
   SetStateAction,
   WritableAtom,
   characterSetAtom,
@@ -18,6 +15,9 @@ import {
 } from "~/atoms";
 import {
   CharacterSetSpecifier,
+  Dictionary,
+  Distribution,
+  Equivalence,
   Info,
   characterSetSpecifiers,
   exportTSV,
@@ -39,7 +39,7 @@ import {
   customElementsAtom,
 } from "~/atoms/assets";
 import { getRecordFromTSV } from "~/lib";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 const getTSVFromRecord = (record: Equivalence) =>
   Object.entries(record).map(([k, v]) => [k, v.toString()]);
@@ -160,6 +160,10 @@ export default function Index() {
     basic: "基本",
     extended: "扩展",
   };
+  const [form] = ProForm.useForm<Info>();
+  useEffect(() => {
+    form.setFieldsValue(info);
+  }, [info]);
   return (
     <EditorRow>
       <EditorColumn span={12}>
@@ -168,12 +172,14 @@ export default function Index() {
         <ConfigManager />
         <Typography.Title level={3}>基本信息</Typography.Title>
         <ProForm<Info>
+          form={form}
           layout="horizontal"
           labelCol={{ span: 6 }}
           wrapperCol={{ span: 16 }}
           initialValues={info}
           onValuesChange={(_, values) => setInfo(values)}
           submitter={false}
+          autoFocusFirstInput={false}
         >
           <ProFormText label="方案名称" name="name" />
           <ProFormText label="作者" name="author" />