umi初始化+标签页

1.复制内容的函数封装：对于网站是否安全时，浏览器可能不允许访问navigator，导致复制失败，这时候将新旧复制方式都兼容了起来，保证都可以进行成功复制。

export const copyText = async (text) => {
  // 修改之前：只通过navigator
  navigator.clipboard
    .writeText(text)
    .then(() => {
      message.success('复制成功');
    })
    .catch(() => {
      message.success('复制失败，请再试');
    });
  // 修改之后：navigator和createElement两种方式都兼顾
  if (navigator.clipboard && window.isSecureContext) {
    message.success('复制成功');
    return navigator.clipboard.writeText(text);
  } else {
    const textArea = document.createElement('textarea');
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    message.success('复制成功');
    return new Promise((res, rej) => {
      document.execCommand('copy') ? res() : rej();
      textArea.remove();
    });
  }
};

1.标签页调试代码相关

import { ImmerReducer } from 'umi';

export interface TabsModelState {
  tabsItems: {
    label: string;
    key: string;
    closable?: boolean;
  }[];
}

export interface TabsModelType {
  namespace: 'globalTabs';
  state: TabsModelState;
  reducers: {
    addItems: ImmerReducer<TabsModelState>;
    removeItems: ImmerReducer<TabsModelState>;
  };
}

const TabsModel: TabsModelType = {
  namespace: 'globalTabs',
  state: {
    tabsItems: [
      {
        label: '主页',
        key: '/home',
        closable: false,
      },
    ],
  },

  reducers: {
    addItems(state, action) {
      state.tabsItems.push(action.payload);
    },
    removeItems(state, action) {
      state.tabsItems = state.tabsItems.filter(
        (item) => item?.key !== action.payload.key,
      );
    },
  },
};

export default TabsModel;

import React, { useState, useEffect, FC } from 'react';
import { Tabs } from 'antd';
import { HomeOutlined, RadiusSettingOutlined, UsergroupAddOutlined } from '@ant-design/icons';
import { history, ConnectProps, connect } from 'umi';
import './headTabs.less';
import type { TabsModelState } from '@/models/tabs/globelTabs';

export const routes = [
  {
    path: '/home',
    name: '主页',
    icon: <HomeOutlined />
  },
  {
    path: '/config',
    name: '配置',
    icon: <RadiusSettingOutlined />
  },
  {
    path: '/config/user',
    name: '人员配置',
  },
  {
    path: '/manage',
    name: '管理',
    icon: <UsergroupAddOutlined />
  },
];


interface PageProp extends Partial<ConnectProps> {
  globalTabs: TabsModelState
}

const HeadTabs: FC<PageProp> = ({ globalTabs, dispatch }) => {
  const { tabsItems } = globalTabs;
  const [activeKey, setAciveKey] = useState(tabsItems[0]?.key);
  const onTabsChange = (newActiveKey: string) => {
    setAciveKey(newActiveKey);
    history.push(newActiveKey);
  }
  const onTabsEdit = (targetKey: unknown, action: 'add' | 'remove') => {
    if (action === 'remove') {
      dispatch!({
        type: 'globalTabs/removeItems',
        payload: {
          key: targetKey
        }
      })
      if (targetKey === history.location.pathname) {
        setAciveKey(tabsItems[0]?.key);
        history.push(tabsItems[0]?.key);
      }
    }
  }
  useEffect(() => {
    const newActiveKey = history.location.pathname;
    setAciveKey(newActiveKey);
    const isActiveKey = tabsItems.findIndex(item => item.key === newActiveKey);
    if (isActiveKey === -1) {
      dispatch!({
        type: 'globalTabs/addItems',
        payload: {
          label: routes.find(item => item?.path === newActiveKey)?.name,
          key: newActiveKey
        }
      })
    }
  }, [history])

  return (
    <Tabs
      hideAdd
      className='headTabs'
      type="editable-card"
      onChange={onTabsChange}
      activeKey={activeKey}
      onEdit={onTabsEdit}
      items={tabsItems.map((item: any) => ({ ...item, label: <span>{routes.find((val) => val?.path === item?.key)?.icon}{item?.label}</span> }))}
    />
  )
}
const mapPropToState = ({ globalTabs }: { globalTabs: TabsModelState }) => ({
  globalTabs
})
export default connect(mapPropToState)(HeadTabs);