demo: refactor components to use Ant Design v6 new APIs (#11746)

src/pages/account/center/index.tsx

@@ -83,7 +83,6 @@ const TagList: React.FC<{
   const showInput = () => {
     setInputVisible(true);
     if (ref.current) {
-      // eslint-disable-next-line no-unused-expressions
       ref.current?.focus();
     }
   };

src/pages/chatbot/index.tsx

@@ -156,10 +156,8 @@ const ChatbotPage: React.FC = () => {
   const [activeKey, setActiveKey] = useState<string>('default');
   const [inputValue, setInputValue] = useState('');
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const provider = useMemo(() => createChatProvider() as any, []);
   const { onRequest, abort, isRequesting, parsedMessages } = useXChat<
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     any,
     ParsedMessage
   >({

src/pages/form/advanced-form/index.tsx

@@ -105,7 +105,9 @@ const AdvancedForm: FC<Record<string, any>> = () => {
         <Popover
           title="表单校验信息"
           content={errorList}
-          overlayClassName={styles.errorPopover}
+          classNames={{
+            root: styles.errorPopover,
+          }}
           trigger="click"
           getPopupContainer={(trigger: HTMLElement) => {
             if (trigger?.parentNode) {

src/pages/form/step-form/index.tsx

@@ -25,28 +25,23 @@ const StepDescriptions: React.FC<{
   bordered?: boolean;
 }> = ({ stepData, bordered }) => {
   const { payAccount, receiverAccount, receiverName, amount } = stepData;
-  return (
-    <Descriptions column={1} bordered={bordered}>
-      <Descriptions.Item label="付款账户"> {payAccount}</Descriptions.Item>
-      <Descriptions.Item label="收款账户"> {receiverAccount}</Descriptions.Item>
-      <Descriptions.Item label="收款人姓名"> {receiverName}</Descriptions.Item>
-      <Descriptions.Item label="转账金额">
+  const items = [
+    { key: 'payAccount', label: '付款账户', children: payAccount },
+    { key: 'receiverAccount', label: '收款账户', children: receiverAccount },
+    { key: 'receiverName', label: '收款人姓名', children: receiverName },
+    {
+      key: 'amount',
+      label: '转账金额',
+      children: (
         <Statistic
           value={amount}
-          suffix={
-            <span
-              style={{
-                fontSize: 14,
-              }}
-            >
-              元
-            </span>
-          }
+          suffix={<span style={{ fontSize: 14 }}>元</span>}
           precision={2}
         />
-      </Descriptions.Item>
-    </Descriptions>
-  );
+      ),
+    },
+  ];
+  return <Descriptions column={1} bordered={bordered} items={items} />;
 };
 const StepResult: React.FC<{
   onFinish: () => Promise<void>;
@@ -191,7 +186,7 @@ const StepForm: React.FC<Record<string, any>> = () => {
               <Alert
                 closable
                 showIcon
-                message="确认转账后，资金将直接打入对方账户，无法退回。"
+                title="确认转账后，资金将直接打入对方账户，无法退回。"
                 style={{
                   marginBottom: 24,
                 }}

src/pages/profile/advanced/index.tsx

@@ -10,6 +10,7 @@ import {
   RouteContext,
 } from '@ant-design/pro-components';
 import { useQuery } from '@tanstack/react-query';
+import type { DescriptionsProps } from 'antd';
 import {
   Badge,
   Button,
@@ -25,7 +26,7 @@ import {
   Table,
   Tooltip,
 } from 'antd';
-import { clsx } from 'clsx';
+import type { IconRenderType, StepsProps } from 'antd/es/steps';
 import type { FC } from 'react';
 import React, { useState } from 'react';
 import type { AdvancedProfileData } from './data.d';
@@ -145,6 +146,119 @@ const columns = [
     key: 'memo',
   },
 ];
+const descriptionItems: DescriptionsProps['items'] = [
+  { key: '1', label: '创建人', children: '曲丽丽' },
+  { key: '2', label: '订购产品', children: 'XX 服务' },
+  { key: '3', label: '创建时间', children: '2017-07-07' },
+  { key: '4', label: '关联单据', children: <a href="">12421</a> },
+  { key: '5', label: '生效日期', children: '2017-07-07 ~ 2017-08-08' },
+  { key: '6', label: '备注', children: '请于两个工作日内确认' },
+];
+const userInfoItems: DescriptionsProps['items'] = [
+  { key: '1', label: '用户姓名', children: '付小小' },
+  { key: '2', label: '会员卡号', children: '32943898021309809423' },
+  { key: '3', label: '身份证', children: '3321944288191034921' },
+  { key: '4', label: '联系方式', children: '18112345678' },
+  {
+    key: '5',
+    label: '联系地址',
+    children: '曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口',
+  },
+];
+const infoGroupItems: DescriptionsProps['items'] = [
+  { key: '1', label: '某某数据', children: '725' },
+  { key: '2', label: '该数据更新时间', children: '2017-08-08' },
+  {
+    key: '3',
+    label: (
+      <span>
+        某某数据
+        <Tooltip title="数据说明">
+          <InfoCircleOutlined
+            style={{ color: 'rgba(0, 0, 0, 0.43)', marginLeft: 4 }}
+          />
+        </Tooltip>
+      </span>
+    ),
+    children: '725',
+  },
+  { key: '4', label: '该数据更新时间', children: '2017-08-08' },
+];
+const groupItems1: DescriptionsProps['items'] = [
+  { key: '1', label: '负责人', children: '林东东' },
+  { key: '2', label: '角色码', children: '1234567' },
+  { key: '3', label: '所属部门', children: 'XX公司 - YY部' },
+  { key: '4', label: '过期时间', children: '2017-08-08' },
+  {
+    key: '5',
+    label: '描述',
+    children:
+      '这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...',
+  },
+];
+const groupItems2: DescriptionsProps['items'] = [
+  {
+    key: '1',
+    label: '学名',
+    children:
+      'Citrullus lanatus (Thunb.) Matsum. et Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..',
+  },
+];
+const groupItems3: DescriptionsProps['items'] = [
+  { key: '1', label: '负责人', children: '付小小' },
+  { key: '2', label: '角色码', children: '1234568' },
+];
+const customDot: IconRenderType = (dot: React.ReactNode, { active }) => {
+  if (active) {
+    const popoverContent = (
+      <div
+        style={{
+          width: 160,
+        }}
+      >
+        吴加号
+        <span
+          style={{
+            float: 'right',
+          }}
+        >
+          <Badge
+            status="default"
+            text={
+              <span
+                style={{
+                  color: 'rgba(0, 0, 0, 0.45)',
+                }}
+              >
+                未响应
+              </span>
+            }
+          />
+        </span>
+        <div
+          style={{
+            marginTop: 4,
+          }}
+        >
+          耗时：2小时25分钟
+        </div>
+      </div>
+    );
+    return (
+      <Popover
+        placement="topLeft"
+        arrow={{
+          pointAtCenter: true,
+        }}
+        content={popoverContent}
+      >
+        <span>{dot}</span>
+      </Popover>
+    );
+  }
+  return dot;
+};
+
 type AdvancedState = {
   operationKey: 'tab1' | 'tab2' | 'tab3';
   tabActiveKey: string;
@@ -165,25 +279,13 @@ const Advanced: FC = () => {
           className={styles.headerList}
           size="small"
           column={isMobile ? 1 : 2}
-        >
-          <Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
-          <Descriptions.Item label="订购产品">XX 服务</Descriptions.Item>
-          <Descriptions.Item label="创建时间">2017-07-07</Descriptions.Item>
-          <Descriptions.Item label="关联单据">
-            <a href="">12421</a>
-          </Descriptions.Item>
-          <Descriptions.Item label="生效日期">
-            2017-07-07 ~ 2017-08-08
-          </Descriptions.Item>
-          <Descriptions.Item label="备注">
-            请于两个工作日内确认
-          </Descriptions.Item>
-        </Descriptions>
+          items={descriptionItems}
+        />
       )}
     </RouteContext.Consumer>
   );
   const desc1 = (
-    <div className={clsx(styles.stepDescription)}>
+    <div className={styles.stepDescription}>
       曲丽丽
       <DingdingOutlined
         style={{
@@ -207,70 +309,18 @@ const Advanced: FC = () => {
       </div>
     </div>
   );
+  const stepsItems: StepsProps['items'] = [
+    { title: '创建项目', content: desc1 },
+    { title: '部门初审', content: desc2 },
+    { title: '财务复核' },
+    { title: '完成' },
+  ];
 
   const [tabStatus, seTabStatus] = useState<AdvancedState>({
     operationKey: 'tab1',
     tabActiveKey: 'detail',
   });
 
-  const customDot = (
-    dot: React.ReactNode,
-    {
-      status,
-    }: {
-      status: string;
-    },
-  ) => {
-    const popoverContent = (
-      <div
-        style={{
-          width: 160,
-        }}
-      >
-        吴加号
-        <span
-          style={{
-            float: 'right',
-          }}
-        >
-          <Badge
-            status="default"
-            text={
-              <span
-                style={{
-                  color: 'rgba(0, 0, 0, 0.45)',
-                }}
-              >
-                未响应
-              </span>
-            }
-          />
-        </span>
-        <div
-          style={{
-            marginTop: 4,
-          }}
-        >
-          耗时：2小时25分钟
-        </div>
-      </div>
-    );
-    if (status === 'process') {
-      return (
-        <Popover
-          placement="topLeft"
-          arrow={{
-            pointAtCenter: true,
-          }}
-          content={popoverContent}
-        >
-          <span>{dot}</span>
-        </Popover>
-      );
-    }
-    return dot;
-  };
-
   const { data = {}, isLoading: loading } = useQuery<AdvancedProfileData>({
     queryKey: ['profile-advanced'],
     queryFn: () => queryAdvancedProfile().then((res) => res.data),
@@ -345,15 +395,10 @@ const Advanced: FC = () => {
             <RouteContext.Consumer>
               {({ isMobile }) => (
                 <Steps
-                  direction={isMobile ? 'vertical' : 'horizontal'}
-                  progressDot={customDot}
+                  orientation={isMobile ? 'vertical' : 'horizontal'}
+                  iconRender={customDot}
                   current={1}
-                  items={[
-                    { title: '创建项目', description: desc1 },
-                    { title: '部门初审', description: desc2 },
-                    { title: '财务复核' },
-                    { title: '完成' },
-                  ]}
+                  items={stepsItems}
                 />
               )}
             </RouteContext.Consumer>
@@ -369,52 +414,15 @@ const Advanced: FC = () => {
               style={{
                 marginBottom: 24,
               }}
-            >
-              <Descriptions.Item label="用户姓名">付小小</Descriptions.Item>
-              <Descriptions.Item label="会员卡号">
-                32943898021309809423
-              </Descriptions.Item>
-              <Descriptions.Item label="身份证">
-                3321944288191034921
-              </Descriptions.Item>
-              <Descriptions.Item label="联系方式">
-                18112345678
-              </Descriptions.Item>
-              <Descriptions.Item label="联系地址">
-                曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
-              </Descriptions.Item>
-            </Descriptions>
+              items={userInfoItems}
+            />
             <Descriptions
               style={{
                 marginBottom: 24,
               }}
               title="信息组"
-            >
-              <Descriptions.Item label="某某数据">725</Descriptions.Item>
-              <Descriptions.Item label="该数据更新时间">
-                2017-08-08
-              </Descriptions.Item>
-              <Descriptions.Item
-                label={
-                  <span>
-                    某某数据
-                    <Tooltip title="数据说明">
-                      <InfoCircleOutlined
-                        style={{
-                          color: 'rgba(0, 0, 0, 0.43)',
-                          marginLeft: 4,
-                        }}
-                      />
-                    </Tooltip>
-                  </span>
-                }
-              >
-                725
-              </Descriptions.Item>
-              <Descriptions.Item label="该数据更新时间">
-                2017-08-08
-              </Descriptions.Item>
-            </Descriptions>
+              items={infoGroupItems}
+            />
             <h4
               style={{
                 marginBottom: 16,
@@ -423,50 +431,11 @@ const Advanced: FC = () => {
               信息组
             </h4>
             <Card type="inner" title="多层级信息组">
-              <Descriptions
-                style={{
-                  marginBottom: 16,
-                }}
-                title="组名称"
-              >
-                <Descriptions.Item label="负责人">林东东</Descriptions.Item>
-                <Descriptions.Item label="角色码">1234567</Descriptions.Item>
-                <Descriptions.Item label="所属部门">
-                  XX公司 - YY部
-                </Descriptions.Item>
-                <Descriptions.Item label="过期时间">
-                  2017-08-08
-                </Descriptions.Item>
-                <Descriptions.Item label="描述">
-                  这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
-                </Descriptions.Item>
-              </Descriptions>
-              <Divider
-                style={{
-                  margin: '16px 0',
-                }}
-              />
-              <Descriptions
-                style={{
-                  marginBottom: 16,
-                }}
-                title="组名称"
-                column={1}
-              >
-                <Descriptions.Item label="学名">
-                  Citrullus lanatus (Thunb.) Matsum. et
-                  Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..
-                </Descriptions.Item>
-              </Descriptions>
-              <Divider
-                style={{
-                  margin: '16px 0',
-                }}
-              />
-              <Descriptions title="组名称">
-                <Descriptions.Item label="负责人">付小小</Descriptions.Item>
-                <Descriptions.Item label="角色码">1234568</Descriptions.Item>
-              </Descriptions>
+              <Descriptions title="组名称" items={groupItems1} />
+              <Divider size="large" />
+              <Descriptions title="组名称" column={1} items={groupItems2} />
+              <Divider size="large" />
+              <Descriptions title="组名称" items={groupItems3} />
             </Card>
           </Card>
           <Card

src/pages/profile/advanced/style.style.ts

@@ -12,7 +12,6 @@ const useStyles = createStyles(({ token }) => {
     },
     stepDescription: {
       position: 'relative',
-      left: '38px',
       paddingTop: '8px',
       fontSize: '14px',
       textAlign: 'left',

src/pages/profile/basic/index.tsx

@@ -1,28 +1,25 @@
 import type { ProColumns } from '@ant-design/pro-components';
 import { PageContainer, ProTable } from '@ant-design/pro-components';
 import { useQuery } from '@tanstack/react-query';
-import { Badge, Card, Descriptions, Divider } from 'antd';
+import type { DescriptionsProps } from 'antd';
+import { Badge, Card, Descriptions, Divider, Table } from 'antd';
 import type { FC } from 'react';
 import React from 'react';
 import type { BasicGood, BasicProgress } from './data.d';
 import { queryBasicProfile } from './service';
-import useStyles from './style.style';
 
 const progressColumns: ProColumns<BasicProgress>[] = [
   {
     title: '时间',
     dataIndex: 'time',
-    key: 'time',
   },
   {
     title: '当前进度',
     dataIndex: 'rate',
-    key: 'rate',
   },
   {
     title: '状态',
     dataIndex: 'status',
-    key: 'status',
     render: (text: React.ReactNode) => {
       if (text === 'success') {
         return <Badge status="success" text="成功" />;
@@ -33,16 +30,92 @@ const progressColumns: ProColumns<BasicProgress>[] = [
   {
     title: '操作员ID',
     dataIndex: 'operator',
-    key: 'operator',
   },
   {
     title: '耗时',
     dataIndex: 'cost',
-    key: 'cost',
   },
 ];
+const goodsColumns: ProColumns<BasicGood>[] = [
+  {
+    title: '商品编号',
+    dataIndex: 'id',
+  },
+  {
+    title: '商品名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '商品条码',
+    dataIndex: 'barcode',
+  },
+  {
+    title: '单价',
+    dataIndex: 'price',
+  },
+  {
+    title: '数量（件）',
+    dataIndex: 'num',
+    align: 'right',
+  },
+  {
+    title: '金额',
+    dataIndex: 'amount',
+    align: 'right',
+  },
+];
+
+const Descriptions1: DescriptionsProps['items'] = [
+  {
+    key: '1',
+    label: '取货单号',
+    children: '1000000000',
+  },
+  {
+    key: '2',
+    label: '状态',
+    children: '已取货',
+  },
+  {
+    key: '3',
+    label: '销售单号',
+    children: '1234123421',
+  },
+  {
+    key: '4',
+    label: '子订单',
+    children: '3214321432',
+  },
+];
+const Descriptions2: DescriptionsProps['items'] = [
+  {
+    key: '1',
+    label: '用户姓名',
+    children: '付小小',
+  },
+  {
+    key: '2',
+    label: '联系电话',
+    children: '18100000000',
+  },
+  {
+    key: '3',
+    label: '常用快递',
+    children: '菜鸟仓储',
+  },
+  {
+    key: '4',
+    label: '取货地址',
+    children: '浙江省杭州市西湖区万塘路18号',
+  },
+  {
+    key: '5',
+    label: '备注',
+    children: '无',
+  },
+];
+
 const Basic: FC = () => {
-  const { styles } = useStyles();
   const { data, isLoading: loading } = useQuery({
     queryKey: ['profile-basic'],
     queryFn: () => queryBasicProfile().then((res) => res.data),
@@ -51,160 +124,15 @@ const Basic: FC = () => {
     basicGoods: [],
     basicProgress: [],
   };
-  let goodsData: typeof basicGoods = [];
-  if (basicGoods.length) {
-    let num = 0;
-    let amount = 0;
-    basicGoods.forEach((item) => {
-      num += Number(item.num);
-      amount += Number(item.amount);
-    });
-    goodsData = basicGoods.concat({
-      id: '总计',
-      num,
-      amount,
-    });
-  }
-  const renderContent = (value: any, _: any, index: any) => {
-    const obj: {
-      children: any;
-      props: {
-        colSpan?: number;
-      };
-    } = {
-      children: value,
-      props: {},
-    };
-    if (index === basicGoods.length) {
-      obj.props.colSpan = 0;
-    }
-    return obj;
-  };
-  const goodsColumns: ProColumns<BasicGood>[] = [
-    {
-      title: '商品编号',
-      dataIndex: 'id',
-      key: 'id',
-      render: (text: React.ReactNode, _: any, index: number) => {
-        if (index < basicGoods.length) {
-          return <span>{text}</span>;
-        }
-        return {
-          children: (
-            <span
-              style={{
-                fontWeight: 600,
-              }}
-            >
-              总计
-            </span>
-          ),
-          props: {
-            colSpan: 4,
-          },
-        };
-      },
-    },
-    {
-      title: '商品名称',
-      dataIndex: 'name',
-      key: 'name',
-      render: renderContent,
-    },
-    {
-      title: '商品条码',
-      dataIndex: 'barcode',
-      key: 'barcode',
-      render: renderContent,
-    },
-    {
-      title: '单价',
-      dataIndex: 'price',
-      key: 'price',
-      align: 'right' as 'left' | 'right' | 'center',
-      render: renderContent,
-    },
-    {
-      title: '数量（件）',
-      dataIndex: 'num',
-      key: 'num',
-      align: 'right' as 'left' | 'right' | 'center',
-      render: (text: React.ReactNode, _: any, index: number) => {
-        if (index < basicGoods.length) {
-          return text;
-        }
-        return (
-          <span
-            style={{
-              fontWeight: 600,
-            }}
-          >
-            {text}
-          </span>
-        );
-      },
-    },
-    {
-      title: '金额',
-      dataIndex: 'amount',
-      key: 'amount',
-      align: 'right' as 'left' | 'right' | 'center',
-      render: (text: React.ReactNode, _: any, index: number) => {
-        if (index < basicGoods.length) {
-          return text;
-        }
-        return (
-          <span
-            style={{
-              fontWeight: 600,
-            }}
-          >
-            {text}
-          </span>
-        );
-      },
-    },
-  ];
   return (
     <PageContainer>
       <Card variant="borderless">
-        <Descriptions
-          title="退款申请"
-          style={{
-            marginBottom: 32,
-          }}
-        >
-          <Descriptions.Item label="取货单号">1000000000</Descriptions.Item>
-          <Descriptions.Item label="状态">已取货</Descriptions.Item>
-          <Descriptions.Item label="销售单号">1234123421</Descriptions.Item>
-          <Descriptions.Item label="子订单">3214321432</Descriptions.Item>
-        </Descriptions>
-        <Divider
-          style={{
-            marginBottom: 32,
-          }}
-        />
-        <Descriptions
-          title="用户信息"
-          style={{
-            marginBottom: 32,
-          }}
-        >
-          <Descriptions.Item label="用户姓名">付小小</Descriptions.Item>
-          <Descriptions.Item label="联系电话">18100000000</Descriptions.Item>
-          <Descriptions.Item label="常用快递">菜鸟仓储</Descriptions.Item>
-          <Descriptions.Item label="取货地址">
-            浙江省杭州市西湖区万塘路18号
-          </Descriptions.Item>
-          <Descriptions.Item label="备注">无</Descriptions.Item>
-        </Descriptions>
-        <Divider
-          style={{
-            marginBottom: 32,
-          }}
-        />
-        <div className={styles.title}>退货商品</div>
+        <Descriptions title="退款申请" items={Descriptions1} />
+        <Divider size="large" />
+        <Descriptions title="用户信息" items={Descriptions2} />
+        <Divider size="large" />
         <ProTable
+          headerTitle="退货商品"
           style={{
             marginBottom: 24,
           }}
@@ -212,21 +140,39 @@ const Basic: FC = () => {
           search={false}
           loading={loading}
           options={false}
-          toolBarRender={false}
-          dataSource={goodsData}
+          dataSource={basicGoods}
+          ghost
           columns={goodsColumns}
           rowKey="id"
+          summary={(pageData) => {
+            let totalNum = 0;
+            let totalAmount = 0;
+            pageData.forEach(({ num, amount }) => {
+              totalNum += Number(num);
+              totalAmount += Number(amount);
+            });
+            return (
+              <Table.Summary.Row>
+                <Table.Summary.Cell index={0} colSpan={4}>
+                  <span style={{ fontWeight: 600 }}>总计</span>
+                </Table.Summary.Cell>
+                <Table.Summary.Cell index={4} align="right">
+                  <span style={{ fontWeight: 600 }}>{totalNum}</span>
+                </Table.Summary.Cell>
+                <Table.Summary.Cell index={5} align="right">
+                  <span style={{ fontWeight: 600 }}>{totalAmount}</span>
+                </Table.Summary.Cell>
+              </Table.Summary.Row>
+            );
+          }}
         />
-        <div className={styles.title}>退货进度</div>
         <ProTable
-          style={{
-            marginBottom: 16,
-          }}
+          headerTitle="退货进度"
           pagination={false}
           loading={loading}
           search={false}
           options={false}
-          toolBarRender={false}
+          ghost
           dataSource={basicProgress}
           columns={progressColumns}
         />

src/pages/profile/basic/style.style.ts

@@ -1,14 +0,0 @@
-import { createStyles } from 'antd-style';
-
-const useStyles = createStyles(({ token }) => {
-  return {
-    title: {
-      marginBottom: '16px',
-      color: token.colorTextHeading,
-      fontWeight: '500',
-      fontSize: '16px',
-    },
-  };
-});
-
-export default useStyles;

src/pages/result/success/index.tsx

@@ -3,7 +3,13 @@ import { GridContent } from '@ant-design/pro-components';
 import { Button, Card, Descriptions, Result, Steps } from 'antd';
 import useStyles from './index.style';
 
-export default () => {
+const descriptionItems = [
+  { key: 'id', label: '项目 ID', children: '23421' },
+  { key: 'owner', label: '负责人', children: '曲丽丽' },
+  { key: 'time', label: '生效时间', children: '2016-12-12 ~ 2017-12-12' },
+];
+
+const Success: React.FC = () => {
   const { styles } = useStyles();
   const desc1 = (
     <div className={styles.title}>
@@ -50,16 +56,10 @@ export default () => {
   );
   const content = (
     <>
-      <Descriptions title="项目名称">
-        <Descriptions.Item label="项目 ID">23421</Descriptions.Item>
-        <Descriptions.Item label="负责人">曲丽丽</Descriptions.Item>
-        <Descriptions.Item label="生效时间">
-          2016-12-12 ~ 2017-12-12
-        </Descriptions.Item>
-      </Descriptions>
+      <Descriptions title="项目名称" items={descriptionItems} />
       <br />
       <Steps
-        progressDot
+        type="dot"
         current={1}
         items={[
           {
@@ -72,7 +72,7 @@ export default () => {
                 创建项目
               </span>
             ),
-            description: desc1,
+            content: desc1,
           },
           {
             title: (
@@ -84,7 +84,7 @@ export default () => {
                 部门初审
               </span>
             ),
-            description: desc2,
+            content: desc2,
           },
           {
             title: (
@@ -137,3 +137,5 @@ export default () => {
     </GridContent>
   );
 };
+
+export default Success;