首頁元件

路徑：【後台管理】⇒【首頁管理】⇒【元件選擇區】

首頁的版面內容是由一個個元件組合而成。管理員只要從左側 ［元件選擇區］ 將需要的元件拖曳到中央畫布，再於右側 ［元件屬性］ 調整設定，即可完成首頁的版面配置。

本章節說明各元件的適用情境與屬性設定，元件共通的樣式設定則統一整理於 元件共通屬性 一節。

1. 元件分類

系統依照元件的用途分為 基礎元件、業務元件、佈局元件、導覽列元件 四大類。

元件分類	具體元件
基礎元件	文字、按鈕、多頁籤文字列表、輪播圖、圖表、文字列表
業務元件	模型列表、我的待辦、我的常用、最近使用
佈局元件	網頁嵌入、分隔線、容器、頁籤
導覽列元件	樹形、橫向導覽列、縱向導覽列、宮格導覽列

tip

上表為 網頁版 提供的元件。切換到 手機版 設計時，業務元件會改為 ［我的圖表］、［我的待辦］、［我的常用］，導覽列元件則僅提供 ［宮格導覽列］，佈局元件與網頁版相同。

2. 元件共通屬性

每個元件的 ［元件屬性］ 面板上方都會顯示 元件 ID（例如 Carousel1、TextList1），可作為 JS 動作或 CSS 樣式取用該元件的識別碼。

基礎設定 依元件類型而異，背景樣式、邊框樣式、文字樣式、標題設定 則是多數元件共通的外觀設定，善用這些設定可讓整體首頁的視覺風格保持一致。

📌 背景樣式

設定元件的背景呈現方式。

背景顏色：設定元件的底色，預設為白色 #FFFFFF。
背景圖片：上傳圖片作為元件背景，部分元件（如輪播圖）不提供此項設定。

📌 邊框樣式

設定元件外框與圓角的呈現方式。

圓角：可選擇無、小、中、大四種圓角程度。
邊框：可選擇無、實線、虛線。
邊框粗細：設定邊框的線條寬度，預設為 1px。
邊框顏色：設定邊框的顏色。

📌 文字樣式

設定元件內文字的呈現方式。

文字顏色：設定元件中文字的顏色。
文字粗細：可選擇正常或粗體。

📌 標題設定

設定元件標題列的顯示內容與樣式。

顯示元件名稱：預設為開啟，關閉後元件將不顯示標題列。
標題名稱：輸入顯示在元件上方的標題文字。
標題圖示：選擇系統內建圖示，或上傳自訂的小圖示。
提示說明：補充說明此元件的內容，輸入後會在標題後方顯示提示圖示。
標題背景圖：上傳元件標題列的背景圖片，建議圖片高度大於 24px，支援 jpeg、png、gif 格式，檔案大小需在 200KB 以內。

設定完成後，前台會在元件上方顯示標題圖示與標題名稱。

3. 基礎元件

📌 文字

適用於需要在頁面內呈現靜態內容的情境，例如系統公告、公司簡介或使用說明等不需連動數據的文字內容。

內容：以文字編輯器輸入要呈現的內容，支援對齊方式、標題層級、字級、文字顏色、螢光標記、粗體、斜體、底線、刪除線，以及插入圖片與超連結。

📌 按鈕

適用於需要在頁面內提供快捷操作的情境，讓使用者不必進入應用即可直接執行常用動作。

按鈕名稱：顯示在按鈕上的文字。
按鈕圖示：可選擇顯示在按鈕名稱前的圖示。
移入提示：滑鼠移到按鈕上時顯示的提示文字。
操作描述：補充說明此按鈕的用途，方便後續維護時辨識。
操作設定：點選右側齒輪即可設定按鈕點選後執行的動作，包含新增數據、發起流程、查看表單、查看列表、開啟自訂頁面、執行業務規則、執行 JS 動作。
按鈕樣式：可另外設定按鈕顏色。

📌 輪播圖

適用於製作首頁的橫幅（Banner），或以圖片形式傳達重要通知的情境。

輪播圖：管理輪播的圖片清單，可點選 『＋新增圖片』 新增，並以拖曳方式調整播放順序，或直接刪除不需要的圖片。
- 點選圖片右側的編輯圖示，即可設定該張圖片的名稱、來源（上傳圖片或輸入圖片網址）、填充方式，以及點選後的跳轉行為與開啟方式。
自動輪播：開啟後圖片會自動切換，關閉則需由使用者手動翻頁。
輪播間隔：設定自動輪播的切換秒數，預設為 5 秒。

