fix: 解决容器部分样式问题

backend/app/service/container_volume.go

@@ -2,11 +2,13 @@ package service
 
 import (
 	"context"
+	"fmt"
 	"sort"
 	"strings"
 	"time"
 
 	"github.com/1Panel-dev/1Panel/backend/app/dto"
+	"github.com/1Panel-dev/1Panel/backend/constant"
 	"github.com/1Panel-dev/1Panel/backend/utils/docker"
 	"github.com/docker/docker/api/types"
 	"github.com/docker/docker/api/types/filters"
@@ -104,14 +106,28 @@ func (u *ContainerService) CreateVolume(req dto.VolumeCreat) error {
 	if err != nil {
 		return err
 	}
+	var array []filters.KeyValuePair
+	array = append(array, filters.Arg("name", req.Name))
+	vos, _ := client.VolumeList(context.TODO(), filters.NewArgs(array...))
+	if len(vos.Volumes) != 0 {
+		for _, v := range vos.Volumes {
+			if v.Name == req.Name {
+				return constant.ErrRecordExist
+			}
+		}
+	}
 	options := volume.VolumeCreateBody{
 		Name:       req.Name,
 		Driver:     req.Driver,
 		DriverOpts: stringsToMap(req.Options),
 		Labels:     stringsToMap(req.Labels),
 	}
-	if _, err := client.VolumeCreate(context.TODO(), options); err != nil {
+	stat, err := client.VolumeCreate(context.TODO(), options)
+	if err != nil {
 		return err
 	}
+	// if len(stat.CreatedAt) != 0 {
+	fmt.Println(stat)
+	// }
 	return nil
 }

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

@@ -7,9 +7,6 @@
             <el-form ref="formRef" label-position="top" :model="form" :rules="rules" label-width="80px">
                 <el-row type="flex" justify="center">
                     <el-col :span="22">
-                        <el-form-item :label="$t('container.name')" prop="name">
-                            <el-input v-model.trim="form.name"></el-input>
-                        </el-form-item>
                         <el-form-item :label="$t('container.from')">
                             <el-radio-group v-model="form.from">
                                 <el-radio label="edit">{{ $t('commons.button.edit') }}</el-radio>
@@ -27,6 +24,12 @@
                                 </template>
                             </el-input>
                         </el-form-item>
+                        <el-form-item v-if="form.from === 'edit'" prop="name">
+                            <el-input @input="changePath" v-model.trim="form.name">
+                                <template #prepend>{{ $t('file.dir') }}</template>
+                            </el-input>
+                            <span class="input-help">{{ $t('container.composePathHelper', [composeFile]) }}</span>
+                        </el-form-item>
                         <el-form-item v-if="form.from === 'template'" prop="template">
                             <el-select v-model="form.template">
                                 <el-option
@@ -43,7 +46,7 @@
                                 placeholder="#Define or paste the content of your docker-compose file here"
                                 :indent-with-tab="true"
                                 :tabSize="4"
-                                style="width: 100%; height: calc(100vh - 351px)"
+                                style="width: 100%; height: calc(100vh - 340px)"
                                 :lineWrapping="true"
                                 :matchBrackets="true"
                                 theme="cobalt"
@@ -81,12 +84,15 @@ import { ElForm } from 'element-plus';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import { listComposeTemplate, upCompose } from '@/api/modules/container';
 import { MsgSuccess } from '@/utils/message';
+import { loadBaseDir } from '@/api/modules/setting';
 
 const extensions = [javascript(), oneDark];
 const drawerVisiable = ref(false);
 const templateOptions = ref();
 
 const loading = ref(false);
+const baseDir = ref();
+const composeFile = ref();
 
 const varifyPath = (rule: any, value: any, callback: any) => {
     if (value.indexOf('docker-compose.yml') === -1) {
@@ -102,7 +108,7 @@ const form = reactive({
     template: null as number,
 });
 const rules = reactive({
-    name: [Rules.requiredInput, Rules.name],
+    name: [Rules.requiredInput, Rules.imageName],
     path: [Rules.requiredSelect, { validator: varifyPath, trigger: 'change', required: true }],
 });
 
@@ -121,6 +127,7 @@ const acceptParams = (): void => {
     form.path = '';
     form.file = '';
     loadTemplates();
+    loadPath();
 };
 const emit = defineEmits<{ (e: 'search'): void }>();
 
@@ -128,6 +135,16 @@ const handleClose = () => {
     drawerVisiable.value = false;
 };
 
+const loadPath = async () => {
+    const pathRes = await loadBaseDir();
+    baseDir.value = pathRes.data;
+    changePath();
+};
+
+const changePath = async () => {
+    composeFile.value = baseDir.value + '/docker/compose/' + form.name + '/docker-compose.yml';
+};
+
 type FormInstance = InstanceType<typeof ElForm>;
 const formRef = ref<FormInstance>();
 

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

@@ -210,6 +210,20 @@ const checkStatus = (operation: string) => {
                 }
             }
             return false;
+        case 'pause':
+            for (const item of selects.value) {
+                if (item.state === 'paused' || item.state === 'exited') {
+                    return true;
+                }
+            }
+            return false;
+        case 'unpause':
+            for (const item of selects.value) {
+                if (item.state !== 'paused') {
+                    return true;
+                }
+            }
+            return false;
     }
 };
 

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

@@ -208,7 +208,7 @@ import { ElForm } from 'element-plus';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import { listImage, listVolume, createContainer } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
-import { MsgSuccess } from '@/utils/message';
+import { MsgError, MsgSuccess } from '@/utils/message';
 
 const loading = ref(false);
 
@@ -292,6 +292,14 @@ const loadVolumeOptions = async () => {
     volumes.value = res.data;
 };
 const onSubmit = async (formEl: FormInstance | undefined) => {
+    if (form.volumes.length !== 0) {
+        for (const item of form.volumes) {
+            if (!item.containerDir || !item.sourceDir) {
+                MsgError(i18n.global.t('container.volumeHelper'));
+                return;
+            }
+        }
+    }
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;

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

@@ -75,6 +75,11 @@ const form = reactive({
 });
 
 const acceptParams = (): void => {
+    form.name = '';
+    form.labels = [];
+    form.labelStr = '';
+    form.options = [];
+    form.optionStr = '';
     drawerVisiable.value = true;
 };
 const emit = defineEmits<{ (e: 'search'): void }>();
@@ -84,7 +89,7 @@ const handleClose = () => {
 };
 
 const rules = reactive({
-    name: [Rules.requiredInput, Rules.name],
+    name: [Rules.requiredInput, Rules.volumeName],
     driver: [Rules.requiredSelect],
 });