fix: layout

.jest.js

@@ -2,19 +2,22 @@ const libDir = process.env.LIB_DIR;
 
 const transformIgnorePatterns = [
   '/dist/',
-  'node_modules/[^/]+?/(?!(es|node_modules)/)', // Ignore modules without es dir
+  'node_modules/[^/]+?/(?!(node_modules)/)', // Ignore modules without es dir
 ];
 
 module.exports = {
   testURL: 'http://localhost/',
+  preset: 'ts-jest',
   moduleFileExtensions: ['js', 'ts', 'tsx', 'json', 'vue'],
   modulePathIgnorePatterns: ['/_site/'],
   testPathIgnorePatterns: ['/node_modules/', 'node'],
   transform: {
     '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
     '^.+\\.(ts|tsx)$': '<rootDir>/node_modules/babel-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
   },
   testRegex: libDir === 'dist' ? 'demo\\.test\\.ts$' : '.*\\.test\\.tsx$',
+  testEnvironment: 'node',
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/$1',
   },

package.json

@@ -17,7 +17,7 @@
     "clean": "cross-env TS_NODE_PROJECT=scripts/tsconfig.json node -r ts-node/register ./scripts/cleanup.ts",
     "start": "vc-tools run server",
     "lint": "eslint src/ -c .eslintrc.js --ext .tsx,.ts",
-    "lint-fix": "eslint --fix src/ -c .eslintrc.js --ext .tsx,.ts",
+    "lint:fix": "eslint --fix src/ -c .eslintrc.js --ext .tsx,.ts",
     "compile": "cross-env TS_NODE_PROJECT=scripts/tsconfig.json vc-tools run compile",
     "test": "cross-env NODE_ENV=test jest --config .jest.js",
     "prepublishOnly": "npm run lint && npm run compile && npm run test",
