refactor: init

.cz-config.js

+'use strict'
+// https://github.com/leonardoanalista/cz-customizable/blob/master/cz-config-EXAMPLE.js
+module.exports = {
+  types: [
+    { value: 'feat', name: 'feat: 新功能' },
+    { value: 'fix', name: 'fix: 修复' },
+    { value: 'docs', name: 'docs: 文档注释' },
+    { value: 'style', name: 'style: 代码格式(不影响代码运行的变动)' },
+    { value: 'refactor', name: 'refactor: 重构(既不增加新功能, 也不是修复 bug)' },
+    { value: 'perf', name: 'perf: 性能优化' },
+    { value: 'test', name: 'test: 增加测试' },
+    { value: 'chore', name: 'chore: 构建过程或辅助工具变动' },
+    { value: 'revert', name: 'revert: 回退' },
+    { value: 'build', name: 'build: 打包' },
+  ],
+  // override the messages, defaults are as follows
+  messages: {
+    type: '请选择提交类型:',
+    // scope: '请选择文件修改范围(可选):',
+    // used if allowCustomScopes is true
+    customScope: '请输入修改范围(可选):',
+    subject: '请简要描述提交(必填):',
+    body: '请输入详细描述(可选, 待优化去除, 跳过即可):',
+    // breaking: 'List any BREAKING CHANGES(optional):\n',
+    footer: '请输入要关闭的issue(待优化去除, 跳过即可):',
+    confirmCommit: '确认使用以上信息提交?(y/n/e/h)'
+  },
+  allowCustomScopes: true,
+  // allowBreakingChanges: ['feat', 'fix'],
+  skipQuestions: ['body', 'footer'],
+  // limit subject length, commitlint 默认是72
+  subjectLimit: 72
+}

commitlint.config.js

+module.exports = {
+  extends: ['cz']
+}

config-overrides.js

+const { override, addLessLoader, fixBabelImports } = require('customize-cra');
+
+module.exports = override(
+  fixBabelImports('import', {
+    libraryName: 'antd',
+    libraryDirectory: 'es',
+    style: true,
+  }),
+  addLessLoader({
+    lessOptions: {
+      javascriptEnabled: true,
+    }
+  }),
+)

package.json

@@ -10,20 +10,34 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/react-router-dom": "^5.1.5",
+    "babel-plugin-import": "^1.13.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "typescript": "~3.7.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "genlog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-customizable"
+    }
+  },
+  "husky": {
+    "hooks": {
+      "commit-config": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -35,5 +49,17 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^8.3.5",
+    "antd": "^4.3.1",
+    "commitlint-config-cz": "^0.13.1",
+    "conventional-changelog": "^3.1.21",
+    "customize-cra": "^1.0.0",
+    "cz-customizable": "^6.2.0",
+    "husky": "^4.2.5",
+    "less": "^3.11.2",
+    "less-loader": "^6.1.0",
+    "react-app-rewired": "^2.1.6"
   }
 }

src/App.tsx

-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { FC } from 'react';
+import { HashRouter as Router, Route } from 'react-router-dom';
+import PageLayout from './layouts/PageLayout';
+import Login from './pages/Login';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
+const App:FC = () => (
+  <Router>
+    <Route>
+      <Route path="/login" extra component={Login} />
+      <PageLayout />
+    </Route>
+  </Router>
+);
 
 export default App;

src/index.tsx

@@ -5,9 +5,7 @@ import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <App />,
   document.getElementById('root')
 );
 

src/layouts/PageLayout.less

+.logo {
+  width: 120px;
+  height: 31px;
+  background: rgba(255, 255, 255, 0.3);
+  margin: 16px 28px 16px 0;
+  float: left;
+}
\ No newline at end of file

src/layouts/PageLayout.tsx

+import React, { FC } from 'react';
+import { Layout, Menu, Breadcrumb } from 'antd';
+import {
+  Link,
+  Switch,
+  withRouter,
+  RouteComponentProps,
+  Route,
+} from 'react-router-dom';
+
+import routes from '../router';
+import './PageLayout.less';
+
+const { Item } = Menu;
+const { Header, Content, Sider } = Layout;
+
+interface PageLayoutProp {}
+const PageLayout:FC<PageLayoutProp & RouteComponentProps> = () => (
+  <Layout>
+    <Header className="header">
+      <div className="logo" />
+    </Header>
+    <Layout>
+      <Sider width={200} className="site-layout-background">
+        <Menu
+          mode="inline"
+          defaultSelectedKeys={['SystemSetting']}
+          style={{ height: '100%', borderRight: 0 }}
+        >
+          {routes.map(route => (
+            <Item key={route.key}>
+              <Link to={route.path}>
+                <span>{route.name}</span>
+              </Link>
+            </Item>
+          ))}
+        </Menu>
+      </Sider>
+      <Layout style={{ padding: '0 24px 24px' }}>
+        <Breadcrumb style={{ margin: '16px 0' }}>
+          <Breadcrumb.Item>Home</Breadcrumb.Item>
+          <Breadcrumb.Item>List</Breadcrumb.Item>
+          <Breadcrumb.Item>App</Breadcrumb.Item>
+        </Breadcrumb>
+        <Content
+          className="site-layout-background"
+          style={{
+            padding: 24,
+            margin: 0,
+            minHeight: 280,
+          }}
+        >
+          <Switch>
+            {routes.map(route => (
+              <Route
+                key={route.key}
+                path={route.path}
+                component={route.component}
+              />
+            ))}
+          </Switch>
+        </Content>
+      </Layout>
+    </Layout>
+  </Layout>
+)
+
+export default withRouter(PageLayout);

src/pages/AppSetting/index.tsx

+import React, { FC } from 'react';
+
+interface AppSettingProp {}
+
+const AppSetting: FC<AppSettingProp> = () => (<div>AppSetting</div>)
+
+export default AppSetting;

src/pages/Login/index.tsx

+import React, { FC } from 'react';
+
+interface LoginProp {}
+
+const Login: FC<LoginProp> = () => (<div>Login</div>)
+
+export default Login;

src/pages/MenuManage/index.tsx

+import React, { FC } from 'react';
+
+interface MenuManageProp {}
+
+const MenuManage: FC<MenuManageProp> = () => (<div>MenuManage</div>)
+
+export default MenuManage;

src/pages/SystemSetting/index.tsx

+import React, { FC } from 'react';
+
+interface SystemSettingProp {}
+
+const SystemSetting: FC<SystemSettingProp> = () => (<div>SystemSetting</div>)
+
+export default SystemSetting;

src/router/index.tsx

+import { RouteComponentProps } from 'react-router-dom';
+
+import SystemSetting from '../pages/SystemSetting';
+import MenuManage from '../pages/MenuManage';
+import AppSetting from '../pages/AppSetting';
+
+export interface RouteListProp {
+  name: string
+  key: string
+  path: string
+  icon?: string
+  redirect?: string
+  children?: RouteListProp
+  component?:
+    | React.ComponentType<RouteComponentProps<any>>
+    | React.ComponentType<any>
+  meta?: {
+    role: string[]
+  }
+}
+
+const routes: RouteListProp[] = [
+  {
+    name: '系统设置',
+    key: 'SystemSetting',
+    path: 'system-setting',
+    component: SystemSetting
+  },
+  {
+    name: '菜单管理',
+    key: 'MenuManage',
+    path: 'menu-manage',
+    component: MenuManage
+  },
+  {
+    name: '应用设置',
+    key: 'AppSetting',
+    path: 'app-setting',
+    component: AppSetting
+  }
+]
+
+export default routes;