layout 布局开发

jaro-rokan · Jan 6, 2020 · d9d7b85 · d9d7b85
1 parent 45f7681
commit d9d7b85
Show file tree

Hide file tree

Showing 47 changed files with 818 additions and 208 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,7 +3,8 @@
   "typescript.updateImportsOnFileMove.enabled": "always",
   "typescript.preferences.importModuleSpecifier": "auto",
   "emmet.showAbbreviationSuggestions": false,
-  "emmet.showExpandedAbbreviation": "never",
+  // "emmet.showExpandedAbbreviation": "never",
   "eslint.validate": ["typescript", "typescriptreact"],
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "prettier.printWidth": 120
 }
diff --git a/config-overrides.js b/config-overrides.js
@@ -1,38 +1,31 @@
-const {
-  override,
-  addLessLoader,
-  addWebpackAlias,
-  useEslintRc,
-  fixBabelImports
-} = require('customize-cra')
-var path = require('path')
-var AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
+const { override, addLessLoader, addWebpackAlias, useEslintRc, fixBabelImports } = require('customize-cra')
+const path = require('path')
+const darkTheme = require('@ant-design/dark-theme').default
 
-const rewiredSourceMap = () => config => {
-  config.devtool =
-    config.mode === 'development' ? 'cheap-module-source-map' : false
-  return config
-}
+const resolve = dir => path.join(__dirname, '.', dir)
 
-const rewiredDayJs = () => config => {
-  config.plugins = [...config.plugins, new AntdDayjsWebpackPlugin()]
+const rewiredSourceMap = () => config => {
+  config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false
   return config
 }
 
 module.exports = override(
   useEslintRc(),
   addLessLoader({
     javascriptEnabled: true,
-    modifyVars: { '@primary-color': '#1DA57A' }
+    modifyVars: {
+      ...darkTheme,
+      '@primary-color': '#13c2c2',
+      '@dark-color': '#141414'
+    }
   }),
   addWebpackAlias({
-    '~': path.resolve(__dirname, '..', 'src')
+    '~': resolve('src')
   }),
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: true
   }),
-  rewiredSourceMap(),
-  rewiredDayJs()
+  rewiredSourceMap()
 )
diff --git a/package.json b/package.json
@@ -1,22 +1,21 @@
 {
-  "name": "react-admin",
+  "name": "react-antd-admin",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
     "antd": "^3.26.5",
-    "antd-dayjs-webpack-plugin": "^0.0.8",
     "axios": "^0.19.0",
-    "babel-plugin-import": "^1.13.0",
+    "mockjs": "^1.1.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-redux": "^7.1.3",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
     "styled-components": "^4.4.1",
     "typescript": "~3.7.2"
   },
@@ -41,10 +40,22 @@
     ]
   },
   "devDependencies": {
+    "@ant-design/dark-theme": "^1.0.3",
+    "@types/http-proxy-middleware": "^0.19.3",
+    "@types/jest": "^24.0.0",
+    "@types/mockjs": "^1.0.2",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "@types/react-redux": "^7.1.5",
+    "@types/react-router-dom": "^5.1.3",
     "@types/styled-components": "^4.4.1",
+    "babel-plugin-import": "^1.13.0",
     "customize-cra": "^0.9.1",
+    "http-proxy-middleware": "^0.20.0",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
-    "react-app-rewired": "^2.1.5"
+    "react-app-rewired": "^2.1.5",
+    "redux-devtools-extension": "^2.13.8"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>react-antd-admin</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.less b/src/App.less
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
+import React from 'react'
+import { render } from '@testing-library/react'
+import App from './App'
 
 test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+  const { getByText } = render(<App />)
+  const linkElement = getByText(/learn react/i)
+  expect(linkElement).toBeInTheDocument()
+})
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,28 +1,16 @@
 import React from 'react'
-import styled from 'styled-components'
-import './App.less'
-import { LayoutPage } from './pages/layout'
+import LayoutPage from './pages/layout'
+import { BrowserRouter, Switch, Route } from 'react-router-dom'
+import LoginPage from './pages/login'
 
