FVS範本樣式

1.1 版本

1.2 應用場景

在建立 FVS 範本時，可提前選擇範本樣式，對範本的「主題樣式」和「組件樣式」進行預定義，提升後續範本製作效率。

1.3 功能簡介

1）範本樣式可透過「伺服器>FVS範本樣式管理」進行管理，包含 8 種內建樣式，支援建立自訂樣式。

2）建立空白看板時需選擇一種範本樣式，範本樣式為一次性應用，即編輯範本樣式不影響已使用樣式的範本。

使用建議：提前建立自訂樣式，預定義好需要的樣式，再建立範本。

2.1 建立空白看板

建立空白視覺化看板時，範本樣式展示當前伺服器下所有的「內建樣式」和「自訂樣式」，需選擇一種樣式後建立看板。

1）內建樣式：FVS 內建了 8 種主題樣式可供選擇，預設選擇「深色主題一」樣式

2）自訂樣式：若未新增過自訂樣式，會提示「暫無自訂樣式，前往FVS範本樣式管理進行新增」。

• 點選「FVS範本樣式管理」開啟彈窗，可複製內建樣式或建立新樣式進行自訂。
  

• 新增後需關閉彈窗，回到範本樣式選擇介面，點選右下角「重新整理資源」，獲取自訂的範本樣式。
  

• 已有自訂樣式時，左下角有提示「沒有合適的，去手動新增」，點選「手動新增」也可開啟範本樣式管理彈窗。

如下圖所示：

2.2 切換主題樣式

建立視覺化看板後，可透過範本右上角「切換主題樣式」按鈕，切換當前範本「主題樣式」。

• 由於範本樣式為一次性應用，所以這裏不會選中當前應用的範本樣式。

• 在「FVS範本樣式管理」中修改範本樣式不影響當前範本，若需要應用修改後「範本樣式」中的「主題樣式」，需重新選中並切換。

• 切換主題樣式面板下方「手動新增」和「重新整理資源」按鈕與建立範本時的用法一致。

3.1 功能入口

點選頂部菜單欄「伺服器>FVS範本樣式管理」，即可開啟彈窗。

3.2 內建樣式

FVS 內建了 8 種樣式，內建樣式不支援編輯、刪除等功能，僅支援複製為自訂樣式。

滑鼠懸浮樣式，點選右上角複製按鈕，即可將其複製到自訂樣式。

3.3 自訂樣式

自訂樣式介面左上角固定顯示「建立新樣式」卡片，滑鼠懸浮時，出現「從深色樣式建立」和「從淺色樣式建立」兩個按鈕，點選後彈出「範本樣式設定」彈框。

自訂樣式支援刪除、編輯和複製，滑鼠懸浮樣式，點選右上角按鈕即可進行對應操作。

範本樣式設定包括樣式名稱、預覽圖、主題樣式、組件樣式四個部分。如下圖所示：

4.1 名稱及預覽圖

1）樣式名稱不支援為空或重名。

2）預覽圖中顯示有標題、元件以及圖表範例。修改樣式配置時，預覽圖即時生效。

4.2 主題樣式

可對範本整體色系進行配置，可配置內容如下表所示：

4.3 組件樣式

可對部分組件配置內容樣式及組件樣式，可配置內容如下表所示：

4.4 樣式生效邏輯

1）「主題樣式」與「組件樣式」，存在部分相同設定項，例如元件圖示、元件高亮等。

相同設定項，可單獨修改「組件樣式」，此時「主題樣式」不變，組件按照「組件樣式」生效。

但若修改「主題樣式」，「組件樣式」會跟隨主題樣式修改。如下圖所示：

2）「組件樣式」僅在建立視覺化看板時應用於範本，建立範本後再「切換主題樣式」，僅應用新的「主題樣式」。

3）複製貼上不同樣式範本中的組件，不受當前範本樣式影響，需在「切換主題樣式」中重新選擇主題並切換。

部分組件暫時不支援配置樣式，但在深淺主題下會區分顯示。例如：

• 表格工具欄開放「工具欄背景」和「按鈕風格」設定，詳情可參見 FVS表格工具欄應用 。

• 設計器滿足 11.0.26 及之後版本，表格內容正文顏色區分深/淺主題，顯示為白色/黑色，之前版本中始終為白色。
  

• Tab組件的預設樣式選擇「聯排樣式」時，Tab 欄按鈕可跟隨主題樣式顯示。

• 元件下拉麪板的背景區分深淺主題，文字選中效果跟隨主題樣式顯示。

• 查詢面板中的元件僅「主題樣式」生效。