页面优化

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