原型設計
愿景訴求
解決目前頁面調整交互反人類。目前頁面調整功能存在一下幾點問題：
- 預覽圖不能快速滾動。
- 預覽圖不能拖拽排序
- 不好退出頁面調整狀態(tài)
設計圖描述
為了適應用戶固有習慣，我們結合了Powerpoint和Keynote的導覽圖功能，重新設計了聲享的頁面導覽。
將原來的調整頁面按鈕提示改為頁面導覽，與slidebar中其他的功能保持一致形式，點擊后彈出slide-panel，同時在畫布上形成mask遮罩層，點擊遮罩層退出頁面導覽模式。
頁面導覽設計
如圖所示的為新的頁面導覽設計圖
- 進入頁面導覽模式的時候，應盡量保持當前頁面在導覽圖中居中顯示，并且高亮底色。
- 鼠標hover在頁面預覽圖上的時候，有綠色外發(fā)光效果。
- 點擊右鍵出現(xiàn)菜單，目前設計有四個選項。如果復制頁之后，需要選擇要粘貼的位置的上面或者下面的頁，右鍵喚出菜單后復制按鈕下多出兩個按鈕，分別是，在上方粘貼和在下方粘貼。
- 調整頁面順序方法：只調整一個頁面的時候，拖拽單獨的預覽圖調整；調整多個頁面的時候，按住command（mac）或者ctrl（windows）后鼠標點選頁面預覽圖，之后拖拽。拖拽的時候，希望可以做到頁面預覽圖跟隨按住的鼠標，移動到瀏覽器上方和下方區(qū)域的時候，滾動條可以跟隨。
寫碼前的調研
原生的scrollbar有點丑，目前調研vue-perfect-scrollbar可以使用替換。
對于拖拽的功能，可以使用vue-drag-and-drop-list實現(xiàn)?？紤]到高峰的調整圖層也需要類似功能，所以建議將這兩部分的拖拽調整順序統(tǒng)一下，提升用戶體驗。
對于右鍵菜單，可以使用vue-context-menu實現(xiàn)。
