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

package/src/core/manager.js

@@ -84,13 +84,34 @@ export default {
       )
     })
 
-    // 预览模式下：对 upload 和 wangEditor 组件设置 disabled
+    // 预览模式下：对 upload 组件设置 disabled
+    // wangEditor 组件使用只读模式（readOnly），允许复制和点击链接
+    // textarea 组件使用只读模式（readOnly），允许复制和自适应高度
     // CusSelect 相关组件使用预览模式（通过 CSS 阻止交互，不置灰）
     if (this.$handle.preview === true) {
-      if (ctx.rule.type === 'upload' || ctx.rule.type === 'fcEditor') {
+      if (ctx.rule.type === 'upload') {
         if (ctx.prop.props) {
           ctx.prop.props.disabled = true
         }
+      } else if (ctx.rule.type === 'fcEditor') {
+        // wangEditor 使用只读模式，不设置 disabled
+        // 只读模式允许复制和点击链接，但禁止编辑
+        if (ctx.prop.props) {
+          ctx.prop.props.readOnly = true
+        }
+      } else if (
+        ctx.rule.type === 'input' &&
+        ctx.prop.props?.type === 'textarea'
+      ) {
+        // textarea 使用只读模式，不设置 disabled
+        // 只读模式允许复制，但禁止编辑
+        if (ctx.prop.props) {
+          ctx.prop.props.readOnly = true
+          // 完全自适应高度，不限制最大高度
+          ctx.prop.props.autoSize = true
+          // 移除 rows 属性，让 autoSize 完全控制高度
+          delete ctx.prop.props.rows
+        }
       }
     }
 

package/src/parsers/alert.js

@@ -0,0 +1,17 @@
+export default {
+  name: 'aAlert',
+  // Alert 是非输入组件，不需要 modelField
+  mergeProp(ctx) {
+    const props = ctx.prop.props || {}
+    // 如果没有 message 但有 description，将 description 作为 message
+    // 这样 Alert 会显示为小的样式（只有 message，没有 description）
+    if ((!props.message || props.message === '') && props.description) {
+      props.message = props.description
+      delete props.description
+    }
+  },
+  render(children, ctx) {
+    // 使用默认渲染，通过 alias 映射到 aAlert 组件
+    return ctx.$render.defaultRender(ctx, children)
+  }
+}

package/src/parsers/index.js

@@ -17,6 +17,7 @@ import flex from './flex'
 import space from './space'
 import spin from './spin'
 import div from './div'
+import alert from './alert'
 import accTable from './accTable'
 
 export default [
@@ -39,5 +40,6 @@ export default [
   space,
   spin,
   div,
+  alert,
   accTable
 ]

package/src/parsers/input.js

@@ -26,5 +26,66 @@ export default {
         password: 'aInputPassword'
       }[type] || 'aInput'
     return ctx.$render.vNode.make(type, ctx.prop, children)
+  },
+  mounted(ctx) {
+    // 预览模式下，为 textarea 设置自适应高度
+    if (
+      ctx.prop.props?.type === 'textarea' &&
+      ctx.prop.props?.readOnly &&
+      ctx.$handle?.preview === true
+    ) {
+      const adjustTextareaHeight = (textareaEl) => {
+        if (!textareaEl) return
+        // 重置高度，然后设置为 scrollHeight
+        textareaEl.style.height = 'auto'
+        const scrollHeight = textareaEl.scrollHeight
+        if (scrollHeight > 0) {
+          textareaEl.style.height = scrollHeight + 'px'
+        }
+        textareaEl.style.overflow = 'hidden'
+      }
+
+      // 延迟执行，确保 DOM 已完全渲染
+      setTimeout(() => {
+        const el = ctx.el
+        if (!el) return
+
+        // 查找 textarea 元素
+        const textarea =
+          el.querySelector('textarea.ant-input') || el.querySelector('textarea')
+        if (!textarea) return
+
+        // 首次调整高度
+        adjustTextareaHeight(textarea)
+
+        // 使用 MutationObserver 监听内容变化
+        if (typeof MutationObserver !== 'undefined') {
+          const observer = new MutationObserver(() => {
+            adjustTextareaHeight(textarea)
+          })
+
+          observer.observe(textarea, {
+            attributes: true,
+            attributeFilter: ['value'],
+            childList: true,
+            subtree: true,
+            characterData: true
+          })
+
+          // 定期检查并调整（备用方案）
+          const intervalId = setInterval(() => {
+            adjustTextareaHeight(textarea)
+          }, 200)
+
+          // 在组件销毁时清理
+          if (ctx.$handle && ctx.$handle.vm) {
+            ctx.$handle.vm.$once('hook:beforeUnmount', () => {
+              observer.disconnect()
+              clearInterval(intervalId)
+            })
+          }
+        }
+      }, 100)
+    }
   }
 }

package/src/style/index.css

@@ -57,7 +57,11 @@
 .form-create.is-preview .ant-textarea,
 .form-create.is-preview .ant-upload,
 .form-create.is-preview .ant-upload-list,
