diff --git a/CHANGELOG.md b/CHANGELOG.md index e13df404e80130349e1af96d2c59664accb0629e..3caa60020b73fdd351f692e46bf9f959a1d17876 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ### Added - 重复器表单拖拽支持表单自动保存配置 +- 支持codeEditorTheme代码编辑器主题配置参数 ## [0.7.41-alpha.10] - 2025-07-08 diff --git a/src/editor/code/monaco-editor/monaco-editor.tsx b/src/editor/code/monaco-editor/monaco-editor.tsx index ca832f981f53d3b128bfe623a40392ebeea20ee0..65154d5a092e837129efc51105ba9882228ff4e0 100644 --- a/src/editor/code/monaco-editor/monaco-editor.tsx +++ b/src/editor/code/monaco-editor/monaco-editor.tsx @@ -37,14 +37,13 @@ import './monaco-editor.scss'; * * @description 使用monacoEditor组件封装,用于编辑代码内容。支持编辑器类型包含:`代码编辑器` * @primary - * @editorparams {"name":"language","parameterType":"'javaScript' | 'typescript'","defaultvalue":"'typescript'","description":"设置代码编辑器所使用的编程语言类型,比如JavaScript或TypeScript等,会影响代码的语法高亮、智能提示等功能"} - * @editorparams {"name":"theme","parameterType":"'vs' | 'vs-dark' | 'hc-black'","defaultvalue":"'vs-dark'","description":"设置代码编辑器呈现的主题样式,可选值为'vs'(浅色主题)、'vs-dark'(深色主题)、'hc-black'(高对比度黑色主题)"} - * @editorparams {"name":"enableEdit","parameterType":"boolean","defaultvalue":false,"description":"当该值为true时,会显示代码编辑器顶部的工具栏,并且只有点击编辑按钮后才能开启代码编辑功能,否则编辑框默认处于不可编辑状态,常用于需要控制编辑权限的场景"} - * @editorparams {"name":"enableFullScreen","parameterType":"boolean","defaultvalue":false,"description":"若该值为true,会显示代码编辑器顶部的工具栏,并且点击工具栏中的全屏按钮后,编辑框将全屏显示,方便在较大的视野下进行代码编辑工作"} - * @editorparams {"name":"customTheme","parameterType":"'vs' | 'vs-dark' | 'hc-black'","description":"当该参数有值时,代码编辑器将使用自定义的主题样式,优先级高于 `theme` 配置的主题;若为空,则使用 `theme` 参数所配置的主题"} + * @editorparams {"name":"language","parameterType":"string","defaultvalue":"'typescript'","description":"设置代码编辑器所使用的编程语言类型,比如JavaScript或TypeScript等,会影响代码的语法高亮、智能提示等功能"} + * @editorparams {"name":"enableedit","parameterType":"boolean","defaultvalue":true,"description":"当该值为true时,会显示代码编辑器顶部的工具栏,并且只有点击编辑按钮后才能开启代码编辑功能,否则编辑框默认处于不可编辑状态,常用于需要控制编辑权限的场景"} + * @editorparams {"name":"enablefullscreen","parameterType":"boolean","defaultvalue":false,"description":"若该值为true,会显示代码编辑器顶部的工具栏,并且点击工具栏中的全屏按钮后,编辑框将全屏显示,方便在较大的视野下进行代码编辑工作"} * @editorparams {"name":"srfaiappendcurdata","parameterType":"boolean","defaultvalue":false,"description":"在打开AI功能时,该参数用于判断是否传入对象参数,主要用于在请求历史记录时,附加当前参数"} * @editorparams {"name":"srfaiappendcurcontent","parameterType":"string","description":"在打开AI功能时,如果该参数存在值,会将其传入编辑内容作为用户消息,主要用于在请求历史记录后,附加当前编辑内容作为用户消息"} - * @ignoreprops autoFocus | overflowMode | controlParams + * @editorparams {name:ac,parameterType:boolean,defaultvalue:false,description:是否启用ac自填模式} + * @ignoreprops autoFocus | overflowMode * @ignoreemits blur | focus | enter | infoTextChange */ export const IBizCode = defineComponent({ @@ -86,11 +85,24 @@ export const IBizCode = defineComponent({ !props.readonly && !props.disabled; } + if (editorModel.editorParams.enableedit) { + hasEnableEdit.value = true; + readonlyState.value = true; + enableEdit.value = + c.toBoolean(editorModel.editorParams.enableedit) && + !props.readonly && + !props.disabled; + } if (editorModel.editorParams.enableFullScreen) { enableFullScreen.value = c.toBoolean( editorModel.editorParams.enableFullScreen, ); } + if (editorModel.editorParams.enablefullscreen) { + enableFullScreen.value = c.toBoolean( + editorModel.editorParams.enablefullscreen, + ); + } } let editor: monaco.editor.IStandaloneCodeEditor | null; @@ -104,10 +116,14 @@ export const IBizCode = defineComponent({ // 编辑器主题 const getMonacoTheme = (name: string): string => { + // customTheme参数已弃用,后续请使用全局参数codeEditorTheme const customTheme = c?.editorParams?.customTheme; if (customTheme) { return customTheme === 'dark' ? 'vs-dark' : 'vs'; } + if (ibiz.config.codeEditorTheme) { + return ibiz.config.codeEditorTheme === 'dark' ? 'vs-dark' : 'vs'; + } return name === 'dark' ? `vs-${UIStore.theme}` : 'vs'; // 官方自带三种主题vs, hc-black, or vs-dark }; diff --git a/src/editor/html/html-editor.controller.ts b/src/editor/html/html-editor.controller.ts index 03ae1a0c180d5b25e203bd523bd83ec3342be6c0..68b45750a5aa0514958ace399a84befd9e3bdad9 100644 --- a/src/editor/html/html-editor.controller.ts +++ b/src/editor/html/html-editor.controller.ts @@ -110,7 +110,8 @@ export class HtmlEditorController extends EditorController { await super.onInit(); this.customRegister(); if (this.editorParams) { - const { uploadParams, exportParams } = this.editorParams; + const { uploadParams, exportParams, uploadparams, exportparams } = + this.editorParams; if (uploadParams) { try { @@ -123,6 +124,17 @@ export class HtmlEditorController extends EditorController { ); } } + if (uploadparams) { + try { + this.uploadParams = JSON.parse(uploadparams); + } catch (error) { + ibiz.log.error( + `编辑器[${ibiz.log.error( + error, + )}]编辑器参数 uploadparams 非 json 格式`, + ); + } + } if (exportParams) { try { this.exportParams = JSON.parse(exportParams); @@ -134,6 +146,17 @@ export class HtmlEditorController extends EditorController { ); } } + if (exportparams) { + try { + this.exportParams = JSON.parse(exportparams); + } catch (error) { + ibiz.log.error( + `编辑器[${ibiz.log.error( + error, + )}]编辑器参数 exportparams 非 json 格式`, + ); + } + } } const model = this.model; if (model.appDEACModeId) { diff --git a/src/editor/html/wang-editor/wang-editor.tsx b/src/editor/html/wang-editor/wang-editor.tsx index 5b91ea2f57c0c2008eee7f1c9256b442b4ce6ae3..0814120e1dea651c767d23ff077380f18ce978ce 100644 --- a/src/editor/html/wang-editor/wang-editor.tsx +++ b/src/editor/html/wang-editor/wang-editor.tsx @@ -43,14 +43,15 @@ type InsertFnType = (_url: string, _alt: string, _href: string) => void; * * @description 使用wangEditor组件封装,用于富文本编辑。支持编辑器类型包含:`HTML编辑框` * @primary - * @editorparams {"name":"enableEdit","parameterType":"boolean","defaultvalue":false,"description":"当该值为 true 时,会显示代码编辑器顶部的工具栏,并且只有点击编辑按钮后才能开启代码编辑功能,否则编辑框默认处于不可编辑状态,常用于需要控制编辑权限的场景"} - * @editorparams {"name":"enableFullScreen","parameterType":"boolean","defaultvalue":false,"description":"若该值为 true ,会显示代码编辑器顶部的工具栏,并且点击工具栏中的全屏按钮后,编辑框将全屏显示,方便在较大的视野下进行代码编辑工作"} + * @editorparams {"name":"enableedit","parameterType":"boolean","defaultvalue":true,"description":"当该值为 true 时,会显示代码编辑器顶部的工具栏,并且只有点击编辑按钮后才能开启代码编辑功能,否则编辑框默认处于不可编辑状态,常用于需要控制编辑权限的场景"} + * @editorparams {"name":"enablefullscreen","parameterType":"boolean","defaultvalue":false,"description":"若该值为 true ,会显示代码编辑器顶部的工具栏,并且点击工具栏中的全屏按钮后,编辑框将全屏显示,方便在较大的视野下进行代码编辑工作"} * @editorparams {"name":"srfaiappendcurdata","parameterType":"boolean","defaultvalue":false,"description":"在打开AI功能时,该参数用于判断是否传入对象参数,主要用于在请求历史记录时,附加当前参数"} * @editorparams {"name":"srfaiappendcurcontent","parameterType":"string","description":"在打开AI功能时,如果该参数存在值,会将其传入编辑内容作为用户消息,主要用于在请求历史记录后,附加当前编辑内容作为用户消息"} - * @editorparams {"name":"uploadParams","parameterType":"string","description":"图片或文件上传时,用于计算上传路径"} - * @editorparams {"name":"exportParams","parameterType":"string","description":"图片或文件下载时,用于计算下载路径"} + * @editorparams {"name":"uploadparams","parameterType":"string","description":"上传参数,图片或文件上传时,用于计算上传路径"} + * @editorparams {"name":"exportparams","parameterType":"string","description":"下载参数,图片或文件下载时,用于计算下载路径"} * @editorparams {"name":"osscat","parameterType":"string","description":"用于计算上传和下载路径的OSS参数"} - * @ignoreprops autoFocus | overflowMode | controlParams + * @editorparams {name:ac,parameterType:boolean,defaultvalue:false,description:是否启用ac自填模式} + * @ignoreprops autoFocus | overflowMode * @ignoreemits enter | infoTextChange */ const IBizHtml = defineComponent({ @@ -118,11 +119,24 @@ const IBizHtml = defineComponent({ !props.readonly && !props.disabled; } + if (editorModel.editorParams.enableedit) { + hasEnableEdit.value = true; + readonlyState.value = true; + enableEdit.value = + c.toBoolean(editorModel.editorParams.enableedit) && + !props.readonly && + !props.disabled; + } if (editorModel.editorParams.enableFullScreen) { enableFullScreen.value = c.toBoolean( editorModel.editorParams.enableFullScreen, ); } + if (editorModel.editorParams.enablefullscreen) { + enableFullScreen.value = c.toBoolean( + editorModel.editorParams.enablefullscreen, + ); + } } if (props.readonly) { @@ -135,11 +149,18 @@ const IBizHtml = defineComponent({ () => props.data, newVal => { if (newVal) { + const editorParams = { ...c.editorParams }; + if (editorParams.uploadparams) { + editorParams.uploadParams = JSON.parse(editorParams.uploadparams); + } + if (editorParams.exportparams) { + editorParams.exportParams = JSON.parse(editorParams.exportparams); + } const urls = ibiz.util.file.calcFileUpDownUrl( c.context, c.params, newVal, - c.editorParams, + editorParams, ); uploadUrl.value = urls.uploadUrl; downloadUrl.value = urls.downloadUrl; diff --git a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx index 09d768c4e5e88049836ce6935956ee092d5ced92..d1f985c4f1e16e4bba937e0de4f0313b5d166620 100644 --- a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx +++ b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx @@ -25,8 +25,8 @@ import './ibiz-markdown-editor.scss'; * * @description 使用cherryMarkdown组件封装,用于Markdown文档编辑。支持编辑器类型包含:`Markdown编辑框` * @primary - * @editorparams {"name":"customTheme","parameterType":"'default' | 'dark'","defaultvalue":"'default'","description":"设置Markdown主题"} - * @ignoreprops autoFocus | overflowMode | controlParams + * @editorparams {"name":"customtheme","parameterType":"'light' | 'dark'","description":"设置Markdown主题,未配置时跟随应用主题"} + * @ignoreprops autoFocus | overflowMode * @ignoreemits blur | focus | enter | infoTextChange */ // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -56,7 +56,8 @@ const IBizMarkDown: any = defineComponent({ const downloadUrl: Ref = ref(''); // 自定义主题 - const customTheme = c?.editorParams?.customTheme; + const customTheme = + c?.editorParams?.customTheme || c?.editorParams?.customtheme; // 编辑器主题 const { UIStore } = useUIStore(); diff --git a/src/editor/switch/ibiz-switch/ibiz-switch.tsx b/src/editor/switch/ibiz-switch/ibiz-switch.tsx index bfd46179d1493d941d7df2087c42db1f0b4a75d9..644bee6646f85642f74e360bdbce1c79b5f367d2 100644 --- a/src/editor/switch/ibiz-switch/ibiz-switch.tsx +++ b/src/editor/switch/ibiz-switch/ibiz-switch.tsx @@ -14,7 +14,7 @@ import { SwitchEditorController } from '../switch-editor.controller'; * * @description 使用el-switch组件,表示两种相互对立的状态间的切换,多用于触发「开/关」。支持编辑器类型包含:`开关部件` * @primary - * @editorparams {"name":"dicData","parameterType":"Array<{value: number;label: string;}>","defaultvalue":[{"value":0,"label":""},{"value":1,"label":""}],"description":"开关的文字描述。在配置的数组中,value值为0时,是 switch 关闭时的文字描述;value值为1时,是 switch 打开时的文字描述"} + * @editorparams {"name":"dicdata","parameterType":"Array<{value: number;label: string;}>","defaultvalue":[{"value":0,"label":""},{"value":1,"label":""}],"description":"开关的文字描述。在配置的数组中,value值为0时,是 switch 关闭时的文字描述;value值为1时,是 switch 打开时的文字描述"} * @ignoreprops overflowMode * @ignoreemits blur | focus | enter | infoTextChange */ @@ -43,6 +43,9 @@ export const IBizSwitch = defineComponent({ if (editorModel.editorParams.dicData) { dicData = c.toObj(editorModel.editorParams.dicData) as IData[]; } + if (editorModel.editorParams.dicdata) { + dicData = c.toObj(editorModel.editorParams.dicdata) as IData[]; + } } if (dicData && Array.isArray(dicData)) { diff --git a/src/editor/upload/ibiz-image-preview/ibiz-image-preview.tsx b/src/editor/upload/ibiz-image-preview/ibiz-image-preview.tsx index 2e5e23fb18c43f28848e934ff698ba5abd039666..84ab59e39477f9f8e403fe6ebfb1d7ad9e0619f6 100644 --- a/src/editor/upload/ibiz-image-preview/ibiz-image-preview.tsx +++ b/src/editor/upload/ibiz-image-preview/ibiz-image-preview.tsx @@ -13,8 +13,8 @@ import './ibiz-image-preview.scss'; * * @description 使用el-image组件封装,用于绘制图片内容,支持图片预览。支持编辑器类型包含:`图片控件(单项、直接内容)` * @primary - * @editorparams {"name":"STOPPROPAGATION","parameterType":"boolean","defaultvalue":true,"description":"是否阻止图片默认点击事件"} - * @ignoreprops autoFocus | overflowMode | controlParams + * @editorparams {"name":"stoppropagation","parameterType":"boolean","defaultvalue":true,"description":"是否阻止图片默认点击事件"} + * @ignoreprops autoFocus | overflowMode * @ignoreemits change | blur | focus | enter | infoTextChange */ export const IBizImagePreview = defineComponent({ @@ -27,7 +27,10 @@ export const IBizImagePreview = defineComponent({ const c = props.controller; // 是否阻止默认点击 - const result = c.editorParams?.STOPPROPAGATION !== 'false'; + let result = c.editorParams?.STOPPROPAGATION !== 'false'; + if (c.editorParams?.stoppropagation) { + result = c.editorParams.stoppropagation !== 'false'; + } // 是否显示表单默认内容 const showFormDefaultContent = computed(() => { diff --git a/src/editor/upload/ibiz-image-upload/ibiz-image-upload.tsx b/src/editor/upload/ibiz-image-upload/ibiz-image-upload.tsx index a52b9646eed95241babd5d4f2e956c3557130b3a..d42fde9d8f05714aa3e974fc16f4b3a10d1f00d6 100644 --- a/src/editor/upload/ibiz-image-upload/ibiz-image-upload.tsx +++ b/src/editor/upload/ibiz-image-upload/ibiz-image-upload.tsx @@ -16,12 +16,13 @@ import { UploadEditorController } from '../upload-editor.controller'; * * @description 使用el-upload,el-image-viewer组件封装,用于图片上传,上传后的图片会以卡片形式展示。支持编辑器类型包含:`图片控件`、`图片控件(单项)` * @primary - * @editorparams {"name":"multiple","parameterType":"boolean","defaultvalue":true,"description":"el-upload组件属性"} - * @editorparams {"name":"accept","parameterType":"string","description":"el-upload组件属性"} - * @editorparams {"name":"autoPreview","parameterType":"boolean","defaultvalue":false,"description":"当输入参数 `readonly` 为 true 并且该参数为 true 时。加载完图片后将自动调整图片大小达到预览态,且鼠标移入后不显示图片处理工具栏"} - * @editorparams {"name":"uploadParams","parameterType":"string","description":"图片或文件上传时,用于计算上传路径"} - * @editorparams {"name":"exportParams","parameterType":"string","description":"图片或文件下载时,用于计算下载路径"} + * @editorparams {"name":"multiple","parameterType":"boolean","defaultvalue":true,"description":"el-upload组件的multiple属性,类型为图片控件(单项)时默认值为false"} + * @editorparams {"name":"accept","parameterType":"string","description":"el-upload组件的accept属性"} + * @editorparams {"name":"autopreview","parameterType":"boolean","defaultvalue":false,"description":"当输入参数 `readonly` 为 true 并且该参数为 true 时。加载完图片后将自动调整图片大小达到预览态,且鼠标移入后不显示图片处理工具栏"} + * @editorparams {"name":"uploadparams","parameterType":"string","description":"上传参数,图片上传时,用于计算上传路径"} + * @editorparams {"name":"exportparams","parameterType":"string","description":"下载参数,图片下载时,用于计算下载路径"} * @editorparams {"name":"osscat","parameterType":"string","description":"用于计算上传和下载路径的OSS参数"} + * @editorparams {"name":"readonly","parameterType":"boolean","defaultvalue":false,"description":"设置编辑器是否为只读态"} * @ignoreprops autoFocus | overflowMode * @ignoreemits blur | focus | enter | infoTextChange */