fangzhengjin / umi-plugin-panel-tabs Goto Github PK

在 src/access.ts 配置的权限，无论返回 true 或 false 都会403，在最新版 0.0.26

// 路由配置
{
          name: 'SerialNumberQuery',
          icon: 'smile',
          path: '/StockControl/SerialNumberQuery',
          component: './StockControl/SerialNumberQuery',
}

接口返回如下：

{
          "id":1100,
          "gmtCreate":"2022-02-15 11:26:19",
          "gmtModified":"2022-02-15 11:26:19",
          "isDeleted":0,
          "menuName":"库存管理",
          "name":"StockControl",
          "path":"StockControl",
          "icon":"dashboard",
          "parentId":0,
          "type":0,
          "check":0,
          "status":1,
          "priority":0,
          "redirect":null,
          "remark":"",
          "en":"",
          "routes":[
              {
                  "id":1105,
                  "gmtCreate":"2022-02-22 14:29:34",
                  "gmtModified":"2022-02-22 14:29:34",
                  "isDeleted":0,
                  "menuName":"SerialNumberQuery",
                  "name":"SerialNumberQuery",
                  "path":"/StockControl/SerialNumberQuery",
                  "icon":"smile",
                  "parentId":1100,
                  "type":0,
                  "check":0,
                  "status":1,
                  "priority":0,
                  "redirect":null,
                  "remark":null,
                  "en":null,
                  "routes":null
              }
      ]
}

在app.jsx中使用menu：

import { PageLoading } from '@ant-design/pro-layout';
import { history, Link } from 'umi';
import RightContent from '@/components/RightContent';
import Footer from '@/components/Footer';
import { currentUser as queryCurrentUser } from './services/ant-design-pro/api';
import { BookOutlined, LinkOutlined } from '@ant-design/icons';
import fixMenuItemIcon from './utils/fixMenuItemIcon';
const isDev = process.env.NODE_ENV === 'development';
const loginPath = '/user/login';
/** 获取用户信息比较慢的时候会展示一个 loading */
let menuData = [];

export const initialStateConfig = {
  loading: <PageLoading />,
};
/**
 * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
 * */

export async function getInitialState() {
  const fetchUserInfo = async () => {
    try {
      const msg = await queryCurrentUser();
      msg.data.data.menuData = [...msg.data.data.menuData];
      menuData = msg && msg.data && msg.data.data && msg.data.data.menuData;
      return msg.data;
    } catch (error) {
      history.push(loginPath);
    }

    return undefined;
  }; // 如果是登录页面，不执行

  if (history.location.pathname !== loginPath) {
    const currentUser = await fetchUserInfo();
    return {
      fetchUserInfo,
      currentUser,
      settings: {},
    };
  }

  return {
    fetchUserInfo,
    settings: {},
  };
} // ProLayout 支持的api https://procomponents.ant.design/components/layout

export const layout = ({ initialState }) => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    waterMarkProps: {
      content: initialState?.currentUser?.user?.userName,
    },
    menu: {
      // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
      params: {
        userId: initialState?.currentUser?.user?.id,
      },
      request: async (params, defaultMenuData) => {
        // initialState.currentUser 中包含了所有用户信息

        return menuData;
      },
    },
    footerRender: () => <Footer />,
    onPageChange: () => {
      const { location } = history; // 如果没有登录，重定向到 login

      if (!initialState?.currentUser && location.pathname !== loginPath) {
        history.push(loginPath);
      }
    },
    links: isDev
      ? [
          // <Link to="/umi/plugin/openapi" target="_blank">
          //   <LinkOutlined />
          //   <span>OpenAPI 文档</span>
          // </Link>,
          // <Link to="/~docs">
          //   <BookOutlined />
          //   <span>业务组件文档</span>
          // </Link>,
        ]
      : [],
    menuHeaderRender: undefined,
    menuDataRender: () => fixMenuItemIcon(menuData),
    disableContentMargin: true,
    // 自定义 403 页面
    // unAccessible: <div>unAccessible</div>,
    ...initialState?.settings,
  };
};

然后在顶部多页tab中不能正常显示菜单的中英文，只能显示菜单的 name属性里面的文案

bug 描述

修改主题色后无法应用到Tab

复现步骤

