feat: fe mobile responsive next (#1609)

2023-11-27 11:47:48 +08:00
parent 3cc697832a
commit a9c1c7d239
89 changed files with 768 additions and 485 deletions
--- a/web/app/components/datasets/hit-testing/hit-detail.tsx
+++ b/web/app/components/datasets/hit-testing/hit-detail.tsx
@@ -65,8 +65,8 @@ const HitDetail: FC<IHitDetailProps> = ({ segInfo, vectorInfo }) => {
  }

  return (
-    <div className={'flex flex-row'}>
-      <div className="flex-1 bg-gray-25 p-6">
+    <div className='flex flex-row overflow-x-auto'>
+      <div className="flex-1 bg-gray-25 p-6 min-w-[300px]">
        <div className="flex items-center">
          <SegmentIndexTag
            positionId={segInfo?.position || ''}
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -1,11 +1,12 @@
 'use client'
 import type { FC } from 'react'
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 import { omit } from 'lodash-es'
 import cn from 'classnames'
 import dayjs from 'dayjs'
+import { useBoolean } from 'ahooks'
 import { useContext } from 'use-context-selector'
 import SegmentCard from '../documents/detail/completed/SegmentCard'
 import docStyle from '../documents/detail/completed/style.module.css'
@@ -17,9 +18,11 @@ import type { HitTestingResponse, HitTesting as HitTestingType } from '@/models/
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
 import Pagination from '@/app/components/base/pagination'
+import FloatRightContainer from '@/app/components/base/float-right-container'
 import { fetchTestingRecords } from '@/service/datasets'
 import DatasetDetailContext from '@/context/dataset-detail'
 import type { RetrievalConfig } from '@/types/app'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'

 const limit = 10

@@ -39,6 +42,10 @@ const RecordsEmpty: FC = () => {

 const HitTesting: FC<Props> = ({ datasetId }: Props) => {
  const { t } = useTranslation()
+
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
  const [hitResult, setHitResult] = useState<HitTestingResponse | undefined>() // 初始化记录为空数组
  const [submitLoading, setSubmitLoading] = useState(false)
  const [currParagraph, setCurrParagraph] = useState<{ paraInfo?: HitTestingType; showModal: boolean }>({ showModal: false })
@@ -63,6 +70,11 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {

  const [retrievalConfig, setRetrievalConfig] = useState(currentDataset?.retrieval_model_dict as RetrievalConfig)
  const [isShowModifyRetrievalModal, setIsShowModifyRetrievalModal] = useState(false)
+  const [isShowRightPanel, { setTrue: showRightPanel, setFalse: hideRightPanel, set: setShowRightPanel }] = useBoolean(!isMobile)
+
+  useEffect(() => {
+    setShowRightPanel(!isMobile)
+  }, [isMobile, setShowRightPanel])

  return (
    <div className={s.container}>
@@ -74,6 +86,7 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
        <Textarea
          datasetId={datasetId}
          setHitResult={setHitResult}
+          onSubmit={showRightPanel}
          onUpdateList={recordsMutate}
          loading={submitLoading}
          setLoading={setSubmitLoading}
@@ -131,53 +144,56 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
              <RecordsEmpty />
            )}
      </div>
-      <div className={s.rightDiv}>
-        {submitLoading
-          ? <div className={s.cardWrapper}>
-            <SegmentCard
-              loading={true}
-              scene='hitTesting'
-              className='h-[216px]'
-            />
-            <SegmentCard
-              loading={true}
-              scene='hitTesting'
-              className='h-[216px]'
-            />
-          </div>
-          : !hitResult?.records.length
-            ? (
-              <div className='h-full flex flex-col justify-center items-center'>
-                <div className={cn(docStyle.commonIcon, docStyle.targetIcon, '!bg-gray-200 !h-14 !w-14')} />
-                <div className='text-gray-300 text-[13px] mt-3'>
-                  {t('datasetHitTesting.hit.emptyTip')}
-                </div>
-              </div>
-            )
-            : (
-              <>
-                <div className='text-gray-600 font-semibold mb-4'>{t('datasetHitTesting.hit.title')}</div>
-                <div className='overflow-auto flex-1'>
-                  <div className={s.cardWrapper}>
-                    {hitResult?.records.map((record, idx) => {
-                      return <SegmentCard
-                        key={idx}
-                        loading={false}
-                        detail={record.segment as any}
-                        score={record.score}
-                        scene='hitTesting'
-                        className='h-[216px] mb-4'
-                        onClick={() => onClickCard(record as any)}
-                      />
-                    })}
+      <FloatRightContainer panelClassname='!justify-start !overflow-y-auto' showClose isMobile={isMobile} isOpen={isShowRightPanel} onClose={hideRightPanel} footer={null}>
+        <div className={cn(s.rightDiv, 'p-0 sm:px-8 sm:pt-[42px] sm:pb-[26px]')}>
+          {submitLoading
+            ? <div className={s.cardWrapper}>
+              <SegmentCard
+                loading={true}
+                scene='hitTesting'
+                className='h-[216px]'
+              />
+              <SegmentCard
+                loading={true}
+                scene='hitTesting'
+                className='h-[216px]'
+              />
+            </div>
+            : !hitResult?.records.length
+              ? (
+                <div className='h-full flex flex-col justify-center items-center'>
+                  <div className={cn(docStyle.commonIcon, docStyle.targetIcon, '!bg-gray-200 !h-14 !w-14')} />
+                  <div className='text-gray-300 text-[13px] mt-3'>
+                    {t('datasetHitTesting.hit.emptyTip')}
                  </div>
                </div>
-              </>
-            )
-        }
-      </div>
+              )
+              : (
+                <>
+                  <div className='text-gray-600 font-semibold mb-4'>{t('datasetHitTesting.hit.title')}</div>
+                  <div className='overflow-auto flex-1'>
+                    <div className={s.cardWrapper}>
+                      {hitResult?.records.map((record, idx) => {
+                        return <SegmentCard
+                          key={idx}
+                          loading={false}
+                          detail={record.segment as any}
+                          score={record.score}
+                          scene='hitTesting'
+                          className='h-[216px] mb-4'
+                          onClick={() => onClickCard(record as any)}
+                        />
+                      })}
+                    </div>
+                  </div>
+                </>
+              )
+          }
+        </div>
+      </FloatRightContainer>
      <Modal
        className='!max-w-[960px] !p-0'
+        wrapperClassName='!z-40'
        closable
        onClose={() => setCurrParagraph({ showModal: false })}
        isShow={currParagraph.showModal}
--- a/web/app/components/datasets/hit-testing/style.module.css
+++ b/web/app/components/datasets/hit-testing/style.module.css
@@ -1,5 +1,5 @@
 .container {
-  @apply flex h-full w-full relative;
+  @apply flex h-full w-full relative overflow-y-auto;
 }
 .container > div {
  @apply flex-1 h-full;
@@ -8,7 +8,7 @@
  @apply border-r border-gray-100 px-6 py-3 flex flex-col;
 }
 .rightDiv {
-  @apply px-8 pt-[42px] pb-[26px] flex flex-col;
+  @apply flex flex-col;
 }
 .titleWrapper {
  @apply flex flex-col justify-center gap-1 mb-5;
--- a/web/app/components/datasets/hit-testing/textarea.tsx
+++ b/web/app/components/datasets/hit-testing/textarea.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
@@ -13,7 +12,7 @@ import { hitTesting } from '@/service/datasets'
 import { asyncRunSafe } from '@/utils'
 import { RETRIEVE_METHOD, type RetrievalConfig } from '@/types/app'

-type Props = {
+type TextAreaWithButtonIProps = {
  datasetId: string
  onUpdateList: () => void
  setHitResult: (res: HitTestingResponse) => void
@@ -24,9 +23,10 @@ type Props = {
  onClickRetrievalMethod: () => void
  retrievalConfig: RetrievalConfig
  isEconomy: boolean
+  onSubmit?: () => void
 }

-const TextAreaWithButton: FC<Props> = ({
+const TextAreaWithButton = ({
  datasetId,
  onUpdateList,
  setHitResult,
@@ -37,7 +37,8 @@ const TextAreaWithButton: FC<Props> = ({
  onClickRetrievalMethod,
  retrievalConfig,
  isEconomy,
-}) => {
+  onSubmit: _onSubmit,
+}: TextAreaWithButtonIProps) => {
  const { t } = useTranslation()
  const { indexingTechnique } = useContext(DatasetDetailContext)

@@ -55,6 +56,7 @@ const TextAreaWithButton: FC<Props> = ({
      onUpdateList?.()
    }
    setLoading(false)
+    _onSubmit && _onSubmit()
  }

  const retrievalMethod = isEconomy ? RETRIEVE_METHOD.invertedIndex : retrievalConfig.search_method