style(knowledge): 优化元数据组件样式和功能

- 修改元数据对话框样式,使用自定义 r-dialog 组件
-增加元数据名称验证规则,只能包含小写字母、数字和下划线
- 根据元数据类型动态显示不同输入组件
- 优化时间选择器和数字输入框的展示逻辑
- 调整元数据类型选择样式,使用 span 替代 div
- 增加按钮和输入框的样式定制
This commit is contained in:
陈昱达
2025-05-13 14:19:30 +08:00
parent d0ebd0a925
commit e83360aead
5 changed files with 157 additions and 12 deletions

View File

@@ -109,6 +109,25 @@
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
} }
&.is-active {
color: $--color-primary;
border-color: $--color-primary;
}
&.is-plain {
&:active {
color: $--color-primary;
border-color: $--color-primary;
}
&:focus {
color: $--color-primary;
border-color: $--color-primary;
}
&:hover {
color: $--color-primary;
border-color: $--color-primary;
}
}
} }
.el-button--text { .el-button--text {

View File

@@ -283,3 +283,66 @@
color: $--color-primary; color: $--color-primary;
} }
} }
.el-time-panel__btn {
&.confirm {
color: $--color-primary;
}
}
.el-date-picker__header-label {
&.active {
color: $--color-primary;
}
&:hover {
color: $--color-primary;
}
}
.el-date-table {
& td {
&.current {
&:not(.disabled) {
& span {
background-color: $--color-primary;
}
}
}
}
}
.el-year-table,
.el-year-table {
& td {
&.current {
&:not(.disabled) {
& .cell {
color: $--color-primary;
}
}
}
& .cell {
&:hover {
color: $--color-primary;
}
}
&.today {
& .cell {
color: $--color-primary;
}
}
}
}
.el-month-table {
& td {
& .cell {
&:hover {
color: $--color-primary;
}
}
}
}
.el-picker-panel__icon-btn {
&:hover {
color: $--color-primary;
}
}

View File

