feat: done new UI

SolidZORO · Jul 2, 2020 · a39c982 · a39c982
1 parent 9a869c6
commit a39c982
Show file tree

Hide file tree

Showing 66 changed files with 1,644 additions and 851 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -51,6 +51,8 @@ module.exports = {
     'react/sort-comp': 0,
     'react/jsx-props-no-spreading': 0,
     'react/react-in-jsx-scope': 0,
+    'react/require-default-props': 0,
+    'react/no-unused-prop-types': 0,
     //
     // CSS
     'css-modules/no-unused-class': 0,

diff --git a/package.json b/package.json
@@ -57,26 +57,26 @@
     "@commitlint/config-lerna-scopes": "^9.0.1",
     "@types/eslint": "7.2.0",
     "@types/eslint-plugin-prettier": "^3.1.0",
-    "@types/jest": "^26.0.0",
+    "@types/jest": "^26.0.3",
     "@types/rimraf": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^3.4.0",
-    "@typescript-eslint/parser": "^3.4.0",
+    "@typescript-eslint/eslint-plugin": "^3.5.0",
+    "@typescript-eslint/parser": "^3.5.0",
     "babel-eslint": "^10.1.0",
     "codecov": "^3.7.0",
     "commitizen": "4.1.2",
     "cross-env": "^7.0.2",
     "cz-conventional-changelog": "3.2.0",
-    "eslint": "7.2.0",
+    "eslint": "7.3.1",
     "eslint-config-airbnb": "18.2.0",
     "eslint-config-airbnb-typescript": "^8.0.2",
     "eslint-config-prettier": "^6.11.0",
     "eslint-loader": "4.0.2",
     "eslint-plugin-css-modules": "2.11.0",
-    "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.4",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.5",
     "husky": "^4.2.5",
     "jest": "^26.1.0",
     "lerna": "^3.22.1",
@@ -88,7 +88,7 @@
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "4.1.0",
     "ts-jest": "26.1.1",
-    "ts-node-dev": "^1.0.0-pre.49",
+    "ts-node-dev": "^1.0.0-pre.50",
     "typescript": "3.9.5"
   }
 }
diff --git a/packages/leaa-api/package.json b/packages/leaa-api/package.json
@@ -50,7 +50,7 @@
     "@nestjs/common": "^7.2.0",
     "@nestjs/core": "^7.2.0",
     "@nestjs/jwt": "^7.0.0",
-    "@nestjs/passport": "^7.0.0",
+    "@nestjs/passport": "^7.1.0",
     "@nestjs/platform-express": "^7.2.0",
     "@nestjs/testing": "^7.2.0",
     "@nestjs/typeorm": "^7.1.0",
@@ -67,10 +67,10 @@
     "envalid": "^6.0.2",
     "express": "^4.17.1",
     "express-rate-limit": "^5.1.3",
-    "helmet": "^3.23.2",
+    "helmet": "^3.23.3",
     "html-to-text": "^5.1.1",
-    "i18next": "^19.5.1",
-    "i18next-http-middleware": "^2.1.2",
+    "i18next": "^19.5.2",
+    "i18next-http-middleware": "^3.0.1",
     "image-size": "^0.8.3",
     "ip": "^1.1.5",
     "jsondiffpatch": "^0.4.1",

