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;
+ }
+ }
+
+