@allahjs/umi-plugin-layout-lite 0.1.0

package/README.md

@@ -0,0 +1,46 @@
+# @allahjs/umi-plugin-layout-lite
+
+轻量版 Umi Layout 插件，替代官方 layout 插件并保留常用能力：
+
+- 自动注入全局布局（基于 `ProLayout`）
+- 支持 `export const layout = (...) => ({ ... })` 运行时配置
+- 支持 `rightRender` / `rightContentRender`
+- 兼容 `@ant-design/pro-components` 3.x：内部自动把 `rightContentRender` 适配为 `actionsRender`
+- 支持路由 `icon` 字符串自动映射
+
+## 安装
+
+```bash
+npm i @allahjs/umi-plugin-layout-lite
+```
+
+## 使用
+
+在 `config/config.ts` 中：
+
+```ts
+import { defineConfig } from '@umijs/max'
+
+export default defineConfig({
+  layout: false,
+  plugins: [require.resolve('@allahjs/umi-plugin-layout-lite')],
+})
+```
+
+在 `src/app.tsx` 中：
+
+```tsx
+export const layout = ({ initialState }: any) => ({
+  title: '管理系统',
+  rightContentRender: (_layoutProps: any, _dom: any, _meta: any) => {
+    return <div>自定义右上角</div>
+  },
+})
+```
+
+## 发布
+
+```bash
+cd packages/umi-plugin-layout-lite
+npm publish --access public
+```

package/dist/Layout.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function LayoutLite(props: any): react_jsx_runtime.JSX.Element;
+
+export { LayoutLite as default };

package/dist/Layout.js