本周找到了您书写的插件，功能十分齐全，得到了很大的帮助，非常感谢您的无私分享。正式使用后，产生一个小小的疑惑，那就是关闭所有页签后，会展示404页面，交互不太友好，是否考虑给一个固定页签的配置，使它不可关闭呢？类似假如配置了一个默认路由（比如我的账号/我的信息页），则此页面固定在第一个页签，不允许进行单页或多页的关闭操作，当前若无其他页签，则定位到这个默认页。或者还有一个思路是当前若无其他页签，则默认打开路由中第一个页签。
小小的反馈，不知有无打扰到您，期待您的答复，再次表达十分的感谢。

问题描述

我的是自定义layout布局，在使用插件的时候报错 error:【An id must be provided to format a message.】

22mf-va_remoteEntry.js:915 Uncaught (in promise) Error: Module "./react-activation" does not exist in container.
while loading "./react-activation" from webpack/container/reference/mf
at mf-va_remoteEntry.js:915:11
(anonymous) @ mf-va_remoteEntry.js:915
DevTools failed to load source map: Could not parse content for http://localhost:8000/react-router.js.map: Unexpected token < in JSON at position 0
mf-va_remoteEntry.js:915 Uncaught (in promise) Error: Module "./react-activation" does not exist in container.
while loading "./react-activation" from webpack/container/reference/mf
at mf-va_remoteEntry.js:915:11
(anonymous) @ mf-va_remoteEntry.js:915
2DevTools failed to load source map: Could not parse content for http://localhost:8000/index.js.map: Unexpected token < in JSON at position 0
3mf-va_remoteEntry.js:915 Uncaught (in promise) Error: Module "./E:/psi/psi-ui/node_modules/warning/warning.js" does not exist in container.
while loading "./E:/psi/psi-ui/node_modules/warning/warning.js" from webpack/container/reference/mf
at mf-va_remoteEntry.js:915:11
(anonymous) @ mf-va_remoteEntry.js:915
DevTools failed to load source map: Could not parse content for http://localhost:8000/invariant.js.map: Unexpected token < in JSON at position 0

antd design pro 5我安装了这个插件，报错了，请问怎么解决呢(公司不能上传截图。。。)

国际化显示有问题：

route配置：

  {
    path: '/sync/dashboard',
    name: 'dashboard',
    icon: 'dashboard',
    component: './sync/Dashboard',
  },
  {
    path: '/sync/task',
    name: 'task',
    icon: 'cloudSync',
    component: './sync/Dashboard',
  },

config配置：
panelTab: {
use404: true,
useAuth: true,
autoI18n: true
},

i18n内容：
'menu.sync': '数据同步',
'menu.sync.dashboard': '任务大盘',
'menu.sync.task': '同步任务',

显示内容：

目前退出登录，再次登录，还会显示上一次已存在的tabs

在logout()中調用 closeAll() 钩子就ok

可否能更友好的处理报错信息？

1. 有示例代码吗?

演示代码在 demo 分支

2. 配置后标签栏位置出现了偏移

请在 app.tsx 的 layout 方法中添加 disableContentMargin: true 配置

3. 登录页出现了标签页怎么办？

登录页不要在路由写 name, 有 name 就有标签页，或者在 name 下方再加一个配置，hideInPanelTab: true,也可以在标签中隐藏

4. 提示 @umijs/plugin-access is already registered

可能是你使用的umijs版本太新了!!!
当前新版默认不再约定使用access.ts自动开启, 尝试在config.ts中添加access: {}试试~
详见umijs/plugins#779

5. 需要自定义控制缓存?

请参阅依赖 umi-plugin-keep-alive 与 react-activation

6. 项目中使用了国际化菜单, 标签没有国际化？

该插件默认不开启国际化模式, 需要在config.ts中配置打开autoI18n: true

7. 列表页在标签下方出现了标题和面包屑, 怎么去掉？

在对应页面中给PageContainer增加两个属性title={false} breadcrumb={undefined}

8. 标签页上方的header随页面滚动, 怎么固定?

defaultSettings.ts中fixedHeader: true

9. 怎么将面包屑放到标签栏上方的header中?

在app.ts的layout函数中返回值加入headerContentRender: () => <ProBreadcrumb />

官网安装的的antd pro v5，使用了此插件，在 列表页/搜索列表/搜索列表（文章） 页面会出现两个 多页签tabs 的实例，这是属于bug吗(抱歉公司网络没法发图)

需求描述

添加打开并刷新重载指定标签的hook

解决方案

其他信息

bug 描述

复现步骤

期望结果

复现代码

© 版本信息

• Ant Design Pro 版本: [e.g. 4.0.0]
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

其他信息

需求描述

