feat: Header组件完善、添加antd定值主题配置

config/webpack.config.js

@@ -51,6 +51,8 @@ const cssRegex = /\.css$/;
 const cssModuleRegex = /\.module\.css$/;
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
+const lessRegex = /\.less$/;
+const lessModuleRegex = /\.module\.less$/;
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
@@ -112,20 +114,33 @@ module.exports = function(webpackEnv) {
       },
     ].filter(Boolean);
     if (preProcessor) {
-      loaders.push(
-        {
-          loader: require.resolve('resolve-url-loader'),
-          options: {
-            sourceMap: isEnvProduction && shouldUseSourceMap,
-          },
-        },
-        {
-          loader: require.resolve(preProcessor),
+      // loaders.push(
+      //   {
+      //     loader: require.resolve('resolve-url-loader'),
+      //     options: {
+      //       sourceMap: isEnvProduction && shouldUseSourceMap,
+      //     },
+      //   },
+      //   {
+      //     loader: require.resolve(preProcessor),
+      //     options: {
+      //       sourceMap: true,
+      //     },
+      //   }
+      // );
+      let loader = require.resolve(preProcessor)
+      if (preProcessor === "less-loader") {
+        loader = {
+          loader,
           options: {
-            sourceMap: true,
+            lessOptions: {
+              modifyVars: { '@primary-color': '#007bff', '@font-size-base': '12px' },
+              javascriptEnabled: true,
+            },
           },
         }
-      );
+      }
+      loaders.push(loader);
     }
     return loaders;
   };
@@ -498,6 +513,32 @@ module.exports = function(webpackEnv) {
                 'sass-loader'
               ),
             },
+            // Opt-in support for SASS (using .scss or .sass extensions).
+            // By default we support SASS Modules with the
+            // extensions .module.scss or .module.sass
+            {
+              test: lessRegex,
+              exclude: lessModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 2,
+                },
+                'less-loader'
+              )
+            },
+            // Adds support for CSS Modules, but using SASS
+            // using the extension .module.scss or .module.sass
+            {
+              test: lessModuleRegex,
+              use: getStyleLoaders(
+                    {
+                      importLoaders: 2,
+                      modules: true,
+                      getLocalIdent: getCSSModuleLocalIdent,
+                    },
+                  'less-loader'
+                ),
+            },
             // "file" loader makes sure those assets get served by WebpackDevServer.
             // When you `import` an asset, you get its (virtual) filename.
             // In production, they would get copied to the `build` folder.

package.json

@@ -79,7 +79,8 @@
         "import",
         {
           "libraryName": "antd",
-          "style": "css"
+          "libraryDirectory": "es",
+          "style": true
         }
       ],
       [
@@ -136,6 +137,8 @@
     "jest-environment-jsdom-fourteen": "1.0.1",
     "jest-resolve": "24.9.0",
     "jest-watch-typeahead": "0.4.2",
+    "less": "^3.12.2",
+    "less-loader": "^7.0.2",
     "mini-css-extract-plugin": "0.9.0",
     "node-sass": "^4.14.1",
     "optimize-css-assets-webpack-plugin": "5.0.3",

src/assets/css/common.scss

@@ -222,3 +222,29 @@
 .pi-text-right {
   text-align: right;
 }
+
+// 公共头部
+.pi-header {
+  @extend .pi-width-100P;
+  background: linear-gradient(#ccc, 2%, #ffffff);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid #ddd;
+
+  .pi-header-left {
+    @extend .pi-text-left;
+  }
+
+  .pi-header-center {
+    @extend .pi-text-center;
+  }
+
+  .pi-header-right {
+    @extend .pi-text-right;
+  }
+}
+
+.content-wrap {
+  display: flex;
+  flex-direction: column;
+  width: calc(100vw - 55px - 120px);
+}

src/components/Header/index.tsx

@@ -5,20 +5,32 @@ interface iHeaderProps {
 
 
 const Header: React.FC<PropsWithChildren<iHeaderProps>> = props => {
-
-  const renderChild = (child: any) => { // 控制内容的分发
-    if (child?.props?.left) {
-        return <div key="left">{child}</div>
-    } else if (child?.props?.right) {
-        return <div key="right">{child}</div>
-    } else if (child?.props?.center) {
-        return <div key="center">{child}</div>
+  const renderChild = (child: any, idx?: number) => { // 控制内容的分发
+    let positionClass: string = ''
+    switch (child?.props?.position) {
+      case 'left':
+        positionClass = 'pi-header-left'
+        break
+      case 'center':
+        positionClass = 'pi-header-center'
+        break
+      case 'right':
+        positionClass = 'pi-header-right'
+        break
+      default:
+        break
     }
+    return (
+      <div key={idx} className={positionClass}>
+        {child}
+      </div>
+    )
   }
   return (
-    <div className="pi-height-34 pi-lh-30 pi-mg-right-20 pi-justify-between pi-align-center">
-      {Array.isArray(props.children) ?
-        props.children?.map((child) => renderChild(child)) : props.children && renderChild(props.children)}
+    <div className="pi-height-34 pi-lh-30 pi-pd-right-20 pi-pd-left-15 pi-justify-between pi-align-center pi-header">
+      <span>{props.title}</span>
+      {props.children && Array.isArray(props.children) ?
+        props.children.map((child, index) => renderChild(child, index)) : props.children && renderChild(props.children)}
     </div>
   )
 }

src/components/Header/slot.tsx

@@ -0,0 +1,32 @@
+import React, { PropsWithChildren } from 'react'
+declare type PositionType = 'left' | 'center' | 'right' | undefined
+interface iSlotProps {
+  position: PositionType
+}
+
+const Slot:React.FC<PropsWithChildren<iSlotProps>> = (props) => {
+  // console.log(props)
+
+  // let positionClass: string = ''
+  // switch (props.position) {
+  //   case 'left':
+  //     positionClass = 'pi-header-left'
+  //     break
+  //   case 'center':
+  //     positionClass = 'pi-header-center'
+  //     break
+  //   case 'right':
+  //     positionClass = 'pi-header-right'
+  //     break
+  //   default:
+  //     break
+  // }
+  return (
+    <>
+      {props.children && Array.isArray(props.children) ?
+        props.children.map(child => child) : props.children}
+    </>
+  )
+}
+
+export default Slot

src/pages/Management/Tender/index.tsx

@@ -1,9 +1,19 @@
+import Header from '@/components/Header'
+import Slot from '@/components/Header/slot'
+import { FolderOutlined } from '@ant-design/icons'
+import { Button } from 'antd'
 import React from 'react'
+export default function Tender(props: any) {
+  console.log(props)
 
-export default function Tender() {
   return (
-    <div>
-      <h1>标段管理</h1>
+    <div className="content-wrap">
+      <Header title="标段管理">
+        <Slot position="right">
+          <Button type="primary" size="small" icon={<FolderOutlined />}>新建文件夹</Button>
+        </Slot>
+      </Header>
     </div>
   )
 }
+

src/router/routes.ts

@@ -102,7 +102,7 @@ export const routesConfig: RouteModol[] = [
             }
           },
           {
-            path: 'tender-data',
+            path: 'tender',
             component: AsyncModuleLoader(() => import('@/pages/Management/Tender')),
             auth: true,
             menuConfig: {