前台會在輪播圖左右兩側顯示翻頁按鈕，下方則以圓點標示目前的頁數。

📌 文字列表

適用於呈現通知、公告、待辦等條列式內容，可直接取用系統的流程數據或指定業務模型的數據。

數據源：可選擇業務模型（需再選擇具體的模型與視圖列表）、我的待辦、我的已辦、待閱、已閱、我發起的。
顯示方式：可選擇表格或摘要卡片。
顯示欄位：最多可新增 10 個欄位，每個欄位可設定顯示寬度（百分比），並以拖曳方式調整欄位順序。
顯示欄位標題：開啟後列表會顯示表頭，關閉則僅呈現數據內容。
數據限定範圍：點選齒輪設定篩選條件，前台運行時僅呈現符合條件的數據。
排序欄位：選擇作為排序依據的欄位。
排序規則：可選擇升序或降序。
列表符號：可選擇無符號或圓點。

此外，【數據開啟方式】 可設定使用者點選列表中的數據後，要在目前頁面開啟，或是另開新頁面；【自動重新整理】 則可讓列表定時更新內容，適合用於待辦、公告等需要即時掌握的數據。

📌 圖表

適用於在工作台呈現重要的統計圖表，讓使用者一進入系統就能掌握關鍵指標。

圖表來源：選擇一個既有的圖表進行展示。
數據開啟方式：設定點選圖表數據後，要在目前頁面開啟或另開新頁面。

📌 多頁籤文字列表（網頁版專屬）

適用於呈現通知、公告、申請單等內容，並依主題分成多個頁籤顯示，適合在有限版面中整合多組列表。

頁籤的管理方式與 ［頁籤］ 佈局元件相同，各頁籤內的內容設定方式則與 ［文字列表］ 相同。

4. 業務元件

業務元件本身帶有系統內建的業務邏輯，因此僅能調整外觀樣式，無法變更其運作方式。

📌 模型列表

適用於直接在首頁中呈現模型的視圖列表，讓使用者不必進入應用即可查看與操作數據。

業務模型：選擇要展示的業務模型。
模型列表：選擇該模型下要展示的視圖列表。
數據範圍：點選齒輪設定條件，限定所呈現數據的範圍。
聯動顯示：點選 『＋新增聯動顯示』，指定頁面內的其他元件作為聯動來源。當使用者在該元件中選取某筆記錄後，此列表會動態呈現與該筆記錄相關的數據；若設定多個聯動條件，則取數據的交集。
數據開啟方式：設定點選數據後，要在目前頁面開啟或另開新頁面。
自動重新整理：開啟後列表會定時更新內容。

前台呈現的列表與應用中的列表一致，包含新增、匯入、匯出、批次列印等操作按鈕，以及列高、著色、欄位設定、篩選等工具。

📌 我的待辦

呈現待辦、已辦、待閱、我發起的等流程統計數字與待辦事項清單，是使用者掌握每日工作重點的主要入口。

待辦數據限定範圍：點選齒輪，可依應用與模型限定數據範圍，前台運行時僅呈現指定應用或模型下的待辦數據。
數據開啟方式：設定點選待辦事項後，要在目前頁面開啟或另開新頁面。
自動重新整理：開啟後待辦清單會定時更新內容。

前台除了顯示各項統計數字外，也提供 『發起流程』 按鈕，可直接從工作台開啟流程。

📌 我的常用

讓使用者自行管理權限範圍內的應用、模型、表單等是否要顯示在前台，打造個人化的快捷入口。

前台會在元件標題旁顯示 『管理』 連結，使用者點選後即可選擇權限內的應用、業務模型、自訂選單、儀表板，也可以選擇 『新建表單／發起流程』 中的流程或表單。

📌 最近使用

呈現使用者最近使用過的表單或流程，可直接從此元件建立數據或發起流程，減少重複尋找的時間。

5. 佈局元件

📌 網頁嵌入

適用於在首頁中嵌入指定連結頁面的情境，例如企業官網、公告系統或其他第三方系統畫面。

頁面屬性：可選擇外部頁面或內部頁面。
連結網址：輸入要嵌入的網址。外部頁面會以 iframe 方式呈現該網址的內容；內部頁面則透過二次開發元件的方式呈現。
對連結傳參：最多可建立 10 組參數並將值傳遞給該連結，例如使用者 ID、部門 ID、角色名稱、信箱、手機號碼等。

