diff --git a/.umirc.ts b/.umirc.ts index a9f1b4e..aad14b4 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -15,26 +15,34 @@ export default defineConfig({ base: 'h5_plus', publicPath: '/h5_plus/', outputPath: '../server/static/h5_plus', + routes: [ { + exact: false, path: '/', - component: '../pages/home', - }, - { - path: '/editor', - component: '../pages/editor', - }, - { - path: '/login', - component: '../pages/login', - }, - { - path: '/mobileTip', - component: '../pages/mobileTip', - }, - { - path: '/preview', - component: '../pages/editor/preview', + component: '@/layouts/index', + routes: [ + { + path: '/', + component: '../pages/home', + }, + { + path: '/editor', + component: '../pages/editor', + }, + { + path: '/login', + component: '../pages/login', + }, + { + path: '/mobileTip', + component: '../pages/mobileTip', + }, + { + path: '/preview', + component: '../pages/editor/preview', + }, + ], }, ], theme: { diff --git a/package.json b/package.json index dd0fcff..bbf8bc7 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "antd-img-crop": "^3.10.0", "axios": "^0.19.2", "babel-plugin-import": "^1.13.0", + "chatbot-antd": "^0.2.0", "file-saver": "^2.0.2", "lint-staged": "^10.0.7", "node-sass": "^4.14.1", diff --git a/src/components/ErrorBundaries/index.tsx b/src/components/ErrorBundaries/index.tsx new file mode 100644 index 0000000..8d11e9e --- /dev/null +++ b/src/components/ErrorBundaries/index.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +class ErrorBoundary extends React.Component { + constructor(props: any) { + super(props); + this.state = { hasError: false }; + } + + componentDidCatch(error: any, info: any) { + // Display fallback UI + this.setState({ hasError: true }); + // You can also log the error to an error reporting service + //logErrorToMyService(error, info); + } + + render() { + if (this.state.hasError) { + // You can render any custom fallback UI + return

Something went wrong.

; + } + return this.props.children; + } +} + +export default ErrorBoundary; diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index b9c8cef..7902b4b 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -1,381 +1,15 @@ -import { memo } from 'react'; +import React, { memo } from 'react'; import * as Icon from '@ant-design/icons'; import IconImg from 'assets/icon.png'; -import { TwoToneColor } from '@ant-design/icons'; import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'; -import { IconTypes, IconConfigType } from '../DynamicEngine/schema'; +import { IconConfigType } from '../DynamicEngine/schema'; +import { AntdIconType } from './icon'; interface IconType extends Omit { isTpl?: boolean; spin?: IconConfigType['spin']; color?: IconConfigType['color']; } - -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'; - const XIcon = memo((props: IconType) => { const { color, size, type, spin, isTpl } = props; diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx new file mode 100644 index 0000000..20458de --- /dev/null +++ b/src/layouts/index.tsx @@ -0,0 +1,63 @@ +import React, { useCallback, useState } from 'react'; +import { library, generateRespones, RenderList, useRegister } from 'chatbot-antd'; +import { IRouteComponentProps } from 'umi'; +import { Button } from 'antd'; +import { CustomerServiceOutlined } from '@ant-design/icons'; +import 'antd/dist/antd.css'; +library.push( + //语料库，push进去，也可以不用 + { + text: '我是机器人', + reg: '你是谁', + }, + { + text: 'author is yehuozhili', + useReg: /(.*?)作者是谁(.*?)/, + }, +); + +export default function Layout({ children }: IRouteComponentProps) { + const [modalOpen, setModalOpen] = useState(false); + const callb = useCallback((v: RenderList) => { + setTimeout(() => { + //使用settimeout 更像机器人回话 + let returnValue = generateRespones(v); + if (returnValue) { + //排除null + setList(prev => [...prev, { isUser: false, text: returnValue }]); + } + }, 500); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + // 注册 + const [render, setList] = useRegister( + modalOpen, + callb, + { + onOk: () => setModalOpen(false), + onCancel: () => setModalOpen(false), + title: 'h5-Dooring机器人客服', + }, + {}, +
welcome!欢迎使用h5-Dooring
, + ); + return ( +
+
+ +
+ {render} + {children} +
+ ); +} diff --git a/yarn.lock b/yarn.lock index 561d5ca..8fec73c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4225,6 +4225,11 @@ chardet@^0.7.0: resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA== +chatbot-antd@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/chatbot-antd/-/chatbot-antd-0.2.0.tgz#5bb35d80779d0f44f78fdcfef6e3bcfc3e2d4a2f" + integrity sha512-wKIFYYxCybMqQDnZj/Z7aYu1JTQuQVYMC3JCnw1ByP7TgNczClR/qQ2VDRO99Gg2QL6WecwoRVQp1ve8OyuinA== + check-types@^8.0.3: version "8.0.3" resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"