diff --git a/node_modules/websocket-stream/node_modules/ws/lib/.DS_Store b/node_modules/websocket-stream/node_modules/ws/lib/.DS_Store new file mode 100644 index 0000000..6cee8b4 Binary files /dev/null and b/node_modules/websocket-stream/node_modules/ws/lib/.DS_Store differ diff --git a/src/pages_mine/pages/system/config/addEdit.vue b/src/pages_mine/pages/system/config/addEdit.vue index 62afb08..0a1da6b 100644 --- a/src/pages_mine/pages/system/config/addEdit.vue +++ b/src/pages_mine/pages/system/config/addEdit.vue @@ -13,30 +13,30 @@ :labelStyle="{ color: '#333333', fontSize: '30rpx' }"> + inputAlign="left" :customStyle="getInputStyle('configName')"> + inputAlign="left" :customStyle="getInputStyle('configKey')"> + inputAlign="left" :customStyle="getInputStyle('configValue')"> - - + + + + - + @@ -71,6 +71,32 @@ const form = reactive({ remark: undefined }) +// 表单验证错误字段 +const errorFields = ref([]) + +// 输入框基础样式 +const inputBaseStyle = { + background: '#ffffff', + border: '2rpx solid #dcdfe6', + borderRadius: '8rpx', + padding: '0 24rpx', + height: '68rpx' +} + +// 输入框错误样式 +const inputErrorStyle = { + background: '#fef0f0', + border: '2rpx solid #f56c6c', + borderRadius: '8rpx', + padding: '0 24rpx', + height: '68rpx' +} + +// 根据字段名获取输入框样式 +const getInputStyle = (field) => { + return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle +} + const rules = { configName: [ { required: true, message: '参数名称不能为空', trigger: ['blur', 'change'] } @@ -124,6 +150,7 @@ function handleTypeConfirm(e) { // 提交 function submit() { + errorFields.value = [] // 清空错误字段 console.log('submit 被调用') proxy.$refs['uForm'].validate().then(() => { console.log('验证通过', form.configId) @@ -148,7 +175,11 @@ function submit() { }) }) } - }).catch(() => { + }).catch((errors) => { + // 记录验证失败的字段 + if (errors && Array.isArray(errors)) { + errorFields.value = errors.map(err => err.field || err.prop) + } console.log('验证失败') proxy.$refs['uToast'].show({ type: 'error', @@ -199,6 +230,20 @@ function submit() { } } } + +.select-input-wrapper { + position: relative; + + .select-arrow { + position: absolute; + right: 24rpx; + top: 50%; + transform: translateY(-50%); + color: #c0c4cc; + font-size: 28rpx; + pointer-events: none; + } +} diff --git a/src/static/scss/global.scss b/src/static/scss/global.scss index ac636bd..b4f0cb1 100644 --- a/src/static/scss/global.scss +++ b/src/static/scss/global.scss @@ -88,3 +88,117 @@ } } } + + // ==================== 表单样式(参考PC端Element UI)==================== + + // 表单容器样式 + .form-view { + // 表单项间距 + :deep(.u-form-item) { + margin-bottom: 5rpx; + position: relative; + } + + // 优化必填标识 + :deep(.u-form-item__body__left__content__required) { + color: #f56c6c !important; + font-size: 32rpx !important; + margin-right: 8rpx !important; + font-weight: 500 !important; + } + + // label文字完整显示 + :deep(.u-form-item__body__left__content__label) { + min-width: 160rpx !important; + flex-shrink: 0 !important; + } + + // 错误提示文字隐藏,只通过边框变红提示 + :deep(.u-form-item__body__right__message) { + display: none !important; + } + + // 统一输入框样式(参考PC端) + :deep(.u--input) { + background: #ffffff !important; + border: 2rpx solid #dcdfe6 !important; + border-radius: 8rpx !important; + transition: all 0.3s ease !important; + } + + :deep(.form-input) { + background: #ffffff !important; + border: 2rpx solid #dcdfe6 !important; + border-radius: 8rpx !important; + padding: 0 24rpx !important; + padding-right: 80rpx !important; + height: 68rpx !important; + transition: all 0.3s ease !important; + } + + // 错误状态输入框边框变红 - 使用多种可能的类名 + :deep(.u-form-item--error), + :deep(.is-error), + :deep([aria-invalid="true"]) { + .form-input, + .u--input, + .u-input, + .u-input__content__field-wrapper { + border: 2rpx solid #f56c6c !important; + background: #fef0f0 !important; + } + } + + // 通过属性选择器强制设置 + :deep(.u--input[class*="form-input"]) { + border: 2rpx solid #dcdfe6 !important; + } + + :deep(.u-form-item--error .u--input[class*="form-input"]), + :deep(.is-error .u--input[class*="form-input"]) { + border: 2rpx solid #f56c6c !important; + background: #fef0f0 !important; + } + + // 统一备注框样式(参考PC端) + :deep(.form-textarea) { + background: #ffffff !important; + border: 2rpx solid #dcdfe6 !important; + border-radius: 8rpx !important; + padding: 20rpx !important; + min-height: 160rpx !important; + transition: all 0.3s ease !important; + + &:focus { + border-color: #409eff !important; + } + } + + // 错误状态备注框变红 + :deep(.u-form-item--error .form-textarea) { + border-color: #f56c6c !important; + } + + // 下拉箭头放到输入框内部右侧 + :deep(.u-form-item__body__right) { + position: absolute !important; + right: 24rpx !important; + top: 50% !important; + transform: translateY(-50%) !important; + z-index: 10 !important; + pointer-events: none !important; + } + + // 下拉箭头在输入框右侧内部 + :deep(.u-form-item__body__right .u-icon) { + color: #c0c4cc !important; + font-size: 28rpx !important; + } + + // 统一图标颜色 + :deep(.u-icon) { + color: #909399 !important; + } + } + +