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/workflow/nodes/_base/components/add-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-button.tsx
@@ -2,7 +2,9 @@
 import type { FC } from 'react'
 import React from 'react'
 import cn from 'classnames'
-import { Plus } from '@/app/components/base/icons/src/vender/line/general'
+import {
+  RiAddLine,
+} from '@remixicon/react'

 type Props = {
  className?: string
@@ -20,7 +22,7 @@ const AddButton: FC<Props> = ({
      className={cn(className, 'flex items-center h-7 justify-center bg-gray-100 hover:bg-gray-200 rounded-lg cursor-pointer text-xs font-medium text-gray-700 space-x-1')}
      onClick={onClick}
    >
-      <Plus className='w-3.5 h-3.5' />
+      <RiAddLine className='w-3.5 h-3.5' />
      <div>{text}</div>
    </div>
  )
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -3,6 +3,9 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import produce from 'immer'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import type { InputVar } from '../../../../types'
 import { BlockEnum, InputVarType } from '../../../../types'
 import CodeEditor from '../editor/code-editor'
@@ -11,7 +14,6 @@ import TextEditor from '../editor/text-editor'
 import Select from '@/app/components/base/select'
 import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
 import { Resolution } from '@/types/app'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 import { useFeatures } from '@/app/components/base/features/hooks'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
@@ -174,7 +176,7 @@ const FormItem: FC<Props> = ({
                  title={<span>JSON</span>}
                  headerRight={
                    (value as any).length > 1
-                      ? (<Trash03
+                      ? (<RiDeleteBinLine
                        onClick={handleArrayItemRemove(index)}
                        className='mr-1 w-3.5 h-3.5 text-gray-500 cursor-pointer'
                      />)
@@ -200,7 +202,7 @@ const FormItem: FC<Props> = ({
                  onChange={handleArrayItemChange(index)}
                  headerRight={
                    (value as any).length > 1
-                      ? (<Trash03
+                      ? (<RiDeleteBinLine
                        onClick={handleArrayItemRemove(index)}
                        className='mr-1 w-3.5 h-3.5 text-gray-500 cursor-pointer'
                      />)
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
@@ -3,11 +3,14 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import {
+  RiCloseLine,
+  RiLoader2Line,
+} from '@remixicon/react'
 import type { Props as FormProps } from './form'
 import Form from './form'
 import Button from '@/app/components/base/button'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
-import { Loading02, XClose } from '@/app/components/base/icons/src/vender/line/general'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import { InputVarType, NodeRunningStatus } from '@/app/components/workflow/types'
 import ResultPanel from '@/app/components/workflow/run/result-panel'
@@ -114,7 +117,7 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
            {t(`${i18nPrefix}.testRun`)} {nodeName}
          </div>
          <div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={onHide}>
-            <XClose className='w-4 h-4 text-gray-500 ' />
+            <RiCloseLine className='w-4 h-4 text-gray-500 ' />
          </div>
        </div>

@@ -142,7 +145,7 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
              </div>
            )}
            <Button disabled={!isFileLoaded || isRunning} variant='primary' className='w-0 grow !h-8 flex items-center space-x-2 text-[13px]' onClick={handleRun}>
-              {isRunning && <Loading02 className='animate-spin w-4 h-4 text-white' />}
+              {isRunning && <RiLoader2Line className='animate-spin w-4 h-4 text-white' />}
              <div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div>
            </Button>
          </div>
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -5,7 +5,10 @@ import copy from 'copy-to-clipboard'
 import cn from 'classnames'
 import Wrap from './wrap'
 import PromptEditorHeightResizeWrap from '@/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap'
-import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
+import {
+  Clipboard,
+  ClipboardCheck,
+} from '@/app/components/base/icons/src/vender/line/files'
 import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/toggle-expand-btn'
 import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'

--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -2,11 +2,13 @@
 import type { FC } from 'react'
 import React from 'react'
 import cn from 'classnames'
+import {
+  RiArrowDownSLine,
+  RiQuestionLine,
+} from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import type { DefaultTFuncReturn } from 'i18next'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
-import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'

 type Props = {
  className?: string
@@ -42,7 +44,7 @@ const Filed: FC<Props> = ({
              <div className='w-[120px]'>
                {tooltip}
              </div>}>
-              <HelpCircle className='w-3.5 h-3.5 ml-0.5 text-gray-400' />
+              <RiQuestionLine className='w-3.5 h-3.5 ml-0.5 text-gray-400' />
            </TooltipPlus>
          )}

@@ -50,7 +52,7 @@ const Filed: FC<Props> = ({
        <div className='flex'>
          {operations && <div>{operations}</div>}
          {supportFold && (
-            <ChevronRight className='w-3.5 h-3.5 text-gray-500 cursor-pointer transform transition-transform' style={{ transform: fold ? 'rotate(0deg)' : 'rotate(90deg)' }} />
+            <RiArrowDownSLine className='w-3.5 h-3.5 text-gray-500 cursor-pointer transform transition-transform' style={{ transform: fold ? 'rotate(0deg)' : 'rotate(90deg)' }} />
          )}
        </div>
      </div>
--- a/web/app/components/workflow/nodes/_base/components/help-link.tsx
+++ b/web/app/components/workflow/nodes/_base/components/help-link.tsx
@@ -1,8 +1,8 @@
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiBookOpenLine } from '@remixicon/react'
 import { useNodeHelpLink } from '../hooks/use-node-help-link'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
-import { BookOpen02 } from '@/app/components/base/icons/src/vender/line/education'
 import type { BlockEnum } from '@/app/components/workflow/types'

 type HelpLinkProps = {
@@ -21,7 +21,7 @@ const HelpLink = ({
        target='_blank'
        className='flex items-center justify-center mr-1 w-6 h-6'
      >
-        <BookOpen02 className='w-4 h-4 text-gray-500' />
+        <RiBookOpenLine className='w-4 h-4 text-gray-500' />
      </a>
    </TooltipPlus>

--- a/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
@@ -3,13 +3,15 @@ import {
  useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+} from '@remixicon/react'
 import {
  useAvailableBlocks,
  useNodesInteractions,
  useNodesReadOnly,
 } from '@/app/components/workflow/hooks'
 import BlockSelector from '@/app/components/workflow/block-selector'
-import { Plus } from '@/app/components/base/icons/src/vender/line/general'
 import type {
  CommonNodeType,
  OnSelectBlock,
@@ -66,7 +68,7 @@ const Add = ({
          )
        }
        <div className='flex items-center justify-center mr-1.5 w-5 h-5 rounded-[5px] bg-gray-200'>
-          <Plus className='w-3 h-3' />
+          <RiAddLine className='w-3 h-3' />
        </div>
        {t('workflow.panel.selectNextStep')}
      </div>
--- a/web/app/components/workflow/nodes/_base/components/node-control.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-control.tsx
@@ -5,6 +5,9 @@ import {
  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiPlayLargeLine,
+} from '@remixicon/react'
 import {
  useNodeDataUpdate,
  useNodesInteractions,
@@ -14,7 +17,6 @@ import type { Node } from '../../../types'
 import { canRunBySingle } from '../../../utils'
 import PanelOperator from './panel-operator'
 import {
-  Play,
  Stop,
 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
@@ -69,7 +71,7 @@ const NodeControl: FC<NodeControlProps> = ({
                    <TooltipPlus
                      popupContent={t('workflow.panel.runThisStep')}
                    >
-                      <Play className='w-3 h-3' />
+                      <RiPlayLargeLine className='w-3 h-3' />
                    </TooltipPlus>
                  )
              }
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
@@ -3,9 +3,9 @@ import {
  useCallback,
  useState,
 } from 'react'
+import { RiMoreFill } from '@remixicon/react'
 import type { OffsetOptions } from '@floating-ui/react'
 import PanelOperatorPopup from './panel-operator-popup'
-import { DotsHorizontal } from '@/app/components/base/icons/src/vender/line/general'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
@@ -59,7 +59,7 @@ const PanelOperator = ({
            ${triggerClassName}
          `}
        >
-          <DotsHorizontal className={`w-4 h-4 ${inNode ? 'text-gray-500' : 'text-gray-700'}`} />
+          <RiMoreFill className={`w-4 h-4 ${inNode ? 'text-gray-500' : 'text-gray-700'}`} />
        </div>
      </PortalToFollowElemTrigger>
      <PortalToFollowElemContent className='z-[11]'>
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -2,6 +2,9 @@
 import type { FC } from 'react'
 import React, { useCallback, useRef } from 'react'
 import cn from 'classnames'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
@@ -17,9 +20,11 @@ import { CodeLanguage } from '../../../code/types'
 import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/toggle-expand-btn'
 import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
 import PromptEditor from '@/app/components/base/prompt-editor'
-import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
+import {
+  Clipboard,
+  ClipboardCheck,
+} from '@/app/components/base/icons/src/vender/line/files'
 import s from '@/app/components/app/configuration/config-prompt/style.module.css'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { PROMPT_EDITOR_INSERT_QUICKLY } from '@/app/components/base/prompt-editor/plugins/update-block'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
@@ -153,7 +158,7 @@ const Editor: FC<Props> = ({
                  </TooltipPlus>
                )}
                {showRemove && (
-                  <Trash03 className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={onRemove} />
+                  <RiDeleteBinLine className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={onRemove} />
                )}
                {!isCopied
                  ? (
--- a/web/app/components/workflow/nodes/_base/components/remove-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/remove-button.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import cn from 'classnames'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+import { RiDeleteBinLine } from '@remixicon/react'

 type Props = {
  className?: string
@@ -18,7 +18,7 @@ const Remove: FC<Props> = ({
      className={cn(className, 'p-1 cursor-pointer rounded-md hover:bg-black/5 text-gray-500 hover:text-gray-800')}
      onClick={onClick}
    >
-      <Trash03 className='w-4 h-4' />
+      <RiDeleteBinLine className='w-4 h-4' />
    </div>
  )
 }
--- a/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx
+++ b/web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx
@@ -1,8 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
-import { Expand04 } from '@/app/components/base/icons/src/vender/solid/arrows'
-import { Collapse04 } from '@/app/components/base/icons/src/vender/line/arrows'
+import {
+  RiCollapseDiagonalLine,
+  RiExpandDiagonalLine,
+} from '@remixicon/react'

 type Props = {
  isExpand: boolean
@@ -17,7 +19,7 @@ const ExpandBtn: FC<Props> = ({
    onExpandChange(!isExpand)
  }, [isExpand])

-  const Icon = isExpand ? Collapse04 : Expand04
+  const Icon = isExpand ? RiCollapseDiagonalLine : RiExpandDiagonalLine
  return (
    <Icon className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={handleToggle} />
  )
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -3,6 +3,10 @@ import type { FC } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import {
+  RiArrowDownSLine,
+  RiCloseLine,
+} from '@remixicon/react'
 import produce from 'immer'
 import { useStoreApi } from 'reactflow'
 import VarReferencePopup from './var-reference-popup'
@@ -23,8 +27,6 @@ import {
 } from '@/app/components/workflow/hooks'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
-import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import AddButton from '@/app/components/base/button/add-button'
 const TRIGGER_DEFAULT_WIDTH = 227

@@ -244,7 +246,7 @@ const VarReferencePicker: FC<Props> = ({
                    noLeft
                    triggerClassName='!text-xs'
                    readonly={readonly}
-                    DropDownIcon={ChevronDown}
+                    DropDownIcon={RiArrowDownSLine}
                    value={varKindType}
                    options={varKindTypes}
                    onChange={handleVarKindTypeChange}
@@ -303,7 +305,7 @@ const VarReferencePicker: FC<Props> = ({
                className='invisible group-hover/wrap:visible absolute h-5 right-1 top-[50%] translate-y-[-50%] group p-1 rounded-md hover:bg-black/5 cursor-pointer'
                onClick={handleClearVar}
              >
-                <XClose className='w-3.5 h-3.5 text-gray-500 group-hover:text-gray-800' />
+                <RiCloseLine className='w-3.5 h-3.5 text-gray-500 group-hover:text-gray-800' />
              </div>)}
            </div>)}
        </PortalToFollowElemTrigger>
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -3,6 +3,9 @@ import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import { useBoolean, useHover } from 'ahooks'
 import cn from 'classnames'
+import {
+  RiSearchLine,
+} from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { type NodeOutPutVar, type ValueSelector, type Var, VarType } from '@/app/components/workflow/types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
@@ -12,9 +15,6 @@ import {
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import {
-  SearchLg,
-} from '@/app/components/base/icons/src/vender/line/general'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import { checkKeys } from '@/utils/var'

@@ -243,7 +243,7 @@ const VarReferenceVars: FC<Props> = ({
              onClick={e => e.stopPropagation()}
            >

-              <SearchLg className='shrink-0 ml-[1px] mr-[5px] w-3.5 h-3.5 text-gray-400' />
+              <RiSearchLine className='shrink-0 ml-[1px] mr-[5px] w-3.5 h-3.5 text-gray-400' />
              <input
                value={searchText}
                className='grow px-0.5 py-[7px] text-[13px] text-gray-700 bg-transparent appearance-none outline-none caret-primary-600 placeholder:text-gray-400'
--- a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import cn from 'classnames'
+import { RiArrowDownSLine } from '@remixicon/react'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 import { VarType } from '@/app/components/workflow/types'

 type Props = {
@@ -45,7 +45,7 @@ const VarReferencePicker: FC<Props> = ({
        <PortalToFollowElemTrigger onClick={() => setOpen(!open)} className='w-[120px] cursor-pointer'>
          <div className='flex items-center h-8 justify-between px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px]'>
            <div className='capitalize grow w-0 truncate' title={value}>{value}</div>
-            <ChevronDown className='shrink-0 w-3.5 h-3.5 text-gray-700' />
+            <RiArrowDownSLine className='shrink-0 w-3.5 h-3.5 text-gray-700' />
          </div>
        </PortalToFollowElemTrigger>
        <PortalToFollowElemContent style={{