23 |
37 | );
38 | }
39 | export default Header;
--------------------------------------------------------------------------------
/src/layouts/components/GlobalHeader/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 | @pro-header-hover-bg: rgba(0, 0, 0, 0.025);
3 | .rightCenter {
4 | text-align: right;
5 | height: 100%;
6 | }
7 |
8 | .action {
9 | display: inline-block;
10 | height: 100%;
11 | padding: 0 12px;
12 | cursor: pointer;
13 | transition: all 0.3s;
14 | >i {
15 | color: @text-color;
16 | vertical-align: middle;
17 | }
18 | &:hover {
19 | background: @pro-header-hover-bg;
20 | }
21 | &:global(.opened) {
22 | background: @pro-header-hover-bg;
23 | }
24 | }
25 |
26 | .search {
27 | padding: 0 12px;
28 | &:hover {
29 | background: transparent;
30 | }
31 | }
32 |
33 | .account {
34 | .avatar {
35 | margin:~'calc((@{layout-header-height} - 24px) / 2)' 0;
36 | margin-right: 8px;
37 | color: @primary-color;
38 | vertical-align: top;
39 | background: rgba(255, 255, 255, 0.85);
40 | }
41 | }
--------------------------------------------------------------------------------
/src/layouts/components/GlobalRoll/index.css:
--------------------------------------------------------------------------------
1 | .rollbox {
2 | overflow: hidden;
3 | width: 100%;
4 | }
5 | .rollbox .roll {
6 | color: #ffffff;
7 | margin: 0;
8 | padding: 0;
9 | white-space: nowrap;
10 | float: left;
11 | animation-name: roll;
12 | -webkit-animation-name: roll;
13 | animation-iteration-count: infinite;
14 | -webkit-animation-iteration-count: infinite;
15 | animation-timing-function: linear;
16 | -webkit-animation-timing-function: linear;
17 | }
18 | .rollbox .roll:hover {
19 | animation-play-state: paused;
20 | -webkit-animation-play-state: paused;
21 | cursor: progress;
22 | }
23 | @-webkit-keyframes roll {
24 | 0% {
25 | transform: translateX(1200px);
26 | -webkit-transform: translateX(1200px);
27 | }
28 | 100% {
29 | transform: translateX(-100%);
30 | -webkit-transform: translateX(-100%);
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/layouts/components/GlobalRoll/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author M
3 | * @email mpw0311@163.com
4 | * @version 1.0.0
5 | * @description
6 | */
7 | import styles from './index.less';
8 |
9 | function Roll(props) {
10 | const {
11 | notification = '',// "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.----------------------------------------------------"
12 | } = props;
13 | const len = notification.length;
14 | const ss = Math.floor(len / 12);
15 | return (
16 |
17 |
21 | );
22 | }
23 | export default Roll;
--------------------------------------------------------------------------------
/src/layouts/components/GlobalRoll/index.less:
--------------------------------------------------------------------------------
1 | .rollbox {
2 | overflow: hidden;
3 | width: 100%;
4 | .roll {
5 | color: #ffffff;
6 | margin: 0;
7 | padding: 0;
8 | white-space: nowrap;
9 | float: left; // animation: roll 10s infinite linear;
10 | // -webkit-animation: roll 10s infinite linear; // animation-delay:1s;
11 | animation-name: roll;
12 | -webkit-animation-name: roll;
13 | animation-iteration-count: infinite;
14 | -webkit-animation-iteration-count: infinite;
15 | animation-timing-function: linear;
16 | -webkit-animation-timing-function: linear; // animation-delay: 5s;
17 | // -webkit-animation-delay: 5s;
18 | &:hover {
19 | animation-play-state: paused;
20 | -webkit-animation-play-state: paused;
21 | cursor: progress;
22 | }
23 | }
24 | }
25 |
26 | @-webkit-keyframes roll {
27 | 0% {
28 | transform: translateX(1200px);
29 | -webkit-transform: translateX(1200px);
30 | }
31 | 100% {
32 | transform: translateX(-100%);
33 | -webkit-transform: translateX(-100%);
34 | }
35 | }
--------------------------------------------------------------------------------
/src/layouts/components/GlobalSearch/_.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 | export const searchFilter = (value, data, names = [], pathtitles = []) => {
3 | if (value === undefined || value === null) return [];
4 | data = _.cloneDeep(data);
5 | data.forEach((item) => {
6 | const { title, children } = item;
7 | if (children && children.length > 0) {
8 | searchFilter(value, children, names, pathtitles.concat(title));
9 | } else if (title.indexOf(value) > -1) {
10 | names.push({ ...item, pathtitles: pathtitles.concat(title) });
11 | }
12 | });
13 | return names;
14 | };
15 | export const searchEqual = (value, data) => {
16 | data = _.cloneDeep(data);
17 | if (value === undefined || value === null || _.trim(value) === "") return {};
18 | value = _.trim(value);
19 | let res = {};
20 | for (const item of data) {
21 | const { key, children } = item;
22 | if (children && children.length > 0) {
23 | return searchFilter(value, children);
24 | } else if (key === value) {
25 | res = item;
26 | break;
27 | }
28 | }
29 | return res;
30 | };
--------------------------------------------------------------------------------
/src/layouts/components/GlobalSearch/index.css:
--------------------------------------------------------------------------------
1 | /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
2 | /* stylelint-disable no-duplicate-selectors */
3 | /* stylelint-disable */
4 | /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
5 | .text-overflow {
6 | white-space: nowrap;
7 | text-overflow: ellipsis;
8 | overflow: hidden;
9 | }
10 | .headerSearch {
11 | height: 64px;
12 | display: inline-block;
13 | }
14 |
--------------------------------------------------------------------------------
/src/layouts/components/GlobalSearch/index.less:
--------------------------------------------------------------------------------
1 | .headerSearch {
2 | height: @header-height;
3 | display: inline-block;
4 | }
--------------------------------------------------------------------------------
/src/layouts/components/GlobalUserCenter/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author M
3 | * @email mpw0311@163.com
4 | * @version 1.0.0
5 | * @description
6 | */
7 | import React, { PureComponent } from 'react';
8 | import { formatMessage } from 'umi/locale';
9 | import { Menu, Icon, Spin } from 'antd';
10 | import classNames from 'classnames';
11 | import HeaderDropdown from '../HeaderDropdown';
12 | import styles from './index.less';
13 |
14 | export default class SelectLang extends PureComponent {
15 |
16 |
17 | render() {
18 | const { userInfo = {}, onSetting = () => { }, theme, className } = this.props;
19 | const { userName } = userInfo;
20 | const handleMenuClick = (param) => {
21 | onSetting(param);
22 | };
23 | const menu = ();
41 |
42 | return userName ? (
43 |
18 | {notification}
19 |
20 |
43 |
51 | );
52 | }
53 | }
54 | export default connect(({ global: { userInfo, message, notification } }) => {
55 | return {
56 | userInfo,
57 | message,
58 | notification
59 | };
60 | })(Index);
--------------------------------------------------------------------------------
/src/layouts/platform/index.less:
--------------------------------------------------------------------------------
1 | @import '../../themes/index.less';
2 |
3 | .wrap {
4 | min-height: 100vh;
5 |
6 | /***侧边栏***/
7 | .sider {
8 | height: 100vh;
9 | position: fixed;
10 | left: 0;
11 | }
12 |
13 | /***系统主体部分***/
14 | .container {
15 | display: flex;
16 | flex-direction: column;
17 |
18 | /***系统头部***/
19 | .contentHeader {
20 | background: #fff;
21 | padding: 0;
22 | display: flex;
23 | justify-content: space-between
24 | }
25 |
26 | /***系统内容区域***/
27 | .content {
28 | flex: auto;
29 | margin: 10px 16px;
30 | margin-bottom: 0;
31 | display: flex;
32 | }
33 | }
34 | }
35 |
36 |
37 |
38 | .trigger {
39 | font-size: 18px;
40 | line-height: 64px;
41 | padding: 0 24px;
42 | cursor: pointer;
43 | transition: color .3s;
44 | }
45 |
46 | .trigger:hover {
47 | color: #1890ff;
48 | }
49 |
50 |
51 |
52 | .logo {
53 | height: 64px;
54 | background: #002140;
55 | padding: 10px 16px;
56 | }
57 |
58 | @keyframes fadeIn {
59 | 0% {
60 | opacity: 0;
61 | /*初始状态 透明度为0*/
62 | }
63 |
64 | 50% {
65 | opacity: 0.5;
66 | /*中间状态 透明度为0*/
67 | }
68 |
69 | 100% {
70 | opacity: 1;
71 | /*结尾状态 透明度为1*/
72 | }
73 | }
74 |
75 | @-webkit-keyframes fadeIn {
76 | 0% {
77 | opacity: 0;
78 | /*初始状态 透明度为0*/
79 | }
80 |
81 | 50% {
82 | opacity: 0.5;
83 | /*中间状态 透明度为0*/
84 | }
85 |
86 | 100% {
87 | opacity: 1;
88 | /*结尾状态 透明度为1*/
89 | }
90 | }
91 |
92 | .animation {
93 | /*动画名称*/
94 | animation-name: fadeIn;
95 | -webkit-animation-name: fadeIn;
96 | /*动画持续时间*/
97 | animation-duration: 0.6s;
98 | -webkit-animation-duration: 0.6s;
99 | /*动画次数*/
100 | animation-iteration-count: 1;
101 | -webkit-animation-iteration-count: 1;
102 | /*延迟时间*/
103 | animation-delay: 0s;
104 | -webkit-animation-delay: 0s;
105 | }
--------------------------------------------------------------------------------
/src/layouts/platform/logo.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author M
3 | * @email mpw0311@163.com
4 | * @version 1.0.0
5 | * @description
6 | */
7 | import React, { PureComponent } from 'react';
8 | import PropTypes from 'prop-types';
9 | import { Row, Col } from 'antd';
10 | import { sysName } from '@platformConfig';
11 | import styles from './index.less';
12 | import logo from '../../assets/logo.png';
13 | class Index extends PureComponent {
14 | render() {
15 | const { collapsed } = this.props;
16 | const imgLogo = 28 | {sysName} 29 |
30 | 31 |
35 | {logoPage}
36 |
37 | }
38 | }
39 |
40 | Index.propTypes = {
41 | collapsed: PropTypes.bool
42 | };
43 |
44 | export default Index;
45 |
--------------------------------------------------------------------------------
/src/layouts/platform/startedModal.js:
--------------------------------------------------------------------------------
1 | import { PureComponent } from 'react';
2 | import { Modal } from 'antd';
3 | export default class Started extends PureComponent {
4 | state = {
5 | visible: false
6 | }
7 | componentDidMount() {
8 | this.testStarted();
9 | }
10 | testStarted = () => {
11 | const started = localStorage.getItem('started');
12 | if (started !== 'true') {
13 | clearTimeout(this.timer);
14 | this.timer = setTimeout(() => {
15 | this.setState({
16 | visible: true
17 | });
18 | }, 6000)
19 | }
20 | }
21 | giveStar = () => {
22 | localStorage.setItem('started', true);
23 | this.setState({
24 | visible: false
25 | });
26 | window.location.href = 'https://github.com/mpw0311/antd-umi-sys';
27 | }
28 | handleCancel = () => {
29 | this.setState({
30 | visible: false
31 | });
32 | }
33 | render() {
34 | const { visible } = this.state;
35 | return (
36 | 如果你喜欢这个项目请给一个⭐，谢谢!
45 |Please give me a Star if you like this project.Thank you so much.
46 |
9 |
10 |
11 |
13 |
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/src/pages/login/components/Login/loginQrcode.less:
--------------------------------------------------------------------------------
1 | .qrcode {
2 | display: inline-block;
3 | width: 40px;
4 | height: 40px;
5 | font-size: 28px;
6 | transform: rotate(-45deg);
7 | -webkit-transform: rotate(-45deg);
8 | overflow: hidden;
9 | margin-right: -20px;
10 | > i {
11 | cursor: pointer;
12 | transform: translateX(-25px) rotate(45deg);
13 | }
14 | }
--------------------------------------------------------------------------------
/src/pages/login/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author M
3 | * @email mpw0311@163.com
4 | * @version 1.0.0
5 | * @description 登录页面
6 | */
7 | import { PureComponent } from 'react';
8 | import { connect } from 'dva';
9 | import Login from './components/Login';
10 | import { message, Row, Col } from 'antd';
11 | import { loginName } from '@platformConfig';
12 | import logo from '../../assets/logo_blue_1024.png';
13 | import styles from './index.less';
14 |
15 | @connect(
16 | ({ login, loading }) => ({
17 | ...login,
18 | loading: loading.global,
19 | })
20 | )
21 | class Index extends PureComponent {
22 | componentDidMount() {
23 | const { location: { query = {} } } = this.props;
24 | if (query.status === '1') {
25 | message.warning('用户未登录，请登录后访问！');
26 | }
27 | }
28 | handleSubmit = (err, values) => {
29 | for (const name in values) {
30 | if (values[name] === undefined) {
31 | message.error('用户名或密码错误！');
32 | return false;
33 | }
34 | }
35 | this.props.dispatch({
36 | type: 'login/login',
37 | payload: {
38 | ...values,
39 | },
40 | });
41 | };
42 | render() {
43 | const { loading, isError } = this.props;
44 | return (
45 |
46 |
47 | 
49 |
50 |
51 |
54 | );
55 | }
56 | }
57 | export default Index;
--------------------------------------------------------------------------------
/src/pages/login/index.less:
--------------------------------------------------------------------------------
1 | .content {
2 | width: 300px;
3 | }
4 |
5 | .logo {
6 | min-height: 60px;
7 | img {
8 | width: 100%;
9 | }
10 | }
11 |
12 | .title {
13 | text-align: center;
14 | }
--------------------------------------------------------------------------------
/src/pages/login/model.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author M
3 | * @email mpw0311@163.com
4 | * @version 1.0.0
5 | * @description
6 | */
7 | import * as api from './service';
8 | import { notification } from 'antd';
9 | import { routerRedux } from 'dva/router';
10 | import { encrypt } from '@utils/CryptoJS';
11 |
12 | export default {
13 | namespace: 'login',
14 | state: {
15 | isError: false
16 | },
17 | effects: {
18 | *login({ payload }, { call, put }) {
19 | const { password, ...rest } = payload;
20 | const { status } = yield call(api.login, { password: encrypt(password), ...rest });
21 | if (status === 0) {
22 | sessionStorage.setItem("isLogin", true);
23 | yield put(routerRedux.push('/sys'));
24 | } else {
25 | yield put({
26 | type: 'save',
27 | payload: {
28 | isError: true
29 | }
30 | });
31 | notification.error({
32 | message: '用户名或密码错误，请重新登录。',
33 | });
34 | }
35 | },
36 | },
37 |
38 | reducers: {
39 | save(state, action) {
40 | return { ...state, ...action.payload };
41 | },
42 | },
43 |
44 | };
45 |
--------------------------------------------------------------------------------
/src/pages/login/service.js:
--------------------------------------------------------------------------------
1 | import { request } from '@utils';
2 |
3 | export function login(payload) {
4 | return request('/login', {
5 | method: 'POST',
6 | data: {
7 | ...payload,
8 | }
9 | });
10 | }
--------------------------------------------------------------------------------
/src/pages/register/index.css:
--------------------------------------------------------------------------------
1 |
2 | .normal {
3 | background: #F2B279;
4 | }
5 |
--------------------------------------------------------------------------------
/src/pages/register/index.js:
--------------------------------------------------------------------------------
1 | import { Register } from '@components';
2 | // import styles from './index.css';
3 |
4 | export default function () {
5 | return (
6 | {loginName}
52 |
34 |
40 |
56 | );
57 | }
58 | }
--------------------------------------------------------------------------------
/src/pages/sys/githubpro/components/table.less:
--------------------------------------------------------------------------------
1 | .wrap {
2 | .pagination {
3 | text-align: right;
4 | padding: 16px 20px;
5 | }
6 | }
--------------------------------------------------------------------------------
/src/pages/sys/githubpro/index.js:
--------------------------------------------------------------------------------
1 | import { PureComponent } from 'react';
2 | import { connect } from 'dva';
3 | import { formatMessage } from 'umi/locale';
4 | import { Page } from '@components';
5 | import Header from './components/header';
6 | import Content from './components/content';
7 | import FooterTable from './components/footerTable';
8 |
9 | class Index extends PureComponent {
10 |
11 | render() {
12 | return (
13 |
17 |
19 | {userName}
18 |
16 |
17 | {
18 | data.map((item, i) =>
19 |
20 | )
22 | }
23 |
24 |
25 |