From 4681273ff07e393c7d0a807caa5ebbc8149f835a Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Mon, 2 Mar 2026 11:16:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(envConfigModal):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=AC=E4=B9=89=E5=AD=97=E7=AC=A6=E6=98=BE=E7=A4=BA=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../componentDeployment/envConfigModal.tsx    | 52 ++++++++++++++-----
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/pages/componentDevelopment/componentDeployment/envConfigModal.tsx b/src/pages/componentDevelopment/componentDeployment/envConfigModal.tsx
index d2815cf..784f021 100644
--- a/src/pages/componentDevelopment/componentDeployment/envConfigModal.tsx
+++ b/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 = showEscaped ? rawCommand : rawCommand;
 
     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,17 +164,27 @@ const EnvConfigModal: React.FC<EnvConfigModalProps> = ({
             {configData?.javaCommand && (
               <div className={styles['command-section']}>
                 <div className={styles['command-header']}>
-                  <Button
-                    type="text"
-                    size="mini"
-                    icon={<IconCopy />}
-                    onClick={handleCopyCommand}
-                  >
-                    复制命令
-                  </Button>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <Button
+                      type="text"
+                      size="mini"
+                      icon={<IconCopy />}
+                      onClick={handleCopyCommand}
+                    >
+                      复制命令
+                    </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;按钮可以复制上方命令