116 lines
3.1 KiB
JavaScript
116 lines
3.1 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import Stack from "@mui/material/Stack";
|
|
import FavBtn from "./FavBtn";
|
|
import Typography from "@mui/material/Typography";
|
|
import AudioBtn from "./AudioBtn";
|
|
import CircularProgress from "@mui/material/CircularProgress";
|
|
import Alert from "@mui/material/Alert";
|
|
import { OPT_TRANS_BAIDU, PHONIC_MAP } from "../../config";
|
|
import { apiTranslate } from "../../apis";
|
|
import { isValidWord } from "../../libs/utils";
|
|
import CopyBtn from "./CopyBtn";
|
|
|
|
export default function DictCont({ text }) {
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
const [dictResult, setDictResult] = useState(null);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError("");
|
|
setDictResult(null);
|
|
|
|
if (!isValidWord(text)) {
|
|
return;
|
|
}
|
|
|
|
const dictRes = await apiTranslate({
|
|
text,
|
|
translator: OPT_TRANS_BAIDU,
|
|
fromLang: "en",
|
|
toLang: "zh-CN",
|
|
});
|
|
|
|
if (dictRes[2]?.type === 1) {
|
|
setDictResult(JSON.parse(dictRes[2].result));
|
|
}
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
})();
|
|
}, [text]);
|
|
|
|
if (error) {
|
|
return <Alert severity="error">{error}</Alert>;
|
|
}
|
|
|
|
if (loading) {
|
|
return <CircularProgress size={16} />;
|
|
}
|
|
|
|
if (!text || !dictResult) {
|
|
return;
|
|
}
|
|
|
|
const copyText = [
|
|
dictResult.src,
|
|
dictResult.voice
|
|
?.map(Object.entries)
|
|
.map((item) => item[0])
|
|
.map(([key, val]) => `${PHONIC_MAP[key]?.[0] || key} ${val}`)
|
|
.join(" "),
|
|
dictResult.content[0].mean
|
|
.map(({ pre, cont }) => {
|
|
return `${pre ? `[${pre}] ` : ""}${Object.keys(cont).join("; ")}`;
|
|
})
|
|
.join("\n"),
|
|
].join("\n");
|
|
|
|
return (
|
|
<Stack spacing={1}>
|
|
<Stack direction="row" justifyContent="space-between">
|
|
<Typography variant="subtitle1" style={{ fontWeight: "bold" }}>
|
|
{dictResult.src}
|
|
</Typography>
|
|
<Stack direction="row" justifyContent="space-between">
|
|
<CopyBtn text={copyText} />
|
|
<FavBtn word={dictResult.src} />
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Typography component="div">
|
|
<Typography component="div">
|
|
{dictResult.voice
|
|
?.map(Object.entries)
|
|
.map((item) => item[0])
|
|
.map(([key, val]) => (
|
|
<Typography
|
|
component="div"
|
|
key={key}
|
|
style={{ display: "inline-block" }}
|
|
>
|
|
<Typography component="span">{`${
|
|
PHONIC_MAP[key]?.[0] || key
|
|
} ${val}`}</Typography>
|
|
<AudioBtn text={dictResult.src} lan={PHONIC_MAP[key]?.[1]} />
|
|
</Typography>
|
|
))}
|
|
</Typography>
|
|
|
|
<Typography component="ul">
|
|
{dictResult.content[0].mean.map(({ pre, cont }, idx) => (
|
|
<Typography component="li" key={idx}>
|
|
{pre && `[${pre}] `}
|
|
{Object.keys(cont).join("; ")}
|
|
</Typography>
|
|
))}
|
|
</Typography>
|
|
</Typography>
|
|
</Stack>
|
|
);
|
|
}
|