一、乱花迷人眼

我就是被迷的那双眼。有时候需求来了，用熟悉的套路进行开发，确实很节省时间也能保证功能的稳定，但是这些开发的惯性无形中阻碍了我对技术的探索。

我一直想改造详情页，解放重复功能开发的劳动力，但是详情页一眼望都是内容平铺，好像并没有什么可做的代码设计。

后来我拨开繁花，发现详情页的组件化不必想的过于复杂，后台系统风格统一即可。因为大部分的详情页面是内容的展示，偶尔会出现少量的操作功能。将风格统一的部分进行组件化处理，操作功能使用回调函数放回当前页面，避免组件里做过多的业务逻辑。看，这不就成了。

项目基于React框架开发的，所以代码写法是JSX语法，组件开发使用的hooks函数式组件，UI框架使用的是antd。

二、欲起高楼，先建地基

开发前进行功能设计是我逐渐养成的一个良好习惯，有时候急于开发，可能漏掉一些设计细节或者功能。这次的详情页设计主要包括四个部分，UI组件、模块划分、数据重组、操作回调。

设计的功能如下：

其中操作回调是为了实现功能性操作按钮的功能，比如取消操作、审核操作、查看等详情页常见的操作按钮。

三、设计实现

我捋了一下现有的业务，除了极个别的详情页设计的比较有自己的风格特点，其他基本都是包括2-n个模块展示数据，部分模块下会有操作按钮，某些模块下的某些数据项会有操作按钮，较长的页面会有快速定位导航等。

所以我会根据功能的复杂度递增，逐步的实现这个详情页UI组件。

注：前面功能实现我主要放关键代码，会把完整代码放在文章的末尾。

3.1 基础款详情页

纯展示，根据接口返回的字段，重组数据，之所以用重组数据的方式是因为某些数据需要特殊处理，比如时间数据，需要将时间戳转成日期格式；枚举数据，需要将返回值展示为具体文字。

3.1.1 模块划分

假设当前详情页有四个模块：用户信息、订单信息、快递信息、支付信息。四个模块内容展示有相似有不同，但是依旧可以把展示方式分成两种：一排两个的平铺展示和Table表格展示。

模块划分完成之后，页面呈现在脑海中也有了大致的结构。第一个明确的设计点也就有了，既然模块展示具有相似性。我就可以把UI渲染设计成数组循环的方式。对于不同的展示方式，可以根据模块的key值去区分定义展示类型。

详情页

根据模块的划分，定义dataList数组对象，后续页面渲染是使用dataList进行渲染的；
设置contentType-展示形式分类变量，其值为row-平铺，table-表格。会根据contentType将模块展示成不同的形式；
订单列表因为是Table格式，它的表格列的配置描述维护在常量管理文件中；

/*** @description 详情页*/importReact, { useState, useEffect } from'react';
......import { ORDER_COLUMNS } from'@/constants/detailBase';
constDetailBase= () => {
/** @name 页面内容数组对象  */letdataListInit= [
    {
key: 'userInfo', // 模块key值name: '用户信息', //模块标题    },
    {
key: 'orderList',
name: '订单信息',
columns: _.cloneDeep(ORDER_COLUMNS),
    },
    {
key: 'postInfo',
name: '快递信息',
    },
    {
key: 'payInfo',
name: '支付信息',
    },
  ];
// 列表数据重组dataListInit.map(item=> {
item.list= []; // 模块展示内容数组item.contentType='row'; // 展示形式类型 row-平铺 table-表格// =>true: 订单信息 展示为表格if (item.key==='orderList') {
item.contentType='table';
    }
  });
let [dataList, setDataList] =useState(dataListInit);
return<></>;};
exportdefaultDetailBase;

常量文件

对于常量管理，一般会放到常量文件中。（具体内容可以查看3.3.3，为了节省空间此处不再具体列出）

3.1.2 数据重组

