|
|
|
@ -18,161 +18,184 @@ moment.locale('zh-cn'); |
|
|
|
const { initLayout, initApiRoot, resize, initWebSocket } = layoutActions; |
|
|
|
|
|
|
|
const Root = props => { |
|
|
|
const { sections, title, copyright } = props; |
|
|
|
const [history, setHistory] = useState(null) |
|
|
|
const [store, setStore] = useState(null) |
|
|
|
const [outerRoutes, setOuterRoutes] = useState([]) |
|
|
|
const [combineRoutes, setCombineRoutes] = useState([]) |
|
|
|
const [innnerRoutes, setInnerRoutes] = useState([]) |
|
|
|
|
|
|
|
const flatRoutes = (routes) => { |
|
|
|
const combineRoutes = []; |
|
|
|
|
|
|
|
function flat (routes, parentRoute) { |
|
|
|
routes.forEach((route, i) => { |
|
|
|
let obj = { |
|
|
|
path: route.path, |
|
|
|
breadcrumb: route.breadcrumb, |
|
|
|
component: route.component || null, |
|
|
|
authCode: route.authCode || '', |
|
|
|
key: route.key |
|
|
|
} |
|
|
|
if (!route.path.startsWith("/")) { |
|
|
|
console.error('路由配置需以 "/" 开始：' + route.path); |
|
|
|
} |
|
|
|
if (route.path.length > 1 && route.path[route.path.length] == '/') { |
|
|
|
console.error('除根路由路由配置不可以以 "/" 结束：' + route.path); |
|
|
|
} |
|
|
|
if (parentRoute && parentRoute != '/') { |
|
|
|
obj.path = parentRoute + route.path; |
|
|
|
} |
|
|
|
if (route.exact) { |
|
|
|
obj.exact = true |
|
|
|
} |
|
|
|
if (route.hasOwnProperty('childRoutes')) { |
|
|
|
combineRoutes.push(obj); |
|
|
|
flat(route.childRoutes, obj.path) |
|
|
|
} else { |
|
|
|
combineRoutes.push(obj) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
flat(routes); |
|
|
|
return combineRoutes; |
|
|
|
} |
|
|
|
|
|
|
|
const initReducer = (reducers, reducerName, action) => { |
|
|
|
let reducerParams = {} |
|
|
|
const { actionType, initReducer, reducer } = action()() |
|
|
|
if (initReducer || reducer) { |
|
|
|
if (reducer) { |
|
|
|
if (reducer.name) { |
|
|
|
reducerName = reducer.name |
|
|
|
} |
|
|
|
if (reducer.params) { |
|
|
|
reducerParams = reducer.params |
|
|
|
} |
|
|
|
const { sections, title, copyright } = props; |
|
|
|
const [history, setHistory] = useState(null) |
|
|
|
const [store, setStore] = useState(null) |
|
|
|
const [outerRoutes, setOuterRoutes] = useState([]) |
|
|
|
const [combineRoutes, setCombineRoutes] = useState([]) |
|
|
|
const [innnerRoutes, setInnerRoutes] = useState([]) |
|
|
|
const [authCrossLoading, setAuthCrossLoading] = useState(true) |
|
|
|
|
|
|
|
const flatRoutes = (routes) => { |
|
|
|
const combineRoutes = []; |
|
|
|
|
|
|
|
function flat (routes, parentRoute) { |
|
|
|
routes.forEach((route, i) => { |
|
|
|
let obj = { |
|
|
|
path: route.path, |
|
|
|
breadcrumb: route.breadcrumb, |
|
|
|
component: route.component || null, |
|
|
|
authCode: route.authCode || '', |
|
|
|
key: route.key |
|
|
|
} |
|
|
|
if (!route.path.startsWith("/")) { |
|
|
|
console.error('路由配置需以 "/" 开始：' + route.path); |
|
|
|
} |
|
|
|
if (route.path.length > 1 && route.path[route.path.length] == '/') { |
|
|
|
console.error('除根路由路由配置不可以以 "/" 结束：' + route.path); |
|
|
|
} |
|
|
|
if (parentRoute && parentRoute != '/') { |
|
|
|
obj.path = parentRoute + route.path; |
|
|
|
} |
|
|
|
if (route.exact) { |
|
|
|
obj.exact = true |
|
|
|
} |
|
|
|
if (route.hasOwnProperty('childRoutes')) { |
|
|
|
combineRoutes.push(obj); |
|
|
|
flat(route.childRoutes, obj.path) |
|
|
|
} else { |
|
|
|
reducerName = `${reducerName}Rslt` |
|
|
|
combineRoutes.push(obj) |
|
|
|
} |
|
|
|
reducers[reducerName] = function (state, action) { |
|
|
|
return basicReducer(state, action, Object.assign({ actionType: actionType }, reducerParams)); |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
flat(routes); |
|
|
|
return combineRoutes; |
|
|
|
} |
|
|
|
|
|
|
|
const initReducer = (reducers, reducerName, action) => { |
|
|
|
let reducerParams = {} |
|
|
|
const { actionType, initReducer, reducer } = action()() |
|
|
|
if (initReducer || reducer) { |
|
|
|
if (reducer) { |
|
|
|
if (reducer.name) { |
|
|
|
reducerName = reducer.name |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
let innerRoutes = [] |
|
|
|
let outerRoutes = [] |
|
|
|
let reducers = {} |
|
|
|
let actions = { |
|
|
|
layout: layoutActions |
|
|
|
} |
|
|
|
|
|
|
|
for (let s of sections) { |
|
|
|
if (!s.key) console.warn('请给你的section添加一个key值，section name:' + s.name); |
|
|
|
for (let r of s.routes) { |
|
|
|
if (r.type == 'inner' || r.type == 'home') { |
|
|
|
innerRoutes.push(r.route) |
|
|
|
} else if (r.type == 'outer') { |
|
|
|
outerRoutes.push(r.route) |
|
|
|
} |
|
|
|
if (reducer.params) { |
|
|
|
reducerParams = reducer.params |
|
|
|
} |
|
|
|
if (s.reducers) { |
|
|
|
reducers = { ...reducers, ...s.reducers } |
|
|
|
} else { |
|
|
|
reducerName = `${reducerName}Rslt` |
|
|
|
} |
|
|
|
reducers[reducerName] = function (state, action) { |
|
|
|
return basicReducer(state, action, Object.assign({ actionType: actionType }, reducerParams)); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
let innerRoutes = [] |
|
|
|
let outerRoutes = [] |
|
|
|
let reducers = {} |
|
|
|
let actions = { |
|
|
|
layout: layoutActions |
|
|
|
} |
|
|
|
|
|
|
|
for (let s of sections) { |
|
|
|
if (!s.key) console.warn('请给你的section添加一个key值，section name:' + s.name); |
|
|
|
for (let r of s.routes) { |
|
|
|
if (r.type == 'inner' || r.type == 'home') { |
|
|
|
innerRoutes.push(r.route) |
|
|
|
} else if (r.type == 'outer') { |
|
|
|
outerRoutes.push(r.route) |
|
|
|
} |
|
|
|
if (s.actions) { |
|
|
|
actions = { ...actions, [s.key]: s.actions } |
|
|
|
if (s.key != 'auth') { |
|
|
|
for (let ak in s.actions) { |
|
|
|
let actions = s.actions[ak] |
|
|
|
if (actions && typeof actions == 'object') { |
|
|
|
for (let actionName in actions) { |
|
|
|
initReducer(reducers, actionName, actions[actionName]) |
|
|
|
} |
|
|
|
} else if (typeof actions == 'function') { |
|
|
|
initReducer(reducers, ak, actions) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
if (s.reducers) { |
|
|
|
reducers = { ...reducers, ...s.reducers } |
|
|
|
} |
|
|
|
if (s.actions) { |
|
|
|
actions = { ...actions, [s.key]: s.actions } |
|
|
|
if (s.key != 'auth') { |
|
|
|
for (let ak in s.actions) { |
|
|
|
let actions = s.actions[ak] |
|
|
|
if (actions && typeof actions == 'object') { |
|
|
|
for (let actionName in actions) { |
|
|
|
initReducer(reducers, actionName, actions[actionName]) |
|
|
|
} |
|
|
|
} else if (typeof actions == 'function') { |
|
|
|
initReducer(reducers, ak, actions) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
let history = createBrowserHistory(); |
|
|
|
let store = configStore(reducers, history); |
|
|
|
store.dispatch(initLayout(title, copyright, sections, actions)); |
|
|
|
store.dispatch(resize(document.body.clientHeight, document.body.clientWidth)); |
|
|
|
store.dispatch(actions.auth.initAuth()); |
|
|
|
store.dispatch(initWebSocket({})) |
|
|
|
store.dispatch(initApiRoot()) |
|
|
|
|
|
|
|
const combineRoutes = flatRoutes(innerRoutes); |
|
|
|
|
|
|
|
setInnerRoutes(combineRoutes) |
|
|
|
setHistory(history) |
|
|
|
setStore(store) |
|
|
|
setOuterRoutes(outerRoutes.map(route => ( |
|
|
|
<Route |
|
|
|
key={route.key} |
|
|
|
exact |
|
|
|
path={route.path} |
|
|
|
component={route.component} |
|
|
|
/> |
|
|
|
))) |
|
|
|
setCombineRoutes(combineRoutes.map(route => ( |
|
|
|
<Route |
|
|
|
key={route.key} |
|
|
|
exact={route.hasOwnProperty('exact') ? route.exact : true} |
|
|
|
path={route.path} |
|
|
|
component={route.component} |
|
|
|
/> |
|
|
|
))) |
|
|
|
}, []) |
|
|
|
|
|
|
|
return ( |
|
|
|
store ? |
|
|
|
<ConfigProvider locale={zhCN}> |
|
|
|
<Provider store={store}> |
|
|
|
<ConnectedRouter history={history}> |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
let history = createBrowserHistory(); |
|
|
|
let store = configStore(reducers, history); |
|
|
|
store.dispatch(initLayout(title, copyright, sections, actions)); |
|
|
|
store.dispatch(resize(document.body.clientHeight, document.body.clientWidth)); |
|
|
|
store.dispatch(actions.auth.initAuth()); |
|
|
|
store.dispatch(initWebSocket({})) |
|
|
|
store.dispatch(initApiRoot()) |
|
|
|
|
|
|
|
const combineRoutes = flatRoutes(innerRoutes); |
|
|
|
|
|
|
|
setInnerRoutes(combineRoutes) |
|
|
|
setHistory(history) |
|
|
|
setStore(store) |
|
|
|
setOuterRoutes(outerRoutes.map(route => ( |
|
|
|
<Route |
|
|
|
key={route.key} |
|
|
|
exact |
|
|
|
path={route.path} |
|
|
|
component={route.component} |
|
|
|
/> |
|
|
|
))) |
|
|
|
setCombineRoutes(combineRoutes.map(route => ( |
|
|
|
<Route |
|
|
|
key={route.key} |
|
|
|
exact={route.hasOwnProperty('exact') ? route.exact : true} |
|
|
|
path={route.path} |
|
|
|
component={route.component} |
|
|
|
/> |
|
|
|
))) |
|
|
|
|
|
|
|
window.addEventListener('message', async function (e) { // 监听 message 事件 |
|
|
|
const { data } = e |
|
|
|
if (data && data.action) { |
|
|
|
if (data.action == 'initUser') { |
|
|
|
await store.dispatch(actions.auth.initAuth(e.data)) |
|
|
|
} else if (data.action == 'logout') { |
|
|
|
await store.dispatch(actions.auth.logout()) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
setAuthCrossLoading(false) |
|
|
|
}); |
|
|
|
}, []) |
|
|
|
|
|
|
|
return ( |
|
|
|
<> |
|
|
|
{ |
|
|
|
store ? |
|
|
|
<ConfigProvider locale={zhCN}> |
|
|
|
<Provider store={store}> |
|
|
|
<ConnectedRouter history={history}> |
|
|
|
<Switch> |
|
|
|
{outerRoutes} |
|
|
|
<Layout |
|
|
|
history={history} |
|
|
|
routes={innnerRoutes} |
|
|
|
> |
|
|
|
{combineRoutes} |
|
|
|
</Layout> |
|
|
|
<Route |
|
|
|
path={'*'} |
|
|
|
component={NoMatch} |
|
|
|
/> |
|
|
|
{outerRoutes} |
|
|
|
<Layout |
|
|
|
history={history} |
|
|
|
routes={innnerRoutes} |
|
|
|
authCrossLoading={authCrossLoading} |
|
|
|
> |
|
|
|
{combineRoutes} |
|
|
|
</Layout> |
|
|
|
<Route |
|
|
|
path={'*'} |
|
|
|
component={NoMatch} |
|
|
|
/> |
|
|
|
</Switch> |
|
|
|
</ConnectedRouter> |
|
|
|
</Provider> |
|
|
|
</ConfigProvider> |
|
|
|
: '' |
|
|
|
) |
|
|
|
</ConnectedRouter> |
|
|
|
</Provider> |
|
|
|
</ConfigProvider> |
|
|
|
: '' |
|
|
|
} |
|
|
|
<iframe id="iotAuth" src="http://localhost:5200/cross" style={{ position: 'absolute', top: 0 }} frameBorder={0} > |
|
|
|
<p>你的浏览器不支持 iframe。</p> |
|
|
|
</iframe> |
|
|
|
</> |
|
|
|
|
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
export default Root; |
