diff --git a/frontend/src/components/log/container/index.vue b/frontend/src/components/log/container/index.vue
index dbf59509bfce..325f2fc6984c 100644
--- a/frontend/src/components/log/container/index.vue
+++ b/frontend/src/components/log/container/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <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" />
@@ -41,7 +41,7 @@
 import { cleanContainerLog, DownloadFile } from '@/api/modules/container';
 import i18n from '@/lang';
 import { dateFormatForName } from '@/utils/util';
-import { onUnmounted, reactive, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import hightlight from '@/components/log/custom-hightlight/index.vue';
@@ -69,6 +69,14 @@ const props = defineProps({
         type: String,
         default: '',
     },
+    showControl: {
+        type: Boolean,
+        default: true,
+    },
+    defaultFollow: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const styleVars = computed(() => ({
@@ -80,10 +88,10 @@ const logContainer = ref<HTMLElement | null>(null);
 const logs = ref<string[]>([]);
 let eventSource: EventSource | null = null;
 const logSearch = reactive({
-    isWatch: true,
+    isWatch: props.defaultFollow ? true : true,
     container: '',
     mode: 'all',
-    tail: 100,
+    tail: props.defaultFollow ? 0 : 100,
     compose: '',
 });
 const logHeight = 20;
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index 93b7aaf616de..aebefbedbc66 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -4,7 +4,7 @@
             v-model:isActive="isActive"
             v-model:isExist="isExist"
             v-model:loading="loading"
-            @search="search"
+            @search="search(true)"
         />
 
         <LayoutContent v-if="isExist" :title="$t('container.compose', 2)" :class="{ mask: !isActive }">
@@ -13,261 +13,465 @@
                     {{ $t('container.createCompose') }}
                 </el-button>
             </template>
-            <template #rightToolBar>
-                <TableSearch @search="search()" v-model:searchName="searchName" />
-                <TableRefresh @search="search()" />
-                <TableSetting title="compose-refresh" @search="search()" />
-            </template>
             <template #main>
-                <ComplexTable
-                    :pagination-config="paginationConfig"
-                    v-model:selects="selects"
-                    :data="data"
-                    @search="search"
-                    :heightDiff="350"
-                >
-                    <el-table-column
-                        :label="$t('commons.table.name')"
-                        width="170"
-                        prop="name"
-                        sortable
-                        fix
-                        show-overflow-tooltip
-                    >
-                        <template #default="{ row }">
-                            <el-text type="primary" class="cursor-pointer" @click="loadDetail(row)">
-                                {{ row.name }}
-                            </el-text>
-                        </template>
-                    </el-table-column>
-                    <el-table-column :label="$t('app.source')" prop="createdBy" min-width="80" fix>
-                        <template #default="{ row }">
-                            <span v-if="row.createdBy === ''">{{ $t('commons.table.local') }}</span>
-                            <span v-if="row.createdBy === 'Apps'">{{ $t('menu.apps') }}</span>
-                            <span v-if="row.createdBy === '1Panel'">1Panel</span>
-                        </template>
-                    </el-table-column>
-                    <el-table-column :label="$t('container.composeDirectory')" min-width="80" fix>
-                        <template #default="{ row }">
-                            <el-tooltip :content="row.workdir">
-                                <el-button type="primary" link @click="toComposeFolder(row)">
-                                    <el-icon>
-                                        <FolderOpened />
-                                    </el-icon>
-                                </el-button>
-                            </el-tooltip>
-                        </template>
-                    </el-table-column>
-                    <el-table-column :label="$t('container.containerStatus')" min-width="80" fix>
-                        <template #default="{ row }">
-                            <el-text class="mx-1" v-if="row.containerCount == 0" type="danger">
-                                {{ $t('container.exited') }}
-                            </el-text>
-                            <el-popover width="300px" v-else>
-                                <template #reference>
-                                    <el-text
-                                        class="cursor-pointer"
-                                        size="small"
-                                        :type="row.containerCount === row.runningCount ? 'success' : 'warning'"
-                                    >
-                                        {{ $t('container.running', [row.runningCount, row.containerCount]) }}
-                                    </el-text>
+                <el-row v-if="data.length > 0" :gutter="20" class="row-box">
+                    <el-col :span="6">
+                        <el-card>
+                            <el-input
+                                v-model="searchName"
+                                :placeholder="$t('commons.button.search')"
+                                clearable
+                                @clear="search"
+                                @keyup.enter="search"
+                            >
+                                <template #prefix>
+                                    <el-icon><Search /></el-icon>
                                 </template>
-                                <div v-for="(item, index) in row.containers" :key="index" class="mt-2">
-                                    <span>{{ item.name }}</span>
-                                    <Status class="float-right" :key="item.state" :status="item.state" />
+                            </el-input>
+
+                            <ComplexTable :show-header="false" @row-click="loadDetail" :data="data">
+                                <el-table-column prop="name">
+                                    <template #default="{ row }">
+                                        <div class="cursor-pointer">
+                                            <div class="font-medium truncate">
+                                                {{ row.name }}
+                                                <el-divider direction="vertical" />
+                                                <el-text v-if="row.containerCount === 0" type="danger" size="small">
+                                                    {{ $t('container.exited') }}
+                                                </el-text>
+                                                <el-text
+                                                    v-else
+                                                    :type="
+                                                        row.containerCount === row.runningCount ? 'success' : 'warning'
+                                                    "
+                                                    size="small"
+                                                >
+                                                    {{
+                                                        $t('container.running', [row.runningCount, row.containerCount])
+                                                    }}
+                                                </el-text>
+                                                <el-divider direction="vertical" />
+                                                <el-button
+                                                    link
+                                                    type="primary"
+                                                    icon="Folder"
+                                                    :disabled="!currentCompose?.workdir"
+                                                    @click="openComposeFolder"
+                                                />
+                                            </div>
+                                            <div class="mt-1 mb-2">
+                                                <el-tag size="small" type="info">{{ loadFrom(row) }}</el-tag>
+                                                <el-tag size="small" type="info" class="ml-2">
+                                                    {{ row.createdAt }}
+                                                </el-tag>
+                                            </div>
+                                            <el-button
+                                                plain
+                                                round
+                                                size="small"
+                                                @click="handleComposeOperate('up', row)"
+                                            >
+                                                {{ $t('commons.operate.start') }}
+                                            </el-button>
+                                            <el-button
+                                                plain
+                                                round
+                                                size="small"
+                                                @click="handleComposeOperate('stop', row)"
+                                            >
+                                                {{ $t('commons.operate.stop') }}
+                                            </el-button>
+                                            <el-button
+                                                plain
+                                                round
+                                                size="small"
+                                                @click="handleComposeOperate('restart', row)"
+                                            >
+                                                {{ $t('commons.operate.restart') }}
+                                            </el-button>
+                                            <el-button
+                                                :disabled="row.createdBy !== '1Panel'"
+                                                plain
+                                                round
+                                                size="small"
+                                                @click="onDelete(row)"
+                                            >
+                                                {{ $t('commons.operate.delete') }}
+                                            </el-button>
+                                        </div>
+                                    </template>
+                                </el-table-column>
+                            </ComplexTable>
+                        </el-card>
+                    </el-col>
+                    <el-col :span="18">
+                        <el-card v-if="currentCompose" v-loading="detailLoading">
+                            <el-table
+                                v-if="composeContainers.length > 0"
+                                :data="tableData"
+                                size="small"
+                                max-height="250"
+                            >
+                                <el-table-column :label="$t('commons.table.name')" prop="name" show-overflow-tooltip>
+                                    <template #default="{ row }">
+                                        <el-text type="primary" class="cursor-pointer" @click="onInspectContainer(row)">
+                                            {{ row.name }}
+                                        </el-text>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column :label="$t('commons.table.status')" prop="state" width="150">
+                                    <template #default="{ row }">
+                                        <Status :key="row.state" :status="row.state"></Status>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column
+                                    :label="$t('container.source')"
+                                    show-overflow-tooltip
+                                    prop="resource"
+                                    min-width="150"
+                                >
+                                    <template #default="{ row }">
+                                        <div v-if="row.hasLoad">
+                                            <div class="source-font">CPU: {{ row.cpuPercent.toFixed(2) }}%</div>
+                                            <div class="float-left source-font">
+                                                {{ $t('monitor.memory') }}: {{ row.memoryPercent.toFixed(2) }}%
+                                            </div>
+                                            <el-popover placement="right" width="500px" class="float-right">
+                                                <template #reference>
+                                                    <svg-icon iconName="p-xiangqing" class="svg-icon"></svg-icon>
+                                                </template>
+                                                <template #default>
+                                                    <el-descriptions
+                                                        direction="vertical"
+                                                        border
+                                                        :column="3"
+                                                        size="small"
+                                                    >
+                                                        <el-descriptions-item :label="$t('container.cpuUsage')">
+                                                            {{ computeCPU(row.cpuTotalUsage) }}
+                                                        </el-descriptions-item>
+                                                        <el-descriptions-item :label="$t('container.cpuTotal')">
+                                                            {{ computeCPU(row.systemUsage) }}
+                                                        </el-descriptions-item>
+                                                        <el-descriptions-item :label="$t('container.core')">
+                                                            {{ row.percpuUsage }}
+                                                        </el-descriptions-item>
+
+                                                        <el-descriptions-item :label="$t('container.memUsage')">
+                                                            {{ computeSizeForDocker(row.memoryUsage) }}
+                                                        </el-descriptions-item>
+                                                        <el-descriptions-item :label="$t('container.memCache')">
+                                                            {{ computeSizeForDocker(row.memoryCache) }}
+                                                        </el-descriptions-item>
+                                                        <el-descriptions-item :label="$t('container.memTotal')">
+                                                            {{ computeSizeForDocker(row.memoryLimit) }}
+                                                        </el-descriptions-item>
+
+                                                        <el-descriptions-item>
+                                                            <template #label>
+                                                                {{ $t('container.sizeRw') }}
+                                                                <el-tooltip :content="$t('container.sizeRwHelper')">
+                                                                    <el-icon class="icon-item"><InfoFilled /></el-icon>
+                                                                </el-tooltip>
+                                                            </template>
+                                                            {{ computeSize2(row.sizeRw) }}
+                                                        </el-descriptions-item>
+                                                        <el-descriptions-item :label="$t('container.sizeRootFs')">
+                                                            <template #label>
+                                                                {{ $t('container.sizeRootFs') }}
+                                                                <el-tooltip :content="$t('container.sizeRootFsHelper')">
+                                                                    <el-icon class="icon-item"><InfoFilled /></el-icon>
+                                                                </el-tooltip>
+                                                            </template>
+                                                            {{ computeSize2(row.sizeRootFs) }}
+                                                        </el-descriptions-item>
+                                                    </el-descriptions>
+                                                </template>
+                                            </el-popover>
+                                        </div>
+                                        <div v-if="!row.hasLoad">
+                                            <el-button link loading></el-button>
+                                        </div>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column :label="$t('commons.table.operate')" width="180" fixed="right">
+                                    <template #default="{ row }">
+                                        <el-button type="primary" link @click="onOpenTerminal(row)">
+                                            {{ $t('menu.terminal') }}
+                                        </el-button>
+                                        <el-button type="primary" link @click="onOpenLog(row)">
+                                            {{ $t('commons.button.log') }}
+                                        </el-button>
+                                    </template>
+                                </el-table-column>
+                            </el-table>
+
+                            <el-radio-group size="small" 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>
+                            <el-form ref="formRef" v-show="showType === 'compose'" @submit.prevent label-position="top">
+                                <CodemirrorPro
+                                    v-model="composeContent"
+                                    mode="yaml"
+                                    :heightDiff="475"
+                                    placeholder="#Define or paste the content of your docker-compose file here"
+                                />
+                                <div v-if="currentCompose.createdBy === '1Panel'">
+                                    <el-form-item :label="$t('container.env')" prop="environmentStr">
+                                        <el-input
+                                            type="textarea"
+                                            :placeholder="$t('container.tagHelper')"
+                                            :rows="3"
+                                            v-model="envStr"
+                                        />
+                                    </el-form-item>
+                                    <span class="input-help whitespace-break-spaces">
+                                        {{ $t('container.editComposeHelper') }}
+                                    </span>
+                                    <CodemirrorPro
+                                        v-model="env"
+                                        :height="45"
+                                        :minHeight="45"
+                                        disabled
+                                        mode="yaml"
+                                    ></CodemirrorPro>
                                 </div>
-                            </el-popover>
-                        </template>
-                    </el-table-column>
-                    <el-table-column :label="$t('commons.table.createdAt')" prop="createdAt" min-width="80" fix />
-                    <fu-table-operations
-                        width="200px"
-                        :ellipsis="2"
-                        :buttons="buttons"
-                        :label="$t('commons.table.operate')"
-                        fix
-                    />
-                </ComplexTable>
+                                <el-button type="primary" class="float-right" @click="onSubmitEdit">
+                                    {{ $t('commons.button.save') }}
+                                </el-button>
+                            </el-form>
+
+                            <div v-show="showType === 'log'">
+                                <ContainerLog
+                                    :key="currentCompose.path"
+                                    :compose="currentCompose.path"
+                                    :highlightDiff="450"
+                                    :defaultFollow="true"
+                                />
+                            </div>
+                        </el-card>
+                    </el-col>
+                </el-row>
+                <el-empty v-else :description="$t('commons.msg.noneData')" />
             </template>
         </LayoutContent>
 
-        <ComposeLogs ref="composeLogRef" />
-        <EditDialog ref="dialogEditRef" @search="search" />
-        <CreateDialog @search="search" ref="dialogRef" />
-        <DeleteDialog @search="search" ref="dialogDelRef" />
+        <CreateDialog @search="search" ref="dialogCreateRef" />
+        <DeleteDialog @search="search(true)" ref="dialogDelRef" />
+        <ContainerInspectDialog ref="containerInspectRef" />
+        <TerminalDialog ref="terminalDialogRef" />
+        <ContainerLogDialog ref="containerLogDialogRef" :highlightDiff="210" />
     </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
-import EditDialog from '@/views/container/compose/edit/index.vue';
+import { computed, ref } from 'vue';
+import CodemirrorPro from '@/components/codemirror-pro/index.vue';
+import ContainerLog from '@/components/log/container/index.vue';
+import ContainerInspectDialog from '@/views/container/container/inspect/index.vue';
+import TerminalDialog from '@/views/container/container/terminal/index.vue';
+import ContainerLogDialog from '@/components/log/container-drawer/index.vue';
 import CreateDialog from '@/views/container/compose/create/index.vue';
 import DeleteDialog from '@/views/container/compose/delete/index.vue';
-import ComposeLogs from '@/components/log/compose/index.vue';
-import { composeOperator, inspect, searchCompose } from '@/api/modules/container';
+import { composeOperator, composeUpdate, containerListStats, inspect, searchCompose } from '@/api/modules/container';
 import DockerStatus from '@/views/container/docker-status/index.vue';
 import i18n from '@/lang';
 import { Container } from '@/api/interface/container';
-import { routerToFileWithPath, routerToNameWithQuery } from '@/utils/router';
+import { routerToFileWithPath } from '@/utils/router';
 import { MsgSuccess } from '@/utils/message';
+import { computeCPU, computeSize2, computeSizeForDocker } from '@/utils/util';
+import { Search } from '@element-plus/icons-vue';
 
-const data = ref();
-const selects = ref<any>([]);
+const data = ref<any[]>([]);
 const loading = ref(false);
+const detailLoading = ref(false);
+const currentCompose = ref<Container.ComposeInfo | null>(null);
+const composeContainers = ref([]);
+const composeContent = ref('');
+const envStr = ref('');
+const env = ref('env_file:\n  - 1panel.env');
 
-const paginationConfig = reactive({
-    cacheSizeKey: 'container-compose-page-size',
-    currentPage: 1,
-    pageSize: Number(localStorage.getItem('container-compose-page-size')) || 20,
-    total: 0,
-});
-const searchName = ref();
+const dialogCreateRef = ref();
+const dialogDelRef = ref();
+const containerInspectRef = ref();
+const terminalDialogRef = ref();
+const containerLogDialogRef = ref();
 
-const composeLogRef = ref();
+const searchName = ref('');
+const showType = ref('compose');
+const containerStats = ref<any[]>([]);
 
 const isActive = ref(false);
 const isExist = ref(false);
 
-const toComposeFolder = async (row: Container.ComposeInfo) => {
-    routerToFileWithPath(row.workdir);
+const tableData = computed(() => {
+    return composeContainers.value.map((container) => {
+        const stats = containerStats.value.find((s) => s.containerID === container.containerID);
+        return {
+            ...container,
+            hasLoad: !!stats,
+            cpuPercent: stats?.cpuPercent || 0,
+            memoryPercent: stats?.memoryPercent || 0,
+            cpuTotalUsage: stats?.cpuTotalUsage || 0,
+            systemUsage: stats?.systemUsage || 0,
+            percpuUsage: stats?.percpuUsage || 0,
+            memoryCache: stats?.memoryCache || 0,
+            memoryUsage: stats?.memoryUsage || 0,
+            memoryLimit: stats?.memoryLimit || 0,
+            sizeRw: stats?.sizeRw || 0,
+            sizeRootFs: stats?.sizeRootFs || 0,
+        };
+    });
+});
+
+const loadFrom = (row: any) => {
+    switch (row.createdBy) {
+        case '1Panel':
+            return '1Panel';
+        case 'Apps':
+            return i18n.global.t('menu.apps');
+        default:
+            return i18n.global.t('commons.table.local');
+    }
 };
 
-const search = async () => {
+const search = async (withRefreshDetail?: boolean) => {
     if (!isActive.value || !isExist.value) {
         return;
     }
     let params = {
         info: searchName.value,
-        page: paginationConfig.currentPage,
-        pageSize: paginationConfig.pageSize,
+        page: 1,
+        pageSize: 100,
     };
     loading.value = true;
     await searchCompose(params)
         .then((res) => {
             loading.value = false;
             data.value = res.data.items || [];
-            paginationConfig.total = res.data.total;
+            if (data.value.length > 0 && withRefreshDetail) {
+                loadDetail(data.value[0], true);
+            }
         })
         .finally(() => {
             loading.value = false;
         });
 };
 
-const loadDetail = async (row: Container.ComposeInfo) => {
-    routerToNameWithQuery('ContainerItem', { filters: 'com.docker.compose.project=' + row.name });
+const loadDetail = async (row: Container.ComposeInfo, withRefresh: boolean) => {
+    if (currentCompose.value?.name === row.name && withRefresh !== true) {
+        return;
+    }
+    detailLoading.value = true;
+    currentCompose.value = row;
+    composeContainers.value = row.containers || [];
+    await inspect({ id: currentCompose.value.name, type: 'compose' }).then((res) => {
+        composeContent.value = res.data;
+        detailLoading.value = false;
+    });
+    loadContainerStats();
 };
 
-const dialogRef = ref();
-const onOpenDialog = async () => {
-    dialogRef.value!.acceptParams();
+const loadContainerStats = async () => {
+    try {
+        const res = await containerListStats();
+        containerStats.value = res.data || [];
+    } catch (error) {
+        containerStats.value = [];
+    }
 };
 
-const dialogDelRef = ref();
-const onDelete = async (row: Container.ComposeInfo) => {
-    const param = {
-        name: row.name,
-        path: row.path,
-    };
-    dialogDelRef.value.acceptParams(param);
+const onOpenDialog = async () => {
+    dialogCreateRef.value!.acceptParams();
 };
 
-const dialogEditRef = ref();
-const onEdit = async (row: Container.ComposeInfo) => {
-    const res = await inspect({ id: row.name, type: 'compose' });
-    let params = {
+const onDelete = (row: any) => {
+    dialogDelRef.value.acceptParams({
         name: row.name,
         path: row.path,
-        content: res.data,
-        env: row.env,
-        createdBy: row.createdBy,
-    };
-    dialogEditRef.value!.acceptParams(params);
+    });
 };
 
-const onComposeOperate = async (operation: string, row: any) => {
-    let mes =
-        operation === 'down'
-            ? i18n.global.t('container.composeDownHelper', [row.name])
-            : i18n.global.t('container.composeOperatorHelper', [
-                  row.name,
-                  i18n.global.t('commons.operate.' + operation),
-              ]);
+const handleComposeOperate = async (operation: 'up' | 'stop' | 'restart', row: any) => {
+    const mes = i18n.global.t('container.composeOperatorHelper', [
+        row.name,
+        i18n.global.t('commons.operate.' + operation),
+    ]);
     ElMessageBox.confirm(mes, i18n.global.t('commons.operate.' + operation), {
         confirmButtonText: i18n.global.t('commons.button.confirm'),
         cancelButtonText: i18n.global.t('commons.button.cancel'),
         type: 'info',
     }).then(async () => {
-        let params = {
+        loading.value = true;
+        const params = {
             name: row.name,
-            path: row.path,
+            path: currentCompose.value.path,
             operation: operation,
             withFile: false,
             force: false,
         };
-        loading.value = true;
         await composeOperator(params)
             .then(() => {
-                loading.value = false;
                 MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
                 search();
+                if (row.name === currentCompose.value?.name) {
+                    loadDetail(currentCompose.value, true);
+                }
             })
-            .catch(() => {
+            .finally(() => {
                 loading.value = false;
             });
     });
 };
 
-const openLog = (row: any) => {
-    composeLogRef.value.acceptParams({
-        compose: row.path,
-        resource: row.name,
-        container: row.container,
-    });
+const onSubmitEdit = async () => {
+    const param = {
+        name: currentCompose.value.name,
+        path: currentCompose.value.path,
+        content: composeContent.value,
+        createdBy: currentCompose.value.createdBy,
+        env: envStr.value ? envStr.value.split('\n') : [],
+    };
+    loading.value = true;
+    await composeUpdate(param)
+        .then(async () => {
+            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+            await loadDetail(currentCompose.value, true);
+        })
+        .finally(() => {
+            loading.value = false;
+        });
 };
 
-const buttons = [
-    {
-        label: i18n.global.t('commons.button.edit'),
-        click: (row: Container.ComposeInfo) => {
-            onEdit(row);
-        },
-        disabled: (row: any) => {
-            return row.createdBy === 'Local';
-        },
-    },
-    {
-        label: i18n.global.t('commons.button.log'),
-        click: (row: Container.ComposeInfo) => {
-            openLog(row);
-        },
-    },
-    {
-        label: i18n.global.t('commons.operate.start'),
-        click: (row: Container.ComposeInfo) => {
-            onComposeOperate('up', row);
-        },
-    },
-    {
-        label: i18n.global.t('commons.operate.stop'),
-        click: (row: Container.ComposeInfo) => {
-            onComposeOperate('stop', row);
-        },
-    },
-    {
-        label: i18n.global.t('commons.operate.restart'),
-        click: (row: Container.ComposeInfo) => {
-            onComposeOperate('restart', row);
-        },
-    },
-    {
-        label: i18n.global.t('commons.operate.delete'),
-        click: (row: Container.ComposeInfo) => {
-            onDelete(row);
-        },
-        disabled: (row: any) => {
-            return row.createdBy !== '1Panel';
-        },
-    },
-];
+const openComposeFolder = () => {
+    if (currentCompose.value?.workdir) {
+        routerToFileWithPath(currentCompose.value.workdir);
+    }
+};
+const onInspectContainer = async (item: any) => {
+    if (!item.containerID) {
+        return;
+    }
+    const res = await inspect({ id: item.containerID, type: 'container' });
+    containerInspectRef.value!.acceptParams({ data: res.data, ports: item.ports || [] });
+};
+const onOpenTerminal = (row: any) => {
+    if (!row.containerID) {
+        return;
+    }
+    const title = i18n.global.t('menu.container') + ' ' + row.name;
+    terminalDialogRef.value?.acceptParams({ containerID: row.containerID, title });
+};
+const onOpenLog = (row: any) => {
+    containerLogDialogRef.value?.acceptParams({ container: row.name });
+};
 </script>
+
+<style scoped lang="scss">
+.svg-icon {
+    margin-top: -3px;
+    font-size: 6px;
+    cursor: pointer;
+}
+</style>
diff --git a/frontend/src/views/container/container/inspect/index.vue b/frontend/src/views/container/container/inspect/index.vue
index 4da5765b2501..b0b62be13a77 100644
--- a/frontend/src/views/container/container/inspect/index.vue
+++ b/frontend/src/views/container/container/inspect/index.vue
@@ -192,6 +192,10 @@ const acceptParams = (props: DialogProps): void => {
             inspectData.value = props.data;
         }
         rawJson.value = JSON.stringify(inspectData.value, null, 2);
+
+        if (!ports.value.length) {
+            ports.value = Object.keys(inspectData.value?.Config?.ExposedPorts || {});
+        }
     } catch (e) {
         console.error('Failed to parse inspect data:', e);
     }