flx: 修复会默认出现水平滚动条的问题 (#6564)

This reverts commit 7f06c7e92e.

backend/app/dto/container.go

@@ -116,7 +116,7 @@ type PortHelper struct {
 
 type ContainerOperation struct {
 	Names     []string `json:"names" validate:"required"`
-	Operation string   `json:"operation" validate:"required,oneof=start stop restart kill pause unpause remove"`
+	Operation string   `json:"operation" validate:"required,oneof=up start stop restart kill pause unpause remove"`
 }
 
 type ContainerRename struct {
@@ -208,22 +208,24 @@ type ComposeContainer struct {
 	State       string `json:"state"`
 }
 type ComposeCreate struct {
-	Name     string `json:"name"`
-	From     string `json:"from" validate:"required,oneof=edit path template"`
-	File     string `json:"file"`
-	Path     string `json:"path"`
-	Template uint   `json:"template"`
+	Name     string   `json:"name"`
+	From     string   `json:"from" validate:"required,oneof=edit path template"`
+	File     string   `json:"file"`
+	Path     string   `json:"path"`
+	Template uint     `json:"template"`
+	Env      []string `json:"env"`
 }
 type ComposeOperation struct {
 	Name      string `json:"name" validate:"required"`
 	Path      string `json:"path" validate:"required"`
-	Operation string `json:"operation" validate:"required,oneof=start stop down"`
+	Operation string `json:"operation" validate:"required,oneof=up start stop down"`
 	WithFile  bool   `json:"withFile"`
 }
 type ComposeUpdate struct {
-	Name    string `json:"name" validate:"required"`
-	Path    string `json:"path" validate:"required"`
-	Content string `json:"content" validate:"required"`
+	Name    string   `json:"name" validate:"required"`
+	Path    string   `json:"path" validate:"required"`
+	Content string   `json:"content" validate:"required"`
+	Env     []string `json:"env"`
 }
 
 type ContainerLog struct {

backend/app/model/compose_template.go

@@ -12,4 +12,5 @@ type Compose struct {
 	BaseModel
 
 	Name string `gorm:"type:varchar(256)" json:"name"`
+	Path string `gorm:"type:varchar(256)" json:"path"`
 }

backend/app/repo/compose_template.go

@@ -19,6 +19,7 @@ type IComposeTemplateRepo interface {
 	CreateRecord(compose *model.Compose) error
 	DeleteRecord(opts ...DBOption) error
 	ListRecord() ([]model.Compose, error)
+	UpdateRecord(name string, vars map[string]interface{}) error
 }
 
 func NewIComposeTemplateRepo() IComposeTemplateRepo {
@@ -102,3 +103,7 @@ func (u *ComposeTemplateRepo) DeleteRecord(opts ...DBOption) error {
 	}
 	return db.Delete(&model.Compose{}).Error
 }
+
+func (u *ComposeTemplateRepo) UpdateRecord(name string, vars map[string]interface{}) error {
+	return global.DB.Model(&model.Compose{}).Where("name = ?", name).Updates(vars).Error
+}

backend/app/service/container.go

@@ -898,6 +898,10 @@ func (u *ContainerService) LoadContainerLogs(req dto.OperationWithNameAndType) s
 				break
 			}
 		}
+		if len(containers) == 0 {
+			composeItem, _ := composeRepo.GetRecord(commonRepo.WithByName(req.Name))
+			filePath = composeItem.Path
+		}
 	}
 	if _, err := os.Stat(filePath); err != nil {
 		return ""

backend/app/service/container_compose.go

@@ -4,7 +4,9 @@ import (
 	"bufio"
 	"errors"
 	"fmt"
+	"gopkg.in/yaml.v3"
 	"io"
+	"io/ioutil"
 	"os"
 	"os/exec"
 	"path"
@@ -31,6 +33,12 @@ const composeConfigLabel = "com.docker.compose.project.config_files"
 const composeWorkdirLabel = "com.docker.compose.project.working_dir"
 const composeCreatedBy = "createdBy"
 
+type DockerCompose struct {
+	Version  string                            `yaml:"version"`
+	Services map[string]map[string]interface{} `yaml:"services"`
+	Networks map[string]interface{}            `yaml:"networks"`
+}
+
 func (u *ContainerService) PageCompose(req dto.SearchWithPage) (int64, interface{}, error) {
 	var (
 		records   []dto.ComposeInfo
@@ -52,6 +60,20 @@ func (u *ContainerService) PageCompose(req dto.SearchWithPage) (int64, interface
 	}
 
 	composeCreatedByLocal, _ := composeRepo.ListRecord()
+
+	composeLocalMap := make(map[string]dto.ComposeInfo)
+	for _, localItem := range composeCreatedByLocal {
+		composeItemLocal := dto.ComposeInfo{
+			ContainerNumber: 0,
+			CreatedAt:       localItem.CreatedAt.Format(constant.DateTimeLayout),
+			ConfigFile:      localItem.Path,
+			Workdir:         strings.TrimSuffix(localItem.Path, "/docker-compose.yml"),
+		}
+		composeItemLocal.CreatedBy = "1Panel"
+		composeItemLocal.Path = localItem.Path
+		composeLocalMap[localItem.Name] = composeItemLocal
+	}
+
 	composeMap := make(map[string]dto.ComposeInfo)
 	for _, container := range list {
 		if name, ok := container.Labels[composeProjectLabel]; ok {
@@ -95,12 +117,24 @@ func (u *ContainerService) PageCompose(req dto.SearchWithPage) (int64, interface
 			}
 		}
 	}
-	for _, item := range composeCreatedByLocal {
-		if err := composeRepo.DeleteRecord(commonRepo.WithByID(item.ID)); err != nil {
-			global.LOG.Error(err)
+
+	mergedMap := make(map[string]dto.ComposeInfo)
+	for key, localItem := range composeLocalMap {
+		mergedMap[key] = localItem
+	}
+	for key, item := range composeMap {
+		if existingItem, exists := mergedMap[key]; exists {
+			if item.ContainerNumber > 0 {
+				if existingItem.ContainerNumber <= 0 {
+					mergedMap[key] = item
+				}
+			}
+		} else {
+			mergedMap[key] = item
 		}
 	}
-	for key, value := range composeMap {
+
+	for key, value := range mergedMap {
 		value.Name = key
 		records = append(records, value)
 	}
@@ -149,6 +183,59 @@ func (u *ContainerService) TestCompose(req dto.ComposeCreate) (bool, error) {
 	return true, nil
 }
 
+func formatYAML(data []byte) []byte {
+	return []byte(strings.ReplaceAll(string(data), "\t", "  "))
+}
+
+func updateDockerComposeWithEnv(req dto.ComposeCreate) error {
+	data, err := ioutil.ReadFile(req.Path)
+	if err != nil {
+		return fmt.Errorf("failed to read docker-compose.yml: %v", err)
+	}
+	var composeItem DockerCompose
+	if err := yaml.Unmarshal(data, &composeItem); err != nil {
+		return fmt.Errorf("failed to parse docker-compose.yml: %v", err)
+	}
+	for serviceName, service := range composeItem.Services {
+		envMap := make(map[string]string)
+		if existingEnv, exists := service["environment"].([]interface{}); exists {
+			for _, env := range existingEnv {
+				envStr := env.(string)
+				parts := strings.SplitN(envStr, "=", 2)
+				if len(parts) == 2 {
+					envMap[parts[0]] = parts[1]
+				}
+			}
+		}
+		for _, env := range req.Env {
+			parts := strings.SplitN(env, "=", 2)
+			if len(parts) == 2 {
+				envMap[parts[0]] = parts[1]
+			}
+		}
+		envVars := []string{}
+		for key, value := range envMap {
+			envVars = append(envVars, key+"="+value)
+		}
+		service["environment"] = envVars
+		composeItem.Services[serviceName] = service
+	}
+	if composeItem.Networks != nil {
+		for key := range composeItem.Networks {
+			composeItem.Networks[key] = map[string]interface{}{}
+		}
+	}
+	newData, err := yaml.Marshal(&composeItem)
+	if err != nil {
+		return fmt.Errorf("failed to marshal docker-compose.yml: %v", err)
+	}
+	formattedData := formatYAML(newData)
+	if err := ioutil.WriteFile(req.Path, formattedData, 0644); err != nil {
+		return fmt.Errorf("failed to write docker-compose.yml: %v", err)
+	}
+	return nil
+}
+
 func (u *ContainerService) CreateCompose(req dto.ComposeCreate) (string, error) {
 	if cmd.CheckIllegal(req.Name, req.Path) {
 		return "", buserr.New(constant.ErrCmdIllegal)
@@ -173,6 +260,12 @@ func (u *ContainerService) CreateCompose(req dto.ComposeCreate) (string, error)
 	if err != nil {
 		return "", err
 	}
+	if len(req.Env) > 0 {
+		if err := updateDockerComposeWithEnv(req); err != nil {
+			fmt.Printf("failed to update docker-compose.yml with env: %v\n", err)
+			return "", err
+		}
+	}
 	go func() {
 		defer file.Close()
 		cmd := exec.Command("docker-compose", "-f", req.Path, "up", "-d")
@@ -186,7 +279,7 @@ func (u *ContainerService) CreateCompose(req dto.ComposeCreate) (string, error)
 			return
 		}
 		global.LOG.Infof("docker-compose up %s successful!", req.Name)
-		_ = composeRepo.CreateRecord(&model.Compose{Name: req.Name})
+		_ = composeRepo.CreateRecord(&model.Compose{Name: req.Name, Path: req.Path})
 		_, _ = file.WriteString("docker-compose up successful!")
 	}()
 
@@ -200,20 +293,87 @@ func (u *ContainerService) ComposeOperation(req dto.ComposeOperation) error {
 	if _, err := os.Stat(req.Path); err != nil {
 		return fmt.Errorf("load file with path %s failed, %v", req.Path, err)
 	}
-	if stdout, err := compose.Operate(req.Path, req.Operation); err != nil {
-		return errors.New(string(stdout))
+	if req.Operation == "up" {
+		if stdout, err := compose.Up(req.Path); err != nil {
+			return errors.New(string(stdout))
+		}
+	} else {
+		if stdout, err := compose.Operate(req.Path, req.Operation); err != nil {
+			return errors.New(string(stdout))
+		}
 	}
 	global.LOG.Infof("docker-compose %s %s successful", req.Operation, req.Name)
 	if req.Operation == "down" {
-		_ = composeRepo.DeleteRecord(commonRepo.WithByName(req.Name))
 		if req.WithFile {
+			_ = composeRepo.DeleteRecord(commonRepo.WithByName(req.Name))
 			_ = os.RemoveAll(path.Dir(req.Path))
+		} else {
+			composeItem, _ := composeRepo.GetRecord(commonRepo.WithByName(req.Name))
+			if composeItem.Path == "" {
+				upMap := make(map[string]interface{})
+				upMap["path"] = req.Path
+				_ = composeRepo.UpdateRecord(req.Name, upMap)
+			}
 		}
 	}
 
 	return nil
 }
 
+func updateComposeWithEnv(req dto.ComposeUpdate) error {
+	var composeItem DockerCompose
+	if err := yaml.Unmarshal([]byte(req.Content), &composeItem); err != nil {
+		return fmt.Errorf("failed to parse docker-compose content: %v", err)
+	}
+	for serviceName, service := range composeItem.Services {
+		envMap := make(map[string]string)
+		for _, env := range req.Env {
+			parts := strings.SplitN(env, "=", 2)
+			if len(parts) == 2 {
+				envMap[parts[0]] = parts[1]
+			}
+		}
+		newEnvVars := []string{}
+		if existingEnv, exists := service["environment"].([]interface{}); exists {
+			for _, env := range existingEnv {
+				envStr := env.(string)
+				parts := strings.SplitN(envStr, "=", 2)
+				if len(parts) == 2 {
+					key := parts[0]
+					if value, found := envMap[key]; found {
+						newEnvVars = append(newEnvVars, key+"="+value)
+						delete(envMap, key)
+					} else {
+						newEnvVars = append(newEnvVars, envStr)
+					}
+				}
+			}
+		}
+		for key, value := range envMap {
+			newEnvVars = append(newEnvVars, key+"="+value)
+		}
+		if len(newEnvVars) > 0 {
+			service["environment"] = newEnvVars
+		} else {
+			delete(service, "environment")
+		}
+		composeItem.Services[serviceName] = service
+	}
+	if composeItem.Networks != nil {
+		for key := range composeItem.Networks {
+			composeItem.Networks[key] = map[string]interface{}{}
+		}
+	}
+	newData, err := yaml.Marshal(&composeItem)
+	if err != nil {
+		return fmt.Errorf("failed to marshal docker-compose.yml: %v", err)
+	}
+	if err := ioutil.WriteFile(req.Path, newData, 0644); err != nil {
+		return fmt.Errorf("failed to write docker-compose.yml to path: %v", err)
+	}
+	return nil
+}
+
 func (u *ContainerService) ComposeUpdate(req dto.ComposeUpdate) error {
 	if cmd.CheckIllegal(req.Name, req.Path) {
 		return buserr.New(constant.ErrCmdIllegal)
@@ -222,16 +382,21 @@ func (u *ContainerService) ComposeUpdate(req dto.ComposeUpdate) error {
 	if err != nil {
 		return fmt.Errorf("load file with path %s failed, %v", req.Path, err)
 	}
-	file, err := os.OpenFile(req.Path, os.O_WRONLY|os.O_TRUNC, 0640)
-	if err != nil {
-		return err
+	if len(req.Env) > 0 {
+		if err := updateComposeWithEnv(req); err != nil {
+			return fmt.Errorf("failed to update docker-compose with env: %v", err)
+		}
+	} else {
+		file, err := os.OpenFile(req.Path, os.O_WRONLY|os.O_TRUNC, 0640)
+		if err != nil {
+			return err
+		}
+		defer file.Close()
+		write := bufio.NewWriter(file)
+		_, _ = write.WriteString(req.Content)
+		write.Flush()
+		global.LOG.Infof("docker-compose.yml %s has been replaced", req.Path)
 	}
-	defer file.Close()
-	write := bufio.NewWriter(file)
-	_, _ = write.WriteString(req.Content)
-	write.Flush()
-
-	global.LOG.Infof("docker-compose.yml %s has been replaced, now start to docker-compose restart", req.Path)
 	if stdout, err := compose.Up(req.Path); err != nil {
 		if err := recreateCompose(string(oldFile), req.Path); err != nil {
 			return fmt.Errorf("update failed when handle compose up, err: %s, recreate failed: %v", string(stdout), err)

backend/app/service/docker.go

@@ -10,8 +10,10 @@ import (
 
 	"github.com/1Panel-dev/1Panel/backend/app/dto"
 	"github.com/1Panel-dev/1Panel/backend/constant"
+	"github.com/1Panel-dev/1Panel/backend/global"
 	"github.com/1Panel-dev/1Panel/backend/utils/cmd"
 	"github.com/1Panel-dev/1Panel/backend/utils/docker"
+	"github.com/1Panel-dev/1Panel/backend/utils/systemctl"
 	"github.com/pkg/errors"
 )
 
@@ -336,8 +338,15 @@ func (u *DockerService) UpdateConfByFile(req dto.DaemonJsonUpdateByFile) error {
 
 func (u *DockerService) OperateDocker(req dto.DockerOperation) error {
 	service := "docker"
+	sudo := cmd.SudoHandleCmd()
 	if req.Operation == "stop" {
-		service = "docker.socket"
+		isSocketActive, _ := systemctl.IsActive("docker.socket")
+		if isSocketActive {
+			std, err := cmd.Execf("%s systemctl stop docker.socket", sudo)
+			if err != nil {
+				global.LOG.Errorf("handle systemctl stop docker.socket failed, err: %v", std)
+			}
+		}
 	}
 	stdout, err := cmd.Execf("systemctl %s %s ", req.Operation, service)
 	if err != nil {

backend/app/service/ssh.go

@@ -124,6 +124,16 @@ func (u *SSHService) OperateSSH(operation string) error {
 	if operation == "enable" || operation == "disable" {
 		serviceName += ".service"
 	}
+	if operation == "stop" {
+		isSocketActive, _ := systemctl.IsActive(serviceName + ".socket")
+		if isSocketActive {
+			std, err := cmd.Execf("%s systemctl stop %s", sudo, serviceName+".socket")
+			if err != nil {
+				global.LOG.Errorf("handle systemctl stop %s.socket failed, err: %v", serviceName, std)
+			}
+		}
+	}
+
 	stdout, err := cmd.Execf("%s systemctl %s %s", sudo, operation, serviceName)
 	if err != nil {
 		if strings.Contains(stdout, "alias name or linked unit file") {

backend/init/migration/migrate.go

@@ -94,6 +94,7 @@ func Init() {
 		migrations.AddClam,
 		migrations.AddClamStatus,
 		migrations.AddAlertMenu,
+		migrations.AddComposeColumn,
 	})
 	if err := m.Migrate(); err != nil {
 		global.LOG.Error(err)

backend/init/migration/migrations/v_1_10.go

@@ -314,3 +314,13 @@ var AddAlertMenu = &gormigrate.Migration{
 		return tx.Model(&model.Setting{}).Where("key", "XpackHideMenu").Updates(map[string]interface{}{"value": string(data)}).Error
 	},
 }
+
+var AddComposeColumn = &gormigrate.Migration{
+	ID: "20240906-add-compose-command",
+	Migrate: func(tx *gorm.DB) error {
+		if err := tx.AutoMigrate(&model.Compose{}); err != nil {
+			return err
+		}
+		return nil
+	},
+}

backend/middleware/demo_handle.go

@@ -19,6 +19,7 @@ var whiteUrlList = map[string]struct{}{
 	"/api/v1/logs/operation":      {},
 	"/api/v1/logs/login":          {},
 	"/api/v1/auth/logout":         {},
+	"/api/v1/dashboard/current":   {},
 
 	"/api/v1/apps/installed/loadport": {},
 	"/api/v1/apps/installed/check":    {},

backend/utils/cloud_storage/client/s3.go

@@ -27,12 +27,16 @@ func NewS3Client(vars map[string]interface{}) (*s3Client, error) {
 	if len(scType) == 0 {
 		scType = "Standard"
 	}
+	mode := loadParamFromVars("mode", vars)
+	if len(mode) == 0 {
+		mode = "virtual hosted"
+	}
 	sess, err := session.NewSession(&aws.Config{
 		Credentials:      credentials.NewStaticCredentials(accessKey, secretKey, ""),
 		Endpoint:         aws.String(endpoint),
 		Region:           aws.String(region),
 		DisableSSL:       aws.Bool(true),
-		S3ForcePathStyle: aws.Bool(false),
+		S3ForcePathStyle: aws.Bool(mode == "path"),
 	})
 	if err != nil {
 		return nil, err

frontend/package.json

@@ -41,7 +41,7 @@
         "highlight.js": "^11.9.0",
         "js-base64": "^3.7.7",
         "md-editor-v3": "^2.11.3",
-        "monaco-editor": "^0.51.0",
+        "monaco-editor": "^0.50.0",
         "nprogress": "^0.2.0",
         "pinia": "^2.1.7",
         "pinia-plugin-persistedstate": "^1.6.1",

frontend/src/api/interface/container.ts

@@ -254,6 +254,8 @@ export namespace Container {
         file: string;
         path: string;
         template: number;
+        env: Array<string>;
+        envStr: string;
     }
     export interface ComposeOperation {
         name: string;
@@ -265,6 +267,7 @@ export namespace Container {
         name: string;
         path: string;
         content: string;
+        env: Array<string>;
     }
 
     export interface TemplateCreate {

frontend/src/lang/modules/en.ts

@@ -654,6 +654,8 @@ const message = {
         privileged: 'Privileged',
         privilegedHelper:
             'Allows the container to perform certain privileged operations on the host, which may increase container risks. Use with caution!',
+        editComposeHelper:
+            'The environment variables manually entered in the menu will override existing variables with the same name. If they do not exist, they will be added.',
 
         upgradeHelper: 'Repository Name/Image Name: Image Version',
         upgradeWarning2:
@@ -768,8 +770,9 @@ const message = {
         composeHelper:
             'The composition created through 1Panel editor or template will be saved in the {0}/docker/compose directory.',
         deleteFile: 'Delete file',
+        allDelete: 'Permanently Delete',
         deleteComposeHelper:
-            'Delete all files in the {0} directory, including persistent files in this directory. Please proceed with caution!',
+            '1. Delete container orchestration records \n2. Delete all container orchestration files, including configuration and persistent files',
         deleteCompose: '" Delete this composition.',
         apps: 'Apps',
         local: 'Local',
@@ -781,6 +784,9 @@ const message = {
         content: 'Content',
         contentEmpty: 'Compose content cannot be empty, please enter and try again!',
         containerNumber: 'Container number',
+        containerStatus: 'Container Status',
+        exited: 'Exited',
+        running: 'Running',
         down: 'Down',
         up: 'Up',
         composeDetailHelper:
@@ -1410,6 +1416,7 @@ const message = {
         LOCAL: 'Server Disks',
         OSS: 'Ali OSS',
         S3: 'Amazon S3',
+        mode: 'Mode',
         MINIO: 'MINIO',
         SFTP: 'SFTP',
         WebDAV: 'WebDAV',

frontend/src/lang/modules/tw.ts

@@ -629,6 +629,7 @@ const message = {
         emptyUser: '為空時，將使用容器默認的用戶登錄',
         privileged: '特權模式',
         privilegedHelper: '允許容器在主機上執行某些特權操作，可能會增加容器風險，請謹慎開啟！',
+        editComposeHelper: '在菜單中手動輸入的環境變量會覆蓋原有的同名變量，若不存在則新增。',
 
         upgradeHelper: '倉庫名稱/鏡像名稱:鏡像版本',
         upgradeWarning2: '升級操作需要重建容器，任何未持久化的數據將會丟失，是否繼續？',
@@ -739,7 +740,8 @@ const message = {
         composePathHelper: '配置文件保存路徑: {0}',
         composeHelper: '通過 1Panel 編輯或者模版創建的編排，將保存在 {0}/docker/compose 路徑下',
         deleteFile: '刪除文件',
-        deleteComposeHelper: '刪除 {0} 目录下所有文件，包括該文件下的持久化文件等，請謹慎操作！',
+        allDelete: '徹底刪除',
+        deleteComposeHelper: '1. 刪除容器編排記錄 \n2. 刪除容器編排的所有文件，包括配置文件和持久化文件',
         deleteCompose: '" 刪除此編排',
         apps: '應用商店',
         local: '本地',
@@ -751,6 +753,9 @@ const message = {
         content: '內容',
         contentEmpty: '編排內容不能為空，請輸入後重試！',
         containerNumber: '容器數量',
+        containerStatus: '容器狀態',
+        exited: '已停止',
+        running: '運行中',
         down: '刪除',
         up: '啟動',
         composeDetailHelper: '該 compose 為 1Panel 編排外部創建。暫不支持啟停操作。',
@@ -1323,6 +1328,7 @@ const message = {
         LOCAL: '服務器磁盤',
         OSS: '阿裏雲 OSS',
         S3: '亞馬遜 S3 雲存儲',
+        mode: '模式',
         MINIO: 'MINIO',
         SFTP: 'SFTP',
         WebDAV: 'WebDAV',

frontend/src/lang/modules/zh.ts

@@ -632,6 +632,7 @@ const message = {
         emptyUser: '为空时，将使用容器默认的用户登录',
         privileged: '特权模式',
         privilegedHelper: '允许容器在主机上执行某些特权操作，可能会增加容器风险，谨慎开启！',
+        editComposeHelper: '菜单中手动输入的环境变量会覆盖原有的同名变量，如果不存在则新增',
 
         upgradeHelper: '仓库名称/镜像名称:镜像版本',
         upgradeWarning2: '升级操作需要重建容器，任何未持久化的数据将会丢失，是否继续？',
@@ -736,13 +737,13 @@ const message = {
         mirrorHelper:
             '当存在多个加速器时，需要换行显示，例： \nhttp://xxxxxx.m.daocloud.io \nhttps://xxxxxx.mirror.aliyuncs.com',
         registrieHelper: '当存在多个私有仓库时，需要换行显示，例：\n172.16.10.111:8081 \n172.16.10.112:8081',
-
         compose: '编排',
         fromChangeHelper: '切换来源将清空当前已编辑内容，是否继续？',
         composePathHelper: '配置文件保存路径: {0}',
         composeHelper: '通过 1Panel 编辑或者模版创建的编排，将保存在 {0}/docker/compose 路径下',
         deleteFile: '删除文件',
-        deleteComposeHelper: '删除 {0} 目录下所有文件，包括该文件下的持久化文件等，请谨慎操作！',
+        allDelete: '彻底删除',
+        deleteComposeHelper: '1. 删除容器编排记录 \n2. 删除容器编排的所有文件，包括配置文件和持久化文件',
         deleteCompose: '" 删除此编排',
         apps: '应用商店',
         local: '本地',
@@ -754,6 +755,9 @@ const message = {
         content: '内容',
         contentEmpty: '编排内容不能为空，请输入后重试！',
         containerNumber: '容器数量',
+        containerStatus: '容器状态',
+        exited: '已停止',
+        running: '运行中',
         down: '删除',
         up: '启动',
         composeDetailHelper: '该 compose 为 1Panel 编排外部创建。暂不支持启停操作。',
@@ -1327,6 +1331,7 @@ const message = {
         LOCAL: '服务器磁盘',
         OSS: '阿里云 OSS',
         S3: '亚马逊 S3 云存储',
+        mode: '模式',
         MINIO: 'MINIO',
         SFTP: 'SFTP',
         WebDAV: 'WebDAV',

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

@@ -86,6 +86,14 @@
                                 />
                             </div>
                         </el-form-item>
+                        <el-form-item :label="$t('container.env')" prop="envStr">
+                            <el-input
+                                type="textarea"
+                                :placeholder="$t('container.tagHelper')"
+                                :rows="3"
+                                v-model="form.envStr"
+                            />
+                        </el-form-item>
                     </el-form>
                 </el-col>
             </el-row>
@@ -143,6 +151,8 @@ const form = reactive({
     path: '',
     file: '',
     template: null as number,
+    env: [],
+    envStr: '',
 });
 const rules = reactive({
     name: [Rules.requiredInput, Rules.imageName],
@@ -163,6 +173,8 @@ const acceptParams = (): void => {
     form.path = '';
     form.file = '';
     form.template = null;
+    form.envStr = '';
+    form.env = [];
     loadTemplates();
     loadPath();
     isStartReading.value = false;
@@ -242,6 +254,9 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
             MsgError(i18n.global.t('container.contentEmpty'));
             return;
         }
+        if (form.envStr) {
+            form.env = form.envStr.split('\n');
+        }
         loading.value = true;
         await testCompose(form)
             .then(async (res) => {

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

@@ -7,9 +7,9 @@
     >
         <el-form ref="deleteForm" v-loading="loading">
             <el-form-item>
-                <el-checkbox v-model="deleteFile" :label="$t('container.deleteFile')" />
-                <span class="input-help">
-                    {{ $t('container.deleteComposeHelper', [loadComposeDir()]) }}
+                <el-checkbox v-model="deleteFile" :label="$t('container.allDelete')" />
+                <span class="input-help whitespace-break-spaces">
+                    {{ $t('container.deleteComposeHelper') }}
                 </span>
             </el-form-item>
             <el-form-item>
@@ -64,15 +64,6 @@ const acceptParams = async (prop: DialogProps) => {
     dialogVisible.value = true;
 };
 
-const loadComposeDir = () => {
-    const parts = composePath.value.split('/');
-    if (parts.length <= 2) {
-        return '/';
-    }
-    const parentDirectory = parts.slice(0, -1).join('/');
-    return parentDirectory;
-};
-
 const submit = async () => {
     loading.value = true;
     let params = {

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

@@ -7,7 +7,7 @@
                         <el-tag effect="dark" type="success">{{ composeName }}</el-tag>
                     </div>
                     <div v-if="createdBy === '1Panel'" style="margin-left: 50px">
-                        <el-button link type="primary" @click="onComposeOperate('start')">
+                        <el-button link type="primary" @click="onComposeOperate('up')">
                             {{ $t('container.start') }}
                         </el-button>
                         <el-divider direction="vertical" />

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

@@ -9,20 +9,37 @@
         <template #header>
             <DrawerHeader :header="$t('commons.button.edit')" :resource="name" :back="handleClose" />
         </template>
-        <div v-loading="loading">
-            <codemirror
-                :autofocus="true"
-                placeholder="#Define or paste the content of your docker-compose file here"
-                :indent-with-tab="true"
-                :tabSize="4"
-                style="width: 100%; height: calc(100vh - 175px)"
-                :lineWrapping="true"
-                :matchBrackets="true"
-                theme="cobalt"
-                :styleActiveLine="true"
-                :extensions="extensions"
-                v-model="content"
-            />
+        <div v-loading="loading" style="padding-bottom: 20px">
+            <el-row type="flex" justify="center">
+                <el-col :span="22">
+                    <el-form ref="formRef" @submit.prevent label-position="top">
+                        <el-form-item>
+                            <codemirror
+                                :autofocus="true"
+                                placeholder="#Define or paste the content of your docker-compose file here"
+                                :indent-with-tab="true"
+                                :tabSize="4"
+                                style="width: 100%; height: calc(100vh - 175px)"
+                                :lineWrapping="true"
+                                :matchBrackets="true"
+                                theme="cobalt"
+                                :styleActiveLine="true"
+                                :extensions="extensions"
+                                v-model="content"
+                            />
+                        </el-form-item>
+                        <el-form-item :label="$t('container.env')" prop="environmentStr">
+                            <el-input
+                                type="textarea"
+                                :placeholder="$t('container.tagHelper')"
+                                :rows="3"
+                                v-model="environmentStr"
+                            />
+                        </el-form-item>
+                        <span class="input-help">{{ $t('container.editComposeHelper') }}</span>
+                    </el-form>
+                </el-col>
+            </el-row>
         </div>
         <template #footer>
             <span class="dialog-footer">
@@ -45,6 +62,7 @@ import { composeUpdate } from '@/api/modules/container';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import DrawerHeader from '@/components/drawer-header/index.vue';
+import { ElForm } from 'element-plus';
 
 const loading = ref(false);
 const composeVisible = ref(false);
@@ -52,13 +70,18 @@ const extensions = [javascript(), oneDark];
 const path = ref();
 const content = ref();
 const name = ref();
+const environmentStr = ref();
 
 const onSubmitEdit = async () => {
     const param = {
         name: name.value,
         path: path.value,
         content: content.value,
+        env: environmentStr.value,
     };
+    if (environmentStr.value != undefined) {
+        param.env = environmentStr.value.split('\n');
+    }
     loading.value = true;
     await composeUpdate(param)
         .then(() => {
@@ -82,6 +105,7 @@ const acceptParams = (props: DialogProps): void => {
     path.value = props.path;
     name.value = props.name;
     content.value = props.content;
+    environmentStr.value = '';
 };
 const handleClose = () => {
     composeVisible.value = false;

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 i18n.global.t('container.exited');
+    } else {
+        return i18n.global.t('container.running') + ` (${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,
 });

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

@@ -47,7 +47,7 @@
                     <el-table-column :label="$t('container.description')" prop="description" min-width="200" fix />
                     <el-table-column :label="$t('commons.table.createdAt')" min-width="80" fix>
                         <template #default="{ row }">
-                            {{ dateFormatSimple(row.createdAt) }}
+                            {{ dateFormat(0, 0, row.createdAt) }}
                         </template>
                     </el-table-column>
                     <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" />
@@ -63,7 +63,7 @@
 
 <script lang="ts" setup>
 import { reactive, onMounted, ref } from 'vue';
-import { dateFormatSimple } from '@/utils/util';
+import { dateFormat } from '@/utils/util';
 import { Container } from '@/api/interface/container';
 import DetailDialog from '@/views/container/template/detail/index.vue';
 import OperatorDialog from '@/views/container/template/operator/index.vue';

frontend/src/views/host/file-management/index.vue

@@ -53,7 +53,9 @@
             <template #prompt>
                 <el-alert type="info" :closable="false">
                     <template #title>
-                        <span v-html="$t('file.fileHeper')"></span>
+                        <span class="input-help whitespace-break-spaces">
+                            {{ $t('file.fileHeper') }}
+                        </span>
                     </template>
                 </el-alert>
             </template>

frontend/src/views/host/file-management/preview/index.vue

@@ -115,7 +115,9 @@ const acceptParams = (props: EditProps) => {
     isFullscreen.value = fileType.value === 'excel';
 
     loading.value = true;
-    fileUrl.value = `${import.meta.env.VITE_API_URL as string}/files/download?path=${encodeURIComponent(props.path)}`;
+    fileUrl.value = `${import.meta.env.VITE_API_URL as string}/files/download?path=${encodeURIComponent(
+        props.path,
+    )}&timestamp=${new Date().getTime()}`;
     open.value = true;
     loading.value = false;
 };

frontend/src/views/setting/backup-account/cos/index.vue

@@ -47,7 +47,7 @@
                         <el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
                             <el-input v-model.trim="cosData.rowData!.varsJson['endpointItem']">
                                 <template #prepend>
-                                    <el-select v-model.trim="endpointProto" style="width: 100px">
+                                    <el-select v-model.trim="endpointProto" style="width: 120px">
                                         <el-option label="http" value="http" />
                                         <el-option label="https" value="https" />
                                     </el-select>

frontend/src/views/setting/backup-account/kodo/index.vue

@@ -29,7 +29,7 @@
                         >
                             <el-input v-model="kodoData.rowData!.varsJson['domainItem']">
                                 <template #prepend>
-                                    <el-select v-model.trim="domainProto" style="width: 100px">
+                                    <el-select v-model.trim="domainProto" style="width: 120px">
                                         <el-option label="http" value="http" />
                                         <el-option label="https" value="https" />
                                     </el-select>

frontend/src/views/setting/backup-account/minio/index.vue

@@ -25,7 +25,7 @@
                         <el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
                             <el-input v-model="minioData.rowData!.varsJson['endpointItem']">
                                 <template #prepend>
-                                    <el-select v-model.trim="endpointProto" style="width: 100px">
+                                    <el-select v-model.trim="endpointProto" style="width: 120px">
                                         <el-option label="http" value="http" />
                                         <el-option label="https" value="https" />
                                     </el-select>

frontend/src/views/setting/backup-account/oss/index.vue

@@ -25,7 +25,7 @@
                         <el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
                             <el-input v-model="ossData.rowData!.varsJson['endpointItem']">
                                 <template #prepend>
-                                    <el-select v-model.trim="endpointProto" style="width: 100px">
+                                    <el-select v-model.trim="endpointProto" style="width: 120px">
                                         <el-option label="http" value="http" />
                                         <el-option label="https" value="https" />
                                     </el-select>

frontend/src/views/setting/backup-account/s3/index.vue

@@ -16,6 +16,12 @@
                         <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
                             <el-tag>{{ $t('setting.' + s3Data.rowData!.type) }}</el-tag>
                         </el-form-item>
+                        <el-form-item :label="$t('setting.mode')" prop="varsJson.mode" :rules="Rules.requiredSelect">
+                            <el-radio-group v-model="s3Data.rowData!.varsJson['mode']">
+                                <el-radio value="virtual hosted">Virtual Hosted</el-radio>
+                                <el-radio value="path">Path</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
                         <el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
                             <el-input v-model.trim="s3Data.rowData!.accessKey" />
                         </el-form-item>
@@ -28,7 +34,7 @@
                         <el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
                             <el-input v-model="s3Data.rowData!.varsJson['endpointItem']">
                                 <template #prepend>
-                                    <el-select v-model.trim="endpointProto" style="width: 100px">
+                                    <el-select v-model="endpointProto" style="width: 120px">
                                         <el-option label="http" value="http" />
                                         <el-option label="https" value="https" />
                                     </el-select>
@@ -117,9 +123,12 @@ const s3Data = ref<DialogProps>({
 const acceptParams = (params: DialogProps): void => {
     buckets.value = [];
     s3Data.value = params;
-    if (params.title === 'create' || (params.title === 'edit' && !s3Data.value.rowData.varsJson['scType'])) {
+    if (!s3Data.value.rowData.varsJson['scType']) {
         s3Data.value.rowData.varsJson['scType'] = 'STANDARD';
     }
+    if (!s3Data.value.rowData.varsJson['mode']) {
+        s3Data.value.rowData.varsJson['mode'] = 'virtual hosted';
+    }
     if (s3Data.value.title === 'edit') {
         let httpItem = splitHttp(s3Data.value.rowData!.varsJson['endpoint']);
         s3Data.value.rowData!.varsJson['endpointItem'] = httpItem.url;

frontend/src/views/website/runtime/go/index.vue

@@ -5,7 +5,9 @@
             <template #prompt>
                 <el-alert type="info" :closable="false">
                     <template #title>
-                        <span v-html="$t('runtime.statusHelper')"></span>
+                        <span class="input-help whitespace-break-spaces">
+                            {{ $t('runtime.statusHelper') }}
+                        </span>
                     </template>
                 </el-alert>
             </template>

frontend/src/views/website/runtime/java/index.vue

@@ -5,7 +5,9 @@
             <template #prompt>
                 <el-alert type="info" :closable="false">
                     <template #title>
-                        <span v-html="$t('runtime.statusHelper')"></span>
+                        <span class="input-help whitespace-break-spaces">
+                            {{ $t('runtime.statusHelper') }}
+                        </span>
                     </template>
                 </el-alert>
             </template>

frontend/src/views/website/runtime/node/index.vue

@@ -5,7 +5,9 @@
             <template #prompt>
                 <el-alert type="info" :closable="false">
                     <template #title>
-                        <span v-html="$t('runtime.statusHelper')"></span>
+                        <span class="input-help whitespace-break-spaces">
+                            {{ $t('runtime.statusHelper') }}
+                        </span>
                     </template>
                 </el-alert>
             </template>