1.创建项目

  1. yarn create umi

image.png
解决，找到当前安装目录下的md文件删除c前面的部分
image.png

  1. create-umi

image.png
image.png

选择完成后 安装依赖 有点慢

  1. yarn或者yarn install

2.如何新建一个页面

2.1新增路由

  1. //config/route.ts
  2. export default [
  3.   {
  4.     path: '/',
  5.     component: '../layouts/BlankLayout',
  6.     routes: [
  7.       {
  8.         path: '/user',
  9.         component: '../layouts/UserLayout',
  10.         routes: [
  11.           {
  12.             name: 'login',
  13.             path: '/user/login',
  14.             component: './User/login',
  15.           },
  16.         ],
  17.       },
  18.       {
  19.         path: '/',
  20.         component: '../layouts/SecurityLayout',
  21.         routes: [
  22.           {
  23.             path: '/',
  24.             component: '../layouts/BasicLayout',
  25.             authority: ['admin', 'user'],
  26.             routes: [
  27.               {
  28.                 path: '/',
  29.                 redirect: '/welcome',
  30.               },
  31.               //这里是新增得路由页面
  32.               {
  33.               path:"/new",
  34.               icon:"PieChartOutlined",
  35.               name:'new',
  36.               component:'./News'
  37.               },
  38.               {
  39.                 path: '/welcome',
  40.                 name: 'welcome',
  41.                 icon: 'smile',
  42.                 component: './Welcome',
  43.               },
  44.               {
  45.                 path: '/admin',
  46.                 name: 'admin',
  47.                 icon: 'crown',
  48.                 component: './Admin',
  49.                 authority: ['admin'],
  50.                 routes: [
  51.                   {
  52.                     path: '/admin/sub-page',
  53.                     name: 'sub-page',
  54.                     icon: 'smile',
  55.                     component: './Welcome',
  56.                     authority: ['admin'],
  57.                   },
  58.                 ],
  59.               },
  60.               {
  61.                 name: 'list.table-list',
  62.                 icon: 'table',
  63.                 path: '/list',
  64.                 component: './TableList',
  65.               },
  66.               {
  67.                 component: './404',
  68.               },
  69.             ],
  70.           },
  71.           {
  72.             component: './404',
  73.           },
  74.         ],
  75.       },
  76.     ],
  77.   },
  78.   {
  79.     component: './404',
  80.   },
  81. ];

2.2配置国际化

  1. //locales/zh-CN/menu.ts
  2. export default {
  3.   'menu.welcome': '欢迎',
  4.   'menu.more-blocks': '更多区块',
  5.   'menu.home': '首页',
  6.   'menu.admin': '管理页',
  7.   'menu.admin.sub-page': '二级管理页',
  8.   'menu.login': '登录',
  9.   'menu.register': '注册',
  10.   'menu.register.result': '注册结果',
  11.   'menu.dashboard': 'Dashboard',
  12.   'menu.dashboard.analysis': '分析页',
  13.   'menu.dashboard.monitor': '监控页',
  14.   'menu.dashboard.workplace': '工作台',
  15.   'menu.exception.403': '403',
  16.   'menu.exception.404': '404',
  17.   'menu.exception.500': '500',
  18.   'menu.form': '表单页',
  19.   'menu.form.basic-form': '基础表单',
  20.   'menu.form.step-form': '分步表单',
  21.   'menu.form.step-form.info': '分步表单（填写转账信息）',
  22.   'menu.form.step-form.confirm': '分步表单（确认转账信息）',
  23.   'menu.form.step-form.result': '分步表单（完成）',
  24.   'menu.form.advanced-form': '高级表单',
  25.   'menu.list': '列表页',
  26.   'menu.list.table-list': '查询表格',
  27.   'menu.list.basic-list': '标准列表',
  28.   'menu.list.card-list': '卡片列表',
  29.   'menu.list.search-list': '搜索列表',
  30.   'menu.list.search-list.articles': '搜索列表（文章）',
  31.   'menu.list.search-list.projects': '搜索列表（项目）',
  32.   'menu.list.search-list.applications': '搜索列表（应用）',
  33.   'menu.profile': '详情页',
  34.   'menu.profile.basic': '基础详情页',
  35.   'menu.profile.advanced': '高级详情页',
  36.   'menu.result': '结果页',
  37.   'menu.result.success': '成功页',
  38.   'menu.result.fail': '失败页',
  39.   'menu.exception': '异常页',
  40.   'menu.exception.not-permission': '403',
  41.   'menu.exception.not-find': '404',
  42.   'menu.exception.server-error': '500',
  43.   'menu.exception.trigger': '触发错误',
  44.   'menu.account': '个人页',
  45.   'menu.account.center': '个人中心',
  46.   'menu.account.settings': '个人设置',
  47.   'menu.account.trigger': '触发报错',
  48.   'menu.account.logout': '退出登录',
  49.   'menu.editor': '图形编辑器',
  50.   'menu.editor.flow': '流程编辑器',
  51.   'menu.editor.mind': '脑图编辑器',
  52.   'menu.editor.koni': '拓扑编辑器',
  53.   //这里是新增得页面国际化
  54.   'menu.new':'新的页面'
  55. };

