From ff067f19e53c7e759a12aba7b7c8c5c081871b75 Mon Sep 17 00:00:00 2001 From: lijianxiong <1518062161@qq.com> Date: Tue, 26 Aug 2025 11:57:07 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E8=B0=83=E6=95=B4=E7=94=B5?= =?UTF-8?q?=E5=AD=90=E7=AD=BE=E5=90=8D=E7=BC=96=E8=BE=91=E5=99=A8=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E7=9B=B8=E5=85=B3=E7=9A=84=E9=85=8D=E7=BD=AE=E5=8F=82?= =?UTF-8?q?=E6=95=B0=EF=BC=8C=E5=B9=B6=E4=B8=94=E5=9C=A8=E4=B8=8A=E4=BC=A0?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E6=97=B6=E6=8C=87=E5=AE=9A=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 4 ++ src/editor/text-box/signature/signature.scss | 10 ++- src/editor/text-box/signature/signature.tsx | 64 ++++++++++++-------- 3 files changed, 51 insertions(+), 27 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c9e3bcc0..516d2bed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,10 @@ - 更新密码框支持明文，暗文切换功能 +### Change + +- 调整电子签名编辑器样式相关的配置参数，并且在上传文件时指定文件名 + ## [0.7.41-alpha.9] - 2025-08-25 diff --git a/src/editor/text-box/signature/signature.scss b/src/editor/text-box/signature/signature.scss index 53a08bc1..2e929113 100644 --- a/src/editor/text-box/signature/signature.scss +++ b/src/editor/text-box/signature/signature.scss @@ -1,13 +1,19 @@ /* stylelint-disable length-zero-no-unit */ +$signature: ( + 'min-height': 120px, +); $signature-overlay: ( // 适配浏览器安全距离 'padding-bottom': 0px ); @include b('signature') { + @include set-component-css-var('signature', $signature); + position: relative; width: 100%; height: 100%; + min-height: getCssVar('signature', 'min-height'); overflow: hidden; border: none; border-radius: getCssVar('border-radius', 'large'); @@ -134,8 +140,8 @@ $signature-overlay: ( // 只读逻辑，所有按钮不显示 @include when('readonly') { - .#{bem('signature-pad-container__header')}, - .#{bem('signature-pad-container__footer')} .van-button + .van-button { + .#{bem('signature-overlay__header')}, + .#{bem('signature-overlay__footer')} { display: none; } diff --git a/src/editor/text-box/signature/signature.tsx b/src/editor/text-box/signature/signature.tsx index 02cb6a97..6387ebfd 100644 --- a/src/editor/text-box/signature/signature.tsx +++ b/src/editor/text-box/signature/signature.tsx @@ -10,21 +10,21 @@ import { TextBoxEditorController } from '../text-box-editor.controller'; import './signature.scss'; /** - * 电子签名 + * 电子签名（扩展） * * @description 用于在业务系统中采集、展示和保存用户签名信息。基于`移动端文本框`编辑器进行扩展，编辑器样式代码名称为：SIGNATURE * @primary - * @editorparams {name:mode,parameterType:'img' | 'file',defaultvalue:'img',description:指定签名的保存格式。当值为'img'时，直接保存为Base64格式的图片URL（以data:协议开头）；当值为'file'时，系统会先将签名图片上传至服务器，再保存服务器返回的文件元信息（包含文件ID和名称）} - * @editorparams {name:buttons,parameterType:"Array<{label: string;type: string;buttonType?: string}>","defaultvalue":[{"label":"撤销","type":"UNDO"},{"label":"重写","type":"REWRITE"},{"label":"确认","type":"CONFIRM","buttonType":"PRIMARY"}],description:配置全屏签名面板的操作按钮。数组中每个对象表示一个按钮：label为按钮显示文本；type为按钮触发的事件类型（UNDO-撤销上一步，REWRITE-清空重写，CONFIRM-确认保存）；buttonType可选，指定按钮样式（支持PRIMARY/SUCCESS/DEFAULT/DANGER/WARNING）。示例：仅显示确认按钮可配置为[{"label":"确认","type":"CONFIRM","buttonType":"PRIMARY"}]} - * @editorparams {name:dotsize,parameterType:'number',defaultvalue:0,description:点的大小（单位：像素）。控制点击画布时生成的点的尺寸，0表示根据线条宽度自动计算点的大小} - * @editorparams {name:minwidth,parameterType:'number',defaultvalue:2,description:线条最小宽度（单位：像素）。控制签名线条的最细宽度，绘制速度越快，线条越接近此值} - * @editorparams {name:maxwidth,parameterType:'number',defaultvalue:2,description:线条最大宽度（单位：像素）。控制签名线条的最粗宽度，绘制速度越慢，线条越接近此值} - * @editorparams {name:pencolor,parameterType:'string',defaultvalue:'black',description:画笔颜色。签名轨迹的颜色，可接受CSS颜色格式（如#ff0000、rgb(255,0,0)等）} - * @editorparams {name:velocityfilterweight,parameterType:'number',defaultvalue:0.7,description:速度过滤权重。用于平滑处理绘制速度的计算，影响线条粗细随速度的变化幅度。值越接近1，当前速度对线条粗细影响越大；值越小，线条过渡越平滑} - * @editorparams {name:mindistance,parameterType:'number',defaultvalue:5,description:连续点最小距离（单位：像素）。当连续两个绘制点的距离小于此值时，不记录新点，用于减少冗余数据并优化绘制流畅度} - * @editorparams {name:backgroundcolor,parameterType:'string',defaultvalue:'rgba(0,0,0,0)',description:画布背景色。签名画布的背景颜色，导出图片时会包含此背景，可接受CSS颜色格式} - * @editorparams {name:throttle,parameterType:'number',defaultvalue:16,description:事件节流时间（单位：毫秒）。限制绘制事件的触发频率，避免高频操作导致性能问题} - * @editorparams {name:canvascontextoptions,parameterType:'object',defaultvalue:'{}',description:Canvas 2D上下文初始化配置。用于设置Canvas渲染上下文的额外参数（如alpha、willReadFrequently等CanvasRenderingContext2DSettings属性）} + * @editorparams {"name":"mode","parameterType":"'img' | 'file'","defaultvalue":"'img'","description":"指定签名的保存格式。当值为'img'时，直接保存为Base64格式的图片URL（以data:协议开头）；当值为'file'时，系统会先将签名图片上传至服务器，再保存服务器返回的文件元信息（包含文件ID和名称）"} + * @editorparams {"name":"buttons","parameterType":"string","defaultvalue":"'\\[{\"label\":\"撤销\",\"type\":\"undo\"},{\"label\":\"重写\",\"type\":\"rewrite\"},{\"label\":\"确认\",\"type\":\"confirm\",\"buttonType\":\"primary\"}\\]'","description":"配置全屏后签名画布上的操作按钮。JSON 字符串数组中每个对象表示一个按钮：label为按钮显示文本；type为按钮触发的事件类型（undo-撤销上一步，rewrite-清空重写，confirm-确认保存）；buttonType可选，指定按钮样式（支持primary/success/default/danger/warning）。示例：仅显示确认按钮可配置为\\[{\"label\":\"确认\",\"type\":\"confirm\",\"buttonType\":\"primary\"}\\]"} + * @editorparams {name:dotsize,parameterType:number,defaultvalue:0,description:点的大小（单位：像素）。控制点击画布时生成的点的尺寸，0表示根据线条宽度自动计算点的大小} + * @editorparams {name:minwidth,parameterType:number,defaultvalue:2,description:线条最小宽度（单位：像素）。控制签名线条的最细宽度，绘制速度越快，线条越接近此值} + * @editorparams {name:maxwidth,parameterType:number,defaultvalue:2,description:线条最大宽度（单位：像素）。控制签名线条的最粗宽度，绘制速度越慢，线条越接近此值} + * @editorparams {"name":"pencolor","parameterType":"string","defaultvalue":"'black'","description":"画笔颜色。签名轨迹的颜色，可接受CSS颜色格式（如#ff0000）"} + * @editorparams {name:velocityfilterweight,parameterType:number,defaultvalue:0.7,description:线条粗细速度敏感度。用于平滑处理绘制速度的计算，影响线条粗细随速度的变化幅度。值越接近1，当前速度对线条粗细影响越大；值越小，线条过渡越平滑} + * @editorparams {name:mindistance,parameterType:number,defaultvalue:5,description:绘制点最小记录间距（单位：像素）。当点击画布生成的点与后续绘制线的距离小于此值时，不记录后续绘制的线，用于减少冗余数据并优化绘制流畅度} + * @editorparams {"name":"backgroundcolor","parameterType":"string","defaultvalue":"'rgba(0,0,0,0)'","description":"画布背景色。签名画布的背景颜色，导出图片时会包含此背景，可接受CSS颜色格式"} + * @editorparams {name:throttle,parameterType:number,defaultvalue:16,description:事件节流时间（单位：毫秒）。限制绘制事件的触发频率，避免高频操作导致性能问题} + * @editorparams {"name":"readonly","parameterType":"boolean","defaultvalue":false,"description":"设置编辑器是否为只读态"} * @ignoreprops overflowMode * @ignoreemits infoTextChange */ @@ -57,16 +57,16 @@ export const IBizSignature = defineComponent({ let buttons = [ { label: ibiz.i18n.t('editor.signature.undo'), - type: 'UNDO', + type: 'undo', }, { label: ibiz.i18n.t('editor.signature.rewrite'), - type: 'REWRITE', + type: 'rewrite', }, { label: ibiz.i18n.t('editor.signature.confirm'), - type: 'CONFIRM', - buttonType: 'PRIMARY', + type: 'confirm', + buttonType: 'primary', }, ]; @@ -173,7 +173,7 @@ export const IBizSignature = defineComponent({ currentVal.value = ''; } else { // 适配保存模式 - currentVal.value = newVal as string; + currentVal.value = `${newVal || ''}`; } await handleCurrentVal(); } @@ -185,24 +185,38 @@ export const IBizSignature = defineComponent({ * 处理抛值 * @param {string} _value */ - const handleEmit = (_value: string): void => { + const handleEmit = (_value: string | null): void => { emit('change', _value); }; + /** + * 获取文件类型 + * @param {string} dataURL + * @return {*} {BlobPropertyBag} + */ + const getFileType = (dataURL: string): BlobPropertyBag => { + const parts = dataURL.split(','); + const mime = parts[0].split(':')[1].split(';')[0]; + return { type: mime }; + }; + /** * 处理图片上传 (文件模式) * @param {string} dataURL * @return {*} */ const handleUpload = async (dataURL: string): Promise => { + const { type } = getFileType(dataURL); const blob = base64ToBlob(dataURL); - const file = await ibiz.util.file.fileUpload( + const fileName = `signature_${Date.now()}.png`; + const file = new File([blob], fileName, { type }); + const fileInfo = await ibiz.util.file.fileUpload( uploadUrl.value, - blob, + file, headers.value, ); - return file; + return fileInfo; }; /** @@ -222,7 +236,7 @@ export const IBizSignature = defineComponent({ _evt.stopPropagation(); signatureRef.value?.signaturePad.clear(); currentDataURL.value = ''; - handleEmit(''); + handleEmit(null); }; /** @@ -278,13 +292,13 @@ export const IBizSignature = defineComponent({ */ const handleButtonClick = (_type: string): void => { switch (_type) { - case 'UNDO': + case 'undo': signatureRef.value?.signaturePad.undoLastStep(); break; - case 'REWRITE': + case 'rewrite': signatureRef.value?.signaturePad.clear(); break; - case 'CONFIRM': + case 'confirm': handleConfirm(); break; default: -- Gitee