@longhongguo/form-create-ant-design-vue 3.3.7 → 3.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.3.07",
+  "version": "3.3.09",
   "description": "AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。",
   "main": "./dist/form-create.min.js",
   "module": "./dist/form-create.esm.js",

package/src/core/alias.js

@@ -43,6 +43,9 @@ export default {
   alert: PRE + 'Alert',
   aAlert: PRE + 'Alert',
   Alert: PRE + 'Alert',
+  card: PRE + 'Card',
+  aCard: PRE + 'Card',
+  Card: PRE + 'Card',
   accTable: PRE + 'Table',
   accTableTable: PRE + 'Table'
 }

package/src/core/manager.js

@@ -87,8 +87,15 @@ export default {
     // 预览模式下：对 upload 组件设置 disabled
     // wangEditor 组件使用只读模式（readOnly），允许复制和点击链接
     // textarea 组件使用只读模式（readOnly），允许复制和自适应高度
-    // CusSelect 相关组件使用预览模式（通过 CSS 阻止交互，不置灰）
-    if (this.$handle.preview === true) {
+    // select 组件使用 disabled 实现只读效果（通过 CSS 样式来保持外观）
+    // 如果组件单独设置了 readOnly 属性，也应用相同的预览模式逻辑
+    const isPreviewMode = this.$handle.preview === true
+    // 从 rule.props 或 ctx.prop.props 中读取 readOnly 属性
+    const isReadOnly =
+      ctx.rule.props?.readOnly === true || ctx.prop.props?.readOnly === true
+    const shouldApplyPreviewStyle = isPreviewMode || isReadOnly
+
+    if (shouldApplyPreviewStyle) {
       if (ctx.rule.type === 'upload') {
         if (ctx.prop.props) {
           ctx.prop.props.disabled = true
@@ -112,6 +119,25 @@ export default {
           // 移除 rows 属性，让 autoSize 完全控制高度
           delete ctx.prop.props.rows
         }
+      } else if (ctx.rule.type === 'select') {
+        // select 组件在预览模式下使用 disabled 实现只读效果
+        // 注意：Ant Design Vue 的 Select 组件不支持 readOnly 属性
+        // 所以在预览模式下使用 disabled，并通过 CSS 样式来保持外观
+        // 强制设置 disabled = true，覆盖用户可能设置的 disabled: false
+        if (ctx.prop.props) {
+          ctx.prop.props.disabled = true
+          // 如果原本设置了 readOnly，保留这个标记以便 CSS 识别
+          if (isReadOnly) {
+            // 可以在这里添加一个标记，但 Select 组件不支持 readOnly
+            // 所以我们通过 disabled 来实现，CSS 会处理样式
+          }
+        }
+      } else if (ctx.rule.type === 'input') {
+        // input 组件支持 readOnly 属性
+        // 如果设置了 readOnly，直接使用组件的 readOnly 属性
+        if (ctx.prop.props && isReadOnly) {
+          ctx.prop.props.readOnly = true
+        }
       }
     }
 

package/src/parsers/card.js

@@ -0,0 +1,38 @@
+export default {
+  name: 'aCard',
+  mergeProp(ctx) {
+    // 确保 children 存在
+    if (!ctx.rule.children) {
+      ctx.rule.children = []
+    }
+
+    // 为 Card 容器的所有子组件设置 col: false，避免被 a-col 包装
+    // 这样子组件可以直接作为 Card 的子元素
+    if (ctx.rule.children && Array.isArray(ctx.rule.children)) {
+      ctx.rule.children.forEach((child) => {
+        if (
+          child &&
+          typeof child === 'object' &&
+          child.type !== 'DragTool' &&
+          child.type !== 'DragBox'
+        ) {
+          // 只有当 col 未设置或为默认值时才设置
+          if (child.col === undefined || child.col === null) {
+            child.col = false
+          } else if (
+            child.col &&
+            typeof child.col === 'object' &&
+            child.col.show !== false
+          ) {
+            child.col.show = false
+          }
+        }
+      })
+    }
+  },
+  render(children, ctx) {
+    // 使用默认渲染，通过 alias 映射到 aCard 组件
+    return ctx.$render.defaultRender(ctx, children)
+  }
+}
+

package/src/parsers/index.js

@@ -18,6 +18,7 @@ import space from './space'
 import spin from './spin'
 import div from './div'
 import alert from './alert'
+import card from './card'
 import accTable from './accTable'
 
 export default [
@@ -41,5 +42,6 @@ export default [
   spin,
   div,
   alert,
+  card,
   accTable
 ]

package/src/parsers/select.js

@@ -17,6 +17,14 @@ export default {
       props.disabled = true
       props.loading = true
     }
+
+    // readOnly 属性的处理：如果设置了 readOnly，强制设置 disabled = true
+    // 从 rule.props 或 ctx.prop.props 中读取 readOnly
+    const isReadOnly =
+      ctx.rule.props?.readOnly === true || props.readOnly === true
+    if (isReadOnly) {
+      props.disabled = true
+    }
   },
   render(children, ctx) {
     // 检测 loading 状态（与 mergeProp 中的逻辑保持一致）

package/src/style/index.css

@@ -48,6 +48,7 @@
 }
 
 /* 移除组件边框 */
+/* 预览模式或只读模式的样式 */
 .form-create.is-preview .ant-input,
 .form-create.is-preview .ant-input-number,
 .form-create.is-preview .ant-select-selector,
@@ -61,7 +62,17 @@
 .form-create.is-preview .ant-input-wrapper,
 .form-create.is-preview .ant-input-affix-wrapper,
 .form-create.is-preview .ant-input-group-wrapper,
-.form-create.is-preview .ant-input-group {
+.form-create.is-preview .ant-input-group,
+/* 只读模式的样式（通过 readOnly 属性或 disabled 属性识别） */
+.ant-input[readonly],
+.ant-input[readonly] ~ .ant-input-wrapper,
+.ant-input[readonly] ~ .ant-input-affix-wrapper,
+.ant-textarea[readonly],
+.ant-select-disabled .ant-select-selector,
+.ant-picker-disabled,
+.ant-cascader-disabled .ant-cascader-picker,
+input[readonly].ant-input,
+textarea[readonly].ant-input {
   border: none !important;
   box-shadow: none !important;
   background: transparent !important;
@@ -76,7 +87,13 @@
 .form-create.is-preview .ant-textarea:focus,
 .form-create.is-preview .ant-input-wrapper:focus,
 .form-create.is-preview .ant-input-affix-wrapper:focus,
-.form-create.is-preview .ant-input-affix-wrapper-focused {
+.form-create.is-preview .ant-input-affix-wrapper-focused,
+/* 只读模式：移除焦点状态边框 */
+.ant-input[readonly]:focus,
+.ant-textarea[readonly]:focus,
+.ant-select-disabled.ant-select-focused .ant-select-selector,
+.ant-select-disabled:focus .ant-select-selector,
+.ant-picker-disabled:focus {
   border: none !important;
   box-shadow: none !important;
   outline: none !important;
@@ -90,7 +107,12 @@
 .form-create.is-preview .ant-input-password:hover,
 .form-create.is-preview .ant-textarea:hover,
 .form-create.is-preview .ant-input-wrapper:hover,
-.form-create.is-preview .ant-input-affix-wrapper:hover {
+.form-create.is-preview .ant-input-affix-wrapper:hover,
+/* 只读模式：移除悬停状态边框 */
+.ant-input[readonly]:hover,
+.ant-textarea[readonly]:hover,
+.ant-select-disabled:hover .ant-select-selector,
+.ant-picker-disabled:hover {
   border: none !important;
   box-shadow: none !important;
 }
@@ -280,7 +302,10 @@
 
 /* 预览模式：隐藏选择器的下拉箭头 */
 .form-create.is-preview .ant-select-arrow,
-.form-create.is-preview .ant-select-suffix {
+.form-create.is-preview .ant-select-suffix,
+/* 只读模式：隐藏选择器的下拉箭头 */
+.ant-select-disabled .ant-select-arrow,
+.ant-select-disabled .ant-select-suffix {
   display: none !important;
 }
 
@@ -302,7 +327,15 @@
 .form-create.is-preview .ant-input-number[disabled],
 .form-create.is-preview .ant-select-disabled,
 .form-create.is-preview .ant-picker-disabled,
-.form-create.is-preview .ant-textarea[disabled] {
+.form-create.is-preview .ant-textarea[disabled],
+/* 只读模式：防止输入框显示为禁用状态的灰色 */
+.ant-input[readonly],
+.ant-input[readonly][disabled],
+.ant-input-number[disabled],
+.ant-textarea[readonly],
+.ant-textarea[readonly][disabled],
+.ant-select-disabled,
+.ant-picker-disabled {
   opacity: 1 !important;
   color: inherit !important;
   background-color: transparent !important;
@@ -343,11 +376,15 @@
 }
 
 /* 预览模式：防止选择器显示为禁用状态 */
-.form-create.is-preview .ant-select-disabled .ant-select-selector {
+.form-create.is-preview .ant-select-disabled .ant-select-selector,
+/* 只读模式：防止选择器显示为禁用状态 */
+.ant-select-disabled .ant-select-selector {
   opacity: 1 !important;
   color: inherit !important;
   background-color: transparent !important;
   cursor: default !important;
+  border: none !important;
+  box-shadow: none !important;
 }
 
 /* 预览模式：防止日期选择器显示为禁用状态 */
@@ -444,7 +481,10 @@
 }
 
 /* 预览模式：禁用选择器下拉 */
-.form-create.is-preview .ant-select-dropdown {
+.form-create.is-preview .ant-select-dropdown,
+/* 只读模式：禁用选择器下拉 */
+.ant-select-disabled + .ant-select-dropdown,
+.ant-select.ant-select-disabled ~ .ant-select-dropdown {
   display: none !important;
 }