type safe

This commit is contained in:
Stephen Zhou 2025-12-27 00:32:25 +08:00
parent f9db9a6d45
commit 89a1d15da3
No known key found for this signature in database
8 changed files with 58 additions and 37 deletions

View File

@ -53,11 +53,11 @@ const VarList: FC<Props> = ({
}), [list])
const { run: validateVarInput } = useDebounceFn((list: Variable[], newKey: string) => {
const { isValid, errorKey, errorMessageKey } = checkKeys([newKey], true)
if (!isValid) {
const result = checkKeys([newKey], true)
if (!result.isValid) {
setToastHandle(Toast.notify({
type: 'error',
message: t(`varKeyError.${errorMessageKey}` as any, { ns: 'appDebug', key: errorKey }),
message: t(`varKeyError.${result.errorMessageKey}`, { ns: 'appDebug', key: result.errorKey }),
}))
return
}

View File

@ -1,5 +1,6 @@
import type { FC } from 'react'
import type { WriteMode } from '../types'
import type { Item } from '../utils'
import type { VarType } from '@/app/components/workflow/types'
import {
RiArrowDownSLine,
@ -14,12 +15,7 @@ import {
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { cn } from '@/utils/classnames'
import { getOperationItems } from '../utils'
type Item = {
value: string | number
name: string
}
import { getOperationItems, isOperationItem } from '../utils'
type OperationSelectorProps = {
value: string | number
@ -34,8 +30,6 @@ type OperationSelectorProps = {
writeModeTypesNum?: WriteMode[]
}
const i18nPrefix = 'nodes.assigner'
const OperationSelector: FC<OperationSelectorProps> = ({
value,
onSelect,
@ -72,7 +66,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
className={`system-sm-regular overflow-hidden truncate text-ellipsis
${selectedItem ? 'text-components-input-text-filled' : 'text-components-input-text-disabled'}`}
>
{selectedItem?.name ? t(`${i18nPrefix}.operations.${selectedItem?.name}` as any, { ns: 'workflow' }) as string : t(`${i18nPrefix}.operations.title` as any, { ns: 'workflow' }) as string}
{selectedItem && isOperationItem(selectedItem) ? t(`nodes.assigner.operations.${selectedItem.name}`, { ns: 'workflow' }) : t('nodes.assigner.operations.title', { ns: 'workflow' })}
</span>
</div>
<RiArrowDownSLine className={`h-4 w-4 text-text-quaternary ${disabled && 'text-components-input-text-placeholder'} ${open && 'text-text-secondary'}`} />
@ -83,10 +77,10 @@ const OperationSelector: FC<OperationSelectorProps> = ({
<div className="flex w-[140px] flex-col items-start rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
<div className="flex flex-col items-start self-stretch p-1">
<div className="flex items-start self-stretch px-3 pb-0.5 pt-1">
<div className="system-xs-medium-uppercase flex grow text-text-tertiary">{t(`${i18nPrefix}.operations.title` as any, { ns: 'workflow' }) as string}</div>
<div className="system-xs-medium-uppercase flex grow text-text-tertiary">{t('nodes.assigner.operations.title', { ns: 'workflow' })}</div>
</div>
{items.map(item => (
item.value === 'divider'
!isOperationItem(item)
? (
<Divider key="divider" className="my-1" />
)
@ -100,7 +94,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
}}
>
<div className="flex min-h-5 grow items-center gap-1 px-1">
<span className="system-sm-medium flex grow text-text-secondary">{t(`${i18nPrefix}.operations.${item.name}` as any, { ns: 'workflow' }) as string}</span>
<span className="system-sm-medium flex grow text-text-secondary">{t(`nodes.assigner.operations.${item.name}`, { ns: 'workflow' })}</span>
</div>
{item.value === value && (
<div className="flex items-center justify-center">

View File

@ -1,5 +1,6 @@
import type { FC } from 'react'
import type { AssignerNodeType } from './types'
import type { OperationName } from './utils'
import type { Node, NodeProps } from '@/app/components/workflow/types'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
@ -59,7 +60,8 @@ const NodeComponent: FC<NodeProps<AssignerNodeType>> = ({
)
}
// Legacy version
const { assigned_variable_selector: variable, write_mode: writeMode } = data as any
type LegacyAssignerNodeType = { assigned_variable_selector: string[], write_mode: OperationName }
const { assigned_variable_selector: variable, write_mode: writeMode } = data as unknown as LegacyAssignerNodeType
if (!variable || variable.length === 0)
return null
@ -73,7 +75,7 @@ const NodeComponent: FC<NodeProps<AssignerNodeType>> = ({
nodeType={node?.data.type}
nodeTitle={node?.data.title}
rightSlot={
writeMode && <Badge className="!ml-auto shrink-0" text={t(`${i18nPrefix}.operations.${writeMode}` as any, { ns: 'workflow' }) as string} />
writeMode && <Badge className="!ml-auto shrink-0" text={t(`nodes.assigner.operations.${writeMode}`, { ns: 'workflow' })} />
}
/>
</div>

View File

@ -1,4 +1,5 @@
import type { AssignerNodeType } from './types'
import type { I18nKeysByPrefix } from '@/types/i18n'
import { AssignerNodeInputType, WriteMode } from './types'
export const checkNodeValid = (_payload: AssignerNodeType) => {
@ -11,9 +12,14 @@ export const formatOperationName = (type: string) => {
return type.charAt(0).toUpperCase() + type.slice(1)
}
type Item = {
value: string | number
name: string
export type OperationName = I18nKeysByPrefix<'workflow', 'nodes.assigner.operations.'>
export type Item
= | { value: 'divider', name: 'divider' }
| { value: string | number, name: OperationName }
export function isOperationItem(item: Item): item is { value: string | number, name: OperationName } {
return item.value !== 'divider'
}
export const getOperationItems = (

View File

@ -1,15 +1,21 @@
import type { I18nKeysByPrefix } from '@/types/i18n'
import { TransferMethod } from '@/types/app'
export const CUSTOM_NODE_TYPE = 'custom'
export const FILE_TYPE_OPTIONS = [
type OptionItem = {
value: string
i18nKey: I18nKeysByPrefix<'workflow', 'nodes.ifElse.optionName.'>
}
export const FILE_TYPE_OPTIONS: OptionItem[] = [
{ value: 'image', i18nKey: 'image' },
{ value: 'document', i18nKey: 'doc' },
{ value: 'audio', i18nKey: 'audio' },
{ value: 'video', i18nKey: 'video' },
]
export const TRANSFER_METHOD = [
export const TRANSFER_METHOD: OptionItem[] = [
{ value: TransferMethod.local_file, i18nKey: 'localUpload' },
{ value: TransferMethod.remote_url, i18nKey: 'url' },
]

View File

@ -17,8 +17,6 @@ import {
isEmptyRelatedOperator,
} from '../utils'
const i18nPrefix = 'nodes.ifElse'
type ConditionValueProps = {
condition: Condition
}
@ -34,7 +32,7 @@ const ConditionValue = ({
const variableSelector = variable_selector as ValueSelector
const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`nodes.ifElse.comparisonOperator.${operator}` as any, { ns: 'workflow' }) as string : operator
const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`nodes.ifElse.comparisonOperator.${operator}`, { ns: 'workflow' }) : operator
const formatValue = useCallback((c: Condition) => {
const notHasValue = comparisonOperatorNotRequireValue(c.comparison_operator)
if (notHasValue)
@ -59,7 +57,7 @@ const ConditionValue = ({
if (isSelect) {
const name = [...FILE_TYPE_OPTIONS, ...TRANSFER_METHOD].filter(item => item.value === (Array.isArray(c.value) ? c.value[0] : c.value))[0]
return name
? (t(`nodes.ifElse.optionName.${name.i18nKey}` as any, { ns: 'workflow' }) as string).replace(/\{\{#([^#]*)#\}\}/g, (a, b) => {
? t(`nodes.ifElse.optionName.${name.i18nKey}`, { ns: 'workflow' }).replace(/\{\{#([^#]*)#\}\}/g, (a, b) => {
const arr: string[] = b.split('.')
if (isSystemVar(arr))
return `{{${b}}}`
@ -88,14 +86,20 @@ const ConditionValue = ({
</div>
<div className="ml-[10px] border-l border-divider-regular pl-[10px]">
{
sub_variable_condition?.conditions.map((c: Condition, index) => (
<div className="relative flex h-6 items-center space-x-1" key={c.id}>
<div className="system-xs-medium text-text-accent">{c.key}</div>
<div className="system-xs-medium text-text-primary">{isComparisonOperatorNeedTranslate(c.comparison_operator) ? t(`nodes.ifElse.comparisonOperator.${c.comparison_operator}` as any, { ns: 'workflow' }) as string : c.comparison_operator}</div>
{c.comparison_operator && !isEmptyRelatedOperator(c.comparison_operator) && <div className="system-xs-regular text-text-secondary">{isSelect(c) ? selectName(c) : formatValue(c)}</div>}
{index !== sub_variable_condition.conditions.length - 1 && (<div className="absolute bottom-[-10px] right-1 z-10 text-[10px] font-medium uppercase leading-4 text-text-accent">{t(`${i18nPrefix}.${sub_variable_condition.logical_operator}` as any, { ns: 'workflow' }) as string}</div>)}
</div>
))
sub_variable_condition?.conditions.map((c: Condition, index) => {
const comparisonOperator = c.comparison_operator
const comparisonOperatorName = comparisonOperator && isComparisonOperatorNeedTranslate(comparisonOperator)
? t(`nodes.ifElse.comparisonOperator.${comparisonOperator}`, { ns: 'workflow' })
: comparisonOperator
return (
<div className="relative flex h-6 items-center space-x-1" key={c.id}>
<div className="system-xs-medium text-text-accent">{c.key}</div>
<div className="system-xs-medium text-text-primary">{comparisonOperatorName}</div>
{c.comparison_operator && !isEmptyRelatedOperator(c.comparison_operator) && <div className="system-xs-regular text-text-secondary">{isSelect(c) ? selectName(c) : formatValue(c)}</div>}
{index !== sub_variable_condition.conditions.length - 1 && (<div className="absolute bottom-[-10px] right-1 z-10 text-[10px] font-medium uppercase leading-4 text-text-accent">{t(`nodes.ifElse.${sub_variable_condition.logical_operator}`, { ns: 'workflow' })}</div>)}
</div>
)
})
}
</div>
</div>

View File

@ -1,4 +1,5 @@
import type { Branch } from '@/app/components/workflow/types'
import type { I18nKeysByPrefix } from '@/types/i18n'
import { VarType } from '@/app/components/workflow/types'
import { ComparisonOperator } from './types'
@ -13,12 +14,18 @@ const notTranslateKey = [
ComparisonOperator.largerThanOrEqual,
ComparisonOperator.lessThan,
ComparisonOperator.lessThanOrEqual,
]
] as const
export const isComparisonOperatorNeedTranslate = (operator?: ComparisonOperator) => {
type NotTranslateOperator = typeof notTranslateKey[number]
export type TranslatableComparisonOperator = Exclude<ComparisonOperator, NotTranslateOperator>
export type IfElseOptionName = I18nKeysByPrefix<'workflow', 'nodes.ifElse.optionName.'>
export function isComparisonOperatorNeedTranslate(operator: ComparisonOperator): operator is TranslatableComparisonOperator
export function isComparisonOperatorNeedTranslate(operator?: ComparisonOperator): operator is TranslatableComparisonOperator
export function isComparisonOperatorNeedTranslate(operator?: ComparisonOperator): operator is TranslatableComparisonOperator {
if (!operator)
return false
return !notTranslateKey.includes(operator)
return !(notTranslateKey as readonly ComparisonOperator[]).includes(operator)
}
export const getOperators = (type?: VarType, file?: { key: string }) => {

View File

@ -513,6 +513,8 @@
"nodes.ifElse.comparisonOperator.in": "in",
"nodes.ifElse.comparisonOperator.is": "is",
"nodes.ifElse.comparisonOperator.is not": "is not",
"nodes.ifElse.comparisonOperator.is not null": "is not null",
"nodes.ifElse.comparisonOperator.is null": "is null",
"nodes.ifElse.comparisonOperator.not contains": "not contains",
"nodes.ifElse.comparisonOperator.not empty": "is not empty",
"nodes.ifElse.comparisonOperator.not exists": "not exists",