From a0ed57ff4f332bd88749b8b1925bdb29319e4d13 Mon Sep 17 00:00:00 2001
From: BoBoooooo <17746714@qq.com>
Date: Thu, 30 May 2024 14:06:12 +0800
Subject: [PATCH] fix: optimize variable panel scroll ui & onCancel bug (#166)

---
 .../src/components/variable-tree/index.tsx        | 15 +++++++++++++--
 .../src/components/variable-tree/value-detail.tsx |  2 ++
 packages/designer/src/sidebar/variable-panel.tsx  |  3 ++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/designer/src/components/variable-tree/index.tsx b/packages/designer/src/components/variable-tree/index.tsx
index fbbe9b75..cfc7cce6 100644
--- a/packages/designer/src/components/variable-tree/index.tsx
+++ b/packages/designer/src/components/variable-tree/index.tsx
@@ -166,7 +166,7 @@ export function VariableTree(props: VariableTreeProps) {
 
   return (
     <Box display="flex" columnGap="l" className="VariableTree" css={varTreeStyle} {...rest}>
-      <Box className="VariableList" width="40%">
+      <Box className="VariableList" width="40%" overflow="auto">
         {renderHeaderExtra?.(props, state)}
         <Box mb="m" position="sticky" top="0" bg="white" zIndex={2}>
           <Search placeholder="请输入变量名" onChange={(val) => setKeyword(val?.trim())} />
@@ -203,7 +203,11 @@ export function VariableTree(props: VariableTreeProps) {
                   <Box flex="0 0 72px" textAlign="right">
                     {node.showRemoveButton && (
                       <Popconfirm
+                        zIndex={99999}
                         title={`确认删除吗 ${node.title}？该操作会导致引用此模型的代码报错，请谨慎操作！`}
+                        onCancel={(e) => {
+                          e.stopPropagation();
+                        }}
                         onConfirm={(e) => {
                           e.stopPropagation();
                           if (isStoreVariablePath(node.key)) {
@@ -333,7 +337,14 @@ export function VariableTree(props: VariableTreeProps) {
                       }}
                     />
                   ) : (
-                    <ValueDefine data={activeNode} onSave={onUpdateStoreVariable} />
+                    <ValueDefine
+                      data={activeNode}
+                      onSave={(variableKey, code) => {
+                        onUpdateStoreVariable(variableKey, code);
+                        // 更新当前节点 code
+                        setActiveNode((pre) => ({ ...pre, raw: code }));
+                      }}
+                    />
                   )
                 }
               </ValueDetail>
diff --git a/packages/designer/src/components/variable-tree/value-detail.tsx b/packages/designer/src/components/variable-tree/value-detail.tsx
index bf28842a..4f3a5ae2 100644
--- a/packages/designer/src/components/variable-tree/value-detail.tsx
+++ b/packages/designer/src/components/variable-tree/value-detail.tsx
@@ -84,6 +84,8 @@ export function ValueDefine({ data, onSave = noop }: ValueDefineProps) {
               onClick={() => {
                 off();
                 setError('');
+                // 重置到原始值
+                setValue(data.raw);
               }}
             >
               取消
diff --git a/packages/designer/src/sidebar/variable-panel.tsx b/packages/designer/src/sidebar/variable-panel.tsx
index 3425cdcc..fb07ee72 100644
--- a/packages/designer/src/sidebar/variable-panel.tsx
+++ b/packages/designer/src/sidebar/variable-panel.tsx
@@ -29,7 +29,7 @@ export const VariablePanel = observer(
             新建模型
           </Button>
         }
-        bodyProps={{ p: 'm' }}
+        bodyProps={{ p: 'm', height: '100%' }}
       >
         {isAdd ? (
           <AddStoreForm
@@ -42,6 +42,7 @@ export const VariablePanel = observer(
           />
         ) : (
           <VariableTree
+            height="100%"
             defaultValueDetailMode="define"
             dataSource={storeVariables}
             onAddStoreVariable={(storeName, data) => {