starfish-form-custom 1.0.34 → 1.0.36

package/dist/style.css

@@ -13,7 +13,7 @@
   display: flex;
   align-items: center;
 }
-.menu-item[data-v-083dc03b] {
+.menu-item[data-v-6c37ffa3] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,33 +23,33 @@
   border: 1px solid #ddd;
   border-radius: 4px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  font-style: normal;
 }
-.menu-item[data-v-083dc03b]:hover {
+.menu-item[data-v-6c37ffa3]:hover {
   background-color: #f0f0f0;
   border-color: #999;
 }
-.menu-item.is-active[data-v-083dc03b] {
+.menu-item.is-active[data-v-6c37ffa3] {
   background-color: #e0e0e0;
   border-color: #666;
 }
-.remix[data-v-083dc03b] {
-  width: 16px;
-  height: 16px;
+.menu-icon[data-v-6c37ffa3] {
+  font-size: 16px;
+  color: #333;
 }
 
-.editor__header[data-v-45d3fb0a] {
+.editor__header[data-v-714af93c] {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 8px 12px;
   border: 1px solid #DCDFE6;
   border-bottom: none;
-  border-radius: 4px 4px 0 0;
   background-color: #f8f9fa;
   flex-wrap: wrap;
 }
-.divider[data-v-45d3fb0a] {
+.divider[data-v-714af93c] {
   width: 1px;
   height: 20px;
   background-color: #DCDFE6;
@@ -468,18 +468,18 @@
   min-height: 60px;
   height: 100%;
 }
-.rich-text-editor[data-v-544977e4] {
+.rich-text-editor[data-v-7adb62dc] {
   min-height: 200px;
 }
-[data-v-544977e4] .editor-content {
+[data-v-7adb62dc] .editor-content {
   min-height: 200px;
 }
-[data-v-544977e4] .ProseMirror {
+[data-v-7adb62dc] .ProseMirror {
   min-height: 180px;
   outline: none;
   padding: 12px;
 }
-[data-v-544977e4] .ProseMirror p.is-editor-empty:first-child::before {
+[data-v-7adb62dc] .ProseMirror p.is-editor-empty:first-child::before {
   color: #adb5bd;
   content: attr(data-placeholder);
   float: left;
@@ -488,7 +488,7 @@
 }
 
 /* 行内代码样式 */
-[data-v-544977e4] .ProseMirror .inline-code {
+[data-v-7adb62dc] .ProseMirror .inline-code {
   background-color: #f3f4f6;
   color: #e53e3e;
   padding: 2px 6px;
@@ -499,7 +499,7 @@
 }
 
 /* 代码块样式 */
-[data-v-544977e4] .ProseMirror code {
+[data-v-7adb62dc] .ProseMirror code {
   background-color: #1f2937;
   color: #f9fafb;
   padding: 16px;
@@ -514,7 +514,7 @@
 
 
 /* 引用块样式 */
-[data-v-544977e4] .ProseMirror blockquote {
+[data-v-7adb62dc] .ProseMirror blockquote {
   border-left: 4px solid #3b82f6;
   background-color: #f8fafc;
   padding: 12px 16px;
@@ -525,29 +525,29 @@
 }
 
 /* 水平分割线样式 */
-[data-v-544977e4] .ProseMirror hr {
+[data-v-7adb62dc] .ProseMirror hr {
   border: none;
   border-top: 2px solid #e5e7eb;
   margin: 24px 0;
 }
 
 /* 列表样式 */
-[data-v-544977e4] .ProseMirror ul,[data-v-544977e4] .ProseMirror ol {
+[data-v-7adb62dc] .ProseMirror ul,[data-v-7adb62dc] .ProseMirror ol {
   padding-left: 24px;
   margin: 12px 0;
 }
-[data-v-544977e4] .ProseMirror li {
+[data-v-7adb62dc] .ProseMirror li {
   margin: 4px 0;
 }
 
 /* 标题样式 */
-[data-v-544977e4] .ProseMirror h1 {
+[data-v-7adb62dc] .ProseMirror h1 {
   font-size: 1.875em;
   font-weight: bold;
   margin: 24px 0 16px 0;
   color: #111827;
 }
-[data-v-544977e4] .ProseMirror h2 {
+[data-v-7adb62dc] .ProseMirror h2 {
   font-size: 1.5em;
   font-weight: bold;
   margin: 20px 0 12px 0;

package/dist/types/form/src/components/RichText/MenuItem.vue.d.ts

@@ -18,7 +18,6 @@ declare const _sfc_main: DefineComponent<{
         default: null;
     };
 }, {
-    remixiconUrl: string;
     chineseTitle: ComputedRef<string>;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     icon: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starfish-form-custom",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "main": "dist/starfish-form.mjs",
   "style": "dist/style.css",
   "module": "dist/starfish-form.mjs",

package/src/components/RichText/MenuBar.vue

@@ -131,7 +131,6 @@ export default defineComponent({
   padding: 8px 12px;
   border: 1px solid #DCDFE6;
   border-bottom: none;
-  border-radius: 4px 4px 0 0;
   background-color: #f8f9fa;
   flex-wrap: wrap;
 }

package/src/components/RichText/MenuItem.vue

@@ -9,16 +9,13 @@
       :class="{ 'is-active': isActive && isActive() }" 
       @click="action"
     >
-      <svg class="remix">
-        <use :xlink:href="`${remixiconUrl}#ri-${icon}`" />
-      </svg>
+      <i :class="`ri-${icon}`" class="menu-icon"></i>
     </button>
   </el-tooltip>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import remixiconUrl from 'remixicon/fonts/remixicon.symbol.svg'
 
 export default defineComponent({
   name: 'MenuItem',
@@ -41,7 +38,6 @@ export default defineComponent({
     }
   },
   setup(props) {
-    // 英文标题到中文的映射
     const titleMap: Record<string, string> = {
       'Bold': '粗体',
       'Italic': '斜体',
@@ -64,7 +60,6 @@ export default defineComponent({
     })
 
     return {
-      remixiconUrl,
       chineseTitle
     }
   }
@@ -83,6 +78,7 @@ export default defineComponent({
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s ease;
+  font-style: normal;
 }
 
 .menu-item:hover {
@@ -95,8 +91,8 @@ export default defineComponent({
   border-color: #666;
 }
 
-.remix {
-  width: 16px;
-  height: 16px;
+.menu-icon {
+  font-size: 16px;
+  color: #333;
 }
 </style>

package/src/components/RichText/index.vue

@@ -10,7 +10,7 @@
     <div class="control" :style="{marginLeft: labelalign != 'top'?labelWidth + 'px': ''}">
       <div class="rich-text-editor">
         <!-- 使用 MenuBar 组件 -->
-        <MenuBar v-if="editor && !readonly" :editor="editor" />
+        <MenuBar v-if="!readonly" :editor="editor" />
         <editor-content :editor="editor" class="editor-content" />
       </div>
     </div>
@@ -43,6 +43,9 @@ export default defineComponent({
     MenuBar
   },
   setup(props) {
+    useWatch(props);
+     const isInternalUpdate = ref(false);
+    const lastContent = ref('');
     const editor = useEditor({
       content: props.data[props.item.data.fieldName] || props.item.data.defaultValue || '',
       extensions: [
@@ -74,25 +77,34 @@ export default defineComponent({
       editorProps: {
         attributes: {
           class: 'prose focus:outline-none max-w-none',
-          style: 'min-height: 200px; border: 1px solid #DCDFE6; border-radius: 4px; padding: 8px 12px;'
+          style: 'min-height: 200px; border: 1px solid #DCDFE6; padding: 8px 12px; background-color: #fff;'
         }
       },
       onUpdate: ({ editor }) => {
         const html = editor.getHTML();
-        props.data[props.item.data.fieldName] = html;
+        
+        // 只有当内容真正变化时才更新数据
+        if (html !== lastContent.value) {
+          isInternalUpdate.value = true;
+          lastContent.value = html;
+          props.data[props.item.data.fieldName] = html;
+          
+          // 使用 setTimeout 确保在下一个事件循环中重置标记
+          setTimeout(() => {
+            isInternalUpdate.value = false;
+          }, 0);
+        }
       },
       onBlur: ({ editor }) => {
         const html = editor.getHTML();
-        props.data[props.item.data.fieldName] = html;
-      }
-    });
-
-    useWatch(props);
-
-    // 监听数据变化
-    watch(() => props.item.data.defaultValue, (newVal) => {
-      if (editor.value && newVal) {
-        editor.value.commands.setContent(newVal, false);
+        if (html !== lastContent.value) {
+          isInternalUpdate.value = true;
+          lastContent.value = html;
+          props.data[props.item.data.fieldName] = html;
+          setTimeout(() => {
+            isInternalUpdate.value = false;
+          }, 0);
+        }
       }
     });
 
@@ -103,6 +115,13 @@ export default defineComponent({
       }
     });
 
+    // 初始化 lastContent
+    onMounted(() => {
+      if (editor.value) {
+        lastContent.value = editor.value.getHTML();
+      }
+    });
+
     onUnmounted(() => {
       if (editor.value) {
         editor.value.destroy();