fix(container-command): Fix the issue of container command parsing failure. (#7200)

Author: ssongliu

frontend/src/lang/modules/en.ts

@@ -678,8 +678,8 @@ const message = {
         containerExample: '80 or 80-88',
         exposePort: 'Expose port',
         exposeAll: 'Expose all',
-        cmdHelper: "e.g. 'nginx' '-g' 'daemon off;' OR nginx -g daemon off;",
-        entrypointHelper: 'e.g. /bin/sh -c',
+        cmdHelper: 'e.g. nginx -g "daemon off;"',
+        entrypointHelper: 'e.g. docker-entrypoint.sh',
         autoRemove: 'Auto remove',
         cpuQuota: 'NacosCPU',
         memoryLimit: 'Memory',

frontend/src/lang/modules/tw.ts

@@ -652,8 +652,8 @@ const message = {
         containerExample: '80 或者 80-88',
         exposePort: '暴露端口',
         exposeAll: '暴露所有',
-        cmdHelper: "例： 'nginx' '-g' 'daemon off;' 或 nginx -g daemon off;",
-        entrypointHelper: '例： /bin/sh -c',
+        cmdHelper: '例： nginx -g "daemon off;"',
+        entrypointHelper: '例： docker-entrypoint.sh',
         autoRemove: '容器退出後自動刪除容器',
         cpuQuota: 'CPU 限製',
         memoryLimit: '內存限製',

frontend/src/lang/modules/zh.ts

@@ -654,8 +654,8 @@ const message = {
         containerExample: '80 或者 80-88',
         exposePort: '暴露端口',
         exposeAll: '暴露所有',
-        cmdHelper: "例： 'nginx' '-g' 'daemon off;' 或者 nginx -g daemon off;",
-        entrypointHelper: '例： /bin/sh -c',
+        cmdHelper: '例： nginx -g "daemon off;"',
+        entrypointHelper: '例： docker-entrypoint.sh',
         autoRemove: '容器退出后自动删除容器',
         cpuQuota: 'CPU 限制',
         memoryLimit: '内存限制',

frontend/src/views/container/container/operate/index.vue

@@ -357,23 +357,26 @@ const acceptParams = (params: DialogProps): void => {
     title.value = i18n.global.t('container.' + dialogData.value.title);
     if (params.title === 'edit') {
         dialogData.value.rowData.memory = Number(dialogData.value.rowData.memory.toFixed(2));
-        dialogData.value.rowData.cmd = dialogData.value.rowData.cmd || [];
+
         let itemCmd = '';
         for (const item of dialogData.value.rowData.cmd) {
-            itemCmd += `'${item}' `;
+            if (item.indexOf(' ') !== -1) {
+                itemCmd += `"${item.replaceAll('"', '\\"')}" `;
+            } else {
+                itemCmd += item + ' ';
+            }
         }
-        dialogData.value.rowData.cmdStr = itemCmd ? itemCmd.substring(0, itemCmd.length - 1) : '';
-
+        dialogData.value.rowData.cmdStr = itemCmd.trimEnd();
         let itemEntrypoint = '';
-        if (dialogData.value.rowData?.entrypoint) {
-            for (const item of dialogData.value.rowData.entrypoint) {
-                itemEntrypoint += `'${item}' `;
+        for (const item of dialogData.value.rowData.entrypoint) {
+            if (item.indexOf(' ') !== -1) {
+                itemEntrypoint += `"${item.replaceAll('"', '\\"')}" `;
+            } else {
+                itemEntrypoint += item + ' ';
             }
         }
+        dialogData.value.rowData.entrypointStr = itemEntrypoint.trimEnd();
 
-        dialogData.value.rowData.entrypointStr = itemEntrypoint
-            ? itemEntrypoint.substring(0, itemEntrypoint.length - 1)
-            : '';
         dialogData.value.rowData.labels = dialogData.value.rowData.labels || [];
         dialogData.value.rowData.env = dialogData.value.rowData.env || [];
         dialogData.value.rowData.labelsStr = dialogData.value.rowData.labels.join('\n');
@@ -501,34 +504,16 @@ const submit = async () => {
     }
     dialogData.value.rowData!.cmd = [];
     if (dialogData.value.rowData?.cmdStr) {
-        if (dialogData.value.rowData?.cmdStr.indexOf(`'`) !== -1) {
-            let itemCmd = dialogData.value.rowData!.cmdStr.split(`'`);
-            for (const cmd of itemCmd) {
-                if (cmd && cmd !== ' ') {
-                    dialogData.value.rowData!.cmd.push(cmd);
-                }
-            }
-        } else {
-            let itemCmd = dialogData.value.rowData!.cmdStr.split(` `);
-            for (const cmd of itemCmd) {
-                dialogData.value.rowData!.cmd.push(cmd);
-            }
+        let itemCmd = splitWithQuotes(dialogData.value.rowData?.cmdStr);
+        for (const item of itemCmd) {
+            dialogData.value.rowData!.cmd.push(item.replace(/(?<!\\)"/g, '').replaceAll('\\"', '"'));
         }
     }
     dialogData.value.rowData!.entrypoint = [];
     if (dialogData.value.rowData?.entrypointStr) {
-        if (dialogData.value.rowData?.entrypointStr.indexOf(`'`) !== -1) {
-            let itemEntrypoint = dialogData.value.rowData!.entrypointStr.split(`'`);
-            for (const entry of itemEntrypoint) {
-                if (entry && entry !== ' ') {
-                    dialogData.value.rowData!.entrypoint.push(entry);
-                }
-            }
-        } else {
-            let itemEntrypoint = dialogData.value.rowData!.entrypointStr.split(` `);
-            for (const entry of itemEntrypoint) {
-                dialogData.value.rowData!.entrypoint.push(entry);
-            }
+        let itemEntrypoint = splitWithQuotes(dialogData.value.rowData?.entrypointStr);
+        for (const item of itemEntrypoint) {
+            dialogData.value.rowData!.entrypoint.push(item.replace(/(?<!\\)"/g, '').replaceAll('\\"', '"'));
         }
     }
     if (dialogData.value.rowData!.publishAllPorts) {
@@ -644,6 +629,17 @@ const isFromApp = (rowData: Container.ContainerHelper) => {
     }
     return false;
 };
+
+const splitWithQuotes = (str) => {
+    str = str.replace(/\\"/g, '<quota>');
+    const regex = /(?=(?:[^'"]|['"][^'"]*['"])*$)\s+/g;
+    let parts = str.split(regex).filter(Boolean);
+    let returnList = [];
+    for (const item of parts) {
+        returnList.push(item.replaceAll('<quota>', '\\"'));
+    }
+    return returnList;
+};
 defineExpose({
     acceptParams,
 });