fix: optimize variable panel scroll ui & onCancel bug (#166)

NetEase · May 30, 2024 · a0ed57f · a0ed57f
1 parent f83c6bc
commit a0ed57f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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) => {