From 62cf9c4496637c5777d77a94f97145ebf78e90b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BE=9D=E9=B9=AD?= Date: Wed, 12 Feb 2020 22:00:12 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20layout=20plugin=20=E8=BF=81=E7=A7=BB=20?= =?UTF-8?q?umi@3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/.umirc.ts | 13 +++++++ example/app.ts | 12 ++++++ example/package.json | 3 +- package.json | 3 ++ packages/plugin-layout/package.json | 14 +++---- .../src/component/Exception/index.tsx | 2 +- packages/plugin-layout/src/index.ts | 39 +++++++++++-------- packages/plugin-layout/src/layout/index.tsx | 9 ++--- .../src/layout/useRightContent.tsx | 7 ++-- .../src/utils/getLayoutContent.tsx | 8 +++- packages/plugin-layout/src/utils/intl.ts | 5 ++- .../test/getLayoutContent.test.js | 8 +++- 12 files changed, 85 insertions(+), 38 deletions(-) diff --git a/example/.umirc.ts b/example/.umirc.ts index 1ee747c1f..03013e31d 100644 --- a/example/.umirc.ts +++ b/example/.umirc.ts @@ -1,11 +1,24 @@ import { defineConfig } from 'umi'; export default defineConfig({ + routes: [ + { + name: 'model 测试', + path: '/plugin-model', + component: './plugin-model', + }, + { + name: '首页', + path: '/', + component: './index', + }, + ], plugins: [ require.resolve('../packages/plugin-antd/lib'), require.resolve('../packages/plugin-locale/lib'), require.resolve('../packages/plugin-dva/lib'), require.resolve('../packages/plugin-model/lib'), require.resolve('../packages/plugin-request/lib'), + require.resolve('../packages/plugin-layout/lib'), ], }); diff --git a/example/app.ts b/example/app.ts index 771b9c7ee..e992a1f20 100644 --- a/example/app.ts +++ b/example/app.ts @@ -2,6 +2,18 @@ export function render(oldRender: Function) { oldRender(); } +// export function getInitialState() { +// return { +// name: 'test' +// }; +// } + +export const layout = { + logout: () => { + console.log('logout success'); + }, // do something +}; + export const locale = { default: 'zh-CN', }; diff --git a/example/package.json b/example/package.json index 9664f260a..18a1e415e 100644 --- a/example/package.json +++ b/example/package.json @@ -1,4 +1,3 @@ { - "dependencies": { - } + "dependencies": {} } diff --git a/package.json b/package.json index c28d63ead..641dde20b 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,9 @@ ] }, "devDependencies": { + "@umijs/plugin-initial-state": "^1.0.1", + "@umijs/plugin-model": "^1.0.1", + "@umijs/plugin-locale": "^0.1.2", "@testing-library/react": "^9.4.0", "@testing-library/react-hooks": "^3.2.1", "@types/jest": "^24.0.25", diff --git a/packages/plugin-layout/package.json b/packages/plugin-layout/package.json index 4bb28f78f..86a7ea003 100644 --- a/packages/plugin-layout/package.json +++ b/packages/plugin-layout/package.json @@ -16,26 +16,26 @@ "umi" ], "authors": [ - "chencheng (https://github.com/sorrycc)" + "Ariel <1319413542@qq.com> (https://github.com/Ariel-Cheng)" ], "license": "MIT", "bugs": "http://github.com/umijs/plugins/issues", "homepage": "https://github.com/umijs/plugins/tree/master/packages/plugin-layout#readme", "peerDependencies": { - "umi": "2.x", + "umi": "3.x", "@umijs/plugin-initial-state": "^1.0.1", "@umijs/plugin-model": "^1.0.1", + "@umijs/plugin-locale": "^0.1.2", "react": "^16.0.0" }, "dependencies": { - "@ant-design/pro-layout": "^4.9.9", - "antd": "^3.26.7", + "@ant-design/pro-layout": "^5.0.0", + "antd": "^4.0.0-rc.4", "lodash": "^4.17.15", "memoize-one": "^5.1.1", - "path-to-regexp": "1.x", - "umi-plugin-locale": "^2.11.4" + "path-to-regexp": "1.x" }, "publishConfig": { "access": "public" } -} +} \ No newline at end of file diff --git a/packages/plugin-layout/src/component/Exception/index.tsx b/packages/plugin-layout/src/component/Exception/index.tsx index 461a86f56..89088ea7d 100644 --- a/packages/plugin-layout/src/component/Exception/index.tsx +++ b/packages/plugin-layout/src/component/Exception/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Typography, Button } from 'antd'; -import history from '@@/history'; +import { history } from 'umi'; import './index.less'; import { IRouteLayoutConfig } from '../../types/interface.d'; diff --git a/packages/plugin-layout/src/index.ts b/packages/plugin-layout/src/index.ts index 9fa098f77..2198dad35 100644 --- a/packages/plugin-layout/src/index.ts +++ b/packages/plugin-layout/src/index.ts @@ -1,4 +1,4 @@ -import { IApi } from 'umi-types'; +import { IApi, utils } from 'umi'; import { join } from 'path'; import getLayoutContent from './utils/getLayoutContent'; import { LayoutConfig } from './types/interface.d'; @@ -7,30 +7,37 @@ const DEFAULT_ANTFIN_LOGO = 'https://gw.alipayobjects.com/zos/rmsportal/VjSUcTzdEiSwfnvdapaa.png'; const DIR_NAME = 'plugin-layout'; -export default (api: IApi, opts: LayoutConfig = {}) => { - let layoutOpts: LayoutConfig = { ...opts }; - api.onOptionChange(newOption => { - opts = newOption; // eslint-disable-line no-param-reassign - api.rebuildTmpFiles(); +export default (api: IApi) => { + api.describe({ + key: 'layout', + config: { + default: {}, + schema(joi) { + return joi.object(); + }, + onChange: api.ConfigChangeType.regenerateTmpFiles, + }, }); - api.addRuntimePluginKey('layout'); + let layoutOpts: LayoutConfig = {}; + + api.addRuntimePluginKey(() => 'layout'); api.onGenerateFiles(() => { // apply default options layoutOpts = { - name: require(join(api.paths.cwd, 'package.json')).name, + name: require(join(api.paths?.cwd || '', 'package.json')).name, logo: DEFAULT_ANTFIN_LOGO, theme: 'PRO', locale: false, showBreadcrumb: true, - ...(api.config as any).layout, - ...opts, + ...(api.service.userConfig as any).layout, + ...(api.userConfig.layout || {}), }; // allow custom theme let layoutComponent = { - PRO: api.winPath(join(__dirname, './layout/index.js')), + PRO: utils.winPath(join(__dirname, './layout/index.js')), }; if (layoutOpts.layoutComponent) { layoutComponent = Object.assign( @@ -43,16 +50,16 @@ export default (api: IApi, opts: LayoutConfig = {}) => { const currentLayoutComponentPath = layoutComponent[theme] || layoutComponent['PRO']; - api.writeTmpFile( - join(DIR_NAME, 'Layout.tsx'), - getLayoutContent(layoutOpts, currentLayoutComponentPath), - ); + api.writeTmpFile({ + path: join(DIR_NAME, 'Layout.tsx'), + content: getLayoutContent(layoutOpts, currentLayoutComponentPath), + }); }); api.modifyRoutes(routes => [ { path: '/', - component: join(api.paths.absTmpDirPath, DIR_NAME, 'Layout.tsx'), + component: join(api.paths.absTmpPath || '', DIR_NAME, 'Layout.tsx'), routes, }, ]); diff --git a/packages/plugin-layout/src/layout/index.tsx b/packages/plugin-layout/src/layout/index.tsx index df11c7c65..76b24903d 100644 --- a/packages/plugin-layout/src/layout/index.tsx +++ b/packages/plugin-layout/src/layout/index.tsx @@ -1,8 +1,6 @@ import React from 'react'; -import { Link, useModel } from 'umi'; +import { Link, useModel, history, useIntl } from 'umi'; import pathToRegexp from 'path-to-regexp'; -import history from '@@/history'; -import { formatMessage } from 'umi-plugin-locale'; import ProLayout from '@ant-design/pro-layout'; import './style.less'; import ErrorBoundary from '../component/ErrorBoundary'; @@ -14,7 +12,8 @@ import getMenuDataFromRoutes from '../utils/getMenuFromRoute'; const BasicLayout = (props: any) => { const { children, userConfig, location } = props; const { initialState = {}, loading } = useModel('@@initialState'); - const _routes = require('@@/router').routes; + const _routes = require('@@/core/routes').routes; + const intl = useIntl(); const rightContentRender = useRightContent(userConfig, loading, initialState); const layoutConfig = getLayoutConfigFromRoute(_routes); const menus = getMenuDataFromRoutes(_routes[0].routes); @@ -53,7 +52,7 @@ const BasicLayout = (props: any) => { }} menu={{ locale: userConfig.locale }} menuDataRender={() => menus} - formatMessage={formatMessage} + formatMessage={intl.formatMessage} logo={ initialState.avatar || 'https://gw-office.alipayobjects.com/basement_prod/c83c53ab-515e-43e2-85d0-4d0da16f11ef.svg' diff --git a/packages/plugin-layout/src/layout/useRightContent.tsx b/packages/plugin-layout/src/layout/useRightContent.tsx index 2b0f219df..26fa515f2 100644 --- a/packages/plugin-layout/src/layout/useRightContent.tsx +++ b/packages/plugin-layout/src/layout/useRightContent.tsx @@ -1,7 +1,8 @@ import React, { useCallback } from 'react'; -import { Avatar, Dropdown, Menu, Icon, Spin } from 'antd'; +import { Avatar, Dropdown, Menu, Spin } from 'antd'; +import { LogoutOutlined } from '@ant-design/icons'; import './style.less'; -import { ILayoutRuntimeConfig } from '../../types/interface.d'; +import { ILayoutRuntimeConfig } from '../types/interface.d'; export default function useRightContent( runtimeLayout: ILayoutRuntimeConfig, @@ -16,7 +17,7 @@ export default function useRightContent( const menu = ( - + 退出登陆 diff --git a/packages/plugin-layout/src/utils/getLayoutContent.tsx b/packages/plugin-layout/src/utils/getLayoutContent.tsx index 5fb360407..1e6dfaadb 100644 --- a/packages/plugin-layout/src/utils/getLayoutContent.tsx +++ b/packages/plugin-layout/src/utils/getLayoutContent.tsx @@ -4,9 +4,15 @@ export default ( userConfig: LayoutConfig, path: string, ) => `import React from 'react'; +import { ApplyPluginsType } from 'umi'; +import { plugin } from '../core/umiExports'; export default (props) => { - const runtimeConfig = require('umi/_runtimePlugin').mergeConfig('layout') || {}; + const runtimeConfig = plugin.applyPlugins({ + key: 'layout', + type: ApplyPluginsType.modify, + initialValue: {}, + }) || {}; const userConfig = { ...${JSON.stringify(userConfig).replace(/"/g, "'")}, ...runtimeConfig diff --git a/packages/plugin-layout/src/utils/intl.ts b/packages/plugin-layout/src/utils/intl.ts index 6c8dd893b..2581234b5 100644 --- a/packages/plugin-layout/src/utils/intl.ts +++ b/packages/plugin-layout/src/utils/intl.ts @@ -1,4 +1,4 @@ -import { formatMessage, getLocale } from 'umi-plugin-locale'; +import { useIntl, getLocale } from 'umi'; import zhCN from '../locale/zh-CN'; import enUS from '../locale/en-US'; @@ -22,7 +22,8 @@ export function intl({ id: string; value?: { [key: string]: any }; }) { + const intl = useIntl(); const localeMessages: { [key: string]: string } = getLocale() === 'zh-CN' ? zhCN : enUS; - return formatMessage({ id }, value) || localeMessages[id] || id; + return intl.formatMessage({ id }, value) || localeMessages[id] || id; } diff --git a/packages/plugin-layout/test/getLayoutContent.test.js b/packages/plugin-layout/test/getLayoutContent.test.js index fa7b32fdd..53b79f929 100644 --- a/packages/plugin-layout/test/getLayoutContent.test.js +++ b/packages/plugin-layout/test/getLayoutContent.test.js @@ -6,9 +6,15 @@ describe('getLayoutContent', () => { expect(LayoutContent).toEqual( `import React from 'react'; +import { ApplyPluginsType } from 'umi'; +import { plugin } from '../core/umiExports'; export default (props) => { - const runtimeConfig = require('umi/_runtimePlugin').mergeConfig('layout') || {}; + const runtimeConfig = plugin.applyPlugins({ + key: 'layout', + type: ApplyPluginsType.modify, + initialValue: {}, + }) || {}; const userConfig = { ...{}, ...runtimeConfig