请求详情数据，获得返回值。一般返回值都是嵌套对象的格式，所以可以将返回值的对象key值和设置的dataList中key一一对应；
根据模块设置模块的list值，最终页面渲染使用的是每个模块的list对象。contentType类型为table时，可以直接将返回值赋值给该模块的list变量；contentType类型为row时,需要进行数据的重组。（注：之所以需要重组数据是因为要特殊处理时间戳、枚举值等特殊返回值，比如时间戳要展示为日期格式，枚举值根据返回值展示文字描述等）；

/** * @description 详情页 */importReact, { useState, useEffect } from'react';
......constDetailBase= () => {
....../**   * 用户信息-展示数据重组   * @param {Object} data 需要获取的项的对象   * @return {Object} 获得的值   */constgetUserData=data=> {
letlist= [
      {
name: '姓名',
value: data.name,
      },
      {
name: '年龄',
value: data.age,
      },
      {
name: '电话',
value: data.phone,
      },
      {
name: '收货地址',
value: data.address,
      },
    ];
returnlist;
  };
/**   * 快递信息-展示数据重组   * @param {Object} data 需要获取的项的对象   * @return {Object} 获得的值   */constgetPostData=data=> {
letlist= [
      {
name: '付款单号',
value: data.postNum,
      },
      {
name: '付款公司',
value: data.postName,
      },
    ];
returnlist;
  };
/**   * 支付信息-展示数据重组   * @param {Object} data 需要获取的项的对象   * @return {Object} 获得的值   */constgetPayData=data=> {
letlist= [
      {
name: '付款时间',
value: data.payAt?moment(data.payAt).format('YYYY-MM-DD HH:mm:ss') : '',
      },
      {
name: '付款金额',
value: data.payMoney,
      },
      {
name: '操作时间',
value: data.payOperateAt?moment(data.payOperateAt).format('YYYY-MM-DD HH:mm:ss') : '',
      },
    ];
returnlist;
  };
/**   * 获取列表项的实际值   * @param {Object} item 需要获取的项的对象   * @param {Object} res 接口请求数据   * @return {Object} 获得的值   */constgetItemList= (item, data) => {
letobj= {
userInfo: getUserData(data),
postInfo: getPostData(data),
payInfo: getPayData(data),
    };
returnobj[item.key];
  };
/**   * 初始化数据   */constinitData= () => {
// 请求接口获取返回值letres= {
userInfo: {
name: '张三',
age: 30,
phone: '12345678912',
address: '北京市朝阳区',
      },
payInfo: {
payAt: 1641039600000,
payMoney: 999,
payOperateAt: 1641038400000,
      },
orderList: [
        {
name: '跑鞋·追光者',
color: '白色',
creatAt: 1641038400000,
payAt: 1641039600000,
haveFreight: 1,
        },
        {
name: '运动裤·逐梦',
color: '黑色',
creatAt: 1641038400000,
payAt: 1641039600000,
haveFreight: 1,
        },
        {
name: '外套·闪光者',
color: '蓝色',
creatAt: 1641038400000,
payAt: 1641039600000,
haveFreight: 1,
        },
      ],
postInfo: {
postName: '顺丰',
postNum: '1111',
      },
    };
letlist=_.cloneDeep(dataListInit);
// 数据重置list.map(item=> {
if (item.contentType==='table') {
item.list=res[item.key];
      } else {
letdata=res[item.key];
item.list=getItemList(item, data);
      }
    });
setDataList(list);
  };
useEffect(() => {
initData();
  }, []);
return<></>;};
exportdefaultDetailBase;

3.1.3 详情组件

因为是根据业务进行的功能设计，所以我把详情组件放到了业务组件下面。

模块的展示，使用antd提供的Card卡片组件进行页面布局；Card卡片官网地址；
row平布类型的展示，使用antd提供的Row、Col栅格组件进行页面布局；Row、Col栅格组件官网地址；
table类型的展示，使用ante提供的Table组件进行页面布局；Table组件官网地址；
组件通信，props传参为dataList数据数组对象；
注：像边距mt/mb之类的样式设置，我们的项目里面是定义的全局样式，直接使用的。

