shihuojian/nodecloud

1import { makeStyles } from 'mui-styles';2const useStyles = makeStyles({3    root: {4        width: "100%",5        overflow: "hidden",whiteSpace: "nowrap",6        display: "flex",flexDirection: "column",7        '& .react-monaco-editor-container':{8            position:'relative'9        },10        '& .monaco-editor':{11            width:'100% !important'12        },13        '& .routeTips':{14            position:'absolute',15            height: 40,16            width: 150,17            background: "#3c3c3c",18            bottom: 15,19            right: 25,20            borderRadius: 15,21            display: "flex",22            justifyContent: "center",23            alignItems: "center",24            fontSize: 14,25            cursor:"pointer",26            color:"#cfc8c8"27        }28    }29});30import Tabs from '../tabs';31import {useState,useEffect} from 'react';32import dynamic from 'next/dynamic';33const MonacoEditor = dynamic(() => import('react-monaco-editor'), { ssr: false });34import CodeHistory from '../codeHistory';35const io = require('socket.io-client');36 37function App(props={}) {38    39    const classes = useStyles();40    const {thisData,listRequest,tabsRequest} = props;41    const children = thisData.children;42    const data = _.find(listRequest.state.data,{_id:listRequest.selected[0]});43 44    let {_id,parentId,path} = data ? data : {_id:'all'};45 46    let query = _id !== 'all' ? {_id} : {};47    const collection = listRequest.url.split('/')[2];48    const url = `/common/${collection}/findOne?_id=${_id}`;49 50    let type = ['cssHistory','webCssHistory'].includes(tabsRequest.model.collection) ? 'cssCode' : 'code';51    if(_.includes(["jsCssHistory","webJsCssHistory"],tabsRequest.model.collection)){52        type = 'jsCssCode'53    }54    if(_.includes(["apiRoute","webRoute"],props.tabsRequest.model.collection)){55        type = 'route';56    }57    58    // console.log(data,'routeCode');59    60    const [reloadPage,setReloadPage] = useState(false);61 62    //删除监听事件63    const deleteSocketOne = ()=>{64        if(props.socket.routeCode){65            props.socket.routeCode.off("update");66            props.socket.routeCode.off(_id);67        }68    }69 70    const RenderEditor = ()=>{71 72        const [value, setValue] = useState(data ? data[type] : "");73        const [reload, setReload] = useState(true);74        useEffect(() => {75            setSocket()76        },[]);77 78        //设置socket79        const setSocket = ()=>{80            if(!props.socket.routeCode){81                const {protocol,host} = window.location;82                const url = `${protocol}//${host}`;83                props.socket.routeCode =  io.connect(url, {84                    path:"/code/update",85                    transports: ['websocket']86                });87            }88 89            //会多次触发需要处理，切换需要删除90            props.socket.routeCode.on('update',({field,code})=>{91                data[field] = code;92                setValue(data[type]);93            });94            props.socket.routeCode.on(_id,({statusCode,message})=>{95                if(statusCode){96                    props.alert(message).error();97                }98            });99            100        }101 102        //每分钟存储修改历史103        const saveHistory = (code)=>{104            const key = _.toBase64(tabsRequest.model.collection+_id);105            const date = sessionStorage.getItem(key);106            const nowDate = _.date('YYYY-MM-DD HH:mm',new Date());107            let data = {date:nowDate,code,type};108            data[`${collection}Id`] = _id;109            if(date === null || _.Moment(nowDate).diff(_.Moment(date), 'minutes') >= 1){110                sessionStorage.setItem(key,nowDate);111                _.post(`/common/${collection}History/insertOne`,{data}).then(res=>{112                    // console.log(`/common/${collection}History/insertOne`,res,data,'=-==')113                }).catch(e=>{114                    props.alert(e.message).error();115                });116            }117        };118 119        const onChange = (value,reload)=>{120            if(_id !== 'all'){121 122                let updateFile = type === 'route' ? {type:'updateRoute'} : {type:'updateCode'};123                const url = listRequest.url.replace('find','updateOne');124                value = type === 'route' ? JSON.parse(value) : value;125                data[type] = value;126                const updateData = {parentId};127                updateData[type] = value;128                // console.log(updateData)129                let params = {130                    source:"web",131                    field:type,132                    callback_id:_id,133                    collection,134                    action:'updateOne',135                    filePath:path,136                    query:{_id},137                    data:{$set:updateData},138                }139                if(_.includes(['code','jsCssCode','cssCode'],type)){140                    params.updateFile = {type:'updateCode'}141                }else if(type === "route"){142                    params.updateFile = {type:'updateRouteCode'}143                }144                if(reload){145                    params.updateFile = updateFile;146                }147                props.socket.routeCode.emit('post',{148                    url:'/code/update',149                    callback_id:_id,150                    data:params151                })152                saveHistory(value);153                // props.socket.routeCode.emit('db',params);154                // _.post(url,params).then(res=>{155                //     saveHistory(value);156                // }).catch(e=>{157                //     props.alert(e.message.indexOf('insertCode:') !== -1 ? e.message.split('insertCode:')[1] : e.message).error();158                // });159            }160        };161 162        return (163            <div style={{height:'100%',position: "relative"}}>164                <MonacoEditor165                    language={type === 'code' || type === 'jsCssCode' ? 'javascript' : type === "route" ? "json" : 'scss'}166                    // width={window.innerWidth}167                    // height={window.innerHeight}168                    theme="vs-dark"169                    value={_id ===  'all' ? '' : type === 'route' && typeof value === "object" ? JSON.stringify(value,null,"\t") : value}170                    onChange={(value)=>{171                        if(_id !== 'all'){ 172                            // setValue(value);173                        }174                        onChange(value)175                    }}176            />177                {178                    reload ?179                        type === "route" ? <div className='routeTips' onClick={()=>{180                            onChange(value,'reload')181                            setReload(false);182                            setTimeout(()=>{183                                props.alert("success").success();184                                setReload(true);185                            },1000)186                        }}>重启进程生效</div> : ''187                    : <div className='routeTips'>进程重启中</div>    188                }189            </div>190        )191    };192 193    const History = ()=>{194        const [state,setState] = useState({195            _id,196            collection,197            open:false198        });199        props.listRequest.codeHistory = ()=>{200            setState({...state,open:true})201        };202        return (203            <CodeHistory state={state} {...props} close={()=>{204                setState({...state,open:false})205            }}/>206        )207    };208 209    //获取预览接口210    const getUrl = ()=>{211        const thisRoute = data.route ? data.route : {};212        let url = "";213        if(thisRoute.path){214            url = thisRoute.path;215        }else{216            if(collection === 'page'){  url = `?id=/admin/${data.shortId}`; }217            if(collection === 'webPage'){ url = `/${data.shortId}`; }218            if(collection === 'api' ){ url = `/api/${data.shortId}`;  }219        }220        return `http://${window.location.hostname}:3001${url}`;221    }222 223 224    if(_.isEmpty(data)){225        return false226    }227 228    const preview = getUrl();229 230    return (231        <div className={classes.root}>232            <History/>233            {!_.isEmpty(children) ? <Tabs onClick={(collection)=>{234                deleteSocketOne();235                setReloadPage(!reloadPage)236            }} preview={preview} {...props}/> : false}237            <RenderEditor/>238        </div>239    )240 241}242 243 244export default App;