@@ -29,7 +29,6 @@
   },
   "devDependencies": {
     "@ant-design-vue/tools": "^3.0.4",
-    "@babel/runtime": "^7.11.2",
     "@types/fs-extra": "^9.0.2",
     "@types/jest": "^24.0.17",
     "@types/node": "^13.13.15",
@@ -47,12 +46,13 @@
     "@vue/test-utils": "^2.0.0-beta.2",
     "cross-env": "^5.2.0",
     "eslint": "^6.7.2",
-    "eslint-config-prettier": "^6.4.0",
+    "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^7.0.0-0",
     "fs-extra": "^9.0.1",
     "jest": "^25.4.0",
     "jest-serializer-vue": "^2.0.2",
+    "jest-transform-stub": "^2.0.0",
     "prettier": "^1.19.1",
     "rimraf": "^3.0.2",
     "ts-node": "^8.10.2",
@@ -62,7 +62,7 @@
     "vue-router": "^4.0.0-beta.13"
   },
   "dependencies": {
-    "@babel/runtime": "^7.10.4",
+    "@babel/runtime": "^7.11.2",
     "ant-design-vue": "^2.0.0-beta.10",
     "lodash-es": "^4.17.15",
     "vue-types": "^3.0.1"

src/BasicLayout.tsx

-import { computed, App, FunctionalComponent, Plugin, CSSProperties } from 'vue';
+import { computed, FunctionalComponent, CSSProperties } from 'vue';
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
+import { withInstall } from 'ant-design-vue/es/_util/type';
 import { default as ProProvider, ProProviderData } from './ProProvider';
 import { default as GlobalFooter } from './GlobalFooter';
 import { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu';
@@ -29,7 +30,7 @@ export interface BasicLayoutProps {
 
   headerRender?: WithFalse<(props: any /* HeaderProps */) => RenderVNodeType>;
 
-  colSize?: string,
+  colSize?: string;
   /**
    * 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
    */
@@ -47,7 +48,7 @@ export interface BasicLayoutProps {
 export type ProLayoutProps = BasicLayoutProps &
   SiderMenuWrapperProps /* & HeaderProps & FooterProps */;
 
-const ProLayout: FunctionalComponent<ProLayoutProps> = (props, { emit, slots, attrs }) => {
+const ProLayout: FunctionalComponent<ProLayoutProps> = (props, { emit, slots }) => {
   const handleCollapse = (collapsed: boolean) => {
     emit('update:collapsed', collapsed);
   };
@@ -80,8 +81,7 @@ const ProLayout: FunctionalComponent<ProLayoutProps> = (props, { emit, slots, at
             onCollapse={handleCollapse}
           />
           <Layout>
-            <Layout.Header style="background: #fff; padding: 0; height: 48px; line-height: 48px;">
-            </Layout.Header>
+            <Layout.Header style="background: #fff; padding: 0; height: 48px; line-height: 48px;"></Layout.Header>
             <WrapContent
               style={{
                 margin: '24px 16px',
@@ -134,21 +134,15 @@ ProLayout.props = {
     type: String,
     default: 'ant-pro',
   },
-  'title': String,
-  'colSize': String,
-  'isChildrenLayout': Boolean,
-  'fixSiderbar': Boolean,
-  'layout': String,
-  'openKeys': Array,
-  'selectedKeys': Array,
-  'collapsed': Boolean,
-  'menuData': Array,
+  title: String,
+  colSize: String,
+  isChildrenLayout: Boolean,
+  fixSiderbar: Boolean,
+  layout: String,
+  openKeys: Array,
+  selectedKeys: Array,
+  collapsed: Boolean,
+  menuData: Array,
 } as any;
 
-
-// @ts-ignore
-ProLayout.install = function (app: App) {
-  app.component('pro-layout', ProLayout);
-};
-
-export default ProLayout as typeof ProLayout & Plugin;
+export default withInstall(ProLayout);

src/FooterToolbar/index.tsx

 import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, VNodeChild } from 'vue';
 import { useProProvider } from '../ProProvider';
 import { RouteContextProps, useRouteContext } from '../RouteContext';
-import { getComponent } from '../utils';
 import './index.less';
 
 export interface FooterToolbarProps {

src/GridContent/index.tsx

@@ -3,16 +3,13 @@ import { useProProvider } from '../ProProvider';
 import { PureSettings } from '../defaultSettings';
 import './GridContent.less';
 
-interface GridContentProps {
+export interface GridContentProps {
   contentWidth?: PureSettings['contentWidth'];
   prefixCls?: string;
   style?: CSSProperties;
 }
 
-const GridContent: FunctionalComponent<GridContentProps> = (
-  props,
-  { slots },
-) => {
+const GridContent: FunctionalComponent<GridContentProps> = (props, { slots }) => {
   const proConfig = useProProvider();
   const { contentWidth, getPrefixCls } = toRefs(proConfig);
   const customPrefixCls = props.prefixCls || getPrefixCls.value();

src/PageContainer/index.tsx

@@ -140,7 +140,6 @@ const defaultPageHeaderRender = (
     pageHeaderRender,
     header,
     extraContent,
-    prefixCls,
     ...restProps
   } = props;
   console.log('restProps', restProps);

src/SiderMenu/BaseMenu.tsx

@@ -113,6 +113,8 @@ export const VueBaseMenuProps = {
   },
 };
 
+const httpReg = /(http|https|ftp):\/\/([\w.]+\/?)\S*/;
+
 const renderTitle = (title: string | undefined, i18nRender: FormatMessage) => {
   return <span>{(i18nRender && title && i18nRender(title)) || title}</span>;
 };
@@ -120,8 +122,10 @@ const renderTitle = (title: string | undefined, i18nRender: FormatMessage) => {
 const renderMenuItem = (item: RouteProps, i18nRender: FormatMessage) => {
   const meta = Object.assign({}, item.meta);
   const target = meta.target || null;
-  const CustomTag: any = (target && 'a') || 'router-link';
-  const props = { to: { name: item.name }, href: item.path, target: target };
+  const hasRemoteUrl = httpReg.test(item.path)
+  const CustomTag: any = resolveComponent((target && 'a') || 'router-link');
+  const props = { to: { name: item.name } };
+  const attrs = (hasRemoteUrl || target) ? { href: item.path, target: target } : {};
   if (item.children && item.meta?.hideChildInMenu) {
     // 把有子菜单的 并且 父菜单是要隐藏子菜单的
     // 都给子菜单增加一个 hidden 属性
@@ -133,9 +137,9 @@ const renderMenuItem = (item: RouteProps, i18nRender: FormatMessage) => {
   // @ts-nocheck
   return (
     <Menu.Item key={item.path}>
-      <CustomTag {...props}>
+      <CustomTag {...attrs} {...props}>
         <LazyIcon icon={meta.icon} />
-        {renderTitle(meta.title!, i18nRender)}
+        {renderTitle(meta.title, i18nRender)}
       </CustomTag>
     </Menu.Item>
   );
@@ -151,7 +155,7 @@ const renderSubMenu = (item: RouteProps, i18nRender: FormatMessage) => {
   return (
     <Menu.SubMenu key={item.path} title={renderMenuContent}>
       {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}
-      {!item.meta?.hideChildInMenu && item.children!.map(cd => renderMenu(cd, i18nRender))}
+      {!item.meta?.hideChildInMenu && item.children.map(cd => renderMenu(cd, i18nRender))}
     </Menu.SubMenu>
   );
 };

tests/index.test.tsx

+import { mount } from '@vue/test-utils';
+
+describe('index', () => {
+
+  it('shoul render GridContent', () => {
+    // empty
+  });
+
+});