starfish-form-custom 1.0.33 → 1.0.35

package/dist/style.css

@@ -13,7 +13,7 @@
   display: flex;
   align-items: center;
 }
-.menu-item[data-v-398f2226] {
+.menu-item[data-v-6c37ffa3] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,19 +23,20 @@
   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-398f2226]:hover {
+.menu-item[data-v-6c37ffa3]:hover {
   background-color: #f0f0f0;
   border-color: #999;
 }
-.menu-item.is-active[data-v-398f2226] {
+.menu-item.is-active[data-v-6c37ffa3] {
   background-color: #e0e0e0;
   border-color: #666;
 }
-.remix[data-v-398f2226] {
-  width: 16px;
-  height: 16px;
+.menu-icon[data-v-6c37ffa3] {
+  font-size: 16px;
+  color: #333;
 }
 
 .editor__header[data-v-45d3fb0a] {
@@ -468,23 +469,91 @@
   min-height: 60px;
   height: 100%;
 }
-.rich-text-editor[data-v-5e5c12c4] {
+.rich-text-editor[data-v-544977e4] {
   min-height: 200px;
 }
-[data-v-5e5c12c4] .editor-content {
+[data-v-544977e4] .editor-content {
   min-height: 200px;
 }
-[data-v-5e5c12c4] .ProseMirror {
+[data-v-544977e4] .ProseMirror {
   min-height: 180px;
-  outline: none;
+  outline: none;
+  padding: 12px;
 }
-[data-v-5e5c12c4] .ProseMirror p.is-editor-empty:first-child::before {
+[data-v-544977e4] .ProseMirror p.is-editor-empty:first-child::before {
   color: #adb5bd;
   content: attr(data-placeholder);
   float: left;
   height: 0;
   pointer-events: none;
 }
+
+/* 行内代码样式 */
+[data-v-544977e4] .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;
+}
+
+/* 代码块样式 */
+[data-v-544977e4] .ProseMirror code {
+  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;
+}
+
+
+/* 引用块样式 */
+[data-v-544977e4] .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;
+}
+
+/* 水平分割线样式 */
+[data-v-544977e4] .ProseMirror hr {
+  border: none;
+  border-top: 2px solid #e5e7eb;
+  margin: 24px 0;
+}
+
+/* 列表样式 */
+[data-v-544977e4] .ProseMirror ul,[data-v-544977e4] .ProseMirror ol {
+  padding-left: 24px;
+  margin: 12px 0;
+}
+[data-v-544977e4] .ProseMirror li {
+  margin: 4px 0;
+}
+
+/* 标题样式 */
+[data-v-544977e4] .ProseMirror h1 {
+  font-size: 1.875em;
+  font-weight: bold;
+  margin: 24px 0 16px 0;
+  color: #111827;
+}
+[data-v-544977e4] .ProseMirror h2 {
+  font-size: 1.5em;
+  font-weight: bold;
+  margin: 20px 0 12px 0;
+  color: #111827;
+}
 .cm-gutters.cm-gutters-before {
   background: #133F63;
 }.el-collapse-item {

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

@@ -1,3 +1,4 @@
+import type { ComputedRef } from '@vue/reactivity';
 import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
 declare const _sfc_main: DefineComponent<{
     icon: {
@@ -17,7 +18,7 @@ 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: {
         type: StringConstructor;

package/package.json

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

package/src/components/RichText/MenuItem.vue

@@ -1,19 +1,21 @@
 <template>
-  <button 
-    class="menu-item" 
-    :class="{ 'is-active': isActive && isActive() }" 
-    @click="action" 
-    :title="title"
+  <el-tooltip 
+    effect="dark" 
+    :content="chineseTitle" 
+    placement="top"
   >
-    <svg class="remix">
-      <use :xlink:href="`${remixiconUrl}#ri-${icon}`" />
-    </svg>
-  </button>
+    <button 
+      class="menu-item" 
+      :class="{ 'is-active': isActive && isActive() }" 
+      @click="action"
+    >
+      <i :class="`ri-${icon}`" class="menu-icon"></i>
+    </button>
+  </el-tooltip>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import remixiconUrl from 'remixicon/fonts/remixicon.symbol.svg'
+import { defineComponent, computed } from 'vue'
 
 export default defineComponent({
   name: 'MenuItem',
@@ -35,9 +37,30 @@ export default defineComponent({
       default: null
     }
   },
-  setup() {
+  setup(props) {
+    const titleMap: Record<string, string> = {
+      'Bold': '粗体',
+      'Italic': '斜体',
+      'Strike': '删除线',
+      'Code': '行内代码',
+      'Heading 1': '标题 1',
+      'Heading 2': '标题 2',
+      'Paragraph': '段落',
+      'Bullet list': '无序列表',
+      'Ordered list': '有序列表',
+      'Code block': '代码块',
+      'Blockquote': '引用块',
+      'Horizontal rule': '水平分割线',
+      'Undo': '撤销',
+      'Redo': '重做'
+    }
+
+    const chineseTitle = computed(() => {
+      return titleMap[props.title] || props.title
+    })
+
     return {
-      remixiconUrl
+      chineseTitle
     }
   }
 })
@@ -55,6 +78,7 @@ export default defineComponent({
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s ease;
+  font-style: normal;
 }
 
 .menu-item:hover {
@@ -67,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

@@ -24,6 +24,7 @@ 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 { getFormConfig } from "../../utils/fieldConfig";
 import fieldProps from "../../utils/fieldProps";
 import { useWatch } from "../../utils/customHooks";
@@ -45,9 +46,28 @@ export default defineComponent({
     const editor = useEditor({
       content: props.data[props.item.data.fieldName] || props.item.data.defaultValue || '',
       extensions: [
-        StarterKit,
-        Code,
-        Blockquote,
+        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,
@@ -108,6 +128,7 @@ export default defineComponent({
 :deep(.ProseMirror) {
   min-height: 180px;
   outline: none;
+  padding: 12px;
 }
 
 :deep(.ProseMirror p.is-editor-empty:first-child::before) {
@@ -117,4 +138,74 @@ export default defineComponent({
   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) {
+  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 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;
+}
 </style>