2.3配置导航头部

  1. //src/pages/News/index.tsx
  2. import React, { FC, useRef } from 'react';
  3. import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
  4. import { Button, Tag, Space, Menu, Dropdown } from 'antd';
  5. import type { ProColumns, ActionType } from '@ant-design/pro-table';
  6. import ProTable, { TableDropdown } from '@ant-design/pro-table';
  7. import request from 'umi-request';
  8. import { PageHeaderWrapper } from '@ant-design/pro-layout';
  10. type GithubIssueItem = {
  11.   url: string;
  12.   id: number;
  13.   number: number;
  14.   title: string;
  15.   labels: {
  16.     name: string;
  17.     color: string;
  18.   }[];
  19.   state: string;
  20.   comments: number;
  21.   created_at: string;
  22.   updated_at: string;
  23.   closed_at?: string;
  24. };
  25. const columns: ProColumns<GithubIssueItem>[] = [
  26.   {
  27.     dataIndex: 'index',
  28.     valueType: 'indexBorder',
  29.     width: 48,
  30.   },
  31.   {
  32.     title: '标题',
  33.     dataIndex: 'title',
  34.     copyable: true,
  35.     ellipsis: true,
  36.     tip: '标题过长会自动收缩',
  37.     formItemProps: {
  38.       rules: [
  39.         {
  40.           required: true,
  41.           message: '此项为必填项',
  42.         },
  43.       ],
  44.     },
  45.   },
  46.   {
  47.     title: '状态',
  48.     dataIndex: 'state',
  49.     filters: true,
  50.     onFilter: true,
  51.     valueType: 'select',
  52.     valueEnum: {
  53.       all: { text: '全部', status: 'Default' },
  54.       open: {
  55.         text: '未解决',
  56.         status: 'Error',
  57.       },
  58.       closed: {
  59.         text: '已解决',
  60.         status: 'Success',
  61.         disabled: true,
  62.       },
  63.       processing: {
  64.         text: '解决中',
  65.         status: 'Processing',
  66.       },
  67.     },
  68.   },
  69.   {
  70.     title: '标签',
  71.     dataIndex: 'labels',
  72.     search: false,
  73.     renderFormItem: (_, { defaultRender }) => {
  74.       return defaultRender(_);
  75.     },
  76.     render: (_, record) => (
  77.       <Space>
  78.         {record.labels.map(({ name, color }) => (
  79.           <Tag color={color} key={name}>
  80.             {name}
  81.           </Tag>
  82.         ))}
  83.       </Space>
  84.     ),
  85.   },
  86.   {
  87.     title: '创建时间',
  88.     key: 'showTime',
  89.     dataIndex: 'created_at',
  90.     valueType: 'date',
  91.     sorter: true,
  92.     hideInSearch: true,
  93.   },
  94.   {
  95.     title: '创建时间',
  96.     dataIndex: 'created_at',
  97.     valueType: 'dateRange',
  98.     hideInTable: true,
  99.     search: {
  100.       transform: (value) => {
  101.         return {
  102.           startTime: value[0],
  103.           endTime: value[1],
  104.         };
  105.       },
  106.     },
  107.   },
  108.   {
  109.     title: '操作',
  110.     valueType: 'option',
  111.     render: (text, record, _, action) => [
  112.       <a
  113.         key="editable"
  114.         onClick={() => {
  115.           action?.startEditable?.(record.id);
  116.         }}
  117.       >
  118.         编辑
  119.       </a>,
  120.       <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
  121.         查看
  122.       </a>,
  123.       <TableDropdown
  124.         key="actionGroup"
  125.         onSelect={() => action?.reload()}
  126.         menus={[
  127.           { key: 'copy', name: '复制' },
  128.           { key: 'delete', name: '删除' },
  129.         ]}
  130.       />,
  131.     ],
  132.   },
  133. ];
  135. const menu = (
  136.   <Menu>
  137.     <Menu.Item key="1">1st item</Menu.Item>
  138.     <Menu.Item key="2">2nd item</Menu.Item>
  139.     <Menu.Item key="3">3rd item</Menu.Item>
  140.   </Menu>
  141. );
  142. const New: FC = () => {
  143.   const actionRef = useRef<ActionType>();
  144.   return (
  145.     <PageHeaderWrapper>
  146.       <ProTable<GithubIssueItem>
  147.         columns={columns}
  148.         actionRef={actionRef}
  149.         request={async (params = {}, sort, filter) => {
  150.           console.log(sort, filter);
  151.           return request<{
  152.             data: GithubIssueItem[];
  153.           }>('https://proapi.azurewebsites.net/github/issues', {
  154.             params,
  155.           });
  156.         }}
  157.         editable={{
  158.           type: 'multiple',
  159.         }}
  160.         rowKey="id"
  161.         search={{
  162.           labelWidth: 'auto',
  163.         }}
  164.         form={{
  165.           // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
  166.           syncToUrl: (values, type) => {
  167.             if (type === 'get') {
  168.               return {
  169.                 ...values,
  170.                 created_at: [values.startTime, values.endTime],
  171.               };
  172.             }
  173.             return values;
  174.           },
  175.         }}
  176.         pagination={{
  177.           pageSize: 5,
  178.         }}
  179.         dateFormatter="string"
  180.         headerTitle="高级表格"
  181.         toolBarRender={() => [
  182.           <Button key="button" icon={<PlusOutlined />} type="primary">
  183.             新建
  184.           </Button>,
  185.           <Dropdown key="menu" overlay={menu}>
  186.             <Button>
  187.               <EllipsisOutlined />
  188.             </Button>
  189.           </Dropdown>,
  190.         ]}
  191.       />
  192.     </PageHeaderWrapper>
  193.   );
  194. };
  196. export default New;