feat: retry button

Author: geekdada

src/components/svg/Refresh.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default function Refresh(): React.ReactElement {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ width="16"
+ height="16"
+ viewBox="0 0 24 24"
+ stroke="currentColor">
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth={2}
+ d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+ />
+ </svg>
+ )
+}

src/pages/Content/components/TranslationItem.tsx renamed to src/pages/Content/components/TranslationItem/index.tsx

@@ -5,22 +5,25 @@ import { Collapse } from 'react-collapse'
 import scrollParent from 'scrollparent'
 import tw, { css } from 'twin.macro'
 
-import logger from '../../../common/logger'
-import { TranslateResult } from '../../../common/types'
-import IconButton from '../../../components/IconButton'
-import ArrowRight from '../../../components/svg/ArrowRight'
-import ClipboardCopy from '../../../components/svg/ClipboardCopy'
-import client from '../common/client'
-import { TranslateJob } from '../common/types'
-import { cleanText } from '../common/utils'
-import { useConfig } from '../providers/config'
+import logger from '../../../../common/logger'
+import { TranslateResult } from '../../../../common/types'
+import IconButton from '../../../../components/IconButton'
+import ArrowRight from '../../../../components/svg/ArrowRight'
+import ClipboardCopy from '../../../../components/svg/ClipboardCopy'
+import Refresh from '../../../../components/svg/Refresh'
+import client from '../../common/client'
+import { TranslateJob } from '../../common/types'
+import { cleanText } from '../../common/utils'
+import { useConfig } from '../../providers/config'
 
 const TranslationItem: React.FC<{
  job: TranslateJob
 }> = ({ job }) => {
  const config = useConfig()
  const [loading, setLoading] = useState(true)
+ const [error, setError] = useState<string>()
  const [result, setResult] = useState<string[]>()
+ const [dirty, setDirty] = useState(0)
  const [collapse, setCollapse] = useState(true)
  const { enqueueSnackbar } = useSnackbar()
 
@@ -56,6 +59,10 @@ const TranslationItem: React.FC<{
  }
  }
 
+ const refreshResult = () => {
+ setDirty((val) => val + 1)
+ }
+
  useEffect(() => {
  if (!config) return
 
@@ -85,16 +92,17 @@ const TranslationItem: React.FC<{
  setResult(result)
  setLoading(false)
  })
- .catch((err) => {
+ .catch((err: Error) => {
  logger.error({
  msg: 'translate failed',
  data: err,
  })
 
+ setError(err.message)
  setLoading(false)
  enqueueSnackbar(`翻译失败：${err.message}`, { variant: 'error' })
  })
- }, [job, config])
+ }, [job, config, enqueueSnackbar, dirty])
 
  return (
  <div tw="p-3 text-gray-800 space-y-3 select-text">
@@ -128,6 +136,7 @@ const TranslationItem: React.FC<{
  翻译中…
  </div>
  ) : undefined}
+
  {result ? (
  <div tw="rounded bg-yellow-50 p-3 space-y-2 leading-normal">
  {result.map((item, index) => (
@@ -163,6 +172,16 @@ const TranslationItem: React.FC<{
  <ClipboardCopy />
  </Clipboard>
  ) : undefined}
+
+ {!loading && error ? (
+ <IconButton
+ tw="p-1 border-red-500 bg-red-100 text-red-500 hover:bg-red-200"
+ onClick={() => refreshResult()}
+ title="重试">
+ <Refresh />
+ </IconButton>
+ ) : undefined}
+
  <IconButton
  tw="p-1"
  onClick={() => findOriginal()}