ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
dengqichen 2024-12-27 13:21:09 +08:00
parent cd650f56f5
commit 15ebbab10a
1 changed files with 66 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
View File

@ -220,50 +220,85 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
{/* 富文本编辑器字段 */}
{Object.entries(selectedTemplate.buildVariablesSchema.properties)
.filter(([_, property]) => property.editorConfig)
.map(([key, property]) => (
<Form.Item
key={key}
label={
<Space>
{property.title || key}
<Button
type="text"
icon={<FullscreenOutlined />}
onClick={() => setFullscreenEditor({
key,
title: property.title || key
})}
/>
</Space>
}
required={selectedTemplate.buildVariablesSchema.required?.includes(key)}
tooltip={property.description}
>
.map(([key, property]) => {
const isFullscreen = fullscreenEditor?.key === key;
const editorConfig = property.editorConfig;
const editor = (
<Editor
height="300px"
defaultLanguage={property.editorConfig.language || 'shell'}
theme={property.editorConfig.theme || 'vs-dark'}
height={isFullscreen ? "calc(100vh - 55px)" : "300px"}
defaultLanguage={editorConfig.language || 'shell'}
theme={editorConfig.theme || 'vs-dark'}
value={buildVariables[key] || property.default || ''}
onChange={(value) => handleEditorChange(key, value)}
options={{
minimap: { enabled: property.editorConfig.minimap ?? false },
fontSize: property.editorConfig.fontSize || 14,
lineNumbers: property.editorConfig.lineNumbers ? 'on' : 'off',
wordWrap: property.editorConfig.wordWrap ? 'on' : 'off',
tabSize: property.editorConfig.tabSize || 2,
minimap: { enabled: isFullscreen ? true : (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: property.editorConfig.folding ?? true,
folding: editorConfig.folding ?? true,
autoClosingBrackets: 'always',
autoClosingQuotes: 'always',
formatOnPaste: true,
formatOnType: true,
suggestOnTriggerCharacters: property.editorConfig.autoComplete ?? true,
suggestOnTriggerCharacters: editorConfig.autoComplete ?? true,
renderWhitespace: 'boundary',
}}
/>
</Form.Item>
))
);
return isFullscreen ? (
<Modal
key={key}
title={property.title || key}
open={true}
onCancel={() => setFullscreenEditor(null)}
footer={null}
width="100vw"
styles={{
body: { padding: 0 },
mask: { backgroundColor: 'rgba(0, 0, 0, 0.65)' },
content: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
margin: 0,
padding: 0,
width: '100vw',
height: '100vh'
}
}}
>
{editor}
</Modal>
) : (
<Form.Item
key={key}
label={
<Space>
{property.title || key}
<Button
type="text"
icon={<FullscreenOutlined />}
onClick={() => setFullscreenEditor({
key,
title: property.title || key
})}
/>
</Space>
}
required={selectedTemplate.buildVariablesSchema.required?.includes(key)}
tooltip={property.description}
>
{editor}
</Form.Item>
);
})
}
{/* 普通字段 */}
@ -319,56 +354,6 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
</Form.Item>
</Form>
</Modal>
{/* 全屏编辑器模态框 */}
{fullscreenEditor && selectedTemplate?.buildVariablesSchema?.properties && (
<Modal
title={fullscreenEditor.title}
open={true}
onCancel={() => setFullscreenEditor(null)}
footer={null}
width="100vw"
styles={{
body: { padding: 0 },
mask: { backgroundColor: 'rgba(0, 0, 0, 0.65)' },
content: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
margin: 0,
padding: 0,
width: '100vw',
height: '100vh'
}
}}
>
<Editor
height="calc(100vh - 55px)"
defaultLanguage={selectedTemplate.buildVariablesSchema.properties[fullscreenEditor.key]?.editorConfig?.language || 'shell'}
theme="vs-dark"
value={buildVariables[fullscreenEditor.key] || ''}
onChange={(value) => handleEditorChange(fullscreenEditor.key, value)}
options={{
minimap: { enabled: true },
fontSize: 14,
lineNumbers: 'on',
wordWrap: 'on',
tabSize: 2,
scrollBeyondLastLine: false,
automaticLayout: true,
folding: true,
autoClosingBrackets: 'always',
autoClosingQuotes: 'always',
formatOnPaste: true,
formatOnType: true,
suggestOnTriggerCharacters: true,
renderWhitespace: 'boundary',
}}
/>
</Modal>
)}
</>
);
};