fangzhengjin / umi-plugin-panel-tabs

umi-plugin-panel-tabs
MIT License
86 stars 20 forks source link

是否可以支持一下动态路由呢? #24

Closed wecomgroup closed 2 years ago

wecomgroup commented 2 years ago

似乎目前并不支持服务器动态路由

wecomgroup commented 2 years ago

routes文件中添加路由配置之后,动态路由也会生效,但是不会自动翻译

wecomgroup commented 2 years ago
import React, { useEffect, useRef, useState } from 'react';
{{{ #useI18n }}}
import { useIntl, useHistory, useLocation,FormattedMessage } from 'umi';
{{{ /useI18n }}}
{{{ ^useI18n }}}
import { useHistory, useLocation } from 'umi';
{{{ /useI18n }}}
// @ts-ignore
import type { CachingNode } from 'react-activation';
import { Badge, Dropdown, Menu, Tag } from 'antd';
import usePanelTab from './PanelTabHook';

const PanelTab: React.FC<{ node: CachingNode }> = ({ node }) => {
  {{{ #useI18n }}}
  const intl = useIntl();
  {{{ /useI18n }}}
  const panelTabRef = useRef<HTMLSpanElement>();
  const { close, closeOther, refresh, closeAll } = usePanelTab();
  const history = useHistory();
  const location = useLocation();
  const [nodeCache, setNodeCache] = useState<{ name: string; path: string }>({
    name: node.name!!,
    path: node.location.pathname,
  });

  const isActive = location.pathname === node.location.pathname;

  // 第二次打开同名但是不同地址的页签时, 刷新页签内容
  useEffect(() => {
    if (nodeCache.name === node.name && nodeCache.path !== node.location.pathname) {
      setNodeCache({ name: node.name!!, path: node.location.pathname });
      refresh({ name: node.name, location: node.location });
    }
    if (isActive && panelTabRef.current) {
      // 父元素信息
      const parentNode = panelTabRef.current?.parentElement;
      // 获取元素信息
      const parentNodeBCR = parentNode?.getBoundingClientRect();
      const currentNodeBCR = panelTabRef.current?.getBoundingClientRect();
      // 元素被遮挡在左侧, 向右滚动
      if (currentNodeBCR.left < parentNodeBCR.left) {
        parentNode.scrollLeft -= parentNodeBCR.left - currentNodeBCR.left + currentNodeBCR.width;
      }
      // 元素被遮挡在右侧, 向左滚动
      if (currentNodeBCR.right > parentNodeBCR.right) {
        parentNode.scrollLeft += currentNodeBCR.right - parentNodeBCR.right + currentNodeBCR.width;
      }
    }
  }, [node.location.pathname]);

  return (
    <Dropdown
      overlay={
        <Menu>
          <Menu.Item
            style={{ fontSize: '12px', padding: '0px 12px' }}
            key="closeSelf"
            onClick={() => close({ name: node.name!!, location: node.location })}
          >
            {{{ #useI18n }}}
            {intl.formatMessage({id: 'panelTab.close', defaultMessage: '关闭'})}
            {{{ /useI18n }}}
            {{{ ^useI18n }}}
            关闭
            {{{ /useI18n }}}
          </Menu.Item>
          <Menu.Item
            style={{ fontSize: '12px', padding: '0px 12px' }}
            key="closeOther"
            onClick={() => closeOther({ name: node.name!!, location: node.location })}
          >
            {{{ #useI18n }}}
            {intl.formatMessage({id: 'panelTab.closeOther', defaultMessage: '关闭其他'})}
            {{{ /useI18n }}}
            {{{ ^useI18n }}}
            关闭其他
            {{{ /useI18n }}}
          </Menu.Item>
          <Menu.Item
            style={{ fontSize: '12px', padding: '0px 12px' }}
            key="closeAll"
            onClick={closeAll}
          >
            {{{ #useI18n }}}
            {intl.formatMessage({id: 'panelTab.closeAll', defaultMessage: '关闭所有'})}
            {{{ /useI18n }}}
            {{{ ^useI18n }}}
            关闭所有
            {{{ /useI18n }}}
          </Menu.Item>
          <Menu.Divider style={{ fontSize: '12px', padding: '0px 12px' }} />
          <Menu.Item
            style={{ fontSize: '12px', padding: '0px 12px' }}
            key="refreshSelf"
            onClick={() => refresh({ name: node.name!!, location: node.location })}
          >
            {{{ #useI18n }}}
            {intl.formatMessage({id: 'panelTab.refresh', defaultMessage: '刷新'})}
            {{{ /useI18n }}}
            {{{ ^useI18n }}}
            刷新
            {{{ /useI18n }}}
          </Menu.Item>
        </Menu>
      }
      trigger={['contextMenu']}
    >
      <Tag
        ref={panelTabRef}
        style={{
          height: '26px',
          marginTop: '5px',
          textAlign: 'center',
          lineHeight: '23px',
          fontSize: '12px',
          cursor: 'default',
        }}
        color={isActive ? '#1890ff' : 'default'}
        onClick={() => history.push(node.location)}
        closable
        onClose={(e) => {
          e.preventDefault();
          close({ name: node.name!!, location: node.location });
        }}
      >
        {isActive && <Badge color="#FFFFFF" dot />}
        <FormattedMessage id={node.name} />
      </Tag>
    </Dropdown>
  );
};

export default PanelTab;
wecomgroup commented 2 years ago

@fangzhengjin 同学,麻烦支持一下更新