@@ -0,0 +1,127 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var max = require('@umijs/max');
+var proComponents = require('@ant-design/pro-components');
+var antd = require('antd');
+
+const Exception = props => {
+    var _a, _b;
+    return ((!props.route && (props.noFound || props.notFound)) ||
+        (((_a = props.route) === null || _a === void 0 ? void 0 : _a.unaccessible) &&
+            (props.unAccessible || props.noAccessible)) ||
+        ((!props.route || ((_b = props.route) === null || _b === void 0 ? void 0 : _b.unaccessible)) && (jsxRuntime.jsx(antd.Result, { status: props.route ? '403' : '404', title: props.route ? '403' : '404', subTitle: props.route ? '抱歉，你无权访问该页面' : '抱歉，你访问的页面不存在', extra: jsxRuntime.jsx(antd.Button, { type: "primary", onClick: () => max.history.push('/'), children: "\u8FD4\u56DE\u9996\u9875" }) }))) ||
+        props.children);
+};
+function getRightRenderContent(opts) {
+    if (opts.runtimeConfig.rightRender) {
+        return opts.runtimeConfig.rightRender(opts.initialState, opts.setInitialState, opts.runtimeConfig);
+    }
+    if (opts.loading) {
+        return jsxRuntime.jsx(antd.Spin, { size: "small", style: { marginLeft: 8, marginRight: 8 } });
+    }
+    return null;
+}
+const filterRoutes = (routes, filterFn) => {
+    if (routes.length === 0)
+        return [];
+    const nextRoutes = [];
+    for (const route of routes) {
+        const nextRoute = { ...route };
+        if (filterFn(route)) {
+            if (Array.isArray(nextRoute.routes)) {
+                nextRoutes.push(...filterRoutes(nextRoute.routes, filterFn));
+            }
+        }
+        else {
+            if (Array.isArray(nextRoute.children)) {
+                nextRoute.children = filterRoutes(nextRoute.children, filterFn);
+                nextRoute.routes = nextRoute.children;
+            }
+            nextRoutes.push(nextRoute);
+        }
+    }
+    return nextRoutes;
+};
+const mapRoutes = (routes) => {
+    if (routes.length === 0)
+        return [];
+    return routes.map(route => {
+        const nextRoute = { ...route };
+        if (route.originPath) {
+            nextRoute.path = route.originPath;
+        }
+        if (Array.isArray(route.routes)) {
+            nextRoute.routes = mapRoutes(route.routes);
+        }
+        if (Array.isArray(route.children)) {
+            nextRoute.children = mapRoutes(route.children);
+        }
+        return nextRoute;
+    });
+};
+function LayoutLite(props) {
+    const location = max.useLocation();
+    const navigate = max.useNavigate();
+    const { clientRoutes, pluginManager } = max.useAppData();
+    const initialInfo = max.useModel('@@initialState') || {
+        initialState: undefined,
+        loading: false,
+        setInitialState: null,
+    };
+    const { initialState, loading, setInitialState } = initialInfo;
+    const runtimeConfig = pluginManager.applyPlugins({
+        key: 'layout',
+        type: 'modify',
+        initialValue: {
+            ...initialInfo,
+        },
+    });
+    const userConfig = {};
+    const newRoutes = filterRoutes(clientRoutes.filter((route) => route.id === 'layout-lite'), route => (route.isLayout && route.id !== 'layout-lite') || !!route.isWrapper);
+    const route = mapRoutes(newRoutes)[0];
+    const matchedRoute = React.useMemo(() => { var _a, _b, _c; return (_c = (_b = (_a = max.matchRoutes((route === null || route === void 0 ? void 0 : route.children) || [], location.pathname)) === null || _a === void 0 ? void 0 : _a.pop) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.route; }, [route, location.pathname]);
+    const renderRightActions = (layoutProps) => {
+        const dom = getRightRenderContent({
+            runtimeConfig,
+            loading,
+            initialState,
+            setInitialState,
+        });
+        if (runtimeConfig.rightContentRender) {
+            return runtimeConfig.rightContentRender(layoutProps, dom, {
+                userConfig,
+                runtimeConfig,
+                loading,
+                initialState,
+                setInitialState,
+            });
+        }
+        return dom;
+    };
+    return (jsxRuntime.jsx(proComponents.ProLayout, { route: route, location: location, title: runtimeConfig.title || 'layout-lite', menu: { locale: runtimeConfig.locale }, onMenuHeaderClick: event => {
+            event.stopPropagation();
+            event.preventDefault();
+            navigate('/');
+        }, menuItemRender: (menuItemProps, defaultDom) => {
+            if (menuItemProps.isUrl || menuItemProps.children) {
+                return defaultDom;
+            }
+            if (menuItemProps.path && location.pathname !== menuItemProps.path) {
+                return (jsxRuntime.jsx(max.Link, { to: menuItemProps.path.replace('/*', ''), target: menuItemProps.target, children: defaultDom }));
+            }
+            return defaultDom;
+        }, itemRender: (currentRoute, _, routes) => {
+            const label = currentRoute.title || currentRoute.breadcrumbName;
+            const lastRoute = routes[routes.length - 1];
+            if (lastRoute && (lastRoute.path === currentRoute.path || lastRoute.linkPath === currentRoute.path)) {
+                return jsxRuntime.jsx("span", { children: label });
+            }
+            return jsxRuntime.jsx(max.Link, { to: currentRoute.path || '/', children: label });
+        }, actionsRender: renderRightActions, ...runtimeConfig, children: jsxRuntime.jsx(Exception, { route: matchedRoute, noFound: runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.noFound, notFound: runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.notFound, unAccessible: runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.unAccessible, noAccessible: runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.noAccessible, children: runtimeConfig.childrenRender
+                ? runtimeConfig.childrenRender(jsxRuntime.jsx(max.Outlet, {}), props)
+                : jsxRuntime.jsx(max.Outlet, {}) }) }));
+}
+
+module.exports = LayoutLite;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { IApi } from 'umi';
+
+declare const _default: (api: IApi) => void;
+
+export { _default as default };

package/dist/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var index = (api) => {
+    api.addLayouts(() => {
+        return [
+            {
+                id: 'layout-lite',
+                file: require.resolve('./Layout'),
+                test: (route) => route.layout !== false,
+            },
+        ];
+    });
+    api.addRuntimePluginKey(() => ['layout']);
+    api.addRuntimePlugin(() => {
+        return [require.resolve('./runtime')];
+    });
+};
+
+module.exports = index;

package/dist/runtime.d.ts

@@ -0,0 +1,3 @@
+declare function patchRoutes({ routes }: any): void;
+
+export { patchRoutes };

package/dist/runtime.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var React = require('react');
+var Icons = require('@ant-design/icons');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var Icons__namespace = /*#__PURE__*/_interopNamespaceDefault(Icons);
+
+function formatIcon(name) {
+    return name
+        .replace(name[0], name[0].toUpperCase())
+        .replace(/-(\w)/g, (_all, letter) => letter.toUpperCase());
+}
+function patchRoutes({ routes }) {
+    Object.keys(routes).forEach(key => {
+        var _a;
+        const icon = (_a = routes[key]) === null || _a === void 0 ? void 0 : _a.icon;
+        if (!icon || typeof icon !== 'string')
+            return;
+        const iconName = formatIcon(icon);
+        const IconComponent = Icons__namespace[iconName] || Icons__namespace[`${iconName}Outlined`];
+        if (IconComponent) {
+            routes[key].icon = React.createElement(IconComponent);
+        }
+    });
+}
+
+exports.patchRoutes = patchRoutes;

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@allahjs/umi-plugin-layout-lite",
+  "version": "0.1.0",
+  "description": "A lightweight Umi layout plugin with ProLayout and rightContentRender compatibility.",
+  "repository": "https://github.com/allah-prime/umi-plugin-layout-lite",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "rimraf dist && rollup -c",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "umi",
+    "umijs",
+    "plugin",
+    "layout",
+    "prolayout",
+    "antd"
+  ],
+  "peerDependencies": {
+    "@ant-design/icons": ">=6",
+    "@ant-design/pro-components": ">=3.0.0-0",
+    "@umijs/max": ">=4",
+    "antd": ">=6",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "umi": ">=4"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.9",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/node": "^24.3.0",
+    "@types/react": "^19.2.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.50.1",
+    "rollup-plugin-dts": "^6.2.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.0"
+  },
+  "license": "MIT"
+}