解决方案

其他信息

需求描述

解决方案

标签栏和菜单栏标题不一样，请问是哪里出现问题了

其他信息

e.g. 某个tab里有一个websocket连接，希望关闭tab之后这个连接可以自动或者手动断开，有什么好的办法吗，目前这个连接会一直维持下去

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

与 #2 相同的问题，我用的是ant design pro V5，如果增加 @umijs/plugin-access 依赖会报错

plugin @umijs/plugin-access is already registered by /node_modules/@umijs/plugin-access/lib/index.js, plugin from
/node_modules/@umijs/plugin-access/lib/index.js register failed.

如果不增加依赖，就会报 #2

panelTab: { use404: true, useAuth: true, autoI18n: true, tabsLimit: 10, tabsLimitWait: 500, tabsLimitWarnTitle: <FormattedMessage id="panelTab.tabsLimitWarnTitle" />, tabsLimitWarnContent: <FormattedMessage id="panelTab.tabsLimitWarnContent" />, },

bug 描述

    authorize1: true,
    authorize2: () => true,

access.ts中 authorize1返回true的可以正常显示，authorize2 ()=>true 会403

复现步骤

拉取最新干净的demo分支代码。

access.ts中添加代码:

    authorize1: true,
    authorize2: () => true,

routes.ts

      {
        name: 'basic-form',
        icon: 'smile',
        path: '/form/basic-form',
        access: 'authorize1',
        component: './form/basic-form',
      },
      {
        name: 'step-form',
        icon: 'smile',
        access: 'authorize2',
        path: '/form/step-form',
        component: './form/step-form',
      },

basic-form 可正常显示；step-form 403了。

期望结果

authorize1 与 authorize2页面可在返回true时正常显示

复现代码

https://github.com/FullStackPlan/umi-plugin-panel-tabs-bug

© 版本信息

与最新demo分支完全一致

其他信息

问题描述

Readme里也没写。

使用 ProTable BetaSchemaForm 的朋友们，一定要用手动控制缓存 useAliveController
在编辑成功后，一定要 refresh(headerTitle)，不然再次编辑是空白的

登录前后建议都 clear 一下缓存。

插件做得很不错。
一个小小的建议：因为使用者可能会需要手动控制缓存，例如import { useAliveController } from 'umi'，所以建议补充一下react-activation相关的内容或链接，这样功能可能会更直观一点。

bug 描述

针对ant-design弹出层(包括Modal、select下拉框弹出层等)，点击浏览器自带返回
按钮，弹出层保留在页面上，并且不能操作

复现步骤

演示Demohttps://vibrant-leakey-d5b34a.netlify.app/list
点击【查询表格】->点击【新建】按钮->点击浏览器自带返回按钮->此时新增按钮继续保留在页面上，并且不能做任何操作

期望结果

浏览器返回时清除上一页面残留弹出层

问题描述

在谷歌浏览器测试正常，在IE下不能正常使用，提示错误"“SVGGraphicsElement”未定义

本地环境：
"umi": "^3.5.0",
"antd": "^4.17.0",
"@ant-design/pro-cli": "^2.1.0",

其他信息

tab行最右侧的两个箭头似乎没有作用

bug 描述

routes.js 中的 icon 无法正常显示。

© 版本信息

"@ant-design/icons": "^4.7.0",
"antd": "^4.19.0",
"umi": "^3.5.0"

删除这个插件后，恢复正常

"umi": "^3.5.17"
"antd": "^4.14.0"
脚手架用的的antd-pro V5

当关闭所有标签时希望有一个全局提示

bug 描述

使用antd prov5的access时，会使路由权限失败

复现步骤

期望结果

请更新umi-plugin-keep-alive依赖到最新版本，这个版本解决了这个bug

复现代码

© 版本信息

• Ant Design Pro 版本: [e.g. 4.0.0]
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

其他信息

支持打开多个详情页

如 /test?id=1，/test?id=2 都能展示。目前是参数不同的情况，只能打开一个详情页。

解决方案

其他信息

bug 描述

    "umi": "^3.5.0",
    "umi-plugin-panel-tabs": "^0.0.28",
    "umi-serve": "^1.9.10",
    "use-subscription": "^1.8.0",

复现步骤

期望结果

复现代码

© 版本信息

• Ant Design Pro 版本: [e.g. 4.0.0]
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

其他信息

需求描述

fatal - Error: Register plugin D:/mywork/github/ant-design/ant-design-pro/node_modules/@umijs/plugins/dist/access.js failed, since Cannot find module 'umi/plugin-utils'
Require stack:

• D:\mywork\github\ant-design\ant-design-pro\node_modules@umijs\plugins\dist\utils\withTmpPath.js
• D:\mywork\github\ant-design\ant-design-pro\node_modules@umijs\plugins\dist\access.js

解决方案

其他信息

不能定义它的样式吗比如换颜色换图标这些

1.这里圈红的地方应该定义成string类型
2.希望支持标签国际化

问题描述

    "umi": "^3.5.0",
    "umi-plugin-panel-tabs": "^0.0.28",

routes.ts

  {
    path: '/h53deditor',
    name: 'h53deditor',
    icon: 'form',
    component: './editor/H53DEditor/index.router.tsx',
    // hideInPanelTab: true,
    hideInMenu: true,
  },

业务模块

import { history, Link } from 'umi';
import { usePanelTab } from 'umi';
  const {
    close,
    closeCurrent,
    closeOther,
    refresh,
    refreshCurrent,
    closeAll,
    refreshAndCloseCurrent,
    refreshAndCloseCurrentAndSwitch,
  } = usePanelTab();

close({ name: 'h53deditor', location: { pathname: '/h53deditor' } });
refresh({ name: 'h53deditor', location: { pathname: '/h53deditor' } });
这两个hook，我用错了么，没有效果；

history.push('/h53deditor');
这句我使用是正常的。

示例代码

其他信息

问题描述

1.yarn add umi-plugin-panel-tabs
2.自动加载umi-plugin
3.umirc.ts中添加panelTab配置
4.根据后台返回的动态路由显示路由列表
5.现在的问题是不知道怎么在页面上添加panelwrapper layout 请指教

示例代码

其他信息

// access.js

export default function access(initialState) {
  const { currentUser, hasRoutes = [] } = initialState || {};
  debugger
  return {
    // canAdmin: currentUser && currentUser.access === 'admin',
    // normalRouteFilter: (route) => hasRoutes.includes(route && route.name),
    normalRouteFilter: (route) => hasRoutes.includes(route.name),
    touristRole: true
  };
}

//路由配置

{
      path: '/dashboard',
      name: 'dashboard',
      icon: 'dashboard',
      access: 'normalRouteFilter',
      routes: [
        {
          path: '/dashboard',
          redirect: '/dashboard/analysis',
        },
        {
          name: 'monitor',
          access: 'normalRouteFilter',
          icon: 'smile',
          path: '/dashboard/monitor',
          component: './dashboard/monitor',
        },
      ],
    },

// app.jsx 中的 getInitialState

const hasRoutes = ['dashboard','monitor']
  // if (history.location.pathname !== loginPath) {
    const currentUser = await fetchUserInfo();
    return {
      fetchUserInfo,
      currentUser,
      hasRoutes,
      settings: {},
 };

是不是此插件跟antd pro v5有冲突导致呢？应该如何解决此问题呢？谢谢
@fangzhengjin

问题描述

我左边的菜单是可以正常汉化，但是tab上的一直还是显示未汉化的内容。
菜单是从后台动态返回的

其他信息

需求描述

使用antdpro V4源码 出现标签栏标题不一致

解决方案

其他信息

需求描述

你好，能提供一个选项，彻底关闭i18n国际化吗

当使用antd-pro v5，彻底关闭了国际化时，使用此插件可正常使用，但是会有menu国际化没有配置的警告。可否像layout那样增加一个配置，类似于
layout: {
locale: false
},
可以关闭此插件的国际化

解决方案

其他信息

在上面设置了 marginTop: 60 但是 PanelTabs 实际的高度只有 38，这里导致了标签与底部的内容产生了一段空白区域，看起来不太友好

页签显示的名称还是router.name中的英文名，而不是中文名，请问是什么原因呢

同一详情页展示不同内容时新开一个标签, 不覆盖当前标签

bug 描述

滚动条下拉时标签条定位在固定位置

复现步骤

• 滚动条下拉时多标签条定位在固定位置

1. https://vibrant-leakey-d5b34a.netlify.app/list
2. 下拉滚动条即可

• 登录页也会展示多标签条

1. antd pro cli工具（@ant-design/pro-cli）初始化项目时选择全量脚手架
2. 启动项目，在登陆页即会展示多标签条

© 版本信息

• Ant Design Pro 版本: 5
• umi 版本：3.5
• 浏览器环境：edge 100
• 开发环境 : windows