diff --git a/packages/leaa-api/src/utils/attachment.util.ts b/packages/leaa-api/src/utils/attachment.util.ts
@@ -58,7 +58,7 @@ export const genUrlAt2x = (attachment: Attachment): string | null => {
 // robohash: a generated robot with different colors, faces, etc
 // blank: a transparent PNG image (border added to HTML below for demonstration purposes)
 export const GRAVATAR_AVATAR_TYPE = envConfig.GRAVATAR_TYPE || 'monsterid';
-export const GRAVATAR_AVATAR_PARAMS = `?s=160&d=${GRAVATAR_AVATAR_TYPE}`;
+export const GRAVATAR_AVATAR_PARAMS = `?s=280&d=${GRAVATAR_AVATAR_TYPE}`;
 
 export const transAvatarUrl = (path?: string | null): string | null => {
   if (path?.includes('gravatar.com')) return `${path}${GRAVATAR_AVATAR_PARAMS}`;

diff --git a/packages/leaa-dashboard/package.json b/packages/leaa-dashboard/package.json
@@ -34,21 +34,21 @@
   },
   "dependencies": {
     "@ant-design/icons": "4.2.1",
-    "@loadable/component": "^5.12.0",
+    "@loadable/component": "^5.13.0",
     "@nestjsx/crud-request": "^4.6.2",
     "@svgr/webpack": "^5.4.0",
-    "animated-scroll-to": "^2.0.7",
-    "antd": "4.3.5",
+    "animated-scroll-to": "^2.0.10",
+    "antd": "4.4.0",
     "axios": "^0.19.2",
     "classnames": "^2.2.6",
-    "copy-webpack-plugin": "^6.0.2",
+    "copy-webpack-plugin": "^6.0.3",
     "core-js": "3.6.5",
     "currency.js": "^1.2.2",
     "dotenv": "^8.2.0",
     "dotenv-webpack": "^1.8.0",
     "fingerprintjs": "^0.5.3",
     "history": "^4.10.1",
-    "i18next": "^19.5.1",
+    "i18next": "^19.5.2",
     "i18next-browser-languagedetector": "^5.0.0",
     "i18next-xhr-backend": "^3.2.2",
     "js-cookie": "^2.2.1",
@@ -73,23 +73,23 @@
     "react-router-dom": "5.2.0",
     "react-sortable-tree": "^2.7.1",
     "react-test-renderer": "16.13.1",
-    "react-use": "^15.3.0",
+    "react-use": "^15.3.2",
     "uuid": "^8.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.10.3",
-    "@babel/core": "7.10.3",
-    "@babel/plugin-proposal-class-properties": "7.10.1",
-    "@babel/plugin-proposal-decorators": "7.10.3",
-    "@babel/plugin-proposal-export-default-from": "7.10.1",
-    "@babel/plugin-proposal-object-rest-spread": "7.10.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.10.3",
+    "@babel/cli": "7.10.4",
+    "@babel/core": "7.10.4",
+    "@babel/plugin-proposal-class-properties": "7.10.4",
+    "@babel/plugin-proposal-decorators": "7.10.4",
+    "@babel/plugin-proposal-export-default-from": "7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "7.10.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-runtime": "^7.10.3",
-    "@babel/preset-env": "7.10.3",
-    "@babel/preset-react": "^7.10.1",
-    "@babel/preset-typescript": "7.10.1",
-    "@babel/runtime": "^7.10.3",
+    "@babel/plugin-transform-runtime": "^7.10.4",
+    "@babel/preset-env": "7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-typescript": "7.10.4",
+    "@babel/runtime": "^7.10.4",
     "@types/autoprefixer": "^9.7.2",
     "@types/babel__core": "7.1.9",
     "@types/babel__plugin-transform-runtime": "^7.9.0",
@@ -99,7 +99,7 @@
     "@types/clientjs": "^0.1.0",
     "@types/copy-webpack-plugin": "^6.0.0",
     "@types/core-js": "2.5.3",
-    "@types/dinero.js": "^1.6.4",
+    "@types/dinero.js": "^1.6.5",
     "@types/dotenv-webpack": "^1.8.0",
     "@types/draft-js": "^0.10.41",
     "@types/file-loader": "4.2.0",
@@ -117,7 +117,7 @@
     "@types/prettier": "^2.0.1",
     "@types/prop-types": "15.7.3",
     "@types/qs": "6.9.3",
-    "@types/react": "16.9.38",
+    "@types/react": "16.9.41",
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-css-modules": "4.6.2",
     "@types/react-dev-utils": "^9.0.4",
@@ -127,7 +127,7 @@
     "@types/react-test-renderer": "16.9.2",
     "@types/terser-webpack-plugin": "3.0.0",
     "@types/uuid": "^8.0.0",
-    "@types/webpack": "^4.41.17",
+    "@types/webpack": "^4.41.18",
     "@types/webpack-bundle-analyzer": "3.8.0",
     "@types/webpack-dev-server": "3.11.0",
     "@types/webpack-env": "1.15.2",
@@ -143,7 +143,7 @@
     "html-webpack-plugin": "^4.3.0",
     "ip": "^1.1.5",
     "less": "^3.11.3",
-    "less-loader": "^6.1.2",
+    "less-loader": "^6.1.3",
     "less-vars-to-js": "^1.3.0",
     "lint-staged": "^10.2.11",
     "lodash-webpack-plugin": "^0.11.5",

diff --git a/packages/leaa-dashboard/src/components/FilterIcon/FilterIcon.tsx b/packages/leaa-dashboard/src/components/FilterIcon/FilterIcon.tsx
@@ -14,6 +14,7 @@ interface IProps {
   onClose: (clearCondition: any) => void;
 }
 
+// TODO, clear bug
 export const FilterIcon = (props: IProps) => {
   const [showClose, setShowClose] = useState(false);
 
@@ -36,7 +37,7 @@ export const FilterIcon = (props: IProps) => {
 
       setShowClose(JSON.stringify(prevQueryObj) !== '{}');
     }
-  }, [props.crudQuery, props.clear]);
+  }, [props]);
 
   return showClose ? (
     <RiCloseCircleLine

diff --git a/packages/leaa-dashboard/src/components/FilterIcon/style.module.less b/packages/leaa-dashboard/src/components/FilterIcon/style.module.less
@@ -2,13 +2,15 @@
 
 .filter-bar-icon {
   margin-right: 2px;
-  font-size: 18px;
+  font-size: 24px;
   color: #999;
   opacity: 0.5;
+  cursor: pointer;
+  transition: opacity 0.3s;
 }
 
 .filter-bar-icon--show-close {
-  opacity: 0.7;
+  opacity: 0.5;
   transition: opacity 0.3s;
 
   &:hover {

diff --git a/packages/leaa-dashboard/src/components/IdTag/IdTag.tsx b/packages/leaa-dashboard/src/components/IdTag/IdTag.tsx
@@ -16,8 +16,16 @@ interface IProps {
   width?: number; // show id width
 }
 
+const DEFAULT_WIDTH = 4;
+
 export const IdTag = (props: IProps) => {
-  const idStr = typeof props.id === 'string' && props.width ? props.id.substr(0, props.width || 4) : props.id;
+  // if id, show all, if uuid, show 4
+  let idStr = `${props.id}`.includes('-') ? props.id.substr(0, DEFAULT_WIDTH) : props.id;
+
+  if (props.width && props.width !== DEFAULT_WIDTH && `${props.id}`.includes('-')) {
+    idStr = props.id.substr(0, props.width);
+  }
+
   const idInnerDom = (
     <div className={style['id-tag-inner']}>
       {props.icon}

diff --git a/packages/leaa-dashboard/src/components/PageCard/PageCard.tsx b/packages/leaa-dashboard/src/components/PageCard/PageCard.tsx
@@ -9,7 +9,7 @@ import { Link } from 'react-router-dom';
 
 import style from './style.module.less';
 
-declare type IPropTitle = null | '@LIST' | '@EDIT' | '@CREATE' | '@ITEM' | React.ReactNode;
+declare type IPropTitle = null | '@LIST' | '@UPDATE' | '@CREATE' | '@ITEM' | React.ReactNode;
 
 interface IProps {
   children: React.ReactNode;
@@ -38,10 +38,11 @@ export const PageCard = (props: IProps) => {
                 to={`${props.route?.path}/create`}
               >
                 <Button
+                  size="large"
                   shape="round"
                   type="ghost"
                   icon={<RiAddLine />}
-                  className={cx(style['page-card-create-button'])}
+                  className={cx(style['page-card-create-button'], 'g-page-card-create-button')}
                 >
                   {t('_lang:create')}
                 </Button>
@@ -52,7 +53,7 @@ export const PageCard = (props: IProps) => {
       );
 
     // Page 里面 title 还是该写什么写什么，不知道那天这里会出现 if 判断
-    if (_.isString(title) && ['@EDIT', '@CREATE', '@ITEM'].includes(title))
+    if (_.isString(title) && ['@UPDATE', '@CREATE', '@ITEM'].includes(title))
       return (
         <div className={style['title']}>
           <span>
@@ -71,7 +72,7 @@ export const PageCard = (props: IProps) => {
       })}
     >
       <div className={style['header']}>
-        {genTitlt(props.title)}
+        <div className={style['title-wrapper']}>{genTitlt(props.title)}</div>
 
         {props.extra && <div className={style['extra']}>{props.extra}</div>}
       </div>

diff --git a/packages/leaa-dashboard/src/components/PageCard/style.module.less b/packages/leaa-dashboard/src/components/PageCard/style.module.less
@@ -1,9 +1,37 @@
 @import '~@leaa/dashboard/src/styles/variables.less';
 
+:global {
+  .g-page-card-create-button {
+    background-color: transparent;
+    border-color: @primary-color;
+    color: @primary-color;
+    ////padding: 15px;
+    //height: 34px;
+
+    svg {
+      line-height: 0;
+      font-size: 160%;
+      vertical-align: -2px;
+    }
+
+    span {
+      line-height: 0;
+      vertical-align: 5px;
+      padding: 0 8px;
+      font-size: 110%;
+    }
+
+    &:hover {
+      background-color: @primary-color;
+      color: #fff;
+    }
+  }
+}
+
 .page-card-wrapper {
   //min-height: 300px;
   transition: all 0.3s;
-  padding-bottom: 60px;
+  //padding-bottom: 75px;
 
   :global {
     .ant-card {
@@ -27,12 +55,13 @@
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  margin-bottom: 28px;
+  margin-bottom: 14px;
   min-height: 32px;
 
   @media (min-width: @screen-md) {
     justify-content: space-between;
     display: flex;
+    margin-bottom: 28px;
   }
 
   .title {
@@ -43,7 +72,7 @@
     :global {
       span {
         strong {
-          font-size: 28px;
+          font-size: 30px;
         }
       }
     }
@@ -56,29 +85,7 @@
   }
 
   .page-card-create-button {
-    background-color: transparent;
-    border-color: @primary-color;
-    color: @primary-color;
-    //padding: 15px;
-    height: 34px;
-
-    svg {
-      line-height: 0;
-      font-size: 180%;
-      vertical-align: -2px;
-    }
-
-    span {
-      line-height: 0;
-      vertical-align: 5px;
-      padding: 0 8px;
-      font-size: 120%;
-    }
-
-    &:hover {
-      background-color: @primary-color;
-      color: #fff;
-    }
+    // @see .g-page-card-create-button
   }
 
   .extra {
@@ -107,6 +114,10 @@
   }
 }
 
+.title-wrapper {
+  margin-left: 40px;
+}
+
 .page-card-wrapper--complex {
   .header {
     display: block;

diff --git a/packages/leaa-dashboard/src/components/SearchInput/SearchInput.tsx b/packages/leaa-dashboard/src/components/SearchInput/SearchInput.tsx
@@ -38,12 +38,11 @@ export const SearchInput = (props: IProps) => {
       <Input
         prefixCls="search-input ant-input"
         allowClear
+        size="large"
         placeholder={`${t('_comp:SearchInput.placeholder')}`}
         onChange={(e) => onChange(e.currentTarget.value)}
         value={text}
-        addonAfter={
-          <RiSearchLine className={style['search-input-search-button']} onClick={() => onSearch(text as string)} />
-        }
+        prefix={<RiSearchLine />}
         onPressEnter={() => onSearch(text as string)}
         className={cx(style['search-input-inner'], 'search-input-inner')}
       />