chore(ui): login page & workflow page (#3046)

* login page & number input & multirow select & llm select

* workflow

* adjust nodes

packages/web/components/common/Icon/constants.ts

@@ -4,6 +4,7 @@ export const iconPaths = {
   book: () => import('./icons/book.svg'),
   change: () => import('./icons/change.svg'),
   chatSend: () => import('./icons/chatSend.svg'),
+  check: () => import('./icons/check.svg'),
   closeSolid: () => import('./icons/closeSolid.svg'),
   collectionLight: () => import('./icons/collectionLight.svg'),
   collectionSolid: () => import('./icons/collectionSolid.svg'),
@@ -59,7 +60,6 @@ export const iconPaths = {
   'common/playFill': () => import('./icons/common/playFill.svg'),
   'common/playLight': () => import('./icons/common/playLight.svg'),
   'common/publishFill': () => import('./icons/common/publishFill.svg'),
-  'common/questionLight': () => import('./icons/common/questionLight.svg'),
   'common/refreshLight': () => import('./icons/common/refreshLight.svg'),
   'common/resultLight': () => import('./icons/common/resultLight.svg'),
   'common/retryLight': () => import('./icons/common/retryLight.svg'),
@@ -217,6 +217,7 @@ export const iconPaths = {
   'core/workflow/template/FileRead': () => import('./icons/core/workflow/template/FileRead.svg'),
   'core/workflow/template/aiChat': () => import('./icons/core/workflow/template/aiChat.svg'),
   'core/workflow/template/baseChart': () => import('./icons/core/workflow/template/baseChart.svg'),
+  'core/workflow/template/bing': () => import('./icons/core/workflow/template/bing.svg'),
   'core/workflow/template/codeRun': () => import('./icons/core/workflow/template/codeRun.svg'),
   'core/workflow/template/customFeedback': () =>
     import('./icons/core/workflow/template/customFeedback.svg'),
@@ -224,18 +225,16 @@ export const iconPaths = {
     import('./icons/core/workflow/template/datasetConcat.svg'),
   'core/workflow/template/datasetSearch': () =>
     import('./icons/core/workflow/template/datasetSearch.svg'),
+  'core/workflow/template/datasource': () =>
+    import('./icons/core/workflow/template/datasource.svg'),
   'core/workflow/template/duckduckgo': () =>
     import('./icons/core/workflow/template/duckduckgo.svg'),
   'core/workflow/template/extractJson': () =>
     import('./icons/core/workflow/template/extractJson.svg'),
-  'core/workflow/template/wiki': () => import('./icons/core/workflow/template/wiki.svg'),
-  'core/workflow/template/datasource': () =>
-    import('./icons/core/workflow/template/datasource.svg'),
-  'core/workflow/template/google': () => import('./icons/core/workflow/template/google.svg'),
-  'core/workflow/template/bing': () => import('./icons/core/workflow/template/bing.svg'),
   'core/workflow/template/fetchUrl': () => import('./icons/core/workflow/template/fetchUrl.svg'),
   'core/workflow/template/formInput': () => import('./icons/core/workflow/template/formInput.svg'),
   'core/workflow/template/getTime': () => import('./icons/core/workflow/template/getTime.svg'),
+  'core/workflow/template/google': () => import('./icons/core/workflow/template/google.svg'),
   'core/workflow/template/httpRequest': () =>
     import('./icons/core/workflow/template/httpRequest.svg'),
   'core/workflow/template/ifelse': () => import('./icons/core/workflow/template/ifelse.svg'),
@@ -271,6 +270,7 @@ export const iconPaths = {
   'core/workflow/template/variable': () => import('./icons/core/workflow/template/variable.svg'),
   'core/workflow/template/variableUpdate': () =>
     import('./icons/core/workflow/template/variableUpdate.svg'),
+  'core/workflow/template/wiki': () => import('./icons/core/workflow/template/wiki.svg'),
   'core/workflow/template/workflowStart': () =>
     import('./icons/core/workflow/template/workflowStart.svg'),
   'core/workflow/touchTable': () => import('./icons/core/workflow/touchTable.svg'),
@@ -280,6 +280,7 @@ export const iconPaths = {
   date: () => import('./icons/date.svg'),
   delete: () => import('./icons/delete.svg'),
   drag: () => import('./icons/drag.svg'),
+  edgeAdd: () => import('./icons/edgeAdd.svg'),
   edit: () => import('./icons/edit.svg'),
   empty: () => import('./icons/empty.svg'),
   export: () => import('./icons/export.svg'),
@@ -302,6 +303,7 @@ export const iconPaths = {
   'file/pdf': () => import('./icons/file/pdf.svg'),
   'file/qaImport': () => import('./icons/file/qaImport.svg'),
   'file/uploadFile': () => import('./icons/file/uploadFile.svg'),
+  help: () => import('./icons/help.svg'),
   history: () => import('./icons/history.svg'),
   infoRounded: () => import('./icons/infoRounded.svg'),
   kbTest: () => import('./icons/kbTest.svg'),
@@ -331,7 +333,6 @@ export const iconPaths = {
   save: () => import('./icons/save.svg'),
   stop: () => import('./icons/stop.svg'),
   'support/account/loginoutLight': () => import('./icons/support/account/loginoutLight.svg'),
-  'support/account/passwordLogin': () => import('./icons/support/account/passwordLogin.svg'),
   'support/account/plans': () => import('./icons/support/account/plans.svg'),
   'support/account/promotionLight': () => import('./icons/support/account/promotionLight.svg'),
   'support/bill/extraDatasetsize': () => import('./icons/support/bill/extraDatasetsize.svg'),

packages/web/components/common/Icon/icons/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5587 3.69438C13.9492 3.30386 14.5824 3.30386 14.9729 3.69438C15.3634 4.08491 15.3634 4.71807 14.9729 5.1086L7.63956 12.4419C7.24904 12.8325 6.61587 12.8325 6.22535 12.4419L2.89201 9.1086C2.50149 8.71807 2.50149 8.08491 2.89201 7.69438C3.28254 7.30386 3.9157 7.30386 4.30623 7.69438L6.93245 10.3206L13.5587 3.69438Z"/>
+</svg>

packages/web/components/common/Icon/icons/common/editor/resizer.svg

@@ -1 +1,4 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1704259732773" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4183" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M319.20128 974.56128L348.16 1003.52l655.36-655.36-28.95872-28.95872-655.36 655.36zM675.84 1003.52l327.68-327.68-28.95872-28.95872-327.68 327.68L675.84 1003.52z" fill="#000000" p-id="4184"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9" fill="none">
+  <path d="M0.950928 8.44922L8.32385 1.07629" stroke="#8A95A7" stroke-linecap="round"/>
+  <path d="M4.3418 8.46167L8.32373 4.47974" stroke="#8A95A7" stroke-linecap="round"/>
+</svg>

packages/web/components/common/Icon/icons/common/importLight.svg

@@ -1,6 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" >
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 16">
-    <path
+  <path d="M4.67391 1.54593C4.67391 1.4286 4.5788 1.3335 4.46148 1.3335C2.77062 1.3335 1.3999 2.70421 1.3999 4.39507V11.6053C1.3999 13.2961 2.77062 14.6668 4.46148 14.6668H11.6717C13.3625 14.6668 14.7332 13.2961 14.7332 11.6053V4.39507C14.7332 2.70421 13.3625 1.3335 11.6717 1.3335H10.1345C9.76634 1.3335 9.46786 1.63197 9.46786 2.00016C9.46786 2.36835 9.76634 2.66683 10.1345 2.66683H11.6717C12.6261 2.66683 13.3999 3.44059 13.3999 4.39507V11.6053C13.3999 12.5597 12.6261 13.3335 11.6717 13.3335H4.46148C3.507 13.3335 2.73324 12.5597 2.73324 11.6053V4.39507C2.73324 3.44059 3.507 2.66683 4.46148 2.66683C4.5788 2.66683 4.67391 2.57172 4.67391 2.4544V1.54593Z"/>
-        d="M4.25845 0.738983C4.25845 0.606996 4.15146 0.5 4.01947 0.5C2.11725 0.5 0.575195 2.04205 0.575195 3.94428V12.0557C0.575195 13.9579 2.11725 15.5 4.01947 15.5H12.1309C14.0331 15.5 15.5752 13.9579 15.5752 12.0557V3.94428C15.5752 2.04205 14.0331 0.5 12.1309 0.5H10.4017C9.98744 0.5 9.65166 0.835786 9.65166 1.25C9.65166 1.66421 9.98744 2 10.4017 2H12.1309C13.2047 2 14.0752 2.87048 14.0752 3.94428V12.0557C14.0752 13.1295 13.2047 14 12.1309 14H4.01947C2.94568 14 2.0752 13.1295 2.0752 12.0557V3.94428C2.0752 2.87048 2.94568 2 4.01947 2C4.15146 2 4.25845 1.893 4.25845 1.76102V0.738983Z" />
+  <path d="M7.44944 4.75954C7.34354 4.01799 7.12171 3.55235 6.74882 3.28913C5.8613 2.66266 5.20252 2.66685 5.10562 2.66747L5.0992 2.6675H4.43253V1.33416H5.0992C5.33393 1.33416 6.30657 1.34492 7.51773 2.19984C8.33645 2.77775 8.6439 3.69241 8.76938 4.57104C8.87172 5.28764 8.86601 6.09307 8.86075 6.83513C8.85961 6.99546 8.8585 7.15284 8.8585 7.30571C8.8585 7.73778 8.84925 8.14363 8.83559 8.50744L9.39664 7.94639C9.65699 7.68604 10.0791 7.68604 10.3395 7.94639C10.5998 8.20674 10.5998 8.62885 10.3395 8.8892L8.58233 10.6463C8.44087 10.7878 8.25166 10.8524 8.06659 10.8401C7.88151 10.8524 7.6923 10.7878 7.55084 10.6463L5.79372 8.8892C5.53337 8.62885 5.53337 8.20674 5.79372 7.94639C6.05407 7.68604 6.47618 7.68604 6.73653 7.94639L7.41122 8.62109L7.49304 8.7029C7.5115 8.29493 7.52517 7.81934 7.52517 7.30571C7.52517 7.1294 7.52626 6.956 7.52734 6.78569C7.53201 6.04784 7.53631 5.36788 7.44944 4.75954Z"/>
-    <path
-        d="M7.38092 4.3543C7.26179 3.52006 7.01223 2.99621 6.59273 2.70009C5.59427 1.99531 4.85314 2.00002 4.74413 2.00072L4.7369 2.00075H3.9869V0.500749H4.7369C5.00097 0.500749 6.0952 0.512848 7.45775 1.47464C8.37881 2.12479 8.7247 3.15378 8.86586 4.14224C8.98099 4.94841 8.97457 5.85452 8.96865 6.68934C8.96737 6.86971 8.96612 7.04676 8.96612 7.21874C8.96612 7.70483 8.95571 8.16141 8.94035 8.57069L9.57153 7.93951C9.86442 7.64661 10.3393 7.64661 10.6322 7.93951C10.9251 8.2324 10.9251 8.70727 10.6322 9.00017L8.65543 10.9769C8.49629 11.1361 8.28342 11.2087 8.07521 11.1949C7.86701 11.2087 7.65414 11.1361 7.495 10.9769L5.51824 9.00017C5.22535 8.70727 5.22535 8.2324 5.51824 7.93951C5.81113 7.64661 6.28601 7.64661 6.5789 7.93951L7.33793 8.69854L7.42997 8.79058C7.45074 8.33162 7.46612 7.79657 7.46612 7.21874C7.46612 7.02039 7.46735 6.82532 7.46856 6.63372C7.47382 5.80363 7.47866 5.03868 7.38092 4.3543Z" />
 </svg>

packages/web/components/common/Icon/icons/common/questionLight.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M8.99997 2.196C5.24222 2.196 2.19596 5.24225 2.19596 9C2.19596 12.7577 5.24222 15.804 8.99997 15.804C12.7577 15.804 15.804 12.7577 15.804 9C15.804 5.24225 12.7577 2.196 8.99997 2.196ZM0.529297 9C0.529297 4.32178 4.32174 0.529331 8.99997 0.529331C13.6782 0.529331 17.4706 4.32178 17.4706 9C17.4706 13.6782 13.6782 17.4707 8.99997 17.4707C4.32174 17.4707 0.529297 13.6782 0.529297 9ZM9.18533 6.03224C8.846 5.97403 8.49702 6.0378 8.20019 6.21224C7.90337 6.38669 7.67786 6.66056 7.56361 6.98534C7.41089 7.41949 6.93512 7.64764 6.50097 7.49491C6.06681 7.34218 5.83866 6.86642 5.99139 6.43226C6.23625 5.73619 6.71956 5.14923 7.35572 4.77536C7.99188 4.40148 8.73983 4.26481 9.4671 4.38956C10.1944 4.5143 10.854 4.89241 11.3292 5.45692C11.8043 6.0213 12.0644 6.73558 12.0634 7.4733C12.063 8.67899 11.1697 9.46897 10.5467 9.88431C10.2098 10.1089 9.8788 10.2738 9.63531 10.382C9.51239 10.4367 9.4088 10.4782 9.33398 10.5067C9.2965 10.5209 9.26605 10.532 9.24377 10.54L9.21658 10.5495L9.20781 10.5525L9.20467 10.5535L9.20342 10.554C9.20317 10.554 9.20239 10.5543 8.93887 9.76373L9.20239 10.5543C8.76577 10.6998 8.29384 10.4639 8.1483 10.0273C8.00281 9.59078 8.23857 9.11902 8.67491 8.97331L8.68542 8.9696C8.69671 8.96559 8.71548 8.95878 8.74065 8.94919C8.79114 8.92996 8.86654 8.89986 8.95842 8.85902C9.14454 8.7763 9.38634 8.65481 9.62222 8.49756C10.1447 8.14925 10.3967 7.79388 10.3967 7.47253L10.3967 7.47129C10.3972 7.127 10.2759 6.79364 10.0542 6.53025C9.83245 6.26686 9.52467 6.09044 9.18533 6.03224ZM8.16663 12.8187C8.16663 12.3584 8.53973 11.9853 8.99997 11.9853H9.0076C9.46784 11.9853 9.84094 12.3584 9.84094 12.8187C9.84094 13.2789 9.46784 13.652 9.0076 13.652H8.99997C8.53973 13.652 8.16663 13.2789 8.16663 12.8187Z" />
-</svg>

packages/web/components/common/Icon/icons/common/select.svg

@@ -1,4 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" >
-    <path fill-rule="evenodd" clip-rule="evenodd"
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.42475 4.58336C5.1644 4.84371 5.1644 5.26582 5.42475 5.52617C5.6851 5.78652 6.10721 5.78652 6.36756 5.52617L8.00008 3.89366L9.63259 5.52617C9.89294 5.78652 10.315 5.78652 10.5754 5.52617C10.8357 5.26582 10.8357 4.84371 10.5754 4.58336L8.47148 2.47944C8.21113 2.21909 7.78902 2.21909 7.52867 2.47944L5.42475 4.58336ZM5.42475 10.4722C5.1644 10.7325 5.1644 11.1546 5.42475 11.415L7.52867 13.5189C7.56122 13.5514 7.59629 13.5799 7.63325 13.6043C7.89202 13.7752 8.24367 13.7467 8.47148 13.5189L10.5754 11.415C10.8357 11.1546 10.8357 10.7325 10.5754 10.4722C10.315 10.2118 9.89294 10.2118 9.63259 10.4722L8.00008 12.1047L6.36756 10.4722C6.10721 10.2118 5.6851 10.2118 5.42475 10.4722Z" />
-        d="M5.42469 4.94872C5.16434 5.20906 5.16434 5.63117 5.42469 5.89152C5.68504 6.15187 6.10715 6.15187 6.3675 5.89152L8.00002 4.25901L9.63253 5.89152C9.89288 6.15187 10.315 6.15187 10.5753 5.89152C10.8357 5.63117 10.8357 5.20906 10.5753 4.94872L8.47142 2.8448C8.21107 2.58445 7.78896 2.58445 7.52861 2.8448L5.42469 4.94872ZM5.42469 10.8375C5.16434 11.0979 5.16434 11.52 5.42469 11.7803L7.52861 13.8843C7.56115 13.9168 7.59623 13.9453 7.63319 13.9697C7.89196 14.1405 8.24361 14.1121 8.47142 13.8843L10.5753 11.7803C10.8357 11.52 10.8357 11.0979 10.5753 10.8375C10.315 10.5772 9.89288 10.5772 9.63253 10.8375L8.00002 12.47L6.3675 10.8375C6.10715 10.5772 5.68504 10.5772 5.42469 10.8375Z" />
 </svg>

packages/web/components/common/Icon/icons/edgeAdd.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09993 1.21182C6.09993 0.604303 5.60744 0.111816 4.99993 0.111816C4.39242 0.111816 3.89993 0.604303 3.89993 1.21182L3.89993 3.11182H1.9999C1.39239 3.11182 0.899902 3.6043 0.899902 4.21182C0.899902 4.81933 1.39239 5.31182 1.9999 5.31182H3.89993L3.89993 7.21182C3.89993 7.81933 4.39242 8.31182 4.99993 8.31182C5.60744 8.31182 6.09993 7.81933 6.09993 7.21182V5.31182H7.9999C8.60742 5.31182 9.0999 4.81933 9.0999 4.21182C9.0999 3.6043 8.60742 3.11182 7.9999 3.11182H6.09993V1.21182Z" fill="#487FFF"/>
+</svg>

packages/web/components/common/Icon/icons/help.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.99968 2.55678C4.99348 2.55678 2.55648 4.99379 2.55648 7.99998C2.55648 11.0062 4.99348 13.4432 7.99968 13.4432C11.0059 13.4432 13.4429 11.0062 13.4429 7.99998C13.4429 4.99379 11.0059 2.55678 7.99968 2.55678ZM1.22314 7.99998C1.22314 4.25741 4.2571 1.22345 7.99968 1.22345C11.7423 1.22345 14.7762 4.25741 14.7762 7.99998C14.7762 11.7426 11.7423 14.7765 7.99968 14.7765C4.2571 14.7765 1.22314 11.7426 1.22314 7.99998ZM8.14797 5.62577C7.87651 5.57921 7.59732 5.63022 7.35986 5.76978C7.1224 5.90934 6.942 6.12843 6.8506 6.38825C6.72842 6.73558 6.34781 6.9181 6.00048 6.79591C5.65315 6.67373 5.47064 6.29312 5.59282 5.9458C5.78871 5.38894 6.17536 4.91937 6.68428 4.62027C7.19321 4.32117 7.79157 4.21184 8.37338 4.31163C8.9552 4.41143 9.48292 4.71392 9.86308 5.16552C10.2432 5.61702 10.4512 6.18845 10.4504 6.77862C10.4501 7.74318 9.73548 8.37516 9.23708 8.70743C8.96754 8.88713 8.70274 9.01905 8.50796 9.10562C8.40962 9.14933 8.32674 9.18252 8.26689 9.20532C8.23691 9.21674 8.21254 9.22562 8.19473 9.23195L8.17297 9.23957L8.16595 9.24197L8.16345 9.24282L8.16245 9.24315C8.16225 9.24322 8.16162 9.24343 7.9508 8.61097L8.16162 9.24343C7.81232 9.35986 7.43478 9.17109 7.31835 8.82179C7.20195 8.47261 7.39056 8.0952 7.73963 7.97863L7.74805 7.97567C7.75708 7.97246 7.77209 7.96701 7.79223 7.95934C7.83262 7.94395 7.89294 7.91987 7.96644 7.8872C8.11534 7.82103 8.30878 7.72383 8.49748 7.59803C8.91545 7.31938 9.11709 7.03509 9.11709 6.77801L9.1171 6.77702C9.11751 6.50159 9.02042 6.2349 8.84305 6.02419C8.66567 5.81347 8.41944 5.67234 8.14797 5.62577ZM7.33301 11.0549C7.33301 10.6867 7.63149 10.3883 7.99968 10.3883H8.00579C8.37398 10.3883 8.67246 10.6867 8.67246 11.0549C8.67246 11.4231 8.37398 11.7216 8.00579 11.7216H7.99968C7.63149 11.7216 7.33301 11.4231 7.33301 11.0549Z"/>
+</svg>

packages/web/components/common/Icon/icons/support/account/passwordLogin.svg

@@ -1,6 +0,0 @@
-<svg t="1709471698048" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4242"
-    width="128" height="128">
-    <path
-        d="M855.158154 945.664H168.999385c-28.081231 0-50.845538-22.843077-50.845539-51.003077V486.833231C118.153846 458.673231 129.457231 433.230769 157.538462 433.230769h708.923076c28.081231 0 39.502769 25.442462 39.50277 53.602462v407.827692c0 28.16-22.764308 51.003077-50.806154 51.003077z m-340.913231-376.595692a99.761231 99.761231 0 0 0-99.603692 99.958154c0 40.251077 23.827692 74.712615 57.974154 90.54523V827.076923a39.384615 39.384615 0 0 0 78.76923 0v-65.417846a99.879385 99.879385 0 0 0 62.424616-92.632615 99.761231 99.761231 0 0 0-99.564308-99.958154z m0.551385-396.524308c-104.841846 0-189.794462 81.329231-197.159385 184.123077H217.718154C229.060923 201.334154 358.321231 78.769231 516.489846 78.769231s287.428923 122.564923 298.732308 277.897846h-103.266462c-7.364923-102.793846-92.317538-184.123077-197.159384-184.123077z"
-        fill="#3B9BF8" p-id="4243"></path>
-</svg>

packages/web/components/common/Input/NumberInput/index.tsx

@@ -7,28 +7,50 @@ import {
   NumberInputProps
 } from '@chakra-ui/react';
 import React from 'react';
+import MyIcon from '../../Icon';
+import { UseFormRegister } from 'react-hook-form';
 
 type Props = Omit<NumberInputProps, 'onChange'> & {
-  onChange: (e?: number) => any;
+  onChange?: (e?: number) => any;
   placeholder?: string;
+  register?: UseFormRegister<any>;
+  name?: string;
+  bg?: string;
 };
 
 const MyNumberInput = (props: Props) => {
+  const { register, name, onChange, placeholder, bg, ...restProps } = props;
+
   return (
     <NumberInput
-      {...props}
+      {...restProps}
       onChange={(e) => {
+        if (!onChange) return;
         if (isNaN(Number(e))) {
-          props?.onChange();
+          onChange();
         } else {
-          props?.onChange(Number(e));
+          onChange(Number(e));
         }
       }}
     >
-      <NumberInputField placeholder={props?.placeholder} />
+      <NumberInputField
+        bg={bg}
+        placeholder={placeholder}
+        {...(register && name
+          ? register(name, {
+              required: props.isRequired,
+              min: props.min,
+              max: props.max
+            })
+          : {})}
+      />
       <NumberInputStepper>
-        <NumberIncrementStepper />
+        <NumberIncrementStepper>
-        <NumberDecrementStepper />
+          <MyIcon name={'core/chat/chevronUp'} width={'12px'} />
+        </NumberIncrementStepper>
+        <NumberDecrementStepper>
+          <MyIcon name={'core/chat/chevronDown'} width={'12px'} />
+        </NumberDecrementStepper>
       </NumberInputStepper>
     </NumberInput>
   );

packages/web/components/common/MyBox/FormLabel.tsx

@@ -10,7 +10,14 @@ const FormLabel = ({
   children: React.ReactNode;
 }) => {
   return (
-    <Box color={'myGray.900'} fontSize={'sm'} position={'relative'} flexShrink={0} {...props}>
+    <Box
+      color={'myGray.900'}
+      fontWeight={'medium'}
+      fontSize={'sm'}
+      position={'relative'}
+      flexShrink={0}
+      {...props}
+    >
       {required && (
         <Box color={'red.600'} position={'absolute'} top={'-4px'} left={'-6px'}>
           *

packages/web/components/common/MyMenu/index.tsx

@@ -148,7 +148,6 @@ const MyMenu = ({
             color={isOpen ? 'primary.600' : ''}
             w="fit-content"
             p="1"
-            bgColor={isOpen ? 'myGray.50' : ''}
             h="fit-content"
             borderRadius="sm"
           >

packages/web/components/common/MySelect/MultipleRowSelect.tsx

@@ -1,9 +1,9 @@
 import React, { useRef, useCallback, useState } from 'react';
 import { Button, useDisclosure, Box, Flex, useOutsideClick } from '@chakra-ui/react';
-import { ChevronDownIcon } from '@chakra-ui/icons';
 import { MultipleSelectProps } from './type';
 import EmptyTip from '../EmptyTip';
 import { useTranslation } from 'next-i18next';
+import MyIcon from '../../common/Icon';
 
 const MultipleRowSelect = ({
   placeholder,
@@ -106,17 +106,25 @@ const MultipleRowSelect = ({
       <Button
         justifyContent={'space-between'}
         width={'100%'}
-        rightIcon={<ChevronDownIcon />}
+        variant={'whitePrimaryOutline'}
-        variant={'whiteBase'}
+        size={'lg'}
+        fontSize={'sm'}
+        px={3}
+        outline={'none'}
+        rightIcon={<MyIcon name={'core/chat/chevronDown'} w={4} color={'myGray.500'} />}
         _active={{
           transform: 'none'
         }}
         {...(isOpen
           ? {
-              boxShadow: '0px 0px 4px #A8DBFF',
+              borderColor: 'primary.600',
-              borderColor: 'primary.500'
+              color: 'primary.700',
+              boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)'
             }
-          : {})}
+          : {
+              borderColor: 'myGray.200',
+              boxShadow: 'none'
+            })}
         {...styles}
         onClick={() => (isOpen ? onClose() : onOpenSelect())}
       >

packages/web/components/common/MySelect/index.tsx

@@ -59,10 +59,11 @@ const MySelect = <T = any,>(
     display: 'flex',
     alignItems: 'center',
     _hover: {
-      backgroundColor: 'myWhite.600'
+      backgroundColor: 'myGray.100',
+      color: 'primary.700'
     },
     _notLast: {
-      mb: 2
+      mb: 1
     }
   };
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -107,16 +108,19 @@ const MySelect = <T = any,>(
           ref={ButtonRef}
           width={width}
           px={3}
-          rightIcon={<ChevronDownIcon />}
+          rightIcon={<MyIcon name={'core/chat/chevronDown'} w={4} color={'myGray.500'} />}
-          variant={'whitePrimary'}
+          variant={'whitePrimaryOutline'}
+          size={'lg'}
+          fontSize={'sm'}
           textAlign={'left'}
           _active={{
             transform: 'none'
           }}
           {...(isOpen
             ? {
-                boxShadow: '0px 0px 4px #A8DBFF',
+                boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)',
-                borderColor: 'primary.500'
+                borderColor: 'primary.600',
+                color: 'primary.700'
               }
             : {})}
           {...props}
@@ -157,7 +161,7 @@ const MySelect = <T = any,>(
               {...(value === item.value
                 ? {
                     ref: SelectedItemRef,
-                    color: 'primary.600',
+                    color: 'primary.700',
                     bg: 'myGray.100'
                   }
                 : {

packages/web/components/common/MyTooltip/QuestionTip.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import MyTooltip from '.';
-import { IconProps, QuestionOutlineIcon } from '@chakra-ui/icons';
+import { IconProps } from '@chakra-ui/icons';
+import MyIcon from '../Icon';
 
 type Props = IconProps & {
   label?: string | React.ReactNode;
@@ -9,7 +10,7 @@ type Props = IconProps & {
 const QuestionTip = ({ label, maxW, ...props }: Props) => {
   return (
     <MyTooltip label={label} maxW={maxW}>
-      <QuestionOutlineIcon w={'0.9rem'} {...props} />
+      <MyIcon name={'help' as any} w={'16px'} color={'myGray.500'} {...props} />
     </MyTooltip>
   );
 };

packages/web/components/common/Tabs/LightRowTabs.tsx

@@ -72,11 +72,11 @@ const LightRowTabs = <ValueType = string,>({
             _hover={{
               color: activeColor
             }}
+            fontWeight={'medium'}
             {...(value === item.value
               ? {
                   color: activeColor,
                   cursor: 'default',
-                  fontWeight: 'bold',
                   borderBottomColor: activeColor
                 }
               : {

packages/web/components/common/Textarea/PromptEditor/Editor.tsx

@@ -105,10 +105,10 @@ export default function Editor({
               left={0}
               right={0}
               bottom={0}
-              py={3}
+              py={2}
-              px={4}
+              px={3}
               pointerEvents={'none'}
-              overflow={'overlay'}
+              overflow={'hidden'}
             >
               <Box
                 color={'myGray.400'}
@@ -146,12 +146,12 @@ export default function Editor({
         <Box
           zIndex={10}
           position={'absolute'}
-          bottom={0}
+          bottom={-1}
           right={2}
           cursor={'pointer'}
           onClick={onOpenModal}
         >
-          <MyIcon name={'common/fullScreenLight'} w={'14px'} color={'myGray.600'} />
+          <MyIcon name={'common/fullScreenLight'} w={'14px'} color={'myGray.500'} />
         </Box>
       )}
     </Box>

packages/web/components/common/Textarea/PromptEditor/index.module.scss

@@ -9,6 +9,45 @@
 
   font-size: var(--chakra-fontSizes-sm);
   overflow-y: auto;
+
+  &:hover {
+    border-color: var(--chakra-colors-primary-300);
+  }
+  &::-webkit-scrollbar {
+    color: var(--chakra-colors-myGray-100);
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--chakra-colors-myGray-200) !important;
+    cursor: pointer;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--chakra-colors-myGray-250) !important;
+  }
+}
+
+.contentEditable_isFlow {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  border: 1px solid var(--chakra-colors-myGray-200);
+  border-radius: var(--chakra-radii-sm);
+  padding: 6px 8px;
+  font-size: var(--chakra-fontSizes-sm);
+  overflow-y: auto;
+
+  &:hover {
+    border-color: var(--chakra-colors-primary-300);
+  }
+  &::-webkit-scrollbar {
+    color: var(--chakra-colors-myGray-100);
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--chakra-colors-myGray-200) !important;
+    cursor: pointer;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--chakra-colors-myGray-250) !important;
+  }
 }
 
 .contentEditable:focus {

packages/web/components/common/Textarea/PromptEditor/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, ModalBody, ModalFooter, useDisclosure } from '@chakra-ui/react';
+import { Button, ModalBody, ModalFooter, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 import { editorStateToText } from './utils';
 import Editor from './Editor';

packages/web/components/core/workflow/NodeInputSelect.tsx

@@ -150,12 +150,20 @@ const NodeInputSelect = ({
       trigger="click"
       Button={
         <Button
-          size={'xs'}
+          leftIcon={
-          leftIcon={<MyIcon name={renderTypeData.icon as any} w={'0.8rem'} color={'primary.600'} />}
+            <MyIcon name={renderTypeData.icon as any} w={'14px'} color={'primary.600'} mr={-0.5} />
-          rightIcon={<MyIcon name={'common/select'} w={'0.8rem'} color={'myGray.500'} />}
+          }
+          rightIcon={<MyIcon name={'common/select'} w={'0.8rem'} color={'myGray.500'} ml={-1} />}
           variant={'grayBase'}
           border={theme.borders.base}
-          borderRadius={'xs'}
+          borderColor={'myGray.200'}
+          borderRadius={'sm'}
+          px={'10px'}
+          py={'6px'}
+          fontSize={'mini'}
+          color={'myGray.600'}
+          h={'28px'}
+          bg={'myGray.100'}
         >
           <Box fontWeight={'medium'}>{renderTypeData.title}</Box>
         </Button>

packages/web/i18n/en/app.json

@@ -1,5 +1,8 @@
 {
+  "Role_setting": "Role setting",
   "Run": "Execute",
+  "Team Tags Set": "Team tags",
+  "Team_Tags": "Team tags",
   "ai_settings": "AI Configuration",
   "all_apps": "All Applications",
   "app.Version name": "Version Name",
@@ -159,4 +162,4 @@
   "workflow.user_file_input_desc": "Links to documents and images uploaded by users.",
   "workflow.user_select": "User Selection",
   "workflow.user_select_tip": "This module can configure multiple options for selection during the dialogue. Different options can lead to different workflow branches."
-}
+}

packages/web/i18n/zh/app.json

@@ -1,5 +1,8 @@
 {
+  "Role_setting": "权限设置",
   "Run": "运行",
+  "Team Tags Set": "团队标签",
+  "Team_Tags": "团队标签",
   "ai_settings": "AI 配置",
   "all_apps": "全部应用",
   "app.Version name": "版本名称",
@@ -160,4 +163,4 @@
   "workflow.user_file_input_desc": "用户上传的文档和图片链接",
   "workflow.user_select": "用户选择",
   "workflow.user_select_tip": "该模块可配置多个选项，以供对话时选择。不同选项可导向不同工作流支线"
-}
+}

packages/web/styles/theme.ts

@@ -46,7 +46,7 @@ const Button = defineStyleConfig({
       px: '2',
       py: '0',
       h: '24px',
-      fontWeight: 'normal',
+      fontWeight: 'medium',
       borderRadius: 'sm'
     },
     xsSquare: {
@@ -55,14 +55,14 @@ const Button = defineStyleConfig({
       py: '0',
       h: '24px',
       w: '24px',
-      fontWeight: 'normal',
+      fontWeight: 'medium',
       borderRadius: 'sm'
     },
     sm: {
       fontSize: 'sm',
       px: '3',
       py: 0,
-      fontWeight: 'normal',
+      fontWeight: 'medium',
       h: '30px',
       borderRadius: 'sm'
     },
@@ -70,7 +70,7 @@ const Button = defineStyleConfig({
       fontSize: 'sm',
       px: '0',
       py: 0,
-      fontWeight: 'normal',
+      fontWeight: 'medium',
       h: '30px',
       w: '30px',
       borderRadius: 'sm'
@@ -80,8 +80,8 @@ const Button = defineStyleConfig({
       px: '4',
       py: 0,
       h: '34px',
-      fontWeight: 'normal',
+      fontWeight: 'medium',
-      borderRadius: 'md'
+      borderRadius: 'sm'
     },
     mdSquare: {
       fontSize: 'sm',
@@ -89,16 +89,16 @@ const Button = defineStyleConfig({
       py: 0,
       h: '34px',
       w: '34px',
-      fontWeight: 'normal',
+      fontWeight: 'medium',
-      borderRadius: 'md'
+      borderRadius: 'sm'
     },
     lg: {
       fontSize: 'md',
       px: '4',
       py: 0,
       h: '40px',
-      fontWeight: 'normal',
+      fontWeight: 'medium',
-      borderRadius: 'lg'
+      borderRadius: 'md'
     },
     lgSquare: {
       fontSize: 'md',
@@ -106,8 +106,8 @@ const Button = defineStyleConfig({
       py: 0,
       h: '40px',
       w: '40px',
-      fontWeight: 'normal',
+      fontWeight: 'medium',
-      borderRadius: 'lg'
+      borderRadius: 'md'
     }
   },
   variants: {
@@ -175,6 +175,16 @@ const Button = defineStyleConfig({
         color: 'myGray.600 !important'
       }
     },
+    whitePrimaryOutline: {
+      border: '1px solid',
+      borderColor: 'myGray.250',
+      bg: 'white',
+      transition: 'background 0.1s',
+      _hover: {
+        color: 'primary.600',
+        borderColor: 'primary.300'
+      }
+    },
     whitePrimary: {
       color: 'myGray.600',
       border: '1px solid',
@@ -288,12 +298,18 @@ const Input: ComponentStyleConfig = {
     sm: defineStyle({
       field: {
         h: '32px',
-        borderRadius: 'md'
+        borderRadius: 'sm'
       }
     }),
     md: defineStyle({
       field: {
-        h: '34px',
+        h: '36px',
+        borderRadius: 'sm'
+      }
+    }),
+    lg: defineStyle({
+      field: {
+        h: '40px',
         borderRadius: 'md'
       }
     })
@@ -303,11 +319,15 @@ const Input: ComponentStyleConfig = {
       field: {
         border: '1px solid',
         borderColor: 'borderColor.low',
+        px: 3,
         _focus: {
           borderColor: 'primary.500',
           boxShadow: shadowLight,
           bg: 'white'
         },
+        _hover: {
+          borderColor: 'primary.300'
+        },
         _disabled: {
           color: 'myGray.400',
           bg: 'myWhite.300'
@@ -330,7 +350,7 @@ const NumberInput = numInputMultiStyle({
         fontsize: 'sm'
       }
     }),
-    md: defineStyle({
+    lg: defineStyle({
       field: {
         h: '40px',
         borderRadius: 'md',
@@ -347,7 +367,7 @@ const NumberInput = numInputMultiStyle({
         _focus: {
           borderColor: 'primary.500 !important',
           boxShadow: `${shadowLight} !important`,
-          bg: 'transparent'
+          bg: 'white'
         },
         _disabled: {
           color: 'myGray.400 !important',
@@ -356,10 +376,12 @@ const NumberInput = numInputMultiStyle({
       },
       stepper: {
         bg: 'transparent',
-        border: 'none',
         color: 'myGray.600',
         _active: {
           color: 'primary.500'
+        },
+        _hover: {
+          bg: 'myGray.100'
         }
       }
     })
@@ -373,16 +395,24 @@ const Textarea: ComponentStyleConfig = {
   variants: {
     outline: {
       border: '1px solid',
+      px: 3,
       borderRadius: 'md',
       borderColor: 'myGray.200',
       fontSize: 'sm',
       _hover: {
-        borderColor: ''
+        borderColor: 'primary.300'
       },
       _focus: {
         borderColor: 'primary.500',
         boxShadow: shadowLight,
         bg: 'white'
+      },
+      '&::-webkit-resizer': {
+        background: "url('/icon/resizer.svg') no-repeat",
+        backgroundSize: '11px',
+        backgroundPosition: 'right bottom',
+        backgroundPositionX: 'right 12px',
+        backgroundPositionY: 'bottom 12px'
       }
     }
   },

projects/app/public/icon/logo.svg

@@ -1,12 +1,37 @@
-<svg width="1041" height="1348" viewBox="0 0 1041 1348" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M340.837 0.33933L681.068 0.338989V0.455643C684.032 0.378397 686.999 0.339702 689.967 0.339702C735.961 0.3397 781.504 9.62899 823.997 27.6772C866.49 45.7254 905.099 72.1791 937.622 105.528C970.144 138.877 995.942 178.467 1013.54 222.04C1031.14 265.612 1040.2 312.312 1040.2 359.474L340.836 359.474L340.836 1347.84C296.157 1347.84 251.914 1338.55 210.636 1320.49C169.357 1302.43 131.85 1275.95 100.257 1242.58C68.6636 1209.21 43.6023 1169.59 26.5041 1125.99C11.3834 1087.43 2.75216 1046.42 0.957956 1004.81H0.605869L0.605897 368.098H0.70363C0.105752 341.831 2.23741 315.443 7.14306 289.411C20.2709 219.745 52.6748 155.754 100.257 105.528C147.839 55.3017 208.462 21.0975 274.461 7.24017C296.426 2.62833 318.657 0.339101 340.837 0.33933Z" fill="url(#paint0_linear_1172_228)"/>
+<path d="M21.5938 10.9C21.5938 9.45229 21.1475 8.03706 20.3113 6.8333C19.4751 5.62954 18.2866 4.69132 16.8961 4.13729C15.5056 3.58326 13.9755 3.4383 12.4993 3.72075C11.0231 4.00319 9.66715 4.70034 8.60288 5.72406C7.53861 6.74777 6.81384 8.05206 6.52021 9.47199C6.22658 10.8919 6.37728 12.3637 6.95326 13.7013C7.52923 15.0388 8.50462 16.182 9.75606 16.9864C11.0075 17.7907 12.4788 18.22 13.9839 18.22V10.9H21.5938Z" fill="url(#paint0_linear_0_5622)"/>
-<path d="M633.639 904.645H513.029V576.37H635.422V576.377C678.161 576.607 720.454 585.093 759.951 601.37C799.997 617.874 836.384 642.064 867.033 672.559C897.683 703.054 921.996 739.257 938.583 779.101C955.171 818.944 963.709 861.648 963.709 904.775H633.639V904.645Z" fill="url(#paint1_linear_1172_228)"/>
+<path d="M29.6263 10.9C29.6263 9.93877 29.4498 8.98691 29.1069 8.09882C28.764 7.21072 28.2613 6.40377 27.6277 5.72405C26.9941 5.04433 26.2418 4.50515 25.414 4.13729C24.5861 3.76943 23.6987 3.58009 22.8027 3.58009C21.9066 3.58009 21.0192 3.76943 20.1913 4.13729C19.3635 4.50515 18.6112 5.04434 17.9776 5.72406C17.344 6.40378 16.8413 7.21072 16.4984 8.09882C16.1555 8.98692 15.979 9.93877 15.979 10.9L29.6263 10.9Z" fill="url(#paint1_linear_0_5622)"/>
+<path d="M28.3745 22.634C28.3745 21.8174 28.2342 21.0087 27.9617 20.2543C27.6892 19.4998 27.2898 18.8143 26.7863 18.2368C26.2828 17.6594 25.685 17.2013 25.0272 16.8888C24.3693 16.5763 23.6642 16.4155 22.9521 16.4155V22.634H28.3745Z" fill="url(#paint2_linear_0_5622)"/>
+<path d="M13.9836 20.3912C12.9843 20.3912 11.9947 20.5635 11.0715 20.8985C10.1482 21.2334 9.30926 21.7242 8.60262 22.3431C7.89597 22.9619 7.33543 23.6966 6.95299 24.5051C6.57056 25.3137 6.37372 26.1803 6.37372 27.0554C6.37372 27.9306 6.57056 28.7972 6.95299 29.6057C7.33543 30.4143 7.89597 31.1489 8.60262 31.7678C9.30926 32.3866 10.1482 32.8775 11.0715 33.2124C11.9947 33.5473 12.9843 33.7197 13.9836 33.7197L13.9836 20.3912Z" fill="url(#paint3_linear_0_5622)"/>
+<path d="M13.9837 10.6101L13.9837 26.9823L6.3736 26.9823L6.3736 10.6101H13.9837Z" fill="url(#paint4_linear_0_5622)"/>
+<path d="M23.0327 10.8988L13.8973 10.8988L13.8973 3.58008L23.0327 3.58008V10.8988Z" fill="url(#paint5_linear_0_5622)"/>
+<path d="M23.0327 22.6316H17.9771V16.4155L23.0327 16.4155V22.6316Z" fill="url(#paint6_linear_0_5622)"/>
 <defs>
-<linearGradient id="paint0_linear_1172_228" x1="520.404" y1="0.338989" x2="520.404" y2="1347.84" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint0_linear_0_5622" x1="18" y1="3.58008" x2="18" y2="33.7197" gradientUnits="userSpaceOnUse">
 <stop stop-color="#326DFF"/>
 <stop offset="1" stop-color="#8EAEFF"/>
 </linearGradient>
-<linearGradient id="paint1_linear_1172_228" x1="738.369" y1="576.37" x2="738.369" y2="904.775" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint1_linear_0_5622" x1="18" y1="3.58008" x2="18" y2="33.7197" gradientUnits="userSpaceOnUse">
+<stop stop-color="#326DFF"/>
+<stop offset="1" stop-color="#8EAEFF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_0_5622" x1="18" y1="3.58008" x2="18" y2="33.7197" gradientUnits="userSpaceOnUse">
+<stop stop-color="#326DFF"/>
+<stop offset="1" stop-color="#8EAEFF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_0_5622" x1="18" y1="3.58008" x2="18" y2="33.7197" gradientUnits="userSpaceOnUse">
+<stop stop-color="#326DFF"/>
+<stop offset="1" stop-color="#8EAEFF"/>
+</linearGradient>
+<linearGradient id="paint4_linear_0_5622" x1="18" y1="3.58008" x2="18" y2="33.7197" gradientUnits="userSpaceOnUse">
+<stop stop-color="#326DFF"/>
+<stop offset="1" stop-color="#8EAEFF"/>
+</linearGradient>
+<linearGradient id="paint5_linear_0_5622" x1="18" y1="3.58008" x2="18" y2="33.7197" gradientUnits="userSpaceOnUse">
+<stop stop-color="#326DFF"/>
+<stop offset="1" stop-color="#8EAEFF"/>
+</linearGradient>
+<linearGradient id="paint6_linear_0_5622" x1="18" y1="3.58008" x2="18" y2="33.7197" gradientUnits="userSpaceOnUse">
 <stop stop-color="#326DFF"/>
 <stop offset="1" stop-color="#8EAEFF"/>
 </linearGradient>

projects/app/public/icon/resizer.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.45093 7.94055L8.82385 0.567627" stroke="#8A95A7" stroke-linecap="round"/>
+<path d="M4.8418 7.953L8.82373 3.97107" stroke="#8A95A7" stroke-linecap="round"/>
+</svg>

projects/app/src/components/core/ai/SettingLLMModel/index.tsx

@@ -68,7 +68,9 @@ const SettingLLMModel = ({
         <Button
           w={'100%'}
           justifyContent={'flex-start'}
-          variant={'whiteBase'}
+          variant={'whitePrimaryOutline'}
+          size={'lg'}
+          fontSize={'sm'}
           bg={bg}
           _active={{
             transform: 'none'
@@ -81,8 +83,9 @@ const SettingLLMModel = ({
               w={'18px'}
             />
           }
-          rightIcon={<MyIcon name={'common/select'} w={'1rem'} />}
+          rightIcon={<MyIcon name={'common/select'} w={'1.2rem'} color={'myGray.500'} />}
-          pl={4}
+          px={3}
+          pr={2}
           onClick={onOpenAIChatSetting}
         >
           <Box flex={1} textAlign={'left'}>

projects/app/src/components/core/app/FileSelect.tsx

@@ -59,7 +59,9 @@ const FileSelect = ({
   return (
     <Flex alignItems={'center'}>
       <MyIcon name={'core/app/simpleMode/file'} mr={2} w={'20px'} />
-      <FormLabel {...labelStyle}>{t('app:file_upload')}</FormLabel>
+      <FormLabel color={'myGray.600'} {...labelStyle}>
+        {t('app:file_upload')}
+      </FormLabel>
       <ChatFunctionTip type={'file'} />
       <Box flex={1} />
       <MyTooltip label={t('app:config_file_upload')}>
@@ -68,6 +70,7 @@ const FileSelect = ({
           iconSpacing={1}
           size={'sm'}
           mr={'-5px'}
+          color={'myGray.600'}
           onClick={onOpen}
         >
           {formLabel}

projects/app/src/components/core/app/InputGuideConfig.tsx

@@ -87,7 +87,7 @@ const InputGuideConfig = ({
     <Flex alignItems={'center'}>
       <MyIcon name={'core/app/inputGuides'} mr={2} w={'20px'} />
       <Flex alignItems={'center'}>
-        <FormLabel>{chatT('input_guide')}</FormLabel>
+        <FormLabel color={'myGray.600'}>{chatT('input_guide')}</FormLabel>
         <ChatFunctionTip type={'inputGuide'} />
       </Flex>
       <Box flex={1} />
@@ -97,6 +97,7 @@ const InputGuideConfig = ({
           iconSpacing={1}
           size={'sm'}
           mr={'-5px'}
+          color={'myGray.600'}
           onClick={onOpen}
         >
           {formLabel}

projects/app/src/components/core/app/QGSwitch.tsx

@@ -11,7 +11,7 @@ const QGSwitch = (props: SwitchProps) => {
   return (
     <Flex alignItems={'center'}>
       <MyIcon name={'core/chat/QGFill'} mr={2} w={'20px'} />
-      <FormLabel>{t('common:core.app.Question Guide')}</FormLabel>
+      <FormLabel color={'myGray.600'}>{t('common:core.app.Question Guide')}</FormLabel>
       <ChatFunctionTip type={'nextQuestion'} />
       <Box flex={1} />
       <Switch {...props} />

projects/app/src/components/core/app/ScheduledTriggerConfig.tsx

@@ -270,7 +270,7 @@ const ScheduledTriggerConfig = ({
         <Flex alignItems={'center'}>
           <MyIcon name={'core/app/schedulePlan'} w={'20px'} />
           <HStack ml={2} flex={1} spacing={1}>
-            <FormLabel>{t('common:core.app.Interval timer run')}</FormLabel>
+            <FormLabel color={'myGray.600'}>{t('common:core.app.Interval timer run')}</FormLabel>
             <QuestionTip label={t('common:core.app.Interval timer tip')} />
           </HStack>
           <MyTooltip label={t('common:core.app.Config schedule plan')}>
@@ -279,6 +279,7 @@ const ScheduledTriggerConfig = ({
               iconSpacing={1}
               size={'sm'}
               mr={'-5px'}
+              color={'myGray.600'}
               onClick={onOpen}
             >
               {formatLabel}

projects/app/src/components/core/app/TTSSelect.tsx

@@ -82,7 +82,7 @@ const TTSSelect = ({
   return (
     <Flex alignItems={'center'}>
       <MyIcon name={'core/app/simpleMode/tts'} mr={2} w={'20px'} />
-      <FormLabel>{t('common:core.app.TTS')}</FormLabel>
+      <FormLabel color={'myGray.600'}>{t('common:core.app.TTS')}</FormLabel>
       <ChatFunctionTip type={'tts'} />
       <Box flex={1} />
       <MyTooltip label={t('common:core.app.Select TTS')}>
@@ -92,6 +92,7 @@ const TTSSelect = ({
           size={'sm'}
           mr={'-5px'}
           onClick={onOpen}
+          color={'myGray.600'}
         >
           {formLabel}
         </Button>

projects/app/src/components/core/app/VariableEdit.tsx

@@ -173,7 +173,9 @@ const VariableEdit = ({
       {/* Row box */}
       <Flex alignItems={'center'}>
         <MyIcon name={'core/app/simpleMode/variable'} w={'20px'} />
-        <FormLabel ml={2}>{t('common:core.module.Variable')}</FormLabel>
+        <FormLabel ml={2} color={'myGray.600'}>
+          {t('common:core.module.Variable')}
+        </FormLabel>
         <ChatFunctionTip type={'variable'} />
         <Box flex={1} />
         <Button
@@ -181,6 +183,7 @@ const VariableEdit = ({
           leftIcon={<SmallAddIcon />}
           iconSpacing={1}
           size={'sm'}
+          color={'myGray.600'}
           mr={'-5px'}
           onClick={() => {
             reset(addVariable());
@@ -193,60 +196,96 @@ const VariableEdit = ({
       {formatVariables.length > 0 && (
         <Box mt={2} borderRadius={'md'} overflow={'hidden'} borderWidth={'1px'} borderBottom="none">
           <TableContainer>
-            <Table>
+            <Table bg={'white'}>
-              <Thead>
+              <Thead h={8}>
                 <Tr>
                   <Th
                     fontSize={'mini'}
                     borderRadius={'none !important'}
-                    w={'18px !important'}
+                    bg={'myGray.50'}
                     p={0}
-                  />
+                    px={4}
-                  <Th fontSize={'mini'}>{t('workflow:Variable_name')}</Th>
+                    fontWeight={'medium'}
-                  <Th fontSize={'mini'}>{t('app:global_variables_desc')}</Th>
+                  >
-                  <Th fontSize={'mini'}>{t('common:common.Require Input')}</Th>
+                    {t('common:core.module.variable.key')}
-                  <Th fontSize={'mini'} borderRadius={'none !important'}></Th>
+                  </Th>
+                  <Th fontSize={'mini'} bg={'myGray.50'} p={0} px={4} fontWeight={'medium'}>
+                    {t('workflow:Variable_name')}
+                  </Th>
+                  <Th fontSize={'mini'} bg={'myGray.50'} p={0} px={4} fontWeight={'medium'}>
+                    {t('common:common.Require Input')}
+                  </Th>
+                  <Th
+                    fontSize={'mini'}
+                    borderRadius={'none !important'}
+                    bg={'myGray.50'}
+                    p={0}
+                    px={4}
+                    fontWeight={'medium'}
+                  >
+                    {t('common:common.Operation')}
+                  </Th>
                 </Tr>
               </Thead>
               <Tbody>
                 {formatVariables.map((item) => (
                   <Tr key={item.id}>
-                    <Td p={0} pl={3}>
-                      <MyIcon name={item.icon as any} w={'16px'} color={'myGray.500'} />
-                    </Td>
-                    <Td>{item.key}</Td>
                     <Td
-                      maxW={'200px'}
+                      p={0}
-                      fontSize={'sm'}
+                      px={4}
-                      whiteSpace={'pre-wrap'}
+                      h={8}
-                      wordBreak={'break-all'}
+                      color={'myGray.900'}
-                      px={0}
+                      fontSize={'mini'}
+                      fontWeight={'medium'}
                     >
-                      {item.description || '-'}
+                      <Flex alignItems={'center'}>
+                        <MyIcon name={item.icon as any} w={'16px'} color={'myGray.400'} mr={2} />
+                        {item.label}
+                      </Flex>
                     </Td>
-                    <Td>{item.required ? '✔' : '-'}</Td>
+                    <Td
-                    <Td>
+                      p={0}
-                      <MyIcon
+                      px={4}
-                        mr={3}
+                      h={8}
-                        name={'common/settingLight'}
+                      color={'myGray.900'}
-                        w={'16px'}
+                      fontSize={'mini'}
-                        cursor={'pointer'}
+                      fontWeight={'medium'}
-                        onClick={() => {
+                    >
-                          const formattedItem = {
+                      <Flex alignItems={'center'}>{item.key}</Flex>
-                            ...item,
+                    </Td>
-                            list: item.enums || []
+                    <Td p={0} px={4} h={8} color={'myGray.900'} fontSize={'mini'}>
-                          };
+                      <Flex alignItems={'center'}>
-                          reset(formattedItem);
+                        {item.required ? (
-                        }}
+                          <MyIcon name={'check'} w={'16px'} color={'myGray.900'} mr={2} />
-                      />
+                        ) : (
-                      <MyIcon
+                          ''
-                        name={'delete'}
+                        )}
-                        w={'16px'}
+                      </Flex>
-                        cursor={'pointer'}
+                    </Td>
-                        onClick={() =>
+                    <Td p={0} px={4} h={8} color={'myGray.600'} fontSize={'mini'}>
-                          onChange(variables.filter((variable) => variable.id !== item.id))
+                      <Flex alignItems={'center'}>
-                        }
+                        <MyIcon
-                      />
+                          mr={3}
+                          name={'common/settingLight'}
+                          w={'16px'}
+                          cursor={'pointer'}
+                          onClick={() => {
+                            const formattedItem = {
+                              ...item,
+                              list: item.enums || []
+                            };
+                            reset(formattedItem);
+                          }}
+                        />
+                        <MyIcon
+                          name={'delete'}
+                          w={'16px'}
+                          cursor={'pointer'}
+                          onClick={() =>
+                            onChange(variables.filter((variable) => variable.id !== item.id))
+                          }
+                        />
+                      </Flex>
                     </Td>
                   </Tr>
                 ))}

projects/app/src/components/core/app/WelcomeTextConfig.tsx

@@ -13,17 +13,20 @@ const WelcomeTextConfig = (props: TextareaProps) => {
     <>
       <Flex alignItems={'center'}>
         <MyIcon name={'core/app/simpleMode/chat'} w={'20px'} />
-        <FormLabel ml={2}>{t('common:core.app.Welcome Text')}</FormLabel>
+        <FormLabel ml={2} color={'myGray.600'}>
+          {t('common:core.app.Welcome Text')}
+        </FormLabel>
         <ChatFunctionTip type={'welcome'} />
       </Flex>
       <MyTextarea
         className="nowheel"
         iconSrc={'core/app/simpleMode/chat'}
         title={t('common:core.app.Welcome Text')}
-        mt={2}
+        mt={1.5}
         rows={6}
         fontSize={'sm'}
-        bg={'myGray.50'}
+        bg={'white'}
+        minW={'384px'}
         placeholder={t('common:core.app.tip.welcomeTextTip')}
         autoHeight
         minH={100}

projects/app/src/components/core/app/WhisperConfig.tsx

@@ -34,7 +34,7 @@ const WhisperConfig = ({
   return (
     <Flex alignItems={'center'}>
       <MyIcon name={'core/app/simpleMode/whisper'} mr={2} w={'20px'} />
-      <FormLabel>{t('common:core.app.Whisper')}</FormLabel>
+      <FormLabel color={'myGray.600'}>{t('common:core.app.Whisper')}</FormLabel>
       <Box flex={1} />
       <MyTooltip label={t('common:core.app.Config whisper')}>
         <Button
@@ -42,6 +42,7 @@ const WhisperConfig = ({
           iconSpacing={1}
           size={'sm'}
           mr={'-5px'}
+          color={'myGray.600'}
           onClick={onOpen}
         >
           {formLabel}

projects/app/src/components/core/chat/components/AIResponseBox.tsx

@@ -39,6 +39,7 @@ import { useTranslation } from 'react-i18next';
 import { Controller, useForm } from 'react-hook-form';
 import MySelect from '@fastgpt/web/components/common/MySelect';
 import MyTextarea from '@/components/common/Textarea/MyTextarea';
+import MyNumberInput from '@fastgpt/web/components/common/Input/NumberInput';
 
 type props = {
   value: UserChatItemValueItemType | AIChatItemValueItemType;
@@ -244,25 +245,15 @@ const RenderUserFormInteractive = React.memo(function RenderFormInput({
             />
           )}
           {input.type === FlowNodeInputTypeEnum.numberInput && (
-            <NumberInput
+            <MyNumberInput
-              step={1}
               min={input.min}
               max={input.max}
               isDisabled={interactive.params.submitted}
               bg={'white'}
-              rounded={'md'}
+              register={register}
-            >
+              name={input.label}
-              <NumberInputField
+              isRequired={input.required}
-                bg={'white'}
+            />
-                {...register(input.label, {
-                  required: input.required
-                })}
-              />
-              <NumberInputStepper>
-                <NumberIncrementStepper />
-                <NumberDecrementStepper />
-              </NumberInputStepper>
-            </NumberInput>
           )}
           {input.type === FlowNodeInputTypeEnum.select && (
             <Controller

projects/app/src/components/support/permission/DefaultPerList/index.tsx

@@ -61,6 +61,7 @@ const DefaultPermissionList = ({
             }
           }}
           fontSize={styles?.fontSize}
+          fontWeight={styles?.fontWeight}
         />
       </Box>
       <ConfirmModal />

projects/app/src/pages/app/detail/components/Plugin/Header.tsx

@@ -145,7 +145,6 @@ const Header = () => {
         )}
         <Flex
           mt={[2, 0]}
-          py={3}
           pl={[2, 4]}
           pr={[2, 6]}
           borderBottom={'base'}
@@ -163,12 +162,20 @@ const Header = () => {
               })}
         >
           {/* back */}
-          <MyIcon
+          <Box
-            name={'common/leftArrowLight'}
+            _hover={{
-            w={'1.75rem'}
+              bg: 'myGray.200'
-            cursor={'pointer'}
+            }}
-            onClick={isPublished ? onBack : onOpenBackConfirm}
+            p={0.5}
-          />
+            borderRadius={'sm'}
+          >
+            <MyIcon
+              name={'common/leftArrowLight'}
+              w={6}
+              cursor={'pointer'}
+              onClick={isPublished ? onBack : onOpenBackConfirm}
+            />
+          </Box>
 
           {/* app info */}
           <Box ml={1}>

projects/app/src/pages/app/detail/components/RouteTab.tsx

@@ -51,6 +51,7 @@ const RouteTab = () => {
           px={2}
           py={0.5}
           fontWeight={'medium'}
+          borderRadius={'sm'}
           {...(currentTab === tab.id
             ? {
                 color: 'primary.700'
@@ -59,8 +60,7 @@ const RouteTab = () => {
                 color: 'myGray.600',
                 cursor: 'pointer',
                 _hover: {
-                  bg: 'myGray.200',
+                  bg: 'myGray.200'
-                  borderRadius: 'md'
                 },
                 onClick: () => setCurrentTab(tab.id)
               })}

projects/app/src/pages/app/detail/components/SimpleApp/AppCard.tsx

@@ -84,7 +84,7 @@ const AppCard = () => {
         >
           {appDetail.intro || t('common:core.app.tip.Add a intro to app')}
         </Box>
-        <HStack alignItems={'flex-end'}>
+        <HStack alignItems={'center'}>
           <Button
             size={['sm', 'md']}
             variant={'whitePrimary'}
@@ -107,7 +107,7 @@ const AppCard = () => {
             <MyMenu
               Button={
                 <IconButton
-                  variant={'whiteBase'}
+                  variant={'whitePrimary'}
                   size={['smSquare', 'mdSquare']}
                   icon={<MyIcon name={'more'} w={'1rem'} />}
                   aria-label={''}

projects/app/src/pages/app/detail/components/Workflow/Header.tsx

@@ -151,7 +151,6 @@ const Header = () => {
         )}
         <Flex
           mt={[2, 0]}
-          py={3}
           pl={[2, 4]}
           pr={[2, 6]}
           borderBottom={'base'}
@@ -169,12 +168,20 @@ const Header = () => {
               })}
         >
           {/* back */}
-          <MyIcon
+          <Box
-            name={'common/leftArrowLight'}
+            _hover={{
-            w={'1.75rem'}
+              bg: 'myGray.200'
-            cursor={'pointer'}
+            }}
-            onClick={isPublished ? onBack : onOpenBackConfirm}
+            p={0.5}
-          />
+            borderRadius={'sm'}
+          >
+            <MyIcon
+              name={'common/leftArrowLight'}
+              w={6}
+              cursor={'pointer'}
+              onClick={isPublished ? onBack : onOpenBackConfirm}
+            />
+          </Box>
 
           {/* app info */}
           <Box ml={1}>

projects/app/src/pages/app/detail/components/WorkflowComponents/AppCard.tsx

@@ -16,6 +16,7 @@ import { publishStatusStyle } from '../constants';
 import MyPopover from '@fastgpt/web/components/common/MyPopover';
 import { fileDownload } from '@/web/common/file/utils';
 import { AppChatConfigType } from '@fastgpt/global/core/app/type';
+import MyBox from '@fastgpt/web/components/common/MyBox';
 
 const ImportSettings = dynamic(() => import('./Flow/ImportSettings'));
 
@@ -27,97 +28,120 @@ const AppCard = ({
   isPublished: boolean;
 }) => {
   const { t } = useTranslation();
-  const { feConfigs } = useSystemStore();
 
-  const { appDetail, onOpenInfoEdit, onOpenTeamTagModal, onDelApp, currentTab } =
+  const { appDetail, onOpenInfoEdit, onOpenTeamTagModal, onDelApp } = useContextSelector(
-    useContextSelector(AppContext, (v) => v);
+    AppContext,
-  const { showHistoryModal } = useContextSelector(WorkflowContext, (v) => v);
+    (v) => v
+  );
 
   const { isOpen: isOpenImport, onOpen: onOpenImport, onClose: onCloseImport } = useDisclosure();
 
   const InfoMenu = useCallback(
     ({ children }: { children: React.ReactNode }) => {
       return (
-        <MyMenu
+        <MyPopover
-          width={150}
+          placement={'bottom-end'}
-          Button={children}
+          hasArrow={false}
-          menuList={[
+          offset={[2, 4]}
-            {
+          w={'116px'}
-              children: [
+          trigger={'hover'}
-                {
+          Trigger={children}
-                  icon: 'edit',
+        >
-                  label: t('app:edit_info'),
+          {({ onClose }) => (
-                  onClick: onOpenInfoEdit
+            <Box p={1.5}>
-                },
+              <MyBox
-                {
+                display={'flex'}
-                  icon: 'support/team/key',
+                size={'md'}
-                  label: t('common:common.Role'),
+                px={1}
-                  onClick: onOpenInfoEdit
+                py={1.5}
-                }
+                rounded={'4px'}
-              ]
+                _hover={{ color: 'primary.600', bg: 'rgba(17, 24, 36, 0.05)' }}
-            },
+                cursor={'pointer'}
-            ...(!showHistoryModal && currentTab === TabEnum.appEdit
+                onClick={onOpenInfoEdit}
-              ? [
+              >
-                  {
+                <MyIcon name={'edit'} w={'16px'} mr={2} />
-                    children: [
+                <Box fontSize={'sm'}>{t('app:edit_info')}</Box>
-                      {
+              </MyBox>
-                        label: t('app:import_configs'),
+              <MyBox
-                        icon: 'common/importLight',
+                display={'flex'}
-                        onClick: onOpenImport
+                size={'md'}
-                      },
+                px={1}
-                      {
+                py={1.5}
-                        label: ExportPopover({
+                rounded={'4px'}
-                          chatConfig: appDetail.chatConfig,
+                _hover={{ color: 'primary.600', bg: 'rgba(17, 24, 36, 0.05)' }}
-                          appName: appDetail.name
+                cursor={'pointer'}
-                        }),
+                onClick={onOpenInfoEdit}
-                        menuItemStyles: {
+              >
-                          p: 0,
+                <MyIcon name={'support/team/key'} w={'16px'} mr={2} />
-                          cursor: 'default'
+                <Box fontSize={'sm'}>{t('app:Role_setting')}</Box>
-                        }
+              </MyBox>
-                      }
+              <Box w={'full'} h={'1px'} bg={'myGray.200'} my={1} />
-                    ]
+              <MyBox
-                  }
+                display={'flex'}
-                ]
+                size={'md'}
-              : []),
+                px={1}
-            ...(appDetail.permission.hasWritePer && feConfigs?.show_team_chat
+                py={1.5}
-              ? [
+                rounded={'4px'}
-                  {
+                _hover={{ color: 'primary.600', bg: 'rgba(17, 24, 36, 0.05)' }}
-                    children: [
+                cursor={'pointer'}
-                      {
+                onClick={onOpenImport}
-                        icon: 'support/team/memberLight',
+              >
-                        label: t('common:common.Team Tags Set'),
+                <MyIcon name={'common/importLight'} w={'16px'} mr={2} />
-                        onClick: onOpenTeamTagModal
+                <Box fontSize={'sm'}>{t('app:import_configs')}</Box>
-                      }
+              </MyBox>
-                    ]
+              <MyBox
-                  }
+                display={'flex'}
-                ]
+                size={'md'}
-              : []),
+                px={1}
-            ...(appDetail.permission.isOwner
+                py={1.5}
-              ? [
+                rounded={'4px'}
-                  {
+                _hover={{ color: 'primary.600', bg: 'rgba(17, 24, 36, 0.05)' }}
-                    children: [
+                cursor={'pointer'}
-                      {
+              >
-                        type: 'danger' as 'danger',
+                {ExportPopover({
-                        icon: 'delete',
+                  chatConfig: appDetail.chatConfig,
-                        label: t('common:common.Delete'),
+                  appName: appDetail.name
-                        onClick: onDelApp
+                })}
-                      }
+              </MyBox>
-                    ]
+              <Box w={'full'} h={'1px'} bg={'myGray.200'} my={1} />
-                  }
+
-                ]
+              <MyBox
-              : [])
+                display={'flex'}
-          ]}
+                size={'md'}
-        />
+                px={1}
+                py={1.5}
+                rounded={'4px'}
+                _hover={{ color: 'primary.600', bg: 'rgba(17, 24, 36, 0.05)' }}
+                cursor={'pointer'}
+                onClick={onOpenTeamTagModal}
+              >
+                <MyIcon name={'core/dataset/tag'} w={'16px'} mr={2} />
+                <Box fontSize={'sm'}>{t('app:Team_Tags')}</Box>
+              </MyBox>
+              <Box w={'full'} h={'1px'} bg={'myGray.200'} my={1} />
+
+              <MyBox
+                display={'flex'}
+                size={'md'}
+                px={1}
+                py={1.5}
+                rounded={'4px'}
+                color={'red.600'}
+                _hover={{ bg: 'rgba(17, 24, 36, 0.05)' }}
+                cursor={'pointer'}
+                onClick={onDelApp}
+              >
+                <MyIcon name={'delete'} w={'16px'} mr={2} />
+                <Box fontSize={'sm'}>{t('common:common.Delete')}</Box>
+              </MyBox>
+            </Box>
+          )}
+        </MyPopover>
       );
     },
     [
       appDetail.chatConfig,
       appDetail.name,
-      appDetail.permission.hasWritePer,
-      appDetail.permission.isOwner,
-      currentTab,
-      feConfigs?.show_team_chat,
-      showHistoryModal,
       onDelApp,
       onOpenImport,
       onOpenInfoEdit,
@@ -129,21 +153,26 @@ const AppCard = ({
   const Render = useMemo(() => {
     return (
       <HStack>
-        <InfoMenu>
+        <Avatar src={appDetail.avatar} w={'1.75rem'} borderRadius={'md'} />
-          <Avatar src={appDetail.avatar} w={'1.75rem'} borderRadius={'md'} />
-        </InfoMenu>
         <Box>
           <InfoMenu>
-            <HStack spacing={1} cursor={'pointer'}>
+            <HStack
+              spacing={1}
+              cursor={'pointer'}
+              pl={1}
+              ml={-1}
+              borderRadius={'xs'}
+              _hover={{ bg: 'myGray.150' }}
+            >
               <Box color={'myGray.900'}>{appDetail.name}</Box>
-              <MyIcon name={'common/select'} w={'1rem'} />
+              <MyIcon name={'common/select'} w={'1rem'} color={'myGray.500'} />
             </HStack>
           </InfoMenu>
           {showSaveStatus && (
-            <Flex alignItems={'center'} h={'20px'} fontSize={'mini'} lineHeight={1}>
+            <Flex alignItems={'center'} fontSize={'mini'} lineHeight={1}>
               <MyTag
                 py={0}
-                px={0}
+                px={1}
                 showDot
                 bg={'transparent'}
                 colorSchema={
@@ -211,15 +240,19 @@ function ExportPopover({
   return (
     <MyPopover
       placement={'right-start'}
-      offset={[0, 0]}
+      offset={[0, 20]}
       hasArrow
       trigger={'hover'}
       w={'8.6rem'}
       Trigger={
-        <Flex align={'center'} w={'100%'} py={2} px={3}>
+        // <Flex align={'center'} w={'100%'} py={2} px={3}>
-          <Avatar src={'export'} borderRadius={'sm'} w={'1rem'} mr={3} />
+        //   <Avatar src={'export'} borderRadius={'sm'} w={'1rem'} mr={3} />
-          {t('app:export_configs')}
+        //   {t('app:export_configs')}
-        </Flex>
+        // </Flex>
+        <MyBox display={'flex'} size={'md'} rounded={'4px'} cursor={'pointer'}>
+          <MyIcon name={'export'} w={'16px'} mr={2} />
+          <Box fontSize={'sm'}>{t('app:export_configs')}</Box>
+        </MyBox>
       }
     >
       {({ onClose }) => (

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/ButtonEdge.tsx

@@ -116,13 +116,13 @@ const ButtonEdge = (props: EdgeProps) => {
       (edge) => edge.sourceHandle === sourceHandleId && edge.targetHandle === targetHandleId
     );
     if (!targetEdge) {
-      if (highlightEdge) return '#3370ff';
+      if (highlightEdge) return '#487FFF';
       return '#94B5FF';
     }
 
     // debug mode
     const colorMap = {
-      [RuntimeEdgeStatusEnum.active]: '#39CC83',
+      [RuntimeEdgeStatusEnum.active]: '#487FFF',
       [RuntimeEdgeStatusEnum.waiting]: '#5E8FFF',
       [RuntimeEdgeStatusEnum.skipped]: '#8A95A7'
     };

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/Container.tsx

@@ -6,10 +6,8 @@ const Container = ({ children, ...props }: BoxProps) => {
   return (
     <Flex
       flexDirection={'column'}
-      px={4}
+      mx={4}
-      mx={2}
+      p={4}
-      mb={2}
-      py={'10px'}
       position={'relative'}
       bg={'myGray.50'}
       border={'1px solid #F0F1F6'}

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/IOTitle.tsx

@@ -4,7 +4,7 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
 
 const IOTitle = ({ text, ...props }: { text?: 'Input' | 'Output' | string } & StackProps) => {
   return (
-    <HStack fontSize={'md'} alignItems={'center'} fontWeight={'medium'} mb={3} {...props}>
+    <HStack fontSize={'md'} alignItems={'center'} fontWeight={'medium'} mb={4} {...props}>
       <Box w={'3px'} h={'14px'} borderRadius={'13px'} bg={'primary.600'} />
       <Box color={'myGray.900'}>{text}</Box>
     </HStack>

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/hooks/useWorkflow.tsx

@@ -290,7 +290,7 @@ export const useWorkflow = () => {
   // Loop node size and position
   const resetParentNodeSizeAndPosition = useMemoizedFn((rect: Rect, parentId: string) => {
     const width = rect.width + 110 > 900 ? rect.width + 110 : 900;
-    const height = rect.height + 380 > 900 ? rect.height + 380 : 900;
+    const height = rect.height + 420 > 900 ? rect.height + 420 : 900;
 
     // Update parentNode size and position
     onChangeNode({

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/Loop/NodeLoopEnd.tsx

@@ -80,7 +80,7 @@ const NodeLoopEnd = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
           debug: true
         }}
       >
-        <Box px={4} pb={4}>
+        <Box px={4} pb={4} pt={2}>
           {inputItem && <Reference item={inputItem} nodeId={nodeId} />}
         </Box>
       </NodeCard>

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/Loop/NodeLoopStart.tsx

@@ -100,7 +100,7 @@ const NodeLoopStart = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
           debug: true
         }}
       >
-        <Box px={4} w={'420px'} h={'116px'}>
+        <Box px={4} pt={2} w={'420px'} h={'116px'}>
           {!loopItemInputType ? (
             <EmptyTip text={t('workflow:loop_start_tip')} py={0} mt={4} iconSize={'32px'} />
           ) : (

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeCQNode.tsx

@@ -99,7 +99,7 @@ const NodeCQNode = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                     nodeId={nodeId}
                     handleId={getHandleId(nodeId, 'source', item.key)}
                     position={Position.Right}
-                    translate={[26, 0]}
+                    translate={[36, 0]}
                   />
                 </Box>
               </Box>

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeExtract/index.tsx

@@ -60,7 +60,8 @@ const NodeExtract = ({ data }: NodeProps<FlowNodeItemType>) => {
             </Box>
             <Button
               size={'sm'}
-              variant={'whitePrimary'}
+              variant={'ghost'}
+              color={'myGray.600'}
               leftIcon={<AddIcon fontSize={'10px'} />}
               onClick={() => setEditExtractField(defaultField)}
             >
@@ -78,12 +79,10 @@ const NodeExtract = ({ data }: NodeProps<FlowNodeItemType>) => {
               <Table bg={'white'}>
                 <Thead>
                   <Tr>
-                    <Th bg={'myGray.50'} borderRadius={'none !important'}>
+                    <Th borderRadius={'none !important'}>{t('common:item_name')}</Th>
-                      {t('common:item_name')}
+                    <Th>{t('common:item_description')}</Th>
-                    </Th>
+                    <Th>{t('common:required')}</Th>
-                    <Th bg={'myGray.50'}>{t('common:item_description')}</Th>
+                    <Th borderRadius={'none !important'}></Th>
-                    <Th bg={'myGray.50'}>{t('common:required')}</Th>
-                    <Th bg={'myGray.50'} borderRadius={'none !important'}></Th>
                   </Tr>
                 </Thead>
                 <Tbody>

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig.tsx

@@ -24,7 +24,6 @@ import {
   FlowValueTypeMap
 } from '@fastgpt/global/core/workflow/node/constant';
 import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io';
-import MyNumberInput from '@fastgpt/web/components/common/Input/NumberInput';
 import MySelect from '@fastgpt/web/components/common/MySelect';
 import MultipleSelect from '@fastgpt/web/components/common/MySelect/MultipleSelect';
 import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
@@ -35,6 +34,7 @@ import { useTranslation } from 'react-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import DndDrag, { Draggable } from '@fastgpt/web/components/common/DndDrag';
 import MyTextarea from '@/components/common/Textarea/MyTextarea';
+import MyNumberInput from '@fastgpt/web/components/common/Input/NumberInput';
 
 type ListValueType = { id: string; value: string; label: string }[];
 
@@ -249,8 +249,6 @@ const InputTypeConfig = ({
               {t('common:core.module.Max Length')}
             </FormLabel>
             <MyNumberInput
-              flex={'1 0 0'}
-              bg={'myGray.50'}
               placeholder={t('common:core.module.Max Length placeholder')}
               value={maxLength}
               max={50000}
@@ -269,8 +267,6 @@ const InputTypeConfig = ({
                 {t('common:core.module.Max Value')}
               </FormLabel>
               <MyNumberInput
-                flex={'1 0 0'}
-                bg={'myGray.50'}
                 value={max}
                 onChange={(e) => {
                   // @ts-ignore
@@ -283,8 +279,6 @@ const InputTypeConfig = ({
                 {t('common:core.module.Min Value')}
               </FormLabel>
               <MyNumberInput
-                flex={'1 0 0'}
-                bg={'myGray.50'}
                 value={min}
                 onChange={(e) => {
                   // @ts-ignore

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/PluginInput.tsx

@@ -35,6 +35,7 @@ const FieldEditModal = dynamic(() => import('./InputEditModal'));
 const NodePluginInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
   const { t } = useTranslation();
   const { nodeId, inputs = [], outputs } = data;
+  console.log(outputs);
 
   const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
 
@@ -141,7 +142,7 @@ const NodePluginInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
             }}
           />
         </Container>
-        {!!outputs.length && (
+        {!!outputs.filter((output) => output.type !== FlowNodeOutputTypeEnum.hidden).length && (
           <Container>
             <IOTitle text={t('common:common.Output')} />
             <RenderOutput nodeId={nodeId} flowOutputList={outputs} />

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeSimple.tsx

@@ -15,7 +15,7 @@ import { WorkflowContext } from '../../context';
 const NodeSimple = ({
   data,
   selected,
-  minW = '350px',
+  minW = '524px',
   maxW
 }: NodeProps<FlowNodeItemType> & { minW?: string | number; maxW?: string | number }) => {
   const { t } = useTranslation();

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeSystemConfig.tsx

@@ -21,6 +21,7 @@ import WelcomeTextConfig from '@/components/core/app/WelcomeTextConfig';
 import FileSelect from '@/components/core/app/FileSelect';
 import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
 import { userFilesInput } from '@fastgpt/global/core/workflow/template/system/workflowStart';
+import Container from '../components/Container';
 
 type ComponentProps = {
   chatConfig: AppChatConfigType;
@@ -49,7 +50,7 @@ const NodeUserGuide = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
   return (
     <>
       <NodeCard
-        minW={'300px'}
+        minW={'420px'}
         selected={selected}
         menuForbid={{
           debug: true,
@@ -58,30 +59,30 @@ const NodeUserGuide = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
         }}
         {...data}
       >
-        <Box px={4} py={'10px'} position={'relative'} borderRadius={'md'} className="nodrag">
+        <Container>
           <WelcomeText {...componentsProps} />
-          <Box pt={4}>
+          <Box mt={2} pt={2}>
             <ChatStartVariable {...componentsProps} />
           </Box>
-          <Box mt={3} pt={3} borderTop={'base'}>
+          <Box mt={3} pt={3} borderTop={'base'} borderColor={'myGray.200'}>
             <FileSelectConfig {...componentsProps} />
           </Box>
-          <Box mt={3} pt={3} borderTop={'base'}>
+          <Box mt={3} pt={3} borderTop={'base'} borderColor={'myGray.200'}>
             <TTSGuide {...componentsProps} />
           </Box>
-          <Box mt={3} pt={3} borderTop={'base'}>
+          <Box mt={3} pt={3} borderTop={'base'} borderColor={'myGray.200'}>
             <WhisperGuide {...componentsProps} />
           </Box>
-          <Box mt={3} pt={3} borderTop={'base'}>
+          <Box mt={3} pt={4} borderTop={'base'} borderColor={'myGray.200'}>
             <QuestionGuide {...componentsProps} />
           </Box>
-          <Box mt={3} pt={3} borderTop={'base'}>
+          <Box mt={4} pt={3} borderTop={'base'} borderColor={'myGray.200'}>
             <ScheduledTrigger {...componentsProps} />
           </Box>
-          <Box mt={3} pt={3} borderTop={'base'}>
+          <Box mt={3} pt={3} borderTop={'base'} borderColor={'myGray.200'}>
             <QuestionInputGuide {...componentsProps} />
           </Box>
-        </Box>
+        </Container>
       </NodeCard>
     </>
   );

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeTools.tsx

@@ -26,7 +26,7 @@ const NodeTools = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
         <RenderOutput nodeId={nodeId} flowOutputList={outputs} />
       </Container>
       <Box position={'relative'}>
-        <Box borderBottomLeftRadius={'md'} borderBottomRadius={'md'} overflow={'hidden'}>
+        <Box mb={-4} borderBottomLeftRadius={'md'} borderBottomRadius={'md'} overflow={'hidden'}>
           <Divider
             showBorderBottom={false}
             icon={<MyIcon name="phoneTabbar/tool" w={'16px'} h={'16px'} />}

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeWorkflowStart.tsx

@@ -65,7 +65,7 @@ const NodeStart = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
 
   return (
     <NodeCard
-      minW={'240px'}
+      minW={'420px'}
       selected={selected}
       menuForbid={{
         copy: true,

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/index.tsx

@@ -5,6 +5,7 @@ import { handleHighLightStyle, sourceCommonStyle, handleConnectedStyle, handleSi
 import { NodeOutputKeyEnum } from '@fastgpt/global/core/workflow/constants';
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowContext } from '../../../../context';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 
 type Props = {
   nodeId: string;
@@ -108,9 +109,7 @@ const MySourceHandle = React.memo(function MySourceHandle({
         position={position}
         isConnectableEnd={false}
       >
-        {showAddIcon && (
+        {showAddIcon && <MyIcon name={'edgeAdd'} />}
-          <SmallAddIcon pointerEvents={'none'} color={'primary.600'} fontWeight={'bold'} />
-        )}
       </Handle>
     );
   }, [handleId, position, showAddIcon, styles, transform]);

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/style.tsx

@@ -1,4 +1,4 @@
-export const primaryColor = '#3370FF';
+export const primaryColor = '#487FFF';
 export const lowPrimaryColor = '#94B5FF';
 export const handleSize = {
   width: '18px',

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx

@@ -25,7 +25,6 @@ import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { useWorkflowUtils } from '../../hooks/useUtils';
 import { WholeResponseContent } from '@/components/core/chat/components/WholeResponseModal';
-import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { getDocPath } from '@/web/common/system/doc';
 
 type Props = FlowNodeItemType & {
@@ -149,15 +148,17 @@ const NodeCard = (props: Props) => {
       <Box position={'relative'}>
         {/* debug */}
         {showHeader && (
-          <Box px={4} py={3}>
+          <Box px={4} pt={4}>
             {/* tool target handle */}
             <ToolTargetHandle show={showToolHandle} nodeId={nodeId} />
 
             {/* avatar and name */}
             <Flex alignItems={'center'}>
               {node?.flowNodeType !== FlowNodeTypeEnum.stopTool && (
-                <Box
+                <Flex
-                  mr={2}
+                  alignItems={'center'}
+                  mr={1}
+                  p={1}
                   cursor={'pointer'}
                   rounded={'sm'}
                   _hover={{ bg: 'myGray.200' }}
@@ -172,20 +173,20 @@ const NodeCard = (props: Props) => {
                 >
                   <MyIcon
                     name={!isFolded ? 'core/chat/chevronDown' : 'core/chat/chevronRight'}
-                    w={'24px'}
+                    w={'16px'}
-                    h={'24px'}
+                    h={'16px'}
                     color={'myGray.500'}
                   />
-                </Box>
+                </Flex>
               )}
               <Avatar
                 src={avatar}
                 borderRadius={'sm'}
                 objectFit={'contain'}
-                w={'30px'}
+                w={'24px'}
-                h={'30px'}
+                h={'24px'}
               />
-              <Box ml={3} fontSize={'md'} fontWeight={'medium'}>
+              <Box ml={2} fontSize={'18px'} fontWeight={'medium'} color={'myGray.900'}>
                 {t(name as any)}
               </Box>
               <MyIcon
@@ -330,13 +331,16 @@ const NodeCard = (props: Props) => {
       maxW={maxW}
       minH={minH}
       bg={'white'}
-      borderWidth={'1px'}
+      outline={selected ? '2px solid' : '1px solid'}
-      borderRadius={'md'}
+      borderRadius={'lg'}
-      boxShadow={'1'}
+      boxShadow={
+        '0px 4px 10px 0px rgba(19, 51, 107, 0.10), 0px 0px 1px 0px rgba(19, 51, 107, 0.10)'
+      }
       w={w}
       h={h}
       _hover={{
-        boxShadow: '4',
+        boxShadow:
+          '0px 12px 16px -4px rgba(19, 51, 107, 0.20), 0px 0px 1px 0px rgba(19, 51, 107, 0.20)',
         '& .controller-menu': {
           display: 'flex'
         },
@@ -351,17 +355,19 @@ const NodeCard = (props: Props) => {
       onMouseLeave={() => setHoverNodeId(undefined)}
       {...(isError
         ? {
-            borderColor: 'red.500',
+            outlineColor: 'red.500',
             onMouseDownCapture: () => onUpdateNodeError(nodeId, false)
           }
         : {
-            borderColor: selected ? 'primary.600' : 'borderColor.base'
+            outlineColor: selected ? 'primary.600' : 'myGray.250'
           })}
       {...customStyle}
     >
       <NodeDebugResponse nodeId={nodeId} debugResult={debugResult} />
       {Header}
-      {!isFolded && children}
+      <Flex flexDirection={'column'} flex={1} my={4} gap={2}>
+        {!isFolded ? children : <Box h={4} />}
+      </Flex>
       {RenderHandle}
       {RenderToolHandle}
 
@@ -568,31 +574,35 @@ const NodeIntro = React.memo(function NodeIntro({
   const Render = useMemo(() => {
     return (
       <>
-        <Flex alignItems={'flex-end'} py={1}>
+        <Flex alignItems={'center'}>
-          <Box fontSize={'xs'} color={'myGray.600'} flex={'1 0 0'}>
+          <Box fontSize={'sm'} color={'myGray.500'} flex={'1 0 0'}>
             {t(intro as any)}
           </Box>
-          {NodeIsTool && (
+          <Flex
-            <Button
+            p={'7px'}
-              size={'xs'}
+            rounded={'sm'}
-              variant={'whiteBase'}
+            alignItems={'center'}
-              onClick={() => {
+            _hover={{
-                onOpenIntroModal({
+              bg: NodeIsTool ? 'myGray.100' : 'transparent'
-                  defaultVal: intro,
+            }}
-                  onSuccess(e) {
+            cursor={NodeIsTool ? 'pointer' : 'default'}
-                    onChangeNode({
+            onClick={() => {
-                      nodeId,
+              if (!NodeIsTool) return;
-                      type: 'attr',
+              onOpenIntroModal({
-                      key: 'intro',
+                defaultVal: intro,
-                      value: e
+                onSuccess(e) {
-                    });
+                  onChangeNode({
-                  }
+                    nodeId,
-                });
+                    type: 'attr',
-              }}
+                    key: 'intro',
-            >
+                    value: e
-              {t('common:core.module.Edit intro')}
+                  });
-            </Button>
+                }
-          )}
+              });
+            }}
+          >
+            <MyIcon name={'edit'} w={'18px'} opacity={NodeIsTool ? 1 : 0} />
+          </Flex>
         </Flex>
         <EditIntroModal maxLength={500} />
       </>

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderInput/templates/NumberInput.tsx

@@ -9,6 +9,7 @@ import {
 } from '@chakra-ui/react';
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowContext } from '@/pages/app/detail/components/WorkflowComponents/context';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 
 const NumberInputRender = ({ item, nodeId }: RenderInputProps) => {
   const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
@@ -19,6 +20,8 @@ const NumberInputRender = ({ item, nodeId }: RenderInputProps) => {
         defaultValue={item.value}
         min={item.min}
         max={item.max}
+        bg={'white'}
+        rounded={'md'}
         onChange={(e) => {
           onChangeNode({
             nodeId,
@@ -31,10 +34,31 @@ const NumberInputRender = ({ item, nodeId }: RenderInputProps) => {
           });
         }}
       >
-        <NumberInputField bg={'white'} px={3} borderRadius={'sm'} />
+        <NumberInputField
-        <NumberInputStepper>
+          bg={'white'}
-          <NumberIncrementStepper />
+          px={3}
-          <NumberDecrementStepper />
+          rounded={'md'}
+          _hover={{
+            borderColor: 'primary.500'
+          }}
+        />
+        <NumberInputStepper roundedTopRight={'none'}>
+          <NumberIncrementStepper
+            borderTopRightRadius={'sm !important'}
+            _hover={{
+              bg: 'myGray.100'
+            }}
+          >
+            <MyIcon name={'core/chat/chevronUp'} width={'12px'} />
+          </NumberIncrementStepper>
+          <NumberDecrementStepper
+            borderBottomRightRadius={'sm !important'}
+            _hover={{
+              bg: 'myGray.100'
+            }}
+          >
+            <MyIcon name={'core/chat/chevronDown'} width={'12px'} />
+          </NumberDecrementStepper>
         </NumberInputStepper>
       </NumberInput>
     );

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderInput/templates/Reference.tsx

@@ -130,7 +130,7 @@ export const useReference = ({
           label: (
             <Flex alignItems={'center'}>
               <Avatar src={node.avatar} w={'1.25rem'} borderRadius={'xs'} />
-              <Box ml={1}>{t(node.name as any)}</Box>
+              <Box ml={2}>{t(node.name as any)}</Box>
             </Flex>
           ),
           value: node.nodeId,
@@ -205,7 +205,7 @@ export const ReferSelector = ({
           selectItemLabel ? (
             <Flex alignItems={'center'}>
               {selectItemLabel[0].label}
-              <MyIcon name={'common/rightArrowLight'} mx={1} w={'14px'}></MyIcon>
+              <MyIcon name={'core/chat/chevronRight'} mx={1} w={4} />
               {selectItemLabel[1].label}
             </Flex>
           ) : (

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderInput/templates/SettingQuotePrompt.tsx

@@ -302,9 +302,9 @@ const SettingQuotePrompt = (props: RenderInputProps) => {
     return (
       <>
         <Flex className="nodrag" cursor={'default'} alignItems={'center'} position={'relative'}>
-          <Box position={'relative'} color={'myGray.600'} fontWeight={'medium'}>
+          <FormLabel position={'relative'} color={'myGray.600'} fontWeight={'medium'}>
             {t('common:core.module.Dataset quote.label')}
-          </Box>
+          </FormLabel>
           <ValueTypeLabel
             valueType={WorkflowIOValueTypeEnum.datasetQuote}
             valueDesc={datasetQuoteValueDesc}
@@ -320,7 +320,7 @@ const SettingQuotePrompt = (props: RenderInputProps) => {
             />
           </MyTooltip>
         </Flex>
-        <Box mt={1}>
+        <Box mt={3}>
           <Reference {...props} />
         </Box>
 

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderOutput/index.tsx

@@ -139,7 +139,7 @@ const RenderOutput = ({
             <FormLabel
               key={output.key}
               required={output.required}
-              mb={i === renderOutputs.length - 1 ? 0 : 5}
+              mb={i === renderOutputs.length - 1 ? 0 : 4}
               position={'relative'}
             >
               <OutputLabel nodeId={nodeId} output={output} />

projects/app/src/pages/dataset/detail/components/Import/commonProgress/DataProcess.tsx

@@ -1,12 +1,7 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import {
   Box,
   Flex,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-  NumberIncrementStepper,
-  NumberDecrementStepper,
   Input,
   Button,
   ModalBody,
@@ -29,6 +24,8 @@ import { useContextSelector } from 'use-context-selector';
 import { DatasetImportContext } from '../Context';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
+import MyNumberInput from '@fastgpt/web/components/common/Input/NumberInput';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 
 function DataProcess({ showPreviewChunks = true }: { showPreviewChunks: boolean }) {
   const { t } = useTranslation();
@@ -127,14 +124,7 @@ function DataProcess({ showPreviewChunks = true }: { showPreviewChunks: boolean
                       <Box>
                         <Flex alignItems={'center'}>
                           <Box>{t('dataset:ideal_chunk_length')}</Box>
-                          <MyTooltip label={t('dataset:ideal_chunk_length_tips')}>
+                          <QuestionTip label={t('dataset:ideal_chunk_length_tips')} />
-                            <MyIcon
-                              name={'common/questionLight'}
-                              ml={1}
-                              w={'14px'}
-                              color={'myGray.500'}
-                            />
-                          </MyTooltip>
                         </Flex>
                         <Box
                           mt={1}
@@ -150,30 +140,18 @@ function DataProcess({ showPreviewChunks = true }: { showPreviewChunks: boolean
                               max: maxChunkSize
                             })}
                           >
-                            <NumberInput
+                            <MyNumberInput
-                              size={'sm'}
+                              name={chunkSizeField}
-                              step={100}
                               min={minChunkSize}
                               max={maxChunkSize}
+                              size={'sm'}
+                              step={100}
                               value={chunkSize}
                               onChange={(e) => {
+                                if (e === undefined) return;
                                 setValue(chunkSizeField, +e);
                               }}
-                            >
+                            />
-                              <NumberInputField
-                                min={minChunkSize}
-                                max={maxChunkSize}
-                                {...register(chunkSizeField, {
-                                  min: minChunkSize,
-                                  max: maxChunkSize,
-                                  valueAsNumber: true
-                                })}
-                              />
-                              <NumberInputStepper>
-                                <NumberIncrementStepper />
-                                <NumberDecrementStepper />
-                              </NumberInputStepper>
-                            </NumberInput>
                           </MyTooltip>
                         </Box>
                       </Box>
@@ -182,14 +160,9 @@ function DataProcess({ showPreviewChunks = true }: { showPreviewChunks: boolean
                     <Box mt={3}>
                       <Box>
                         {t('common:core.dataset.import.Custom split char')}
-                        <MyTooltip label={t('common:core.dataset.import.Custom split char Tips')}>
+                        <QuestionTip
-                          <MyIcon
+                          label={t('common:core.dataset.import.Custom split char Tips')}
-                            name={'common/questionLight'}
+                        />
-                            ml={1}
-                            w={'14px'}
-                            color={'myGray.500'}
-                          />
-                        </MyTooltip>
                       </Box>
                       <Box mt={1}>
                         <Input

projects/app/src/pages/login/components/ForgetPasswordForm.tsx

@@ -1,5 +1,5 @@
-import React, { useState, Dispatch, useCallback } from 'react';
+import React, { Dispatch } from 'react';
-import { FormControl, Box, Input, Button, useDisclosure } from '@chakra-ui/react';
+import { FormControl, Box, Input, Button } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { LoginPageTypeEnum } from '@/web/support/user/login/constants';
 import { postFindPassword } from '@/web/support/user/api';
@@ -73,11 +73,11 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
 
   return (
     <>
-      <Box fontWeight={'bold'} fontSize={'2xl'} textAlign={'center'}>
+      <Box fontWeight={'medium'} fontSize={'lg'} textAlign={'center'} color={'myGray.900'}>
         {t('user:password.retrieved_account', { account: feConfigs?.systemTitle })}
       </Box>
       <Box
-        mt={'42px'}
+        mt={9}
         onKeyDown={(e) => {
           if (e.keyCode === 13 && !e.shiftKey && !requesting) {
             handleSubmit(onclickFindPassword)();
@@ -87,6 +87,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
         <FormControl isInvalid={!!errors.username}>
           <Input
             bg={'myGray.50'}
+            size={'lg'}
             placeholder={placeholder}
             {...register('username', {
               required: t('user:password.email_phone_void'),
@@ -107,6 +108,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
         >
           <Input
             bg={'myGray.50'}
+            size={'lg'}
             flex={1}
             maxLength={8}
             placeholder={t('user:password.verification_code')}
@@ -120,6 +122,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
           <Input
             bg={'myGray.50'}
             type={'password'}
+            size={'lg'}
             placeholder={t('user:password.new_password')}
             {...register('password', {
               required: t('user:password.password_required'),
@@ -138,6 +141,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
           <Input
             bg={'myGray.50'}
             type={'password'}
+            size={'lg'}
             placeholder={t('user:password.confirm')}
             {...register('password2', {
               validate: (val) =>
@@ -148,9 +152,12 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
 
         <Button
           type="submit"
-          mt={10}
+          mt={12}
           w={'100%'}
           size={['md', 'md']}
+          rounded={['md', 'md']}
+          h={[10, 10]}
+          fontWeight={['medium', 'medium']}
           colorScheme="blue"
           isLoading={requesting}
           onClick={handleSubmit(onclickFindPassword)}
@@ -159,9 +166,10 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
         </Button>
         <Box
           float={'right'}
-          fontSize="sm"
+          fontSize="mini"
-          mt={2}
+          mt={3}
           mb={'50px'}
+          fontWeight={'medium'}
           color={'primary.700'}
           cursor={'pointer'}
           _hover={{ textDecoration: 'underline' }}

projects/app/src/pages/login/components/LoginForm/LoginForm.tsx

@@ -80,7 +80,7 @@ const LoginForm = ({ setPageType, loginSuccess }: Props) => {
   return (
     <FormLayout setPageType={setPageType} pageType={LoginPageTypeEnum.passwordLogin}>
       <Box
-        mt={'42px'}
+        mt={9}
         onKeyDown={(e) => {
           if (e.key === 'Enter' && !e.shiftKey && !requesting) {
             handleSubmit(onclickLogin)();
@@ -90,15 +90,17 @@ const LoginForm = ({ setPageType, loginSuccess }: Props) => {
         <FormControl isInvalid={!!errors.username}>
           <Input
             bg={'myGray.50'}
+            size={'lg'}
             placeholder={placeholder}
             {...register('username', {
               required: true
             })}
           ></Input>
         </FormControl>
-        <FormControl mt={6} isInvalid={!!errors.password}>
+        <FormControl mt={7} isInvalid={!!errors.password}>
           <Input
             bg={'myGray.50'}
+            size={'lg'}
             type={'password'}
             placeholder={
               isCommunityVersion
@@ -115,13 +117,19 @@ const LoginForm = ({ setPageType, loginSuccess }: Props) => {
           ></Input>
         </FormControl>
         {feConfigs?.docUrl && (
-          <Flex alignItems={'center'} mt={7} fontSize={'mini'}>
+          <Flex
+            alignItems={'center'}
+            mt={7}
+            fontSize={'mini'}
+            color={'myGray.700'}
+            fontWeight={'medium'}
+          >
             {t('login:policy_tip')}
             <Link
               ml={1}
               href={getDocPath('/docs/agreement/terms/')}
               target={'_blank'}
-              color={'primary.500'}
+              color={'primary.700'}
             >
               {t('login:terms')}
             </Link>
@@ -129,7 +137,7 @@ const LoginForm = ({ setPageType, loginSuccess }: Props) => {
             <Link
               href={getDocPath('/docs/agreement/privacy/')}
               target={'_blank'}
-              color={'primary.500'}
+              color={'primary.700'}
             >
               {t('login:privacy')}
             </Link>
@@ -138,9 +146,11 @@ const LoginForm = ({ setPageType, loginSuccess }: Props) => {
 
         <Button
           type="submit"
-          my={6}
+          my={5}
           w={'100%'}
           size={['md', 'md']}
+          h={[10, 10]}
+          fontWeight={['medium', 'medium']}
           colorScheme="blue"
           isLoading={requesting}
           onClick={handleSubmit(onclickLogin)}
@@ -148,29 +158,34 @@ const LoginForm = ({ setPageType, loginSuccess }: Props) => {
           {t('login:Login')}
         </Button>
 
-        <Flex align={'center'} justifyContent={'flex-end'} color={'primary.700'}>
+        <Flex
+          align={'center'}
+          justifyContent={'flex-end'}
+          color={'primary.700'}
+          fontWeight={'medium'}
+        >
           {feConfigs?.find_password_method && feConfigs.find_password_method.length > 0 && (
             <Box
               cursor={'pointer'}
               _hover={{ textDecoration: 'underline' }}
               onClick={() => setPageType('forgetPassword')}
-              fontSize="sm"
+              fontSize="mini"
             >
               {t('login:forget_password')}
             </Box>
           )}
           {feConfigs?.register_method && feConfigs.register_method.length > 0 && (
-            <>
+            <Flex alignItems={'center'}>
-              <Box mx={3} h={'16px'} w={'1.5px'} bg={'myGray.250'}></Box>
+              <Box mx={3} h={'12px'} w={'1px'} bg={'myGray.250'}></Box>
               <Box
                 cursor={'pointer'}
                 _hover={{ textDecoration: 'underline' }}
                 onClick={() => setPageType('register')}
-                fontSize="sm"
+                fontSize="mini"
               >
                 {t('login:register')}
               </Box>
-            </>
+            </Flex>
           )}
         </Flex>
       </Box>

projects/app/src/pages/login/components/LoginForm/WechatForm.tsx

@@ -5,7 +5,6 @@ import { Box, Center, Image } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { getWXLoginQR, getWXLoginResult } from '@/web/support/user/api';
 import { getErrText } from '@fastgpt/global/common/error/utils';
-import { useRouter } from 'next/router';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import FormLayout from './components/FormLayout';
 import { useTranslation } from 'next-i18next';
@@ -40,7 +39,7 @@ const WechatForm = ({ setPageType, loginSuccess }: Props) => {
   return (
     <FormLayout setPageType={setPageType} pageType={LoginPageTypeEnum.wechat}>
       <Box>
-        <Box w={'full'} textAlign={'center'} pt={5}>
+        <Box w={'full'} textAlign={'center'} pt={6} fontWeight={'medium'}>
           {t('common:support.user.login.wx_qr_login')}
         </Box>
         <Box p={5} display={'flex'} w={'full'} justifyContent={'center'}>

projects/app/src/pages/login/components/LoginForm/components/FormLayout.tsx

@@ -8,7 +8,6 @@ import { customAlphabet } from 'nanoid';
 import { useRouter } from 'next/router';
 import { Dispatch, useRef } from 'react';
 import { useTranslation } from 'next-i18next';
-import Divider from '@/pages/app/detail/components/WorkflowComponents/Flow/components/Divider';
 import I18nLngSelector from '@/components/Select/I18nLngSelector';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 8);
@@ -64,7 +63,7 @@ const FormLayout = ({ children, setPageType, pageType }: Props) => {
           {
             label: t('common:support.user.login.Password login'),
             provider: LoginPageTypeEnum.passwordLogin,
-            icon: 'support/account/passwordLogin',
+            icon: 'support/permission/privateLight',
             pageType: LoginPageTypeEnum.passwordLogin
           }
         ]
@@ -76,20 +75,20 @@ const FormLayout = ({ children, setPageType, pageType }: Props) => {
   return (
     <Flex flexDirection={'column'} h={'100%'}>
       <Flex alignItems={'center'} justify={'space-between'}>
-        <Flex>
+        <Flex alignItems={'center'}>
           <Flex
-            w={['48px', '56px']}
+            w={['42px', '56px']}
-            h={['48px', '56px']}
+            h={['42px', '56px']}
             bg={'myGray.25'}
-            borderRadius={'xl'}
+            borderRadius={['semilg', 'lg']}
-            borderWidth={'1.5px'}
+            borderWidth={['1px', '1.5px']}
-            borderColor={'borderColor.base'}
+            borderColor={'myGray.200'}
             alignItems={'center'}
             justifyContent={'center'}
           >
-            <Image src={LOGO_ICON} w={['24px', '28px']} alt={'icon'} />
+            <Image src={LOGO_ICON} w={['22.5px', '36px']} alt={'icon'} />
           </Flex>
-          <Box ml={3} fontSize={['2xl', '3xl']} fontWeight={'bold'}>
+          <Box ml={[3, 5]} fontSize={['lg', 'xl']} fontWeight={'bold'} color={'myGray.900'}>
             {feConfigs?.systemTitle}
           </Box>
         </Flex>
@@ -100,26 +99,21 @@ const FormLayout = ({ children, setPageType, pageType }: Props) => {
         <>
           <Box flex={1} />
           <Box position={'relative'}>
-            <Divider />
+            <Box h={'1px'} bg={'myGray.250'} />
-            <AbsoluteCenter bg="white" px="4" color={'myGray.500'}>
+            <AbsoluteCenter bg={'white'} px={3} color={'myGray.500'} fontSize={'mini'}>
               or
             </AbsoluteCenter>
           </Box>
-          <Box mt={8}>
+          <Box mt={4}>
             {oAuthList.map((item) => (
               <Box key={item.provider} _notFirst={{ mt: 4 }}>
                 <Button
                   variant={'whitePrimary'}
                   w={'100%'}
-                  h={'42px'}
+                  h={'40px'}
-                  leftIcon={
+                  borderRadius={'sm'}
-                    <MyIcon
+                  fontWeight={'medium'}
-                      name={item.icon as any}
+                  leftIcon={<MyIcon name={item.icon as any} w={'20px'} />}
-                      w={'20px'}
-                      cursor={'pointer'}
-                      color={'myGray.800'}
-                    />
-                  }
                   onClick={() => {
                     item.redirectUrl &&
                       setLoginStore({
@@ -141,7 +135,8 @@ const FormLayout = ({ children, setPageType, pageType }: Props) => {
                 <Button
                   variant={'whitePrimary'}
                   w={'100%'}
-                  h={'42px'}
+                  h={'40px'}
+                  borderRadius={'sm'}
                   leftIcon={<Image alt="" src={feConfigs.sso.icon as any} w="20px" />}
                   onClick={() => {
                     feConfigs.sso?.url && router.replace(feConfigs.sso?.url, '_self');

projects/app/src/pages/login/components/RegisterForm.tsx

@@ -91,11 +91,11 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
 
   return (
     <>
-      <Box fontWeight={'bold'} fontSize={'2xl'} textAlign={'center'}>
+      <Box fontWeight={'medium'} fontSize={'lg'} textAlign={'center'} color={'myGray.900'}>
         {t('user:register.register_account', { account: feConfigs?.systemTitle })}
       </Box>
       <Box
-        mt={'42px'}
+        mt={9}
         onKeyDown={(e) => {
           if (e.key === 'Enter' && !e.shiftKey && !requesting) {
             handleSubmit(onclickRegister)();
@@ -105,6 +105,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
         <FormControl isInvalid={!!errors.username}>
           <Input
             bg={'myGray.50'}
+            size={'lg'}
             placeholder={placeholder}
             {...register('username', {
               required: t('user:password.email_phone_void'),
@@ -124,6 +125,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
           position={'relative'}
         >
           <Input
+            size={'lg'}
             bg={'myGray.50'}
             flex={1}
             maxLength={8}
@@ -137,6 +139,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
         <FormControl mt={6} isInvalid={!!errors.password}>
           <Input
             bg={'myGray.50'}
+            size={'lg'}
             type={'password'}
             placeholder={t('user:password.new_password')}
             {...register('password', {
@@ -155,6 +158,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
         <FormControl mt={6} isInvalid={!!errors.password2}>
           <Input
             bg={'myGray.50'}
+            size={'lg'}
             type={'password'}
             placeholder={t('user:password.confirm')}
             {...register('password2', {
@@ -165,9 +169,12 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
         </FormControl>
         <Button
           type="submit"
-          mt={6}
+          mt={12}
           w={'100%'}
           size={['md', 'md']}
+          rounded={['md', 'md']}
+          h={[10, 10]}
+          fontWeight={['medium', 'medium']}
           colorScheme="blue"
           isLoading={requesting}
           onClick={handleSubmit(onclickRegister)}
@@ -176,9 +183,10 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
         </Button>
         <Box
           float={'right'}
-          fontSize="sm"
+          fontSize="mini"
-          mt={2}
+          mt={3}
           mb={'50px'}
+          fontWeight={'medium'}
           color={'primary.700'}
           cursor={'pointer'}
           _hover={{ textDecoration: 'underline' }}

projects/app/src/pages/login/index.tsx

@@ -140,7 +140,6 @@ const Login = ({ ChineseRedirectUrl }: { ChineseRedirectUrl: string }) => {
         backgroundSize={'cover'}
         userSelect={'none'}
         h={'100%'}
-        px={[0, '10vw']}
       >
         {isPc && (
           <Box position={'absolute'} top={'24px'} right={'50px'}>
@@ -149,16 +148,15 @@ const Login = ({ ChineseRedirectUrl }: { ChineseRedirectUrl: string }) => {
         )}
         <Flex
           flexDirection={'column'}
-          w={['100%', 'auto']}
+          w={['100%', '556px']}
-          h={['100%', '700px']}
+          h={['100%', '677px']}
-          maxH={['100%', '90vh']}
           bg={'white'}
           px={['5vw', '88px']}
-          py={'5vh'}
+          py={['5vh', '64px']}
-          borderRadius={[0, '24px']}
+          borderRadius={[0, '16px']}
           boxShadow={[
             '',
-            '0px 0px 1px 0px rgba(19, 51, 107, 0.20), 0px 32px 64px -12px rgba(19, 51, 107, 0.20)'
+            '0px 32px 64px -12px rgba(19, 51, 107, 0.20), 0px 0px 1px 0px rgba(19, 51, 107, 0.20)'
           ]}
         >
           <Box w={['100%', '380px']} flex={'1 0 0'}>
@@ -174,6 +172,8 @@ const Login = ({ ChineseRedirectUrl }: { ChineseRedirectUrl: string }) => {
             <Box
               mt={8}
               color={'primary.700'}
+              fontSize={'mini'}
+              fontWeight={'medium'}
               cursor={'pointer'}
               textAlign={'center'}
               onClick={onOpen}

projects/app/src/pages/price/components/ExtraPlan.tsx

@@ -1,14 +1,4 @@
-import {
+import { Box, Flex, Grid, Button } from '@chakra-ui/react';
-  Box,
-  Flex,
-  Grid,
-  NumberDecrementStepper,
-  NumberInput,
-  NumberIncrementStepper,
-  NumberInputField,
-  NumberInputStepper,
-  Button
-} from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import React, { useCallback, useState } from 'react';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
@@ -19,6 +9,7 @@ import { getErrText } from '@fastgpt/global/common/error/utils';
 import { getWxPayQRCode } from '@/web/support/wallet/bill/api';
 import { BillTypeEnum } from '@fastgpt/global/support/wallet/bill/constants';
 import QRCodePayModal, { type QRPayProps } from '@/components/support/wallet/QRCodePayModal';
+import MyNumberInput from '@fastgpt/web/components/common/Input/NumberInput';
 
 const ExtraPlan = () => {
   const { t } = useTranslation();
@@ -170,22 +161,14 @@ const ExtraPlan = () => {
                 {t('common:support.wallet.subscription.Month amount')}
               </Box>
               <Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
-                <NumberInput size={'sm'} flex={1} step={1} min={1} max={12} position={'relative'}>
+                <MyNumberInput
-                  <NumberInputField
+                  name="month"
-                    pr={'30px'}
+                  register={registerDatasetSize}
-                    {...registerDatasetSize('month', {
+                  min={1}
-                      required: true,
+                  max={12}
-                      min: 1,
+                  size={'sm'}
-                      max: 12,
+                />
-                      valueAsNumber: true
+                <Box position={'absolute'} right={'30px'} color={'myGray.600'} fontSize={'xs'}>
-                    })}
-                  />
-                  <NumberInputStepper>
-                    <NumberIncrementStepper />
-                    <NumberDecrementStepper />
-                  </NumberInputStepper>
-                </NumberInput>
-                <Box position={'absolute'} right={'20px'} color={'myGray.600'} fontSize={'xs'}>
                   {t('common:common.month')}
                 </Box>
               </Flex>
@@ -195,30 +178,14 @@ const ExtraPlan = () => {
                 {t('common:support.wallet.subscription.Update extra dataset size')}
               </Box>
               <Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
-                <NumberInput
+                <MyNumberInput
-                  size={'sm'}
+                  name="datasetSize"
-                  flex={1}
+                  register={registerDatasetSize}
                   min={0}
                   max={10000}
-                  step={1}
+                  size={'sm'}
-                  position={'relative'}
+                />
-                >
+                <Box position={'absolute'} right={'30px'} color={'myGray.600'} fontSize={'xs'}>
-                  <NumberInputField
-                    pr={'30px'}
-                    {...registerDatasetSize('datasetSize', {
-                      required: true,
-                      min: 0,
-                      max: 10000,
-                      valueAsNumber: true
-                    })}
-                    step={1}
-                  />
-                  <NumberInputStepper>
-                    <NumberIncrementStepper />
-                    <NumberDecrementStepper />
-                  </NumberInputStepper>
-                </NumberInput>
-                <Box position={'absolute'} right={'20px'} color={'myGray.600'} fontSize={'xs'}>
                   000{t('common:core.dataset.data.unit')}
                 </Box>
               </Flex>
@@ -291,30 +258,14 @@ const ExtraPlan = () => {
                 position={'relative'}
                 color={'myGray.500'}
               >
-                <NumberInput
+                <MyNumberInput
-                  size={'sm'}
+                  name="points"
-                  flex={1}
+                  register={registerDatasetSize}
                   min={0}
                   max={10000}
-                  step={1}
+                  size={'sm'}
-                  position={'relative'}
+                />
-                >
+                <Box position={'absolute'} right={'30px'} color={'myGray.500'} fontSize={'xs'}>
-                  <NumberInputField
-                    pr={'30px'}
-                    step={1}
-                    {...registerExtraPoints('points', {
-                      required: true,
-                      min: 0,
-                      max: 10000,
-                      valueAsNumber: true
-                    })}
-                  />
-                  <NumberInputStepper>
-                    <NumberIncrementStepper />
-                    <NumberDecrementStepper />
-                  </NumberInputStepper>
-                </NumberInput>
-                <Box position={'absolute'} right={'20px'} color={'myGray.500'} fontSize={'xs'}>
                   {'000' + t('common:support.wallet.subscription.point')}
                 </Box>
               </Flex>

projects/app/src/web/support/user/hooks/useSendCode.tsx

@@ -64,7 +64,8 @@ export const useSendCode = ({ type }: { type: `${UserAuthTypeEnum}` }) => {
           position={'absolute'}
           right={3}
           zIndex={1}
-          fontSize={'sm'}
+          fontSize={'mini'}
+          fontWeight={'medium'}
           {...styles}
           {...(codeCountDown > 0
             ? {