13 |
14 |
16 |
17 | );
18 | }
19 |
20 | export default BasicLayout;
21 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/Header/index.less:
--------------------------------------------------------------------------------
1 | .header {
2 | box-sizing: content-box;
3 | padding: 3px 12px;
4 | display: flex;
5 | align-items: center;
6 | height: 50px;
7 | background-color: #000;
8 | .logo {
9 | margin-right: 10px;
10 | max-width: 160px;
11 | max-height: 46px;
12 | height: 46px;
13 | overflow: hidden;
14 | img {
15 | height: 100%;
16 | object-fit: contain;
17 | }
18 | }
19 | .title {
20 | font-size: 20px;
21 | color: #fff;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/Search/index.less:
--------------------------------------------------------------------------------
1 | .header {
2 | box-sizing: content-box;
3 | padding: 3px 12px;
4 | display: flex;
5 | align-items: center;
6 | height: 50px;
7 | background-color: #000;
8 | .logo {
9 | margin-right: 10px;
10 | max-width: 160px;
11 | max-height: 46px;
12 | height: 46px;
13 | overflow: hidden;
14 | img {
15 | height: 100%;
16 | object-fit: contain;
17 | }
18 | }
19 | .title {
20 | font-size: 20px;
21 | color: #fff;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/LoadingCp/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default () => (
4 |
13 |
20 | );
21 |
--------------------------------------------------------------------------------
/src/layouts/__tests__/index.test.js:
--------------------------------------------------------------------------------
1 | import BasicLayout from '..';
2 | import renderer from 'react-test-renderer';
3 |
4 | describe('Layout: BasicLayout', () => {
5 | it('Render correctly', () => {
6 | const wrapper = renderer.create(
14 |
15 |
16 |
17 |
18 |
19 |
8 | 
9 |
10 | );
11 |
12 | export default memo(function ZanPao() {
13 | return (
14 |
9 |
15 |
16 |
19 |
20 |
21 | );
22 | });
23 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/Notice/index.tsx:
--------------------------------------------------------------------------------
1 | import { NoticeBar } from 'zarm';
2 | import React, { memo } from 'react';
3 | import { INoticeConfig } from './schema';
4 | import logo from '@/assets/09-通知.png';
5 | interface NoticeType extends INoticeConfig {
6 | isTpl?: boolean;
7 | }
8 | const Notice = memo((props:NoticeType) => {
9 | const { text, speed, theme, isTpl, isClose = false } = props;
10 | return isTpl ? (
11 |
12 | 
13 |
14 | ) : (
15 |
13 |
14 |
15 | ) : (
16 |
17 | 
18 |
20 | );
21 | });
22 |
23 | export default Qrcode;
24 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/Footer/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import { IFooterConfig } from './schema';
3 | import logo from '@/assets/02-页脚.png';
4 |
5 | interface FooterPropTypes extends IFooterConfig {
6 | isTpl: boolean;
7 | }
8 |
9 | const Footer = memo((props: FooterPropTypes) => {
10 | const { bgColor, text, color, align, fontSize, height } = props;
11 | return props.isTpl ? (
12 | {text}
19 |
13 |
14 |
15 | ) : (
16 |
28 | );
29 | });
30 |
31 | export default Footer;
32 |
--------------------------------------------------------------------------------
/src/pages/editor/components/CanvasControl/index.less:
--------------------------------------------------------------------------------
1 | .sliderWrap {
2 | position: absolute;
3 | display: inline-block;
4 | right: 46px;
5 | bottom: 100px;
6 | height: 32px;
7 | line-height: 30px;
8 | background: #ffffff;
9 | box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
10 | border-radius: 4px;
11 | color: #4a4a4a;
12 | .slider {
13 | position: absolute;
14 | right: 30px;
15 | bottom: 95px;
16 | font-size: 14px;
17 | }
18 | .sliderBtn {
19 | cursor: pointer;
20 | user-select: none;
21 | display: inline;
22 | font-size: 14px;
23 | color: #4a4a4a;
24 | }
25 | span {
26 | margin: 0 8px;
27 | }
28 | .backSize {
29 | cursor: pointer;
30 | color: #4a4a4a;
31 | &::before {
32 | content: '|';
33 | color: #dbdbdb;
34 | margin-right: 7px;
35 | }
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/WhiteTpl/index.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import styles from './index.less';
3 | import React from 'react';
4 | import { IWhiteTplConfig } from './schema';
5 | import logo from '@/assets/13-空白.png';
6 |
7 | interface IProps extends IWhiteTplConfig {
8 | isTpl: boolean;
9 | }
10 |
11 | const WhiteTpl = memo((props: IProps) => {
12 | const { bgColor, text, fontSize, color, height, isTpl } = props;
13 |
14 | return isTpl ? (
15 |
16 |
17 |
18 | ) : (
19 |
20 |
24 | );
25 | });
26 |
27 | export default WhiteTpl;
28 |
--------------------------------------------------------------------------------
/src/components/BasicShop/MediaComponents/Audio/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ITextConfigType,
3 | INumberConfigType,
4 | TTextDefaultType,
5 | TNumberDefaultType,
6 | } from '@/components/PanelComponents/FormEditor/types';
7 |
8 | export type TAudioEditData = Array
21 | { isTpl ? '空白模版' : text }
22 |
23 | Something went wrong.
; 24 | } 25 | return this.props.children; 26 | } 27 | } 28 | 29 | export default ErrorBoundary; 30 | -------------------------------------------------------------------------------- /src/components/BasicShop/VisualComponents/XProgress/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react'; 2 | import { Progress } from 'zarm'; 3 | import styles from './index.less'; 4 | import { IXProgressConfig } from './schema'; 5 | import logo from '@/assets/15-进度.png'; 6 | 7 | interface IProps extends IXProgressConfig { 8 | isTpl: boolean; 9 | } 10 | 11 | const XProgress = memo((props: IProps) => { 12 | const { theme, size, shape, percent, strokeWidth, isTpl } = props; 13 | return isTpl ? ( 14 |
15 |
16 |
17 | ) : (
18 |
19 |
26 |
27 | );
28 | });
29 |
30 | export default XProgress;
31 |
--------------------------------------------------------------------------------
/src/components/PanelComponents/DataList/index.less:
--------------------------------------------------------------------------------
1 | .dataList {
2 | padding: 6px 10px;
3 | border: 1px solid #f0f0f0;
4 | }
5 | .listItem {
6 | position: relative;
7 | padding-bottom: 6px;
8 | margin-bottom: 6px;
9 | border-bottom: 1px solid #f0f0f0;
10 | &:hover {
11 | .actionBar {
12 | display: block;
13 | }
14 | }
15 | &:last-child {
16 | border-bottom: none;
17 | margin-bottom: 0;
18 | }
19 | .tit {
20 | font-weight: bold;
21 | }
22 | .desc {
23 | font-size: 12px;
24 | line-height: 2.4;
25 | color: #ccc;
26 | }
27 | .actionBar {
28 | position: absolute;
29 | right: 0;
30 | top: 50%;
31 | transform: translateY(-50%);
32 | display: none;
33 | background: #fff;
34 | box-shadow: -20px 0 10px 10px #fff;
35 | .action {
36 | margin-right: 18px;
37 | cursor: pointer;
38 | &:last-child {
39 | cursor: move;
40 | }
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/Header/index.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import styles from './index.less';
3 | import React from 'react';
4 | import logos from '@/assets/04-页头.png';
5 | import { IHeaderConfig } from './schema';
6 |
7 | interface HeaderPropTypes extends IHeaderConfig {
8 | isTpl: boolean;
9 | }
10 |
11 | const Header = memo((props: HeaderPropTypes) => {
12 | const { bgColor, logo, logoText, fontSize, color } = props;
13 | return props.isTpl ? (
14 |
15 | 
16 |
17 | ) : (
18 |
20 | 
21 |
22 |
23 | {logoText}
24 |
25 |
23 |
24 |
25 | ) : (
26 |
29 |
30 | {
31 | !!text && { text }
32 | }
33 |
34 |
35 | );
36 | });
37 | export default Text;
38 |
--------------------------------------------------------------------------------
/src/pages/document.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
20 |
21 |
22 | ) : (
23 |
13 |
14 |
15 | ) : (
16 |
17 |
27 | )}
28 |
29 | );
30 | });
31 |
32 | export default AudioPlayer;
33 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/Search/index.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import styles from './index.less';
3 | import React from 'react';
4 | import { Input } from 'antd';
5 | import logo from '@/assets/search.png';
6 | import { IHeaderConfig } from './schema';
7 |
8 | const { Search } = Input;
9 |
10 | interface HeaderPropTypes extends IHeaderConfig {
11 | isTpl: boolean;
12 | }
13 |
14 | const Header = memo((props: HeaderPropTypes) => {
15 | const { placeholder, enterButton, size } = props;
16 | return props.isTpl ? (
17 |
18 |
19 |
20 | ) : (
21 |
22 | {}}
26 | style={{ width: '100%' }}
27 | enterButton={!!enterButton}
28 | size={size}
29 | />
30 |
31 | );
32 | });
33 |
34 | export default Header;
35 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/LongText/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import styles from './index.less';
3 | import { ILongTextConfig } from './schema';
4 | import logo from '@/assets/08-长文本.png';
5 |
6 | interface LongTextType extends ILongTextConfig {
7 | isTpl?: boolean;
8 | }
9 |
10 | const LongText = memo((props: LongTextType) => {
11 | const { text, fontSize, color, indent, lineHeight, textAlign, bgColor, padding, radius } = props;
12 | return props.isTpl ? (
13 |
14 |
15 |
16 | ) : (
17 |
30 | {text}
31 |
32 | );
33 | });
34 | export default LongText;
35 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/XButton/Modal.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, ReactNode } from 'react'
2 | import ReactDOM from 'react-dom'
3 | import styles from './index.less'
4 |
5 | interface IProps {
6 | visible: boolean;
7 | title: string;
8 | onClose: () => void;
9 | children: ReactNode;
10 | }
11 |
12 | const Modal = (props: IProps) => {
13 | const { visible, title, children, onClose } = props;
14 |
15 | const childDom =
16 |
17 |
;
23 |
24 | return visible ? ReactDOM.createPortal(childDom, document.body) : null
25 | }
26 |
27 | export default memo(Modal)
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/schema.ts:
--------------------------------------------------------------------------------
1 | import Carousel from './Carousel/schema';
2 | import Footer from './Footer/schema';
3 | import Form from './Form/schema';
4 | import Header from './Header/schema';
5 | import WhiteTpl from './WhiteTpl/schema';
6 | import Icon from './Icon/schema';
7 | import Image from './Image/schema';
8 | import List from './List/schema';
9 | import LongText from './LongText/schema';
10 | import Notice from './Notice/schema';
11 | import Qrcode from './Qrcode/schema';
12 | import Tab from './Tab/schema';
13 | import Text from './Text/schema';
14 | import XButton from './XButton/schema';
15 | import Card from './Card/schema';
16 | import Search from './Search/schema';
17 | import Divider from './Divider/schema';
18 |
19 | const basicSchema = {
20 | Carousel,
21 | Footer,
22 | Form,
23 | Header,
24 | Icon,
25 | Image,
26 | List,
27 | LongText,
28 | Notice,
29 | Qrcode,
30 | Tab,
31 | Text,
32 | XButton,
33 | WhiteTpl,
34 | Card,
35 | Search,
36 | Divider
37 | };
38 | export default basicSchema;
39 |
--------------------------------------------------------------------------------
/src/components/BackTop/index.js:
--------------------------------------------------------------------------------
1 | import { memo } from 'react'
2 | import { BackToTop, Icon } from 'zarm'
3 |
4 | const themeObj = {
5 | simple: { bgColor: '#fff', color: '#999' },
6 | black: { bgColor: '#000', color: '#fff' },
7 | danger: { bgColor: '#ff5050', color: '#fff' },
8 | primary: { bgColor: '#00bc71', color: '#fff' },
9 | blue: { bgColor: '#06c', color: '#fff' }
10 | }
11 | const BackTop = memo((props) => {
12 | const {
13 | theme = 'simple'
14 | } = props
15 |
16 | return
18 | x
19 |
22 | { title }
20 | { children }
21 |
29 |
31 |
23 |
32 | );
33 | });
34 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/template.ts:
--------------------------------------------------------------------------------
1 | import Carousel from './Carousel/template';
2 | import Footer from './Footer/template';
3 | import Form from './Form/template';
4 | import Header from './Header/template';
5 | import Icon from './Icon/template';
6 | import Image from './Image/template';
7 | import List from './List/template';
8 | import LongText from './LongText/template';
9 | import Notice from './Notice/template';
10 | import Card from './Card/template';
11 | import Qrcode from './Qrcode/template';
12 | import Tab from './Tab/template';
13 | import Text from './Text/template';
14 | import XButton from './XButton/template';
15 | import WhiteTpl from './WhiteTpl/template';
16 | import Search from './Search/template';
17 | import Divider from './Divider/template';
18 |
19 | const basicTemplate = [
20 | Carousel,
21 | Form,
22 | Header,
23 | Footer,
24 | Icon,
25 | Image,
26 | WhiteTpl,
27 | List,
28 | LongText,
29 | Notice,
30 | Card,
31 | Qrcode,
32 | Tab,
33 | Text,
34 | Search,
35 | XButton,
36 | Divider
37 | ];
38 | const BasicTemplate = basicTemplate.map(v => {
39 | return { ...v, category: 'base' };
40 | });
41 |
42 | export default BasicTemplate;
43 |
--------------------------------------------------------------------------------
/src/components/PanelComponents/Upload/index.less:
--------------------------------------------------------------------------------
1 | :global(.ant-upload-select-picture-card i) {
2 | color: #999;
3 | font-size: 32px;
4 | }
5 |
6 | :global(.ant-upload-select-picture-card .ant-upload-text) {
7 | margin-top: 8px;
8 | color: #666;
9 | }
10 |
11 | .avatarUploader {
12 | display: inline-block;
13 | }
14 |
15 | .wallBtn {
16 | position: absolute;
17 | left: 140px;
18 | bottom: 56px;
19 | display: inline-block;
20 | color: #2F54EB;
21 | cursor: pointer;
22 | border-bottom: 1px solid #2F54EB;
23 | }
24 |
25 | .imgBox {
26 | display: flex;
27 | flex-wrap: wrap;
28 | max-height: 520px;
29 | overflow: auto;
30 | .imgItem {
31 | position: relative;
32 | margin-right: 16px;
33 | margin-bottom: 16px;
34 | width: 320px;
35 | max-height: 220px;
36 | overflow: hidden;
37 | cursor: pointer;
38 | img {
39 | width: 100%;
40 | }
41 | &:hover, &.seleted {
42 | .iconBtn {
43 | visibility: visible;
44 | }
45 | }
46 |
47 | .iconBtn {
48 | position: absolute;
49 | visibility: hidden;
50 | top: 6px;
51 | right: 10px;
52 | font-size: 18px;
53 | color: rgb(8, 156, 8);
54 | }
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/components/BasicShop/MediaComponents/Video/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import { Player, BigPlayButton } from 'video-react';
3 | import './index.css';
4 | import { IVideoConfig } from './schema';
5 | import logo from '@/assets/14-视频.png';
6 | import { styles } from 'react-contexify/lib/utils/styles';
7 |
8 | interface VideoTypes extends IVideoConfig {
9 | isTpl: boolean;
10 | }
11 |
12 | const VideoPlayer = memo((props: VideoTypes) => {
13 | const { poster, url, otherCode, isTpl } = props;
14 | return isTpl ? (
15 |
24 | x:
25 |
27 |
28 | y:
29 |
31 |
16 |
17 |
18 | ) :(
19 |
20 | {
21 | !otherCode ?
26 | :
28 |
33 | );
34 | });
35 |
36 | export default VideoPlayer;
37 |
--------------------------------------------------------------------------------
/src/pages/editor/components/CanvasControl/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { MouseEvent } from 'react';
2 | import { ExpandOutlined } from '@ant-design/icons';
3 | import styles from './index.less';
4 |
5 | interface CanvasControlProps {
6 | scaleNum: number;
7 | handleSlider: Function;
8 | backSize(event: MouseEvent
29 |
30 |
31 | }
32 |
15 |
22 | +
23 |
24 | {scaleNum * 100}%
25 |
30 | -
31 |
32 |
33 |
36 | );
37 | };
38 |
39 | export default CanvasControl;
40 |
--------------------------------------------------------------------------------
/src/components/BasicShop/MediaComponents/Video/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ITextConfigType,
3 | IUploadConfigType,
4 | TTextDefaultType,
5 | TUploadDefaultType,
6 | TTextAreaDefaultType,
7 | ITextAreaConfigType,
8 | } from '@/components/PanelComponents/FormEditor/types';
9 |
10 | export type TVideoEditData = Array
17 | 
0 ? item.imgUrl[0].url : ''} alt="" />
18 |
19 | );
20 | });
21 | };
22 | return (
23 | 0 ? item.imgUrl[0].url : ''} alt="" />
18 |
24 | {isTpl ? (
25 | {
31 | // console.log(`onChange: ${index}`);
32 | }}
33 | dotPosition={dotPosition}
34 | autoplay={autoPlay}
35 | >
36 | {contentRender()}
37 |
38 | )}
39 |
40 | );
41 | });
42 |
43 | export default XCarousel;
44 |
--------------------------------------------------------------------------------
/src/pages/editor/components/AvatorGroup/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useMemo } from 'react';
2 | import { Avatar } from 'antd';
3 |
4 | interface IProp {
5 | collapsed: boolean;
6 | list?: Array
26 |
27 |
28 | ) : (
29 |
34 |
35 |
36 | ) : (
37 |
49 |
50 | { text }
51 |
52 |
53 | );
54 | });
55 | export default Text;
56 |
--------------------------------------------------------------------------------
/src/utils/req.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import { message } from 'antd'
3 |
4 | const isDev = process.env.NODE_ENV === 'development'
5 |
6 | const instance = axios.create({
7 | baseURL: isDev ? 'http://192.168.1.3:3000/api/v0' : '你的服务器地址',
8 | timeout: 10000,
9 | withCredentials: true
10 | });
11 |
12 | // 添加请求拦截器
13 | instance.interceptors.request.use(function (config) {
14 | // 在发送请求之前做些什么
15 | let n = localStorage.getItem('nickname')
16 | config.headers = {
17 | 'x-requested-with': encodeURIComponent(n ? n : '')
18 | }
19 | return config;
20 | }, function (error) {
21 | // 对请求错误做些什么
22 | return Promise.reject(error);
23 | });
24 |
25 | // 添加响应拦截器
26 | instance.interceptors.response.use(function (response) {
27 | // 对响应数据做点什么
28 | if(response.headers['x-show-msg'] === 'zxzk_msg_200') {
29 | message.success(response.data.msg, 2);
30 | }
31 | return response.data.result;
32 | }, function (error) {
33 | // 对响应错误做点什么
34 | const { response } = error;
35 | if(response.status === 404) {
36 | message.error('请求资源未发现');
37 | }else if(response.status === 403) {
38 | message.error(response.data.msg, () => {
39 | window.location.href = '/h5_plus/login'
40 | localStorage.clear()
41 | });
42 | }else {
43 | message.error(response.data.msg);
44 | }
45 | return Promise.reject(error);
46 | });
47 |
48 |
49 |
50 | export default instance
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/WhiteTpl/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | IColorConfigType,
3 | INumberConfigType,
4 | ITextConfigType,
5 | TColorDefaultType,
6 | TNumberDefaultType,
7 | TTextDefaultType
8 | } from '@/components/PanelComponents/FormEditor/types';
9 |
10 | export type TWhiteTplEditData = Array<
11 | IColorConfigType | INumberConfigType | ITextConfigType
12 | >;
13 | export interface IWhiteTplConfig {
14 | bgColor: TColorDefaultType;
15 | text: TTextDefaultType;
16 | fontSize: TNumberDefaultType;
17 | color: TColorDefaultType;
18 | height: TNumberDefaultType;
19 | }
20 |
21 | export interface IWhiteTplSchema {
22 | editData: TWhiteTplEditData;
23 | config: IWhiteTplConfig;
24 | }
25 |
26 | const WhiteTpl: IWhiteTplSchema = {
27 | editData: [
28 | {
29 | key: 'bgColor',
30 | name: '背景色',
31 | type: 'Color',
32 | },
33 | {
34 | key: 'height',
35 | name: '高度',
36 | type: 'Number',
37 | },
38 | {
39 | key: 'text',
40 | name: '文字',
41 | type: 'Text',
42 | },
43 | {
44 | key: 'color',
45 | name: '文字颜色',
46 | type: 'Color',
47 | },
48 | {
49 | key: 'fontSize',
50 | name: '文字大小',
51 | type: 'Number',
52 | },
53 | ],
54 | config: {
55 | bgColor: 'rgba(255,255,255,1)',
56 | text: '',
57 | fontSize: 16,
58 | color: 'rgba(210,210,210,1)',
59 | height: 30,
60 | },
61 | };
62 |
63 | export default WhiteTpl;
64 |
--------------------------------------------------------------------------------
/src/components/PanelComponents/CardPicker/index.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, memo } from 'react';
2 | import classnames from 'classnames';
3 | import Icon from '../../BasicShop/BasicComponents/Icon';
4 | import styles from './index.less';
5 | import React from 'react';
6 | import { IconTypes } from '@/components/BasicShop/BasicComponents/Icon/schema';
7 | import { ICardPickerConfigType } from '../FormEditor/types';
8 |
9 | interface CardPickerType extends Omit
32 | {icons.map((item, i) => {
33 | return (
34 | handlePicker(item)}
37 | key={i}
38 | >
39 |
44 | );
45 | });
46 |
--------------------------------------------------------------------------------
/src/pages/help/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import A from '@/assets/1.png';
3 | import B from '@/assets/2.png';
4 | import C from '@/assets/3.png';
5 | import D from '@/assets/4.png';
6 | import E from '@/assets/5.png';
7 | import F from '@/assets/6.png';
8 | import styles from './index.less';
9 |
10 | const Help = () => {
11 | return (
12 |
13 |
39 | );
40 | };
41 |
42 | export default Help;
43 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | const Koa = require('koa');
2 | const { resolve } = require('path');
3 | const staticServer = require('koa-static');
4 | const koaBody = require('koa-body');
5 | const cors = require('koa2-cors');
6 | const fs = require('fs');
7 | const logger = require('koa-logger');
8 |
9 | const app = new Koa();
10 |
11 | app.use(staticServer(resolve(__dirname, './dist')));
12 | app.use(koaBody());
13 | app.use(logger());
14 |
15 | // 设置跨域
16 | app.use(
17 | cors({
18 | origin: function(ctx) {
19 | if (ctx.url.indexOf('/dooring') > -1) {
20 | return '*'; // 允许来自所有域名请求
21 | }
22 | return '';
23 | },
24 | exposeHeaders: ['WWW-Authenticate', 'Server-Authorization', 'x-test-code'],
25 | maxAge: 5, // 该字段可选，用来指定本次预检请求的有效期，单位为秒
26 | credentials: true,
27 | allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
28 | allowHeaders: [
29 | 'Content-Type',
30 | 'Authorization',
31 | 'Accept',
32 | 'x-requested-with',
33 | 'Content-Encoding',
34 | ],
35 | }),
36 | );
37 |
38 | let htmlStr = '';
39 |
40 | app.use(async (ctx, next) => {
41 | console.log(ctx.url);
42 | if (ctx.url === '/dooring/render') {
43 | htmlStr = ctx.request.body;
44 | ctx.body = 'success';
45 | } else if (ctx.url.indexOf('/html') === 0) {
46 | ctx.type = 'html';
47 | ctx.body = htmlStr;
48 | } else if (/^\/pc_plus/g.test(ctx.path)) {
49 | ctx.type = 'html';
50 | ctx.body = fs.createReadStream(resolve(__dirname, './dist/pc_plus'));
51 | return;
52 | }
53 | });
54 |
55 | // 启动的端口号
56 | app.listen(3000);
57 |
--------------------------------------------------------------------------------
/src/components/BasicShop/VisualComponents/Chart/index.tsx:
--------------------------------------------------------------------------------
1 | import { Chart } from '@antv/f2';
2 | import React, { memo, useEffect, useRef } from 'react';
3 | // import { uuid } from 'utils/tool';
4 | import ChartImg from '@/assets/chart.png';
5 |
6 | import styles from './index.less';
7 | import { IChartConfig } from './schema';
8 |
9 | interface XChartProps extends IChartConfig {
10 | isTpl: boolean;
11 | }
12 |
13 | const XChart = (props: XChartProps) => {
14 | const { isTpl, data, color, size, paddingTop, title } = props;
15 | const chartRef = useRef(null);
16 | useEffect(() => {
17 | if (!isTpl) {
18 | const chart = new Chart({
19 | el: chartRef.current || undefined,
20 | pixelRatio: window.devicePixelRatio, // 指定分辨率
21 | });
22 |
23 | // step 2: 处理数据
24 | const dataX = data.map(item => ({ ...item, value: Number(item.value) }));
25 |
26 | // Step 2: 载入数据源
27 | chart.source(dataX);
28 |
29 | // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
30 | chart
31 | .interval()
32 | .position('name*value')
33 | .color('name');
34 |
35 | // Step 4: 渲染图表
36 | chart.render();
37 | }
38 | }, [data, isTpl]);
39 | return (
40 | H5-Dooring使用指南
14 |
15 | 
17 |
18 | 1. 首页功能介绍
16 |
19 | 
21 |
22 | 2. 客服机器人
20 |
23 | 
25 |
26 | 3. 编辑器页面使用说明
24 |
27 | 
29 |
30 | 4. 管理后台入口
28 |
31 | 
33 |
34 | 5. 页面管理系统使用
32 |
35 | 
37 |
38 | 6. 页面数据分析, 数据收集
36 |
41 | 
: }
45 |
46 | );
47 | };
48 |
49 | export default memo(XChart);
50 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/Image/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import { IImageConfig } from './schema';
3 | import logo from '@/assets/06-图片组件.png';
4 |
5 | interface ImageType extends IImageConfig {
6 | isTpl?: boolean;
7 | }
8 |
9 | const Image = memo((props: ImageType) => {
10 | const {
11 | imgUrl,
12 | round = 0,
13 | translate,
14 | align,
15 | titText,
16 | titFontSize,
17 | titColor,
18 | titFontWeight,
19 | subTitText,
20 | subTitFontSize,
21 | subTitColor,
22 | subTitFontWeight
23 | } = props;
24 | return props.isTpl ? (
25 |
42 | {title}
43 |
44 | {isTpl ?
26 |
27 |
28 | ) : (
29 |
30 | 
44 |
45 | )
46 | })
47 |
48 | export default Image;
49 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/Qrcode/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | IColorConfigType,
3 | INumberConfigType,
4 | ITextConfigType,
5 | IUploadConfigType,
6 | TColorDefaultType,
7 | TNumberDefaultType,
8 | TTextDefaultType,
9 | TUploadDefaultType,
10 | } from '@/components/PanelComponents/FormEditor/types';
11 |
12 | export type TQrcodeEditData = Array<
13 | IUploadConfigType | ITextConfigType | IColorConfigType | INumberConfigType
14 | >;
15 | export interface IQrcodeConfig {
16 | qrcode: TUploadDefaultType;
17 | text: TTextDefaultType;
18 | color: TColorDefaultType;
19 | fontSize: TNumberDefaultType;
20 | }
21 |
22 | export interface IQrcodeSchema {
23 | editData: TQrcodeEditData;
24 | config: IQrcodeConfig;
25 | }
26 |
27 | const Qrcode: IQrcodeSchema = {
28 | editData: [
29 | {
30 | key: 'qrcode',
31 | name: '二维码',
32 | type: 'Upload',
33 | isCrop: true,
34 | cropRate: 1,
35 | },
36 | {
37 | key: 'text',
38 | name: '文字',
39 | type: 'Text',
40 | },
41 | {
42 | key: 'color',
43 | name: '文字颜色',
44 | type: 'Color',
45 | },
46 | {
47 | key: 'fontSize',
48 | name: '文字大小',
49 | type: 'Number',
50 | },
51 | ],
52 | config: {
53 | qrcode: [
54 | {
55 | uid: '001',
56 | name: 'image.png',
57 | status: 'done',
58 | url: 'http://h5.dooring.cn/uploads/code_173e1705e0c.png',
59 | },
60 | ],
61 | text: '二维码',
62 | color: 'rgba(153,153,153,1)',
63 | fontSize: 14,
64 | },
65 | };
66 |
67 | export default Qrcode;
68 |
--------------------------------------------------------------------------------
/.umirc.ts:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import { defineConfig } from 'umi';
3 |
4 | export default defineConfig({
5 | dynamicImport: {
6 | loading: '@/components/LoadingCp',
7 | },
8 | dva: {
9 | immer: true,
10 | },
11 | antd: {},
12 | sass: {
13 | implementation: require('node-sass'),
14 | },
15 | exportStatic: {},
16 | externals: {
17 | axios: 'window.axios',
18 | },
19 | scripts: ['http://h5.dooring.cn/cdn/axios.min.js'],
20 | base: '/pc_plus/',
21 | publicPath: '/pc_plus/',
22 | outputPath: './dist/pc_plus',
23 | routes: [
24 | {
25 | exact: false,
26 | path: '/',
27 | component: '@/layouts/index',
28 | routes: [
29 | {
30 | path: '/',
31 | redirect: '/editor',
32 | },
33 | {
34 | path: '/editor',
35 | component: '../pages/editor',
36 | },
37 | {
38 | path: '/help',
39 | component: '../pages/help',
40 | },
41 | {
42 | path: '/mobileTip',
43 | component: '../pages/mobileTip',
44 | },
45 | {
46 | path: '/preview',
47 | component: '../pages/editor/preview',
48 | },
49 | ],
50 | },
51 | ],
52 | theme: {
53 | 'primary-color': '#2F54EB',
54 | // "btn-primary-bg": "#2F54EB"
55 | },
56 | // extraBabelPlugins: [
57 | // ['import', { libraryName: "zarm", style: true }],
58 | // ],
59 | alias: {
60 | components: path.resolve(__dirname, 'src/components/'),
61 | utils: path.resolve(__dirname, 'src/utils/'),
62 | assets: path.resolve(__dirname, 'src/assets/'),
63 | },
64 | });
65 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/XButton/index.less:
--------------------------------------------------------------------------------
1 | .btn {
2 | display: inline-block;
3 | text-align: center;
4 | padding: 4px 20px;
5 | .text {
6 | display: inline-block;
7 | width: 100%;
8 | }
9 | }
10 |
11 | .modalWrap {
12 | position: fixed;
13 | width: 100vw;
14 | height: 100vh;
15 | left: 0;
16 | top: 0;
17 | z-index: 9999;
18 | .modalMask {
19 | position: absolute;
20 | left: 0;
21 | top: 0;
22 | bottom: 0;
23 | right: 0;
24 | background-color: rgba(0,0,0, .7);
25 | }
26 | .modal {
27 | position: absolute;
28 | left: 50%;
29 | transform: translateX(-50%);
30 | top: 120px;
31 | width: 76%;
32 | max-width: 360px;
33 | max-height: 480px;
34 | padding: 20px;
35 | border-radius: 6px;
36 | background-color: #fff;
37 | .closeBtn {
38 | position: absolute;
39 | font-size: 16px;
40 | right: 10px;
41 | top: 6px;
42 | color: #ccc;
43 | cursor: pointer;
44 | }
45 | .modalTit {
46 | padding: 12px 0;
47 | font-weight: bold;
48 | font-size: 16px;
49 | text-align: center;
50 | }
51 | :global(p) {
52 | margin-bottom: 0;
53 | }
54 | :global(img) {
55 | max-width: 100%;
56 | text-align: center;
57 | }
58 | :global(blockquote) {
59 | margin: 0 0 10px;
60 | padding: 12px 20px;
61 | background-color: #f1f2f3;
62 | border-left: 5px solid #ccc;
63 | color: #666;
64 | font-style: italic;
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/XButton/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useState } from 'react';
2 | import Modal from './Modal';
3 | import styles from './index.less';
4 | import { IButtonConfig } from './schema';
5 | import logo from '@/assets/16-botton.png';
6 |
7 | interface IProps extends IButtonConfig {
8 | isTpl: boolean;
9 | }
10 |
11 | const XButton = memo((props: IProps) => {
12 | const {
13 | isTpl,
14 | bgColor,
15 | round,
16 | marginTop,
17 | text,
18 | width,
19 | fontSize,
20 | color,
21 | interaction
22 | } = props
23 |
24 | const { type, content, title } = interaction;
25 |
26 | const [visible, setVisible] = useState(false);
27 |
28 | const handleClick = () => {
29 | if(type === 'link') {
30 | window.location.href = content;
31 | }else if(type === 'modal') {
32 | setVisible(true);
33 | }else if(type === 'code') {
34 | eval(content);
35 | }
36 | }
37 |
38 | const handleClose = () => {
39 | setVisible(false);
40 | }
41 |
42 | return isTpl ? (
43 |
40 |
43 | { titText }
41 | { subTitText }
42 |
44 |
44 |
45 |
46 | ) :
47 |
51 |
52 |
53 |
54 | })
55 | export default XButton;
56 |
--------------------------------------------------------------------------------
/src/components/BasicShop/VisualComponents/Chart/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | IColorConfigType,
3 | INumberConfigType,
4 | ITableConfigType,
5 | ITextConfigType,
6 | TColorDefaultType,
7 | TNumberDefaultType,
8 | TTableDefaultType,
9 | TTextDefaultType,
10 | } from '@/components/PanelComponents/FormEditor/types';
11 |
12 | export type TChartEditData = Array<
13 | ITextConfigType | INumberConfigType | IColorConfigType | ITableConfigType
14 | >;
15 | export interface IChartConfig {
16 | title: TTextDefaultType;
17 | size: TNumberDefaultType;
18 | color: TColorDefaultType;
19 | paddingTop: TNumberDefaultType;
20 | data: TTableDefaultType;
21 | }
22 |
23 | export interface IChartSchema {
24 | editData: TChartEditData;
25 | config: IChartConfig;
26 | }
27 |
28 | const Chart: IChartSchema = {
29 | editData: [
30 | {
31 | key: 'title',
32 | name: '标题',
33 | type: 'Text',
34 | },
35 | {
36 | key: 'size',
37 | name: '标题大小',
38 | type: 'Number',
39 | },
40 | {
41 | key: 'color',
42 | name: '标题颜色',
43 | type: 'Color',
44 | },
45 | {
46 | key: 'paddingTop',
47 | name: '上边距',
48 | type: 'Number',
49 | },
50 | {
51 | key: 'data',
52 | name: '数据源',
53 | type: 'Table',
54 | },
55 | ],
56 | config: {
57 | title: '柱状图',
58 | size: 14,
59 | color: 'rgba(0,0,0,1)',
60 | paddingTop: 10,
61 | data: [
62 | {
63 | name: 'A',
64 | value: 20,
65 | },
66 | {
67 | name: 'B',
68 | value: 60,
69 | },
70 | {
71 | name: 'C',
72 | value: 20,
73 | },
74 | ],
75 | },
76 | };
77 |
78 | export default Chart;
79 |
--------------------------------------------------------------------------------
/src/components/BasicShop/VisualComponents/Pie/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | IColorConfigType,
3 | INumberConfigType,
4 | ITableConfigType,
5 | ITextConfigType,
6 | TColorDefaultType,
7 | TNumberDefaultType,
8 | TTableDefaultType,
9 | TTextDefaultType,
10 | } from '@/components/PanelComponents/FormEditor/types';
11 |
12 | export type TChartEditData = Array<
13 | ITextConfigType | INumberConfigType | IColorConfigType | ITableConfigType
14 | >;
15 | export interface IChartConfig {
16 | title: TTextDefaultType;
17 | size: TNumberDefaultType;
18 | color: TColorDefaultType;
19 | paddingTop: TNumberDefaultType;
20 | data: TTableDefaultType;
21 | }
22 |
23 | export interface IChartSchema {
24 | editData: TChartEditData;
25 | config: IChartConfig;
26 | }
27 |
28 | const Chart: IChartSchema = {
29 | editData: [
30 | {
31 | key: 'title',
32 | name: '标题',
33 | type: 'Text',
34 | },
35 | {
36 | key: 'size',
37 | name: '标题大小',
38 | type: 'Number',
39 | },
40 | {
41 | key: 'color',
42 | name: '标题颜色',
43 | type: 'Color',
44 | },
45 | {
46 | key: 'paddingTop',
47 | name: '上边距',
48 | type: 'Number',
49 | },
50 | {
51 | key: 'data',
52 | name: '数据源',
53 | type: 'Table',
54 | },
55 | ],
56 | config: {
57 | title: '饼图',
58 | size: 14,
59 | color: 'rgba(0,0,0,1)',
60 | paddingTop: 10,
61 | data: [
62 | {
63 | name: 'A',
64 | value: 20,
65 | },
66 | {
67 | name: 'B',
68 | value: 60,
69 | },
70 | {
71 | name: 'C',
72 | value: 20,
73 | },
74 | {
75 | name: 'D',
76 | value: 80,
77 | },
78 | ],
79 | },
80 | };
81 |
82 | export default Chart;
83 |
--------------------------------------------------------------------------------
/src/components/BasicShop/VisualComponents/Area/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | IColorConfigType,
3 | INumberConfigType,
4 | ITableConfigType,
5 | ITextConfigType,
6 | TColorDefaultType,
7 | TNumberDefaultType,
8 | TTableDefaultType,
9 | TTextDefaultType,
10 | } from '@/components/PanelComponents/FormEditor/types';
11 |
12 | export type TChartEditData = Array<
13 | ITextConfigType | INumberConfigType | IColorConfigType | ITableConfigType
14 | >;
15 | export interface IChartConfig {
16 | title: TTextDefaultType;
17 | size: TNumberDefaultType;
18 | color: TColorDefaultType;
19 | paddingTop: TNumberDefaultType;
20 | data: TTableDefaultType;
21 | }
22 |
23 | export interface IChartSchema {
24 | editData: TChartEditData;
25 | config: IChartConfig;
26 | }
27 |
28 | const Chart: IChartSchema = {
29 | editData: [
30 | {
31 | key: 'title',
32 | name: '标题',
33 | type: 'Text',
34 | },
35 | {
36 | key: 'size',
37 | name: '标题大小',
38 | type: 'Number',
39 | },
40 | {
41 | key: 'color',
42 | name: '标题颜色',
43 | type: 'Color',
44 | },
45 | {
46 | key: 'paddingTop',
47 | name: '上边距',
48 | type: 'Number',
49 | },
50 | {
51 | key: 'data',
52 | name: '数据源',
53 | type: 'Table',
54 | },
55 | ],
56 | config: {
57 | title: '面积图',
58 | size: 14,
59 | color: 'rgba(0,0,0,1)',
60 | paddingTop: 10,
61 | data: [
62 | {
63 | name: 'A',
64 | value: 20,
65 | },
66 | {
67 | name: 'B',
68 | value: 60,
69 | },
70 | {
71 | name: 'C',
72 | value: 20,
73 | },
74 | {
75 | name: 'D',
76 | value: 80,
77 | },
78 | ],
79 | },
80 | };
81 |
82 | export default Chart;
83 |
--------------------------------------------------------------------------------
/src/components/BasicShop/VisualComponents/Line/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | IColorConfigType,
3 | INumberConfigType,
4 | ITableConfigType,
5 | ITextConfigType,
6 | TColorDefaultType,
7 | TNumberDefaultType,
8 | TTableDefaultType,
9 | TTextDefaultType,
10 | } from '@/components/PanelComponents/FormEditor/types';
11 |
12 | export type TChartEditData = Array<
13 | ITextConfigType | INumberConfigType | IColorConfigType | ITableConfigType
14 | >;
15 | export interface IChartConfig {
16 | title: TTextDefaultType;
17 | size: TNumberDefaultType;
18 | color: TColorDefaultType;
19 | paddingTop: TNumberDefaultType;
20 | data: TTableDefaultType;
21 | }
22 |
23 | export interface IChartSchema {
24 | editData: TChartEditData;
25 | config: IChartConfig;
26 | }
27 |
28 | const Chart: IChartSchema = {
29 | editData: [
30 | {
31 | key: 'title',
32 | name: '标题',
33 | type: 'Text',
34 | },
35 | {
36 | key: 'size',
37 | name: '标题大小',
38 | type: 'Number',
39 | },
40 | {
41 | key: 'color',
42 | name: '标题颜色',
43 | type: 'Color',
44 | },
45 | {
46 | key: 'paddingTop',
47 | name: '上边距',
48 | type: 'Number',
49 | },
50 | {
51 | key: 'data',
52 | name: '数据源',
53 | type: 'Table',
54 | },
55 | ],
56 | config: {
57 | title: '折线图',
58 | size: 14,
59 | color: 'rgba(0,0,0,1)',
60 | paddingTop: 10,
61 | data: [
62 | {
63 | name: 'A',
64 | value: 20,
65 | },
66 | {
67 | name: 'B',
68 | value: 60,
69 | },
70 | {
71 | name: 'C',
72 | value: 20,
73 | },
74 | {
75 | name: 'D',
76 | value: 80,
77 | },
78 | ],
79 | },
80 | };
81 |
82 | export default Chart;
83 |
--------------------------------------------------------------------------------
/src/pages/editor/TargetBox.js:
--------------------------------------------------------------------------------
1 | import React, { useMemo, memo } from 'react';
2 | import { useDrag } from 'react-dnd';
3 | import schema from 'components/BasicShop/schema';
4 | import styles from './index.less';
5 |
6 | const TargetBox = memo(props => {
7 | const { item } = props;
8 |
9 | const [{ isDragging }, drag] = useDrag({
10 | item: {
11 | type: item.type,
12 | config: schema[item.type].config,
13 | h: item.h,
14 | editableEl: schema[item.type].editData,
15 | category: item.category,
16 | },
17 | collect: monitor => ({
18 | isDragging: monitor.isDragging(),
19 | }),
20 | });
21 |
22 | const containerStyle = useMemo(
23 | () => ({
24 | opacity: isDragging ? 0.4 : 1,
25 | cursor: 'move',
26 | height: '140px',
27 | }),
28 | [isDragging],
29 | );
30 |
31 | return (
32 |
48 | { text }
49 |
50 |
33 |
59 | );
60 | });
61 |
62 | export default TargetBox;
63 |
--------------------------------------------------------------------------------
/src/components/BasicShop/VisualComponents/Funnel/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | IColorConfigType,
3 | INumberConfigType,
4 | ITableConfigType,
5 | ITextConfigType,
6 | TColorDefaultType,
7 | TNumberDefaultType,
8 | TTableDefaultType,
9 | TTextDefaultType,
10 | } from '@/components/PanelComponents/FormEditor/types';
11 |
12 | export type TChartEditData = Array<
13 | ITextConfigType | INumberConfigType | IColorConfigType | ITableConfigType
14 | >;
15 | export interface IChartConfig {
16 | title: TTextDefaultType;
17 | size: TNumberDefaultType;
18 | color: TColorDefaultType;
19 | paddingTop: TNumberDefaultType;
20 | data: TTableDefaultType;
21 | }
22 |
23 | export interface IChartSchema {
24 | editData: TChartEditData;
25 | config: IChartConfig;
26 | }
27 |
28 | const Chart: IChartSchema = {
29 | editData: [
30 | {
31 | key: 'title',
32 | name: '标题',
33 | type: 'Text',
34 | },
35 | {
36 | key: 'size',
37 | name: '标题大小',
38 | type: 'Number',
39 | },
40 | {
41 | key: 'color',
42 | name: '标题颜色',
43 | type: 'Color',
44 | },
45 | {
46 | key: 'paddingTop',
47 | name: '上边距',
48 | type: 'Number',
49 | },
50 | {
51 | key: 'data',
52 | name: '数据源',
53 | type: 'Table',
54 | },
55 | ],
56 | config: {
57 | title: '漏斗图',
58 | size: 14,
59 | color: 'rgba(0,0,0,1)',
60 | paddingTop: 10,
61 | data: [
62 | {
63 | name: 'A',
64 | value: 1,
65 | },
66 | {
67 | name: 'B',
68 | value: 0.6,
69 | },
70 | {
71 | name: 'C',
72 | value: 0.4,
73 | },
74 | {
75 | name: 'D',
76 | value: 0.2,
77 | },
78 | {
79 | name: 'E',
80 | value: 0.1,
81 | }
82 | ],
83 | },
84 | };
85 |
86 | export default Chart;
87 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/Card/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import { ICardConfig } from './schema';
3 | import logo from '@/assets/card@2x.png';
4 |
5 | interface CardType extends ICardConfig {
6 | isTpl?: boolean;
7 | }
8 |
9 | const Card = memo((props: CardType) => {
10 | const {
11 | width,
12 | imgUrl,
13 | title,
14 | link,
15 | desc,
16 | titColor,
17 | titFontSize,
18 | descColor,
19 | descFontSize,
20 | bgColor,
21 | bgPadding,
22 | cardRadius,
23 | isTpl
24 | } = props;
25 | const toLink = () => {
26 | if(link && window.location.href.indexOf('editor') < 0) {
27 | window.location.href = link;
28 | }
29 | }
30 | return isTpl ? (
31 |
34 |
58 |
44 | {props.children}
45 |
46 |
55 | {props.item.displayName}
56 |
57 |
32 |
33 |
34 | ) : (
35 |
47 | 
48 |
70 | );
71 | });
72 |
73 | export default Card;
74 |
--------------------------------------------------------------------------------
/src/components/DynamicEngine/index.tsx:
--------------------------------------------------------------------------------
1 | import { dynamic } from 'umi';
2 | import Loading from '../LoadingCp';
3 | import { useMemo, memo, FC } from 'react';
4 | import React from 'react';
5 | // import { AllTemplateType } from './schema';
6 |
7 | export type componentsType = 'media' | 'base' | 'visible';
8 |
9 | const DynamicFunc = (type: any, componentsType: componentsType) =>
10 | dynamic({
11 | loader: async function() {
12 | let Component: FC<{ isTpl: boolean }>;
13 | if (componentsType === 'base') {
14 | const { default: Graph } = await import(`@/components/BasicShop/BasicComponents/${type}`);
15 | Component = Graph;
16 | } else if (componentsType === 'media') {
17 | const { default: Graph } = await import(`@/components/BasicShop/MediaComponents/${type}`);
18 | Component = Graph;
19 | } else {
20 | const { default: Graph } = await import(`@/components/BasicShop/VisualComponents/${type}`);
21 | Component = Graph;
22 | }
23 | return (props: DynamicType) => {
24 | const { config, isTpl } = props;
25 | return
56 | { title }
57 |
58 |
67 | { desc }
68 |
69 |
30 |
32 | ),
33 | });
34 |
35 | type DynamicType = {
36 | isTpl: boolean;
37 | config: { [key: string]: any };
38 | type: any;
39 | componentsType: componentsType;
40 | category: componentsType;
41 | };
42 | const DynamicEngine = memo((props: DynamicType) => {
43 | const { type, config, category } = props;
44 | const Dynamic = useMemo(() => {
45 | return (DynamicFunc(type, category) as unknown) as FC
62 | 
: }
66 |
67 | );
68 | };
69 |
70 | export default memo(XLine);
71 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/List/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import styles from './index.less';
3 | import { IListConfig } from './schema';
4 | import logo from '@/assets/07-列表.png';
5 |
6 | interface ListType extends IListConfig {
7 | isTpl?: boolean;
8 | }
9 |
10 | const List = memo((props: ListType) => {
11 | const { round, sourceData, imgSize, fontSize, color, padding } = props;
12 | return props.isTpl ? (
13 |
63 | {title}
64 |
65 | {isTpl ?
14 |
15 |
16 | ) : (
17 |
18 |
58 | );
59 | });
60 |
61 | export default List;
62 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/Header/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | IColorConfigType,
3 | INumberConfigType,
4 | ITextConfigType,
5 | IUploadConfigType,
6 | IRadioConfigType,
7 | TColorDefaultType,
8 | TNumberDefaultType,
9 | TRadioDefaultType,
10 | TTextDefaultType,
11 | TUploadDefaultType,
12 | } from '@/components/PanelComponents/FormEditor/types';
13 |
14 | export type HeaderFixedKeyType = 0 | 1;
15 |
16 | export type THeaderEditData = Array<
17 | IColorConfigType | INumberConfigType | IUploadConfigType | ITextConfigType | IRadioConfigType
19 | {sourceData.map((item, i) => {
20 | return (
21 |
57 |
22 |
54 | );
55 | })}
56 |
23 | 
37 |
38 |
53 |
68 | 
: }
72 |
73 | );
74 | };
75 |
76 | export default memo(XLine);
77 |
--------------------------------------------------------------------------------
/src/components/BasicShop/VisualComponents/Funnel/index.tsx:
--------------------------------------------------------------------------------
1 | import { Chart } from '@antv/f2';
2 | import React, { memo, useEffect, useRef } from 'react';
3 | // import { uuid } from 'utils/tool';
4 | import AreaImg from '@/assets/loudou.png';
5 |
6 | import styles from './index.less';
7 | import { IChartConfig } from './schema';
8 |
9 | const intervalLabel = require('@antv/f2/lib/plugin/interval-label');
10 | // 第二步：注册插件 Tooltip
11 | Chart.plugins.register(intervalLabel);
12 |
13 | interface XRadarProps extends IChartConfig {
14 | isTpl: boolean;
15 | }
16 |
17 | const XRadar = (props: XRadarProps) => {
18 | const { isTpl, data, color, size, paddingTop, title } = props;
19 | const chartRef = useRef(null);
20 | useEffect(() => {
21 | if (!isTpl) {
22 | const chart = new Chart({
23 | el: chartRef.current || undefined,
24 | pixelRatio: window.devicePixelRatio, // 指定分辨率
25 | padding: [ 60, 80, 25, 50 ]
26 | });
27 |
28 | // step 2: 处理数据
29 | const dataX = data.map(item => ({ ...item, value: Number(item.value)}));
30 |
31 | // Step 2: 载入数据源
32 | chart.coord('polar');
33 | chart.source(dataX);
34 |
35 | chart.axis(false);
36 | chart.coord({
37 | transposed: true
38 | });
39 | chart.legend(true);
40 | chart.intervalLabel({
41 | offsetX: 10,
42 | label: (data, color) => {
43 | return {
44 | text: data.name,
45 | fill: color
46 | };
47 | },
48 | guide: data => {
49 | return {
50 | text: (data.value * 100).toFixed(0) + '%',
51 | fill: '#fff'
52 | };
53 | }
54 | });
55 |
56 | chart.interval()
57 | .position('name*value')
58 | .color('name', [ '#003366', '#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF'])
59 | .adjust('symmetric')
60 | .shape('pyramid');
61 | chart.render();
62 | }
63 | }, [data, isTpl]);
64 | return (
65 |
69 | {title}
70 |
71 | {isTpl ?
66 | : }
70 |
71 | );
72 | };
73 |
74 | export default memo(XRadar);
75 |
--------------------------------------------------------------------------------
/src/components/BasicShop/VisualComponents/XProgress/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | INumberConfigType,
3 | IRadioConfigType,
4 | ISelectConfigType,
5 | TNumberDefaultType,
6 | TRadioDefaultType,
7 | TSelectDefaultType,
8 | } from '@/components/PanelComponents/FormEditor/types';
9 | export type TXProgressSelectKeyType = 'success' | 'warning' | 'danger';
10 | export type TXProgressRadiotKeyType = 'circle' | 'line' | 'semi-circle';
11 | export type TXProgressEditData = Array<
12 | | ISelectConfigType
67 | {title}
68 |
69 | {isTpl ?
29 |
30 |
31 | ) : (
32 |
33 | {
36 | console.log(i);
37 | }}
38 | >
39 | {tabs.map((item, i) => {
40 | return (
41 |
42 |
66 | );
67 | })}
68 |
69 |
70 | );
71 | };
72 |
73 | export default XTab;
74 |
--------------------------------------------------------------------------------
/src/components/PanelComponents/XEditor/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, memo } from 'react'
2 | import req from '@/utils/req'
3 | import BraftEditor from 'braft-editor'
4 | import 'braft-editor/dist/index.css'
5 | import styles from './index.less'
6 |
7 | const controls = [
8 | {
9 | key: 'bold',
10 | text: 加粗
11 | },
12 | 'undo', 'redo', 'emoji', 'list-ul', 'list-ol', 'blockquote', 'text-align',
13 | 'font-size', 'line-height', 'letter-spacing', 'text-color',
14 | 'italic', 'underline', 'link', 'media'
15 | ]
16 |
17 |
18 | export default memo(function XEditor(props:any) {
19 | const [editorState, setEditorState] = useState(BraftEditor.createEditorState())
20 |
21 | const {
22 | defaultValue = '',
23 | onSave
24 | } = props
25 |
26 | const myUploadFn = (param) => {
27 | const fd = new FormData()
28 | fd.append('file', param.file)
29 |
30 | req.post('/files/upload/free', fd, {
31 | headers: {
32 | 'x-requested-with': localStorage.getItem('user') || '',
33 | 'authorization': localStorage.getItem('token') || '',
34 | 'Content-Type':'multipart/form-data'
35 | },
36 | onUploadProgress: function (event) {
37 | // 上传进度发生变化时调用param.progress
38 | console.log(event.loaded / event.total * 100)
39 | param.progress(event.loaded / event.total * 100)
40 | },
41 | }).then(res => {
42 | console.log(res)
43 | // 上传成功后调用param.success并传入上传后的文件地址
44 | param.success({
45 | url: res.url,
46 | meta: {
47 | id: Date.now(),
48 | title: res.filename,
49 | alt: '趣谈前端'
50 | }
51 | })
52 | }).catch(err => {
53 | param.error({
54 | msg: '上传失败.'
55 | })
56 | })
57 | }
58 |
59 | const submitContent = () => {
60 | const htmlContent = editorState.toHTML()
61 | onSave && onSave(htmlContent)
62 | }
63 |
64 | const handleEditorChange = (editorState) => {
65 | setEditorState(editorState)
66 | if(onSave) {
67 | const htmlContent = editorState.toHTML()
68 | onSave(htmlContent)
69 | }
70 | }
71 |
72 | useEffect(() => {
73 | const htmlContent = defaultValue
74 | setEditorState(BraftEditor.createEditorState(htmlContent))
75 | }, [])
76 | return
43 | {sourceData
44 | .filter(item => item.type === i)
45 | .map((item, i) => {
46 | return (
47 |
65 |
48 |
49 |
57 |
62 | );
63 | })}
64 |
58 | {item.title}
59 |
60 |
61 |
82 | : }
86 |
87 | );
88 | };
89 |
90 | export default memo(XRadar);
91 |
--------------------------------------------------------------------------------
/src/components/PanelComponents/MutiText/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useState, useEffect } from 'react';
2 | import { Input, Button, Popconfirm } from 'antd';
3 | import { MinusCircleOutlined } from '@ant-design/icons';
4 | import styles from './index.less';
5 | import { TMutiTextDefaultType } from '../FormEditor/types';
6 |
7 | type MultiTextProps = {
8 | onChange?: (v: TMutiTextDefaultType) => void;
9 | value?: TMutiTextDefaultType;
10 | };
11 |
12 | export default memo(function MutiText(props: MultiTextProps) {
13 | const { value, onChange } = props;
14 | const [valueList, setValueList] = useState(value || []);
15 | const handleAdd = () => {
16 | setValueList(prev => {
17 | return [...prev, '新增项'];
18 | });
19 | };
20 |
21 | const handleDel = (index: number) => {
22 | setValueList(prev => {
23 | let newList = prev.filter((_item, i) => i !== index);
24 | onChange && onChange(newList);
25 | return newList;
26 | });
27 | };
28 |
29 | const handleChange = (index: number, e: React.ChangeEvent
83 | {title}
84 |
85 | {isTpl ?
47 | {valueList.length ? (
48 | valueList.map((item, i) => {
49 | return (
50 |
79 | );
80 | });
81 |
--------------------------------------------------------------------------------
/src/components/PanelComponents/Color/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { SketchPicker, ColorResult } from 'react-color';
3 | import { rgba2Obj } from '@/utils/tool';
4 | // import styles from './index.less'
5 |
6 | export type ColorConfigType = string;
7 |
8 | //value 初始值传来，onchange item给的回调
9 | interface ColorProps {
10 | value?: ColorConfigType;
11 | onChange?: (v: ColorConfigType) => void;
12 | }
13 |
14 | class colorPicker extends React.Component
51 | handleChange(i, e)} />
52 | handleDel(i)}
55 | placement="leftTop"
56 | okText="确定"
57 | cancelText="取消"
58 | >
59 |
60 |
63 |
64 | );
65 | })
66 | ) : (
67 |
68 |
69 |
70 | )}
71 | {valueList.length < 3 && (
72 |
73 |
76 |
77 | )}
78 |
37 |
59 |
79 | ) : null}
80 |
81 | );
82 | }
83 | }
84 |
85 | export default colorPicker;
86 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/Carousel/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | IDataListConfigType,
3 | IRadioConfigType,
4 | ISwitchConfigType,
5 | TDataListDefaultType,
6 | TRadioDefaultType,
7 | TSwitchDefaultType,
8 | } from '@/components/PanelComponents/FormEditor/types';
9 |
10 | export type CarouselDirectionKeyType = 'top' | 'bottom' | 'left' | 'right';
11 |
12 | export type TCarouselEditData = Array<
13 | IRadioConfigType
48 |
56 |
57 | {this.state.displayColorPicker ? (
58 |
65 |
67 |
78 | Welcome to PC-Dooring 👋
4 |
5 | 
6 |
7 | 
8 |
9 |
10 | 
11 |
12 |
99 |
100 | ## 技术反馈和交流群 | Technical feedback and communication
101 | 微信：beautifulFront
102 |
103 | 
104 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/LongText/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | IColorConfigType,
3 | INumberConfigType,
4 | ISelectConfigType,
5 | ITextAreaConfigType,
6 | TColorDefaultType,
7 | TNumberDefaultType,
8 | TSelectDefaultType,
9 | TTextAreaDefaultType,
10 | } from '@/components/PanelComponents/FormEditor/types';
11 | export type TLongTextSelectKeyType = 'left' | 'center' | 'right';
12 |
13 | export type TLongTextEditData = Array<
14 | | ITextAreaConfigType
15 | | IColorConfigType
16 | | INumberConfigType
17 | | ISelectConfigType
58 |
59 |
60 | ) : (
61 |
62 | {title && (
63 |
90 | );
91 | };
92 |
93 | export default memo(FormComponent);
94 |
--------------------------------------------------------------------------------
/src/components/BasicShop/VisualComponents/Pie/index.tsx:
--------------------------------------------------------------------------------
1 | import { Chart } from '@antv/f2';
2 | import React, { memo, useEffect, useRef } from 'react';
3 | // import { uuid } from 'utils/tool';
4 | import PieImg from '@/assets/pie.png';
5 |
6 | import styles from './index.less';
7 | import { IChartConfig } from './schema';
8 |
9 | interface XChartProps extends IChartConfig {
10 | isTpl: boolean;
11 | }
12 |
13 | interface DataMap {
14 | [name:string]: number | string;
15 | }
16 |
17 | const XLine = (props: XChartProps) => {
18 | const { isTpl, data, color, size, paddingTop, title } = props;
19 | const chartRef = useRef(null);
20 | useEffect(() => {
21 | if (!isTpl) {
22 | const chart = new Chart({
23 | el: chartRef.current || undefined,
24 | pixelRatio: window.devicePixelRatio, // 指定分辨率
25 | });
26 |
27 | // step 2: 处理数据
28 | const dataX = data.map(item => ({ ...item, value: Number(item.value), a: '1' }));
29 |
30 | // Step 2: 载入数据源
31 | chart.source(dataX, {
32 | percent: {
33 | formatter: function formatter(val) {
34 | return val * 100 + '%';
35 | }
36 | }
37 | });
38 |
39 | // 获取数据的map类型，用以展示图例说明
40 | const dataMap:DataMap = dataX.reduce((prev:any, cur) => {
41 | return prev.name ? {[prev.name]: prev.value, ...{[cur.name]: cur.value}} : {...prev, ...{[cur.name]: cur.value}}
42 | })
43 |
44 | chart.legend({
45 | position: 'right',
46 | itemFormatter: function itemFormatter(val) {
47 | return val + ' ' + dataMap[val] + '%';
48 | }
49 | });
50 | chart.tooltip(false);
51 | chart.coord('polar', {
52 | transposed: true,
53 | radius: 0.85
54 | });
55 | chart.axis(false);
56 | chart.interval()
57 | .position('a*value')
58 | .color('name', [
59 | '#1890FF',
60 | '#13C2C2',
61 | '#2FC25B',
62 | '#FACC14',
63 | '#00CC99',
64 | '#CC3366',
65 | '#CC6600',
66 | '#CC66CC',
67 | '#FF3366',
68 | '#0066CC'
69 | ])
70 | .adjust('stack')
71 | .style({
72 | lineWidth: 1,
73 | stroke: '#fff',
74 | lineJoin: 'round',
75 | lineCap: 'round'
76 | })
77 | .animate({
78 | appear: {
79 | duration: 1200,
80 | easing: 'bounceOut'
81 | }
82 | });
83 |
84 | chart.render();
85 | }
86 | }, [data, isTpl]);
87 | return (
88 |
64 | {title}
65 |
66 | )}
67 |
68 | {formControls.map(item => {
69 | const FormItem = BaseForm[item.type];
70 | return
89 |
73 |
87 |
88 |
89 | 
: }
93 |
94 | );
95 | };
96 |
97 | export default memo(XLine);
98 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/Tab/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | IColorConfigType,
3 | IDataListConfigType,
4 | IMutiTextConfigType,
5 | INumberConfigType,
6 | TColorDefaultType,
7 | TDataListDefaultType,
8 | TMutiTextDefaultType,
9 | TNumberDefaultType,
10 | } from '@/components/PanelComponents/FormEditor/types';
11 |
12 | export type TTabEditData = Array<
13 | IMutiTextConfigType | IColorConfigType | INumberConfigType | IDataListConfigType
14 | >;
15 | export interface ITabConfig {
16 | tabs: TMutiTextDefaultType;
17 | color: TColorDefaultType;
18 | activeColor: TColorDefaultType;
19 | fontSize: TNumberDefaultType;
20 | imgSize: TNumberDefaultType;
21 | sourceData: TDataListDefaultType;
22 | }
23 |
24 | export interface ITabSchema {
25 | editData: TTabEditData;
26 | config: ITabConfig;
27 | }
28 |
29 | const Tab: ITabSchema = {
30 | editData: [
31 | {
32 | key: 'tabs',
33 | name: '项目类别',
34 | type: 'MutiText',
35 | },
36 | {
37 | key: 'activeColor',
38 | name: '激活颜色',
39 | type: 'Color',
40 | },
41 | {
42 | key: 'color',
43 | name: '文字颜色',
44 | type: 'Color',
45 | },
46 | {
47 | key: 'fontSize',
48 | name: '文字大小',
49 | type: 'Number',
50 | },
51 | {
52 | key: 'imgSize',
53 | name: '图片大小',
54 | type: 'Number',
55 | },
56 | {
57 | key: 'sourceData',
58 | name: '数据源',
59 | type: 'DataList',
60 | },
61 | ],
62 | config: {
63 | tabs: ['类别一', '类别二'],
64 | color: 'rgba(153,153,153,1)',
65 | activeColor: 'rgba(0,102,204,1)',
66 | fontSize: 16,
67 | imgSize: 100,
68 | sourceData: [
69 | {
70 | id: '1',
71 | title: '趣谈小课1',
72 | desc: '致力于打造优质小课程',
73 | link: 'xxxxx',
74 | type: 0,
75 | imgUrl: [
76 | {
77 | uid: '001',
78 | name: 'image.png',
79 | status: 'done',
80 | url: 'http://h5.dooring.cn/uploads/1_1740c6fbcd9.png',
81 | },
82 | ],
83 | },
84 | {
85 | id: '2',
86 | title: '趣谈小课2',
87 | desc: '致力于打造优质小课程',
88 | link: 'xxxxx',
89 | type: 0,
90 | imgUrl: [
91 | {
92 | uid: '001',
93 | name: 'image.png',
94 | status: 'done',
95 | url: 'http://h5.dooring.cn/uploads/2_1740c7033a9.png',
96 | },
97 | ],
98 | },
99 | {
100 | id: '3',
101 | title: '趣谈小课3',
102 | desc: '致力于打造优质小课程',
103 | link: 'xxxxx',
104 | type: 1,
105 | imgUrl: [
106 | {
107 | uid: '001',
108 | name: 'image.png',
109 | status: 'done',
110 | url: 'http://h5.dooring.cn/uploads/1_1740c6fbcd9.png',
111 | },
112 | ],
113 | },
114 | ],
115 | },
116 | };
117 |
118 | export default Tab;
119 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/Card/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | IColorConfigType,
3 | INumberConfigType,
4 | ITextConfigType,
5 | ITextAreaConfigType,
6 | IUploadConfigType,
7 | TColorDefaultType,
8 | TNumberDefaultType,
9 | TTextDefaultType,
10 | TUploadDefaultType,
11 | TTextAreaDefaultType,
12 | } from '@/components/PanelComponents/FormEditor/types';
13 |
14 | export type TCardEditData = Array<
15 | IUploadConfigType | ITextConfigType | IColorConfigType | INumberConfigType | ITextAreaConfigType
16 | >;
17 | export interface ICardConfig {
18 | width: TNumberDefaultType;
19 | bgColor: TColorDefaultType;
20 | bgPadding: TNumberDefaultType;
21 | cardRadius: TNumberDefaultType;
22 | link: TTextDefaultType;
23 | imgUrl: TUploadDefaultType;
24 | title: TTextDefaultType;
25 | desc: TTextAreaDefaultType;
26 | titColor: TColorDefaultType;
27 | titFontSize: TNumberDefaultType;
28 | descColor: TColorDefaultType;
29 | descFontSize: TNumberDefaultType;
30 | }
31 |
32 | export interface ICardSchema {
33 | editData: TCardEditData;
34 | config: ICardConfig;
35 | }
36 |
37 | const Card: ICardSchema = {
38 | editData: [
39 | {
40 | key: 'width',
41 | name: '卡片宽度',
42 | type: 'Number',
43 | },
44 | {
45 | key: 'bgColor',
46 | name: '卡片背景颜色',
47 | type: 'Color',
48 | },
49 | {
50 | key: 'bgPadding',
51 | name: '内容边距',
52 | type: 'Number',
53 | },
54 | {
55 | key: 'cardRadius',
56 | name: '卡片圆角',
57 | type: 'Number',
58 | },
59 | {
60 | key: 'link',
61 | name: '点击跳转链接',
62 | type: 'Text',
63 | },
64 | {
65 | key: 'imgUrl',
66 | name: '选择图片',
67 | type: 'Upload',
68 | isCrop: true,
69 | cropRate: 1,
70 | },
71 | {
72 | key: 'title',
73 | name: '标题',
74 | type: 'Text',
75 | },
76 | {
77 | key: 'titColor',
78 | name: '标题颜色',
79 | type: 'Color',
80 | },
81 | {
82 | key: 'titFontSize',
83 | name: '标题大小',
84 | type: 'Number',
85 | },
86 | {
87 | key: 'desc',
88 | name: '描述',
89 | type: 'TextArea',
90 | },
91 | {
92 | key: 'descColor',
93 | name: '描述颜色',
94 | type: 'Color',
95 | },
96 | {
97 | key: 'descFontSize',
98 | name: '描述文字大小',
99 | type: 'Number',
100 | }
101 | ],
102 | config: {
103 | width: 220,
104 | imgUrl: [
105 | {
106 | uid: '001',
107 | name: 'image.png',
108 | status: 'done',
109 | url: 'http://h5.dooring.cn/uploads/card@2x_175d58cb3a1.png',
110 | },
111 | ],
112 | title: '卡片标题',
113 | desc: '卡片描述',
114 | titColor: 'rgba(0,0,0,1)',
115 | titFontSize: 18,
116 | descColor: 'rgba(0,0,0,.6)',
117 | descFontSize: 14,
118 | bgColor: 'rgba(255,255,255,1)',
119 | bgPadding: 16,
120 | cardRadius: 6,
121 | link: ''
122 | },
123 | };
124 |
125 | export default Card;
126 |
--------------------------------------------------------------------------------
/src/components/BasicShop/BasicComponents/List/schema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | IColorConfigType,
3 | IDataListConfigType,
4 | INumberConfigType,
5 | ISelectConfigType,
6 | TColorDefaultType,
7 | TDataListDefaultType,
8 | TNumberDefaultType,
9 | TSelectDefaultType,
10 | } from '@/components/PanelComponents/FormEditor/types';
11 | export type TListSelectKeyType = '60' | '80' | '100' | '120' | '150';
12 | export type TListEditData = Array<
13 | IColorConfigType | IDataListConfigType | INumberConfigType | ISelectConfigType
90 | {title}
91 |
92 | {isTpl ?
16 | @徐小夕
17 | @yehuozhili
18 |
19 | ),
20 | useReg: /(.*?)作者是谁(.*?)/,
21 | },
22 | );
23 |
24 | export default function Layout({ children }: IRouteComponentProps) {
25 | const [modalOpen, setModalOpen] = useState(false);
26 | const callb = useCallback((v: RenderList) => {
27 | setTimeout(() => {
28 | //使用settimeout 更像机器人回话
29 | let returnValue = generateRespones(v);
30 | if (returnValue) {
31 | //排除null
32 | setList(prev => [...prev, { isUser: false, text: returnValue }]);
33 | }
34 | }, 500);
35 | // eslint-disable-next-line react-hooks/exhaustive-deps
36 | }, []);
37 | // 注册
38 | const [render, setList] = useRegister(
39 | modalOpen,
40 | callb,
41 | {
42 | onOk: () => setModalOpen(false),
43 | onCancel: () => setModalOpen(false),
44 | title: 'h5-Dooring机器人客服',
45 | width: 420
46 | },
47 | {},
48 |
49 | welcome!欢迎使用h5-Dooring，你有任何问题，都可以咨询我哦～
50 |
,
61 | );
62 |
63 | useEffect(() => {
64 | setInterval(() => {
65 | const timeout = +localStorage.getItem('tt')
66 | if(timeout && timeout < Date.now()) {
67 | localStorage.removeItem('tt');
68 | Modal.info({
69 | title: 'Dooring温馨提示',
70 | content: (
71 |
51 |
60 | 【dooring指南】
52 |
53 |
54 |
59 | 2. 贡献者列表
55 | 3. 如果复制/删除组件不生效, 请先点击需要复制/删除组件, 再右键删除/复制
56 | 4. dooring开源交流群(微信：Mr_xuxiaoxi)
57 |
58 |
72 | 您的登录已过期, 请点击确认按钮重新登录
73 |
74 | ),
75 | okText: '确认',
76 | onOk() {
77 | localStorage.removeItem('rp');
78 | localStorage.removeItem('nickname');
79 | history.push('/login');
80 | },
81 | });
82 | }
83 | }, 1000 * 15)
84 | }, [])
85 | return (
86 |
87 |
103 | );
104 | }
105 |
--------------------------------------------------------------------------------
/src/components/PanelComponents/DataList/editorModal.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useEffect, FC } from 'react';
2 | import { Form, Select, Input, Modal } from 'antd';
3 | import Upload from '../Upload';
4 | import { Store } from 'antd/lib/form/interface';
5 | import { TDataListDefaultTypeItem } from '../FormEditor/types';
6 | // import styles from './index.less';
7 | const normFile = (e: any) => {
8 | if (Array.isArray(e)) {
9 | return e;
10 | }
11 | return e && e.fileList;
12 | };
13 |
14 | const { Option } = Select;
15 |
16 | const formItemLayout = {
17 | labelCol: { span: 6 },
18 | wrapperCol: { span: 14 },
19 | };
20 |
21 | export type EditorModalProps = {
22 | visible: boolean;
23 | onCancel: ((e: React.MouseEvent
96 |
99 |
100 | {render}
101 | {children}
102 |
21 | 导入模板会覆盖画布已有的数据，确认要导入吗？
22 |
23 | ),
24 | okText: '确定',
25 | cancelText: '取消',
26 | onOk() {
27 | setLoading(true)
28 | req.get(`/visible/tpl/get?tid=${tid}`).then(res => {
29 | res && onSelectTpl && onSelectTpl({tpl: res.tpl, pageConfig: res.pageConfig})
30 | setLoading(false)
31 | onCloseModalTpl()
32 | }).catch(err => {
33 | setLoading(false)
34 | })
35 | }
36 | };
37 | Modal.confirm(config);
38 | }
39 |
40 | const handlePaneChange = (key) => {
41 | setTpls(cates[key] || [])
42 | }
43 |
44 | useEffect(() => {
45 | setLoading(true)
46 | req.get('/visible/tpls/free').then(res => {
47 | // 对模版数据进行分类
48 | if(res) {
49 | const cateObj = {};
50 | res.forEach(item => {
51 | const cate = item.cate;
52 | if(!cate) {
53 | cateObj['其他'] ? cateObj['其他'].push(item) : (cateObj['其他'] = [item])
54 | return
55 | }
56 | cateObj[cate] ? cateObj[cate].push(item) : (cateObj[cate] = [item])
57 | })
58 | setCates(cateObj)
59 | setTpls(cateObj['其他'] || [])
60 | }
61 | setLoading(false)
62 | }).catch(err => {
63 | setLoading(false)
64 | })
65 | }, [])
66 |
67 | return
76 | {
77 | !isLoading ?
78 |
79 | {
80 | cateTpl.map((item, i) => {
81 | return
82 |
94 | })
95 | }
96 |
97 | :
98 |
101 |
83 | {
84 | tpls.length ? tpls.map((item,i) => {
85 | return
92 |
93 |
86 | 
87 |
88 |
89 | }) :