feat: 容器编排显示容器状态，编排模板样式优化 (#6534)

Refs #4404

frontend/src/lang/modules/en.ts

@@ -783,6 +783,7 @@ const message = {
         content: 'Content',
         contentEmpty: 'Compose content cannot be empty, please enter and try again!',
         containerNumber: 'Container number',
+        containerStatus: 'Container Status',
         down: 'Down',
         up: 'Up',
         composeDetailHelper:

frontend/src/lang/modules/tw.ts

@@ -752,6 +752,7 @@ const message = {
         content: '內容',
         contentEmpty: '編排內容不能為空，請輸入後重試！',
         containerNumber: '容器數量',
+        containerStatus: '容器狀態',
         down: '刪除',
         up: '啟動',
         composeDetailHelper: '該 compose 為 1Panel 編排外部創建。暫不支持啟停操作。',

frontend/src/lang/modules/zh.ts

@@ -755,6 +755,7 @@ const message = {
         content: '内容',
         contentEmpty: '编排内容不能为空，请输入后重试！',
         containerNumber: '容器数量',
+        containerStatus: '容器状态',
         down: '删除',
         up: '启动',
         composeDetailHelper: '该 compose 为 1Panel 编排外部创建。暂不支持启停操作。',

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

@@ -64,12 +64,13 @@
                             <span v-if="row.createdBy === '1Panel'">1Panel</span>
                         </template>
                     </el-table-column>
-                    <el-table-column
-                        :label="$t('container.containerNumber')"
-                        prop="containerNumber"
-                        min-width="80"
-                        fix
-                    />
+                    <el-table-column :label="$t('container.containerStatus')" min-width="80" fix>
+                        <template #default="scope">
+                            <div>
+                                {{ getContainerStatus(scope.row.containers) }}
+                            </div>
+                        </template>
+                    </el-table-column>
                     <el-table-column :label="$t('commons.table.createdAt')" prop="createdAt" min-width="80" fix />
                     <fu-table-operations
                         width="200px"
@@ -173,6 +174,17 @@ const loadDetail = async (row: Container.ComposeInfo) => {
     isOnDetail.value = true;
     composeDetailRef.value!.acceptParams(params);
 };
+const getContainerStatus = (containers) => {
+    const safeContainers = containers || [];
+    const runningCount = safeContainers.filter((container) => container.state.toLowerCase() === 'running').length;
+    const totalCount = safeContainers.length;
+    const statusText = runningCount > 0 ? 'Running' : 'Exited';
+    if (statusText === 'Exited') {
+        return `${statusText}`;
+    } else {
+        return `${statusText} (${runningCount}/${totalCount})`;
+    }
+};
 const backList = async () => {
     isOnDetail.value = false;
     search();

frontend/src/views/container/template/detail/index.vue

@@ -7,9 +7,7 @@
         size="50%"
     >
         <template #header>
-            <div class="card-header">
-                <span>{{ $t('commons.button.view') }}</span>
-            </div>
+            <DrawerHeader :header="$t('commons.button.view')" :back="handleClose" />
         </template>
         <codemirror
             :autofocus="true"
@@ -38,6 +36,7 @@ import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { ref } from 'vue';
 import { Codemirror } from 'vue-codemirror';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 const extensions = [javascript(), oneDark];
 
 const detailVisible = ref(false);
@@ -51,6 +50,10 @@ const acceptParams = (params: DialogProps): void => {
     detailVisible.value = true;
 };
 
+const handleClose = () => {
+    detailVisible.value = false;
+};
+
 defineExpose({
     acceptParams,
 });