From a30b5101ec06f0401d21702f0e30a4cee98969f1 Mon Sep 17 00:00:00 2001
From: asp_ly <dengqichen@iscmtech.com>
Date: Thu, 26 Dec 2024 22:21:40 +0800
Subject: [PATCH] 1

---
 frontend/src/components/Editor/index.tsx      | 17 ++++
 .../List/components/DeploymentConfigModal.tsx | 77 +++++++++++++++++--
 frontend/src/utils/jsonSchemaUtils.ts         | 43 ++++++++++-
 3 files changed, 130 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/Editor/index.tsx

diff --git a/frontend/src/components/Editor/index.tsx b/frontend/src/components/Editor/index.tsx
new file mode 100644
index 00000000..f388d164
--- /dev/null
+++ b/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; 
\ No newline at end of file
diff --git a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
index 384d2808..be355f6e 100644
--- a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
+++ b/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)}
-                initialValues={buildVariables}
-                onValuesChange={(_, values) => setBuildVariables(values)}
-            />
+            <>
+                {/* 脚本编辑器 */}
+                {scriptProperty?.format === 'monaco-editor' && (
+                    <Form.Item
+                        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
+                    })}
+                />
+            </>
         );
     };
 
diff --git a/frontend/src/utils/jsonSchemaUtils.ts b/frontend/src/utils/jsonSchemaUtils.ts
index 8b1bcefa..55edeb49 100644
--- a/frontend/src/utils/jsonSchemaUtils.ts
+++ b/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}`,
                     },