@@ -67,7 +67,7 @@
<!-- </li>--> <!-- </li>-->
<!-- </ul>--> <!-- </ul>-->
<!-- 新增元数据对话框 --> <!-- 新增元数据对话框 -->
<el-dialog <r-dialog
:title="isEdit ? '编辑元数据' : '新增元数据'" :title="isEdit ? '编辑元数据' : '新增元数据'"
append-to-body append-to-body
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
@@ -76,7 +76,7 @@
<el-form :model="metaDataForm" label-width="80px" label-position="top" ref='form' :rules='rules'> <el-form :model="metaDataForm" label-width="80px" label-position="top" ref='form' :rules='rules'>
<el-form-item label="类型" v-if="!isEdit" prop="dataType"> <el-form-item label="类型" v-if="!isEdit" prop="dataType">
<div class="type-selection"> <div class="type-selection">
<div <span
v-for="type in typeOptions" v-for="type in typeOptions"
:key="type" :key="type"
class="type-option" class="type-option"
@@ -84,13 +84,14 @@
@click="chooseMetaData(type)" @click="chooseMetaData(type)"
> >
{{ type }} {{ type }}
</div> </span>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="名称" prop='metadataKey'> <el-form-item label="名称" prop='metadataKey'>
<el-input <el-input
v-model="metaDataForm.metadataKey" v-model="metaDataForm.metadataKey"
placeholder="请输入元数据名称" placeholder="请输入元数据名称"
size='medium'
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -100,7 +101,7 @@
>保存</el-button >保存</el-button
> >
</div> </div>
</el-dialog> </r-dialog>
</div> </div>
</template> </template>
@@ -119,7 +120,10 @@ export default {
rules:{ rules:{
metadataKey: [ metadataKey: [
{ required: true, message: '请输入元数据名称', trigger: 'blur' }, { required: true, message: '请输入元数据名称', trigger: 'blur' },
] , dataType: [ // 元数据名称只能包含小写字母、数字和下划线,并且必须以小写字母开头
{ pattern: /^[a-z][a-z0-9_]*$/, message: '元数据名称只能包含小写字母、数字和下划线,并且必须以小写字母开头', trigger: 'blur' }
],
dataType: [
{ required: true, message: '请选择元数据类型', trigger: 'blur' }, { required: true, message: '请选择元数据类型', trigger: 'blur' },
] ]
}, },
@@ -156,6 +160,9 @@ export default {
this.getMetadata() this.getMetadata()
}, },
chooseMetaData(type) { chooseMetaData(type) {
switch (type){}
this.metaDataForm.dataType = type this.metaDataForm.dataType = type
this.metaDataForm = JSON.parse(JSON.stringify(this.metaDataForm)) this.metaDataForm = JSON.parse(JSON.stringify(this.metaDataForm))
}, },
@@ -300,7 +307,8 @@ export default {
.type-selection { .type-selection {
display: flex; display: flex;
.type-option { .type-option {
padding: 0 16px; line-height: 15px!important;
padding: 6px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
border-radius: 4px; border-radius: 4px;
margin-right: 10px; margin-right: 10px;

View File

@@ -80,14 +80,35 @@
</el-select> </el-select>
</div> </div>
<div class="form-item"> <div class="form-item" v-if="dataType">
<label class="form-label">元数据值</label> <label class="form-label">元数据值</label>
<el-input <el-input
v-if="dataType === 'String'"
v-model="dialog.metadataValue" v-model="dialog.metadataValue"
placeholder="请输入元数据值" placeholder="请输入元数据值"
class="full-width" class="full-width"
size="medium" size="medium"
></el-input> ></el-input>
<el-input
v-if="dataType === 'Number'"
v-model="dialog.metadataValue"
placeholder="请输入元数据值"
class="full-width"
size="medium"
type="number"
></el-input>
<el-date-picker
v-if="dataType === 'Time'"
v-model="dialog.metadataValue"
type="datetime"
placeholder="请输入元数据值"
class="full-width"
value-format="yyyy-MM-dd HH:mm:ss"
size="medium"
></el-date-picker>
</div> </div>
<div class="form-actions"> <div class="form-actions">
@@ -132,14 +153,34 @@
></el-input> ></el-input>
</div> </div>
<div class="form-item"> <div class="form-item" v-if="dataType">
<label class="form-label">元数据值</label> <label class="form-label">元数据值</label>
<el-input <el-input
v-if="dataType === 'String'"
v-model="editDialog.metadataValue" v-model="editDialog.metadataValue"
placeholder="请输入元数据值" placeholder="请输入元数据值"
class="full-width" class="full-width"
size="medium" size="medium"
></el-input> ></el-input>
<el-input
v-if="dataType === 'Number'"
v-model="editDialog.metadataValue"
placeholder="请输入元数据值"
class="full-width"
size="medium"
type="number"
></el-input>
<el-date-picker
v-if="dataType === 'Time'"
v-model="editDialog.metadataValue"
type="datetime"
placeholder="请输入元数据值"
class="full-width"
value-format="yyyy-MM-dd HH:mm:ss"
size="medium"
></el-date-picker>
</div> </div>
<div class="form-actions"> <div class="form-actions">
@@ -169,6 +210,7 @@ import {
updateMetaDataDoc updateMetaDataDoc
} from '@/api/generatedApi' } from '@/api/generatedApi'
import MeteData from '@/views/knowledge/detail/components/metaData/Index.vue' import MeteData from '@/views/knowledge/detail/components/metaData/Index.vue'
import { data } from 'autoprefixer'
export default { export default {
name: 'MetadataOperator', name: 'MetadataOperator',
@@ -176,6 +218,7 @@ export default {
data() { data() {
return { return {
isShowOperator: false, isShowOperator: false,
dataType: '',
docList: [], docList: [],
dialog: { dialog: {
visible: false, visible: false,
@@ -196,6 +239,7 @@ export default {
}, },
created() {}, created() {},
methods: { methods: {
data,
init(id) { init(id) {
this.documentId = id this.documentId = id
this.getDocList() this.getDocList()
@@ -251,6 +295,7 @@ export default {
this.editDialog.metadataKey = item.metadataKey this.editDialog.metadataKey = item.metadataKey
this.editDialog.metadataValue = item.metadataValue this.editDialog.metadataValue = item.metadataValue
this.editDialog.metadataId = item.metadataId this.editDialog.metadataId = item.metadataId
this.dataType = item.dataType
}, },
infoConfirm() { infoConfirm() {
// 处理确认逻辑 // 处理确认逻辑
@@ -277,7 +322,11 @@ export default {
this.$emit('close') this.$emit('close')
this.$emit('openMetaDrawer') this.$emit('openMetaDrawer')
}, },
handleSelectChange(value) {}, handleSelectChange(value) {
this.dataType = this.list.find(item => {
return item.id === value
}).dataType
},
// //
showMeta() { showMeta() {
this.$refs.metaData.addMetaData() this.$refs.metaData.addMetaData()

View File

@@ -1,5 +1,5 @@
<template> <template>
<el-dialog <r-dialog
:title="title" :title="title"
:visible.sync="visible" :visible.sync="visible"
width="800px" width="800px"
@@ -122,7 +122,7 @@
<div slot="footer" class="dialog-footer" v-else> <div slot="footer" class="dialog-footer" v-else>
<el-button size="small" @click="handleClose"> </el-button> <el-button size="small" @click="handleClose"> </el-button>
</div> </div>
</el-dialog> </r-dialog>
</template> </template>
<script> <script>
@@ -164,7 +164,13 @@ export default {
}, },
rules: { rules: {
menuCode: [ menuCode: [
{ required: true, message: '请输入菜单编码', trigger: 'blur' } { required: true, message: '请输入菜单编码', trigger: 'blur' },
// 纯数字
{
pattern: /^[0-9]*$/,
message: '菜单编码只能输入数字',
trigger: 'blur'
}
], ],
menuName: [ menuName: [
{ required: true, message: '请输入菜单名称', trigger: 'blur' } { required: true, message: '请输入菜单名称', trigger: 'blur' }