Browse Source

统一提示

release_0.0.2
yuan_yi 3 years ago
parent
commit
7801359f73
  1. BIN
      code/VideoAccess-VCMP/web/client/assets/images/logo/figure.png
  2. 2
      code/VideoAccess-VCMP/web/client/src/components/index.js
  3. 208
      code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx

BIN
code/VideoAccess-VCMP/web/client/assets/images/logo/figure.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 377 KiB

2
code/VideoAccess-VCMP/web/client/src/components/index.js

@ -1,5 +1,5 @@
'use strict';
export {
};

208
code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx

@ -2,7 +2,7 @@
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Layout, Toast } from '@douyinfe/semi-ui';
import { Layout, Notification } from '@douyinfe/semi-ui';
import Sider from '../../components/sider';
import Header from '../../components/header';
import Footer from '../../components/footer';
@ -11,7 +11,7 @@ import * as NProgress from 'nprogress';
import PerfectScrollbar from 'perfect-scrollbar';
NProgress.configure({
template: `
template: `
<div class="bar" style="height:2px" role="bar">
<div class="peg"></div>
</div>
@ -24,113 +24,121 @@ NProgress.configure({
let scrollbar
const LayoutContainer = props => {
const {
dispatch, msg, user, copyright, children, sections, clientWidth, clientHeight,
location, match, routes, history
} = props
const [collapsed, setCollapsed] = useState(false)
const {
dispatch, msg, user, copyright, children, sections, clientWidth, clientHeight,
location, match, routes, history
} = props
const [collapsed, setCollapsed] = useState(false)
NProgress.start();
NProgress.start();
const resize_ = () => {
dispatch(resize(
document.body.clientHeight,
document.body.clientWidth - (collapsed ? 120 : 240)
));
}
const resize_ = () => {
dispatch(resize(
document.body.clientHeight,
document.body.clientWidth - (collapsed ? 120 : 240)
));
}
useEffect(() => {
scrollbar = new PerfectScrollbar('#page-content', { suppressScrollX: true });
useEffect(() => {
scrollbar = new PerfectScrollbar('#page-content', { suppressScrollX: true });
window.addEventListener('resize', resize_);
return () => {
window.removeEventListener('resize', resize_);
}
}, [])
window.addEventListener('resize', resize_);
return () => {
window.removeEventListener('resize', resize_);
}
}, [])
useEffect(() => {
NProgress.done();
if (!user || !user.authorized) {
history.push('/signin');
}
if (msg) {
if (msg.done) {
Toast.success(msg.done);
}
if (msg.error) {
Toast.error(msg.error);
}
}
const dom = document.getElementById('page-content');
if (dom) {
scrollbar.update();
dom.scrollTop = 0;
}
})
useEffect(() => {
NProgress.done();
if (!user || !user.authorized) {
history.push('/signin');
}
if (msg) {
if (msg.done) {
Notification.success({
// title: msg.done,
content: msg.done,
duration: 2,
})
}
if (msg.error) {
Notification.error({
// title: msg.error,
content: msg.error,
duration: 2,
})
}
}
const dom = document.getElementById('page-content');
if (dom) {
scrollbar.update();
dom.scrollTop = 0;
}
})
return (
<Layout id="layout">
<Layout.Header>
<Header
user={user}
pathname={location.pathname}
toggleCollapsed={() => {
setCollapsed(!collapsed);
}}
collapsed={collapsed}
history={history}
/>
</Layout.Header>
<Layout>
<Layout.Sider>
<Sider
sections={sections}
dispatch={dispatch}
user={user}
pathname={location.pathname}
collapsed={collapsed}
/>
</Layout.Sider>
<Layout.Content>
<div style={{
margin: '12px 12px 0px',
background: "#F6FAFF",
}}>
<div id="page-content" style={{
height: clientHeight - 12,
minWidth: 520,
position: 'relative',
}}>
<div style={{
minHeight: clientHeight - 32 - 12,
position: 'relative',
padding: '12px 8px',
}}>
{children}
</div>
<Layout.Footer>
<Footer />
</Layout.Footer>
</div>
</div>
</Layout.Content>
</Layout>
</Layout >
)
return (
<Layout id="layout">
<Layout.Header>
<Header
user={user}
pathname={location.pathname}
toggleCollapsed={() => {
setCollapsed(!collapsed);
}}
collapsed={collapsed}
history={history}
/>
</Layout.Header>
<Layout>
<Layout.Sider>
<Sider
sections={sections}
dispatch={dispatch}
user={user}
pathname={location.pathname}
collapsed={collapsed}
/>
</Layout.Sider>
<Layout.Content>
<div style={{
margin: '12px 12px 0px',
background: "#F6FAFF",
}}>
<div id="page-content" style={{
height: clientHeight - 12,
minWidth: 520,
position: 'relative',
}}>
<div style={{
minHeight: clientHeight - 32 - 12,
position: 'relative',
padding: '12px 8px',
}}>
{children}
</div>
<Layout.Footer>
<Footer />
</Layout.Footer>
</div>
</div>
</Layout.Content>
</Layout>
</Layout >
)
}
function mapStateToProps (state) {
const { global, auth, ajaxResponse } = state;
return {
title: global.title,
copyright: global.copyright,
sections: global.sections,
actions: global.actions,
clientWidth: global.clientWidth,
clientHeight: global.clientHeight,
msg: ajaxResponse.msg,
user: auth.user
};
const { global, auth, ajaxResponse } = state;
return {
title: global.title,
copyright: global.copyright,
sections: global.sections,
actions: global.actions,
clientWidth: global.clientWidth,
clientHeight: global.clientHeight,
msg: ajaxResponse.msg,
user: auth.user
};
}
export default connect(mapStateToProps)(LayoutContainer);
Loading…
Cancel
Save