UI improvements: fix translation and custom icons for schedule trigger (#24167)

This commit is contained in:
lyzno1 2025-08-19 18:27:07 +08:00 committed by GitHub
parent 16ef5ebb97
commit 6acbcfe679
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 111 additions and 5 deletions

View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path 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="#354052"/>
</svg>

After

Width:  |  Height:  |  Size: 406 B

View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path 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="#354052"/>
</svg>

After

Width:  |  Height:  |  Size: 706 B

View File

@ -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"
}

View File

@ -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<SVGSVGElement> & {
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
},
) => <IconBase {...props} ref={ref} data={data as IconData} />
Icon.displayName = 'Asterisk'
export default Icon

View File

@ -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"
}

View File

@ -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<SVGSVGElement> & {
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
},
) => <IconBase {...props} ref={ref} data={data as IconData} />
Icon.displayName = 'CalendarCheckLine'
export default Icon

View File

@ -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'

View File

@ -64,6 +64,7 @@ const getIcon = (type: BlockEnum, className: string) => {
[BlockEnum.Agent]: <Agent className={className} />,
[BlockEnum.TriggerSchedule]: <Schedule className={className} />,
[BlockEnum.TriggerWebhook]: <WebhookLine className={className} />,
[BlockEnum.TriggerPlugin]: null,
}[type]
}
const ICON_CONTAINER_BG_COLOR_MAP: Record<string, string> = {
@ -89,6 +90,7 @@ const ICON_CONTAINER_BG_COLOR_MAP: Record<string, string> = {
[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<BlockIconProps> = ({
type,
@ -107,7 +109,11 @@ const BlockIcon: FC<BlockIconProps> = ({
>
{
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'),
)
)
}
{

View File

@ -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 (
<button
@ -28,7 +28,7 @@ const ModeToggle = ({ mode, onChange }: ModeToggleProps) => {
onClick={handleToggle}
className="flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 text-sm text-text-secondary hover:bg-state-base-hover"
>
{React.createElement(currentIcon, { className: 'w-3 h-3' })}
{React.createElement(currentIcon, { className: 'w-4 h-4' })}
<span>{currentText}</span>
</button>
)

View File

@ -221,7 +221,7 @@ const translation = {
},
tabs: {
'searchBlock': 'Search node',
'start': 'User Input',
'start': 'Start',
'blocks': 'Nodes',
'searchTool': 'Search tool',
'tools': 'Tools',