starfish-form-custom 1.0.32 → 1.0.34

package/dist/{starfish-form-627ee711.mjs → starfish-form-12edcb0d.mjs}

@@ -3,7 +3,7 @@ import 'element-plus/es/components/base/style/css';
 import 'element-plus/es/components/form/style/css';
 import 'element-plus/es/components/form-item/style/css';
 import { defineComponent, getCurrentInstance, ref, onMounted, openBlock, createElementBlock, createVNode, mergeProps, withCtx, Fragment, renderList, createBlock, resolveDynamicComponent, createCommentVNode, toRaw } from 'vue';
-import { _ as _export_sfc } from './main-a797684b.mjs';
+import { _ as _export_sfc } from './main-0192f89c.mjs';
 import 'element-plus/es/components/icon/style/css';
 import 'element-plus/es/components/input/style/css';
 import 'element-plus/es/components/checkbox/style/css';
@@ -27,6 +27,7 @@ import 'element-plus/es/components/checkbox-group/style/css';
 import 'element-plus/es/components/color-picker/style/css';
 import 'element-plus/es/components/date-picker/style/css';
 import 'element-plus/es/components/radio/style/css';
+import 'remixicon/fonts/remixicon.symbol.svg';
 import 'element-plus/es/components/slider/style/css';
 import 'element-plus/es/components/switch/style/css';
 import 'element-plus/es/components/time-select/style/css';

package/dist/starfish-form.mjs

@@ -1,4 +1,4 @@
-export { D as Dynamicform, m as default } from './main-a797684b.mjs';
+export { D as Dynamicform, m as default } from './main-0192f89c.mjs';
 import 'vue';
 import 'element-plus/es';
 import 'element-plus/es/components/base/style/css';
@@ -25,6 +25,7 @@ import 'element-plus/es/components/checkbox-group/style/css';
 import 'element-plus/es/components/color-picker/style/css';
 import 'element-plus/es/components/date-picker/style/css';
 import 'element-plus/es/components/radio/style/css';
+import 'remixicon/fonts/remixicon.symbol.svg';
 import 'element-plus/es/components/slider/style/css';
 import 'element-plus/es/components/switch/style/css';
 import 'element-plus/es/components/time-select/style/css';

package/dist/style.css

