From 94c7494e90118fc6d555e7bb90512d93da606873 Mon Sep 17 00:00:00 2001
From: Gabe Yuan <gabe@zq.com>
Date: Wed, 25 Oct 2023 11:13:56 +0800
Subject: [PATCH] tranbox

---
 src/views/Selection/TranCont.js | 43 ++++++++++++++++++++-------------
 src/views/Selection/index.js    |  4 +--
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/views/Selection/TranCont.js b/src/views/Selection/TranCont.js
index 9d489ba..fb63b42 100644
--- a/src/views/Selection/TranCont.js
+++ b/src/views/Selection/TranCont.js
@@ -2,6 +2,8 @@ import TextField from "@mui/material/TextField";
 import Box from "@mui/material/Box";
 import Alert from "@mui/material/Alert";
 import CircularProgress from "@mui/material/CircularProgress";
+import Chip from "@mui/material/Chip";
+import Stack from "@mui/material/Stack";
 import { useI18n } from "../../hooks/I18n";
 import { DEFAULT_TRANS_APIS, OPT_TRANS_BAIDU } from "../../config";
 import { useEffect, useState } from "react";
@@ -27,24 +29,9 @@ function DictCont({ dictResult }) {
       <div style={{ fontWeight: "bold" }}>
         {dictResult.simple_means?.word_name}
       </div>
-      <div>
-        {Object.entries(dictResult.simple_means?.exchange || {}).map(
-          ([key, val]) => (
-            <span key={key}>{`${exchangeMap[key] || key}: ${val.join(
-              ","
-            )}; `}</span>
-          )
-        )}
-      </div>
-      <div>
-        {Object.values(dictResult.simple_means?.tags || {})
-          .flat()
-          .filter((item) => item)
-          .join(", ")}
-      </div>
       {dictResult.simple_means?.symbols?.map(({ ph_en, ph_am, parts }, idx) => (
         <div key={idx}>
-          <div>{`英: /${ph_en}/ 美: /${ph_am}/`}</div>
+          <div>{`英[${ph_en}] 美[${ph_am}]`}</div>
           <ul>
             {parts.map(({ part, means }, idx) => (
               <li key={idx}>
@@ -54,6 +41,28 @@ function DictCont({ dictResult }) {
           </ul>
         </div>
       ))}
+      {/* <div>
+        {Object.entries(dictResult.simple_means?.exchange || {}).map(
+          ([key, val]) => (
+            <span key={key}>{`${exchangeMap[key] || key}: ${val.join(
+              ", "
+            )}; `}</span>
+          )
+        )}
+      </div> */}
+      <div>
+        {Object.entries(dictResult.simple_means?.exchange || {})
+          .map(([key, val]) => `${exchangeMap[key] || key}: ${val.join(", ")}`)
+          .join("; ")}
+      </div>
+      <Stack direction="row" spacing={1}>
+        {Object.values(dictResult.simple_means?.tags || {})
+          .flat()
+          .filter((item) => item)
+          .map((item) => (
+            <Chip label={item} size="small" />
+          ))}
+      </Stack>
     </Box>
   );
 }
@@ -93,7 +102,7 @@ export default function TranCont({
         // 词典
         if (isValidWord(text) && toLang.startsWith("zh")) {
           if (fromLang === "en" && translator === OPT_TRANS_BAIDU) {
-            setDictResult(tranRes[2]);
+            setDictResult(tranRes[2].dict_result);
           } else {
             const dictRes = await apiTranslate({
               text,
diff --git a/src/views/Selection/index.js b/src/views/Selection/index.js
index edacd27..ddf0858 100644
--- a/src/views/Selection/index.js
+++ b/src/views/Selection/index.js
@@ -9,10 +9,10 @@ export default function Slection({ tranboxSetting, transApis }) {
   const [selectedText, setSelText] = useState("");
   const [text, setText] = useState("");
   const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [boxSize, setBoxSize] = useState({ w: 600, h: 400 });
+  const [boxSize, setBoxSize] = useState({ w: 600, h: 420 });
   const [boxPosition, setBoxPosition] = useState({
     x: (window.innerWidth - 600) / 2,
-    y: (window.innerHeight - 400) / 2,
+    y: (window.innerHeight - 420) / 2,
   });
 
   function handleMouseup(e) {