fix: 移除 form-crate 自带的富文本组件规则，使用 editorRule 替代

package.json

@@ -137,7 +137,6 @@
     "url": "https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues"
   },
   "homepage": "https://gitee.com/yudaocode/yudao-ui-admin-vue3",
-  "packageManager": "pnpm@8.6.0",
   "engines": {
     "node": ">= 16.0.0",
     "pnpm": ">=8.6.0"

src/components/FormCreate/index.ts

@@ -1,4 +1,3 @@
-import MyFormCreateDesigner from './src/MyFormCreateDesigner.vue'
 import { useFormCreateDesigner } from './src/useFormCreateDesigner'
 
-export { MyFormCreateDesigner, useFormCreateDesigner }
+export { useFormCreateDesigner }

src/components/FormCreate/src/MyFormCreateDesigner.vue

@@ -1,33 +0,0 @@
-<!-- TODO puhui999: 没啥问题的话准备移除 -->
-<template>
-  <FcDesigner ref="designer" height="780px" />
-</template>
-
-<script lang="ts" setup>
-import { useUploadFileRule, useUploadImgRule, useUploadImgsRule } from './config'
-
-defineOptions({ name: 'MyFormCreateDesigner' })
-
-const designer = ref() // 表单设计器
-const uploadFileRule = useUploadFileRule()
-const uploadImgRule = useUploadImgRule()
-const uploadImgsRule = useUploadImgsRule()
-
-onMounted(() => {
-  // 移除自带的上传组件规则
-  designer.value?.removeMenuItem('upload')
-  const components = [uploadFileRule, uploadImgRule, uploadImgsRule]
-  components.forEach((component) => {
-    //插入组件规则
-    designer.value?.addComponent(component)
-    //插入拖拽按钮到`main`分类下
-    designer.value?.appendMenuItem('main', {
-      icon: component.icon,
-      name: component.name,
-      label: component.label
-    })
-  })
-})
-</script>
-
-<style lang="scss" scoped></style>

src/components/FormCreate/src/config/index.ts

@@ -3,11 +3,13 @@ import { useUploadImgRule } from './useUploadImgRule'
 import { useUploadImgsRule } from './useUploadImgsRule'
 import { useDictSelectRule } from './useDictSelectRule'
 import { useUserSelectRule } from './useUserSelectRule'
+import { useEditorRule } from './useEditorRule'
 
 export {
   useUploadFileRule,
   useUploadImgRule,
   useUploadImgsRule,
   useDictSelectRule,
-  useUserSelectRule
+  useUserSelectRule,
+  useEditorRule
 }

src/components/FormCreate/src/config/selectRule.ts

@@ -0,0 +1,71 @@
+const selectRule = [
+  { type: 'switch', field: 'multiple', title: '是否多选' },
+  {
+    type: 'switch',
+    field: 'disabled',
+    title: '是否禁用'
+  },
+  { type: 'switch', field: 'clearable', title: '是否可以清空选项' },
+  {
+    type: 'switch',
+    field: 'collapseTags',
+    title: '多选时是否将选中值按文字的形式展示'
+  },
+  {
+    type: 'inputNumber',
+    field: 'multipleLimit',
+    title: '多选时用户最多可以选择的项目数，为 0 则不限制',
+    props: { min: 0 }
+  },
+  {
+    type: 'input',
+    field: 'autocomplete',
+    title: 'autocomplete 属性'
+  },
+  { type: 'input', field: 'placeholder', title: '占位符' },
+  {
+    type: 'switch',
+    field: 'filterable',
+    title: '是否可搜索'
+  },
+  { type: 'switch', field: 'allowCreate', title: '是否允许用户创建新条目' },
+  {
+    type: 'input',
+    field: 'noMatchText',
+    title: '搜索条件无匹配时显示的文字'
+  },
+  {
+    type: 'switch',
+    field: 'remote',
+    title: '其中的选项是否从服务器远程加载'
+  },
+  {
+    type: 'Struct',
+    field: 'remoteMethod',
+    title: '自定义远程搜索方法'
+  },
+  { type: 'input', field: 'noDataText', title: '选项为空时显示的文字' },
+  {
+    type: 'switch',
+    field: 'reserveKeyword',
+    title: '多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词'
+  },
+  {
+    type: 'switch',
+    field: 'defaultFirstOption',
+    title: '在输入框按下回车，选择第一个匹配项'
+  },
+  {
+    type: 'switch',
+    field: 'popperAppendToBody',
+    title: '是否将弹出框插入至 body 元素',
+    value: true
+  },
+  {
+    type: 'switch',
+    field: 'automaticDropdown',
+    title: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单'
+  }
+]
+
+export default selectRule

src/components/FormCreate/src/config/useDictSelectRule.ts

@@ -1,6 +1,7 @@
 import { generateUUID } from '@/utils'
 import * as DictDataApi from '@/api/system/dict/dict.type'
 import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+import selectRule from '@/components/FormCreate/src/config/selectRule'
 
 export const useDictSelectRule = () => {
   const label = '字典选择器'
@@ -51,73 +52,7 @@ export const useDictSelectRule = () => {
             { label: '布尔值', value: 'bool' }
           ]
         },
-        { type: 'switch', field: 'multiple', title: '是否多选' },
+        ...selectRule
-        {
-          type: 'switch',
-          field: 'disabled',
-          title: '是否禁用'
-        },
-        { type: 'switch', field: 'clearable', title: '是否可以清空选项' },
-        {
-          type: 'switch',
-          field: 'collapseTags',
-          title: '多选时是否将选中值按文字的形式展示'
-        },
-        {
-          type: 'inputNumber',
-          field: 'multipleLimit',
-          title: '多选时用户最多可以选择的项目数，为 0 则不限制',
-          props: { min: 0 }
-        },
-        {
-          type: 'input',
-          field: 'autocomplete',
-          title: 'autocomplete 属性'
-        },
-        { type: 'input', field: 'placeholder', title: '占位符' },
-        {
-          type: 'switch',
-          field: 'filterable',
-          title: '是否可搜索'
-        },
-        { type: 'switch', field: 'allowCreate', title: '是否允许用户创建新条目' },
-        {
-          type: 'input',
-          field: 'noMatchText',
-          title: '搜索条件无匹配时显示的文字'
-        },
-        {
-          type: 'switch',
-          field: 'remote',
-          title: '其中的选项是否从服务器远程加载'
-        },
-        {
-          type: 'Struct',
-          field: 'remoteMethod',
-          title: '自定义远程搜索方法'
-        },
-        { type: 'input', field: 'noDataText', title: '选项为空时显示的文字' },
-        {
-          type: 'switch',
-          field: 'reserveKeyword',
-          title: '多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词'
-        },
-        {
-          type: 'switch',
-          field: 'defaultFirstOption',
-          title: '在输入框按下回车，选择第一个匹配项'
-        },
-        {
-          type: 'switch',
-          field: 'popperAppendToBody',
-          title: '是否将弹出框插入至 body 元素',
-          value: true
-        },
-        {
-          type: 'switch',
-          field: 'automaticDropdown',
-          title: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单'
-        }
       ])
     }
   }

