微调了listPro使之支持不传title,增加了navi组件

lib/components/listPro/index.d.ts

@@ -4,7 +4,7 @@ import { TableProps } from 'antd';
 import { RowWithActions } from '../../types/Page';
 import { StorageSchema } from 'oak-domain/lib/types/Storage';
 declare type Props = {
-    title: string;
+    title?: string;
     buttonGroup?: ListButtonProps[];
     onReload?: () => void;
     entity: keyof ED;

lib/components/listPro/index.js

@@ -9,6 +9,7 @@ var toolBar_1 = tslib_1.__importDefault(require("../list/toolBar"));
 var buttonGroup_1 = tslib_1.__importDefault(require("../list/buttonGroup"));
 var index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 var useWidth_1 = require("../../platforms/web/responsive/useWidth");
+var react_i18next_1 = require("react-i18next");
 exports.TableContext = (0, react_1.createContext)({
     tableAttributes: undefined,
     entity: undefined,
@@ -27,6 +28,7 @@ var ProList = function (props) {
     var _b = tslib_1.__read((0, react_1.useState)(undefined), 2), schema = _b[0], setSchema = _b[1];
     var width = (0, useWidth_1.useWidth)();
     var isMobile = width === 'xs';
+    var t = (0, react_i18next_1.useTranslation)().t;
     return ((0, jsx_runtime_1.jsx)(exports.TableContext.Provider, tslib_1.__assign({ value: {
             tableAttributes: tableAttributes,
             entity: entity,
@@ -37,7 +39,7 @@ var ProList = function (props) {
                 var newTableAttr = attributes.map(function (ele) { return ({ attribute: ele, show: true }); });
                 setTableAttributes(newTableAttr);
             }
-        } }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: index_module_less_1.default.listContainer }, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(toolBar_1.default, { title: title, buttonGroup: buttonGroup, reload: function () {
+        } }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: index_module_less_1.default.listContainer }, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(toolBar_1.default, { title: title || t('list', { name: t("".concat(entity, ":name")) }), buttonGroup: buttonGroup, reload: function () {
                         onReload && onReload();
                     } })), isMobile && ((0, jsx_runtime_1.jsx)(buttonGroup_1.default, { items: buttonGroup })), (0, jsx_runtime_1.jsx)(list_1.default, { entity: entity, extraActions: extraActions, onAction: onAction, disabledOp: disabledOp, attributes: attributes, data: data, loading: loading, tablePagination: tablePagination, rowSelection: rowSelection })] })) })));
 };

lib/components/navi/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare type Props = {
+    items: Array<{
+        title: string;
+        href?: string;
+    }>;
+    title: string;
+};
+export default function Render(props: Props): JSX.Element;
+export {};

lib/components/navi/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var antd_1 = require("antd");
+var features_1 = require("../../platforms/web/features");
+function Render(props) {
+    var items = props.items, title = props.title;
+    var items2 = items.concat({ title: title });
+    var navigator = (0, features_1.useFeatures)().navigator;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(antd_1.Breadcrumb, { items: items2.map(function (ele) {
+                    var title = ele.title, href = ele.href;
+                    if (href) {
+                        return {
+                            title: title,
+                            href: href,
+                        };
+                    }
+                    return {
+                        title: title,
+                    };
+                }) }), (0, jsx_runtime_1.jsx)(antd_1.Divider, { style: { marginTop: 4 } })] }));
+}
+exports.default = Render;

src/components/list/toolBar/index.module.less

@@ -19,6 +19,7 @@
     align-items: center;
     justify-content: flex-start;
     color: rgba(42, 46, 54, 0.88);
-    font-weight: 500;
-    font-size: 16px;
+    font-weight: bolder;
+    padding-left: 10px;
+    font-size: var(--oak-font-size-title-large);
 }

src/components/listPro/index.tsx

@@ -12,8 +12,9 @@ import ButtonGroup from '../list/buttonGroup';
 import Style from './index.module.less';
 import { StorageSchema } from 'oak-domain/lib/types/Storage';
 import { useWidth } from '../../platforms/web/responsive/useWidth';
+import { useTranslation } from 'react-i18next';
 type Props = {
-    title: string;
+    title?: string;
     buttonGroup?: ListButtonProps[];
     onReload?: () => void;
     entity: keyof ED;
@@ -71,6 +72,8 @@ const ProList = (props: Props) => {
     const [schema, setSchema] = useState(undefined);
     const width = useWidth();
     const isMobile = width === 'xs';
+    const { t } = useTranslation();
+
     return (
         <TableContext.Provider
             value={{
@@ -87,7 +90,7 @@ const ProList = (props: Props) => {
             <div className={Style.listContainer}>
                 {!isMobile && (
                     <ToolBar
-                        title={title}
+                        title={title || t('list', { name: t(`${entity}:name`)})}
                         buttonGroup={buttonGroup}
                         reload={() => {
                             onReload && onReload();

src/components/listPro/locales/zh_CN.json

@@ -0,0 +1 @@
+{"list":"{{name}}列表"}

src/components/navi/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Breadcrumb, Divider } from 'antd';
+import { useFeatures } from '../../platforms/web/features';
+import { Navigator } from '../../features/navigator';
+
+type Props = {
+    items: Array<{
+        title: string;
+        href?: string;
+    }>;
+    title: string;
+};
+
+export default function Render(props: Props) {
+    const { items, title } = props;
+    const items2 = items.concat({ title });
+    const { navigator } = useFeatures<{ navigator: Navigator}>();
+
+    return (
+        <>
+            <Breadcrumb items={items2.map(
+                (ele) => {
+                    const { title, href } = ele;
+                    if (href) {
+                        return {
+                            title,
+                            href,
+                        };
+                    }
+                    return {
+                        title,
+                    };
+                }
+            )} />
+            <Divider style={{ marginTop: 4 }} />
+        </>
+    );
+}