fix: unify frontend styles

langgenius · Oct 29, 2024 · ac07082 · ac07082
1 parent 4f6d402
commit ac07082
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 13 deletions.
diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
@@ -125,7 +125,7 @@ const Select: FC<ISelectProps> = ({
           </Combobox.Button>
         </div>
 
-        {filteredItems.length > 0 && (
+        {(filteredItems.length > 0 && open) && (
           <Combobox.Options className={`absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm ${overlayClassName}`}>
             {filteredItems.map((item: Item) => (
               <Combobox.Option

diff --git a/web/app/components/workflow/constants.ts b/web/app/components/workflow/constants.ts
@@ -342,6 +342,7 @@ export const NODES_INITIAL_DATA = {
 }
 export const MAX_ITERATION_PARALLEL_NUM = 10
 export const MIN_ITERATION_PARALLEL_NUM = 1
+export const DEFAULT_ITER_TIMES = 1
 export const NODE_WIDTH = 240
 export const X_OFFSET = 60
 export const NODE_WIDTH_X_OFFSET = NODE_WIDTH + X_OFFSET

diff --git a/web/app/components/workflow/hooks/use-workflow-run.ts b/web/app/components/workflow/hooks/use-workflow-run.ts
@@ -14,6 +14,7 @@ import {
   NodeRunningStatus,
   WorkflowRunningStatus,
 } from '../types'
+import { DEFAULT_ITER_TIMES } from '../constants'
 import { useWorkflowUpdate } from './use-workflow-interactions'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import type { IOtherOptions } from '@/service/base'
@@ -428,6 +429,7 @@ export const useWorkflowRun = () => {
           const {
             workflowRunningData,
             setWorkflowRunningData,
+            setIterTimes,
           } = workflowStore.getState()
           const {
             getNodes,
@@ -437,6 +439,7 @@ export const useWorkflowRun = () => {
             transform,
           } = store.getState()
           const nodes = getNodes()
+          setIterTimes(DEFAULT_ITER_TIMES)
           setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
             draft.tracing!.push({
               ...data,
@@ -533,7 +536,7 @@ export const useWorkflowRun = () => {
               })
             }
           }))
-          setIterTimes(1)
+          setIterTimes(DEFAULT_ITER_TIMES)
           const newNodes = produce(nodes, (draft) => {
             const currentNode = draft.find(node => node.id === data.node_id)!
 

diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
@@ -168,9 +168,11 @@ const BaseNode: FC<BaseNodeProps> = ({
           />
           <div
             title={data.title}
-            className='grow mr-1 system-sm-semibold-uppercase font-medium truncate'
+            className='grow mr-1 system-sm-semibold-uppercase text-text-primary truncate flex items-center'
           >
-            {data.title}
+            <div>
+              {data.title}
+            </div>
             {
               data.type === BlockEnum.Iteration && (data as IterationNodeType).is_parallel && (
                 <Tooltip popupContent={
@@ -181,7 +183,7 @@ const BaseNode: FC<BaseNodeProps> = ({
                     {t('workflow.nodes.iteration.parallelModeEnableDesc')}
                   </div>}
                 >
-                  <div className='text-[#DC6803] border-2 border-[#DC6803] rounded-lg pl-1 pr-1 inline text-sm ml-1'>
+                  <div className='flex justify-center items-center px-[5px] py-[3px] ml-1 border-[1px] border-text-warning rounded-[5px] text-text-warning system-2xs-medium-uppercase '>
                     {t('workflow.nodes.iteration.parallelModeUpper')}
                   </div>
                 </Tooltip>

diff --git a/web/app/components/workflow/nodes/iteration/panel.tsx b/web/app/components/workflow/nodes/iteration/panel.tsx
@@ -109,14 +109,14 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
           />
         </Field>
       </div>
-      <div className='px-4 pb-4 space-y-4'>
+      <div className='px-4 pb-2'>
         <Field title={t(`${i18nPrefix}.parallelMode`)} tooltip={<div className='w-[230px]'>{t(`${i18nPrefix}.parallelPanelDesc`)}</div>} inline>
           <Switch defaultValue={inputs.is_parallel} onChange={changeParallel} />
         </Field>
       </div>
       {
-        inputs.is_parallel && (<div className='px-4 pb-4 space-y-4'>
-          <Field title={t(`${i18nPrefix}.MaxParallelismTitle`)} tooltip={<div className='w-[230px]'>{t(`${i18nPrefix}.MaxParallelismDesc`)}</div>}>
+        inputs.is_parallel && (<div className='px-4 pb-2'>
+          <Field title={t(`${i18nPrefix}.MaxParallelismTitle`)} isSubTitle tooltip={<div className='w-[230px]'>{t(`${i18nPrefix}.MaxParallelismDesc`)}</div>}>
             <div className='flex row'>
               <Input type='number' wrapperClassName='w-18 mr-4 ' max={MAX_ITERATION_PARALLEL_NUM} min={MIN_ITERATION_PARALLEL_NUM} value={inputs.parallel_nums} onChange={(e) => { changeParallelNums(Number(e.target.value)) }} />
               <Slider
@@ -131,9 +131,11 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
           </Field>
         </div>)
       }
+      <div className='px-4 py-2'>
+        <Divider className='h-[1px]'/>
+      </div>
 
-      <Divider className='ml-4 mr-4' />
-      <div className='px-4 pb-4 space-y-4'>
+      <div className='px-4 py-2'>
         <Field title={t(`${i18nPrefix}.errorResponseMethod`)} >
           <Select items={responseMethod} defaultValue={inputs.error_handle_mode} onSelect={changeErrorResponseMode} allowSearch={false}>
           </Select>

diff --git a/web/app/components/workflow/panel/debug-and-preview/hooks.ts b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
@@ -10,6 +10,7 @@ import { uniqBy } from 'lodash-es'
 import { useWorkflowRun } from '../../hooks'
 import { NodeRunningStatus, WorkflowRunningStatus } from '../../types'
 import { useWorkflowStore } from '../../store'
+import { DEFAULT_ITER_TIMES } from '../../constants'
 import type {
   ChatItem,
   Inputs,
@@ -107,7 +108,7 @@ export const useChat = (
     handleResponding(false)
     if (stopChat && taskIdRef.current)
       stopChat(taskIdRef.current)
-    setIterTimes(1)
+    setIterTimes(DEFAULT_ITER_TIMES)
     if (suggestedQuestionsAbortControllerRef.current)
       suggestedQuestionsAbortControllerRef.current.abort()
   }, [handleResponding, setIterTimes, stopChat])
@@ -116,7 +117,7 @@ export const useChat = (
     conversationId.current = ''
     taskIdRef.current = ''
     handleStop()
-    setIterTimes(1)
+    setIterTimes(DEFAULT_ITER_TIMES)
     const newChatList = config?.opening_statement
       ? [{
         id: `${Date.now()}`,

diff --git a/web/app/components/workflow/run/iteration-result-panel.tsx b/web/app/components/workflow/run/iteration-result-panel.tsx
@@ -75,7 +75,7 @@ const IterationResultPanel: FC<Props> = ({
                 {
                   iteration.some(item => item.status === 'failed')
                     ? (
-                      <RiErrorWarningLine className='w-4 h-4 text-[#F04438]' />
+                      <RiErrorWarningLine className='w-4 h-4 text-text-destructive' />
                     )
                     : (< RiArrowRightSLine className={
                       cn(