feat: limit website name length in configuration (#11422)

This commit is contained in:
CityFun 2025-12-22 13:59:30 +08:00 committed by GitHub
parent 5674673c5d
commit 63a10691b3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 51 additions and 19 deletions

View file

@ -5,7 +5,7 @@
<el-form-item :label="$t('commons.table.name')" prop="primaryDomain">
<el-input v-model="form.primaryDomain"></el-input>
</el-form-item>
<el-form-item :label="$t('website.alias')" prop="primaryDomain">
<el-form-item :label="$t('website.alias')" prop="alias">
<el-input v-model="form.alias" disabled></el-input>
</el-form-item>
<GroupSelect
@ -60,7 +60,7 @@ const form = reactive({
favorite: false,
});
const rules = ref({
primaryDomain: [Rules.requiredInput],
primaryDomain: [Rules.requiredInput, Rules.linuxName],
webSiteGroupId: [Rules.requiredSelect],
});

View file

@ -1,15 +1,18 @@
<template>
<div class="name-row">
<div>
<el-input
v-if="isEditing"
v-model="editValue"
@keyup.enter="saveEdit"
@blur="saveEdit"
@keyup.esc="cancelEdit"
class="domain-input"
ref="inputRef"
/>
<el-form :model="formData" :rules="rules" ref="formRef" v-if="isEditing" @submit.prevent>
<el-form-item prop="domainName" class="inline-form-item">
<el-input
v-model="formData.domainName"
@keyup.enter.prevent="saveEdit"
@blur="saveEdit"
@keyup.esc="cancelEdit"
class="domain-input"
ref="inputRef"
/>
</el-form-item>
</el-form>
<el-text v-else type="primary" class="cursor-pointer" @click="openConfig(row.id)">
{{ row.primaryDomain }}
</el-text>
@ -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<Props>();
const emit = defineEmits(['favoriteChange', 'domainEdit']);
const inputRef = ref();
const isEditing = ref(false);
const editValue = ref('');
const domains = ref<Website.Domain[]>([]);
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;
}
</style>