/** * @description 公共业务组件-详情 */importReactfrom'react';
importPropTypesfrom'prop-types';
import { Card, Row, Col, Table } from'antd';
constCommonDetailBase= ({ ...props }) => {
const { dataList } =props;
/**   * row类页面内容回显   * @param {Object} data 展示内容对象   * @return {Element} 展示内容   */constdataRowContent=data=> {
constlist=data.list?data.list : [];
return (
<>        {list.map((rowItem, rowIndex) => {
return (
<Colspan={12} key={rowIndex}><Cardsize='small'><div>                  {rowItem.name}：{rowItem.value}
</div></Card></Col>          );
        })}
</>    );
  };
/**   * Table类页面内容回显   * @param {Object} item 展示内容对象   * @return {Node} 展示内容   */constdataTableContent=item=> {
letlist=item.list?item.list : [];
return<TabledataSource={list} columns={item.columns} rowKey={record=>record.id} pagination={false} size='small'/>;
  };
return (
<div><divclassName='view-content'>        {dataList.map(item=> {
return (
<Cardtype='inner'title={item.name} id={item.key} key={item.key} className='mb20'>              {item.contentType==='row'?<Rowgutter={[12, 12]}>{dataRowContent(item)}</Row> : null}              {item.contentType==='table'?dataTableContent(item) : null}
              {item.moduleBottomName? (
<Buttontype='primary'onClick={() =>item.moduleBottomView(item)} className='mt20'>                  {item.moduleBottomName}
</Button>              ) : null}
</Card>          );
        })}
</div></div>  );
};
CommonDetailBase.propTypes= {
dataList: PropTypes.array, // 页面展示数组对象};
CommonDetailBase.defaultProps= {
dataList: [],
};
exportdefaultCommonDetailBase;

页面使用

/** * @description 详情页 */importReact, { useState, useEffect } from'react';
......// 引入组件import { CommonDetailBase } from'@/bundleComponents';
......constDetailBase= () => {
return<CommonDetailBasedataList={dataList} />;
};
exportdefaultDetailBase;

3.2 升级款详情页

所谓升级款，即在原来的基础上功能更丰富。比如我们的业务需求，模块下面会跟着操作按钮，页面底部会有操作按钮，页面带导航条。以及如果我们想组件功能更强，需要支持的情况更多，可以支持某个模块自定义展示。这个时候需要在原来的基础上进行功能扩展.

3.2.1 详情组件

详情组件已开发好了，新增功能只需要在原来的基础上新增代码逻辑即可

导航条，使用antd提供的Affix固钉组件，Affix固钉官网地址；

affixTabs：导航条数据对象，数组类型
afffixIndex：当前选中导航变量，字符串类型

模块可以使用自定义展示，在模块代码中加入children变量的判断，如果存在，则展示children内容，如果不存在，则按照组件中的展示；
模块底部可以添加操作按钮，支持按钮组，根据moduleBottomList数组变量的值判断，如果有值，则循环展示按钮组，如果不存在，则不展示；
数据项可以使用自定义展示，在数据项代码中加入children变量的判断，如果存在，则展示children内容，如果不存在，则按照组件中的展示；
数据项左侧可以添加操作按钮，支持按钮组，根据colBtnList数组变量的值判断，如果有值，则循环展示按钮组，如果不存在，则不展示；

/** * @description 公共业务组件-详情 */importReact, { useState } from'react';
......constCommonDetailBase= ({ ...props }) => {
const { dataList, affixTabs } =props;
/** @name 当前所在导航index值  */const [afffixIndex, setAfffixIndex] =useState(props.afffixIndex);
/** @name 是否展示导航 */consthasAffixTabs=!!affixTabs;
/**   * 快速定位方法   * @param {string} id 定位到的id值   * @return {void} 无   */constfastGo=id=> {
letelement=document.getElementById(id);
letview=document.querySelector('.view');
view.scrollTo({
top: element.offsetTop-90,
    });
  };
/**   * 右侧锚点导航-切换   * @param {Object} item 选择的导航标签   * @return {void} 无   */consttabChange=item=> {
setAfffixIndex(item.key);
fastGo(item.key);
  };
/**   * row类页面内容回显   * @param {Object} data 展示内容对象   * @return {Element} 展示内容   */constdataRowContent=data=> {
constlist=data.list?data.list : [];
return (
<>        {list.map((rowItem, rowIndex) => {
return (
<Colspan={12} key={rowIndex}><Cardsize='small'>                {rowItem.children? (
<>{rowItem.children}</>                ) : (
<div>                    {rowItem.name}：{rowItem.value}
                    {rowItem.colBtnList&&rowItem.colBtnList.map((colBtnItem, colBtnIndex) => {
return (
<ButtonclassName='ml10'type='primary'onClick={() =>colBtnItem.colBtnCallback(colBtnItem, rowItem)} key={colBtnIndex}>                            {colBtnItem.name}
</Button>                        );
                      })}
</div>                )}
</Card></Col>          );
        })}
</>    );
  };
/**   * Table类页面内容回显   * @param {Object} item 展示内容对象   * @return {Node} 展示内容   */constdataTableContent=item=> {
letlist=item.list?item.list : [];
return<TabledataSource={list} columns={item.columns} rowKey={record=>record.id} pagination={false} size='small'/>;
  };
return (
<divclassName={style['detail-base']}><divclassName='view-content'id='view'>        {dataList.map(item=> {
return (
<Cardtype='inner'title={item.name} id={item.key} key={item.key} className='mb20'>              {item.children? (
<>{item.children}</>              ) : (
<>                  {item.contentType==='row'?<Rowgutter={[12, 12]}>{dataRowContent(item)}</Row> : null}                  {item.contentType==='table'?dataTableContent(item) : null}
</>              )}
              {item.moduleBottomList&&item.moduleBottomList.map((moduleBtnItem, moduleBtnIndex) => {
return (
<ButtonclassName='mr10 mt20'type='primary'onClick={() =>moduleBtnItem.moduleBtnCallback(moduleBtnItem, item)} key={moduleBtnIndex}>                      {moduleBtnItem.name}
</Button>                  );
                })}
</Card>          );
        })}
        {/* 右侧锚点导航 */}
        {hasAffixTabs? (
<AffixoffsetTop={120} className='sider-affix'><ulclassName='affix'>              {affixTabs.map((item, index) => (
<likey={index}><divclassName={classnames('affix-item', { current: afffixIndex===item.key })} onClick={() =>tabChange(item)}>                    {item.name}
</div></li>              ))}
</ul></Affix>        ) : null}
</div></div>  );
};
CommonDetailBase.propTypes= {
dataList: PropTypes.array, // 页面展示数组对象affixTabs: PropTypes.array, // 导航数组对象afffixIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), // 导航默认定位};
CommonDetailBase.defaultProps= {
dataList: [],
};
exportdefaultCommonDetailBase;

3.2.2 导航条

导航条数据可以直接使用页面列表数据，因为定位的key和页面列表的key值做了一致性的处理；
通过设置afffixIndex的值，可以控制当前导航固定的位置；
当子组件的props传参比较复杂的时候，可以设置一个config对象，比如detailConfig包含了所有props，子组件使用时直接用...(扩展运算符)进行展开；

/** * @description 详情页 */importReact, { useState, useEffect } from'react';
......import { CommonDetailBase } from'@/bundleComponents';
constDetailBase= () => {
/** @name 页面导航  */constaffixTabs= [];
......// 列表数据重组dataListInit.map(item=> {
......// 设置导航条数据affixTabs.push(item);
  });
....../** @name 详情组件配置项  */constdetailConfig= {
afffixIndex: 'userInfo',
affixTabs: affixTabs,
dataList: dataList,
  };
return (
<div><CommonDetailBase {...detailConfig} /></div>  );
};
exportdefaultDetailBase;