src/components/FormCreate/src/config/useEditorRule.ts

@@ -0,0 +1,32 @@
+import { generateUUID } from '@/utils'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+
+export const useEditorRule = () => {
+  const label = '富文本'
+  const name = 'Editor'
+  return {
+    icon: 'icon-editor',
+    label,
+    name,
+    rule() {
+      return {
+        type: name,
+        field: generateUUID(),
+        title: label,
+        info: '',
+        $required: false
+      }
+    },
+    props(_, { t }) {
+      return localeProps(t, name + '.props', [
+        makeRequiredRule(),
+        {
+          type: 'input',
+          field: 'height',
+          title: '高度'
+        },
+        { type: 'switch', field: 'readonly', title: '是否只读' }
+      ])
+    }
+  }
+}

src/components/FormCreate/src/config/useUserSelectRule.ts

@@ -1,5 +1,6 @@
 import { generateUUID } from '@/utils'
 import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+import selectRule from '@/components/FormCreate/src/config/selectRule'
 
 export const useUserSelectRule = () => {
   const label = '用户选择器'
@@ -18,76 +19,7 @@ export const useUserSelectRule = () => {
       }
     },
     props(_, { t }) {
-      return localeProps(t, name + '.props', [
+      return localeProps(t, name + '.props', [makeRequiredRule(), ...selectRule])
-        makeRequiredRule(),
-        { type: 'switch', field: 'multiple', title: '是否多选' },
-        {
-          type: 'switch',
-          field: 'disabled',
-          title: '是否禁用'
-        },
-        { type: 'switch', field: 'clearable', title: '是否可以清空选项' },
-        {
-          type: 'switch',
-          field: 'collapseTags',
-          title: '多选时是否将选中值按文字的形式展示'
-        },
-        {
-          type: 'inputNumber',
-          field: 'multipleLimit',
-          title: '多选时用户最多可以选择的项目数，为 0 则不限制',
-          props: { min: 0 }
-        },
-        {
-          type: 'input',
-          field: 'autocomplete',
-          title: 'autocomplete 属性'
-        },
-        { type: 'input', field: 'placeholder', title: '占位符' },
-        {
-          type: 'switch',
-          field: 'filterable',
-          title: '是否可搜索'
-        },
-        { type: 'switch', field: 'allowCreate', title: '是否允许用户创建新条目' },
-        {
-          type: 'input',
-          field: 'noMatchText',
-          title: '搜索条件无匹配时显示的文字'
-        },
-        {
-          type: 'switch',
-          field: 'remote',
-          title: '其中的选项是否从服务器远程加载'
-        },
-        {
-          type: 'Struct',
-          field: 'remoteMethod',
-          title: '自定义远程搜索方法'
-        },
-        { type: 'input', field: 'noDataText', title: '选项为空时显示的文字' },
-        {
-          type: 'switch',
-          field: 'reserveKeyword',
-          title: '多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词'
-        },
-        {
-          type: 'switch',
-          field: 'defaultFirstOption',
-          title: '在输入框按下回车，选择第一个匹配项'
-        },
-        {
-          type: 'switch',
-          field: 'popperAppendToBody',
-          title: '是否将弹出框插入至 body 元素',
-          value: true
-        },
-        {
-          type: 'switch',
-          field: 'automaticDropdown',
-          title: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单'
-        }
-      ])
     }
   }
 }

