From 782845f1a7c521c92303ca2914e01f5fed813567 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 16 Dec 2024 16:51:12 +0800
Subject: [PATCH] fix: header text

---
 .../datasets/hit-testing/hit-detail.tsx       | 68 -------------------
 .../components/datasets/hit-testing/index.tsx | 43 +++---------
 .../datasets/hit-testing/style.module.css     | 30 +++-----
 3 files changed, 18 insertions(+), 123 deletions(-)
 delete mode 100644 web/app/components/datasets/hit-testing/hit-detail.tsx

diff --git a/web/app/components/datasets/hit-testing/hit-detail.tsx b/web/app/components/datasets/hit-testing/hit-detail.tsx
deleted file mode 100644
index d2129ef1ae..0000000000
--- a/web/app/components/datasets/hit-testing/hit-detail.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { FC } from 'react'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { SegmentIndexTag } from '../documents/detail/completed/common/segment-index-tag'
-import s from '../documents/detail/completed/style.module.css'
-import cn from '@/utils/classnames'
-import type { SegmentDetailModel } from '@/models/datasets'
-import Divider from '@/app/components/base/divider'
-
-type IHitDetailProps = {
-  segInfo?: Partial<SegmentDetailModel> & { id: string }
-}
-
-const HitDetail: FC<IHitDetailProps> = ({ segInfo }) => {
-  const { t } = useTranslation()
-
-  const renderContent = () => {
-    if (segInfo?.answer) {
-      return (
-        <>
-          <div className='mt-2 mb-1 text-xs font-medium text-gray-500'>QUESTION</div>
-          <div className='mb-4 text-md text-gray-800'>{segInfo.content}</div>
-          <div className='mb-1 text-xs font-medium text-gray-500'>ANSWER</div>
-          <div className='text-md text-gray-800'>{segInfo.answer}</div>
-        </>
-      )
-    }
-
-    return <div className='mb-4 text-md text-gray-800 h-full'>{segInfo?.content}</div>
-  }
-
-  return (
-    segInfo?.id === 'external'
-      ? <div className='w-full overflow-x-auto px-2'>
-        <div className={s.segModalContent}>{renderContent()}</div>
-      </div>
-      : <div className='overflow-x-auto'>
-        <div className="flex items-center">
-          <SegmentIndexTag
-            positionId={segInfo?.position || ''}
-            className="w-fit mr-6"
-          />
-          <div className={cn(s.commonIcon, s.typeSquareIcon)} />
-          <span className={cn('mr-6', s.numberInfo)}>
-            {segInfo?.word_count} {t('datasetDocuments.segment.characters', { count: segInfo?.word_count || 0 })}
-          </span>
-          <div className={cn(s.commonIcon, s.targetIcon)} />
-          <span className={s.numberInfo}>
-            {segInfo?.hit_count} {t('datasetDocuments.segment.hitCount')}
-          </span>
-        </div>
-        <Divider />
-        <div className={s.segModalContent}>{renderContent()}</div>
-        <div className={s.keywordTitle}>
-          {t('datasetDocuments.segment.keywords')}
-        </div>
-        <div className={s.keywordWrapper}>
-          {!segInfo?.keywords?.length
-            ? '-'
-            : segInfo?.keywords?.map((word, index) => {
-              return <div key={index} className={s.keyword}>{word}</div>
-            })}
-        </div>
-      </div>
-  )
-}
-
-export default HitDetail
diff --git a/web/app/components/datasets/hit-testing/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index 9596b4394f..99f031c0ea 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -9,11 +9,10 @@ import { useContext } from 'use-context-selector'
 import SegmentCard from '../documents/detail/completed/SegmentCard'
 import Textarea from './textarea'
 import s from './style.module.css'
-// import HitDetail from './hit-detail'
 import ModifyRetrievalModal from './modify-retrieval-modal'
 import ResultItem from './components/result-item'
 import cn from '@/utils/classnames'
-import type { ExternalKnowledgeBaseHitTestingResponse, ExternalKnowledgeBaseHitTesting as ExternalKnowledgeBaseHitTestingType, HitTestingResponse, HitTesting as HitTestingType } from '@/models/datasets'
+import type { ExternalKnowledgeBaseHitTestingResponse, HitTestingResponse } from '@/models/datasets'
 import Loading from '@/app/components/base/loading'
 import Drawer from '@/app/components/base/drawer'
 import Pagination from '@/app/components/base/pagination'
@@ -49,11 +48,8 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
   const isMobile = media === MediaType.mobile
 
   const [hitResult, setHitResult] = useState<HitTestingResponse | undefined>() // 初始化记录为空数组
-  // console.log(hitResult?.records)
   const [externalHitResult, setExternalHitResult] = useState<ExternalKnowledgeBaseHitTestingResponse | undefined>()
   const [submitLoading, setSubmitLoading] = useState(false)
-  const [currParagraph, setCurrParagraph] = useState<{ paraInfo?: HitTestingType; showModal: boolean }>({ showModal: false })
-  const [externalCurrParagraph, setExternalCurrParagraph] = useState<{ paraInfo?: ExternalKnowledgeBaseHitTestingType; showModal: boolean }>({ showModal: false })
   const [text, setText] = useState('')
 
   const [currPage, setCurrPage] = React.useState<number>(0)
