From 8fb595aa864b6a3aca6b1b3d4ad0c7ffccb8a01a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Wed, 4 Sep 2024 23:23:07 +0800
Subject: [PATCH] feat: Update AddNodesSider component to use Switch instead of
 Tag for node visibility

---
 web/components/flow/add-nodes-sider.tsx             | 13 +++++++++----
 web/locales/en/flow.ts                              |  4 ++--
 web/locales/zh/flow.ts                              |  4 ++--
 web/pages/mobile/chat/components/InputContainer.tsx | 12 ++++++------
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/web/components/flow/add-nodes-sider.tsx b/web/components/flow/add-nodes-sider.tsx
index d71a12707..2db8f45c5 100644
--- a/web/components/flow/add-nodes-sider.tsx
+++ b/web/components/flow/add-nodes-sider.tsx
@@ -4,7 +4,8 @@ import { IFlowNode } from '@/types/flow';
 import { FLOW_NODES_KEY } from '@/utils';
 import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
 import type { CollapseProps } from 'antd';
-import { Badge, Collapse, Input, Layout, Space, Tag } from 'antd';
+import { Badge, Collapse, Input, Layout, Space, Switch } from 'antd';
+import classnames from 'classnames';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import StaticNodes from './static-nodes';
@@ -199,9 +200,13 @@ const AddNodesSider: React.FC = () => {
             {t('add_node')}
           </p>
 
-          <Tag color={isAllNodesVisible ? 'green' : 'blue'} onClick={onModeChange} className='mr-0'>
-            {isAllNodesVisible ? t('All_Nodes') : t('Higher_Order_Nodes')}
-          </Tag>
+          <Switch
+            checkedChildren='高阶'
+            unCheckedChildren='全部'
+            onClick={onModeChange}
+            className={classnames('w-20', { 'bg-zinc-400': isAllNodesVisible })}
+            defaultChecked
+          />
         </div>
 
         <Search placeholder='Search node' onSearch={searchNode} allowClear />
diff --git a/web/locales/en/flow.ts b/web/locales/en/flow.ts
index 27b388e74..11b86a39a 100644
--- a/web/locales/en/flow.ts
+++ b/web/locales/en/flow.ts
@@ -19,6 +19,6 @@ export const FlowEn = {
   Please_Add_Nodes_First: 'Please add nodes first',
   Add_Global_Variable_of_Flow: 'Add global variable of flow',
   Add_Parameter: 'Add Parameter',
-  Higher_Order_Nodes: 'Higher Order Nodes',
-  All_Nodes: 'All Nodes',
+  Higher_Order_Nodes: 'Higher Order',
+  All_Nodes: 'All',
 };
diff --git a/web/locales/zh/flow.ts b/web/locales/zh/flow.ts
index f846059c4..462c429fa 100644
--- a/web/locales/zh/flow.ts
+++ b/web/locales/zh/flow.ts
@@ -19,6 +19,6 @@ export const FlowZn = {
   Please_Add_Nodes_First: '请先添加节点',
   Add_Global_Variable_of_Flow: '添加 Flow 全局变量',
   Add_Parameter: '添加参数',
-  Higher_Order_Nodes: '高阶节点',
-  All_Nodes: '所有节点',
+  Higher_Order_Nodes: '高阶',
+  All_Nodes: '所有',
 };
diff --git a/web/pages/mobile/chat/components/InputContainer.tsx b/web/pages/mobile/chat/components/InputContainer.tsx
index f9af2ea3e..59a545684 100644
--- a/web/pages/mobile/chat/components/InputContainer.tsx
+++ b/web/pages/mobile/chat/components/InputContainer.tsx
@@ -6,7 +6,7 @@ import { ClearOutlined, LoadingOutlined, PauseCircleOutlined, RedoOutlined, Send
 import { EventStreamContentType, fetchEventSource } from '@microsoft/fetch-event-source';
 import { useRequest } from 'ahooks';
 import { Button, Input, Popover, Spin, Tag } from 'antd';
-import cls from 'classnames';
+import classnames from 'classnames';
 import { useSearchParams } from 'next/navigation';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { MobileChatContext } from '../';
@@ -245,7 +245,7 @@ const InputContainer: React.FC = () => {
         <div className='flex items-center justify-between text-lg font-bold'>
           <Popover content='暂停回复' trigger={['hover']}>
             <PauseCircleOutlined
-              className={cls('p-2 cursor-pointer', {
+              className={classnames('p-2 cursor-pointer', {
                 'text-[#0c75fc]': canAbort,
                 'text-gray-400': !canAbort,
               })}
@@ -254,7 +254,7 @@ const InputContainer: React.FC = () => {
           </Popover>
           <Popover content='再来一次' trigger={['hover']}>
             <RedoOutlined
-              className={cls('p-2 cursor-pointer', {
+              className={classnames('p-2 cursor-pointer', {
                 'text-gray-400': !history.length || !canNewChat,
               })}
               onClick={redo}
@@ -265,7 +265,7 @@ const InputContainer: React.FC = () => {
           ) : (
             <Popover content='清除历史' trigger={['hover']}>
               <ClearOutlined
-                className={cls('p-2 cursor-pointer', {
+                className={classnames('p-2 cursor-pointer', {
                   'text-gray-400': !history.length || !canNewChat,
                 })}
                 onClick={clearHistory}
@@ -276,7 +276,7 @@ const InputContainer: React.FC = () => {
       </div>
       {/* 输入框 */}
       <div
-        className={cls(
+        className={classnames(
           'flex py-2 px-3 items-center justify-between bg-white dark:bg-[#242733] dark:border-[#6f7f95] rounded-xl border',
           {
             'border-[#0c75fc] dark:border-[rgba(12,117,252,0.8)]': isFocus,
@@ -323,7 +323,7 @@ const InputContainer: React.FC = () => {
 
         <Button
           type='primary'
-          className={cls('flex items-center justify-center rounded-lg bg-button-gradient border-0 ml-2', {
+          className={classnames('flex items-center justify-center rounded-lg bg-button-gradient border-0 ml-2', {
             'opacity-40 cursor-not-allowed': !userInput.trim() || !canNewChat,
           })}
           onClick={onSubmit}