-type Props = {
-  title?: string
-  content?: string
-}
-
-const Ap = styled.div`
-  justify-content: center;
-  display: block;
-`
-const P = styled(LayoutPage)`
-  color: inherit;
-`
-
-const App: React.FC<Props> = props => {
+const App: React.FC = () => {
   return (
-    <Ap className="App" style={{ height: '100%' }}>
-      <React.Suspense fallback={<div>1</div>}>
-        <P />
-      </React.Suspense>
-    </Ap>
+    <BrowserRouter>
+      <Switch>
+        <Route path="/login" component={LoginPage} />
+        <Route path="/" component={LayoutPage} />
+      </Switch>
+    </BrowserRouter>
   )
 }
 

diff --git a/src/actions/global.action.ts b/src/actions/global.action.ts
@@ -0,0 +1,34 @@
+import { Action } from 'redux'
+
+/** 用户设备 */
+enum DeviceList {
+  /** 手机 */
+  MOBILE = 'MOBILE',
+  /** 电脑 */
+  DESKTOP = 'DESKTOP'
+}
+
+export type Device = keyof typeof DeviceList
+
+export interface GlobalState {
+  /** 用户设备 */
+  device: Device
+
+  /** 菜单栏收起状态 */
+  collapsed: boolean
+}
+
+const SETGLOBALITEM = 'SETGLOBALITEM'
+
+type SETGLOBALITEM = typeof SETGLOBALITEM
+
+interface SetGloabalItem extends Action<SETGLOBALITEM> {
+  payload: Partial<GlobalState>
+}
+
+export const setGloabalItem = (payload: Partial<GlobalState>): SetGloabalItem => ({
+  type: 'SETGLOBALITEM',
+  payload
+})
+
+export type GlobalActions = SetGloabalItem
diff --git a/src/api/layout.api.ts b/src/api/layout.api.ts
@@ -0,0 +1,5 @@
+import { request } from './request'
+import { MenuList } from '../interface/layout/menu.interface'
+
+/** 获取菜单列表接口 */
+export const getMenuList = () => request<MenuList>('get', '/user/menu')
diff --git a/src/api/request.ts b/src/api/request.ts
@@ -0,0 +1,61 @@
+import axios from 'axios'
+import { message as $message } from 'antd'
+
+axios.defaults.timeout = 6000
+
+axios.interceptors.request.use(
+  config => {
+    return config
+  },
+  error => {
+    Promise.reject(error)
+  }
+)
+
+axios.interceptors.response.use(
+  config => {
+    if (config?.data?.message) {
+      // $message.success(config.data.message)
+    }
+    return config?.data
+  },
+  error => {
+    const errorMessage = '系统异常'
+
+    $message.error(errorMessage)
+    return {
+      code: -1,
+      message: errorMessage,
+      result: null
+    }
+  }
+)
+
+export type Response<T = any> = {
+  status: boolean
+  message: string
+  result: T
+}
+
+type Method = 'get' | 'post'
+
+export type MyResponse<T = any> = Promise<Response<T>>
+
+/**
+ *
+ * @param method - request methods
+ * @param url - request url
+ * @param data - request data or params
+ */
+export const request = <T = any>(method: Method, url: string, data?: any): MyResponse<T> => {
+  // const prefix = '/api'
+  const prefix = ''
+  url = prefix + url
+  if (method === 'post') {
+    return axios.post(url, data)
+  } else {
+    return axios.get(url, {
+      params: data
+    })
+  }
+}
diff --git a/src/api/user.api.ts b/src/api/user.api.ts
@@ -0,0 +1,5 @@
+import { request } from './request'
+import { LoginResult, LoginParams } from '../interface/user/login'
+
+/** 登录接口 */
+export const apiLogin = (data: LoginParams) => request<LoginResult>('get', '/user/login')
diff --git a/src/assets/logo/antd.svg b/src/assets/logo/antd.svg
diff --git a/src/assets/logo/react.svg b/src/assets/logo/react.svg
diff --git a/src/assets/menu/dashboard.svg b/src/assets/menu/dashboard.svg
diff --git a/src/assets/menu/guide.svg b/src/assets/menu/guide.svg
diff --git a/src/assets/menu/permission.svg b/src/assets/menu/permission.svg
diff --git a/src/hooks/useAsyncEffect.ts b/src/hooks/useAsyncEffect.ts
@@ -0,0 +1,17 @@
+import { useEffect } from 'react'
+
+type Callback = () => Promise<any>
+
+type Deps = readonly any[]
+
+/**
+ *
+ * @param callback callback
+ * @param deps dependences
+ */
+export default function useAsyncEffect(callback: Callback, deps: Deps = []) {
+  useEffect(() => {
+    callback().catch(e => console.log('useAsyncEffect error:', e))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps)
+}
diff --git a/src/index.less b/src/index.less