From 921b64e92c364c969589abc92921f22902fda89a Mon Sep 17 00:00:00 2001 From: xujiang Date: Tue, 1 Sep 2020 00:48:36 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=A0=B7=E5=BC=8F=E9=97=AE?= =?UTF-8?q?=E9=A2=98=EF=BC=8C=E4=BF=AE=E5=A4=8D=E6=8B=96=E6=8B=BD=E8=BE=B9?= =?UTF-8?q?=E7=95=8C=E6=BA=A2=E5=87=BA=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=B8=85?= =?UTF-8?q?=E7=A9=BA=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Carousel/index.js | 2 + src/components/DynamicEngine/index.js | 8 +- src/components/Form/data.js | 346 -------------------- src/components/Form/index.js | 27 -- src/components/Form/index.less | 0 src/components/Zan/index.js | 21 ++ src/components/Zan/index.less | 6 + src/pages/editor/components/Header/index.js | 200 +++++++---- src/pages/editor/models/editorModal.js | 99 +++--- src/utils/req.ts | 9 +- 10 files changed, 205 insertions(+), 513 deletions(-) delete mode 100644 src/components/Form/data.js delete mode 100644 src/components/Form/index.js delete mode 100644 src/components/Form/index.less create mode 100644 src/components/Zan/index.js create mode 100644 src/components/Zan/index.less diff --git a/src/components/Carousel/index.js b/src/components/Carousel/index.js index 878d01d..ba24534 100644 --- a/src/components/Carousel/index.js +++ b/src/components/Carousel/index.js @@ -15,6 +15,8 @@ const XCarousel = memo(props => { }); }; + console.log(isTpl); + return (
{isTpl ? ( diff --git a/src/components/DynamicEngine/index.js b/src/components/DynamicEngine/index.js index ea032b4..2936fcb 100644 --- a/src/components/DynamicEngine/index.js +++ b/src/components/DynamicEngine/index.js @@ -17,8 +17,8 @@ const DynamicFunc = type => } return props => { - const { config } = props; - return ; + const { config, isTpl } = props; + return ; }; }, loading: () => ( @@ -29,11 +29,11 @@ const DynamicFunc = type => }); const DynamicEngine = memo(props => { - const { type, config } = props; + const { type, config, isTpl } = props; const Dynamic = useMemo(() => { return DynamicFunc(type); }, [type, config]); - return ; + return ; }); export default DynamicEngine; diff --git a/src/components/Form/data.js b/src/components/Form/data.js deleted file mode 100644 index 2a87509..0000000 --- a/src/components/Form/data.js +++ /dev/null @@ -1,346 +0,0 @@ -export default [ - { - "Date": "2010-01", - "scales": 1998 - }, - { - "Date": "2010-02", - "scales": 1850 - }, - { - "Date": "2010-03", - "scales": 1720 - }, - { - "Date": "2010-04", - "scales": 1818 - }, - { - "Date": "2010-05", - "scales": 1920 - }, - { - "Date": "2010-06", - "scales": 1802 - }, - { - "Date": "2010-07", - "scales": 1945 - }, - { - "Date": "2010-08", - "scales": 1856 - }, - { - "Date": "2010-09", - "scales": 2107 - }, - { - "Date": "2010-10", - "scales": 2140 - }, - { - "Date": "2010-11", - "scales": 2311 - }, - { - "Date": "2010-12", - "scales": 1972 - }, - { - "Date": "2011-01", - "scales": 1760 - }, - { - "Date": "2011-02", - "scales": 1824 - }, - { - "Date": "2011-03", - "scales": 1801 - }, - { - "Date": "2011-04", - "scales": 2001 - }, - { - "Date": "2011-05", - "scales": 1640 - }, - { - "Date": "2011-06", - "scales": 1502 - }, - { - "Date": "2011-07", - "scales": 1621 - }, - { - "Date": "2011-08", - "scales": 1480 - }, - { - "Date": "2011-09", - "scales": 1549 - }, - { - "Date": "2011-10", - "scales": 1390 - }, - { - "Date": "2011-11", - "scales": 1325 - }, - { - "Date": "2011-12", - "scales": 1250 - }, - { - "Date": "2012-01", - "scales": 1394 - }, - { - "Date": "2012-02", - "scales": 1406 - }, - { - "Date": "2012-03", - "scales": 1578 - }, - { - "Date": "2012-04", - "scales": 1465 - }, - { - "Date": "2012-05", - "scales": 1689 - }, - { - "Date": "2012-06", - "scales": 1755 - }, - { - "Date": "2012-07", - "scales": 1495 - }, - { - "Date": "2012-08", - "scales": 1508 - }, - { - "Date": "2012-09", - "scales": 1433 - }, - { - "Date": "2012-10", - "scales": 1344 - }, - { - "Date": "2012-11", - "scales": 1201 - }, - { - "Date": "2012-12", - "scales": 1065 - }, - { - "Date": "2013-01", - "scales": 1255 - }, - { - "Date": "2013-02", - "scales": 1429 - }, - { - "Date": "2013-03", - "scales": 1398 - }, - { - "Date": "2013-04", - "scales": 1678 - }, - { - "Date": "2013-05", - "scales": 1524 - }, - { - "Date": "2013-06", - "scales": 1688 - }, - { - "Date": "2013-07", - "scales": 1500 - }, - { - "Date": "2013-08", - "scales": 1670 - }, - { - "Date": "2013-09", - "scales": 1734 - }, - { - "Date": "2013-10", - "scales": 1699 - }, - { - "Date": "2013-11", - "scales": 1508 - }, - { - "Date": "2013-12", - "scales": 1680 - }, - { - "Date": "2014-01", - "scales": 1750 - }, - { - "Date": "2014-02", - "scales": 1602 - }, - { - "Date": "2014-03", - "scales": 1834 - }, - { - "Date": "2014-04", - "scales": 1722 - }, - { - "Date": "2014-05", - "scales": 1430 - }, - { - "Date": "2014-06", - "scales": 1280 - }, - { - "Date": "2014-07", - "scales": 1367 - }, - { - "Date": "2014-08", - "scales": 1155 - }, - { - "Date": "2014-09", - "scales": 1289 - }, - { - "Date": "2014-10", - "scales": 1104 - }, - { - "Date": "2014-11", - "scales": 1246 - }, - { - "Date": "2014-12", - "scales": 1098 - }, - { - "Date": "2015-01", - "scales": 1189 - }, - { - "Date": "2015-02", - "scales": 1276 - }, - { - "Date": "2015-03", - "scales": 1033 - }, - { - "Date": "2015-04", - "scales": 956 - }, - { - "Date": "2015-05", - "scales": 845 - }, - { - "Date": "2015-06", - "scales": 1089 - }, - { - "Date": "2015-07", - "scales": 944 - }, - { - "Date": "2015-08", - "scales": 1043 - }, - { - "Date": "2015-09", - "scales": 893 - }, - { - "Date": "2015-10", - "scales": 840 - }, - { - "Date": "2015-11", - "scales": 934 - }, - { - "Date": "2015-12", - "scales": 810 - }, - { - "Date": "2016-01", - "scales": 782 - }, - { - "Date": "2016-02", - "scales": 1089 - }, - { - "Date": "2016-03", - "scales": 745 - }, - { - "Date": "2016-04", - "scales": 680 - }, - { - "Date": "2016-05", - "scales": 802 - }, - { - "Date": "2016-06", - "scales": 697 - }, - { - "Date": "2016-07", - "scales": 583 - }, - { - "Date": "2016-08", - "scales": 456 - }, - { - "Date": "2016-09", - "scales": 524 - }, - { - "Date": "2016-10", - "scales": 398 - }, - { - "Date": "2016-11", - "scales": 278 - }, - { - "Date": "2016-12", - "scales": 195 - }, - { - "Date": "2017-01", - "scales": 145 - }, - { - "Date": "2017-02", - "scales": 207 - } -] diff --git a/src/components/Form/index.js b/src/components/Form/index.js deleted file mode 100644 index b824290..0000000 --- a/src/components/Form/index.js +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { Area } from '@ant-design/charts'; -import data from './data'; - -const XArea = (props) => { - const { configData: { title, description } } = props - const config = { - title: { - visible: true, - text: title || '', - }, - description: { - visible: true, - text: description || '', - }, - data, - xField: 'Date', - yField: 'scales', - xAxis: { - type: 'dateTime', - tickCount: 5, - } - }; - return ; -}; - -export default XArea; \ No newline at end of file diff --git a/src/components/Form/index.less b/src/components/Form/index.less deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Zan/index.js b/src/components/Zan/index.js new file mode 100644 index 0000000..94fb76c --- /dev/null +++ b/src/components/Zan/index.js @@ -0,0 +1,21 @@ +import { memo } from 'react'; +import { Button, Popover } from 'antd'; +import styles from './index.less'; + +const content = ( +
+ +
+); + +export default memo(function ZanPao() { + return ( +
+ + + +
+ ); +}); diff --git a/src/components/Zan/index.less b/src/components/Zan/index.less new file mode 100644 index 0000000..7d518b3 --- /dev/null +++ b/src/components/Zan/index.less @@ -0,0 +1,6 @@ +.imgWrap { + width: 160px; + img { + width: 100%; + } +} diff --git a/src/pages/editor/components/Header/index.js b/src/pages/editor/components/Header/index.js index 351bf01..4291361 100644 --- a/src/pages/editor/components/Header/index.js +++ b/src/pages/editor/components/Header/index.js @@ -1,117 +1,173 @@ -import React, { useRef, memo } from 'react' -import { Button, Input, Popover, Modal } from 'antd' +import React, { useRef, memo } from 'react'; +import { Button, Input, Popover, Modal } from 'antd'; import { ArrowLeftOutlined, MobileOutlined, DownloadOutlined, - CopyOutlined -} from '@ant-design/icons' -import QRCode from 'qrcode.react' -import { saveAs } from 'file-saver' -import req from '@/utils/req' -import Code from '@/assets/code.png' + CopyOutlined, + DeleteOutlined, +} from '@ant-design/icons'; +import QRCode from 'qrcode.react'; +import { saveAs } from 'file-saver'; +import Zan from 'components/Zan'; +import req from '@/utils/req'; +import Code from '@/assets/code.png'; -import styles from './index.less' +import styles from './index.less'; const { confirm } = Modal; const isDev = process.env.NODE_ENV === 'development'; -const HeaderComponent = memo((props) => { - const { pointData, location } = props - const iptRef = useRef(null) +const HeaderComponent = memo(props => { + const { pointData, location, clearData } = props; + const iptRef = useRef(null); const toPreview = () => { - localStorage.setItem('pointData', JSON.stringify(pointData)) - savePreview() + localStorage.setItem('pointData', JSON.stringify(pointData)); + savePreview(); setTimeout(() => { - window.open(isDev ? `/preview?tid=${props.location.query.tid}` : `http://io.nainor.com/h5_plus/preview?tid=${props.location.query.tid}`) - }, 600) - } + window.open( + isDev + ? `/preview?tid=${props.location.query.tid}` + : `http://io.nainor.com/h5_plus/preview?tid=${props.location.query.tid}`, + ); + }, 600); + }; const content = () => { - const { tid } = location.query || '' - return - } + const { tid } = location.query || ''; + return ( + + ); + }; const handleSaveTpl = () => { confirm({ title: '确定要保存吗？', - content:
-
- 模版名称： + content: ( +
+
+ 模版名称： + +
+
+ 访问链接： + +
-
- 访问链接： -
-
, + ), okText: '保存', cancelText: '取消', onOk() { - let name = iptRef.current.state.value + let name = iptRef.current.state.value; req.post('/visible/tpl/save', { name, tpl: pointData }).then(res => { - console.log(res) - }) + console.log(res); + }); }, onCancel() { console.log('Cancel'); }, }); - } + }; const useTemplate = () => { Modal.info({ - title: '该功能正在升级，可以关注下方公众号实时查看动态', - content: ( -
- 趣谈前端 -
- ), - okText: '客官知道啦' - }) - } + title: '该功能正在升级，可以关注下方公众号实时查看动态', + content: ( +
+ 趣谈前端 +
+ ), + okText: '客官知道啦', + }); + }; const downLoadJson = () => { - const jsonStr = JSON.stringify(pointData) - const blob = new Blob([jsonStr], { type: "text/plain;charset=utf-8" }) - saveAs(blob, "template.json") - } + const jsonStr = JSON.stringify(pointData); + const blob = new Blob([jsonStr], { type: 'text/plain;charset=utf-8' }); + saveAs(blob, 'template.json'); + }; const toLogin = () => { - const { tid } = props.location.query || '' - window.location.href = `/h5_plus/login?tid=${tid}` - } + const { tid } = props.location.query || ''; + window.location.href = `/h5_plus/login?tid=${tid}`; + }; const savePreview = () => { - const { tid } = props.location.query || '' - req.post('/visible/preview', { tid, tpl: pointData }) - } + const { tid } = props.location.query || ''; + req.post('/visible/preview', { tid, tpl: pointData }); + }; - const handleSaveCode = () => { - - } + const handleSaveCode = () => {}; return (
-
-
-
Dooring
-
-
-
H5可视化编辑器
-
-
- - - - - - - - +
+
+
+
Dooring
+
+
+ + + + + + + + + +
+
+ +
- ) -}) + ); +}); -export default HeaderComponent +export default HeaderComponent; diff --git a/src/pages/editor/models/editorModal.js b/src/pages/editor/models/editorModal.js index e5d25fa..2ad5d7e 100644 --- a/src/pages/editor/models/editorModal.js +++ b/src/pages/editor/models/editorModal.js @@ -1,80 +1,63 @@ -// 将用户数据存贮到localstorage中 +const pointData = localStorage.getItem('userData') || '[]'; + function overSave(name, data) { - localStorage.setItem(name, JSON.stringify(data)) + localStorage.setItem(name, JSON.stringify(data)); } export default { namespace: 'editorModal', state: { - pointData: [], + pointData: JSON.parse(pointData), curPoint: null, }, reducers: { addPointData(state, { payload }) { - return { - ...state, - pointData: [...state.pointData, payload], - curPoint: payload - } + let pointData = [...state.pointData, payload]; + overSave('userData', pointData); + return { + ...state, + pointData, + curPoint: payload, + }; }, modPointData(state, { payload }) { - const { id } = payload + const { id } = payload; const pointData = state.pointData.map(item => { - if(item.id === id) { - return payload + if (item.id === id) { + return payload; } - return { ...item } - - }) - return { - ...state, + return { ...item }; + }); + overSave('userData', pointData); + return { + ...state, pointData, - curPoint: payload - } + curPoint: payload, + }; }, delPointData(state, { payload }) { - const { id } = payload - const pointData = state.pointData.filter(item => item.id !== id) + const { id } = payload; + const pointData = state.pointData.filter(item => item.id !== id); + overSave('userData', pointData); return { - ...state, + ...state, pointData, - curPoint: null - } - } - }, - effects: { - // 更新一条数据模型信息 - // *modifyDataModel({ payload }, { call, put }) { - // const modifyDataModel = yield call(mesService.modifyDataModel, payload) - // const activate = yield call(mesService.activateModifiedTableDataModel, modifyDataModel.dataModelId) - // const responseMessage = yield call(mesService.getDetailDataModel, { dataModelId: activate.dataModelId, showDataModelFieldFlag: true }) - // yield put({ - // type: 'receiveDetailDataModel', - // payload: responseMessage && responseMessage - // }) - // }, - - // 创建一条数据模型 - // *createDataModel({ payload }, { call, put }) { - // const responseMessage = yield call(mesService.createDataModel, payload) - // if (responseMessage.dataModelId) { - - // router.push({ - // pathname: '/dataModel/view', - // query: { id: responseMessage.dataModelId } - // }) - // } - // }, + curPoint: null, + }; + }, + clearAll(state) { + overSave('userData', []); + return { + ...state, + pointData: [], + curPoint: null, + }; + }, }, + effects: {}, subscriptions: { setup({ dispatch, history }) { - return history.listen(({ pathname, query }) => { - // Subscription 语义是订阅，用于订阅一个数据源，然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、 - // 服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等 - if (pathname !== '/dataModel/view') { - dispatch({ type: 'initDetail', data: {} }) - } - }) - } - } -} + return history.listen(({ pathname, query }) => {}); + }, + }, +}; diff --git a/src/utils/req.ts b/src/utils/req.ts index a8fd997..f6ba8f6 100644 --- a/src/utils/req.ts +++ b/src/utils/req.ts @@ -15,8 +15,8 @@ instance.interceptors.request.use( function(config) { // 在发送请求之前做些什么 config.headers = { - 'x-requested-with': localStorage.getItem('user') || '', - authorization: localStorage.getItem('token') || '', + 'x-requested-with': '', + authorization: '', }; return config; }, @@ -30,10 +30,7 @@ instance.interceptors.request.use( instance.interceptors.response.use( function(response) { // 对响应数据做点什么 - if (response.headers['x-show-msg'] === 'zxzk_msg_200') { - message.success(response.data.msg); - } - return response.data.result; + // 你的业务数据 }, function(error) { // 对响应错误做点什么