style: 样式调整

config/config.js

@@ -1,4 +1,8 @@
 // https://umijs.org/config/
+
+const CompressionWebpackPlugin = require('compression-webpack-plugin')
+const prodGzipList = ['js', 'css']
+
 import { defineConfig } from 'umi'
 import defaultSettings from './defaultSettings'
 import proxy from './proxy'
@@ -44,9 +48,28 @@ export default defineConfig({
   fastRefresh: {},
   extraBabelPlugins: [
     '@babel/plugin-proposal-nullish-coalescing-operator',
-    '@babel/plugin-proposal-optional-chaining'
+    '@babel/plugin-proposal-optional-chaining',
+    [
+      'import',
+      {
+        libraryName: '@icon-park/react',
+        libraryDirectory: 'es/all',
+        camel2DashComponentName: false
+      }
+    ]
   ],
-  chainWebpack(config) {
+  chainWebpack(config, { env }) {
     config.plugin('windicss').use(windicss)
+    if (env === 'production') {
+      config.plugin('compression-webpack-plugin').use(
+        new CompressionWebpackPlugin({
+          // filename: 文件名称，这里我们不设置，让它保持和未压缩的文件同一个名称
+          algorithm: 'gzip', // 指定生成gzip格式
+          test: new RegExp('\\.(' + prodGzipList.join('|') + ')$'), // 匹配哪些格式文件需要压缩
+          threshold: 1024, //对超过10k的数据进行压缩
+          minRatio: 0.6 // 压缩比例，值为0 ~ 1
+        })
+      )
+    }
   }
 })

package.json

@@ -71,6 +71,7 @@
     "use-merge-value": "^1.0.1"
   },
   "devDependencies": {
+    "compression-webpack-plugin": "4.0.1",
     "@ant-design/pro-cli": "^1.0.18",
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@types/classnames": "^2.2.7",
@@ -90,6 +91,7 @@
     "@umijs/preset-react": "1.8.12",
     "@umijs/yorkie": "^2.0.3",
     "agent-base": "^6.0.2",
+    "babel-plugin-import": "^1.13.3",
     "carlo": "^0.9.46",
     "chalk": "^4.0.0",
     "cross-env": "^7.0.0",

src/components/SvgIcon/index.jsx

@@ -1,12 +1,10 @@
-import { createFromIconfontCN } from '@ant-design/icons'
-import setting from '../../../config/defaultSettings'
-import '@icon-park/react/styles/index.less'
-import Icon from '@icon-park/react/es/all'
-import React from 'react'
-
-const IconFont = createFromIconfontCN({
-  scriptUrl: setting.iconfontUrl
-})
-export default IconFont
-
-export const IconPark = props => <Icon {...props} />
+import { createFromIconfontCN } from '@ant-design/icons'
+import setting from '../../../config/defaultSettings'
+// import Icon from '@icon-park/react/es/all'
+
+const IconFont = createFromIconfontCN({
+  scriptUrl: setting.iconfontUrl
+})
+export default IconFont
+
+// export const IconPark = props => <Icon {...props} />

src/layouts/BasicLayout.jsx

@@ -12,8 +12,8 @@ import Authorized from '@/utils/Authorized'
 import RightContent from '@/components/GlobalHeader/RightContent'
 import logo from '../assets/logo.svg'
 import styles from './BasicLayout.less'
-import '@icon-park/react/styles/index.less'
-import { IconPark } from '@/components/SvgIcon'
+// import '@icon-park/react/styles/index.less'
+// import { IconPark } from '@/components/SvgIcon'
 import BasicModal from '@/components/Modal'
 import { BasicDrawer } from '@/components/Modal'
 import { matchPath } from 'umi'
@@ -29,9 +29,9 @@ const menuDataRender = menuList =>
       ...item,
       children: item.children ? menuDataRender(item.children) : undefined
     }
