feat: problem endpoint display

Author: CSUwangj

src/i18n/index.ts

@@ -36,6 +36,10 @@ i18n
             'tools': 'Cryptography toolbox prepared for novice (WIP)',
             'visualize': 'Visualize cryptographic algorithm(WIP)',
           },
+          'lab': {
+            'endpoint': 'Endpoint ',
+            'clear': 'Clear'
+          },
           'wip': 'Work In Progress',
           i18n: {
             'en-US': 'English',
@@ -67,6 +71,10 @@ i18n
             'visualize': '图解密码学算法（施工中）',
           },
           'wip': '施工中',
+          'lab': {
+            'endpoint': '服务器 ',
+            'clear': '关闭所有'
+          },
           i18n: {
             'en-US': '英文',
             'zh-CN': '简体中文'

src/pages/practice/Lab.tsx

@@ -46,7 +46,7 @@ interface Match {
 }
 
 export const Page: React.FC = () => {
-  const { i18n } = useTranslation()
+  const { t, i18n } = useTranslation()
   const language = i18n.language
   const { params: { category, lab } } = useRouteMatch<Match>()
   const query = useLabQuery({
@@ -72,10 +72,10 @@ export const Page: React.FC = () => {
                 setTermianls(terminals.concat([endpoint]))
               }
             }
-            return <Button key={id} onClick={onClick}intent={Intent.PRIMARY} outlined={true}>{endpoint.host}</Button>
+            return <Button key={id} onClick={onClick}intent={Intent.PRIMARY} outlined={true}>{t('lab.endpoint') + id.toString()}</Button>
           })
         }
-        <Button onClick={() => setTermianls([])} intent={Intent.DANGER} outlined={true}>clear</Button>
+        <Button onClick={() => setTermianls([])} intent={Intent.DANGER} outlined={true}>{t('lab.clear')}</Button>
       </EndpointContainer>
     </>
   })