上一节我们以编写<code>项目列表</code>为例子，讲解了一个相对完整的demo，其实只完成了「查询」和「新增」的功能，由于篇幅和时间的关系，这些笔者都会补全，但是可能不会完全讲解，所以大家可以对照代码查看对应的代码模块。
这一节我们开始设计项目的详情页面。
在「项目列表」页面，我们只能看到项目的缩略，如果我们点进去项目的话，是需要能够看到这个项目的具体信息的。所以我们设计三个板块，以tab的形式展示:
用例树
成员列表
项目设置
在antd pro里面支持参数路由，举个例子，我们针对不同的项目要展示不同的内容，这里就要用到参数路由了。举个例子，当项目id是1的时候，我的路由可能是<code>/project/1</code>
我们创建了这样一个参数路由，并把<code>hideInMenu</code>设置为true，也就是说不显示于左侧菜单栏。同时，这个路由对应的是ProjectDetail组件。
我们目前只有一个查询「项目列表」的接口，但是我们现在是没有用例树的，所以暂时这个项目只获取到项目信息和项目角色。
ProjectRoleDao.py中新增list_role方法
通过project_id去获取这个项目的所有角色列表。
ProjectDao.py中新增query_project方法
先获取到项目详情，然后获取项目角色，这边的话笔者是没有用join或者子查询的，因为感觉sqlalchemy用起来不是很方便，大家也可以「自由发挥」。
注意，笔者会返回很多err或者None(<code>因为可能受到了go写法的影响，这里大家可以自己按照自己的方式去写</code>)
编写/project/query接口
这步很简单，老规矩先挂上权限和路由的装饰器，接着对project_id进行「参数检查」，然后生成一个空的dict，把role和project信息查询出来以后写入result。
先看下大致效果:
这边分了3个tab，第一个是用例列表，到时候会呈现一个用例树，左侧呢会根据用例的tag/用例的级别去「展示该项目下的用例」，右边呢则是用例的具体信息。
成员列表会显示这个项目下的成员，页面参考<code>Yapi</code>。
项目设置可以让用户对项目的<code>基础信息</code>进行一个更改，大概的页面功能模块是这样。
可以看到最终效果里面是没有具体的成员列表和项目设置的，我们先完成一个空壳，后续再进行补充。
代码很简短，其中设置了projectData和roles2个字段（用来存放项目信息和角色列表），然后组件加载的时候会去请求一下<code>查询项目</code>的接口，projectId我们可以通过useParams hook获取:
剩下的"html"部分很简单了，就是标准的PageContainer+卡片的组合，然后里面嵌入了3个tab。
可以看到上面有被注释掉的ProjectInfo组件，这个是我们用来修改项目信息的，我们这就来完善它！
ProjectDap.py添加update_project方法
这里值得注意的地方是，我们只有项目负责人和超级管理员可以编辑项目，所以一旦owner发生变更，则需要对权限做一个判断。最后就是记得更改<code>更新时间</code>和<code>更新人</code>。
编写/project/update接口
这边同样也先校验参数，然后调用update_project方法。
其实这里fields和之前创建项目的fields重复定义了，等于存放了2份，但是这里我图方便就没有抽出来，因为怕以后这里有什么变化（说白了就是懒，但是千万别和我一样，能封装的还是封装）
然后在组件加载的时候会获取所有用户（因为我们需要修改组员），但是我突然想到，角色列表也会获取组员身份，所以我们把user的获取放到最外层，也就是Project层，这里就不多展示了，详细可看源码。
CustomForm是自己封装的一套通用表单，里面也是解析fields然后展示表单:
大致就是把fields里面的json数据取出，然后按照顺序解析成表单，最后留一个修改的按钮，执行「保存」操作。
这里可以看到最上方的项目名称还没有进行更改，所以我们需要重新获取下项目数据。
要做的就是传入fetchData方法，并在修改后执行这个方法。
更新后
可以看到变成了QQ三国
今天的内容就到这里了，进度很慢，更新很慢。周末愉快，看RNG VS TES！
项目前端地址
项目后端地址