feat: new icons (#5412)

2024-06-20 11:05:08 +08:00
parent 0105129fa8
commit 2328ed8ffa
338 changed files with 880 additions and 3669 deletions
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
@@ -2,11 +2,13 @@
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import cn from 'classnames'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 import { ToastContext } from '@/app/components/base/toast'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 import Button from '@/app/components/base/button'

 export type Props = {
@@ -113,7 +115,7 @@ const CSVUploader: FC<Props> = ({
              <Button className='!h-8 !px-3 !py-[6px] bg-white !text-[13px] !leading-[18px] text-gray-700' onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
              <div className='mx-2 w-px h-4 bg-gray-200' />
              <div className='p-2 cursor-pointer' onClick={removeFile}>
-                <Trash03 className='w-4 h-4 text-gray-500' />
+                <RiDeleteBinLine className='w-4 h-4 text-gray-500' />
              </div>
            </div>
          </div>
--- a/web/app/components/datasets/documents/detail/batch-modal/index.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/index.tsx
@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
 import CSVUploader from './csv-uploader'
 import CSVDownloader from './csv-downloader'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
-import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import type { DocForm } from '@/models/datasets'

 export type IBatchModalProps = {
@@ -42,7 +42,7 @@ const BatchModal: FC<IBatchModalProps> = ({
    <Modal isShow={isShow} onClose={() => { }} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
      <div className='relative pb-1 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetDocuments.list.batchModal.title')}</div>
      <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onCancel}>
-        <XClose className='w-4 h-4 text-gray-500' />
+        <RiCloseLine className='w-4 h-4 text-gray-500' />
      </div>
      <CSVUploader
        file={currentCSV}
--- a/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
+++ b/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
@@ -3,6 +3,10 @@ import React, { useState } from 'react'
 import cn from 'classnames'
 import { ArrowUpRightIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+  RiErrorWarningFill,
+} from '@remixicon/react'
 import { StatusItem } from '../../list'
 import { DocumentTitle } from '../index'
 import s from './style.module.css'
@@ -14,8 +18,6 @@ import Divider from '@/app/components/base/divider'
 import Indicator from '@/app/components/header/indicator'
 import { formatNumber } from '@/utils/format'
 import type { SegmentDetailModel } from '@/models/datasets'
-import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'

 const ProgressBar: FC<{ percent: number; loading: boolean }> = ({ percent, loading }) => {
  return (
@@ -188,7 +190,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                    e.stopPropagation()
                    setShowModal(true)
                  }}>
-                    <Trash03 className='w-[14px] h-[14px] text-gray-500 group-hover/delete:text-red-600' />
+                    <RiDeleteBinLine className='w-[14px] h-[14px] text-gray-500 group-hover/delete:text-red-600' />
                  </div>
                )}
              </div>
@@ -218,7 +220,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
      {showModal && <Modal isShow={showModal} onClose={() => setShowModal(false)} className={s.delModal} closable>
        <div>
          <div className={s.warningWrapper}>
-            <AlertCircle className='w-6 h-6 text-red-600' />
+            <RiErrorWarningFill className='w-6 h-6 text-red-600' />
          </div>
          <div className='text-xl font-semibold text-gray-900 mb-1'>{t('datasetDocuments.segment.delete')}</div>
          <div className='flex gap-2 justify-end'>
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -6,6 +6,10 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { debounce, isNil, omitBy } from 'lodash-es'
 import cn from 'classnames'
+import {
+  RiCloseLine,
+  RiEditLine,
+} from '@remixicon/react'
 import { StatusItem } from '../../list'
 import { DocumentContext } from '../index'
 import { ProcessStatus } from '../segment-add'
@@ -23,7 +27,6 @@ import { deleteSegment, disableSegment, enableSegment, fetchSegments, updateSegm
 import type { SegmentDetailModel, SegmentUpdator, SegmentsQuery, SegmentsResponse } from '@/models/datasets'
 import { asyncRunSafe } from '@/utils'
 import type { CommonResponse } from '@/models/common'
-import { Edit03, XClose } from '@/app/components/base/icons/src/vender/line/general'
 import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common'
 import Button from '@/app/components/base/button'
 import NewSegmentModal from '@/app/components/datasets/documents/detail/new-segment-modal'
@@ -152,13 +155,13 @@ const SegmentDetailComponent: FC<ISegmentDetailProps> = ({
          <>
            <div className='group relative flex justify-center items-center w-6 h-6 hover:bg-gray-100 rounded-md cursor-pointer'>
              <div className={cn(s.editTip, 'hidden items-center absolute -top-10 px-3 h-[34px] bg-white rounded-lg whitespace-nowrap text-xs font-semibold text-gray-700 group-hover:flex')}>{t('common.operation.edit')}</div>
-              <Edit03 className='w-4 h-4 text-gray-500' onClick={() => setIsEditing(true)} />
+              <RiEditLine className='w-4 h-4 text-gray-500' onClick={() => setIsEditing(true)} />
            </div>
            <div className='mx-3 w-[1px] h-3 bg-gray-200' />
          </>
        )}
        <div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={onCancel}>
-          <XClose className='w-4 h-4 text-gray-500' />
+          <RiCloseLine className='w-4 h-4 text-gray-500' />
        </div>
      </div>
      <SegmentIndexTag positionId={segInfo?.position || ''} className='w-fit mt-[2px] mb-6' />
--- a/web/app/components/datasets/documents/detail/new-segment-modal.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment-modal.tsx
@@ -3,10 +3,11 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useParams } from 'next/navigation'
+import { RiCloseLine } from '@remixicon/react'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common'
-import { Hash02, XClose } from '@/app/components/base/icons/src/vender/line/general'
+import { Hash02 } from '@/app/components/base/icons/src/vender/line/general'
 import { ToastContext } from '@/app/components/base/toast'
 import type { SegmentUpdator } from '@/models/datasets'
 import { addSegment } from '@/service/datasets'
@@ -114,7 +115,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
      <div className={'flex flex-col relative'}>
        <div className='absolute right-0 -top-0.5 flex items-center h-6'>
          <div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={handleCancel}>
-            <XClose className='w-4 h-4 text-gray-500' />
+            <RiCloseLine className='w-4 h-4 text-gray-500' />
          </div>
        </div>
        <div className='mb-[14px]'>
--- a/web/app/components/datasets/documents/detail/segment-add/index.tsx
+++ b/web/app/components/datasets/documents/detail/segment-add/index.tsx
@@ -3,9 +3,11 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import {
+  RiErrorWarningFill,
+  RiLoader2Line,
+} from '@remixicon/react'
 import { FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
-import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
-import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import Popover from '@/app/components/base/popover'

@@ -38,7 +40,7 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
          <div className='relative overflow-hidden inline-flex items-center mr-2 px-3 py-[6px] text-blue-700 bg-[#F5F8FF] rounded-lg border border-black/5'>
            {importStatus === ProcessStatus.WAITING && <div className='absolute left-0 top-0 w-3/12 h-full bg-[#D1E0FF] z-0'/>}
            {importStatus === ProcessStatus.PROCESSING && <div className='absolute left-0 top-0 w-2/3 h-full bg-[#D1E0FF] z-0'/>}
-            <Loading02 className='animate-spin mr-2 w-4 h-4' />
+            <RiLoader2Line className='animate-spin mr-2 w-4 h-4' />
            <span className='font-medium text-[13px] leading-[18px] z-10'>{t('datasetDocuments.list.batchModal.processing')}</span>
          </div>
        )}
@@ -51,7 +53,7 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
        )}
        {importStatus === ProcessStatus.ERROR && (
          <div className='inline-flex items-center mr-2 px-3 py-[6px] text-red-600 bg-red-100 rounded-lg border border-black/5'>
-            <AlertCircle className='mr-2 w-4 h-4 text-[#D92D20]' />
+            <RiErrorWarningFill className='mr-2 w-4 h-4 text-[#D92D20]' />
            <span className='font-medium text-[13px] leading-[18px]'>{t('datasetDocuments.list.batchModal.error')}</span>
            <span className='pl-2 font-medium text-[13px] leading-[18px] text-[#155EEF] cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
          </div>
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -6,6 +6,10 @@ import { useBoolean, useDebounceFn } from 'ahooks'
 import { ArrowDownIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { ExclamationCircleIcon } from '@heroicons/react/24/solid'
 import { pick } from 'lodash-es'
+import {
+  RiMoreFill,
+  RiQuestionLine,
+} from '@remixicon/react'
 import { useContext } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
@@ -32,7 +36,6 @@ import NotionIcon from '@/app/components/base/notion-icon'
 import ProgressBar from '@/app/components/base/progress-bar'
 import { DataSourceType, type DocumentDisplayStatus, type SimpleDocumentDetail } from '@/models/datasets'
 import type { CommonResponse } from '@/models/common'
-import { DotsHorizontal, HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import useTimestamp from '@/hooks/use-timestamp'

 export const SettingsIcon = ({ className }: SVGProps<SVGElement>) => {
@@ -98,7 +101,7 @@ export const StatusItem: FC<{
            <div className='max-w-[260px] break-all'>{errorMessage}</div>
          }
        >
-          <HelpCircle className='ml-1 w-[14px] h-[14px] text-gray-700' />
+          <RiQuestionLine className='ml-1 w-[14px] h-[14px] text-gray-700' />
        </Tooltip>
      )
    }
@@ -284,7 +287,7 @@ export const OperationAction: FC<{
        position='br'
        btnElement={
          <div className={cn(s.commonIcon)}>
-            <DotsHorizontal className='w-4 h-4 text-gray-700' />
+            <RiMoreFill className='w-4 h-4 text-gray-700' />
          </div>
        }
        btnClassName={open => cn(isListScene ? s.actionIconWrapperList : s.actionIconWrapperDetail, open ? '!bg-gray-100 !shadow-none' : '!bg-transparent')}