@@ -103,10 +99,10 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
 
   return (
     <div className={s.container}>
-      <div className={s.leftDiv}>
-        <div className={s.titleWrapper}>
-          <h1 className={s.title}>{t('datasetHitTesting.title')}</h1>
-          <p className={s.desc}>{t('datasetHitTesting.desc')}</p>
+      <div className='px-6 py-3 flex flex-col'>
+        <div className='flex flex-col justify-center mb-4'>
+          <h1 className='text-base font-semibold text-text-primary'>{t('datasetHitTesting.title')}</h1>
+          <p className='mt-0.5 text-[13px] leading-4 font-normal text-text-tertiary'>{t('datasetHitTesting.desc')}</p>
         </div>
         <Textarea
           datasetId={datasetId}
@@ -123,7 +119,7 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
           retrievalConfig={retrievalConfig}
           isEconomy={currentDataset?.indexing_technique === 'economy'}
         />
-        <div className={cn(s.title, 'mt-8 mb-2')}>{t('datasetHitTesting.records')}</div>
+        <div className='text-xl font-medium text-gray-900 mt-8 mb-2'>{t('datasetHitTesting.records')}</div>
         {(!recordsRes && !error)
           ? (
             <div className='flex-1'><Loading type='app' /></div>
@@ -132,7 +128,7 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
             ? (
               <>
                 <div className='grow overflow-y-auto'>
-                  <table className={`w-full border-collapse border-0 mt-3 ${s.table}`}>
+                  <table className={'w-full border-collapse border-0 mt-3 text-[13px] text-gray-500'}>
                     <thead className="sticky top-0 h-8 bg-white leading-8 border-b border-gray-200 text-gray-500 font-bold">
                       <tr>
                         <td className='w-28'>{t('datasetHitTesting.table.header.source')}</td>
@@ -172,7 +168,7 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
             )}
       </div>
       <FloatRightContainer panelClassname='!justify-start !overflow-y-auto' showClose isMobile={isMobile} isOpen={isShowRightPanel} onClose={hideRightPanel} footer={null}>
-        <div className={cn(s.rightDiv, 'pt-3')}>
+        <div className='flex flex-col pt-3'>
           {/* {renderHitResults(generalResultData)} */}
           {submitLoading
             ? <SegmentCard
@@ -194,29 +190,6 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
           }
         </div>
       </FloatRightContainer>
-      {/* <Modal
-        className={isExternal ? 'py-10 px-8' : 'w-full'}
-        closable
-        onClose={() => {
-          setCurrParagraph({ showModal: false })
-          setExternalCurrParagraph({ showModal: false })
-        }}
-        isShow={currParagraph.showModal || externalCurrParagraph.showModal}
-      >
-        {currParagraph.showModal && (
-          <HitDetail
-            segInfo={currParagraph.paraInfo?.segment}
-          />
-        )}
-        {externalCurrParagraph.showModal && (
-          <HitDetail
-            segInfo={{
-              id: 'external',
-              content: externalCurrParagraph.paraInfo?.content,
-            }}
-          />
-        )}
-      </Modal> */}
       <Drawer isOpen={isShowModifyRetrievalModal} onClose={() => setIsShowModifyRetrievalModal(false)} footer={null} mask={isMobile} panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
         <ModifyRetrievalModal
           indexMethod={currentDataset?.indexing_technique || ''}
diff --git a/web/app/components/datasets/hit-testing/style.module.css b/web/app/components/datasets/hit-testing/style.module.css
index 7d83b8abb6..94a70305c6 100644
--- a/web/app/components/datasets/hit-testing/style.module.css
+++ b/web/app/components/datasets/hit-testing/style.module.css
@@ -1,42 +1,30 @@
 .container {
   @apply flex h-full w-full relative overflow-y-auto;
 }
-.container > div {
+
+.container>div {
   @apply flex-1 h-full;
 }
-.leftDiv {
-  @apply px-6 py-3 flex flex-col;
-}
-.rightDiv {
-  @apply flex flex-col;
-}
-.titleWrapper {
-  @apply flex flex-col justify-center gap-1 mb-5;
-}
-.title {
-  @apply text-xl font-medium text-gray-900;
-}
-.desc {
-  @apply text-sm font-normal text-gray-500;
-}
-.table {
-  @apply text-[13px] text-gray-500;
-}
+
 .table td {
   @apply whitespace-nowrap overflow-hidden text-ellipsis;
 }
+
 .commonIcon {
   @apply w-3.5 h-3.5 inline-block align-middle;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
 }
+
 .app_icon {
   background-image: url(./assets/grid.svg);
 }
+
 .hit_testing_icon {
   background-image: url(../documents/assets/target.svg);
 }
+
 .plugin_icon {
   background-image: url(./assets/plugin.svg);
 }
@@ -51,11 +39,13 @@
   grid-gap: 16px;
   grid-auto-rows: 216px;
 }
+
 .clockWrapper {
   border: 0.5px solid #eaecf5;
   @apply rounded-lg w-11 h-11 flex justify-center items-center;
 }
+
 .clockIcon {
   mask-image: url(./assets/clock.svg);
   @apply bg-gray-500;
-}
+}
\ No newline at end of file