feat(platform): add table route

Author: xiejay97

package.json

@@ -28,32 +28,32 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@amap/amap-jsapi-types": "^0.0.10",
     "@ant-design/icons-svg": "^4.2.1",
-    "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.1.0",
-    "@nrwl/cli": "15.0.2",
-    "@nrwl/eslint-plugin-nx": "15.0.2",
-    "@nrwl/jest": "15.0.2",
-    "@nrwl/linter": "15.0.2",
-    "@nrwl/nx-cloud": "15.0.0",
-    "@nrwl/react": "15.0.2",
-    "@nrwl/tao": "15.0.2",
-    "@nrwl/web": "15.0.2",
-    "@nrwl/workspace": "15.0.2",
+    "@commitlint/cli": "^17.2.0",
+    "@commitlint/config-conventional": "^17.2.0",
+    "@nrwl/cli": "15.0.10",
+    "@nrwl/eslint-plugin-nx": "15.0.10",
+    "@nrwl/jest": "15.0.10",
+    "@nrwl/linter": "15.0.10",
+    "@nrwl/nx-cloud": "15.0.2",
+    "@nrwl/react": "15.0.10",
+    "@nrwl/tao": "15.0.10",
+    "@nrwl/web": "15.0.10",
+    "@nrwl/workspace": "15.0.10",
     "@stackblitz/sdk": "^1.8.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/fs-extra": "^9.0.13",
     "@types/glob": "^8.0.0",
     "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.186",
+    "@types/lodash": "^4.14.188",
     "@types/marked": "^4.0.7",
     "@types/node": "16.18.0",
-    "@types/react": "^18.0.22",
-    "@types/react-dom": "^18.0.7",
-    "@types/vscode": "^1.72.0",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "@types/vscode": "^1.73.0",
     "@types/yaml-front-matter": "^4.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.41.0",
-    "@typescript-eslint/parser": "^5.41.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
     "axios": "^1.1.2",
     "axios-mock-adapter": "^1.21.2",
     "babel-jest": "^29.1.2",
@@ -63,10 +63,10 @@
     "core-js": "^3.26.0",
     "dayjs": "^1.11.6",
     "echarts": "^5.4.0",
-    "eslint": "^8.26.0",
+    "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsdoc": "^39.3.24",
+    "eslint-plugin-jsdoc": "^39.6.2",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -77,40 +77,41 @@
     "glob": "^8.0.3",
     "highlight.js": "^11.6.0",
     "husky": "^8.0.1",
-    "i18next": "^21.10.0",
+    "i18next": "^22.0.4",
     "immer": "^9.0.16",
     "is-builtin-module": "^3.2.0",
     "jest": "^27.5.1",
     "jest-environment-jsdom": "28.1.1",
+    "jsurl": "^0.1.5",
     "lerna": "^6.0.1",
     "lodash": "^4.17.21",
-    "marked": "^4.1.1",
-    "nx": "15.0.2",
+    "marked": "^4.2.2",
+    "nx": "15.0.10",
     "postcss-html": "^1.5.0",
     "postcss-markdown": "^1.2.0",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^11.18.6",
-    "react-router-dom": "^6.4.2",
+    "react-i18next": "^12.0.0",
+    "react-router-dom": "^6.4.3",
     "react-test-renderer": "^18.2.0",
     "regenerator-runtime": "^0.13.10",
     "rfs": "^9.0.6",
     "rxjs": "^7.5.7",
     "rxjs-for-await": "^1.0.0",
-    "sass": "^1.55.0",
-    "sort-package-json": "^2.0.0",
-    "stylelint": "^14.14.0",
+    "sass": "^1.56.0",
+    "sort-package-json": "^2.1.0",
+    "stylelint": "^14.14.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recess-order": "^3.0.0",
     "stylelint-config-recommended-scss": "^8.0.0",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-scss": "^4.3.0",
     "swiper": "^8.4.4",