3.2.3 模块下的操作按钮

moduleBottomList：模块下的按钮组数组变量，控制操作按钮组是否展示，当它有值时按钮展示，没值时按钮不展示；
moduleBottomCallback：操作按钮元素的操作回调函数，可以做一些操作处理；

/** * @description 详情页 */importReact, { useState, useEffect } from'react';
......constDetailBase= () => {
......letdataListInit= [
......    {
key: 'postInfo',
name: '快递信息',
    },
......  ];
......constinitData= () => {
letlist=_.cloneDeep(dataListInit);
list.map(item=> {
......// =>true: 快递信息 表格项处理if (item.key==='postInfo') {
item.moduleBottomList= [
          {
name: '快递详情',
moduleBtnCallback: (_, data) =>moduleBottomCallback(data, res),
          },
          {
name: '快递详情2',
moduleBtnCallback: (_, data) =>moduleBottomCallback(data, res),
          },
        ];
      }
    })
  }
......};
exportdefaultDetailBase;

3.2.4 数据项的操作按钮

colBtnList：数据项的操作按钮组，控制操作按钮是否展示，当它有值时按钮展示，没值时按钮不展示；
colBtnCallback：操作按钮元素的操作回调函数，可以做一些操作处理；

/** * @description 详情页 */importReact, { useState, useEffect } from'react';
......constDetailBase= () => {
......constgetUserData=data=> {
letlist= [
......      {
name: '收货地址',
value: data.address,
colBtnList: [
          {
name: '地址详情',
colBtnCallback: () => {
window.open('https://juejin.cn/', '_blank');
            },
          },
        ],
      },
.......
    ];
returnlist;
  };
......};
exportdefaultDetailBase;

