From ad4a64a35cd717fdf427a6c7e589737a2679bd1f Mon Sep 17 00:00:00 2001
From: HynoR <20227709+HynoR@users.noreply.github.com>
Date: Sun, 15 Feb 2026 09:59:15 +0800
Subject: [PATCH 1/2] feat: Enhance log container UI and functionality

Updated the log container component to improve the user interface with a new toolbar layout, added copy mode functionality, and included additional log display options. The sidebar component was also modified to remove the unique-opened property. In the compose view, introduced an environment editing option and improved the save confirmation dialog with a force pull checkbox.
---
 .../src/components/log/container/index.vue    | 181 +++++++++++++-----
 .../src/layout/components/Sidebar/index.vue   |   1 -
 .../src/views/container/compose/index.vue     |  86 ++++++---
 3 files changed, 195 insertions(+), 73 deletions(-)

diff --git a/frontend/src/components/log/container/index.vue b/frontend/src/components/log/container/index.vue
index cb7fb659c0f0..8a466c453be5 100644
--- a/frontend/src/components/log/container/index.vue
+++ b/frontend/src/components/log/container/index.vue
@@ -1,44 +1,63 @@
 <template>
-    <div v-if="showControl">
-        <el-select @change="searchLogs" class="fetchClass" v-model="logSearch.mode">
-            <template #prefix>{{ $t('container.fetch') }}</template>
-            <el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
-        </el-select>
-        <el-select @change="searchLogs" class="tailClass" v-model.number="logSearch.tail">
-            <template #prefix>{{ $t('container.lines') }}</template>
-            <el-option :value="0" :label="$t('commons.table.all')" />
-            <el-option :value="100" :label="100" />
-            <el-option :value="200" :label="200" />
-            <el-option :value="500" :label="500" />
-            <el-option :value="1000" :label="1000" />
-        </el-select>
-        <div class="margin-button float-left">
-            <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
-                {{ $t('commons.button.watch') }}
-            </el-checkbox>
+    <div v-if="showControl" class="toolbar-container">
+        <div class="filter-row">
+            <div class="select-group">
+                <el-select @change="searchLogs" class="fetchClass" v-model="logSearch.mode" :disabled="isCopyMode">
+                    <template #prefix>{{ $t('container.fetch') }}</template>
+                    <el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
+                </el-select>
+                <el-select
+                    @change="searchLogs"
+                    class="tailClass"
+                    v-model.number="logSearch.tail"
+                    :disabled="isCopyMode"
+                >
+                    <template #prefix>{{ $t('container.lines') }}</template>
+                    <el-option :value="0" :label="$t('commons.table.all')" />
+                    <el-option :value="100" :label="100" />
+                    <el-option :value="200" :label="200" />
+                    <el-option :value="500" :label="500" />
+                    <el-option :value="1000" :label="1000" />
+                </el-select>
+            </div>
+            <div class="checkbox-group">
+                <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch" :disabled="isCopyMode">
+                    {{ $t('commons.button.watch') }}
+                </el-checkbox>
+                <el-checkbox border @change="searchLogs" v-model="logSearch.isShowTimestamp" :disabled="isCopyMode">
+                    {{ $t('commons.table.date') }}
+                </el-checkbox>
+            </div>
         </div>
-        <div class="margin-button float-left">
-            <el-checkbox border @change="searchLogs" v-model="logSearch.isShowTimestamp">
-                {{ $t('commons.table.date') }}
-            </el-checkbox>
+        <div class="button-row">
+            <el-button @click="toggleCopyMode" :type="isCopyMode ? 'primary' : 'default'">
+                {{ isCopyMode ? $t('commons.button.close') : $t('commons.button.copy') }}
+            </el-button>
+            <el-button @click="onDownload" icon="Download" :disabled="isCopyMode">
+                {{ $t('commons.button.download') }}
+            </el-button>
+            <el-button @click="onClean" icon="Delete" :disabled="isCopyMode">
+                {{ $t('commons.button.clean') }}
+            </el-button>
         </div>
