mirror of
https://github.com/MrXujiang/h5-Dooring.git
synced 2025-12-15 04:12:49 +00:00
🆕 添加GPL-3.0协议, 添加自定义表单白标题字重配置
This commit is contained in:
parent
0aa9e96854
commit
5d2c1d6e2b
@ -83,11 +83,11 @@
|
|||||||
"umi": "^3.2.19",
|
"umi": "^3.2.19",
|
||||||
"video-react": "^0.14.1",
|
"video-react": "^0.14.1",
|
||||||
"xlsx": "^0.16.7",
|
"xlsx": "^0.16.7",
|
||||||
"yh-react-popover": "^0.2.0",
|
"yh-react-popover": "^0.3.0",
|
||||||
"yorkie": "^2.0.0",
|
"yorkie": "^2.0.0",
|
||||||
"zarm": "^2.5.1"
|
"zarm": "^2.5.1"
|
||||||
},
|
},
|
||||||
"license": "MIT",
|
"license": "GPL-3.0",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/classnames": "^2.2.10",
|
"@types/classnames": "^2.2.10",
|
||||||
"@types/codemirror": "^0.0.98",
|
"@types/codemirror": "^0.0.98",
|
||||||
|
|||||||
@ -5,7 +5,17 @@ import styles from './index.less';
|
|||||||
import { IFormConfig } from './schema';
|
import { IFormConfig } from './schema';
|
||||||
import logo from '@/assets/03-表单.png';
|
import logo from '@/assets/03-表单.png';
|
||||||
const FormComponent = (props: IFormConfig & { isTpl: boolean }) => {
|
const FormComponent = (props: IFormConfig & { isTpl: boolean }) => {
|
||||||
const { title, bgColor, fontSize, titColor, btnColor, btnTextColor, api, formControls } = props;
|
const {
|
||||||
|
title,
|
||||||
|
bgColor,
|
||||||
|
fontSize,
|
||||||
|
titColor,
|
||||||
|
btnColor,
|
||||||
|
titWeight,
|
||||||
|
btnTextColor,
|
||||||
|
api,
|
||||||
|
formControls,
|
||||||
|
} = props;
|
||||||
const formData: Record<string, any> = {};
|
const formData: Record<string, any> = {};
|
||||||
const handleChange = useCallback(
|
const handleChange = useCallback(
|
||||||
(item, v) => {
|
(item, v) => {
|
||||||
@ -43,14 +53,19 @@ const FormComponent = (props: IFormConfig & { isTpl: boolean }) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{title && (
|
{title && (
|
||||||
<div className={styles.title} style={{ fontSize, color: titColor }}>
|
<div
|
||||||
|
className={styles.title}
|
||||||
|
style={{ fontSize, fontWeight: +titWeight, color: titColor }}
|
||||||
|
>
|
||||||
{title}
|
{title}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className={styles.formContent}>
|
<div className={styles.formContent}>
|
||||||
{formControls.map(item => {
|
{formControls.map(item => {
|
||||||
const FormItem = BaseForm[item.type];
|
const FormItem = BaseForm[item.type];
|
||||||
return <FormItem onChange={handleChange.bind(this, item)} {...item} key={item.id} />;
|
return (
|
||||||
|
<FormItem onChange={(v: string) => handleChange(item, v)} {...item} key={item.id} />
|
||||||
|
);
|
||||||
})}
|
})}
|
||||||
<div style={{ textAlign: 'center', padding: '16px 0' }}>
|
<div style={{ textAlign: 'center', padding: '16px 0' }}>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@ -6,16 +6,26 @@ import {
|
|||||||
TColorDefaultType,
|
TColorDefaultType,
|
||||||
TFormItemsDefaultType,
|
TFormItemsDefaultType,
|
||||||
TNumberDefaultType,
|
TNumberDefaultType,
|
||||||
|
TSelectDefaultType,
|
||||||
|
ISelectConfigType,
|
||||||
TTextDefaultType,
|
TTextDefaultType,
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
} from '@/components/PanelComponents/FormEditor/types';
|
||||||
|
|
||||||
|
export type TTextWeightSelectKeyType = '300' | '400' | '500' | '600';
|
||||||
|
|
||||||
export type TFormEditData = Array<
|
export type TFormEditData = Array<
|
||||||
ITextConfigType | INumberConfigType | IColorConfigType | ITextConfigType | IFormItemsConfigType
|
| ITextConfigType
|
||||||
|
| INumberConfigType
|
||||||
|
| IColorConfigType
|
||||||
|
| ITextConfigType
|
||||||
|
| IFormItemsConfigType
|
||||||
|
| ISelectConfigType<TTextWeightSelectKeyType>
|
||||||
>;
|
>;
|
||||||
export interface IFormConfig {
|
export interface IFormConfig {
|
||||||
title: TTextDefaultType;
|
title: TTextDefaultType;
|
||||||
fontSize: TNumberDefaultType;
|
fontSize: TNumberDefaultType;
|
||||||
titColor: TColorDefaultType;
|
titColor: TColorDefaultType;
|
||||||
|
titWeight: TSelectDefaultType<TTextWeightSelectKeyType>;
|
||||||
bgColor: TColorDefaultType;
|
bgColor: TColorDefaultType;
|
||||||
btnColor: TColorDefaultType;
|
btnColor: TColorDefaultType;
|
||||||
btnTextColor: TColorDefaultType;
|
btnTextColor: TColorDefaultType;
|
||||||
@ -45,6 +55,29 @@ const Form: IFormSchema = {
|
|||||||
name: '标题颜色',
|
name: '标题颜色',
|
||||||
type: 'Color',
|
type: 'Color',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
key: 'titWeight',
|
||||||
|
name: '标题粗细',
|
||||||
|
type: 'Select',
|
||||||
|
range: [
|
||||||
|
{
|
||||||
|
key: '300',
|
||||||
|
text: '300 x 300',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '400',
|
||||||
|
text: '400 x 400',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '500',
|
||||||
|
text: '500 x 500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '600',
|
||||||
|
text: '600 x 600',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
key: 'bgColor',
|
key: 'bgColor',
|
||||||
name: '背景色',
|
name: '背景色',
|
||||||
@ -75,6 +108,7 @@ const Form: IFormSchema = {
|
|||||||
title: '表单定制组件',
|
title: '表单定制组件',
|
||||||
fontSize: 18,
|
fontSize: 18,
|
||||||
titColor: 'rgba(60,60,60,1)',
|
titColor: 'rgba(60,60,60,1)',
|
||||||
|
titWeight: '400',
|
||||||
bgColor: 'rgba(255,255,255,1)',
|
bgColor: 'rgba(255,255,255,1)',
|
||||||
btnColor: 'rgba(129,173,173,1)',
|
btnColor: 'rgba(129,173,173,1)',
|
||||||
btnTextColor: 'rgba(255,255,255,1)',
|
btnTextColor: 'rgba(255,255,255,1)',
|
||||||
|
|||||||
@ -14691,10 +14691,10 @@ yeast@0.1.2:
|
|||||||
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
|
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
|
||||||
integrity sha1-AI4G2AlDIMNy28L47XagymyKxBk=
|
integrity sha1-AI4G2AlDIMNy28L47XagymyKxBk=
|
||||||
|
|
||||||
yh-react-popover@^0.2.0:
|
yh-react-popover@^0.3.0:
|
||||||
version "0.2.0"
|
version "0.3.0"
|
||||||
resolved "https://registry.yarnpkg.com/yh-react-popover/-/yh-react-popover-0.2.0.tgz#a5e3bdaa50b5e7e119bf0ce38a24bea57068cfc4"
|
resolved "https://registry.yarnpkg.com/yh-react-popover/-/yh-react-popover-0.3.0.tgz#016c6d48a63e0d8538bd2827b513dfe6519629ff"
|
||||||
integrity sha512-cTH2huOrUvsbyhvH0iTE+S/Lu7dOpxuF8upyNP4GCsCN8IzQXLvlbxZl8395wOwa6Xm5+kT7QvZw+wI3vA8q8Q==
|
integrity sha512-YCE3ESEkFw3FMY7pL7DkPPFW394dmbaGXxhhzsOllDxAhHqjc7f3CYmAbBbnNwTNQSA4v51gHUjt+8ccIQDohg==
|
||||||
|
|
||||||
ylru@^1.2.0:
|
ylru@^1.2.0:
|
||||||
version "1.2.1"
|
version "1.2.1"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user