1

frontend/src/pages/Deploy/Deployment/List/index.tsx

@@ -1,7 +1,7 @@
 import React, {useState, useEffect} from 'react';
 import {PageContainer} from '@ant-design/pro-layout';
-import {Button, message, Popconfirm, Select, Space} from 'antd';
+import {Button, message, Popconfirm, Select, Space, Modal, Tooltip} from 'antd';
-import {PlusOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons';
+import {PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined} from '@ant-design/icons';
 import {getDeploymentConfigPage, deleteDeploymentConfig, getDeployConfigTemplates} from './service';
 import {getEnvironmentList} from '../../Environment/List/service';
 import type {DeploymentConfig, DeploymentConfigQueryParams, DeployConfigTemplate} from './types';
@@ -9,15 +9,46 @@ import type {Environment} from '../../Environment/List/types';
 import DeploymentConfigModal from './components/DeploymentConfigModal';
 import {ProTable} from '@ant-design/pro-components';
 import type {ProColumns, ActionType} from '@ant-design/pro-components';
+import {Editor} from '@/components/Editor';
 
 const {Option} = Select;
 
+const CodePreviewModal: React.FC<{
+    open: boolean;
+    onCancel: () => void;
+    code: string;
+    language?: string;
+}> = ({open, onCancel, code, language = 'shell'}) => (
+    <Modal
+        title="代码预览"
+        open={open}
+        onCancel={onCancel}
+        footer={null}
+        width={800}
+        bodyStyle={{padding: 0}}
+    >
+        <Editor
+            height="500px"
+            defaultLanguage={language}
+            value={code}
+            options={{
+                readOnly: true,
+                minimap: { enabled: true },
+                scrollBeyondLastLine: false,
+                automaticLayout: true,
+            }}
+        />
+    </Modal>
+);
+
 const DeploymentConfigList: React.FC = () => {
     const [environments, setEnvironments] = useState<Environment[]>([]);
     const [selectedEnvId, setSelectedEnvId] = useState<number>();
     const [modalVisible, setModalVisible] = useState(false);
     const [currentConfig, setCurrentConfig] = useState<DeploymentConfig>();
     const [templates, setTemplates] = useState<DeployConfigTemplate[]>([]);
+    const [codePreviewVisible, setCodePreviewVisible] = useState(false);
+    const [previewCode, setPreviewCode] = useState<{code: string; language?: string}>({code: ''});
     const actionRef = React.useRef<ActionType>();
 
     // 获取环境列表
@@ -88,6 +119,12 @@ const DeploymentConfigList: React.FC = () => {
         actionRef.current?.reload();
     };
 
+    // 处理代码预览
+    const handleCodePreview = (code: string, language?: string) => {
+        setPreviewCode({code, language});
+        setCodePreviewVisible(true);
+    };
+
     // 根据模板获取构建配置的子列
     const getBuildConfigColumns = () => {
         const buildConfigColumns: ProColumns<DeploymentConfig>[] = [];
@@ -124,7 +161,41 @@ const DeploymentConfigList: React.FC = () => {
                         return '-';
                     }
 
-                    return record.buildVariables?.[field] || '-';
+                    const value = record.buildVariables?.[field];
+                    if (!value) return '-';
+
+                    // 如果是富文本编辑器字段
+                    const fieldProperties = template?.buildVariablesSchema?.properties?.[field];
+                    if (fieldProperties?.editorConfig) {
+                        const shortContent = value.length > 50 ? value.slice(0, 50) + '...' : value;
+                        return (
+                            <Space>
+                                <Tooltip title="点击查看完整内容">
+                                    <Button 
+                                        type="link" 
+                                        icon={<EyeOutlined />}
+                                        onClick={() => handleCodePreview(
+                                            value,
+                                            fieldProperties.editorConfig?.language
+                                        )}
+                                    >
+                                        {shortContent}
+                                    </Button>
+                                </Tooltip>
+                            </Space>
+                        );
+                    }
+
+                    // 普通字段，如果内容过长则使用 Tooltip
+                    if (value.length > 50) {
+                        return (
+                            <Tooltip title={value}>
+                                {value.slice(0, 50) + '...'}
+                            </Tooltip>
+                        );
+                    }
+
+                    return value;
                 }
             });
         });
@@ -289,6 +360,13 @@ const DeploymentConfigList: React.FC = () => {
                     envId={selectedEnvId}
                 />
             )}
+
+            <CodePreviewModal
+                open={codePreviewVisible}
+                onCancel={() => setCodePreviewVisible(false)}
+                code={previewCode.code}
+                language={previewCode.language}
+            />
         </PageContainer>
     );
 };