-        <el-button class="margin-button" @click="onDownload" icon="Download">
-            {{ $t('commons.button.download') }}
-        </el-button>
-        <el-button class="margin-button" @click="onClean" icon="Delete">
-            {{ $t('commons.button.clean') }}
-        </el-button>
     </div>
     <div class="log-container" :style="styleVars" ref="logContainer">
-        <div class="log-spacer" :style="{ height: `${totalHeight}px` }"></div>
-        <div
-            v-for="(log, index) in visibleLogs"
-            :key="startIndex + index"
-            class="log-item"
-            :style="{ top: `${(startIndex + index) * logHeight}px` }"
-        >
-            <hightlight :log="log" type="container" :container="container"></hightlight>
-        </div>
+        <template v-if="isCopyMode">
+            <div v-for="(log, index) in logs" :key="`copy-${index}`" class="log-copy-item">
+                <span class="whitespace-pre">{{ log }}</span>
+            </div>
+        </template>
+        <template v-else>
+            <div class="log-spacer" :style="{ height: `${totalHeight}px` }"></div>
+            <div
+                v-for="(log, index) in visibleLogs"
+                :key="startIndex + index"
+                class="log-item"
+                :style="{ top: `${(startIndex + index) * logHeight}px` }"
+            >
+                <hightlight :log="log" type="container" :container="container"></hightlight>
+            </div>
+        </template>
     </div>
 </template>
 
