From f98b03c85b588f175f8b82ec8a6462aa675e498e Mon Sep 17 00:00:00 2001
From: wznmickey <first@wznmickey.com>
Date: Thu, 23 Feb 2023 22:10:59 -0600
Subject: [PATCH 1/3] feat.add hint button to add new problem

---
 src/pages/ProblemSetDetail/Settings/index.tsx | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/pages/ProblemSetDetail/Settings/index.tsx b/src/pages/ProblemSetDetail/Settings/index.tsx
index 80c5c2b..f3ebfac 100644
--- a/src/pages/ProblemSetDetail/Settings/index.tsx
+++ b/src/pages/ProblemSetDetail/Settings/index.tsx
@@ -1,10 +1,10 @@
 import ProCard from '@ant-design/pro-card'
 import { useRequest } from 'ahooks'
-import { Col, message, Row } from 'antd'
+import { Col, message, Row, Button } from 'antd'
 import ShadowCard from 'components/ShadowCard'
 import type React from 'react'
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import type { ProTablePagination } from 'types'
 import { transPagination } from 'utils'
 import { DEFAULT_GUTTER } from 'utils/constants'
@@ -12,12 +12,15 @@ import { NoDomainUrlError, NoProblemIdError } from 'utils/exception'
 import Horse from 'utils/service'
 import AddExistProblem from './AddExistProblem'
 import DraggableProblemTable from './DraggableProblemTable'
+import { PlusOutlined } from '@ant-design/icons'
+import { useTranslation } from 'react-i18next'
 
 const Index: React.FC = () => {
+  const { t } = useTranslation()
   const [tab, setTab] = useState('tab1')
   const { domainUrl, problemSetId } =
     useParams<{ domainUrl: string; problemSetId: string }>()
-
+  const navigate = useNavigate()
   if (!domainUrl) {
     throw new NoDomainUrlError()
   }
@@ -61,7 +64,23 @@ const Index: React.FC = () => {
       manual: true
     }
   )
-
+  const styleMarginRight = {
+    marginRight: '10px'
+  }
+  const createNewProblem = (
+    <div style={styleMarginRight}>
+      {' '}
+      <Button
+        icon={<PlusOutlined />}
+        onClick={() => {
+          navigate(`/domain/${domainUrl}/create-problem`)
+        }}
+        type='primary'
+      >
+        {t('PROBLEM.CREATE.TITLE')}
+      </Button>{' '}
+    </div>
+  )
   return (
     <Row gutter={DEFAULT_GUTTER}>
       <Col span={24}>
@@ -88,7 +107,8 @@ const Index: React.FC = () => {
               tabs={{
                 activeKey: tab,
                 onChange: setTab,
-                animated: { inkBar: true, tabPane: true }
+                animated: { inkBar: true, tabPane: true },
+                tabBarExtraContent: createNewProblem
               }}
             >
               <ProCard.TabPane key='tab1' tab='Add Existed'>

From b1a5a22810274ede01de5e478d6bdf4cb11735d4 Mon Sep 17 00:00:00 2001
From: wznmickey <first@wznmickey.com>
Date: Fri, 24 Feb 2023 21:35:51 -0600
Subject: [PATCH 2/3] fix.add i18n token

---
 src/pages/ProblemSetDetail/Settings/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ProblemSetDetail/Settings/index.tsx b/src/pages/ProblemSetDetail/Settings/index.tsx
index f3ebfac..7427f08 100644
--- a/src/pages/ProblemSetDetail/Settings/index.tsx
+++ b/src/pages/ProblemSetDetail/Settings/index.tsx
@@ -77,7 +77,7 @@ const Index: React.FC = () => {
         }}
         type='primary'
       >
-        {t('PROBLEM.CREATE.TITLE')}
+        {t('ProblemList.create')}
       </Button>{' '}
     </div>
   )

From 1f1480949394d5c2eb789b77196bb0f27b1a5129 Mon Sep 17 00:00:00 2001
From: wznmickey <first@wznmickey.com>
Date: Sun, 26 Mar 2023 22:14:18 -0500
Subject: [PATCH 3/3] fix.use Tailwind style

---
 src/pages/ProblemSetDetail/Settings/index.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/pages/ProblemSetDetail/Settings/index.tsx b/src/pages/ProblemSetDetail/Settings/index.tsx
index 7427f08..86fa8a5 100644
--- a/src/pages/ProblemSetDetail/Settings/index.tsx
+++ b/src/pages/ProblemSetDetail/Settings/index.tsx
@@ -1,9 +1,11 @@
+import { PlusOutlined } from '@ant-design/icons'
 import ProCard from '@ant-design/pro-card'
 import { useRequest } from 'ahooks'
-import { Col, message, Row, Button } from 'antd'
+import { Button, Col, message, Row } from 'antd'
 import ShadowCard from 'components/ShadowCard'
 import type React from 'react'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useNavigate, useParams } from 'react-router-dom'
 import type { ProTablePagination } from 'types'
 import { transPagination } from 'utils'
@@ -12,8 +14,6 @@ import { NoDomainUrlError, NoProblemIdError } from 'utils/exception'
 import Horse from 'utils/service'
 import AddExistProblem from './AddExistProblem'
 import DraggableProblemTable from './DraggableProblemTable'
-import { PlusOutlined } from '@ant-design/icons'
-import { useTranslation } from 'react-i18next'
 
 const Index: React.FC = () => {
   const { t } = useTranslation()
@@ -64,12 +64,8 @@ const Index: React.FC = () => {
       manual: true
     }
   )
-  const styleMarginRight = {
-    marginRight: '10px'
-  }
   const createNewProblem = (
-    <div style={styleMarginRight}>
-      {' '}
+    <div className='mx-8 space-x-4'>
       <Button
         icon={<PlusOutlined />}
         onClick={() => {
@@ -78,7 +74,7 @@ const Index: React.FC = () => {
         type='primary'
       >
         {t('ProblemList.create')}
-      </Button>{' '}
+      </Button>
     </div>
   )
   return (