From ce965598a99a058b46ea9f6f017c9098449c4bdc Mon Sep 17 00:00:00 2001 From: zhangjinlong Date: Wed, 23 Sep 2020 18:42:29 +0800 Subject: [PATCH] =?UTF-8?q?add:=E8=A7=84=E5=88=92=20=20=E6=8A=BD=E7=A6=BB?= =?UTF-8?q?=E5=85=AC=E7=94=A8=E7=BB=84=E4=BB=B6-=E4=BB=A5zarm=E4=B8=BA?= =?UTF-8?q?=E4=B8=A4=E7=AB=AF=E5=A4=8D=E7=94=A8=E5=AF=B9=E8=B1=A1=20antd?= =?UTF-8?q?=E4=B8=BApc=E7=AB=AF=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BasicComponents/Footer/index.tsx | 21 + .../BasicComponents/Footer/schema.ts | 87 ++ .../BasicComponents/Footer/template.ts | 5 + .../BasicComponents/Header/index.less | 23 + .../BasicComponents/Header/index.tsx | 20 + .../BasicComponents/Header/schema.ts | 81 ++ .../BasicComponents/Header/template.ts | 5 + .../BasicPcShop/BasicComponents/Icon/icon.ts | 364 ++++++ .../BasicComponents/Icon/index.tsx | 27 + .../BasicComponents/Icon/schema.ts | 144 +++ .../BasicComponents/Icon/template.ts | 5 + .../BasicComponents/Image/index.tsx | 12 + .../BasicComponents/Image/schema.ts | 46 + .../BasicComponents/Image/template.ts | 5 + .../BasicComponents/List/index.less | 19 + .../BasicComponents/List/index.tsx | 51 + .../BasicComponents/List/schema.ts | 116 ++ .../BasicComponents/List/template.ts | 5 + .../BasicComponents/LongText/index.less | 0 .../BasicComponents/LongText/index.tsx | 15 + .../BasicComponents/LongText/schema.ts | 92 ++ .../BasicComponents/LongText/template.ts | 5 + .../BasicComponents/Qrcode/index.tsx | 14 + .../BasicComponents/Qrcode/schema.ts | 67 ++ .../BasicComponents/Qrcode/template.ts | 5 + .../BasicComponents/Text/index.less | 0 .../BasicComponents/Text/index.tsx | 13 + .../BasicComponents/Text/schema.ts | 78 ++ .../BasicComponents/Text/template.ts | 5 + .../BasicPcShop/BasicComponents/schema.ts | 20 + .../BasicPcShop/BasicComponents/template.ts | 24 + .../MediaComponents/Video/index.css | 1049 +++++++++++++++++ .../MediaComponents/Video/index.tsx | 21 + .../MediaComponents/Video/schema.ts | 45 + .../MediaComponents/Video/template.ts | 5 + .../BasicPcShop/MediaComponents/schema.ts | 6 + .../BasicPcShop/MediaComponents/template.ts | 9 + .../VisualComponents/Area/index.less | 13 + .../VisualComponents/Area/index.tsx | 76 ++ .../VisualComponents/Area/schema.ts | 82 ++ .../VisualComponents/Area/template.ts | 5 + .../VisualComponents/Chart/index.less | 13 + .../VisualComponents/Chart/index.tsx | 49 + .../VisualComponents/Chart/schema.ts | 78 ++ .../VisualComponents/Chart/template.ts | 5 + .../VisualComponents/Line/index.less | 13 + .../VisualComponents/Line/index.tsx | 73 ++ .../VisualComponents/Line/schema.ts | 82 ++ .../VisualComponents/Line/template.ts | 5 + .../VisualComponents/Pie/index.less | 13 + .../VisualComponents/Pie/index.tsx | 100 ++ .../VisualComponents/Pie/schema.ts | 82 ++ .../VisualComponents/Pie/template.ts | 5 + .../BasicPcShop/VisualComponents/schema.ts | 13 + .../BasicPcShop/VisualComponents/template.ts | 11 + src/components/BasicPcShop/schema.ts | 11 + .../BasicComponents/Notice/index.tsx | 13 + .../BasicComponents/Notice/schema.ts | 81 ++ .../BasicComponents/Notice/template.ts | 5 + .../BasicComponents/Tab/index.less | 27 + .../BasicComponents/Tab/index.tsx | 64 + .../BasicComponents/Tab/schema.ts | 118 ++ .../BasicComponents/Tab/template.ts | 5 + .../BasicComponents/schema.ts | 28 + .../BasicComponents/template.ts | 32 + .../VisualComponents/Carousel/index.less | 10 + .../VisualComponents/Carousel/index.tsx | 44 + .../VisualComponents/Carousel/schema.ts | 98 ++ .../VisualComponents/Carousel/template.ts | 5 + .../VisualComponents/Form/BaseForm.tsx | 96 ++ .../VisualComponents/Form/baseForm.less | 10 + .../VisualComponents/Form/index.less | 14 + .../VisualComponents/Form/index.tsx | 61 + .../VisualComponents/Form/schema.ts | 108 ++ .../VisualComponents/Form/template.ts | 5 + .../VisualComponents/XProgress/index.less | 0 .../VisualComponents/XProgress/index.tsx | 21 + .../VisualComponents/XProgress/schema.ts | 95 ++ .../VisualComponents/XProgress/template.ts | 5 + 79 files changed, 4183 insertions(+) create mode 100644 src/components/BasicPcShop/BasicComponents/Footer/index.tsx create mode 100644 src/components/BasicPcShop/BasicComponents/Footer/schema.ts create mode 100644 src/components/BasicPcShop/BasicComponents/Footer/template.ts create mode 100644 src/components/BasicPcShop/BasicComponents/Header/index.less create mode 100644 src/components/BasicPcShop/BasicComponents/Header/index.tsx create mode 100644 src/components/BasicPcShop/BasicComponents/Header/schema.ts create mode 100644 src/components/BasicPcShop/BasicComponents/Header/template.ts create mode 100644 src/components/BasicPcShop/BasicComponents/Icon/icon.ts create mode 100644 src/components/BasicPcShop/BasicComponents/Icon/index.tsx create mode 100644 src/components/BasicPcShop/BasicComponents/Icon/schema.ts create mode 100644 src/components/BasicPcShop/BasicComponents/Icon/template.ts create mode 100644 src/components/BasicPcShop/BasicComponents/Image/index.tsx create mode 100644 src/components/BasicPcShop/BasicComponents/Image/schema.ts create mode 100644 src/components/BasicPcShop/BasicComponents/Image/template.ts create mode 100644 src/components/BasicPcShop/BasicComponents/List/index.less create mode 100644 src/components/BasicPcShop/BasicComponents/List/index.tsx create mode 100644 src/components/BasicPcShop/BasicComponents/List/schema.ts create mode 100644 src/components/BasicPcShop/BasicComponents/List/template.ts create mode 100644 src/components/BasicPcShop/BasicComponents/LongText/index.less create mode 100644 src/components/BasicPcShop/BasicComponents/LongText/index.tsx create mode 100644 src/components/BasicPcShop/BasicComponents/LongText/schema.ts create mode 100644 src/components/BasicPcShop/BasicComponents/LongText/template.ts create mode 100644 src/components/BasicPcShop/BasicComponents/Qrcode/index.tsx create mode 100644 src/components/BasicPcShop/BasicComponents/Qrcode/schema.ts create mode 100644 src/components/BasicPcShop/BasicComponents/Qrcode/template.ts create mode 100644 src/components/BasicPcShop/BasicComponents/Text/index.less create mode 100644 src/components/BasicPcShop/BasicComponents/Text/index.tsx create mode 100644 src/components/BasicPcShop/BasicComponents/Text/schema.ts create mode 100644 src/components/BasicPcShop/BasicComponents/Text/template.ts create mode 100644 src/components/BasicPcShop/BasicComponents/schema.ts create mode 100644 src/components/BasicPcShop/BasicComponents/template.ts create mode 100644 src/components/BasicPcShop/MediaComponents/Video/index.css create mode 100644 src/components/BasicPcShop/MediaComponents/Video/index.tsx create mode 100644 src/components/BasicPcShop/MediaComponents/Video/schema.ts create mode 100644 src/components/BasicPcShop/MediaComponents/Video/template.ts create mode 100644 src/components/BasicPcShop/MediaComponents/schema.ts create mode 100644 src/components/BasicPcShop/MediaComponents/template.ts create mode 100644 src/components/BasicPcShop/VisualComponents/Area/index.less create mode 100644 src/components/BasicPcShop/VisualComponents/Area/index.tsx create mode 100644 src/components/BasicPcShop/VisualComponents/Area/schema.ts create mode 100644 src/components/BasicPcShop/VisualComponents/Area/template.ts create mode 100644 src/components/BasicPcShop/VisualComponents/Chart/index.less create mode 100644 src/components/BasicPcShop/VisualComponents/Chart/index.tsx create mode 100644 src/components/BasicPcShop/VisualComponents/Chart/schema.ts create mode 100644 src/components/BasicPcShop/VisualComponents/Chart/template.ts create mode 100644 src/components/BasicPcShop/VisualComponents/Line/index.less create mode 100644 src/components/BasicPcShop/VisualComponents/Line/index.tsx create mode 100644 src/components/BasicPcShop/VisualComponents/Line/schema.ts create mode 100644 src/components/BasicPcShop/VisualComponents/Line/template.ts create mode 100644 src/components/BasicPcShop/VisualComponents/Pie/index.less create mode 100644 src/components/BasicPcShop/VisualComponents/Pie/index.tsx create mode 100644 src/components/BasicPcShop/VisualComponents/Pie/schema.ts create mode 100644 src/components/BasicPcShop/VisualComponents/Pie/template.ts create mode 100644 src/components/BasicPcShop/VisualComponents/schema.ts create mode 100644 src/components/BasicPcShop/VisualComponents/template.ts create mode 100644 src/components/BasicPcShop/schema.ts create mode 100644 src/components/CommonComponents/BasicComponents/Notice/index.tsx create mode 100644 src/components/CommonComponents/BasicComponents/Notice/schema.ts create mode 100644 src/components/CommonComponents/BasicComponents/Notice/template.ts create mode 100644 src/components/CommonComponents/BasicComponents/Tab/index.less create mode 100644 src/components/CommonComponents/BasicComponents/Tab/index.tsx create mode 100644 src/components/CommonComponents/BasicComponents/Tab/schema.ts create mode 100644 src/components/CommonComponents/BasicComponents/Tab/template.ts create mode 100644 src/components/CommonComponents/BasicComponents/schema.ts create mode 100644 src/components/CommonComponents/BasicComponents/template.ts create mode 100644 src/components/CommonComponents/VisualComponents/Carousel/index.less create mode 100644 src/components/CommonComponents/VisualComponents/Carousel/index.tsx create mode 100644 src/components/CommonComponents/VisualComponents/Carousel/schema.ts create mode 100644 src/components/CommonComponents/VisualComponents/Carousel/template.ts create mode 100644 src/components/CommonComponents/VisualComponents/Form/BaseForm.tsx create mode 100644 src/components/CommonComponents/VisualComponents/Form/baseForm.less create mode 100644 src/components/CommonComponents/VisualComponents/Form/index.less create mode 100644 src/components/CommonComponents/VisualComponents/Form/index.tsx create mode 100644 src/components/CommonComponents/VisualComponents/Form/schema.ts create mode 100644 src/components/CommonComponents/VisualComponents/Form/template.ts create mode 100644 src/components/CommonComponents/VisualComponents/XProgress/index.less create mode 100644 src/components/CommonComponents/VisualComponents/XProgress/index.tsx create mode 100644 src/components/CommonComponents/VisualComponents/XProgress/schema.ts create mode 100644 src/components/CommonComponents/VisualComponents/XProgress/template.ts diff --git a/src/components/BasicPcShop/BasicComponents/Footer/index.tsx b/src/components/BasicPcShop/BasicComponents/Footer/index.tsx new file mode 100644 index 0000000..70197d5 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Footer/index.tsx @@ -0,0 +1,21 @@ +import React, { memo } from 'react'; +import { IFooterConfig } from './schema'; +const Footer = memo((props: IFooterConfig) => { + const { bgColor, text, color, align, fontSize, height } = props; + return ( + + ); +}); + +export default Footer; diff --git a/src/components/BasicPcShop/BasicComponents/Footer/schema.ts b/src/components/BasicPcShop/BasicComponents/Footer/schema.ts new file mode 100644 index 0000000..457c819 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Footer/schema.ts @@ -0,0 +1,87 @@ +import { + IColorConfigType, + INumberConfigType, + ISelectConfigType, + ITextConfigType, + TColorDefaultType, + TNumberDefaultType, + TSelectDefaultType, + TTextDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; + +export type TfooterSelectKeyType = 'left' | 'center' | 'right'; + +export type TFooterEditData = Array< + IColorConfigType | INumberConfigType | ITextConfigType | ISelectConfigType +>; +export interface IFooterConfig { + bgColor: TColorDefaultType; + text: TTextDefaultType; + color: TColorDefaultType; + align: TSelectDefaultType; + fontSize: TNumberDefaultType; + height: TNumberDefaultType; +} + +export interface IFooterSchema { + editData: TFooterEditData; + config: IFooterConfig; +} + +const Footer: IFooterSchema = { + editData: [ + { + key: 'bgColor', + name: '背景色', + type: 'Color', + }, + { + key: 'height', + name: '高度', + type: 'Number', + }, + { + key: 'text', + name: '文字', + type: 'Text', + }, + { + key: 'fontSize', + name: '字体大小', + type: 'Number', + }, + { + key: 'color', + name: '文字颜色', + type: 'Color', + }, + { + key: 'align', + name: '对齐方式', + type: 'Select', + range: [ + { + key: 'left', + text: '左对齐', + }, + { + key: 'center', + text: '居中对齐', + }, + { + key: 'right', + text: '右对齐', + }, + ], + }, + ], + config: { + bgColor: 'rgba(0,0,0,1)', + text: '页脚Footer', + color: 'rgba(255,255,255,1)', + align: 'center', + fontSize: 16, + height: 48, + }, +}; +export default Footer; diff --git a/src/components/BasicPcShop/BasicComponents/Footer/template.ts b/src/components/BasicPcShop/BasicComponents/Footer/template.ts new file mode 100644 index 0000000..e2fae3e --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Footer/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'Footer', + h: 24, +}; +export default template; diff --git a/src/components/BasicPcShop/BasicComponents/Header/index.less b/src/components/BasicPcShop/BasicComponents/Header/index.less new file mode 100644 index 0000000..0abe64b --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Header/index.less @@ -0,0 +1,23 @@ +.header { + box-sizing: content-box; + padding: 3px 12px; + display: flex; + align-items: center; + height: 50px; + background-color: #000; + .logo { + margin-right: 10px; + max-width: 160px; + max-height: 46px; + height: 46px; + overflow: hidden; + img { + height: 100%; + object-fit: contain; + } + } + .title { + font-size: 20px; + color: #fff; + } +} diff --git a/src/components/BasicPcShop/BasicComponents/Header/index.tsx b/src/components/BasicPcShop/BasicComponents/Header/index.tsx new file mode 100644 index 0000000..126d473 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Header/index.tsx @@ -0,0 +1,20 @@ +import { memo } from 'react'; +import styles from './index.less'; +import React from 'react'; +import { IHeaderConfig } from './schema'; + +const Header = memo((props: IHeaderConfig) => { + const { bgColor, logo, logoText, fontSize, color } = props; + return ( +
+
+ {logoText} +
+
+ {logoText} +
+
+ ); +}); + +export default Header; diff --git a/src/components/BasicPcShop/BasicComponents/Header/schema.ts b/src/components/BasicPcShop/BasicComponents/Header/schema.ts new file mode 100644 index 0000000..d9ebd8f --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Header/schema.ts @@ -0,0 +1,81 @@ +import { + IColorConfigType, + INumberConfigType, + ITextConfigType, + IUploadConfigType, + TColorDefaultType, + TNumberDefaultType, + TTextDefaultType, + TUploadDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; + +export type THeaderEditData = Array< + IColorConfigType | INumberConfigType | IUploadConfigType | ITextConfigType +>; +export interface IHeaderConfig { + bgColor: TColorDefaultType; + logo: TUploadDefaultType; + logoText: TTextDefaultType; + fontSize: TNumberDefaultType; + color: TColorDefaultType; + height: TNumberDefaultType; +} + +export interface IHeaderSchema { + editData: THeaderEditData; + config: IHeaderConfig; +} + +const Header: IHeaderSchema = { + editData: [ + { + key: 'bgColor', + name: '背景色', + type: 'Color', + }, + { + key: 'height', + name: '高度', + type: 'Number', + }, + { + key: 'logo', + name: 'logo', + type: 'Upload', + isCrop: true, + cropRate: 1000 / 618, + }, + { + key: 'logoText', + name: 'logo文字', + type: 'Text', + }, + { + key: 'color', + name: '文字颜色', + type: 'Color', + }, + { + key: 'fontSize', + name: '文字大小', + type: 'Number', + }, + ], + config: { + bgColor: 'rgba(0,0,0,1)', + logo: [ + { + uid: '001', + name: 'image.png', + status: 'done', + url: 'http://io.nainor.com/uploads/3_1740be8a482.png', + }, + ], + logoText: '页头Header', + fontSize: 20, + color: 'rgba(255,255,255,1)', + height: 50, + }, +}; + +export default Header; diff --git a/src/components/BasicPcShop/BasicComponents/Header/template.ts b/src/components/BasicPcShop/BasicComponents/Header/template.ts new file mode 100644 index 0000000..ecc13de --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Header/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'Header', + h: 28, +}; +export default template; diff --git a/src/components/BasicPcShop/BasicComponents/Icon/icon.ts b/src/components/BasicPcShop/BasicComponents/Icon/icon.ts new file mode 100644 index 0000000..b2ffe99 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Icon/icon.ts @@ -0,0 +1,364 @@ +export type AntdIconType = + | 'max' + | 'required' + | 'default' + | 'high' + | 'low' + | 'disabled' + | 'start' + | 'open' + | 'media' + | 'hidden' + | 'cite' + | 'data' + | 'dir' + | 'form' + | 'label' + | 'slot' + | 'span' + | 'style' + | 'summary' + | 'title' + | 'pattern' + | 'async' + | 'defer' + | 'manifest' + | 'color' + | 'content' + | 'size' + | 'wrap' + | 'multiple' + | 'height' + | 'rotate' + | 'translate' + | 'width' + | 'prefix' + | 'src' + | 'children' + | 'key' + | 'list' + | 'step' + | 'aria-label' + | 'spin' + | 'accept' + | 'acceptCharset' + | 'action' + | 'allowFullScreen' + | 'allowTransparency' + | 'alt' + | 'as' + | 'autoComplete' + | 'autoFocus' + | 'autoPlay' + | 'capture' + | 'cellPadding' + | 'cellSpacing' + | 'charSet' + | 'challenge' + | 'checked' + | 'classID' + | 'cols' + | 'colSpan' + | 'controls' + | 'coords' + | 'crossOrigin' + | 'dateTime' + | 'download' + | 'encType' + | 'formAction' + | 'formEncType' + | 'formMethod' + | 'formNoValidate' + | 'formTarget' + | 'frameBorder' + | 'headers' + | 'href' + | 'hrefLang' + | 'htmlFor' + | 'httpEquiv' + | 'integrity' + | 'keyParams' + | 'keyType' + | 'kind' + | 'loop' + | 'marginHeight' + | 'marginWidth' + | 'maxLength' + | 'mediaGroup' + | 'method' + | 'min' + | 'minLength' + | 'muted' + | 'name' + | 'nonce' + | 'noValidate' + | 'optimum' + | 'placeholder' + | 'playsInline' + | 'poster' + | 'preload' + | 'readOnly' + | 'rel' + | 'reversed' + | 'rows' + | 'rowSpan' + | 'sandbox' + | 'scope' + | 'scoped' + | 'scrolling' + | 'seamless' + | 'selected' + | 'shape' + | 'sizes' + | 'srcDoc' + | 'srcLang' + | 'srcSet' + | 'target' + | 'type' + | 'useMap' + | 'value' + | 'wmode' + | 'defaultChecked' + | 'defaultValue' + | 'suppressContentEditableWarning' + | 'suppressHydrationWarning' + | 'accessKey' + | 'className' + | 'contentEditable' + | 'contextMenu' + | 'draggable' + | 'id' + | 'lang' + | 'spellCheck' + | 'tabIndex' + | 'radioGroup' + | 'role' + | 'about' + | 'datatype' + | 'inlist' + | 'property' + | 'resource' + | 'typeof' + | 'vocab' + | 'autoCapitalize' + | 'autoCorrect' + | 'autoSave' + | 'itemProp' + | 'itemScope' + | 'itemType' + | 'itemID' + | 'itemRef' + | 'results' + | 'security' + | 'unselectable' + | 'inputMode' + | 'is' + | 'aria-activedescendant' + | 'aria-atomic' + | 'aria-autocomplete' + | 'aria-busy' + | 'aria-checked' + | 'aria-colcount' + | 'aria-colindex' + | 'aria-colspan' + | 'aria-controls' + | 'aria-current' + | 'aria-describedby' + | 'aria-details' + | 'aria-disabled' + | 'aria-dropeffect' + | 'aria-errormessage' + | 'aria-expanded' + | 'aria-flowto' + | 'aria-grabbed' + | 'aria-haspopup' + | 'aria-hidden' + | 'aria-invalid' + | 'aria-keyshortcuts' + | 'aria-labelledby' + | 'aria-level' + | 'aria-live' + | 'aria-modal' + | 'aria-multiline' + | 'aria-multiselectable' + | 'aria-orientation' + | 'aria-owns' + | 'aria-placeholder' + | 'aria-posinset' + | 'aria-pressed' + | 'aria-readonly' + | 'aria-relevant' + | 'aria-required' + | 'aria-roledescription' + | 'aria-rowcount' + | 'aria-rowindex' + | 'aria-rowspan' + | 'aria-selected' + | 'aria-setsize' + | 'aria-sort' + | 'aria-valuemax' + | 'aria-valuemin' + | 'aria-valuenow' + | 'aria-valuetext' + | 'dangerouslySetInnerHTML' + | 'onCopy' + | 'onCopyCapture' + | 'onCut' + | 'onCutCapture' + | 'onPaste' + | 'onPasteCapture' + | 'onCompositionEnd' + | 'onCompositionEndCapture' + | 'onCompositionStart' + | 'onCompositionStartCapture' + | 'onCompositionUpdate' + | 'onCompositionUpdateCapture' + | 'onFocus' + | 'onFocusCapture' + | 'onBlur' + | 'onBlurCapture' + | 'onChange' + | 'onChangeCapture' + | 'onBeforeInput' + | 'onBeforeInputCapture' + | 'onInput' + | 'onInputCapture' + | 'onReset' + | 'onResetCapture' + | 'onSubmit' + | 'onSubmitCapture' + | 'onInvalid' + | 'onInvalidCapture' + | 'onLoad' + | 'onLoadCapture' + | 'onError' + | 'onErrorCapture' + | 'onKeyDown' + | 'onKeyDownCapture' + | 'onKeyPress' + | 'onKeyPressCapture' + | 'onKeyUp' + | 'onKeyUpCapture' + | 'onAbort' + | 'onAbortCapture' + | 'onCanPlay' + | 'onCanPlayCapture' + | 'onCanPlayThrough' + | 'onCanPlayThroughCapture' + | 'onDurationChange' + | 'onDurationChangeCapture' + | 'onEmptied' + | 'onEmptiedCapture' + | 'onEncrypted' + | 'onEncryptedCapture' + | 'onEnded' + | 'onEndedCapture' + | 'onLoadedData' + | 'onLoadedDataCapture' + | 'onLoadedMetadata' + | 'onLoadedMetadataCapture' + | 'onLoadStart' + | 'onLoadStartCapture' + | 'onPause' + | 'onPauseCapture' + | 'onPlay' + | 'onPlayCapture' + | 'onPlaying' + | 'onPlayingCapture' + | 'onProgress' + | 'onProgressCapture' + | 'onRateChange' + | 'onRateChangeCapture' + | 'onSeeked' + | 'onSeekedCapture' + | 'onSeeking' + | 'onSeekingCapture' + | 'onStalled' + | 'onStalledCapture' + | 'onSuspend' + | 'onSuspendCapture' + | 'onTimeUpdate' + | 'onTimeUpdateCapture' + | 'onVolumeChange' + | 'onVolumeChangeCapture' + | 'onWaiting' + | 'onWaitingCapture' + | 'onAuxClick' + | 'onAuxClickCapture' + | 'onClick' + | 'onClickCapture' + | 'onContextMenu' + | 'onContextMenuCapture' + | 'onDoubleClick' + | 'onDoubleClickCapture' + | 'onDrag' + | 'onDragCapture' + | 'onDragEnd' + | 'onDragEndCapture' + | 'onDragEnter' + | 'onDragEnterCapture' + | 'onDragExit' + | 'onDragExitCapture' + | 'onDragLeave' + | 'onDragLeaveCapture' + | 'onDragOver' + | 'onDragOverCapture' + | 'onDragStart' + | 'onDragStartCapture' + | 'onDrop' + | 'onDropCapture' + | 'onMouseDown' + | 'onMouseDownCapture' + | 'onMouseEnter' + | 'onMouseLeave' + | 'onMouseMove' + | 'onMouseMoveCapture' + | 'onMouseOut' + | 'onMouseOutCapture' + | 'onMouseOver' + | 'onMouseOverCapture' + | 'onMouseUp' + | 'onMouseUpCapture' + | 'onSelect' + | 'onSelectCapture' + | 'onTouchCancel' + | 'onTouchCancelCapture' + | 'onTouchEnd' + | 'onTouchEndCapture' + | 'onTouchMove' + | 'onTouchMoveCapture' + | 'onTouchStart' + | 'onTouchStartCapture' + | 'onPointerDown' + | 'onPointerDownCapture' + | 'onPointerMove' + | 'onPointerMoveCapture' + | 'onPointerUp' + | 'onPointerUpCapture' + | 'onPointerCancel' + | 'onPointerCancelCapture' + | 'onPointerEnter' + | 'onPointerEnterCapture' + | 'onPointerLeave' + | 'onPointerLeaveCapture' + | 'onPointerOver' + | 'onPointerOverCapture' + | 'onPointerOut' + | 'onPointerOutCapture' + | 'onGotPointerCapture' + | 'onGotPointerCaptureCapture' + | 'onLostPointerCapture' + | 'onLostPointerCaptureCapture' + | 'onScroll' + | 'onScrollCapture' + | 'onWheel' + | 'onWheelCapture' + | 'onAnimationStart' + | 'onAnimationStartCapture' + | 'onAnimationEnd' + | 'onAnimationEndCapture' + | 'onAnimationIteration' + | 'onAnimationIterationCapture' + | 'onTransitionEnd' + | 'onTransitionEndCapture' + | 'twoToneColor'; diff --git a/src/components/BasicPcShop/BasicComponents/Icon/index.tsx b/src/components/BasicPcShop/BasicComponents/Icon/index.tsx new file mode 100644 index 0000000..d629860 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Icon/index.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; +import * as Icon from '@ant-design/icons'; +import IconImg from 'assets/icon.png'; +import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'; +import { AntdIconType } from './icon'; +import { IIconConfig } from './schema'; + +interface IconType extends IIconConfig { + isTpl?: boolean; +} +const XIcon = memo((props: IconType) => { + const { color, size, type, spin, isTpl } = props; + + const MyIcon: React.ForwardRefExoticComponent & + React.RefAttributes> = Icon[type]; + + return isTpl ? ( +
+ {type} + 图标 +
+ ) : ( + + ); +}); + +export default XIcon; diff --git a/src/components/BasicPcShop/BasicComponents/Icon/schema.ts b/src/components/BasicPcShop/BasicComponents/Icon/schema.ts new file mode 100644 index 0000000..803ee12 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Icon/schema.ts @@ -0,0 +1,144 @@ +import { + ICardPickerConfigType, + IColorConfigType, + INumberConfigType, + ISwitchConfigType, + TCardPickerDefaultType, + TColorDefaultType, + TNumberDefaultType, + TSwitchDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; + +export type TIconEditData = Array< + IColorConfigType | INumberConfigType | ISwitchConfigType | ICardPickerConfigType +>; +export interface IIconConfig { + color: TColorDefaultType; + size: TNumberDefaultType; + spin: TSwitchDefaultType; + type: TCardPickerDefaultType; +} + +export interface IIconSchema { + editData: TIconEditData; + config: IIconConfig; +} + +export type IconTypes = + | 'AccountBookTwoTone' + | 'AlertTwoTone' + | 'ApiTwoTone' + | 'AppstoreTwoTone' + | 'AudioTwoTone' + | 'BankTwoTone' + | 'BellTwoTone' + | 'BookTwoTone' + | 'BugTwoTone' + | 'BuildTwoTone' + | 'BulbTwoTone' + | 'CalculatorTwoTone' + | 'CalendarTwoTone' + | 'CameraTwoTone' + | 'CarTwoTone' + | 'CarryOutTwoTone' + | 'CiCircleTwoTone' + | 'CloudTwoTone' + | 'CodeTwoTone' + | 'CrownTwoTone' + | 'CustomerServiceTwoTone' + | 'DollarCircleTwoTone' + | 'EnvironmentTwoTone' + | 'ExperimentTwoTone' + | 'FireTwoTone' + | 'GiftTwoTone' + | 'InsuranceTwoTone' + | 'LikeTwoTone' + | 'LockTwoTone' + | 'MailTwoTone' + | 'MessageTwoTone' + | 'PhoneTwoTone' + | 'PictureTwoTone' + | 'PlaySquareTwoTone' + | 'RedEnvelopeTwoTone' + | 'ShopTwoTone' + | 'TrademarkCircleTwoTone' + | 'StarTwoTone' + | 'SafetyCertificateTwoTone' + | 'SettingTwoTone' + | 'RocketTwoTone'; + +const Icon: IIconSchema = { + editData: [ + { + key: 'color', + name: '颜色', + type: 'Color', + }, + { + key: 'size', + name: '大小', + type: 'Number', + }, + { + key: 'spin', + name: '旋转动画', + type: 'Switch', + }, + { + key: 'type', + name: '图标类型', + type: 'CardPicker', + icons: [ + 'AccountBookTwoTone', + 'AlertTwoTone', + 'ApiTwoTone', + 'AppstoreTwoTone', + 'AudioTwoTone', + 'BankTwoTone', + 'BellTwoTone', + 'BookTwoTone', + 'BugTwoTone', + 'BuildTwoTone', + 'BulbTwoTone', + 'CalculatorTwoTone', + 'CalendarTwoTone', + 'CameraTwoTone', + 'CarTwoTone', + 'CarryOutTwoTone', + 'CiCircleTwoTone', + 'CloudTwoTone', + 'CodeTwoTone', + 'CrownTwoTone', + 'CustomerServiceTwoTone', + 'DollarCircleTwoTone', + 'EnvironmentTwoTone', + 'ExperimentTwoTone', + 'FireTwoTone', + 'GiftTwoTone', + 'InsuranceTwoTone', + 'LikeTwoTone', + 'LockTwoTone', + 'MailTwoTone', + 'MessageTwoTone', + 'PhoneTwoTone', + 'PictureTwoTone', + 'PlaySquareTwoTone', + 'RedEnvelopeTwoTone', + 'ShopTwoTone', + 'TrademarkCircleTwoTone', + 'StarTwoTone', + 'SafetyCertificateTwoTone', + 'SettingTwoTone', + 'RocketTwoTone', + ], + }, + ], + config: { + color: 'rgba(74,144,226,1)', + size: 36, + spin: false, + type: 'CarTwoTone', + }, +}; + +export default Icon; diff --git a/src/components/BasicPcShop/BasicComponents/Icon/template.ts b/src/components/BasicPcShop/BasicComponents/Icon/template.ts new file mode 100644 index 0000000..b21cabe --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Icon/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'Icon', + h: 23, +}; +export default template; diff --git a/src/components/BasicPcShop/BasicComponents/Image/index.tsx b/src/components/BasicPcShop/BasicComponents/Image/index.tsx new file mode 100644 index 0000000..822fa34 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Image/index.tsx @@ -0,0 +1,12 @@ +import React, { memo } from 'react'; +import { IImageConfig } from './schema'; +const Image = memo((props: IImageConfig) => { + const { imgUrl, round = 0 } = props; + return ( +
+ +
+ ); +}); + +export default Image; diff --git a/src/components/BasicPcShop/BasicComponents/Image/schema.ts b/src/components/BasicPcShop/BasicComponents/Image/schema.ts new file mode 100644 index 0000000..a8d1f68 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Image/schema.ts @@ -0,0 +1,46 @@ +import { + INumberConfigType, + IUploadConfigType, + TNumberDefaultType, + TUploadDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; + +export type TImageEditData = Array; +export interface IImageConfig { + imgUrl: TUploadDefaultType; + round: TNumberDefaultType; +} + +export interface IImageSchema { + editData: TImageEditData; + config: IImageConfig; +} + +const Image: IImageSchema = { + editData: [ + { + key: 'imgUrl', + name: '上传', + type: 'Upload', + isCrop: false, + }, + { + key: 'round', + name: '圆角', + type: 'Number', + }, + ], + config: { + imgUrl: [ + { + uid: '001', + name: 'image.png', + status: 'done', + url: 'http://io.nainor.com/uploads/4_1740bf4535c.png', + }, + ], + round: 0, + }, +}; + +export default Image; diff --git a/src/components/BasicPcShop/BasicComponents/Image/template.ts b/src/components/BasicPcShop/BasicComponents/Image/template.ts new file mode 100644 index 0000000..a012259 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Image/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'Image', + h: 188, +}; +export default template; diff --git a/src/components/BasicPcShop/BasicComponents/List/index.less b/src/components/BasicPcShop/BasicComponents/List/index.less new file mode 100644 index 0000000..e75a0a3 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/List/index.less @@ -0,0 +1,19 @@ +.list { + margin: 20px auto; + width: 94%; + .sourceList { + .sourceItem { + display: flex; + align-items: center; + margin-bottom: 16px; + .imgWrap { + } + .content { + margin-left: 12px; + .tit { + line-height: 2; + } + } + } + } +} diff --git a/src/components/BasicPcShop/BasicComponents/List/index.tsx b/src/components/BasicPcShop/BasicComponents/List/index.tsx new file mode 100644 index 0000000..720a1a8 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/List/index.tsx @@ -0,0 +1,51 @@ +import React, { memo } from 'react'; +import styles from './index.less'; +import { IListConfig } from './schema'; +const List = memo((props: IListConfig) => { + const { round, sourceData, imgSize, fontSize, color } = props; + return ( +
+
+ {sourceData.map((item, i) => { + return ( + + ); + })} +
+
+ ); +}); + +export default List; diff --git a/src/components/BasicPcShop/BasicComponents/List/schema.ts b/src/components/BasicPcShop/BasicComponents/List/schema.ts new file mode 100644 index 0000000..9611ea6 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/List/schema.ts @@ -0,0 +1,116 @@ +import { + IColorConfigType, + IDataListConfigType, + INumberConfigType, + ISelectConfigType, + TColorDefaultType, + TDataListDefaultType, + TNumberDefaultType, + TSelectDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; +export type TListSelectKeyType = '60' | '80' | '100' | '120' | '150'; +export type TListEditData = Array< + IColorConfigType | IDataListConfigType | INumberConfigType | ISelectConfigType +>; +export interface IListConfig { + sourceData: TDataListDefaultType; + round: TNumberDefaultType; + imgSize: TSelectDefaultType; + fontSize: TNumberDefaultType; + color: TColorDefaultType; +} + +export interface IListSchema { + editData: TListEditData; + config: IListConfig; +} + +const List: IListSchema = { + editData: [ + { + key: 'sourceData', + name: '数据源', + type: 'DataList', + }, + { + key: 'round', + name: '圆角', + type: 'Number', + }, + { + key: 'imgSize', + name: '图片大小', + type: 'Select', + range: [ + { + key: '60', + text: '60 x 60', + }, + { + key: '80', + text: '80 x 80', + }, + { + key: '100', + text: '100 x 100', + }, + { + key: '120', + text: '120 x 120', + }, + { + key: '150', + text: '150 x 150', + }, + ], + }, + { + key: 'fontSize', + name: '文字大小', + type: 'Number', + }, + { + key: 'color', + name: '文字颜色', + type: 'Color', + }, + ], + config: { + sourceData: [ + { + id: '1', + title: '趣谈小课', + desc: '致力于打造优质小课程', + link: 'xxxxx', + imgUrl: [ + { + uid: '001', + name: 'image.png', + status: 'done', + url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png', + }, + ], + }, + { + id: '2', + title: '趣谈小课', + desc: '致力于打造优质小课程', + link: 'xxxxx', + imgUrl: [ + { + uid: '002', + name: 'image.png', + status: 'done', + url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png', + }, + ], + }, + ], + round: 0, + imgSize: '80', + fontSize: 16, + color: 'rgba(153,153,153,1)', + }, +}; + +export default List; diff --git a/src/components/BasicPcShop/BasicComponents/List/template.ts b/src/components/BasicPcShop/BasicComponents/List/template.ts new file mode 100644 index 0000000..d9f5d44 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/List/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'List', + h: 110, +}; +export default template; diff --git a/src/components/BasicPcShop/BasicComponents/LongText/index.less b/src/components/BasicPcShop/BasicComponents/LongText/index.less new file mode 100644 index 0000000..e69de29 diff --git a/src/components/BasicPcShop/BasicComponents/LongText/index.tsx b/src/components/BasicPcShop/BasicComponents/LongText/index.tsx new file mode 100644 index 0000000..fb045d4 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/LongText/index.tsx @@ -0,0 +1,15 @@ +import React, { memo } from 'react'; +import styles from './index.less'; +import { ILongTextConfig } from './schema'; +const LongText = memo((props: ILongTextConfig) => { + const { text, fontSize, color, indent, lineHeight, textAlign } = props; + return ( +
+ {text} +
+ ); +}); +export default LongText; diff --git a/src/components/BasicPcShop/BasicComponents/LongText/schema.ts b/src/components/BasicPcShop/BasicComponents/LongText/schema.ts new file mode 100644 index 0000000..8a7ba6c --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/LongText/schema.ts @@ -0,0 +1,92 @@ +import { + IColorConfigType, + INumberConfigType, + ISelectConfigType, + ITextAreaConfigType, + TColorDefaultType, + TNumberDefaultType, + TSelectDefaultType, + TTextAreaDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; +export type TLongTextSelectKeyType = 'left' | 'center' | 'right'; + +export type TLongTextEditData = Array< + | ITextAreaConfigType + | IColorConfigType + | INumberConfigType + | ISelectConfigType +>; +export interface ILongTextConfig { + text: TTextAreaDefaultType; + color: TColorDefaultType; + fontSize: TNumberDefaultType; + indent: TNumberDefaultType; + lineHeight: TNumberDefaultType; + textAlign: TSelectDefaultType; +} + +export interface ILongTextSchema { + editData: TLongTextEditData; + config: ILongTextConfig; +} + +const LongText: ILongTextSchema = { + editData: [ + { + key: 'text', + name: '文字', + type: 'TextArea', + }, + { + key: 'color', + name: '标题颜色', + type: 'Color', + }, + { + key: 'fontSize', + name: '字体大小', + type: 'Number', + }, + { + key: 'indent', + name: '首行缩进', + type: 'Number', + range: [0, 100], + }, + { + key: 'textAlign', + name: '对齐方式', + type: 'Select', + range: [ + { + key: 'left', + text: '左对齐', + }, + { + key: 'center', + text: '居中对齐', + }, + { + key: 'right', + text: '右对齐', + }, + ], + }, + { + key: 'lineHeight', + name: '行高', + type: 'Number', + step: 0.1, + }, + ], + config: { + text: '我是长文本有一段故事，dooring可视化编辑器无限可能，赶快来体验吧，骚年们，奥利给~', + color: 'rgba(60,60,60,1)', + fontSize: 14, + indent: 20, + lineHeight: 1.8, + textAlign: 'left', + }, +}; + +export default LongText; diff --git a/src/components/BasicPcShop/BasicComponents/LongText/template.ts b/src/components/BasicPcShop/BasicComponents/LongText/template.ts new file mode 100644 index 0000000..2cc5650 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/LongText/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'LongText', + h: 36, +}; +export default template; diff --git a/src/components/BasicPcShop/BasicComponents/Qrcode/index.tsx b/src/components/BasicPcShop/BasicComponents/Qrcode/index.tsx new file mode 100644 index 0000000..4b9d39a --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Qrcode/index.tsx @@ -0,0 +1,14 @@ +import React, { memo } from 'react'; +import { IQrcodeConfig } from './schema'; + +const Qrcode = memo((props: IQrcodeConfig) => { + const { qrcode, text, color, fontSize = 14 } = props; + return ( +
+ {text} +
{text}
+
+ ); +}); + +export default Qrcode; diff --git a/src/components/BasicPcShop/BasicComponents/Qrcode/schema.ts b/src/components/BasicPcShop/BasicComponents/Qrcode/schema.ts new file mode 100644 index 0000000..a7ab1f3 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Qrcode/schema.ts @@ -0,0 +1,67 @@ +import { + IColorConfigType, + INumberConfigType, + ITextConfigType, + IUploadConfigType, + TColorDefaultType, + TNumberDefaultType, + TTextDefaultType, + TUploadDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; + +export type TQrcodeEditData = Array< + IUploadConfigType | ITextConfigType | IColorConfigType | INumberConfigType +>; +export interface IQrcodeConfig { + qrcode: TUploadDefaultType; + text: TTextDefaultType; + color: TColorDefaultType; + fontSize: TNumberDefaultType; +} + +export interface IQrcodeSchema { + editData: TQrcodeEditData; + config: IQrcodeConfig; +} + +const Qrcode: IQrcodeSchema = { + editData: [ + { + key: 'qrcode', + name: '二维码', + type: 'Upload', + isCrop: true, + cropRate: 1, + }, + { + key: 'text', + name: '文字', + type: 'Text', + }, + { + key: 'color', + name: '文字颜色', + type: 'Color', + }, + { + key: 'fontSize', + name: '文字大小', + type: 'Number', + }, + ], + config: { + qrcode: [ + { + uid: '001', + name: 'image.png', + status: 'done', + url: 'http://io.nainor.com/uploads/code_173e1705e0c.png', + }, + ], + text: '二维码', + color: 'rgba(153,153,153,1)', + fontSize: 14, + }, +}; + +export default Qrcode; diff --git a/src/components/BasicPcShop/BasicComponents/Qrcode/template.ts b/src/components/BasicPcShop/BasicComponents/Qrcode/template.ts new file mode 100644 index 0000000..c5883f8 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Qrcode/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'Qrcode', + h: 150, +}; +export default template; diff --git a/src/components/BasicPcShop/BasicComponents/Text/index.less b/src/components/BasicPcShop/BasicComponents/Text/index.less new file mode 100644 index 0000000..e69de29 diff --git a/src/components/BasicPcShop/BasicComponents/Text/index.tsx b/src/components/BasicPcShop/BasicComponents/Text/index.tsx new file mode 100644 index 0000000..4b4a81b --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Text/index.tsx @@ -0,0 +1,13 @@ +import React, { memo } from 'react'; +import styles from './index.less'; +import { ITextConfig } from './schema'; + +const Text = memo((props: ITextConfig) => { + const { align, text, fontSize, color, lineHeight } = props; + return ( +
+ {text} +
+ ); +}); +export default Text; diff --git a/src/components/BasicPcShop/BasicComponents/Text/schema.ts b/src/components/BasicPcShop/BasicComponents/Text/schema.ts new file mode 100644 index 0000000..f23ffc7 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Text/schema.ts @@ -0,0 +1,78 @@ +import { + IColorConfigType, + INumberConfigType, + ISelectConfigType, + ITextConfigType, + TColorDefaultType, + TNumberDefaultType, + TSelectDefaultType, + TTextDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; + +export type TTextSelectKeyType = 'left' | 'right' | 'center'; +export type TTextEditData = Array< + ITextConfigType | IColorConfigType | INumberConfigType | ISelectConfigType +>; +export interface ITextConfig { + text: TTextDefaultType; + color: TColorDefaultType; + fontSize: TNumberDefaultType; + align: TSelectDefaultType; + lineHeight: TNumberDefaultType; +} + +export interface ITextSchema { + editData: TTextEditData; + config: ITextConfig; +} +const Text: ITextSchema = { + editData: [ + { + key: 'text', + name: '文字', + type: 'Text', + }, + { + key: 'color', + name: '标题颜色', + type: 'Color', + }, + { + key: 'fontSize', + name: '字体大小', + type: 'Number', + }, + { + key: 'align', + name: '对齐方式', + type: 'Select', + range: [ + { + key: 'left', + text: '左对齐', + }, + { + key: 'center', + text: '居中对齐', + }, + { + key: 'right', + text: '右对齐', + }, + ], + }, + { + key: 'lineHeight', + name: '行高', + type: 'Number', + }, + ], + config: { + text: '我是文本', + color: 'rgba(60,60,60,1)', + fontSize: 18, + align: 'center', + lineHeight: 2, + }, +}; +export default Text; diff --git a/src/components/BasicPcShop/BasicComponents/Text/template.ts b/src/components/BasicPcShop/BasicComponents/Text/template.ts new file mode 100644 index 0000000..5869d49 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/Text/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'Text', + h: 20, +}; +export default template; diff --git a/src/components/BasicPcShop/BasicComponents/schema.ts b/src/components/BasicPcShop/BasicComponents/schema.ts new file mode 100644 index 0000000..3ceeed4 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/schema.ts @@ -0,0 +1,20 @@ +import Footer from './Footer/schema'; +import Header from './Header/schema'; +import Icon from './Icon/schema'; +import Image from './Image/schema'; +import List from './List/schema'; +import LongText from './LongText/schema'; +import Qrcode from './Qrcode/schema'; +import Text from './Text/schema'; + +const basicSchema = { + Footer, + Header, + Icon, + Image, + List, + LongText, + Qrcode, + Text +}; +export default basicSchema; diff --git a/src/components/BasicPcShop/BasicComponents/template.ts b/src/components/BasicPcShop/BasicComponents/template.ts new file mode 100644 index 0000000..55b8780 --- /dev/null +++ b/src/components/BasicPcShop/BasicComponents/template.ts @@ -0,0 +1,24 @@ +import Footer from './Footer/template'; +import Header from './Header/template'; +import Icon from './Icon/template'; +import Image from './Image/template'; +import List from './List/template'; +import LongText from './LongText/template'; +import Qrcode from './Qrcode/template'; +import Text from './Text/template'; + +const basicTemplate = [ + Footer, + Header, + Icon, + Image, + List, + LongText, + Qrcode, + Text, +]; +const BasicTemplate = basicTemplate.map(v => { + return { ...v, category: 'base' }; +}); + +export default BasicTemplate; diff --git a/src/components/BasicPcShop/MediaComponents/Video/index.css b/src/components/BasicPcShop/MediaComponents/Video/index.css new file mode 100644 index 0000000..ccd8842 --- /dev/null +++ b/src/components/BasicPcShop/MediaComponents/Video/index.css @@ -0,0 +1,1049 @@ +@charset "UTF-8"; +.video-react .video-react-control:before, .video-react .video-react-big-play-button:before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.video-react .video-react-control:before, .video-react .video-react-big-play-button:before { + text-align: center; +} + +@font-face { + font-family: "video-react"; + src: url(data:application/vnd.ms-fontobject;base64,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?#iefix) format("eot"); +} +@font-face { + font-family: "video-react"; + src: url(data:application/font-woff;base64,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) format("woff"), url(data:application/x-font-ttf;base64,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) format("truetype"); + font-weight: normal; + font-style: normal; +} +.video-react-icon, .video-react .video-react-closed-caption, .video-react .video-react-bezel .video-react-bezel-icon, .video-react .video-react-volume-level, .video-react .video-react-mute-control, +.video-react .video-react-volume-menu-button, .video-react .video-react-play-control, .video-react .video-react-play-progress, .video-react .video-react-big-play-button { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: "video-react" !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.video-react-icon-play-arrow:before, .video-react .video-react-bezel .video-react-bezel-icon-play:before, .video-react .video-react-play-control:before, .video-react .video-react-big-play-button:before { + content: ""; +} + +.video-react-icon-play-circle-filled:before { + content: ""; +} + +.video-react-icon-play-circle-outline:before { + content: ""; +} + +.video-react-icon-pause:before, .video-react .video-react-bezel .video-react-bezel-icon-pause:before, .video-react .video-react-play-control.video-react-playing:before { + content: ""; +} + +.video-react-icon-pause-circle-filled:before { + content: ""; +} + +.video-react-icon-pause-circle-outline:before { + content: ""; +} + +.video-react-icon-stop:before { + content: ""; +} + +.video-react-icon-fast-rewind:before, .video-react .video-react-bezel .video-react-bezel-icon-fast-rewind:before { + content: ""; +} + +.video-react-icon-fast-forward:before, .video-react .video-react-bezel .video-react-bezel-icon-fast-forward:before { + content: ""; +} + +.video-react-icon-skip-previous:before { + content: ""; +} + +.video-react-icon-skip-next:before { + content: ""; +} + +.video-react-icon-replay-5:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-5:before { + content: ""; +} + +.video-react-icon-replay-10:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-10:before { + content: ""; +} + +.video-react-icon-replay-30:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-30:before { + content: ""; +} + +.video-react-icon-forward-5:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-5:before { + content: ""; +} + +.video-react-icon-forward-10:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-10:before { + content: ""; +} + +.video-react-icon-forward-30:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-30:before { + content: ""; +} + +.video-react-icon-volume-off:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-off:before, .video-react .video-react-mute-control.video-react-vol-muted:before, +.video-react .video-react-volume-menu-button.video-react-vol-muted:before { + content: ""; +} + +.video-react-icon-volume-mute:before, .video-react .video-react-mute-control.video-react-vol-0:before, +.video-react .video-react-volume-menu-button.video-react-vol-0:before { + content: ""; +} + +.video-react-icon-volume-down:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-down:before, .video-react .video-react-mute-control.video-react-vol-2:before, +.video-react .video-react-volume-menu-button.video-react-vol-2:before, .video-react .video-react-mute-control.video-react-vol-1:before, +.video-react .video-react-volume-menu-button.video-react-vol-1:before { + content: ""; +} + +.video-react-icon-volume-up:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-up:before, .video-react .video-react-mute-control:before, +.video-react .video-react-volume-menu-button:before { + content: ""; +} + +.video-react-icon-fullscreen:before { + content: ""; +} + +.video-react-icon-fullscreen-exit:before { + content: ""; +} + +.video-react-icon-closed-caption:before, .video-react .video-react-closed-caption:before { + content: ""; +} + +.video-react-icon-hd:before { + content: ""; +} + +.video-react-icon-settings:before { + content: ""; +} + +.video-react-icon-share:before { + content: ""; +} + +.video-react-icon-info:before { + content: ""; +} + +.video-react-icon-info-outline:before { + content: ""; +} + +.video-react-icon-close:before { + content: ""; +} + +.video-react-icon-circle:before, .video-react .video-react-volume-level:before, .video-react .video-react-play-progress:before { + content: ""; +} + +.video-react-icon-circle-outline:before { + content: ""; +} + +.video-react-icon-circle-inner-circle:before { + content: ""; +} + +.video-react { + display: block; + vertical-align: top; + box-sizing: border-box; + color: #fff; + background-color: #000; + position: relative; + font-size: 10px; + line-height: 1; + font-family: serif, Times, "Times New Roman"; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.video-react:-moz-full-screen { + position: absolute; +} +.video-react:-webkit-full-screen { + width: 100% !important; + height: 100% !important; +} +.video-react *, +.video-react *:before, +.video-react *:after { + box-sizing: inherit; +} +.video-react ul { + font-family: inherit; + font-size: inherit; + line-height: inherit; + list-style-position: outside; + margin-left: 0; + margin-right: 0; + margin-top: 0; + margin-bottom: 0; +} +.video-react.video-react-fluid, .video-react.video-react-16-9, .video-react.video-react-4-3 { + width: 100%; + max-width: 100%; + height: 0; +} +.video-react.video-react-16-9 { + padding-top: 56.25%; +} +.video-react.video-react-4-3 { + padding-top: 75%; +} +.video-react.video-react-fill { + width: 100%; + height: 100%; +} +.video-react .video-react-video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.video-react.video-react-fullscreen { + width: 100% !important; + height: 100% !important; + padding-top: 0 !important; +} +.video-react.video-react-fullscreen.video-react-user-inactive { + cursor: none; +} + +body.video-react-full-window { + padding: 0; + margin: 0; + height: 100%; + overflow-y: auto; +} +body.video-react-full-window .video-react-fullscreen { + position: fixed; + overflow: hidden; + z-index: 1000; + left: 0; + top: 0; + bottom: 0; + right: 0; +} + +.video-react button { + background: none; + border: none; + color: inherit; + display: inline-block; + cursor: pointer; + overflow: visible; + font-size: inherit; + line-height: inherit; + text-transform: none; + text-decoration: none; + transition: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.video-react .video-react-loading-spinner { + display: none; + position: absolute; + top: 50%; + left: 50%; + margin: -25px 0 0 -25px; + opacity: 0.85; + text-align: left; + border: 6px solid rgba(43, 51, 63, 0.7); + box-sizing: border-box; + background-clip: padding-box; + width: 50px; + height: 50px; + border-radius: 25px; +} +.video-react .video-react-loading-spinner:before, .video-react .video-react-loading-spinner:after { + content: ""; + position: absolute; + margin: -6px; + box-sizing: inherit; + width: inherit; + height: inherit; + border-radius: inherit; + opacity: 1; + border: inherit; + border-color: transparent; + border-top-color: white; + -webkit-animation: video-react-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, video-react-spinner-fade 1.1s linear infinite; + animation: video-react-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, video-react-spinner-fade 1.1s linear infinite; +} + +.video-react-seeking .video-react-loading-spinner, +.video-react-waiting .video-react-loading-spinner { + display: block; +} + +.video-react-seeking .video-react-loading-spinner:before, +.video-react-waiting .video-react-loading-spinner:before { + border-top-color: white; +} + +.video-react-seeking .video-react-loading-spinner:after, +.video-react-waiting .video-react-loading-spinner:after { + border-top-color: white; + -webkit-animation-delay: 0.44s; + animation-delay: 0.44s; +} + +@keyframes video-react-spinner-spin { + 100% { + transform: rotate(360deg); + } +} +@-webkit-keyframes video-react-spinner-spin { + 100% { + -webkit-transform: rotate(360deg); + } +} +@keyframes video-react-spinner-fade { + 0% { + border-top-color: #73859f; + } + 20% { + border-top-color: #73859f; + } + 35% { + border-top-color: white; + } + 60% { + border-top-color: #73859f; + } + 100% { + border-top-color: #73859f; + } +} +@-webkit-keyframes video-react-spinner-fade { + 0% { + border-top-color: #73859f; + } + 20% { + border-top-color: #73859f; + } + 35% { + border-top-color: white; + } + 60% { + border-top-color: #73859f; + } + 100% { + border-top-color: #73859f; + } +} +.video-react .video-react-big-play-button { + font-size: 3em; + line-height: 1.5em; + height: 1.5em; + width: 3em; + display: block; + position: absolute; + top: 10px; + left: 10px; + padding: 0; + cursor: pointer; + opacity: 1; + border: 0.06666em solid #fff; + background-color: #2B333F; + background-color: rgba(43, 51, 63, 0.7); + -webkit-border-radius: 0.3em; + -moz-border-radius: 0.3em; + border-radius: 0.3em; + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +.video-react .video-react-big-play-button.video-react-big-play-button-center { + top: 50%; + left: 50%; + margin-top: -0.75em; + margin-left: -1.5em; +} +.video-react .video-react-big-play-button.big-play-button-hide { + display: none; +} +.video-react:hover .video-react-big-play-button, +.video-react .video-react-big-play-button:focus { + outline: 0; + border-color: #fff; + background-color: #73859f; + background-color: rgba(115, 133, 159, 0.5); + -webkit-transition: all 0s; + -moz-transition: all 0s; + -o-transition: all 0s; + transition: all 0s; +} + +.video-react-menu-button { + cursor: pointer; +} +.video-react-menu-button.video-react-disabled { + cursor: default; +} + +.video-react-menu .video-react-menu-content { + display: block; + padding: 0; + margin: 0; + overflow: auto; + font-family: serif, Times, "Times New Roman"; +} +.video-react-menu li { + list-style: none; + margin: 0; + padding: 0.2em 0; + line-height: 1.4em; + font-size: 1.2em; + text-align: center; +} +.video-react-menu li:focus, .video-react-menu li:hover { + outline: 0; + background-color: #73859f; + background-color: rgba(115, 133, 159, 0.5); +} +.video-react-menu li.video-react-selected, .video-react-menu li.video-react-selected:focus, .video-react-menu li.video-react-selected:hover { + background-color: #fff; + color: #2B333F; +} +.video-react-menu li.vjs-menu-title { + text-align: center; + text-transform: uppercase; + font-size: 1em; + line-height: 2em; + padding: 0; + margin: 0 0 0.3em 0; + font-weight: bold; + cursor: default; +} + +.video-react-scrubbing .vjs-menu-button:hover .video-react-menu { + display: none; +} + +.video-react .video-react-menu-button-popup .video-react-menu { + display: none; + position: absolute; + bottom: 0; + width: 10em; + left: -3em; + height: 0em; + margin-bottom: 1.5em; + border-top-color: rgba(43, 51, 63, 0.7); +} +.video-react .video-react-menu-button-popup .video-react-menu .video-react-menu-content { + background-color: #2B333F; + background-color: rgba(43, 51, 63, 0.7); + position: absolute; + width: 100%; + bottom: 1.5em; + max-height: 15em; +} + +.video-react-menu-button-popup .video-react-menu.video-react-lock-showing { + display: block; +} + +.video-react .video-react-menu-button-inline { + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; + overflow: hidden; +} +.video-react .video-react-menu-button-inline:before { + width: 2.222222222em; +} +.video-react .video-react-menu-button-inline:hover, .video-react .video-react-menu-button-inline:focus, .video-react .video-react-menu-button-inline.video-react-slider-active { + width: 12em; +} +.video-react .video-react-menu-button-inline:hover .video-react-menu, .video-react .video-react-menu-button-inline:focus .video-react-menu, .video-react .video-react-menu-button-inline.video-react-slider-active .video-react-menu { + display: block; + opacity: 1; +} +.video-react .video-react-menu-button-inline.video-react-slider-active { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; +} +.video-react .video-react-menu-button-inline .video-react-menu { + opacity: 0; + height: 100%; + width: auto; + position: absolute; + left: 4em; + top: 0; + padding: 0; + margin: 0; + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +.video-react .video-react-menu-button-inline .video-react-menu-content { + width: auto; + height: 100%; + margin: 0; + overflow: hidden; +} + +.video-react-no-flex .video-react-menu-button-inline .video-react-menu { + display: block; + opacity: 1; + position: relative; + width: auto; +} +.video-react-no-flex .video-react-menu-button-inline:hover, .video-react-no-flex .video-react-menu-button-inline:focus, .video-react-no-flex .video-react-menu-button-inline.video-react-slider-active { + width: auto; +} + +.video-react .video-react-poster { + display: inline-block; + vertical-align: middle; + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; + background-color: #000000; + cursor: pointer; + margin: 0; + padding: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + height: 100%; +} +.video-react .video-react-poster img { + display: block; + vertical-align: middle; + margin: 0 auto; + max-height: 100%; + padding: 0; + width: 100%; +} + +.video-react .video-react-slider { + outline: 0; + position: relative; + cursor: pointer; + padding: 0; + margin: 0 0.45em 0 0.45em; + background-color: #73859f; + background-color: rgba(115, 133, 159, 0.5); +} +.video-react .video-react-slider:focus { + -webkit-box-shadow: 0 0 1em #fff; + -moz-box-shadow: 0 0 1em #fff; + box-shadow: 0 0 1em #fff; +} + +.video-react .video-react-control { + outline: none; + position: relative; + text-align: center; + margin: 0; + padding: 0; + height: 100%; + width: 4em; + -webkit-box-flex: none; + -moz-box-flex: none; + -webkit-flex: none; + -ms-flex: none; + flex: none; +} +.video-react .video-react-control:before { + font-size: 1.8em; + line-height: 1.67; +} +.video-react .video-react-control:focus:before, .video-react .video-react-control:hover:before, .video-react .video-react-control:focus { + text-shadow: 0em 0em 1em #fff, 0em 0em 0.5em #fff; +} + +.video-react .video-react-control-text { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.video-react-no-flex .video-react-control { + display: table-cell; + vertical-align: middle; +} + +.video-react .video-react-control-bar { + display: none; + width: 100%; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 3em; + background-color: #2B333F; + background-color: rgba(43, 51, 63, 0.7); +} + +.video-react-has-started .video-react-control-bar { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + visibility: visible; + opacity: 1; + -webkit-transition: visibility 0.1s, opacity 0.1s; + -moz-transition: visibility 0.1s, opacity 0.1s; + -o-transition: visibility 0.1s, opacity 0.1s; + transition: visibility 0.1s, opacity 0.1s; +} + +.video-react-has-started.video-react-user-inactive.video-react-playing .video-react-control-bar.video-react-control-bar-auto-hide { + visibility: visible; + opacity: 0; + -webkit-transition: visibility 1s, opacity 1s; + -moz-transition: visibility 1s, opacity 1s; + -o-transition: visibility 1s, opacity 1s; + transition: visibility 1s, opacity 1s; +} + +.video-react-controls-disabled .video-react-control-bar, +.video-react-using-native-controls .video-react-control-bar, +.video-react-error .video-react-control-bar { + display: none !important; +} + +.video-react-audio.video-react-has-started.video-react-user-inactive.video-react-playing .video-react-control-bar { + opacity: 1; + visibility: visible; +} + +.video-react-has-started.video-react-no-flex .video-react-control-bar { + display: table; +} + +.video-react .video-react-progress-control { + -webkit-box-flex: auto; + -moz-box-flex: auto; + -webkit-flex: auto; + -ms-flex: auto; + flex: auto; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + min-width: 4em; +} + +.video-react-live .video-react-progress-control { + display: none; +} + +.video-react .video-react-progress-holder { + -webkit-box-flex: auto; + -moz-box-flex: auto; + -webkit-flex: auto; + -ms-flex: auto; + flex: auto; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; + height: 0.3em; +} + +.video-react .video-react-progress-control:hover .video-react-progress-holder { + font-size: 1.6666666667em; +} + +/* If we let the font size grow as much as everything else, the current time tooltip ends up + ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled + to avoid a weird hitch when you roll off the hover. */ +.video-react .video-react-progress-control:hover .video-react-time-tooltip, +.video-react .video-react-progress-control:hover .video-react-mouse-display:after, +.video-react .video-react-progress-control:hover .video-react-play-progress:after { + visibility: visible; + font-size: 0.6em; +} + +.video-react .video-react-progress-holder .video-react-play-progress, +.video-react .video-react-progress-holder .video-react-load-progress, +.video-react .video-react-progress-holder .video-react-tooltip-progress-bar, +.video-react .video-react-progress-holder .video-react-load-progress div { + position: absolute; + display: block; + height: 0.3em; + margin: 0; + padding: 0; + width: 0; + left: 0; + top: 0; +} + +.video-react .video-react-play-progress { + background-color: #fff; +} +.video-react .video-react-play-progress:before { + position: absolute; + top: -0.3333333333em; + right: -0.5em; + font-size: 0.9em; +} + +.video-react .video-react-time-tooltip, +.video-react .video-react-mouse-display:after, +.video-react .video-react-play-progress:after { + visibility: hidden; + pointer-events: none; + position: absolute; + top: -3.4em; + right: -1.9em; + font-size: 0.9em; + color: #000; + content: attr(data-current-time); + padding: 6px 8px 8px 8px; + background-color: #fff; + background-color: rgba(255, 255, 255, 0.8); + -webkit-border-radius: 0.3em; + -moz-border-radius: 0.3em; + border-radius: 0.3em; +} + +.video-react .video-react-time-tooltip, +.video-react .video-react-play-progress:before, +.video-react .video-react-play-progress:after { + z-index: 1; +} + +.video-react .video-react-progress-control .video-react-keep-tooltips-inside:after { + display: none; +} + +.video-react .video-react-load-progress { + background: #bfc7d3; + background: rgba(115, 133, 159, 0.5); +} + +.video-react .video-react-load-progress div { + background: white; + background: rgba(115, 133, 159, 0.75); +} + +.video-react.video-react-no-flex .video-react-progress-control { + width: auto; +} + +.video-react .video-react-time-tooltip { + display: inline-block; + height: 2.4em; + position: relative; + float: right; + right: -1.9em; +} + +.video-react .video-react-tooltip-progress-bar { + visibility: hidden; +} + +.video-react .video-react-progress-control .video-react-mouse-display { + display: none; + position: absolute; + width: 1px; + height: 100%; + background-color: #000; + z-index: 1; +} + +.video-react-no-flex .video-react-progress-control .video-react-mouse-display { + z-index: 0; +} + +.video-react .video-react-progress-control:hover .video-react-mouse-display { + display: block; +} + +.video-react.video-react-user-inactive .video-react-progress-control .video-react-mouse-display, +.video-react.video-react-user-inactive .video-react-progress-control .video-react-mouse-display:after { + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 1s, opacity 1s; + -moz-transition: visibility 1s, opacity 1s; + -o-transition: visibility 1s, opacity 1s; + transition: visibility 1s, opacity 1s; +} + +.video-react.video-react-user-inactive.video-react-no-flex .video-react-progress-control .video-react-mouse-display, +.video-react.video-react-user-inactive.video-react-no-flex .video-react-progress-control .video-react-mouse-display:after { + display: none; +} + +.video-react .video-react-mouse-display .video-react-time-tooltip, +.video-react .video-react-progress-control .video-react-mouse-display:after { + color: #fff; + background-color: #000; + background-color: rgba(0, 0, 0, 0.8); +} + +.video-react .video-react-play-control { + cursor: pointer; + -webkit-box-flex: none; + -moz-box-flex: none; + -webkit-flex: none; + -ms-flex: none; + flex: none; +} +.video-react .video-react-fullscreen-control { + cursor: pointer; + -webkit-box-flex: none; + -moz-box-flex: none; + -webkit-flex: none; + -ms-flex: none; + flex: none; +} + +.video-react.video-react-fullscreen { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 9999; +} + +.video-react .video-react-time-control { + -webkit-box-flex: none; + -moz-box-flex: none; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-size: 1em; + line-height: 3em; + min-width: 2em; + width: auto; + padding-left: 1em; + padding-right: 1em; +} +.video-react .video-react-time-divider { + line-height: 3em; + min-width: initial; + padding: 0; +} + +.video-react .video-react-mute-control, +.video-react .video-react-volume-menu-button { + cursor: pointer; + -webkit-box-flex: none; + -moz-box-flex: none; + -webkit-flex: none; + -ms-flex: none; + flex: none; +} +.video-react .video-react-volume-control { + width: 5em; + -webkit-box-flex: none; + -moz-box-flex: none; + -webkit-flex: none; + -ms-flex: none; + flex: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +.video-react .video-react-volume-bar { + margin: 1.35em 0.45em; +} +.video-react .video-react-volume-bar.video-react-slider-horizontal { + width: 5em; + height: 0.3em; +} +.video-react .video-react-volume-bar.video-react-slider-horizontal .video-react-volume-level { + width: 100%; +} +.video-react .video-react-volume-bar.video-react-slider-vertical { + width: 0.3em; + height: 5em; + margin: 1.35em auto; +} +.video-react .video-react-volume-bar.video-react-slider-vertical .video-react-volume-level { + height: 100%; +} +.video-react .video-react-volume-level { + position: absolute; + bottom: 0; + left: 0; + background-color: #fff; +} +.video-react .video-react-volume-level:before { + position: absolute; + font-size: 0.9em; +} +.video-react .video-react-slider-vertical .video-react-volume-level { + width: 0.3em; +} +.video-react .video-react-slider-vertical .video-react-volume-level:before { + top: -0.5em; + left: -0.3em; +} +.video-react .video-react-slider-horizontal .video-react-volume-level { + height: 0.3em; +} +.video-react .video-react-slider-horizontal .video-react-volume-level:before { + top: -0.3em; + right: -0.5em; +} +.video-react .video-react-menu-button-popup.video-react-volume-menu-button .video-react-menu { + display: block; + width: 0; + height: 0; + border-top-color: transparent; +} +.video-react .video-react-menu-button-popup.video-react-volume-menu-button-vertical .video-react-menu { + left: 0.5em; + height: 8em; +} +.video-react .video-react-menu-button-popup.video-react-volume-menu-button-horizontal .video-react-menu { + left: -2em; +} +.video-react .video-react-menu-button-popup.video-react-volume-menu-button .video-react-menu-content { + height: 0; + width: 0; + overflow-x: hidden; + overflow-y: hidden; +} +.video-react .video-react-volume-menu-button-vertical:hover .video-react-menu-content, +.video-react .video-react-volume-menu-button-vertical:focus .video-react-menu-content, +.video-react .video-react-volume-menu-button-vertical.video-react-slider-active .video-react-menu-content, +.video-react .video-react-volume-menu-button-vertical .video-react-lock-showing .video-react-menu-content { + height: 8em; + width: 2.9em; +} +.video-react .video-react-volume-menu-button-horizontal:hover .video-react-menu-content, +.video-react .video-react-volume-menu-button-horizontal:focus .video-react-menu-content, +.video-react .video-react-volume-menu-button-horizontal .video-react-slider-active .video-react-menu-content, +.video-react .video-react-volume-menu-button-horizontal .video-react-lock-showing .video-react-menu-content { + height: 2.9em; + width: 8em; +} +.video-react .video-react-volume-menu-button.video-react-menu-button-inline .video-react-menu-content { + background-color: transparent !important; +} + +.video-react .video-react-playback-rate .video-react-playback-rate-value { + line-height: 3em; + text-align: center; +} +.video-react .video-react-playback-rate .video-react-menu { + width: 4em; + left: 0em; +} + +.video-react .video-react-bezel { + position: absolute; + left: 50%; + top: 50%; + width: 52px; + height: 52px; + z-index: 17; + margin-left: -26px; + margin-top: -26px; + background: rgba(0, 0, 0, 0.5); + border-radius: 26px; +} +.video-react .video-react-bezel.video-react-bezel-animation { + -moz-animation: video-react-bezel-fadeout 0.5s linear 1 normal forwards; + -webkit-animation: video-react-bezel-fadeout 0.5s linear 1 normal forwards; + animation: video-react-bezel-fadeout 0.5s linear 1 normal forwards; + pointer-events: none; +} +.video-react .video-react-bezel.video-react-bezel-animation-alt { + -moz-animation: video-react-bezel-fadeout-alt 0.5s linear 1 normal forwards; + -webkit-animation: video-react-bezel-fadeout-alt 0.5s linear 1 normal forwards; + animation: video-react-bezel-fadeout-alt 0.5s linear 1 normal forwards; + pointer-events: none; +} +.video-react .video-react-bezel .video-react-bezel-icon { + width: 36px; + height: 36px; + margin: 8px; + font-size: 26px; + line-height: 36px; + text-align: center; +} +@keyframes video-react-bezel-fadeout { + 0% { + opacity: 1; + } + to { + opacity: 0; + transform: scale(2); + } +} +@keyframes video-react-bezel-fadeout-alt { + 0% { + opacity: 1; + } + to { + opacity: 0; + transform: scale(2); + } +} +.video-react .video-react-closed-caption { + cursor: pointer; + -webkit-box-flex: none; + -moz-box-flex: none; + -webkit-flex: none; + -ms-flex: none; + flex: none; +} +.video-react video::-webkit-media-text-track-container { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); +} \ No newline at end of file diff --git a/src/components/BasicPcShop/MediaComponents/Video/index.tsx b/src/components/BasicPcShop/MediaComponents/Video/index.tsx new file mode 100644 index 0000000..489cf20 --- /dev/null +++ b/src/components/BasicPcShop/MediaComponents/Video/index.tsx @@ -0,0 +1,21 @@ +import React, { memo } from 'react'; +import { Player, BigPlayButton } from 'video-react'; +import './index.css'; +import { IVideoConfig } from './schema'; + +const VideoPlayer = memo((props: IVideoConfig) => { + const { poster, url } = props; + return ( +
+ + + +
+ ); +}); + +export default VideoPlayer; diff --git a/src/components/BasicPcShop/MediaComponents/Video/schema.ts b/src/components/BasicPcShop/MediaComponents/Video/schema.ts new file mode 100644 index 0000000..36a3d2a --- /dev/null +++ b/src/components/BasicPcShop/MediaComponents/Video/schema.ts @@ -0,0 +1,45 @@ +import { + ITextConfigType, + IUploadConfigType, + TTextDefaultType, + TUploadDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; + +export type TVideoEditData = Array; +export interface IVideoConfig { + poster: TUploadDefaultType; + url: TTextDefaultType; +} + +export interface IVideoSchema { + editData: TVideoEditData; + config: IVideoConfig; +} + +const Video: IVideoSchema = { + editData: [ + { + key: 'poster', + name: '视频封面', + type: 'Upload', + }, + { + key: 'url', + name: '视频链接', + type: 'Text', + }, + ], + config: { + poster: [ + { + uid: '001', + name: 'image.png', + status: 'done', + url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png', + }, + ], + url: '', + }, +}; + +export default Video; diff --git a/src/components/BasicPcShop/MediaComponents/Video/template.ts b/src/components/BasicPcShop/MediaComponents/Video/template.ts new file mode 100644 index 0000000..ebe4212 --- /dev/null +++ b/src/components/BasicPcShop/MediaComponents/Video/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'Video', + h: 107, +}; +export default template; diff --git a/src/components/BasicPcShop/MediaComponents/schema.ts b/src/components/BasicPcShop/MediaComponents/schema.ts new file mode 100644 index 0000000..ff1e05b --- /dev/null +++ b/src/components/BasicPcShop/MediaComponents/schema.ts @@ -0,0 +1,6 @@ +import Video from './Video/schema'; + +const mediaSchema = { + Video, +}; +export default mediaSchema; diff --git a/src/components/BasicPcShop/MediaComponents/template.ts b/src/components/BasicPcShop/MediaComponents/template.ts new file mode 100644 index 0000000..5697673 --- /dev/null +++ b/src/components/BasicPcShop/MediaComponents/template.ts @@ -0,0 +1,9 @@ +import Video from './Video/template'; + +const mediaTemplate = [Video]; + +const MediaTemplate = mediaTemplate.map(v => { + return { ...v, category: 'media' }; +}); + +export default MediaTemplate; diff --git a/src/components/BasicPcShop/VisualComponents/Area/index.less b/src/components/BasicPcShop/VisualComponents/Area/index.less new file mode 100644 index 0000000..57dc736 --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Area/index.less @@ -0,0 +1,13 @@ +.chartWrap { + position: relative; + width: 100%; + .chartTitle { + text-align: center; + } + img { + width: 100%; + } + canvas { + width: 100%; + } +} diff --git a/src/components/BasicPcShop/VisualComponents/Area/index.tsx b/src/components/BasicPcShop/VisualComponents/Area/index.tsx new file mode 100644 index 0000000..e31732c --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Area/index.tsx @@ -0,0 +1,76 @@ +import { Chart } from '@antv/f2'; +import React, { memo, useEffect, useRef } from 'react'; +// import { uuid } from 'utils/tool'; +import AreaImg from '@/assets/area.png'; + +import styles from './index.less'; +import { IChartConfig } from './schema'; + +interface XChartProps extends IChartConfig { + isTpl: boolean; +} + +const XLine = (props: XChartProps) => { + const { isTpl, data, color, size, paddingTop, title } = props; + const chartRef = useRef(null); + useEffect(() => { + if (!isTpl) { + const chart = new Chart({ + el: chartRef.current || undefined, + pixelRatio: window.devicePixelRatio, // 指定分辨率 + }); + + // step 2: 处理数据 + const dataX = data.map(item => ({ ...item, value: Number(item.value), a: '1' })); + + // Step 2: 载入数据源 + chart.source(dataX, { + percent: { + formatter: function formatter(val) { + return val * 100 + '%'; + }, + }, + }); + + chart.tooltip({ + showCrosshairs: true, + }); + + chart.scale({ + name: { + range: [0, 1], + }, + value: { + tickCount: 5, + min: 0, + }, + }); + + chart.axis('name', { + label: function label(text, index, total) { + const textCfg: any = {}; + if (index === 0) { + textCfg.textAlign = 'left'; + } else if (index === total - 1) { + textCfg.textAlign = 'right'; + } + return textCfg; + }, + }); + + chart.area().position('name*value'); + chart.line().position('name*value'); + chart.render(); + } + }, [data, isTpl]); + return ( +
+
+ {title} +
+ {isTpl ? dooring chart : } +
+ ); +}; + +export default memo(XLine); diff --git a/src/components/BasicPcShop/VisualComponents/Area/schema.ts b/src/components/BasicPcShop/VisualComponents/Area/schema.ts new file mode 100644 index 0000000..b21ce90 --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Area/schema.ts @@ -0,0 +1,82 @@ +import { + IColorConfigType, + INumberConfigType, + ITableConfigType, + ITextConfigType, + TColorDefaultType, + TNumberDefaultType, + TTableDefaultType, + TTextDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; + +export type TChartEditData = Array< + ITextConfigType | INumberConfigType | IColorConfigType | ITableConfigType +>; +export interface IChartConfig { + title: TTextDefaultType; + size: TNumberDefaultType; + color: TColorDefaultType; + paddingTop: TNumberDefaultType; + data: TTableDefaultType; +} + +export interface IChartSchema { + editData: TChartEditData; + config: IChartConfig; +} + +const Chart: IChartSchema = { + editData: [ + { + key: 'title', + name: '标题', + type: 'Text', + }, + { + key: 'size', + name: '标题大小', + type: 'Number', + }, + { + key: 'color', + name: '标题颜色', + type: 'Color', + }, + { + key: 'paddingTop', + name: '上边距', + type: 'Number', + }, + { + key: 'data', + name: '数据源', + type: 'Table', + }, + ], + config: { + title: '面积图', + size: 14, + color: 'rgba(0,0,0,1)', + paddingTop: 10, + data: [ + { + name: 'A', + value: 20, + }, + { + name: 'B', + value: 60, + }, + { + name: 'C', + value: 20, + }, + { + name: 'D', + value: 80, + }, + ], + }, +}; + +export default Chart; diff --git a/src/components/BasicPcShop/VisualComponents/Area/template.ts b/src/components/BasicPcShop/VisualComponents/Area/template.ts new file mode 100644 index 0000000..3c0cd4d --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Area/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'Area', + h: 108, +}; +export default template; diff --git a/src/components/BasicPcShop/VisualComponents/Chart/index.less b/src/components/BasicPcShop/VisualComponents/Chart/index.less new file mode 100644 index 0000000..57dc736 --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Chart/index.less @@ -0,0 +1,13 @@ +.chartWrap { + position: relative; + width: 100%; + .chartTitle { + text-align: center; + } + img { + width: 100%; + } + canvas { + width: 100%; + } +} diff --git a/src/components/BasicPcShop/VisualComponents/Chart/index.tsx b/src/components/BasicPcShop/VisualComponents/Chart/index.tsx new file mode 100644 index 0000000..89521df --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Chart/index.tsx @@ -0,0 +1,49 @@ +import { Chart } from '@antv/f2'; +import React, { memo, useEffect, useRef } from 'react'; +// import { uuid } from 'utils/tool'; +import ChartImg from '@/assets/chart.png'; + +import styles from './index.less'; +import { IChartConfig } from './schema'; + +interface XChartProps extends IChartConfig { + isTpl: boolean; +} + +const XChart = (props: XChartProps) => { + const { isTpl, data, color, size, paddingTop, title } = props; + const chartRef = useRef(null); + useEffect(() => { + if (!isTpl) { + const chart = new Chart({ + el: chartRef.current || undefined, + pixelRatio: window.devicePixelRatio, // 指定分辨率 + }); + + // step 2: 处理数据 + const dataX = data.map(item => ({ ...item, value: Number(item.value) })); + + // Step 2: 载入数据源 + chart.source(dataX); + + // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴 + chart + .interval() + .position('name*value') + .color('name'); + + // Step 4: 渲染图表 + chart.render(); + } + }, [data, isTpl]); + return ( +
+
+ {title} +
+ {isTpl ? dooring chart : } +
+ ); +}; + +export default memo(XChart); diff --git a/src/components/BasicPcShop/VisualComponents/Chart/schema.ts b/src/components/BasicPcShop/VisualComponents/Chart/schema.ts new file mode 100644 index 0000000..702956d --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Chart/schema.ts @@ -0,0 +1,78 @@ +import { + IColorConfigType, + INumberConfigType, + ITableConfigType, + ITextConfigType, + TColorDefaultType, + TNumberDefaultType, + TTableDefaultType, + TTextDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; + +export type TChartEditData = Array< + ITextConfigType | INumberConfigType | IColorConfigType | ITableConfigType +>; +export interface IChartConfig { + title: TTextDefaultType; + size: TNumberDefaultType; + color: TColorDefaultType; + paddingTop: TNumberDefaultType; + data: TTableDefaultType; +} + +export interface IChartSchema { + editData: TChartEditData; + config: IChartConfig; +} + +const Chart: IChartSchema = { + editData: [ + { + key: 'title', + name: '标题', + type: 'Text', + }, + { + key: 'size', + name: '标题大小', + type: 'Number', + }, + { + key: 'color', + name: '标题颜色', + type: 'Color', + }, + { + key: 'paddingTop', + name: '上边距', + type: 'Number', + }, + { + key: 'data', + name: '数据源', + type: 'Table', + }, + ], + config: { + title: '柱状图', + size: 14, + color: 'rgba(0,0,0,1)', + paddingTop: 10, + data: [ + { + name: 'A', + value: 20, + }, + { + name: 'B', + value: 60, + }, + { + name: 'C', + value: 20, + }, + ], + }, +}; + +export default Chart; diff --git a/src/components/BasicPcShop/VisualComponents/Chart/template.ts b/src/components/BasicPcShop/VisualComponents/Chart/template.ts new file mode 100644 index 0000000..524fbe4 --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Chart/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'Chart', + h: 102, +}; +export default template; diff --git a/src/components/BasicPcShop/VisualComponents/Line/index.less b/src/components/BasicPcShop/VisualComponents/Line/index.less new file mode 100644 index 0000000..57dc736 --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Line/index.less @@ -0,0 +1,13 @@ +.chartWrap { + position: relative; + width: 100%; + .chartTitle { + text-align: center; + } + img { + width: 100%; + } + canvas { + width: 100%; + } +} diff --git a/src/components/BasicPcShop/VisualComponents/Line/index.tsx b/src/components/BasicPcShop/VisualComponents/Line/index.tsx new file mode 100644 index 0000000..e9e4e82 --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Line/index.tsx @@ -0,0 +1,73 @@ +import { Chart } from '@antv/f2'; +import React, { memo, useEffect, useRef } from 'react'; +// import { uuid } from 'utils/tool'; +import LineImg from '@/assets/line.png'; + +import styles from './index.less'; +import { IChartConfig } from './schema'; + +interface XChartProps extends IChartConfig { + isTpl: boolean; +} + +const XLine = (props: XChartProps) => { + const { isTpl, data, color, size, paddingTop, title } = props; + const chartRef = useRef(null); + useEffect(() => { + if (!isTpl) { + const chart = new Chart({ + el: chartRef.current || undefined, + pixelRatio: window.devicePixelRatio, // 指定分辨率 + }); + + // step 2: 处理数据 + const dataX = data.map(item => ({ ...item, value: Number(item.value) })); + + // Step 2: 载入数据源 + chart.source(dataX, { + value: { + tickCount: 5, + min: 0, + }, + }); + + chart.tooltip({ + showCrosshairs: true, + showItemMarker: false, + }); + + chart.axis('name', { + label: function label(text, index, total) { + const textCfg: any = {}; + if (index === 0) { + textCfg.textAlign = 'left'; + } else if (index === total - 1) { + textCfg.textAlign = 'right'; + } + return textCfg; + }, + }); + + chart.line().position('name*value'); + chart + .point() + .position('name*value') + .style({ + stroke: '#fff', + lineWidth: 1, + }); + + chart.render(); + } + }, [data, isTpl]); + return ( +
+
+ {title} +
+ {isTpl ? dooring chart : } +
+ ); +}; + +export default memo(XLine); diff --git a/src/components/BasicPcShop/VisualComponents/Line/schema.ts b/src/components/BasicPcShop/VisualComponents/Line/schema.ts new file mode 100644 index 0000000..f4f8f6c --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Line/schema.ts @@ -0,0 +1,82 @@ +import { + IColorConfigType, + INumberConfigType, + ITableConfigType, + ITextConfigType, + TColorDefaultType, + TNumberDefaultType, + TTableDefaultType, + TTextDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; + +export type TChartEditData = Array< + ITextConfigType | INumberConfigType | IColorConfigType | ITableConfigType +>; +export interface IChartConfig { + title: TTextDefaultType; + size: TNumberDefaultType; + color: TColorDefaultType; + paddingTop: TNumberDefaultType; + data: TTableDefaultType; +} + +export interface IChartSchema { + editData: TChartEditData; + config: IChartConfig; +} + +const Chart: IChartSchema = { + editData: [ + { + key: 'title', + name: '标题', + type: 'Text', + }, + { + key: 'size', + name: '标题大小', + type: 'Number', + }, + { + key: 'color', + name: '标题颜色', + type: 'Color', + }, + { + key: 'paddingTop', + name: '上边距', + type: 'Number', + }, + { + key: 'data', + name: '数据源', + type: 'Table', + }, + ], + config: { + title: '折线图', + size: 14, + color: 'rgba(0,0,0,1)', + paddingTop: 10, + data: [ + { + name: 'A', + value: 20, + }, + { + name: 'B', + value: 60, + }, + { + name: 'C', + value: 20, + }, + { + name: 'D', + value: 80, + }, + ], + }, +}; + +export default Chart; diff --git a/src/components/BasicPcShop/VisualComponents/Line/template.ts b/src/components/BasicPcShop/VisualComponents/Line/template.ts new file mode 100644 index 0000000..cbb7b93 --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Line/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'Line', + h: 104, +}; +export default template; diff --git a/src/components/BasicPcShop/VisualComponents/Pie/index.less b/src/components/BasicPcShop/VisualComponents/Pie/index.less new file mode 100644 index 0000000..57dc736 --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Pie/index.less @@ -0,0 +1,13 @@ +.chartWrap { + position: relative; + width: 100%; + .chartTitle { + text-align: center; + } + img { + width: 100%; + } + canvas { + width: 100%; + } +} diff --git a/src/components/BasicPcShop/VisualComponents/Pie/index.tsx b/src/components/BasicPcShop/VisualComponents/Pie/index.tsx new file mode 100644 index 0000000..3afc5a8 --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Pie/index.tsx @@ -0,0 +1,100 @@ +import { Chart } from '@antv/f2'; +import React, { memo, useEffect, useRef } from 'react'; +// import { uuid } from 'utils/tool'; +import PieImg from '@/assets/pie.png'; + +import styles from './index.less'; +import { IChartConfig } from './schema'; + +interface XChartProps extends IChartConfig { + isTpl: boolean; +} + +interface DataMap { + [name: string]: number | string; +} + +const XLine = (props: XChartProps) => { + const { isTpl, data, color, size, paddingTop, title } = props; + const chartRef = useRef(null); + useEffect(() => { + if (!isTpl) { + const chart = new Chart({ + el: chartRef.current || undefined, + pixelRatio: window.devicePixelRatio, // 指定分辨率 + }); + + // step 2: 处理数据 + const dataX = data.map(item => ({ ...item, value: Number(item.value), a: '1' })); + + // Step 2: 载入数据源 + chart.source(dataX, { + percent: { + formatter: function formatter(val) { + return val * 100 + '%'; + }, + }, + }); + + // 获取数据的map类型，用以展示图例说明 + const dataMap: DataMap = dataX.reduce((prev: any, cur) => { + return prev.name + ? { [prev.name]: prev.value, ...{ [cur.name]: cur.value } } + : { ...prev, ...{ [cur.name]: cur.value } }; + }); + + chart.legend({ + position: 'right', + itemFormatter: function itemFormatter(val) { + return val + ' ' + dataMap[val] + '%'; + }, + }); + chart.tooltip(false); + chart.coord('polar', { + transposed: true, + radius: 0.85, + }); + chart.axis(false); + chart + .interval() + .position('a*value') + .color('name', [ + '#1890FF', + '#13C2C2', + '#2FC25B', + '#FACC14', + '#00CC99', + '#CC3366', + '#CC6600', + '#CC66CC', + '#FF3366', + '#0066CC', + ]) + .adjust('stack') + .style({ + lineWidth: 1, + stroke: '#fff', + lineJoin: 'round', + lineCap: 'round', + }) + .animate({ + appear: { + duration: 1200, + easing: 'bounceOut', + }, + }); + + chart.render(); + } + }, [data, isTpl]); + return ( +
+
+ {title} +
+ {isTpl ? dooring chart : } +
+ ); +}; + +export default memo(XLine); diff --git a/src/components/BasicPcShop/VisualComponents/Pie/schema.ts b/src/components/BasicPcShop/VisualComponents/Pie/schema.ts new file mode 100644 index 0000000..30305ad --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Pie/schema.ts @@ -0,0 +1,82 @@ +import { + IColorConfigType, + INumberConfigType, + ITableConfigType, + ITextConfigType, + TColorDefaultType, + TNumberDefaultType, + TTableDefaultType, + TTextDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; + +export type TChartEditData = Array< + ITextConfigType | INumberConfigType | IColorConfigType | ITableConfigType +>; +export interface IChartConfig { + title: TTextDefaultType; + size: TNumberDefaultType; + color: TColorDefaultType; + paddingTop: TNumberDefaultType; + data: TTableDefaultType; +} + +export interface IChartSchema { + editData: TChartEditData; + config: IChartConfig; +} + +const Chart: IChartSchema = { + editData: [ + { + key: 'title', + name: '标题', + type: 'Text', + }, + { + key: 'size', + name: '标题大小', + type: 'Number', + }, + { + key: 'color', + name: '标题颜色', + type: 'Color', + }, + { + key: 'paddingTop', + name: '上边距', + type: 'Number', + }, + { + key: 'data', + name: '数据源', + type: 'Table', + }, + ], + config: { + title: '饼图', + size: 14, + color: 'rgba(0,0,0,1)', + paddingTop: 10, + data: [ + { + name: 'A', + value: 20, + }, + { + name: 'B', + value: 60, + }, + { + name: 'C', + value: 20, + }, + { + name: 'D', + value: 80, + }, + ], + }, +}; + +export default Chart; diff --git a/src/components/BasicPcShop/VisualComponents/Pie/template.ts b/src/components/BasicPcShop/VisualComponents/Pie/template.ts new file mode 100644 index 0000000..5562765 --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/Pie/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'Pie', + h: 106, +}; +export default template; diff --git a/src/components/BasicPcShop/VisualComponents/schema.ts b/src/components/BasicPcShop/VisualComponents/schema.ts new file mode 100644 index 0000000..f91cd85 --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/schema.ts @@ -0,0 +1,13 @@ +import Chart from './Chart/schema'; +import Line from './Line/schema'; +import Pie from './Pie/schema'; +import Area from './Area/schema'; + +const visualSchema = { + Chart, + Line, + Pie, + Area, +}; + +export default visualSchema; diff --git a/src/components/BasicPcShop/VisualComponents/template.ts b/src/components/BasicPcShop/VisualComponents/template.ts new file mode 100644 index 0000000..1b11d46 --- /dev/null +++ b/src/components/BasicPcShop/VisualComponents/template.ts @@ -0,0 +1,11 @@ +import Chart from './Chart/template'; +import Line from './Line/template'; +import Pie from './Pie/template'; +import Area from './Area/template'; + +const visualTemplate = [Chart, Line, Pie, Area]; + +const VisualTemplate = visualTemplate.map(v => { + return { ...v, category: 'visual' }; +}); +export default VisualTemplate; diff --git a/src/components/BasicPcShop/schema.ts b/src/components/BasicPcShop/schema.ts new file mode 100644 index 0000000..777b122 --- /dev/null +++ b/src/components/BasicPcShop/schema.ts @@ -0,0 +1,11 @@ +import BasicSchema from './BasicComponents/schema'; +import MediaSchema from './MediaComponents/schema'; +import VisualSchema from './VisualComponents/schema'; + +const schema = { + ...BasicSchema, + ...MediaSchema, + ...VisualSchema, +}; + +export default schema; diff --git a/src/components/CommonComponents/BasicComponents/Notice/index.tsx b/src/components/CommonComponents/BasicComponents/Notice/index.tsx new file mode 100644 index 0000000..dd3a702 --- /dev/null +++ b/src/components/CommonComponents/BasicComponents/Notice/index.tsx @@ -0,0 +1,13 @@ +import { NoticeBar } from 'zarm'; +import React, { memo } from 'react'; +import { INoticeConfig } from './schema'; +const Notice = memo((props: INoticeConfig) => { + const { text, speed, theme, isClose = false } = props; + return ( + + {text} + + ); +}); + +export default Notice; diff --git a/src/components/CommonComponents/BasicComponents/Notice/schema.ts b/src/components/CommonComponents/BasicComponents/Notice/schema.ts new file mode 100644 index 0000000..5d84168 --- /dev/null +++ b/src/components/CommonComponents/BasicComponents/Notice/schema.ts @@ -0,0 +1,81 @@ +import { + INumberConfigType, + ISelectConfigType, + ISwitchConfigType, + ITextConfigType, + TNumberDefaultType, + TSelectDefaultType, + TSwitchDefaultType, + TTextDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; + +export type TNoticeSelectKeyType = 'default' | 'warning' | 'primary' | 'success' | 'danger'; +export type TNoticeEditData = Array< + ITextConfigType | INumberConfigType | ISelectConfigType | ISwitchConfigType +>; +export interface INoticeConfig { + text: TTextDefaultType; + speed: TNumberDefaultType; + theme: TSelectDefaultType; + isClose: TSwitchDefaultType; +} + +export interface INoticeSchema { + editData: TNoticeEditData; + config: INoticeConfig; +} + +const Notice: INoticeSchema = { + editData: [ + { + key: 'text', + name: '文本', + type: 'Text', + }, + { + key: 'speed', + name: '滚动速度', + type: 'Number', + }, + { + key: 'theme', + name: '主题', + type: 'Select', + range: [ + { + key: 'default', + text: '默认', + }, + { + key: 'warning', + text: '警告', + }, + { + key: 'primary', + text: '主要', + }, + { + key: 'success', + text: '成功', + }, + { + key: 'danger', + text: '危险', + }, + ], + }, + { + key: 'isClose', + name: '是否可关闭', + type: 'Switch', + }, + ], + config: { + text: '通知栏: 趣谈前端上线啦', + speed: 50, + theme: 'warning', + isClose: false, + }, +}; + +export default Notice; diff --git a/src/components/CommonComponents/BasicComponents/Notice/template.ts b/src/components/CommonComponents/BasicComponents/Notice/template.ts new file mode 100644 index 0000000..fd0e415 --- /dev/null +++ b/src/components/CommonComponents/BasicComponents/Notice/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'Notice', + h: 20, +}; +export default template; diff --git a/src/components/CommonComponents/BasicComponents/Tab/index.less b/src/components/CommonComponents/BasicComponents/Tab/index.less new file mode 100644 index 0000000..1583925 --- /dev/null +++ b/src/components/CommonComponents/BasicComponents/Tab/index.less @@ -0,0 +1,27 @@ +.tabWrap { + padding-top: 16px; + padding-bottom: 16px; + .content { + display: flex; + flex-wrap: wrap; + .item { + padding: 20px 20px 0; + width: 50%; + text-align: center; + justify-content: center; + .imgWrap { + display: inline-block; + width: 80%; + img { + border-radius: 6px; + width: 120px; + height: 120px; + object-fit: cover; + } + .title { + line-height: 2.4; + } + } + } + } +} diff --git a/src/components/CommonComponents/BasicComponents/Tab/index.tsx b/src/components/CommonComponents/BasicComponents/Tab/index.tsx new file mode 100644 index 0000000..52f393f --- /dev/null +++ b/src/components/CommonComponents/BasicComponents/Tab/index.tsx @@ -0,0 +1,64 @@ +import React, { useEffect, useRef } from 'react'; +import { Tabs } from 'zarm'; +import styles from './index.less'; +import { ITabConfig } from './schema'; + +const { Panel } = Tabs; + +const XTab = (props: ITabConfig) => { + const { tabs = ['分类一', '分类二'], activeColor, color, fontSize, sourceData } = props; + + const tabWrapRef = useRef(null); + + useEffect(() => { + if (tabWrapRef.current) { + let res = tabWrapRef.current.querySelector('.za-tabs__line') as HTMLElement; + if (res) { + res.style.backgroundColor = activeColor; + } + } + }, [activeColor]); + + return ( +
+ { + console.log(i); + }} + > + {tabs.map((item, i) => { + return ( + +
+ {sourceData + .filter(item => item.type === i) + .map((item, i) => { + return ( + + ); + })} +
+ + ); + })} + +
+ ); +}; + +export default XTab; diff --git a/src/components/CommonComponents/BasicComponents/Tab/schema.ts b/src/components/CommonComponents/BasicComponents/Tab/schema.ts new file mode 100644 index 0000000..9ba1794 --- /dev/null +++ b/src/components/CommonComponents/BasicComponents/Tab/schema.ts @@ -0,0 +1,118 @@ +import { + IColorConfigType, + IDataListConfigType, + IMutiTextConfigType, + INumberConfigType, + TColorDefaultType, + TDataListDefaultType, + TMutiTextDefaultType, + TNumberDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; + +export type TTabEditData = Array< + IMutiTextConfigType | IColorConfigType | INumberConfigType | IDataListConfigType +>; +export interface ITabConfig { + tabs: TMutiTextDefaultType; + color: TColorDefaultType; + activeColor: TColorDefaultType; + fontSize: TNumberDefaultType; + imgSize: TNumberDefaultType; + sourceData: TDataListDefaultType; +} + +export interface ITabSchema { + editData: TTabEditData; + config: ITabConfig; +} + +const Tab: ITabSchema = { + editData: [ + { + key: 'tabs', + name: '项目类别', + type: 'MutiText', + }, + { + key: 'activeColor', + name: '激活颜色', + type: 'Color', + }, + { + key: 'color', + name: '文字颜色', + type: 'Color', + }, + { + key: 'fontSize', + name: '文字大小', + type: 'Number', + }, + { + key: 'imgSize', + name: '图片大小', + type: 'Number', + }, + { + key: 'sourceData', + name: '数据源', + type: 'DataList', + }, + ], + config: { + tabs: ['类别一', '类别二'], + color: 'rgba(153,153,153,1)', + activeColor: 'rgba(0,102,204,1)', + fontSize: 16, + imgSize: 100, + sourceData: [ + { + id: '1', + title: '趣谈小课1', + desc: '致力于打造优质小课程', + link: 'xxxxx', + type: 0, + imgUrl: [ + { + uid: '001', + name: 'image.png', + status: 'done', + url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png', + }, + ], + }, + { + id: '2', + title: '趣谈小课2', + desc: '致力于打造优质小课程', + link: 'xxxxx', + type: 0, + imgUrl: [ + { + uid: '001', + name: 'image.png', + status: 'done', + url: 'http://io.nainor.com/uploads/2_1740c7033a9.png', + }, + ], + }, + { + id: '3', + title: '趣谈小课3', + desc: '致力于打造优质小课程', + link: 'xxxxx', + type: 1, + imgUrl: [ + { + uid: '001', + name: 'image.png', + status: 'done', + url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png', + }, + ], + }, + ], + }, +}; + +export default Tab; diff --git a/src/components/CommonComponents/BasicComponents/Tab/template.ts b/src/components/CommonComponents/BasicComponents/Tab/template.ts new file mode 100644 index 0000000..dbab411 --- /dev/null +++ b/src/components/CommonComponents/BasicComponents/Tab/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'Tab', + h: 130, +}; +export default template; diff --git a/src/components/CommonComponents/BasicComponents/schema.ts b/src/components/CommonComponents/BasicComponents/schema.ts new file mode 100644 index 0000000..983dff2 --- /dev/null +++ b/src/components/CommonComponents/BasicComponents/schema.ts @@ -0,0 +1,28 @@ +import Carousel from './Carousel/schema'; +import Footer from './Footer/schema'; +import Form from './Form/schema'; +import Header from './Header/schema'; +import Icon from './Icon/schema'; +import Image from './Image/schema'; +import List from './List/schema'; +import LongText from './LongText/schema'; +import Notice from './Notice/schema'; +import Qrcode from './Qrcode/schema'; +import Tab from './Tab/schema'; +import Text from './Text/schema'; + +const basicSchema = { + Carousel, + Footer, + Form, + Header, + Icon, + Image, + List, + LongText, + Notice, + Qrcode, + Tab, + Text, +}; +export default basicSchema; diff --git a/src/components/CommonComponents/BasicComponents/template.ts b/src/components/CommonComponents/BasicComponents/template.ts new file mode 100644 index 0000000..ae567de --- /dev/null +++ b/src/components/CommonComponents/BasicComponents/template.ts @@ -0,0 +1,32 @@ +import Carousel from './Carousel/template'; +import Footer from './Footer/template'; +import Form from './Form/template'; +import Header from './Header/template'; +import Icon from './Icon/template'; +import Image from './Image/template'; +import List from './List/template'; +import LongText from './LongText/template'; +import Notice from './Notice/template'; +import Qrcode from './Qrcode/template'; +import Tab from './Tab/template'; +import Text from './Text/template'; + +const basicTemplate = [ + Carousel, + Footer, + Form, + Header, + Icon, + Image, + List, + LongText, + Notice, + Qrcode, + Tab, + Text, +]; +const BasicTemplate = basicTemplate.map(v => { + return { ...v, category: 'base' }; +}); + +export default BasicTemplate; diff --git a/src/components/CommonComponents/VisualComponents/Carousel/index.less b/src/components/CommonComponents/VisualComponents/Carousel/index.less new file mode 100644 index 0000000..44c9f46 --- /dev/null +++ b/src/components/CommonComponents/VisualComponents/Carousel/index.less @@ -0,0 +1,10 @@ +.carousel__item__pic { + display: inline-block; + width: 100%; + max-height: 220px; + overflow: hidden; + vertical-align: top; + img { + width: 100%; + } +} diff --git a/src/components/CommonComponents/VisualComponents/Carousel/index.tsx b/src/components/CommonComponents/VisualComponents/Carousel/index.tsx new file mode 100644 index 0000000..a2a5ee9 --- /dev/null +++ b/src/components/CommonComponents/VisualComponents/Carousel/index.tsx @@ -0,0 +1,44 @@ +import React, { memo, PropsWithChildren } from 'react'; +import { Carousel } from 'zarm'; +import styles from './index.less'; +import { ICarouselConfig } from './schema'; + +interface CarouselTypes extends ICarouselConfig { + isTpl: boolean; +} + +const XCarousel = memo((props: PropsWithChildren) => { + const { direction, swipeable, autoPlay, isTpl, imgList, tplImg } = props; + const contentRender = () => { + return imgList.map((item, i) => { + return ( +
+ 0 ? item.imgUrl[0].url : ''} alt="" /> +
+ ); + }); + }; + return ( +
+ {isTpl ? ( +
+ +
+ ) : ( + { + // console.log(`onChange: ${index}`); + }} + direction={direction} + swipeable={swipeable} + autoPlay={autoPlay} + loop + > + {contentRender()} + + )} +
+ ); +}); + +export default XCarousel; diff --git a/src/components/CommonComponents/VisualComponents/Carousel/schema.ts b/src/components/CommonComponents/VisualComponents/Carousel/schema.ts new file mode 100644 index 0000000..a8ade45 --- /dev/null +++ b/src/components/CommonComponents/VisualComponents/Carousel/schema.ts @@ -0,0 +1,98 @@ +import { + IDataListConfigType, + IRadioConfigType, + ISwitchConfigType, + TDataListDefaultType, + TRadioDefaultType, + TSwitchDefaultType, +} from '@/components/PanelComponents/FormEditor/types'; + +export type CarouselDirectionKeyType = 'down' | 'left'; + +export type TCarouselEditData = Array< + IRadioConfigType | ISwitchConfigType | IDataListConfigType +>; +export interface ICarouselConfig { + direction: TRadioDefaultType; + swipeable: TSwitchDefaultType; + autoPlay: TSwitchDefaultType; + imgList: TDataListDefaultType; + tplImg: string; +} + +export interface ICarouselSchema { + editData: TCarouselEditData; + config: ICarouselConfig; +} + +const Carousel: ICarouselSchema = { + editData: [ + { + key: 'direction', + name: '方向', + type: 'Radio', + range: [ + { + key: 'down', + text: '从上到下', + }, + { + key: 'left', + text: '从左到右', + }, + ], + }, + { + key: 'swipeable', + name: '是否可拖拽', + type: 'Switch', + }, + { + key: 'autoPlay', + name: '是否自动播放', + type: 'Switch', + }, + { + key: 'imgList', + name: '图片列表', + type: 'DataList', + }, + ], + config: { + direction: 'left', + swipeable: false, + autoPlay: false, + imgList: [ + { + id: '1', + title: '趣谈小课1', + desc: '致力于打造优质小课程', + link: 'xxxxx', + imgUrl: [ + { + uid: '001', + name: 'image.png', + status: 'done', + url: 'http://io.nainor.com/uploads/1_1740bd7c3dc.png', + }, + ], + }, + { + id: '2', + title: '趣谈小课1', + desc: '致力于打造优质小课程', + link: 'xxxxx', + imgUrl: [ + { + uid: '001', + name: 'image.png', + status: 'done', + url: 'http://io.nainor.com/uploads/2_1740bd8d525.png', + }, + ], + }, + ], + tplImg: 'http://io.nainor.com/uploads/carousal_17442e1420f.png', + }, +}; +export default Carousel; diff --git a/src/components/CommonComponents/VisualComponents/Carousel/template.ts b/src/components/CommonComponents/VisualComponents/Carousel/template.ts new file mode 100644 index 0000000..b915ba4 --- /dev/null +++ b/src/components/CommonComponents/VisualComponents/Carousel/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'Carousel', + h: 82, +}; +export default template; diff --git a/src/components/CommonComponents/VisualComponents/Form/BaseForm.tsx b/src/components/CommonComponents/VisualComponents/Form/BaseForm.tsx new file mode 100644 index 0000000..78f4a3f --- /dev/null +++ b/src/components/CommonComponents/VisualComponents/Form/BaseForm.tsx @@ -0,0 +1,96 @@ +import { Input, Cell, DateSelect, Radio, Select } from 'zarm'; +import styles from './baseForm.less'; +import React from 'react'; +import { + baseFormDateTpl, + baseFormMyRadioTpl, + baseFormMySelectTpl, + baseFormNumberTpl, + baseFormTextAreaTpl, + baseFormTextTpl, + baseFormUnionType, +} from '@/components/PanelComponents/FormEditor/types'; +// 维护表单控件， 提高form渲染性能 + +type TBaseForm = { + [key in baseFormUnionType]: any; +}; + +const BaseForm: TBaseForm = { + Text: (props: baseFormTextTpl & { onChange: (v: string | undefined) => void }) => { + const { label, placeholder, onChange } = props; + return ( + + + + ); + }, + Textarea: (props: baseFormTextAreaTpl & { onChange: (v: string | undefined) => void }) => { + const { label, placeholder, onChange } = props; + return ( + + + + ); + }, + Number: (props: baseFormNumberTpl & { onChange: (v: string | undefined | number) => void }) => { + const { label, placeholder, onChange } = props; + return ( + + + + ); + }, + MyRadio: (props: baseFormMyRadioTpl & { onChange: (v: string | undefined | number) => void }) => { + const { label, options, onChange } = props; + return ( +
+
{label}
+ + + {options.map((item, i) => { + return ( + + {item.label} + + ); + })} + + +
+ ); + }, + Date: (props: baseFormDateTpl & { onChange: (v: Date) => void }) => { + const { label, placeholder, onChange } = props; + return ( + + + + ); + }, + MySelect: ( + props: baseFormMySelectTpl & { onChange: ((v: Record) => void) | undefined }, + ) => { + const { label, options, onChange } = props; + return ( + +