@@ -97,6 +116,8 @@ const styleVars = computed(() => ({
 const logVisible = ref(false);
 const logContainer = ref<HTMLElement | null>(null);
 const logs = ref<string[]>([]);
+const isCopyMode = ref(false);
+const copyPendingLogs = ref<string[]>([]);
 let eventSource: EventSource | null = null;
 const logSearch = reactive({
     isWatch: props.defaultFollow ? true : true,
@@ -148,16 +169,42 @@ const stopListening = () => {
 
 const handleClose = async () => {
     stopListening();
+    isCopyMode.value = false;
+    copyPendingLogs.value = [];
     logVisible.value = false;
 };
 
+const flushCopyPendingLogs = () => {
+    if (copyPendingLogs.value.length === 0) {
+        return;
+    }
+    logs.value.push(...copyPendingLogs.value);
+    copyPendingLogs.value = [];
+};
+
+const toggleCopyMode = () => {
+    if (isCopyMode.value) {
+        isCopyMode.value = false;
+        flushCopyPendingLogs();
+        nextTick(() => {
+            if (logContainer.value) {
+                logContainer.value.scrollTop = logContainer.value.scrollHeight;
+            }
+        });
+        return;
+    }
+    isCopyMode.value = true;
+};
+
 const searchLogs = async () => {
     if (Number(logSearch.tail) < 0) {
         MsgError(i18n.global.t('container.linesHelper'));
         return;
     }
     stopListening();
+    isCopyMode.value = false;
     logs.value = [];
+    copyPendingLogs.value = [];
     let currentNode = globalStore.currentNode;
     if (props.node && props.node !== '') {
         currentNode = props.node;
@@ -169,6 +216,10 @@ const searchLogs = async () => {
     eventSource = new EventSource(url);
     eventSource.onmessage = (event: MessageEvent) => {
         const data = event.data;
+        if (isCopyMode.value) {
+            copyPendingLogs.value.push(data);
+            return;
+        }
         logs.value.push(data);
         nextTick(() => {
             if (logContainer.value) {
@@ -290,20 +341,50 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.margin-button {
-    margin-left: 20px;
+.toolbar-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.filter-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 10px 12px;
 }
-.fullScreen {
-    border: none;
+
+.button-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
 }
-.tailClass {
-    width: 20%;
-    float: left;
-    margin-left: 20px;
+
+.select-group {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
 }
+
+.checkbox-group {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-left: auto;
+}
+
 .fetchClass {
-    width: 30%;
-    float: left;
+    width: 320px;
+    max-width: 100%;
+}
+
+.tailClass {
+    width: 220px;
+    max-width: 100%;
 }
 
 .log-container {
@@ -323,4 +404,12 @@ onMounted(() => {
     box-sizing: border-box;
     white-space: nowrap;
 }
+
+.log-copy-item {
+    width: 100%;
+    padding: 2px;
+    color: #f5f5f5;
+    box-sizing: border-box;
+    white-space: nowrap;
+}
 </style>
diff --git a/frontend/src/layout/components/Sidebar/index.vue b/frontend/src/layout/components/Sidebar/index.vue
index 71e30f6fc2ba..96e69045ed4c 100644
--- a/frontend/src/layout/components/Sidebar/index.vue
+++ b/frontend/src/layout/components/Sidebar/index.vue
@@ -16,7 +16,6 @@
                 :router="true"
                 :collapse="isCollapse"
                 :collapse-transition="false"
-                :unique-opened="true"
                 @select="handleMenuClick"
                 class="custom-menu"
             >
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index 1e40fc878a89..97dc85b5d7ea 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -221,10 +221,18 @@
                                 </el-table-column>
                             </el-table>
 
-                            <el-radio-group class="mt-1 mb-1" v-model="showType">
-                                <el-radio-button value="compose">{{ $t('container.compose') }}</el-radio-button>
-                                <el-radio-button value="log">{{ $t('commons.button.log') }}</el-radio-button>
-                            </el-radio-group>
+                            <div class="mt-1 mb-1 flex items-center justify-between">
+                                <el-radio-group v-model="showType">
+                                    <el-radio-button value="compose">{{ $t('container.compose') }}</el-radio-button>
+                                    <el-radio-button value="log">{{ $t('commons.button.log') }}</el-radio-button>
+                                    <el-radio-button v-if="canEditComposeEnv" value="env">
+                                        {{ $t('container.env') }}
+                                    </el-radio-button>
+                                </el-radio-group>
+                                <el-button v-if="showType !== 'log'" type="primary" @click="onSubmitEdit">
+                                    {{ $t('commons.button.save') }}
+                                </el-button>
+                            </div>
                             <el-select
                                 class="p-w-300 mt-2 ml-2"
                                 v-model="currentYamlPath"
@@ -246,25 +254,6 @@
                                     :heightDiff="475"
                                     placeholder="#Define or paste the content of your docker-compose file here"
                                 />
-                                <span class="envTitle">{{ $t('container.env') }}</span>
-                                <el-input
-                                    placeholder="key=value"
-                                    type="textarea"
-                                    :rows="3"
-                                    :disabled="currentCompose.createdBy === 'Apps'"
-                                    v-model="env"
-                                />
-                                <span v-if="currentCompose.createdBy === 'Apps'" class="input-help">
-                                    {{ $t('container.composeEnvHelper2') }}
-                                </span>
-                                <div class="mt-2">
-                                    <el-checkbox v-model="form.forcePull" :label="$t('container.forcePull')" />
-                                    <span class="input-help">{{ $t('container.forcePullHelper') }}</span>
-                                </div>
-
-                                <el-button type="primary" class="mt-2" @click="onSubmitEdit">
-                                    {{ $t('commons.button.save') }}
-                                </el-button>
                             </div>
 
                             <div v-show="showType === 'log'">
@@ -277,6 +266,20 @@
                                     :defaultFollow="true"
                                 />
                             </div>
+
+                            <div v-show="showType === 'env'">
+                                <span class="envTitle">{{ $t('container.env') }}</span>
+                                <el-input
+                                    placeholder="key=value"
+                                    type="textarea"
+                                    :rows="10"
+                                    :disabled="currentCompose.createdBy === 'Apps'"
+                                    v-model="env"
+                                />
+                                <span v-if="currentCompose.createdBy === 'Apps'" class="input-help">
+                                    {{ $t('container.composeEnvHelper2') }}
+                                </span>
+                            </div>
                         </el-card>
                         <el-card v-else>
                             <el-form
@@ -370,7 +373,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, h, ref } from 'vue';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import ContainerLog from '@/components/log/container/index.vue';
 import TaskLog from '@/components/log/task/index.vue';
@@ -399,7 +402,7 @@ import { MsgError, MsgSuccess } from '@/utils/message';
 import { computeCPU, computeSize2, computeSizeForDocker, newUUID } from '@/utils/util';
 import { Rules } from '@/global/form-rules';
 import { loadBaseDir } from '@/api/modules/setting';
-import { ElForm } from 'element-plus';
+import { ElCheckbox, ElForm } from 'element-plus';
 
 const data = ref<any[]>([]);
 const loading = ref(false);
@@ -446,6 +449,7 @@ const rules = reactive({
 
 const isActive = ref(false);
 const isExist = ref(false);
+const canEditComposeEnv = computed(() => currentCompose.value?.createdBy !== 'Apps');
 
 const tableData = computed(() => {
     return composeContainers.value.map((container) => {
@@ -531,6 +535,9 @@ const loadDetail = async (row: Container.ComposeInfo, withRefresh: boolean) => {
     isOnCreate.value = false;
     detailLoading.value = true;
     currentCompose.value = row;
+    if (!canEditComposeEnv.value && showType.value === 'env') {
+        showType.value = 'compose';
+    }
     currentYamlPath.value = row.path.indexOf(',') !== -1 ? row.path.split(',')[0] : row.path;
     env.value = row.env || '';
     composeContainers.value = row.containers || [];
@@ -688,6 +695,33 @@ const loadSize = async (row: any) => {
 };
 
 const onSubmitEdit = async () => {
+    const forcePull = ref(false);
+    try {
+        await ElMessageBox({
+            title: i18n.global.t('commons.button.save'),
+            message: h('div', { class: 'w-full' }, [
+                h(
+                    ElCheckbox,
+                    {
+                        onChange: (value: string | number | boolean) => {
+                            forcePull.value = Boolean(value);
+                        },
+                    },
+                    {
+                        default: () => i18n.global.t('container.forcePull'),
+                    },
+                ),
+                h('div', { class: 'input-help mt-1' }, i18n.global.t('container.forcePullHelper')),
+            ]),
+            showCancelButton: true,
+            confirmButtonText: i18n.global.t('commons.button.confirm'),
+            cancelButtonText: i18n.global.t('commons.button.cancel'),
+            closeOnClickModal: false,
+        });
+    } catch {
+        return;
+    }
+
     const taskID = newUUID();
     const param = {
         taskID: taskID,
@@ -697,7 +731,7 @@ const onSubmitEdit = async () => {
         content: composeContent.value,
         createdBy: currentCompose.value.createdBy,
         env: env.value || '',
-        forcePull: form.forcePull,
+        forcePull: forcePull.value,
     };
     loading.value = true;
     await composeUpdate(param)

From 45f1e8f60db8496b5f6e7e40b7ebf08cf1b23d48 Mon Sep 17 00:00:00 2001
From: HynoR <20227709+HynoR@users.noreply.github.com>
Date: Sun, 15 Feb 2026 10:14:28 +0800
Subject: [PATCH 2/2] feat: Add helper text for container update confirmation

Included additional helper text in the compose view to assist users with the update process, enhancing clarity and user experience during submission.
---
 frontend/src/views/container/compose/index.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index 97dc85b5d7ea..e4b623ef922f 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -712,6 +712,7 @@ const onSubmitEdit = async () => {
                     },
                 ),
                 h('div', { class: 'input-help mt-1' }, i18n.global.t('container.forcePullHelper')),
+                h('div', { class: 'mt-2 leading-6' }, i18n.global.t('container.updateHelper4')),
             ]),
             showCancelButton: true,
             confirmButtonText: i18n.global.t('commons.button.confirm'),