动态表单

2025-12-08 18:18:13 +08:00
parent 4f1f455660
commit fa3ef3c310
6 changed files with 1155 additions and 5 deletions
--- a/urbanLifelineWeb/packages/shared/src/components/dynamicComponent/DynamicComponent.scss
+++ b/urbanLifelineWeb/packages/shared/src/components/dynamicComponent/DynamicComponent.scss
@@ -0,0 +1,180 @@
+.dynamic-component {
+    width: 100%;
+
+    // Element Plus 表单项适配
+    :deep(.el-form-item) {
+        margin-bottom: 18px;
+
+        .el-form-item__label {
+            font-weight: 500;
+            color: #606266;
+            font-size: 14px;
+        }
+
+        .el-form-item__content {
+            .el-input,
+            .el-select,
+            .el-date-editor,
+            .el-time-picker,
+            .el-cascader,
+            .el-tree-select {
+                width: 100%;
+            }
+
+            // 数字输入框
+            .el-input-number {
+                width: 100%;
+                
+                .el-input__wrapper {
+                    width: 100%;
+                }
+            }
+
+            // 复选框组和单选框组
+            .el-checkbox-group,
+            .el-radio-group {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 16px;
+
+                .el-checkbox,
+                .el-radio {
+                    margin-right: 0;
+                }
+            }
+
+            // 开关组件
+            .el-switch {
+                .el-switch__label {
+                    font-size: 14px;
+                    color: #606266;
+                }
+            }
+
+            // 滑块组件
+            .el-slider {
+                .el-slider__input {
+                    width: 130px;
+                }
+            }
+
+            // 评分组件
+            .el-rate {
+                display: flex;
+                align-items: center;
+                
+                .el-rate__text {
+                    margin-left: 8px;
+                    font-size: 14px;
+                    color: #606266;
+                }
+            }
+
+            // 颜色选择器
+            .el-color-picker {
+                .el-color-picker__trigger {
+                    border: 1px solid #dcdfe6;
+                    border-radius: 4px;
+                    
+                    &:hover {
+                        border-color: #c0c4cc;
+                    }
+                }
+            }
+
+            // 上传组件
+            .el-upload {
+                &.upload-demo {
+                    .el-upload__tip {
+                        margin-top: 8px;
+                        font-size: 12px;
+                        color: #909399;
+                    }
+                }
+            }
+
+            // 级联选择器
+            .el-cascader {
+                .el-cascader__tags {
+                    max-width: 100%;
+                }
+            }
+
+            // 树形选择
+            .el-tree-select {
+                .el-tree-select__tags {
+                    max-width: 100%;
+                }
+            }
+        }
+
+        // 错误状态样式
+        &.is-error {
+            .el-input__wrapper,
+            .el-select__wrapper,
+            .el-date-editor,
+            .el-cascader__wrapper,
+            .el-tree-select__wrapper {
+                box-shadow: 0 0 0 1px #f56565 inset;
+            }
+        }
+
+        // 必填标记
+        &.is-required {
+            .el-form-item__label::before {
+                content: '*';
+                color: #f56565;
+                margin-right: 4px;
+            }
+        }
+    }
+
+    // 描述信息图标
+    .description-icon {
+        margin-left: 4px;
+        color: #909399;
+        cursor: help;
+        font-size: 14px;
+
+        &:hover {
+            color: #409eff;
+        }
+    }
+
+    // 自定义样式调整
+    .el-form-item__content {
+        // 确保组件占满宽度
+        .el-input,
+        .el-select,
+        .el-date-editor,
+        .el-cascader,
+        .el-tree-select {
+            width: 100% !important;
+        }
+
+        // 日期范围选择器特殊处理
+        .el-date-editor--daterange,
+        .el-date-editor--datetimerange {
+            width: 100% !important;
+        }
+
+        // 多选标签折叠样式
+        .el-tag {
+            margin-right: 6px;
+            margin-bottom: 4px;
+        }
+    }
+
+    // 响应式设计
+    @media (max-width: 768px) {
+        :deep(.el-form-item) {
+            .el-form-item__content {
+                .el-checkbox-group,
+                .el-radio-group {
+                    flex-direction: column;
+                    gap: 12px;
+                }
+            }
+        }
+    }
+}