From 9d6340c83ec8ce7e4fa965357d02341b4ae7d2a8 Mon Sep 17 00:00:00 2001 From: dev <710328466@qq.com> Date: Thu, 26 May 2022 16:24:15 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D(hook):=20=E4=BF=AE=E6=94=B9h?= =?UTF-8?q?ook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .commitlint.js | 3 + .eslintignore | 3 + .eslintrc.js | 36 +++++- .prettierrc.js | 37 ++++++ .umirc.ts | 4 +- .vscode/settings.json | 71 +++++----- package.json | 27 +++- src/app.ts | 3 - src/components/User/index.tsx | 10 +- src/interfaces/base.ts | 2 + src/layouts/BasicLayout/BreadcrumbItem.tsx | 6 +- src/layouts/BasicLayout/index.less | 144 ++++++++++----------- src/layouts/BasicLayout/index.tsx | 21 +-- src/layouts/BlankLayout/index.tsx | 6 +- src/layouts/WindowLayout/Header.tsx | 6 +- src/layouts/WindowLayout/index.less | 108 ++++++++-------- src/layouts/WindowLayout/index.tsx | 6 +- src/pages/index.less | 4 +- src/pages/index.tsx | 6 +- src/styles/index.less | 2 +- src/styles/reset.less | 16 +-- src/wrappers/SecurityWrapper.tsx | 1 + tsconfig.json | 56 ++++---- typings.d.ts | 1 + 24 files changed, 335 insertions(+), 244 deletions(-) create mode 100644 .commitlint.js create mode 100644 .eslintignore create mode 100644 .prettierrc.js diff --git a/.commitlint.js b/.commitlint.js new file mode 100644 index 0000000..d18256e --- /dev/null +++ b/.commitlint.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ["@nicecode/commit-lint"], +}; diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..f89bd2c --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +build/ +dist/ +.umi diff --git a/.eslintrc.js b/.eslintrc.js index 15992f1..4e5553f 100755 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,4 +1,36 @@ module.exports = { - extends: [require.resolve('uniubi-lint/typescript/react')], - rules: {}, + extends: [ + "alloy", + "alloy/react", + "alloy/typescript" + ], + plugins: [ + "@typescript-eslint/eslint-plugin" + ], + parser: "@typescript-eslint/parser", + parserOptions: { + ecmaVersion: 2020, + }, + "env": { + // 您的环境变量（包含多个预定义的全局变量） + // Your environments (which contains several predefined global variables) + // + // browser: true, + // node: true, + // mocha: true, + // jest: true, + // jquery: true + }, + "globals": { + // 您的全局变量（设置为 false 表示它不允许被重新赋值） + // Your global variables (setting to false means it's not allowed to be reassigned) + // + // myGlobal: false + }, + "rules": { + // 自定义您的规则 + // Customize your rules + "react/jsx-no-useless-fragment": 0, + "@typescript-eslint/no-require-imports": 0 + } }; diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..6938b38 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,37 @@ +module.exports = { + // 一行最多 100 字符 + printWidth: 100, + // 使用 4 个空格缩进 + tabWidth: 4, + // 不使用缩进符，而使用空格 + useTabs: false, + // 行尾需要有分号 + semi: true, + // 使用单引号 + singleQuote: true, + // 对象的 key 仅在必要时用引号 + quoteProps: 'as-needed', + // jsx 不使用单引号，而使用双引号 + jsxSingleQuote: false, + // 末尾不需要逗号 + trailingComma: 'none', + // 大括号内的首尾需要空格 + bracketSpacing: true, + // jsx 标签的反尖括号需要换行 + jsxBracketSameLine: false, + // 箭头函数，只有一个参数的时候，也需要括号 + arrowParens: 'always', + // 每个文件格式化的范围是文件的全部内容 + rangeStart: 0, + rangeEnd: Infinity, + // 不需要写文件开头的 @prettier + requirePragma: false, + // 不需要自动在文件开头插入 @prettier + insertPragma: false, + // 使用默认的折行标准 + proseWrap: 'preserve', + // 根据显示样式决定 html 要不要折行 + htmlWhitespaceSensitivity: 'css', + // 换行符使用 lf + endOfLine: 'lf' +}; diff --git a/.umirc.ts b/.umirc.ts index 1cc3917..84721e2 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -1,14 +1,14 @@ import { defineConfig } from 'umi'; -import Icon from './public/favicon.ico' export default defineConfig({ - favicon: Icon, + favicon: '#', hash: true, dva: { immer: true, hmr: false, }, webpack5: {}, + mfsu: {}, dynamicImport: { loading: '@/components/PageLoading/index', }, diff --git a/.vscode/settings.json b/.vscode/settings.json index 37ad7a2..9d7f8a0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,40 +1,35 @@ { - "editor.codeActionsOnSave": { - "source.fixAll.eslint": true - }, - "eslint.validate": [ - "javascript", - "react", - "typescript", - "typescriptreact", - "vue" - ], - "editor.formatOnSave": true, - "[typescriptreact]": { - "editor.defaultFormatter": null - }, - "[javascript]": { - "editor.defaultFormatter": null - }, - "[typescript]": { - "editor.defaultFormatter": null - }, - "[javascriptreact]": { - "editor.defaultFormatter": null - }, - "[json]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "[less]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "[scss]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "[css]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "[jsonc]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - } + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "eslint.validate": ["javascript", "react", "typescript", "typescriptreact", "vue"], + "[typescriptreact]": { + "editor.defaultFormatter": null + }, + "[javascript]": { + "editor.defaultFormatter": null + }, + "[typescript]": { + "editor.defaultFormatter": null + }, + "[javascriptreact]": { + "editor.defaultFormatter": null + }, + "[json]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[less]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[scss]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[css]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[jsonc]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + } } diff --git a/package.json b/package.json index a70d435..4d500c2 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,18 @@ "lint:fix": "eslint 'src/**/*.{js,jsx,tsx,ts}' --fix", "prettier": "prettier --write '**/*.{less,css,md,json}'", "test": "umi-test", - "test:coverage": "umi-test --coverage" + "test:coverage": "umi-test --coverage", + "cz": "git add . && git cz" + }, + "config": { + "commitizen": { + "path": "@nicecode/commit" + } + }, + "husky": { + "hooks": { + "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" + } }, "gitHooks": { "pre-commit": "tsc --noEmit && lint-staged" @@ -27,26 +38,30 @@ ] }, "dependencies": { + "@ant-design/icons": "^4.7.0", "@ant-design/pro-layout": "^6.15.4", - "@materials/user-avatar": "^1.0.1", - "@ant-design/icons-react": "^2.0.10", - "antd": "^100.0.1", + "antd": "^4.20.6", "axios": "^0.19.2", "classnames": "^2.2.6", "js-cookie": "^2.2.1", - "poseidon-web-monitoring": "^1.1.3", "react": "^17.0.1", "react-dom": "^17.0.1", "umi": "^3.5.15" }, "devDependencies": { + "@nicecode/commit-lint": "^0.1.2", "@types/classnames": "^2.2.10", + "@typescript-eslint/eslint-plugin": "^5.26.0", + "@typescript-eslint/parser": "^5.26.0", "@umijs/preset-react": "1.x", "@umijs/test": "^3.0.16", "babel-plugin-transform-remove-console": "^6.9.4", + "commitlint": "^17.0.1", "cross-env": "^7.0.2", - "end-type-to-front-type": "^1.2.1", "eslint": "^7.16.0", + "eslint-config-alloy": "^4.5.1", + "eslint-plugin-react": "^7.30.0", + "husky": "^8.0.1", "lint-staged": "^10.0.7", "prettier": "^1.19.1", "typescript": "^4.1.3", diff --git a/src/app.ts b/src/app.ts index 8d8011c..ce755d6 100644 --- a/src/app.ts +++ b/src/app.ts @@ -1,5 +1,2 @@ -import { enableES5 } from 'immer'; import '@/styles/index.less'; import '@/styles/reset.less'; - -enableES5(); \ No newline at end of file diff --git a/src/components/User/index.tsx b/src/components/User/index.tsx index 5b8fee6..cac2a4f 100644 --- a/src/components/User/index.tsx +++ b/src/components/User/index.tsx @@ -1,12 +1,10 @@ -import UserAvatar from '@materials/user-avatar'; - -const User = () => { +function User() { return ( - + <>
个人中心
退出登录
- + ); -}; +} export default User; diff --git a/src/interfaces/base.ts b/src/interfaces/base.ts index 7526fc2..a7d1abc 100644 --- a/src/interfaces/base.ts +++ b/src/interfaces/base.ts @@ -1,3 +1,5 @@ +import React from 'react'; + export interface BaseProps { className?: string; style?: React.CSSProperties; diff --git a/src/layouts/BasicLayout/BreadcrumbItem.tsx b/src/layouts/BasicLayout/BreadcrumbItem.tsx index 5b61d7b..b270fa5 100644 --- a/src/layouts/BasicLayout/BreadcrumbItem.tsx +++ b/src/layouts/BasicLayout/BreadcrumbItem.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { history } from 'umi'; import { Button } from 'antd'; import { ButtonProps } from 'antd/lib/button'; -import { HomeFilled } from '@ant-design/icons-react'; +import { HomeOutlined } from '@ant-design/icons'; import classnames from 'classnames'; import './index.less'; @@ -15,7 +15,7 @@ const BreadcrumbItem = ({ children, className, ...rest -}: BreadcrumbItemProps): JSX.Element => { +}: BreadcrumbItemProps) => { return ( ); diff --git a/src/layouts/BasicLayout/index.less b/src/layouts/BasicLayout/index.less index 87bd379..d132fb3 100644 --- a/src/layouts/BasicLayout/index.less +++ b/src/layouts/BasicLayout/index.less @@ -1,84 +1,84 @@ -@import "../../styles/var.less"; +@import '../../styles/var.less'; .g-basic-layout { - &-header { - display: flex; + &-header { + display: flex; - &-breadcrumb { - .g-basic-layout-header-breadcrumb-item { - color: @M4; - padding: 0; + &-breadcrumb { + .g-basic-layout-header-breadcrumb-item { + color: @M4; + padding: 0; - &:active { - color: @M4; + &:active { + color: @M4; + } + + &:hover { + color: @S3; + background-color: @M7; + } + + &:focus { + background-color: @M7; + } + + &-active { + color: @M2; + + &[disabled], + &[disabled]:hover, + &[disabled]:focus, + &[disabled]:active { + color: @M2; + cursor: default; + } + } + } + + .g-basic-layout-header-breadcrumb-divider { + color: @M4; + margin: 0 @Sp-3; + } } - - &:hover { - color: @S3; - background-color: @M7; - } - - &:focus { - background-color: @M7; - } - - &-active { - color: @M2; - - &[disabled], - &[disabled]:hover, - &[disabled]:focus, - &[disabled]:active { - color: @M2; - cursor: default; - } - } - } - - .g-basic-layout-header-breadcrumb-divider { - color: @M4; - margin: 0 @Sp-3; - } - } - } - - .ant-pro-sider-logo img { - width: 32px; - height: 32px; - } - - .ant-pro-global-header { - background-color: @M7; - box-shadow: none; - } - - .ant-pro-basicLayout-content { - margin: @Sp-5 @Sp-8; - } - - .ant-page-header-heading { - &-left { - margin: 0; } - &-title { - font-size: @Fs-4; - line-height: @Lh-4; + .ant-pro-sider-logo img { + width: 32px; + height: 32px; } - } - .ant-layout { - background-color: @M7; - } + .ant-pro-global-header { + background-color: @M7; + box-shadow: none; + } - .ant-layout-sider, - .ant-menu.ant-menu-dark, - .ant-menu-dark .ant-menu-sub, - .ant-menu.ant-menu-dark .ant-menu-sub { - background-color: @S1; - } + .ant-pro-basicLayout-content { + margin: @Sp-5 @Sp-8; + } - .ant-layout-content { - min-height: calc(100vh - 72px); - } + .ant-page-header-heading { + &-left { + margin: 0; + } + + &-title { + font-size: @Fs-4; + line-height: @Lh-4; + } + } + + .ant-layout { + background-color: @M7; + } + + .ant-layout-sider, + .ant-menu.ant-menu-dark, + .ant-menu-dark .ant-menu-sub, + .ant-menu.ant-menu-dark .ant-menu-sub { + background-color: @S1; + } + + .ant-layout-content { + min-height: calc(100vh - 72px); + } } diff --git a/src/layouts/BasicLayout/index.tsx b/src/layouts/BasicLayout/index.tsx index d5a2bde..13daaf4 100644 --- a/src/layouts/BasicLayout/index.tsx +++ b/src/layouts/BasicLayout/index.tsx @@ -1,15 +1,20 @@ import React from 'react'; import { history, Link } from 'umi'; -import { EntranceOutlined } from '@ant-design/icons-react'; +import { EnterOutlined } from '@ant-design/icons'; import ProLayout, { MenuDataItem } from '@ant-design/pro-layout'; import { HeaderViewProps } from '@ant-design/pro-layout/lib/Header'; -import User from '@/components/User'; +// import User from '@/components/User'; import Breadcrumb from './Breadcrumb'; import './index.less'; -const BasicLayout: React.FC = ({ children, ...rest }) => { + +interface IBasicLayout { + children: React.ReactNode +} + +const BasicLayout: React.FC = ({ children, ...rest }: any) => { const iconMap = { - EntranceOutlined: , + EnterOutlined: , }; // 带子菜单的一级导航 @@ -52,13 +57,13 @@ const BasicLayout: React.FC = ({ children, ...rest }) => { }; // 用户信息 - const renderUserAvatar = () => ; + // const renderUserAvatar = () => ; return ( { subMenuItemRender={renderSubMenuItem} menuItemRender={renderMenuItem} headerContentRender={renderHeaderContent} - rightContentRender={renderUserAvatar} + // rightContentRender={renderUserAvatar} {...rest} > {children} diff --git a/src/layouts/BlankLayout/index.tsx b/src/layouts/BlankLayout/index.tsx index 76aeaed..eae930c 100644 --- a/src/layouts/BlankLayout/index.tsx +++ b/src/layouts/BlankLayout/index.tsx @@ -1,5 +1,9 @@ import React from 'react'; -const BlankLayout: React.FC = ({ children }) => <>{children}; +interface IBlankLayout { + children: React.ReactNode +} + +const BlankLayout: React.FC = ({ children }) => (<>{children}); export default BlankLayout; diff --git a/src/layouts/WindowLayout/Header.tsx b/src/layouts/WindowLayout/Header.tsx index 852dc62..70d1e05 100644 --- a/src/layouts/WindowLayout/Header.tsx +++ b/src/layouts/WindowLayout/Header.tsx @@ -3,13 +3,13 @@ import { Image, Divider } from 'antd'; import User from '@/components/User'; import './index.less'; -const Header = () => { +function Header() { return (
history.push('/')} - > + > logo {
); -}; +} export default Header; diff --git a/src/layouts/WindowLayout/index.less b/src/layouts/WindowLayout/index.less index 21b53ed..6626e6b 100644 --- a/src/layouts/WindowLayout/index.less +++ b/src/layouts/WindowLayout/index.less @@ -1,65 +1,65 @@ -@import "../../styles/var.less"; +@import '../../styles/var.less'; @headerHeader: 64px; .g-window-layout { - display: flex; - flex-direction: column; - min-width: 1200px; - min-height: 100vh; - background-color: @M7; - - &-header { display: flex; - justify-content: space-between; - align-items: center; - height: @headerHeader; - width: 1200px; - margin: 0 auto; + flex-direction: column; + min-width: 1200px; + min-height: 100vh; + background-color: @M7; - &-wrapper { - background-color: #000000; + &-header { + display: flex; + justify-content: space-between; + align-items: center; + height: @headerHeader; + width: 1200px; + margin: 0 auto; + + &-wrapper { + background-color: #000000; + } + + &-logo { + display: flex; + justify-content: center; + align-items: center; + color: #ffffff; + cursor: pointer; + + &-divider.ant-divider { + border-color: #ffffff; + height: 12px; + margin: 0 @Sp-5; + } + + &-text { + font-size: @Fs-3; + } + } + + &-actions { + color: #fff; + } } - &-logo { - display: flex; - justify-content: center; - align-items: center; - color: #ffffff; - cursor: pointer; + &-content { + flex: 1; + width: 1200px; + min-height: 600px; + margin: 0 auto; + padding: @Sp-8; + background-color: #ffffff; + box-shadow: @Sh-2; + border-radius: @Ra-2; - &-divider.ant-divider { - border-color: #ffffff; - height: 12px; - margin: 0 @Sp-5; - } - - &-text { - font-size: @Fs-3; - } + &-wrapper { + display: flex; + flex-direction: column; + flex: 1; + min-height: 500px; + padding: @Sp-8 0; + } } - - &-actions { - color: #fff; - } - } - - &-content { - flex: 1; - width: 1200px; - min-height: 600px; - margin: 0 auto; - padding: @Sp-8; - background-color: #ffffff; - box-shadow: @Sh-2; - border-radius: @Ra-2; - - &-wrapper { - display: flex; - flex-direction: column; - flex: 1; - min-height: 500px; - padding: @Sp-8 0; - } - } } diff --git a/src/layouts/WindowLayout/index.tsx b/src/layouts/WindowLayout/index.tsx index 182599a..c53fda7 100644 --- a/src/layouts/WindowLayout/index.tsx +++ b/src/layouts/WindowLayout/index.tsx @@ -2,7 +2,11 @@ import React from 'react'; import Header from './Header'; import './index.less'; -const WindowLayout: React.FC = ({ children }) => { +interface IWindowLayout { + children: React.ReactNode +} + +const WindowLayout: React.FC = ({ children }) => { return (
diff --git a/src/pages/index.less b/src/pages/index.less index 586302b..d7ac292 100644 --- a/src/pages/index.less +++ b/src/pages/index.less @@ -1,3 +1,5 @@ .title { - background: rgb(121, 242, 157); + margin: 100px auto; + text-align: center; + // background: rgb(121, 242, 157); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index cc86886..102dc56 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,9 +1,9 @@ import styles from './index.less'; -export default () => { +export default function () { return (
-

index

+

welcome! there is nicecode!

); -}; +} diff --git a/src/styles/index.less b/src/styles/index.less index 4193fae..5b4f350 100644 --- a/src/styles/index.less +++ b/src/styles/index.less @@ -1 +1 @@ -@import "./var.less"; +@import './var.less'; diff --git a/src/styles/reset.less b/src/styles/reset.less index 014fb2f..546489c 100644 --- a/src/styles/reset.less +++ b/src/styles/reset.less @@ -1,15 +1,15 @@ -@import "var.less"; +@import 'var.less'; .ant-picker { - width: 100%; + width: 100%; } .ant-pagination { - display: flex; - justify-content: flex-end; - width: 100%; + display: flex; + justify-content: flex-end; + width: 100%; - &-total-text { - flex: 1; - } + &-total-text { + flex: 1; + } } diff --git a/src/wrappers/SecurityWrapper.tsx b/src/wrappers/SecurityWrapper.tsx index 1a88773..4dca388 100644 --- a/src/wrappers/SecurityWrapper.tsx +++ b/src/wrappers/SecurityWrapper.tsx @@ -5,6 +5,7 @@ import { ConnectState } from '@/models/connect'; export interface SecurityWrapperProps { token: string; dispatch: Dispatch; + children: React.ReactNode } const SecurityWrapper: React.FC = ({ diff --git a/tsconfig.json b/tsconfig.json index 4c9e695..0826fd4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,34 +1,26 @@ { - "compilerOptions": { - "outDir": "build/dist", - "module": "esnext", - "target": "esnext", - "lib": ["esnext", "dom"], - "sourceMap": true, - "baseUrl": ".", - "jsx": "react-jsx", - "allowSyntheticDefaultImports": true, - "moduleResolution": "node", - "forceConsistentCasingInFileNames": true, - "noImplicitReturns": true, - "suppressImplicitAnyIndexErrors": true, - "noUnusedLocals": true, - "allowJs": true, - "skipLibCheck": true, - "experimentalDecorators": true, - "strict": true, - "paths": { - "@/*": ["./src/*"], - "@@/*": ["./src/.umi/*"] - } - }, - "exclude": [ - "node_modules", - "build", - "dist", - "scripts", - "src/.umi/*", - "webpack", - "jest" - ] + "compilerOptions": { + "outDir": "build/dist", + "module": "esnext", + "target": "esnext", + "lib": ["esnext", "dom"], + "sourceMap": true, + "baseUrl": ".", + "jsx": "react-jsx", + "allowSyntheticDefaultImports": true, + "moduleResolution": "node", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true, + "allowJs": true, + "skipLibCheck": true, + "experimentalDecorators": true, + "strict": true, + "paths": { + "@/*": ["./src/*"], + "@@/*": ["./src/.umi/*"] + } + }, + "exclude": ["node_modules", "build", "dist", "scripts", "src/.umi/*", "webpack", "jest"] } diff --git a/typings.d.ts b/typings.d.ts index 26fbdfa..367c061 100644 --- a/typings.d.ts +++ b/typings.d.ts @@ -3,3 +3,4 @@ declare module '*.less'; declare module '*.png'; declare module '*.jpeg'; declare module '*.jpg'; +declare module 'immer'