starfish-form-custom 1.0.44 → 1.0.45

package/src/components/RichText/index.vue

@@ -12,26 +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" />
-        <EditorContent :editor="editor" class="editor-content" />
+      <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 } from "vue";
-import { useEditor, EditorContent } 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 MenuBar from "./MenuBar.vue";
+import { useWatch } from "../../utils/customHooks";
 
 export default defineComponent({
   ControlType: "RichText",
@@ -42,95 +44,37 @@ export default defineComponent({
     ...fieldProps,
   },
   components: {
-    EditorContent,
-    MenuBar
+    QuillEditor
   },
   setup(props) {
-    // 1. 使用内部变量存储编辑器内容，避免频繁更新表单
-    const internalContent = ref<string>(props.data[props.item.data.fieldName] || props.item.data.defaultValue || '');
+    useWatch(props);
+    const quillEditorRef = ref();
+    const content = ref(props.data[props.item.data.fieldName] || props.item.data.default || '');
     
-    // 2. 完全跳过 useWatch，避免触发 change 事件
-    // useWatch(props);
-    
-    const editor = useEditor({
-      content: internalContent.value,
-      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;'
-        }
-      },
-      // 3. 只在失焦时更新到表单数据
-      onBlur: ({ editor: editorInstance }) => {
-        const html = editorInstance.getHTML();
-        console.log('富文本失焦，更新表单数据');
-        
-        // 更新内部变量
-        internalContent.value = html;
-        
-        // 一次性更新到表单数据
-        props.data[props.item.data.fieldName] = html;
-      }
-      // 4. 移除 onUpdate 回调，避免实时更新
-    });
-    
-    // 5. 监听外部数据变化（表单数据 -> 编辑器）
-    watch(
-      () => props.data[props.item.data.fieldName],
-      (newValue) => {
-        if (!editor.value || editor.value.isDestroyed) return;
-        
-        // 只在外部数据变化时更新编辑器
-        if (newValue !== internalContent.value) {
-          console.log('外部数据变化，更新编辑器');
-          internalContent.value = newValue || '';
-          editor.value.commands.setContent(newValue || '', false);
-        }
-      },
-      { immediate: true }
+    // 计算只读状态
+    const isReadonly = computed(() => 
+      props.readonly || props.item.data.state === 'readonly'
     );
     
-    // 6. 监听只读状态变化
-    watch(() => props.readonly, (newVal) => {
-      if (editor.value) {
-        editor.value.setEditable(!newVal);
-      }
-    });
-
-    onUnmounted(() => {
-      if (editor.value) {
-        editor.value.destroy();
+    // 处理内容变化
+    const handleContentChange = (value: string) => {
+      content.value = value;
+      // 更新父组件数据
+      props.data[props.item.data.fieldName] = value;
+    };
+    
+    // 监听外部数据变化
+    watch(() => props.data[props.item.data.fieldName], (newValue) => {
+      if (newValue !== content.value) {
+        content.value = newValue || '';
       }
     });
-
+    
     return {
-      editor
+      content,
+      quillEditorRef,
+      handleContentChange,
+      isReadonly
     };
   },
 });
@@ -139,97 +83,38 @@ export default defineComponent({
 <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);
+// }

package/src/styles/keyvalueConfig.scss

@@ -1,56 +1,56 @@
-.starfish-keyValueItem {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  font-size: 12px;
-  border: 1px solid #eee;
-  margin-bottom: 6px;
-  border-radius: 10px;
-  padding: 10px 0;
-  .keyValueSelect {
-    width: 30px;
-    text-align: center;
-  }
-  .keyValueInput {
-    flex: 1;
-    .inputItem {
-      line-height: 20px;
-    }
-    > div {
-      margin-bottom: 7px;
-      span {
-        display: block;
-        margin-bottom: 6px;
-      }
-    }
-  }
-  .keyValueControl {
-    width: 40px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-    > div {
-      width: 18px;
-      height: 18px;
-      border-radius: 50%;
-      background: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 5px 0;
-      cursor: pointer;
-    }
-    .add {
-      background: #409eff;
-      color: white;
-    }
-    .remove {
-      background: #ec4747;
-      color: white;
-    }
-    i {
-      font-size: 12px;
-    }
-  }
-}
+.starfish-keyValueItem {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 12px;
+  border: 1px solid #eee;
+  margin-bottom: 6px;
+  border-radius: 10px;
+  padding: 10px 0;
+  .keyValueSelect {
+    width: 30px;
+    text-align: center;
+  }
+  .keyValueInput {
+    flex: 1;
+    .inputItem {
+      line-height: 20px;
+    }
+    > div {
+      margin-bottom: 7px;
+      span {
+        display: block;
+        margin-bottom: 6px;
+      }
+    }
+  }
+  .keyValueControl {
+    width: 40px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    > div {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 5px 0;
+      cursor: pointer;
+    }
+    .add {
+      background: #409eff;
+      color: white;
+    }
+    .remove {
+      background: #ec4747;
+      color: white;
+    }
+    i {
+      font-size: 12px;
+    }
+  }
+}

package/src/utils/customHooks.ts

@@ -7,7 +7,6 @@ function useWatch(props: any) {
     watch(
       () => props.data[props.item.data.fieldName],
       (val, oldVal) => {
-        console.log("watch", val, oldVal, 'props.item.data', props.item.data);
         if (props.item.data.action && props.item.data.action.onChange) {
           window.VApp.$Flex.funcExec(props.item.data.action.onChange, vm.proxy, [val, oldVal, props.data]);
         }