@@ -12,7 +12,50 @@
 .control > div[data-v-4ce4907e] {
   display: flex;
   align-items: center;
-}.starfish-editor .el-form-item__content,
+}
+.menu-item[data-v-083dc03b] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.menu-item[data-v-083dc03b]:hover {
+  background-color: #f0f0f0;
+  border-color: #999;
+}
+.menu-item.is-active[data-v-083dc03b] {
+  background-color: #e0e0e0;
+  border-color: #666;
+}
+.remix[data-v-083dc03b] {
+  width: 16px;
+  height: 16px;
+}
+
+.editor__header[data-v-45d3fb0a] {
+  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] {
+  width: 1px;
+  height: 20px;
+  background-color: #DCDFE6;
+  margin: 0 4px;
+}
+.starfish-editor .el-form-item__content,
 .starfish-form .el-form-item__content,
 .starfish-dynamicform .el-form-item__content {
   margin-left: 0 !important;
@@ -424,7 +467,93 @@
   width: 100%;
   min-height: 60px;
   height: 100%;
-}.cm-gutters.cm-gutters-before {
+}
+.rich-text-editor[data-v-544977e4] {
+  min-height: 200px;
+}
+[data-v-544977e4] .editor-content {
+  min-height: 200px;
+}
+[data-v-544977e4] .ProseMirror {
+  min-height: 180px;
+  outline: none;
+  padding: 12px;
+}
+[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 {
   border: 1px solid #ebeef5;

package/dist/types/form/src/common/formAction.vue.d.ts

@@ -76,8 +76,8 @@ declare const _sfc_main: DefineComponent<{
         default: boolean;
     };
 }>>, {
-    drag: boolean;
     data: Record<string, any>;
+    drag: boolean;
     item: Record<string, any>;
     labelalign: string;
     isForm: boolean;

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

@@ -0,0 +1,34 @@
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
+import { PropType } from 'vue';
+declare const _sfc_main: DefineComponent<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+}, {
+    items: ({
+        icon: string;
+        title: string;
+        action: () => any;
+        isActive: () => any;
+        type?: undefined;
+    } | {
+        type: string;
+        icon?: undefined;
+        title?: undefined;
+        action?: undefined;
+        isActive?: undefined;
+    } | {
+        icon: string;
+        title: string;
+        action: () => any;
+        isActive?: undefined;
+        type?: undefined;
+    })[];
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+}>>, {}>;
+export default _sfc_main;

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

@@ -0,0 +1,43 @@
+import type { ComputedRef } from '@vue/reactivity';
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
+declare const _sfc_main: DefineComponent<{
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    action: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    isActive: {
+        type: FunctionConstructor;
+        default: null;
+    };
+}, {
+    remixiconUrl: string;
+    chineseTitle: ComputedRef<string>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    action: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    isActive: {
+        type: FunctionConstructor;
+        default: null;
+    };
+}>>, {
+    isActive: Function;
+}>;
+export default _sfc_main;

package/package.json

@@ -1,42 +1,51 @@
-{
-  "name": "starfish-form-custom",
-  "version": "1.0.32",
-  "main": "dist/starfish-form.mjs",
-  "style": "dist/style.css",
-  "module": "dist/starfish-form.mjs",
-  "types": "dist/types/starfish-form.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/starfish-form.mjs"
-    },
-    "./dist/style.css": {
-      "import": "./dist/style.css"
-    },
-    "./*": "./*"
-  },
-  "scripts": {
-    "build": "vite build",
-    "prepublish": "npm version && npm run build"
-  },
-  "dependencies": {
-    "element-plus": "^2.2.12",
-    "jsoneditor": "^9.9.0",
-    "vue": "^3.2.25",
-    "@element-plus/icons-vue": "^2.0.8",
-    "wangeditor": "^4.7.15",
-    "vue-codemirror": "6.1.1",
-    "codemirror": "6.0.1",
-    "@codemirror/lang-javascript": "6.0.2"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^2.3.3",
-    "sass": "^1.35.1",
-    "typescript": "^4.5.4",
-    "rollup-plugin-visualizer": "^5.8.3",
-    "unplugin-auto-import": "^0.17.5",
-    "unplugin-vue-components": "^0.26.0",
-    "vite": "^4.5.2",
-    "vite-plugin-dts": "^1.2.0",
-    "vue-tsc": "^0.34.7"
-  }
-}
+{
+  "name": "starfish-form-custom",
+  "version": "1.0.34",
+  "main": "dist/starfish-form.mjs",
+  "style": "dist/style.css",
+  "module": "dist/starfish-form.mjs",
+  "types": "dist/types/starfish-form.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/starfish-form.mjs"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css"
+    },
+    "./*": "./*"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublish": "npm version && npm run build"
+  },
+  "dependencies": {
+    "@codemirror/lang-javascript": "6.0.2",
+    "@element-plus/icons-vue": "^2.0.8",
+    "@tiptap/extension-blockquote": "^3.10.7",
+    "@tiptap/extension-code": "^3.10.7",
+    "@tiptap/extension-code-block-lowlight": "^3.10.7",
+    "@tiptap/extension-horizontal-rule": "^3.10.7",
+    "@tiptap/extension-underline": "^3.10.7",
+    "@tiptap/pm": "^3.10.7",
+    "@tiptap/starter-kit": "^3.10.7",
+    "@tiptap/vue-3": "^3.10.7",
+    "codemirror": "6.0.1",
+    "element-plus": "^2.2.12",
+    "jsoneditor": "^9.9.0",
+    "lowlight": "^3.3.0",
+    "remixicon": "^4.7.0",
+    "vue": "^3.2.25",
+    "vue-codemirror": "6.1.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.3.3",
+    "rollup-plugin-visualizer": "^5.8.3",
+    "sass": "^1.35.1",
+    "typescript": "^4.5.4",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^4.5.2",
+    "vite-plugin-dts": "^1.2.0",
+    "vue-tsc": "^0.34.7"
+  }
+}

