how to umi plugin panel tabs

To use the `umi-plugin-panel-tabs` plugin in UmiJS, you need to follow these steps:

1. Install the plugin using the following command:

npm install umi-plugin-panel-tabs --save-dev

2. Configure the plugin in the `.umirc.js` file:

export default {
  plugins: [
    ['umi-plugin-panel-tabs', {
      // configuration options
    }]
  ]
}

3. Create a layout component that wraps your main application component:

import React from 'react';
import { Tabs } from 'antd';

const { TabPane } = Tabs;

export default props => {
  const { children } = props;

  return (
    <div>
      <Tabs>
        <TabPane tab="Panel 1" key="1">
          {children}
        </TabPane>
        <TabPane tab="Panel 2" key="2">
          {/* Add another panel */}
        </TabPane>
      </Tabs>
    </div>
  );
};

4. Wrap your main application component with the layout component:

import React from 'react';
import { connect } from 'dva';
import styles from './index.css';
import Layout from '../components/Layout';

function IndexPage(props) {
  return (
    <Layout>
      <div className={styles.normal}>
        <h1 className={styles.title}>Welcome to UmiJS!</h1>
      </div>
    </Layout>
  );
}

export default connect()(IndexPage);

Now you should see a tabbed panel interface in your application. You can add more tabs by adding additional `TabPane` components to the `Tabs` component in the layout component.