Merge branch 'production'

src/pages/componentDevelopment/componentDeployment/envConfigModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, Button, Input, Message, Tooltip } from '@arco-design/web-react';
+import { Modal, Button, Input, Message, Tooltip, Switch } from '@arco-design/web-react';
 import { IconQuestionCircle, IconCopy, IconDelete, IconPlus } from '@arco-design/web-react/icon';
 import copy from 'copy-to-clipboard';
 import styles from './style/envConfigModal.module.less';
@@ -33,6 +33,7 @@ const EnvConfigModal: React.FC<EnvConfigModalProps> = ({
   const [saveLoading, setSaveLoading] = useState(false);
   const [configData, setConfigData] = useState<any>(null);
   const [configList, setConfigList] = useState<ConfigItem[]>([]);
+  const [showEscaped, setShowEscaped] = useState(false);
 
   useEffect(() => {
     if (visible && instanceId) {
@@ -84,17 +85,34 @@ const EnvConfigModal: React.FC<EnvConfigModalProps> = ({
   };
 
   const handleCopyCommand = () => {
-    const textToCopy = language.includes('Python') ? configData.pythonCommand : configData.javaCommand;
+    // const rawCommand = language.includes('Python') ? configData.pythonCommand : configData.javaCommand;
+    const textToCopy = getDisplayCommand();
 
     const success = copy(textToCopy);
 
     if (success) {
       Message.success('复制成功');
-    } else {
+    }
+    else {
       Message.error('复制失败');
     }
   };
 
+  // 获取显示的命令文本
+  const getDisplayCommand = () => {
+    const rawCommand = language.includes('Python') ? configData.pythonCommand : configData.javaCommand;
+    if (showEscaped) {
+      // 显示转义字符：将实际的换行、引号等转换为可见的转义序列
+      return rawCommand
+        .replace(/\\/g, '\\\\')
+        .replace(/\n/g, '\\n')
+        .replace(/\r/g, '\\r')
+        .replace(/\t/g, '\\t')
+        .replace(/"/g, '\\"');
+    }
+    return rawCommand;
+  };
+
   const handleSave = async () => {
     try {
       setSaveLoading(true);
@@ -146,6 +164,7 @@ const EnvConfigModal: React.FC<EnvConfigModalProps> = ({
             {configData?.javaCommand && (
               <div className={styles['command-section']}>
                 <div className={styles['command-header']}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                     <Button
                       type="text"
                       size="mini"
@@ -154,9 +173,18 @@ const EnvConfigModal: React.FC<EnvConfigModalProps> = ({
                     >
                       复制命令
                     </Button>
+                    <Switch
+                      checked={showEscaped}
+                      onChange={setShowEscaped}
+                      size="small"
+                    />
+                    <span style={{ fontSize: 12, color: '#86909c' }}>
+                      显示转义字符
+                    </span>
+                  </div>
                 </div>
                 <div className={styles['command-content']}>
-                  {language.includes('Python') ? configData.pythonCommand : configData.javaCommand}
+                  {getDisplayCommand()}
                 </div>
                 <div className={styles['command-hint']}>
                   本地点击&#34;复制命令&#34;按钮可以复制上方命令