上一節我們以編寫<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！
項目前端位址
項目後端位址