修复(hook): 修改hook

2022-05-26 16:24:15 +08:00 · 2022-05-26 16:24:15 +08:00 · 9d6340c83e
commit 9d6340c83e
parent cd2e8824e0
24 changed files with 335 additions and 244 deletions
--- a/.commitlint.js
+++ b/.commitlint.js
@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["@nicecode/commit-lint"],
+};
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,3 @@
+build/
+dist/
+.umi
--- 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
+  }
 };
--- a/.prettierrc.js
+++ 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'
+};
--- 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',
  },
--- 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"
+    }
 }
--- 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",
--- 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();
--- 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 (
-    <UserAvatar name="admin">
+    <>
      <div>个人中心</div>
      <div>退出登录</div>
-    </UserAvatar>
+    </>
  );
-};
+}

 export default User;
--- 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;
--- 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 (
    <Button
      className={classnames('g-basic-layout-header-breadcrumb-item', className)}
@ -39,7 +39,7 @@ const RootItem: React.FC<ButtonProps> = ({ className, ...rest }) => (
    onClick={() => history.push('/')}
    {...rest}
  >
-    <HomeFilled />
+    <HomeOutlined />
  </Button>
 );

--- 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);
+    }
 }
--- 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<IBasicLayout> = ({ children, ...rest }: any) => {
  const iconMap = {
-    EntranceOutlined: <EntranceOutlined />,
+    EnterOutlined: <EnterOutlined />,
  };

  // 带子菜单的一级导航
@ -52,13 +57,13 @@ const BasicLayout: React.FC = ({ children, ...rest }) => {
  };

  // 用户信息
-  const renderUserAvatar = () => <User />;
+  // const renderUserAvatar = () => <User />;

  return (
    <ProLayout
      className="g-basic-layout"
-      logo="https://fe-cloud.uni-ubi.com/image/1625038486292-logo-r.png?x-oss-process=img/q/80"
-      title="Uni-Ubi"
+      logo="http://jzx-h5.oss-cn-hangzhou.aliyuncs.com/static/pill.png?x-oss-process=img/q/80"
+      title="nicecode"
      siderWidth={180}
      fixedHeader
      fixSiderbar
@ -66,7 +71,7 @@ const BasicLayout: React.FC = ({ children, ...rest }) => {
      subMenuItemRender={renderSubMenuItem}
      menuItemRender={renderMenuItem}
      headerContentRender={renderHeaderContent}
-      rightContentRender={renderUserAvatar}
+      // rightContentRender={renderUserAvatar}
      {...rest}
    >
      {children}
--- 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<IBlankLayout> = ({ children }) => (<>{children}</>);

 export default BlankLayout;
--- 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 (
    <div className="g-window-layout-header">
      <div
        className="g-window-layout-header-logo"
        onClick={() => history.push('/')}
-      >  
+      >
        <Image
          src={require('../../assets/images/logo.png')}
          alt="logo"
@ -28,6 +28,6 @@ const Header = () => {
      </div>
    </div>
  );
-};
+}

 export default Header;
--- 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;
-    }
-  }
 }
--- 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<IWindowLayout> = ({ children }) => {
  return (
    <div className="g-window-layout">
      <div className="g-window-layout-header-wrapper">
--- 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);
 }
--- 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 (
    <div>
-      <h1 className={styles.title}>index</h1>
+      <h1 className={styles.title}>welcome! there is nicecode!</h1>
    </div>
  );
-};
+}
--- a/src/styles/index.less
+++ b/src/styles/index.less
@ -1 +1 @@
-@import "./var.less";
+@import './var.less';
--- 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;
+    }
 }
--- 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<SecurityWrapperProps> = ({
--- 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"]
 }
--- 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'