Skip to content

Commit

Permalink
feat: 签名组件参数优化&&编辑器配置面板
Browse files Browse the repository at this point in the history
  • Loading branch information
yupeng12 committed Mar 8, 2024
1 parent b8e486f commit 4a6e91f
Show file tree
Hide file tree
Showing 12 changed files with 484 additions and 80 deletions.
62 changes: 34 additions & 28 deletions docs/zh-CN/components/form/input-signature.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ order: 62
}
```

## 水平展示
## 自定义按钮名称

```schema: scope="body"
{
Expand All @@ -35,14 +35,16 @@ order: 62
{
"name": "signature",
"type": "input-signature",
"horiz": true,
"height": 300
"height": 160,
"confirmBtnLabel": "确定",
"undoBtnLabel": "上一步",
"clearBtnLabel": "重置"
}
]
}
```

## 自定义按钮名称
## 自定义颜色

```schema: scope="body"
{
Expand All @@ -52,16 +54,16 @@ order: 62
{
"name": "signature",
"type": "input-signature",
"height": 160,
"confirmText": "确定",
"undoText": "上一步",
"clearText": "重置"
"label": "手写签名",
"height": 200,
"color": "#ff0000",
"bgColor": "#fff"
}
]
}
```

## 自定义颜色
## 配合图片组件实现实时预览

```schema: scope="body"
{
Expand All @@ -72,15 +74,19 @@ order: 62
"name": "signature",
"type": "input-signature",
"label": "手写签名",
"height": 200,
"color": "#ff0000",
"bgColor": "#fff"
"height": 200
},
{
"type": "image",
"name": "signature"
}
]
}
```

## 配合图片组件实现实时预览
## 内嵌模式

在内嵌模式下,组件会以按钮的形式展示,点击按钮后弹出一个容器,用户可以在容器中完成签名。更适合在移动端使用。

```schema: scope="body"
{
Expand All @@ -91,25 +97,25 @@ order: 62
"name": "signature",
"type": "input-signature",
"label": "手写签名",
"height": 200
},
{
"type": "image",
"name": "signature"
"embed": true
}
]
}
```

## 属性表

| 属性名 | 类型 | 默认值 | 说明 |
| ----------- | --------- | --------- | ------------------ |
| width | `number` | | 组件宽度,最小 300 |
| height | `number` | | 组件高度,最小 160 |
| color | `string` | `#000` | 手写字体颜色 |
| bgColor | `string` | `#EFEFEF` | 面板背景颜色 |
| clearText | `string` | `清空` | 清空按钮名称 |
| undoText | `string` | `撤销` | 撤销按钮名称 |
| confirmText | `string` | `确认` | 确认按钮名称 |
| horiz | `boolean` | | 是否水平展示 |
| 属性名 | 类型 | 默认值 | 说明 |
| ----------------- | --------- | ---------- | -------------------- |
| width | `number` | | 组件宽度,最小 300 |
| height | `number` | | 组件高度,最小 160 |
| color | `string` | `#000` | 手写字体颜色 |
| bgColor | `string` | `#EFEFEF` | 面板背景颜色 |
| clearBtnLabel | `string` | `清空` | 清空按钮名称 |
| undoBtnLabel | `string` | `撤销` | 撤销按钮名称 |
| confirmBtnLabel | `string` | `确认` | 确认按钮名称 |
| embed | `boolean` | | 是否内嵌 |
| embedConfirmLabel | `string` | `确认` | 内嵌容器确认按钮名称 |
| ebmedCancelLabel | `string` | `取消` | 内嵌容器取消按钮名称 |
| embedBtnIcon | `string` | | 内嵌按钮图标 |
| embedBtnLabel | `string` | `点击签名` | 内嵌按钮文案 |
3 changes: 3 additions & 0 deletions packages/amis-editor/src/icons/form/input-signature.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions packages/amis-editor/src/icons/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ import inputRepeat from './form/input-repeat.svg';
import inputRichText from './form/input-rich-text.svg';
import inputTag from './form/input-tag.svg';
import inputText from './form/input-text.svg';
import InputSignature from './form/input-signature.svg';