-    "table": "^6.8.0",
+    "table": "^6.8.1",
     "ts-jest": "^27.1.4",
     "ts-node": "^10.9.1",
-    "tslib": "^2.4.0",
+    "tslib": "^2.4.1",
     "typescript": "~4.8.4",
     "yaml-front-matter": "^4.1.1"
   },

packages/hooks/package.json

@@ -23,12 +23,14 @@
   "sideEffects": false,
   "dependencies": {
     "@react-devui/utils": "file:../utils",
-    "immer": "^9.0.15",
+    "immer": "^9.0.16",
     "lodash": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "rxjs": "^7.5.7"
   },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
   "publishConfig": {
     "access": "public",
     "directory": "../../dist/packages/hooks"

packages/icons/package.json

@@ -24,8 +24,11 @@
   "dependencies": {
     "@ant-design/icons-svg": "^4.2.1",
     "@react-devui/utils": "file:../utils",
-    "lodash": "^4.17.21",
-    "react": "^18.2.0"
+    "lodash": "^4.17.21"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "publishConfig": {
     "access": "public",

packages/platform/package.json

@@ -28,15 +28,16 @@
     "axios": "^1.1.2",
     "axios-mock-adapter": "^1.21.2",
     "bootstrap": "^5.2.2",
-    "core-js": "^3.25.5",
+    "core-js": "^3.26.0",
     "echarts": "^5.4.0",
     "i18next": "^21.10.0",
+    "immer": "^9.0.16",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^11.18.6",
     "react-router-dom": "^6.4.2",
-    "regenerator-runtime": "^0.13.9",
+    "regenerator-runtime": "^0.13.10",
     "rxjs": "^7.5.7"
   }
 }

packages/platform/src/app/App.tsx

@@ -29,11 +29,10 @@ export function App() {
   useMount(() => {
     i18n.changeLanguage(languageStorage.value);
 
-    const [authReq] = http<UserState>({
+    http<UserState>({
       url: '/auth/me',
       method: 'get',
-    });
-    authReq.subscribe({
+    }).subscribe({
       next: (res) => {
         setLoading(false);
         init(res);

packages/platform/src/app/Routes.tsx

@@ -1,9 +1,7 @@
 import type { Control, ControlMode } from '../core/useACL';
-import type { DBreadcrumbItem } from '@react-devui/ui/components/breadcrumb';
-import type { DId } from '@react-devui/ui/utils/types';
 import type { IndexRouteObject, NonIndexRouteObject, RouteMatch } from 'react-router-dom';
 
-import { isUndefined, nth } from 'lodash';
+import { nth } from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { matchRoutes, Navigate, renderMatches, useLocation } from 'react-router-dom';
@@ -21,6 +19,8 @@ import AppLoginRoute from './routes/login/Login';
 const AppAMapRoute = React.lazy(() => import('./routes/dashboard/amap/AMap'));
 const AppEChartsRoute = React.lazy(() => import('./routes/dashboard/echarts/ECharts'));
 
+const AppStandardTableRoute = React.lazy(() => import('./routes/list/standard-table/StandardTable'));
+
 const AppACLRoute = React.lazy(() => import('./routes/test/acl/ACL'));
 const AppHttpRoute = React.lazy(() => import('./routes/test/http/Http'));
 
@@ -35,8 +35,13 @@ export type CanActivateFn = (route: RouteItem) => true | React.ReactElement;
 
 export interface RouteData {
   title?: string;
-  titleI18n?: string;
-  breadcrumb?: DBreadcrumbItem<DId> | false;
+  breadcrumb?:
+    | {
+        title?: string;
+        link?: boolean;
+        separator?: React.ReactNode;
+      }
+    | false;
   acl?:
     | {
         control: Control | Control[];
@@ -71,13 +76,17 @@ export function AppRoutes() {
         path: LOGIN_PATH,
         element: <AppLoginRoute />,
         data: {
-          titleI18n: 'login',
+          title: t('login', { ns: 'title' }),
         },
       },
       {
         path: '/',
         element: <AppLayout />,
         data: {
+          breadcrumb: {
+            title: t('home', { ns: 'title' }),
+            link: true,
+          },
           canActivate: [tokenGuard],
           canActivateChild: [tokenGuard],
         },
@@ -88,6 +97,11 @@ export function AppRoutes() {
           },
           {
             path: 'dashboard',
+            data: {
+              breadcrumb: {
+                title: t('dashboard.', { ns: 'title' }),
+              },
+            },
             children: [
               {
                 path: 'amap',
@@ -97,7 +111,10 @@ export function AppRoutes() {
                   </React.Suspense>
                 ),
                 data: {
-                  titleI18n: 'dashboard.amap',
+                  title: t('dashboard.amap', { ns: 'title' }),
+                  breadcrumb: {
+                    link: true,
+                  },
                   acl: ROUTES_ACL.dashboard.amap,
                   canActivate: [ACLGuard],
                 },
@@ -110,15 +127,49 @@ export function AppRoutes() {
                   </React.Suspense>
                 ),
                 data: {
-                  titleI18n: 'dashboard.echarts',
+                  title: t('dashboard.echarts', { ns: 'title' }),
+                  breadcrumb: {
+                    link: true,
+                  },
                   acl: ROUTES_ACL.dashboard.echarts,
                   canActivate: [ACLGuard],
                 },
               },
             ],
           },
+          {
+            path: 'list',
+            data: {
+              breadcrumb: {
+                title: t('list.', { ns: 'title' }),
+              },
+            },
+            children: [
+              {
+                path: 'standard-table',
+                element: (
+                  <React.Suspense fallback={<AppFCPLoader />}>
+                    <AppStandardTableRoute />
+                  </React.Suspense>
+                ),
+                data: {
+                  title: t('list.standard-table', { ns: 'title' }),
+                  breadcrumb: {
+                    link: true,
+                  },
+                  acl: ROUTES_ACL.list['standard-table'],
+                  canActivate: [ACLGuard],
+                },
+              },
+            ],
+          },
           {
             path: 'test',
+            data: {
+              breadcrumb: {
+                title: t('test.', { ns: 'title' }),
+              },
+            },
             children: [
               {
                 path: 'acl',
@@ -128,7 +179,7 @@ export function AppRoutes() {
                   </React.Suspense>
                 ),
                 data: {
-                  titleI18n: 'test.acl',
+                  title: t('test.acl', { ns: 'title' }),
                   acl: ROUTES_ACL.test.acl,
                   canActivate: [ACLGuard],
                 },
@@ -141,7 +192,7 @@ export function AppRoutes() {
                   </React.Suspense>
                 ),
                 data: {
-                  titleI18n: 'test.http',
+                  title: t('test.http', { ns: 'title' }),
                   acl: ROUTES_ACL.test.http,
                   canActivate: [ACLGuard],
                 },
@@ -186,8 +237,7 @@ export function AppRoutes() {
     return renderMatches(matches);
   })();
 
-  const { title: _title, titleI18n } = nth(matches, -1)?.route.data ?? {};
-  const title = _title ?? (isUndefined(titleI18n) ? undefined : t(titleI18n, { ns: 'title' }));
+  const { title } = nth(matches, -1)?.route.data ?? {};
   usePageTitle(title);
 
   return (

packages/platform/src/app/components/index.ts

@@ -13,3 +13,9 @@ export { AppMap } from './map';
 
 export type { AppRouteHeaderProps, AppRouteHeaderBreadcrumbProps, AppRouteHeaderHeaderProps } from './route-header';
 export { AppRouteHeader } from './route-header';
+
+export type { AppStatusDotProps } from './status-dot';
+export { AppStatusDot } from './status-dot';
+
+export type { AppTableFilterProps } from './table-filter';
+export { AppTableFilter } from './table-filter';