starfish-form-custom 1.0.43 → 1.0.45

package/src/components/RichText/index.vue

@@ -12,27 +12,28 @@
       </el-tooltip>
     </div>
     <div class="control" :style="{marginLeft: labelalign != 'top'?labelWidth + 'px': ''}">
-      <div class="rich-text-editor">
-        <!-- 使用 MenuBar 组件 -->
-        <MenuBar v-if="editor && !readonly" :editor="editor" />
-        <div ref="editorContainer" class="editor-content"></div>
+      <div class="rich-text-editor" @click.stop>
+        <QuillEditor 
+          ref="quillEditorRef"
+          theme="snow" 
+          :content="content" 
+          @update:content="handleContentChange"
+          toolbar="full" 
+          :read-only="isReadonly" 
+          class="editor-content" 
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref, onUnmounted, watch, nextTick } from "vue";
-import { Editor } from '@tiptap/vue-3';
-import StarterKit from '@tiptap/starter-kit'
-import Code from '@tiptap/extension-code'
-import Blockquote from '@tiptap/extension-blockquote'
-import HorizontalRule from '@tiptap/extension-horizontal-rule'
-import CodeBlock from '@tiptap/extension-code-block'
+import { defineComponent, ref, computed, watch } from "vue";
+import { QuillEditor } from '@vueup/vue-quill'
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
 import { getFormConfig } from "../../utils/fieldConfig";
 import fieldProps from "../../utils/fieldProps";
 import { useWatch } from "../../utils/customHooks";