📌 分隔線

適用於將頁面內的資訊進行分隔的情境，讓版面層次更清楚。

分隔線樣式：可設定線條樣式、線條粗細與線條顏色。
標題設定：於 【標題名稱】 輸入的文字會顯示在分隔線上。
文字樣式：除了共通的文字顏色與文字粗細外，另可設定分隔線文字的 對齊方式（靠左、置中、靠右）。

📌 容器

適用於管理頁面版面配置的情境，容器內可再拖入多個元件，方便將相關內容集中成一個區塊並統一設定外觀。

📌 頁籤

適用於需要在同一區塊中切換多組內容的版面情境，每個頁籤內都可以再放入其他元件。

頁籤：可點選 『＋新增頁籤』 新增，並以拖曳方式調整順序或直接刪除；點選編輯圖示則可修改頁籤標題與圖示。
頁籤方向：可選擇橫向或縱向。
頁籤標題位置：可選擇靠左、置中、靠右。

6. 導覽列元件

📌 樹形（網頁版專屬）

適用於需要將數據以樹狀層級呈現的情境，一般會搭配 ［模型列表］ 元件一起使用，達成「左側選擇分類、右側呈現對應數據」的操作模式。

數據源：可選擇自訂、業務模型、組織機構。
選擇根節點：指定樹狀結構要從哪一個節點開始展開。
展開／折疊圖示：可設定以箭頭、資料夾或加減號的樣式呈現展開狀態。

前台的樹形元件上方會提供搜尋框，方便使用者快速找到指定節點。

📌 宮格導覽列

適用於建立應用、模型的快捷入口，以圖示搭配文字的方式呈現，是首頁最常見的導覽形式。

導覽列：可點選 『＋新增導覽列項』 新增，並以拖曳方式調整順序或直接刪除；點選編輯圖示則可設定該項目的內容。
- 基礎資訊
  - 導覽標題：顯示在圖示下方的名稱。
  - 點選時：設定點選後的跳轉行為，可選擇連結到應用首頁、業務模型、首頁中的頁面（支援跨應用選擇）或自行輸入 URL。
  - 圖示：可選擇系統內建圖示，或上傳自訂圖示。
  - 開啟方式：可選擇目前頁面或新開頁面。
- 權限設定：設定此導覽項目的可存取權限與不可存取權限。
導覽列圖示大小：可選擇小、中、大。

在手機版設計中，宮格導覽列另外提供以下屬性，可依行動裝置的版面需求調整排列方式：

顯示方式：設定圖示與標題的排列方式，可選擇上下或左右。
每列數量：設定每一列顯示的導覽項目數量。

📌 橫向導覽列、縱向導覽列（網頁版專屬）

適用於以橫向或縱向的形式，呈現重要的導覽入口。除了導覽項目的設定方式與 ［宮格導覽列］ 相同外，另提供以下屬性：

首頁 Logo：開啟後會在導覽列顯示系統 Logo。
自訂首頁 Logo：可上傳自訂的 Logo 圖片，建議圖片高度大於 24px，支援 jpeg、png、gif 格式，檔案大小需在 200KB 以內。
功能區設定：勾選要顯示在導覽列右側的功能，包含搜尋、通知、客服平台、教學手冊、語言切換、個人資訊。
自訂功能區：可點選 『＋新增自訂功能』，於功能區加入自訂的入口。

此外，也可以在 ［首頁屬性］ 的 【主導覽列設定】 中調整 【導覽列位置】，選擇以橫向、縱向呈現，或設定為不顯示導覽列。

1. 元件分類​

2. 元件共通屬性​

📌 背景樣式​

📌 邊框樣式​

📌 文字樣式​

📌 標題設定​

3. 基礎元件​

📌 文字​

📌 按鈕​

📌 輪播圖​

📌 文字列表​

📌 圖表​

📌 多頁籤文字列表（網頁版專屬）​

4. 業務元件​

📌 模型列表​

📌 我的待辦​

📌 我的常用​

📌 最近使用​

5. 佈局元件​

📌 網頁嵌入​

📌 分隔線​

📌 容器​

📌 頁籤​

6. 導覽列元件​

📌 樹形（網頁版專屬）​

📌 宮格導覽列​

📌 橫向導覽列、縱向導覽列（網頁版專屬）​