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

页面优化

Browse Source
This commit is contained in:
Sakura-RanChen
2025-05-08 17:57:11 +08:00
parent 72f7514114
commit ec95917b4d
11 changed files with 104 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/components/AddDeviceDialog.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<el-dialog :visible="visible" @close="handleClose" width="400px" center> <el-dialog :visible="visible" @close="handleClose" width="24%" center>
<div <div
style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;"> style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
<div <div
main/manager-web/src/components/AddModelDialog.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<template> <template>
<el-dialog :visible="dialogVisible" @update:visible="handleVisibleChange" width="975px" center <el-dialog :visible="dialogVisible" @update:visible="handleVisibleChange" width="57%" center
custom-class="custom-dialog" :show-close="false" class="center-dialog"> custom-class="custom-dialog" :show-close="false" class="center-dialog">
<div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px;"> <div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px;">
<div style="font-size: 30px; color: #3d4566; margin-top: -10px; margin-bottom: 10px; text-align: center;"> <div style="font-size: 30px; color: #3d4566; margin-top: -10px; margin-bottom: 10px; text-align: center;">
@@ -54,7 +54,7 @@
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark" class="prop-remark"> <el-form-item label="备注" prop="remark" class="prop-remark">
<el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入模型备注" <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入模型备注" :autosize="{ minRows: 3, maxRows: 5 }"
class="custom-input-bg"></el-input> class="custom-input-bg"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -271,7 +271,7 @@ export default {
} }
.center-dialog .el-dialog { .center-dialog .el-dialog {
margin: 4% 0 auto !important; margin: 0 0 auto !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
main/manager-web/src/components/AddWisdomBodyDialog.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<template> <template>
<el-dialog :visible="visible" @close="handleClose" width="400px" center @open="handleOpen"> <el-dialog :visible="visible" @close="handleClose" width="25%" center @open="handleOpen">
<div <div
style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;"> style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
<div <div
@@ -10,7 +10,7 @@
</div> </div>
<div style="height: 1px;background: #e8f0ff;" /> <div style="height: 1px;background: #e8f0ff;" />
<div style="margin: 22px 15px;"> <div style="margin: 22px 15px;">
<div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;"> <div style="font-weight: 400;text-align: left;color: #3d4566;">
<div style="color: red;display: inline-block;">*</div> 智能体名称： <div style="color: red;display: inline-block;">*</div> 智能体名称：
</div> </div>
<div class="input-46" style="margin-top: 12px;"> <div class="input-46" style="margin-top: 12px;">
main/manager-web/src/components/ChangePasswordDialog.vue
+11 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<form> <form>
<el-dialog :visible.sync="value" width="400px" center> <el-dialog :visible.sync="dialogVisible" width="24%" center>
<div <div
style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;"> style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
<div <div
@@ -60,11 +60,20 @@ export default {
}, },
data() { data() {
return { return {
dialogVisible: this.value,
oldPassword: "", oldPassword: "",
newPassword: "", newPassword: "",
confirmNewPassword: "" confirmNewPassword: ""
} }
}, },
watch: {
value(val) {
this.dialogVisible = val;
},
dialogVisible(val) {
this.$emit('input', val);
}
},
methods: { methods: {
...mapActions(['logout']), // 引入Vuex的logout action ...mapActions(['logout']), // 引入Vuex的logout action
confirm() { confirm() {
@@ -101,7 +110,7 @@ export default {
this.$emit('input', false); this.$emit('input', false);
}, },
cancel() { cancel() {
this.$emit('input', false); this.dialogVisible = false;
this.resetForm(); this.resetForm();
}, },
resetForm() { resetForm() {
main/manager-web/src/components/DictDataDialog.vue
+14 -3
View File
@@ -1,5 +1,5 @@
<template> <template>
<el-dialog :title="title" :visible.sync="visible" width="500px" @close="handleClose"> <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" @close="handleClose">
<el-form :model="form" :rules="rules" ref="form" label-width="100px"> <el-form :model="form" :rules="rules" ref="form" label-width="100px">
<el-form-item label="字典标签" prop="dictLabel"> <el-form-item label="字典标签" prop="dictLabel">
<el-input v-model="form.dictLabel" placeholder="请输入字典标签"></el-input> <el-input v-model="form.dictLabel" placeholder="请输入字典标签"></el-input>
@@ -41,6 +41,7 @@ export default {
}, },
data() { data() {
return { return {
dialogVisible: this.visible,
form: { form: {
id: null, id: null,
dictTypeId: null, dictTypeId: null,
@@ -70,12 +71,18 @@ export default {
} }
}, },
immediate: true immediate: true
},
visible(val) {
this.dialogVisible = val;
},
dialogVisible(val) {
this.$emit('update:visible', val);
} }
}, },
methods: { methods: {
handleClose() { handleClose() {
this.$emit('update:visible', false) this.dialogVisible = false;
this.resetForm() this.resetForm();
}, },
resetForm() { resetForm() {
this.form = { this.form = {
@@ -102,4 +109,8 @@ export default {
.dialog-footer { .dialog-footer {
text-align: right; text-align: right;
} }
:deep(.el-dialog) {
border-radius: 15px;
}
</style> </style>
main/manager-web/src/components/DictTypeDialog.vue
+13 -2
View File
@@ -1,5 +1,5 @@
<template> <template>
<el-dialog :title="title" :visible.sync="visible" width="500px" @close="handleClose"> <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" @close="handleClose">
<el-form :model="form" :rules="rules" ref="form" label-width="120px"> <el-form :model="form" :rules="rules" ref="form" label-width="120px">
<el-form-item label="字典类型名称" prop="dictName"> <el-form-item label="字典类型名称" prop="dictName">
<el-input v-model="form.dictName" placeholder="请输入字典类型名称"></el-input> <el-input v-model="form.dictName" placeholder="请输入字典类型名称"></el-input>
@@ -34,6 +34,7 @@ export default {
}, },
data() { data() {
return { return {
dialogVisible: this.visible,
form: { form: {
id: null, id: null,
dictName: '', dictName: '',
@@ -46,6 +47,12 @@ export default {
} }
}, },
watch: { watch: {
visible(val) {
this.dialogVisible = val;
},
dialogVisible(val) {
this.$emit('update:visible', val);
},
dictTypeData: { dictTypeData: {
handler(val) { handler(val) {
if (val) { if (val) {
@@ -57,7 +64,7 @@ export default {
}, },
methods: { methods: {
handleClose() { handleClose() {
this.$emit('update:visible', false) this.dialogVisible = false;
this.resetForm() this.resetForm()
}, },
resetForm() { resetForm() {
@@ -83,4 +90,8 @@ export default {
.dialog-footer { .dialog-footer {
text-align: right; text-align: right;
} }
:deep(.el-dialog) {
border-radius: 15px;
}
</style> </style>
main/manager-web/src/components/FirmwareDialog.vue
+17 -3
View File
@@ -1,5 +1,5 @@
<template> <template>
<el-dialog :title="title" :visible.sync="visible" width="500px" @close="handleClose" @open="handleOpen"> <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" @close="handleClose" @open="handleOpen">
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="固件名称" prop="firmwareName"> <el-form-item label="固件名称" prop="firmwareName">
<el-input v-model="form.firmwareName" placeholder="请输入固件名称(板子+版本号)"></el-input> <el-input v-model="form.firmwareName" placeholder="请输入固件名称(板子+版本号)"></el-input>
@@ -59,11 +59,13 @@ export default {
default: () => [] default: () => []
} }
}, },
data() { data() {
return { return {
uploadProgress: 0, uploadProgress: 0,
uploadStatus: '', uploadStatus: '',
isUploading: false, isUploading: false,
dialogVisible: this.visible,
rules: { rules: {
firmwareName: [ firmwareName: [
{ required: true, message: '请输入固件名称(板子+版本号)', trigger: 'blur' } { required: true, message: '请输入固件名称(板子+版本号)', trigger: 'blur' }
@@ -90,10 +92,18 @@ export default {
created() { created() {
// 移除 getDictDataByType 调用 // 移除 getDictDataByType 调用
}, },
watch: {
visible(val) {
this.dialogVisible = val;
},
dialogVisible(val) {
this.$emit('update:visible', val);
},
},
methods: { methods: {
// 移除 getFirmwareTypes 方法 // 移除 getFirmwareTypes 方法
handleClose() { handleClose() {
this.$refs.form.clearValidate(); this.dialogVisible = false;
this.$emit('cancel'); this.$emit('cancel');
}, },
handleCancel() { handleCancel() {
@@ -201,13 +211,17 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-dialog {
border-radius: 20px;
}
.upload-demo { .upload-demo {
text-align: left; text-align: left;
} }
.el-upload__tip { .el-upload__tip {
line-height: 1.2; line-height: 1.2;
padding-top: 5px; padding-top: 2%;
color: #909399; color: #909399;
} }
main/manager-web/src/components/ModelEditDialog.vue
+4 -9
View File
@@ -1,6 +1,6 @@
<template> <template>
<el-dialog :visible.sync="dialogVisible" width="975px" center custom-class="custom-dialog" :show-close="false" <el-dialog :visible.sync="dialogVisible" width="57%" center custom-class="custom-dialog" :show-close="false"
class="center-dialog"> class="center-dialog" >
<div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px;"> <div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px;">
<div style="font-size: 30px; color: #3d4566; margin-top: -10px; margin-bottom: 10px; text-align: center;"> <div style="font-size: 30px; color: #3d4566; margin-top: -10px; margin-bottom: 10px; text-align: center;">
修改模型 修改模型
@@ -53,7 +53,7 @@
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark" class="prop-remark"> <el-form-item label="备注" prop="remark" class="prop-remark">
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入模型备注" <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入模型备注" :autosize="{ minRows: 3, maxRows: 5 }"
class="custom-input-bg"></el-input> class="custom-input-bg"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -296,7 +296,7 @@ export default {
}; };
</script> </script>
<style scoped> <style lang="scss" scoped>
.custom-dialog { .custom-dialog {
position: relative; position: relative;
border-radius: 20px; border-radius: 20px;
@@ -316,11 +316,6 @@ export default {
justify-content: center; justify-content: center;
} }
.center-dialog .el-dialog {
margin: 4% 0 auto !important;
display: flex;
flex-direction: column;
}
.custom-close-btn { .custom-close-btn {
position: absolute; position: absolute;
main/manager-web/src/components/TtsModel.vue
+1 -8
View File
@@ -487,7 +487,7 @@ export default {
}; };
</script> </script>
<style scoped> <style lang="scss" scoped>
::v-deep .el-dialog { ::v-deep .el-dialog {
border-radius: 8px !important; border-radius: 8px !important;
@@ -648,12 +648,6 @@ export default {
margin: 0 auto; margin: 0 auto;
} }
/* 新增按钮组样式 */
.action-buttons {
bottom: 20px;
padding-top: 10px;
}
.action-buttons .el-button { .action-buttons .el-button {
padding: 8px 15px; padding: 8px 15px;
font-size: 11px; font-size: 11px;
@@ -692,7 +686,6 @@ export default {
position: static; position: static;
padding: 15px 0; padding: 15px 0;
background: white; background: white;
box-shadow: 0 -2px 12px rgba(0,0,0,0.05);
} }
/* 输入框自适应 */ /* 输入框自适应 */
main/manager-web/src/views/DictManagement.vue
+32 -16
View File
@@ -49,9 +49,13 @@
v-loading="dictDataLoading" element-loading-text="拼命加载中" v-loading="dictDataLoading" element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.7)" element-loading-background="rgba(255, 255, 255, 0.7)"
@selection-change="handleDictDataSelectionChange" class="data-table" class="data-table"
header-row-class-name="table-header"> header-row-class-name="table-header">
<el-table-column type="selection" width="55" align="center"></el-table-column> <el-table-column label="选择" align="center" width="55">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.selected"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="字典标签" prop="dictLabel" align="center"></el-table-column> <el-table-column label="字典标签" prop="dictLabel" align="center"></el-table-column>
<el-table-column label="字典值" prop="dictValue" align="center"></el-table-column> <el-table-column label="字典值" prop="dictValue" align="center"></el-table-column>
<el-table-column label="排序" prop="sort" align="center"></el-table-column> <el-table-column label="排序" prop="sort" align="center"></el-table-column>
@@ -153,7 +157,6 @@ export default {
// 字典数据相关 // 字典数据相关
dictDataList: [], dictDataList: [],
dictDataLoading: false, dictDataLoading: false,
selectedDictData: [],
isAllDictDataSelected: false, isAllDictDataSelected: false,
dictDataDialogVisible: false, dictDataDialogVisible: false,
dictDataDialogTitle: '新增字典数据', dictDataDialogTitle: '新增字典数据',
@@ -265,7 +268,10 @@ export default {
dictValue: '' dictValue: ''
}, ({ data }) => { }, ({ data }) => {
if (data.code === 0) { if (data.code === 0) {
this.dictDataList = data.data.list this.dictDataList = data.data.list.map(item => ({
...item,
selected: false
}))
this.total = data.data.total this.total = data.data.total
} else { } else {
this.$message.error(data.msg || '获取字典数据失败') this.$message.error(data.msg || '获取字典数据失败')
@@ -273,16 +279,11 @@ export default {
this.dictDataLoading = false this.dictDataLoading = false
}) })
}, },
handleDictDataSelectionChange(val) {
this.selectedDictData = val
this.isAllDictDataSelected = val.length === this.dictDataList.length
},
selectAllDictData() { selectAllDictData() {
if (this.isAllDictDataSelected) { this.isAllDictDataSelected = !this.isAllDictDataSelected
this.$refs.dictDataTable.clearSelection() this.dictDataList.forEach(row => {
} else { row.selected = this.isAllDictDataSelected
this.$refs.dictDataTable.toggleAllSelection() })
}
}, },
showAddDictDataDialog() { showAddDictDataDialog() {
if (!this.selectedDictType) { if (!this.selectedDictType) {
@@ -329,17 +330,18 @@ export default {
}) })
}, },
batchDeleteDictData() { batchDeleteDictData() {
if (this.selectedDictData.length === 0) { const selectedRows = this.dictDataList.filter(row => row.selected)
if (selectedRows.length === 0) {
this.$message.warning('请选择要删除的字典数据') this.$message.warning('请选择要删除的字典数据')
return return
} }
this.$confirm('确定要删除选中的字典数据吗?', '提示', { this.$confirm(`确定要删除选中的${selectedRows.length}个字典数据吗?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
const ids = this.selectedDictData.map(item => item.id) const ids = selectedRows.map(item => item.id)
dictApi.deleteDictData(ids, ({ data }) => { dictApi.deleteDictData(ids, ({ data }) => {
if (data.code === 0) { if (data.code === 0) {
this.$message.success('删除成功') this.$message.success('删除成功')
@@ -832,4 +834,18 @@ export default {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
} }
:deep(.el-checkbox__inner) {
background-color: #eeeeee !important;
border-color: #cccccc !important;
}
:deep(.el-checkbox__inner:hover) {
border-color: #cccccc !important;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
background-color: #5f70f3 !important;
border-color: #5f70f3 !important;
}
</style> </style>
main/manager-web/src/views/roleConfig.vue
+6 -7
View File
@@ -318,7 +318,6 @@ export default {
<style scoped> <style scoped>
.welcome { .welcome {
min-width: 900px; min-width: 900px;
min-height: 506px;
height: 100vh; height: 100vh;
display: flex; display: flex;
position: relative; position: relative;
@@ -334,7 +333,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 16px 24px; padding: 1.5vh 24px;
} }
.page-title { .page-title {
@@ -344,7 +343,7 @@ export default {
} }
.main-wrapper { .main-wrapper {
margin: 5px 22px; margin: 1vh 22px;
border-radius: 15px; border-radius: 15px;
height: calc(100vh - 24vh); height: calc(100vh - 24vh);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
@@ -416,7 +415,7 @@ export default {
} }
.form-content { .form-content {
padding: 20px 0; padding: 2vh 0;
} }
.form-grid { .form-grid {
@@ -450,11 +449,11 @@ export default {
} }
.template-item { .template-item {
height: 37px; height: 4vh;
width: 76px; width: 76px;
border-radius: 8px; border-radius: 8px;
background: #e6ebff; background: #e6ebff;
line-height: 37px; line-height: 4vh;
font-weight: 400; font-weight: 400;
font-size: 11px; font-size: 11px;
text-align: center; text-align: center;
@@ -471,7 +470,7 @@ export default {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 8px;
margin-top: 20px; margin-top: 2vh;
align-items: center; align-items: center;
} }