3.2.5 模块为自定义展示

将需要自定义展示的模块对象的children值设置为需要展示的内容即可

/** * @description 详情页 */importReact, { useState, useEffect } from'react';
......constDetailBase= () => {
....../**  * 支付模块展示  * @param {Object} dafa 展示的数据对象  */constgetPayInfo=data=> {
return (
<Rowgutter={[8, 8]}>        {data.list.map((item, index) => {
return (
<Colspan={24} key={index}>              {item.name}：{item.value}
</Col>          );
        })}
</Row>    );
  };
......constinitData= () => {
......letlist=_.cloneDeep(dataListInit);
list.map(item=> {
......// =>true: 支付信息 自定义展示if (item.key==='payInfo') {
item.children=getPayInfo(item);
      }
    });
setDataList(list);
  };
......};
exportdefaultDetailBase;

3.2.6 数据项为自定义展示

将需要自定义展示的模块下的数据项对象的children值设置为需要展示的内容即可

/** * @description 详情页 */importReact, { useState, useEffect } from'react';
......constDetailBase= () => {
....../**  * 图片类型展示  * @param {Object} data 展示的数据对象  */constgetImageView=data=> {
return (
<>头像:<Buttontype="link">编辑</Button><Rowgutter={(12, 12)}><Colspan={4}><imgstyle={{ width: '80px', height: '80px', display: 'block' }} src={data.headImage} /></Col></Row></>    );
  };
......constgetUserData=data=> {
letlist= [
......      {
name: '头像',
children: getImageView(data),
      },
    ];
returnlist;
  };
......};
exportdefaultDetailBase;

以上，一个功能相对全面的详情页组件就完成了。

3.3 完整代码

3.3.1 详情页组件

