feat(web): 使术语表导出导入格式更加人类可读

web/src/model/Glossary.ts

@@ -1,23 +1,54 @@
 export type Glossary = { [key: string]: string };
 
 export namespace Glossary {
-  export const encodeToText = (glossary: Glossary) => {
+  const toJson = (glossary: Glossary) => {
     return JSON.stringify(glossary, null, 2);
   };
-
-  export const decodeFromText = (text: string): Glossary | undefined => {
+  const fromJson = (text: string): Glossary | undefined => {
     try {
       const obj = JSON.parse(text);
       if (typeof obj !== 'object') return;
-      const inputGlossary: { [key: string]: string } = {};
+      const glossary: Glossary = {};
       for (const jp in obj) {
         const zh = obj[jp];
         if (typeof zh !== 'string') return;
-        inputGlossary[jp] = zh;
+        glossary[jp] = zh;
       }
-      return inputGlossary;
+      return glossary;
     } catch {
       return;
     }
   };
+
+  const delimiter = '=>';
+  const toHumanReadableFormat = (glossary: Glossary) => {
+    const lines = [];
+    for (const jp in glossary) {
+      const zh = glossary[jp];
+      lines.push(`${jp} ${delimiter} ${zh}`);
+    }
+    return lines.join('\n');
+  };
+  const fromHumanReadableFormat = (text: string): Glossary | undefined => {
+    const glossary: Glossary = {};
+    for (let line of text.split('\n')) {
+      line = line.trim();
+      if (line === '') continue;
+
+      const parts = line.split(delimiter);
+      console.log(parts);
+      if (parts.length !== 2) return;
+
+      const [jp, zh] = parts;
+      glossary[jp.trim()] = zh.trim();
+    }
+    return glossary;
+  };
+
+  export const toText = (glossary: Glossary) => {
+    return toHumanReadableFormat(glossary);
+  };
+  export const fromText = (text: string): Glossary | undefined => {
+    return fromJson(text) ?? fromHumanReadableFormat(text);
+  };
 }

web/src/pages/components/GlossaryButton.vue

@@ -111,12 +111,12 @@ const addTerm = () => {
 };
 
 const exportGlossary = () => {
-  navigator.clipboard.writeText(Glossary.encodeToText(glossary.value));
+  navigator.clipboard.writeText(Glossary.toText(glossary.value));
   message.info('导出成功，已经将术语表复制到剪切板');
 };
 
 const importGlossary = () => {
-  const importedGlossary = Glossary.decodeFromText(importGlossaryRaw.value);
+  const importedGlossary = Glossary.fromText(importGlossaryRaw.value);
   if (importedGlossary === undefined) {
     message.error('导入失败：术语表格式不正确');
   } else {
@@ -174,13 +174,16 @@ const importGlossary = () => {
           />
         </n-input-group>
 
-        <n-input-group>
-          <n-input
-            v-model:value="importGlossaryRaw"
-            size="small"
-            placeholder="批量导入术语表"
-            :input-props="{ spellcheck: false }"
-          />
+        <n-input
+          v-model:value="importGlossaryRaw"
+          type="textarea"
+          size="small"
+          placeholder="批量导入术语表"
+          :input-props="{ spellcheck: false }"
+          :rows="1"
+        />
+
+        <n-flex align="center" :wrap="false">
           <c-button
             label="导出"
             :round="false"
@@ -193,9 +196,6 @@ const importGlossary = () => {
             size="small"
             @action="importGlossary"
           />
-        </n-input-group>
-
-        <n-flex align="center" :wrap="false">
           <c-button
             v-if="whoami.isMaintainer"
             secondary