Skip to content

Commit

Permalink
feat: upgrade [email protected] and refact some parts
Browse files Browse the repository at this point in the history
  • Loading branch information
chenghao committed Sep 14, 2020
1 parent 63827bb commit c169ff5
Show file tree
Hide file tree
Showing 25 changed files with 657 additions and 1,502 deletions.
8 changes: 5 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"private": true,
"homepage": ".",
"dependencies": {
"@ant-design/icons": "^4.2.2",
"@babel/core": "7.6.0",
"@svgr/webpack": "4.3.2",
"@types/classnames": "^2.2.9",
Expand All @@ -13,19 +14,19 @@
"@types/nprogress": "^0.2.0",
"@types/photoswipe": "^4.0.29",
"@types/query-string": "^6.3.0",
"@types/react": "16.9.5",
"@types/react": "^16.9.49",
"@types/react-beautiful-dnd": "^12.1.2",
"@types/react-color": "^3.0.1",
"@types/react-document-title": "^2.0.3",
"@types/react-dom": "16.9.1",
"@types/react-dom": "^16.9.8",
"@types/react-draft-wysiwyg": "^1.12.3",
"@types/react-loadable": "^5.5.1",
"@types/react-router-dom": "^5.1.0",
"@types/recharts": "^1.1.21",
"@typescript-eslint/eslint-plugin": "^3.9.1",
"@typescript-eslint/parser": "^3.9.1",
"ahooks": "^2.6.0",
"antd": "^3.23.5",
"antd": "^4.6.4",
"axios": "^0.19.0",
"babel-eslint": "10.0.3",
"babel-jest": "^24.9.0",
Expand All @@ -37,6 +38,7 @@
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "5.1.0",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.8.4",
"draftjs-to-markdown": "^0.5.1",
"echarts": "^4.3.0",
Expand Down
5 changes: 3 additions & 2 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Layout, notification, Icon } from 'antd';
import { Layout, notification } from 'antd';
import umbrella from 'umbrella-storage';
import { useAlita } from 'redux-alita';
import Routes from './routes';
Expand All @@ -9,6 +9,7 @@ import { ThemePicker, Copyright } from './components/widget';
import { checkLogin } from './utils';
import { fetchMenu } from './service';
import classNames from 'classnames';
import { SmileOutlined } from '@ant-design/icons';

const { Content, Footer } = Layout;