/** * @description 公共业务组件-详情 */importReact, { useState } from'react';
importPropTypesfrom'prop-types';
importclassnamesfrom'classnames';
import { Button, Card, Row, Col, Table, Affix } from'antd';
importstylefrom'./style';
constCommonDetailBase= ({ ...props }) => {
const { dataList, affixTabs } =props;
/** @name 当前所在导航index值  */const [afffixIndex, setAfffixIndex] =useState(props.afffixIndex);
/** @name 是否展示导航 */consthasAffixTabs=!!affixTabs;
/**   * 快速定位方法   * @param {string} id 定位到的id值   * @return {void} 无   */constfastGo=id=> {
letelement=document.getElementById(id);
letview=document.querySelector('.view');
view.scrollTo({
top: element.offsetTop-90,
    });
  };
/**   * 右侧锚点导航-切换   * @param {Object} item 选择的导航标签   * @return {void} 无   */consttabChange=item=> {
setAfffixIndex(item.key);
fastGo(item.key);
  };
/**   * row类页面内容回显   * @param {Object} data 展示内容对象   * @return {Element} 展示内容   */constdataRowContent=data=> {
constlist=data.list?data.list : [];
return (
<>        {list.map((rowItem, rowIndex) => {
return (
<Colspan={12} key={rowIndex}><Cardsize='small'>                {rowItem.children? (
<>{rowItem.children}</>                ) : (
<div>                    {rowItem.name}：{rowItem.value}
                    {rowItem.colBtnList&&rowItem.colBtnList.map((colBtnItem, colBtnIndex) => {
return (
<ButtonclassName='ml10'type='primary'onClick={() =>colBtnItem.colBtnCallback(colBtnItem, rowItem)} key={colBtnIndex}>                            {colBtnItem.name}
</Button>                        );
                      })}
</div>                )}
</Card></Col>          );
        })}
</>    );
  };
/**   * Table类页面内容回显   * @param {Object} item 展示内容对象   * @return {Node} 展示内容   */constdataTableContent=item=> {
letlist=item.list?item.list : [];
return<TabledataSource={list} columns={item.columns} rowKey={record=>record.id} pagination={false} size='small'/>;
  };
return (
<divclassName={style['detail-base']}><divclassName='view-content'id='view'>        {dataList.map(item=> {
return (
<Cardtype='inner'title={item.name} id={item.key} key={item.key} className='mb20'>              {item.children? (
<>{item.children}</>              ) : (
<>                  {item.contentType==='row'?<Rowgutter={[12, 12]}>{dataRowContent(item)}</Row> : null}                  {item.contentType==='table'?dataTableContent(item) : null}
</>              )}
              {item.moduleBottomList&&item.moduleBottomList.map((moduleBtnItem, moduleBtnIndex) => {
return (
<ButtonclassName='mr10 mt20'type='primary'onClick={() =>moduleBtnItem.moduleBtnCallback(moduleBtnItem, item)} key={moduleBtnIndex}>                      {moduleBtnItem.name}
</Button>                  );
                })}
</Card>          );
        })}
        {/* 右侧锚点导航 */}
        {hasAffixTabs? (
<AffixoffsetTop={120} className='sider-affix'><ulclassName='affix'>              {affixTabs.map((item, index) => (
<likey={index}><divclassName={classnames('affix-item', { current: afffixIndex===item.key })} onClick={() =>tabChange(item)}>                    {item.name}
</div></li>              ))}
</ul></Affix>        ) : null}
</div></div>  );
};
CommonDetailBase.propTypes= {
dataList: PropTypes.array, // 页面展示数组对象affixTabs: PropTypes.array, // 导航数组对象afffixIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), // 导航默认定位};
CommonDetailBase.defaultProps= {
dataList: [],
};
exportdefaultCommonDetailBase;

3.3.2 完整UI

四、总结

对后台系统代码简洁之路，仍在探索中，后续想实现列表页的操作表单项的设计，这样后台系统的基础的页面能快速完成搭建。

当然了，更好的方式是搭建低代码平台，但是现有的开发精力并不能支撑完成这种复杂的开发。所以先从基础出发，逐步升级自己的技能。

前端代码简洁之路，后台系统之详情页设计

一、乱花迷人眼

二、欲起高楼，先建地基

三、设计实现

3.1 基础款详情页

3.1.1 模块划分

3.1.2 数据重组

3.1.3 详情组件

3.2 升级款详情页

3.2.1 详情组件

3.2.2 导航条

3.2.3 模块下的操作按钮

3.2.4 数据项的操作按钮

3.2.5 模块为自定义展示

3.2.6 数据项为自定义展示

3.3 完整代码

3.3.1 详情页组件

3.3.2 完整UI

四、总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

前端代码简洁之路，后台系统之详情页设计

一、乱花迷人眼

二、欲起高楼，先建地基

三、设计实现

3.1 基础款详情页

3.1.1 模块划分

3.1.2 数据重组

3.1.3 详情组件

3.2 升级款详情页

3.2.1 详情组件

3.2.2 导航条

3.2.3 模块下的操作按钮

3.2.4 数据项的操作按钮

3.2.5 模块为自定义展示

3.2.6 数据项为自定义展示

3.3 完整代码

3.3.1 详情页组件

3.3.2 完整UI

四、总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景