-import MenuBar from "./MenuBar.vue"; // 导入 MenuBar 组件
 
 export default defineComponent({
   ControlType: "RichText",
@@ -43,225 +44,77 @@ export default defineComponent({
     ...fieldProps,
   },
   components: {
-    MenuBar
+    QuillEditor
   },
   setup(props) {
-    const editorRef = ref<Editor | null>(null);
-    const editorContainer = ref<HTMLElement | null>(null);
+    useWatch(props);
+    const quillEditorRef = ref();
+    const content = ref(props.data[props.item.data.fieldName] || props.item.data.default || '');
     
-    // 1. 不使用 useWatch（避免深度监听循环）
-    // useWatch(props);
-    
-    // 2. 使用标记避免重复触发
-    let isUpdatingFromExternal = false;
-    
-    const initEditor = () => {
-      if (editorRef.value) {
-        editorRef.value.destroy();
-      }
-      
-      const initialContent = props.data[props.item.data.fieldName] || props.item.data.defaultValue || '';
-      
-      editorRef.value = new Editor({
-        element: editorContainer.value!,
-        content: initialContent,
-        extensions: [
-          StarterKit.configure({
-            codeBlock: {
-              HTMLAttributes: {
-                class: 'code-block',
-              },
-            },
-          }),
-          Code.configure({
-          HTMLAttributes: {
-            class: 'inline-code',
-          },
-        }),
-        CodeBlock.configure({
-          HTMLAttributes: {
-            class: 'code-block',
-          },
-        }),
-        Blockquote.configure({
-          HTMLAttributes: {
-            class: 'blockquote',
-          },
-        }),
-        HorizontalRule,
-        ],
-        editable: !props.readonly,
-        editorProps: {
-          attributes: {
-            class: 'prose focus:outline-none max-w-none',
-            style: 'min-height: 200px; border: 1px solid #DCDFE6; padding: 8px 12px; background-color: #fff;'
-          }
-        },
-        onUpdate: ({ editor }) => {
-          if (isUpdatingFromExternal) return;
-          
-          const html = editor.getHTML();
-          console.log('富文本内容更新:', html.substring(0, 50) + '...');
-          
-          // 直接赋值到表单数据
-          props.data[props.item.data.fieldName] = html;
-        },
-        onBlur: ({ editor }) => {
-          const html = editor.getHTML();
-          props.data[props.item.data.fieldName] = html;
-        }
-      });
-    };
-    
-    // 3. 监听外部数据变化（从表单设置值）
-    watch(
-      () => props.data[props.item.data.fieldName],
-      (newValue) => {
-        if (!editorRef.value || editorRef.value.isDestroyed) return;
-        
-        const currentHtml = editorRef.value.getHTML();
-        if (currentHtml !== newValue) {
-          console.log('外部数据变化，更新编辑器');
-          isUpdatingFromExternal = true;
-          try {
-            editorRef.value.commands.setContent(newValue || '', false);
-          } catch (error) {
-            console.error('更新编辑器内容失败:', error);
-          } finally {
-            // 短暂延迟后重置标记
-            setTimeout(() => {
-              isUpdatingFromExternal = false;
-            }, 10);
-          }
-        }
-      },
-      { immediate: true }
+    // 计算只读状态
+    const isReadonly = computed(() => 
+      props.readonly || props.item.data.state === 'readonly'
     );
     
-    // 4. 监听只读状态
-    watch(() => props.readonly, (newVal) => {
-      if (editorRef.value && !editorRef.value.isDestroyed) {
-        editorRef.value.setEditable(!newVal);
-      }
-    });
-    
-    onMounted(() => {
-      nextTick(() => {
-        initEditor();
-      });
-    });
+    // 处理内容变化
+    const handleContentChange = (value: string) => {
+      content.value = value;
+      // 更新父组件数据
+      props.data[props.item.data.fieldName] = value;
+    };
     
-    onUnmounted(() => {
-      console.log("富文本销毁");
-      if (editorRef.value) {
-        editorRef.value.destroy();
-        editorRef.value = null;
+    // 监听外部数据变化
+    watch(() => props.data[props.item.data.fieldName], (newValue) => {
+      if (newValue !== content.value) {
+        content.value = newValue || '';
       }
     });
     
     return {
-      editor: editorRef,
-      editorContainer
+      content,
+      quillEditorRef,
+      handleContentChange,
+      isReadonly
     };
   },
 });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .rich-text-editor {
   min-height: 200px;
+  position: relative;
+  z-index: 1;
 }
 
+// 确保编辑器层级
 :deep(.editor-content) {
   min-height: 200px;
+  
+  // 确保工具栏正常显示
+  .ql-toolbar {
+    z-index: 100;
+    background: white;
+    border: 1px solid #ccc;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    position: relative;
+  }
+  
+  .ql-container {
+    border: 1px solid #ccc;
+    border-top: none;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    min-height: 200px;
+    z-index: 99;
+  }
 }
 
-:deep(.ProseMirror) {
-  min-height: 180px;
-  outline: none;
-  padding: 12px;
-}
-
-:deep(.ProseMirror p.is-editor-empty:first-child::before) {
-  color: #adb5bd;
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
-}
-
-/* 行内代码样式 */
-:deep(.ProseMirror .inline-code) {
-  background-color: #f3f4f6;
-  color: #e53e3e;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.875em;
-  border: 1px solid #e5e7eb;
-}
-
-/* 代码块样式 */
-:deep(.ProseMirror .code-block) {
-  background-color: #1f2937;
-  color: #f9fafb;
-  padding: 16px;
-  border-radius: 8px;
-  margin: 12px 0;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.875em;
-  line-height: 1.5;
-  position: relative;
-  border: 1px solid #374151;
-}
-
-
-/* 引用块样式 */
-:deep(.ProseMirror blockquote) {
-  border-left: 4px solid #3b82f6;
-  background-color: #f8fafc;
-  padding: 12px 16px;
-  margin: 12px 0;
-  border-radius: 0 8px 8px 0;
-  font-style: italic;
-  color: #4b5563;
-}
-
-/* 水平分割线样式 */
-:deep(.ProseMirror hr) {
-  border: none;
-  border-top: 2px solid #e5e7eb;
-  margin: 24px 0;
-}
-
-/* 列表样式 */
-:deep(.ProseMirror ul),
-:deep(.ProseMirror ol) {
-  padding-left: 24px;
-  margin: 12px 0;
-}
-:deep(.ProseMirror ul){
-  list-style: disc;
-}
-:deep(.ProseMirror ol){
-  list-style: decimal;
-}
-:deep(.ProseMirror li) {
-  margin: 4px 0;
-}
-
-/* 标题样式 */
-:deep(.ProseMirror h1) {
-  font-size: 1.875em;
-  font-weight: bold;
-  margin: 24px 0 16px 0;
-  color: #111827;
-}
-
-:deep(.ProseMirror h2) {
-  font-size: 1.5em;
-  font-weight: bold;
-  margin: 20px 0 12px 0;
-  color: #111827;
+// 防止拖拽区域覆盖编辑器
+:deep(.shape) {
+  .rich-text-editor {
+    pointer-events: auto !important;
+  }
 }
 </style>

package/src/components/Rule/index.vue

@@ -31,8 +31,8 @@
         <template #dropdown>
           <el-dropdown-menu>
             <el-dropdown-item command="enum">默认枚举</el-dropdown-item>
-            <el-dropdown-item command="func">自定义函数规则</el-dropdown-item>
-            <el-dropdown-item command="high">高级模式</el-dropdown-item>
+            <!-- <el-dropdown-item command="func">自定义函数规则</el-dropdown-item>
+            <el-dropdown-item command="high">高级模式</el-dropdown-item> -->
           </el-dropdown-menu>
         </template>
       </el-dropdown>

package/src/components/Rule/rules.js

@@ -25,7 +25,7 @@ const validatePhone = `(rule, value, callback) => {
     if (value === "" || value == null) {
       callback(new Error("请输入"));
     } else if (!/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(value)) {
-      callback(new Error("请输入正确的值"));
+      callback(new Error("请输入正确的电话号码"));
     }
     callback();
   }`;
@@ -35,7 +35,7 @@ const validateIdCard = `(rule, value, callback) => {
     if (value === "" || value == null) {
       callback(new Error("请输入"));
     } else if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value)) {
-      callback(new Error("请输入正确的"));
+      callback(new Error("请输入正确的身份证号"));
     }
     callback();
   }`;
@@ -46,7 +46,7 @@ const validateEmail = `
     if (value === "" || value == null) {
       callback(new Error("请输入"));
     } else if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
-      callback(new Error("请输入正确的值"));
+      callback(new Error("请输入正确的邮箱"));
     }
     callback();
   }`;

package/src/starfish-form.vue

@@ -202,7 +202,6 @@ export default defineComponent({
 
     const handleControlChange = () => {
       const allFormLists: any = props.allFormList;
-      console.log('---handleControlChange--', allFormLists, 'props.allFormList', props.allFormList);
       allFormLists.forEach((item: any) => {
         if (item.data.showRule === "{}") {
           item.show = true;

package/src/styles/formedit.scss

@@ -1,115 +1,115 @@
-.starfish-editor,
-.starfish-form,
-.starfish-dynamicform {
-  .el-form-item__content {
-    margin-left: 0 !important;
-    margin-bottom: 12px;
-    display: block;
-    .el-input.el-input--default.el-input--suffix,
-    .el-select.el-select--default,
-    .el-input-number.el-input-number--default,
-    .el-input.el-input--default.el-date-editor.el-date-editor--date,
-    .el-textarea.el-input--default {
-      width: 320px;
-    }
-    .el-input__wrapper {
-      width: 298px;
-    }
-  }
-  .el-form-item {
-    margin-bottom: 0 !important;
-  }
-  .el-form-item__error {
-    top: 100%;
-    left: 15px !important;
-  }
-  .el-form {
-    padding-bottom: 64px;
-  }
-  .jsoneditor-poweredBy {
-    display: none;
-  }
-  .starfish-formitem {
-    display: flex;
-    text-align: left;
-    position: relative;
-    margin: 0 12px;
-    &.starfish-vertical {
-      display: flex;
-      align-items: center;
-      .control {
-        width: 100%;
-        .vertical-group {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-        }
-        .input-left {
-          .el-input__inner {
-            text-align: left;
-          }
-        }
-        .input-right {
-          .el-input__inner {
-            text-align: right;
-          }
-        }
-        .input-center {
-          .el-input__inner {
-            text-align: center;
-          }
-        }
-        .el-input.el-input--default.el-input--suffix,
-        .el-select.el-select--default,
-        .el-input-number.el-input-number--default,
-        .el-input.el-input--default.el-date-editor.el-date-editor--date {
-          width: 320px;
-        }
-        .el-input__wrapper {
-          width: 300px;
-        }
-      }
-    }
-    &.formCover {
-      padding-bottom: 12px;
-      .el-input__wrapper {
-        width: 298px;
-      }
-      .el-textarea.el-input--default {
-        width: 320px;
-      }
-    }
-    .label {
-      font-size: 14px;
-      height: 25px;
-      line-height: 25px;
-      padding-right: 12px;
-      box-sizing: border-box;
-      white-space: nowrap;
-      &.label_right {
-        float: left;
-        text-align: right;
-        position: absolute;
-      }
-      &.label_left {
-        float: left;
-        text-align: left;
-        position: absolute;
-      }
-    }
-    .item_require {
-      color: red;
-    }
-  }
-}
-
-// #app .fullscreen {
-//   position: fixed;
-//   left: 0;
-//   top: 0;
-//   height: 100%;
-//   width: 100%;
-//   z-index: 1810;
-//   transform: translate(0, 0);
-//   -webkit-transform: translate(0, 0);
-// }
+.starfish-editor,
+.starfish-form,
+.starfish-dynamicform {
+  .el-form-item__content {
+    margin-left: 0 !important;
+    margin-bottom: 12px;
+    display: block;
+    .el-input.el-input--default.el-input--suffix,
+    .el-select.el-select--default,
+    .el-input-number.el-input-number--default,
+    .el-input.el-input--default.el-date-editor.el-date-editor--date,
+    .el-textarea.el-input--default {
+      width: 320px;
+    }
+    .el-input__wrapper {
+      width: 298px;
+    }
+  }
+  .el-form-item {
+    margin-bottom: 0 !important;
+  }
+  .el-form-item__error {
+    top: 100%;
+    left: 120px !important;
+  }
+  .el-form {
+    padding-bottom: 64px;
+  }
+  .jsoneditor-poweredBy {
+    display: none;
+  }
+  .starfish-formitem {
+    display: flex;
+    text-align: left;
+    position: relative;
+    margin: 0 12px;
+    &.starfish-vertical {
+      display: flex;
+      align-items: center;
+      .control {
+        width: 100%;
+        .vertical-group {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+        }
+        .input-left {
+          .el-input__inner {
+            text-align: left;
+          }
+        }
+        .input-right {
+          .el-input__inner {
+            text-align: right;
+          }
+        }
+        .input-center {
+          .el-input__inner {
+            text-align: center;
+          }
+        }
+        .el-input.el-input--default.el-input--suffix,
+        .el-select.el-select--default,
+        .el-input-number.el-input-number--default,
+        .el-input.el-input--default.el-date-editor.el-date-editor--date {
+          width: 320px;
+        }
+        .el-input__wrapper {
+          width: 300px;
+        }
+      }
+    }
+    &.formCover {
+      padding-bottom: 12px;
+      .el-input__wrapper {
+        width: 298px;
+      }
+      .el-textarea.el-input--default {
+        width: 320px;
+      }
+    }
+    .label {
+      font-size: 14px;
+      height: 25px;
+      line-height: 25px;
+      padding-right: 12px;
+      box-sizing: border-box;
+      white-space: nowrap;
+      &.label_right {
+        float: left;
+        text-align: right;
+        position: absolute;
+      }
+      &.label_left {
+        float: left;
+        text-align: left;
+        position: absolute;
+      }
+    }
+    .item_require {
+      color: red;
+    }
+  }
+}
+
+// #app .fullscreen {
+//   position: fixed;
+//   left: 0;
+//   top: 0;
+//   height: 100%;
+//   width: 100%;
+//   z-index: 1810;
+//   transform: translate(0, 0);
+//   -webkit-transform: translate(0, 0);
+// }