chore: Revert container command input style (#11387)

revert for #10724 https://bbs.fit2cloud.com/t/topic/16496
2025-12-23 15:59:07 +08:00 · 2025-12-18 16:59:14 +08:00 · 2025-12-18 16:59:14 +08:00 · a91f372fbd
commit a91f372fbd
parent 825acd5b46
12 changed files with 87 additions and 24 deletions
--- a/frontend/src/api/interface/container.ts
+++ b/frontend/src/api/interface/container.ts
@ -70,6 +70,8 @@ export namespace Container {
        hostname: string;
        domainName: string;
        dns: Array<string>;
+        cmdStr: string;
+        entrypointStr: string;
        memoryItem: number;
        cmd: Array<string>;
        workingDir: string;
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@ -906,7 +906,8 @@ const message = {
        containerExample: '80 or 80-88',
        exposePort: 'Expose port',
        exposeAll: 'Expose all',
-        cmdHelper: 'Enter a command and press Enter to continue inputting. Commands can be dragged to reorder.',
+        cmdHelper: 'Example: nginx -g "daemon off;"',
+        entrypointHelper: 'Example: docker-entrypoint.sh',
        autoRemove: 'Auto remove',
        cpuQuota: 'Number of CPU cores',
        memoryLimit: 'Memory',
--- a/frontend/src/lang/modules/es-es.ts
+++ b/frontend/src/lang/modules/es-es.ts
@ -913,8 +913,8 @@ const message = {
        containerExample: '80 o 80-88',
        exposePort: 'Exponer puerto',
        exposeAll: 'Exponer todos',
-        cmdHelper:
-            'Ingrese un comando y presione Enter para continuar ingresando. Los comandos se pueden arrastrar para reordenar.',
+        cmdHelper: 'Ejemplo: nginx -g "daemon off;"',
+        entrypointHelper: 'Ejemplo: docker-entrypoint.sh',
        autoRemove: 'Eliminar automáticamente',
        cpuQuota: 'Cantidad de núcleos de CPU',
        memoryLimit: 'Memoria',
--- a/frontend/src/lang/modules/ja.ts
+++ b/frontend/src/lang/modules/ja.ts
@ -887,7 +887,8 @@ const message = {
        containerExample: '80または80-88',
        exposePort: 'ポートを公開します',
        exposeAll: 'すべてを公開します',
-        cmdHelper: 'コマンドを入力後、Enterキーを押して入力を続行します。コマンドはドラッグで順序変更できます。',
+        cmdHelper: '例:nginx -g "daemon off;"',
+        entrypointHelper: '例:docker-entrypoint.sh',
        autoRemove: '自動削除',
        cpuQuota: 'CPUコアの数',
        memoryLimit: 'メモリ',
--- a/frontend/src/lang/modules/ko.ts
+++ b/frontend/src/lang/modules/ko.ts
@ -877,8 +877,8 @@ const message = {
        containerExample: '80 또는 80-88',
        exposePort: '포트 노출',
        exposeAll: '모든 포트 노출',
-        cmdHelper:
-            '명령어를 입력한 후 Enter 키를 눌러 입력을 계속합니다. 명령어는 드래그하여 순서를 변경할 수 있습니다.',
+        cmdHelper: '예시: nginx -g "daemon off;"',
+        entrypointHelper: '예시: docker-entrypoint.sh',
        autoRemove: '자동 제거',
        cpuQuota: 'CPU 코어 수',
        memoryLimit: '메모리',
--- a/frontend/src/lang/modules/ms.ts
+++ b/frontend/src/lang/modules/ms.ts
@ -900,8 +900,8 @@ const message = {
        containerExample: '80 atau 80-88',
        exposePort: 'Dedahkan port',
        exposeAll: 'Dedahkan semua',
-        cmdHelper:
-            'Masukkan satu arahan dan tekan Enter untuk terus memasukkan. Arahan boleh disusun semula dengan menyeret.',
+        cmdHelper: 'Contoh: nginx -g "daemon off;"',
+        entrypointHelper: 'Contoh: docker-entrypoint.sh',
        autoRemove: 'Buang automatik',
        cpuQuota: 'Bilangan teras CPU',
        memoryLimit: 'Memori',
--- a/frontend/src/lang/modules/pt-br.ts
+++ b/frontend/src/lang/modules/pt-br.ts
@ -897,8 +897,8 @@ const message = {
        containerExample: '80 ou 80-88',
        exposePort: 'Expor porta',
        exposeAll: 'Expor todas',
-        cmdHelper:
-            'Digite um comando e pressione Enter para continuar a inserção. Os comandos podem ser arrastados para reordenar.',
+        cmdHelper: 'Exemplo: nginx -g "daemon off;"',
+        entrypointHelper: 'Exemplo: docker-entrypoint.sh',
        autoRemove: 'Remover automaticamente',
        cpuQuota: 'Número de núcleos de CPU',
        memoryLimit: 'Memória',
--- a/frontend/src/lang/modules/ru.ts
+++ b/frontend/src/lang/modules/ru.ts
@ -895,8 +895,8 @@ const message = {
        containerExample: '80 или 80-88',
        exposePort: 'Открыть порт',
        exposeAll: 'Открыть все',
-        cmdHelper:
-            'Введите команду и нажмите Enter для продолжения ввода. Команды можно перетаскивать для изменения порядка.',
+        cmdHelper: 'Пример: nginx -g "daemon off;"',
+        entrypointHelper: 'Пример: docker-entrypoint.sh',
        autoRemove: 'Автоудаление',
        cpuQuota: 'Количество ядер CPU',
        memoryLimit: 'Память',
--- a/frontend/src/lang/modules/tr.ts
+++ b/frontend/src/lang/modules/tr.ts
@ -915,7 +915,8 @@ const message = {
        containerExample: '80 veya 80-88',
        exposePort: 'Portu göster',
        exposeAll: 'Tümünü göster',
-        cmdHelper: "Bir komut girin ve girişe devam etmek için Enter'a basın. Komutlar sıralamak için sürüklenebilir.",
+        cmdHelper: 'Örnek: nginx -g "daemon off;"',
+        entrypointHelper: 'Örnek: docker-entrypoint.sh',
        autoRemove: 'Otomatik kaldır',
        cpuQuota: 'CPU çekirdek sayısı',
        memoryLimit: 'Bellek',
--- a/frontend/src/lang/modules/zh-Hant.ts
+++ b/frontend/src/lang/modules/zh-Hant.ts
@ -864,7 +864,8 @@ const message = {
        containerExample: '80 或者 80-88',
        exposePort: '暴露埠',
        exposeAll: '暴露所有',
-        cmdHelper: '輸入一個命令後回車繼續輸入，命令可拖拽排序。',
+        cmdHelper: '例： nginx -g "daemon off;"',
+        entrypointHelper: '例： docker-entrypoint.sh',
        autoRemove: '容器退出後自動刪除容器',
        cpuQuota: 'CPU 限制',
        memoryLimit: '記憶體限制',
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@ -866,7 +866,8 @@ const message = {
        containerExample: '80 或者 80-88',
        exposePort: '暴露端口',
        exposeAll: '暴露所有',
-        cmdHelper: '输入一个命令后回车继续输入，命令可拖拽顺序。',
+        cmdHelper: '例： nginx -g "daemon off;"',
+        entrypointHelper: '例： docker-entrypoint.sh',
        autoRemove: '容器退出后自动删除容器',
        cpuQuota: 'CPU 限制',
        memoryLimit: '内存限制',
--- a/frontend/src/views/container/container/operate/index.vue
+++ b/frontend/src/views/container/container/operate/index.vue
@ -168,21 +168,21 @@
                                <el-tab-pane :label="$t('terminal.command')">
                                    <el-row :gutter="20">
                                        <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
-                                            <el-form-item label="Command" prop="cmd">
-                                                <el-input-tag draggable v-model="form.cmd" />
-                                                <span class="input-help">{{ $t('container.cmdHelper') }}</span>
+                                            <el-form-item label="Command" prop="cmdStr">
+                                                <el-input
+                                                    v-model="form.cmdStr"
+                                                    :placeholder="$t('container.cmdHelper')"
+                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="20">
                                        <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
-                                            <el-form-item label="Entrypoint" prop="entrypoint">
-                                                <el-input-tag
-                                                    draggable
-                                                    v-model="form.entrypoint"
-                                                    placeholder="docker-entrypoint.sh"
+                                            <el-form-item label="Entrypoint" prop="entrypointStr">
+                                                <el-input
+                                                    v-model="form.entrypointStr"
+                                                    :placeholder="$t('container.entrypointHelper')"
                                                />
-                                                <span class="input-help">{{ $t('container.cmdHelper') }}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
@ -373,6 +373,8 @@ const form = reactive<Container.ContainerHelper>({
    hostname: '',
    domainName: '',
    dns: [],
+    cmdStr: '',
+    entrypointStr: '',
    memoryItem: 0,
    cmd: [],
    workingDir: '',
@ -416,8 +418,27 @@ const search = async () => {
                form.user = res.data.user;
                form.workingDir = res.data.workingDir;

+                let itemCmd = '';
                form.cmd = res.data.cmd || [];
+                for (const item of form.cmd) {
+                    if (item.indexOf(' ') !== -1) {
+                        itemCmd += `"${escapeQuotes(item)}" `;
+                    } else {
+                        itemCmd += item + ' ';
+                    }
+                }
+                form.cmdStr = itemCmd.trimEnd();
+                let itemEntrypoint = '';
                form.entrypoint = res.data.entrypoint || [];
+                for (const item of form.entrypoint) {
+                    if (item.indexOf(' ') !== -1) {
+                        itemEntrypoint += `"${escapeQuotes(item)}" `;
+                    } else {
+                        itemEntrypoint += item + ' ';
+                    }
+                }
+                form.entrypointStr = itemEntrypoint.trimEnd();
+
                form.labels = res.data.labels || [];
                form.env = res.data.env || [];
                form.exposedPorts = res.data.exposedPorts || [];
@ -526,7 +547,21 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
    });
 };
 const submit = async () => {
+    form.cmd = [];
    form.taskID = newUUID();
+    if (form.cmdStr) {
+        let itemCmd = splitStringIgnoringQuotes(form.cmdStr);
+        for (const item of itemCmd) {
+            form.cmd.push(item.replace(/(?<!\\)"/g, '').replaceAll('\\"', '"'));
+        }
+    }
+    form.entrypoint = [];
+    if (form.entrypointStr) {
+        let itemEntrypoint = splitStringIgnoringQuotes(form.entrypointStr);
+        for (const item of itemEntrypoint) {
+            form.entrypoint.push(item.replace(/(?<!\\)"/g, '').replaceAll('\\"', '"'));
+        }
+    }
    if (form.publishAllPorts) {
        form.exposedPorts = [];
    } else {
@ -641,6 +676,27 @@ const checkExist = async () => {
    });
 };

+const escapeQuotes = (input) => {
+    return input.replace(/(?<!\\)"/g, '\\"');
+};
+
+const splitStringIgnoringQuotes = (input) => {
+    input = input.replace(/\\"/g, '<quota>');
+    const regex = /"([^"]*)"|(\S+)/g;
+    const result = [];
+    let match;
+
+    while ((match = regex.exec(input)) !== null) {
+        if (match[1]) {
+            result.push(match[1].replaceAll('<quota>', '\\"'));
+        } else if (match[2]) {
+            result.push(match[2].replaceAll('<quota>', '\\"'));
+        }
+    }
+
+    return result;
+};
+
 onMounted(() => {
    if (router.currentRoute.value.query.name) {
        isCreate.value = false;