package/src/components/RichText/MenuBar.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="editor__header">
+    <template v-for="(item, index) in items" :key="index">
+      <div v-if="item.type === 'divider'" class="divider" />
+      <MenuItem v-else :icon="item.icon" :title="item.title" :action="item.action" :is-active="item.isActive" />
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import MenuItem from './MenuItem.vue'
+
+export default defineComponent({
+  name: 'MenuBar',
+  components: {
+    MenuItem
+  },
+  props: {
+    editor: {
+      type: Object as PropType<any>,
+      required: true
+    }
+  },
+  setup(props) {
+    const items = [
+      {
+        icon: 'bold',
+        title: 'Bold',
+        action: () => props.editor.chain().focus().toggleBold().run(),
+        isActive: () => props.editor.isActive('bold'),
+      },
+      {
+        icon: 'italic',
+        title: 'Italic',
+        action: () => props.editor.chain().focus().toggleItalic().run(),
+        isActive: () => props.editor.isActive('italic'),
+      },
+      {
+        icon: 'strikethrough',
+        title: 'Strike',
+        action: () => props.editor.chain().focus().toggleStrike().run(),
+        isActive: () => props.editor.isActive('strike'),
+      },
+      {
+        icon: 'code-view',
+        title: 'Code',
+        action: () => props.editor.chain().focus().toggleCode().run(),
+        isActive: () => props.editor.isActive('code'),
+      },
+      {
+        type: 'divider',
+      },
+      {
+        icon: 'h-1',
+        title: 'Heading 1',
+        action: () => props.editor.chain().focus().toggleHeading({ level: 1 }).run(),
+        isActive: () => props.editor.isActive('heading', { level: 1 }),
+      },
+      {
+        icon: 'h-2',
+        title: 'Heading 2',
+        action: () => props.editor.chain().focus().toggleHeading({ level: 2 }).run(),
+        isActive: () => props.editor.isActive('heading', { level: 2 }),
+      },
+      {
+        icon: 'paragraph',
+        title: 'Paragraph',
+        action: () => props.editor.chain().focus().setParagraph().run(),
+        isActive: () => props.editor.isActive('paragraph'),
+      },
+      {
+        icon: 'list-unordered',
+        title: 'Bullet list',
+        action: () => props.editor.chain().focus().toggleBulletList().run(),
+        isActive: () => props.editor.isActive('bulletList'),
+      },
+      {
+        icon: 'list-ordered',
+        title: 'Ordered list',
+        action: () => props.editor.chain().focus().toggleOrderedList().run(),
+        isActive: () => props.editor.isActive('orderedList'),
+      },
+      {
+        icon: 'code-box-line',
+        title: 'Code block',
+        action: () => props.editor.chain().focus().toggleCodeBlock().run(),
+        isActive: () => props.editor.isActive('codeBlock'),
+      },
+      {
+        type: 'divider',
+      },
+      {
+        icon: 'double-quotes-l',
+        title: 'Blockquote',
+        action: () => props.editor.chain().focus().toggleBlockquote().run(),
+        isActive: () => props.editor.isActive('blockquote'),
+      },
+      {
+        icon: 'separator',
+        title: 'Horizontal rule',
+        action: () => props.editor.chain().focus().setHorizontalRule().run(),
+      },
+      {
+        type: 'divider',
+      },
+      {
+        icon: 'arrow-go-back-line',
+        title: 'Undo',
+        action: () => props.editor.chain().focus().undo().run(),
+      },
+      {
+        icon: 'arrow-go-forward-line',
+        title: 'Redo',
+        action: () => props.editor.chain().focus().redo().run(),
+      },
+    ]
+
+    return {
+      items
+    }
+  }
+})
+</script>
+
+<style scoped>
+.editor__header {
+  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 {
+  width: 1px;
+  height: 20px;
+  background-color: #DCDFE6;
+  margin: 0 4px;
+}
+</style>

package/src/components/RichText/MenuItem.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-tooltip 
+    effect="dark" 
+    :content="chineseTitle" 
+    placement="top"
+  >
+    <button 
+      class="menu-item" 
+      :class="{ 'is-active': isActive && isActive() }" 
+      @click="action"
+    >
+      <svg class="remix">
+        <use :xlink:href="`${remixiconUrl}#ri-${icon}`" />
+      </svg>
+    </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',
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    action: {
+      type: Function,
+      required: true
+    },
+    isActive: {
+      type: Function,
+      default: null
+    }
+  },
+  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
+    }
+  }
+})
+</script>
+
+<style scoped>
+.menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.menu-item:hover {
+  background-color: #f0f0f0;
+  border-color: #999;
+}
+
+.menu-item.is-active {
+  background-color: #e0e0e0;
+  border-color: #666;
+}
+
+.remix {
+  width: 16px;
+  height: 16px;
+}
+</style>