From 972e147fdf39fc616a8c6cf9c3e7bd176ef1ef6f Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Tue, 10 Mar 2026 17:56:46 +0800
Subject: [PATCH] fix: yaml edior height

---
 src/pages/_components/yaml-editor/index.tsx   | 10 ++++++----
 src/pages/backends/components/add-modal.tsx   | 13 ++++++++++++-
 src/pages/backends/components/import-yaml.tsx |  5 +++--
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/pages/_components/yaml-editor/index.tsx b/src/pages/_components/yaml-editor/index.tsx
index fb613957..78671057 100644
--- a/src/pages/_components/yaml-editor/index.tsx
+++ b/src/pages/_components/yaml-editor/index.tsx
@@ -18,9 +18,7 @@ const { Text } = Typography;
 
 loader.config({ monaco });
 
-const Container = styled.div<{ $minHeight: string | number }>`
-  min-height: ${({ $minHeight }) =>
-    typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};
+const Container = styled.div`
   position: relative;
   border: 1px solid var(--ant-color-border);
   border-radius: var(--ant-border-radius);
@@ -153,7 +151,11 @@ const YamlEditor: React.FC<ViewerProps> = forwardRef((props, ref) => {
   }, [value]);
 
   return (
-    <Container $minHeight={height}>
+    <Container
+      style={{
+        minHeight: height
+      }}
+    >
       <EditorInner
         ref={editorRef}
         header={renderHeader()}
diff --git a/src/pages/backends/components/add-modal.tsx b/src/pages/backends/components/add-modal.tsx
index cb411dae..f08d89a5 100644
--- a/src/pages/backends/components/add-modal.tsx
+++ b/src/pages/backends/components/add-modal.tsx
@@ -60,6 +60,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   const [activeKey, setActiveKey] = useState<string>('form');
   const [yamlContent, setYamlContent] = useState<string>('');
   const [formContent, setFormContent] = useState<FormData>({} as FormData);
+  const alertRef = useRef<HTMLDivElement>(null);
 
   const showVersionCustomSuffix =
     currentData?.backend_source === BackendSourceValueMap.BUILTIN ||
@@ -193,6 +194,15 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     }
   }, [action, currentData, open]);
 
+  const yamlHeight = useMemo(() => {
+    if (action !== PageAction.CREATE) {
+      return undefined;
+    }
+    const baseHeight = 260;
+    const alertHeight = alertRef.current?.offsetHeight || 0;
+    return `calc(100vh - ${baseHeight + alertHeight}px)`;
+  }, [action, activeKey]);
+
   return (
     <GSDrawer
       title={title}
@@ -247,7 +257,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
         footer={
           <>
             {action === PageAction.CREATE && (
-              <div style={{ marginInline: 24, paddingTop: 8 }}>
+              <div style={{ marginInline: 24, paddingTop: 8 }} ref={alertRef}>
                 <AlertBlockInfo
                   type="warning"
                   contentStyle={{ paddingInline: 0 }}
@@ -287,6 +297,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
               label: intl.formatMessage({ id: 'backend.mode.yaml' }),
               children: (
                 <ImportYAML
+                  height={yamlHeight}
                   actionStatus={{
                     action: action,
                     backendSource: backendSource
diff --git a/src/pages/backends/components/import-yaml.tsx b/src/pages/backends/components/import-yaml.tsx
index 9ad20709..627a288b 100644
--- a/src/pages/backends/components/import-yaml.tsx
+++ b/src/pages/backends/components/import-yaml.tsx
@@ -19,12 +19,13 @@ interface ImportYAMLProps {
     action: PageActionType;
     backendSource: string;
   };
+  height?: string | number;
   content?: string;
   onSubmit?: (content: string) => void;
 }
 
 const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
-  ({ actionStatus, content = '' }, ref) => {
+  ({ actionStatus, content = '', height }, ref) => {
     const intl = useIntl();
     const editorRef = useRef<any>(null);
     const [fileContent, setFileContent] = useState<string>(
@@ -109,7 +110,7 @@ const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
       <YamlEditor
         ref={editorRef}
         value={fileContent}
-        height={'calc(100vh - 260px)'}
+        height={height || 'calc(100vh - 260px)'}
         validateMessage={error}
         onUpload={(content) => {
           setError('');