feat: improve component naming

Jairwin-L · Apr 11, 2024 · 77816f2 · 77816f2
1 parent 5276617
commit 77816f2
Show file tree

Hide file tree

Showing 13 changed files with 167 additions and 164 deletions.
diff --git a/README.md b/README.md
@@ -8,8 +8,8 @@ yarn add less-loader style-loader css-loader -D
 
 ## TODO
 
-- [ ] 完成 webpack 升级[进行中]
-- [ ] 增加代码规范检测[进行中]
+- [x] 完成 webpack 升级
+- [x] 增加代码规范检测
 - [ ] 代码重构
 
 ## FAQ

diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
     "@types/react-router-dom": "^5.3.3",
     "animate.css": "^4.1.1",
     "antd": "^4.24.16",
+    "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
     "flyio": "^0.6.14",
     "loadsh": "^0.0.4",
@@ -88,6 +89,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@commitlint/cli": "^19.2.1",
+    "@types/node": "^20.12.7",
     "@types/webpack-env": "^1.18.4",
     "autoprefixer": "^9.8.8",
     "babel-loader": "^8.3.0",
@@ -97,7 +99,7 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "build-hash-webpack-plugin": "^1.0.4",
-    "clean-webpack-plugin": "^3.0.0",
+    "clean-webpack-plugin": "^4.0.0",
     "commitlint-config-ali": "^1.1.0",
     "cross-env": "^7.0.3",
     "css-cleanup-webpack-plugin": "^1.0.2",
@@ -108,7 +110,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^5.2.1",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
     "html-webpack-externals-plugin": "^3.8.0",
     "html-webpack-plugin": "^4.5.2",
     "husky": "^8.0.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/index.html b/public/index.html
@@ -10,13 +10,13 @@
     <meta name="renderer" content="webkit" />
     <meta name="Author" content="Jairwin" />
     <meta name="Keywords" content="React,Webpack,cli,脚手架,react脚手架" />
-    <meta name="Description" content="React-Custom-Cli" />
+    <meta name="Description" content="react-cli" />
     <link rel="icon" href="jairwin.ico" />
-    <title>React-Custom-Cli</title>
+    <title>react-cli</title>
   </head>
   <body>
     <noscript>
-      <strong>React-Custom-Cli</strong>
+      <strong>react-cli</strong>
     </noscript>
     <div id="app"></div>
   </body>

diff --git a/src/app.tsx b/src/app.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
+import 'animate.css';
 import { hot } from 'react-hot-loader';
+import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
 import loadable from './utils/loadable';
-import 'animate.css';
 // 公共模块
 const DefaultLayout = loadable(() => import('./containers/layout'));
 
@@ -11,16 +10,18 @@ const NotFound = loadable(() => import('./pages/auth/404'));
 const ServerError = loadable(() => import('./pages/auth/500'));
 const Login = loadable(() => import('./pages/login'));
 
-const App = (): JSX.Element => (
-  <BrowserRouter>
-    <Switch>
-      <Route path="/" exact component={Login} />
-      <Route exact component={DefaultLayout} />
-      <Route path="/500" exact component={ServerError} />
-      <Route path="/404" exact component={NotFound} />
-      <Redirect to="/main" />
-    </Switch>
-  </BrowserRouter>
-);
+function App() {
+  return (
+    <BrowserRouter>
+      <Switch>
+        <Route path="/" exact component={Login} />
+        <Route exact component={DefaultLayout} />
+        <Route path="/500" exact component={ServerError} />
+        <Route path="/404" exact component={NotFound} />
+        <Redirect to="/main" />
+      </Switch>
+    </BrowserRouter>
+  );
+}
 
 export default hot(module)(App);
diff --git a/src/assets/css/app.less b/src/assets/css/app.less
@@ -41,23 +41,23 @@ p {
   margin-bottom: 0 !important;
 }
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-::-webkit-scrollbar-track-piece {
-  background: #c9c9c9;
+  width: 0;
+  height: 0;
 }
