1

frontend/src/components/Editor/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import MonacoEditor, { loader } from '@monaco-editor/react';
+
+// 配置 Monaco Editor 使用本地资源
+loader.config({
+    paths: {
+        vs: '/monaco-editor/min/vs'
+    },
+    'vs/nls': {
+        availableLanguages: {
+            '*': 'zh-cn'
+        }
+    }
+});
+
+export const Editor = MonacoEditor;
+export default Editor; 

frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx

@@ -7,6 +7,7 @@ import type {Application} from '../../../Application/List/types';
 import {BetaSchemaForm} from '@ant-design/pro-form';
 import {convertJsonSchemaToColumns} from '@/utils/jsonSchemaUtils';
 import './styles.less';
+import {Editor} from '@/components/Editor';
 
 const {Option} = Select;
 
@@ -123,13 +124,77 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
     const renderFormItems = () => {
         if (!selectedTemplate?.buildVariablesSchema) return null;
 
+        const { properties } = selectedTemplate.buildVariablesSchema;
+        const scriptProperty = properties.script;
+
         return (
-            <BetaSchemaForm
+            <>
-                layoutType="Embed"
+                {/* 脚本编辑器 */}
-                columns={convertJsonSchemaToColumns(selectedTemplate.buildVariablesSchema)}
+                {scriptProperty?.format === 'monaco-editor' && (
-                initialValues={buildVariables}
+                    <Form.Item
-                onValuesChange={(_, values) => setBuildVariables(values)}
+                        label={scriptProperty.title || 'Pipeline script'}
-            />
+                        required={selectedTemplate.buildVariablesSchema.required?.includes('script')}
+                        tooltip={scriptProperty.description}
+                    >
+                        <Editor
+                            height="300px"
+                            defaultLanguage={scriptProperty.editorConfig?.language || 'shell'}
+                            theme={scriptProperty.editorConfig?.theme || 'vs-dark'}
+                            value={buildVariables.script || scriptProperty.default || '#!/bin/bash\n'}
+                            onChange={(value) => setBuildVariables({
+                                ...buildVariables,
+                                script: value || ''
+                            })}
+                            options={{
+                                minimap: { enabled: scriptProperty.editorConfig?.minimap ?? false },
+                                fontSize: scriptProperty.editorConfig?.fontSize || 14,
+                                lineNumbers: scriptProperty.editorConfig?.lineNumbers ? 'on' : 'off',
+                                wordWrap: scriptProperty.editorConfig?.wordWrap ? 'on' : 'off',
+                                tabSize: scriptProperty.editorConfig?.tabSize || 2,
+                                scrollBeyondLastLine: false,
+                                automaticLayout: true,
+                                folding: scriptProperty.editorConfig?.folding ?? true,
+                                autoClosingBrackets: 'always',
+                                autoClosingQuotes: 'always',
+                                formatOnPaste: true,
+                                formatOnType: true,
+                                suggestOnTriggerCharacters: scriptProperty.editorConfig?.autoComplete ?? true,
+                                renderWhitespace: 'boundary',
+                            }}
+                            loading={
+                                <div style={{ 
+                                    padding: '8px', 
+                                    display: 'flex', 
+                                    alignItems: 'center', 
+                                    justifyContent: 'center',
+                                    height: '300px',
+                                    background: '#1e1e1e',
+                                    color: '#fff'
+                                }}>
+                                    编辑器加载中...
+                                </div>
+                            }
+                        />
+                    </Form.Item>
+                )}
+
+                {/* 其他配置项 */}
+                <BetaSchemaForm
+                    layoutType="Embed"
+                    columns={convertJsonSchemaToColumns({
+                        type: 'object',
+                        properties: Object.fromEntries(
+                            Object.entries(properties).filter(([key]) => key !== 'script')
+                        ),
+                        required: selectedTemplate.buildVariablesSchema.required || []
+                    })}
+                    initialValues={buildVariables}
+                    onValuesChange={(_, values) => setBuildVariables({
+                        ...buildVariables,
+                        ...values
+                    })}
+                />
+            </>
         );
     };
 

frontend/src/utils/jsonSchemaUtils.ts

@@ -1,5 +1,17 @@
 import type {ProFormColumnsType} from '@ant-design/pro-form';
 
+interface EditorConfig {
+    language?: string;
+    theme?: string;
+    minimap?: boolean;
+    lineNumbers?: boolean;
+    wordWrap?: boolean;
+    fontSize?: number;
+    tabSize?: number;
+    autoComplete?: boolean;
+    folding?: boolean;
+}
+
 interface JsonSchemaProperty {
     type: string;
     title?: string;
@@ -8,6 +20,7 @@ interface JsonSchemaProperty {
     enum?: any[];
     enumNames?: string[];
     format?: string;
+    editorConfig?: EditorConfig;
     items?: {
         type: string;
         enum?: any[];
@@ -56,10 +69,38 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
                         },
                     };
                 }
+                // 处理 monaco-editor 格式
+                if (value.format === 'monaco-editor') {
+                    const editorConfig = value.editorConfig || {};
+                    return {
+                        ...baseConfig,
+                        valueType: 'code',
+                        fieldProps: {
+                            language: editorConfig.language || 'shell',
+                            height: 300,
+                            options: {
+                                minimap: { enabled: editorConfig.minimap ?? false },
+                                fontSize: editorConfig.fontSize || 14,
+                                lineNumbers: editorConfig.lineNumbers ? 'on' : 'off',
+                                wordWrap: editorConfig.wordWrap ? 'on' : 'off',
+                                tabSize: editorConfig.tabSize || 2,
+                                scrollBeyondLastLine: false,
+                                automaticLayout: true,
+                                folding: editorConfig.folding ?? true,
+                                autoClosingBrackets: 'always',
+                                autoClosingQuotes: 'always',
+                                formatOnPaste: true,
+                                formatOnType: true,
+                                suggestOnTriggerCharacters: editorConfig.autoComplete ?? true,
+                                renderWhitespace: 'boundary',
+                            }
+                        }
+                    };
+                }
                 // 否则使用文本输入框
                 return {
                     ...baseConfig,
-                    valueType: value.format === 'monaco-editor' ? 'code' : 'text',
+                    valueType: 'text',
                     fieldProps: {
                         placeholder: `请输入${value.title || key}`,
                     },