import inputTime from './form/input-time.svg';
import inputTree from './form/input-tree.svg';
Expand Down Expand Up @@ -283,6 +284,7 @@ registerIcon('input-rich-text-plugin', inputRichText);
registerIcon('input-tag-plugin', inputTag);
registerIcon('input-text-plugin', inputText);
registerIcon('input-time-range-plugin', inputTimeRange);
registerIcon('input-signature-plugin', InputSignature);

registerIcon('input-time-plugin', inputTime);
registerIcon('input-tree-plugin', inputTree);
Expand Down
155 changes: 155 additions & 0 deletions packages/amis-editor/src/plugin/Form/InputSignature.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
import {EditorNodeType, getSchemaTpl} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';

export class SignaturePlugin extends BasePlugin {
static id = 'SignaturePlugin';
// 关联渲染器名字
rendererName = 'input-signature';
$schema = '/schemas/InputSignatureSchema.json';

// 组件名称
name = '签名面板';
isBaseComponent = true;
icon = 'fa fa-star-o';
pluginIcon = 'input-signature-plugin';
description = '手写签名面板';
docLink = '/amis/zh-CN/components/form/input-signature';
tags = ['表单项'];
scaffold = {
type: 'input-signature',
label: '签名',
name: 'signature'
};
previewSchema: any = {
type: 'form',
className: 'text-left',
mode: 'horizontal',
wrapWithPanel: false,
body: [
{
...this.scaffold,
embed: true
}
]
};
notRenderFormZone = true;

panelTitle = '签名面板';

// 事件定义
events: RendererPluginEvent[] = [];

// 动作定义
actions: RendererPluginAction[] = [];

panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('layout:originPosition', {value: 'left-top'}),
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('labelRemark'),
{
name: 'embed',
label: '弹窗展示',
type: 'ae-switch-more',
mode: 'normal',
formType: 'extend',
title: '弹窗展示',
bulk: true,
form: {
body: [
{
label: '按钮文案',
name: 'embedBtnLabel',
type: 'input-text'
},
getSchemaTpl('icon', {
label: '按钮图标',
name: 'embedBtnIcon'
}),
{
label: '确认按钮',
name: 'embedConfirmLabel',
type: 'input-text'
},
{
label: '确认按钮',
name: 'ebmedCancelLabel',
type: 'input-text'
}
]
}
},
{
label: '确认按钮',
name: 'confirmBtnLabel',
type: 'input-text'
},
{
label: '撤销按钮',
name: 'undoBtnLabel',
type: 'input-text'
},
{
label: '清空按钮',
name: 'clearBtnLabel',
type: 'input-text'
}
]
},
getSchemaTpl('status', {
isFormItem: true,
unsupportStatic: true
}),
getSchemaTpl('validation', {
tag: ValidatorTag.Check
})
])
},
{
title: '外观',
body: [
getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', {
renderer: context.info.renderer
}),
getSchemaTpl('style:classNames', {unsupportStatic: true})
])
]
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', {
name: 'onEvent',
...getEventControlConfig(this.manager, context)
})
]
}
]);
};

buildDataSchemas(node: EditorNodeType, region: EditorNodeType) {
return {
type: 'number',
title: node.schema?.label || node.schema?.name,
originalValue: node.schema?.value // 记录原始值,循环引用检测需要
};
}
}

registerEditorPlugin(SignaturePlugin);
1 change: 1 addition & 0 deletions packages/amis-editor/src/plugin/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export * from './Form/UUID'; // UUID
export * from './Form/LocationPicker'; // 地理位置
export * from './Form/InputSubForm'; // 子表单项
export * from './Form/Hidden'; // 隐藏域
export * from './Form/InputSignature'; // 签名面板
export * from './Form/Static'; // 静态展示框

// 功能
Expand Down
6 changes: 6 additions & 0 deletions packages/amis-ui/scss/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3177,6 +3177,12 @@
--inputTime-active-color: var(--colors-neutral-text-2);
--inputTime-active-bg-color: var(--colors-brand-10);

// Signature
--signature-tool-height: #{px2rem(40px)};
--signature-tool-margin-top: #{px2rem(8px)};
--signature-placeholder-gap: #{px2rem(10px)};
--signature-placeholder-color: var(--colors-neutral-line-6);

--steps-base-color: var(--colors-neutral-text-2);
--steps-base-fontSize: var(--fonts-size-7);
--steps-base-fontWeight: var(--fonts-weight-6);
Expand Down

0 comments on commit 4a6e91f

Please sign in to comment.