工作记录备忘-antd 去掉主题切换功能

原创
2020/06/12 14:33
阅读数 786

由于要部署到内网 ,会引用外部链接(https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js)的主题切换功能需要去掉。

修改 config-overrides.js 和index.tsx,注释掉   AntDesignThemePlugin

config-overrides.js

const { override, addLessLoader, addWebpackAlias, fixBabelImports, addWebpackPlugin } = require('customize-cra')
const path = require('path')
// const darkThemeVars = require('antd/dist/dark-theme')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
//const AntDesignThemePlugin = require('antd-theme-webpack-plugin')

const options = {
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './src/styles'),
  varFile: path.join(__dirname, './src/styles/var.less'),
  mainLessFile: path.join(__dirname, './src/styles/index.less'),
  themeVariables: ['@primary-color'],
  indexFileName: 'index.html',
  generateOnce: false,
}

const resolve = dir => path.join(__dirname, '.', dir)

const rewiredSourceMap = () => (config) => {
  config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false
  return config
}

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true
  }),
  addLessLoader({
    modifyVars: {
      // hack: `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`,
      // ...darkThemeVars,
      '@primary-color': '#13c2c2'
    },
    javascriptEnabled: true,
  }),
  addWebpackAlias({
    '~': resolve('src')
  }),
  //addWebpackPlugin(
    // new BundleAnalyzerPlugin(),
   // new AntDesignThemePlugin(options)
  //),
  rewiredSourceMap()
)

index.tsx

import React, { FC, useEffect, Suspense, useCallback, useState } from 'react'
import { Layout, Drawer, Typography } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import './index.less'
import { AppState } from '~/stores'
import { setGlobalItem } from '~/actions/global.action'
import MenuComponent from './menu'
import HeaderComponent from './header'
import { getGlobalState } from '~/utils/getGloabal'
import TagsView from './tagView'
import SuspendFallbackLoading from './suspendFallbackLoading'
import { getMenuList } from '~/api/layout.api'
import { MenuList, MenuChild } from '~/interface/layout/menu.interface'
import { setUserItem } from '~/actions/user.action'
//import ThemeSwitch from './themeSwitch'
import { useGuide } from '../guide/useGuide'
import { Outlet, useLocation, useNavigate } from 'react-router'

const { Text } = Typography
const { Sider, Content, Footer } = Layout
const WIDTH = 992

const LayoutPage: FC = () => {
  const [menuList, setMenuList] = useState<MenuList>([])
  const { device, collapsed, newUser } = useSelector((state: AppState) => state.globalReducer)
  const isMobile = device === 'MOBILE'
  const dispatch = useDispatch()
  const { driverStart } = useGuide()
  const location = useLocation()
  const navigate = useNavigate()

  useEffect(() => {
    if (location.pathname === '/') {
      navigate('/dashboard')
    }
  }, [navigate, location])

  const toggle = () => {
    dispatch(
      setGlobalItem({
        collapsed: !collapsed
      })
    )
  }

  const initMenuListAll = (menu: MenuList) => {
    const MenuListAll: MenuChild[] = []
    menu.forEach(m => {
      if (!m?.children?.length) {
        MenuListAll.push(m)
      } else {
        m?.children.forEach(mu => {
          MenuListAll.push(mu)
        })
      }
    })
    return MenuListAll
  }

  const fetchMenuList = useCallback(async () => {
    const { status, result } = await getMenuList()
    if (status) {
      setMenuList(result)
      dispatch(
        setUserItem({
          menuList: initMenuListAll(result)
        })
      )
    }
  }, [dispatch])

  useEffect(() => {
    fetchMenuList()
  }, [fetchMenuList])

  useEffect(() => {
    window.onresize = () => {
      const { device } = getGlobalState()
      const rect = document.body.getBoundingClientRect()
      const needCollapse = rect.width < WIDTH
      dispatch(
        setGlobalItem({
          device,
          collapsed: needCollapse
        })
      )
    }
  }, [dispatch])

  useEffect(() => {
    newUser && driverStart()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [newUser])

  return (
    <Layout className="layout-page">
      <HeaderComponent collapsed={collapsed} toggle={toggle} />
      <Layout>
        {!isMobile ? (
          <Sider className="layout-page-sider" trigger={null} collapsible collapsed={collapsed} breakpoint="md">
            <MenuComponent menuList={menuList} />
          </Sider>
        ) : (
          <Drawer
            width="200"
            placement="left"
            bodyStyle={{ padding: 0, height: '100%' }}
            closable={false}
            onClose={toggle}
            visible={!collapsed}
          >
            <MenuComponent menuList={menuList} />
          </Drawer>
        )}
        <Content className="layout-page-content">
          <TagsView />
          <Suspense fallback={<SuspendFallbackLoading />}>
            <Outlet />
          </Suspense>
          {/*
           <ThemeSwitch />
           */}
        </Content>
      </Layout>
     
    </Layout>
  )
}

export default LayoutPage

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部