From 0367a2148adcf1cbcf0a6eeb84bbc5ec59a2c763 Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Tue, 5 Mar 2024 12:36:41 +0800
Subject: [PATCH] bg

---
 web/app/components/workflow/index.tsx         |  5 +-
 .../workflow/operator/zoom-in-out.tsx         | 66 +++++++++++--------
 web/i18n/en-US/workflow.ts                    |  7 ++
 web/i18n/zh-Hans/workflow.ts                  |  7 ++
 4 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index f3ccde06b9..d0d6708ae1 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -71,7 +71,7 @@ const Workflow: FC<WorkflowProps> = memo(({
   useKeyPress('Backspace', handleEdgeDelete)
 
   return (
-    <div className='relative w-full h-full'>
+    <div className='relative w-full h-full bg-[#F0F2F7]'>
       <Header />
       <Panel />
       <Operator />
@@ -99,7 +99,8 @@ const Workflow: FC<WorkflowProps> = memo(({
       >
         <Background
           gap={[14, 14]}
-          size={1}
+          size={2}
+          color='#E4E5E7'
         />
       </ReactFlow>
     </div>
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index 4373320bd1..89744eb405 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -4,6 +4,7 @@ import {
   memo,
   useState,
 } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useReactFlow } from 'reactflow'
 import {
   PortalToFollowElem,
@@ -13,39 +14,40 @@ import {
 import { SearchLg } from '@/app/components/base/icons/src/vender/line/general'
 import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 
-const ZOOM_IN_OUT_OPTIONS = [
-  [
-    {
-      key: 'in',
-      text: 'Zoom In',
-    },
-    {
-      key: 'out',
-      text: 'Zoom Out',
-    },
-  ],
-  [
-    {
-      key: 'to50',
-      text: 'Zoom to 50%',
-    },
-    {
-      key: 'to100',
-      text: 'Zoom to 100%',
-    },
-  ],
-  [
-    {
-      key: 'fit',
-      text: 'Zoom to Fit',
-    },
-  ],
-]
-
 const ZoomInOut: FC = () => {
+  const { t } = useTranslation()
   const reactFlow = useReactFlow()
   const [open, setOpen] = useState(false)
 
+  const ZOOM_IN_OUT_OPTIONS = [
+    [
+      {
+        key: 'in',
+        text: t('workflow.operator.zoomIn'),
+      },
+      {
+        key: 'out',
+        text: t('workflow.operator.zoomOut'),
+      },
+    ],
+    [
+      {
+        key: 'to50',
+        text: t('workflow.operator.zoomTo50'),
+      },
+      {
+        key: 'to100',
+        text: t('workflow.operator.zoomTo100'),
+      },
+    ],
+    [
+      {
+        key: 'fit',
+        text: t('workflow.operator.zoomToFit'),
+      },
+    ],
+  ]
+
   const handleZoom = (type: string) => {
     if (type === 'in')
       reactFlow.zoomIn()
@@ -55,6 +57,12 @@ const ZoomInOut: FC = () => {
 
     if (type === 'fit')
       reactFlow.fitView()
+
+    if (type === 'to50')
+      reactFlow.zoomTo(0.5)
+
+    if (type === 'to100')
+      reactFlow.zoomTo(1)
   }
 
   return (
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 65e52cfd7f..366495e5cc 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -12,6 +12,13 @@ const translation = {
     'http-request': 'HTTP Request',
     'variable-assigner': 'Variable Assigner',
   },
+  operator: {
+    zoomIn: 'Zoom In',
+    zoomOut: 'Zoom Out',
+    zoomTo50: 'Zoom to 50%',
+    zoomTo100: 'Zoom to 100%',
+    zoomToFit: 'Zoom to Fit',
+  },
   nodes: {
     common: {
       outputVars: 'Output Variables',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 98fc805a3e..cabc29a0d5 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -12,6 +12,13 @@ const translation = {
     'http-request': 'HTTP 请求',
     'variable-assigner': '变量赋值',
   },
+  operator: {
+    zoomIn: '放大',
+    zoomOut: '缩小',
+    zoomTo50: '缩放到 50%',
+    zoomTo100: '放大到 100%',
+    zoomToFit: '自适应视图',
+  },
   nodes: {
     common: {
       outputVars: '输出变量',