From 8f3d9d01496e94ec4401e7f4646bf7aa5f7d3b46 Mon Sep 17 00:00:00 2001 From: StyleZhang Date: Thu, 7 Mar 2024 13:54:02 +0800 Subject: [PATCH] panel --- web/app/components/workflow/block-icon.tsx | 1 + .../workflow/block-selector/index.tsx | 9 ++++++-- .../workflow/block-selector/tabs.tsx | 15 ++++++++++--- .../workflow/block-selector/tools/item.tsx | 4 ++-- .../nodes/_base/components/next-step/add.tsx | 6 ++++-- .../panel-operator/change-block.tsx | 6 ++++-- .../_base/components/panel-operator/index.tsx | 12 +++++++---- .../components/workflow/nodes/_base/panel.tsx | 8 ++++--- .../workflow/panel/workflow-info.tsx | 6 ++++-- web/i18n/en-US/workflow.ts | 21 ++++++++++++++++--- web/i18n/zh-Hans/workflow.ts | 21 ++++++++++++++++--- 11 files changed, 83 insertions(+), 26 deletions(-) diff --git a/web/app/components/workflow/block-icon.tsx b/web/app/components/workflow/block-icon.tsx index e17975a601..69adb2f107 100644 --- a/web/app/components/workflow/block-icon.tsx +++ b/web/app/components/workflow/block-icon.tsx @@ -66,6 +66,7 @@ const BlockIcon: FC = ({ flex items-center justify-center border-[0.5px] border-white/[0.02] text-white ${ICON_CONTAINER_CLASSNAME_SIZE_MAP[size]} ${ICON_CONTAINER_BG_COLOR_MAP[type]} + ${icon && '!shadow-none'} ${className} `} > diff --git a/web/app/components/workflow/block-selector/index.tsx b/web/app/components/workflow/block-selector/index.tsx index 3bc6fd3a90..0ad854335e 100644 --- a/web/app/components/workflow/block-selector/index.tsx +++ b/web/app/components/workflow/block-selector/index.tsx @@ -7,6 +7,7 @@ import { useCallback, useState, } from 'react' +import { useTranslation } from 'react-i18next' import type { OffsetOptions, Placement, @@ -47,6 +48,7 @@ const NodeSelector: FC = ({ popupClassName, asChild, }) => { + const { t } = useTranslation() const [localOpen, setLocalOpen] = useState(false) const open = openFromProps === undefined ? localOpen : openFromProps const handleOpenChange = useCallback((newOpen: boolean) => { @@ -95,11 +97,14 @@ const NodeSelector: FC = ({
-
+
e.stopPropagation()} + >
diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx index e42ae8845f..7f14305178 100644 --- a/web/app/components/workflow/block-selector/tabs.tsx +++ b/web/app/components/workflow/block-selector/tabs.tsx @@ -3,9 +3,10 @@ import { memo, useState, } from 'react' +import { useTranslation } from 'react-i18next' import { groupBy } from 'lodash-es' import BlockIcon from '../block-icon' -import type { BlockEnum } from '../types' +import { BlockEnum } from '../types' import { BLOCK_CLASSIFICATIONS } from './constants' import { useBlocks, @@ -14,6 +15,7 @@ import { import type { ToolDefaultValue } from './types' import { TabsEnum } from './types' import Tools from './tools' +import { useStore as useAppStore } from '@/app/components/app/store' export type TabsProps = { onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void @@ -21,6 +23,8 @@ export type TabsProps = { const Tabs: FC = ({ onSelect, }) => { + const { t } = useTranslation() + const appDetail = useAppStore(state => state.appDetail) const blocks = useBlocks() const tabs = useTabs() const [activeTab, setActiveTab] = useState(tabs[0].key) @@ -55,12 +59,17 @@ const Tabs: FC = ({ { classification !== '-' && (
- {classification} + {t(`workflow.tabs.${classification}`)}
) } { - groupBy(blocks, 'classification')[classification].map(block => ( + groupBy(blocks, 'classification')[classification].filter((block) => { + if (block.type === BlockEnum.DirectAnswer && appDetail?.mode === 'workflow') + return false + + return true + }).map(block => (
- {data.name} + {data.label[language]}
{ data.expanded diff --git a/web/app/components/workflow/nodes/_base/components/next-step/add.tsx b/web/app/components/workflow/nodes/_base/components/next-step/add.tsx index 976934db1b..7d26a5fa3c 100644 --- a/web/app/components/workflow/nodes/_base/components/next-step/add.tsx +++ b/web/app/components/workflow/nodes/_base/components/next-step/add.tsx @@ -2,6 +2,7 @@ import { memo, useCallback, } from 'react' +import { useTranslation } from 'react-i18next' import { useWorkflow } from '@/app/components/workflow/hooks' import BlockSelector from '@/app/components/workflow/block-selector' import { Plus } from '@/app/components/base/icons/src/vender/line/general' @@ -17,6 +18,7 @@ const Add = ({ sourceHandle, branchName, }: AddProps) => { + const { t } = useTranslation() const { handleNodeAddNext } = useWorkflow() const handleSelect = useCallback((type, toolDefaultValue) => { @@ -42,10 +44,10 @@ const Add = ({
- SELECT NEXT BLOCK + {t('workflow.panel.selectNextStep')}
) - }, [branchName]) + }, [branchName, t]) return ( { + const { t } = useTranslation() const { handleNodeChange } = useWorkflow() const handleSelect = useCallback((type, toolDefaultValue) => { @@ -23,10 +25,10 @@ const ChangeBlock = ({ const renderTrigger = useCallback(() => { return (
- Change Block + {t('workflow.panel.changeBlock')}
) - }, []) + }, [t]) return ( { + const { t } = useTranslation() const edges = useEdges() const { handleNodeDelete } = useWorkflow() const [open, setOpen] = useState(false) @@ -55,7 +57,9 @@ const PanelOperator = ({ nodeId={id} sourceHandle={edge?.sourceHandle || 'source'} /> -
Help Link
+
+ {t('workflow.panel.helpLink')} +
@@ -63,19 +67,19 @@ const PanelOperator = ({ className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50' onClick={() => handleNodeDelete(id)} > - Delete + {t('common.operation.delete')}
- ABOUT + {t('workflow.panel.about')}
{data._about}
- Created By {data._author} + {t('workflow.panel.createdBy')} {data._author}
diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx index 53296cc6a6..2d357303cd 100644 --- a/web/app/components/workflow/nodes/_base/panel.tsx +++ b/web/app/components/workflow/nodes/_base/panel.tsx @@ -7,6 +7,7 @@ import { memo, useCallback, } from 'react' +import { useTranslation } from 'react-i18next' import NextStep from './components/next-step' import PanelOperator from './components/panel-operator' import { @@ -34,6 +35,7 @@ const BasePanel: FC = ({ data, children, }) => { + const { t } = useTranslation() const { handleNodeSelect, handleNodeDataUpdate, @@ -63,7 +65,7 @@ const BasePanel: FC = ({ { canRunBySingle(data.type) && (
= ({
- NEXT STEP + {t('workflow.panel.nextStep').toLocaleUpperCase()}
- Add the next block in this workflow + {t('workflow.panel.addNextStep')}
diff --git a/web/app/components/workflow/panel/workflow-info.tsx b/web/app/components/workflow/panel/workflow-info.tsx index c3328063d7..cddc42cfdc 100644 --- a/web/app/components/workflow/panel/workflow-info.tsx +++ b/web/app/components/workflow/panel/workflow-info.tsx @@ -1,5 +1,6 @@ import type { FC } from 'react' import { memo } from 'react' +import { useTranslation } from 'react-i18next' import BlockIcon from '../block-icon' import { BlockEnum } from '../types' import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback' @@ -8,6 +9,7 @@ import { useStore as useAppStore } from '@/app/components/app/store' import AppIcon from '@/app/components/base/app-icon' const WorkflowInfo: FC = () => { + const { t } = useTranslation() const appDetail = useAppStore(state => state.appDetail) if (!appDetail) @@ -32,12 +34,12 @@ const WorkflowInfo: FC = () => {
- Checklist(2) + {t('workflow.panel.checklist')}(2)
- Make sure all issues are resolved before publishing + {t('workflow.panel.checklistTip')}
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index 8a478643f3..26bc4d7b99 100644 --- a/web/i18n/en-US/workflow.ts +++ b/web/i18n/en-US/workflow.ts @@ -23,9 +23,14 @@ const translation = { restore: 'Restore', }, tabs: { - blocks: 'Blocks', - builtInTool: 'Built-in Tool', - customTool: 'Custom Tool', + 'searchBlock': 'Search block', + 'blocks': 'Blocks', + 'builtInTool': 'Built-in Tool', + 'customTool': 'Custom Tool', + 'question-understand': 'Question Understand', + 'logic': 'Logic', + 'transform': 'Transform', + 'utilities': 'Utilities', }, blocks: { 'start': 'Start', @@ -49,6 +54,16 @@ const translation = { }, panel: { userInputField: 'User Input Field', + changeBlock: 'Change Block', + helpLink: 'Help Link', + about: 'About', + createdBy: 'Created By ', + nextStep: 'Next Step', + addNextStep: 'Add the next block in this workflow', + selectNextStep: 'Select Next Block', + runThisStep: 'Run this step', + checklist: 'Checklist', + checklistTip: 'Make sure all issues are resolved before publishing', }, nodes: { common: { diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts index a828ff4e29..5d301045d7 100644 --- a/web/i18n/zh-Hans/workflow.ts +++ b/web/i18n/zh-Hans/workflow.ts @@ -23,9 +23,14 @@ const translation = { restore: '恢复', }, tabs: { - blocks: 'Blocks', - builtInTool: '内置工具', - customTool: '自定义工具', + 'searchBlock': '搜索节点', + 'blocks': '节点', + 'builtInTool': '内置工具', + 'customTool': '自定义工具', + 'question-understand': '问题理解', + 'logic': '逻辑', + 'transform': '转换', + 'utilities': '工具', }, blocks: { 'start': '开始', @@ -49,6 +54,16 @@ const translation = { }, panel: { userInputField: '用户输入字段', + changeBlock: '更改节点', + helpLink: '帮助链接', + about: '关于', + createdBy: '作者', + nextStep: '下一步', + addNextStep: '添加此工作流程中的下一个节点', + selectNextStep: '选择下一个节点', + runThisStep: '运行此步骤', + checklist: '检查清单', + checklistTip: '发布前确保所有问题均已解决', }, nodes: { common: {