feat: The container-compose module is adapted for Docker Compose. (#9536)

agent/app/service/container_compose.go

@@ -5,7 +5,6 @@ import (
 	"errors"
 	"fmt"
 	"os"
-	"os/exec"
 	"path"
 	"sort"
 	"strings"
@@ -174,7 +173,7 @@ func (u *ContainerService) TestCompose(req dto.ComposeCreate) (bool, error) {
 	if err := newComposeEnv(req.Path, req.Env); err != nil {
 		return false, err
 	}
-	cmd := exec.Command("docker", "compose", "-f", req.Path, "config")
+	cmd := getComposeCmd(req.Path, "config")
 	stdout, err := cmd.CombinedOutput()
 	if err != nil {
 		return false, errors.New(string(stdout))
@@ -201,7 +200,7 @@ func (u *ContainerService) CreateCompose(req dto.ComposeCreate) error {
 	}
 	go func() {
 		taskItem.AddSubTask(i18n.GetMsgByKey("ComposeCreate"), func(t *task.Task) error {
-			cmd := exec.Command("docker", "compose", "-f", req.Path, "up", "-d")
+			cmd := getComposeCmd(req.Path, "up")
 			out, err := cmd.CombinedOutput()
 			taskItem.Log(i18n.GetWithName("ComposeCreateRes", string(out)))
 			if err != nil {

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

@@ -1,12 +1,12 @@
 <template>
     <div v-loading="loading">
-        <div class="app-content" style="margin-top: 20px">
-            <el-card class="app-card">
-                <el-row :gutter="20">
-                    <div>
+        <div class="app-status card-interval">
+            <el-card>
+                <el-row :gutter="20" class="items-center">
+                    <div class="ml-5">
                         <el-tag effect="dark" type="success">{{ composeName }}</el-tag>
                     </div>
-                    <div v-if="createdBy === '1Panel'" style="margin-left: 50px">
+                    <div v-if="createdBy === '1Panel'" class="ml-10">
                         <el-button link type="primary" @click="onComposeOperate('up')">
                             {{ $t('commons.operate.start') }}
                         </el-button>
@@ -32,7 +32,7 @@
             </el-card>
         </div>
         <LayoutContent
-            style="margin-top: 30px"
+            style="margin-top: 10px"
             back-name="Compose"
             :title="$t('container.containerList')"
             :reload="true"
@@ -335,11 +335,6 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.app-card {
-    font-size: 14px;
-    height: 60px;
-}
-
 .app-content {
     height: 50px;
 }

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

@@ -3,7 +3,6 @@
         <div v-show="isOnDetail">
             <ComposeDetail ref="composeDetailRef" />
         </div>
-
         <docker-status
             v-model:isActive="isActive"
             v-model:isExist="isExist"