src/components/FormCreate/src/useFormCreateDesigner.ts

@@ -1,5 +1,6 @@
 import {
   useDictSelectRule,
+  useEditorRule,
   useUploadFileRule,
   useUploadImgRule,
   useUploadImgsRule,
@@ -13,8 +14,12 @@ import { Ref } from 'vue'
  * - 文件上传
  * - 单图上传
  * - 多图上传
+ * - 字典选择器
+ * - 系统用户选择器
+ * - 富文本
  */
 export const useFormCreateDesigner = (designer: Ref) => {
+  const editorRule = useEditorRule()
   const uploadFileRule = useUploadFileRule()
   const uploadImgRule = useUploadImgRule()
   const uploadImgsRule = useUploadImgsRule()
@@ -24,7 +29,10 @@ export const useFormCreateDesigner = (designer: Ref) => {
   onMounted(() => {
     // 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
     designer.value?.removeMenuItem('upload')
+    // 移除自带的富文本组件规则，使用 editorRule 替代
+    designer.value?.removeMenuItem('fc-editor')
     const components = [
+      editorRule,
       uploadFileRule,
       uploadImgRule,
       uploadImgsRule,

src/plugins/formCreate/index.ts

@@ -21,6 +21,7 @@ import install from '@form-create/element-ui/auto-import'
 import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile'
 import { DictSelect } from '@/components/DictSelect'
 import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import { Editor } from '@/components/Editor'
 
 const components = [
   ElAside,
@@ -39,7 +40,8 @@ const components = [
   UploadImgs,
   UploadFile,
   DictSelect,
-  UserSelect
+  UserSelect,
+  Editor
 ]
 
 // 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档