FVS行動端佈局

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FineVis 的相關功能。

1.1 版本

1.2 功能簡介

FVS 行動端範本的製作與預覽支援兩種佈局方式，預設佈局為「桌上端佈局」，即與 PC 端一致。

支援開啟「行動端佈局」，開啟後切換到「行動端」模式，範本編輯介面及預覽介面均遵循行動端佈局（流式佈局）規則。

1.3 相容說明

注：行動端佈局是重佈局能力的增強，並且相容了重佈局能力。

• 無論建立範本還是歷史範本，預設均不勾選「開啟行動端佈局」。

• 歷史範本在插件升級後，行動端編輯介面預設按照桌上端佈局顯示，如需在編輯器內查看行動端佈局，需手動「開啟行動端佈局」；實際預覽時，按照以前配置的是否開啟重佈局效果顯示。

• 行動端佈局在字體渲染上與歷史插件有差異，主要差異是字體字號大小，可能需要手動調節字體大小細節。

• 歷史開啟重佈局的範本，勾選「開啟行動端佈局」後再次取消勾選，會按照桌上端佈局生效。
  

進入 FVS 視覺化看板後，點選設計器頂部工具欄「範本>FVS範本設定>行動端」，即可設定行動端佈局方式。

• 預設不勾選「開啟行動端佈局」，行動端遵循桌上端佈局（保留佈局）規則，即與 PC 端保持一致。

• 勾選後，行動端編輯介面及預覽效果均遵循行動端佈局（流式佈局）規則；支援選擇「平板預覽效果」。

無論是哪種佈局，組件在行動端均遵循以下規則：

1）行動端組件預設完全繼承 PC 端組件的內容，支援對行動端組件單獨修改，修改後不再繼承 PC 端內容。

2）完全處於 PC 端畫布外的組件，在行動端畫布及組件列表中均不顯示。

3）行動端不支援「三維組件」和「擴展圖表」組件類型，該類組件在畫布中不顯示，在組件列表中自動隱藏且灰化不可選中。

4）開啟行動端佈局時，暫不支援在行動端新增、刪除組件；桌上端佈局支援新增、刪除。

範本不勾選「開啟行動端佈局」時，行動端與 PC 端共用一個佈局，區分配置項支援分別顯示。

該種佈局適用於直接使用行動端尺寸製作範本。

例如範本：銀行CEO面板.fvs，效果如下圖所示：

對應行動端效果如下圖所示：

勾選「開啟行動端佈局」時，手機端則按照行動端佈局（流式佈局）規則生效，平板預覽效果支援選擇佈局。

該種佈局適用於 PC 端範本轉行動端範本的場景。

下面以 電商銷售實時大屏.fvs 範本為例，講解關於行動端流式佈局的相關規則。

5.1 畫布顯示規則

開啟下載的範本，PC 端畫布如下圖所示：

切換到行動端後，畫布如下圖所示：

具體變化有以下幾點：

1）畫布尺寸

若 PC 端畫布尺寸寬大於等於高時，切換到行動端，畫布尺寸變更為預設 390*844 ；若寬小於高，則保持原畫布尺寸。

且提供了幾種行動端常用尺寸可供選擇，也支援自訂尺寸。

注：行動端佈局不支援配置「畫布自適應」，手機端預覽時預設為寬度鋪滿，平板端按照選擇的佈局生效。

2）分頁區域

分頁區域位置由畫布下方變更為畫布左側，包括「預覽播放設定」、「查詢面板設定」及「展開收起」按鈕。

3）組件列表

由「組件圖層」列表變更為「組件順序」列表，為畫布中組件/組合至上而下的展示順序。

且組件列表中組件操作僅支援隱藏、重新命名和行動順序，不支援刪除和鎖定。

4）組件欄

開啟行動端佈局時不支援新增組件，故組件欄隱藏組件分類圖示。

5）頂部工具欄

頂部工具欄僅保留「廢除/還原」和「對齊」，新增「調整寬度」工具，而組合、刪除均需在 PC 端實現。

注：「對齊」僅在組合/絕對畫布內選擇兩個及以上組件時有效。

6）頁面屬性

行動端頁面支援單獨設定頁面背景、頁面邊距及組件間隙。修改配置，畫布中效果即時可見。

注：組件間隙僅對最外層縱向相鄰組件或組合有效，對組合內組件、橫向相鄰組件無效。

7）快捷鍵

較 PC 端減少多個快捷鍵，列表中僅保留可用快捷鍵。如下圖所示：

5.2 組件顯示規則

5.2.1 組件展示順序

1）畫布中組件/組合預設展示順序即按照「組件順序」列表自上而下單列展示。

2）預設順序繼承 PC 端畫布從左到右、從上到下的組件/組合順序，圖層重疊時按照從頂層至底層的順序進行展示。

注：組合或絕對畫布內的組件仍按照 PC 端效果展示，表示圖層順序，而非組件展示順序；Tab 內組件為組件展示順序。

3）若調整組件寬度並列展示時，畫布中從左到右的順序即為列表中從上到下的順序。

4）在行動端調整過組件位置後，後續 PC 端新增的組件/組合均展示在行動端畫布最下方。

5）當最外層組件/組合隱藏時，下方組件向上補足空位；組合/絕對畫布內組件隱藏後保留空白位置。

5.2.2 組件寬高規則

組件寬高在畫布中的預設顯示規則如下表所示：

注：若歷史範本開啟了重佈局，組件寬高將按比例尺，不遵循下表規則。

注1：組件縮放的規則同 PC 端，組件整體的縮放不影響內容字號大小（表格除外，字號大小會按照內容自適應）。

注2：預設組件寬高未修改時，若畫布尺寸變化，無論是否勾選「啟動調整鎖定」，組件寬度均自適應佔滿整行，高度保持不變。

但修改過組件寬高後，若畫布勾選了「啟動調整鎖定」，則組件跟隨畫布等比例尺；未勾選則組件大小保持不變。

5.3 組件調整規則

5.3.1 調整組件大小

所有組件均可自由調整寬高，寬度最大值為畫布寬度，高度最大值不限。

支援透過頂部工具欄「調整寬度」或右鍵鍵出，快速調整組件寬度，可選項為畫布單行比例。如下圖所示：

注：畫布單行比例是根據頁面寬度減去內邊距的寬度進行計算的。

5.3.2 行動組件順序

支援在列表或畫布中，選中最外層組件或組合行動順序；Tab 內組件/組合也同樣支援行動順序。

• 組件縱向行動時，有自動吸附效果，產生空白高度下面的組件會自動向上吸附；

• 橫向存在空白位置的情況下，允許組件並列，但若展示不下，組件會自動按照上下展示。

5.3.3 調整組件樣式

PC 端切換至行動端佈局時，根據 5.2.2 節組件寬高規則，部分組件效果需要手動進行調整。

凡是帶有行動端 icon  的配置項，修改前預設跟隨 PC 端變化，修改後不再受 PC 端影響，且畫布中即時顯示行動端效果。

5.3.4 預覽高度自適應

Tab 、表格、網頁框、富正文以及單複選按鈕組組件，行動端新增「預覽高度自適應」配置項，且預設勾選。

勾選後，無論畫布中組件高度設定為多少，預覽時均可根據內容高度自適應；不勾選則按照設定的組件高度展示。

注1：高度自適應僅當組件佔滿整行時生效，若與其餘組件並列則不生效。

注2：組合內組件高度自適應不生效；絕對畫布內，需絕對畫布開啟重佈局高度自適應才生效。

注3：表格跑馬燈，在高度自適應不生效的情況下生效。