refactor: 使用iconfont替代自定义的svg组件

package.json

@@ -2,7 +2,7 @@
   "name": "management",
   "version": "0.1.0",
   "private": true,
-  "proxy": "http://cm.com",
+  "proxy": "http://localhost:6060",
   "scripts": {
     "dev": "node scripts/start.js",
     "build": "node scripts/build.js",

src/components/Menu/MenuItem.tsx

@@ -10,13 +10,12 @@ interface iMeunProps extends RouteComponentProps{
 const Meun:React.FC<iMeunProps> = props => {
   const { item: { path, icon, title, isTop }, location } = props
 
-  const fontSize = '27', fill = '#7786ab'
   const isActive = location.pathname.indexOf(path) !== -1
 
   return (
     <Tooltip placement="right" title={title}>
       <Link to={path} className={ isActive ? 'active' : ''}>
-        <SvgIcon iconClass={icon} fontSize={fontSize} fill={fill}></SvgIcon>
+        <SvgIcon type={icon} style={{ fontSize: 27, color: '#7786ab' }}></SvgIcon>
         { isActive && isTop ? <span className="pi-fz-12">{title}</span> : ''}
       </Link>
     </Tooltip>

src/components/SvgIcon/index.tsx

@@ -1,30 +1,36 @@
-import React from 'react'
-import './index.scss'
-type svgProps = {
-  iconClass: string,
-  fontSize: string,
-  fill: string
-  transform?: string
-} & typeof defaultProps
+import { createFromIconfontCN } from '@ant-design/icons'
+// import './index.scss'
+// type svgProps = {
+//   iconClass: string,
+//   fontSize: string,
+//   fill: string
+//   transform?: string
+// } & typeof defaultProps
 
-const defaultProps = {
-  fill: 'currentColor',
-  fontSize: '14'
-}
-const SvgIcon = (props: svgProps) => {
-  const { iconClass, fontSize, fill } = props
-  const svg = require(`@/assets/icons/svg/${iconClass}.svg`)
-  const styleObj = {
-    fontSize: fontSize + 'px',
-    minWidth: fontSize + 'px'
-  }
-  return (
-    <span aria-hidden="true" className="svg-icon">
-      <svg className='svg-class' style={styleObj} fill={fill} >
-        <use xlinkHref={"#icon-" + iconClass}  transform={ props.transform ? props.transform : ''}/>
-      </svg>
-    </span>
-  )
-}
-SvgIcon.defaultProps = defaultProps
-export default SvgIcon
+// const defaultProps = {
+//   fill: 'currentColor',
+//   fontSize: '14'
+// }
+// const SvgIcon = (props: svgProps) => {
+//   const { iconClass, fontSize, fill } = props
+//   const svg = require(`@/assets/icons/svg/${iconClass}.svg`)
+//   const styleObj = {
+//     fontSize: fontSize + 'px',
+//     minWidth: fontSize + 'px'
+//   }
+//   return (
+//     <span aria-hidden="true" className="svg-icon">
+//       <svg className='svg-class' style={styleObj} fill={fill} >
+//         <use xlinkHref={"#icon-" + iconClass}  transform={ props.transform ? props.transform : ''}/>
+//       </svg>
+//     </span>
+//   )
+// }
+// SvgIcon.defaultProps = defaultProps
+// export default SvgIcon
+
+
+const IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_2224180_kbbc2ndd37l.js'
+})
+export default IconFont

src/pages/Contract/Content/Income/index.tsx

@@ -1,16 +1,16 @@
 import Header from '@/components/Header'
 import Slot from '@/components/Header/slot'
+import SvgIcon from '@/components/SvgIcon'
 import { contractStore, tenderStore } from '@/store/mobx'
 import { iIncomeTree, iModalBooleanProps } from '@/types/contract'
 import { contractTreeBaseId } from '@/utils/common/constStatus'
 import consts from '@/utils/consts'
-import { ArrowDownOutlined, ArrowLeftOutlined, ArrowRightOutlined, ArrowUpOutlined, CloseOutlined, PlusOutlined, SettingOutlined } from '@ant-design/icons'
+import { SettingOutlined } from '@ant-design/icons'
 import { Button, Tooltip } from 'antd'
 import React, { useState } from 'react'
 import { apiResfulContractTree } from './api'
 import ContractModal from './components/Modal'
 import TableContent from './components/TableContent'
-
 export default function Income() {
   const [ modalObj, setModalObj ] = useState<iModalBooleanProps>({
     type: '',
@@ -84,46 +84,47 @@ export default function Income() {
               row.id ?
               <>
                 <Tooltip title="添加子项">
-                  <Button type="text" icon={<PlusOutlined style={{ color: '#007bff' }}/>} onClick={() => treeResfulApiHandler('add', { id: row.id, bidsectionId: row.bidsectionId })}></Button>
+                  <Button type="text" icon={<SvgIcon type="xxh-plus" style={{ color: '#007bff' }}></SvgIcon>} onClick={() => treeResfulApiHandler('add', { id: row.id, bidsectionId: row.bidsectionId })}></Button>
+                  {/* <Button type="text" icon={<PlusOutlined style={{ color: '#007bff' }}/>} onClick={() => treeResfulApiHandler('add', { id: row.id, bidsectionId: row.bidsectionId })}></Button> */}
                 </Tooltip>
                 {
                   !row.children?.length ?
                   <Tooltip title="删除">
-                    <Button type="text" icon={<CloseOutlined style={{ color: '#007bff' }}/>} onClick={() => treeResfulApiHandler('del', { id: row.id, bidsectionId: row.bidsectionId })} />
+                    <Button type="text" icon={<SvgIcon type="xxh-times" style={{ color: '#007bff' }}></SvgIcon>} onClick={() => treeResfulApiHandler('del', { id: row.id, bidsectionId: row.bidsectionId })} />
                   </Tooltip>
-                  : <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><CloseOutlined style={{ color: '#9a9a9a', fontSize: '14px' }}/></span>
+                  : <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><SvgIcon type="xxh-times" style={{ color: '#9a9a9a' }}></SvgIcon></span>
                 }
                 {
                   row.parentId && row.parentId !== contractTreeBaseId ?
                   <Tooltip title="升级">
-                    <Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#007bff' }} onClick={() => treeResfulApiHandler('depth', { id: row.id, bidsectionId: row.bidsectionId, operation: 'upDepth' })}></Button>
+                    <Button type="text" icon={<SvgIcon type="xxh-arrow-left" style={{ color: '#007bff' }} onClick={() => treeResfulApiHandler('depth', { id: row.id, bidsectionId: row.bidsectionId, operation: 'upDepth' })}></SvgIcon>}></Button>
                   </Tooltip>
                   :
-                  <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><ArrowLeftOutlined style={{ color: '#9a9a9a', fontSize: '14px' }}/></span>
+                  <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><SvgIcon type="xxh-arrow-left" style={{ color: '#9a9a9a' }}/></span>
                 }
                 {
                   row.elderBrother ?
                   <Tooltip title="降级">
-                    <Button type="text" icon={<ArrowRightOutlined style={{ color: '#007bff' }}/>} onClick={() => treeResfulApiHandler('depth', { id: row.id, bidsectionId: row.bidsectionId, operation: 'downDepth' })} ></Button>
+                    <Button type="text" icon={<SvgIcon type="xxh-arrow-right" style={{ color: '#007bff' }}/>} onClick={() => treeResfulApiHandler('depth', { id: row.id, bidsectionId: row.bidsectionId, operation: 'downDepth' })} ></Button>
                   </Tooltip>
                   :
-                  <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><ArrowRightOutlined style={{ color: '#9a9a9a', fontSize: '14px' }}/></span>
+                  <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><SvgIcon type="xxh-arrow-right" style={{ color: '#9a9a9a' }}/></span>
                 }
                 {
                   row.elderBrother ?
                   <Tooltip title="上移">
-                    <Button type="text" icon={<ArrowUpOutlined style={{ color: '#007bff' }}/>} onClick={() => treeResfulApiHandler('serial', { id: row.id, bidsectionId: row.bidsectionId, operation: 'upSerial' })}  disabled={!row.elderBrother}></Button>
+                    <Button type="text" icon={<SvgIcon type="xxh-arrow-up" style={{ color: '#007bff' }}/>} onClick={() => treeResfulApiHandler('serial', { id: row.id, bidsectionId: row.bidsectionId, operation: 'upSerial' })}  disabled={!row.elderBrother}></Button>
                   </Tooltip>
                   :
-                  <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><ArrowUpOutlined style={{ color: '#9a9a9a', fontSize: '14px' }}/></span>
+                  <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><SvgIcon type="xxh-arrow-up" style={{ color: '#9a9a9a' }}/></span>
                 }
                 {
                   !row.isEnd ?
                   <Tooltip title="下移">
-                    <Button type="text" icon={<ArrowDownOutlined style={{ color: '#007bff' }}/>} onClick={() => treeResfulApiHandler('serial', { id: row.id, bidsectionId: row.bidsectionId, operation: 'downSerial' })} disabled={row.isEnd}></Button>
+                    <Button type="text" icon={<SvgIcon type="xxh-arrow-down" style={{ color: '#007bff' }}/>} onClick={() => treeResfulApiHandler('serial', { id: row.id, bidsectionId: row.bidsectionId, operation: 'downSerial' })} disabled={row.isEnd}></Button>
                   </Tooltip>
                   :
-                  <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><ArrowDownOutlined style={{ color: '#9a9a9a', fontSize: '14px' }}/></span>
+                  <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><SvgIcon type="xxh-arrow-down" style={{ color: '#9a9a9a' }}/></span>
                 }
               </>
               : ''

src/pages/Contract/List/index.tsx

@@ -50,7 +50,7 @@ const List: React.FC<{}> = () => {
       width: '25%',
       render: (text: string, record: ContractTree) => {
         if (record.isfolder) {
-          return <div style={{ verticalAlign: "baseline" }}><SvgIcon iconClass="folder" fontSize="12" /><span className="pi-mg-left-2">{text}</span></div>
+          return <div style={{ verticalAlign: "baseline" }}><SvgIcon type="xxh-folder-open" /><span className="pi-mg-left-2">{text}</span></div>
         } else {
         return <div><span style={{ color: '#6c757d', marginRight: '.5rem' }}>{record.isEnd ? '└' : '├'}</span>
         <Link to={{ pathname: '/console/contract/content/summary', state: { id: record.bidsectionId } }}>{text}</Link>

src/pages/Management/Setting/index.tsx

@@ -102,7 +102,7 @@ export default function Info() {
             <span>{text}</span>
             {
               record.isAdmin ?
-                <Tooltip title="管理员"><span className="pi-mg-left-5"><SvgIcon iconClass="user-circle" fontSize="13"></SvgIcon></span></Tooltip>
+                <Tooltip title="管理员"><span className="pi-mg-left-5"><SvgIcon type="xxh-user-circle"></SvgIcon></span></Tooltip>
               : ''
             }
           </div>

src/pages/Management/Tender/index.tsx

@@ -56,7 +56,7 @@ const Tender: React.FC<{}> = () =>{
       // eslint-disable-next-line react/display-name
       render: (text: string, record: TenderTree) => {
         if (record.isfolder) {
-          return <div style={{ verticalAlign: "baseline" }}><SvgIcon iconClass="folder" fontSize="12" /><span className="pi-mg-left-2">{text}</span></div>
+          return <div style={{ verticalAlign: "baseline" }}><SvgIcon type="xxh-folder-open" style={{ fontSize: 12 }} /><span className="pi-mg-left-2">{text}</span></div>
         } else {
           return <div><span style={{ color: '#6c757d', marginRight: '.5rem' }}>{record.isEnd ? '└' : '├'}</span><span>{text}</span></div>
         }
@@ -84,40 +84,40 @@ const Tender: React.FC<{}> = () =>{
         return <Dropdown overlay={() => {
           return (
             <Menu>
-              <Menu.Item key="0"><div className="menu-item"  onClick={() => treeBtnClick({ type: 'rename', id: record.id })}><SvgIcon iconClass="edit" fontSize="12"></SvgIcon><span>重命名</span></div></Menu.Item>
-              <Menu.Item key="1"><div className="menu-item" onClick={() => treeBtnClick({ type: 'move', id: record.id, isFolder: Boolean(record.isfolder) })}><SvgIcon iconClass="exchange-alt" fontSize="12"></SvgIcon><span>移动</span></div></Menu.Item>
+              <Menu.Item key="0"><div className="menu-item"  onClick={() => treeBtnClick({ type: 'rename', id: record.id })}><SvgIcon type="xxh-edit" style={{ fontSize: 12 }}></SvgIcon><span>重命名</span></div></Menu.Item>
+              <Menu.Item key="1"><div className="menu-item" onClick={() => treeBtnClick({ type: 'move', id: record.id, isFolder: Boolean(record.isfolder) })}><SvgIcon type="xxh-exchange-alt" style={{ fontSize: 12 }}></SvgIcon><span>移动</span></div></Menu.Item>
               {
                 record.children?.length ?
                   <Menu.Item key="2">
                     <Tooltip placement="left" title="请先移除所有数据">
                       <div className="menu-item text-muted">
-                        <SvgIcon iconClass="times" fontSize="12"></SvgIcon><span>删除</span>
+                        <SvgIcon type="xxh-times" style={{ fontSize: 12 }}></SvgIcon><span>删除</span>
                       </div>
                     </Tooltip>
                   </Menu.Item>
                 :
-                <Menu.Item key="2"><div className="menu-item" onClick={() => treeBtnClick({ type : record.isfolder ? 'delFolder' : 'delTender', id: record.id, name: record.name })}><SvgIcon iconClass="times" fontSize="12"></SvgIcon><span>删除</span></div></Menu.Item>
+                <Menu.Item key="2"><div className="menu-item" onClick={() => treeBtnClick({ type : record.isfolder ? 'delFolder' : 'delTender', id: record.id, name: record.name })}><SvgIcon type="xxh-times" style={{ fontSize: 12 }}></SvgIcon><span>删除</span></div></Menu.Item>
               }
               {
                 record.isfolder ? <Menu.Divider /> : ''
               }
               {
                 record.isfolder ? (!record.hasFolder) ?
-                <Menu.Item key="3"><div className= "menu-item" onClick={() => treeBtnClick({ type: 'tender', id: record.id })}><SvgIcon iconClass="plus" fontSize="12"></SvgIcon><span>新建标段</span></div></Menu.Item>
+                <Menu.Item key="3"><div className= "menu-item" onClick={() => treeBtnClick({ type: 'tender', id: record.id })}><SvgIcon type="xxh-plus" style={{ fontSize: 12 }}></SvgIcon><span>新建标段</span></div></Menu.Item>
                 :
                 <Menu.Item key="3">
                   <Tooltip placement="left" title="标段无法与文件夹同层">
-                    <div className= "menu-item text-muted"><SvgIcon iconClass="plus" fontSize="12"></SvgIcon><span>新建标段</span></div>
+                    <div className= "menu-item text-muted"><SvgIcon type="xxh-plus" style={{ fontSize: 12 }}></SvgIcon><span>新建标段</span></div>
                   </Tooltip></Menu.Item>
                 : ''
               }
               {
                 record.isfolder ? !record.isBid ?
-                <Menu.Item key="4"><div className="menu-item" onClick={() => treeBtnClick({ type : 'folder', id: record.id })}><SvgIcon iconClass="folder" fontSize="12"></SvgIcon><span>新建子文件夹</span></div></Menu.Item>
+                <Menu.Item key="4"><div className="menu-item" onClick={() => treeBtnClick({ type : 'folder', id: record.id })}><SvgIcon type="xxh-folders" style={{ fontSize: 12 }}></SvgIcon><span>新建子文件夹</span></div></Menu.Item>
                 :
                 <Menu.Item key="4">
                   <Tooltip placement="left" title="文件夹无法与标段同层">
-                    <div className="menu-item text-muted"><SvgIcon iconClass="folder" fontSize="12"></SvgIcon><span>新建子文件夹</span></div>
+                    <div className="menu-item text-muted"><SvgIcon type="xxh-folders" style={{ fontSize: 12 }}></SvgIcon><span>新建子文件夹</span></div>
                   </Tooltip>
                 </Menu.Item>
                 : ''
@@ -127,7 +127,7 @@ const Tender: React.FC<{}> = () =>{
           )
         }} trigger={[ 'click' ]}>
           <span>
-            <SvgIcon iconClass="align-center" fill="#007bff" fontSize="12"></SvgIcon>
+          <SvgIcon type="xxh-align-justify" style={{ fontSize: 12, color: "#007bff" }}></SvgIcon>
             <CaretDownOutlined style={{ fontSize: "12px", color: "#007bff" }}/>
           </span>
         </Dropdown>

src/router/routes.ts

@@ -22,7 +22,7 @@ export const routeConfig: RouteModel[] = [
         auth: [ 'USER', 'ADMIN' ],
         defaultChildRoute: true, //是否作为默认子路由
         meta: {
-          icon: 'chalkboard',
+          icon: 'xxh-chalkboard',
           title: '待办事项',
           isTop: true,
           sort: 1
@@ -33,7 +33,7 @@ export const routeConfig: RouteModel[] = [
         component: AsyncModuleLoader(() => import('@/pages/Contract')),
         auth: [ 'USER', 'ADMIN' ],
         meta: {
-          icon: 'cogs',
+          icon: 'xxh-book-open',
           title: '合同管理',
           isTop: true,
           sort: 2
@@ -87,7 +87,7 @@ export const routeConfig: RouteModel[] = [
         component: AsyncModuleLoader(() => import('@/pages/Safe')),
         auth: [ 'USER', 'ADMIN' ],
         meta: {
-          icon: 'user-cog',
+          icon: 'xxh-toolbox',
           title: '安全巡检',
           isTop: true,
           sort: 3
@@ -98,7 +98,7 @@ export const routeConfig: RouteModel[] = [
         component: AsyncModuleLoader(() => import('@/pages/Quality')),
         auth: [ 'USER', 'ADMIN' ],
         meta: {
-          icon: 'toolbox',
+          icon: 'xxh-users-cog',
           title: '质量巡检',
           isTop: true,
           sort: 4
@@ -109,7 +109,7 @@ export const routeConfig: RouteModel[] = [
         component: AsyncModuleLoader(() => import('@/pages/Management')),
         auth: [ 'ADMIN' ],
         meta: {
-          icon: 'cogs',
+          icon: 'xxh-cogs',
           title: '项目设置',
           isTop: false
         },

src/utils/common/request.ts

@@ -1,9 +1,9 @@
 /**
  * 网络请求配置
  */
+import { userStore } from '@/store/mobx'
 import { PendingType, ResponseData } from '@/types/request'
 import CONSTS from '@/utils/consts'
-import history from '@/utils/history'
 import { storage } from '@/utils/util'
 import { message } from 'antd'
 import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
@@ -59,7 +59,8 @@ service.interceptors.response.use(
       message.error(JSON.stringify(data.msg))
       switch (data.code) {
         case 1:
-          history.push('/login')
+          userStore.logout()
+          // history.push('/login')
           break
         default:
           break