-.form-create.is-preview .ant-upload-list-item {
+.form-create.is-preview .ant-upload-list-item,
+.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 {
   border: none !important;
   box-shadow: none !important;
   background: transparent !important;
@@ -69,7 +73,10 @@
 .form-create.is-preview .ant-picker:focus,
 .form-create.is-preview .ant-cascader-picker:focus,
 .form-create.is-preview .ant-input-password:focus,
-.form-create.is-preview .ant-textarea:focus {
+.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 {
   border: none !important;
   box-shadow: none !important;
   outline: none !important;
@@ -81,11 +88,30 @@
 .form-create.is-preview .ant-picker:hover,
 .form-create.is-preview .ant-cascader-picker:hover,
 .form-create.is-preview .ant-input-password:hover,
-.form-create.is-preview .ant-textarea: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 {
   border: none !important;
   box-shadow: none !important;
 }
 
+/* 预览模式：移除所有 input 相关元素的边框（更全面的覆盖） */
+.form-create.is-preview .ant-input-affix-wrapper,
+.form-create.is-preview .ant-input-affix-wrapper:hover,
+.form-create.is-preview .ant-input-affix-wrapper-focused,
+.form-create.is-preview .ant-input-affix-wrapper-disabled,
+.form-create.is-preview .ant-input-wrapper .ant-input,
+.form-create.is-preview .ant-input-group-addon,
+.form-create.is-preview .ant-input-group .ant-input,
+.form-create.is-preview input.ant-input,
+.form-create.is-preview textarea.ant-input {
+  border: none !important;
+  border-width: 0 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background: transparent !important;
+}
+
 /* 隐藏字数限制等提示信息 */
 .form-create.is-preview .ant-input-character-count,
 .form-create.is-preview .ant-textarea-character-count,
@@ -117,6 +143,16 @@
   pointer-events: none !important;
 }
 
+/* 预览模式：允许 textarea 交互（用于复制文本） */
+.form-create.is-preview textarea.ant-input {
+  pointer-events: auto !important;
+  user-select: text !important;
+  -webkit-user-select: text !important;
+  -moz-user-select: text !important;
+  -ms-user-select: text !important;
+  cursor: text !important;
+}
+
 /* 预览模式：允许富文本编辑器容器滚动 */
 .form-create.is-preview .w-e-text-container {
   pointer-events: auto !important;
@@ -273,6 +309,39 @@
   cursor: default !important;
 }
 
+/* 预览模式：textarea 自适应高度且只读可复制 */
+.form-create.is-preview textarea.ant-input,
+.form-create.is-preview .ant-textarea {
+  /* 允许文本选择，用于复制 */
+  user-select: text !important;
+  -webkit-user-select: text !important;
+  -moz-user-select: text !important;
+  -ms-user-select: text !important;
+  /* 允许交互，用于复制 */
+  pointer-events: auto !important;
+  cursor: text !important;
+  /* 移除滚动条（因为内容会自适应显示） */
+  overflow: hidden !important;
+  overflow-y: hidden !important;
+  overflow-x: hidden !important;
+  /* 确保只读状态下仍可正常显示和选择 */
+  resize: none !important;
+  /* 确保 textarea 能够根据内容自动调整高度 */
+  box-sizing: border-box !important;
+  /* 移除固定高度限制，让 JavaScript 动态设置 */
+  min-height: auto !important;
+  max-height: none !important;
+}
+
+/* 预览模式：textarea 只读状态样式 */
+.form-create.is-preview textarea.ant-input[readonly],
+.form-create.is-preview .ant-textarea[readonly] {
+  opacity: 1 !important;
+  color: inherit !important;
+  background-color: transparent !important;
+  cursor: text !important;
+}
+
 /* 预览模式：防止选择器显示为禁用状态 */
 .form-create.is-preview .ant-select-disabled .ant-select-selector {
   opacity: 1 !important;
@@ -314,7 +383,7 @@
   max-height: none !important;
 }
 
-/* 富文本内容不可编辑，但允许容器滚动 */
+/* 富文本内容只读：允许选择文本和点击链接，但禁止编辑 */
 .form-create.is-preview .w-e-text p,
 .form-create.is-preview .w-e-text div,
 .form-create.is-preview .w-e-text span,
@@ -327,19 +396,47 @@
 .form-create.is-preview .w-e-text h4,
 .form-create.is-preview .w-e-text h5,
 .form-create.is-preview .w-e-text h6,
-.form-create.is-preview .w-e-text a,
-.form-create.is-preview .w-e-text img,
 .form-create.is-preview .w-e-text table,
 .form-create.is-preview .w-e-text tr,
 .form-create.is-preview .w-e-text td,
 .form-create.is-preview .w-e-text th {
-  pointer-events: none !important;
+  /* 允许文本选择，用于复制 */
+  user-select: text !important;
+  -webkit-user-select: text !important;
+  -moz-user-select: text !important;
+  -ms-user-select: text !important;
+  /* 阻止编辑，但不阻止交互 */
+  pointer-events: auto !important;
+}
+
+/* 允许链接可以点击 */
+.form-create.is-preview .w-e-text a {
+  pointer-events: auto !important;
+  cursor: pointer !important;
+  user-select: text !important;
+  -webkit-user-select: text !important;
+  -moz-user-select: text !important;
+  -ms-user-select: text !important;
+  text-decoration: underline !important;
+}
+
+/* 允许图片可以查看 */
+.form-create.is-preview .w-e-text img {
+  pointer-events: auto !important;
   user-select: none !important;
   -webkit-user-select: none !important;
   -moz-user-select: none !important;
   -ms-user-select: none !important;
 }
 
+/* 禁止编辑：通过 contenteditable 属性控制 */
+.form-create.is-preview .w-e-text {
+  user-select: text !important;
+  -webkit-user-select: text !important;
+  -moz-user-select: text !important;
+  -ms-user-select: text !important;
+}
+
 /* 预览模式：禁用按钮点击 */
 .form-create.is-preview .ant-btn {
   pointer-events: none !important;