+// ::-webkit-scrollbar-track-piece {
+//   background: #c9c9c9;
+// }
 /* 滚动条的内层滑轨背景颜色 */
-::-webkit-scrollbar-track {
-  background: @white;
-}
+// ::-webkit-scrollbar-track {
+//   background: @white;
+// }
 /* 滚动条的外层滑轨背景颜色 */
-::-webkit-scrollbar-thumb {
-  background: -webkit-linear-gradient(#ff82a9, #ffc0cb);
-}
+// ::-webkit-scrollbar-thumb {
+//   background: -webkit-linear-gradient(#ff82a9, #ffc0cb);
+// }
 /* 滚动条的内层滑块颜色 */
-::-webkit-scrollbar-button {
-  background: @white;
-  display: none;
-}
+// ::-webkit-scrollbar-button {
+//   background: @white;
+//   display: none;
+// }
 /* 滑轨两头的监听按钮颜色 */
diff --git a/src/assets/css/layout.less b/src/assets/css/layout.less
@@ -1,15 +1,19 @@
+.layout-wrap {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+}
+.layout-wrap-aside {
+  grid-template-columns: 80px 1fr;
+}
 .layout_container {
-  margin: 16px;
-  flex: auto;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
   .ant-breadcrumb {
     margin-bottom: 16px;
   }
 }
 .aside {
-  position: fixed;
-  left: 0;
   height: 100vh;
-  overflow-y: auto;
   .logo {
     height: 80px;
     border-radius: 50%;
@@ -23,8 +27,9 @@
 }
 .header {
   background: @white;
-  padding: 0 16px;
+  padding: 16px;
   display: flex;
+  align-items: center;
   justify-content: space-between;
   .left_container {
     cursor: pointer;
@@ -42,7 +47,7 @@
   }
 }
 .base_container {
-  background: @white;
+  background: #f5f5f5;
   padding: 16px;
   &:last-child {
     margin-bottom: 0;

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
-import Href from '../components/href';
 import '@css/components/footer.less';
+import Href from '../components/href';
 
-export default (): JSX.Element => (
-  <footer>
-    <Href hrefLink="https://jairwin.cn" hrefText="https://jairwin.cn" />
-    <span className="space_between">&copy;{new Date().getFullYear()}</span>
-    <span>By Jairwin</span>
-  </footer>
-);
+export default function Footer() {
+  return (
+    <footer>
+      <Href hrefLink="https://jairwin.cn" hrefText="https://jairwin.cn" />
+      <span className="space_between">&copy;{new Date().getFullYear()}</span>
+      <span>By Jairwin</span>
+    </footer>
+  );
+}
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,17 +1,15 @@
 import { LogoutOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
-import { Avatar, Dropdown, Layout, Menu } from 'antd';
+import { Avatar, Dropdown, Menu } from 'antd';
 import { useHistory } from 'react-router-dom';
 
-const { Header } = Layout;
-
 interface Props {
   onMenu: () => void;
   avatar: string;
   menuToggle: boolean;
   loginOut: () => void;
 }
 
-export default (props: Props) => {
+export default function Header(props: Props) {
   const history = useHistory();
   const { onMenu, avatar, menuToggle, loginOut } = props;
   const menu = (
@@ -32,9 +30,9 @@ export default (props: Props) => {
     </Menu>
   );
   return (
-    <Header className="header">
-      <div className="left_container">
-        <div onClick={onMenu}>{menuToggle ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}</div>
+    <header className="header">
+      <div className="left_container" onClick={onMenu}>
+        {menuToggle ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
       </div>
       <div className="right_container">
         <Dropdown overlay={menu} overlayStyle={{ width: '150px' }}>
@@ -43,6 +41,6 @@ export default (props: Props) => {
           </div>
         </Dropdown>
       </div>
-    </Header>
+    </header>
   );
-};
+}
diff --git a/src/components/loading.tsx b/src/components/loading.tsx
@@ -1,12 +1,11 @@
-import React from 'react';
-import { Spin } from 'antd';
 import '@css/components/loading.less';
+import { Spin } from 'antd';
 
-export default (): JSX.Element => {
+export default function Loading() {
   return (
     <div className="loading_container">
       <Spin size="large" />
       <div className="loading_text">Loading……</div>
     </div>
   );
-};
+}
diff --git a/src/containers/layout.tsx b/src/containers/layout.tsx
@@ -1,15 +1,16 @@
-import React, { useState, useReducer, useEffect } from 'react';
-import { Route, Switch, Redirect, useHistory } from 'react-router-dom';
-import { Layout, BackTop, message, Modal } from 'antd';
-import { MenuItem } from '../typings/menu';
-import { Routes } from '../typings/route';
-import routes from '../routes';
-import avatarPng from '@img/jairwin.png';
-import menuList from './menu';
 import '@css/layout.less';
+import avatarPng from '@img/jairwin.png';
+import { BackTop, Modal, message } from 'antd';
+import clsx from 'clsx';
+import { useEffect, useReducer, useState } from 'react';
+import { Redirect, Route, Switch, useHistory } from 'react-router-dom';
+import Footer from '../components/footer';
 import Header from '../components/header';
+import routes from '../routes';
+import { MenuItem } from '../typings/menu';
+import { Routes } from '../typings/route';
 import Aside from './aside';
-import Footer from '../components/footer';
+import menuList from './menu';
 
 const token = sessionStorage.getItem('token');
 
@@ -22,7 +23,7 @@ const reducer = (state: { menuToggle: boolean }, action: { type: 'menuToggle' })
   }
 };
 
-export default (): JSX.Element => {
+export default function LayoutPage() {
   const history = useHistory();
   const [menu, setMenu] = useState<MenuItem[]>();
   const [loginFlag, setLoginFlag] = useState<boolean>(false);
@@ -47,21 +48,19 @@ export default (): JSX.Element => {
   return (
     <>
       <BackTop />
-      <Aside menuToggle={state.menuToggle} menu={menu} />
-      <Layout
-        style={{
-          marginLeft: state.menuToggle ? '80px' : '200px',
-          minHeight: '100vh',
-        }}
+      <div
+        className={clsx('layout-wrap', {
+          'layout-wrap-aside': state.menuToggle,
+        })}
       >
-        <Header
-          menuToggle={state.menuToggle}
-          onMenu={onMenu}
-          avatar={avatarPng}
-          loginOut={loginOut}
-          history={history}
-        />
+        <Aside menuToggle={state.menuToggle} menu={menu} />
         <div className="layout_container">
+          <Header
+            menuToggle={state.menuToggle}
+            onMenu={onMenu}
+            avatar={avatarPng}
+            loginOut={loginOut}
+          />
           <Switch>
             {routes.map((item: Routes) => {
               return (
@@ -75,9 +74,9 @@ export default (): JSX.Element => {
             })}
             <Redirect to="/auth/404" />
           </Switch>
+          <Footer />
         </div>
-        <Footer />
-      </Layout>
+      </div>
       <Modal
         title="提示"
         centered
@@ -91,4 +90,4 @@ export default (): JSX.Element => {
       </Modal>
     </>
   );
-};
+}
diff --git a/src/hook/use-win-size.tsx b/src/hook/use-win-size.tsx
@@ -1,12 +1,12 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 interface Size {
   width: number;
   height: number;
 }
 
 // 自定义hook：useWinSize
-export default (): Size => {
+export default function useWinSize(): Size {
   const [size, setSize] = useState<Size>({
     width: document.documentElement.clientWidth,
     height: document.documentElement.clientHeight,
@@ -22,4 +22,4 @@ export default (): Size => {
     return () => window.removeEventListener('resize', onResize);
   }, [onResize]);
   return size;
-};
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -20,6 +20,7 @@
       "@/*": ["./src/*"]
     }
   },
+  "types": ["node"],
   "include": [
     "./src",
     "config/webpack.config.js",