---
group:
  title: 项目开发规范
  order: 12
title: 1.升级使用说明
---

### 列表组合应用

列表中包含筛选+表格相关的排版，统一将按钮组`buttonGroup`的配置添加到"表格StandardTable"内，并可适当的配置title

```js
import { StandardFilter, StandardTalbe, WrapperContent } from 'fan-standard-comp'
import { PageContainer } from "@ant-design/pro-components";

const PageDemo = () => {
  // 筛选栏按钮组
  const controlBtn = [
    {
      code: 'codeBtnCreate', // 新增 直接配置code可不用配置 name 与 icon
      fn: () => handleControlType('add'),
    },
  ];
  const handleControlType = (actionKey: string) => {
    console.log(actionKey)
  }
  return <PageContainer>
    <WrapperContent>
      <StandardFilter></StandardFilter>
      <StandardTalbe
        title={"设备列表"}
        buttonGroup={controlBtn}></StandardTalbe>
    </WrapperContent>
  </PageContainer>
}

export const PageDemo
```

### 关于样式

有涉及到主题变量的应用统一使用antd-style，部分不涉及到主题变化的，也可用.less。 [具体使用方法参考](/guide/theme)


### 面包屑

一级页面不显示页面所在的" 面包屑"，只有二级以上页面才需要显示


### 关于接口request返回状态码不为200时，model无法执行下去

因 umi-request 内部的逻辑处理，如果状态码不为200时，对应会被执行到`errorHandler`，无法进入`responseInterceptors`，这就会导致在现有使用 `model` 会直接抛出错误,并且对应错误将会在`app.tsx`内的`dva.config.onError`直接执行，这样就影响到之后的业务处理。

[参考:dva处理_umi项目中dva effects异常处理](https://www.cnblogs.com/wsj1/p/15747713.html)


``` 
 effects: {
   *import_device({ payload, callback }, { call }) {
        const response = yield call(services.importDevice, payload)
   // 注：response不会返回，以下内容将不会执行
        if (callback) callback(response);
    }
  }

```
解决方法：在对应的effect内加入`try{} catch()`做异常处理，在catch时将对应错误的response返回，再对应其做业务判断
``` 
 effects: {
   *import_device({ payload, callback }, { call }) {
      try {
        const response = yield call(services.importDevice, payload)
        if (callback) callback(response);
      } catch (err) {
        const { response } = err
        if (callback) callback(response.data);
      }
    }
  }

```