diff --git a/frontend/src/views/website/website/config/basic/other/index.vue b/frontend/src/views/website/website/config/basic/other/index.vue index 6a06b4ced..2516418f2 100644 --- a/frontend/src/views/website/website/config/basic/other/index.vue +++ b/frontend/src/views/website/website/config/basic/other/index.vue @@ -5,7 +5,7 @@ - +
- + + + + + {{ row.primaryDomain }} @@ -62,6 +65,7 @@ import { ref } from 'vue'; import { listDomains } from '@/api/modules/website'; import { Website } from '@/api/interface/website'; import { routerToNameWithParams } from '@/utils/router'; +import { Rules } from '@/global/form-rules'; interface Props { row: Website.Website; @@ -71,11 +75,17 @@ const props = defineProps(); const emit = defineEmits(['favoriteChange', 'domainEdit']); const inputRef = ref(); const isEditing = ref(false); -const editValue = ref(''); const domains = ref([]); +const formData = reactive({ + domainName: '', +}); +const rules = ref({ + domainName: [Rules.requiredInput, Rules.linuxName], +}); +const formRef = ref(); const startEdit = () => { - editValue.value = props.row.primaryDomain; + formData.domainName = props.row.primaryDomain; isEditing.value = true; nextTick(() => { inputRef.value?.focus(); @@ -83,15 +93,20 @@ const startEdit = () => { }); }; -const saveEdit = () => { - if (editValue.value.trim() && editValue.value !== props.row.primaryDomain) { - emit('domainEdit', props.row, editValue.value.trim()); - } - isEditing.value = false; +const saveEdit = async () => { + await formRef.value.validate((valid) => { + if (valid) { + const editValue = formData.domainName.trim(); + if (editValue && editValue !== props.row.primaryDomain) { + emit('domainEdit', props.row, editValue); + } + isEditing.value = false; + } + }); }; const cancelEdit = () => { - editValue.value = props.row.primaryDomain; + formData.domainName = props.row.primaryDomain; isEditing.value = false; }; @@ -133,4 +148,21 @@ const favoriteWebsite = (row: Website.Website) => { justify-content: space-between; width: 100%; } +:deep(.el-form) { + margin: 0; + line-height: 1; +} +:deep(.el-form-item) { + margin-bottom: 0; +} +:deep(.el-form-item__error) { + position: absolute; + top: 100%; + left: 0; + padding-top: 2px; +} + +.domain-input { + width: 200px; +}