From 6acbcfe67944f9dc6c396df966a83e5e64482854 Mon Sep 17 00:00:00 2001 From: lyzno1 <92089059+lyzno1@users.noreply.github.com> Date: Tue, 19 Aug 2025 18:27:07 +0800 Subject: [PATCH] UI improvements: fix translation and custom icons for schedule trigger (#24167) --- .../icons/assets/vender/workflow/asterisk.svg | 3 +++ .../vender/workflow/calendar-check-line.svg | 3 +++ .../icons/src/vender/workflow/Asterisk.json | 26 +++++++++++++++++++ .../icons/src/vender/workflow/Asterisk.tsx | 20 ++++++++++++++ .../vender/workflow/CalendarCheckLine.json | 26 +++++++++++++++++++ .../src/vender/workflow/CalendarCheckLine.tsx | 20 ++++++++++++++ .../base/icons/src/vender/workflow/index.ts | 2 ++ web/app/components/workflow/block-icon.tsx | 8 +++++- .../components/mode-toggle.tsx | 6 ++--- web/i18n/en-US/workflow.ts | 2 +- 10 files changed, 111 insertions(+), 5 deletions(-) create mode 100644 web/app/components/base/icons/assets/vender/workflow/asterisk.svg create mode 100644 web/app/components/base/icons/assets/vender/workflow/calendar-check-line.svg create mode 100644 web/app/components/base/icons/src/vender/workflow/Asterisk.json create mode 100644 web/app/components/base/icons/src/vender/workflow/Asterisk.tsx create mode 100644 web/app/components/base/icons/src/vender/workflow/CalendarCheckLine.json create mode 100644 web/app/components/base/icons/src/vender/workflow/CalendarCheckLine.tsx diff --git a/web/app/components/base/icons/assets/vender/workflow/asterisk.svg b/web/app/components/base/icons/assets/vender/workflow/asterisk.svg new file mode 100644 index 0000000000..d273c7e3d5 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/workflow/asterisk.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/app/components/base/icons/assets/vender/workflow/calendar-check-line.svg b/web/app/components/base/icons/assets/vender/workflow/calendar-check-line.svg new file mode 100644 index 0000000000..2c7f148c71 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/workflow/calendar-check-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/app/components/base/icons/src/vender/workflow/Asterisk.json b/web/app/components/base/icons/src/vender/workflow/Asterisk.json new file mode 100644 index 0000000000..d7fa156d99 --- /dev/null +++ b/web/app/components/base/icons/src/vender/workflow/Asterisk.json @@ -0,0 +1,26 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "14", + "height": "14", + "viewBox": "0 0 14 14", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "d": "M7.58325 1.75L7.58314 5.98908L11.2549 3.86982L11.8382 4.88018L8.16705 6.99942L11.8382 9.11983L11.2549 10.1302L7.58314 8.01033L7.58325 12.25H6.41659L6.41647 8.01033L2.74495 10.1302L2.16162 9.11983L5.83254 7L2.16162 4.88018L2.74495 3.86982L6.41647 5.98908L6.41659 1.75H7.58325Z", + "fill": "currentColor" + }, + "children": [] + } + ] + }, + "name": "Asterisk" +} diff --git a/web/app/components/base/icons/src/vender/workflow/Asterisk.tsx b/web/app/components/base/icons/src/vender/workflow/Asterisk.tsx new file mode 100644 index 0000000000..71b778b0b2 --- /dev/null +++ b/web/app/components/base/icons/src/vender/workflow/Asterisk.tsx @@ -0,0 +1,20 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './Asterisk.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconData } from '@/app/components/base/icons/IconBase' + +const Icon = ( + { + ref, + ...props + }: React.SVGProps & { + ref?: React.RefObject>; + }, +) => + +Icon.displayName = 'Asterisk' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/workflow/CalendarCheckLine.json b/web/app/components/base/icons/src/vender/workflow/CalendarCheckLine.json new file mode 100644 index 0000000000..8f77528653 --- /dev/null +++ b/web/app/components/base/icons/src/vender/workflow/CalendarCheckLine.json @@ -0,0 +1,26 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "14", + "height": "14", + "viewBox": "0 0 14 14", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "d": "M5.24984 0.583252V1.74992H8.74984V0.583252H9.9165V1.74992H12.2498C12.572 1.74992 12.8332 2.01109 12.8332 2.33325V11.6666C12.8332 11.9888 12.572 12.2499 12.2498 12.2499H1.74984C1.42767 12.2499 1.1665 11.9888 1.1665 11.6666V2.33325C1.1665 2.01109 1.42767 1.74992 1.74984 1.74992H4.08317V0.583252H5.24984ZM11.6665 5.83325H2.33317V11.0833H11.6665V5.83325ZM8.77055 6.49592L9.5955 7.32093L6.70817 10.2083L4.64578 8.14588L5.47073 7.32093L6.70817 8.55835L8.77055 6.49592ZM4.08317 2.91659H2.33317V4.66659H11.6665V2.91659H9.9165V3.49992H8.74984V2.91659H5.24984V3.49992H4.08317V2.91659Z", + "fill": "currentColor" + }, + "children": [] + } + ] + }, + "name": "CalendarCheckLine" +} diff --git a/web/app/components/base/icons/src/vender/workflow/CalendarCheckLine.tsx b/web/app/components/base/icons/src/vender/workflow/CalendarCheckLine.tsx new file mode 100644 index 0000000000..1f2f490465 --- /dev/null +++ b/web/app/components/base/icons/src/vender/workflow/CalendarCheckLine.tsx @@ -0,0 +1,20 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './CalendarCheckLine.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconData } from '@/app/components/base/icons/IconBase' + +const Icon = ( + { + ref, + ...props + }: React.SVGProps & { + ref?: React.RefObject>; + }, +) => + +Icon.displayName = 'CalendarCheckLine' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/workflow/index.ts b/web/app/components/base/icons/src/vender/workflow/index.ts index 3e7a46dd99..a7e20b2569 100644 --- a/web/app/components/base/icons/src/vender/workflow/index.ts +++ b/web/app/components/base/icons/src/vender/workflow/index.ts @@ -1,6 +1,8 @@ export { default as Agent } from './Agent' export { default as Answer } from './Answer' export { default as Assigner } from './Assigner' +export { default as Asterisk } from './Asterisk' +export { default as CalendarCheckLine } from './CalendarCheckLine' export { default as Code } from './Code' export { default as DocsExtractor } from './DocsExtractor' export { default as End } from './End' diff --git a/web/app/components/workflow/block-icon.tsx b/web/app/components/workflow/block-icon.tsx index d8961c6826..600673dfbe 100644 --- a/web/app/components/workflow/block-icon.tsx +++ b/web/app/components/workflow/block-icon.tsx @@ -64,6 +64,7 @@ const getIcon = (type: BlockEnum, className: string) => { [BlockEnum.Agent]: , [BlockEnum.TriggerSchedule]: , [BlockEnum.TriggerWebhook]: , + [BlockEnum.TriggerPlugin]: null, }[type] } const ICON_CONTAINER_BG_COLOR_MAP: Record = { @@ -89,6 +90,7 @@ const ICON_CONTAINER_BG_COLOR_MAP: Record = { [BlockEnum.Agent]: 'bg-util-colors-indigo-indigo-500', [BlockEnum.TriggerSchedule]: 'bg-util-colors-violet-violet-500', [BlockEnum.TriggerWebhook]: 'bg-util-colors-blue-blue-500', + [BlockEnum.TriggerPlugin]: 'bg-util-colors-white-white-500', } const BlockIcon: FC = ({ type, @@ -107,7 +109,11 @@ const BlockIcon: FC = ({ > { type !== BlockEnum.Tool && ( - getIcon(type, size === 'xs' ? 'w-3 h-3' : 'w-3.5 h-3.5') + getIcon(type, + (type === BlockEnum.TriggerSchedule || type === BlockEnum.TriggerWebhook) + ? (size === 'xs' ? 'w-4 h-4' : 'w-4.5 h-4.5') + : (size === 'xs' ? 'w-3 h-3' : 'w-3.5 h-3.5'), + ) ) } { diff --git a/web/app/components/workflow/nodes/trigger-schedule/components/mode-toggle.tsx b/web/app/components/workflow/nodes/trigger-schedule/components/mode-toggle.tsx index 33c03765d0..6ae5d2cf67 100644 --- a/web/app/components/workflow/nodes/trigger-schedule/components/mode-toggle.tsx +++ b/web/app/components/workflow/nodes/trigger-schedule/components/mode-toggle.tsx @@ -1,6 +1,6 @@ import React from 'react' import { useTranslation } from 'react-i18next' -import { RiAsterisk, RiCalendarLine } from '@remixicon/react' +import { Asterisk, CalendarCheckLine } from '@/app/components/base/icons/src/vender/workflow' import type { ScheduleMode } from '../types' type ModeToggleProps = { @@ -20,7 +20,7 @@ const ModeToggle = ({ mode, onChange }: ModeToggleProps) => { ? t('workflow.nodes.triggerSchedule.useCronExpression') : t('workflow.nodes.triggerSchedule.useVisualPicker') - const currentIcon = mode === 'visual' ? RiAsterisk : RiCalendarLine + const currentIcon = mode === 'visual' ? Asterisk : CalendarCheckLine return ( ) diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index 8fe527d038..a5806dce81 100644 --- a/web/i18n/en-US/workflow.ts +++ b/web/i18n/en-US/workflow.ts @@ -221,7 +221,7 @@ const translation = { }, tabs: { 'searchBlock': 'Search node', - 'start': 'User Input', + 'start': 'Start', 'blocks': 'Nodes', 'searchTool': 'Search tool', 'tools': 'Tools',