Expand Down Expand Up @@ -63,7 +64,7 @@ function openFNotification() {
</p>
</div>
),
icon: <Icon type="smile-circle" style={{ color: 'red' }} />,
icon: <SmileOutlined style={{ color: 'red' }} />,
duration: 0,
});
umbrella.setLocalStorage('hideBlog', true);
Expand Down
25 changes: 18 additions & 7 deletions src/components/HeaderCustom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,21 @@ import React, { useEffect, useState } from 'react';
import screenfull from 'screenfull';
import avater from '../style/imgs/b1.jpg';
import SiderCustom from './SiderCustom';
import { Menu, Icon, Layout, Badge, Popover } from 'antd';
import { Menu, Layout, Badge, Popover } from 'antd';
import { gitOauthToken, gitOauthInfo } from '../service';
import { parseQuery } from '../utils';
import { useHistory } from 'react-router-dom';
import { PwaInstaller } from './widget';
import { useAlita } from 'redux-alita';
import umbrella from 'umbrella-storage';
import { useSwitch } from '../utils/hooks';
import {
ArrowsAltOutlined,
BarsOutlined,
MenuFoldOutlined,
MenuUnfoldOutlined,
NotificationOutlined,
} from '@ant-design/icons';
const { Header } = Layout;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
Expand Down Expand Up @@ -56,7 +63,7 @@ const HeaderCustom = (props: HeaderCustomProps) => {
screenfull.toggle();
}
};
const menuClick = (e: { key: string }) => {
const menuClick = (e: any) => {
e.key === 'logout' && logout();
};
const logout = () => {
Expand All @@ -73,12 +80,16 @@ const HeaderCustom = (props: HeaderCustomProps) => {
visible={visible}
onVisibleChange={(visible) => (visible ? turn.turnOn() : turn.turnOff())}
>
<Icon type="bars" className="header__trigger custom-trigger" />
<BarsOutlined className="header__trigger custom-trigger" />
</Popover>
) : props.collapsed ? (
<MenuUnfoldOutlined
className="header__trigger custom-trigger"
onClick={props.toggle}
/>
) : (
<Icon
<MenuFoldOutlined
className="header__trigger custom-trigger"
type={props.collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={props.toggle}
/>
)}
Expand All @@ -91,11 +102,11 @@ const HeaderCustom = (props: HeaderCustomProps) => {
<PwaInstaller />
</Menu.Item>
<Menu.Item key="full">
<Icon type="arrows-alt" onClick={screenFull} />
<ArrowsAltOutlined onClick={screenFull} />
</Menu.Item>
<Menu.Item key="1">
<Badge count={25} overflowCount={10} style={{ marginLeft: 10 }}>
<Icon type="notification" />
<NotificationOutlined />
</Badge>
</Menu.Item>
<SubMenu
Expand Down
2 changes: 1 addition & 1 deletion src/components/SiderCustom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const SiderCustom = (props: SiderCustomProps) => {
props.popoverHide?.(); // 响应式布局控制小屏幕点击菜单时隐藏菜单操作
};

const openMenu = (v: string[]) => {
const openMenu: any = (v: string[]) => {
setMenu((state) => ({ ...state, openKeys: v }));
tFirstHide.turnOff();
};
Expand Down
6 changes: 3 additions & 3 deletions src/components/SiderMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Menu, Icon } from 'antd';
import { Menu } from 'antd';
import { Link } from 'react-router-dom';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import { IFMenu } from '../routes/config';
Expand All @@ -10,7 +10,7 @@ const renderMenuItem = (
) => (
<Menu.Item key={item.key}>
<Link to={(item.route || item.key) + (item.query || '')}>
{item.icon && <Icon type={item.icon} />}
{/* {item.icon && <Icon type={item.icon} />} */}
<span className="nav-text">{item.title}</span>
</Link>
</Menu.Item>
Expand All @@ -22,7 +22,7 @@ const renderSubMenu = (item: IFMenu) => {
key={item.key}
title={
<span>
{item.icon && <Icon type={item.icon} />}
{/* {item.icon && <Icon type={item.icon} />} */}
<span className="nav-text">{item.title}</span>
</span>
}
Expand Down
23 changes: 15 additions & 8 deletions src/components/dashboard/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,18 @@
* Created by hao.cheng on 2017/5/3.
*/
import React from 'react';
import { Row, Col, Card, Timeline, Icon } from 'antd';
import { Row, Col, Card, Timeline } from 'antd';
import BreadcrumbCustom from '../widget/BreadcrumbCustom';
import EchartsViews from './EchartsViews';
import EchartsProjects from './EchartsProjects';
import b1 from '../../style/imgs/b1.jpg';
import {
CameraOutlined,
CloudOutlined,
HeartOutlined,
MailOutlined,
SyncOutlined,
} from '@ant-design/icons';

class Dashboard extends React.Component {
render() {
Expand All @@ -19,7 +26,7 @@ class Dashboard extends React.Component {
<Card bordered={false}>
<div className="clear y-center">
<div className="pull-left mr-m">
<Icon type="heart" className="text-2x text-danger" />
<HeartOutlined className="text-2x text-danger" />
</div>
<div className="clear">
<div className="text-muted">收藏</div>
Expand All @@ -32,7 +39,7 @@ class Dashboard extends React.Component {
<Card bordered={false}>
<div className="clear y-center">
<div className="pull-left mr-m">
<Icon type="cloud" className="text-2x" />
<CloudOutlined type="cloud" className="text-2x" />
</div>
<div className="clear">
<div className="text-muted">云数据</div>
Expand All @@ -47,7 +54,7 @@ class Dashboard extends React.Component {
<Card bordered={false}>
<div className="clear y-center">
<div className="pull-left mr-m">
<Icon type="camera" className="text-2x text-info" />
<CameraOutlined className="text-2x text-info" />
</div>
<div className="clear">
<div className="text-muted">照片</div>
Expand All @@ -60,7 +67,7 @@ class Dashboard extends React.Component {
<Card bordered={false}>
<div className="clear y-center">
<div className="pull-left mr-m">
<Icon type="mail" className="text-2x text-success" />
<MailOutlined className="text-2x text-success" />
</div>
<div className="clear">
<div className="text-muted">邮件</div>
Expand All @@ -87,7 +94,7 @@ class Dashboard extends React.Component {
<small>10个已经完成，2个待完成，1个正在进行中</small>
</div>
<span className="card-tool">
<Icon type="sync" />
<SyncOutlined />
</span>
<Timeline>
<Timeline.Item color="green">新版本迭代会</Timeline.Item>
Expand All @@ -113,7 +120,7 @@ class Dashboard extends React.Component {
<h3>消息栏</h3>
</div>
<span className="card-tool">
<Icon type="sync" />
<SyncOutlined />
</span>
<ul className="list-group no-border">
<li className="list-group-item">
Expand Down Expand Up @@ -182,7 +189,7 @@ class Dashboard extends React.Component {
<small>最近7天用户访问量</small>
</div>
<span className="card-tool">
<Icon type="sync" />
<SyncOutlined type="sync" />
</span>
<EchartsViews />
</Card>
Expand Down
Loading

1 comment on commit c169ff5

@Jaccccccccccccccccccccccccccccck
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

主页上的icon显示不出来了啊

Please sign in to comment.