Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-22 07:03:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 完成字典管理页面样式改造

Browse Source
This commit is contained in:
zhuoqinglian
2026-06-18 16:49:15 +08:00
parent 211cf891af
commit a5be67d04b
10 changed files with 723 additions and 1068 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/components/CustomButton.vue
+2 -1
View File
@@ -31,6 +31,7 @@ export default {
transition: all 0.3s ease;
&.el-button--small {
padding: 10px;
font-size: 14px;
}
&.el-button--medium {
@@ -91,7 +92,7 @@ export default {
.custom-button--delete {
width: fit-content;
background: linear-gradient(to right, #ff6b6b, #ff8e8e);
background: #ff6b6b;
color: white;
border: none;
border-radius: 6px;
main/manager-web/src/components/DictDataDialog.vue
+105 -104
View File
@@ -1,116 +1,117 @@
<template>
<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" @close="handleClose">
<el-form :model="form" :rules="rules" ref="form" label-width="auto">
<el-form-item :label="$t('dictDataDialog.dictLabel')" prop="dictLabel">
<el-input v-model="form.dictLabel" :placeholder="$t('dictDataDialog.dictLabelPlaceholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('dictDataDialog.dictValue')" prop="dictValue">
<el-input v-model="form.dictValue" :placeholder="$t('dictDataDialog.dictValuePlaceholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('dictDataDialog.sort')" prop="sort">
<el-input-number v-model="form.sort" :min="0" :max="999" style="width: 100%;"></el-input-number>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">{{ $t('button.cancel') }}</el-button>
<el-button type="primary" @click="handleSave">{{ $t('button.save') }}</el-button>
</div>
</el-dialog>
<CustomDialog
:title="title"
:visible.sync="dialogVisible"
width="600px"
@confirm="submit"
@close="cancel"
:confirmLoading="saving"
>
<el-form :model="form" :rules="rules" ref="form" label-width="auto" label-position="left">
<el-form-item :label="$t('dictDataDialog.dictLabel')" prop="dictLabel" class="form-item">
<el-input v-model="form.dictLabel" :placeholder="$t('dictDataDialog.dictLabelPlaceholder')" />
</el-form-item>
<el-form-item :label="$t('dictDataDialog.dictValue')" prop="dictValue" class="form-item">
<el-input v-model="form.dictValue" :placeholder="$t('dictDataDialog.dictValuePlaceholder')" />
</el-form-item>
<el-form-item :label="$t('dictDataDialog.sort')" prop="sort" class="form-item">
<el-input-number v-model="form.sort" :min="0" :max="999" class="custom-input-number"></el-input-number>
</el-form-item>
</el-form>
</CustomDialog>
</template>
<script>
import CustomDialog from './CustomDialog.vue';
export default {
name: 'DictDataDialog',
props: {
visible: {
type: Boolean,
default: false
},
title: {
type: String,
default: () => this.$t('dictDataDialog.addDictData')
},
dictData: {
type: Object,
default: () => ({})
},
dictTypeId: {
type: [Number, String],
default: null
}
name: 'DictDataDialog',
props: {
visible: {
type: Boolean,
default: false
},
data() {
return {
dialogVisible: this.visible,
form: {
id: null,
dictTypeId: null,
dictLabel: '',
dictValue: '',
sort: 0
},
rules: {
dictLabel: [{ required: true, message: this.$t('dictDataDialog.requiredDictLabel'), trigger: 'blur' }],
dictValue: [{ required: true, message: this.$t('dictDataDialog.requiredDictValue'), trigger: 'blur' }]
}
}
title: {
type: String,
default: () => this.$t('dictDataDialog.addDictData')
},
watch: {
dictData: {
handler(val) {
if (val) {
this.form = { ...val }
}
},
immediate: true
},
dictTypeId: {
handler(val) {
if (val) {
this.form.dictTypeId = val
}
},
immediate: true
},
visible(val) {
this.dialogVisible = val;
},
dialogVisible(val) {
this.$emit('update:visible', val);
}
dictData: {
type: Object,
default: () => ({})
},
methods: {
handleClose() {
this.dialogVisible = false;
this.resetForm();
},
resetForm() {
this.form = {
id: null,
dictTypeId: this.dictTypeId,
dictLabel: '',
dictValue: '',
sort: 0
}
this.$refs.form?.resetFields()
},
handleSave() {
this.$refs.form.validate(valid => {
if (valid) {
this.$emit('save', this.form)
}
})
}
dictTypeId: {
type: [Number, String],
default: null
}
}
},
components: {
CustomDialog
},
data() {
return {
dialogVisible: this.visible,
saving: false,
form: {
id: null,
dictTypeId: null,
dictLabel: '',
dictValue: '',
sort: 0
},
rules: {
dictLabel: [{ required: true, message: this.$t('dictDataDialog.requiredDictLabel'), trigger: 'blur' }],
dictValue: [{ required: true, message: this.$t('dictDataDialog.requiredDictValue'), trigger: 'blur' }]
}
};
},
watch: {
visible(val) {
this.dialogVisible = val;
},
dialogVisible(val) {
this.$emit('update:visible', val);
if (!val) {
this.saving = false;
}
},
dictData: {
handler(val) {
if (val) {
this.form = { ...val };
}
},
immediate: true
},
dictTypeId: {
handler(val) {
if (val) {
this.form.dictTypeId = val;
}
},
immediate: true
}
},
methods: {
submit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.saving = true;
this.$emit('save', this.form);
}
});
},
cancel() {
this.saving = false;
this.$emit('cancel');
},
resetSaving() {
this.saving = false;
}
}
};
</script>
<style scoped>
.dialog-footer {
text-align: right;
<style scoped lang="scss">
.custom-input-number {
width: 100%;
}
:deep(.el-dialog) {
border-radius: 15px;
}
</style>
</style>
main/manager-web/src/components/DictTypeDialog.vue
+85 -88
View File
@@ -1,97 +1,94 @@
<template>
<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" @close="handleClose">
<el-form :model="form" :rules="rules" ref="form" label-width="auto">
<el-form-item :label="$t('dictTypeDialog.dictName')" prop="dictName">
<el-input v-model="form.dictName" :placeholder="$t('dictTypeDialog.dictNamePlaceholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('dictTypeDialog.dictType')" prop="dictType">
<el-input v-model="form.dictType" :placeholder="$t('dictTypeDialog.dictTypePlaceholder')"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">{{ $t('button.cancel') }}</el-button>
<el-button type="primary" @click="handleSave">{{ $t('button.save') }}</el-button>
</div>
</el-dialog>
<CustomDialog
:title="title"
:visible.sync="dialogVisible"
width="600px"
@confirm="submit"
@close="cancel"
:confirmLoading="saving"
>
<el-form :model="form" :rules="rules" ref="form" label-width="auto" label-position="left">
<el-form-item :label="$t('dictTypeDialog.dictName')" prop="dictName" class="form-item">
<el-input v-model="form.dictName" :placeholder="$t('dictTypeDialog.dictNamePlaceholder')" />
</el-form-item>
<el-form-item :label="$t('dictTypeDialog.dictType')" prop="dictType" class="form-item">
<el-input v-model="form.dictType" :placeholder="$t('dictTypeDialog.dictTypePlaceholder')" />
</el-form-item>
</el-form>
</CustomDialog>
</template>
<script>
import CustomDialog from './CustomDialog.vue';
export default {
name: 'DictTypeDialog',
props: {
visible: {
type: Boolean,
default: false
},
title: {
type: String,
default: () => this.$t('dictTypeDialog.addDictType')
},
dictTypeData: {
type: Object,
default: () => ({})
}
name: 'DictTypeDialog',
props: {
visible: {
type: Boolean,
default: false
},
data() {
return {
dialogVisible: this.visible,
form: {
id: null,
dictName: '',
dictType: ''
},
rules: {
dictName: [{ required: true, message: this.$t('dictTypeDialog.requiredDictName'), trigger: 'blur' }],
dictType: [{ required: true, message: this.$t('dictTypeDialog.requiredDictType'), trigger: 'blur' }]
}
}
title: {
type: String,
default: () => this.$t('dictTypeDialog.addDictType')
},
watch: {
visible(val) {
this.dialogVisible = val;
},
dialogVisible(val) {
this.$emit('update:visible', val);
},
dictTypeData: {
handler(val) {
if (val) {
this.form = { ...val }
}
},
immediate: true
}
},
methods: {
handleClose() {
this.dialogVisible = false;
this.resetForm()
},
resetForm() {
this.form = {
id: null,
dictName: '',
dictType: ''
}
this.$refs.form?.resetFields()
},
handleSave() {
this.$refs.form.validate(valid => {
if (valid) {
this.$emit('save', this.form)
}
})
}
dictTypeData: {
type: Object,
default: () => ({})
}
}
},
components: {
CustomDialog
},
data() {
return {
dialogVisible: this.visible,
saving: false,
form: {
id: null,
dictName: '',
dictType: ''
},
rules: {
dictName: [{ required: true, message: this.$t('dictTypeDialog.requiredDictName'), trigger: 'blur' }],
dictType: [{ required: true, message: this.$t('dictTypeDialog.requiredDictType'), trigger: 'blur' }]
}
};
},
watch: {
visible(val) {
this.dialogVisible = val;
},
dialogVisible(val) {
this.$emit('update:visible', val);
if (!val) {
this.saving = false;
}
},
dictTypeData: {
handler(val) {
if (val) {
this.form = { ...val };
}
},
immediate: true
}
},
methods: {
submit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.saving = true;
this.$emit('save', this.form);
}
});
},
cancel() {
this.saving = false;
this.$emit('cancel');
},
resetSaving() {
this.saving = false;
}
}
};
</script>
<style scoped>
.dialog-footer {
text-align: right;
}
:deep(.el-dialog) {
border-radius: 15px;
}
</style>
main/manager-web/src/i18n/de.js
+1
View File
@@ -593,6 +593,7 @@ export default {
// Dictionary management page text
'dictManagement.pageTitle': 'Wörterbuchverwaltung',
'dictManagement.dictTypeCategory': 'Wörterbuchkategorie',
'dictManagement.searchPlaceholder': 'Bitte Wörterbuchwert-Label zur Suche eingeben',
'dictManagement.search': 'Suchen',
'dictManagement.dictTypeName': 'WDT-Name',
main/manager-web/src/i18n/en.js
+1
View File
@@ -593,6 +593,7 @@ export default {
// Dictionary management page text
'dictManagement.pageTitle': 'Dictionary Management',
'dictManagement.dictTypeCategory': 'Dict Category',
'dictManagement.searchPlaceholder': 'Please enter dict value label to search',
'dictManagement.search': 'Search',
'dictManagement.dictTypeName': 'Dict Type Name',
main/manager-web/src/i18n/pt_BR.js
+1
View File
@@ -593,6 +593,7 @@ export default {
// Página de gerenciamento de dicionário
'dictManagement.pageTitle': 'Gerenciamento de Dicionário',
'dictManagement.dictTypeCategory': 'Categoria do Dicionário',
'dictManagement.searchPlaceholder': 'Por favor, insira o rótulo do dicionário para pesquisar',
'dictManagement.search': 'Pesquisar',
'dictManagement.dictTypeName': 'Nome do Tipo de Dicionário',
main/manager-web/src/i18n/vi.js
+1
View File
@@ -593,6 +593,7 @@ export default {
// Dictionary management page text
'dictManagement.pageTitle': 'Quản lý từ điển',
'dictManagement.dictTypeCategory': 'Danh mục từ điển',
'dictManagement.searchPlaceholder': 'Vui lòng nhập nhãn giá trị từ điển để tìm kiếm',
'dictManagement.search': 'Tìm kiếm',
'dictManagement.dictTypeName': 'Tên loại từ điển',
main/manager-web/src/i18n/zh_CN.js
+1
View File
@@ -593,6 +593,7 @@ export default {
// 字典管理页面文本
'dictManagement.pageTitle': '字典管理',
'dictManagement.dictTypeCategory': '字典分类',
'dictManagement.searchPlaceholder': '请输入字典值标签查询',
'dictManagement.search': '搜索',
'dictManagement.dictTypeName': '字典类型名称',
main/manager-web/src/i18n/zh_TW.js
+1
View File
@@ -593,6 +593,7 @@ export default {
// 字典管理頁面文本
'dictManagement.pageTitle': '字典管理',
'dictManagement.dictTypeCategory': '字典分類',
'dictManagement.searchPlaceholder': '請輸入字典值標籤查詢',
'dictManagement.search': '搜索',
'dictManagement.dictTypeName': '字典類型名稱',
main/manager-web/src/views/DictManagement.vue
+525 -875
View File
File diff suppressed because it is too large Load Diff