-    if (item.icon) {
-      localItem.icon = <IconPark type={item.icon} size="16" className="anticon anticon-form" />
-    }
+    // if (item.icon) {
+    //   localItem.icon = <IconPark type={item.icon} size="16" className="anticon anticon-form" />
+    // }
     return Authorized.check(item.authority, localItem, null)
   })
 

src/pages/Customer/Company/components/PersonLabel/index.scss

@@ -57,8 +57,8 @@
       }
     }
     .statusIcon {
-      width: 12px;
-      height: 12px;
+      @apply w-12px h-12px inline-block;
+
       margin-right: 0.5rem;
       line-height: 12px;
       &::after {

src/pages/Customer/Company/index.jsx

@@ -188,7 +188,7 @@ const Company = props => {
           {record.tagIds.map(item => (
             <Tooltip title={personTags.find(i => i.id === item)?.name} key={record.id + item}>
               <span
-                className="zh-circle-icon zh-mg-right-3"
+                className="w-12px h-12px inline-block rounded-1/2 zh-mg-right-3"
                 style={{ backgroundColor: personTagColorMap[item] }}
               />
             </Tooltip>
@@ -224,7 +224,7 @@ const Company = props => {
             <Tooltip title={teamTags.find(i => i.id === item)?.name} key={record.id + item}>
               <span
                 key={record.id + item}
-                className="zh-square-icon zh-mg-right-3"
+                className="w-12px h-12px inline-block zh-mg-right-3"
                 style={{ backgroundColor: teamTagColorMap[item] }}
               />
             </Tooltip>
@@ -365,8 +365,8 @@ const Company = props => {
 
   const renderTableAlert = ({ selectedRowKeys }) => {
     return (
-      <div className="zh-flex-row">
-        <div className="zh-mg-right-5">
+      <div className="flex flex-row">
+        <div className="mr-5px">
           <PersonLabel
             tagType={TagTypeEnum.PERSONTAG}
             tagColumn={TagDataTypeEnum.COMPANY}
@@ -377,7 +377,7 @@ const Company = props => {
                 {tagState.tagIds.map(item => (
                   <span
                     key={item}
-                    className="zh-circle-icon zh-mg-right-3"
+                    className="w-12px h-12px inline-block rounded-1/2 mr-3px"
                     style={{ backgroundColor: personTagColorMap[item] }}
                   />
                 ))}
@@ -391,7 +391,7 @@ const Company = props => {
             )}
           </PersonLabel>
         </div>
-        <div className="zh-mg-right-5">
+        <div className="mr-5px">
           <PersonLabel
             tagType={TagTypeEnum.TEAMTAG}
             tagColumn={TagDataTypeEnum.COMPANY}
@@ -402,7 +402,7 @@ const Company = props => {
                 {tagState.tagCooperationIds.map(item => (
                   <span
                     key={item}
-                    className="zh-square-icon zh-mg-right-3"
+                    className="w-12px h-12px inline-block zh-mg-right-3"
                     style={{ backgroundColor: teamTagColorMap[item] }}
                   />
                 ))}

src/pages/Customer/Contact/index.jsx

@@ -515,7 +515,7 @@ const Contact = props => {
                 {tagState.tagIds.map(item => (
                   <span
                     key={item}
-                    className="zh-circle-icon mr-3"
+                    className="w-12px h-12px inline-block rounded-1/2 mr-3px"
                     style={{ backgroundColor: personTagColorMap[item] }}
                   />
                 ))}
@@ -540,7 +540,7 @@ const Contact = props => {
                 {tagState.tagCooperationIds.map(item => (
                   <span
                     key={item}
-                    className="zh-square-icon mr-3"
+                    className="w-12px h-12px inline-block mr-3px"
                     style={{ backgroundColor: teamTagColorMap[item] }}
                   />
                 ))}

src/pages/Customer/Test/index.jsx

@@ -1,9 +1,14 @@
 import React from 'react'
 
 import { connect } from 'dva'
+import { IconPark } from '@/components/SvgIcon'
 
 const Test = () => {
-  return <div />
+  return (
+    <div>
+      <IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
+    </div>
+  )
 }
 
 export default connect(({ customer }) => ({